145 lines
6.2 KiB
HTML
145 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">
|
||
<title>Показания воды</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>💧 Показания воды</h1>
|
||
<p class="subtitle">Расчёт стоимости горячей и холодной воды</p>
|
||
</header>
|
||
|
||
<section class="card">
|
||
<h2>Введите показания</h2>
|
||
<div class="meters-visual">
|
||
<div class="meter-card cold">
|
||
<div class="meter-image">
|
||
<svg viewBox="0 0 120 120" class="meter-svg">
|
||
<circle cx="60" cy="60" r="55" fill="#e3f2fd" stroke="#2196f3" stroke-width="3"/>
|
||
<circle cx="60" cy="60" r="45" fill="white" stroke="#2196f3" stroke-width="2"/>
|
||
<text x="60" y="50" text-anchor="middle" font-size="14" fill="#1976d2" font-weight="bold">ХОЛОДНАЯ</text>
|
||
<text x="60" y="75" text-anchor="middle" font-size="24" fill="#1976d2" font-weight="bold">💧</text>
|
||
<circle cx="60" cy="60" r="3" fill="#2196f3"/>
|
||
<line x1="60" y1="60" x2="60" y2="40" stroke="#2196f3" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="coldCurrent">Текущие показания (м³)</label>
|
||
<input type="number" id="coldCurrent" step="0.01" placeholder="0.00" required>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="coldPrev">Предыдущие (м³)</label>
|
||
<input type="number" id="coldPrev" step="0.01" placeholder="0.00">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meter-card hot">
|
||
<div class="meter-image">
|
||
<svg viewBox="0 0 120 120" class="meter-svg">
|
||
<circle cx="60" cy="60" r="55" fill="#ffebee" stroke="#f44336" stroke-width="3"/>
|
||
<circle cx="60" cy="60" r="45" fill="white" stroke="#f44336" stroke-width="2"/>
|
||
<text x="60" y="50" text-anchor="middle" font-size="14" fill="#c62828" font-weight="bold">ГОРЯЧАЯ</text>
|
||
<text x="60" y="75" text-anchor="middle" font-size="24" fill="#c62828" font-weight="bold">🔥</text>
|
||
<circle cx="60" cy="60" r="3" fill="#f44336"/>
|
||
<line x1="60" y1="60" x2="60" y2="40" stroke="#f44336" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="hotCurrent">Текущие показания (м³)</label>
|
||
<input type="number" id="hotCurrent" step="0.01" placeholder="0.00" required>
|
||
</div>
|
||
<div class="input-group">
|
||
<label for="hotPrev">Предыдущие (м³)</label>
|
||
<input type="number" id="hotPrev" step="0.01" placeholder="0.00">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary">Рассчитать</button>
|
||
<button type="button" id="clearBtn" class="btn-secondary">Очистить</button>
|
||
</section>
|
||
|
||
<section class="card" id="resultCard" style="display: none;">
|
||
<h2>Результаты расчёта</h2>
|
||
<div class="result-grid">
|
||
<div class="result-item">
|
||
<span class="label">Холодная вода:</span>
|
||
<span class="value" id="coldUsage">0 м³</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="label">Горячая вода:</span>
|
||
<span class="value" id="hotUsage">0 м³</span>
|
||
</div>
|
||
<div class="result-item total">
|
||
<span class="label">Общий расход:</span>
|
||
<span class="value" id="totalUsage">0 м³</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cost-section">
|
||
<div class="input-group">
|
||
<label for="coldRate">Тариф холодной (₸/м³)</label>
|
||
<input type="number" id="coldRate" step="0.01" value="193.57">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="hotRate">Тариф горячей (₸/м³)</label>
|
||
<input type="number" id="hotRate" step="0.01" value="765.24">
|
||
</div>
|
||
|
||
<div class="cost-total">
|
||
<span class="cost-label">К оплате:</span>
|
||
<span class="cost-value" id="totalCost">0 ₸</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" id="saveBtn" class="btn-primary">Сохранить показания</button>
|
||
</section>
|
||
|
||
<section class="card" id="reminderCard">
|
||
<h2>🔔 Напоминание об оплате</h2>
|
||
<p class="reminder-desc">Установите дату, когда нужно напомнить об оплате квитанции</p>
|
||
|
||
<div class="input-group">
|
||
<label for="reminderDate">Дата напоминания</label>
|
||
<input type="date" id="reminderDate" required>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="reminderTime">Время</label>
|
||
<input type="time" id="reminderTime" value="09:00" required>
|
||
</div>
|
||
|
||
<button type="button" id="setReminderBtn" class="btn-primary">Установить напоминание</button>
|
||
|
||
<div id="activeReminder" class="active-reminder" style="display: none;">
|
||
<div class="reminder-status">
|
||
<span class="reminder-icon">⏰</span>
|
||
<span class="reminder-text">Напоминание установлено на:</span>
|
||
<span class="reminder-datetime" id="reminderDateTime"></span>
|
||
</div>
|
||
<button type="button" id="cancelReminderBtn" class="btn-secondary">Отменить</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card" id="historyCard">
|
||
<h2>История показаний</h2>
|
||
<div id="historyList">
|
||
<p class="empty-msg">Пока нет сохранённых показаний</p>
|
||
</div>
|
||
<button type="button" id="clearHistoryBtn" class="btn-secondary" style="display: none;">Очистить историю</button>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Сохраняйте показания каждый месяц для точного расчёта</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|