<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькуляция фаершоу — Mardis Calc</title>
<link rel="stylesheet" href="assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="css/kit.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="page-header">
<div class="page-header-content">
<h1 class="page-header-title"><i class="ph ph-fire"></i> Mardis Calc</h1>
<p class="page-header-subtitle">Калькуляция переменных для фаершоу</p>
</div>
<div class="page-header-actions">
<button class="btn btn-secondary btn-small with-icon" type="button" id="btn-export">
<i class="ph ph-download-simple"></i> Экспорт
</button>
<button class="btn btn-danger btn-small with-icon" type="button" id="btn-reset">
<i class="ph ph-arrow-counter-clockwise"></i> Сброс
</button>
</div>
</header>
<main class="container">
<!-- Message alert -->
<div id="calc-message" class="alert alert-info" hidden></div>
<!-- Tabs -->
<div class="tabs" role="tablist" aria-label="Разделы калькулятора">
<button class="tab tab-active" type="button" role="tab" aria-selected="true" data-tab="params">
<i class="ph ph-sliders-horizontal"></i> Параметры
</button>
<button class="tab" type="button" role="tab" aria-selected="false" data-tab="royalties">
<i class="ph ph-currency-circle-dollar"></i> Роялти
</button>
<button class="tab" type="button" role="tab" aria-selected="false" data-tab="artists">
<i class="ph ph-users"></i> Артисты
</button>
</div>
<!-- Mode selector -->
<div class="chip-group mb-4" aria-label="Режим расчёта" id="mode-selector">
<button class="chip chip-selected" type="button" data-mode="sum" aria-pressed="true">
<i class="ph ph-currency-circle-dollar"></i> Считаем сумму
</button>
<button class="chip" type="button" data-mode="payout" aria-pressed="false">
<i class="ph ph-users"></i> Считаем выплаты
</button>
</div>
<!-- Tab: Parameters -->
<div class="tab-panel tab-panel-active" id="panel-params">
<p class="text-muted" id="mode-hint">Режим «Сумма»: введите материалы и зарплату — общая сумма посчитается автоматически.</p>
<div class="form-grid">
<div class="form-group">
<label class="label">
Общая сумма (S)
<input type="number" class="input" id="input-s" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Пиротехника (Pz)
<input type="number" class="input" id="input-pz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Титан (Tz)
<input type="number" class="input" id="input-tz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Керосин за литр (Lz)
<input type="number" class="input" id="input-lz" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Литры керосина (Nl)
<input type="number" class="input" id="input-nl" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Зарплата артиста (Z)
<input type="number" class="input" id="input-z" step="0.01" placeholder="0.00">
</label>
</div>
<div class="form-group">
<label class="label">
Количество артистов (Na)
<input type="number" class="input" id="input-na" step="1" placeholder="0" readonly>
</label>
</div>
</div>
</div>
<!-- Tab: Royalties -->
<div class="tab-panel" id="panel-royalties" hidden>
<p class="text-muted">Рассчитываются от чистой суммы (S − материальные расходы). Rom — фиксированный расход в бюджет команды.</p>
<div class="form-grid">
<div class="form-group">
<label class="label">
Организация (Rom)
<span class="badge badge-primary">10%</span>
<input type="number" class="input" id="input-rom" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Постановщик (Rop)
<span class="badge badge-primary">5%</span>
<input type="number" class="input" id="input-rop" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Техник (Rot)
<span class="badge badge-primary">5%</span>
<input type="number" class="input" id="input-rot" step="0.01" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Комиссионер (Rok)
<span class="badge badge-primary">10%</span>
<input type="number" class="input" id="input-rok" step="0.01" readonly>
</label>
</div>
</div>
</div>
<!-- Tab: Artists -->
<div class="tab-panel" id="panel-artists" hidden>
<div class="block form-group">
<label class="label">
Добавить артиста
<div class="select-wrap">
<select class="input select" id="artist-select">
<option value="">Выберите артиста...</option>
</select>
</div>
</label>
<button class="btn btn-accent with-icon mt-2" type="button" id="btn-add-artist">
<i class="ph ph-plus"></i> Добавить
</button>
</div>
<div class="table-wrapper mt-4">
<table class="table table-compact" id="artists-table">
<caption class="table-caption">Участники шоу</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Артист</th>
<th scope="col">Артист (Z)</th>
<th scope="col">Постановщик (Rop)</th>
<th scope="col">Техник (Rot)</th>
<th scope="col">Комиссионер (Rok)</th>
<th scope="col">Выплата</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="table-body" id="artists-tbody">
<tr class="table-row table-row-muted" id="empty-row">
<td colspan="7" class="text-center">Нет добавленных артистов</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Summary metrics -->
<section class="section">
<h2 class="section-title"><i class="ph ph-chart-bar"></i> Итоговый расчёт</h2>
<div class="row g-4">
<div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Материальные расходы</p>
<span class="metric-card-icon"><i class="ph ph-cube"></i></span>
</div>
<p class="metric-card-value" id="summary-materials">0.00</p>
</div>
</div>
<div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Чистая сумма (Base)</p>
<span class="metric-card-icon"><i class="ph ph-scales"></i></span>
</div>
<p class="metric-card-value" id="summary-base">0.00</p>
</div>
</div>
<div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Всего роялти</p>
<span class="metric-card-icon"><i class="ph ph-coins"></i></span>
</div>
<p class="metric-card-value" id="summary-royalties">0.00</p>
</div>
</div>
<div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Зарплаты артистов</p>
<span class="metric-card-icon"><i class="ph ph-user"></i></span>
</div>
<p class="metric-card-value" id="summary-salaries">0.00</p>
</div>
</div>
<div class="card metric-card metric-card-accent">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Общая сумма (S)</p>
<span class="metric-card-icon"><i class="ph ph-currency-circle-dollar"></i></span>
</div>
<p class="metric-card-value" id="summary-s">0.00</p>
</div>
</div>
</div>
</section>
<!-- Import / Export -->
<section class="section">
<div class="card action-card">
<div class="card-content">
<span class="action-card-kicker">Данные</span>
<h3 class="action-card-title">Импорт / Экспорт расчёта</h3>
<p class="action-card-text">Сохраните текущий расчёт в файл или загрузите ранее сохранённый.</p>
<div class="action-card-actions">
<button class="btn btn-secondary btn-small with-icon" type="button" id="btn-import-trigger">
<i class="ph ph-upload-simple"></i> Импорт JSON
</button>
<input type="file" id="btn-import-file" accept="application/json" hidden>
<button class="btn btn-secondary btn-small with-icon" type="button" id="btn-export-action">
<i class="ph ph-download-simple"></i> Экспорт JSON
</button>
</div>
</div>
</div>
</section>
</main>
<script src="js/gnexus-ui-kit.js"></script>
<script>
window.__ARTISTS__ = [
{ "name": "Маша (капитан)" },
{ "name": "Маша Физрук" },
{ "name": "Даша" },
{ "name": "Фаина" },
{ "name": "Дима" },
{ "name": "Саша" },
{ "name": "Катя" },
{ "name": "Кристина" },
{ "name": "Ростик" },
{ "name": "Маруся" }
];
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
document.querySelectorAll('.tab').forEach(t => {
t.classList.toggle('tab-active', t.dataset.tab === target);
t.setAttribute('aria-selected', t.dataset.tab === target);
});
document.querySelectorAll('.tab-panel').forEach(p => {
const isActive = p.id === 'panel-' + target;
p.classList.toggle('tab-panel-active', isActive);
p.hidden = !isActive;
});
});
});
</script>
<script src="js/app.js"></script>
</body>
</html>
