From 2b047a5f676b5ce07ab049b146d913a10b3a7f8f Mon Sep 17 00:00:00 2001
From: host <arumyantsev@rummail.ru>
Date: Thu, 30 Jul 2026 16:55:24 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=91?=
 =?UTF-8?q?=D0=BD=20index.html:=20=D0=BC=D0=BE=D0=B4=D1=83=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=8F=20=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83?=
 =?UTF-8?q?=D1=80=D0=B0,=20=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B8=20=D1=81=D0=BA?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BF=D1=82=D1=8B,=20=D1=81=D1=82=D0=B0=D1=82?=
 =?UTF-8?q?=D1=83=D1=81-=D0=B1=D0=B0=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 469 ++++++++++++++++++++---------------------------------
 1 file changed, 178 insertions(+), 291 deletions(-)

diff --git a/index.html b/index.html
index 47c51cb..07a29f1 100644
--- a/index.html
+++ b/index.html
@@ -4,148 +4,41 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Сверка выручки водителей</title>
-    <style>
-        :root {
-            --primary: #6366f1;
-            --primary-dark: #4f46e5;
-            --primary-light: #a5b4fc;
-            --bg-start: #4f46e5;
-            --bg-end: #7c3aed;
-            --surface: #ffffff;
-            --surface-alt: #f8fafc;
-            --text: #1e293b;
-            --text-secondary: #64748b;
-            --text-muted: #94a3b8;
-            --border: #e2e8f0;
-            --success: #10b981;
-            --warning: #f59e0b;
-            --danger: #ef4444;
-            --radius: 16px;
-            --radius-sm: 8px;
-            --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
-            --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
-            --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
-        }
-        [data-theme="dark"] {
-            --bg-start: #111827;
-            --bg-end: #1e293b;
-            --surface: #1f2937;
-            --surface-alt: #111827;
-            --text: #f9fafb;
-            --text-secondary: #d1d5db;
-            --text-muted: #9ca3af;
-            --border: #374151;
-        }
-        * {margin:0;padding:0;box-sizing:border-box;}
-        body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
-            background:linear-gradient(160deg,var(--bg-start) 0%,var(--bg-end) 50%,#a855f7 100%);
-            min-height:100vh;color:var(--text);line-height:1.6;}
-        .container {max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem;position:relative;z-index:1;}
-        .hero {text-align:center;padding:2rem 1rem 3rem;color:white;}
-        .hero-badge {display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
-            padding:0.4rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:500;margin-bottom:1.25rem;border:1px solid rgba(255,255,255,0.2);}
-        .hero h1 {font-size:clamp(1.8rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:0.75rem;text-shadow:0 2px 10px rgba(0,0,0,0.15);}
-        .hero-subtitle {font-size:1.05rem;opacity:0.9;max-width:650px;margin:0 auto;line-height:1.7;}
-        .card {background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-bottom:1.5rem;overflow:hidden;transition:box-shadow var(--transition);}
-        .card:hover {box-shadow:0 15px 50px rgba(0,0,0,0.15);}
-        .card-head {display:flex;align-items:center;gap:1rem;padding:1.25rem 2rem;border-bottom:1px solid var(--border);background:var(--surface-alt);}
-        .step-badge {width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--bg-end));color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;}
-        .card-head h2 {font-size:1.25rem;font-weight:700;}
-        .card-body {padding:2rem;}
-        .dropzone {border:2px dashed var(--border);border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all var(--transition);
-            background:var(--surface-alt);}
-        .dropzone:hover,.dropzone.dragover {border-color:var(--primary);background:#eef2ff;transform:scale(1.01);}
-        .dropzone.dragover {box-shadow:0 0 0 4px rgba(99,102,241,0.15);}
-        .dropzone-icon {width:72px;height:72px;margin:0 auto 1.25rem;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform var(--transition);}
-        .dropzone:hover .dropzone-icon {transform:scale(1.1);}
-        .dropzone-title {font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;}
-        .dropzone-hint {font-size:0.9rem;color:var(--text-secondary);max-width:450px;margin:0 auto;}
-        .file-list {margin-top:1.5rem;}
-        .file-item {display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:var(--surface-alt);border-radius:var(--radius-sm);
-            margin-bottom:0.5rem;border:1px solid var(--border);animation:slideIn .3s ease;}
-        @keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
-        .file-icon {width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
-        .file-icon.vedomost{background:#dbeafe;}
-        .file-icon.transaction{background:#fef3c7;}
-        .file-info {flex:1;min-width:0;}
-        .file-name {font-size:0.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-        .file-type {font-size:0.8rem;color:var(--text-muted);}
-        .file-remove {width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-muted);
-            font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
-        .file-remove:hover {background:#fee2e2;color:var(--danger);}
-        .actions {display:flex;gap:0.75rem;margin-top:1.5rem;flex-wrap:wrap;}
-        .btn {padding:0.75rem 1.75rem;border:none;border-radius:10px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all var(--transition);
-            display:inline-flex;align-items:center;gap:0.5rem;}
-        .btn-primary {background:linear-gradient(135deg,var(--primary),var(--bg-end));color:white;box-shadow:0 4px 15px rgba(99,102,241,0.35);}
-        .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px rgba(99,102,241,0.45);}
-        .btn-primary:disabled{opacity:0.4;cursor:not-allowed;}
-        .btn-outline {background:transparent;color:var(--text-secondary);border:1.5px solid var(--border);}
-        .btn-outline:hover:not(:disabled){background:var(--surface-alt);border-color:var(--text-muted);}
-        .btn-success {background:linear-gradient(135deg,#10b981,#059669);color:white;box-shadow:0 4px 15px rgba(16,185,129,0.3);}
-        .btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,0.4);}
-        .btn-export {background:linear-gradient(135deg,#f59e0b,#d97706);color:white;}
-        .btn-export:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,0.4);}
-        .btn-theme {background:linear-gradient(135deg,#94a3b8,#64748b);color:white;}
-        .btn-theme:hover{transform:translateY(-2px);}
-        .progress-bar {width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:1rem;display:none;}
-        .progress-bar.active{display:block;}
-        .progress-fill {height:100%;background:linear-gradient(90deg,var(--primary),var(--bg-end));border-radius:2px;transition:width .3s ease;width:0%;}
-        .table-wrap {overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);}
-        table {width:100%;border-collapse:collapse;font-size:0.875rem;}
-        thead{background:var(--surface-alt);} th, td {padding:0.75rem 1rem;border-bottom:1px solid var(--border);}
-        th {font-weight:600;color:var(--text-secondary);white-space:nowrap;cursor:pointer;}
-        tbody tr:hover{background:#f8fafc;}
-        tbody tr:last-child td{border-bottom:none;}
-        .badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.65rem;border-radius:6px;font-size:0.8rem;font-weight:600;}
-        .badge-ok{background:#d1fae5;color:#065f46;}
-        .badge-warn{background:#fef3c7;color:#92400e;}
-        .badge-err{background:#fee2e2;color:#991b1b;}
-        .tabs-wrapper {border-bottom:2px solid var(--border);margin-bottom:1.5rem;display:flex;gap:0.25rem;overflow-x:auto;scrollbar-width:none;}
-        .tabs-wrapper::-webkit-scrollbar{display:none;}
-        .tab-btn {padding:0.75rem 1.25rem;background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;font-size:0.9rem;font-weight:600;color:var(--text-muted);white-space:nowrap;transition:all var(--transition);margin-bottom:-2px;}
-        .tab-btn:hover{color:var(--primary);} .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
-        .tab-btn .count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:var(--primary-light);color:var(--primary-dark);border-radius:10px;font-size:0.75rem;padding:0 6px;margin-left:0.35rem;}
-        .tab-panel{display:none;animation:fadeUp .3s ease;}
-        .tab-panel.active{display:block;}
-        @keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
-        .empty-state{text-align:center;padding:3rem 1rem;}
-        .empty-state-icon{font-size:4rem;margin-bottom:1rem;opacity:0.3;}
-        .empty-state p{color:var(--text-muted);}
-        .info-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;}
-        .info-head{padding:1.25rem 2rem;border-bottom:1px solid var(--border);background:var(--surface-alt);display:flex;align-items:center;gap:0.75rem;}
-        .info-head h2{font-size:1.25rem;font-weight:700;}
-        .info-grid{padding:1.5rem 2rem;display:grid;gap:1.25rem;}
-        .info-block{display:flex;gap:1rem;padding:1.25rem;background:var(--surface-alt);border-radius:12px;border:1px solid var(--border);transition:border-color var(--transition);}
-        .info-block:hover{border-color:var(--primary-light);}
-        .info-block-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
-        .info-block-icon.blue{background:#dbeafe;}
-        .info-block-icon.green{background:#d1fae5;}
-        .info-block-icon.amber{background:#fef3c7;}
-        .info-block-icon.purple{background:#ede9fe;}
-        .info-block-icon.rose{background:#ffe4e6;}
-        .info-block-title{font-weight:700;font-size:0.95rem;margin-bottom:0.35rem;}
-        .info-block-text{font-size:0.9rem;color:var(--text-secondary);line-height:1.65;}
-        .footer{text-align:center;padding:2rem 1rem;color:rgba(255,255,255,0.6);font-size:0.85rem;}
-        @media (max-width:768px){.container{padding:1rem 0.75rem 3rem;}.hero{padding:1.5rem 0.5rem 2rem;}.card-head{padding:1rem 1.25rem;}.card-body{padding:1.25rem;}.dropzone{padding:2rem 1rem;}.actions{flex-direction:column;}.btn{width:100%;justify-content:center;}.info-grid{padding:1rem;}.info-block{flex-direction:column;}}
-    </style>
+    <link rel="stylesheet" href="styles.css">
+    <!-- Библиотека XLSX для чтения/записи Excel-файлов -->
     <script src="https://cdn.jsdelivr.net/npm/xlsx@0.19.2/dist/xlsx.full.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"></script>
 </head>
 <body>
 <div class="container">
     <header class="hero">
-        <div class="hero-badge">[LOCK] Работает офлайн — файлы не отправляются на сервер</div>
+        <div class="hero-badge">🔒 Работает офлайн — файлы не отправляются на сервер</div>
         <h1>Сверка выручки водителей</h1>
         <p class="hero-subtitle">Загрузите ведомости приёма наличных и выгрузку транзакций — получите сводную таблицу, расхождения и готовый Excel-отчёт</p>
     </header>
+
+    <!-- Статус-бар -->
+    <div class="status-bar" id="statusBar" style="display:none"></div>
+
     <!-- Файлы -->
     <section class="card">
-        <div class="card-head"><div class="step-badge">1</div><h2>Файлы</h2></div>
+        <div class="card-head">
+            <div class="step-badge">1</div>
+            <h2>Файлы</h2>
+        </div>
         <div class="card-body">
             <div class="dropzone" id="dropzone">
-                <div class="dropzone-icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div>
+                <div class="dropzone-icon">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="17 8 12 3 7 8"/>
+                        <line x1="12" y1="3" x2="12" y2="15"/>
+                    </svg>
+                </div>
                 <div class="dropzone-title">Перетащите файлы сюда или нажмите для выбора</div>
-                <div class="dropzone-hint">Любое число ведомостей (<strong>.xlsx</strong>) + одна выгрузка <strong>TRANSACTIONS_EXT</strong>. Тип определяется автоматически.</div>
+                <div class="dropzone-hint">
+                    Любое число ведомостей (<strong>.xlsx</strong>) + выгрузка <strong>TRANSACTIONS_EXT</strong>.
+                    Тип определяется автоматически.
+                </div>
             </div>
             <input type="file" id="fileInput" multiple accept=".xlsx,.xls" style="display:none">
             <div class="file-list" id="fileList"></div>
@@ -153,196 +46,190 @@
                 <button class="btn btn-primary" id="btnReconcile" disabled>✓ Провести сверку</button>
                 <button class="btn btn-outline" id="btnClear" disabled>✕ Очистить</button>
                 <button class="btn btn-export" id="btnExportCsv" disabled>⬇ Экспорт CSV</button>
-                <button class="btn btn-theme" id="btnToggleTheme">[THEME] Переключить тему</button>
+                <button class="btn btn-theme" id="btnToggleTheme">🌙 Тёмная тема</button>
+            </div>
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
             </div>
-            <div class="progress-bar" id="progressBar"><div class="progress-fill" id="progressFill"></div></div>
         </div>
     </section>
+
     <!-- Результат -->
     <section class="card" id="resultCard">
-        <div class="card-head"><div class="step-badge">2</div><h2>Результат</h2></div>
+        <div class="card-head">
+            <div class="step-badge">2</div>
+            <h2>Результат</h2>
+        </div>
         <div class="card-body">
-            <div id="emptyState" class="empty-state"><div class="empty-state-icon">📋</div><p>Загрузите файлы и нажмите «Провести сверку»</p></div>
-            <div id="resultActions" style="display:none;margin-bottom:1.5rem;"><button class="btn btn-success" id="btnDownload">📥 Скачать Excel-отчёт</button></div>
+            <div id="emptyState" class="empty-state">
+                <div class="empty-state-icon">📋</div>
+                <p>Загрузите файлы и нажмите «Провести сверку»</p>
+            </div>
+            <div id="resultActions" style="display:none;margin-bottom:1.5rem;">
+                <button class="btn btn-success" id="btnDownload">📥 Скачать Excel-отчёт</button>
+            </div>
             <div id="tabsContainer" style="display:none;">
                 <div class="tabs-wrapper">
-                    <button class="tab-btn active" data-tab="discrepancies">Расхождения <span class="count" id="countDisc">0</span></button>
-                    <button class="tab-btn" data-tab="all">Все водители <span class="count" id="countAll">0</span></button>
+                    <button class="tab-btn active" data-tab="discrepancies">
+                        Расхождения <span class="count" id="countDisc">0</span>
+                    </button>
+                    <button class="tab-btn" data-tab="all">
+                        Все водители <span class="count" id="countAll">0</span>
+                    </button>
                     <button class="tab-btn" data-tab="cashiers">По кассирам</button>
                     <button class="tab-btn" data-tab="routes">По маршрутам</button>
                     <button class="tab-btn" data-tab="conclusions">Выводы</button>
                 </div>
+
+                <!-- Вкладка: Расхождения -->
                 <div class="tab-panel active" id="panel-discrepancies">
-                    <div class="table-wrap"><table><thead><tr><th data-key="driver">Водитель</th><th data-key="car">Гос. номер</th><th data-key="given">Сдано (₽)</th><th data-key="collected">Собрано (₽)</th><th data-key="diff">Расхождение</th><th>Статус</th></tr></thead><tbody id="tableDiscrepancies"></tbody></table></div>
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th data-key="driver">Водитель</th>
+                                    <th data-key="car">Гос. номер</th>
+                                    <th data-key="given">Сдано (₽)</th>
+                                    <th data-key="collected">Собрано (₽)</th>
+                                    <th data-key="diff">Расхождение</th>
+                                    <th>Статус</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableDiscrepancies"></tbody>
+                        </table>
+                    </div>
                 </div>
+
+                <!-- Вкладка: Все водители -->
                 <div class="tab-panel" id="panel-all">
-                    <div class="table-wrap"><table><thead><tr><th data-key="date">Дата</th><th data-key="driver">Водитель</th><th data-key="route">Маршрут</th><th data-key="given">Сдано (₽)</th><th data-key="collected">Собрано (₽)</th><th data-key="transactions">Σ Транзакций</th></tr></thead><tbody id="tableAll"></tbody></table></div>
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th data-key="date">Дата</th>
+                                    <th data-key="driver">Водитель</th>
+                                    <th data-key="route">Маршрут</th>
+                                    <th data-key="section">Тип</th>
+                                    <th data-key="given">Сдано (₽)</th>
+                                    <th data-key="collected">Собрано (₽)</th>
+                                    <th data-key="txCount">Транзакций</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableAll"></tbody>
+                        </table>
+                    </div>
                 </div>
+
+                <!-- Вкладка: По кассирам -->
                 <div class="tab-panel" id="panel-cashiers">
-                    <div class="table-wrap"><table><thead><tr><th data-key="cashier">Кассир</th><th>Ведомостей</th><th data-key="given">Сдано (₽)</th><th data-key="collected">Собрано (₽)</th><th data-key="diff">Расхождение</th></tr></thead><tbody id="tableCashiers"></tbody></table></div>
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th data-key="cashier">Кассир</th>
+                                    <th>Ведомостей</th>
+                                    <th data-key="given">Сдано (₽)</th>
+                                    <th data-key="collected">Собрано (₽)</th>
+                                    <th data-key="diff">Расхождение</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableCashiers"></tbody>
+                        </table>
+                    </div>
                 </div>
+
+                <!-- Вкладка: По маршрутам -->
                 <div class="tab-panel" id="panel-routes">
-                    <div class="table-wrap"><table><thead><tr><th data-key="route">Маршрут</th><th>Тип</th><th>Водителей</th><th data-key="sum">Сумма (₽)</th></tr></thead><tbody id="tableRoutes"></tbody></table></div>
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th data-key="route">Маршрут</th>
+                                    <th>Тип</th>
+                                    <th>Водителей</th>
+                                    <th data-key="sum">Сумма (₽)</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableRoutes"></tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- Вкладка: Выводы -->
+                <div class="tab-panel" id="panel-conclusions">
+                    <div id="conclusionsContent"></div>
                 </div>
-                <div class="tab-panel" id="panel-conclusions"><div id="conclusionsContent"></div></div>
             </div>
         </div>
     </section>
+
     <!-- Как это работает -->
     <section class="info-card">
-        <div class="info-head"><span style="font-size:1.4rem">💡</span><h2>Как это работает</h2></div>
+        <div class="info-head">
+            <span style="font-size:1.4rem">💡</span>
+            <h2>Как это работает</h2>
+        </div>
         <div class="info-grid">
-            <div class="info-block"><div class="info-block-icon blue">📄</div><div><div class="info-block-title">Определение типа файла</div><div class="info-block-text">Ведомость распознаётся по заголовку «ВЕДОМОСТЬ ПРИЕМА НАЛИЧНЫХ СРЕДСТВ»; из неё берутся номер документа, дата, ФИО кассира, разделы «Город» / «Пригород» и строки водителей. Выгрузка распознаётся по столбцам CONDUCTOR, DATE и TARIF_SUM.</div></div></div>
-            <div class="info-block"><div class="info-block-icon green">📅</div><div><div class="info-block-title">Период</div><div class="info-block-text">Из транзакций берутся только даты, указанные в загруженных ведомостях. Остальные даты показываются справочно и в сверку не входят.</div></div></div>
-            <div class="info-block"><div class="info-block-icon amber">🔍</div><div><div class="info-block-title">Ключ сопоставления</div><div class="info-block-text">ФИО водителя + гос. номер ТС. Номера нормализуются (латинские A, B, C, E, H, K, M, O, P, T, X, Y заменяются на кириллические), ФИО приводятся к верхнему регистру, Ё→Е. Опечатки в ФИО сводятся нечётким сравнением при схожести ≥ 88%.</div></div></div>
-            <div class="info-block"><div class="info-block-icon purple">💰</div><div><div class="info-block-title">Суммы</div><div class="info-block-text">«Сдано» — графа «Итого на сумму» ведомости. «Собрано» — TARIF_SUM ÷ 100 (копейки → рубли) по всем транзакциям водителя за выбранные даты.</div></div></div>
-            <div class="info-block"><div class="info-block-icon rose">🔒</div><div><div class="info-block-title">Приватность</div><div class="info-block-text">Файлы никуда не отправляются — весь расчёт выполняется в браузере на вашем компьютере. Приложение работает без интернета.</div></div></div>
+            <div class="info-block">
+                <div class="info-block-icon blue">📄</div>
+                <div>
+                    <div class="info-block-title">Определение типа файла</div>
+                    <div class="info-block-text">
+                        Ведомость распознаётся по заголовку «ВЕДОМОСТЬ ПРИЕМА НАЛИЧНЫХ СРЕДСТВ»;
+                        из неё берутся номер документа, дата, ФИО кассира, разделы «Город» / «Пригород»
+                        и строки водителей. Выгрузка распознаётся по столбцам CONDUCTOR, DATE и TARIF_SUM.
+                    </div>
+                </div>
+            </div>
+            <div class="info-block">
+                <div class="info-block-icon green">📅</div>
+                <div>
+                    <div class="info-block-title">Период</div>
+                    <div class="info-block-text">
+                        Из транзакций берутся только даты, указанные в загруженных ведомостях.
+                        Остальные даты в сверку не входят.
+                    </div>
+                </div>
+            </div>
+            <div class="info-block">
+                <div class="info-block-icon amber">🔍</div>
+                <div>
+                    <div class="info-block-title">Ключ сопоставления</div>
+                    <div class="info-block-text">
+                        ФИО водителя + гос. номер ТС. Номера нормализуются (латинские A, B, C, E, H, K, M, O, P, T, X, Y
+                        заменяются на кириллические), ФИО — верхний регистр, Ё→Е.
+                        Опечатки в ФИО сводятся нечётким сравнением при схожести ≥ 88%.
+                    </div>
+                </div>
+            </div>
+            <div class="info-block">
+                <div class="info-block-icon purple">💰</div>
+                <div>
+                    <div class="info-block-title">Суммы</div>
+                    <div class="info-block-text">
+                        «Сдано» — графа «Итого на сумму» ведомости.
+                        «Собрано» — TARIF_SUM ÷ 100 (копейки → рубли) по всем транзакциям водителя за выбранные даты.
+                    </div>
+                </div>
+            </div>
+            <div class="info-block">
+                <div class="info-block-icon rose">🔒</div>
+                <div>
+                    <div class="info-block-title">Приватность</div>
+                    <div class="info-block-text">
+                        Файлы никуда не отправляются — весь расчёт выполняется в браузере на вашем компьютере.
+                        Приложение работает полностью офлайн.
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
-    <div class="footer">Сверка выручки водителей — все вычисления выполняются локально в вашем браузере</div>
+
+    <div class="footer">
+        Сверка выручки водителей — все вычисления выполняются локально в вашем браузере
+    </div>
 </div>
-<script type="module">
-/* utils.js */
-export async function readExcel(file){
-    const arr = await file.arrayBuffer();
-    const wb = XLSX.read(arr,{type:'array'});
-    return wb.SheetNames.map(name=>({name,data:XLSX.utils.sheet_to_json(wb.Sheets[name],{header:1})}));
-}
-export function validateFile(file){
-    const allowed=['.xlsx','.xls'];
-    const ext=file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
-    if(!allowed.includes(ext)){alert('Недопустимый тип файла: '+ext);return false;}
-    return true;
-}
-export function arrayToCsv(data,headers){
-    const rows=data.map(r=>headers.map(h=>`"${String(r[h]??'').replace(/"/g,'""')}"`).join(','));
-    return headers.join(',')+'\n'+rows.join('\n');
-}
-export function downloadFile(content,filename){
-    const blob=new Blob([content],{type:'text/plain;charset=utf-8'});
-    const url=URL.createObjectURL(blob);
-    const a=document.createElement('a');a.href=url;a.download=filename;a.click();
-    setTimeout(()=>URL.revokeObjectURL(url),1000);
-}
-/* ui.js */
-export function renderFileItem(file,index){
-    const isTrans=/transaction/i.test(file.name);
-    const el=document.createElement('div');el.className='file-item';
-    el.innerHTML=`<div class="file-icon ${isTrans?'transaction':'vedomost'}">${isTrans?'📊':'📋'}</div>
-        <div class="file-info"><div class="file-name">${file.name}</div><div class="file-type">${isTrans?'Выгрузка транзакций':'Ведомость'} · ${(file.size/1024).toFixed(0)} КБ</div></div>
-        <button class="file-remove" data-i="${index}" title="Удалить">✕</button>`;
-    return el;
-}
-export function sortData(data,key,asc=true){
-    return [...data].sort((a,b)=>{
-        const av=a[key]; const bv=b[key];
-        if(typeof av==='number' && typeof bv==='number') return asc?av-bv:bv-av;
-        return asc?String(av).localeCompare(String(bv),'ru'):String(bv).localeCompare(String(av),'ru');
-    });
-}
-export function enableSorting(tbodyId,sourceData){
-    const tbody=document.getElementById(tbodyId);
-    const table=tbody.closest('table');
-    const ths=table.querySelectorAll('th[data-key]');
-    let sortState={key:null,asc:true};
-    ths.forEach(th=>{
-        th.addEventListener('click',()=>{
-            const key=th.dataset.key;
-            if(sortState.key===key) sortState.asc=!sortState.asc; else {sortState.key=key; sortState.asc=true;}
-            const sorted=sortData(sourceData,key,sortState.asc);
-            renderTableBody(tbody,sorted);
-        });
-    });
-}
-export function renderTableBody(tbody,rows){
-    tbody.innerHTML=rows.map(r=>`<tr>${Object.values(r).map(v=>`<td>${Number(v).toLocaleString('ru-RU')}</td>`).join('')}</tr>`).join('');
-}
-/* main */
-import {readExcel,validateFile,arrayToCsv,downloadFile} from './utils.js';
-import {renderFileItem,enableSorting,renderTableBody} from './ui.js';
 
-const dropzone=document.getElementById('dropzone');
-const fileInput=document.getElementById('fileInput');
-const fileList=document.getElementById('fileList');
-const btnReconcile=document.getElementById('btnReconcile');
-const btnClear=document.getElementById('btnClear');
-const btnExportCsv=document.getElementById('btnExportCsv');
-const btnToggleTheme=document.getElementById('btnToggleTheme');
-const progressBar=document.getElementById('progressBar');
-const progressFill=document.getElementById('progressFill');
-const emptyState=document.getElementById('emptyState');
-const resultActions=document.getElementById('resultActions');
-const tabsContainer=document.getElementById('tabsContainer');
-let uploadedFiles=[]; let result=null; // хранит результат сверки
-
-dropzone.addEventListener('click',()=>fileInput.click());
-dropzone.addEventListener('dragover',e=>{e.preventDefault();dropzone.classList.add('dragover');});
-dropzone.addEventListener('dragleave',()=>dropzone.classList.remove('dragover'));
-dropzone.addEventListener('drop',e=>{e.preventDefault();dropzone.classList.remove('dragover');handleFiles(e.dataTransfer.files);});
-fileInput.addEventListener('change',e=>handleFiles(e.target.files));
-
-function handleFiles(files){
-    for(const f of files){ if(validateFile(f)) uploadedFiles.push(f); }
-    renderFileList(); updateButtons();
-}
-function renderFileList(){
-    fileList.innerHTML='';
-    uploadedFiles.forEach((f,i)=>{ const el=renderFileItem(f,i); fileList.appendChild(el); });
-    fileList.querySelectorAll('.file-remove').forEach(b=>b.addEventListener('click',e=>{ const idx=+e.currentTarget.dataset.i; uploadedFiles.splice(idx,1); renderFileList(); updateButtons(); }));
-}
-function updateButtons(){ const ok=uploadedFiles.length>0; btnReconcile.disabled=!ok; btnClear.disabled=!ok; btnExportCsv.disabled=!ok; }
-btnClear.addEventListener('click',()=>{ uploadedFiles=[]; fileInput.value=''; renderFileList(); updateButtons(); emptyState.style.display=''; resultActions.style.display='none'; tabsContainer.style.display='none'; });
-
-// Тема
-let theme=localStorage.getItem('theme')||'light'; applyTheme();
-btnToggleTheme.addEventListener('click',()=>{ theme=theme==='light'?'dark':'light'; localStorage.setItem('theme',theme); applyTheme(); });
-function applyTheme(){ document.documentElement.setAttribute('data-theme',theme); btnToggleTheme.textContent=theme==='light'?'[DARK] Тёмная тема':'[LIGHT] Светлая тема'; }
-
-// Сверка
-btnReconcile.addEventListener('click',async()=>{
-    progressBar.classList.add('active'); progressFill.style.width='0%'; let p=0; const iv=setInterval(()=>{ p+=Math.random()*20; if(p>=100){p=100; clearInterval(iv);} progressFill.style.width=p+'%'; },200);
-    const sheets=[]; for(const f of uploadedFiles){ const s=await readExcel(f); sheets.push({file:f,sheets:s}); }
-    // Для демо — генерируем фиктивные данные
-    const drivers=[
-        {driver:'ИВАНОВ И.И.',car:'А123ВС 77',given:5200,collected:5100,diff:-100,status:'warn'},
-        {driver:'ПЕТРОВ П.П.',car:'В456ОР 177',given:8400,collected:8400,diff:0,status:'ok'},
-        {driver:'СИДОРОВ С.С.',car:'Е789КН 50',given:3100,collected:3500,diff:400,status:'err'}
-    ];
-    const all=drivers.map(d=>({date:'2026-04-20',driver:d.driver,route:'Маршрут 1',given:d.given,collected:d.collected,transactions:d.collected/100}));
-    const cashiers=[{cashier:'Кассир 1',count:3,given:16700,collected:17000,diff:300}];
-    const routes=[{route:'Маршрут 1',type:'Город',drivers:3,sum:16700}];
-    const conclusions={totalDrivers:3,totalGiven:16700,totalCollected:17000,totalDiff:300};
-    result={drivers,all,cashiers,routes,conclusions};
-    renderResult();
-    progressBar.classList.remove('active'); clearInterval(iv);
-});
-
-function renderResult(){
-    emptyState.style.display='none'; resultActions.style.display=''; tabsContainer.style.display='';
-    const tbodyDisc=document.getElementById('tableDiscrepancies');
-    tbodyDisc.innerHTML=result.drivers.map(r=>`<tr><td>${r.driver}</td><td><code>${r.car}</code></td><td>${r.given.toLocaleString('ru-RU')}</td><td>${r.collected.toLocaleString('ru-RU')}</td><td style="color:${r.diff===0?'#10b981':'#ef4444'};font-weight:600">${r.diff>0?'+':''}${r.diff.toLocaleString('ru-RU')}</td><td><span class="badge badge-${r.status}">${r.status==='ok'?'✓ Совпадает':r.status==='warn'?'⚠ -100 ₽':'✕ +400 ₽'}</span></td></tr>`).join('');
-    document.getElementById('countDisc').textContent=result.drivers.filter(d=>d.diff!==0).length;
-    const tbodyAll=document.getElementById('tableAll');
-    tbodyAll.innerHTML=result.all.map(r=>`<tr><td>${r.date}</td><td>${r.driver}</td><td>${r.route}</td><td>${r.given.toLocaleString('ru-RU')}</td><td>${r.collected.toLocaleString('ru-RU')}</td><td>${r.transactions.toLocaleString('ru-RU')}</td></tr>`).join('');
-    document.getElementById('countAll').textContent=result.all.length;
-    const tbodyCash=document.getElementById('tableCashiers');
-    tbodyCash.innerHTML=result.cashiers.map(r=>`<tr><td>${r.cashier}</td><td>${r.count}</td><td>${r.given.toLocaleString('ru-RU')}</td><td>${r.collected.toLocaleString('ru-RU')}</td><td>${r.diff.toLocaleString('ru-RU')}</td></tr>`).join('');
-    const tbodyRoutes=document.getElementById('tableRoutes');
-    tbodyRoutes.innerHTML=result.routes.map(r=>`<tr><td>${r.route}</td><td>${r.type}</td><td>${r.drivers}</td><td>${r.sum.toLocaleString('ru-RU')}</td></tr>`).join('');
-    const conc=result.conclusions;
-    document.getElementById('conclusionsContent').innerHTML=`<div style="padding:1rem 0"><div class="info-block" style="border-left:4px solid #10b981"><div><div class="info-block-title" style="color:#065f46">Итого сверено: ${conc.totalDrivers} водителей</div><div class="info-block-text">Сдано: ${conc.totalGiven.toLocaleString('ru-RU')} ₽ · Собрано: ${conc.totalCollected.toLocaleString('ru-RU')} ₽ · Расхождение: ${conc.totalDiff>0?'+':''}${conc.totalDiff.toLocaleString('ru-RU')} ₽</div></div></div></div>`;
-    // сортировка
-    enableSorting('tableDiscrepancies',result.drivers);
-    enableSorting('tableAll',result.all);
-    enableSorting('tableCashiers',result.cashiers);
-    enableSorting('tableRoutes',result.routes);
-}
-
-// CSV export
-btnExportCsv.addEventListener('click',()=>{ if(!result) return; const data=result.drivers.map(r=>({driver:r.driver,car:r.car,given:r.given,collected:r.collected,diff:r.diff,status:r.status})); const csv=arrayToCsv(data,['driver','car','given','collected','diff','status']); downloadFile(csv,'discrepancies.csv'); });
-
-// переключатели вкладок
-document.querySelectorAll('.tab-btn').forEach(b=>b.addEventListener('click',()=>{ document.querySelectorAll('.tab-btn').forEach(x=>x.classList.remove('active')); document.querySelectorAll('.tab-panel').forEach(x=>x.classList.remove('active')); b.classList.add('active'); document.getElementById('panel-'+b.dataset.tab).classList.add('active'); }));
-</script>
+<script type="module" src="main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file