Rollan_Tuleuov/napishi-programmu-ispolnenie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Тёмная тема в строгом стиле

Browse Source
This commit is contained in:
Rollan_Tuleuov 2026-08-18 10:12:26 +00:00
parent f27a8b95de
commit d26427eb3a
1 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -6,56 +6,57 @@
<title>Исполнение бюджета закупок</title> <title>Исполнение бюджета закупок</title>
<style> <style>
* { margin: 0; box-sizing: border-box; } * { 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; } .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 { 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; } header h1 { font-size: 28px; margin-bottom: 8px; color: #ffffff; }
header p { opacity: 0.9; font-size: 14px; } 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; } .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 { background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; }
.stat-card .value { font-size: 28px; font-weight: bold; color: #0071e3; } .stat-card .value { font-size: 28px; font-weight: bold; color: #4a9eff; }
.stat-card .label { font-size: 13px; color: #86868b; margin-top: 4px; } .stat-card .label { font-size: 13px; color: #808080; 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; } .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-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 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 input::placeholder { color: #606060; }
.filters button:hover { background: #005bb5; } .filters button { padding: 10px 20px; background: #4a9eff; color: #000; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.filters button.secondary { background: #86868b; } .filters button:hover { background: #3a8eef; }
.filters button.secondary:hover { background: #5e5e60; } .filters button.secondary { background: #404040; color: #e0e0e0; }
.table-container { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; } .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; } table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { background: #f5f5f7; position: sticky; top: 0; } thead { background: #252525; position: sticky; top: 0; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e5e5e5; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #2a2a2a; }
th { font-weight: 600; color: #1d1d1f; white-space: nowrap; cursor: pointer; } th { font-weight: 600; color: #c0c0c0; white-space: nowrap; cursor: pointer; }
th:hover { background: #e5e5e5; } th:hover { background: #303030; }
tr:hover { background: #f5f5f7; } tr:hover { background: #252525; }
.amount { text-align: right; font-family: "SF Mono", Monaco, monospace; } .amount { text-align: right; font-family: "SF Mono", Monaco, monospace; }
.percent { 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-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.status-ok { background: #d4edda; color: #155724; } .status-ok { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid #22c55e; }
.status-warn { background: #fff3cd; color: #856404; } .status-warn { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid #eab308; }
.status-error { background: #f8d7da; color: #721c24; } .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 #e5e5e5; } .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: #86868b; } .pagination-info { font-size: 13px; color: #808080; }
.pagination-controls { display: flex; gap: 8px; } .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 { padding: 8px 16px; border: 1px solid #3a3a3a; background: #252525; color: #e0e0e0; border-radius: 6px; cursor: pointer; }
.pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-controls button:hover:not(:disabled) { background: #f5f5f7; } .pagination-controls button:hover:not(:disabled) { background: #303030; }
.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 { 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: #28a745; } .export-btn:hover { background: #16a34a; }
.loading { text-align: center; padding: 60px 20px; color: #86868b; } .loading { text-align: center; padding: 60px 20px; color: #808080; }
.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 { background: #1a1a1a; border-radius: 8px; padding: 30px; margin-bottom: 30px; border: 1px solid #2a2a2a; }
.about-section h2 { font-size: 22px; margin-bottom: 20px; color: #1d1d1f; } .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-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 { background: #252525; padding: 20px; border-radius: 8px; border: 1px solid #2a2a2a; }
.about-card h3 { font-size: 16px; margin: 12px 0 8px; color: #1d1d1f; } .about-card h3 { font-size: 16px; margin: 12px 0 8px; color: #e0e0e0; }
.about-card p { font-size: 13px; color: #515154; line-height: 1.6; margin: 0; } .about-card p { font-size: 13px; color: #a0a0a0; line-height: 1.6; margin: 0; }
.about-icon { font-size: 32px; } .about-icon { font-size: 32px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.status-dot.status-ok { background: #22c55e; } .status-dot.status-ok { background: #4ade80; }
.status-dot.status-warn { background: #eab308; } .status-dot.status-warn { background: #facc15; }
.status-dot.status-error { background: #ef4444; } .status-dot.status-error { background: #f87171; }
</style> </style>
</head> </head>
<body> <body>