Revert "feat: 3 color themes (green/gray/dark) + switcher in header"

This reverts commit 7be9b4e14b.
This commit is contained in:
wasrusgen 2026-05-31 19:45:38 +03:00
parent 7be9b4e14b
commit 1a1dd83cbb

View File

@ -9,23 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet"> <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> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} *,*::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;--icon-grad:linear-gradient(135deg,var(--dark),var(--primary));--num-shadow:rgba(4,120,87,.4);--sb-active:rgba(4,120,87,.14)} :root{--primary:#047857;--dark:#064E3B;--mid:#10B981;--light:#ECFDF5;--sb:#0F0F1A;--bg:#F5F6F8;--white:#fff;--border:#E5E7EB;--text:#1A1A2E;--muted:#6B7280;--subtle:#F9FAFB}
/* ── Тема: Серый + тёмные иконки с градиентом ── */
[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} html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
/* Header */ /* Header */
@ -47,11 +31,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} .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{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:hover:not(.locked){background:rgba(255,255,255,.04)}
.si.active{background:var(--sb-active);border-left-color:var(--mid)} .si.active{background:rgba(4,120,87,.14);border-left-color:var(--primary)}
.si.locked{opacity:.4;cursor:default} .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-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.done .si-num{background:rgba(16,185,129,.15);color:var(--mid);font-size:14px}
.si.active .si-num{background:var(--icon-grad);color:#fff;box-shadow:0 4px 10px var(--num-shadow)} .si.active .si-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.4)}
.si:not(.active):not(.done) .si-num{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)} .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.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} .si-body{flex:1;min-width:0}
@ -195,7 +179,6 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
<div class="hdr-ic">@</div> <div class="hdr-ic">@</div>
<div class="hdr-t">wasrusgen1<span class="hdr-sep"></span><b>КОНСАЛТИНГ</b></div> <div class="hdr-t">wasrusgen1<span class="hdr-sep"></span><b>КОНСАЛТИНГ</b></div>
<div class="hdr-client" id="hdrClient"></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> <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> </header>
<div class="pay-banner" id="payBanner"><span>💳 К оплате: <b id="payAmount"></b></span><button class="pay-btn" onclick="showPayModal()">Оплатить →</button></div> <div class="pay-banner" id="payBanner"><span>💳 К оплате: <b id="payAmount"></b></span><button class="pay-btn" onclick="showPayModal()">Оплатить →</button></div>
@ -590,17 +573,6 @@ function renderSpec(s){let h=`<div class="spec-h"><span class="pl">A</span>Об
return h} return h}
inp.addEventListener("input",()=>{inp.style.height="auto";inp.style.height=Math.min(inp.scrollHeight,120)+"px"}); 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(); init();
</script> </script>
</body> </body>