Refactor menu flows into dedicated pages
Some checks failed
ci / test (push) Has been cancelled

This commit is contained in:
VPN SaaS Dev
2026-05-16 11:59:09 +09:00
parent 01a69fc42d
commit ecfb5aa949
20 changed files with 2415 additions and 97 deletions

132
web/book_sto.html Normal file
View File

@@ -0,0 +1,132 @@
<!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 id="bookingTitle">Выберите сервис</h2>
<small id="bookingHint">После отправки СТО подтвердит время или предложит другое окно.</small>
</div>
<div class="flow-steps">
<span class="active">1</span>
<span class="active">2</span>
<span>3</span>
</div>
</section>
<section class="flow-layout">
<aside class="workspace flow-side">
<div class="section-head">
<div>
<p class="eyebrow">Каталог</p>
<h2>Сервисы</h2>
</div>
</div>
<form id="filterForm" class="grid-form drawer-form compact-form">
<label>
Город
<input name="city" placeholder="Seoul" />
</label>
<label>
Специализация
<input name="specialization" placeholder="BMW, масло, тормоза" />
</label>
<button type="submit">Найти</button>
</form>
<div id="serviceList" class="stack-list"></div>
</aside>
<section class="workspace">
<form id="bookingForm" class="grid-form drawer-form flow-form">
<div class="form-block wide">
<p class="eyebrow">1. Авто и услуга</p>
<h3>Что нужно сделать</h3>
<small>Если в карточке авто есть жидкости и нормы, СТО увидит их в заказ-наряде.</small>
</div>
<label>
Автомобиль
<select name="vehicle_id" id="vehicleSelect" required></select>
</label>
<label>
Услуга
<select name="service_type" id="serviceTypeSelect">
<option value="oil_change">Замена масла</option>
<option value="diagnostics">Диагностика</option>
<option value="maintenance">ТО</option>
<option value="tire_service">Шиномонтаж</option>
<option value="brakes">Тормоза</option>
<option value="repair">Ремонт</option>
<option value="other">Другое</option>
</select>
</label>
<label>
Длительность
<select name="estimated_duration_minutes" id="durationSelect">
<option value="60">1 час</option>
<option value="90">1.5 часа</option>
<option value="120">2 часа</option>
<option value="180">3 часа</option>
</select>
</label>
<label>
Дата
<input name="date" id="bookingDateInput" type="date" />
</label>
<div class="form-block wide">
<p class="eyebrow">2. Время</p>
<h3>Свободное окно</h3>
<small id="slotHint">Выберите СТО слева, затем дату и услугу.</small>
</div>
<label class="wide">
Окно записи
<select name="slot" id="slotSelect" required></select>
</label>
<label class="wide">
Комментарий
<textarea name="customer_comment" placeholder="Например: стук спереди справа, масло свое, нужен осмотр подвески"></textarea>
</label>
<div class="row-actions wide">
<button id="createBookingBtn" type="submit">Отправить заявку</button>
<a class="ghost-btn" href="/car_profile.html">Проверить карточку авто</a>
</div>
</form>
</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/book_sto.js"></script>
</body>
</html>