138 lines
5.0 KiB
HTML
138 lines
5.0 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 class="header">
|
||
<h1>Калькулятор себестоимости</h1>
|
||
<button class="btn btn-secondary" id="openSettings">⚙ Настройки</button>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<section class="card calculator">
|
||
<div class="form-group">
|
||
<label for="calcType">Тип расчета</label>
|
||
<select id="calcType" class="input-select"></select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="speed">Необходимая скорость</label>
|
||
<div class="input-with-suffix">
|
||
<input type="number" id="speed" class="input" placeholder="100" min="0" step="0.0001">
|
||
<span class="suffix">Мбит/с</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary btn-large" id="calculateBtn">РАССЧИТАТЬ</button>
|
||
</section>
|
||
|
||
<section class="card result" id="resultSection" style="display: none;">
|
||
<h2 class="result-title">Себестоимость</h2>
|
||
<div class="result-value" id="resultValue">0,00 ₸</div>
|
||
|
||
<div class="details">
|
||
<h3 class="details-title">Расшифровка расчета</h3>
|
||
<div class="detail-row">
|
||
<span>Переменная часть:</span>
|
||
<strong id="variablePart">0,00 ₸</strong>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>Постоянная часть:</span>
|
||
<strong id="fixedPart">0,00 ₸</strong>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>Скорость:</span>
|
||
<strong id="speedValue">0 Мбит/с</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="formula">
|
||
<h3 class="formula-title">Формула</h3>
|
||
<div class="formula-text" id="formulaText"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card history">
|
||
<div class="history-header">
|
||
<h2>История расчетов</h2>
|
||
<button class="btn btn-small btn-danger" id="clearHistory">Очистить</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table class="table" id="historyTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>Тип</th>
|
||
<th>Скорость</th>
|
||
<th>Себестоимость</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="historyBody"></tbody>
|
||
</table>
|
||
</div>
|
||
<p class="empty-message" id="emptyHistory">История пуста</p>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal Settings -->
|
||
<div class="modal-overlay" id="settingsModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Настройки исходных данных</h2>
|
||
<button class="btn-close" id="closeSettings">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<div class="tabs">
|
||
<div class="tab-list" id="typeTabs"></div>
|
||
<button class="btn btn-small btn-secondary" id="addTypeBtn">+ Добавить тип</button>
|
||
</div>
|
||
|
||
<div class="settings-form">
|
||
<div class="form-group">
|
||
<label for="typeName">Название типа расчета</label>
|
||
<input type="text" id="typeName" class="input" placeholder="Например: Областной">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="varCosts">Переменные затраты (₸)</label>
|
||
<input type="number" id="varCosts" class="input" min="0" step="0.0001">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="avgCapacity">Средняя пропускная способность (Мбит/с)</label>
|
||
<input type="number" id="avgCapacity" class="input" min="0.0001" step="0.0001">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="fixedCosts">Постоянные затраты (₸)</label>
|
||
<input type="number" id="fixedCosts" class="input" min="0" step="0.0001">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn-danger" id="deleteTypeBtn" style="display: none;">Удалить тип</button>
|
||
<button class="btn btn-primary" id="saveSettings">Сохранить настройки</button>
|
||
</div>
|
||
|
||
<div id="saveMessage" class="save-message" style="display: none;">✓ Настройки сохранены</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|