From 6648f16bcb2ab17afd61f3bb49ed904cbdf22867 Mon Sep 17 00:00:00 2001
From: AR 15 M4 <alekseyrazorvinm4@MacBook-Air-AR.local>
Date: Sun, 22 Mar 2026 19:34:04 +0500
Subject: [PATCH] =?UTF-8?q?feat(colors):=20=D0=B1=D0=BB=D0=BE=D0=BA=20?=
 =?UTF-8?q?=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2?=
 =?UTF-8?q?=D0=B8=D1=8F=20Oracal=20=E2=86=92=20=D0=A1=D0=B0=D0=B9=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Визуальное сравнение фирменной палитры с реальными цветами сайта:
- 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>
---
 apps/web/app/foundation/colors/page.tsx | 138 +++++++++++++++++++++++-
 1 file changed, 137 insertions(+), 1 deletion(-)

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() {
         </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)" }}>