355 lines
17 KiB
HTML
355 lines
17 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="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#1a365d;--blue:#2563eb;--blue-light:#dbeafe;--white:#fff;--gray-500:#64748b;--gray-100:#f1f5f9}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);text-align:center}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:700px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--blue);color:var(--white);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px}
|
||
.btn:hover{background:#1d4ed8}
|
||
.btn-secondary{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:12px 26px;border-radius:8px}
|
||
.btn-danger{background:#EF4444;color:var(--white);padding:8px 16px;border-radius:6px;font-size:14px}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px;text-align:center}
|
||
.form-card{background:var(--gray-100);border-radius:16px;padding:40px;max-width:900px;margin:0 auto}
|
||
.form-group{margin-bottom:24px}
|
||
.form-group label{display:block;font-weight:600;margin-bottom:8px}
|
||
.form-group select,.form-group input,.form-group textarea{width:100%;padding:14px;border:2px solid var(--gray-100);border-radius:8px;font-size:17px;font-family:inherit}
|
||
.form-group select:focus,.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--blue)}
|
||
.form-group textarea{min-height:100px;resize:vertical}
|
||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||
.form-section{margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid var(--gray-100)}
|
||
.form-section h3{font-size:20px;font-weight:700;margin-bottom:16px;color:var(--ink)}
|
||
.success-message{display:none;background:#10B981;color:var(--white);padding:20px;border-radius:8px;text-align:center;font-weight:600}
|
||
footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40px 24px;font-size:14px}
|
||
.articles-table{width:100%;border-collapse:collapse;margin-bottom:16px}
|
||
.articles-table th,.articles-table td{padding:12px;text-align:left;border-bottom:1px solid var(--gray-100)}
|
||
.articles-table th{background:var(--white);font-weight:600;font-size:14px}
|
||
.articles-table input{width:100%;padding:10px;border:2px solid var(--gray-100);border-radius:6px;font-size:15px}
|
||
.articles-table input:focus{outline:none;border-color:var(--cyan)}
|
||
.articles-table .col-name{width:30%}
|
||
.articles-table .col-plan{width:20%}
|
||
.articles-table .col-fact{width:20%}
|
||
.articles-table .col-cumulative{width:20%}
|
||
.articles-table .col-action{width:10%}
|
||
.add-article-btn{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--ink);border:2px dashed var(--gray-100);padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer;margin-bottom:24px}
|
||
.add-article-btn:hover{border-color:var(--cyan);background:var(--cyan-50)}
|
||
.total-row{background:var(--cyan-50);font-weight:700}
|
||
@media(max-width:640px){
|
||
.hero h1{font-size:36px}
|
||
.section h2{font-size:28px}
|
||
.form-row{grid-template-columns:1fr}
|
||
.container{padding:48px 20px}
|
||
.articles-table{font-size:14px}
|
||
.articles-table th,.articles-table td{padding:8px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Исполнение бюджета</h1>
|
||
<p>Ежемесячный отчёт по статьям бюджета — филиалы Казахтелеком</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Отправка данных</h2>
|
||
<div class="form-card">
|
||
<form id="budget-form" action="https://formspree.io/f/mbldnbvb" method="POST">
|
||
|
||
<div class="form-section">
|
||
<h3>Основная информация</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="branch">Филиал</label>
|
||
<select id="branch" name="branch" required>
|
||
<option value="">Выберите филиал</option>
|
||
<option value="Астана">Астана</option>
|
||
<option value="Алматы">Алматы</option>
|
||
<option value="Шымкент">Шымкент</option>
|
||
<option value="Атырау">Атырау</option>
|
||
<option value="Актобе">Актобе</option>
|
||
<option value="Караганда">Караганда</option>
|
||
<option value="Павлодар">Павлодар</option>
|
||
<option value="Петропавловск">Петропавловск</option>
|
||
<option value="Костанай">Костанай</option>
|
||
<option value="Туркестан">Туркестан</option>
|
||
<option value="Усть-Каменогорск">Усть-Каменогорск</option>
|
||
<option value="Уральск">Уральск</option>
|
||
<option value="Семей">Семей</option>
|
||
<option value="Кызылорда">Кызылорда</option>
|
||
<option value="Тараз">Тараз</option>
|
||
<option value="Жезказган">Жезказган</option>
|
||
<option value="Экибастуз">Экибастуз</option>
|
||
<option value="Темиртау">Темиртау</option>
|
||
<option value="Балхаш">Балхаш</option>
|
||
<option value="Турксиб">Турксиб</option>
|
||
<option value="ДРБ">ДРБ</option>
|
||
<option value="ДКБ">ДКБ</option>
|
||
<option value="ОДС">ОДС</option>
|
||
<option value="СФ">СФ</option>
|
||
<option value="КУ">КУ</option>
|
||
<option value="ДТК">ДТК</option>
|
||
<option value="ДУП">ДУП</option>
|
||
<option value="ДПБ">ДПБ</option>
|
||
<option value="ДЦБ">ДЦБ</option>
|
||
<option value="ЦА (Центральный аппарат)">ЦА (Центральный аппарат)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="month">Месяц</label>
|
||
<select id="month" name="month" required>
|
||
<option value="">Выберите месяц</option>
|
||
<option value="Январь">Январь</option>
|
||
<option value="Февраль">Февраль</option>
|
||
<option value="Март">Март</option>
|
||
<option value="Апрель">Апрель</option>
|
||
<option value="Май">Май</option>
|
||
<option value="Июнь">Июнь</option>
|
||
<option value="Июль">Июль</option>
|
||
<option value="Август">Август</option>
|
||
<option value="Сентябрь">Сентябрь</option>
|
||
<option value="Октябрь">Октябрь</option>
|
||
<option value="Ноябрь">Ноябрь</option>
|
||
<option value="Декабрь">Декабрь</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="year">Год</label>
|
||
<select id="year" name="year" required>
|
||
<option value="2026">2026</option>
|
||
<option value="2025">2025</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>Статьи бюджета</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:16px;font-size:15px">Добавьте статьи расходов и укажите план, факт и нарастающий итог по каждой</p>
|
||
|
||
<table class="articles-table" id="articles-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-name">Статья расходов</th>
|
||
<th class="col-plan">План на год (тенге)</th>
|
||
<th class="col-fact">Факт за месяц (тенге)</th>
|
||
<th class="col-cumulative">Нарастающий итог (тенге)</th>
|
||
<th class="col-action"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="articles-body">
|
||
<tr>
|
||
<td><input type="text" name="article_name[]" value="2.4.5 - Командировочные расходы по подготовке кадров и повышению квалификации кадров" required></td>
|
||
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_fact[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="text" name="article_name[]" value="2.4.6 - Подготовка и повышение квалификации кадров" required></td>
|
||
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_fact[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="text" name="article_name[]" value="4.1.6 - Командировочные расходы по подготовке кадров и повышению квалификации кадров" required></td>
|
||
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_fact[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="text" name="article_name[]" value="4.1.7 - Подготовка и повышение квалификации кадров" required></td>
|
||
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_fact[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr class="total-row">
|
||
<td><strong>ИТОГО</strong></td>
|
||
<td id="total-plan">0</td>
|
||
<td id="total-fact">0</td>
|
||
<td id="total-cumulative">0</td>
|
||
<td></td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<button type="button" class="add-article-btn" onclick="addArticle()">
|
||
<span style="font-size:20px">+</span> Добавить статью
|
||
</button>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>Статистика обучений</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="planned_count">Запланировано обучений</label>
|
||
<input type="number" id="planned_count" name="planned_count" placeholder="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="completed_count">Прошло обучений</label>
|
||
<input type="number" id="completed_count" name="completed_count" placeholder="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="planned_employees">Запланировано сотрудников</label>
|
||
<input type="number" id="planned_employees" name="planned_employees" placeholder="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="completed_employees">Обучено сотрудников</label>
|
||
<input type="number" id="completed_employees" name="completed_employees" placeholder="0">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">Комментарии</label>
|
||
<textarea id="notes" name="notes" placeholder="Основания перерасхода/экономии, особенности периода..."></textarea>
|
||
</div>
|
||
|
||
<input type="hidden" name="_subject" value="Исполнение бюджета - ежемесячный отчёт">
|
||
<input type="hidden" name="_template" value="table">
|
||
<input type="text" name="_gotcha" style="display:none">
|
||
|
||
<button type="submit" class="btn" style="width:100%">Отправить данные</button>
|
||
</form>
|
||
|
||
<div id="success-message" class="success-message">
|
||
✓ Данные успешно отправлены! Спасибо.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Казахтелеком — Исполнение бюджета</p>
|
||
</footer>
|
||
|
||
<script>
|
||
let articleCount = 1;
|
||
|
||
function addArticle() {
|
||
const tbody = document.getElementById('articles-body');
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td><input type="text" name="article_name[]" placeholder="Название статьи" required></td>
|
||
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_fact[]" placeholder="0" required></td>
|
||
<td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
|
||
<td><button type="button" class="btn-danger" onclick="removeArticle(this)">Удалить</button></td>
|
||
`;
|
||
tbody.appendChild(row);
|
||
articleCount++;
|
||
updateTotals();
|
||
}
|
||
|
||
function removeArticle(btn) {
|
||
const tbody = document.getElementById('articles-body');
|
||
if (tbody.rows.length > 1) {
|
||
btn.closest('tr').remove();
|
||
updateTotals();
|
||
} else {
|
||
alert('Должна остаться хотя бы одна статья');
|
||
}
|
||
}
|
||
|
||
function updateTotals() {
|
||
let totalPlan = 0, totalFact = 0, totalCumulative = 0;
|
||
|
||
document.querySelectorAll('#articles-body tr').forEach(row => {
|
||
const plan = parseInt(row.querySelector('[name="article_plan[]"]').value) || 0;
|
||
const fact = parseInt(row.querySelector('[name="article_fact[]"]').value) || 0;
|
||
const cumulative = parseInt(row.querySelector('[name="article_cumulative[]"]').value) || 0;
|
||
|
||
totalPlan += plan;
|
||
totalFact += fact;
|
||
totalCumulative += cumulative;
|
||
});
|
||
|
||
document.getElementById('total-plan').textContent = totalPlan.toLocaleString('ru-RU');
|
||
document.getElementById('total-fact').textContent = totalFact.toLocaleString('ru-RU');
|
||
document.getElementById('total-cumulative').textContent = totalCumulative.toLocaleString('ru-RU');
|
||
}
|
||
|
||
document.getElementById('articles-body').addEventListener('input', updateTotals);
|
||
|
||
document.getElementById('budget-form').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const form = e.target;
|
||
const submitBtn = form.querySelector('button[type="submit"]');
|
||
|
||
submitBtn.textContent = 'Отправка...';
|
||
submitBtn.disabled = true;
|
||
|
||
// Save to localStorage for dashboard
|
||
const branch = document.getElementById('branch').value;
|
||
const month = document.getElementById('month').value;
|
||
const year = document.getElementById('year').value;
|
||
|
||
let budgetData = JSON.parse(localStorage.getItem('budget-data')) || [];
|
||
|
||
document.querySelectorAll('#articles-body tr').forEach(row => {
|
||
const articleName = row.querySelector('[name="article_name[]"]').value;
|
||
const articleCode = articleName.split(' - ')[0];
|
||
const plan = parseInt(row.querySelector('[name="article_plan[]"]').value) || 0;
|
||
const fact = parseInt(row.querySelector('[name="article_fact[]"]').value) || 0;
|
||
const cumulative = parseInt(row.querySelector('[name="article_cumulative[]"]').value) || 0;
|
||
|
||
budgetData.push({
|
||
branch: branch,
|
||
month: month,
|
||
year: year,
|
||
article: articleName,
|
||
articleCode: articleCode,
|
||
plan: plan,
|
||
fact: fact,
|
||
cumulative: cumulative
|
||
});
|
||
});
|
||
|
||
localStorage.setItem('budget-data', JSON.stringify(budgetData));
|
||
|
||
try {
|
||
const response = await fetch(form.action, {
|
||
method: 'POST',
|
||
body: new FormData(form),
|
||
headers: { 'Accept': 'application/json' }
|
||
});
|
||
|
||
if (response.ok) {
|
||
form.style.display = 'none';
|
||
document.getElementById('success-message').style.display = 'block';
|
||
} else {
|
||
throw new Error('Ошибка сервера');
|
||
}
|
||
} catch (error) {
|
||
alert('Произошла ошибка при отправке. Попробуйте ещё раз.');
|
||
submitBtn.textContent = 'Отправить данные';
|
||
submitBtn.disabled = false;
|
||
}
|
||
});
|
||
|
||
updateTotals();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|