108 lines
3.6 KiB
HTML
108 lines
3.6 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>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="card calculator">
|
||
<h2>Расчет себестоимости</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="presetSelect">Тип расчета:</label>
|
||
<select id="presetSelect"></select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="speedInput">Необходимая скорость:</label>
|
||
<div class="input-with-unit">
|
||
<input type="number" id="speedInput" placeholder="Введите скорость" min="0" step="0.0001">
|
||
<span class="unit">Мбит/с</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="calculateBtn" class="btn-primary">РАССЧИТАТЬ</button>
|
||
|
||
<div id="resultBlock" class="result-block" style="display: none;">
|
||
<div class="result-main">
|
||
<span class="result-label">Себестоимость:</span>
|
||
<span id="resultValue" class="result-value">0,00 ₸</span>
|
||
</div>
|
||
|
||
<div class="result-details">
|
||
<h3>Расшифровка расчета</h3>
|
||
<div class="detail-row">
|
||
<span>Переменная часть:</span>
|
||
<span id="variablePart">0,00 ₸</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>Постоянная часть:</span>
|
||
<span id="fixedPart">0,00 ₸</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>Скорость:</span>
|
||
<span id="speedDisplay">0 Мбит/с</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="formula-block">
|
||
<h3>Формула:</h3>
|
||
<p id="formulaText"></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card history">
|
||
<div class="history-header">
|
||
<h2>История расчетов</h2>
|
||
<button id="clearHistoryBtn" class="btn-secondary">Очистить историю</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table id="historyTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>Тип</th>
|
||
<th>Скорость</th>
|
||
<th>Себестоимость</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<p id="noHistory" class="no-history">История пуста</p>
|
||
</section>
|
||
</main>
|
||
|
||
<button id="settingsBtn" class="fab">⚙ Настройки</button>
|
||
</div>
|
||
|
||
<div id="settingsModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Настройки исходных данных</h2>
|
||
<button id="closeModal" class="btn-close">×</button>
|
||
</div>
|
||
|
||
<div id="presetsContainer"></div>
|
||
|
||
<button id="addPresetBtn" class="btn-secondary">+ Добавить тип расчета</button>
|
||
|
||
<div class="modal-footer">
|
||
<button id="saveSettingsBtn" class="btn-primary">Сохранить настройки</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|