From fcbe32064b0d121cd82473d3df67f871cf2e56e5 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Wed, 8 Jul 2026 07:47:45 +0000 Subject: [PATCH] =?UTF-8?q?design:=20corporate=20MVP=20redesign=20?= =?UTF-8?q?=E2=80=94=20clean=20login,=20table,=20mobile,=20demo=20badges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 278 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 187 insertions(+), 91 deletions(-) diff --git a/index.html b/index.html index 8ae94f3..33ecc30 100644 --- a/index.html +++ b/index.html @@ -5,106 +5,201 @@ QAZAQtelecom HSE — План ПБ 2026 +.chat-q button{padding:6px 12px;border:1px solid #E2E8F0;border-radius:100px;font-size:11px;background:#fff;cursor:pointer;color:#334155;transition:all .15s} +.chat-q button:hover{background:#3b82f6;color:#fff;border-color:#3b82f6} -#toast{position:fixed;top:20px;right:20px;z-index:9999;background:#2E7D32;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.2);display:none;transition:opacity 0.3s} +/* RANK BAR */ +.rank-bar{height:6px;border-radius:3px;background:#E2E8F0;overflow:hidden;margin-top:4px} +.rank-bar>div{height:100%;border-radius:3px;transition:width .35s ease} + +/* SUB ITEMS */ +.sub-row{font-size:12px;color:#64748B;cursor:pointer;user-select:none} +.sub-row:hover{color:#0284c7}.sub-row .arr{display:inline-block;width:16px;text-align:center} +.sub-items{padding-left:24px}.sub-item{font-size:12px;padding:5px 0;border-bottom:1px solid #f8fafc}.sub-item:last-child{border:none} + +/* MODAL */ +.mod-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,.55);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)} +.mod-box{background:#fff;border-radius:12px;padding:28px;max-width:750px;width:92vw;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2)} + +/* FILE ITEM */ +.file-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#F8FAFC;border-radius:6px;margin:4px 0;border:1px solid #EDEEF1;flex-wrap:wrap} +.file-item .fn{font-size:12px;flex:1;min-width:80px}.file-item .fs{font-size:10px;color:#94a3b8}.file-item a{font-size:11.5px;color:#0284c7;cursor:pointer;font-weight:500} +.file-item a:hover{text-decoration:underline} + +/* STORAGE INDICATOR */ +.stor-bar{font-size:11px;color:#94a3b8;padding:4px 0;display:flex;align-items:center;gap:4px} + +/* TOAST */ +#toast{position:fixed;top:20px;right:20px;z-index:9999;background:#059669;color:#fff;padding:12px 24px;border-radius:8px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;transition:opacity .3s,transform .3s;transform:translateX(0)} + +/* ACTION BUTTONS IN TABLE */ +.act-btn{padding:4px 10px;font-size:11px;border-radius:5px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:3px} +.act-btn-edit{background:#EFF6FF;color:#2563eb;border-color:#BFDBFE}.act-btn-edit:hover{background:#dbeafe} +.act-btn-open{background:#F8FAFC;color:#475569;border-color:#E2E8F0}.act-btn-open:hover{background:#f1f5f9} +.act-group{display:inline-flex;gap:4px} + +/* DEMO NOTICE */ +.demo-note{background:#fefce8;border:1px solid #fde047;border-radius:6px;padding:8px 12px;font-size:11.5px;color:#854d0e;display:flex;align-items:start;gap:8px;margin-bottom:14px;line-height:1.45} +.demo-note::before{content:"ℹ";flex-shrink:0;width:18px;height:18px;background:#facc15;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#713f12} + +/* MOBILE RESPONSIVE */ +@media(max-width:900px){ + #sidebar{width:64px} + #sidebar .logo span,#sidebar a span,#sidebar .user{display:none} + #sidebar .logo{justify-content:center;padding:16px 8px;font-size:13px} + #sidebar a{justify-content:center;padding:12px 8px;border-left:none} + #sidebar a.active{border-left:none;background:rgba(59,130,246,.15);border-radius:0 8px 8px 0} + #main{margin-left:64px;padding:16px} + .top{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:12px} + .top-actions{width:100%} + .fr{flex-direction:column;align-items:stretch} + .fr input{min-width:0;width:100%} + .card{overflow-x:visible} + table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} + .sec-h{display:block;text-align:center;margin:12px 0 6px} + .stat-grid{grid-template-columns:repeat(2,1fr);gap:8px} + .mod-box{width:96vw;padding:20px} +} +@media(max-width:520px){ + #sidebar{width:0;transform:translateX(-100%);transition:transform .25s} + #sidebar.open{width:240px;transform:translateX(0)} + #main{margin-left:0;padding:12px} + .mobile-header{display:flex!important;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid #E2E8F0;position:sticky;top:0;z-index:99} + .mobile-menu-btn{display:flex!important;padding:8px;border:none;background:none;font-size:20px;cursor:pointer;color:#334155} + .stat-grid{grid-template-columns:1fr 1fr} +} +.mobile-header{display:none} +.mobile-menu-btn{display:none} +
+Демо-режим / MVP

QAZAQtelecom HSE

План производственной безопасности 2026

- - + +
+
+ +QAZAQtelecom HSE + +

Мероприятия

-
+
- - + +
@@ -204,6 +299,7 @@ th:nth-child(6){min-width:110px;text-align:center}