1ospanovaroza/eppk-form
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4 - budget form with articles

Browse Source
This commit is contained in:
Dauren777 2026-06-19 06:16:20 +00:00
parent f33f1435c4
commit 02273a773f
1 changed files with 104 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
budget-form.html
View File

@ -16,9 +16,11 @@ body{font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;color:var(--i
.hero p{font-size:20px;color:#9aa3b2;max-width:700px;margin:0 auto 32px} .hero p{font-size:20px;color:#9aa3b2;max-width:700px;margin:0 auto 32px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px} .btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px}
.btn:hover{background:#1be5ff} .btn:hover{background:#1be5ff}
.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{padding:80px 24px}
.section h2{font-size:36px;font-weight:700;margin-bottom:24px;text-align:center} .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:700px;margin:0 auto} .form-card{background:var(--gray-100);border-radius:16px;padding:40px;max-width:900px;margin:0 auto}
.form-group{margin-bottom:24px} .form-group{margin-bottom:24px}
.form-group label{display:block;font-weight:600;margin-bottom:8px} .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,.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}
@ -29,11 +31,26 @@ body{font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;color:var(--i
.form-section h3{font-size:20px;font-weight:700;margin-bottom:16px;color:var(--ink)} .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} .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} 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){ @media(max-width:640px){
.hero h1{font-size:36px} .hero h1{font-size:36px}
.section h2{font-size:28px} .section h2{font-size:28px}
.form-row{grid-template-columns:1fr} .form-row{grid-template-columns:1fr}
.container{padding:48px 20px} .container{padding:48px 20px}
.articles-table{font-size:14px}
.articles-table th,.articles-table td{padding:8px}
} }
</style> </style>
</head> </head>
@ -42,7 +59,7 @@ footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40p
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1>Исполнение бюджета</h1> <h1>Исполнение бюджета</h1>
<p>Ежемесячный отчёт по бюджету обучений и командировочных расходов — филиалы Казахтелеком</p> <p>Ежемесячный отчёт по статьям бюджета — филиалы Казахтелеком</p>
</div> </div>
</section> </section>
@ -111,39 +128,42 @@ footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40p
</div> </div>
<div class="form-section"> <div class="form-section">
<h3>Бюджет обучений</h3> <h3>Статьи бюджета</h3>
<div class="form-row"> <p style="color:var(--gray-500);margin-bottom:16px;font-size:15px">Добавьте статьи расходов и укажите план, факт и нарастающий итог по каждой</p>
<div class="form-group">
<label for="training_plan">План на год (тенге)</label> <table class="articles-table" id="articles-table">
<input type="number" id="training_plan" name="training_plan" placeholder="0" required> <thead>
</div> <tr>
<div class="form-group"> <th class="col-name">Статья расходов</th>
<label for="training_fact">Факт за месяц (тенге)</label> <th class="col-plan">План на год (тенге)</th>
<input type="number" id="training_fact" name="training_fact" placeholder="0" required> <th class="col-fact">Факт за месяц (тенге)</th>
</div> <th class="col-cumulative">Нарастающий итог (тенге)</th>
</div> <th class="col-action"></th>
<div class="form-group"> </tr>
<label for="training_cumulative">Нарастающий итог (тенге)</label> </thead>
<input type="number" id="training_cumulative" name="training_cumulative" placeholder="0" required> <tbody id="articles-body">
</div> <tr>
</div> <td><input type="text" name="article_name[]" placeholder="Название статьи" required></td>
<td><input type="number" name="article_plan[]" placeholder="0" required></td>
<div class="form-section"> <td><input type="number" name="article_fact[]" placeholder="0" required></td>
<h3>Бюджет командировок</h3> <td><input type="number" name="article_cumulative[]" placeholder="0" required></td>
<div class="form-row"> <td><button type="button" class="btn-danger" onclick="removeArticle(this)">Удалить</button></td>
<div class="form-group"> </tr>
<label for="trip_plan">План на год (тенге)</label> </tbody>
<input type="number" id="trip_plan" name="trip_plan" placeholder="0" required> <tfoot>
</div> <tr class="total-row">
<div class="form-group"> <td><strong>ИТОГО</strong></td>
<label for="trip_fact">Факт за месяц (тенге)</label> <td id="total-plan">0</td>
<input type="number" id="trip_fact" name="trip_fact" placeholder="0" required> <td id="total-fact">0</td>
</div> <td id="total-cumulative">0</td>
</div> <td></td>
<div class="form-group"> </tr>
<label for="trip_cumulative">Нарастающий итог (тенге)</label> </tfoot>
<input type="number" id="trip_cumulative" name="trip_cumulative" placeholder="0" required> </table>
</div>
<button type="button" class="add-article-btn" onclick="addArticle()">
<span style="font-size:20px">+</span> Добавить статью
</button>
</div> </div>
<div class="form-section"> <div class="form-section">
@ -194,6 +214,53 @@ footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40p
</footer> </footer>
<script> <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) { document.getElementById('budget-form').addEventListener('submit', async function(e) {
e.preventDefault(); e.preventDefault();
const form = e.target; const form = e.target;
@ -221,6 +288,8 @@ document.getElementById('budget-form').addEventListener('submit', async function
submitBtn.disabled = false; submitBtn.disabled = false;
} }
}); });
updateTotals();
</script> </script>
</body> </body>