Zhanara/kak-napisat-spravku-o-zadolz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Справка для юристов: реквизиты компании, статус уволен, дата увольнения, подписи руководителя и главбуха

Browse Source
This commit is contained in:
Zhanara 2026-08-12 04:55:02 +00:00
parent 6d024ff703
commit 0db26bb4af
3 changed files with 358 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
index.html
View File

@ -10,87 +10,162 @@
<div class="container"> <div class="container">
<header> <header>
<h1>📄 Справка о задолженности сотрудника</h1> <h1>📄 Справка о задолженности сотрудника</h1>
<p class="subtitle">Внутренний документ компании</p> <p class="subtitle">Для предоставления в юридический отдел</p>
</header> </header>
<main class="main-grid"> <main class="main-grid">
<!-- Форма ввода данных --> <!-- Форма ввода данных -->
<section class="form-section"> <section class="form-section">
<h2>Данные сотрудника</h2> <h2>Данные для справки</h2>
<form id="debtForm">
<div class="form-group"> <!-- Реквизиты компании -->
<label for="fio">ФИО сотрудника *</label> <div class="form-group">
<input type="text" id="fio" name="fio" placeholder="Иванов Иван Иванович" required> <label for="companyName">Название компании *</label>
</div> <input type="text" id="companyName" name="companyName" placeholder="ТОО «Ваша Компания»" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="companyBin">БИН/ИНН компании</label>
<input type="text" id="companyBin" name="companyBin" placeholder="123456789012">
</div>
<div class="form-group">
<label for="companyAddress">Юридический адрес</label>
<input type="text" id="companyAddress" name="companyAddress" placeholder="г. Алматы, ул. Абая 1">
</div>
</div>
<hr style="border: 0; border-top: 2px solid #e2e8f0; margin: 25px 0;">
<!-- Данные сотрудника -->
<h3 style="margin-bottom: 15px; color: #4a5568;">Сотрудник</h3>
<div class="form-group">
<label for="fio">ФИО сотрудника *</label>
<input type="text" id="fio" name="fio" placeholder="Иванов Иван Иванович" required>
</div>
<div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="position">Должность *</label> <label for="position">Должность *</label>
<input type="text" id="position" name="position" placeholder="Менеджер по продажам" required> <input type="text" id="position" name="position" placeholder="Менеджер по продажам" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="department">Подразделение</label> <label for="department">Подразделение</label>
<input type="text" id="department" name="department" placeholder="Отдел продаж"> <input type="text" id="department" name="department" placeholder="Отдел продаж">
</div> </div>
</div>
<div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="employeeId">Табельный номер</label> <label for="employeeId">Табельный номер</label>
<input type="text" id="employeeId" name="employeeId" placeholder="00123"> <input type="text" id="employeeId" name="employeeId" placeholder="00123">
</div> </div>
<div class="form-group">
<div class="form-row"> <label for="employmentStatus">Статус</label>
<div class="form-group"> <select id="employmentStatus" name="employmentStatus">
<label for="debtAmount">Сумма задолженности (₸) *</label> <option value="active">Работает</option>
<input type="number" id="debtAmount" name="debtAmount" placeholder="150000" required> <option value="terminated">Уволена</option>
</div> </select>
<div class="form-group">
<label for="currency">Валюта</label>
<select id="currency" name="currency">
<option value="KZT">₸ KZT</option>
<option value="RUB">₽ RUB</option>
<option value="USD">$ USD</option>
</select>
</div>
</div> </div>
</div>
<div class="form-row">
<div class="form-group">
<label for="hireDate">Дата приёма на работу</label>
<input type="date" id="hireDate" name="hireDate">
</div>
<div class="form-group">
<label for="terminationDate">Дата увольнения</label>
<input type="date" id="terminationDate" name="terminationDate">
</div>
</div>
<hr style="border: 0; border-top: 2px solid #e2e8f0; margin: 25px 0;">
<!-- Параметры задолженности -->
<h3 style="margin-bottom: 15px; color: #4a5568;">Задолженность</h3>
<div class="form-row">
<div class="form-group">
<label for="debtAmount">Сумма задолженности *</label>
<input type="number" id="debtAmount" name="debtAmount" placeholder="150000" required>
</div>
<div class="form-group">
<label for="currency">Валюта</label>
<select id="currency" name="currency">
<option value="KZT">₸ KZT</option>
<option value="RUB">₽ RUB</option>
<option value="USD">$ USD</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="debtType">Тип задолженности *</label>
<select id="debtType" name="debtType" required>
<option value="debtor">Дебиторская (сотрудник должен компании)</option>
<option value="creditor">Кредиторская (компания должна сотруднику)</option>
</select>
</div>
<div class="form-group"> <div class="form-group">
<label for="debtPeriod">Период задолженности *</label> <label for="debtPeriod">Период задолженности *</label>
<input type="text" id="debtPeriod" name="debtPeriod" placeholder="Январь 2025 — Март 2025" required> <input type="text" id="debtPeriod" name="debtPeriod" placeholder="Январь 2025 — Март 2025" required>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="reason">Основание задолженности *</label> <label for="reason">Основание задолженности *</label>
<textarea id="reason" name="reason" rows="3" placeholder="Подотчётные суммы по авансовому отчёту №..." required></textarea> <textarea id="reason" name="reason" rows="3" placeholder="Подотчётные суммы по авансовому отчёту №..." required></textarea>
</div>
<div class="form-group">
<label for="document">Документ-основание</label>
<input type="text" id="document" name="document" placeholder="Авансовый отчёт №45 от 15.03.2025">
</div>
<div class="form-group">
<label for="legalBasis">Нормативное основание (статья ТК/закона)</label>
<input type="text" id="legalBasis" name="legalBasis" placeholder="ст. 114 ТК РК, п. 1 ст. 296 ГК РК">
</div> </div>
<hr style="border: 0; border-top: 2px solid #e2e8f0; margin: 25px 0;">
<!-- Реквизиты справки -->
<h3 style="margin-bottom: 15px; color: #4a5568;">Реквизиты справки</h3>
<div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="document">Документ-основание</label> <label for="issueDate">Дата выдачи справки *</label>
<input type="text" id="document" name="document" placeholder="Авансовый отчёт №45 от 15.03.2025"> <input type="date" id="issueDate" name="issueDate" required>
</div> </div>
<div class="form-row">
<div class="form-group">
<label for="issueDate">Дата выдачи справки *</label>
<input type="date" id="issueDate" name="issueDate" required>
</div>
<div class="form-group">
<label for="issueNumber">Номер справки</label>
<input type="text" id="issueNumber" name="issueNumber" placeholder="123-С">
</div>
</div>
<div class="form-group"> <div class="form-group">
<label for="director">Руководитель (кто подписывает)</label> <label for="issueNumber">Номер справки</label>
<input type="text" id="issueNumber" name="issueNumber" placeholder="123-С">
</div>
</div>
<div class="form-group">
<label for="recipient">Кому предоставляется</label>
<input type="text" id="recipient" name="recipient" placeholder="Юридический отдел">
</div>
<div class="form-row">
<div class="form-group">
<label for="director">Руководитель</label>
<input type="text" id="director" name="director" placeholder="Генеральный директор Петров П.П."> <input type="text" id="director" name="director" placeholder="Генеральный директор Петров П.П.">
</div> </div>
<div class="form-group">
<div class="form-actions"> <label for="accountant">Главный бухгалтер</label>
<button type="submit" class="btn btn-primary">📄 Сформировать справку</button> <input type="text" id="accountant" name="accountant" placeholder="Главный бухгалтер Сидорова А.А.">
<button type="button" class="btn btn-secondary" onclick="clearForm()">Очистить</button>
</div> </div>
</form> </div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">📄 Сформировать справку</button>
<button type="button" class="btn btn-secondary" onclick="clearForm()">Очистить</button>
</div>
</section> </section>
<!-- Предпросмотр справки --> <!-- Предпросмотр справки -->
@ -102,24 +177,39 @@
</div> </div>
<div id="certificatePreview" class="certificate"> <div id="certificatePreview" class="certificate">
<!-- Шапка с реквизитами -->
<div class="cert-company-header">
<div class="company-full-name" id="certCompanyFullName">ТОО «Ваша Компания»</div>
<div class="company-details">
<span id="certCompanyBin">БИН ____________________</span>
<span id="certCompanyAddress">Адрес: ____________________</span>
</div>
</div>
<div class="cert-header"> <div class="cert-header">
<div class="company-name" id="certCompanyName">ООО «Ваша Компания»</div>
<div class="cert-title">СПРАВКА</div> <div class="cert-title">СПРАВКА</div>
<div class="cert-subtitle">о наличии задолженности сотрудника</div> <div class="cert-subtitle">о наличии задолженности сотрудника</div>
<div class="cert-number-block">
<span id="certIssueNumberDisplay">№ ____</span>
<span id="certIssueDateDisplay">«___» ________ 20__ г.</span>
</div>
</div>
<div class="cert-recipient" id="certRecipientBlock" style="display:none;">
<strong>Кому:</strong> <span id="certRecipient">Юридический отдел</span>
</div> </div>
<div class="cert-body"> <div class="cert-body">
<p class="cert-date">
Дата выдачи: <span id="certIssueDate">«___» ________ 20__ г.</span>
<span class="cert-number" id="certIssueNumber">№ ____</span>
</p>
<div class="cert-content"> <div class="cert-content">
<p> <p>
Выдана в том, что <strong id="certFio">___________________________</strong> Выдана в том, что <strong id="certFio">___________________________</strong>
</p> </p>
<p> <p id="certHireDateBlock" style="display:none;">
работает(ет) в компании <strong id="certCompanyNameInline">___________________________</strong> работает(ет) в <strong id="certCompanyNameInline">___________________________</strong>
с <span id="certHireDate">«___» ________ 20__ г.</span>
</p>
<p id="certHireDateEmpty" style="display:block;">
работает(ет) в <strong id="certCompanyNameInline2">___________________________</strong>
</p> </p>
<p> <p>
в должности <strong id="certPosition">___________________________</strong> в должности <strong id="certPosition">___________________________</strong>
@ -131,11 +221,11 @@
табельный номер: <strong id="certEmployeeId">______</strong> табельный номер: <strong id="certEmployeeId">______</strong>
</p> </p>
<div class="cert-debt-block"> <div class="cert-debt-block" id="certDebtBlock">
<p class="cert-debt-label">Имеет задолженность:</p> <p class="cert-debt-label" id="certDebtLabel">Имеет задолженность:</p>
<p class="cert-debt-amount"> <p class="cert-debt-amount">
<strong id="certDebtAmount">___________</strong> <strong id="certDebtAmount">___________</strong>
(<span id="certDebtAmountWords">______________________</span>) <span id="certDebtAmountWords">______________________</span>
</p> </p>
<p class="cert-debt-period"> <p class="cert-debt-period">
за период: <strong id="certDebtPeriod">___________________________</strong> за период: <strong id="certDebtPeriod">___________________________</strong>
@ -148,26 +238,38 @@
<p id="certDocumentBlock" style="display:none;"> <p id="certDocumentBlock" style="display:none;">
Документ-основание: <strong id="certDocument">___________________________</strong> Документ-основание: <strong id="certDocument">___________________________</strong>
</p> </p>
<p id="certLegalBasisBlock" style="display:none;">
Нормативное основание: <strong id="certLegalBasis">___________________________</strong>
</p>
</div> </div>
<div class="cert-footer"> <div class="cert-footer">
<p class="cert-purpose"> <p class="cert-purpose">
Справка выдана для внутреннего использования в компании. Справка выдана для предоставления в юридический отдел.
</p> </p>
<div class="cert-signature"> <div class="cert-signatures-block">
<div class="signature-line"> <div class="cert-signature-line">
<span class="sig-role" id="certDirector">Руководитель _______________</span> <div class="sig-title">Руководитель</div>
<div class="sig-name" id="certDirector">___________________ / _______________</div>
<div class="sig-date" id="certDirectorSignDate">«___» ________ 20__ г.</div>
</div> </div>
<div class="signature-space">
<span>__________________</span> <div class="cert-signature-line">
<span class="sig-date" id="certSignDate">«___» ________ 20__ г.</span> <div class="sig-title">Главный бухгалтер</div>
<div class="sig-name" id="certAccountant">___________________ / _______________</div>
<div class="sig-date" id="certAccountantSignDate">«___» ________ 20__ г.</div>
</div> </div>
</div> </div>
<div class="cert-stamp-space">
<div class="stamp-placeholder">М.П.</div>
</div>
</div> </div>
</div> </div>
<div class="cert-watermark">Внутренний документ</div> <div class="cert-watermark">Для юридического отдела</div>
</div> </div>
</section> </section>
</main> </main>

