212 lines
8.9 KiB
HTML
212 lines
8.9 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>
|
||
<header>
|
||
<h1>📊 Калькулятор тарифов</h1>
|
||
<p class="subtitle">Для корпоративных абонентов с учётом затрат и данных конкурентов</p>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Секция 1: Параметры клиента -->
|
||
<section class="card">
|
||
<h2>1️⃣ Параметры клиента</h2>
|
||
<div class="grid-3">
|
||
<div class="form-group">
|
||
<label>Количество пользователей (сотрудников)</label>
|
||
<input type="number" id="users" value="50" min="1" max="10000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Срок подключения (месяцев)</label>
|
||
<input type="number" id="term" value="12" min="1" max="60">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Тип услуги</label>
|
||
<select id="serviceType">
|
||
<option value="mobile">Мобильная связь</option>
|
||
<option value="internet">Интернет</option>
|
||
<option value="combined">Комбинированный (связь + интернет)</option>
|
||
<option value="cloud">Облачные услуги</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="form-group">
|
||
<label>Объём минут (на 1 пользователя)</label>
|
||
<input type="number" id="minutes" value="500" min="0" step="50">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Объём интернета (ГБ на пользователя)</label>
|
||
<input type="number" id="dataGb" value="20" min="0" step="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дополнительные сервисы</label>
|
||
<select id="addons">
|
||
<option value="none">Без доп. услуг</option>
|
||
<option value="basic">Базовый (CRM + почта)</option>
|
||
<option value="advanced">Расширенный (CRM + почта + аналитика)</option>
|
||
<option value="premium">Премиум (полный пакет)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция 2: Затраты компании -->
|
||
<section class="card">
|
||
<h2>2️⃣ Затраты компании</h2>
|
||
<div class="grid-3">
|
||
<div class="form-group">
|
||
<label>Себестоимость минуты (₸)</label>
|
||
<input type="number" id="costMinute" value="2.5" min="0" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Себестоимость 1 ГБ (₸)</label>
|
||
<input type="number" id="costGb" value="150" min="0" step="10">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Операционные расходы на пользователя (₸/мес)</label>
|
||
<input type="number" id="opex" value="500" min="0" step="50">
|
||
</div>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="form-group">
|
||
<label>Целевая маржинальность (%)</label>
|
||
<input type="number" id="margin" value="25" min="0" max="100" step="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Скидка за объём (%)</label>
|
||
<input type="number" id="volumeDiscount" value="10" min="0" max="50" step="1">
|
||
<small>Автоматически при >100 пользователей</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Скидка за срок (%)</label>
|
||
<input type="number" id="termDiscount" value="5" min="0" max="30" step="1">
|
||
<small>Автоматически при >12 месяцев</small>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция 3: Данные конкурентов -->
|
||
<section class="card">
|
||
<h2>3️⃣ Данные конкурентов (рыночные тарифы)</h2>
|
||
<p class="hint">Данные основаны на анализе тарифов Kazakhtelecom, Kcell, Beeline, Altel, Tele2</p>
|
||
<div class="competitors-grid">
|
||
<div class="competitor-card">
|
||
<h3>Kazakhtelecom</h3>
|
||
<div class="form-group">
|
||
<label>Базовый тариф (₸/мес)</label>
|
||
<input type="number" id="comp1Base" value="3500">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Бизнес тариф (₸/мес)</label>
|
||
<input type="number" id="comp1Biz" value="7500">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Премиум (₸/мес)</label>
|
||
<input type="number" id="comp1Prem" value="15000">
|
||
</div>
|
||
</div>
|
||
<div class="competitor-card">
|
||
<h3>Kcell / Altel</h3>
|
||
<div class="form-group">
|
||
<label>Базовый тариф (₸/мес)</label>
|
||
<input type="number" id="comp2Base" value="4000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Бизнес тариф (₸/мес)</label>
|
||
<input type="number" id="comp2Biz" value="8000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Премиум (₸/мес)</label>
|
||
<input type="number" id="comp2Prem" value="16000">
|
||
</div>
|
||
</div>
|
||
<div class="competitor-card">
|
||
<h3>Beeline</h3>
|
||
<div class="form-group">
|
||
<label>Базовый тариф (₸/мес)</label>
|
||
<input type="number" id="comp3Base" value="3800">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Бизнес тариф (₸/мес)</label>
|
||
<input type="number" id="comp3Biz" value="7800">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Премиум (₸/мес)</label>
|
||
<input type="number" id="comp3Prem" value="15500">
|
||
</div>
|
||
</div>
|
||
<div class="competitor-card">
|
||
<h3>Tele2</h3>
|
||
<div class="form-group">
|
||
<label>Базовый тариф (₸/мес)</label>
|
||
<input type="number" id="comp4Base" value="3200">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Бизнес тариф (₸/мес)</label>
|
||
<input type="number" id="comp4Biz" value="7000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Премиум (₸/мес)</label>
|
||
<input type="number" id="comp4Prem" value="14000">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция 4: Результаты расчёта -->
|
||
<section class="card results">
|
||
<h2>📈 Результаты расчёта</h2>
|
||
|
||
<div class="results-grid">
|
||
<div class="result-box">
|
||
<div class="result-label">Себестоимость (на 1 пользователя/мес)</div>
|
||
<div class="result-value" id="resultCost">0 ₸</div>
|
||
</div>
|
||
<div class="result-box">
|
||
<div class="result-label">Рекомендованная цена (с маржой)</div>
|
||
<div class="result-value highlight" id="resultPrice">0 ₸</div>
|
||
</div>
|
||
<div class="result-box">
|
||
<div class="result-label">Средняя цена конкурентов</div>
|
||
<div class="result-value" id="resultCompetitor">0 ₸</div>
|
||
</div>
|
||
<div class="result-box">
|
||
<div class="result-label">Итого за всех пользователей (в месяц)</div>
|
||
<div class="result-value large" id="resultTotal">0 ₸</div>
|
||
</div>
|
||
<div class="result-box">
|
||
<div class="result-label">Итого за весь срок контракта</div>
|
||
<div class="result-value large" id="resultContract">0 ₸</div>
|
||
</div>
|
||
<div class="result-box">
|
||
<div class="result-label">Конкурентное преимущество</div>
|
||
<div class="result-value" id="resultAdvantage">—</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comparison-section">
|
||
<h3>📊 Сравнение с конкурентами</h3>
|
||
<div class="comparison-bars" id="comparisonBars">
|
||
<!-- Bars will be rendered here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recommendations" id="recommendations">
|
||
<!-- Recommendations will be rendered here -->
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<button class="calculate-btn" id="calculateBtn">🔄 Рассчитать тариф</button>
|
||
<button class="export-btn" id="exportBtn">📥 Выгрузить в Excel</button>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|