v78: ультра-минимал — без XHR, без data.json
This commit is contained in:
parent
b9f8a2c0f9
commit
c719e83774
141
index.html
141
index.html
@ -3,118 +3,73 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>План ПБ 2026 — Казахтелеком</title>
|
||||
<title>План ПБ 2026</title>
|
||||
<style>
|
||||
:root{--b:#0F1218;--c:#00E5FF;--w:#fff;--g5:#5B6573;--g1:#F2F4F7;--g2:#E5E7EB;--gn:#10B981;--rd:#EF4444;--am:#F59E0B}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font:14px/1.4 Arial,sans-serif;color:var(--b);background:var(--g1)}
|
||||
input,select,textarea,button{font:inherit;outline:none}
|
||||
.btn{background:var(--c);color:var(--b);padding:10px 20px;border-radius:8px;font-weight:700;font-size:14px;border:none;cursor:pointer}.btn:hover{opacity:.85}
|
||||
.btn-sm{padding:6px 12px;font-size:12px}.btn-red{background:var(--rd);color:#fff}.btn-gn{background:var(--gn);color:#fff}
|
||||
#loginBox{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--b)}
|
||||
#loginBox>div{background:var(--w);border-radius:16px;padding:40px 36px;width:400px;max-width:90vw;text-align:center}
|
||||
#loginBox h1{font-size:22px;font-weight:800;margin-bottom:4px}
|
||||
#loginBox h1 span{color:var(--c)}
|
||||
#loginBox p{color:var(--g5);font-size:13px;margin-bottom:28px}
|
||||
#loginBox input{display:block;width:100%;padding:12px 14px;border:1px solid var(--g2);border-radius:8px;font-size:14px;margin-bottom:14px}
|
||||
#app{display:none;max-width:1200px;margin:0 auto;padding:16px}
|
||||
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:2px solid var(--g2);margin-bottom:16px}
|
||||
.top b{font-size:18px}.top b span{color:var(--c)}
|
||||
.top .r{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--g5)}
|
||||
.tabs{display:flex;gap:4px;margin-bottom:16px}
|
||||
.tab{padding:10px 20px;border:none;background:var(--w);cursor:pointer;font-size:14px;font-weight:600;color:var(--g5);border-radius:8px 8px 0 0}
|
||||
.tab.on{color:var(--b);border-bottom:3px solid var(--c)}
|
||||
.pg{display:none}.pg.on{display:block}
|
||||
.card{background:var(--w);border-radius:12px;padding:20px;margin-bottom:14px;border:1px solid var(--g2)}
|
||||
.card h3{font-size:16px;margin-bottom:8px}
|
||||
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
|
||||
.stat{background:var(--w);border-radius:10px;padding:16px 20px;border:1px solid var(--g2);min-width:120px;flex:1;text-align:center}
|
||||
.stat .n{font-size:26px;font-weight:800}.stat .l{font-size:12px;color:var(--g5)}
|
||||
.stat.r .n{color:var(--rd)}.stat.g .n{color:var(--gn)}.stat.a .n{color:var(--am)}
|
||||
table{width:100%;border-collapse:collapse}th,td{padding:8px 12px;text-align:left;font-size:13px}
|
||||
th{font-weight:600;color:var(--g5);font-size:11px;text-transform:uppercase;border-bottom:2px solid var(--g2);cursor:pointer}
|
||||
th:hover{color:var(--b)}td{border-bottom:1px solid var(--g2)}
|
||||
tr.rd td{background:#FFF5F5}tr.am td{background:#FFFDF5}
|
||||
.badge{display:inline-block;padding:3px 8px;border-radius:100px;font-size:11px;font-weight:700}
|
||||
.badge.g{background:#D1FAE5;color:#065F46}.badge.a{background:#FEF3C7;color:#92400E}
|
||||
.badge.r{background:#FEE2E2;color:#991B1B}.badge.b{background:#DBEAFE;color:#1E40AF}.badge.w{background:#eee;color:#666}
|
||||
.fr{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
|
||||
.fr input,.fr select{padding:8px 12px;border:1px solid var(--g2);border-radius:6px;font-size:13px;background:var(--w)}
|
||||
.fr input{min-width:200px}
|
||||
.mt{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
|
||||
.mt span{padding:4px 10px;border:1px solid var(--g2);border-radius:100px;font-size:11px;font-weight:600;cursor:pointer}
|
||||
.mt span.on{background:var(--c);color:var(--b)}
|
||||
@media(max-width:600px){#app{padding:8px}.row{flex-direction:column}.stat{min-width:auto}}
|
||||
body{font:14px Arial,sans-serif;background:#F1F5F9;color:#0B1A2E}
|
||||
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0B1A2E,#1a3a5c)}
|
||||
#login>div{background:#fff;border-radius:20px;padding:40px;width:400px;max-width:90vw;text-align:center}
|
||||
#login h1{font-size:22px;margin-bottom:4px}#login h1 span{color:#00B4D8}
|
||||
#login p{color:#64748B;font-size:13px;margin-bottom:24px}
|
||||
#login input{display:block;width:100%;padding:12px;border:2px solid #E2E8F0;border-radius:10px;font-size:14px;margin-bottom:12px}
|
||||
.btn{background:#00B4D8;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer;width:100%}
|
||||
.btn:hover{background:#0096B0}
|
||||
#app{display:none;max-width:1100px;margin:0 auto;padding:20px}
|
||||
.top{display:flex;justify-content:space-between;padding:12px 0;margin-bottom:20px;border-bottom:2px solid #E2E8F0}
|
||||
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:14px}
|
||||
table{width:100%;border-collapse:collapse}th,td{padding:8px 12px;font-size:13px;text-align:left;border-bottom:1px solid #E2E8F0}
|
||||
th{background:#F1F5F9;font-weight:600;font-size:11px;text-transform:uppercase;color:#64748B}
|
||||
.badge{display:inline-block;padding:3px 8px;border-radius:100px;font-size:11px;font-weight:600}
|
||||
.g{background:#D1FAE5;color:#065F46}.a{background:#FEF3C7;color:#92400E}.r{background:#FEE2E2;color:#991B1B}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loginBox"><div>
|
||||
<div id="login"><div>
|
||||
<h1><span>План ПБ</span> 2026</h1>
|
||||
<p>АО «Казахтелеком»</p>
|
||||
<input id="lem" placeholder="curator@telecom.kz">
|
||||
<input id="lpw" type="password" placeholder="Пароль (любой)">
|
||||
<p id="lerr" style="color:var(--rd);font-size:12px;display:none">Неверная почта</p>
|
||||
<button class="btn" style="width:100%" onclick="doLogin()">Войти</button>
|
||||
<input id="lpw" type="password" placeholder="Пароль">
|
||||
<p id="lerr" style="color:#EF4444;font-size:12px;display:none">Неверная почта</p>
|
||||
<button class="btn" onclick="doLogin()">Войти</button>
|
||||
</div></div>
|
||||
|
||||
<div id="app">
|
||||
<div class="top"><b><span>План ПБ</span> 2026</b><div class="r"><span id="ul"></span><button class="btn btn-sm btn-red" onclick="doLogout()">Выйти</button></div></div>
|
||||
<div class="tabs">
|
||||
<button class="tab on" data-pg="ev" onclick="switchPg('ev')">Мероприятия</button>
|
||||
<button class="tab" data-pg="rp" onclick="switchPg('rp')">Отчёты</button>
|
||||
</div>
|
||||
<div class="pg on" id="pg-ev"></div>
|
||||
<div class="pg" id="pg-rp"></div>
|
||||
<div class="top"><b>План ПБ 2026</b> <span id="ul"></span> <button class="btn" style="width:auto;padding:6px 14px;font-size:12px;background:#EF4444" onclick="doLogout()">Выйти</button></div>
|
||||
<div class="card" id="content"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var U={"curator@telecom.kz":{n:"Куратор",b:0,r:"cur"},"dpp@telecom.kz":{n:"Директор ДПБ",b:0,r:"br"}};
|
||||
var cu=null,ev=null;
|
||||
var U={curator:{n:"Куратор"},dpp:{n:"ДПБ"}};
|
||||
var cu=null;
|
||||
|
||||
// EMBEDDED events - no XHR needed
|
||||
var ev=[
|
||||
{id:1,sec:0,b:6,s:"warn",p:45,due:"31.12.2026",done:"—",r:"Генеральный директор КУ",t:"Обучение и повышение квалификации (VR, AR, симуляторы)",ai:"Охвачено 45% персонала.",h:["15.01 — Создано"]},
|
||||
{id:2,sec:0,b:0,s:"done",p:100,due:"31.03.2026",done:"28.03.2026",r:"Директор ДПБ, ДИТ",t:"Анализ и пересмотр ВНД согласно Стратегии ПБ",ai:"Завершён в срок.",h:["10.01 — Создано"]},
|
||||
{id:3,sec:0,b:0,s:"warn",p:50,due:"31.12.2026",done:"—",r:"Главный админ. директор",t:"Тематические совещания по вопросам ПБ",ai:"2 квартальных совещания.",h:["10.01 — Создано"],sub:[{l:"a",t:"С филиалами/ДАО, не менее 1 раза в квартал"},{l:"b",t:"Со структурными подразделениями, ежемесячно"},{l:"c",t:"С подрядными организациями"}]},
|
||||
{id:4,sec:0,b:6,s:"warn",p:55,due:"31.12.2026",done:"—",r:"Ген. директора филиалов",t:"Проверка знаний в формате тестирования",ai:"82% средний результат.",h:["01.02 — Создано"]},
|
||||
{id:5,sec:0,b:0,s:"done",p:100,due:"31.03.2026",done:"25.03.2026",r:"Директор ДПБ",t:"Нематериальное поощрение филиалов",ai:"Положение утверждено.",h:["25.03 — Утверждено"]}
|
||||
];
|
||||
var br=["Дирекция ПБ","Дивизион Сеть","Корп. бизнес","Розн. бизнес","Сервисная фабрика","Телеком Комплект","Корп. университет","Упр. проектами","Цифровой бизнес"];
|
||||
var st={wait:"Не начато",warn:"В процессе",late:"Просрочено",done:"Исполнено"};
|
||||
|
||||
function doLogin(){
|
||||
var e=document.getElementById("lem").value.trim().toLowerCase();
|
||||
if(U[e]){cu={em:e,n:U[e].n,b:U[e].b,r:U[e].r};localStorage.setItem("su",JSON.stringify(cu));showApp()}else{document.getElementById("lerr").style.display="block"}
|
||||
var k=e.split("@")[0];
|
||||
if(U[k]){cu={n:U[k].n};document.getElementById("login").style.display="none";document.getElementById("app").style.display="block";document.getElementById("ul").textContent=cu.n;renderEv()}else{document.getElementById("lerr").style.display="block"}
|
||||
}
|
||||
function doLogout(){localStorage.removeItem("su");cu=null;document.getElementById("loginBox").style.display="flex";document.getElementById("app").style.display="none"}
|
||||
function showApp(){
|
||||
document.getElementById("loginBox").style.display="none";
|
||||
document.getElementById("app").style.display="block";
|
||||
document.getElementById("ul").innerHTML="<b>"+cu.n+"</b>";
|
||||
loadEvents();
|
||||
}
|
||||
function loadEvents(){
|
||||
var s=localStorage.getItem("se3");
|
||||
if(s){try{ev=JSON.parse(s);renderEv();return}catch(e){}}
|
||||
var x=new XMLHttpRequest();
|
||||
x.open("GET","data.json",true);
|
||||
x.onload=function(){if(x.status===200){try{ev=JSON.parse(x.responseText);localStorage.setItem("se3",JSON.stringify(ev))}catch(e){ev=[]}};renderEv()};
|
||||
x.onerror=function(){ev=[];renderEv()};
|
||||
x.send();
|
||||
}
|
||||
function saveEv(){localStorage.setItem("se3",JSON.stringify(ev||[]))}
|
||||
function switchPg(n){
|
||||
document.querySelectorAll(".tab").forEach(function(t){t.classList.remove("on")});
|
||||
document.querySelector('[data-pg="'+n+'"]').classList.add("on");
|
||||
document.querySelectorAll(".pg").forEach(function(p){p.classList.remove("on")});
|
||||
document.getElementById("pg-"+n).classList.add("on");
|
||||
if(n==="ev")renderEv();
|
||||
}
|
||||
function renderEv(){
|
||||
var h="<div class='card'><p>Загрузка...</p></div>";
|
||||
if(ev&&ev.length){
|
||||
h="<div class='card'><div class='fr'><span>Всего: "+ev.length+" мероприятий</span></div><table><tr><th>№</th><th>Мероприятие</th><th>Филиал</th><th>Срок</th><th>Статус</th></tr>";
|
||||
ev.forEach(function(e){
|
||||
var scl={done:"g",warn:"a",late:"r",wait:"w"}[e.s]||"w";
|
||||
var stt={done:"Исполнено",warn:"В процессе",late:"Просрочено",wait:"Не начато"}[e.s]||"—";
|
||||
h+="<tr><td>"+e.id+"</td><td style='font-size:12px'>"+escHtml(e.t)+"</td><td style='font-size:11px'>"+e.b+"</td><td>"+e.due+"</td><td><span class='badge "+scl+"'>"+stt+"</span></td></tr>";
|
||||
});
|
||||
h+="</table></div>";
|
||||
}
|
||||
document.getElementById("pg-ev").innerHTML=h;
|
||||
}
|
||||
function escHtml(s){return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}
|
||||
function doLogout(){cu=null;document.getElementById("login").style.display="flex";document.getElementById("app").style.display="none"}
|
||||
|
||||
var su=localStorage.getItem("su");if(su){try{cu=JSON.parse(su);if(cu)showApp()}catch(e){}}
|
||||
function renderEv(){
|
||||
var h="<table><tr><th>№</th><th>Мероприятие</th><th>Филиал</th><th>Срок</th><th>Статус</th></tr>";
|
||||
ev.forEach(function(e){
|
||||
var cl={done:"g",warn:"a",late:"r",wait:"w"}[e.s]||"w";
|
||||
h+="<tr><td>"+e.id+"</td><td>"+esc(e.t)+"</td><td>"+br[e.b]+"</td><td>"+e.due+"</td><td><span class='badge "+cl+"'>"+st[e.s]+"</span></td></tr>";
|
||||
});
|
||||
h+="</table>";
|
||||
document.getElementById("content").innerHTML=h;
|
||||
}
|
||||
function esc(s){return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user