feat(sprint3): кнопки, форм-контролы, LLM-блоки — Sprint 3 v0.3.0

- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled)
- components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API)
- components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb)
- globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin
- app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок)
- app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок)
- foundation/logo/page.tsx — добавлен LLM-блок v1.0
- Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0
- docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
2026-03-22 20:20:41 +05:00
parent 0198947c4e
commit 0855892643
9 changed files with 1428 additions and 6 deletions
+88
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import Image from "next/image";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
export const metadata: Metadata = {
title: "Логотип. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -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">
@@ -390,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>
);
}