From d26427eb3add5b3e947a61f5edb8231e2901ead1 Mon Sep 17 00:00:00 2001
From: Rollan_Tuleuov <rolltul@gmail.com>
Date: Tue, 18 Aug 2026 10:12:26 +0000
Subject: [PATCH] =?UTF-8?q?=D0=A2=D1=91=D0=BC=D0=BD=D0=B0=D1=8F=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B0=20=D0=B2=20=D1=81=D1=82=D1=80=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=D0=BC=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 77 +++++++++++++++++++++++++++---------------------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index 50dce4b..fe97168 100644
--- a/index.html
+++ b/index.html
@@ -6,56 +6,57 @@
   <title>Исполнение бюджета закупок</title>
   <style>
     * { margin: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f5f5f7; color: #1d1d1f; }
+    body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0f0f0f; color: #e0e0e0; }
     .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
-    header { background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%); color: white; padding: 30px 20px; margin-bottom: 30px; }
-    header h1 { font-size: 28px; margin-bottom: 8px; }
-    header p { opacity: 0.9; font-size: 14px; }
+    header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #e0e0e0; padding: 30px 20px; margin-bottom: 30px; border-bottom: 1px solid #2a2a3e; }
+    header h1 { font-size: 28px; margin-bottom: 8px; color: #ffffff; }
+    header p { opacity: 0.8; font-size: 14px; color: #a0a0a0; }
     .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
-    .stat-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-    .stat-card .value { font-size: 28px; font-weight: bold; color: #0071e3; }
-    .stat-card .label { font-size: 13px; color: #86868b; margin-top: 4px; }
-    .filters { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
+    .stat-card { background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; }
+    .stat-card .value { font-size: 28px; font-weight: bold; color: #4a9eff; }
+    .stat-card .label { font-size: 13px; color: #808080; margin-top: 4px; }
+    .filters { background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; margin-bottom: 20px; }
     .filters-row { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
-    .filters input, .filters select { padding: 10px 14px; border: 1px solid #d2d2d7; border-radius: 8px; font-size: 14px; }
+    .filters input, .filters select { padding: 10px 14px; border: 1px solid #3a3a3a; border-radius: 6px; font-size: 14px; background: #252525; color: #e0e0e0; }
     .filters input { flex: 1; min-width: 250px; }
-    .filters button { padding: 10px 20px; background: #0071e3; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
-    .filters button:hover { background: #005bb5; }
-    .filters button.secondary { background: #86868b; }
-    .filters button.secondary:hover { background: #5e5e60; }
-    .table-container { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
+    .filters input::placeholder { color: #606060; }
+    .filters button { padding: 10px 20px; background: #4a9eff; color: #000; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
+    .filters button:hover { background: #3a8eef; }
+    .filters button.secondary { background: #404040; color: #e0e0e0; }
+    .filters button.secondary:hover { background: #505050; }
+    .table-container { background: #1a1a1a; border-radius: 8px; border: 1px solid #2a2a2a; overflow: hidden; }
     table { width: 100%; border-collapse: collapse; font-size: 13px; }
-    thead { background: #f5f5f7; position: sticky; top: 0; }
-    th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e5e5e5; }
-    th { font-weight: 600; color: #1d1d1f; white-space: nowrap; cursor: pointer; }
-    th:hover { background: #e5e5e5; }
-    tr:hover { background: #f5f5f7; }
+    thead { background: #252525; position: sticky; top: 0; }
+    th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #2a2a2a; }
+    th { font-weight: 600; color: #c0c0c0; white-space: nowrap; cursor: pointer; }
+    th:hover { background: #303030; }
+    tr:hover { background: #252525; }
     .amount { text-align: right; font-family: "SF Mono", Monaco, monospace; }
     .percent { text-align: right; font-family: "SF Mono", Monaco, monospace; }
     .status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
-    .status-ok { background: #d4edda; color: #155724; }
-    .status-warn { background: #fff3cd; color: #856404; }
-    .status-error { background: #f8d7da; color: #721c24; }
-    .pagination { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-top: 1px solid #e5e5e5; }
-    .pagination-info { font-size: 13px; color: #86868b; }
+    .status-ok { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid #22c55e; }
+    .status-warn { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid #eab308; }
+    .status-error { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
+    .pagination { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-top: 1px solid #2a2a2a; background: #1f1f1f; }
+    .pagination-info { font-size: 13px; color: #808080; }
     .pagination-controls { display: flex; gap: 8px; }
-    .pagination-controls button { padding: 8px 16px; border: 1px solid #d2d2d7; background: white; border-radius: 6px; cursor: pointer; }
-    .pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
-    .pagination-controls button:hover:not(:disabled) { background: #f5f5f7; }
-    .export-btn { position: fixed; bottom: 30px; right: 30px; padding: 14px 24px; background: #34c759; color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(52,199,89,0.4); }
-    .export-btn:hover { background: #28a745; }
-    .loading { text-align: center; padding: 60px 20px; color: #86868b; }
-    .about-section { background: white; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-    .about-section h2 { font-size: 22px; margin-bottom: 20px; color: #1d1d1f; }
+    .pagination-controls button { padding: 8px 16px; border: 1px solid #3a3a3a; background: #252525; color: #e0e0e0; border-radius: 6px; cursor: pointer; }
+    .pagination-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
+    .pagination-controls button:hover:not(:disabled) { background: #303030; }
+    .export-btn { position: fixed; bottom: 30px; right: 30px; padding: 14px 24px; background: #22c55e; color: #000; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(34, 197, 89, 0.3); }
+    .export-btn:hover { background: #16a34a; }
+    .loading { text-align: center; padding: 60px 20px; color: #808080; }
+    .about-section { background: #1a1a1a; border-radius: 8px; padding: 30px; margin-bottom: 30px; border: 1px solid #2a2a2a; }
+    .about-section h2 { font-size: 22px; margin-bottom: 20px; color: #e0e0e0; }
     .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
-    .about-card { background: #f5f5f7; padding: 20px; border-radius: 10px; }
-    .about-card h3 { font-size: 16px; margin: 12px 0 8px; color: #1d1d1f; }
-    .about-card p { font-size: 13px; color: #515154; line-height: 1.6; margin: 0; }
+    .about-card { background: #252525; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; }
+    .about-card h3 { font-size: 16px; margin: 12px 0 8px; color: #e0e0e0; }
+    .about-card p { font-size: 13px; color: #a0a0a0; line-height: 1.6; margin: 0; }
     .about-icon { font-size: 32px; }
     .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
-    .status-dot.status-ok { background: #22c55e; }
-    .status-dot.status-warn { background: #eab308; }
-    .status-dot.status-error { background: #ef4444; }
+    .status-dot.status-ok { background: #4ade80; }
+    .status-dot.status-warn { background: #facc15; }
+    .status-dot.status-error { background: #f87171; }
   </style>
 </head>
 <body>