From 7be9b4e14ba7afbb16123c7345c6ece8343c7700 Mon Sep 17 00:00:00 2001
From: wasrusgen <vasrusgen@gmail.com>
Date: Sun, 31 May 2026 19:36:57 +0300
Subject: [PATCH] feat: 3 color themes (green/gray/dark) + switcher in header

---
 docs/cabinet.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/docs/cabinet.html b/docs/cabinet.html
index 29d1849..8019535 100644
--- a/docs/cabinet.html
+++ b/docs/cabinet.html
@@ -9,7 +9,23 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-:root{--primary:#047857;--dark:#064E3B;--mid:#10B981;--light:#ECFDF5;--sb:#0F0F1A;--bg:#F5F6F8;--white:#fff;--border:#E5E7EB;--text:#1A1A2E;--muted:#6B7280;--subtle:#F9FAFB}
+:root{--primary:#047857;--dark:#064E3B;--mid:#10B981;--light:#ECFDF5;--sb:#0F0F1A;--bg:#F5F6F8;--white:#fff;--border:#E5E7EB;--text:#1A1A2E;--muted:#6B7280;--subtle:#F9FAFB;--icon-grad:linear-gradient(135deg,var(--dark),var(--primary));--num-shadow:rgba(4,120,87,.4);--sb-active:rgba(4,120,87,.14)}
+/* ── Тема: Серый + тёмные иконки с градиентом ── */
+[data-theme="gray"]{--primary:#312E81;--dark:#1E1B4B;--mid:#6366F1;--light:#EEF2FF;--bg:#E8EBF0;--subtle:#F1F3F8;--border:#CDD0D8;--icon-grad:linear-gradient(135deg,#1E1B4B,#6366F1);--num-shadow:rgba(99,102,241,.4);--sb-active:rgba(99,102,241,.13);--sb:#18193A}
+/* ── Тема: Тёмная ── */
+[data-theme="dark"]{--primary:#10B981;--dark:#047857;--mid:#34D399;--light:rgba(16,185,129,.12);--bg:#111827;--white:#1E2737;--border:#2D3A4A;--text:#F1F5F9;--muted:#9CA3AF;--subtle:#1A2535;--icon-grad:linear-gradient(135deg,#047857,#10B981);--num-shadow:rgba(16,185,129,.4);--sb-active:rgba(16,185,129,.13);--sb:#0D1120}
+/* Тёмная: скроллбар, инпуты */
+[data-theme="dark"] .inp,[data-theme="dark"] .pf-i,[data-theme="dark"] .pf-t{background:var(--subtle);color:var(--text);border-color:var(--border)}
+[data-theme="dark"] .inp::placeholder,[data-theme="dark"] .pf-i::placeholder,[data-theme="dark"] .pf-t::placeholder{color:#4B5563}
+[data-theme="dark"] .modal{background:#1E2737;color:var(--text)}
+[data-theme="dark"] #docText{color:#CBD5E1}
+/* Switcher */
+.theme-sw{display:flex;align-items:center;gap:5px;margin-right:10px}
+.th-btn{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0}
+.th-btn.active{border-color:rgba(255,255,255,.75);transform:scale(1.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
+.th-btn.th-green{background:#047857}
+.th-btn.th-gray{background:linear-gradient(135deg,#1E1B4B,#6366F1)}
+.th-btn.th-dark{background:#0D1120;border-color:rgba(255,255,255,.2)}
 html,body{height:100%;overflow:hidden}
 body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
 /* Header */
@@ -31,11 +47,11 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
 .sb-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:10px 18px 6px}
 .si{display:flex;align-items:flex-start;gap:11px;padding:10px 18px;cursor:pointer;border-left:2px solid transparent;transition:background .12s}
 .si:hover:not(.locked){background:rgba(255,255,255,.04)}
-.si.active{background:rgba(4,120,87,.14);border-left-color:var(--primary)}
+.si.active{background:var(--sb-active);border-left-color:var(--mid)}
 .si.locked{opacity:.4;cursor:default}
 .si-num{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
 .si.done .si-num{background:rgba(16,185,129,.15);color:var(--mid);font-size:14px}
-.si.active .si-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.4)}
+.si.active .si-num{background:var(--icon-grad);color:#fff;box-shadow:0 4px 10px var(--num-shadow)}
 .si:not(.active):not(.done) .si-num{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
 .si.locked .si-num{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);font-size:11px}
 .si-body{flex:1;min-width:0}
@@ -179,6 +195,7 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
   <div class="hdr-ic">@</div>
   <div class="hdr-t">wasrusgen1<span class="hdr-sep"></span><b>КОНСАЛТИНГ</b></div>
   <div class="hdr-client" id="hdrClient"></div>
+  <div class="theme-sw"><button class="th-btn th-green" onclick="setTheme('green')" title="Зелёный"></button><button class="th-btn th-gray" onclick="setTheme('gray')" title="Серый"></button><button class="th-btn th-dark" onclick="setTheme('dark')" title="Тёмный"></button></div>
   <div class="hdr-r"><div class="elena-chip"><div class="elena-av">Е</div><div class="elena-nm">Елена</div><div class="elena-dot"></div></div></div>
 </header>
 <div class="pay-banner" id="payBanner"><span>💳 К оплате: <b id="payAmount"></b></span><button class="pay-btn" onclick="showPayModal()">Оплатить →</button></div>
@@ -573,6 +590,17 @@ function renderSpec(s){let h=`<div class="spec-h"><span class="pl">A</span>Об
   return h}
 
 inp.addEventListener("input",()=>{inp.style.height="auto";inp.style.height=Math.min(inp.scrollHeight,120)+"px"});
+
+/* ── Темы ── */
+function setTheme(t){
+  document.documentElement.setAttribute('data-theme',t);
+  localStorage.setItem('cab_theme',t);
+  document.querySelectorAll('.th-btn').forEach(b=>b.classList.remove('active'));
+  const btn=document.querySelector('.th-'+t);
+  if(btn)btn.classList.add('active');
+}
+(function(){const t=localStorage.getItem('cab_theme')||'green';setTheme(t);})();
+
 init();
 </script>
 </body>