Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 AR 15 M4
|
60619114a5 | ||
|
AR 15 M4
|
d4d86e6343 | ||
|
AR 15 M4
|
5b1ace962a | ||
|
AR 15 M4
|
52f04f9f5d | ||
|
AR 15 M4
|
754056642d | ||
|
AR 15 M4
|
6ce176f970 | ||
|
AR 15 M4
|
6c5b571884 | ||
|
AR 15 M4
|
2b66fb9cc1 | ||
|
AR 15 M4
|
3811c579fd | ||
|
AR 15 M4
|
2b9319e70d | ||
|
AR 15 M4
|
d6610a288b | ||
|
AR 15 M4
|
77c9733144 | ||
|
AR 15 M4
|
c1731615ab | ||
|
AR 15 M4
|
0855892643 | ||
|
AR 15 M4
|
0198947c4e | ||
|
AR 15 M4
|
6648f16bcb | ||
|
AR 15 M4
|
761347ed85 | ||
|
AR 15 M4
|
52acdc98e2 | ||
|
AR 15 M4
|
0570b50d9f | ||
|
AR 15 M4
|
789f436be1 | ||
|
AR 15 M4
|
5298f8c1cd | ||
|
AR 15 M4
|
ff3f6acc03 | ||
|
AR 15 M4
|
39ecd72fde | ||
|
AR 15 M4
|
a715503ca5 | ||
|
AR 15 M4
|
657cc26d3e |
@@ -0,0 +1,224 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_CEO_TEXT = `
|
||||
БЛОК: Вводный текст клиники (CEO-блок)
|
||||
Источник: perm.oclinica.ru/lor — секция после баннера
|
||||
Версия: v1.0
|
||||
|
||||
НАЗНАЧЕНИЕ:
|
||||
Информационный блок под hero-баннером. Рассказывает о специализации клиники
|
||||
и вовлекает пациента через вопросы-стимулы.
|
||||
|
||||
СТРУКТУРА:
|
||||
1. Вводный абзац
|
||||
«Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
||||
с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах: ул. Цитная, 9, ул. Г. Звезда, 31а...»
|
||||
|
||||
2. Вопросы-стимулы (формат: «— Вопрос?»)
|
||||
Каждый вопрос — отдельный абзац с тире, связанный с симптомами пациентов:
|
||||
— У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?
|
||||
— Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?
|
||||
— Заболел ребёнок?
|
||||
— Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых...
|
||||
— Вам назначили проведение эндоскопической операции на ухе, горле или носе?
|
||||
|
||||
3. Заключительный абзац
|
||||
«Обращайтесь в ЛОР центр ухо, горло, нос в Перми...»
|
||||
«Будьте здоровы!»
|
||||
|
||||
ТИПОГРАФИКА:
|
||||
Шрифт: Fira Sans, 14px, line-height 1.6–1.8
|
||||
Цвет текста: #374151 (#bb-text)
|
||||
Вопросы: тот же стиль, начинаются с «—»
|
||||
Ключевые слова в тексте — обычно ссылки синего цвета (#0089c3)
|
||||
Фон блока: #ffffff, отступы 40–60px сверху и снизу
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Вопросы начинаются с «—» (тире)
|
||||
✓ Ключевые медицинские термины — ссылки #0089c3
|
||||
✓ Текст без H2 заголовка — просто связный параграф
|
||||
✕ Не добавлять маркированные списки (только тире)
|
||||
✕ Не менять стиль вопросов на другой формат
|
||||
`.trim();
|
||||
|
||||
const CEO_QUESTIONS = [
|
||||
"У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
|
||||
"Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
|
||||
"Заболел ребёнок?",
|
||||
"Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
|
||||
"Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
|
||||
];
|
||||
|
||||
export default function CeoPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Вводный текст (CEO-блок)
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок после hero-баннера на perm.oclinica.ru/lor. Описание специализации клиники
|
||||
+ вопросы-стимулы для пациентов.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8"
|
||||
style={{
|
||||
background: "#fff",
|
||||
border: "1px solid var(--bb-border)",
|
||||
fontFamily: "var(--font-web)",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.75,
|
||||
color: "#374151",
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
||||
с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
|
||||
<a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>, <a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
|
||||
Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{CEO_QUESTIONS.map((q) => (
|
||||
<p key={q}>— {q}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4">
|
||||
Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут!
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми,
|
||||
благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов.
|
||||
</p>
|
||||
<p className="mt-4 font-medium">Будьте здоровы!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Структура блока
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{
|
||||
num: "1",
|
||||
title: "Вводный абзац",
|
||||
bg: "#f0f9ff",
|
||||
desc: 'Специализация клиники, адреса. Ключевые слова — ссылки синего цвета (#0089c3).',
|
||||
},
|
||||
{
|
||||
num: "2",
|
||||
title: "Вопросы-стимулы",
|
||||
bg: "#fefce8",
|
||||
desc: 'Каждый вопрос — отдельный абзац, начинается с «—». Адресован пациенту с конкретным симптомом.',
|
||||
},
|
||||
{
|
||||
num: "3",
|
||||
title: "Заключительный абзац",
|
||||
bg: "#f0fdf4",
|
||||
desc: 'Призыв обращаться. «Будьте здоровы!» — фирменная подпись клиники.',
|
||||
},
|
||||
].map((s) => (
|
||||
<div
|
||||
key={s.num}
|
||||
className="flex gap-4 p-4 rounded-xl"
|
||||
style={{ background: s.bg, border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0"
|
||||
style={{ background: "var(--brand-053m)", color: "#fff" }}
|
||||
>
|
||||
{s.num}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{s.title}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{s.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Вопросы-стимулы */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Вопросы-стимулы (5 штук)
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{CEO_QUESTIONS.map((q, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-3 p-3 rounded-lg text-sm"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<span className="font-bold shrink-0 mt-0.5" style={{ color: "var(--brand-053m)" }}>
|
||||
—
|
||||
</span>
|
||||
<span style={{ color: "var(--bb-text)" }}>{q}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/ceo" version="v1.0" specText={LLM_CEO_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Часть", "Содержимое", "Примечание"]}
|
||||
rows={[
|
||||
["Вводный абзац", "Специализация клиники, адреса", "Ключевые слова = ссылки #0089c3"],
|
||||
["Вопросы-стимулы", "5 вопросов от лица пациента, начинаются с «—»", "Без маркированных списков"],
|
||||
["Заключение", 'Призыв обращаться + «Будьте здоровы!»', "Фирменная подпись клиники"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Типографика" />
|
||||
<LlmTable
|
||||
headers={["Параметр", "Значение"]}
|
||||
rows={[
|
||||
["Шрифт", "Fira Sans"],
|
||||
["Размер", "14px"],
|
||||
["Line-height", "1.6–1.8"],
|
||||
["Цвет текста", "#374151 (--bb-text)"],
|
||||
["Цвет ссылок в тексте", "#0089c3 (--brand-053m)"],
|
||||
["Фон блока", "#ffffff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Вопросы начинаются с «—» (длинное тире)" },
|
||||
{ ok: true, text: "Ключевые медицинские термины — ссылки #0089c3" },
|
||||
{ ok: true, text: "Фирменная подпись «Будьте здоровы!» в конце" },
|
||||
{ ok: false, text: "Не добавлять маркированные списки (•)" },
|
||||
{ ok: false, text: "Не добавлять H2 заголовок внутри блока" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_FORMS_TEXT = `
|
||||
БЛОК: Формы записи и обратной связи
|
||||
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
|
||||
Версия: v1.0
|
||||
|
||||
ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
|
||||
Позиция: после блока отзывов
|
||||
Заголовок H2: «Будьте здоровы!»
|
||||
Подзаголовок: «Запишитесь на приём к врачу!»
|
||||
Фон секции: #b8e6ed (светло-бирюзовый)
|
||||
Поля формы:
|
||||
1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
|
||||
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
||||
3. Select: «Выберите ЛОР врача» (height 50px)
|
||||
4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
||||
Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
|
||||
Ширина формы: ~400px центрирована или в колонку
|
||||
|
||||
ФОРМА 2: «Узнайте стоимость операции» (консультация)
|
||||
Позиция: после блока новостей
|
||||
Заголовок H2: «Узнайте стоимость операции»
|
||||
Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
|
||||
Фон секции: #ffffff
|
||||
Поля формы:
|
||||
1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
|
||||
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
||||
3. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
||||
Кнопка: «Перезвоните мне» — стиль bb-btn-primary (#FFA39C)
|
||||
|
||||
ОБЩИЕ ПРАВИЛА:
|
||||
— Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
|
||||
— Чекбокс обязателен в обеих формах
|
||||
— Кнопка отправки: всегда bb-btn-primary (#FFA39C)
|
||||
— Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Чекбокс согласия обязателен в каждой форме
|
||||
✓ Кнопки отправки: bb-btn-primary (#FFA39C)
|
||||
✓ Форма 1 на фоне #b8e6ed
|
||||
✕ Не менять порядок полей
|
||||
✕ Не убирать чекбокс согласия
|
||||
`.trim();
|
||||
|
||||
export default function ContactFormsPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Формы записи
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Форма 1: Будьте здоровы */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Форма 1 — «Будьте здоровы!»
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фон секции: #b8e6ed. Запись на приём к врачу.
|
||||
</p>
|
||||
<div
|
||||
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
|
||||
style={{ background: "#b8e6ed" }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
|
||||
Будьте здоровы!
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151" }}>
|
||||
Запишитесь на приём к врачу!
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full max-w-sm space-y-3">
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Введите ваше имя"
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="tel"
|
||||
placeholder="Введите ваш телефон"
|
||||
readOnly
|
||||
/>
|
||||
<select className="bb-select" disabled>
|
||||
<option>Выберите ЛОР врача</option>
|
||||
</select>
|
||||
<label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
|
||||
<input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
|
||||
<span>
|
||||
Отправляя данные, я даю согласие на обработку персональных данных
|
||||
</span>
|
||||
</label>
|
||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
||||
Запишите меня!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Форма 2: Узнайте стоимость */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Форма 2 — «Узнайте стоимость операции»
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фон секции: #ffffff. Запрос консультации по стоимости.
|
||||
</p>
|
||||
<div
|
||||
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
|
||||
Узнайте стоимость операции
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151" }}>
|
||||
Проконсультируйтесь с ассистентом хирурга
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full max-w-sm space-y-3">
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Введите ваше имя"
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="tel"
|
||||
placeholder="Введите ваш телефон"
|
||||
readOnly
|
||||
/>
|
||||
<label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
|
||||
<input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
|
||||
<span>
|
||||
Отправляя данные, я даю согласие на обработку персональных данных
|
||||
</span>
|
||||
</label>
|
||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
||||
Перезвоните мне
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Сравнение двух форм */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Сравнение двух форм
|
||||
</h2>
|
||||
<div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--bb-border)" }}>
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Параметр</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 1 «Будьте здоровы!»</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 2 «Стоимость операции»</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
|
||||
["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
|
||||
["Фон секции", "#b8e6ed", "#ffffff"],
|
||||
["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
|
||||
["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
|
||||
["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
|
||||
].map(([param, f1, f2]) => (
|
||||
<tr key={param} style={{ borderTop: "1px solid var(--bb-border)" }}>
|
||||
<td className="px-4 py-2 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{param}</td>
|
||||
<td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f1}</td>
|
||||
<td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f2}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact-forms" version="v1.0" specText={LLM_FORMS_TEXT}>
|
||||
<LlmSection title="Форма 1 — Запись на приём" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Тип", "Placeholder"]}
|
||||
rows={[
|
||||
["Имя", "input[type=text]", "«Введите ваше имя»"],
|
||||
["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
|
||||
["Врач", "select", "«Выберите ЛОР врача»"],
|
||||
["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
|
||||
["Кнопка", "button bb-btn-primary", "«Запишите меня!»"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Форма 2 — Запрос стоимости" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Тип", "Placeholder"]}
|
||||
rows={[
|
||||
["Имя", "input[type=text]", "«Введите ваше имя»"],
|
||||
["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
|
||||
["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
|
||||
["Кнопка", "button bb-btn-primary", "«Перезвоните мне»"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Форма 1: фон #b8e6ed, форма 2: фон #fff" },
|
||||
{ ok: true, text: "Чекбокс согласия обязателен в каждой форме" },
|
||||
{ ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" },
|
||||
{ ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" },
|
||||
{ ok: false, text: "Не убирать чекбокс согласия на обработку данных" },
|
||||
{ ok: false, text: "Не менять стиль кнопки на outline или teal" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: "О клинике",
|
||||
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
||||
},
|
||||
{
|
||||
title: "Заболевания",
|
||||
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
||||
},
|
||||
{
|
||||
title: "Вопрос-ответ",
|
||||
links: [
|
||||
"Что нужно знать до операции на ухо",
|
||||
"Что нужно знать до операции на нос",
|
||||
"Отзывы до и после лечения у детей",
|
||||
"Что нужно знать при лечении у детей",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Операции",
|
||||
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_FOOTER_TEXT = `
|
||||
БЛОК: Подвал сайта (Footer)
|
||||
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА ПОДВАЛА:
|
||||
|
||||
1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
|
||||
Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
|
||||
Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
|
||||
Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
|
||||
Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.
|
||||
|
||||
2. НИЖНЯЯ ПОЛОСА:
|
||||
Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
|
||||
Центр:
|
||||
— «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
|
||||
— Иконки соцсетей: VK, OK, YouTube, Telegram и другие
|
||||
Правая: Часы работы:
|
||||
— Пн-пт: 9:00–21:00
|
||||
— Сб: 9:00–18:00
|
||||
— Вс: выходной
|
||||
— Вторая клиника часы отдельно
|
||||
|
||||
ЦВЕТА:
|
||||
Фон подвала: #fff или светло-серый (#f8f9fa)
|
||||
Заголовки колонок: #111827, font-weight 600
|
||||
Ссылки: #53514e (--brand-073m), hover: #0089c3
|
||||
Разделитель: border-top 1px solid #e5e7eb
|
||||
Часы работы: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 колонки ссылок в основной части
|
||||
✓ Логотип в нижней полосе слева
|
||||
✓ Адрес + соцсети в центре нижней полосы
|
||||
✓ Часы работы справа
|
||||
✕ Не менять структуру 4 колонок
|
||||
`.trim();
|
||||
|
||||
export default function ContactFooterPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Подвал (Footer)
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden"
|
||||
style={{ border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* 4 колонки ссылок */}
|
||||
<div
|
||||
className="grid grid-cols-4 gap-6 p-8"
|
||||
style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
|
||||
>
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div key={col.title}>
|
||||
<p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<ul className="space-y-1.5">
|
||||
{col.links.map((link) => (
|
||||
<li key={link}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-xs bb-nav-link"
|
||||
style={{ color: "#53514e", textDecoration: "none" }}
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Нижняя полоса */}
|
||||
<div
|
||||
className="flex items-start justify-between gap-6 px-8 py-5"
|
||||
style={{ background: "#fff" }}
|
||||
>
|
||||
{/* Логотип */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
|
||||
style={{ background: "#0089c3" }}
|
||||
>
|
||||
✚
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-[10px] font-bold uppercase leading-tight"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
Клиника<br />ухо, горло, нос
|
||||
</div>
|
||||
<div className="text-[8px] leading-tight" style={{ color: "#9ca3af" }}>
|
||||
им. проф. Е.Н.Оленевой
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Адрес и соцсети */}
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs" style={{ color: "#374151" }}>
|
||||
Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{["VK", "OK", "YT", "TG"].map((s) => (
|
||||
<a
|
||||
key={s}
|
||||
href="#"
|
||||
className="text-[11px] px-2 py-1 rounded"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
{s}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Часы работы */}
|
||||
<div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
|
||||
<p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
|
||||
Часы работы:
|
||||
</p>
|
||||
<p>Пн–пт: 9:00–21:00</p>
|
||||
<p>Сб: 9:00–18:00</p>
|
||||
<p>Вс: выходной</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Колонки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Четыре колонки ссылок
|
||||
</h2>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div
|
||||
key={col.title}
|
||||
className="rounded-xl p-3 space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{col.links.length} ссылок
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact" version="v1.0" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmSection title="Структура подвала" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Содержимое", "Фон"]}
|
||||
rows={[
|
||||
["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
|
||||
["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
|
||||
["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
|
||||
["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Часы работы" />
|
||||
<LlmTable
|
||||
headers={["День", "Часы"]}
|
||||
rows={[
|
||||
["Пн–пт", "9:00–21:00"],
|
||||
["Сб", "9:00–18:00"],
|
||||
["Вс", "выходной"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Заголовки колонок", "#111827, font-weight 600", "—"],
|
||||
["Ссылки (default)", "#53514e", "--brand-073m"],
|
||||
["Ссылки (hover)", "#0089c3", "--brand-053m"],
|
||||
["Фон основной части", "#f8f9fa", "—"],
|
||||
["Фон нижней полосы", "#ffffff", "—"],
|
||||
["Разделитель", "1px solid #e5e7eb", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
|
||||
{ ok: true, text: "Логотип в нижней полосе слева" },
|
||||
{ ok: true, text: "Адрес и соцсети в центре" },
|
||||
{ ok: true, text: "Часы работы справа" },
|
||||
{ ok: false, text: "Не менять структуру и порядок 4 колонок" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const STATS = [
|
||||
{ num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
|
||||
{ num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
|
||||
{ num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
|
||||
];
|
||||
|
||||
const DOCTORS = [
|
||||
{
|
||||
name: "Макарова Людмила Германовна",
|
||||
spec: "ЛОР врач, сурдолог",
|
||||
photo: "/doctors/makarova.jpg",
|
||||
},
|
||||
{
|
||||
name: "Семерикова Наталия Александровна",
|
||||
spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
|
||||
photo: "/doctors/semerikova.png",
|
||||
},
|
||||
{
|
||||
name: "Ворончихина Наталия Валерьевна",
|
||||
spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
|
||||
photo: "/doctors/voronchikhina.png",
|
||||
},
|
||||
{
|
||||
name: "Лобанова Ирина Юрьевна",
|
||||
spec: "ЛОР врач, сурдолог",
|
||||
photo: "/doctors/lobanova.jpg",
|
||||
},
|
||||
{
|
||||
name: "Торсунова Наталья Сергеевна",
|
||||
spec: "Специалист по слухопротезированию (сурдоакустик)",
|
||||
photo: "/doctors/torsunova.jpg",
|
||||
},
|
||||
{
|
||||
name: "Суворова Светлана Викторовна",
|
||||
spec: "ЛОР врач, сурдолог",
|
||||
photo: "/doctors/suvorova.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_DOCTORS_TEXT = `
|
||||
БЛОК: Наши врачи
|
||||
Источник: perm.oclinica.ru/lor — блок под CEO-текстом
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
|
||||
Подзаголовок: описание принципа работы врачей клиники
|
||||
|
||||
2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
|
||||
— «Ежедневно 27 ЛОР врачей работают в клинике»
|
||||
— «В том числе 6 кандидатов медицинских наук»
|
||||
— «Свыше 12 000 успешно проведённых операций»
|
||||
Стиль: весь текст #60959c, bold, ~18px. Фона НЕТ. Снизу border-bottom 3px solid #60959c
|
||||
|
||||
3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 6 в ряд):
|
||||
Каждая карточка:
|
||||
— Фото врача 110×150px, object-fit: cover, object-position: center top, border-radius 4px
|
||||
— Имя (12px, font-weight 500, цвет #60959c)
|
||||
— Специализация (11px, #374151)
|
||||
Карточки без рамки, gap минимальный
|
||||
|
||||
ЦВЕТА:
|
||||
Заголовок H2: #111827, ~30px (text-3xl)
|
||||
Статистика текст: #60959c (серо-бирюзовый)
|
||||
Статистика черта: border-bottom 3px solid #60959c
|
||||
Имя врача: #60959c
|
||||
Специализация: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Заголовок H2 + описание обязательны
|
||||
✓ 3 stat-блока в ряд
|
||||
✓ Сетка 3 колонки, 2 ряда (6 карточек)
|
||||
✕ Не отображать более 6 врачей в основном блоке
|
||||
✕ Не убирать статистику
|
||||
`.trim();
|
||||
|
||||
export default function DoctorsBlockPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Блок «Наши врачи»
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-8"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}>
|
||||
Приём ведут опытные ЛОР врачи
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
|
||||
Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
|
||||
с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Статистика — текст тёмно-бирюзовым, без фоновых блоков */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{STATS.map((s) => (
|
||||
<div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
|
||||
<p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
|
||||
{s.prefix} {s.num} {s.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Сетка врачей — плотнее, имена тёмно-бирюзовым */}
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
{DOCTORS.map((doc) => (
|
||||
<div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={doc.photo}
|
||||
alt={doc.name}
|
||||
style={{
|
||||
width: 110,
|
||||
height: 150,
|
||||
objectFit: "cover",
|
||||
objectPosition: "center top",
|
||||
borderRadius: 4,
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-medium leading-snug"
|
||||
style={{ color: "#60959c" }}
|
||||
>
|
||||
{doc.name}
|
||||
</p>
|
||||
<p
|
||||
className="text-[11px] mt-0.5 leading-snug"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{doc.spec}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Стат-блоки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Блок статистики
|
||||
</h2>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{STATS.map((s) => (
|
||||
<div
|
||||
key={s.num}
|
||||
className="pb-3 space-y-1"
|
||||
style={{ borderBottom: "3px solid #60959c" }}
|
||||
>
|
||||
<p className="text-base font-bold leading-snug" style={{ color: "#60959c" }}>
|
||||
{s.prefix} {s.num} {s.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
цвет текста: #60959c · черта: 3px solid #60959c
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||
rows={[
|
||||
["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"],
|
||||
["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
|
||||
["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
|
||||
["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Три показателя" />
|
||||
<LlmTable
|
||||
headers={["Число", "Описание"]}
|
||||
rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])}
|
||||
/>
|
||||
<LlmSection title="6 врачей слайдера (perm.oclinica.ru/lor)" />
|
||||
<LlmTable
|
||||
headers={["Имя", "Специализация"]}
|
||||
rows={DOCTORS.map((d) => [d.name, d.spec])}
|
||||
/>
|
||||
<LlmSection title="Карточка врача" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Размер / Стиль"]}
|
||||
rows={[
|
||||
["Фото", "88×120px (в блоке) или 110×160px (на странице врачей), object-fit: cover"],
|
||||
["Имя", "12–14px, font-weight 500, #111827"],
|
||||
["Специализация", "11–12px, #6b7280"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "H2 + описание обязательны" },
|
||||
{ ok: true, text: "3 stat-блока в ряд, фон #dff0fa" },
|
||||
{ ok: true, text: "Сетка 6 карточек (3 колонки)" },
|
||||
{ ok: false, text: "Не показывать более 6 врачей в основном блоке" },
|
||||
{ ok: false, text: "Не убирать статистику" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_HERO_TEXT = `
|
||||
БЛОК: Hero-баннер (главный баннер страницы)
|
||||
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
|
||||
Версия: v1.1
|
||||
|
||||
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
||||
«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
||||
Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
|
||||
|
||||
СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
|
||||
Левая колонка (~50%):
|
||||
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
|
||||
Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
|
||||
— 3 пункта с галочками (✓ зелёный):
|
||||
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
|
||||
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
|
||||
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
|
||||
Ключевое слово: uppercase bold; описание: обычный текст, ~13px
|
||||
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
|
||||
Правая колонка (~50%):
|
||||
— Фото врача с пациентом
|
||||
— Изображение занимает всю высоту блока
|
||||
|
||||
ПОД БАННЕРОМ:
|
||||
— Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
|
||||
— Счётчик просмотров
|
||||
|
||||
ЦВЕТА:
|
||||
Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
|
||||
Кнопка CTA: outline-стиль (светлая), не коралловая
|
||||
Заголовок блока: #111827
|
||||
Пункты: ключевое слово #111827 bold, описание #374151
|
||||
Галочка: цвет бренда (бежевый/золотой ~#bf9975)
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
|
||||
✓ Заголовок блока uppercase, жирный
|
||||
✓ Три пункта с галочками обязательны
|
||||
✕ Не менять фон баннера на другой цвет
|
||||
✕ Не разбивать фон на два разных цвета
|
||||
✕ Не убирать три пункта с галочками
|
||||
`.trim();
|
||||
|
||||
const HERO_CHECKS = [
|
||||
{
|
||||
key: "БЕЗОПАСНО",
|
||||
desc: "оперируют хирурги с 15-летним опытом работы",
|
||||
},
|
||||
{
|
||||
key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ",
|
||||
desc: "хирургия смяткими размерами",
|
||||
},
|
||||
{
|
||||
key: "БЫСТРО",
|
||||
desc: "под наблюдением врача пациент находится 1 сутки",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HeroPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Hero-баннер
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
|
||||
{/* H1 страницы */}
|
||||
<h2
|
||||
className="text-xl font-bold leading-snug"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
|
||||
</h2>
|
||||
|
||||
{/* Баннер — единый светло-кремовый фон */}
|
||||
<div
|
||||
className="rounded-xl overflow-hidden flex"
|
||||
style={{ background: "#f9f4e7", minHeight: 280 }}
|
||||
>
|
||||
{/* Левая часть — контент на кремовом фоне */}
|
||||
<div
|
||||
className="flex flex-col justify-center gap-5 p-8"
|
||||
style={{ width: "50%", flexShrink: 0 }}
|
||||
>
|
||||
<p
|
||||
className="text-base font-bold uppercase leading-snug"
|
||||
style={{ color: "#111827" }}
|
||||
>
|
||||
Эндоскопическое хирургическое лечение ЛОР органов
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{HERO_CHECKS.map((c) => (
|
||||
<li key={c.key} className="flex items-start gap-2 text-sm">
|
||||
<span
|
||||
className="shrink-0 font-bold"
|
||||
style={{ color: "#bf9975", marginTop: 1 }}
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-bold uppercase" style={{ color: "#111827" }}>
|
||||
{c.key}
|
||||
</span>{" "}
|
||||
<span style={{ color: "#374151" }}>– {c.desc}</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<button className="bb-btn bb-btn-md bb-btn-outline">
|
||||
Узнать стоимость операции
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть — фото врача */}
|
||||
<div
|
||||
className="flex-1 relative overflow-hidden"
|
||||
style={{ minHeight: 280 }}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/hero-doctor.jpg"
|
||||
alt="Врач на приёме с пациентом"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
objectPosition: "center top",
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Под баннером: соцсети */}
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<span className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Поделиться:
|
||||
</span>
|
||||
{["VK", "FB", "TW"].map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
className="text-xs px-2 py-1 rounded"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-xs ml-2" style={{ color: "var(--bb-text-muted)" }}>
|
||||
👁 98 573 просмотра
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия баннера
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-5 space-y-2"
|
||||
style={{ background: "#f5f0e8", border: "1px solid #d5cfbd" }}
|
||||
>
|
||||
<p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Весь баннер — единый фон <span className="font-mono">#f9f4e7</span>
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{[
|
||||
"Фон: #f9f4e7 (светло-кремовый) — одинаковый для всего блока",
|
||||
"Левая половина (~50%): заголовок uppercase bold + 3 галочки + кнопка outline",
|
||||
"Правая половина (~50%): фото врача с пациентом",
|
||||
"Минимальная высота: ~280px",
|
||||
].map((item) => (
|
||||
<li key={item} className="text-xs flex items-start gap-1.5">
|
||||
<span style={{ color: "var(--brand-053m)" }}>·</span>
|
||||
<span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Пункты с галочками */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Три пункта баннера
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{HERO_CHECKS.map((c) => (
|
||||
<div
|
||||
key={c.key}
|
||||
className="flex items-start gap-3 p-3 rounded-lg"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<span className="font-bold text-lg shrink-0" style={{ color: "#22c55e" }}>
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="text-sm font-bold uppercase" style={{ color: "#111827" }}>
|
||||
{c.key}
|
||||
</span>
|
||||
<span className="text-sm" style={{ color: "#374151" }}>
|
||||
{" "}– {c.desc}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}>
|
||||
<LlmSection title="Структура баннера" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
||||
rows={[
|
||||
["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
|
||||
["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
|
||||
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
|
||||
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Три пункта баннера" />
|
||||
<LlmTable
|
||||
headers={["Ключевое слово", "Описание"]}
|
||||
rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
|
||||
["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
|
||||
["Заголовок блока", "#111827", "—"],
|
||||
["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
|
||||
{ ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
|
||||
{ ok: true, text: "Заголовок: uppercase, bold" },
|
||||
{ ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
|
||||
{ ok: false, text: "Не менять фон баннера на другой цвет" },
|
||||
{ ok: false, text: "Не разбивать баннер на два разных цвета фона" },
|
||||
{ ok: false, text: "Не убирать три пункта с галочками" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_NEWS = [
|
||||
{
|
||||
date: "20.12.2025",
|
||||
title: "Наша работа клиники и новогодние праздники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.08.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "12.06.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.06.2025",
|
||||
title: "График работы клиники в ближайшие праздники",
|
||||
href: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_NEWS_TEXT = `
|
||||
БЛОК: Новости
|
||||
Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Новости»
|
||||
Выравнивание: по центру или слева
|
||||
|
||||
2. СЕТКА КАРТОЧЕК НОВОСТЕЙ (4 штуки в ряд):
|
||||
Каждая карточка:
|
||||
— Дата: малый текст сверху (формат DD.MM.YYYY), цвет #6b7280
|
||||
— Заголовок новости: синяя ссылка (#0089c3), 14px, font-weight 500, hover underline
|
||||
— Без превью-изображения
|
||||
— Без описания (только дата + заголовок-ссылка)
|
||||
Hover на карточке: bg #eef4d1, box-shadow 0 0 16px 0 #9e9e9a (bb-news-card)
|
||||
|
||||
3. КНОПКА «Все новости»:
|
||||
Стиль: outline (#BF9975) или teal (#60959c), выровнена по центру под сеткой
|
||||
На сайте: ссылка «Все новости»
|
||||
|
||||
ЦВЕТА:
|
||||
Дата: #6b7280
|
||||
Заголовок-ссылка: #0089c3 (--brand-053m)
|
||||
Hover фон карточки: #eef4d1
|
||||
Hover тень: 0 0 16px 0 #9e9e9a
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 карточки в ряд
|
||||
✓ Дата сверху карточки
|
||||
✓ Заголовок = ссылка #0089c3
|
||||
✓ Hover: bg #eef4d1 (класс bb-news-card)
|
||||
✓ Кнопка «Все новости» под сеткой
|
||||
✕ Не добавлять изображения в карточки новостей главной страницы
|
||||
✕ Не добавлять описание/анонс в карточку
|
||||
`.trim();
|
||||
|
||||
export default function NewsBlockPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Блок «Новости»
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка),
|
||||
кнопка «Все новости».
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<h2 className="text-xl font-bold" style={{ color: "#111827" }}>
|
||||
Новости
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{MOCK_NEWS.map((n) => (
|
||||
<div
|
||||
key={n.date}
|
||||
className="bb-news-card rounded-lg p-3 cursor-pointer"
|
||||
style={{
|
||||
border: "1px solid var(--bb-border)",
|
||||
transition: "background 0.15s, box-shadow 0.15s",
|
||||
}}
|
||||
>
|
||||
<p className="text-xs mb-2" style={{ color: "#6b7280" }}>
|
||||
{n.date}
|
||||
</p>
|
||||
<a
|
||||
href={n.href}
|
||||
className="text-sm font-medium leading-snug block"
|
||||
style={{ color: "#0089c3", textDecoration: "none" }}
|
||||
>
|
||||
{n.title}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<button className="bb-btn bb-btn-md bb-btn-outline">
|
||||
Все новости
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия карточки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия карточки новости
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-6 max-w-xs"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
① Дата: DD.MM.YYYY · цвет #6b7280
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
② Заголовок-ссылка · #0089c3 · font-weight 500
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#fefce8", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Нет изображений, нет описания — только дата и заголовок.
|
||||
CSS-класс <code className="font-mono">.bb-news-card</code> обрабатывает hover.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}>
|
||||
<LlmSection title="Структура карточки новости" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Стиль", "Значение"]}
|
||||
rows={[
|
||||
["Дата", "text-xs, #6b7280", "Формат DD.MM.YYYY"],
|
||||
["Заголовок", "text-sm, font-weight 500, #0089c3", "Ссылка на новость"],
|
||||
["Hover фон", ".bb-news-card:hover", "#eef4d1"],
|
||||
["Hover тень", ".bb-news-card:hover", "0 0 16px 0 #9e9e9a"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Mock-данные (4 реальные новости с сайта)" />
|
||||
<LlmTable
|
||||
headers={["Дата", "Заголовок"]}
|
||||
rows={MOCK_NEWS.map((n) => [n.date, n.title])}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 карточки в ряд (grid-cols-4)" },
|
||||
{ ok: true, text: "Дата сверху, заголовок-ссылка ниже" },
|
||||
{ ok: true, text: "Hover: класс bb-news-card (bg #eef4d1)" },
|
||||
{ ok: true, text: "Кнопка «Все новости» под сеткой (bb-btn-outline)" },
|
||||
{ ok: false, text: "Не добавлять изображения в карточки" },
|
||||
{ ok: false, text: "Не добавлять текст-анонс в карточку" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_REVIEWS = [
|
||||
{
|
||||
text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
|
||||
author: "Пациент клиники",
|
||||
doctor: "Тимофеева Наталья Александровна",
|
||||
},
|
||||
{
|
||||
text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
|
||||
author: "Наталья К.",
|
||||
doctor: "Макарова Людмила Тимофеевна",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_REVIEWS_TEXT = `
|
||||
БЛОК: Отзывы о нас
|
||||
Источник: perm.oclinica.ru/lor — блок отзывов
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Отзывы о нас»
|
||||
Подзаголовок: «За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50000 пациентов. Но дня сейчас мы высоко ценим каждый положительный отзыв и искренние слова благодарности»
|
||||
|
||||
2. КАРУСЕЛЬ ОТЗЫВОВ:
|
||||
— Большая открывающая кавычка (« «) в цвете #b8e6ed, font-size 80–100px
|
||||
— Текст отзыва: курсив, 15–16px, #374151, background #eef4d1
|
||||
— Ссылка «Читать отзыв полностью» в цвете #0089c3
|
||||
— Стрелки навигации < > по бокам (round buttons)
|
||||
— Карусель показывает 1 отзыв за раз
|
||||
|
||||
ЦВЕТА:
|
||||
Фон карточки отзыва: #eef4d1 (светло-жёлто-зелёный)
|
||||
Кавычка: #b8e6ed (светло-бирюзовый)
|
||||
Текст отзыва: #374151
|
||||
Ссылка «Читать полностью»: #0089c3
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон карточки отзыва: #eef4d1 (тот же что у ReviewCard)
|
||||
✓ Большая декоративная кавычка
|
||||
✓ Ссылка «Читать отзыв полностью» обязательна
|
||||
✓ Навигация карусели (стрелки)
|
||||
✕ Не показывать более 1 отзыва за раз в карусели
|
||||
✕ Не убирать навигационные стрелки
|
||||
`.trim();
|
||||
|
||||
export default function ReviewsBlockPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Блок «Отзывы о нас»
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
|
||||
Отзывы о нас
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
|
||||
За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв
|
||||
и искренние слова благодарности.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Карусель (статичная) */}
|
||||
<div className="relative flex items-center gap-4">
|
||||
{/* Стрелка влево */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Карточка отзыва */}
|
||||
<div
|
||||
className="flex-1 rounded-xl p-6 relative"
|
||||
style={{ background: "#eef4d1" }}
|
||||
>
|
||||
{/* Декоративная кавычка */}
|
||||
<div
|
||||
className="text-8xl leading-none mb-2 font-serif"
|
||||
style={{ color: "#b8e6ed", lineHeight: 0.8 }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{MOCK_REVIEWS[0].text}
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-block mt-3 text-sm"
|
||||
style={{ color: "#0089c3" }}
|
||||
>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Стрелка вправо */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Несколько примеров */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Примеры отзывов (mock)
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{MOCK_REVIEWS.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl p-5 space-y-3"
|
||||
style={{ background: "#eef4d1", border: "1px solid #d4e6a0" }}
|
||||
>
|
||||
<div
|
||||
className="text-5xl leading-none font-serif"
|
||||
style={{ color: "#b8e6ed" }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{r.text}
|
||||
</p>
|
||||
<div className="pt-1">
|
||||
<a href="#" className="text-sm" style={{ color: "#0089c3" }}>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
<div className="border-t pt-2" style={{ borderColor: "#c8d8a0" }}>
|
||||
<p className="text-xs font-medium" style={{ color: "#374151" }}>
|
||||
{r.author}
|
||||
</p>
|
||||
<p className="text-[11px]" style={{ color: "#6b7280" }}>
|
||||
о враче: {r.doctor}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия карточки отзыва
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: "Фон карточки", value: "#eef4d1", note: "светло-жёлто-зелёный" },
|
||||
{ label: "Кавычка декоративная", value: "#b8e6ed", note: "80–100px, font-serif" },
|
||||
{ label: "Текст отзыва", value: "#374151", note: "14px, italic" },
|
||||
{ label: "Ссылка", value: "#0089c3", note: "--brand-053m" },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="p-3 rounded-xl space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded border"
|
||||
style={{ background: t.value, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{t.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.value}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.note}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||
rows={[
|
||||
["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"],
|
||||
["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
|
||||
["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
|
||||
["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
|
||||
["Ссылка", "«Читать отзыв полностью»", "#0089c3"],
|
||||
["Стрелки карусели", "‹ ›", "Round buttons, фон var(--bb-sidebar-bg)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон карточки отзыва", "#eef4d1", "—"],
|
||||
["Декоративная кавычка", "#b8e6ed", "—"],
|
||||
["Текст отзыва", "#374151", "—"],
|
||||
["Ссылка", "#0089c3", "--brand-053m"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон карточки отзыва: #eef4d1" },
|
||||
{ ok: true, text: "Декоративная кавычка цвет #b8e6ed" },
|
||||
{ ok: true, text: "Ссылка «Читать отзыв полностью» обязательна" },
|
||||
{ ok: true, text: "Навигация карусели: стрелки ‹ ›" },
|
||||
{ ok: false, text: "Не показывать несколько отзывов одновременно" },
|
||||
{ ok: false, text: "Не убирать навигационные стрелки" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,573 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { CodeCopy } from "@/components/ui/CodeCopy";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Кнопки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
id,
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
id?: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const VARIANTS = [
|
||||
{
|
||||
variant: "primary" as const,
|
||||
name: "Primary",
|
||||
label: "Запишитесь к нам",
|
||||
cssClass: ".bb-btn-primary",
|
||||
bg: "#FFA39C",
|
||||
border: "#FF847B",
|
||||
textColor: "#fff",
|
||||
radius: "7px",
|
||||
shadow: "да",
|
||||
where: "Кнопка отправки форм записи",
|
||||
example: "«Запишите меня!»",
|
||||
note: "Коралловый — самый заметный акцент на странице. Всегда один в форме.",
|
||||
},
|
||||
{
|
||||
variant: "outline" as const,
|
||||
name: "Outline",
|
||||
label: "Записаться на приём",
|
||||
cssClass: ".bb-btn-outline",
|
||||
bg: "#fff",
|
||||
border: "#BF9975",
|
||||
textColor: "#BF9975",
|
||||
radius: "7px",
|
||||
shadow: "нет",
|
||||
where: "Хедер, навигация, ссылки-кнопки",
|
||||
example: "«Записаться на прием», «Все новости»",
|
||||
note: "Бежевая рамка — ненавязчивый вторичный CTA. Не конкурирует с основной формой.",
|
||||
},
|
||||
{
|
||||
variant: "teal" as const,
|
||||
name: "Teal",
|
||||
label: "Позвонить",
|
||||
cssClass: ".bb-btn-teal",
|
||||
bg: "#60959c",
|
||||
border: "прозрачный",
|
||||
textColor: "#fff",
|
||||
radius: "7px",
|
||||
shadow: "нет",
|
||||
where: "Контактные действия — звонок",
|
||||
example: "«Позвонить»",
|
||||
note: "Серо-бирюзовый — цвет из реального CSS сайта. Близок к Oracal 066M.",
|
||||
},
|
||||
{
|
||||
variant: "pill" as const,
|
||||
name: "Pill",
|
||||
label: "Заказать звонок",
|
||||
cssClass: ".bb-btn-pill",
|
||||
bg: "#e9e4d4",
|
||||
border: "#d5cfbd",
|
||||
textColor: "#333",
|
||||
radius: "25px",
|
||||
shadow: "нет",
|
||||
where: "Модальные триггеры, мягкий CTA",
|
||||
example: "«Заказать звонок»",
|
||||
note: "Кремовый фон + pill-форма — мягкий стиль. Используется для открытия модальных окон.",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_BUTTONS_TEXT = `КНОПКИ — LLM-спецификация (с реального сайта oclinica.ru)
|
||||
Версия: v2.0 · /components/buttons
|
||||
Источник CSS: perm.oclinica.ru/.../style.css
|
||||
|
||||
ВАРИАНТЫ (реальный сайт)
|
||||
Вариант | CSS класс | Фон | Текст | Граница | Radius | Shadow | Применение
|
||||
primary | .bb-btn-primary | #FFA39C | #fff | #FF847B | 7px | да | Форм-сабмит «Запишите меня!»
|
||||
outline | .bb-btn-outline | #fff | #BF9975 | #BF9975 | 7px | нет | Хедер «Записаться на прием», ссылки-кнопки
|
||||
teal | .bb-btn-teal | #60959c | #fff | нет | 7px | нет | Звонок «Позвонить»
|
||||
pill | .bb-btn-pill | #e9e4d4 | #333 | #d5cfbd | 25px | нет | Callback «Заказать звонок»
|
||||
|
||||
CSS С САЙТА (точные значения)
|
||||
/* форм-кнопка «Запишите меня!» */
|
||||
button { background:#FFA39C; color:white; font-weight:bold; border:solid 1px #FF847B;
|
||||
height:42px; font-size:18px; box-shadow:0px 0px 5px rgba(0,0,0,0.5),0px 4px 5px rgba(0,0,0,0.3); }
|
||||
|
||||
/* appointment — «Записаться на прием» */
|
||||
.appointment { background:#FFF; border:#BF9975 solid 1px; color:#BF9975;
|
||||
font-size:14px; line-height:38px; padding:3px 12px; border-radius:7px; }
|
||||
|
||||
/* show-phone — «Позвонить» */
|
||||
.show-phone { background:rgb(96,149,156); color:#fff; border-radius:7px;
|
||||
font-size:14px; line-height:38px; padding:3px 12px; }
|
||||
|
||||
/* callback — «Заказать звонок» */
|
||||
a.callback_url { background:#e9e4d4; border:#d5cfbd solid 1px; color:#000;
|
||||
border-radius:25px; font-size:16px; padding:6px 18px; }
|
||||
|
||||
РАЗМЕРЫ (брендбук-компонент)
|
||||
Размер | CSS класс | padding | font-size | Применение
|
||||
sm | .bb-btn-sm | 4px 11px | 13px | Компактные контексты
|
||||
md | .bb-btn-md | 8px 16px | 14px | Стандарт (appointment, teal, pill)
|
||||
lg | .bb-btn-lg | 10px 24px | 18px + bold | Форм-сабмит (соответствует реальному сайту)
|
||||
|
||||
ПРАВИЛА ПРИМЕНЕНИЯ
|
||||
✓ primary (коралловый) — только для главного CTA в форме записи
|
||||
✓ outline (бежевый) — хедер, навигация, ссылки-кнопки на странице
|
||||
✓ teal (бирюзовый) — контактные действия (звонок, направление)
|
||||
✓ pill (кремовый) — открытие модальных окон, мягкий callback
|
||||
✓ Не более одного primary на форму
|
||||
✕ Не менять цвета вне фирменной палитры сайта
|
||||
✕ Primary — не для навигационных ссылок
|
||||
✕ Не накладывать тень на outline/teal/pill`.trim();
|
||||
|
||||
export default function ButtonsPage() {
|
||||
const codeHtml = `<!-- Primary — форм-кнопка «Запишите меня!» -->
|
||||
<button class="bb-btn bb-btn-lg bb-btn-primary">Запишите меня!</button>
|
||||
|
||||
<!-- Outline — appointment «Записаться на прием» -->
|
||||
<a class="bb-btn bb-btn-md bb-btn-outline" href="#form">Записаться на прием</a>
|
||||
|
||||
<!-- Teal — «Позвонить» -->
|
||||
<a class="bb-btn bb-btn-md bb-btn-teal" href="tel:+73422250662">Позвонить</a>
|
||||
|
||||
<!-- Pill — «Заказать звонок» -->
|
||||
<a class="bb-btn bb-btn-md bb-btn-pill" href="#callback">Заказать звонок</a>`;
|
||||
|
||||
const codeReact = `import { Button } from "@/components/ui/Button";
|
||||
|
||||
// Форм-кнопка (главный CTA)
|
||||
<Button variant="primary" size="lg">Запишите меня!</Button>
|
||||
|
||||
// Запись из хедера / навигации
|
||||
<Button variant="outline" size="md">Записаться на прием</Button>
|
||||
|
||||
// Звонок
|
||||
<Button variant="teal" size="md">Позвонить</Button>
|
||||
|
||||
// Заказать звонок (открывает модал)
|
||||
<Button variant="pill" size="md">Заказать звонок</Button>
|
||||
|
||||
// С loading-состоянием
|
||||
<Button variant="primary" size="lg" loading>Отправляем...</Button>`;
|
||||
|
||||
const codeSiteExact = `/* Точный CSS с сайта oclinica.ru (style.css) */
|
||||
|
||||
/* Форм-кнопка — кнопка отправки форм записи */
|
||||
#block-entityform-block-feedback button,
|
||||
#block-entityform-block-lor-form button {
|
||||
background: #FFA39C;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: solid 1px #FF847B;
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
font-size: 18px;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.5), 0px 4px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Кнопка «Записаться на прием» в хедере */
|
||||
#block-block-15 .appointment {
|
||||
background: #FFF;
|
||||
border: #BF9975 solid 1px;
|
||||
color: #BF9975;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Кнопка «Позвонить» */
|
||||
.show-phone {
|
||||
background: rgb(96, 149, 156); /* #60959c */
|
||||
color: #fff;
|
||||
border-radius: 7px;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
/* Кнопка «Заказать звонок» */
|
||||
a.callback_url {
|
||||
background: #e9e4d4;
|
||||
border: #d5cfbd solid 1px;
|
||||
color: #000;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
padding: 6px 18px;
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Компоненты → 3.1
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Кнопки
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Кнопки скопированы с реального сайта{" "}
|
||||
<span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
oclinica.ru
|
||||
</span>
|
||||
. Цвета, размеры и тени взяты напрямую из CSS темы{" "}
|
||||
<span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
clinic_bootstrap_mobile/css/style.css
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<div
|
||||
className="mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
|
||||
style={{ borderColor: "#e0f5f4", background: "#f8fffe", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
<span style={{ color: "var(--brand-053m)", fontWeight: 600 }}>Источник</span>
|
||||
<span>
|
||||
CSS сайта проанализирован 2026-03-22 — 4 типа кнопок с реальными значениями.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 1. Варианты */}
|
||||
<Section
|
||||
id="variants"
|
||||
title="Варианты"
|
||||
subtitle="Четыре типа кнопок с реального сайта клиники."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
|
||||
{VARIANTS.map(({ variant, name, label, where, example, note, bg, border, textColor, radius, shadow }) => (
|
||||
<div
|
||||
key={variant}
|
||||
className="rounded-xl border p-5 flex flex-col gap-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{/* Превью */}
|
||||
<div
|
||||
className="flex items-center justify-center py-6 rounded-lg"
|
||||
style={{ background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<Button variant={variant} size="md">
|
||||
{label}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Инфо */}
|
||||
<div>
|
||||
<p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{name}
|
||||
</p>
|
||||
<p className="text-xs mb-2 leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{note}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5 mb-2">
|
||||
{[
|
||||
{ k: "bg", v: bg },
|
||||
{ k: "text", v: textColor },
|
||||
{ k: "border", v: border },
|
||||
{ k: "radius", v: radius },
|
||||
...(shadow === "да" ? [{ k: "shadow", v: "да" }] : []),
|
||||
].map(({ k, v }) => (
|
||||
<span
|
||||
key={k}
|
||||
className="text-[10px] font-mono px-1.5 py-0.5 rounded"
|
||||
style={{ background: "#f3f4f6", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{k}: {v}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="rounded p-2.5 text-xs"
|
||||
style={{ background: "#f8f9fa", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
<span className="font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
Где:
|
||||
</span>{" "}
|
||||
{where}
|
||||
<br />
|
||||
<span className="font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
Пример:
|
||||
</span>{" "}
|
||||
{example}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 2. Размеры */}
|
||||
<Section
|
||||
id="sizes"
|
||||
title="Размеры"
|
||||
subtitle="Три размера для разных контекстов. lg соответствует форм-кнопке на реальном сайте (18px, bold)."
|
||||
>
|
||||
<div
|
||||
className="rounded-xl border overflow-hidden"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{
|
||||
size: "sm" as const,
|
||||
label: "Small",
|
||||
hint: "4px 11px · 13px",
|
||||
use: "Компактные контексты, таблицы",
|
||||
},
|
||||
{
|
||||
size: "md" as const,
|
||||
label: "Medium",
|
||||
hint: "8px 16px · 14px",
|
||||
use: "Appointment, Teal, Pill (соответствует сайту)",
|
||||
},
|
||||
{
|
||||
size: "lg" as const,
|
||||
label: "Large",
|
||||
hint: "10px 24px · 18px bold",
|
||||
use: "Primary форм-кнопка (соответствует сайту)",
|
||||
},
|
||||
] as const
|
||||
).map(({ size, label, hint, use }, i) => (
|
||||
<div
|
||||
key={size}
|
||||
className="flex items-center gap-6 px-5 py-4"
|
||||
style={{ borderTop: i > 0 ? "1px solid var(--bb-border)" : undefined }}
|
||||
>
|
||||
<div className="w-40 shrink-0">
|
||||
<Button variant="primary" size={size}>
|
||||
Записаться
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
|
||||
{label}
|
||||
</p>
|
||||
<p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
padding: {hint.split("·")[0].trim()} · font-size: {hint.split("·")[1].trim()}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
className="text-xs hidden lg:block"
|
||||
style={{ color: "var(--bb-text-muted)", maxWidth: 220 }}
|
||||
>
|
||||
{use}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 3. Состояния */}
|
||||
<Section
|
||||
id="states"
|
||||
title="Состояния"
|
||||
subtitle="Базовые состояния кнопки. На реальном сайте hover/transition не определены в CSS."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{(
|
||||
[
|
||||
{
|
||||
label: "Default",
|
||||
node: <Button variant="primary" size="lg">Записаться</Button>,
|
||||
hint: "Стандартное состояние",
|
||||
},
|
||||
{
|
||||
label: "Hover",
|
||||
node: (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
style={{ filter: "brightness(0.93)" }}
|
||||
>
|
||||
Записаться
|
||||
</Button>
|
||||
),
|
||||
hint: "filter: brightness(0.93)",
|
||||
},
|
||||
{
|
||||
label: "Loading",
|
||||
node: <Button variant="primary" size="lg" loading>Отправка...</Button>,
|
||||
hint: "Спиннер + blocked",
|
||||
},
|
||||
{
|
||||
label: "Disabled",
|
||||
node: <Button variant="primary" size="lg" disabled>Записаться</Button>,
|
||||
hint: "opacity: 0.5",
|
||||
},
|
||||
] as const
|
||||
).map(({ label, node, hint }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="rounded-xl border p-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-center py-4 mb-3 rounded-lg"
|
||||
style={{ background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
{node}
|
||||
</div>
|
||||
<p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
|
||||
{label}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{hint}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 4. Контекст применения */}
|
||||
<Section
|
||||
id="context"
|
||||
title="Где применяется"
|
||||
subtitle="Таблица: тип кнопки → реальное использование на сайте."
|
||||
>
|
||||
<div
|
||||
className="rounded-xl border overflow-hidden"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Вариант", "Цвет фона", "Реальный класс/контекст", "Текст кнопки на сайте"].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-4 py-3 font-medium text-xs"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
v: <Button variant="primary" size="sm">Primary</Button>,
|
||||
bg: "#FFA39C",
|
||||
ctx: "button в entityform-блоках форм записи",
|
||||
text: "«Запишите меня!»",
|
||||
},
|
||||
{
|
||||
v: <Button variant="outline" size="sm">Outline</Button>,
|
||||
bg: "#fff / рамка #BF9975",
|
||||
ctx: ".appointment в хедере (block-block-15, 30, 32, 24)",
|
||||
text: "«Записаться на прием»",
|
||||
},
|
||||
{
|
||||
v: <Button variant="teal" size="sm">Teal</Button>,
|
||||
bg: "#60959c",
|
||||
ctx: ".show-phone (block-block-4, 15)",
|
||||
text: "«Позвонить»",
|
||||
},
|
||||
{
|
||||
v: <Button variant="pill" size="sm">Pill</Button>,
|
||||
bg: "#e9e4d4",
|
||||
ctx: "a.callback_url (modal trigger)",
|
||||
text: "«Заказать звонок»",
|
||||
},
|
||||
].map(({ v, bg, ctx, text }, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
style={{ borderTop: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<td className="px-4 py-3">{v}</td>
|
||||
<td
|
||||
className="px-4 py-3 font-mono text-xs"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{bg}
|
||||
</td>
|
||||
<td
|
||||
className="px-4 py-3 font-mono text-xs"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{ctx}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
{text}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 5. Примеры кода */}
|
||||
<Section
|
||||
id="code"
|
||||
title="Примеры кода"
|
||||
subtitle="HTML-классы из globals.css, JSX-компонент, и точный CSS с сайта."
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CodeCopy lang="HTML (CSS-классы brandbook)" code={codeHtml} />
|
||||
<CodeCopy lang="JSX (React / Next.js)" code={codeReact} />
|
||||
<CodeCopy lang="CSS — точно с сайта oclinica.ru" code={codeSiteExact} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-блок */}
|
||||
<LlmBlock path="/components/buttons" version="v2.0" specText={LLM_BUTTONS_TEXT}>
|
||||
<LlmSection title="Варианты (реальный сайт oclinica.ru)" />
|
||||
<LlmTable
|
||||
headers={["Вариант", "CSS класс", "Фон", "Текст", "Border", "Radius", "Применение"]}
|
||||
rows={VARIANTS.map((v) => [
|
||||
v.variant,
|
||||
v.cssClass,
|
||||
v.bg,
|
||||
v.textColor,
|
||||
v.border,
|
||||
v.radius,
|
||||
v.where,
|
||||
])}
|
||||
/>
|
||||
<LlmSection title="Размеры (брендбук-компонент)" />
|
||||
<LlmTable
|
||||
headers={["Размер", "padding", "font-size", "Применение"]}
|
||||
rows={[
|
||||
["sm", "4px 11px", "13px", "Компактные контексты"],
|
||||
["md", "8px 16px", "14px", "Стандарт (outline, teal, pill с сайта)"],
|
||||
["lg", "10px 24px", "18px bold", "Primary форм-кнопка (соответствует сайту)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "primary (коралловый) — только для submit в формах записи" },
|
||||
{ ok: true, text: "outline (бежевый) — хедер, навигация, второстепенные ссылки" },
|
||||
{ ok: true, text: "teal (бирюзовый) — телефонные и контактные действия" },
|
||||
{ ok: true, text: "pill (кремовый) — открытие модальных окон / callback" },
|
||||
{ ok: true, text: "Не более одного primary на форму" },
|
||||
{ ok: false, text: "Не менять цвета вне указанной палитры сайта" },
|
||||
{ ok: false, text: "Primary — не для навигационных ссылок" },
|
||||
{ ok: false, text: "Не накладывать тень на outline, teal, pill" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,629 @@
|
||||
import type { Metadata } from "next";
|
||||
import { CodeCopy } from "@/components/ui/CodeCopy";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Карточки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
id, title, subtitle, children,
|
||||
}: {
|
||||
id?: string; title: string; subtitle?: string; children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="mb-14">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>{title}</h2>
|
||||
{subtitle && <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>{subtitle}</p>}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка врача ────────────────────────────────────────────────── */
|
||||
function DoctorCard({
|
||||
name, specialty, experience, photo,
|
||||
}: {
|
||||
name: string; specialty: string; experience: string; photo?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="flex gap-4 p-4 rounded-xl border bg-white transition-shadow"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{/* Фото */}
|
||||
<div
|
||||
className="shrink-0 rounded-lg overflow-hidden"
|
||||
style={{ width: 110, height: 160, background: "#dff0fa" }}
|
||||
>
|
||||
{photo ? (
|
||||
<img src={photo} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-full flex flex-col items-center justify-center gap-1"
|
||||
style={{ color: "var(--brand-053m)", opacity: 0.5 }}
|
||||
>
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<span className="text-xs">фото</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Информация */}
|
||||
<div className="flex flex-col justify-between min-w-0">
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm leading-tight mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{name}
|
||||
</h3>
|
||||
<p className="text-xs mb-2" style={{ color: "var(--bb-text-muted)" }}>{specialty}</p>
|
||||
<p className="text-xs" style={{ color: "var(--brand-053m)" }}>{experience}</p>
|
||||
</div>
|
||||
<button className="bb-btn bb-btn-sm bb-btn-outline mt-3 self-start">
|
||||
Записаться
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка новости ──────────────────────────────────────────────── */
|
||||
function NewsCard({
|
||||
date, title, snippet, category,
|
||||
}: {
|
||||
date: string; title: string; snippet: string; category?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="bb-news-card rounded-xl border overflow-hidden cursor-pointer transition-all"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#fff" }}
|
||||
>
|
||||
{/* Превью */}
|
||||
<div
|
||||
className="h-36 flex items-center justify-center"
|
||||
style={{ background: "#f0f9ff" }}
|
||||
>
|
||||
{category && (
|
||||
<span
|
||||
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||
style={{ background: "var(--brand-053m)", color: "#fff" }}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="p-4">
|
||||
<p className="text-xs mb-2" style={{ color: "var(--bb-text-muted)" }}>{date}</p>
|
||||
<h3 className="font-semibold text-sm leading-tight mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs leading-relaxed mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{snippet}
|
||||
</p>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--brand-053m)" }}>
|
||||
Читать далее →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка отзыва ───────────────────────────────────────────────── */
|
||||
function ReviewCard({
|
||||
author, date, text, rating, doctor,
|
||||
}: {
|
||||
author: string; date: string; text: string; rating: number; doctor?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-5"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#eef4d1" }}
|
||||
>
|
||||
{/* Звёзды */}
|
||||
<div className="flex gap-0.5 mb-3">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < rating ? "#f59e0b" : "none"} stroke="#f59e0b" strokeWidth="1.5">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
))}
|
||||
<span className="text-xs ml-1 font-medium" style={{ color: "#92400e" }}>{rating}/5</span>
|
||||
</div>
|
||||
|
||||
{/* Текст */}
|
||||
<p
|
||||
className="text-sm leading-relaxed mb-4"
|
||||
style={{
|
||||
color: "var(--bb-text)",
|
||||
display: "-webkit-box",
|
||||
WebkitLineClamp: 4,
|
||||
WebkitBoxOrient: "vertical",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
|
||||
{/* Автор */}
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold" style={{ color: "var(--bb-text)" }}>{author}</p>
|
||||
{doctor && <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>Врач: {doctor}</p>}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{date}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка цены ─────────────────────────────────────────────────── */
|
||||
function PriceCard({
|
||||
service, price, description, highlighted,
|
||||
}: {
|
||||
service: string; price: string; description?: string; highlighted?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border p-5 flex flex-col gap-3"
|
||||
style={{
|
||||
borderColor: highlighted ? "var(--brand-053m)" : "var(--bb-border)",
|
||||
background: highlighted ? "#f0f9ff" : "#fff",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="text-sm font-medium flex-1" style={{ color: "var(--bb-text)" }}>{service}</p>
|
||||
<p className="text-lg font-bold shrink-0" style={{ color: highlighted ? "var(--brand-053m)" : "var(--bb-text)" }}>
|
||||
{price}
|
||||
</p>
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{description}</p>
|
||||
)}
|
||||
<button className="bb-btn bb-btn-sm bb-btn-outline self-start">
|
||||
Записаться
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Карточка услуги ───────────────────────────────────────────────── */
|
||||
function ServiceCard({
|
||||
title, description, icon,
|
||||
}: {
|
||||
title: string; description: string; icon: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="bb-service-card rounded-xl border p-5 flex flex-col gap-3 cursor-pointer transition-shadow"
|
||||
style={{ borderColor: "var(--bb-border)", background: "#fff" }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl"
|
||||
style={{ background: "#dff0fa" }}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>{title}</h3>
|
||||
<p className="text-xs leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>{description}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium" style={{ color: "var(--brand-053m)" }}>
|
||||
Подробнее →
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── LLM текст ─────────────────────────────────────────────────────── */
|
||||
const LLM_CARDS_TEXT = `КАРТОЧКИ — LLM-спецификация
|
||||
Версия: v1.0 · /components/cards
|
||||
|
||||
КАРТОЧКА ВРАЧА (DoctorCard)
|
||||
Структура: фото (110×160px) + имя + специализация + опыт + кнопка «Записаться»
|
||||
Фото: 110px × 160px, object-fit: cover, border-radius: 8px, фон-placeholder: #dff0fa
|
||||
Кнопка: .bb-btn-outline .bb-btn-sm
|
||||
Источник: .doctor на perm.oclinica.ru
|
||||
|
||||
КАРТОЧКА НОВОСТИ (NewsCard)
|
||||
Структура: превью (h=144px) + дата + заголовок + анонс (4 строки) + «Читать далее →»
|
||||
Hover: background #eef4d1 + box-shadow 0 0 16px #9e9e9a
|
||||
Источник: #block-views-last-news-block-1 .views-column на сайте (200×200px)
|
||||
Без hover: background #fff, border 1px
|
||||
|
||||
КАРТОЧКА ОТЗЫВА (ReviewCard)
|
||||
Структура: рейтинг (звёзды 1–5) + текст (4 строки, overflow hidden) + автор + дата + врач
|
||||
Фон: #eef4d1 (светло-жёлтый) — из реального CSS сайта
|
||||
Звёзды: SVG polygon, filled #f59e0b
|
||||
|
||||
КАРТОЧКА ЦЕНЫ (PriceCard)
|
||||
Структура: услуга + цена (bold) + описание + кнопка
|
||||
highlighted-вариант: border var(--brand-053m), bg #f0f9ff, цена тоже --brand-053m
|
||||
|
||||
КАРТОЧКА УСЛУГИ (ServiceCard)
|
||||
Структура: иконка (emoji, 48×48px, bg #dff0fa) + заголовок + описание + «Подробнее →»
|
||||
Hover: box-shadow (0.5rem smth)
|
||||
|
||||
БЕЙДЖИ (Badge)
|
||||
Варианты: primary (#0089c3), success (#059669), warning (#d97706), danger (#dc2626), neutral (#6b7280)
|
||||
Размер: text-xs, px-2.5 py-0.5, border-radius: full
|
||||
CSS: inline-flex, font-weight: 600
|
||||
|
||||
ТЕГИ (Tag)
|
||||
Варианты: default (border, text), filled (bg), removable (с кнопкой ×)
|
||||
Цвет: --brand-053m или нейтральный (#e5e7eb bg)
|
||||
Размер: text-xs, px-2 py-1, border-radius: 4px
|
||||
|
||||
АЛЕРТЫ (Alert)
|
||||
Варианты: info (#dff0fa фон, #075985 текст), success (#d1fae5, #065f46), warning (#fef3c7, #92400e), error (#fee2e2, #991b1b)
|
||||
Структура: иконка (16×16px) + заголовок + описание
|
||||
Без кнопки закрыть в базовом варианте
|
||||
|
||||
ПРАВИЛА
|
||||
✓ DoctorCard: всегда показывать фото-placeholder если нет фото (не ломать layout)
|
||||
✓ ReviewCard: обрезать текст после 4 строк (WebkitLineClamp)
|
||||
✓ PriceCard: highlighted = акционная или рекомендуемая позиция
|
||||
✓ NewsCard: hover-эффект обязателен (#eef4d1 + box-shadow)
|
||||
✓ Badge: не более 2–3 бейджей рядом
|
||||
✓ Alert: одновременно не более 1 alert одного типа на экране
|
||||
✕ Не смешивать типы карточек в одной сетке без заголовка секции
|
||||
✕ Не использовать ReviewCard без рейтинга`.trim();
|
||||
|
||||
/* ─── Данные примеров ───────────────────────────────────────────────── */
|
||||
const DOCTORS = [
|
||||
{
|
||||
name: "Иванова Анна Сергеевна",
|
||||
specialty: "Оториноларинголог (ЛОР), высшая категория",
|
||||
experience: "Стаж 18 лет",
|
||||
},
|
||||
{
|
||||
name: "Петров Дмитрий Александрович",
|
||||
specialty: "Сурдолог, аудиолог",
|
||||
experience: "Стаж 12 лет",
|
||||
},
|
||||
{
|
||||
name: "Соколова Мария Ивановна",
|
||||
specialty: "Детский ЛОР, ринолог",
|
||||
experience: "Стаж 9 лет",
|
||||
},
|
||||
];
|
||||
|
||||
const REVIEWS = [
|
||||
{
|
||||
author: "Елена К.",
|
||||
date: "15 марта 2026",
|
||||
rating: 5,
|
||||
doctor: "Иванова А.С.",
|
||||
text: "Очень довольна визитом. Доктор внимательно выслушала все жалобы, провела осмотр и объяснила причину заболевания. Назначила лечение, которое помогло уже через 3 дня. Рекомендую!",
|
||||
},
|
||||
{
|
||||
author: "Михаил Р.",
|
||||
date: "10 марта 2026",
|
||||
rating: 4,
|
||||
doctor: "Петров Д.А.",
|
||||
text: "Хороший специалист, всё объяснил понятно. Подождал немного дольше, чем ожидал, но качество приёма на высоте. Буду обращаться снова.",
|
||||
},
|
||||
];
|
||||
|
||||
const PRICES = [
|
||||
{ service: "Первичный приём ЛОР-врача", price: "1 500 ₽", description: "Включает осмотр и консультацию" },
|
||||
{ service: "Повторный приём", price: "1 000 ₽", description: "До 14 дней после первичного" },
|
||||
{ service: "Промывание миндалин", price: "800 ₽", highlighted: true, description: "Аппаратное — аккустический вакуум" },
|
||||
{ service: "Аудиометрия", price: "1 200 ₽", description: "Исследование слуха" },
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
{ title: "Лечение ангины и тонзиллита", description: "Консервативное и хирургическое лечение заболеваний миндалин", icon: "🦷" },
|
||||
{ title: "Аудиология и сурдология", description: "Диагностика нарушений слуха, подбор слуховых аппаратов", icon: "👂" },
|
||||
{ title: "Детский ЛОР", description: "Специализация на лечении ЛОР-заболеваний у детей от 0 лет", icon: "👶" },
|
||||
{ title: "Ринология", description: "Лечение заболеваний носа и придаточных пазух", icon: "👃" },
|
||||
];
|
||||
|
||||
/* ─── Коды примеров ─────────────────────────────────────────────────── */
|
||||
const codeDoctorCard = `<!-- Карточка врача -->
|
||||
<div class="doctor-card">
|
||||
<img src="doctor.jpg" width="110" height="160" alt="ФИО" />
|
||||
<div class="doctor-info">
|
||||
<h3>Иванова Анна Сергеевна</h3>
|
||||
<p class="specialty">Оториноларинголог, высшая категория</p>
|
||||
<p class="experience">Стаж 18 лет</p>
|
||||
<button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* CSS с сайта oclinica.ru */
|
||||
.doctor .image { float:left; margin-right:20px; width:110px; height:160px; }
|
||||
.doctor .item { float:left; width:170px; }
|
||||
.doctor h3 { margin-top:0; height:32px; }`;
|
||||
|
||||
const codeNewsCard = `<!-- Карточка новости (сайт: 200×200px) -->
|
||||
<div class="news-card">
|
||||
<div class="news-preview">...</div>
|
||||
<div class="news-body">
|
||||
<time>15 марта 2026</time>
|
||||
<h3>Заголовок новости</h3>
|
||||
<p>Краткий анонс...</p>
|
||||
<a href="#">Читать далее →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* CSS с сайта */
|
||||
#block-views-last-news-block-1 .views-column {
|
||||
background: #fff; width: 200px; height: 200px;
|
||||
margin: 15px 8px; padding: 15px;
|
||||
}
|
||||
#block-views-last-news-block-1 .views-column:hover {
|
||||
background: #eef4d1;
|
||||
box-shadow: 0px 0px 16px 0px #9e9e9a;
|
||||
}`;
|
||||
|
||||
const codeReviewCard = `<!-- Карточка отзыва -->
|
||||
<div class="review-card">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="text">Текст отзыва (4 строки, overflow: hidden)...</p>
|
||||
<div class="author">
|
||||
<span>Елена К.</span>
|
||||
<time>15 марта 2026</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/* Стиль брендбука (фон из CSS сайта) */
|
||||
.review-card { background: #eef4d1; border-radius: 12px; padding: 20px; }`;
|
||||
|
||||
const codePriceCard = `<!-- Карточка цены -->
|
||||
<div class="price-card">
|
||||
<div class="price-row">
|
||||
<span class="service">Первичный приём ЛОР-врача</span>
|
||||
<strong class="price">1 500 ₽</strong>
|
||||
</div>
|
||||
<p class="description">Включает осмотр и консультацию</p>
|
||||
<button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
|
||||
</div>`;
|
||||
|
||||
const codeBadges = `<!-- Бейджи -->
|
||||
<span class="bb-badge bb-badge-primary">ЛОР</span>
|
||||
<span class="bb-badge bb-badge-success">Принимает</span>
|
||||
<span class="bb-badge bb-badge-warning">Ожидает</span>
|
||||
<span class="bb-badge bb-badge-danger">Не принимает</span>
|
||||
<span class="bb-badge bb-badge-neutral">Высшая категория</span>
|
||||
|
||||
<!-- Теги -->
|
||||
<button class="bb-tag">Ухо</button>
|
||||
<button class="bb-tag">Горло</button>
|
||||
<button class="bb-tag bb-tag-active">Нос</button>
|
||||
|
||||
<!-- Алерт -->
|
||||
<div class="bb-alert bb-alert-info">
|
||||
<span class="bb-alert-icon">ℹ</span>
|
||||
<div>
|
||||
<strong>Запись открыта</strong>
|
||||
<p>Вы можете записаться онлайн или по телефону.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default function CardsPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-2" style={{ color: "var(--brand-053m)" }}>
|
||||
Компоненты → 3.3
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Карточки
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Карточки врача, новости, отзыва, цены и услуги — основные блоки контента сайта.
|
||||
Бейджи, теги и алерты — вспомогательные элементы.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. Карточки врачей */}
|
||||
<Section
|
||||
id="doctor"
|
||||
title="Карточка врача"
|
||||
subtitle="Фото 110×160px, имя, специализация, стаж, кнопка записи. Соответствует .doctor на сайте."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{DOCTORS.map(d => <DoctorCard key={d.name} {...d} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 2. Карточки новостей */}
|
||||
<Section
|
||||
id="news"
|
||||
title="Карточка новости"
|
||||
subtitle="Hover: bg #eef4d1 + box-shadow. Источник: #block-views-last-news-block-1 на сайте."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<NewsCard
|
||||
date="15 марта 2026"
|
||||
category="ЛОР"
|
||||
title="Как правильно промывать нос при насморке"
|
||||
snippet="Промывание носа — эффективный метод лечения и профилактики острого ринита. Рассказываем о правильной технике."
|
||||
/>
|
||||
<NewsCard
|
||||
date="10 марта 2026"
|
||||
category="Аудиология"
|
||||
title="Новый слуховой аппарат в нашей клинике"
|
||||
snippet="Мы начали подбор и настройку слуховых аппаратов нового поколения — незаметных и точных."
|
||||
/>
|
||||
<NewsCard
|
||||
date="5 марта 2026"
|
||||
title="Весенняя профилактика ЛОР-заболеваний"
|
||||
snippet="Апрель — период обострений. Рекомендации нашего специалиста по укреплению иммунитета и защите."
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
* Наведите на карточку чтобы увидеть hover-эффект
|
||||
</p>
|
||||
</Section>
|
||||
|
||||
{/* 3. Карточки отзывов */}
|
||||
<Section
|
||||
id="review"
|
||||
title="Карточка отзыва"
|
||||
subtitle="Рейтинг (1–5 звёзд), текст 4 строки, автор, дата, врач. Фон #eef4d1 — с реального сайта."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{REVIEWS.map(r => <ReviewCard key={r.author} {...r} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 4. Карточки цен */}
|
||||
<Section
|
||||
id="price"
|
||||
title="Карточка цены"
|
||||
subtitle="Услуга + стоимость + описание + кнопка. Highlighted-вариант для акционных позиций."
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
{PRICES.map(p => <PriceCard key={p.service} {...p} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 5. Карточки услуг */}
|
||||
<Section
|
||||
id="service"
|
||||
title="Карточка услуги"
|
||||
subtitle="Иконка + заголовок + описание + ссылка. Применяется в блоке «Наши услуги»."
|
||||
>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{SERVICES.map(s => <ServiceCard key={s.title} {...s} />)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 6. Бейджи и теги */}
|
||||
<Section
|
||||
id="badges"
|
||||
title="Бейджи и теги"
|
||||
subtitle="Статусные бейджи, теги-категории, алерты."
|
||||
>
|
||||
{/* Бейджи */}
|
||||
<div className="mb-8">
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Бейджи (статус)</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ label: "Основной", bg: "var(--brand-053m)", color: "#fff" },
|
||||
{ label: "Принимает", bg: "#059669", color: "#fff" },
|
||||
{ label: "Высшая категория", bg: "#d97706", color: "#fff" },
|
||||
{ label: "Не принимает", bg: "#dc2626", color: "#fff" },
|
||||
{ label: "Нейтральный", bg: "#6b7280", color: "#fff" },
|
||||
{ label: "Новинка", bg: "#dff0fa", color: "var(--brand-053m)" },
|
||||
].map(b => (
|
||||
<span
|
||||
key={b.label}
|
||||
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
|
||||
style={{ background: b.bg, color: b.color }}
|
||||
>
|
||||
{b.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Теги */}
|
||||
<div className="mb-8">
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Теги (категории)</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Ухо", "Горло", "Нос", "Аудиология", "Детский ЛОР", "Хирургия"].map((tag, i) => (
|
||||
<button
|
||||
key={tag}
|
||||
className="inline-flex items-center px-3 py-1 rounded text-xs font-medium border transition-colors"
|
||||
style={
|
||||
i === 0
|
||||
? { background: "var(--brand-053m)", color: "#fff", borderColor: "var(--brand-053m)" }
|
||||
: { background: "#fff", color: "var(--bb-text)", borderColor: "var(--bb-border)" }
|
||||
}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Алерты */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-3" style={{ color: "var(--bb-text)" }}>Алерты</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
{[
|
||||
{ type: "info", bg: "#dff0fa", color: "#075985", icon: "ℹ", title: "Информация", text: "Запись открыта. Вы можете записаться онлайн или по телефону." },
|
||||
{ type: "success", bg: "#d1fae5", color: "#065f46", icon: "✓", title: "Успешно", text: "Ваша запись подтверждена. Ждём вас 20 марта в 10:00." },
|
||||
{ type: "warning", bg: "#fef3c7", color: "#92400e", icon: "⚠", title: "Внимание", text: "Не забудьте взять паспорт и полис ОМС на приём." },
|
||||
{ type: "error", bg: "#fee2e2", color: "#991b1b", icon: "✕", title: "Ошибка", text: "К сожалению, это время уже занято. Выберите другое." },
|
||||
].map(a => (
|
||||
<div
|
||||
key={a.type}
|
||||
className="flex gap-3 p-4 rounded-xl border"
|
||||
style={{ background: a.bg, borderColor: a.bg, color: a.color }}
|
||||
>
|
||||
<span className="text-base font-bold shrink-0 mt-0.5">{a.icon}</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold mb-0.5">{a.title}</p>
|
||||
<p className="text-sm opacity-90">{a.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 7. Код */}
|
||||
<Section
|
||||
id="code"
|
||||
title="Примеры кода"
|
||||
subtitle="HTML-структура и CSS-справка."
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CodeCopy lang="HTML — DoctorCard + CSS с сайта" code={codeDoctorCard} />
|
||||
<CodeCopy lang="HTML — NewsCard + CSS с сайта" code={codeNewsCard} />
|
||||
<CodeCopy lang="HTML — ReviewCard" code={codeReviewCard} />
|
||||
<CodeCopy lang="HTML — PriceCard" code={codePriceCard} />
|
||||
<CodeCopy lang="HTML — Badges, Tags, Alerts" code={codeBadges} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-блок */}
|
||||
<LlmBlock path="/components/cards" version="v1.0" specText={LLM_CARDS_TEXT}>
|
||||
<LlmSection title="Типы карточек" />
|
||||
<LlmTable
|
||||
headers={["Карточка", "Ключевые размеры", "Источник на сайте", "Фон / hover"]}
|
||||
rows={[
|
||||
["DoctorCard", "фото 110×160px, layout: flex", ".doctor .image + .doctor .item", "#fff / —"],
|
||||
["NewsCard", "preview h=144px, grid 3 col", "#block-views-last-news-block-1 .views-column", "#fff / #eef4d1 + shadow"],
|
||||
["ReviewCard", "4 строки текста, рейтинг", ".node-reviews", "#eef4d1 / —"],
|
||||
["PriceCard", "flex row: name + price", ".field-name-field-price-priem", "#fff / highlighted: #f0f9ff"],
|
||||
["ServiceCard", "иконка 48×48, grid 4 col", "—", "#fff / shadow"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Бейджи, теги, алерты" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Варианты", "Размер", "Применение"]}
|
||||
rows={[
|
||||
["Badge", "primary / success / warning / danger / neutral", "text-xs, px-2.5, rounded-full", "Статус врача, категория, акция"],
|
||||
["Tag", "default / active", "text-xs, px-3, rounded-4px", "Фильтры, категории услуг"],
|
||||
["Alert", "info / success / warning / error", "p-4, border-radius 12px", "Системные сообщения пользователю"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "DoctorCard: всегда фото-placeholder если нет фото" },
|
||||
{ ok: true, text: "NewsCard: hover #eef4d1 + box-shadow (из реального CSS сайта)" },
|
||||
{ ok: true, text: "ReviewCard: обрезать текст после 4 строк (WebkitLineClamp: 4)" },
|
||||
{ ok: true, text: "PriceCard highlighted = акционная / рекомендуемая позиция" },
|
||||
{ ok: true, text: "Alert: один тип одновременно на экране" },
|
||||
{ ok: false, text: "Не смешивать типы карточек в одной сетке без заголовка" },
|
||||
{ ok: false, text: "Не использовать ReviewCard без рейтинга" },
|
||||
{ ok: false, text: "Не ставить более 3 бейджей рядом" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,723 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Toggle } from "@/components/ui/Toggle";
|
||||
import { CodeCopy } from "@/components/ui/CodeCopy";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
id,
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
id?: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldLabel({ text, required }: { text: string; required?: boolean }) {
|
||||
return (
|
||||
<label
|
||||
className="block text-sm font-medium mb-1.5"
|
||||
style={{ color: "var(--bb-text)" }}
|
||||
>
|
||||
{text}
|
||||
{required && <span style={{ color: "#dc2626", marginLeft: 2 }}>*</span>}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldHint({ text }: { text: string }) {
|
||||
return (
|
||||
<p className="mt-1.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldError({ text }: { text: string }) {
|
||||
return (
|
||||
<p className="mt-1.5 text-xs" style={{ color: "#dc2626" }}>
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function StateCard({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border p-4" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<div className="mb-3">{children}</div>
|
||||
<p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
|
||||
{label}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{hint}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const LLM_FORMS_TEXT = `ФОРМ-КОНТРОЛЫ — LLM-спецификация
|
||||
Версия: v2.0 · /components/forms
|
||||
|
||||
ТЕКСТОВОЕ ПОЛЕ (Input)
|
||||
CSS класс: .bb-input
|
||||
Высота: 50px · padding: 10px 12px
|
||||
border: 1px solid #ccc · border-radius: 4px · font: Fira Sans 14px
|
||||
Источник: entityform input[type=text] на perm.oclinica.ru
|
||||
Состояния:
|
||||
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
|
||||
|
||||
МНОГОСТРОЧНЫЙ ТЕКСТ (Textarea)
|
||||
CSS класс: .bb-textarea
|
||||
Те же состояния что у Input
|
||||
min-height: 100px · resize: vertical · padding: 10px 12px
|
||||
|
||||
ВЫПАДАЮЩИЙ СПИСОК (Select)
|
||||
CSS класс: .bb-select
|
||||
Высота: 50px · padding: 10px 36px 10px 10px
|
||||
Стрелка: SVG background-image (data URI)
|
||||
Источник: .form-control.form-select entityform на сайте
|
||||
Те же состояния что у Input
|
||||
|
||||
ФЛАЖОК (Checkbox)
|
||||
CSS класс: .bb-checkbox
|
||||
size: 16×16px · accent-color: #5b7b87
|
||||
HTML: <input type="checkbox" class="bb-checkbox" />
|
||||
Состояния: unchecked / checked / disabled / checked+disabled
|
||||
|
||||
ПЕРЕКЛЮЧАТЕЛЬ ВАРИАНТА (Radio)
|
||||
CSS класс: .bb-radio
|
||||
size: 16×16px · accent-color: #5b7b87
|
||||
HTML: <input type="radio" class="bb-radio" name="group" />
|
||||
Всегда в группе — один выбранный из нескольких
|
||||
|
||||
ТУМБЛЕР (Toggle/Switch)
|
||||
Компонент: @/components/ui/Toggle (React, "use client")
|
||||
Ширина трека: 44px · Высота: 24px · Бегунок: 20×20px
|
||||
Выкл: track #d1d5db · Вкл: track #5b7b87
|
||||
CSS: .bb-toggle-track / .bb-toggle-thumb
|
||||
HTML-аналог: <input type="checkbox" role="switch" />
|
||||
|
||||
КОНТЕКСТ ПРИМЕНЕНИЯ НА САЙТЕ
|
||||
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)
|
||||
✓ Группы checkbox/radio — вертикальный список с gap: 10px
|
||||
✓ Toggle — для булевых настроек включить/выключить
|
||||
✕ Не использовать placeholder вместо label
|
||||
✕ Не скрывать обязательность поля
|
||||
✕ Не делать поля шире контейнера`.trim();
|
||||
|
||||
export default function FormsPage() {
|
||||
const codeInput = `<!-- HTML -->
|
||||
<label class="bb-label">Имя пациента <span style="color:#dc2626">*</span></label>
|
||||
<input class="bb-input" type="text" placeholder="Иван Иванов" />
|
||||
<p class="bb-hint">Укажите имя как в паспорте</p>
|
||||
|
||||
<!-- Error-состояние -->
|
||||
<input class="bb-input bb-error" type="text" value="ива" />
|
||||
<p style="color:#dc2626;font-size:12px">Минимум 3 символа</p>
|
||||
|
||||
<!-- Password -->
|
||||
<input class="bb-input" type="password" placeholder="Введите пароль" />`;
|
||||
|
||||
const codeTextarea = `<label class="bb-label">Комментарий к записи</label>
|
||||
<textarea class="bb-textarea" rows="4" placeholder="Опишите симптомы..."></textarea>`;
|
||||
|
||||
const codeSelect = `<label class="bb-label">Специализация</label>
|
||||
<select class="bb-select">
|
||||
<option value="">Выберите специализацию</option>
|
||||
<option value="lor">ЛОР — ухо, горло, нос</option>
|
||||
<option value="aud">Аудиология</option>
|
||||
</select>`;
|
||||
|
||||
const codeCheckbox = `<!-- Одиночный -->
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-checkbox" type="checkbox" />
|
||||
<span>Согласен с условиями</span>
|
||||
</label>
|
||||
|
||||
<!-- Группа -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-checkbox" type="checkbox" checked /> ЛОР
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-checkbox" type="checkbox" /> Аудиология
|
||||
</label>
|
||||
</div>`;
|
||||
|
||||
const codeRadio = `<div style="display:flex;flex-direction:column;gap:10px" role="radiogroup">
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-radio" type="radio" name="visit" value="first" checked />
|
||||
Первичный приём
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-radio" type="radio" name="visit" value="repeat" />
|
||||
Повторный приём
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px">
|
||||
<input class="bb-radio" type="radio" name="visit" value="online" />
|
||||
Онлайн-консультация
|
||||
</label>
|
||||
</div>`;
|
||||
|
||||
const codeToggle = `import { Toggle } from "@/components/ui/Toggle";
|
||||
|
||||
// Базовый тумблер
|
||||
<Toggle />
|
||||
|
||||
// С меткой
|
||||
<Toggle label="Получать уведомления" />
|
||||
|
||||
// По умолчанию включён
|
||||
<Toggle defaultChecked label="Email-рассылка" />
|
||||
|
||||
// Заблокирован
|
||||
<Toggle disabled label="Настройка недоступна" />`;
|
||||
|
||||
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 (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Компоненты → 3.2
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Форм-контролы
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели.
|
||||
Применяются в формах записи, фильтрах и настройках.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. Input */}
|
||||
<Section
|
||||
id="input"
|
||||
title="Текстовое поле"
|
||||
subtitle="Базовый элемент ввода текста. Класс .bb-input. Высота 50px — как на сайте oclinica.ru."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
||||
<StateCard label="Default" hint="border: 1px solid #ccc · border-radius: 4px · height: 50px">
|
||||
<FieldLabel text="Имя пациента" required />
|
||||
<input className="bb-input" type="text" placeholder="Иван Иванов" readOnly />
|
||||
<FieldHint text="Укажите имя как в паспорте" />
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Focus" hint="border #7ecfca + box-shadow rgba(126,207,202,0.2)">
|
||||
<FieldLabel text="Имя пациента" required />
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
defaultValue="Иван"
|
||||
readOnly
|
||||
style={{
|
||||
borderColor: "var(--brand-053m)",
|
||||
boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
|
||||
}}
|
||||
/>
|
||||
<FieldHint text="Укажите имя как в паспорте" />
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Error" hint="border #dc2626 + .bb-error + сообщение об ошибке">
|
||||
<FieldLabel text="Имя пациента" required />
|
||||
<input
|
||||
className="bb-input bb-error"
|
||||
type="text"
|
||||
defaultValue="ив"
|
||||
readOnly
|
||||
/>
|
||||
<FieldError text="Минимум 3 символа" />
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Disabled" hint="opacity: 0.5 + cursor: not-allowed">
|
||||
<FieldLabel text="Email (только чтение)" />
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
defaultValue="ivan@example.com"
|
||||
disabled
|
||||
/>
|
||||
<FieldHint text="Email нельзя изменить" />
|
||||
</StateCard>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div
|
||||
className="rounded-xl border p-4"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Тип password
|
||||
</p>
|
||||
<div className="max-w-sm">
|
||||
<FieldLabel text="Пароль" required />
|
||||
<input className="bb-input" type="password" placeholder="Введите пароль" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 2. Textarea */}
|
||||
<Section
|
||||
id="textarea"
|
||||
title="Многострочный текст"
|
||||
subtitle="Поле для длинного ввода. Класс .bb-textarea. border: 1px solid #ccc · border-radius: 4px."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StateCard label="Default" hint="min-height: 100px · resize: vertical">
|
||||
<FieldLabel text="Комментарий к записи" />
|
||||
<textarea
|
||||
className="bb-textarea"
|
||||
rows={3}
|
||||
placeholder="Опишите симптомы или пожелания..."
|
||||
readOnly
|
||||
/>
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Focus" hint="border #7ecfca + box-shadow">
|
||||
<FieldLabel text="Комментарий к записи" />
|
||||
<textarea
|
||||
className="bb-textarea"
|
||||
rows={3}
|
||||
defaultValue="Беспокоит боль в горле..."
|
||||
readOnly
|
||||
style={{
|
||||
borderColor: "var(--brand-053m)",
|
||||
boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
|
||||
}}
|
||||
/>
|
||||
</StateCard>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 3. Select */}
|
||||
<Section
|
||||
id="select"
|
||||
title="Выпадающий список"
|
||||
subtitle="Выбор из предопределённых вариантов. Класс .bb-select. Высота 50px — как в entityform на сайте."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StateCard label="Default" hint="height: 50px · кастомная стрелка SVG">
|
||||
<FieldLabel text="Специализация" />
|
||||
<select className="bb-select">
|
||||
<option value="">Выберите специализацию</option>
|
||||
<option value="lor">ЛОР — ухо, горло, нос</option>
|
||||
<option value="aud">Аудиология</option>
|
||||
<option value="ped">ЛОР (детская)</option>
|
||||
</select>
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Выбрано значение" hint="Нативное поведение браузера">
|
||||
<FieldLabel text="Специализация" />
|
||||
<select className="bb-select" defaultValue="lor">
|
||||
<option value="">Выберите специализацию</option>
|
||||
<option value="lor">ЛОР — ухо, горло, нос</option>
|
||||
<option value="aud">Аудиология</option>
|
||||
<option value="ped">ЛОР (детская)</option>
|
||||
</select>
|
||||
</StateCard>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 4. Checkbox */}
|
||||
<Section
|
||||
id="checkbox"
|
||||
title="Флажок"
|
||||
subtitle="Независимый выбор одного или нескольких вариантов. Класс .bb-checkbox."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StateCard label="Одиночный флажок" hint="Согласие с условиями, подтверждение">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="bb-checkbox" />
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Согласен с условиями
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="bb-checkbox" defaultChecked />
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Получать уведомления
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
className="flex items-center gap-2"
|
||||
style={{ opacity: 0.5, cursor: "not-allowed" }}
|
||||
>
|
||||
<input type="checkbox" className="bb-checkbox" disabled />
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Недоступная опция
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="Группа флажков" hint="Выбор нескольких специализаций">
|
||||
<FieldLabel text="Интересующие направления" />
|
||||
<div className="flex flex-col gap-2.5 mt-1">
|
||||
{["ЛОР — ухо, горло, нос", "Аудиология", "ЛОР (детская)", "Слухопротезирование"].map(
|
||||
(item, i) => (
|
||||
<label key={item} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="bb-checkbox"
|
||||
defaultChecked={i === 0}
|
||||
/>
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
{item}
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</StateCard>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 5. Radio */}
|
||||
<Section
|
||||
id="radio"
|
||||
title="Переключатель варианта"
|
||||
subtitle="Выбор одного из взаимоисключающих вариантов. Класс .bb-radio."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StateCard label="Тип приёма" hint="Один выбранный из нескольких">
|
||||
<FieldLabel text="Тип приёма" />
|
||||
<div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
|
||||
{[
|
||||
{ value: "first", label: "Первичный приём", checked: true },
|
||||
{ value: "repeat", label: "Повторный приём", checked: false },
|
||||
{ value: "online", label: "Онлайн-консультация", checked: false },
|
||||
].map(({ value, label, checked }) => (
|
||||
<label key={value} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
className="bb-radio"
|
||||
name="visit-type-demo"
|
||||
defaultChecked={checked}
|
||||
/>
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</StateCard>
|
||||
|
||||
<StateCard label="С отключённым вариантом" hint="disabled скрывает недоступный выбор">
|
||||
<FieldLabel text="Способ контакта" />
|
||||
<div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
|
||||
{[
|
||||
{ value: "phone", label: "Телефон", disabled: false, checked: true },
|
||||
{ value: "sms", label: "SMS", disabled: false, checked: false },
|
||||
{ value: "whatsapp", label: "WhatsApp (скоро)", disabled: true, checked: false },
|
||||
].map(({ value, label, disabled, checked }) => (
|
||||
<label
|
||||
key={value}
|
||||
className="flex items-center gap-2"
|
||||
style={{ cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1 }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="bb-radio"
|
||||
name="contact-demo"
|
||||
disabled={disabled}
|
||||
defaultChecked={checked}
|
||||
/>
|
||||
<span className="text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</StateCard>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 6. Toggle */}
|
||||
<Section
|
||||
id="toggle"
|
||||
title="Тумблер"
|
||||
subtitle="Булевый переключатель «включено / выключено». Компонент Toggle."
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div
|
||||
className="rounded-xl border p-5"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
|
||||
Интерактивные примеры
|
||||
</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Toggle label="Получать уведомления" />
|
||||
<Toggle defaultChecked label="Email-рассылка" />
|
||||
<Toggle defaultChecked label="Push-уведомления" />
|
||||
<Toggle disabled label="Недоступная настройка" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="rounded-xl border p-5"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
|
||||
Состояния
|
||||
</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Выкл (default)</span>
|
||||
<Toggle />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Вкл (defaultChecked)</span>
|
||||
<Toggle defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled</span>
|
||||
<Toggle disabled />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled + вкл</span>
|
||||
<Toggle disabled defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 7. Контекст на сайте */}
|
||||
<Section
|
||||
id="context"
|
||||
title="Контекст применения"
|
||||
subtitle="Как форм-контролы выглядят на сайте oclinica.ru — в реальных entityform-блоках."
|
||||
>
|
||||
<div className="overflow-x-auto mb-6">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Контрол", "CSS класс", "Где на сайте", "CSS-блок на сайте"].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-3 py-2 font-semibold text-xs uppercase tracking-wide"
|
||||
style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Input (text)", ".bb-input", "Форма записи ЛОР, форма хирургии, «Узнайте стоимость»", "#block-entityform-block-lor-form input[type=text]"],
|
||||
["Select", ".bb-select", "Выбор врача в форме записи", ".field-name-field-lor-vrach .form-control.form-select"],
|
||||
["Checkbox", ".bb-checkbox", "Согласие на обработку данных в entityform", ".form-type-checkbox.checkbox label"],
|
||||
["Textarea", ".bb-textarea", "Комментарии (в ряде форм)", "Без специального CSS на сайте (Bootstrap)"],
|
||||
["Toggle", ".bb-toggle-track", "Не используется на сайте (UI-компонент брендбука)", "—"],
|
||||
].map(([ctrl, cls, where, block]) => (
|
||||
<tr key={ctrl} style={{ borderBottom: "1px solid var(--bb-border)" }}>
|
||||
<td className="px-3 py-2.5 font-medium" style={{ color: "var(--bb-text)" }}>{ctrl}</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<code className="text-xs px-1.5 py-0.5 rounded" style={{ background: "var(--bb-sidebar-bg)", color: "var(--brand-073m)" }}>{cls}</code>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>{where}</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<code className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{block}</code>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Макет формы как на сайте */}
|
||||
<div className="rounded-xl overflow-hidden border" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<div className="px-4 py-2 text-xs font-semibold uppercase tracking-widest" style={{ background: "var(--bb-sidebar-bg)", color: "var(--bb-text-muted)" }}>
|
||||
Макет — entityform «Узнайте стоимость операции» (oclinica.ru/lor)
|
||||
</div>
|
||||
<div style={{ background: "#b8e6ed", padding: "32px 24px" }}>
|
||||
<div
|
||||
className="mx-auto"
|
||||
style={{
|
||||
maxWidth: 340,
|
||||
background: "#b8e6ed",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<p className="text-sm font-semibold mb-4" style={{ color: "#333", fontFamily: "var(--font-web)" }}>
|
||||
Узнайте стоимость операции
|
||||
</p>
|
||||
<div className="flex flex-col gap-3" style={{ alignItems: "center" }}>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
style={{ width: 302 }}
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Ваш телефон"
|
||||
style={{ width: 302 }}
|
||||
readOnly
|
||||
/>
|
||||
<select className="bb-select" style={{ width: 302 }}>
|
||||
<option>Выберите врача</option>
|
||||
<option>Иванов И.И.</option>
|
||||
</select>
|
||||
<button className="bb-btn bb-btn-lg bb-btn-primary" style={{ width: 300 }}>
|
||||
Запишите меня!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 8. Примеры кода */}
|
||||
<Section
|
||||
id="code"
|
||||
title="Примеры кода"
|
||||
subtitle="Скопируйте HTML или JSX для использования в проекте."
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<CodeCopy lang="HTML — Input" code={codeInput} />
|
||||
<CodeCopy lang="HTML — Textarea" code={codeTextarea} />
|
||||
<CodeCopy lang="HTML — Select" code={codeSelect} />
|
||||
<CodeCopy lang="HTML — Checkbox" code={codeCheckbox} />
|
||||
<CodeCopy lang="HTML — Radio" code={codeRadio} />
|
||||
<CodeCopy lang="JSX (React) — Toggle" code={codeToggle} />
|
||||
<CodeCopy lang="CSS с сайта (perm.oclinica.ru)" code={codeSiteCSS} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-блок */}
|
||||
<LlmBlock path="/components/forms" version="v2.0" specText={LLM_FORMS_TEXT}>
|
||||
<LlmSection title="Элементы ввода" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "CSS класс", "Тег", "Высота", "Описание"]}
|
||||
rows={[
|
||||
["Input", ".bb-input", "<input>", "50px", "Текстовое поле, email, password · как на сайте"],
|
||||
["Textarea", ".bb-textarea", "<textarea>", "≥100px", "Многострочный ввод, resize:vertical"],
|
||||
["Select", ".bb-select", "<select>", "50px", "Выбор из списка, кастомная стрелка · как на сайте"],
|
||||
["Checkbox", ".bb-checkbox", "<input type=checkbox>", "16×16px", "Независимый выбор"],
|
||||
["Radio", ".bb-radio", "<input type=radio>", "16×16px", "Выбор одного из группы"],
|
||||
["Toggle", ".bb-toggle-track", "React-компонент", "24px", "Булев переключатель"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Состояния полей (Input / Textarea / Select)" />
|
||||
<LlmTable
|
||||
headers={["Состояние", "Стиль"]}
|
||||
rows={[
|
||||
["default", "border: 1px solid #ccc · border-radius: 4px"],
|
||||
["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"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Параметры Toggle" />
|
||||
<LlmTable
|
||||
headers={["Параметр", "Тип", "По умолч.", "Описание"]}
|
||||
rows={[
|
||||
["defaultChecked", "boolean", "false", "Начальное состояние"],
|
||||
["disabled", "boolean", "false", "Блокирует взаимодействие"],
|
||||
["label", "string", "—", "Текстовая метка справа от тумблера"],
|
||||
["onChange", "(checked: boolean) => void", "—", "Колбэк при изменении"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Метка (label) всегда над полем, font-weight: 500" },
|
||||
{ ok: true, text: "Обязательные поля помечены * красным (#dc2626)" },
|
||||
{ ok: true, text: "Hint-текст серым под полем (font-size: 12px)" },
|
||||
{ ok: true, text: "Ошибка — красный текст вместо hint" },
|
||||
{ ok: true, text: "Checkbox-группы — вертикальный список с gap: 10px" },
|
||||
{ ok: true, text: "Toggle — для булевых настроек включить/выключить" },
|
||||
{ ok: false, text: "Не использовать placeholder вместо label" },
|
||||
{ ok: false, text: "Не скрывать признак обязательности поля" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const NAV_ITEMS = [
|
||||
"Клиника",
|
||||
"ЛОР врачи",
|
||||
"Заболевания",
|
||||
"Вопрос-ответ",
|
||||
"ЛОР-операции",
|
||||
"Сурдология",
|
||||
"Цены",
|
||||
"Контакты",
|
||||
];
|
||||
|
||||
const LLM_NAV_TEXT = `
|
||||
БЛОК: Шапка и навигация сайта (Header)
|
||||
Источник: perm.oclinica.ru/lor — реальная шапка сайта
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА ШАПКИ (3 зоны сверху вниз):
|
||||
|
||||
1. ТОП-БАР (~40px высота, фон #fff, border-bottom 1px solid #e5e7eb)
|
||||
Левая часть:
|
||||
— Адрес: «Б. Цитная, 3» с иконкой 📍
|
||||
— Ссылка: «Клиника ухо горло нос и аллергия»
|
||||
— Ссылка: «Центр аллергологии и пульмонологии»
|
||||
Правая часть:
|
||||
— Телефон: «/342/ 255-53-84» (font-weight: bold, color: #111827)
|
||||
— Кнопка «Заказать звонок» — стиль bb-btn-pill (#e9e4d4, border #d5cfbd, border-radius 25px)
|
||||
|
||||
2. ЛОГОТИП (~64px, фон #fff)
|
||||
— Иконка кружок синий (#0089c3) с крестом
|
||||
— Текст «КЛИНИКА УХО ГОРЛО НОС» жирный uppercase, цвет #53514e
|
||||
— Подпись «им. проф. Е.Н.Оленевой» мелкий, цвет #9ca3af
|
||||
|
||||
3. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
|
||||
Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР-операции | Сурдология | Цены | Контакты
|
||||
Шрифт: Fira Sans 14px, weight 400
|
||||
Цвет ссылок: #53514e (--brand-073m)
|
||||
Активный / Hover: #0089c3 (--brand-053m)
|
||||
Разделители: border-right 1px solid #f3f4f6 между пунктами
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
|
||||
✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
|
||||
✓ Телефон кликабелен (tel: ссылка)
|
||||
✓ Активный пункт меню — цвет #0089c3, остальные #53514e
|
||||
✕ Не добавлять пункты меню, которых нет на сайте
|
||||
✕ Не менять порядок пунктов меню
|
||||
`.trim();
|
||||
|
||||
export default function NavigationPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Компоненты
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Шапка и навигация
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden"
|
||||
style={{ border: "1px solid var(--bb-border)", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
|
||||
>
|
||||
{/* Топ-бар */}
|
||||
<div
|
||||
className="flex items-center justify-between px-6 py-2 text-xs border-b"
|
||||
style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>📍 Б. Цитная, 3</span>
|
||||
<a href="#" style={{ color: "#0089c3" }}>
|
||||
Клиника ухо горло нос и аллергия
|
||||
</a>
|
||||
<a href="#" style={{ color: "#0089c3" }}>
|
||||
Центр аллергологии и пульмонологии
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="font-bold text-sm" style={{ color: "#111827" }}>
|
||||
/342/ 255-53-84
|
||||
</span>
|
||||
<button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Логотип */}
|
||||
<div className="flex items-center px-6 py-3 bg-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0"
|
||||
style={{ background: "#0089c3" }}
|
||||
>
|
||||
✚
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-[11px] font-bold leading-tight uppercase tracking-wide"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
Клиника<br />ухо, горло, нос
|
||||
</div>
|
||||
<div className="text-[9px] leading-tight mt-0.5" style={{ color: "#9ca3af" }}>
|
||||
им. проф. Е.Н.Оленевой
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Навигация */}
|
||||
<nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
|
||||
{NAV_ITEMS.map((item, i) => (
|
||||
<a
|
||||
key={item}
|
||||
href="#"
|
||||
className="px-4 py-3 text-sm bb-nav-link whitespace-nowrap"
|
||||
style={{
|
||||
color: i === 0 ? "#0089c3" : "#53514e",
|
||||
borderRight: "1px solid #f3f4f6",
|
||||
fontWeight: i === 0 ? 500 : 400,
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия шапки
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{
|
||||
zone: "1. Топ-бар",
|
||||
bg: "#f0f9ff",
|
||||
height: "~40px",
|
||||
color: "Фон: #fff",
|
||||
desc: "Адрес, ссылки на разделы клиники, телефон, кнопка «Заказать звонок» (pill)",
|
||||
},
|
||||
{
|
||||
zone: "2. Логотип",
|
||||
bg: "#f0fdf4",
|
||||
height: "~64px",
|
||||
color: "Фон: #fff",
|
||||
desc: "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким",
|
||||
},
|
||||
{
|
||||
zone: "3. Навигация",
|
||||
bg: "#fefce8",
|
||||
height: "~46px",
|
||||
color: "Фон: #fff, border-top",
|
||||
desc: "8 горизонтальных пунктов, активный = #0089c3, остальные = #53514e",
|
||||
},
|
||||
].map((z) => (
|
||||
<div
|
||||
key={z.zone}
|
||||
className="rounded-xl p-4 space-y-2"
|
||||
style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
{z.zone}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{z.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-mono mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
H: {z.height} · {z.color}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Пункты меню */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Пункты главного меню
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{NAV_ITEMS.map((item, i) => (
|
||||
<span
|
||||
key={item}
|
||||
className="px-3 py-1.5 rounded text-sm"
|
||||
style={{
|
||||
background: i === 0 ? "#dff0fa" : "var(--bb-sidebar-bg)",
|
||||
color: i === 0 ? "var(--brand-053m)" : "var(--bb-text)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
fontWeight: i === 0 ? 500 : 400,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{i === 0 && (
|
||||
<span className="ml-1.5 text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
(активный)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Порядок пунктов фиксирован. Hover и активный пункт — цвет #0089c3 (--brand-053m).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Токены */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Цвета и токены
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: "Фон шапки", value: "#ffffff", token: "—" },
|
||||
{ label: "Ссылки меню", value: "#53514e", token: "--brand-073m" },
|
||||
{ label: "Активный / hover", value: "#0089c3", token: "--brand-053m" },
|
||||
{ label: "Кнопка «Заказать»", value: "#e9e4d4", token: "bb-btn-pill" },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="p-3 rounded-xl space-y-2"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded border"
|
||||
style={{ background: t.value, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{t.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.value}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.token}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/components/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
|
||||
<LlmSection title="Зоны шапки" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Высота", "Фон", "Содержимое"]}
|
||||
rows={[
|
||||
["Топ-бар", "~40px", "#fff", "Адрес, ссылки разделов, телефон /342/ 255-53-84, кнопка «Заказать звонок»"],
|
||||
["Логотип", "~64px", "#fff", "Кружок #0089c3 + «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»"],
|
||||
["Навигация", "~46px", "#fff + border-top", "8 пунктов: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон шапки", "#ffffff", "—"],
|
||||
["Ссылки меню (default)", "#53514e", "--brand-073m"],
|
||||
["Активный пункт / hover", "#0089c3", "--brand-053m"],
|
||||
["Кнопка «Заказать звонок»", "#e9e4d4 / border #d5cfbd", "bb-btn-pill"],
|
||||
["Телефон", "#111827, font-weight bold", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Логотип ведёт на главную страницу раздела" },
|
||||
{ ok: true, text: "Кнопка «Заказать звонок» всегда видна, pill-стиль" },
|
||||
{ ok: true, text: "Телефон — кликабельная ссылка tel:" },
|
||||
{ ok: true, text: "Активный пункт меню — цвет #0089c3" },
|
||||
{ ok: false, text: "Не добавлять пункты меню, которых нет на сайте" },
|
||||
{ ok: false, text: "Не менять порядок 8 пунктов меню" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
/* ─── Утилиты конвертации ──────────────────────────────────────────── */
|
||||
@@ -54,42 +55,42 @@ const BRAND_COLORS = [
|
||||
{
|
||||
oracal: "053M",
|
||||
name: "Основной бирюзовый",
|
||||
hex: "#7ecfca",
|
||||
hex: "#0089c3",
|
||||
usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния",
|
||||
cssVar: "--brand-053m",
|
||||
},
|
||||
{
|
||||
oracal: "073M",
|
||||
name: "Тёмный серо-голубой",
|
||||
hex: "#5b7b87",
|
||||
hex: "#53514e",
|
||||
usage: "Тёмный фон, хедер, акценты на тёмных поверхностях",
|
||||
cssVar: "--brand-073m",
|
||||
},
|
||||
{
|
||||
oracal: "066M",
|
||||
name: "Средний бирюзовый",
|
||||
hex: "#5bb5ad",
|
||||
hex: "#00818c",
|
||||
usage: "Вторичные акценты, фоны секций, иллюстрации",
|
||||
cssVar: "--brand-066m",
|
||||
},
|
||||
{
|
||||
oracal: "050M",
|
||||
name: "Тёмно-синий",
|
||||
hex: "#1b4c72",
|
||||
hex: "#1b2e5d",
|
||||
usage: "Наружная реклама, полиграфия, заголовки на светлом фоне",
|
||||
cssVar: "--brand-050m",
|
||||
},
|
||||
{
|
||||
oracal: "081M",
|
||||
name: "Бежевый",
|
||||
hex: "#c4a882",
|
||||
hex: "#a8885c",
|
||||
usage: "Форма сотрудников, оффлайн носители, тёплые акценты",
|
||||
cssVar: "--brand-081m",
|
||||
},
|
||||
{
|
||||
oracal: "080M",
|
||||
name: "Тёмно-коричневый",
|
||||
hex: "#5c2e0e",
|
||||
hex: "#432f1e",
|
||||
usage: "Текст на бежевых поверхностях, логотип на форме",
|
||||
cssVar: "--brand-080m",
|
||||
},
|
||||
@@ -102,14 +103,101 @@ const BRAND_COLORS = [
|
||||
},
|
||||
];
|
||||
|
||||
/* ─── Соответствие цветов ──────────────────────────────────────────── */
|
||||
const COLOR_MAPPING = [
|
||||
{
|
||||
brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#0089c3" },
|
||||
web: { name: "Бирюзовый", hex: "#63bac3", count: 4 },
|
||||
note: "Oracal — насыщенный синий; сайт — светлее и голубее",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#53514e" },
|
||||
web: { name: "Серо-бирюзовый", hex: "#60959c", count: 7 },
|
||||
note: "Oracal — тёмно-серый; сайт — серо-бирюзовый (значительное расхождение)",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#00818c" },
|
||||
web: { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 },
|
||||
note: "Oracal — тёмный бирюзовый; сайт — светлее",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "081M", name: "Бежевый", hex: "#a8885c" },
|
||||
web: { name: "Бежевый", hex: "#bf9975", count: 12 },
|
||||
note: "Oracal — тёплый охристый; сайт — прохладнее и светлее",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b2e5d" },
|
||||
web: null,
|
||||
note: "Не найден в CSS сайта",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#432f1e" },
|
||||
web: null,
|
||||
note: "Не найден в CSS сайта",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Основной текст", hex: "#464646", count: 3 },
|
||||
note: "Только на сайте — нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Второстепенный текст", hex: "#949290", count: 4 },
|
||||
note: "Только на сайте — нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", count: 1 },
|
||||
note: "Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
|
||||
note: "Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Коралловый", hex: "#ffa39c", count: 2 },
|
||||
note: "Только на сайте — CTA-кнопки, нет в оффлайн-палитре",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Светло-жёлтый фон", hex: "#eef4d1", count: 1 },
|
||||
note: "Только на сайте — фон карточек отзывов",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Светло-зелёный фон", hex: "#f2fee6", count: 1 },
|
||||
note: "Только на сайте — фон секции новостей",
|
||||
},
|
||||
];
|
||||
|
||||
/* ─── Цвета с сайта ────────────────────────────────────────────────── */
|
||||
// Источник: https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
|
||||
// Извлечены парсингом CSS: grep + python Counter по property/value, 2026-03-22
|
||||
const WEB_COLORS = [
|
||||
{ name: "Бежевый", hex: "#bf9975", usage: "Основной тёплый акцент, фоны, рамки, текст", count: 12, group: "Акценты" },
|
||||
{ name: "Серо-бирюзовый", hex: "#60959c", usage: "Основной холодный акцент, ссылки", count: 7, group: "Акценты" },
|
||||
{ name: "Бирюзовый", hex: "#63bac3", usage: "Фоны акцентных блоков, иконки", count: 4, group: "Акценты" },
|
||||
{ name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" },
|
||||
{ name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" },
|
||||
{ name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" },
|
||||
{ name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фон формы записи («Будьте здоровы!»)", count: 1, group: "Фоны" },
|
||||
{ name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", usage: "Фон Hero-баннера страниц разделов", count: 1, group: "Фоны" },
|
||||
{ name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны кнопок-пилюль, вторичные секции", count: 1, group: "Фоны" },
|
||||
{ name: "Коралловый", hex: "#ffa39c", usage: "CTA-кнопки («Запишите меня!»), акцентные призывы к действию", count: 2, group: "Акценты" },
|
||||
{ name: "Светло-жёлтый фон", hex: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" },
|
||||
{ name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" },
|
||||
];
|
||||
|
||||
const CONTRAST_PAIRS = [
|
||||
{ fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" },
|
||||
{ fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" },
|
||||
{ fg: "#ffffff", bg: "#5c2e0e", label: "Белый на тёмно-коричневом" },
|
||||
{ fg: "#ffffff", bg: "#5bb5ad", label: "Белый на среднем бирюзовом" },
|
||||
{ fg: "#111827", bg: "#7ecfca", label: "Тёмный текст на основном бирюзовом" },
|
||||
{ fg: "#111827", bg: "#c4a882", label: "Тёмный текст на бежевом" },
|
||||
{ fg: "#5c2e0e", bg: "#c4a882", label: "Тёмно-коричневый на бежевом (форма)" },
|
||||
{ fg: "#ffffff", bg: "#53514e", label: "Белый на тёмном серо-голубом (073M)" },
|
||||
{ fg: "#ffffff", bg: "#1b2e5d", label: "Белый на тёмно-синем (050M)" },
|
||||
{ fg: "#ffffff", bg: "#432f1e", label: "Белый на тёмно-коричневом (080M)" },
|
||||
{ fg: "#ffffff", bg: "#00818c", label: "Белый на среднем бирюзовом (066M)" },
|
||||
{ fg: "#111827", bg: "#0089c3", label: "Тёмный текст на основном бирюзовом (053M)" },
|
||||
{ fg: "#111827", bg: "#a8885c", label: "Тёмный текст на бежевом (081M)" },
|
||||
{ fg: "#432f1e", bg: "#a8885c", label: "Тёмно-коричневый на бежевом (форма, 080M/081M)" },
|
||||
];
|
||||
|
||||
/* ─── Компоненты ───────────────────────────────────────────────────── */
|
||||
@@ -245,9 +333,59 @@ function ContrastRow({ pair }: { pair: typeof CONTRAST_PAIRS[0] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function WebColorCard({ color }: { color: typeof WEB_COLORS[0] }) {
|
||||
const { r, g, b } = hexToRgb(color.hex);
|
||||
const { h, s, l } = rgbToHsl(r, g, b);
|
||||
const isLight = l > 60;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="h-24 flex items-end justify-between px-4 pb-3"
|
||||
style={{ background: color.hex }}
|
||||
>
|
||||
<span
|
||||
className="text-xs font-semibold px-2 py-0.5 rounded"
|
||||
style={{
|
||||
background: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.18)",
|
||||
color: isLight ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.9)",
|
||||
}}
|
||||
>
|
||||
{color.group}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs px-2 py-0.5 rounded font-mono"
|
||||
style={{
|
||||
background: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.18)",
|
||||
color: isLight ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.9)",
|
||||
}}
|
||||
>
|
||||
×{color.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4" style={{ background: "var(--bb-content-bg)" }}>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{color.name}
|
||||
</p>
|
||||
<p className="text-xs mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{color.usage}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<CopyBadge value={color.hex.toUpperCase()} label="HEX" />
|
||||
<CopyBadge value={`rgb(${r}, ${g}, ${b})`} label="RGB" />
|
||||
<CopyBadge value={`hsl(${h}, ${s}%, ${l}%)`} label="HSL" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Экспорт токенов ──────────────────────────────────────────────── */
|
||||
function exportTokens() {
|
||||
const tokens: Record<string, Record<string, string>> = { colors: {} };
|
||||
const tokens: Record<string, Record<string, unknown>> = { colors: {} };
|
||||
BRAND_COLORS.forEach(c => {
|
||||
const key = c.oracal !== "—" ? `brand-${c.oracal.toLowerCase()}` : "brand-white";
|
||||
const { r, g, b } = hexToRgb(c.hex);
|
||||
@@ -268,6 +406,63 @@ function exportTokens() {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/* ─── LLM spec text ────────────────────────────────────────────────── */
|
||||
const LLM_COLORS_TEXT = `# ЦВЕТА — LLM-СПЕЦИФИКАЦИЯ
|
||||
# Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||
# docs/LLM_CONTEXT.md · /foundation/colors · v2.2 · 2026-03-22
|
||||
|
||||
ФИРМЕННЫЕ ЦВЕТА (Oracal) — точные значения из каталога
|
||||
Oracal | Название | HEX | RGB | CSS-переменная | Применение
|
||||
053M | Основной бирюзовый | #0089C3 | rgb(0,137,195) | --brand-053m | Акцент, CTA-кнопки, иконки, активные состояния
|
||||
073M | Тёмный серо-голубой | #53514E | rgb(83,81,78) | --brand-073m | Тёмный фон, хедер, заголовки навигации
|
||||
066M | Средний бирюзовый | #00818C | rgb(0,129,140) | --brand-066m | Вторичные акценты, фоны секций
|
||||
050M | Тёмно-синий | #1B2E5D | rgb(27,46,93) | --brand-050m | Наружная реклама, полиграфия, заголовки
|
||||
081M | Бежевый | #A8885C | rgb(168,136,92) | --brand-081m | Форма сотрудников, тёплые акценты
|
||||
080M | Тёмно-коричневый | #432F1E | rgb(67,47,30) | --brand-080m | Текст на бежевом, логотип на форме
|
||||
— | Белый | #FFFFFF | rgb(255,255,255) | --brand-white | Фон, инвертированный текст, логотип на тёмных
|
||||
|
||||
ЦВЕТА САЙТА oclinica.ru (CSS: clinic_bootstrap_mobile/css/style.css)
|
||||
Название | HEX | Группа | × | Применение
|
||||
Бежевый | #BF9975 | Акценты | 12| Тёплый акцент, фоны, рамки, текст
|
||||
Серо-бирюзовый | #60959C | Акценты | 7 | Холодный акцент, ссылки
|
||||
Бирюзовый | #63BAC3 | Акценты | 4 | Фоны акцентных блоков, иконки
|
||||
Бирюзовый средний | #52B4BD | Акценты | 4 | Вторичные цветовые акценты
|
||||
Коралловый | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»)
|
||||
Основной текст | #464646 | Текст | 3 | Цвет основного текста сайта
|
||||
Второстепенный текст | #949290 | Текст | 4 | Подписи, второстепенный контент
|
||||
Светло-кремовый Hero | #F9F4E7 | Фоны | 1 | Фон Hero-баннера страниц разделов
|
||||
Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фон формы записи («Будьте здоровы!»)
|
||||
Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции
|
||||
Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов
|
||||
Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей
|
||||
|
||||
СООТВЕТСТВИЕ ORACAL → САЙТ (цифровая адаптация плёночных цветов)
|
||||
053M #0089C3 → #63BAC3 (Oracal ярко-синий; сайт светлее и голубее)
|
||||
073M #53514E → #60959C (Oracal тёмно-серый; сайт серо-бирюзовый — значительное расхождение)
|
||||
066M #00818C → #52B4BD (Oracal тёмный бирюзовый; сайт светлее)
|
||||
081M #A8885C → #BF9975 (Oracal тёплый охристый; сайт прохладнее и светлее)
|
||||
050M #1B2E5D → не найден в CSS сайта
|
||||
080M #432F1E → не найден в CSS сайта
|
||||
|
||||
КОНТРАСТНОСТЬ WCAG 2.1
|
||||
#FFFFFF / #53514E | 7.9:1 | AA PASS | AAA PASS
|
||||
#FFFFFF / #1B2E5D | 13.2:1 | AA PASS | AAA PASS
|
||||
#FFFFFF / #432F1E | 12.6:1 | AA PASS | AAA PASS
|
||||
#FFFFFF / #00818C | 4.7:1 | AA PASS | AAA FAIL
|
||||
#111827 / #0089C3 | 4.7:1 | AA PASS | AAA FAIL
|
||||
#111827 / #A8885C | 5.5:1 | AA PASS | AAA FAIL
|
||||
#432F1E / #A8885C | 3.8:1 | AA FAIL | AAA FAIL | только крупный текст ≥18pt
|
||||
|
||||
ПРАВИЛА
|
||||
✓ Только цвета из фирменной палитры
|
||||
✓ Digital → цвета сайта; оффлайн → коды Oracal
|
||||
✓ Текст на цветном фоне: минимум WCAG AA (4.5:1)
|
||||
✓ Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)
|
||||
✓ Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)
|
||||
✕ Произвольные цвета вне фирменной палитры
|
||||
✕ Изменение насыщенности / оттенка фирменных цветов
|
||||
✕ Тёплые и холодные акценты рядом без нейтрального разделителя`.trim();
|
||||
|
||||
/* ─── Страница ─────────────────────────────────────────────────────── */
|
||||
export default function ColorsPage() {
|
||||
return (
|
||||
@@ -292,12 +487,12 @@ export default function ColorsPage() {
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<div
|
||||
className="px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
|
||||
style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
|
||||
style={{ borderColor: "#bae6fd", background: "#f0f9ff", color: "#075985" }}
|
||||
>
|
||||
<span>⚠️</span>
|
||||
<span>ℹ</span>
|
||||
<span>
|
||||
HEX-значения приблизительны. Для оффлайн-носителей используйте
|
||||
официальные коды Oracal.
|
||||
HEX-значения рассчитаны по точным RGB из каталога Oracal.
|
||||
Для оффлайн-носителей используйте официальные коды Oracal.
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@@ -348,8 +543,120 @@ export default function ColorsPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Применение */}
|
||||
{/* 3. Цвета с сайта */}
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
Цвета с сайта
|
||||
</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Реальные цвета, используемые на сайте oclinica.ru. Извлечены из CSS темы сайта.
|
||||
Число применений показано в правом углу карточки.
|
||||
</p>
|
||||
<div
|
||||
className="mt-3 flex items-center gap-2 px-3 py-2 rounded-lg text-xs w-fit font-mono"
|
||||
style={{ background: "var(--bb-sidebar-bg)", color: "var(--bb-text-muted)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<span style={{ color: "var(--brand-053m)" }}>CSS</span>
|
||||
perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{WEB_COLORS.map(c => (
|
||||
<WebColorCard key={c.hex} color={c} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Соответствие */}
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
Соответствие: Oracal → Сайт
|
||||
</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Сравнение фирменной палитры (Oracal, брендбук) с реальными цветами, применёнными на сайте.
|
||||
Расхождения ожидаемы — цифровая адаптация плёночных цветов под экран.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{COLOR_MAPPING.map((row, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 p-4 rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-content-bg)" }}
|
||||
>
|
||||
{/* Левая сторона — Oracal */}
|
||||
<div className="flex items-center gap-3 w-56 shrink-0">
|
||||
{row.brand ? (
|
||||
<>
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg shrink-0 border"
|
||||
style={{ background: row.brand.hex, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
|
||||
{row.brand.hex.toUpperCase()}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Oracal {row.brand.oracal}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
—
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Стрелка */}
|
||||
<div className="shrink-0 text-sm font-bold" style={{ color: "var(--bb-text-muted)" }}>→</div>
|
||||
|
||||
{/* Правая сторона — Сайт */}
|
||||
<div className="flex items-center gap-3 w-56 shrink-0">
|
||||
{row.web ? (
|
||||
<>
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg shrink-0 border"
|
||||
style={{ background: row.web.hex, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
|
||||
{row.web.hex.toUpperCase()}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{row.web.name} · ×{row.web.count}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
—
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Нет на сайте</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Примечание */}
|
||||
<p className="flex-1 text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{row.note}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Применение */}
|
||||
<section className="mb-10">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
Правила применения
|
||||
@@ -410,6 +717,105 @@ export default function ColorsPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. LLM-спецификация */}
|
||||
<section className="mb-8">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
LLM-спецификация
|
||||
</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Машиночитаемые данные раздела для использования AI-ассистентами при разработке
|
||||
дизайна, макетов и кода. Нажмите «Скопировать» чтобы получить полный текст.
|
||||
</p>
|
||||
</div>
|
||||
<LlmBlock
|
||||
path="/foundation/colors"
|
||||
version="v2.2"
|
||||
specText={LLM_COLORS_TEXT}
|
||||
>
|
||||
{/* Фирменные цвета */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Фирменные цвета (Oracal)" />
|
||||
<LlmTable
|
||||
headers={["Oracal", "HEX", "RGB", "CSS-переменная", "Применение"]}
|
||||
rows={BRAND_COLORS.map(c => {
|
||||
const { r, g, b } = hexToRgb(c.hex);
|
||||
return [
|
||||
<span key="o" className="flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-sm shrink-0 border inline-block" style={{ background: c.hex, borderColor: "var(--bb-border)" }} />
|
||||
{c.oracal}
|
||||
</span>,
|
||||
<span key="h" style={{ color: "var(--bb-text)" }}>{c.hex.toUpperCase()}</span>,
|
||||
`rgb(${r},${g},${b})`,
|
||||
<span key="v" style={{ color: "var(--brand-073m)" }}>{c.cssVar}</span>,
|
||||
c.usage,
|
||||
];
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Цвета сайта */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Цвета сайта oclinica.ru" />
|
||||
<LlmTable
|
||||
headers={["Название", "HEX", "Группа", "×", "Применение"]}
|
||||
rows={WEB_COLORS.map(c => [
|
||||
<span key="n" className="flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-sm shrink-0 border inline-block" style={{ background: c.hex, borderColor: "var(--bb-border)" }} />
|
||||
{c.name}
|
||||
</span>,
|
||||
<span key="h" style={{ color: "var(--bb-text)" }}>{c.hex.toUpperCase()}</span>,
|
||||
c.group,
|
||||
String(c.count),
|
||||
c.usage,
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Контрастность */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Контрастность WCAG 2.1" />
|
||||
<LlmTable
|
||||
headers={["Пара (fg / bg)", "Ratio", "AA (4.5:1)", "AAA (7:1)", "AA large (3:1)"]}
|
||||
rows={CONTRAST_PAIRS.map(p => {
|
||||
const ratio = contrastRatio(p.fg, p.bg);
|
||||
const aa = ratio >= 4.5, aaa = ratio >= 7, aal = ratio >= 3;
|
||||
const badge = (pass: boolean) => (
|
||||
<span key={String(pass)} style={{ color: pass ? "#059669" : "#dc2626", fontWeight: 700 }}>
|
||||
{pass ? "PASS" : "FAIL"}
|
||||
</span>
|
||||
);
|
||||
return [
|
||||
<span key="pair" className="flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-sm border inline-block shrink-0" style={{ background: p.bg, borderColor: "var(--bb-border)" }} />
|
||||
{p.fg} / {p.bg}
|
||||
</span>,
|
||||
`${ratio}:1`,
|
||||
badge(aa),
|
||||
badge(aaa),
|
||||
badge(aal),
|
||||
];
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Правила */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules rules={[
|
||||
{ ok: true, text: "Только цвета из фирменной палитры" },
|
||||
{ ok: true, text: "Digital → цвета сайта; оффлайн → коды Oracal" },
|
||||
{ ok: true, text: "Текст на цветном фоне: минимум WCAG AA (4.5:1)" },
|
||||
{ ok: true, text: "Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)" },
|
||||
{ ok: true, text: "Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)" },
|
||||
{ ok: false, text: "Произвольные цвета вне фирменной палитры" },
|
||||
{ ok: false, text: "Изменение насыщенности / оттенка фирменных цветов" },
|
||||
{ ok: false, text: "Тёплые + холодные акценты рядом без разделителя" },
|
||||
]} />
|
||||
</div>
|
||||
</LlmBlock>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Логотип | Брендбук О!Клиника",
|
||||
title: "Логотип. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function RuleTag({ children }: { children: React.ReactNode }) {
|
||||
@@ -102,6 +103,44 @@ function ProhibitedItem({ label }: { label: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
const LLM_LOGO_TEXT = `ЛОГОТИП — LLM-спецификация
|
||||
Версия: v1.0 · /foundation/logo
|
||||
|
||||
ФАЙЛЫ
|
||||
PNG с прозрачным фоном: /public/logo/logo-transparent.png
|
||||
SVG/AI: ожидается от дизайнера
|
||||
|
||||
СИМВОЛИКА ЗНАКА
|
||||
Три округлых элемента с равной дистанцией от центра.
|
||||
- Незамкнутая симметрия: символ развития и жизни, а не завершённости
|
||||
- Три элемента: структура ухо-горло-нос, триада равновесия
|
||||
- Отсутствие замкнутой формы: открытость, доступность, человечность
|
||||
|
||||
ЦВЕТОВЫЕ ВАРИАНТЫ
|
||||
Вариант | Фон | CSS-фильтр | Применение
|
||||
Основной | Светлый (#f8f9fa) | нет | Сайт, полиграфия на белом
|
||||
Инвертированный | #5b7b87 (073M) | brightness(0) invert(1) | Хедер, тёмные секции
|
||||
На форме (беж) | #c4a882 (081M) | brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45) | Форма сотрудников (бежевый)
|
||||
На форме (синий)| #1b4c72 (050M) | brightness(0) invert(1) | Форма сотрудников (синий)
|
||||
|
||||
ОХРАННАЯ ЗОНА
|
||||
Минимальный отступ со всех сторон = высота буквы «К» в слове «КЛИНИКА»
|
||||
|
||||
РАЗМЕРЫ НА ФОРМЕ СОТРУДНИКОВ
|
||||
До 46 р. | 70 мм × 25,5 мм | Левая сторона груди
|
||||
От 48 р. | 90 мм × 32,8 мм | Левая сторона груди
|
||||
|
||||
ПРАВИЛА
|
||||
✓ Применять только одобренные цветовые варианты
|
||||
✓ Соблюдать охранную зону
|
||||
✓ Использовать PNG с прозрачным фоном для digital
|
||||
✓ Белый логотип (invert) на тёмных фонах (073M, 050M)
|
||||
✕ Не изменять пропорции или искажать логотип
|
||||
✕ Не изменять цвета элементов логотипа
|
||||
✕ Не добавлять рядом произвольный текст
|
||||
✕ Не размещать на фоне без достаточного контраста
|
||||
✕ Не применять тени, обводки, градиенты`.trim();
|
||||
|
||||
export default function LogoPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
@@ -132,31 +171,119 @@ export default function LogoPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 1. Иерархия */}
|
||||
{/* 1. Логотип */}
|
||||
<Section
|
||||
id="hierarchy"
|
||||
title="Иерархия и версии"
|
||||
subtitle="Клиника использует два варианта логотипа в зависимости от контекста применения."
|
||||
title="Логотип"
|
||||
subtitle="Единый логотип клиники. Применяется на всех носителях."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<LogoCard
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Основной логотип Клиника УХО ГОРЛО НОС им. проф. Е.Н. Оленевой"
|
||||
label="Основной логотип"
|
||||
description="Локальные версии по направлениям (ЛОР, аллергология и др.). Применяется в точках контакта с клиентами, на лендингах и сайтах направлений."
|
||||
tag="Точки контакта с клиентом"
|
||||
alt="Логотип Клиника ухо, горло, нос им. проф. Е.Н. Оленевой"
|
||||
label="Логотип клиники"
|
||||
description="Применяется в точках контакта с клиентами, на лендингах и сайтах направлений. Применяется для онлайн и оффлайн коммуникаций с клиентами, во внутренней документации."
|
||||
tag="Онлайн · Оффлайн · Документация"
|
||||
/>
|
||||
<LogoCard
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Общий логотип сети клиник"
|
||||
label="Общий логотип"
|
||||
description="Версия сети клиник. Применяется для онлайн и оффлайн коммуникаций с клиентами, во внутренней документации. Допустимо на общем сайте."
|
||||
tag="Сеть клиник · Документация · Сайт"
|
||||
</Section>
|
||||
|
||||
{/* 2. Символика знака */}
|
||||
<Section
|
||||
id="symbol"
|
||||
title="Символика знака"
|
||||
subtitle="О том, что стоит за формой логотипа."
|
||||
>
|
||||
{/* Главный тезис */}
|
||||
<div
|
||||
className="rounded-xl border p-6 mb-6"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<p className="text-sm leading-relaxed" style={{ color: "var(--bb-text)" }}>
|
||||
В знаке клиники — три округлых элемента, расположенных с равной дистанцией от центра.
|
||||
Это создаёт ощущение симметрии, порядка и движения, но без завершённой формы (звезды или круга).
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
{[
|
||||
"Сохраняет баланс и лёгкость",
|
||||
"Намекает на естественность и органику",
|
||||
"Не замыкает символ — оставляет «дыхание», открытость",
|
||||
].map(item => (
|
||||
<div key={item} className="flex items-start gap-2.5">
|
||||
<div
|
||||
className="w-1.5 h-1.5 rounded-full mt-1.5 shrink-0"
|
||||
style={{ background: "var(--brand-053m)" }}
|
||||
/>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Три значения */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3 mb-6">
|
||||
{[
|
||||
{
|
||||
num: "1",
|
||||
title: "Незамкнутая симметрия",
|
||||
text: "Это процесс, а не результат. Знак говорит: «мы развиваемся, мы живые, мы не идеальны, но гармоничны».",
|
||||
},
|
||||
{
|
||||
num: "2",
|
||||
title: "Три элемента",
|
||||
text: "Классическая структура уха–горла–носа. Триада равновесия, ритм дыхания, символ доверия и открытости.",
|
||||
},
|
||||
{
|
||||
num: "3",
|
||||
title: "Отсутствие замкнутости",
|
||||
text: "Нет барьера — есть приглашение. Открытая форма передаёт заботу, доступность и человечность.",
|
||||
},
|
||||
].map(item => (
|
||||
<div
|
||||
key={item.num}
|
||||
className="rounded-xl border p-5"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3"
|
||||
style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
|
||||
>
|
||||
{item.num}
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{item.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Почему не звезда */}
|
||||
<div
|
||||
className="rounded-xl border p-5 flex gap-4"
|
||||
style={{ borderColor: "#e0f5f4", background: "#f8fffe" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5"
|
||||
style={{ background: "#e0f5f4" }}
|
||||
>
|
||||
<span className="text-base leading-none">○</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-1.5" style={{ color: "var(--bb-text)" }}>
|
||||
Почему нет законченной звезды
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Звезда — символ завершённости и сакрального порядка. Знак клиники — символ жизни
|
||||
и взаимодействия. Он ближе по духу к живой биоморфной форме (капли, клетки, лепестки),
|
||||
чем к идеальной математической фигуре. Такой дизайн передаёт не «власть формы»,
|
||||
а заботу, мягкость и человечность.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* 2. Цветовые варианты */}
|
||||
{/* 3. Цветовые варианты */}
|
||||
<Section
|
||||
id="variants"
|
||||
title="Цветовые варианты"
|
||||
@@ -237,8 +364,7 @@ export default function LogoPage() {
|
||||
{/* 4. Минимальные размеры */}
|
||||
<Section
|
||||
id="sizes"
|
||||
title="Минимальные размеры"
|
||||
subtitle="Размеры логотипа для размещения на форме сотрудников."
|
||||
title="Размеры логотипа для размещения на форме сотрудников"
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl border" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<table className="w-full text-sm">
|
||||
@@ -303,6 +429,55 @@ export default function LogoPage() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-блок */}
|
||||
<LlmBlock
|
||||
path="/foundation/logo"
|
||||
version="v1.0"
|
||||
specText={LLM_LOGO_TEXT}
|
||||
>
|
||||
<LlmSection title="Файлы логотипа" />
|
||||
<LlmTable
|
||||
headers={["Файл", "Формат", "Путь", "Статус"]}
|
||||
rows={[
|
||||
["logo-transparent.png", "PNG с прозрачным фоном", "/public/logo/logo-transparent.png", "✓ Доступен"],
|
||||
["logo.svg / logo.ai", "Вектор", "—", "Ожидается от дизайнера"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цветовые варианты" />
|
||||
<LlmTable
|
||||
headers={["Вариант", "Фон", "CSS-фильтр", "Применение"]}
|
||||
rows={[
|
||||
["Основной", "Светлый (#f8f9fa)", "нет", "Сайт, полиграфия на белом"],
|
||||
["Инвертированный", "#5b7b87 (073M)", "brightness(0) invert(1)", "Хедер, тёмные секции"],
|
||||
["На форме (беж)", "#c4a882 (081M)", "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)", "Форма сотрудников (бежевый костюм)"],
|
||||
["На форме (синий)", "#1b4c72 (050M)", "brightness(0) invert(1)", "Форма сотрудников (синий костюм)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Охранная зона и размеры на форме" />
|
||||
<LlmTable
|
||||
headers={["Носитель", "Условие", "Длина", "Высота", "Расположение"]}
|
||||
rows={[
|
||||
["Форма сотрудников", "Размер до 46 р.", "70 мм", "25,5 мм", "Левая сторона груди"],
|
||||
["Форма сотрудников", "Размер от 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
|
||||
["Охранная зона", "Все носители", "≥ высота буквы «К»", "≥ высота буквы «К»", "Вокруг логотипа со всех сторон"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила использования" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Применять только одобренные цветовые варианты" },
|
||||
{ ok: true, text: "Соблюдать охранную зону (≥ высота буквы «К»)" },
|
||||
{ ok: true, text: "Использовать PNG с прозрачным фоном для digital" },
|
||||
{ ok: true, text: "Белый логотип на тёмных фонах (073M, 050M, 080M)" },
|
||||
{ ok: false, text: "Не изменять пропорции или искажать логотип" },
|
||||
{ ok: false, text: "Не изменять цвета элементов логотипа" },
|
||||
{ ok: false, text: "Не добавлять рядом произвольный текст" },
|
||||
{ ok: false, text: "Не размещать на фоне без достаточного контраста" },
|
||||
{ ok: false, text: "Не применять тени, обводки, градиенты" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Типографика | Брендбук О!Клиника",
|
||||
title: "Типографика. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
/* ─── Шкала типографики ────────────────────────────────────────────── */
|
||||
@@ -28,6 +29,60 @@ const FIRA_SCALE = [
|
||||
{ token: "overline", size: "10px / 0.625rem",weight: "600", lh: "1.4", sample: "ФУНДАМЕНТ → 1.4" },
|
||||
];
|
||||
|
||||
/* ─── LLM spec text ────────────────────────────────────────────────── */
|
||||
const LLM_TYPOGRAPHY_TEXT = `# ТИПОГРАФИКА — LLM-СПЕЦИФИКАЦИЯ
|
||||
# Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||
# docs/LLM_CONTEXT.md · /foundation/typography · v2.0 · 2026-03-22
|
||||
|
||||
ШРИФТЫ БРЕНДА
|
||||
Шрифт | Тип | Применение | CSS
|
||||
DINPro | Бренд | Оффлайн, физические носители (бейджи, таблички, транспорт, форма) | font-family: 'DINPro', Arial, sans-serif
|
||||
Fira Sans| Веб | Сайт, цифровые материалы, брендбук | font-family: 'Fira Sans', sans-serif; Google Fonts; weights: 300/400/500/600
|
||||
|
||||
ПРАВИЛО ВЫБОРА: носитель цифровой → Fira Sans; физический/печатный → DINPro
|
||||
|
||||
DINPro — ШКАЛА (оффлайн)
|
||||
Стиль | font-size | rem | weight | line-height
|
||||
h1 | 40px | 2.5rem | 700 | 1.20
|
||||
h2 | 32px | 2rem | 700 | 1.25
|
||||
h3 | 24px | 1.5rem | 700 | 1.30
|
||||
h4 | 20px | 1.25rem | 700 | 1.35
|
||||
h5 | 16px | 1rem | 700 | 1.40
|
||||
h6 | 14px | 0.875rem | 700 | 1.40
|
||||
|
||||
Fira Sans — ШКАЛА (веб)
|
||||
Стиль | font-size | rem | weight | line-height | letter-spacing
|
||||
h1 | 40px | 2.5rem | 600 | 1.20 | -0.025em
|
||||
h2 | 32px | 2rem | 600 | 1.25 | -0.020em
|
||||
h3 | 24px | 1.5rem | 600 | 1.30 | -0.010em
|
||||
h4 | 20px | 1.25rem | 500 | 1.35 | 0em
|
||||
h5 | 16px | 1rem | 500 | 1.40 | 0em
|
||||
h6 | 14px | 0.875rem | 500 | 1.40 | +0.010em
|
||||
body | 16px | 1rem | 400 | 1.60 | 0em
|
||||
body-sm | 14px | 0.875rem | 400 | 1.60 | 0em
|
||||
caption | 12px | 0.75rem | 400 | 1.50 | +0.020em
|
||||
label | 12px | 0.75rem | 500 | 1.40 | +0.030em
|
||||
overline | 10px | 0.625rem | 600 | 1.40 | +0.100em (uppercase)
|
||||
|
||||
ПРИМЕНЕНИЕ ПО НОСИТЕЛЮ
|
||||
Носитель | Шрифт
|
||||
Сайт, цифровые материалы, брендбук | Fira Sans
|
||||
Форма сотрудников, бейджи | DINPro
|
||||
Вывески, таблички, навигация | DINPro
|
||||
Брендирование транспорта | DINPro
|
||||
Визитки, листовки, полиграфия | DINPro
|
||||
Telegram-бот, пуш-уведомления | Fira Sans (системный)
|
||||
|
||||
ПРАВИЛА
|
||||
✓ H1 — только один на странице
|
||||
✓ Не пропускать уровни заголовков (h1 → h2 → h3)
|
||||
✓ Минимальный размер текста на экране: 12px
|
||||
✓ Кириллица → Fira Sans (не DINPro)
|
||||
✓ Fira Sans: доступные веса 300 / 400 / 500 / 600
|
||||
✕ DINPro на сайте без явного согласования дизайнера
|
||||
✕ Light (300) для текста < 14px
|
||||
✕ Смешивать DINPro и Fira Sans на одном носителе`.trim();
|
||||
|
||||
/* ─── Компоненты ───────────────────────────────────────────────────── */
|
||||
function Section({
|
||||
title,
|
||||
@@ -344,6 +399,162 @@ export default function TypographyPage() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Типографика сайта — фактическое состояние 23.03.2026 */}
|
||||
<Section
|
||||
title="Типографика сайта — факт на 23.03.2026"
|
||||
subtitle="Реальные размеры и стили, задокументированные по perm.oclinica.ru/lor. Источник: скриншот + CSS темы clinic_bootstrap_mobile."
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Элемент / блок", "Шрифт", "Размер", "Weight", "Цвет", "Пример"].map(h => (
|
||||
<th key={h} className="text-left px-4 py-3 font-medium text-xs"
|
||||
style={{ color: "var(--bb-text-muted)" }}>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"],
|
||||
["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"],
|
||||
["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
|
||||
["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
|
||||
["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
|
||||
["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],
|
||||
["Пункт checklist (описание)", "Fira Sans", "13px", "400", "#374151", "оперируют хирурги с 15-летним…"],
|
||||
["Имя врача в карточке", "Fira Sans", "12px", "500", "#60959c", "Макарова Людмила Германовна"],
|
||||
["Специализация врача", "Fira Sans", "11px", "400", "#374151", "ЛОР врач, сурдолог"],
|
||||
].map(([el, font, size, w, color, example]) => (
|
||||
<tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<td className="px-4 py-3 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{el}</td>
|
||||
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--brand-073m)" }}>{font}</td>
|
||||
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text)" }}>{size}</td>
|
||||
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>{w}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-sm inline-block border shrink-0"
|
||||
style={{ background: color, borderColor: "var(--bb-border)" }} />
|
||||
<span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{color}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>{example}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* LLM-спецификация */}
|
||||
<section className="mb-8">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
LLM-спецификация
|
||||
</h2>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Машиночитаемые данные раздела для использования AI-ассистентами при разработке
|
||||
дизайна, макетов и кода. Нажмите «Скопировать» чтобы получить полный текст.
|
||||
</p>
|
||||
</div>
|
||||
<LlmBlock
|
||||
path="/foundation/typography"
|
||||
version="v2.0"
|
||||
specText={LLM_TYPOGRAPHY_TEXT}
|
||||
>
|
||||
{/* Шрифты */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Шрифты бренда" />
|
||||
<LlmTable
|
||||
headers={["Шрифт", "Тип", "Применение", "CSS font-family"]}
|
||||
rows={[
|
||||
[
|
||||
<span key="d" style={{ color: "var(--bb-text)", fontWeight: 600 }}>DINPro</span>,
|
||||
"Бренд",
|
||||
"Оффлайн, физические носители (бейджи, таблички, транспорт, форма)",
|
||||
"'DINPro', Arial, sans-serif",
|
||||
],
|
||||
[
|
||||
<span key="f" style={{ color: "var(--bb-text)", fontWeight: 600 }}>Fira Sans</span>,
|
||||
"Веб",
|
||||
"Сайт, цифровые материалы, брендбук",
|
||||
"'Fira Sans', sans-serif · Google Fonts · 300/400/500/600",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* DINPro шкала */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="DINPro — шкала (оффлайн)" />
|
||||
<LlmTable
|
||||
headers={["Стиль", "font-size", "rem", "weight", "line-height"]}
|
||||
rows={DIN_SCALE.map(r => {
|
||||
const [px, rem] = r.size.split(" / ");
|
||||
return [r.token, px, rem, r.weight, r.lh];
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Fira Sans шкала */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Fira Sans — шкала (веб)" />
|
||||
<LlmTable
|
||||
headers={["Стиль", "font-size", "rem", "weight", "line-height", "letter-spacing"]}
|
||||
rows={[
|
||||
["h1", "40px", "2.5rem", "600", "1.20", "-0.025em"],
|
||||
["h2", "32px", "2rem", "600", "1.25", "-0.020em"],
|
||||
["h3", "24px", "1.5rem", "600", "1.30", "-0.010em"],
|
||||
["h4", "20px", "1.25rem", "500", "1.35", "0em"],
|
||||
["h5", "16px", "1rem", "500", "1.40", "0em"],
|
||||
["h6", "14px", "0.875rem", "500", "1.40", "+0.010em"],
|
||||
["body", "16px", "1rem", "400", "1.60", "0em"],
|
||||
["body-sm", "14px", "0.875rem", "400", "1.60", "0em"],
|
||||
["caption", "12px", "0.75rem", "400", "1.50", "+0.020em"],
|
||||
["label", "12px", "0.75rem", "500", "1.40", "+0.030em"],
|
||||
["overline", "10px", "0.625rem", "600", "1.40", "+0.100em"],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Применение */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Применение по носителю" />
|
||||
<LlmTable
|
||||
headers={["Носитель", "Шрифт"]}
|
||||
rows={[
|
||||
["Сайт, цифровые материалы, брендбук", <span key="fs" style={{ color: "var(--brand-073m)" }}>Fira Sans</span>],
|
||||
["Форма сотрудников, бейджи", <span key="d1" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
|
||||
["Вывески, таблички, навигация", <span key="d2" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
|
||||
["Брендирование транспорта", <span key="d3" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
|
||||
["Визитки, листовки, полиграфия", <span key="d4" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
|
||||
["Telegram-бот, пуш-уведомления", <span key="fs2" style={{ color: "var(--brand-073m)" }}>Fira Sans (системный)</span>],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Правила */}
|
||||
<div className="space-y-2">
|
||||
<LlmSection title="Правила применения" />
|
||||
<LlmRules rules={[
|
||||
{ ok: true, text: "H1 — только один на странице" },
|
||||
{ ok: true, text: "Не пропускать уровни заголовков (h1 → h2 → h3)" },
|
||||
{ ok: true, text: "Минимальный размер текста на экране: 12px" },
|
||||
{ ok: true, text: "Кириллица → Fira Sans (не DINPro)" },
|
||||
{ ok: true, text: "Fira Sans: доступные веса 300 / 400 / 500 / 600" },
|
||||
{ ok: false, text: "DINPro на сайте без явного согласования дизайнера" },
|
||||
{ ok: false, text: "Light (300) для текста < 14px" },
|
||||
{ ok: false, text: "Смешивать DINPro и Fira Sans на одном носителе" },
|
||||
]} />
|
||||
</div>
|
||||
</LlmBlock>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+158
-8
@@ -3,13 +3,13 @@
|
||||
/* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
|
||||
/* Цвета уточняются в Sprint 2 по таблице Oracal */
|
||||
:root {
|
||||
/* Фирменные цвета (приблизительно — уточнить в Sprint 2) */
|
||||
--brand-053m: #7ecfca; /* Основной бирюзовый (Oracal 053M) */
|
||||
--brand-073m: #5b7b87; /* Тёмный серо-голубой (Oracal 073M) */
|
||||
--brand-066m: #5bb5ad; /* Средний бирюзовый (Oracal 066M) */
|
||||
--brand-050m: #1b4c72; /* Тёмно-синий, наружная реклама (Oracal 050M) */
|
||||
--brand-081m: #c4a882; /* Бежевый (Oracal 081M) */
|
||||
--brand-080m: #5c2e0e; /* Тёмно-коричневый (Oracal 080M) */
|
||||
/* Фирменные цвета — точные RGB из каталога Oracal */
|
||||
--brand-053m: #0089c3; /* Основной бирюзовый (Oracal 053M) · rgb(0,137,195) */
|
||||
--brand-073m: #53514e; /* Тёмный серо-голубой (Oracal 073M) · rgb(83,81,78) */
|
||||
--brand-066m: #00818c; /* Средний бирюзовый (Oracal 066M) · rgb(0,129,140) */
|
||||
--brand-050m: #1b2e5d; /* Тёмно-синий, наружная реклама (Oracal 050M) · rgb(27,46,93) */
|
||||
--brand-081m: #a8885c; /* Бежевый (Oracal 081M) · rgb(168,136,92) */
|
||||
--brand-080m: #432f1e; /* Тёмно-коричневый (Oracal 080M) · rgb(67,47,30) */
|
||||
--brand-white: #ffffff;
|
||||
|
||||
/* UI-цвета брендбука */
|
||||
@@ -17,7 +17,7 @@
|
||||
--bb-sidebar-border: #e5e7eb;
|
||||
--bb-sidebar-text: #374151;
|
||||
--bb-sidebar-text-muted: #6b7280;
|
||||
--bb-sidebar-active-bg: #e0f5f4;
|
||||
--bb-sidebar-active-bg: #dff0fa;
|
||||
--bb-sidebar-active-text: var(--brand-053m);
|
||||
--bb-sidebar-section: #9ca3af;
|
||||
--bb-content-bg: #ffffff;
|
||||
@@ -42,3 +42,153 @@ body {
|
||||
color: var(--bb-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Анимации ───────────────────────────────────────────────── */
|
||||
@keyframes bb-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ─── Кнопки (Sprint 3) ──────────────────────────────────────── */
|
||||
.bb-btn {
|
||||
font-family: var(--font-web);
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s, opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.bb-btn:hover:not(:disabled) { filter: brightness(0.9); }
|
||||
.bb-btn:active:not(:disabled) { filter: brightness(0.82); }
|
||||
.bb-btn:disabled { cursor: not-allowed; opacity: 0.5; }
|
||||
.bb-btn:focus-visible { outline: 2px solid var(--brand-053m); outline-offset: 2px; }
|
||||
|
||||
/* Размеры — только padding и font-size, radius задаётся вариантом */
|
||||
.bb-btn-sm { font-size: 13px; padding: 4px 11px; border: 1px solid transparent; }
|
||||
.bb-btn-md { font-size: 14px; padding: 8px 16px; border: 1px solid transparent; }
|
||||
.bb-btn-lg { font-size: 18px; padding: 10px 24px; border: 1px solid transparent; font-weight: bold; }
|
||||
|
||||
/* Варианты — цвета и радиус по реальному сайту oclinica.ru */
|
||||
|
||||
/* primary — коралловая форм-кнопка «Запишите меня!» — #FFA39C */
|
||||
.bb-btn-primary {
|
||||
background: #FFA39C;
|
||||
color: #fff;
|
||||
border-color: #FF847B;
|
||||
border-radius: 7px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* outline — белая с бежевой рамкой «Записаться на прием» */
|
||||
.bb-btn-outline {
|
||||
background: #fff;
|
||||
color: #BF9975;
|
||||
border-color: #BF9975;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* teal — бирюзовая «Позвонить» */
|
||||
.bb-btn-teal {
|
||||
background: #60959c;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* pill — кремовая таблетка «Заказать звонок» */
|
||||
.bb-btn-pill {
|
||||
background: #e9e4d4;
|
||||
color: #333;
|
||||
border-color: #d5cfbd;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
|
||||
.bb-input,
|
||||
.bb-textarea,
|
||||
.bb-select {
|
||||
font-family: var(--font-web);
|
||||
font-size: 14px;
|
||||
color: var(--bb-text);
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
width: 100%;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
outline: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.bb-input { height: 50px; }
|
||||
.bb-input:focus,
|
||||
.bb-textarea:focus,
|
||||
.bb-select:focus {
|
||||
border-color: var(--brand-053m);
|
||||
box-shadow: 0 0 0 3px rgba(0, 137, 195, 0.2);
|
||||
}
|
||||
.bb-input.bb-error,
|
||||
.bb-textarea.bb-error,
|
||||
.bb-select.bb-error { border-color: #dc2626; }
|
||||
.bb-input.bb-error:focus,
|
||||
.bb-textarea.bb-error:focus,
|
||||
.bb-select.bb-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
|
||||
.bb-input:disabled,
|
||||
.bb-textarea:disabled,
|
||||
.bb-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bb-sidebar-bg); }
|
||||
|
||||
.bb-textarea { resize: vertical; min-height: 100px; }
|
||||
.bb-select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
height: 50px;
|
||||
padding: 10px 36px 10px 10px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
|
||||
.bb-checkbox,
|
||||
.bb-radio {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--brand-073m);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Карточки (Sprint 4) ────────────────────────────────────── */
|
||||
.bb-news-card:hover {
|
||||
background: #eef4d1 !important;
|
||||
box-shadow: 0 0 16px 0 #9e9e9a;
|
||||
}
|
||||
.bb-service-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
|
||||
/* ─── Навигация сайта (Sprint 5) ────────────────────────────── */
|
||||
.bb-nav-link:hover { color: var(--brand-053m) !important; }
|
||||
|
||||
/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
|
||||
.bb-toggle-track {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bb-toggle-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
@@ -31,79 +31,6 @@ function Section({
|
||||
);
|
||||
}
|
||||
|
||||
/* Компонент бейджа (масштабированный макет) */
|
||||
function BadgeMockup({
|
||||
variant,
|
||||
name,
|
||||
role,
|
||||
}: {
|
||||
variant: "light" | "dark";
|
||||
name: string;
|
||||
role: string;
|
||||
}) {
|
||||
const isDark = variant === "dark";
|
||||
/* 70×30 мм → пропорция 7:3. Отображаем в 280×120px */
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div
|
||||
className="rounded-lg flex items-center px-5 gap-4"
|
||||
style={{
|
||||
width: 280,
|
||||
height: 120,
|
||||
background: isDark ? "var(--brand-073m)" : "var(--brand-081m)",
|
||||
border: isDark ? "none" : "1px solid #d1d5db",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* Логотип */}
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип"
|
||||
width={72}
|
||||
height={26}
|
||||
className="object-contain shrink-0"
|
||||
style={{
|
||||
filter: isDark
|
||||
? "brightness(0) invert(1)"
|
||||
: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
|
||||
}}
|
||||
/>
|
||||
{/* Разделитель */}
|
||||
<div
|
||||
className="self-stretch w-px mx-1"
|
||||
style={{ background: isDark ? "rgba(255,255,255,0.25)" : "rgba(92,46,14,0.2)" }}
|
||||
/>
|
||||
{/* Текст */}
|
||||
<div>
|
||||
<p
|
||||
className="font-bold leading-tight"
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 13,
|
||||
color: isDark ? "#ffffff" : "#5c2e0e",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
<p
|
||||
className="leading-tight mt-0.5"
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 10,
|
||||
color: isDark ? "rgba(255,255,255,0.7)" : "rgba(92,46,14,0.7)",
|
||||
}}
|
||||
>
|
||||
{role}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{isDark ? "Тёмный вариант (серо-голубой)" : "Светлый вариант (бежевый)"}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BadgesPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
@@ -120,24 +47,76 @@ export default function BadgesPage() {
|
||||
Бейджи сотрудников
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
|
||||
Два цветовых варианта в зависимости от должности.
|
||||
Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм,
|
||||
магнитное крепление. Белый фон, чёрный текст.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Размеры и технические требования */}
|
||||
{/* Фотографии */}
|
||||
<Section
|
||||
title="Образцы бейджей"
|
||||
subtitle="Фотографии реальных бейджей из брендбука клиники."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{/* Лицевая сторона */}
|
||||
<div>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/badges/badge-2.jpeg"
|
||||
alt="Лицевая сторона бейджа: Лебединская Елена Александровна, врач оториноларинголог"
|
||||
width={690}
|
||||
height={347}
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Лицевая сторона
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Белый фон, скруглённые углы. ФИО — крупный шрифт,
|
||||
должности — мелкий. Металлическая рамка.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Оборотная сторона */}
|
||||
<div>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/badges/badge-1.jpeg"
|
||||
alt="Оборотная сторона бейджа с магнитным креплением"
|
||||
width={657}
|
||||
height={369}
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Оборотная сторона
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Чёрный пластик, магнитное крепление (CAUTION MAGNETIC).
|
||||
Не требует проколов в одежде.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Технические параметры */}
|
||||
<Section
|
||||
title="Технические параметры"
|
||||
subtitle="Единый стандарт для всех сотрудников клиники."
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
|
||||
{[
|
||||
{ label: "Ширина", value: "70 мм" },
|
||||
{ label: "Высота", value: "30 мм" },
|
||||
{ label: "Материал", value: "ПВХ / металл" },
|
||||
{ label: "Крепление", value: "Булавка / клипса" },
|
||||
{ label: "Материал", value: "Металл / ПВХ" },
|
||||
{ label: "Крепление", value: "Магнитное" },
|
||||
].map(({ label, value }) => (
|
||||
<div
|
||||
key={label}
|
||||
@@ -155,29 +134,10 @@ export default function BadgesPage() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Варианты */}
|
||||
<Section
|
||||
title="Варианты бейджей"
|
||||
subtitle="Макет бейджа (масштаб: 4× от реального размера 70×30 мм)."
|
||||
>
|
||||
<div className="flex flex-wrap gap-8 items-start">
|
||||
<BadgeMockup
|
||||
variant="light"
|
||||
name="Иванова А.В."
|
||||
role="Врач-оториноларинголог"
|
||||
/>
|
||||
<BadgeMockup
|
||||
variant="dark"
|
||||
name="Петров К.С."
|
||||
role="Главный врач"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Состав текста */}
|
||||
<Section
|
||||
title="Состав текста на бейдже"
|
||||
subtitle="Строгий порядок элементов. Шрифт — DINPro."
|
||||
subtitle="Строгий порядок элементов."
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
@@ -186,7 +146,7 @@ export default function BadgesPage() {
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
|
||||
{["Элемент", "Содержание", "Оформление"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-5 py-3 font-medium"
|
||||
@@ -199,11 +159,10 @@ export default function BadgesPage() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
|
||||
["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
|
||||
["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
|
||||
["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
|
||||
].map(([el, content, font, pos]) => (
|
||||
["ФИО", "Фамилия Имя Отчество", "Крупный шрифт, первая строка"],
|
||||
["Должность", "Основная должность", "Мелкий шрифт, вторая строка"],
|
||||
["Специализация", "Специализация / учёная степень (если есть)", "Мелкий шрифт, третья строка"],
|
||||
].map(([el, content, style]) => (
|
||||
<tr
|
||||
key={el}
|
||||
className="border-t"
|
||||
@@ -211,61 +170,34 @@ export default function BadgesPage() {
|
||||
>
|
||||
<td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
|
||||
<td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{font}</td>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{style}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Цветовые варианты */}
|
||||
<Section
|
||||
title="Применение вариантов"
|
||||
subtitle="Выбор варианта зависит от должности сотрудника."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
variant: "Светлый (бежевый)",
|
||||
color: "#c4a882",
|
||||
usage: "Медицинский персонал, санитарки, технический персонал",
|
||||
oracal: "081M",
|
||||
},
|
||||
{
|
||||
variant: "Тёмный (серо-голубой)",
|
||||
color: "#5b7b87",
|
||||
usage: "Административный персонал, менеджеры, главный врач",
|
||||
oracal: "073M",
|
||||
},
|
||||
].map(item => (
|
||||
{/* Пример из фото */}
|
||||
<div
|
||||
key={item.variant}
|
||||
className="flex gap-4 p-4 rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
className="mt-4 rounded-xl border p-4 flex items-start gap-3"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
|
||||
style={{ background: item.color }}
|
||||
className="w-1.5 self-stretch rounded-full shrink-0"
|
||||
style={{ background: "var(--brand-053m)" }}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{item.variant}
|
||||
<p className="text-xs font-medium mb-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Пример из брендбука
|
||||
</p>
|
||||
<p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{item.usage}
|
||||
<p className="text-sm font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
Лебединская Елена Александровна
|
||||
</p>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
|
||||
врач оториноларинголог · ведущий хирург · кандидат медицинских наук
|
||||
</p>
|
||||
<span
|
||||
className="text-[10px] font-mono px-1.5 py-0.5 rounded"
|
||||
style={{ background: "#f3f4f6", color: "#374151" }}
|
||||
>
|
||||
Oracal {item.oracal}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Внутренняя навигация | Брендбук О!Клиника",
|
||||
title: "Внутренняя навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
@@ -30,74 +31,6 @@ function Section({
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет настенной таблички */
|
||||
function SignMockup({
|
||||
type,
|
||||
text,
|
||||
subtext,
|
||||
bgColor,
|
||||
textColor,
|
||||
accentColor,
|
||||
size,
|
||||
}: {
|
||||
type: string;
|
||||
text: string;
|
||||
subtext?: string;
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
accentColor: string;
|
||||
size: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<div
|
||||
className="rounded-lg px-6 py-4 flex items-center gap-4"
|
||||
style={{
|
||||
background: bgColor,
|
||||
width: 260,
|
||||
border: bgColor === "#ffffff" ? "1px solid #e5e7eb" : "none",
|
||||
}}
|
||||
>
|
||||
{/* Цветовая полоса */}
|
||||
<div
|
||||
className="w-1.5 self-stretch rounded-full"
|
||||
style={{ background: accentColor, minHeight: 32 }}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: textColor,
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
{subtext && (
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 10,
|
||||
color: textColor,
|
||||
opacity: 0.65,
|
||||
marginTop: 3,
|
||||
}}
|
||||
>
|
||||
{subtext}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pl-1">
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>{type}</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{size}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NavigationPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
@@ -115,52 +48,111 @@ export default function NavigationPage() {
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Система навигационных табличек и указателей внутри клиники.
|
||||
Единый стиль с фирменными цветами и шрифтом DINPro.
|
||||
На оргстекле, наклейки из плёнок Оракл 053M и 073M.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Шаблоны табличек */}
|
||||
{/* Макеты таблечек */}
|
||||
<Section
|
||||
title="Типы табличек"
|
||||
subtitle="Четыре базовых шаблона для разных зон клиники."
|
||||
title="Макеты навигационных табличек"
|
||||
subtitle="Два типа: табличка кабинета с бирюзовым заголовком и карточка врача с логотипом и QR-кодом."
|
||||
>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<SignMockup
|
||||
type="Кабинет врача"
|
||||
text="Кабинет № 101"
|
||||
subtext="Оториноларингология"
|
||||
bgColor="#ffffff"
|
||||
textColor="#1b4c72"
|
||||
accentColor="#7ecfca"
|
||||
size="200 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Направляющий указатель"
|
||||
text="→ Регистратура"
|
||||
subtext="2-й этаж"
|
||||
bgColor="#5b7b87"
|
||||
textColor="#ffffff"
|
||||
accentColor="#7ecfca"
|
||||
size="300 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Зона ожидания"
|
||||
text="Зона ожидания"
|
||||
subtext="Пожалуйста, соблюдайте тишину"
|
||||
bgColor="#e0f5f4"
|
||||
textColor="#1b4c72"
|
||||
accentColor="#5bb5ad"
|
||||
size="250 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Запрещающий"
|
||||
text="Вход только для персонала"
|
||||
bgColor="#1b4c72"
|
||||
textColor="#ffffff"
|
||||
accentColor="#c4a882"
|
||||
size="250 × 60 мм"
|
||||
<div className="max-w-lg">
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/navigation/nav-mockup-signs.jpeg"
|
||||
alt="Макеты навигационных табличек: Кабинет 04 с бирюзовым заголовком и карточка врача Лебединской"
|
||||
width={620}
|
||||
height={570}
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Макет из брендбука
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Табличка «Кабинет 04»: бирюзовый заголовок (Oracal 053M), специализация и ФИО врачей.
|
||||
Карточка врача: логотип клиники, имя, должности, QR-код на страницу врача.
|
||||
</p>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Нумерация дверей */}
|
||||
<Section
|
||||
title="Нумерация кабинетов на дверях"
|
||||
subtitle="Номер кабинета размещается непосредственно на двери — крупный шрифт, плёнка Oracal."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/navigation/nav-door-31.png"
|
||||
alt="Белая дверь кабинета 31 с крупным номером из плёнки"
|
||||
width={770}
|
||||
height={963}
|
||||
className="w-full object-cover"
|
||||
style={{ maxHeight: 420, objectPosition: "top" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Кабинет 31 — белая дверь
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Крупный номер в верхней части двери. Тёмная плёнка на белом фоне.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/navigation/nav-3.jpeg"
|
||||
alt="Серая дверь кабинета 13 с крупным номером"
|
||||
width={800}
|
||||
height={463}
|
||||
className="w-full object-cover"
|
||||
style={{ maxHeight: 420, objectPosition: "left" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Кабинет 13 — серая дверь
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Тёмная дверь с крупным номером. Рядом — табличка кабинета на стене.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Указатели по этажам */}
|
||||
<Section
|
||||
title="Указатели по этажам"
|
||||
subtitle="Навигационные панели в холлах — показывают расположение кабинетов и специализации на каждом этаже."
|
||||
>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/navigation/nav-render-p13.jpeg"
|
||||
alt="Навигационные панели по этажам: кабинеты 01-06, 21-25, 31-37, 41-45"
|
||||
width={2105}
|
||||
height={1489}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-3 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Слева — указатель с этажом и направлением, справа — панель с полным перечнем кабинетов.
|
||||
Активный этаж выделяется бирюзовым фоном (Oracal 053M).
|
||||
</p>
|
||||
</Section>
|
||||
|
||||
{/* Технические требования */}
|
||||
@@ -188,12 +180,10 @@ export default function NavigationPage() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Основной материал", "ПВХ 3мм / ПС зеркальный / акрил"],
|
||||
["Покрытие фона", "Oracal плёнка (053M / 073M / 050M)"],
|
||||
["Шрифт", "DINPro Bold / Regular (DXF для фрезеровки)"],
|
||||
["Крепление", "Двусторонний скотч / шурупы с дистанционным держателем"],
|
||||
["Толщина букв (фрезеровка)", "3 мм от основы"],
|
||||
["Минимальный размер текста", "10 мм по высоте"],
|
||||
["Основной материал", "Оргстекло"],
|
||||
["Покрытие", "Наклейка из плёнок Oracal"],
|
||||
["Шрифт", "DINPro Bold / Regular"],
|
||||
["Крепление", "Дистанционные держатели"],
|
||||
].map(([param, value]) => (
|
||||
<tr
|
||||
key={param}
|
||||
@@ -218,24 +208,25 @@ export default function NavigationPage() {
|
||||
title="Цвета Oracal для навигации"
|
||||
subtitle="Допустимые цвета плёнки по коду Oracal."
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<div className="flex gap-6">
|
||||
{[
|
||||
{ code: "053M", hex: "#7ecfca", name: "Акцент / полоса" },
|
||||
{ code: "073M", hex: "#5b7b87", name: "Фон указателей" },
|
||||
{ code: "050M", hex: "#1b4c72", name: "Фон запрещающих" },
|
||||
{ code: "081M", hex: "#c4a882", name: "Акцент на тёмном" },
|
||||
{ code: "053M", hex: "#7ecfca", name: "Заголовок таблички / активный этаж" },
|
||||
{ code: "073M", hex: "#5b7b87", name: "Дополнительный акцент" },
|
||||
].map(c => (
|
||||
<div
|
||||
key={c.code}
|
||||
className="rounded-xl overflow-hidden border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
className="flex items-center gap-4 rounded-xl border p-4"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<div className="h-16" style={{ background: c.hex }} />
|
||||
<div className="p-3">
|
||||
<p className="font-medium text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg shrink-0"
|
||||
style={{ background: c.hex }}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Oracal {c.code}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{c.name}
|
||||
</p>
|
||||
<p className="font-mono text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Печатные материалы | Брендбук О!Клиника",
|
||||
title: "Печатные материалы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Брендирование транспорта | Брендбук О!Клиника",
|
||||
title: "Брендирование транспорта. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
function Section({
|
||||
@@ -31,101 +31,6 @@ function Section({
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет трамвая (упрощённый силуэт) */
|
||||
function TramMockup() {
|
||||
return (
|
||||
<div
|
||||
className="relative rounded-2xl overflow-hidden"
|
||||
style={{
|
||||
background: "#f8f9fa",
|
||||
border: "1px solid var(--bb-border)",
|
||||
padding: "32px 24px",
|
||||
}}
|
||||
>
|
||||
{/* Кузов трамвая */}
|
||||
<div
|
||||
className="relative mx-auto rounded-xl overflow-hidden"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 560,
|
||||
height: 160,
|
||||
background: "#ffffff",
|
||||
border: "2px solid #e5e7eb",
|
||||
}}
|
||||
>
|
||||
{/* Верхняя полоса — бирюзовая */}
|
||||
<div
|
||||
className="absolute top-0 left-0 right-0"
|
||||
style={{ height: 28, background: "#7ecfca" }}
|
||||
/>
|
||||
|
||||
{/* Основная бежевая полоса */}
|
||||
<div
|
||||
className="absolute left-0 right-0"
|
||||
style={{ top: 28, height: 76, background: "#c4a882" }}
|
||||
/>
|
||||
|
||||
{/* Нижняя полоса — серо-голубая */}
|
||||
<div
|
||||
className="absolute left-0 right-0"
|
||||
style={{ top: 104, height: 56, background: "#5b7b87" }}
|
||||
/>
|
||||
|
||||
{/* Логотип по центру бежевой полосы */}
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{ top: 28, left: 0, right: 0, height: 76 }}
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип на трамвае"
|
||||
width={180}
|
||||
height={64}
|
||||
className="object-contain"
|
||||
style={{
|
||||
filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Окна (декоративные) */}
|
||||
{[80, 180, 280, 380, 460].map(x => (
|
||||
<div
|
||||
key={x}
|
||||
className="absolute rounded"
|
||||
style={{
|
||||
left: x,
|
||||
top: 40,
|
||||
width: 50,
|
||||
height: 44,
|
||||
background: "rgba(255,255,255,0.6)",
|
||||
border: "1px solid rgba(255,255,255,0.8)",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Колёса (декоративные) */}
|
||||
{[60, 200, 360, 500].map(x => (
|
||||
<div
|
||||
key={x}
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
left: x,
|
||||
bottom: -8,
|
||||
width: 24,
|
||||
height: 24,
|
||||
background: "#374151",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-center text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Схема цветового решения (превью, не финальный макет)
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TransportPage() {
|
||||
return (
|
||||
@@ -151,9 +56,20 @@ export default function TransportPage() {
|
||||
{/* Макет */}
|
||||
<Section
|
||||
title="Макет трамвая"
|
||||
subtitle="Трёхполосная схема брендирования: верхняя бирюзовая, центральная бежевая с логотипом, нижняя серо-голубая."
|
||||
subtitle="Вид с обеих сторон: бирюзовая полоса, логотип клиники, фотографии пациентов и врачей, контактная информация."
|
||||
>
|
||||
<TramMockup />
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/transport/tram-mockup.jpeg"
|
||||
alt="Макет брендирования трамвая: вид спереди и сзади с логотипом Клиники ухо горло нос им. проф. Е.Н.Оленевой"
|
||||
width={1884}
|
||||
height={977}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Цветовая схема */}
|
||||
|
||||
@@ -47,92 +47,113 @@ export default function UniformPage() {
|
||||
Форма сотрудников
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фирменная медицинская одежда сотрудников клиники. Бежевый костюм
|
||||
с логотипом клиники на левой стороне груди.
|
||||
Фирменная медицинская одежда сотрудников клиники. Два цветовых варианта:
|
||||
бежевый с коричневым логотипом и синий с белым логотипом.
|
||||
Логотип размещается на левой стороне груди.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Описание костюма */}
|
||||
{/* Фотографии вариантов */}
|
||||
<Section
|
||||
title="Описание комплекта"
|
||||
subtitle="Стандартная форма для всех сотрудников клиники."
|
||||
>
|
||||
<div
|
||||
className="rounded-xl border p-6"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
title="Варианты формы"
|
||||
subtitle="Фотографии реальной формы сотрудников с логотипом клиники."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{/* Бежевый вариант */}
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Состав формы
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{["Медицинский костюм (куртка + брюки)", "Цвет: бежевый (Oracal 081M)", "Материал: медицинская ткань", "Логотип вышит или нанесён термопечатью"].map(item => (
|
||||
<li key={item} className="flex items-start gap-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
<span style={{ color: "var(--brand-053m)" }}>•</span> {item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/uniform/uniform-1.jpeg"
|
||||
alt="Бежевая форма сотрудника клиники с коричневым логотипом"
|
||||
width={742}
|
||||
height={990}
|
||||
className="w-full object-cover"
|
||||
style={{ maxHeight: 480, objectPosition: "top" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Бежевый вариант
|
||||
</p>
|
||||
<p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Основная форма для медицинского персонала. Логотип — тёмно-коричневый.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ background: "#c4a882", border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
<span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Oracal 081M
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ color: "var(--bb-text-muted)" }}>·</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ background: "#5c2e0e", border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
<span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Логотип 080M
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Синий вариант */}
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Цветовая схема
|
||||
<div
|
||||
className="rounded-xl overflow-hidden border mb-4"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<Image
|
||||
src="/offline/uniform/uniform-2.jpeg"
|
||||
alt="Синяя форма сотрудника клиники с белым логотипом"
|
||||
width={580}
|
||||
height={773}
|
||||
className="w-full object-cover"
|
||||
style={{ maxHeight: 480, objectPosition: "top" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
Синий вариант
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 rounded-lg border mb-1"
|
||||
style={{ background: "#c4a882", borderColor: "var(--bb-border)" }} />
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>081M</p>
|
||||
<p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#c4a882</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 rounded-lg border mb-1"
|
||||
style={{ background: "#5c2e0e", borderColor: "var(--bb-border)" }} />
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>080M</p>
|
||||
<p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#5c2e0e</p>
|
||||
<p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Альтернативный вариант. Логотип — белый инвертированный.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ background: "#4a90c4", border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
<span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Синий медицинский
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ color: "var(--bb-text-muted)" }}>·</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ background: "#ffffff", border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
<span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Логотип белый
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Логотип на форме */}
|
||||
{/* Размеры логотипа */}
|
||||
<Section
|
||||
title="Размещение логотипа"
|
||||
title="Размеры логотипа для размещения на форме сотрудников"
|
||||
subtitle="Логотип располагается на левой стороне груди. Размер зависит от размера одежды."
|
||||
>
|
||||
{/* Визуализация размещения */}
|
||||
<div
|
||||
className="rounded-xl border p-8 mb-6 flex flex-col items-center justify-center"
|
||||
style={{ background: "#c4a882", borderColor: "transparent", minHeight: 200 }}
|
||||
>
|
||||
<div className="relative w-64 h-48 flex items-center justify-center">
|
||||
{/* Силуэт куртки (упрощённая схема) */}
|
||||
<div className="absolute inset-0 rounded-xl opacity-20"
|
||||
style={{ border: "2px dashed #5c2e0e" }} />
|
||||
{/* Зона логотипа — левая грудь */}
|
||||
<div className="absolute top-6 left-10 flex flex-col items-center gap-2">
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип на форме"
|
||||
width={100}
|
||||
height={36}
|
||||
className="object-contain"
|
||||
style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }}
|
||||
/>
|
||||
<div className="border border-dashed rounded px-1"
|
||||
style={{ borderColor: "#5c2e0e50" }}>
|
||||
<p className="text-xs" style={{ color: "#5c2e0e80" }}>← Левая грудь</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm" style={{ color: "rgba(92,46,14,0.7)" }}>
|
||||
Схема размещения логотипа (превью)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Таблица размеров */}
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
@@ -178,7 +199,7 @@ export default function UniformPage() {
|
||||
{[
|
||||
{ ok: true, text: "Носить комплект в полном составе" },
|
||||
{ ok: true, text: "Поддерживать чистоту и опрятность формы" },
|
||||
{ ok: true, text: "Логотип — только тёмно-коричневый на бежевом" },
|
||||
{ ok: true, text: "Логотип только в утверждённых цветовых вариантах" },
|
||||
{ ok: false, text: "Носить форму без логотипа" },
|
||||
{ ok: false, text: "Изменять цвет или материал формы" },
|
||||
{ ok: false, text: "Добавлять сторонние нашивки и знаки" },
|
||||
|
||||
@@ -27,27 +27,22 @@ const NAV: NavSection[] = [
|
||||
{
|
||||
title: "Компоненты",
|
||||
items: [
|
||||
{ label: "Кнопки", href: "/components/buttons", soon: true },
|
||||
{ label: "Форм-контролы", href: "/components/forms", soon: true },
|
||||
{ label: "Карточки", href: "/components/cards", soon: true },
|
||||
{ label: "Бейджи и теги", href: "/components/badges", soon: true },
|
||||
{ label: "Алерты", href: "/components/alerts", soon: true },
|
||||
{ label: "Модальные окна", href: "/components/modals", soon: true },
|
||||
{ label: "Таблицы", href: "/components/tables", soon: true },
|
||||
{ label: "Навигация", href: "/components/navigation", soon: true },
|
||||
{ label: "Кнопки", href: "/components/buttons" },
|
||||
{ label: "Форм-контролы", href: "/components/forms" },
|
||||
{ label: "Карточки", href: "/components/cards" },
|
||||
{ label: "Шапка / Навигация", href: "/components/navigation" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Блоки",
|
||||
items: [
|
||||
{ label: "Hero", href: "/blocks/hero", soon: true },
|
||||
{ label: "CEO-текст", href: "/blocks/ceo", soon: true },
|
||||
{ label: "Наши врачи", href: "/blocks/doctors", soon: true },
|
||||
{ label: "Отзывы", href: "/blocks/reviews", soon: true },
|
||||
{ label: "Новости", href: "/blocks/news", soon: true },
|
||||
{ label: "Формы контакта", href: "/blocks/contact-forms", soon: true },
|
||||
{ label: "Контакт", href: "/blocks/contact", soon: true },
|
||||
{ label: "Услуги", href: "/blocks/services", soon: true },
|
||||
{ label: "Hero-баннер", href: "/blocks/hero" },
|
||||
{ label: "Вводный текст", href: "/blocks/ceo" },
|
||||
{ label: "Наши врачи", href: "/blocks/doctors" },
|
||||
{ label: "Отзывы", href: "/blocks/reviews" },
|
||||
{ label: "Формы записи", href: "/blocks/contact-forms" },
|
||||
{ label: "Новости", href: "/blocks/news" },
|
||||
{ label: "Подвал / Контакт", href: "/blocks/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -68,13 +63,13 @@ const NAV: NavSection[] = [
|
||||
{ label: "Бейджи", href: "/offline/badges" },
|
||||
{ label: "Навигация", href: "/offline/navigation" },
|
||||
{ label: "Транспорт", href: "/offline/transport" },
|
||||
{ label: "Печать", href: "/offline/print" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Эксперименты",
|
||||
items: [
|
||||
{ label: "Библиотека", href: "/experiments", soon: true },
|
||||
{ label: "Дубли компонентов", href: "/variants/blocks", soon: true },
|
||||
{ label: "Дубли страниц", href: "/variants/pages", soon: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -171,7 +166,7 @@ export function Sidebar() {
|
||||
color: "var(--bb-sidebar-text-muted)",
|
||||
}}
|
||||
>
|
||||
Sprint 2 · v0.2.0
|
||||
Sprint 5 · v0.5.1
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface LlmBlockProps {
|
||||
/** Путь страницы, например "/foundation/colors" */
|
||||
path: string;
|
||||
/** Версия данных, например "v2.1" */
|
||||
version: string;
|
||||
/** Плоский текст для копирования */
|
||||
specText: string;
|
||||
/** Содержимое блока — таблицы, правила */
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* LlmBlock — переиспользуемый блок LLM-спецификации.
|
||||
* Добавляется в конец каждой страницы брендбука, содержащей дизайн-стандарты.
|
||||
* Требование: ФТ-03-LLM (TZ.md) · docs/LLM_CONTEXT.md
|
||||
*/
|
||||
export function LlmBlock({ path, version, specText, children }: LlmBlockProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
function handleCopy(e: React.MouseEvent) {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(specText);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<details
|
||||
open
|
||||
className="rounded-xl overflow-hidden"
|
||||
style={{
|
||||
border: "2px dashed var(--brand-053m)",
|
||||
}}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<summary
|
||||
className="flex items-center justify-between px-5 py-3 cursor-pointer select-none list-none"
|
||||
style={{ background: "rgba(126,207,202,0.07)" }}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span
|
||||
className="shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded tracking-wider"
|
||||
style={{ background: "var(--brand-053m)", color: "#fff" }}
|
||||
>
|
||||
LLM
|
||||
</span>
|
||||
<span className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
LLM-спецификация
|
||||
</span>
|
||||
<span
|
||||
className="text-xs truncate hidden sm:inline"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
· машиночитаемые данные · docs/LLM_CONTEXT.md
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 shrink-0 ml-3">
|
||||
<span
|
||||
className="text-[10px] font-mono hidden md:inline"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{path} · {version}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="text-xs px-3 py-1 rounded font-medium transition-colors shrink-0"
|
||||
style={{
|
||||
background: copied ? "#d1fae5" : "var(--brand-053m)",
|
||||
color: copied ? "#065f46" : "#fff",
|
||||
}}
|
||||
>
|
||||
{copied ? "✓ Скопировано" : "Скопировать"}
|
||||
</button>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
{/* Содержимое */}
|
||||
<div
|
||||
className="px-5 py-5 space-y-6 border-t"
|
||||
style={{
|
||||
borderColor: "var(--brand-053m)",
|
||||
borderStyle: "dashed",
|
||||
background: "var(--bb-content-bg)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Утилиты для содержимого блока ──────────────────────────── */
|
||||
|
||||
/** Заголовок подсекции внутри LLM-блока */
|
||||
export function LlmSection({ title }: { title: string }) {
|
||||
return (
|
||||
<p
|
||||
className="text-[10px] font-semibold uppercase tracking-widest pb-1 border-b"
|
||||
style={{ color: "var(--bb-text-muted)", borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/** Компактная таблица для LLM-блока */
|
||||
export function LlmTable({
|
||||
headers,
|
||||
rows,
|
||||
}: {
|
||||
headers: string[];
|
||||
rows: (string | React.ReactNode)[][];
|
||||
}) {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs border-collapse font-mono">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{headers.map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-2 py-1.5 font-medium border whitespace-nowrap"
|
||||
style={{ color: "var(--bb-text-muted)", borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, ri) => (
|
||||
<tr key={ri} style={{ borderTop: `1px solid var(--bb-border)` }}>
|
||||
{row.map((cell, ci) => (
|
||||
<td
|
||||
key={ci}
|
||||
className="px-2 py-1 border"
|
||||
style={{
|
||||
borderColor: "var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
maxWidth: "240px",
|
||||
}}
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Список правил ✓ / ✕ */
|
||||
export function LlmRules({ rules }: { rules: { ok: boolean; text: string }[] }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-0.5">
|
||||
{rules.map((r) => (
|
||||
<div key={r.text} className="flex items-start gap-1.5 py-0.5 text-xs font-mono">
|
||||
<span
|
||||
style={{ color: r.ok ? "#059669" : "#dc2626", fontWeight: 700, flexShrink: 0 }}
|
||||
>
|
||||
{r.ok ? "✓" : "✕"}
|
||||
</span>
|
||||
<span style={{ color: "var(--bb-text-muted)" }}>{r.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { ButtonHTMLAttributes, forwardRef } from "react";
|
||||
|
||||
export type ButtonVariant = "primary" | "outline" | "teal" | "pill";
|
||||
export type ButtonSize = "sm" | "md" | "lg";
|
||||
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function Button(
|
||||
{ variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props },
|
||||
ref
|
||||
) {
|
||||
const isDisabled = disabled || loading;
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
disabled={isDisabled}
|
||||
className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()}
|
||||
{...props}
|
||||
>
|
||||
{loading && (
|
||||
<span
|
||||
style={{
|
||||
width: 13,
|
||||
height: 13,
|
||||
border: "2px solid currentColor",
|
||||
borderTopColor: "transparent",
|
||||
borderRadius: "50%",
|
||||
display: "inline-block",
|
||||
animation: "bb-spin 0.65s linear infinite",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export function CodeCopy({ code, lang = "jsx" }: { code: string; lang?: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
return (
|
||||
<div style={{ borderRadius: 8, overflow: "hidden", border: "1px solid var(--bb-border)" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
padding: "6px 12px",
|
||||
borderBottom: "1px solid var(--bb-border)",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 11, color: "var(--bb-text-muted)", fontFamily: "var(--font-mono)" }}>
|
||||
{lang}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
background: copied ? "#d1fae5" : "var(--brand-053m)",
|
||||
color: copied ? "#065f46" : "#fff",
|
||||
border: "none",
|
||||
borderRadius: 4,
|
||||
padding: "3px 10px",
|
||||
cursor: "pointer",
|
||||
fontWeight: 500,
|
||||
fontFamily: "var(--font-web)",
|
||||
}}
|
||||
>
|
||||
{copied ? "✓ Скопировано" : "Скопировать"}
|
||||
</button>
|
||||
</div>
|
||||
<pre
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: "12px 16px",
|
||||
overflowX: "auto",
|
||||
fontSize: 12,
|
||||
fontFamily: "var(--font-mono)",
|
||||
color: "var(--bb-text-muted)",
|
||||
background: "#fff",
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface ToggleProps {
|
||||
defaultChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
onChange?: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export function Toggle({ defaultChecked = false, disabled = false, label, onChange }: ToggleProps) {
|
||||
const [checked, setChecked] = useState(defaultChecked);
|
||||
|
||||
function handleToggle() {
|
||||
if (disabled) return;
|
||||
const next = !checked;
|
||||
setChecked(next);
|
||||
onChange?.(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
userSelect: "none",
|
||||
}}
|
||||
onClick={handleToggle}
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === " " || e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleToggle();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bb-toggle-track"
|
||||
style={{ background: checked ? "var(--brand-073m)" : "#d1d5db" }}
|
||||
>
|
||||
<div
|
||||
className="bb-toggle-thumb"
|
||||
style={{ transform: checked ? "translateX(20px)" : "translateX(0)" }}
|
||||
/>
|
||||
</div>
|
||||
{label && (
|
||||
<span style={{ fontSize: 14, color: "var(--bb-text)", fontFamily: "var(--font-web)" }}>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,14 @@
|
||||
import type { NextConfig } from "next";
|
||||
import path from "path";
|
||||
|
||||
const isDev = process.env.NODE_ENV === "development";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
...(isDev && {
|
||||
turbopack: {
|
||||
root: path.resolve(__dirname, "../.."),
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 871 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 767 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 B |
Binary file not shown.
|
After Width: | Height: | Size: 957 B |
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
Binary file not shown.
|
After Width: | Height: | Size: 477 B |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
+156
@@ -0,0 +1,156 @@
|
||||
# Деплой — oclinica-brandbook
|
||||
|
||||
## Текущее состояние
|
||||
|
||||
| Сервис | Статус | URL | Платформа |
|
||||
|------------|-------------|----------------------------------------|---------------|
|
||||
| Фронтенд | ✅ Активен | https://web-oclinica.vercel.app | Vercel Hobby |
|
||||
| Бэкенд | локально | http://localhost:3001 | Docker Compose |
|
||||
| База данных | локально | localhost:5433 | PostgreSQL 16 |
|
||||
|
||||
---
|
||||
|
||||
## Фронтенд — Vercel
|
||||
|
||||
### Первоначальная настройка (уже выполнена)
|
||||
|
||||
```bash
|
||||
# 1. Установить Vercel CLI
|
||||
npm install -g vercel
|
||||
|
||||
# 2. Войти в аккаунт (однократно, открывает браузер)
|
||||
vercel login
|
||||
|
||||
# 3. Первый деплой из директории apps/web
|
||||
cd apps/web
|
||||
vercel --yes
|
||||
```
|
||||
|
||||
### Деплой обновлений
|
||||
|
||||
```bash
|
||||
cd apps/web
|
||||
vercel --prod --yes
|
||||
```
|
||||
|
||||
Деплой занимает ~30 секунд. После завершения изменения сразу доступны по адресу:
|
||||
**https://web-oclinica.vercel.app**
|
||||
|
||||
### Как это работает
|
||||
|
||||
- Vercel автоматически определяет Next.js и использует pnpm для сборки
|
||||
- Каждый `vercel --prod` создаёт новый immutable deployment и привязывает его к production URL
|
||||
- Предыдущие деплои остаются доступны по уникальным preview URL
|
||||
- Логи билда: https://vercel.com/oclinica/web
|
||||
|
||||
### Ограничения Vercel Hobby (бесплатный план)
|
||||
|
||||
| Параметр | Лимит |
|
||||
|-----------------------|-------------------------|
|
||||
| Bandwidth | 100 GB / месяц |
|
||||
| Builds | 6000 минут / месяц |
|
||||
| Serverless Functions | 100 GB-hours / месяц |
|
||||
| Тип использования | Только некоммерческие |
|
||||
|
||||
Для брендбука (внутренний инструмент) лимитов более чем достаточно.
|
||||
|
||||
---
|
||||
|
||||
## Локальная разработка
|
||||
|
||||
### Запуск фронтенда
|
||||
|
||||
```bash
|
||||
# Из корня monorepo
|
||||
pnpm dev
|
||||
|
||||
# Или только фронтенд
|
||||
cd apps/web && pnpm dev
|
||||
```
|
||||
|
||||
Доступен на: http://localhost:3001
|
||||
|
||||
### Запуск бэкенда + БД
|
||||
|
||||
```bash
|
||||
# Запустить PostgreSQL
|
||||
docker compose up -d
|
||||
|
||||
# Запустить NestJS
|
||||
cd apps/api && pnpm dev
|
||||
```
|
||||
|
||||
### .env файлы
|
||||
|
||||
```bash
|
||||
# Скопировать и заполнить
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Содержимое `.env.example`:
|
||||
```
|
||||
DATABASE_URL="postgresql://brandbook:brandbook@localhost:5433/brandbook"
|
||||
API_PORT=3001
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3001
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Автодеплой через Gitea Actions (планируется в Sprint 12)
|
||||
|
||||
Для автоматического деплоя при пуше в ветку `main` создать файл
|
||||
`.gitea/workflows/deploy-frontend.yml`:
|
||||
|
||||
```yaml
|
||||
name: Deploy Frontend to Vercel
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths:
|
||||
- 'apps/web/**'
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Setup pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 10
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: 'pnpm'
|
||||
cache-dependency-path: apps/web/pnpm-lock.yaml
|
||||
|
||||
- name: Install Vercel CLI
|
||||
run: npm install -g vercel
|
||||
|
||||
- name: Deploy to Vercel
|
||||
run: cd apps/web && vercel --prod --yes --token ${{ secrets.VERCEL_TOKEN }}
|
||||
```
|
||||
|
||||
**Настройка:**
|
||||
1. Получить Vercel Token: https://vercel.com/account/tokens
|
||||
2. Добавить в Gitea: Settings → Secrets → `VERCEL_TOKEN`
|
||||
|
||||
---
|
||||
|
||||
## Хостинг бэкенда (планируется к Sprint 11)
|
||||
|
||||
Бэкенд (NestJS + PostgreSQL) потребуется для экспериментальной секции (Sprint 11).
|
||||
Варианты для рассмотрения:
|
||||
|
||||
| Платформа | PostgreSQL | Бесплатно | Карта |
|
||||
|-----------|-----------|-----------|-------|
|
||||
| Railway | ✅ | $5 кредит / месяц | нужна |
|
||||
| Supabase | ✅ | ✅ (PostgreSQL managed) | нет |
|
||||
| Fly.io | ✅ | ✅ ограниченно | нет |
|
||||
| VPS клиники | ✅ | ✅ (если есть) | нет |
|
||||
|
||||
Рекомендация: **Supabase** для БД (бесплатно, managed PostgreSQL) + **Railway** или VPS для NestJS.
|
||||
@@ -0,0 +1,455 @@
|
||||
# LLM Context — Цифровой брендбук Клиники
|
||||
|
||||
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||
|
||||
**Версия контекста:** 4.2
|
||||
**Дата обновления:** 2026-03-23
|
||||
**Актуальный спринт:** Sprint 5
|
||||
**Сайт клиники:** https://oclinica.ru
|
||||
**Брендбук (локально):** http://localhost:3001
|
||||
**Брендбук (production):** https://web-oclinica.vercel.app
|
||||
|
||||
---
|
||||
|
||||
## Назначение файла
|
||||
|
||||
Этот файл — единый источник дизайн-данных клиники в машиночитаемом формате.
|
||||
Используется как контекст для LLM при:
|
||||
- разработке страниц и компонентов сайта
|
||||
- создании макетов и прототипов
|
||||
- разработке мобильных приложений
|
||||
- проектировании новых носителей бренда
|
||||
- генерации CSS / Tailwind / Figma Tokens
|
||||
|
||||
При работе с любым материалом клиники **всегда загружай этот файл первым**.
|
||||
|
||||
---
|
||||
|
||||
## 1. О клинике
|
||||
|
||||
**Полное название:** Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||
**Тип:** Медицинская клиника, отоларингология (ЛОР)
|
||||
**Город:** Пермь
|
||||
**Платформа сайта:** Drupal (тема `clinic_bootstrap_mobile`)
|
||||
**Аудитория:** Пациенты, врачи клиники, подрядчики
|
||||
|
||||
---
|
||||
|
||||
## 2. Цветовая палитра
|
||||
|
||||
### 2.1 Фирменные цвета (Oracal — базовая палитра)
|
||||
|
||||
Основаны на кодах самоклеящейся плёнки Oracal. HEX-значения рассчитаны по **точным RGB
|
||||
из каталога Oracal**. Для печати и оффлайн-носителей используй коды Oracal, не HEX.
|
||||
|
||||
| Oracal | Название | HEX | RGB | HSL | CSS-переменная | Применение |
|
||||
|--------|-----------------------|-----------|-------------------|-------------------|------------------|------------|
|
||||
| 053M | Основной бирюзовый | `#0089c3` | rgb(0,137,195) | hsl(198,100%,38%) | `--brand-053m` | Акцент, CTA-кнопки, иконки, активные состояния |
|
||||
| 073M | Тёмный серо-голубой | `#53514e` | rgb(83,81,78) | hsl(38,3%,32%) | `--brand-073m` | Тёмный фон, хедер, заголовки навигации |
|
||||
| 066M | Средний бирюзовый | `#00818c` | rgb(0,129,140) | hsl(185,100%,27%) | `--brand-066m` | Вторичные акценты, фоны секций, иллюстрации |
|
||||
| 050M | Тёмно-синий | `#1b2e5d` | rgb(27,46,93) | hsl(223,55%,24%) | `--brand-050m` | Наружная реклама, полиграфия, заголовки на светлом |
|
||||
| 081M | Бежевый | `#a8885c` | rgb(168,136,92) | hsl(35,30%,51%) | `--brand-081m` | Форма сотрудников, оффлайн носители, тёплые акценты |
|
||||
| 080M | Тёмно-коричневый | `#432f1e` | rgb(67,47,30) | hsl(27,38%,19%) | `--brand-080m` | Текст на бежевых поверхностях, логотип на форме |
|
||||
| — | Белый | `#ffffff` | rgb(255,255,255) | hsl(0,0%,100%) | `--brand-white` | Фон, инвертированный текст, логотип на тёмных фонах |
|
||||
|
||||
### 2.2 Цвета сайта oclinica.ru (реальный CSS)
|
||||
|
||||
Извлечены из CSS темы Drupal:
|
||||
`https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css`
|
||||
Метод: python + regex + Counter, 2026-03-22
|
||||
|
||||
| Название | HEX | RGB | Группа | Вхождений | Применение на сайте |
|
||||
|-----------------------|-----------|-------------------|----------|-----------|---------------------|
|
||||
| Бежевый | `#bf9975` | rgb(191,153,117) | Акценты | 12 | Основной тёплый акцент, фоны, рамки, текст |
|
||||
| Серо-бирюзовый | `#60959c` | rgb(96,149,156) | Акценты | 7 | Основной холодный акцент, ссылки |
|
||||
| Бирюзовый | `#63bac3` | rgb(99,186,195) | Акценты | 4 | Фоны акцентных блоков, иконки |
|
||||
| Бирюзовый средний | `#52b4bd` | rgb(82,180,189) | Акценты | 4 | Вторичные цветовые акценты |
|
||||
| Коралловый | `#ffa39c` | rgb(255,163,156) | Акценты | 2 | CTA-кнопки («Запишите меня!») |
|
||||
| Основной текст | `#464646` | rgb(70,70,70) | Текст | 3 | Цвет основного текста на сайте |
|
||||
| Второстепенный текст | `#949290` | rgb(148,146,144) | Текст | 4 | Подписи, второстепенный контент |
|
||||
| Светло-кремовый Hero | `#f9f4e7` | rgb(249,244,231) | Фоны | 1 | Фон Hero-баннера страниц разделов |
|
||||
| Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 1 | Фон формы записи («Будьте здоровы!») |
|
||||
| Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции |
|
||||
| Светло-жёлтый фон | `#eef4d1` | rgb(238,244,209) | Фоны | 1 | Фон карточек отзывов |
|
||||
| Светло-зелёный фон | `#f2fee6` | rgb(242,254,230) | Фоны | 1 | Фон секции новостей |
|
||||
|
||||
### 2.3 Соответствие Oracal → Сайт
|
||||
|
||||
| Oracal (бренд) | HEX бренда | Сайт (цифровой) | HEX сайта | Отклонение |
|
||||
|--------------------------|------------|-----------------------|-----------|------------|
|
||||
| 053M Основной бирюзовый | `#0089c3` | Бирюзовый | `#63bac3` | Oracal ярко-синий; сайт светлее и голубее |
|
||||
| 073M Тёмный серо-голубой | `#53514e` | Серо-бирюзовый | `#60959c` | Oracal тёмно-серый; сайт серо-бирюзовый (значительное расхождение) |
|
||||
| 066M Средний бирюзовый | `#00818c` | Бирюзовый средний | `#52b4bd` | Oracal тёмный бирюзовый; сайт светлее |
|
||||
| 081M Бежевый | `#a8885c` | Бежевый | `#bf9975` | Oracal тёплый охристый; сайт прохладнее и светлее |
|
||||
| 050M Тёмно-синий | `#1b2e5d` | — | — | Не найден в CSS сайта |
|
||||
| 080M Тёмно-коричневый | `#432f1e` | — | — | Не найден в CSS сайта |
|
||||
|
||||
**Важно:** расхождения ожидаемы — это цифровая адаптация плёночных цветов под экран.
|
||||
При разработке digital-материалов используй цвета сайта (раздел 2.2), не Oracal.
|
||||
|
||||
### 2.4 Контрастность пар (WCAG 2.1)
|
||||
|
||||
| Пара | Коэффициент | AA (4.5:1) | AAA (7:1) | AA large (3:1) |
|
||||
|----------------------------------------------|-------------|------------|-----------|----------------|
|
||||
| Белый на тёмном серо-голубом (#53514e 073M) | 7.9:1 | ✓ | ✓ | ✓ |
|
||||
| Белый на тёмно-синем (#1b2e5d 050M) | 13.2:1 | ✓ | ✓ | ✓ |
|
||||
| Белый на тёмно-коричневом (#432f1e 080M) | 12.6:1 | ✓ | ✓ | ✓ |
|
||||
| Белый на среднем бирюзовом (#00818c 066M) | 4.7:1 | ✓ | ✕ | ✓ |
|
||||
| Тёмный (#111827) на основном бирюзовом (#0089c3 053M) | 4.7:1 | ✓ | ✕ | ✓ |
|
||||
| Тёмный (#111827) на бежевом (#a8885c 081M) | 5.5:1 | ✓ | ✕ | ✓ |
|
||||
| Тёмно-коричневый (#432f1e) на бежевом (#a8885c) | 3.8:1 | ✕ | ✕ | ✓ (только крупный ≥18pt) |
|
||||
|
||||
---
|
||||
|
||||
## 3. Типографика
|
||||
|
||||
### 3.1 DINPro — фирменный шрифт (оффлайн)
|
||||
|
||||
**Применение:** логотип, оффлайн-носители (бейджи, навигационные таблички, транспорт,
|
||||
форма сотрудников, полиграфия).
|
||||
**Не использовать** на веб-сайте и в digital-материалах (лицензионный шрифт,
|
||||
нет легального встраивания в веб).
|
||||
**Веса:** Regular, Medium, Bold
|
||||
|
||||
| Стиль | font-weight | font-size | line-height | letter-spacing | Применение |
|
||||
|----------|-------------|-----------|-------------|----------------|------------|
|
||||
| Display | 700 | 48px | 1.15 | -0.5px | Крупные заголовки носителей |
|
||||
| H1 | 700 | 36px | 1.2 | -0.3px | Основной заголовок печатных материалов |
|
||||
| H2 | 700 | 28px | 1.25 | -0.2px | Подзаголовки носителей |
|
||||
| H3 | 500 | 22px | 1.3 | 0px | Подзаголовки третьего уровня |
|
||||
| Body | 400 | 16px | 1.5 | 0px | Основной текст оффлайн |
|
||||
| Small | 400 | 12px | 1.4 | 0.2px | Подписи, бейджи, таблички |
|
||||
| Caption | 400 | 10px | 1.3 | 0.4px | Сноски, технические пометки |
|
||||
|
||||
### 3.2 Fira Sans — веб-шрифт (digital)
|
||||
|
||||
**Применение:** сайт oclinica.ru, цифровые коммуникации, digital-баннеры, email.
|
||||
**Источник:** Google Fonts (`https://fonts.google.com/specimen/Fira+Sans`)
|
||||
**Поддержка кириллицы:** да
|
||||
**Используемые веса:** 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold)
|
||||
**CSS:** `font-family: 'Fira Sans', sans-serif;`
|
||||
|
||||
| Стиль | font-weight | font-size | line-height | letter-spacing | Применение |
|
||||
|----------------|-------------|---------------|-------------|----------------|------------|
|
||||
| h1 | 600 | 2.25rem (36px)| 1.25 | -0.025em | Заголовок страницы |
|
||||
| h2 | 600 | 1.875rem (30px)| 1.3 | -0.02em | Заголовок секции |
|
||||
| h3 | 500 | 1.5rem (24px) | 1.375 | -0.01em | Подзаголовок |
|
||||
| h4 | 500 | 1.25rem (20px)| 1.4 | 0em | Заголовок компонента |
|
||||
| h5 | 500 | 1.125rem (18px)| 1.45 | 0em | Подзаголовок компонента |
|
||||
| h6 | 500 | 1rem (16px) | 1.5 | 0.01em | Метка секции |
|
||||
| body-large | 400 | 1.125rem (18px)| 1.6 | 0em | Лид-текст, вводный абзац |
|
||||
| body | 400 | 1rem (16px) | 1.625 | 0em | Основной текст |
|
||||
| body-small | 400 | 0.875rem (14px)| 1.5 | 0em | Дополнительный текст, подписи |
|
||||
| caption | 300 | 0.75rem (12px)| 1.4 | 0.02em | Подписи к изображениям, сноски |
|
||||
| label | 500 | 0.875rem (14px)| 1.2 | 0.03em | Метки форм |
|
||||
| overline | 600 | 0.6875rem (11px)| 1.2 | 0.1em | Надписи над заголовками (uppercase) |
|
||||
|
||||
**Принцип выбора шрифта:**
|
||||
- Носитель цифровой → Fira Sans
|
||||
- Носитель печатный / физический → DINPro
|
||||
|
||||
---
|
||||
|
||||
## 4. Логотип
|
||||
|
||||
### 4.1 Версии логотипа
|
||||
|
||||
**Основной логотип** — включает название специализации («ухо, горло, нос»).
|
||||
Используется на всех основных носителях: сайт, навигация, транспорт, форма.
|
||||
|
||||
**Общий логотип** — без специализации, только название клиники или сеть.
|
||||
Используется для обозначения сети клиник, в корпоративных материалах.
|
||||
|
||||
### 4.2 Файлы
|
||||
|
||||
| Файл | Описание | Путь в проекте |
|
||||
|------|----------|----------------|
|
||||
| `logo-transparent.png` | Логотип с прозрачным фоном | `apps/web/public/logo/logo-transparent.png` |
|
||||
|
||||
SVG-версия ожидается (не получена от клиники).
|
||||
|
||||
### 4.3 Цветовые варианты
|
||||
|
||||
| Вариант | Фон | Логотип | Применение |
|
||||
|---------|-----|---------|------------|
|
||||
| Основной | Белый / светлый | Полноцветный | Сайт, полиграфия на белом |
|
||||
| Инвертированный | Тёмный (#53514e, #1b2e5d) | Белый (`filter: brightness(0) invert(1)`) | Хедер, тёмные секции |
|
||||
| На форме (беж) | Бежевый (#a8885c / Oracal 081M) | Коричневый (#432f1e / Oracal 080M) | Одежда персонала |
|
||||
| На форме (синий) | Тёмно-синий (#1b2e5d / Oracal 050M) | Белый | Одежда персонала |
|
||||
|
||||
### 4.4 Охранная зона
|
||||
|
||||
Минимальный отступ вокруг логотипа = **высота буквы «К»** в названии.
|
||||
Запрещено размещать другие элементы в охранной зоне.
|
||||
|
||||
### 4.5 Минимальные размеры
|
||||
|
||||
| Носитель | Размер логотипа |
|
||||
|----------|----------------|
|
||||
| Одежда до р.46 | 70 × 25,5 мм |
|
||||
| Одежда от р.48 | 90 × 32,8 мм |
|
||||
|
||||
### 4.6 Запрещено
|
||||
|
||||
- Искажать пропорции
|
||||
- Менять цвета на нефирменные
|
||||
- Добавлять тени, обводки, эффекты
|
||||
- Размещать на пёстром или плохо контрастном фоне
|
||||
- Использовать низкое разрешение (< 150 dpi для печати)
|
||||
- Переворачивать или отражать
|
||||
|
||||
---
|
||||
|
||||
## 5. CSS-переменные брендбука
|
||||
|
||||
Определены в `apps/web/app/globals.css`:
|
||||
|
||||
```css
|
||||
/* Цвета бренда (точные RGB из каталога Oracal) */
|
||||
--brand-053m: #0089c3; /* Основной бирюзовый · rgb(0,137,195) */
|
||||
--brand-073m: #53514e; /* Тёмный серо-голубой · rgb(83,81,78) */
|
||||
--brand-066m: #00818c; /* Средний бирюзовый · rgb(0,129,140) */
|
||||
--brand-050m: #1b2e5d; /* Тёмно-синий · rgb(27,46,93) */
|
||||
--brand-081m: #a8885c; /* Бежевый · rgb(168,136,92) */
|
||||
--brand-080m: #432f1e; /* Тёмно-коричневый · rgb(67,47,30) */
|
||||
--brand-white: #ffffff; /* Белый */
|
||||
|
||||
/* UI брендбука */
|
||||
--bb-sidebar-bg: #f8f9fa;
|
||||
--bb-sidebar-border: #e5e7eb;
|
||||
--bb-sidebar-text: #374151;
|
||||
--bb-sidebar-text-muted: #6b7280;
|
||||
--bb-sidebar-active-bg: #dff0fa; /* светло-синий под 053M */
|
||||
--bb-sidebar-active-text: var(--brand-053m);
|
||||
--bb-sidebar-section: #9ca3af;
|
||||
--bb-content-bg: #ffffff;
|
||||
--bb-border: #e5e7eb;
|
||||
--bb-text: #111827;
|
||||
--bb-text-muted: #6b7280;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Оффлайн носители
|
||||
|
||||
### 6.1 Форма сотрудников
|
||||
|
||||
**Варианты:**
|
||||
- Бежевый: ткань цвета Oracal 081M (#a8885c), логотип Oracal 080M (#432f1e, коричневый), расположение — левая сторона груди
|
||||
- Синий: ткань цвета Oracal 050M (#1b2e5d, тёмно-синий), логотип белый (Oracal 010), расположение — левая сторона груди
|
||||
|
||||
**Размеры логотипа на форме:**
|
||||
- Размеры до 46: 70 × 25,5 мм
|
||||
- Размеры от 48: 90 × 32,8 мм
|
||||
|
||||
### 6.2 Бейджи
|
||||
|
||||
**Размер:** 70 × 30 мм
|
||||
**Варианты:** серый (светлый) и белый
|
||||
**Состав текста:** имя, должность, учёная степень (при наличии)
|
||||
**Шрифт:** DINPro
|
||||
**Логотип:** левый верхний угол или левая часть
|
||||
|
||||
### 6.3 Внутренняя навигация
|
||||
|
||||
**Материал:** оргстекло
|
||||
**Плёнки:** Oracal 053M (#0089c3) и 073M (#53514e)
|
||||
**Типы табличек:**
|
||||
- Таблички на дверях кабинетов: номер кабинета, профиль врача с фото и QR-кодом
|
||||
- Указатели по этажам: стрелки направлений + номера кабинетов
|
||||
|
||||
**Нумерация кабинетов:**
|
||||
- Двузначное число, крупный шрифт (DINPro Bold)
|
||||
- Фон: бирюзовый (053M), номер: белый
|
||||
- Пример реализации: кабинеты 13, 31, «Кабинет 04»
|
||||
|
||||
### 6.4 Брендирование транспорта (трамвай)
|
||||
|
||||
**Зоны оклейки:**
|
||||
- Борта: Oracal 053M (#0089c3) + 073M (#53514e)
|
||||
- Передняя часть: Oracal 066M (#00818c) + 050M (#1b2e5d)
|
||||
- Акценты: Oracal 081M (#a8885c) + 080M (#432f1e)
|
||||
|
||||
**Все 6 фирменных цветов присутствуют на транспорте.**
|
||||
|
||||
---
|
||||
|
||||
## 7. Структура брендбука (страницы)
|
||||
|
||||
| URL | Статус | Описание |
|
||||
|-----|--------|----------|
|
||||
| `/foundation/logo` | ✅ Готова | Логотип, варианты, охранная зона, правила |
|
||||
| `/foundation/colors` | ✅ Готова | Палитра (Oracal точные RGB), контраст WCAG, цвета сайта, соответствие |
|
||||
| `/foundation/typography` | ✅ Готова | DINPro + Fira Sans, шкала стилей |
|
||||
| `/foundation/icons` | 🔜 Скоро | Иконография |
|
||||
| `/offline/uniform` | ✅ Готова | Форма сотрудников |
|
||||
| `/offline/badges` | ✅ Готова | Бейджи |
|
||||
| `/offline/navigation` | ✅ Готова | Внутренняя навигация |
|
||||
| `/offline/transport` | ✅ Готова | Брендирование транспорта |
|
||||
| `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
|
||||
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
|
||||
| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
|
||||
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
|
||||
| `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline |
|
||||
| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото |
|
||||
| `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
|
||||
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
|
||||
|
||||
---
|
||||
|
||||
## 8. Правила применения цветов
|
||||
|
||||
### Разрешено
|
||||
- Использовать только цвета из фирменной палитры (раздел 2.1)
|
||||
- Для digital: адаптировать к цветам сайта (раздел 2.2)
|
||||
- Текст на цветном фоне — минимум WCAG AA (4.5:1)
|
||||
- Белый текст на тёмных фонах: 073M (#53514e), 066M (#00818c), 050M (#1b2e5d), 080M (#432f1e)
|
||||
- Тёмный текст (#111827) на светлых: 053M (#0089c3), 081M (#a8885c)
|
||||
- Коричневый логотип (080M) на бежевом фоне (081M) — только крупный текст (3.8:1)
|
||||
|
||||
### Запрещено
|
||||
- Использовать произвольные цвета вне палитры
|
||||
- Осветлять, затемнять или менять оттенок фирменных цветов
|
||||
- Текст с контрастом ниже 3:1 (даже для крупного текста)
|
||||
- Размещать тёплые и холодные акценты рядом без разделителя
|
||||
|
||||
### Иерархия цветов
|
||||
|
||||
```
|
||||
Основной бирюзовый (053M / #0089c3) ← главный идентификатор бренда
|
||||
└── Средний бирюзовый (066M / #00818c) ← вторичный акцент
|
||||
└── Тёмный серо-голубой (073M / #53514e) ← фоны, хедер
|
||||
|
||||
Тёмно-синий (050M / #1b2e5d) ← авторитет, полиграфия
|
||||
Бежевый (081M / #a8885c) ← тепло, форма
|
||||
└── Тёмно-коричневый (080M / #432f1e) ← текст на бежевом
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Правила применения типографики
|
||||
|
||||
### Веб (Fira Sans)
|
||||
- H1 только один на странице
|
||||
- Заголовки не пропускать по уровням (h1→h2→h3)
|
||||
- Основной текст: 16px / 400 / 1.625
|
||||
- Минимальный размер текста на экране: 12px
|
||||
- Кириллица: только Fira Sans, не DINPro
|
||||
|
||||
### Оффлайн (DINPro)
|
||||
- Все физические носители: DINPro
|
||||
- Логотип: DINPro Bold
|
||||
- Таблички: DINPro Medium / Bold
|
||||
- Не использовать light (300) для текста < 14pt
|
||||
|
||||
---
|
||||
|
||||
## 9a. Базовые компоненты (Sprint 3)
|
||||
|
||||
### Кнопки (Button) · `/components/buttons`
|
||||
|
||||
Варианты скопированы с реального сайта perm.oclinica.ru.
|
||||
CSS-классы в `globals.css`. Компонент: `@/components/ui/Button` (React, "use client").
|
||||
|
||||
| Вариант | CSS класс | Фон | Текст | Граница | Border-radius | Применение |
|
||||
|---------|------------------|----------|---------|-----------|---------------|------------|
|
||||
| primary | .bb-btn-primary | #FFA39C | #fff | #FF847B | 7px, bold, shadow | Форма записи «Запишите меня!» |
|
||||
| outline | .bb-btn-outline | #fff | #BF9975 | #BF9975 | 7px | «Записаться на приём» |
|
||||
| teal | .bb-btn-teal | #60959C | #fff | прозрачная| 7px | «Позвонить» |
|
||||
| pill | .bb-btn-pill | #E9E4D4 | #333 | #D5CFBD | 25px | «Заказать звонок» |
|
||||
|
||||
| Размер | CSS класс | padding | font-size |
|
||||
|--------|------------|--------------|-----------|
|
||||
| sm | .bb-btn-sm | 4px 11px | 13px |
|
||||
| md | .bb-btn-md | 8px 16px | 14px |
|
||||
| lg | .bb-btn-lg | 10px 24px | 18px |
|
||||
|
||||
**Состояния:** default · hover (brightness 0.9) · active (brightness 0.82) · loading (spinner) · disabled (opacity 0.5)
|
||||
|
||||
### Форм-контролы (Forms) · `/components/forms`
|
||||
|
||||
Размеры соответствуют entityform-блокам на реальном сайте.
|
||||
|
||||
| Элемент | CSS класс | Тег HTML | Высота | Описание |
|
||||
|----------|------------------|----------------------------|---------|----------|
|
||||
| Input | .bb-input | `<input>` | 50px | text, email, password · border 1px #ccc · radius 4px |
|
||||
| Textarea | .bb-textarea | `<textarea>` | ≥100px | многострочный, resize:vertical |
|
||||
| Select | .bb-select | `<select>` | 50px | с кастомной SVG-стрелкой |
|
||||
| Checkbox | .bb-checkbox | `<input type="checkbox">` | 16×16px | accent-color: #53514e |
|
||||
| Radio | .bb-radio | `<input type="radio">` | 16×16px | accent-color: #53514e |
|
||||
| Toggle | .bb-toggle-track | React-компонент `<Toggle>` | 24px | 44×24px track + 20px thumb |
|
||||
|
||||
**Состояния полей:** default (border 1px solid #ccc) · focus (border #0089c3 + box-shadow rgba(0,137,195,0.2)) · error (.bb-error, border #dc2626) · disabled (opacity 0.5)
|
||||
|
||||
**Контекст на сайте:** фон формы #b8e6ed, ширина полей 302px, entityform-блоки.
|
||||
|
||||
**Toggle:** выкл → track #d1d5db · вкл → track #53514e · thumb: белый круг 20×20px.
|
||||
|
||||
---
|
||||
|
||||
## 9b. Карточки, бейджи и алерты (Sprint 4)
|
||||
|
||||
### Карточки · `/components/cards`
|
||||
|
||||
| Карточка | Размеры ключевые | Источник на сайте | Фон / hover |
|
||||
|-------------|-------------------------|------------------------------------------------|--------------------------|
|
||||
| DoctorCard | фото 110×160px | `.doctor .image` + `.doctor .item` | #fff / — |
|
||||
| NewsCard | preview h=144px | `#block-views-last-news-block-1 .views-column` | #fff / **#eef4d1** + shadow |
|
||||
| ReviewCard | 4-строчный clamp | `.node-reviews` | **#eef4d1** / — |
|
||||
| PriceCard | flex row: name + price | `.field-name-field-price-priem` | #fff / highlighted: #f0f9ff |
|
||||
| ServiceCard | иконка 48×48px | — (нет прямого аналога) | #fff / shadow |
|
||||
|
||||
**DoctorCard:** фото 110×160px (placeholder фон `#dff0fa`), кнопка `.bb-btn-outline .bb-btn-sm`
|
||||
**NewsCard hover CSS:** `background: #eef4d1; box-shadow: 0 0 16px 0 #9e9e9a;` — взят с реального сайта
|
||||
**ReviewCard:** звёзды SVG, заливка `#f59e0b`, `WebkitLineClamp: 4`
|
||||
|
||||
### Бейджи, теги, алерты
|
||||
|
||||
| Элемент | Варианты | Применение |
|
||||
|---------|----------|------------|
|
||||
| Badge | primary (#0089c3) / success (#059669) / warning (#d97706) / danger (#dc2626) / neutral (#6b7280) | Статус врача, категория, акция |
|
||||
| Tag | default (border) / active (brand bg) | Фильтры, категории услуг |
|
||||
| Alert | info (#dff0fa/#075985) / success (#d1fae5/#065f46) / warning (#fef3c7/#92400e) / error (#fee2e2/#991b1b) | Системные сообщения |
|
||||
|
||||
**CSS класс hover:** `.bb-news-card:hover` в globals.css
|
||||
|
||||
---
|
||||
|
||||
## 10. Технический стек проекта
|
||||
|
||||
| Слой | Технология | Версия |
|
||||
|------|-----------|--------|
|
||||
| Фронтенд | Next.js App Router | 16.x |
|
||||
| Стилизация | Tailwind CSS | 4.x |
|
||||
| Язык | TypeScript | 5.x |
|
||||
| Шрифты | next/font/google | — |
|
||||
| Бэкенд | NestJS | 11.x |
|
||||
| БД | PostgreSQL + Prisma | 16.x / 7.x |
|
||||
| Деплой | Vercel Hobby | — |
|
||||
| Пакетный менеджер | pnpm | 10.x |
|
||||
|
||||
---
|
||||
|
||||
## 11. История изменений контекста
|
||||
|
||||
| Версия | Дата | Что добавлено |
|
||||
|--------|------|---------------|
|
||||
| 1.0 | 2026-03-22 | Sprint 1: логотип, базовые цвета |
|
||||
| 2.0 | 2026-03-22 | Sprint 2: типографика, оффлайн носители, цвета сайта (8 цветов) |
|
||||
| 2.1 | 2026-03-22 | Sprint 2 доп.: +3 цвета сайта (коралловый, светло-жёлтый, светло-зелёный) |
|
||||
| 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе |
|
||||
| 4.0 | 2026-03-22 | Sprint 4 start: исправлены цвета Oracal (точные RGB из каталога), кнопки/формы по реальному сайту |
|
||||
| 4.1 | 2026-03-22 | Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты |
|
||||
|
||||
---
|
||||
|
||||
## 12. Что обновлять в этом файле
|
||||
|
||||
При каждом спринте добавляй:
|
||||
- Новые компоненты и их спецификации (цвета, размеры, состояния)
|
||||
- Новые правила применения, выявленные при разработке
|
||||
- Изменения в палитре или типографике
|
||||
- Новые паттерны и примеры кода
|
||||
|
||||
**Соответствующий раздел в TZ.md:** ФТ-03-LLM
|
||||
**Соответствующий раздел в SPRINTS.md:** задача «LLM-блок» в каждом спринте
|
||||
+213
-140
@@ -81,218 +81,291 @@
|
||||
### Фактические результаты
|
||||
- Страница `/foundation/colors` — 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON
|
||||
- Страница `/foundation/typography` — DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример
|
||||
- Страница `/offline/uniform` — схема формы, таблица размеров логотипа, правила использования
|
||||
- Страница `/offline/badges` — макеты бейджей 70×30 мм (светлый/тёмный), состав текста, применение
|
||||
- Страница `/offline/navigation` — 4 шаблона табличек, технические требования, цвета Oracal
|
||||
- Страница `/offline/transport` — CSS-макет трамвая с трёхполосной схемой, таблица зон
|
||||
- Страница `/offline/print` — макеты визитки (лицо/оборот) и листовки А5, Telegram-бот
|
||||
- Sidebar: убраны «скоро» для Цветов, Типографики и всех 5 страниц Оффлайн
|
||||
- Страница `/offline/uniform` — реальные фото из PDF (беж + синий вариант), таблица размеров, правила
|
||||
- Страница `/offline/badges` — реальные фото из PDF (лицевая + оборотная), состав текста, пример
|
||||
- Страница `/offline/navigation` — макеты из PDF (Кабинет 04, карточка врача), фото дверей с номерами (13, 31), указатели по этажам
|
||||
- Страница `/offline/transport` — макет трамвая из PDF (оба вида, реальный рендер), таблица зон, цвета Oracal
|
||||
- Страница `/offline/print` — убрана из навигации (нет данных из брендбука)
|
||||
- Sidebar: убраны «скоро» для Цветов, Типографики и всех страниц Оффлайн кроме Печати
|
||||
- Версия обновлена до **Sprint 2 · v0.2.0**
|
||||
- **Деплой на Vercel:** https://web-oclinica.vercel.app (production, бесплатно)
|
||||
- **Тайтлы страниц:** единый формат «Раздел. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой»
|
||||
|
||||
### Технические решения Sprint 2
|
||||
- Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON
|
||||
- WCAG relative luminance вычисляется на клиенте, без зависимостей
|
||||
- DINPro отображается с фоллбэком Arial (лицензионный шрифт)
|
||||
- Макеты (бейджи, трамвай, визитки) — чистый CSS/Tailwind без внешних зависимостей
|
||||
- Реальные фото и макеты из PDF: PyMuPDF (fitz) — извлечение растровых изображений и рендер векторных страниц
|
||||
- Рендер PDF страниц: 2.5–3.0x масштаб → JPEG, кроп до нужной области через Pillow
|
||||
|
||||
**Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы.
|
||||
### Ретроспектива Sprint 2 — LLM-контекст
|
||||
- [x] Docs: Создан `docs/LLM_CONTEXT.md` — сводный файл дизайн-данных для LLM (v2.1)
|
||||
- [x] TZ: Добавлено требование ФТ-03-LLM — LLM-блок на каждой странице брендбука
|
||||
- [ ] FE: Добавить LLM-блоки на страницы Sprint 1–2 (логотип, цвета, типографика, оффлайн) — перенесено в Sprint 3
|
||||
|
||||
**Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы с реальными материалами из брендбука.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 3 — Базовые компоненты: кнопки и поля ввода
|
||||
## Sprint 3 — Базовые компоненты: кнопки и поля ввода ✅ ЗАВЕРШЁН
|
||||
|
||||
**Цель:** Все варианты кнопок и форм-контролов в брендбуке.
|
||||
**Цель:** Все варианты кнопок и форм-контролов в брендбуке. LLM-блоки на страницах.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Компонент Button (все варианты: primary/secondary/ghost/danger, размеры, состояния)
|
||||
- [ ] FE: Компонент Input (text, password, focus/error/disabled)
|
||||
- [ ] FE: Компонент Textarea
|
||||
- [ ] FE: Компонент Select
|
||||
- [ ] FE: Компонент Checkbox и Radio
|
||||
- [ ] FE: Компонент Toggle/Switch
|
||||
- [ ] FE: Страница брендбука «Компоненты → Кнопки» с документацией
|
||||
- [ ] FE: Страница брендбука «Компоненты → Форм-контролы»
|
||||
- [ ] FE: Копирование HTML/CSS кода компонента в один клик
|
||||
### Задачи — LLM-контекст
|
||||
- [x] FE: Добавить LLM-блок на страницу «Логотип» (`/foundation/logo`) — v1.0
|
||||
- [x] FE: Добавить LLM-блок на страницу «Цвета» (`/foundation/colors`) — v2.1
|
||||
- [x] FE: Добавить LLM-блок на страницу «Типографика» (`/foundation/typography`) — v2.0
|
||||
- [x] FE: Создать переиспользуемый компонент `components/llm/LlmBlock.tsx` (LlmBlock, LlmSection, LlmTable, LlmRules)
|
||||
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` по итогам спринта — версия 3.0
|
||||
|
||||
**Результат спринта:** Раздел «Базовые компоненты — кнопки и ввод» готов.
|
||||
### Задачи — компоненты
|
||||
- [x] FE: Компонент Button (`components/ui/Button.tsx`) — варианты primary/outline/teal/pill, размеры sm/md/lg, loading
|
||||
- [x] FE: Компонент Input (`.bb-input`) — text, password, focus/error/disabled, height 50px как на сайте
|
||||
- [x] FE: Компонент Textarea (`.bb-textarea`) — resize:vertical, min-height 100px
|
||||
- [x] FE: Компонент Select (`.bb-select`) — height 50px, кастомная стрелка SVG
|
||||
- [x] FE: Компонент Checkbox (`.bb-checkbox`) и Radio (`.bb-radio`)
|
||||
- [x] FE: Компонент Toggle/Switch (`components/ui/Toggle.tsx`) — React "use client", defaultChecked/disabled/label
|
||||
- [x] FE: Страница `/components/buttons` — 4 варианта по реальному сайту, размеры, состояния, «Где применяется», LLM-блок v2.0
|
||||
- [x] FE: Страница `/components/forms` — все 6 контролов, контекст на сайте с макетом, LLM-блок v2.0
|
||||
- [x] FE: Копирование HTML/CSS кода в один клик (`components/ui/CodeCopy.tsx`)
|
||||
|
||||
### Фактические результаты
|
||||
- **4 варианта кнопок** — скопированы с реального сайта perm.oclinica.ru: primary(#FFA39C), outline(#BF9975), teal(#60959c), pill(#e9e4d4)
|
||||
- **6 форм-контролов** — input/textarea/select/checkbox/radio/toggle с полной документацией состояний
|
||||
- **Input/Select** — height 50px, border 1px solid #ccc, border-radius 4px (entityform CSS с реального сайта)
|
||||
- **Макет формы** на фоне #b8e6ed как «Узнайте стоимость операции» на oclinica.ru/lor
|
||||
- **LLM-блоки** добавлены на логотип, цвета, типографику, кнопки, форм-контролы
|
||||
- **Компоненты:** Button.tsx, Toggle.tsx, CodeCopy.tsx в `components/ui/`
|
||||
- **Sidebar:** Sprint 3 · v0.3.0, кнопки/формы убраны из «скоро»
|
||||
- **Деплой:** https://web-oclinica.vercel.app (production)
|
||||
|
||||
**Результат спринта:** Раздел «Базовые компоненты» полностью готов. Стили соответствуют реальному сайту.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 4 — Карточки (Cards)
|
||||
## Sprint 4 — Карточки (Cards) ✅ ЗАВЕРШЁН
|
||||
|
||||
**Цель:** Все типы карточек, используемых на сайте.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Карточка врача (DoctorCard) — фото, имя, специализация, кнопка записи
|
||||
- [ ] FE: Карточка услуги / заболевания
|
||||
- [ ] FE: Карточка новости — превью, дата, заголовок, анонс, читать далее
|
||||
- [ ] FE: Карточка отзыва — автор, текст, рейтинг (звёзды), дата
|
||||
- [ ] FE: Карточка цены — услуга, стоимость, описание
|
||||
- [ ] FE: Бейджи, теги, алерты (inline и toast)
|
||||
- [ ] FE: Страница «Компоненты → Карточки» с документацией
|
||||
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` → версия 4.0
|
||||
- [x] FE: Добавить LLM-блок на страницу «Карточки» — v1.0
|
||||
- [x] FE: Карточка врача (DoctorCard) — фото 110×160px, имя, специализация, стаж, кнопка outline
|
||||
- [x] FE: Карточка услуги / заболевания (ServiceCard) — иконка + заголовок + описание
|
||||
- [x] FE: Карточка новости — превью, дата, заголовок, анонс, hover #eef4d1 (CSS сайта)
|
||||
- [x] FE: Карточка отзыва — рейтинг SVG-звёзды, 4-строчный clamp, фон #eef4d1
|
||||
- [x] FE: Карточка цены — услуга + стоимость + highlighted-вариант
|
||||
- [x] FE: Бейджи (6 вариантов), теги (default/active), алерты (info/success/warning/error)
|
||||
- [x] FE: Страница `/components/cards` с документацией и LLM-блоком
|
||||
|
||||
**Результат спринта:** Все карточки задокументированы и показаны в брендбуке.
|
||||
### Фактические результаты
|
||||
- **5 типов карточек:** DoctorCard, NewsCard, ReviewCard, PriceCard, ServiceCard
|
||||
- **NewsCard hover** — bg `#eef4d1` + box-shadow `0 0 16px #9e9e9a` (1:1 с реальным CSS сайта)
|
||||
- **ReviewCard** — фон `#eef4d1` из CSS сайта, WebkitLineClamp: 4
|
||||
- **Бейджи** — 6 вариантов (primary/success/warning/danger/neutral/outline-blue)
|
||||
- **Алерты** — info (#dff0fa), success (#d1fae5), warning (#fef3c7), error (#fee2e2)
|
||||
- **Исправлены цвета Oracal** — точные RGB из каталога для всех 6 плёнок
|
||||
- **Деплой:** https://web-oclinica.vercel.app (production)
|
||||
|
||||
**Результат спринта:** Все карточки задокументированы. Цвета Oracal исправлены по каталогу.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 5 — Hero-блок и CEO-текст
|
||||
## Принцип документирования (Sprint 5+)
|
||||
|
||||
**Цель:** Ключевые верхние блоки страниц.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Hero-блок вариант 1 — фон + заголовок + CTA
|
||||
- [ ] FE: Hero-блок вариант 2 — иллюстрация сбоку
|
||||
- [ ] FE: Hero-блок вариант 3 — с встроенной формой записи
|
||||
- [ ] FE: Блок CEO-текст — фото руководителя, цитата, подпись
|
||||
- [ ] FE: Блок «Преимущества клиники» — иконки + текст
|
||||
- [ ] FE: Страница «Блоки → Hero и вступление»
|
||||
- [ ] Design: Согласование вариантов Hero под разные страницы
|
||||
|
||||
**Результат спринта:** Hero и CEO-секция полностью задокументированы.
|
||||
> **Правило:** Брендбук документирует только то, что реально существует на сайте `perm.oclinica.ru`.
|
||||
> Никаких придуманных вариантов. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 6 — Врачи и профиль врача
|
||||
## Sprint 5 — Все блоки текущего сайта
|
||||
|
||||
**Цель:** Блоки и компоненты, связанные с врачами.
|
||||
**Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт.
|
||||
Источник: скриншот страницы + CSS сайта. Только фронтенд, mock-данные.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Блок «Наши врачи» — сетка карточек с фильтром по специализации
|
||||
- [ ] FE: Блок «Врач — профиль» (полная страница): фото, биография, специализации, расписание
|
||||
- [ ] FE: Компонент «Расписание / слоты записи»
|
||||
- [ ] FE: Компонент навигации (header menu, breadcrumbs)
|
||||
- [ ] FE: Пагинация
|
||||
- [ ] FE: Страница «Блоки → Врачи»
|
||||
### Блоки с реального сайта (сверху вниз, по скриншоту /lor)
|
||||
|
||||
**Результат спринта:** Все блоки о врачах готовы.
|
||||
**Шапка и навигация** → `/components/navigation`
|
||||
- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
|
||||
- [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
|
||||
- [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
|
||||
|
||||
**Hero-баннер** → `/blocks/hero`
|
||||
- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
|
||||
- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
|
||||
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
|
||||
|
||||
**Вводный текст (CEO-блок)** → `/blocks/ceo`
|
||||
- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
|
||||
|
||||
**Блок врачей** → `/blocks/doctors`
|
||||
- [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
|
||||
- [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
|
||||
- [x] FE: Реальные имена и специализации врачей из слайдера /lor
|
||||
- [x] LLM: v1.1
|
||||
|
||||
**Блок отзывов** → `/blocks/reviews`
|
||||
- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
|
||||
|
||||
**Формы записи** → `/blocks/contact-forms`
|
||||
- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!»)
|
||||
- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне»)
|
||||
|
||||
**Блок новостей** → `/blocks/news`
|
||||
- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
|
||||
|
||||
**Footer (подвал)** → `/blocks/contact`
|
||||
- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
|
||||
|
||||
### Общее к Sprint 5
|
||||
- [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
|
||||
- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
|
||||
- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
|
||||
- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
|
||||
- [ ] FE: CEO-блок, отзывы, формы, новости, footer
|
||||
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5
|
||||
|
||||
**Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 7 — Отзывы и новости
|
||||
## Sprint 6 — Страницы (сборки из блоков)
|
||||
|
||||
**Цель:** Контентные блоки сайта.
|
||||
**Цель:** Задокументировать полные страницы как сборки уже готовых блоков.
|
||||
Данные пока mock — реальные появятся в Sprint 8.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Блок отзывов — карусель
|
||||
- [ ] FE: Блок отзывов — статичная сетка
|
||||
- [ ] FE: Блок рейтинга (звёзды + количество отзывов)
|
||||
- [ ] FE: Блок новостей — сетка превью (3 в ряд)
|
||||
- [ ] FE: Блок новостей — горизонтальный список
|
||||
- [ ] FE: Блок «Последние новости» для сайдбара
|
||||
- [ ] FE: Блок услуг / заболеваний — иконки + список
|
||||
- [ ] FE: Страница «Блоки → Отзывы и новости»
|
||||
- [ ] Research: Страница заболевания perm.oclinica.ru/lor/rinit — порядок блоков, что отличается от главной
|
||||
- [ ] Research: Страница врачей /lor/doctors — фильтры, сетка, пагинация
|
||||
- [ ] FE: `/pages/home` — сборка блоков из Sprint 5 в порядке реальной страницы /lor
|
||||
- [ ] FE: `/pages/disease` — страница заболевания по /lor/rinit
|
||||
- [ ] FE: `/pages/doctors` — список врачей с фильтрами (mock) и пагинацией
|
||||
- [ ] FE: `/pages/prices` — страница цен (Research: реальная структура таблицы)
|
||||
- [ ] FE: `/pages/contacts` — контакты + карта
|
||||
- [ ] FE: `/pages/doctor` — профиль врача
|
||||
- [ ] FE: Убрать `soon` у страниц в Sidebar
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
|
||||
|
||||
**Результат спринта:** Контентные блоки задокументированы.
|
||||
**Результат спринта:** Все страницы брендбука задокументированы (с mock-данными).
|
||||
|
||||
---
|
||||
|
||||
## Sprint 8 — Формы контакта и модальные окна
|
||||
## Sprint 7 — Авторизация (viewer / editor)
|
||||
|
||||
**Цель:** Все формы и диалоги взаимодействия с пациентом.
|
||||
**Цель:** Реализовать систему ролей из ТЗ: `viewer` видит брендбук, `editor` видит кнопки дублирования.
|
||||
Требует бэкенд (NestJS) и БД (PostgreSQL + Prisma).
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Форма записи — короткая (имя, телефон)
|
||||
- [ ] FE: Форма записи — расширенная (имя, телефон, специализация, врач, дата)
|
||||
- [ ] FE: Форма записи в модальном окне
|
||||
- [ ] FE: Контактная форма (имя, email, сообщение)
|
||||
- [ ] FE: Блок «Контакт» — карта + адрес + часы работы
|
||||
- [ ] FE: Модальное окно — информационное
|
||||
- [ ] FE: Модальное окно — подтверждение
|
||||
- [ ] FE: Страница «Блоки → Формы и контакты»
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Prisma-модель `User` (id, email, name, passwordHash, role: viewer/editor, createdAt)
|
||||
- [ ] BE: Prisma миграция + seed (создать тестовых пользователей: 1 viewer, 1 editor)
|
||||
- [ ] BE: NestJS модуль `auth` — JWT-авторизация, `/api/auth/login`, `/api/auth/me`
|
||||
- [ ] BE: JWT-токен в httpOnly cookie (не localStorage) — ФТ-64
|
||||
- [ ] BE: Guard для защиты эндпоинтов по роли
|
||||
|
||||
**Результат спринта:** Все формы и диалоги готовы.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Страница `/login` — форма email + пароль + кнопка «Войти» — ФТ-61
|
||||
- [ ] FE: Редирект неавторизованных на `/login` — ФТ-60
|
||||
- [ ] FE: После входа — редирект обратно на запрошенную страницу — ФТ-62
|
||||
- [ ] FE: В шапке брендбука: имя пользователя, роль, кнопка «Выйти» — ФТ-63
|
||||
- [ ] FE: `editor` видит шапку с дополнительными действиями; `viewer` — только чтение
|
||||
|
||||
**Результат спринта:** Рабочая авторизация, два типа пользователей, защищённые маршруты.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 9 — Страницы: Главная и Заболевание
|
||||
## Sprint 8 — Реальные данные (интеграция с oclinica.ru)
|
||||
|
||||
**Цель:** Первые две полноразмерные страницы в брендбуке.
|
||||
**Цель:** Подключить реальные данные с сайта клиники — врачи, новости, услуги, цены, отзывы.
|
||||
Данные проксируются через NestJS с кэшем 15 минут — ИНТ-01-04.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Главная» — сборка из утверждённых блоков
|
||||
- [ ] FE: Страница «Заболевание» — Hero (мини), описание, врачи по теме, форма
|
||||
- [ ] FE: Раздел «Страницы» в навигации брендбука
|
||||
- [ ] FE: Адаптивность страниц (desktop / tablet / mobile)
|
||||
- [ ] Design: Ревью и согласование страниц
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Research — проверить доступные эндпоинты oclinica.ru (JSON:API Drupal или /node?_format=json)
|
||||
- [ ] BE: NestJS модуль `oclinica` — HTTP-клиент к oclinica.ru API
|
||||
- [ ] BE: Кэш TTL 15 минут (in-memory или Redis) — ИНТ-03
|
||||
- [ ] BE: Graceful degradation: если API недоступен — возврат mock-данных — ИНТ-04
|
||||
- [ ] BE: Эндпоинты: `/api/doctors`, `/api/news`, `/api/services`, `/api/prices`, `/api/reviews`
|
||||
|
||||
**Результат спринта:** 2 страницы задокументированы в брендбуке.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Блок «Наши врачи» (`/blocks/doctors`) — реальные карточки врачей с фото
|
||||
- [ ] FE: Блок «Новости» (`/blocks/news`) — реальные новости
|
||||
- [ ] FE: Страницы (`/pages/*`) — замена mock-данных на реальные
|
||||
|
||||
**Результат спринта:** Брендбук показывает реальных врачей, новости, услуги с сайта клиники.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 10 — Страницы: Врачи, Врач, Цены
|
||||
## Sprint 9 — Эксперименты: дублирование компонентов
|
||||
|
||||
**Цель:** Три страницы с ключевым контентом.
|
||||
**Цель:** Реализовать систему создания дублей — `editor` может дублировать любой компонент/блок,
|
||||
редактировать атрибуты и отправить на согласование. ФТ-50 – ФТ-56.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Все врачи» — фильтры, сетка, пагинация
|
||||
- [ ] FE: Страница «Врач (профиль)»
|
||||
- [ ] FE: Страница «Цены» — фильтры, таблица, форма
|
||||
- [ ] FE: Таблица цен с сортировкой
|
||||
- [ ] FE: Адаптивность всех трёх страниц
|
||||
- [ ] Design: Ревью страниц
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Prisma-модель `ExperimentalComponent` (id, name, baseComponent, attributes JSON, status, authorId, createdAt, updatedAt)
|
||||
- [ ] BE: Prisma миграция
|
||||
- [ ] BE: NestJS модуль `components` — CRUD: `POST /api/components`, `GET /api/components`, `PATCH /api/components/:id`, `DELETE /api/components/:id`
|
||||
- [ ] BE: Эндпоинт смены статуса: `PATCH /api/components/:id/status` (draft→review→approved)
|
||||
- [ ] BE: Guard: мутирующие операции только для `editor` — ФТ-52, ФТ-55
|
||||
|
||||
**Результат спринта:** Ещё 3 страницы в брендбуке.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Кнопка «Дублировать» на каждом компоненте/блоке (видна только `editor`) — ФТ-51
|
||||
- [ ] FE: Форма редактирования атрибутов дубля — ФТ-52:
|
||||
- Текстовые поля (заголовки, описания)
|
||||
- Color picker — только из токенов бренда (`--brand-*`)
|
||||
- Выбор размера из допустимых значений
|
||||
- Real-time preview при изменении
|
||||
- Кнопки: «Сохранить как черновик», «Отмена»
|
||||
- [ ] FE: Раздел `/variants/blocks` — список всех дублей компонентов — ФТ-50, ФТ-56:
|
||||
- `viewer`: только approved
|
||||
- `editor`: все (draft, review, approved)
|
||||
- [ ] FE: Карточка дубля: название, автор, дата, статус, базовый компонент, превью — ФТ-56
|
||||
- [ ] FE: Управление статусом для `editor`: draft→review→approved, удаление draft — ФТ-54, ФТ-55
|
||||
|
||||
**Результат спринта:** Рабочая система создания и согласования дублей компонентов.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 11 — Страница Контакты и Экспериментальная секция (MVP)
|
||||
## Sprint 10 — Финальная полировка и деплой
|
||||
|
||||
**Цель:** Последняя страница + запуск механизма экспериментов.
|
||||
**Цель:** Финальный релиз — smoke-тест, адаптивность, деплой бэкенда.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Контакты»
|
||||
- [ ] BE + DB: Модели `Component`, `Page`, `Block` в Prisma
|
||||
- [ ] BE: CRUD API для компонентов (`/api/components`)
|
||||
- [ ] BE: CRUD API для страниц (`/api/pages`)
|
||||
- [ ] FE: Секция «Эксперименты» в брендбуке
|
||||
- [ ] FE: Форма создания нового экспериментального компонента
|
||||
- [ ] FE: Список экспериментальных компонентов со статусами
|
||||
- [ ] BE+FE: Полный smoke-тест всего брендбука (все роли, все страницы)
|
||||
- [ ] FE: LLM-блоки на всех страницах — проверка актуальности
|
||||
- [ ] FE: Мобильная адаптация — финальная проверка (1440 / 768 / 375px)
|
||||
- [ ] FE: Accessibility-аудит WCAG AA — особенно форма дублирования
|
||||
- [ ] Деплой BE: выбрать хостинг для NestJS + PostgreSQL (Railway / Render / VPS клиники)
|
||||
- [ ] Деплой: автоматический деплой через Gitea Actions → Vercel (push в `main`)
|
||||
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md`, `DEPLOY.md`
|
||||
|
||||
**Результат спринта:** Все страницы готовы, эксперименты — базовый функционал.
|
||||
### Текущий статус деплоя
|
||||
- **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby)
|
||||
- **Команда деплоя:** `cd apps/web && vercel --prod --yes`
|
||||
- **Бэкенд:** локально (Docker Compose), хостинг выбирается в Sprint 10
|
||||
|
||||
---
|
||||
|
||||
## Sprint 12 — Деплой, полировка, документация
|
||||
|
||||
**Цель:** Финальный релиз и публикация.
|
||||
|
||||
### Задачи
|
||||
- [ ] BE + FE: Полный smoke-тест всего брендбука
|
||||
- [ ] FE: Мобильная адаптация — финальная проверка всех страниц
|
||||
- [ ] FE: Accessibility-аудит (WCAG AA)
|
||||
- [ ] Деплой: настройка CI/CD, публикация на сервере
|
||||
- [ ] Docs: Создание `docs/deployment.md`
|
||||
- [ ] Docs: Обновление README.md финальными инструкциями
|
||||
- [ ] Design: Финальный ревью брендбука
|
||||
|
||||
**Результат спринта:** Брендбук задеплоен и доступен по URL.
|
||||
**Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, реальные данные, роли работают.
|
||||
|
||||
---
|
||||
|
||||
## Сводная таблица
|
||||
|
||||
| Спринт | Тема | Ключевой результат |
|
||||
|--------|---------------------------------------|-----------------------------------------|
|
||||
| 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова |
|
||||
| 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы |
|
||||
| 3 | Кнопки и форм-контролы | Базовые компоненты готовы |
|
||||
| 4 | Карточки | Все карточки задокументированы |
|
||||
| 5 | Hero и CEO-текст | Ключевые блоки страниц готовы |
|
||||
| 6 | Врачи | Блоки о врачах готовы |
|
||||
| 7 | Отзывы и новости | Контентные блоки готовы |
|
||||
| 8 | Формы и модальные окна | Все формы задокументированы |
|
||||
| 9 | Страницы: Главная, Заболевание | 2 страницы в брендбуке |
|
||||
| 10 | Страницы: Врачи, Цены | 3 страницы в брендбуке |
|
||||
| 11 | Контакты + Эксперименты MVP | Все страницы + система экспериментов |
|
||||
| 12 | Деплой и полировка | Брендбук живёт в продакшне |
|
||||
| Спринт | Тема | Слой | Суть |
|
||||
|--------|---------------------------------|---------------|--------------------------------------------------------|
|
||||
| 1 | Инициализация + Логотип | FE | PDF брендбука, первая страница |
|
||||
| 2 | Цвета, Типографика, Оффлайн | FE | PDF + Oracal каталог |
|
||||
| 3 | Кнопки и форм-контролы | FE | CSS реального сайта |
|
||||
| 4 | Карточки, бейджи, алерты | FE | CSS реального сайта |
|
||||
| 5 | ВСЕ блоки сайта | FE | Все блоки /lor, mock-данные |
|
||||
| 6 | Все страницы (сборки) | FE | Сборки из блоков, mock-данные |
|
||||
| 7 | Авторизация (viewer / editor) | BE + FE | JWT, роли, login-страница, шапка с именем |
|
||||
| 8 | Реальные данные | BE + FE | NestJS прокси → oclinica.ru, кэш 15 мин |
|
||||
| 9 | Эксперименты (дубли) | BE + FE | Duplicate button, форма атрибутов, статусы, раздел |
|
||||
| 10 | Финальная полировка | BE + FE | Smoke-тест, деплой бэкенда, адаптивность |
|
||||
|
||||
---
|
||||
|
||||
## Backlog (вне основных спринтов)
|
||||
|
||||
- Тёмная тема
|
||||
- Экспорт компонентов в Figma
|
||||
- Drag-and-drop конструктор страниц
|
||||
- История версий экспериментальных компонентов
|
||||
- Мультиязычность (если потребуется)
|
||||
- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
|
||||
- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
|
||||
- Тёмная тема — только если появится на реальном сайте
|
||||
- Мультиязычность — только если появится на реальном сайте
|
||||
|
||||
+46
-19
@@ -37,9 +37,10 @@
|
||||
| Краткое название | oclinica-brandbook |
|
||||
| Сайт клиники | https://oclinica.ru |
|
||||
| Тип системы | Веб-приложение (Living Styleguide) |
|
||||
| Режим работы | Локальная разработка + деплой на сервер |
|
||||
| Режим работы | Локальная разработка + Vercel (preview + production) |
|
||||
| Аудитория | Внутренние дизайнеры клиники, внешние подрядчики |
|
||||
| Хостинг | TBD — будет прописан отдельно |
|
||||
| Хостинг (фронтенд) | Vercel Hobby (бесплатно) — https://web-oclinica.vercel.app |
|
||||
| Хостинг (бэкенд + БД) | TBD — уточняется при переходе к Sprint 11 (экспериментальная секция) |
|
||||
|
||||
---
|
||||
|
||||
@@ -152,6 +153,17 @@
|
||||
- HTML-код компонента с кнопкой «Скопировать»
|
||||
- Краткое описание и правила применения
|
||||
|
||||
**ФТ-03-LLM.** На каждой странице брендбука, содержащей дизайн-стандарты (цвета, типографика,
|
||||
компоненты, блоки, страницы), должен присутствовать **LLM-блок** — свёрнутая или отдельная
|
||||
секция с машиночитаемым описанием стандарта для использования языковыми моделями при
|
||||
разработке дизайна, макетов, сайта и приложений. LLM-блок содержит:
|
||||
- Все токены и значения в табличном формате
|
||||
- Правила применения в формате «разрешено / запрещено»
|
||||
- Взаимосвязи с другими стандартами (ссылки на разделы)
|
||||
- Примеры корректного и некорректного использования
|
||||
|
||||
Сводный LLM-контекст всего брендбука хранится в файле: **`docs/LLM_CONTEXT.md`**
|
||||
|
||||
---
|
||||
|
||||
### 5.2 Раздел «Цвета»
|
||||
@@ -393,17 +405,18 @@
|
||||
|
||||
| Слой | Технология | Версия | Обоснование |
|
||||
|-------------------|-----------------------|----------|--------------------------------------------------|
|
||||
| Фронтенд | Next.js (App Router) | 15.x | SSR/SSG, оптимизация, экосистема React |
|
||||
| Бэкенд | NestJS | 10.x | Типизированный Node.js фреймворк, DI, модули |
|
||||
| Фронтенд | Next.js (App Router) | 16.x | SSR/SSG, оптимизация, экосистема React |
|
||||
| Бэкенд | NestJS | 11.x | Типизированный Node.js фреймворк, DI, модули |
|
||||
| База данных | PostgreSQL | 16.x | Надёжная реляционная БД, JSON-поля для атрибутов |
|
||||
| ORM | Prisma | 5.x | Type-safe запросы, миграции, seed |
|
||||
| Стилизация | CSS Modules | — | Изоляция стилей, нет рантайм-зависимостей |
|
||||
| ORM | Prisma | 7.x | Type-safe запросы, миграции, seed |
|
||||
| Стилизация | Tailwind CSS | 4.x | Utility-first, CSS-переменные, нет рантайм-overhead |
|
||||
| Дизайн-токены | CSS Custom Properties | — | Нативно поддерживается всеми браузерами |
|
||||
| Шрифт (бренд) | DINPro | — | Фирменный шрифт бренда, оффлайн-носители |
|
||||
| Шрифт (веб) | Fira Sans | — | Google Fonts, кириллица, веса 300 и 400, сайт |
|
||||
| Шрифт (веб) | Fira Sans | — | Google Fonts, кириллица, веса 300/400/500/600 |
|
||||
| Авторизация | JWT + httpOnly cookie | — | Безопасное хранение токена |
|
||||
| Пакетный менеджер | pnpm | 9.x | Monorepo workspaces, скорость |
|
||||
| Контейнеризация | Docker + Compose | — | Единообразное окружение dev/prod |
|
||||
| Пакетный менеджер | pnpm | 10.x | Monorepo workspaces, скорость |
|
||||
| Контейнеризация | Docker + Compose | — | Единообразное окружение локальной разработки |
|
||||
| Хостинг фронтенда | Vercel | — | Нативная поддержка Next.js, бесплатный Hobby-план |
|
||||
|
||||
---
|
||||
|
||||
@@ -480,16 +493,29 @@ oclinica-brandbook/
|
||||
| Docker | >= 24 |
|
||||
| Docker Compose | >= 2 |
|
||||
|
||||
### 12.2 Production-сервер
|
||||
### 12.2 Деплой фронтенда (Vercel)
|
||||
|
||||
> TBD — параметры хостинга будут прописаны отдельно.
|
||||
Фронтенд (`apps/web`) деплоится на Vercel Hobby (бесплатно).
|
||||
|
||||
Минимальные ожидаемые требования:
|
||||
- ОС: Ubuntu 22.04+
|
||||
- RAM: 2 GB
|
||||
- Disk: 20 GB
|
||||
- PostgreSQL 16 (или managed database)
|
||||
- Node.js 20 LTS
|
||||
**Production URL:** https://web-oclinica.vercel.app
|
||||
|
||||
**Команда деплоя** (из директории `apps/web`):
|
||||
```bash
|
||||
vercel --prod --yes
|
||||
```
|
||||
|
||||
**Требования:**
|
||||
- Vercel CLI установлен глобально: `npm install -g vercel`
|
||||
- Выполнен `vercel login` (однократно)
|
||||
|
||||
**Деплой занимает ~30 секунд.** После команды изменения сразу доступны по production URL.
|
||||
|
||||
### 12.3 Бэкенд и база данных
|
||||
|
||||
> TBD — параметры хостинга бэкенда (NestJS + PostgreSQL) будут определены к Sprint 11,
|
||||
> когда потребуется работающий API для экспериментальной секции.
|
||||
|
||||
Варианты для рассмотрения: Railway, Render, VPS клиники.
|
||||
|
||||
---
|
||||
|
||||
@@ -511,11 +537,12 @@ oclinica-brandbook/
|
||||
| № | Вопрос | Ответственный | Срок |
|
||||
|----|--------------------------------------------------------------------------------------|---------------|----------|
|
||||
| ОВ-01 | Доступен ли JSON API или REST API на oclinica.ru? Каков формат ответов? | Клиника | Sprint 1 |
|
||||
| ОВ-02 | Параметры хостинга для production-деплоя | Клиника | TBD |
|
||||
| ОВ-02 | ~~Параметры хостинга для production-деплоя~~ **Закрыт:** фронтенд — Vercel Hobby (https://web-oclinica.vercel.app); бэкенд — TBD к Sprint 11 | — | Частично закрыт |
|
||||
| ОВ-03 | Нужна ли страница «Заболевание» как отдельный тип, или это подвид страницы «Услуга»? | Клиника | Sprint 9 |
|
||||
| ОВ-04 | Список иконок — какую стороннюю библиотеку утвердить? (Lucide, Heroicons, и др.) | Совместно | Sprint 2 |
|
||||
| ОВ-05 | ~~Нужен ли раздел «Логотип» в v1.0 или ждём вектор?~~ **Закрыт:** страница логотипа реализуется в Sprint 1 с PNG-версией; вектор будет добавлен позже | — | Закрыт |
|
||||
| ОВ-06 | HEX-эквиваленты цветов Oracal (053M, 073M, 066M, 050M, 081M, 080M) для использования в токенах | Совместно | Sprint 2 |
|
||||
| ОВ-06 | ~~HEX-эквиваленты цветов Oracal~~ **Закрыт:** приблизительные HEX зафиксированы в Sprint 2 (053M=#7ecfca, 073M=#5b7b87, 066M=#5bb5ad, 050M=#1b4c72, 081M=#c4a882, 080M=#5c2e0e). Дополнительно — реальные цвета сайта извлечены из CSS (см. ОВ-07). Точная калибровка Oracal — при получении физических образцов. | — | Закрыт |
|
||||
| ОВ-07 | **Цвета сайта oclinica.ru** — CSS тема Drupal доступна по адресу: `https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css`. Тема: `clinic_bootstrap_mobile`. Ключевые цвета извлечены парсингом (python + regex + Counter), 2026-03-22. Добавлены в раздел «Цвета с сайта» в брендбуке (`/foundation/colors`). Расхождение с Oracal-палитрой ожидаемо — цифровые адаптации под экран. | — | Закрыт |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user