Refactor menu flows into dedicated pages

2026-05-16 11:59:09 +09:00
parent 01a69fc42d
commit ecfb5aa949
20 changed files with 2415 additions and 97 deletions
--- a/web/data_exchange.html
+++ b/web/data_exchange.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#16806a" />
+    <title>Импорт и экспорт</title>
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="stylesheet" href="/static/styles.css" />
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+  </head>
+  <body class="auth-required flow-page">
+    <div class="auth-overlay" id="authOverlay">
+      <div class="auth-panel">
+        <p class="eyebrow">CarPass</p>
+        <h1>Импорт и экспорт</h1>
+        <p>Откройте страницу через Telegram, чтобы выгрузить или перенести данные гаража.</p>
+        <div class="auth-actions">
+          <a id="telegramLoginLink" class="telegram-login-link hidden" href="#" rel="noreferrer">Открыть в Telegram</a>
+          <button id="telegramRetryBtn" class="telegram-secondary-btn" type="button">Проверить вход</button>
+        </div>
+      </div>
+    </div>
+
+    <main class="shell flow-shell">
+      <header class="topbar">
+        <div>
+          <p class="eyebrow">Данные</p>
+          <h1>Импорт и экспорт</h1>
+        </div>
+        <a class="ghost-btn" href="/">Меню</a>
+      </header>
+
+      <section class="flow-hero">
+        <div>
+          <p class="eyebrow">Обмен данными</p>
+          <h2>CarPass exchange v1</h2>
+          <small>Экспорт включает автомобили, расходы, записи, заказ-наряды как архив и собственные СТО.</small>
+        </div>
+        <span class="trust-badge">JSON</span>
+      </section>
+
+      <section class="flow-layout">
+        <section class="workspace">
+          <div class="form-block">
+            <p class="eyebrow">Экспорт</p>
+            <h3>Выгрузить мои данные</h3>
+            <small>Файл подходит для резервной копии или переноса в другой аккаунт. Активные заказ-наряды не создаются при импорте.</small>
+          </div>
+          <div class="row-actions">
+            <button id="exportBtn" type="button">Скачать JSON</button>
+          </div>
+          <div id="exportSummary" class="stack-list"></div>
+        </section>
+
+        <section class="workspace">
+          <div class="form-block">
+            <p class="eyebrow">Импорт</p>
+            <h3>Загрузить файл</h3>
+            <small>Импорт создает недостающие автомобили и записи, а совпавшие карточки дополняет только пустыми полями.</small>
+          </div>
+          <form id="importForm" class="grid-form drawer-form flow-form">
+            <label class="wide">
+              Файл JSON
+              <input id="importFile" name="file" type="file" accept="application/json,.json" required />
+            </label>
+            <div class="row-actions wide">
+              <button id="previewBtn" type="button">Проверить файл</button>
+              <button id="importBtn" type="submit">Импортировать</button>
+            </div>
+          </form>
+          <div id="importSummary" class="stack-list"></div>
+        </section>
+      </section>
+    </main>
+
+    <div class="toast hidden" id="toast" role="status" aria-live="polite"></div>
+    <script src="/static/page_common.js"></script>
+    <script src="/static/data_exchange.js"></script>
+  </body>
+</html>