Daha hızlı ve pratik izin formu elinizin altında. form Çalıştığında ve yazdırırken ön izlemeler.
HTML Kod:
Kodu not defterine yapıştırın. İsim verin, uzantı ".html" olmalı. sonra çift tıklayarak çalıştırın. Firma ismi, İzin talep eden ve Metin mesajını, kalıcı olması için kod içinden de değiştirebilirsiniz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yıllık İzin Dilekçesi</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; background: #eef2f7; font-family: 'Segoe UI', Arial, sans-serif; }
.container { max-width: 1200px; margin: auto; padding: 20px; display: grid; grid-template-columns: 400px 1fr; gap: 20px; }
.panel { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.preview { background: transparent; padding: 0; box-shadow: none; }
label { display: block; margin-top: 10px; font-weight: 600; }
input, textarea { width: 100%; padding: 10px; border: 1px solid #ccd5e0; border-radius: 8px; margin-top: 5px; }
textarea { min-height: 70px; }
.btn { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #0d6efd; color: #fff; font-weight: 700; cursor: pointer; margin-top: 15px; }
.preview-page { width: 210mm; min-height: 297mm; background: #fff; margin: auto; padding: 20mm; border: 1px solid #d9e2ec; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.letter-title { text-align: center; font-size: 18pt; font-weight: 700; margin-top: 25mm; margin-bottom: 10mm; }
.letter-content { font-size: 12pt; line-height: 1.6; text-align: justify; }
.letter-content p { margin-bottom: 8mm; text-indent: 10mm; }
.signature { width: 75mm; margin-left: auto; margin-top: 20mm; }
@media print {
body { background: #fff; }
.container { display: block; padding: 0; }
.panel { display: none !important; }
.preview, .preview-page {
width: 100% !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: auto !important;
background: white !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="panel">
<label>Firma Bilgisi</label>
<input id="firma" value="SAVUNMA TEKNOLOJİ BİLİŞİM A.Ş.'NE">
<label>Dilekçe Metni</label>
<textarea id="metin">Şirketiniz bünyesinde, Teknik İşletme Dairesi, Kullanıcı Destek Biriminde görevli bulunmaktayım.</textarea>
<label>Başlangıç Tarihi</label>
<input type="date" id="baslangic">
<label>Bitiş Tarihi</label>
<input type="date" id="bitis">
<label>İzin Süresi (İş Günü)</label>
<input type="number" id="gun" readonly>
<label>İşbaşı Tarihi</label>
<input type="date" id="isbasi">
<label>Dilekçe Tarihi</label>
<input type="date" id="dilekce">
<label>Ad Soyad</label>
<input id="isim" value="Muhammed Yusuf OLGUN">
<button class="btn" id="printBtn">Yazdır / PDF Kaydet</button>
</div>
<div class="preview">
<div id="letter" class="preview-page"></div>
</div>
</div>
<script>
const el = id => document.getElementById(id);
const weekend = d => d.getDay() === 0 || d.getDay() === 6;
function parseDate(v) {
if (!v) return new Date();
const [y, m, d] = v.split('-').map(Number);
return new Date(y, m - 1, d);
}
function tr(v) { return v ? parseDate(v).toLocaleDateString('tr-TR') : ""; }
function workDays(s, e) {
let c = 0, t = new Date(s);
while (t <= e) { if (!weekend(t)) c++; t.setDate(t.getDate() + 1); }
return c;
}
function nextWorkDay(d) {
let x = new Date(d);
do { x.setDate(x.getDate() + 1); } while (weekend(x));
return x.toISOString().split('T')[0];
}
function numberToText(n) {
const map = {0:'sıfır',1:'bir',2:'iki',3:'üç',4:'dört',5:'beş',6:'altı',7:'yedi',8:'sekiz',9:'dokuz',10:'on'};
return map[n] || n;
}
function render() {
el('letter').innerHTML = `
<div class="letter-title">${el('firma').value}</div>
<div class="letter-content">
<p>${el('metin').value}</p>
<p>Yıllık izin hakkımı kullanmak üzere <b>${tr(el('baslangic').value)}</b> - <b>${tr(el('bitis').value)}</b> tarihleri arasında <b>${el('gun').value} (${numberToText(Number(el('gun').value))}) iş günü</b> süreyle izinli sayılmam hususunda gereğini arz eder, <b>${tr(el('isbasi').value)}</b> tarihinde görevime başlayacağımı bilgilerinize sunarım.</p>
</div>
<div class="signature">
<div>${tr(el('dilekce').value)}</div>
<br><b>${el('isim').value}</b><br>İmza
</div>`;
}
function recalc() {
const b = parseDate(el('baslangic').value);
const bt = parseDate(el('bitis').value);
if (bt < b) { el('bitis').value = el('baslangic').value; return; }
el('gun').value = workDays(b, bt);
if (!el('isbasi').value || parseDate(el('isbasi').value) <= bt) {
el('isbasi').value = nextWorkDay(bt);
}
render();
}
let today = new Date().toISOString().split('T')[0];
el('baslangic').value = today;
el('bitis').value = today;
el('dilekce').value = today;
recalc();
['firma', 'metin', 'isim', 'dilekce'].forEach(i => el(i).addEventListener('input', render));
el('baslangic').addEventListener('change', recalc);
el('bitis').addEventListener('change', recalc);
el('isbasi').addEventListener('change', render);
el('printBtn').addEventListener('click', () => {
recalc();
window.print();
});
</script>
</body>
</html>