100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
|
<html lang="ru" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Калькулятор командировки</title>
|
|
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
|
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body data-kt-data-mode="demo">
|
|
|
|
<header class="kt-ai-pagehead">
|
|
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
|
<div class="apphead-brand">
|
|
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" height="28">
|
|
<div class="apphead-names">
|
|
<strong>Калькулятор командировки</strong>
|
|
<span>демо для руководства</span>
|
|
</div>
|
|
</div>
|
|
<span class="kt-ai-spacer"></span>
|
|
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="kt-ai-wrap calc-main">
|
|
<div class="calc-grid">
|
|
|
|
<section class="kt-ai-card calc-form-card">
|
|
<h2 class="calc-title">Параметры командировки</h2>
|
|
<p class="calc-sub">Введите значения — расчёт обновится при нажатии кнопки.</p>
|
|
|
|
<div class="kt-ai-field">
|
|
<label for="days">Дней в поездке</label>
|
|
<input class="kt-ai-input" id="days" type="number" min="1" step="1" value="5">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label for="perdiem">Суточные, тг / день</label>
|
|
<input class="kt-ai-input" id="perdiem" type="number" min="0" step="100" value="10000">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label for="transport">Проезд, тг</label>
|
|
<input class="kt-ai-input" id="transport" type="number" min="0" step="100" value="15000">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label for="hotel">Проживание, тг</label>
|
|
<input class="kt-ai-input" id="hotel" type="number" min="0" step="100" value="20000">
|
|
</div>
|
|
|
|
<div class="calc-actions">
|
|
<button class="kt-ai-btn" data-variant="primary" id="calc-btn" type="button">Рассчитать</button>
|
|
<button class="kt-ai-btn" data-variant="ghost" id="reset-btn" type="button">Демо-значения</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="kt-ai-card calc-result-card">
|
|
<h2 class="calc-title">Итоговая стоимость</h2>
|
|
|
|
<div class="kt-ai-kpi-strip calc-kpis">
|
|
<div class="kt-ai-kpi">
|
|
<span class="label">Суточные всего</span>
|
|
<span class="value" id="r-perdiem">—</span>
|
|
</div>
|
|
<div class="kt-ai-kpi">
|
|
<span class="label">Проезд</span>
|
|
<span class="value" id="r-transport">—</span>
|
|
</div>
|
|
<div class="kt-ai-kpi">
|
|
<span class="label">Проживание</span>
|
|
<span class="value" id="r-hotel">—</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calc-total">
|
|
<span class="label">Итого к выплате</span>
|
|
<span class="value" id="r-total">—</span>
|
|
</div>
|
|
|
|
<div class="kt-ai-empty calc-empty" id="empty-state" hidden>
|
|
<span class="title">Заполните значения для расчёта</span>
|
|
<p>Введите дни и ставки в полях слева — итог появится здесь.</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<footer class="calc-foot">
|
|
<span>© 2026 Калькулятор командировки — демонстрационная версия</span>
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|