142 lines
6.2 KiB
HTML
142 lines
6.2 KiB
HTML
<!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">
|
||
<details class="advanced-fields compact-filter">
|
||
<summary>Фильтры</summary>
|
||
<label>
|
||
Город
|
||
<input name="city" placeholder="Seoul" />
|
||
</label>
|
||
<label>
|
||
Специализация
|
||
<input name="specialization" placeholder="BMW, масло, тормоза" />
|
||
</label>
|
||
<button type="submit">Найти</button>
|
||
</details>
|
||
</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>
|
||
<div class="preset-row quick-service-pills wide" aria-label="Быстрый выбор услуги">
|
||
<button type="button" data-booking-service="oil_change">Масло</button>
|
||
<button type="button" data-booking-service="diagnostics">Диагностика</button>
|
||
<button type="button" data-booking-service="tire_service">Шины</button>
|
||
<button type="button" data-booking-service="brakes">Тормоза</button>
|
||
</div>
|
||
<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>
|