wasrusgen/wasrusgen1-crm
1
0
Fork 0
mirror of https://github.com/wasrusgen/wasrusgen1-crm.git synced 2026-06-03 16:44:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: demo bar — home white, done green, active accent, overdue red badges

Browse Source
This commit is contained in:
wasrusgen 2026-05-29 16:31:56 +03:00
parent a7cccfad9a
commit d3b0b47af3
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/mockup_cabinet.html
View File

@ -450,8 +450,22 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
/* Demo */ /* Demo */
.demo{background:#0F0F1A;border-top:1px solid rgba(255,255,255,.06);padding:7px 18px;display:flex;align-items:center;gap:7px;flex-shrink:0} .demo{background:#0F0F1A;border-top:1px solid rgba(255,255,255,.06);padding:7px 18px;display:flex;align-items:center;gap:7px;flex-shrink:0}
.demo-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.25);margin-right:2px} .demo-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.25);margin-right:2px}
.db{padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.4);cursor:pointer;font-family:'Inter',sans-serif;transition:all .12s} .db{padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.35);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;position:relative}
.db:hover,.db.on{background:var(--primary);border-color:var(--primary);color:#fff} /* HOME — всегда белый */
.db.db-home{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.9);color:#0F0F1A;font-weight:700}
.db.db-home:hover{background:#fff}
.db.db-home.on{background:#fff;border-color:#fff;color:#0F0F1A}
/* Пройден — зелёный тинт */
.db.db-done{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.28);color:#10B981}
.db.db-done:hover{background:rgba(16,185,129,.2)}
.db.db-done.on{background:rgba(16,185,129,.22);border-color:#10B981;color:#10B981}
/* Начат / активен — primary accent */
.db.db-active{background:rgba(4,120,87,.22);border-color:rgba(4,120,87,.45);color:#6EE7B7}
.db.db-active:hover{background:rgba(4,120,87,.32)}
.db.db-active.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* Locked — остаётся дефолтным серым, без изменений */
/* Overdue badge */
.db[data-overdue]::after{content:attr(data-overdue);position:absolute;top:-7px;right:-7px;background:#EF4444;color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:8px;line-height:1.5;white-space:nowrap;border:1.5px solid #0F0F1A}
</style> </style>
</head> </head>
<body> <body>
@ -1527,10 +1541,10 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
<!-- Demo --> <!-- Demo -->
<div class="demo"> <div class="demo">
<span class="demo-lbl">Демо</span> <span class="demo-lbl">Демо</span>
<button class="db on" id="db0" onclick="go(0)">Обзор</button> <button class="db db-home on" id="db0" onclick="go(0)">⊞ Обзор</button>
<button class="db" id="db1" onclick="go(1)">Этап 1</button> <button class="db db-done" id="db1" onclick="go(1)">Этап 1 ✓</button>
<button class="db" id="db2" onclick="go(2)">Этап 2</button> <button class="db db-active" id="db2" onclick="go(2)" data-overdue="4 дн">Этап 2</button>
<button class="db" id="db3" onclick="go(3)">Этап 3</button> <button class="db db-active" id="db3" onclick="go(3)" data-overdue="2 дн">Этап 3</button>
<button class="db" id="db4" onclick="go(4)">Этап 4</button> <button class="db" id="db4" onclick="go(4)">Этап 4</button>
<button class="db" id="db5" onclick="go(5)">Этап 5</button> <button class="db" id="db5" onclick="go(5)">Этап 5</button>
</div> </div>
@ -1548,7 +1562,11 @@ function go(n){
const si=document.getElementById('si'+i); const si=document.getElementById('si'+i);
if(si) si.classList.remove('active'); if(si) si.classList.remove('active');
const db=document.getElementById('db'+i); const db=document.getElementById('db'+i);
if(db) db.classList.toggle('on',i===n); if(db){
db.classList.toggle('on',i===n);
// HOME button keeps white regardless
if(i===0) db.classList.add('db-home');
}
} }
const sv=document.getElementById('sv'+n); const sv=document.getElementById('sv'+n);
if(sv) sv.style.display='flex'; if(sv) sv.style.display='flex';