226 lines
8.6 KiB
HTML
226 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
<style>
|
|
a.kt-ai-btn { text-decoration: none; }
|
|
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kt-ai-space-4); }
|
|
.result-box { background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-3xl); padding: var(--kt-ai-space-8); text-align: center; margin: var(--kt-ai-space-6) 0; }
|
|
.result-value { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); }
|
|
.result-label { color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2); }
|
|
.history-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--kt-ai-space-3); }
|
|
.kt-ai-table-container { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-3xl); overflow: hidden; }
|
|
.kt-ai-table { width: 100%; border-collapse: collapse; }
|
|
.kt-ai-table th { background: var(--kt-ai-bg-soft); text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); }
|
|
.kt-ai-table td { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-divider); font-size: var(--kt-ai-text-sm); }
|
|
.kt-ai-table tbody tr:hover { background: var(--kt-ai-bg-soft); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="kt-ai-pagehead">
|
|
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
|
<strong>Калькулятор аренды</strong>
|
|
<span class="kt-ai-spacer"></span>
|
|
<button class="kt-ai-btn" data-variant="ghost" onclick="clearHistory()">Очистить историю</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="kt-ai-hero" data-align="center">
|
|
<div class="kt-ai-wrap">
|
|
<h1>Расчёт стоимости аренды</h1>
|
|
<p class="kt-ai-hero-sub">Выберите оборудование, укажите срок и количество — получите итоговую сумму</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="kt-ai-section">
|
|
<div class="kt-ai-wrap" data-width="narrow">
|
|
<div class="kt-ai-card" style="padding: var(--kt-ai-space-6)">
|
|
<div class="calc-grid">
|
|
<div class="kt-ai-field">
|
|
<label>Тип оборудования</label>
|
|
<select id="equipment" class="kt-ai-select">
|
|
<option value="50000">Серверная стойка (50 000 ₸/мес)</option>
|
|
<option value="2000">Оптический терминал (2 000 ₸/мес)</option>
|
|
<option value="3500">Wi-Fi роутер (3 500 ₸/мес)</option>
|
|
</select>
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label>Срок аренды (мес)</label>
|
|
<input id="months" type="number" class="kt-ai-input" placeholder="12" min="1" value="12">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label>Количество (шт)</label>
|
|
<input id="quantity" type="number" class="kt-ai-input" placeholder="5" min="1" value="5">
|
|
</div>
|
|
<div class="kt-ai-field">
|
|
<label>Скидка (%)</label>
|
|
<input id="discount" type="number" class="kt-ai-input" placeholder="10" min="0" max="100" value="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-5)">
|
|
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="calculate()">Рассчитать</button>
|
|
<button class="kt-ai-btn" data-size="lg" onclick="resetForm()">Очистить</button>
|
|
</div>
|
|
|
|
<div class="result-box" id="resultBox" style="display: none">
|
|
<div class="result-value" id="resultValue">0 ₸</div>
|
|
<div class="result-label">Итоговая сумма</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="kt-ai-section" data-divider="true">
|
|
<div class="kt-ai-wrap">
|
|
<div class="kt-ai-section-head">
|
|
<h2>История расчётов</h2>
|
|
<p>Последние 5 расчётов сохраняются в браузере</p>
|
|
</div>
|
|
|
|
<div class="history-actions">
|
|
<span class="kt-ai-chip" id="historyCount">0 записей</span>
|
|
</div>
|
|
|
|
<div class="kt-ai-table-container">
|
|
<table class="kt-ai-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Дата</th>
|
|
<th>Оборудование</th>
|
|
<th>Срок</th>
|
|
<th>Кол-во</th>
|
|
<th>Скидка</th>
|
|
<th>Сумма</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="historyTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
|
<span>© 2026 Калькулятор аренды</span>
|
|
<span class="kt-ai-spacer"></span>
|
|
<span style="color: var(--kt-ai-fg-muted)">Демо-версия</span>
|
|
</footer>
|
|
|
|
<script>
|
|
const EQUIPMENT_NAMES = {
|
|
'50000': 'Серверная стойка',
|
|
'2000': 'Оптический терминал',
|
|
'3500': 'Wi-Fi роутер'
|
|
};
|
|
|
|
const DEMO_HISTORY = [
|
|
{ date: '15.08.2026', equipment: 'Серверная стойка', months: 12, quantity: 5, discount: 10, total: 540000 },
|
|
{ date: '20.08.2026', equipment: 'Wi-Fi роутер', months: 6, quantity: 10, discount: 5, total: 199500 }
|
|
];
|
|
|
|
function getHistory() {
|
|
const stored = localStorage.getItem('rentalHistory');
|
|
return stored ? JSON.parse(stored) : DEMO_HISTORY;
|
|
}
|
|
|
|
function saveHistory(history) {
|
|
localStorage.setItem('rentalHistory', JSON.stringify(history));
|
|
}
|
|
|
|
function formatNumber(num) {
|
|
return num.toString().replace(/\s/g, ' ');
|
|
}
|
|
|
|
function calculate() {
|
|
const price = parseInt(document.getElementById('equipment').value);
|
|
const months = parseInt(document.getElementById('months').value) || 0;
|
|
const quantity = parseInt(document.getElementById('quantity').value) || 0;
|
|
const discount = parseInt(document.getElementById('discount').value) || 0;
|
|
|
|
const baseAmount = price * months * quantity;
|
|
const discountAmount = baseAmount * (discount / 100);
|
|
const total = baseAmount - discountAmount;
|
|
|
|
document.getElementById('resultValue').textContent = formatNumber(Math.round(total)) + ' ₸';
|
|
document.getElementById('resultBox').style.display = 'block';
|
|
|
|
const equipmentName = EQUIPMENT_NAMES[price];
|
|
const record = {
|
|
date: new Date().toLocaleDateString('ru-RU'),
|
|
equipment: equipmentName,
|
|
months: months,
|
|
quantity: quantity,
|
|
discount: discount,
|
|
total: Math.round(total)
|
|
};
|
|
|
|
const history = getHistory();
|
|
history.unshift(record);
|
|
if (history.length > 5) history.pop();
|
|
saveHistory(history);
|
|
renderHistory();
|
|
}
|
|
|
|
function resetForm() {
|
|
document.getElementById('equipment').value = '50000';
|
|
document.getElementById('months').value = '12';
|
|
document.getElementById('quantity').value = '5';
|
|
document.getElementById('discount').value = '0';
|
|
document.getElementById('resultBox').style.display = 'none';
|
|
}
|
|
|
|
function deleteRecord(index) {
|
|
if (confirm('Удалить эту запись из истории?')) {
|
|
const history = getHistory();
|
|
history.splice(index, 1);
|
|
saveHistory(history);
|
|
renderHistory();
|
|
}
|
|
}
|
|
|
|
function clearHistory() {
|
|
if (confirm('Удалить всю историю расчётов?')) {
|
|
saveHistory([]);
|
|
renderHistory();
|
|
}
|
|
}
|
|
|
|
function renderHistory() {
|
|
const history = getHistory();
|
|
const tbody = document.getElementById('historyTable');
|
|
document.getElementById('historyCount').textContent = history.length + ' записей';
|
|
|
|
if (history.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: var(--kt-ai-fg-muted); padding: var(--kt-ai-space-6)">История пуста</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = history.map((item, index) => `
|
|
<tr>
|
|
<td>${item.date}</td>
|
|
<td>${item.equipment}</td>
|
|
<td>${item.months} мес</td>
|
|
<td>${item.quantity} шт</td>
|
|
<td>${item.discount}%</td>
|
|
<td><strong>${formatNumber(item.total)} ₸</strong></td>
|
|
<td><button class="kt-ai-btn" data-variant="ghost" data-size="sm" onclick="deleteRecord(${index})">Удалить</button></td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
renderHistory();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|