122
script.js
View File

@ -25,30 +25,103 @@ formInputs.forEach(input => {
function updateCertificate() { function updateCertificate() {
// Получаем данные из формы // Получаем данные из формы
const data = { const data = {
companyName: document.getElementById('companyName').value || 'ТОО «Ваша Компания»',
companyBin: document.getElementById('companyBin').value,
companyAddress: document.getElementById('companyAddress').value,
fio: document.getElementById('fio').value || '___________________________', fio: document.getElementById('fio').value || '___________________________',
position: document.getElementById('position').value || '___________________________', position: document.getElementById('position').value || '___________________________',
department: document.getElementById('department').value, department: document.getElementById('department').value,
employeeId: document.getElementById('employeeId').value, employeeId: document.getElementById('employeeId').value,
employmentStatus: document.getElementById('employmentStatus').value,
hireDate: document.getElementById('hireDate').value,
terminationDate: document.getElementById('terminationDate').value,
debtAmount: document.getElementById('debtAmount').value, debtAmount: document.getElementById('debtAmount').value,
currency: document.getElementById('currency').value, currency: document.getElementById('currency').value,
debtType: document.getElementById('debtType').value,
debtPeriod: document.getElementById('debtPeriod').value || '___________________________', debtPeriod: document.getElementById('debtPeriod').value || '___________________________',
reason: document.getElementById('reason').value || '___________________________', reason: document.getElementById('reason').value || '___________________________',
document: document.getElementById('document').value, document: document.getElementById('document').value,
legalBasis: document.getElementById('legalBasis').value,
issueDate: document.getElementById('issueDate').value, issueDate: document.getElementById('issueDate').value,
issueNumber: document.getElementById('issueNumber').value, issueNumber: document.getElementById('issueNumber').value,
director: document.getElementById('director').value recipient: document.getElementById('recipient').value,
director: document.getElementById('director').value,
accountant: document.getElementById('accountant').value
}; };
// Форматируем дату // Форматируем даты
const formattedDate = formatDate(data.issueDate); const formattedDate = formatDate(data.issueDate);
const signDate = formattedDate.replace('г.', ''); const hireDateFormatted = formatDate(data.hireDate);
const terminationDateFormatted = formatDate(data.terminationDate);
// Заполняем шаблон // Реквизиты компании
document.getElementById('certFio').textContent = data.fio; document.getElementById('certCompanyFullName').textContent = data.companyName;
document.getElementById('certCompanyNameInline').textContent = 'ООО «Ваша Компания»'; document.getElementById('certCompanyNameInline').textContent = data.companyName;
document.getElementById('certPosition').textContent = data.position; document.getElementById('certCompanyNameInline2').textContent = data.companyName;
// Показываем/скрываем опциональные поля const binEl = document.getElementById('certCompanyBin');
if (data.companyBin) {
binEl.textContent = `БИН ${data.companyBin}`;
binEl.style.display = 'inline';
} else {
binEl.style.display = 'none';
}
const addressEl = document.getElementById('certCompanyAddress');
if (data.companyAddress) {
addressEl.textContent = `Адрес: ${data.companyAddress}`;
addressEl.style.display = 'inline';
} else {
addressEl.style.display = 'none';
}
// Дата и номер справки
document.getElementById('certIssueDateDisplay').textContent = formattedDate;
document.getElementById('certIssueNumberDisplay').textContent = data.issueNumber ? `№ ${data.issueNumber}` : '';
// Кому предоставляется
const recipientBlock = document.getElementById('certRecipientBlock');
if (data.recipient) {
recipientBlock.style.display = 'block';
document.getElementById('certRecipient').textContent = data.recipient;
} else {
recipientBlock.style.display = 'none';
}
// Статус сотрудника
document.getElementById('certFio').textContent = data.fio;
document.getElementById('certPosition').textContent = data.position;
const hireDateBlock = document.getElementById('certHireDateBlock');
const hireDateEmpty = document.getElementById('certHireDateEmpty');
if (data.hireDate) {
hireDateBlock.style.display = 'block';
hireDateEmpty.style.display = 'none';
document.getElementById('certHireDate').textContent = hireDateFormatted;
} else {
hireDateBlock.style.display = 'none';
hireDateEmpty.style.display = 'block';
}
// Если уволена - показываем дату увольнения
if (data.employmentStatus === 'terminated' && data.terminationDate) {
const termBlock = document.getElementById('certTerminationBlock');
if (!termBlock) {
// Создаём блок даты увольнения динамически
const termParagraph = document.createElement('p');
termParagraph.id = 'certTerminationBlock';
termParagraph.innerHTML = 'по состоянию на дату увольнения: <strong id="certTerminationDate">' + terminationDateFormatted + '</strong>';
document.getElementById('certEmployeeIdBlock').after(termParagraph);
} else {
termBlock.style.display = 'block';
document.getElementById('certTerminationDate').textContent = terminationDateFormatted;
}
} else {
const termBlock = document.getElementById('certTerminationBlock');
if (termBlock) termBlock.style.display = 'none';
}
// Подразделение и табельный номер
const deptBlock = document.getElementById('certDepartmentBlock'); const deptBlock = document.getElementById('certDepartmentBlock');
if (data.department) { if (data.department) {
deptBlock.style.display = 'block'; deptBlock.style.display = 'block';
@ -65,6 +138,14 @@ function updateCertificate() {
empIdBlock.style.display = 'none'; empIdBlock.style.display = 'none';
} }
// Тип задолженности
const debtLabel = document.getElementById('certDebtLabel');
if (data.debtType === 'creditor') {
debtLabel.textContent = 'Имеет кредиторская задолженность:';
} else {
debtLabel.textContent = 'Имеет дебиторская задолженность:';
}
// Сумма задолженности // Сумма задолженности
const amount = parseFloat(data.debtAmount) || 0; const amount = parseFloat(data.debtAmount) || 0;
const currencySymbol = getCurrencySymbol(data.currency); const currencySymbol = getCurrencySymbol(data.currency);
@ -83,14 +164,27 @@ function updateCertificate() {
docBlock.style.display = 'none'; docBlock.style.display = 'none';
} }
// Дата и номер const legalBlock = document.getElementById('certLegalBasisBlock');
document.getElementById('certIssueDate').textContent = formattedDate; if (data.legalBasis) {
document.getElementById('certIssueNumber').textContent = data.issueNumber ? `№ ${data.issueNumber}` : ''; legalBlock.style.display = 'block';
document.getElementById('certSignDate').textContent = signDate; document.getElementById('certLegalBasis').textContent = data.legalBasis;
} else {
legalBlock.style.display = 'none';
}
// Руководитель // Подписи
const directorText = data.director || 'Руководитель _______________'; const directorText = data.director || '___________________ / _______________';
document.getElementById('certDirector').textContent = directorText; document.getElementById('certDirector').textContent = directorText;
document.getElementById('certDirectorSignDate').textContent = formattedDate;
const accountantBlock = document.querySelector('.cert-signature-line:nth-child(2)');
if (data.accountant) {
accountantBlock.style.display = 'block';
document.getElementById('certAccountant').textContent = data.accountant;
document.getElementById('certAccountantSignDate').textContent = formattedDate;
} else {
accountantBlock.style.display = 'none';
}
} }
function formatDate(dateString) { function formatDate(dateString) {

104
style.css
View File

@ -180,22 +180,37 @@ h2 {
box-shadow: 0 4px 15px rgba(0,0,0,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.1);
} }
.cert-header { .cert-company-header {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 20px;
border-bottom: 2px solid #2d3748; padding-bottom: 15px;
padding-bottom: 20px; border-bottom: 1px solid #2d3748;
} }
.company-name { .company-full-name {
font-size: 1.3rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
color: #2d3748; color: #2d3748;
margin-bottom: 15px; margin-bottom: 8px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
.company-details {
font-size: 0.9rem;
color: #4a5568;
display: flex;
justify-content: center;
gap: 30px;
}
.cert-header {
text-align: center;
margin-bottom: 25px;
border-bottom: 2px solid #2d3748;
padding-bottom: 15px;
}
.cert-title { .cert-title {
font-size: 2rem; font-size: 2rem;
font-weight: 900; font-weight: 900;
@ -208,6 +223,25 @@ h2 {
font-size: 1.1rem; font-size: 1.1rem;
color: #4a5568; color: #4a5568;
font-style: italic; font-style: italic;
margin-bottom: 15px;
}
.cert-number-block {
display: flex;
justify-content: space-between;
margin-top: 15px;
padding: 0 20px;
font-weight: 600;
color: #2d3748;
}
.cert-recipient {
background: #f7fafc;
border-left: 4px solid #667eea;
padding: 12px 15px;
margin: 20px 0;
font-size: 1rem;
color: #2d3748;
} }
.cert-body { .cert-body {
@ -270,35 +304,61 @@ h2 {
text-align: center; text-align: center;
} }
.cert-signature { .cert-signatures-block {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; gap: 40px;
margin-top: 40px; margin-top: 40px;
} }
.signature-line { .cert-signature-line {
flex: 1; flex: 1;
text-align: center;
} }
.sig-role { .sig-title {
font-weight: 600; font-weight: 700;
color: #2d3748; color: #2d3748;
font-size: 1.1rem; font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
} }
.signature-space { .sig-name {
text-align: right; font-size: 1rem;
color: #718096; color: #1a202c;
} min-height: 50px;
display: flex;
.signature-space span { align-items: flex-end;
display: block; justify-content: center;
} }
.sig-date { .sig-date {
margin-top: 8px; margin-top: 10px;
font-size: 0.95rem; font-size: 0.9rem;
color: #718096;
}
.cert-stamp-space {
margin-top: 30px;
text-align: right;
padding-right: 20px;
}
.stamp-placeholder {
display: inline-block;
width: 100px;
height: 100px;
border: 2px dashed #cbd5e0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #cbd5e0;
font-weight: 700;
font-size: 0.9rem;
margin-left: auto;
} }
.cert-watermark { .cert-watermark {