diff --git a/apps/web/app/components/forms/page.tsx b/apps/web/app/components/forms/page.tsx index b1882eb..cd6376d 100644 --- a/apps/web/app/components/forms/page.tsx +++ b/apps/web/app/components/forms/page.tsx @@ -86,14 +86,15 @@ function StateCard({ } const LLM_FORMS_TEXT = `ФОРМ-КОНТРОЛЫ — LLM-спецификация -Версия: v1.0 · /components/forms +Версия: v2.0 · /components/forms ТЕКСТОВОЕ ПОЛЕ (Input) CSS класс: .bb-input -Высота: ~40px (padding: 9px 12px) -border: 1.5px solid #e5e7eb · border-radius: 8px · font: Fira Sans 14px +Высота: 50px · padding: 10px 12px +border: 1px solid #ccc · border-radius: 4px · font: Fira Sans 14px +Источник: entityform input[type=text] на perm.oclinica.ru Состояния: - default: border #e5e7eb + default: border #ccc focus: border #7ecfca + box-shadow 0 0 0 3px rgba(126,207,202,0.2) error: border #dc2626 + класс .bb-error disabled: opacity 0.5 + cursor not-allowed + bg #f8f9fa @@ -101,11 +102,13 @@ border: 1.5px solid #e5e7eb · border-radius: 8px · font: Fira Sans 14px МНОГОСТРОЧНЫЙ ТЕКСТ (Textarea) CSS класс: .bb-textarea Те же состояния что у Input -min-height: 100px · resize: vertical +min-height: 100px · resize: vertical · padding: 10px 12px ВЫПАДАЮЩИЙ СПИСОК (Select) CSS класс: .bb-select -Стрелка: SVG background-image (data URI) · padding-right: 36px +Высота: 50px · padding: 10px 36px 10px 10px +Стрелка: SVG background-image (data URI) +Источник: .form-control.form-select entityform на сайте Те же состояния что у Input ФЛАЖОК (Checkbox) @@ -127,12 +130,20 @@ HTML: CSS: .bb-toggle-track / .bb-toggle-thumb HTML-аналог: +КОНТЕКСТ ПРИМЕНЕНИЯ НА САЙТЕ +Input/Select используются в entityform-блоках: + #block-entityform-block-lor-form — форма «Запишите меня!» (ЛОР) + #block-entityform-block-lor-form-2 — форма «Узнайте стоимость операции» + #block-entityform-block-surgery-form — форма хирургии +Фон формы: #b8e6ed (светло-бирюзовый) +Ширина полей: 302px (фиксированная), кнопка submit: 300px + ОБЩИЕ ПРАВИЛА ✓ Метка (label) всегда над полем, font-weight: 500 ✓ Обязательные поля помечены * красным цветом (#dc2626) ✓ Подсказка (hint) серым текстом под полем — font-size: 12px ✓ Сообщение об ошибке красным (#dc2626) под полем вместо hint -✓ Focus outline — тёмный бирюзовый #7ecfca (--brand-053m) +✓ Focus outline — бирюзовый #7ecfca (--brand-053m) ✓ Группы checkbox/radio — вертикальный список с gap: 10px ✓ Toggle — для булевых настроек включить/выключить ✕ Не использовать placeholder вместо label @@ -207,6 +218,39 @@ export default function FormsPage() { // Заблокирован `; + const codeSiteCSS = `/* ── Реальный CSS с perm.oclinica.ru ─────────────────────────── */ + +/* Базовые стили (Bootstrap override) */ +input[type=text], +input[type=email] { + padding: 0; + height: 30px; + border: 1px solid #ccc; +} + +/* Entityform-блоки: форма записи на приём / узнать стоимость */ +#block-entityform-block-lor-form input[type=text], +#block-entityform-block-lor-form-2 input[type=text], +#block-entityform-block-surgery-form input[type=text] { + height: 50px; + padding: 10px; +} + +/* Select в entityform */ +.field-name-field-lor-vrach .form-control.form-select { + height: 50px; + padding: 10px 16px; + font-size: .9em; + font-weight: bold; + font-family: 'Fira Sans'; + color: #949290; +} + +/* Webform (отдельный вид форм) — скруглений нет */ +.webform-client-form input[type=text].form-text { + border-radius: 0; +}`; + return (
{/* Заголовок */} @@ -230,10 +274,10 @@ export default function FormsPage() {
- + @@ -296,10 +340,10 @@ export default function FormsPage() {
- +