feat(sprint-2): цвета, типографика, оффлайн элементы
Страницы фундамента: - /foundation/colors — палитра 7 цветов, HEX/RGB/HSL/CSS-var с копированием, WCAG-контраст 7 пар, экспорт JSON-токенов - /foundation/typography — DINPro (оффлайн) + Fira Sans (веб), шкалы, таблица применения, живой пример Оффлайн элементы (5 страниц): - /offline/uniform — схема формы, таблица размеров логотипа - /offline/badges — макеты бейджей 70×30 мм (светлый/тёмный) - /offline/navigation — 4 шаблона табличек, цвета Oracal - /offline/transport — CSS-макет трамвая, трёхполосная схема - /offline/print — макеты визитки и листовки А5, Telegram-бот Sidebar: убраны «скоро» для Цветов, Типографики, всех Оффлайн Версия: Sprint 2 · v0.2.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,273 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Бейджи | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section 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 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">
|
||||
|
||||
{/* Заголовок */}
|
||||
<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)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.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)" }}>
|
||||
Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
|
||||
Два цветовых варианта в зависимости от должности.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Размеры и технические требования */}
|
||||
<Section
|
||||
title="Технические параметры"
|
||||
subtitle="Единый стандарт для всех сотрудников клиники."
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6"
|
||||
>
|
||||
{[
|
||||
{ label: "Ширина", value: "70 мм" },
|
||||
{ label: "Высота", value: "30 мм" },
|
||||
{ label: "Материал", value: "ПВХ / металл" },
|
||||
{ label: "Крепление", value: "Булавка / клипса" },
|
||||
].map(({ label, value }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="rounded-xl border p-4 text-center"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<p className="font-mono text-lg font-semibold" style={{ color: "var(--brand-073m)" }}>
|
||||
{value}
|
||||
</p>
|
||||
<p className="text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</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."
|
||||
>
|
||||
<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)" }}>
|
||||
{["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-5 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
|
||||
["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
|
||||
["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
|
||||
["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
|
||||
].map(([el, content, font, pos]) => (
|
||||
<tr
|
||||
key={el}
|
||||
className="border-t"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<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>
|
||||
</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)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
|
||||
style={{ background: item.color }}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{item.variant}
|
||||
</p>
|
||||
<p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{item.usage}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user