diff --git a/apps/web/app/foundation/colors/page.tsx b/apps/web/app/foundation/colors/page.tsx index 131b755..6415516 100644 --- a/apps/web/app/foundation/colors/page.tsx +++ b/apps/web/app/foundation/colors/page.tsx @@ -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() { - {/* 4. Применение */} + {/* 4. Соответствие */} +
+
+

+ Соответствие: Oracal → Сайт +

+

+ Сравнение фирменной палитры (Oracal, брендбук) с реальными цветами, применёнными на сайте. + Расхождения ожидаемы — цифровая адаптация плёночных цветов под экран. +

+
+
+ {COLOR_MAPPING.map((row, i) => ( +
+ {/* Левая сторона — Oracal */} +
+ {row.brand ? ( + <> +
+
+

+ {row.brand.hex.toUpperCase()} +

+

+ Oracal {row.brand.oracal} +

+
+ + ) : ( +
+ — +
+ )} +
+ + {/* Стрелка */} +
+ + {/* Правая сторона — Сайт */} +
+ {row.web ? ( + <> +
+
+

+ {row.web.hex.toUpperCase()} +

+

+ {row.web.name} · ×{row.web.count} +

+
+ + ) : ( +
+
+ — +
+

Нет на сайте

+
+ )} +
+ + {/* Примечание */} +

+ {row.note} +

+
+ ))} +
+
+ + {/* 5. Применение */}