design: corporate MVP redesign — clean login, table, mobile, demo badges
This commit is contained in:
parent
c45ce0edb5
commit
fcbe32064b
278
index.html
278
index.html
@ -5,106 +5,201 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>QAZAQtelecom HSE — План ПБ 2026</title>
|
<title>QAZAQtelecom HSE — План ПБ 2026</title>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
body{font:14px/1.4 Arial,sans-serif;background:#F4F6F9;color:#1A1A2E;min-height:100vh}
|
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F4F6F9;color:#1A1A2E;min-height:100vh}
|
||||||
input,select,textarea,button{font:inherit;outline:none}
|
input,select,textarea,button{font:inherit;outline:none;border-radius:6px;transition:border .15s,box-shadow .15s}
|
||||||
.btn{background:#005BAA;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer;display:inline-block;text-align:center;transition:all 0.2s}.btn:hover{background:#004B8C;box-shadow:0 2px 8px rgba(0,91,170,0.3)}
|
.btn{background:#005BAA;color:#fff;padding:9px 20px;border-radius:6px;font-weight:600;font-size:13px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .18s;white-space:nowrap;line-height:1.3}
|
||||||
.btn-sm{padding:7px 16px;font-size:12px}.btn-r{background:#E53935;color:#fff}.btn-g{background:#2E7D32;color:#fff}.btn-o{background:#F57C00;color:#fff}
|
.btn:hover{background:#004a8f;box-shadow:0 2px 8px rgba(0,91,170,.25)}
|
||||||
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#003D73,#005BAA,#0077CC)}
|
.btn:active{transform:scale(.97)}
|
||||||
#login>div{background:#fff;border-radius:16px;padding:40px;width:400px;max-width:90vw;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.15)}
|
.btn-sm{padding:5px 12px;font-size:11.5px;border-radius:5px}
|
||||||
#login h1{font-size:22px;font-weight:800;margin-bottom:4px}#login h1 span{color:#005BAA}
|
.btn-r{background:#DC2626;color:#fff}.btn-r:hover{background:#b91c1c}
|
||||||
#login>div>p{color:#64748B;font-size:13px;margin-bottom:24px}
|
.btn-g{background:#16A34A;color:#fff}.btn-g:hover{background:#15803d}
|
||||||
#login input{display:block;width:100%;padding:12px;border:2px solid #E2E8F0;border-radius:10px;font-size:14px;margin-bottom:12px;transition:border 0.2s}
|
.btn-o{background:#D97706;color:#fff}.btn-o:hover{background:#b45309}
|
||||||
#login input:focus{border-color:#005BAA}
|
.btn-ghost{background:#F1F5F9;color:#334155;border:1px solid #E2E8F0}.btn-ghost:hover{background:#E2E8F0}
|
||||||
|
|
||||||
|
/* LOGIN */
|
||||||
|
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);padding:20px}
|
||||||
|
#login>div{background:#fff;border-radius:12px;padding:36px 40px;width:400px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.05) inset}
|
||||||
|
#login h1{font-size:20px;font-weight:700;margin-bottom:2px;letter-spacing:-.3px}
|
||||||
|
#login h1 span{color:#005BAA}
|
||||||
|
#login .demo-badge{display:inline-block;background:#EFF6FF;color:#1d4ed8;font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px;margin-bottom:18px;border:1px solid #BFDBFE}
|
||||||
|
#login>div>p{color:#64748B;font-size:13px;margin-bottom:22px;line-height:1.45}
|
||||||
|
#login input{display:block;width:100%;padding:11px 14px;border:1.5px solid #E2E8F0;border-radius:8px;font-size:14px;margin-bottom:10px;background:#FAFBFC;transition:border-color .2s,box-shadow .2s}
|
||||||
|
#login input:focus{border-color:#005BAA;box-shadow:0 0 0 3px rgba(0,91,170,.1);background:#fff}
|
||||||
|
#login input::placeholder{color:#94A3B8}
|
||||||
|
|
||||||
|
/* APP */
|
||||||
#app{display:none;min-height:100vh}
|
#app{display:none;min-height:100vh}
|
||||||
#sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:#0A1628;color:#fff;z-index:100;overflow-y:auto;box-shadow:2px 0 12px rgba(0,0,0,0.1)}
|
|
||||||
#sidebar .logo{padding:20px 16px 12px;font-size:16px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px}
|
/* SIDEBAR */
|
||||||
#sidebar .logo span{color:#005BAA}
|
#sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:#0f172a;color:#fff;z-index:100;overflow-y:auto;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.12)}
|
||||||
#sidebar .user{font-size:11px;color:#94A3B8;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
|
#sidebar .logo{padding:18px 18px 14px;font-size:15px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;letter-spacing:-.2px}
|
||||||
#sidebar a{display:block;padding:12px 16px;color:#CBD5E1;text-decoration:none;font-size:13px;cursor:pointer;border-left:3px solid transparent;transition:all 0.15s}
|
#sidebar .logo span{color:#60a5fa;font-weight:700}
|
||||||
#sidebar a:hover{background:rgba(0,91,170,.1);color:#fff}
|
#sidebar .user{font-size:11.5px;color:#94A3B8;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.4}
|
||||||
#sidebar a.active{background:rgba(0,91,170,.2);color:#005BAA;border-left-color:#005BAA;font-weight:600}
|
#sidebar nav{flex:1;padding:8px 0}
|
||||||
#sidebar .logout{position:absolute;bottom:16px;left:16px;right:16px}
|
#sidebar a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#94a3b8;text-decoration:none;font-size:13px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;margin:1px 0}
|
||||||
#main{margin-left:220px;padding:24px;min-height:100vh}
|
#sidebar a:hover{background:rgba(59,130,246,.08);color:#e2e8f0}
|
||||||
.top{display:flex;justify-content:space-between;align-items:center;padding:0 0 16px;border-bottom:2px solid #E2E8F0;margin-bottom:20px}
|
#sidebar a.active{background:rgba(59,130,246,.12);color:#60a5fa;border-left-color:#3b82f6;font-weight:600}
|
||||||
.top h2{font-size:20px;font-weight:700}
|
#sidebar .logout{padding:12px 18px;border-top:1px solid rgba(255,255,255,.06)}
|
||||||
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;border:1px solid #E8ECF1;overflow-x:auto;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
|
|
||||||
.card h3{font-size:16px;font-weight:700;margin-bottom:12px}
|
/* MAIN */
|
||||||
table{width:100%;border-collapse:collapse}
|
#main{margin-left:230px;padding:24px 28px;min-height:100vh;max-width:1600px}
|
||||||
th,td{padding:10px 14px;font-size:13px;text-align:left;border-bottom:1px solid #E2E8F0;vertical-align:top}
|
.top{display:flex;justify-content:space-between;align-items:center;padding:0 0 14px;border-bottom:1px solid #E2E8F0;margin-bottom:18px;flex-wrap:wrap;gap:10px}
|
||||||
th{background:#F1F5F9;font-weight:600;font-size:11px;text-transform:uppercase;color:#64748B;white-space:nowrap;position:sticky;top:0;z-index:2}
|
.top h2{font-size:18px;font-weight:700;color:#0f172a;letter-spacing:-.3px}
|
||||||
tr:hover{background:#F8FAFC}
|
.top-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
|
||||||
tr:nth-child(even){background:#FAFBFC}
|
|
||||||
tr:nth-child(even):hover{background:#F0F4F8}
|
/* CARDS */
|
||||||
th:nth-child(2){min-width:300px}
|
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:14px;border:1px solid #E2E8F0;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,.04)}
|
||||||
th:nth-child(3){min-width:140px}
|
.card h3{font-size:14px;font-weight:600;margin-bottom:12px;color:#1e293b}
|
||||||
th:nth-child(4){min-width:100px}
|
|
||||||
th:nth-child(5){min-width:90px}
|
/* TABLE */
|
||||||
th:nth-child(6){min-width:110px;text-align:center}
|
table{width:100%;border-collapse:collapse;font-size:13px}
|
||||||
.badge{display:inline-block;padding:3px 8px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap}
|
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #EEF2F7;vertical-align:middle}
|
||||||
.badge.g{background:#E8F5E9;color:#2E7D32}.badge.a{background:#FFF3E0;color:#E65100}.badge.r{background:#FFEBEE;color:#C62828}.badge.b{background:#E3F2FD;color:#1565C0}.badge.w{background:#F5F5F5;color:#757575}
|
th{background:#F8FAFC;font-weight:600;font-size:11px;text-transform:uppercase;color:#64748B;white-space:nowrap;letter-spacing:.3px;position:sticky;top:0;z-index:2;padding:10px 12px;border-bottom:2px solid #E2E8F0}
|
||||||
|
tr:hover{background:#fafbfc}
|
||||||
|
tr:nth-child(even){background:#fcfdfd}
|
||||||
|
th:nth-child(2){min-width:280px}
|
||||||
|
th:nth-child(3){min-width:130px}
|
||||||
|
th:nth-child(4){min-width:95px}
|
||||||
|
th:nth-child(5){min-width:80px}
|
||||||
|
th:nth-child(6){min-width:105px;text-align:center}
|
||||||
|
|
||||||
|
/* BADGES */
|
||||||
|
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.6}
|
||||||
|
.badge.g{background:#ECFDF5;color:#047857}.badge.a{background:#FFF7ED;color:#c2410c}.badge.r{background:#FEF2F2;color:#dc2626}.badge.b{background:#EFF6FF;color:#2563eb}.badge.w{background:#F8FAFC;color:#64748B;border:1px solid #E2E8F0}
|
||||||
|
|
||||||
|
/* FILTERS */
|
||||||
.fr{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
|
.fr{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
|
||||||
.fr input,.fr select{padding:8px 12px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px;background:#fff}.fr input{min-width:200px}
|
.fr input,.fr select{padding:8px 12px;border:1px solid #E2E8F0;border-radius:6px;font-size:13px;background:#fff;color:#1e293b}
|
||||||
.tr-red{background:#FFF5F5}.tr-red td{border-bottom-color:#FECACA;color:#991B1B}
|
.fr input{min-width:200px}
|
||||||
.tr-amber{background:#FFFBEB}.tr-amber td{border-bottom-color:#FDE68A;color:#92400E}
|
.fr input:focus,.fr select:focus{border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,.2)}
|
||||||
.tr-green{background:#F0FDF4}.tr-green td{border-bottom-color:#BBF7D0;color:#065F46}
|
|
||||||
.sec-h{background:#005BAA;color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:700;display:inline-block;margin:16px 0 8px}
|
/* ROW COLORS */
|
||||||
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
|
.tr-red{background:#fef2f2}.tr-red td{border-bottom-color:#fecaca;color:#991b1b}
|
||||||
.stat-card{background:#fff;border-radius:12px;padding:16px;border:1px solid #E2E8F0;text-align:center}
|
.tr-amber{background:#fffbeb}.tr-amber td{border-bottom-color:#fde68a;color:#92400e}
|
||||||
.stat-card .num{font-size:28px;font-weight:800;margin:4px 0}.stat-card .lb{font-size:12px;color:#64748B}
|
.tr-green{background:#f0fdf4}.tr-green td{border-bottom-color:#bbf7d0;color:#166534}
|
||||||
.stat-card.sg .num{color:#10B981}.stat-card.sr .num{color:#EF4444}.stat-card.sb .num{color:#00B4D8}.stat-card.sa .num{color:#F59E0B}
|
|
||||||
.chat-box{height:280px;overflow-y:auto;border:1px solid #E2E8F0;border-radius:10px;padding:12px;margin-bottom:12px;background:#FAFBFC}
|
/* SECTION HEADERS */
|
||||||
.msg{padding:8px 12px;border-radius:10px;margin-bottom:8px;max-width:85%;font-size:13px;line-height:1.4}
|
.sec-h{background:linear-gradient(90deg,#005BAA,#2563eb);color:#fff;padding:7px 16px;border-radius:6px;font-size:12px;font-weight:700;display:inline-block;margin:14px 0 8px;letter-spacing:.2px;box-shadow:0 1px 3px rgba(0,91,170,.2)}
|
||||||
.msg.u{margin-left:auto;background:#005BAA;color:#fff}.msg.b{background:#F1F5F9;color:#0B1A2E}
|
|
||||||
.msg .nm{font-size:10px;color:#94A3B8;margin-bottom:2px}
|
/* STATS */
|
||||||
|
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
|
||||||
|
.stat-card{background:#fff;border-radius:10px;padding:18px 14px;border:1px solid #E2E8F0;text-align:center;transition:transform .15s,box-shadow .15s}
|
||||||
|
.stat-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
|
||||||
|
.stat-card .num{font-size:30px;font-weight:800;margin:4px 0;letter-spacing:-.5px}
|
||||||
|
.stat-card .lb{font-size:11.5px;color:#64748B;text-transform:uppercase;letter-spacing:.3px}
|
||||||
|
.stat-card.sg .num{color:#059669}.stat-card.sr .num{color:#dc2626}.stat-card.sb .num{color:#0284c7}.stat-card.sa .num{color:#d97706}
|
||||||
|
|
||||||
|
/* CHAT */
|
||||||
|
.chat-box{height:280px;overflow-y:auto;border:1px solid #E2E8F0;border-radius:8px;padding:14px;margin-bottom:12px;background:#FAFBFC}
|
||||||
|
.msg{padding:9px 14px;border-radius:12px;margin-bottom:8px;max-width:85%;font-size:13px;line-height:1.45}
|
||||||
|
.msg.u{margin-left:auto;background:#005BAA;color:#fff}.msg.b{background:#F1F5F9;color:#0f172a}
|
||||||
|
.msg .nm{font-size:10px;color:#94A3B8;margin-bottom:3px}
|
||||||
.chat-inp{display:flex;gap:8px}.chat-inp input{flex:1;padding:10px 14px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px}
|
.chat-inp{display:flex;gap:8px}.chat-inp input{flex:1;padding:10px 14px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px}
|
||||||
.chat-q{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
|
.chat-q{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
|
||||||
.chat-q button{padding:6px 12px;border:1px solid #E2E8F0;border-radius:100px;font-size:11px;background:#fff;cursor:pointer;color:#0B1A2E}
|
.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:#00B4D8;color:#fff;border-color:#00B4D8}
|
.chat-q button:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}
|
||||||
.rank-bar{height:8px;border-radius:4px;background:#E2E8F0;overflow:hidden;margin-top:4px}
|
|
||||||
.rank-bar>div{height:100%;border-radius:4px;transition:width .3s}
|
|
||||||
.sub-row{font-size:12px;color:#64748B;cursor:pointer;user-select:none}
|
|
||||||
.sub-row:hover{color:#00B4D8}.sub-row .arr{display:inline-block;width:16px;text-align:center}
|
|
||||||
.sub-items{padding-left:24px}.sub-item{font-size:12px;padding:4px 0;border-bottom:1px solid #F1F5F9}.sub-item:last-child{border:none}
|
|
||||||
.mod-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center}
|
|
||||||
.mod-box{background:#fff;border-radius:16px;padding:28px;max-width:750px;width:90vw;max-height:85vh;overflow-y:auto;position:relative}
|
|
||||||
.file-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#F8FAFC;border-radius:6px;margin:4px 0;border:1px solid #E2E8F0;flex-wrap:wrap}
|
|
||||||
.file-item .fn{font-size:12px;flex:1;min-width:80px}.file-item .fs{font-size:10px;color:#64748B}.file-item a{font-size:11px;color:#00B4D8;cursor:pointer;text-decoration:underline}
|
|
||||||
.stor-bar{font-size:11px;color:#64748B;padding:4px 0}
|
|
||||||
@media(max-width:768px){#sidebar{width:56px}#sidebar .logo span,#sidebar a span,#sidebar .user{display:none}#main{margin-left:56px}.stat-grid{grid-template-columns:repeat(2,1fr)}}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
#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}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body onload="init()" style="margin:0">
|
<body onload="init()" style="margin:0">
|
||||||
<div id="login"><div>
|
<div id="login"><div>
|
||||||
|
<span class="demo-badge">Демо-режим / MVP</span>
|
||||||
<h1><span>QAZAQtelecom</span> HSE</h1>
|
<h1><span>QAZAQtelecom</span> HSE</h1>
|
||||||
<p>План производственной безопасности 2026</p>
|
<p>План производственной безопасности 2026</p>
|
||||||
<input id="lem" placeholder="curator@telecom.kz">
|
<input id="lem" placeholder="curator@telecom.kz">
|
||||||
<input id="lpw" type="password" placeholder="Пароль">
|
<input id="lpw" type="password" placeholder="Пароль">
|
||||||
<p id="lerr" style="color:#EF4444;font-size:12px;display:none">Неверная почта</p>
|
<p id="lerr" style="color:#DC2626;font-size:12px;display:none;margin-top:-4px;margin-bottom:10px">Неверные учётные данные</p>
|
||||||
<button class="btn" style="width:100%" onclick="doLogin()">Войти</button>
|
<button class="btn" style="width:100%;padding:12px;border-radius:8px" onclick="doLogin()">Войти в систему</button>
|
||||||
</div></div>
|
</div></div>
|
||||||
<div id="toast"></div>
|
<div id="toast"></div>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<div class="mobile-header">
|
||||||
|
<button class="mobile-menu-btn" onclick="document.getElementById('sidebar').classList.toggle('open')">☰</button>
|
||||||
|
<strong style="font-size:14px;color:#0f172a">QAZAQtelecom HSE</strong>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<div class="logo">QAZAQtelecom <span>HSE</span></div>
|
<div class="logo">QAZAQtelecom <span>HSE</span></div>
|
||||||
<div class="user" id="su_name"></div>
|
<div class="user" id="su_name"></div>
|
||||||
<a class=" active" id="snav_events" onclick="switchTab('events')"><span>Мероприятия</span></a>
|
<nav>
|
||||||
<a class="" id="snav_analytics" onclick="switchTab('analytics')"><span>Аналитика</span></a>
|
<a class="active" id="snav_events" onclick="switchTab('events');document.getElementById('sidebar').classList.remove('open')"><span>Мероприятия</span></a>
|
||||||
<a class="" id="snav_reports" onclick="switchTab('reports')"><span>Отчётность</span></a>
|
<a id="snav_analytics" onclick="switchTab('analytics');document.getElementById('sidebar').classList.remove('open')"><span>Аналитика</span></a>
|
||||||
<a class="" id="snav_ai" onclick="switchTab('ai')"><span>Джарвис</span></a>
|
<a id="snav_reports" onclick="switchTab('reports');document.getElementById('sidebar').classList.remove('open')"><span>Отчётность</span></a>
|
||||||
<a class="" id="snav_hse" onclick="switchTab('hse')"><span>HSE.sk.kz</span></a>
|
<a id="snav_ai" onclick="switchTab('ai');document.getElementById('sidebar').classList.remove('open')"><span>Джарвис</span></a>
|
||||||
<a class="" id="snav_users" onclick="switchTab('users')"><span>Учётные записи</span></a>
|
<a id="snav_hse" onclick="switchTab('hse');document.getElementById('sidebar').classList.remove('open')"><span>HSE.sk.kz</span></a>
|
||||||
<div class="logout"><button class="btn btn-sm btn-r" style="width:100%" onclick="doLogout()">Выйти</button></div>
|
<a id="snav_users" onclick="switchTab('users');document.getElementById('sidebar').classList.remove('open')"><span>Учётные записи</span></a>
|
||||||
|
</nav>
|
||||||
|
<div class="logout"><button class="btn btn-sm btn-r" style="width:100%;border-radius:6px" onclick="doLogout()">Выйти</button></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div class="top"><h2 id="page_title">Мероприятия</h2>
|
<div class="top"><h2 id="page_title">Мероприятия</h2>
|
||||||
<div style="display:flex;gap:8px;align-items:center">
|
<div class="top-actions">
|
||||||
<span id="stor_ind" class="stor-bar"></span>
|
<span id="stor_ind" class="stor-bar"></span>
|
||||||
<button class="btn btn-sm btn-o" onclick="saveBackup()">Резерв</button>
|
<button class="btn btn-sm btn-o" onclick="saveBackup()" title="Создать резервную копию">Резерв</button>
|
||||||
<button class="btn btn-sm btn-g" onclick="document.getElementById('fu').click()">Восст.</button>
|
<button class="btn btn-sm btn-g" onclick="document.getElementById('fu').click()" title="Восстановить из файла">Восст.</button>
|
||||||
<input type="file" id="fu" accept=".json" style="display:none" onchange="loadBackup(this)">
|
<input type="file" id="fu" accept=".json" style="display:none" onchange="loadBackup(this)">
|
||||||
</div></div>
|
</div></div>
|
||||||
<div id="tab_events">
|
<div id="tab_events">
|
||||||
@ -204,6 +299,7 @@ th:nth-child(6){min-width:110px;text-align:center}
|
|||||||
</div></div>
|
</div></div>
|
||||||
<div id="tab_hse" style="display:none">
|
<div id="tab_hse" style="display:none">
|
||||||
<div class="card"><h3>Интеграция с HSE.sk.kz</h3>
|
<div class="card"><h3>Интеграция с HSE.sk.kz</h3>
|
||||||
|
<div class="demo-note">Для отправки отчётов в HSE.sk.kz требуется локальный интеграционный сервис (localhost:5000). В демо-режиме функция имитирует отправку.</div>
|
||||||
<p style="font-size:13px;color:#64748B;margin-bottom:16px">Направление подписанного сводного отчёта по месяцам в систему hse.sk.kz</p>
|
<p style="font-size:13px;color:#64748B;margin-bottom:16px">Направление подписанного сводного отчёта по месяцам в систему hse.sk.kz</p>
|
||||||
<div style="margin-bottom:12px"><strong>Месяц:</strong>
|
<div style="margin-bottom:12px"><strong>Месяц:</strong>
|
||||||
<input type="month" id="hse_month" style="padding:6px 10px;border:1px solid #E2E8F0;border-radius:6px;margin-left:8px">
|
<input type="month" id="hse_month" style="padding:6px 10px;border:1px solid #E2E8F0;border-radius:6px;margin-left:8px">
|
||||||
@ -1155,14 +1251,14 @@ function renderEv(){
|
|||||||
var drText=dr<=0&&e.s!=="done"?"Просрочено на "+Math.abs(dr)+" дн.":e.s==="done"?"Готово":dr===999?"\u2014":dr+" дн.";
|
var drText=dr<=0&&e.s!=="done"?"Просрочено на "+Math.abs(dr)+" дн.":e.s==="done"?"Готово":dr===999?"\u2014":dr+" дн.";
|
||||||
var hasSub=e.sub&&e.sub.length>0;
|
var hasSub=e.sub&&e.sub.length>0;
|
||||||
h+="<tr class='"+rowCl+"'>";
|
h+="<tr class='"+rowCl+"'>";
|
||||||
h+="<td style='font-weight:700;font-size:12px'>"+e.id+"</td>";
|
h+="<td style='font-weight:700;font-size:12px;color:#475569'>"+e.id+"</td>";
|
||||||
h+="<td><div style='font-size:12px;line-height:1.3'>"+esc(e.t)+"</div><div style='font-size:10px;color:#64748B;margin-top:2px'>"+esc(e.dname)+"</div></td>";
|
h+="<td><div style='font-size:12.5px;line-height:1.45;color:#1e293b;max-width:400px'>"+esc(e.t)+"</div><div style='font-size:11px;color:#94a3b8;margin-top:3px'>"+esc(e.dname)+"</div></td>";
|
||||||
h+="<td style='font-size:11px'>"+(e.sub&&e.sub.length?"\u0441\u043C. \u043F\u043E\u0434\u043F\u0443\u043D\u043A\u0442\u044B":esc(nl2c(e.r)))+"</td>";
|
h+="<td style='font-size:11.5px;color:#475569;white-space:normal;max-width:160px;line-height:1.35'>"+(e.sub&&e.sub.length?"<span style='color:#0284c7;font-weight:600'>см. подпункты</span>":esc(nl2c(e.r)))+"</td>";
|
||||||
h+="<td style='font-size:12px;white-space:nowrap'>"+e.due+" <span style='font-size:10px;color:#64748B'>("+drText+")</span></td>";
|
h+="<td style='font-size:12px;white-space:nowrap'><strong>"+e.due+"</strong> <span style='font-size:10.5px;color:#94a3b8'>("+drText+")</span></td>";
|
||||||
if(hasSub){h+="<td></td><td>"+(cu&&cu.bg===0?"<button class='btn btn-sm btn-o' style='padding:4px 10px;font-size:11px' onclick='editEventText("+e.id+")'>Ред.</button>":"")+"</td>"}
|
if(hasSub){h+="<td style='text-align:center'><span class='badge b'>"+(e.sub.length+" п/п")+"</span></td><td style='text-align:right'>"+(cu&&cu.bg===0?"<button class='act-btn act-btn-edit' onclick='editEventText("+e.id+")'>Ред.</button>":"")+"</td>"}
|
||||||
else{
|
else{
|
||||||
h+="<td><span class='badge "+cl+"'>"+stn[e.s]+"</span></td>";
|
h+="<td style='text-align:center'><span class='badge "+cl+"'>"+stn[e.s]+"</span></td>";
|
||||||
var eb=cu&&cu.bg===0?"<button class='btn btn-sm btn-o' style='padding:4px 8px;font-size:11px;margin-right:4px' onclick='editEventText("+e.id+")'>Ред.</button>":"";h+="<td>"+eb+"<button class='btn btn-sm' style='padding:4px 10px;font-size:11px' onclick='openEv("+e.id+")'>Откр.</button></td>"
|
var eb=cu&&cu.bg===0?"<button class='act-btn act-btn-edit' onclick='editEventText("+e.id+")'>Ред.</button>":"";h+="<td style='text-align:right'><div class='act-group'>"+eb+"<button class='act-btn act-btn-open' onclick='openEv("+e.id+")'>Откр.</button></div></td>"
|
||||||
}
|
}
|
||||||
h+="</tr>";
|
h+="</tr>";
|
||||||
if(hasSub){
|
if(hasSub){
|
||||||
@ -1170,12 +1266,12 @@ function renderEv(){
|
|||||||
var sr=subResp(e.r,e.sub[si].l)||nl2c(e.r);
|
var sr=subResp(e.r,e.sub[si].l)||nl2c(e.r);
|
||||||
var ss=e.s==="wait"?"warn":e.s;
|
var ss=e.s==="wait"?"warn":e.s;
|
||||||
var scl=stc[ss]||"a";
|
var scl=stc[ss]||"a";
|
||||||
var subR=subResp(e.r,e.sub[si].l);if(!subR||subR.length<2)subR=nl2c(e.r);h+="<tr class='"+rowCl+" sub-item-row'><td style='padding-left:24px;font-size:11px;font-weight:600;color:#005BAA'>"+e.id+"."+esc(e.sub[si].l)+"</td>";
|
var subR=subResp(e.r,e.sub[si].l);if(!subR||subR.length<2)subR=nl2c(e.r);h+="<tr class='"+rowCl+" sub-item-row'><td style='padding-left:24px;font-size:11px;font-weight:700;color:#0284c7'>"+e.id+"."+esc(e.sub[si].l)+"</td>";
|
||||||
h+="<td style='font-size:11px'>"+esc(e.sub[si].t)+"</td>";
|
h+="<td style='font-size:11.5px;line-height:1.4;color:#334155;max-width:360px'>"+esc(e.sub[si].t)+"</td>";
|
||||||
h+="<td style='font-size:11px'>"+esc(e.sub[si].r||sr)+"</td>";
|
h+="<td style='font-size:11px;color:#64748B;line-height:1.35'>"+esc(e.sub[si].r||sr)+"</td>";
|
||||||
h+="<td style='font-size:11px'>"+(e.sub[si].due||e.due)+"</td>";
|
h+="<td style='font-size:11.5px;color:#475569'>"+(e.sub[si].due||e.due)+"</td>";
|
||||||
h+="<td><span class='badge "+scl+"' style='font-size:10px'>"+stn[ss]+"</span></td>";
|
h+="<td style='text-align:center'><span class='badge "+scl+"' style='font-size:10px'>"+stn[ss]+"</span></td>";
|
||||||
h+="<td><button class='btn btn-sm' style='padding:4px 7px;font-size:10px' onclick='openEv("+e.id+","+si+")'>Откр.</button></td></tr>"
|
h+="<td style='text-align:right'><button class='act-btn act-btn-open' onclick='openEv("+e.id+","+si+")'>Откр.</button></td></tr>"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1787,6 +1883,6 @@ function dlAnalyticsWord(){
|
|||||||
var blob=new Blob([h],{type:"application/msword"});
|
var blob=new Blob([h],{type:"application/msword"});
|
||||||
var a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download="analytics.doc";a.click()
|
var a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download="analytics.doc";a.click()
|
||||||
}
|
}
|
||||||
</script></script></script></script></script></script></script></script></script></script></script></script></script></script></script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user