feat(colors): блок соответствия Oracal → Сайт
Визуальное сравнение фирменной палитры с реальными цветами сайта: - 4 пары с соответствием (053M↔#63bac3, 073M↔#60959c, 066M↔#52b4bd, 081M↔#bf9975) - 2 Oracal-цвета без аналога на сайте (050M, 080M) - 3 цвета только сайта без Oracal-кода (текст #464646, серый #949290, крем #e9e4d4) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -102,6 +102,55 @@ const BRAND_COLORS = [
|
||||
},
|
||||
];
|
||||
|
||||
/* ─── Соответствие цветов ──────────────────────────────────────────── */
|
||||
const COLOR_MAPPING = [
|
||||
{
|
||||
brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#7ecfca" },
|
||||
web: { name: "Бирюзовый", hex: "#63bac3", count: 4 },
|
||||
note: "Чуть темнее и насыщеннее на сайте",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#5b7b87" },
|
||||
web: { name: "Серо-бирюзовый", hex: "#60959c", count: 7 },
|
||||
note: "Светлее на сайте",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#5bb5ad" },
|
||||
web: { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 },
|
||||
note: "Смещён в синеву",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "081M", name: "Бежевый", hex: "#c4a882" },
|
||||
web: { name: "Бежевый", hex: "#bf9975", count: 12 },
|
||||
note: "Темнее и насыщеннее на сайте",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b4c72" },
|
||||
web: null,
|
||||
note: "Не найден в CSS сайта",
|
||||
},
|
||||
{
|
||||
brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#5c2e0e" },
|
||||
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: "Кремовый фон", hex: "#e9e4d4", count: 1 },
|
||||
note: "Только на сайте — нет Oracal-аналога",
|
||||
},
|
||||
];
|
||||
|
||||
/* ─── Цвета с сайта ────────────────────────────────────────────────── */
|
||||
// Источник: https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
|
||||
// Извлечены парсингом CSS: grep + python Counter по property/value, 2026-03-22
|
||||
@@ -437,7 +486,94 @@ export default function ColorsPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Применение */}
|
||||
{/* 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-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
|
||||
Reference in New Issue
Block a user