285 lines
13 KiB
HTML
285 lines
13 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="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>📄 Справка о задолженности сотрудника</h1>
|
||
<p class="subtitle">Для предоставления в юридический отдел</p>
|
||
</header>
|
||
|
||
<main class="main-grid">
|
||
<!-- Форма ввода данных -->
|
||
<section class="form-section">
|
||
<h2>Данные для справки</h2>
|
||
|
||
<!-- Реквизиты компании -->
|
||
<div class="form-group">
|
||
<label for="companyName">Название компании *</label>
|
||
<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">
|
||
<label for="position">Должность *</label>
|
||
<input type="text" id="position" name="position" placeholder="Менеджер по продажам" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="department">Подразделение</label>
|
||
<input type="text" id="department" name="department" placeholder="Отдел продаж">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="employeeId">Табельный номер</label>
|
||
<input type="text" id="employeeId" name="employeeId" placeholder="00123">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="employmentStatus">Статус</label>
|
||
<select id="employmentStatus" name="employmentStatus">
|
||
<option value="active">Работает</option>
|
||
<option value="terminated">Уволена</option>
|
||
</select>
|
||
</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">
|
||
<label for="debtPeriod">Период задолженности *</label>
|
||
<input type="text" id="debtPeriod" name="debtPeriod" placeholder="Январь 2025 — Март 2025" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="reason">Основание задолженности *</label>
|
||
<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>
|
||
|
||
<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="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">
|
||
<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="Генеральный директор Петров П.П.">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="accountant">Главный бухгалтер</label>
|
||
<input type="text" id="accountant" name="accountant" placeholder="Главный бухгалтер Сидорова А.А.">
|
||
</div>
|
||
</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 class="preview-section">
|
||
<h2>Предпросмотр</h2>
|
||
<div class="preview-toolbar">
|
||
<button class="btn btn-print" onclick="printCertificate()">🖨 Печать / PDF</button>
|
||
<button class="btn btn-copy" onclick="copyToClipboard()">📋 Копировать текст</button>
|
||
</div>
|
||
|
||
<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-title">СПРАВКА</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 class="cert-body">
|
||
<div class="cert-content">
|
||
<p>
|
||
Выдана в том, что <strong id="certFio">___________________________</strong>
|
||
</p>
|
||
<p id="certHireDateBlock" style="display:none;">
|
||
работает(ет) в <strong id="certCompanyNameInline">___________________________</strong>
|
||
с <span id="certHireDate">«___» ________ 20__ г.</span>
|
||
</p>
|
||
<p id="certHireDateEmpty" style="display:block;">
|
||
работает(ет) в <strong id="certCompanyNameInline2">___________________________</strong>
|
||
</p>
|
||
<p>
|
||
в должности <strong id="certPosition">___________________________</strong>
|
||
</p>
|
||
<p id="certDepartmentBlock" style="display:none;">
|
||
подразделение: <strong id="certDepartment">___________________________</strong>
|
||
</p>
|
||
<p id="certEmployeeIdBlock" style="display:none;">
|
||
табельный номер: <strong id="certEmployeeId">______</strong>
|
||
</p>
|
||
|
||
<div class="cert-debt-block" id="certDebtBlock">
|
||
<p class="cert-debt-label" id="certDebtLabel">Имеет задолженность:</p>
|
||
<p class="cert-debt-amount">
|
||
<strong id="certDebtAmount">___________</strong>
|
||
<span id="certDebtAmountWords">______________________</span>
|
||
</p>
|
||
<p class="cert-debt-period">
|
||
за период: <strong id="certDebtPeriod">___________________________</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<p id="certReasonBlock">
|
||
Основание: <strong id="certReason">___________________________</strong>
|
||
</p>
|
||
<p id="certDocumentBlock" style="display:none;">
|
||
Документ-основание: <strong id="certDocument">___________________________</strong>
|
||
</p>
|
||
|
||
<p id="certLegalBasisBlock" style="display:none;">
|
||
Нормативное основание: <strong id="certLegalBasis">___________________________</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="cert-footer">
|
||
<p class="cert-purpose">
|
||
Справка выдана для предоставления в юридический отдел.
|
||
</p>
|
||
|
||
<div class="cert-signatures-block">
|
||
<div class="cert-signature-line">
|
||
<div class="sig-title">Руководитель</div>
|
||
<div class="sig-name" id="certDirector">___________________ / _______________</div>
|
||
<div class="sig-date" id="certDirectorSignDate">«___» ________ 20__ г.</div>
|
||
</div>
|
||
|
||
<div class="cert-signature-line">
|
||
<div class="sig-title">Главный бухгалтер</div>
|
||
<div class="sig-name" id="certAccountant">___________________ / _______________</div>
|
||
<div class="sig-date" id="certAccountantSignDate">«___» ________ 20__ г.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cert-stamp-space">
|
||
<div class="stamp-placeholder">М.П.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cert-watermark">Для юридического отдела</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2025 Внутренний документооборот компании</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|