refactor: remove backend, extract CSS/JS, apply design.md palette

2026-06-10 11:25:45 +00:00 · 2026-06-10 11:25:45 +00:00 · 04c0bfb154
commit 04c0bfb154
parent 1ddcfd2c80
6 changed files with 1232 additions and 1126 deletions
--- a/index.html
+++ b/index.html
--- a/requirements.txt
+++ b/requirements.txt
@ -1,5 +0,0 @@
-flask>=3.0
-flask-cors>=4.0
-python-docx>=1.0
-reportlab>=4.0
-requests>=2.31
--- a/script.js
+++ b/script.js
--- a/server.py
+++ b/server.py
@ -1,133 +0,0 @@
-import json
-import io
-import os
-from datetime import datetime
-
-from flask import Flask, request, jsonify
-from flask_cors import CORS
-import requests as http_requests
-
-app = Flask(__name__)
-CORS(app)
-
-HSE_API_URL = "https://hse.sk.kz/api/v1"
-DATA_DIR = os.path.join(os.path.dirname(__file__), "data")
-os.makedirs(DATA_DIR, exist_ok=True)
-
-
-def make_docx(report):
-    from docx import Document
-    from docx.shared import Pt
-    doc = Document()
-    doc.styles["Normal"].font.size = Pt(11)
-    doc.add_heading("План ПБ — Казахтелеком", level=1)
-    s = report.get("summary", {})
-    doc.add_paragraph(
-        f"Дата: {datetime.now().strftime('%d.%m.%Y')} | "
-        f"Всего: {s.get('total', 0)} | "
-        f"Выполнено: {s.get('done', 0)} ({s.get('pct', 0)}%)"
-    )
-    events = report.get("events", [])
-    table = doc.add_table(rows=1, cols=6)
-    table.style = "Light Grid Accent 1"
-    for i, h in enumerate(["N", "Мероприятие", "Филиал", "Срок", "Статус", "%"]):
-        table.rows[0].cells[i].text = h
-    for e in events:
-        row = table.add_row().cells
-        row[0].text = str(e.get("id", ""))
-        row[1].text = str(e.get("title", ""))[:100]
-        row[2].text = str(e.get("branch", ""))
-        row[3].text = str(e.get("deadline", ""))
-        row[4].text = str(e.get("status", ""))
-        row[5].text = str(e.get("progress", 0)) + "%"
-    buf = io.BytesIO()
-    doc.save(buf)
-    buf.seek(0)
-    return buf
-
-
-def make_pdf(report):
-    from reportlab.lib.pagesizes import A4
-    from reportlab.lib.styles import getSampleStyleSheet
-    from reportlab.lib.units import mm
-    from reportlab.lib.colors import HexColor
-    from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Table, TableStyle
-
-    buf = io.BytesIO()
-    doc = SimpleDocTemplate(buf, pagesize=A4, rightMargin=20 * mm, leftMargin=20 * mm,
-                            topMargin=20 * mm, bottomMargin=20 * mm)
-    styles = getSampleStyleSheet()
-    story = [Paragraph("План ПБ — Казахтелеком", styles["Title"]), Spacer(1, 10)]
-    s = report.get("summary", {})
-    story.append(Paragraph(
-        f"Всего: {s.get('total', 0)} | Выполнено: {s.get('done', 0)} ({s.get('pct', 0)}%)",
-        styles["Normal"]
-    ))
-    story.append(Spacer(1, 10))
-    data = [["N", "Мероприятие", "Филиал", "Срок", "Статус", "%"]]
-    for e in report.get("events", []):
-        data.append([
-            str(e.get("id", "")), str(e.get("title", ""))[:80],
-            str(e.get("branch", ""))[:25], str(e.get("deadline", "")),
-            str(e.get("status", "")), str(e.get("progress", 0)) + "%",
-        ])
-    table = Table(data, colWidths=[20, 220, 80, 50, 60, 40])
-    table.setStyle(TableStyle([
-        ("FONTSIZE", (0, 0), (-1, 0), 9), ("FONTSIZE", (0, 1), (-1, -1), 8),
-        ("BACKGROUND", (0, 0), (-1, 0), HexColor("#003366")),
-        ("TEXTCOLOR", (0, 0), (-1, 0), HexColor("#FFFFFF")),
-        ("GRID", (0, 0), (-1, -1), 0.5, HexColor("#CCCCCC")),
-        ("VALIGN", (0, 0), (-1, -1), "TOP"),
-    ]))
-    story.append(table)
-    doc.build(story)
-    buf.seek(0)
-    return buf
-
-
-@app.route("/api/hse/send", methods=["POST"])
-def hse_send():
-    data = request.get_json()
-    month = data.get("month", "")
-    api_key = data.get("api_key", "")
-    fmt = data.get("format", "word")
-    report = data.get("report", {})
-    endpoint = data.get("endpoint", f"{HSE_API_URL}/documents/upload")
-
-    if not api_key:
-        return jsonify({"ok": False, "error": "API key required"}), 400
-
-    if fmt == "pdf":
-        buf = make_pdf(report)
-        mime = "application/pdf"
-        ext = "pdf"
-    else:
-        buf = make_docx(report)
-        mime = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-        ext = "docx"
-
-    try:
-        files = {"file": (f"hse_report_{month}.{ext}", buf.getvalue(), mime)}
-        headers = {"Authorization": f"Bearer {api_key}"}
-        payload = {
-            "title": f"Сводный отчет по ПБ за {month}",
-            "description": "Автоматический отчет платформы мониторинга ПБ",
-            "type": "safety_report",
-            "period": month,
-        }
-        r = http_requests.post(endpoint, files=files, data=payload, headers=headers, timeout=30)
-        if r.ok:
-            return jsonify({"ok": True, "hse_response": r.json() if r.text else {"status": r.status_code}})
-        return jsonify({"ok": False, "error": f"HSE API error: {r.status_code}", "detail": r.text[:500]}), 502
-    except Exception as e:
-        return jsonify({"ok": False, "error": str(e)}), 502
-
-
-@app.route("/api/health", methods=["GET"])
-def health():
-    return jsonify({"ok": True, "time": datetime.now().isoformat()})
-
-
-if __name__ == "__main__":
-    print("HSE Integration Server — http://0.0.0.0:5000")
-    app.run(host="0.0.0.0", port=5000, debug=False)
--- a/start.sh
+++ b/start.sh
@ -1,8 +0,0 @@
-#!/usr/bin/env bash
-export PATH="$HOME/.local/bin:$PATH"
-cd "$(dirname "$0")"
-echo "=== HSE Integration Server ==="
-echo "Installing..."
-pip3 install -r requirements.txt --break-system-packages -q 2>/dev/null
-echo "Starting on http://0.0.0.0:5000"
-python3 server.py
--- a/style.css
+++ b/style.css
@ -0,0 +1,328 @@
+:root {
+  --ink: #0F1218;
+  --cyan: #00E5FF;
+  --cyan-dark: #00B8D4;
+  --white: #FFFFFF;
+  --gray-100: #F2F4F7;
+  --gray-500: #5B6573;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+  background: var(--gray-100);
+  color: var(--ink);
+  min-height: 100vh;
+}
+
+input, select, textarea, button { font: inherit; outline: none; }
+
+.btn {
+  background: var(--cyan);
+  color: var(--ink);
+  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: var(--cyan-dark);
+  box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);
+}
+
+.btn-sm { padding: 7px 16px; font-size: 12px; }
+.btn-r  { background: #E53935; color: var(--white); }
+.btn-r:hover { background: #C62828; }
+.btn-g  { background: #2E7D32; color: var(--white); }
+.btn-g:hover { background: #1B5E20; }
+.btn-o  { background: #F57C00; color: var(--white); }
+.btn-o:hover { background: #E65100; }
+
+#login {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, var(--ink), #006478, var(--cyan-dark));
+}
+#login > div {
+  background: var(--white);
+  border-radius: 16px;
+  padding: 40px;
+  width: 400px;
+  max-width: 90vw;
+  text-align: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+#login h1 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
+#login h1 span { color: var(--cyan-dark); }
+#login > div > p { color: var(--gray-500); font-size: 13px; margin-bottom: 24px; }
+#login input {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  border: 2px solid var(--gray-100);
+  border-radius: 10px;
+  font-size: 14px;
+  margin-bottom: 12px;
+  transition: border 0.2s;
+}
+#login input:focus { border-color: var(--cyan-dark); }
+
+#app { display: none; min-height: 100vh; }
+
+#sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 220px;
+  background: var(--ink);
+  color: var(--white);
+  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 .logo span { color: var(--cyan); }
+#sidebar .user { font-size: 11px; color: #94A3B8; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
+#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 a:hover { background: rgba(0, 229, 255, .1); color: var(--white); }
+#sidebar a.active {
+  background: rgba(0, 229, 255, .2);
+  color: var(--cyan);
+  border-left-color: var(--cyan);
+  font-weight: 600;
+}
+#sidebar .logout { position: absolute; bottom: 16px; left: 16px; right: 16px; }
+
+#main { margin-left: 220px; padding: 24px; min-height: 100vh; }
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 16px;
+  border-bottom: 2px solid var(--gray-100);
+  margin-bottom: 20px;
+}
+.top h2 { font-size: 20px; font-weight: 700; }
+
+.card {
+  background: var(--white);
+  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; }
+
+table { width: 100%; border-collapse: collapse; }
+th, td {
+  padding: 8px 10px;
+  font-size: 13px;
+  text-align: left;
+  border-bottom: 1px solid var(--gray-100);
+  vertical-align: top;
+}
+th {
+  background: var(--gray-100);
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--gray-500);
+  white-space: nowrap;
+}
+tr:hover { background: #FAFBFC; }
+
+.badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.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; }
+
+.fr { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
+.fr input, .fr select {
+  padding: 8px 12px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  font-size: 13px;
+  background: var(--white);
+}
+.fr input { min-width: 200px; }
+
+.tr-red { background: #FFF5F5; }
+.tr-red td { border-bottom-color: #FECACA; color: #991B1B; }
+.tr-amber { background: #FFFBEB; }
+.tr-amber td { border-bottom-color: #FDE68A; color: #92400E; }
+.tr-green { background: #F0FDF4; }
+.tr-green td { border-bottom-color: #BBF7D0; color: #065F46; }
+
+.sec-h {
+  background: var(--cyan);
+  color: var(--ink);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  display: inline-block;
+  margin: 16px 0 8px;
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.stat-card {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid var(--gray-100);
+  text-align: center;
+}
+.stat-card .num { font-size: 28px; font-weight: 800; margin: 4px 0; }
+.stat-card .lb { font-size: 12px; color: var(--gray-500); }
+.stat-card.sg .num { color: #10B981; }
+.stat-card.sr .num { color: #EF4444; }
+.stat-card.sb .num { color: var(--cyan); }
+.stat-card.sa .num { color: #F59E0B; }
+
+.chat-box {
+  height: 280px;
+  overflow-y: auto;
+  border: 1px solid var(--gray-100);
+  border-radius: 10px;
+  padding: 12px;
+  margin-bottom: 12px;
+  background: #FAFBFC;
+}
+.msg {
+  padding: 8px 12px;
+  border-radius: 10px;
+  margin-bottom: 8px;
+  max-width: 85%;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.msg.u { margin-left: auto; background: var(--cyan); color: var(--ink); }
+.msg.b { background: var(--gray-100); color: var(--ink); }
+.msg .nm { font-size: 10px; color: var(--gray-500); margin-bottom: 2px; }
+
+.chat-inp { display: flex; gap: 8px; }
+.chat-inp input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  font-size: 13px;
+}
+.chat-q { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.chat-q button {
+  padding: 6px 12px;
+  border: 1px solid var(--gray-100);
+  border-radius: 100px;
+  font-size: 11px;
+  background: var(--white);
+  cursor: pointer;
+  color: var(--ink);
+}
+.chat-q button:hover {
+  background: var(--cyan);
+  color: var(--ink);
+  border-color: var(--cyan);
+}
+
+.rank-bar {
+  height: 8px;
+  border-radius: 4px;
+  background: var(--gray-100);
+  overflow: hidden;
+  margin-top: 4px;
+}
+.rank-bar > div { height: 100%; border-radius: 4px; transition: width .3s; }
+
+.sub-row { font-size: 12px; color: var(--gray-500); cursor: pointer; user-select: none; }
+.sub-row:hover { color: var(--cyan-dark); }
+.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 var(--gray-100); }
+.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: var(--white);
+  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 var(--gray-100);
+  flex-wrap: wrap;
+}
+.file-item .fn { font-size: 12px; flex: 1; min-width: 80px; }
+.file-item .fs { font-size: 10px; color: var(--gray-500); }
+.file-item a { font-size: 11px; color: var(--cyan-dark); cursor: pointer; text-decoration: underline; }
+
+.stor-bar { font-size: 11px; color: var(--gray-500); 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); }
+}