Deneyim: Hurda-Raporu

Hurda raporu tutmamız gerektiğinde, Excel üzerinde hazırlanmış tabloya biraz prestij katarak kurumsal imaj ile form ile imzaya sunmak için hazırlanan çalışmadır.

(Kod üzerinde "Ctrl+F" ile değişmesini istediğiniz ifadeleri, değiştirip kaydederek html formatında kullanabilirsiniz. Logo için, "logo.jpg" html dosyası ile aynı klasörde olmalıdır.

HTML Kod:

<!DOCTYPE html>

<head>

<title>HURDA RAPORU</title>

<style>

* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }

:root { --primary:#2563eb; --bg:#f3f4f6; --text:#111827; --border:#dbe4ee; }

body { background:var(--bg); color:var(--text); padding:20px; }

.container { max-width:1000px; margin:auto; }

.section-box { background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; }

/* Header */

.main-header { padding:8px 15px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 4px rgba(0,0,0,.05); }

.header-left { display:flex; align-items:center; gap:15px; }

.logo-wrapper { width:50px; height:50px; border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink: 0; }

.logo-wrapper img { width:90%; height:90%; object-fit:contain; }

.header-center { text-align: center; flex-grow: 1; padding: 0 10px; }

.main-title { font-size:18px; font-weight:800; line-height: 1.1; }

.subtitle { color:#475569; font-size:13px; font-weight:600; }

.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.dept-text { font-size: 10px; font-weight: 700; color: #64748b; white-space: nowrap; }

/* Orta Alan - Çerçevesiz Textarea */

.main-panel { padding:20px; }

textarea {

width:100%;

padding:5px;

border: none !important; /* Çerçeve kaldırıldı */

outline: none !important; /* Tıklandığındaki odak çizgisi kaldırıldı */

background: transparent;

font-size:16px;

resize:none;

overflow:hidden;

min-height: 50px;

/* Yeni Eklenen Özellikler */

text-align: justify; /* İki yana yasla */

text-indent: 40px; /* Paragraf başı boşluğu */

line-height: 1.5; /* Satır aralığını biraz açarak okunabilirliği artır */

}

.image-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; width:100%; margin-top: 10px; }

.img-thumb { max-width: 100%; height: auto; max-height: 400px; object-fit: contain; border-radius:8px; border:1px solid var(--border); cursor:pointer; }

.actions { display:flex; gap:10px; justify-content:center; margin-bottom:15px; }

.btn { border:none; padding:10px 20px; border-radius:10px; font-weight:600; cursor:pointer; color:#fff; }

.btn-primary { background:var(--primary); }

.btn-success { background:#16a34a; }

/* İmza Alanı Güncellemesi */

.signature-grid { display:flex; justify-content:center; padding:15px; }

.signature-box { padding:5px; text-align:center; width: 300px; }

.edit-name { border:none; background:transparent; text-align:center; width:100%; font-weight:bold; cursor:pointer; padding:5px; }

.edit-name:focus { outline:none; border:1px solid var(--primary); border-radius:4px; }

.sig-line { color:#94a3b8; font-size:11px; margin-top:5px; border-top:1px solid var(--border); display:inline-block; padding:0 30px; }

@media print {

@page { size: portrait; margin: 1cm; } /* Dikey format için güncellendi */

body { background:#fff; padding:0; }

.container { max-width: 100% !important; }

.actions, .btn { display:none !important; }

.section-box { border:1px solid #ccc; box-shadow:none; }

}

</style>

</head>

<body>

<div class="subtitle">Helpdesk</div>

</div>

<div class="main-title" contenteditable="true">HURDA RAPORU</div>

</div>

</div>

<textarea id="metinAlani" rows="1" oninput="autoGrow(this)">Aşağıdaki listede; ekonomik ömrünü doldurmuş, kullanılamaz veya tamir edilemez duruma gelmiş, hurdaya ayrılması gerekli ürünler yer almaktadır.</textarea>

<button class="btn btn-primary" onclick="imageInput.click()">+ Resim Ekle</button>

</div>

<button class="btn btn-success" onclick="window.print()">Yazdır / PDF</button>

</div>

<div style="font-size:11px; font-weight:bold;">ONAYLAYAN</div>

<input type="text" class="edit-name" value="Muhammed Yusuf OLGUN" readonly

ondblclick="this.readOnly=false;" onblur="this.readOnly=true;">

</div>

tarih.value = new Date().toISOString().split('T')[0];

function autoGrow(element) {

element.style.height = "auto";

element.style.height = (element.scrollHeight) + "px";

}

// Sayfa yüklendiğinde metin alanını içindeki metne göre otomatik boyutlandır

window.addEventListener('DOMContentLoaded', () => {

autoGrow(document.getElementById('metinAlani'));

});

const imageInput = document.getElementById('imageInput');

const imageGallery = document.getElementById('imageGallery');

imageInput.addEventListener('change', (e) => {

for (let file of e.target.files) {

const reader = new FileReader();

reader.onload = (ev) => {

const img = document.createElement('img');

img.src = ev.target.result;

img.className = 'img-thumb';

// Resim silinirken onay penceresi ekledik

img.onclick = () => {

if(confirm('Bu resmi silmek istediğinize emin misiniz?')) img.remove();

};

imageGallery.appendChild(img);

};

reader.readAsDataURL(file);

}

});

logoWrapper.onclick = () => logoInput.click();

logoInput.onchange = (e) => {

const reader = new FileReader();

reader.onload = (ev) => logoImage.src = ev.target.result;

reader.readAsDataURL(e.target.files[0]);

};

</script>

</body>

</html>

Kaynaklar:

* Gemini