183 lines
7.8 KiB
HTML
183 lines
7.8 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>
|
||
<form id="debtForm">
|
||
<div class="form-group">
|
||
<label for="fio">ФИО сотрудника *</label>
|
||
<input type="text" id="fio" name="fio" placeholder="Иванов Иван Иванович" required>
|
||
</div>
|
||
|
||
<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 class="form-group">
|
||
<label for="employeeId">Табельный номер</label>
|
||
<input type="text" id="employeeId" name="employeeId" placeholder="00123">
|
||
</div>
|
||
|
||
<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-group">
|
||
<label for="debtPeriod">Период задолженности *</label>
|
||
<input type="text" id="debtPeriod" name="debtPeriod" placeholder="Январь 2025 — Март 2025" required>
|
||
</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-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="director">Руководитель (кто подписывает)</label>
|
||
<input type="text" id="director" name="director" placeholder="Генеральный директор Петров П.П.">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">📄 Сформировать справку</button>
|
||
<button type="button" class="btn btn-secondary" onclick="clearForm()">Очистить</button>
|
||
</div>
|
||
</form>
|
||
</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-header">
|
||
<div class="company-name" id="certCompanyName">ООО «Ваша Компания»</div>
|
||
<div class="cert-title">СПРАВКА</div>
|
||
<div class="cert-subtitle">о наличии задолженности сотрудника</div>
|
||
</div>
|
||
|
||
<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">
|
||
<p>
|
||
Выдана в том, что <strong id="certFio">___________________________</strong>
|
||
</p>
|
||
<p>
|
||
работает(ет) в компании <strong id="certCompanyNameInline">___________________________</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">
|
||
<p class="cert-debt-label">Имеет задолженность:</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>
|
||
</div>
|
||
|
||
<div class="cert-footer">
|
||
<p class="cert-purpose">
|
||
Справка выдана для внутреннего использования в компании.
|
||
</p>
|
||
|
||
<div class="cert-signature">
|
||
<div class="signature-line">
|
||
<span class="sig-role" id="certDirector">Руководитель _______________</span>
|
||
</div>
|
||
<div class="signature-space">
|
||
<span>__________________</span>
|
||
<span class="sig-date" id="certSignDate">«___» ________ 20__ г.</span>
|
||
</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>
|