212 lines
8.6 KiB
HTML
212 lines
8.6 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>
|
||
<div class="top-actions">
|
||
<a class="ghost-btn" href="/">Гараж</a>
|
||
<button class="icon-btn" id="newVehicleBtn" title="Новое авто" aria-label="Новое авто">+</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="flow-hero">
|
||
<div>
|
||
<p class="eyebrow">Карточка авто</p>
|
||
<h2 id="pageTitle">Выберите автомобиль</h2>
|
||
<small id="pageHint">Данные отсюда используются в заказ-нарядах, подборе жидкостей и рекомендациях ТО.</small>
|
||
</div>
|
||
<div class="flow-steps">
|
||
<span class="active">1</span>
|
||
<span>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>
|
||
<div id="vehicleList" class="stack-list"></div>
|
||
</aside>
|
||
|
||
<section class="workspace">
|
||
<form id="vehicleProfileForm" class="grid-form drawer-form flow-form">
|
||
<div class="form-block wide">
|
||
<p class="eyebrow">1. Основа</p>
|
||
<h3>Идентификация</h3>
|
||
<small>VIN и госномер помогают СТО точно связать заказ-наряд с автомобилем.</small>
|
||
</div>
|
||
<label>
|
||
Название
|
||
<input name="name" placeholder="Kia K5" required />
|
||
</label>
|
||
<label>
|
||
Марка
|
||
<select name="make" id="makeSelect"></select>
|
||
</label>
|
||
<label>
|
||
Модель
|
||
<select name="model" id="modelSelect"></select>
|
||
</label>
|
||
<label>
|
||
Комплектация
|
||
<select name="trim" id="trimSelect"></select>
|
||
</label>
|
||
<label>
|
||
Год
|
||
<input name="year" type="number" min="1900" max="2100" />
|
||
</label>
|
||
<label>
|
||
Госномер
|
||
<input name="plate_number" placeholder="12가3456" />
|
||
</label>
|
||
<label>
|
||
VIN
|
||
<input name="vin" maxlength="17" placeholder="17 символов без I/O/Q" />
|
||
</label>
|
||
<label>
|
||
Текущий пробег
|
||
<input name="current_odometer" type="number" min="0" />
|
||
</label>
|
||
|
||
<div class="form-block wide">
|
||
<p class="eyebrow">2. Техника</p>
|
||
<h3>Жидкости и нормы</h3>
|
||
<small>Если СТО добавит материалы в заказ-наряд, пустые поля здесь будут дополняться автоматически.</small>
|
||
</div>
|
||
<label>
|
||
Тип топлива
|
||
<select name="fuel_type">
|
||
<option value="">Не задано</option>
|
||
<option value="gasoline">Бензин</option>
|
||
<option value="diesel">Дизель</option>
|
||
<option value="hybrid">Гибрид</option>
|
||
<option value="electric">Электро</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Объем двигателя, л
|
||
<input name="engine_volume_l" type="number" min="0" step="0.01" />
|
||
</label>
|
||
<label>
|
||
Коробка
|
||
<select name="transmission">
|
||
<option value="">Не задано</option>
|
||
<option value="manual">Механика</option>
|
||
<option value="automatic">Автомат</option>
|
||
<option value="cvt">CVT</option>
|
||
<option value="dct">DCT</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Привод
|
||
<select name="drive_type">
|
||
<option value="">Не задано</option>
|
||
<option value="fwd">Передний</option>
|
||
<option value="rwd">Задний</option>
|
||
<option value="awd">Полный</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Моторное масло
|
||
<input name="engine_oil_type" placeholder="5W-30 API SP" />
|
||
</label>
|
||
<label>
|
||
Объем масла, л
|
||
<input name="engine_oil_volume_l" type="number" min="0" step="0.01" />
|
||
</label>
|
||
<label>
|
||
Трансмиссионная жидкость
|
||
<input name="transmission_fluid_type" placeholder="ATF WS / DCTF / CVT" />
|
||
</label>
|
||
<label>
|
||
Объем трансмиссии, л
|
||
<input name="transmission_fluid_volume_l" type="number" min="0" step="0.01" />
|
||
</label>
|
||
<label>
|
||
Антифриз
|
||
<input name="coolant_type" placeholder="LLC / G48" />
|
||
</label>
|
||
<label>
|
||
Тормозная жидкость
|
||
<input name="brake_fluid_type" placeholder="DOT 4 LV" />
|
||
</label>
|
||
<label>
|
||
Размер шин
|
||
<input name="tire_size" placeholder="205/55 R16" />
|
||
</label>
|
||
<label>
|
||
Интервал масла, км
|
||
<input name="oil_change_interval_km" type="number" min="0" />
|
||
</label>
|
||
|
||
<div class="form-block wide">
|
||
<p class="eyebrow">3. Владение</p>
|
||
<h3>Расходы и заметки</h3>
|
||
<small>Эти данные влияют на стоимость владения и прогнозы.</small>
|
||
</div>
|
||
<label>
|
||
Стоимость покупки
|
||
<input name="purchase_price" type="number" min="0" step="0.01" />
|
||
</label>
|
||
<label>
|
||
Дата покупки
|
||
<input name="purchase_date" type="date" />
|
||
</label>
|
||
<label>
|
||
Тип покупки
|
||
<select name="purchase_type">
|
||
<option value="unknown">Не указано</option>
|
||
<option value="cash">Наличные</option>
|
||
<option value="credit">Кредит</option>
|
||
<option value="lease">Лизинг</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Заметки
|
||
<input name="notes" placeholder="Особенности авто" />
|
||
</label>
|
||
<div class="row-actions wide">
|
||
<button type="submit" id="saveVehicleBtn">Сохранить паспорт</button>
|
||
<button type="button" class="danger-btn hidden" id="deleteVehicleBtn">Удалить автомобиль</button>
|
||
</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/car_profile.js"></script>
|
||
</body>
|
||
</html>
|