<!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>
<!-- Show parameters -->
<section class="section">
<div class="card">
<div class="card-content">
<h2 class="card-title"><i class="ph ph-sliders-horizontal"></i> Параметры шоу</h2>
<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>
</div>
</section>
<!-- Royalties -->
<section class="section">
<div class="card">
<div class="card-content">
<h2 class="card-title">
<i class="ph ph-currency-rub"></i> Роялти
<span class="badge badge-secondary">авто</span>
</h2>
<p class="card-text 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>
</div>
</section>
<!-- Artists -->
<section class="section">
<div class="card">
<div class="card-content">
<h2 class="card-title"><i class="ph ph-users"></i> Артисты и роли</h2>
<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>
</div>
</section>
<!-- 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-hand-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-rub"></i></span>
</div>
<p class="metric-card-value" id="summary-s">0.00</p>
</div>
</div>
</div>
</section>
<!-- Import -->
<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="gnexus-ui-kit/dist/js/gnexus-ui-kit.js"></script>
<script>
window.__ARTISTS__ = [
{ "name": "Алексей" },
{ "name": "Мария" },
{ "name": "Дмитрий" },
{ "name": "Анна" },
{ "name": "Иван" },
{ "name": "Елена" },
{ "name": "Сергей" },
{ "name": "Ольга" },
{ "name": "Павел" },
{ "name": "Наталья" }
];
</script>
<script src="js/app.js"></script>
</body>
</html>
