Deneyim: Demo Ürünleri Değerlendirme Formu

Demo Ürünleri Değerlendirme Formu

Satın alma aşamasında, firmalar tarafından "Demo" olarak gönderilen ürünlerde teknik kontrollerin (+, -, >) Öneri şeklinde notlar düşülerek, her bir ürüne ait bilgilerin pratik bir şekilde girilip, sunulmasını sağlayan bir formdur.

Demo olarak gelen ürüne ait, bilgilerin yer aldığı bir belgeden resim ekleme veya metin olarak girebilirsiniz.

İki parça halinde yansıyan görüntüden ürünlerin eklenmesi ve bilgilerin girilmiş hali görülmektedir.

Belgeyi Ön izleyebilir. PDF olarak kaydede bilirsiniz.

Formda girilen bilgileri Excel olarak datayı dışarı ve içeri aktarabilirsiniz. Form kodu üzerinde başlıkta bulunan ifadeleri değiştirerek kendi departmanınızda kullanmak üzere özelleştirebilirsiniz. İmza alanının üst tarafında bulunan yere tarih girebilir, İmzalayacak kişileri, butonlarla arttırıp azaltabilirsiniz.

HTML Kod:

<!DOCTYPE html>

<head>

<title>Demo Ürünleri Değerlendirme Formu</title>

<style>

/* --- TEMEL DEĞİŞKENLER VE SIFIRLAMALAR --- */

:root {

--bg: #f8fafc;

--panel-bg: #ffffff;

--border-color: #cbd5e1;

--primary: #0284c7;

--text-main: #1e293b;

--text-muted: #94a3b8;

--shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);

--radius: 6px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Segoe UI", Arial, sans-serif;

}

/* YAZDIRMA İÇİN SAYFA YÖNÜ VE BOYUTU */

@page {

size: A4 portrait;

margin: 10mm 8mm 12mm 8mm;

@bottom-right {

content: "Sayfa " counter(page);

font-size: 11px;

font-weight: bold;

font-family: "Segoe UI", Arial, sans-serif;

color: #000;

}

/* Ekranı taşırmama ve tam sığdırma ayarları (Orijinal Yapı) */

html, body {

height: 100vh;

overflow: hidden;

background: var(--bg);

-webkit-print-color-adjust: exact;

print-color-adjust: exact;

}

body {

display: flex;

flex-direction: column;

padding: 8px;

color: var(--text-main);

font-size: 12px;

}

/* --- BAŞLIK ALANI STİLLERİ --- */

.header {

display: flex; justify-content: space-between; align-items: center;

padding: 8px 12px; background: var(--panel-bg);

border: 1px solid var(--border-color); border-top: 4px solid var(--primary);

border-radius: var(--radius); box-shadow: var(--shadow);

flex-shrink: 0; gap: 10px;

}

.header .left { display: flex; align-items: center; gap: 10px; width: 33%; }

.header .logo img { height: 38px; }

.header .title2 { font-size: 11px; color: #475569; font-weight: 600; }

.header .center-title { width: 34%; text-align: center; }

.header .title1 { font-size: 14px; font-weight: 800; color: var(--text-main); letter-spacing: 0.5px; }

.header .right { width: 33%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }

.header .right-title { font-size: 11px; font-weight: 700; text-align: right; color: var(--text-main); }

.button-frame { display: flex; gap: 4px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f1f5f9; flex-wrap: nowrap; }

.btn { padding: 3px 6px; font-size: 10px; font-weight: bold; cursor: pointer; border-radius: 4px; border: 1px solid; transition: all 0.2s ease; white-space: nowrap; }

.btn:active { transform: translateY(1px); }

.btn-blue { background-color: #e0f2fe; color: #0284c7; border-color: #bae6fd; }

.btn-blue:hover { background-color: #bae6fd; }

.btn-green { background-color: #dcfce7; color: #16a34a; border-color: #bbf7d0; }

.btn-green:hover { background-color: #bbf7d0; }

.btn-red { background-color: #fee2e2; color: #dc2626; border-color: #fecaca; }

.btn-red:hover { background-color: #fecaca; }

.btn-gray { background-color: #ffffff; color: #475569; border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.btn-gray:hover { background-color: #f8fafc; }

.spacer { height: 8px; flex-shrink: 0; }

/* --- ANA İÇERİK ÇERÇEVESİ (KAYDIRMA ÇUBUĞU KORUNDU) --- */

.main-content {

flex-grow: 1;

display: flex;

flex-direction: column;

overflow-y: auto; /* Kaydırma çubuğu aktif */

overflow-x: hidden;

background: var(--panel-bg);

border: 1px solid var(--border-color);

border-radius: var(--radius);

box-shadow: var(--shadow);

padding: 12px 15px;

}

/* --- FORM ELEMENTLERİ STİLLERİ --- */

.section-title {

font-size: 13px; font-weight: 700; margin-bottom: 4px;

color: var(--primary); /* Kurumsal Mavi */

border-bottom: 1px solid #e2e8f0; padding-bottom: 2px;

margin-top: 8px; text-transform: uppercase; letter-spacing: 0.3px;

}

.section-title:first-child { margin-top: 0; }

#s1-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }

#s1-table td { padding: 2px; border: 1px solid #e2e8f0; vertical-align: middle; }

#s1-table input { width: 100%; padding: 4px 6px; border: 1px solid transparent; outline: none; font-size: 11px; background: #f8fafc; border-radius: 3px; }

#s1-table input:focus { border-color: var(--primary); background: #fff; }

.row-controls { width: 45px; text-align: center; white-space: nowrap; border: none !important; background: transparent; }

#image-container { display: none; width: 100%; text-align: center; margin-bottom: 5px; }

#image-container img { max-width: 100%; height: auto; max-height: 180px; border: 1px solid var(--border-color); border-radius: 4px; }

.tech-table-header { display: flex; gap: 10px; font-size: 11px; font-weight: bold; color: #64748b; padding: 0 6px; margin-bottom: 2px; text-transform: uppercase; }

.tech-row { border: 1px solid #e2e8f0; padding: 4px 6px; margin-bottom: 6px; border-radius: 6px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }

.tech-row-header { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }

.tech-row-header input { padding: 3px 5px; border: 1px solid #e2e8f0; font-size: 11px; min-width: 0; border-radius: 3px; background: #f8fafc; }

.tech-row-header input:focus { border-color: var(--primary); background: #fff; outline: none; }

.s1-input, .s2-urun {

font-weight: bold !important;

}

.test-status { display: flex; gap: 8px; align-items: center; font-size: 11px; white-space: nowrap; }

.status-item { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; color: var(--text-muted); transition: all 0.2s; }

.custom-check { width: 14px; height: 14px; border: 2px solid var(--border-color); border-radius: 3px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: transparent; background: #f8fafc; transition: 0.2s; }

.status-item.active { color: var(--primary); font-weight: 600; }

.status-item.active .custom-check { background-color: var(--primary); border-color: var(--primary); color: white; }

.status-item.active .custom-check::after { content: '✓'; font-size: 10px; }

.feedback-btns { margin-top: 4px; display: flex; justify-content: center; gap: 6px; }

.feedback-btns button { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; }

.feedback-btns button:hover { background: #e2e8f0; }

.feedback-area { margin-top: 3px; display: flex; flex-direction: column; gap: 3px; }

.result-section { font-size: 11px; line-height: 1.4; margin-bottom: 8px; margin-top: 2px; color: #334155; }

/* --- İMZA ALANI STİLLERİ --- */

.signature-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 2px; }

.signature-container { display: flex; justify-content: space-around; align-items: flex-start; gap: 15px; width: 100%; margin-top: 8px; transition: gap 0.2s; }

.sig-block { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }

.sig-name {

width: 100%; min-width: 0; text-align: center; font-size: 12px;

color: var(--text-main); font-weight: 600; border: none;

border-bottom: 1px dashed var(--border-color); outline: none; background: transparent;

padding-bottom: 2px; word-wrap: break-word; white-space: pre-wrap;

transition: font-size 0.2s;

}

.sig-name:empty:before { content: attr(data-placeholder); color: #cbd5e1; font-weight: normal; }

.sig-label { margin-top: 6px; color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; transition: font-size 0.2s; }

.print-header-repeat { display: none; }

.page-number-display { display: none; }

/* --- SADECE YAZDIRMA VE PDF ÖNİZLEME AYARLARI --- */

@media print {

.no-print { display: none !important; }

html, body { height: auto !important; overflow: visible !important; background: #fff; padding: 0; margin: 0; }

.main-content {

height: auto !important;

overflow: visible !important;

border: none !important;

box-shadow: none !important;

padding: 0 !important;

}

.print-header-repeat {

display: block !important;

break-after: always;

}

body > .header { display: none !important; }

.header { border: 1px solid #000 !important; box-shadow: none !important; border-top: 3px solid #000 !important; margin-bottom: 10px; }

.section-title { color: var(--primary) !important; border-bottom: 1px solid #000 !important; }

* {

orphans: 3;

widows: 3;

}

.tech-row {

break-inside: avoid;

page-break-inside: avoid;

background: transparent !important;

border: 1px solid #ccc !important;

}

input { border: none !important; background: transparent !important; padding: 0 !important; }

.sig-name { border-bottom: 1px dashed #000 !important; color: #000 !important; width: 100% !important; }

.status-item { color: #999 !important; }

.status-item.active { color: #000 !important; }

.custom-check { border-color: #999 !important; background: transparent !important; }

.status-item.active .custom-check { background-color: #000 !important; border-color: #000 !important; color: #fff !important; }

}

</style>

</head>

<body>

<div class="title2">Helpdes Koordinatörlüğü</div>

</div>

<div class="title1">DEMO ÜRÜNLERİ DEĞERLENDİRME FORMU</div>

</div>

<div class="right-title">MYO MÜDÜRLÜĞÜ</div>

</div>

</div>

<div class="title2">Helpdesk Koordinatörlüğü</div>

</div>

<div class="title1">DEMO ÜRÜNLERİ DEĞERLENDİRME FORMU</div>

</div>

<div class="right-title">MYO MÜDÜRLÜĞÜ</div>

<button class="btn btn-gray" onclick="document.getElementById('img-upload').click()">Resim Ekle</button>

<button class="btn btn-gray" onclick="window.print()">Önizleme/PDF</button>

<button class="btn btn-blue" onclick="exportExcel()">Dışa Aktar</button>

<button class="btn btn-blue" onclick="document.getElementById('excel-import').click()">İçe Aktar</button>

</div>

<div class="section-title">Demo Olarak Teslim Alınan Ürünler</div>

</tbody>

</table>

</div>

<br>

<button class="btn btn-red no-print" onclick="removeImage()" style="margin-top:4px;">Resmi Kaldır (Manele Dön)</button>

</div>

<div class="section-title">Teknik Değerlendirme ve Deneyimler</div>

<div style="flex: 3; text-align: center;">Marka / Model / Seri No</div>

<div style="flex: 2;">Değerlendirme</div>

</div>

</div>

</div>

<span>Sonuç:</span>

</div>

Demo kapsamında gönderilen ürünler <strong id="sonuc-urunler">""</strong> Teknik deneyim ve değerlendirme açısından test edilmiştir.

</div>

</div>

</div>

// --- S1: MANUEL SATIR EKLEME VE ÇIKARMA ---

function addS1Row(val = '') {

const tbody = document.getElementById('s1-tbody');

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

tr.innerHTML = `

</td>

tbody.appendChild(tr);

}

function removeS1Row(btn) {

const tbody = document.getElementById('s1-tbody');

if (tbody.children.length > 1) {

const tr = btn.parentElement.parentElement;

tbody.removeChild(tr);

}

// --- S1: RESİM EKLEME/KALDIRMA ---

function loadImage(event) {

const file = event.target.files[0];

if(file) {

const reader = new FileReader();

reader.onload = function(e) {

document.getElementById('demo-image').src = e.target.result;

document.getElementById('s1-manual').style.display = 'none';

document.getElementById('image-container').style.display = 'block';

}

reader.readAsDataURL(file);

}

function removeImage() {

document.getElementById('demo-image').src = '';

document.getElementById('s1-manual').style.display = 'block';

document.getElementById('image-container').style.display = 'none';

document.getElementById('img-upload').value = '';

}

// --- S2: TEKNİK DEĞERLENDİRME ---

function addTechRow(data = {}) {

const container = document.getElementById('s2-container');

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

div.className = 'tech-row';

div.innerHTML = `

</div>

</div>

<div class="status-item ${data.status==='Başarılı' ? 'active' : ''}" onclick="toggleStatus(this, 'Başarılı')"><div class="custom-check"></div> Başarılı</div>

<div class="status-item ${data.status==='Kısmen' ? 'active' : ''}" onclick="toggleStatus(this, 'Kısmen')"><div class="custom-check"></div> Kısmen</div>

<div class="status-item ${data.status==='Başarısız' ? 'active' : ''}" onclick="toggleStatus(this, 'Başarısız')"><div class="custom-check"></div> Başarısız</div>

</div>

</div>

</div>

container.appendChild(div);

if(data.feedbacks && data.feedbacks.length > 0) {

const fArea = div.querySelector('.feedback-area');

data.feedbacks.forEach(f => {

addFeedback(fArea, f.icon, f.text);

});

}

updateResult();

}

function toggleStatus(el, val) {

const parent = el.parentElement;

if (el.classList.contains('active')) {

el.classList.remove('active');

parent.querySelector('.s2-status-val').value = '';

} else {

parent.querySelectorAll('.status-item').forEach(i => i.classList.remove('active'));

el.classList.add('active');

parent.querySelector('.s2-status-val').value = val;

}

// Renkler: ( + ) Yeşil, ( - ) Kırmızı, ( > ) Mavi

function getFeedbackStyle(type) {

if(type === '( + )') return 'color: #16a34a !important; font-weight: bold; width: 30px; text-align: center; flex-shrink: 0;';

if(type === '( - )') return 'color: #dc2626 !important; font-weight: bold; width: 30px; text-align: center; flex-shrink: 0;';

if(type === '( > )') return 'color: #0284c7 !important; font-weight: bold; width: 30px; text-align: center; flex-shrink: 0;';

return 'color: #475569 !important; font-weight: bold; width: 30px; text-align: center; flex-shrink: 0;';

}

function addFeedback(target, type, text = '') {

const area = target.classList ? (target.classList.contains('feedback-area') ? target : target.parentElement.nextElementSibling) : target.parentElement.nextElementSibling;

const wrapper = document.createElement('div');

wrapper.className = 'feedback-wrapper';

wrapper.style.cssText = 'display: flex; gap: 4px; align-items: flex-start; margin-top: 3px; width: 100%;';

wrapper.innerHTML = `

</div>

area.appendChild(wrapper);

if (!text) {

const textDiv = wrapper.querySelector('.fb-text');

setTimeout(() => { textDiv.focus(); }, 10);

}

function updateResult() {

const urunInputs = document.querySelectorAll('.s2-urun');

const urunler = Array.from(urunInputs).map(i => i.value.trim()).filter(v => v !== '');

const txt = urunler.length > 0 ? '"' + urunler.join(', ') + '"' : '""';

document.getElementById('sonuc-urunler').textContent = txt;

}

// --- İMZA ALANI VE DİNAMİK YENİDEN BOYUTLANDIRMA ---

function adjustSignatureSizes() {

const container = document.getElementById('sig-container');

const sigNames = container.querySelectorAll('.sig-name');

const sigLabels = container.querySelectorAll('.sig-label');

const count = sigNames.length;

let fSize = '12px';

let lSize = '10px';

let gap = '15px';

if (count === 4) {

fSize = '11px'; lSize = '9px'; gap = '10px';

} else if (count === 5) {

fSize = '10px'; lSize = '8px'; gap = '8px';

} else if (count >= 6) {

fSize = '9px'; lSize = '8px'; gap = '4px';

}

container.style.gap = gap;

sigNames.forEach(el => el.style.fontSize = fSize);

sigLabels.forEach(el => el.style.fontSize = lSize);

}

function createSigBlock(name = '') {

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

div.className = 'sig-block';

div.innerHTML = `

return div;

}

function addSignature(name = '') {

const container = document.getElementById('sig-container');

container.appendChild(createSigBlock(name));

adjustSignatureSizes();

}

function removeSignature() {

const container = document.getElementById('sig-container');

if(container.children.length > 0) {

container.lastElementChild.remove();

}

adjustSignatureSizes();

}

// --- EXPORT / IMPORT ---

function getFormData() {

const s1 = Array.from(document.querySelectorAll('.s1-input')).map(i => i.value);

const s2 = Array.from(document.querySelectorAll('.tech-row')).map(row => {

return {

urun: row.querySelector('.s2-urun').value,

marka: row.querySelector('.s2-marka').value,

model: row.querySelector('.s2-model').value,

seri: row.querySelector('.s2-seri').value,

status: row.querySelector('.s2-status-val').value,

feedbacks: Array.from(row.querySelectorAll('.feedback-wrapper')).map(w => {

const iconNode = w.querySelector('.fb-icon');

const textNode = w.querySelector('.fb-text');

return {

icon: iconNode ? iconNode.innerText.trim() : '( > )',

text: textNode ? textNode.innerText.trim() : ''

};

})

};

});

const sigs = Array.from(document.querySelectorAll('.sig-name')).map(i => i.innerText.trim());

const img = document.getElementById('demo-image').src;

const hasImg = document.getElementById('image-container').style.display === 'block';

return { s1, s2, sigs, img, hasImg };

}

function loadData() {

addS1Row();

addTechRow();

addSignature();

}

function populateForm(data) {

document.getElementById('s1-tbody').innerHTML = '';

if(data.s1 && data.s1.length > 0) {

data.s1.forEach(val => addS1Row(val));

} else { addS1Row(); }

if(data.hasImg) {

document.getElementById('demo-image').src = data.img;

document.getElementById('s1-manual').style.display = 'none';

document.getElementById('image-container').style.display = 'block';

}

document.getElementById('s2-container').innerHTML = '';

if(data.s2) { data.s2.forEach(item => addTechRow(item)); }

document.getElementById('sig-container').innerHTML = '';

if(data.sigs && data.sigs.length > 0) {

data.sigs.forEach(name => addSignature(name));

} else {

addSignature();

}

updateResult();

}

function exportExcel() {

const data = getFormData();

const wb = XLSX.utils.book_new();

const ws1_data = [['Teslim Alınan Ürünler']];

data.s1.forEach(i => ws1_data.push([i]));

const ws1 = XLSX.utils.aoa_to_sheet(ws1_data);

XLSX.utils.book_append_sheet(wb, ws1, "Teslim Alinanlar");

const ws2_data = [['Ürün', 'Marka', 'Model', 'Seri No', 'Durum', 'Değerlendirmeler']];

data.s2.forEach(item => {

const feedbacksText = item.feedbacks.map(f => `${f.icon} ${f.text}`).join(' | ');

ws2_data.push([item.urun, item.marka, item.model, item.seri, item.status, feedbacksText]);

});

const ws2 = XLSX.utils.aoa_to_sheet(ws2_data);

XLSX.utils.book_append_sheet(wb, ws2, "Degerlendirmeler");

const ws3_data = [['İmza Sahipleri']];

data.sigs.forEach(sig => ws3_data.push([sig]));

const ws3 = XLSX.utils.aoa_to_sheet(ws3_data);

XLSX.utils.book_append_sheet(wb, ws3, "Imzalar");

XLSX.writeFile(wb, "Demo_Degerlendirme.xlsx");

}

function importExcel(event) {

const file = event.target.files[0];

if(!file) return;

const reader = new FileReader();

reader.onload = function(e) {

const data = new Uint8Array(e.target.result);

const workbook = XLSX.read(data, {type: 'array'});

const formData = { s1: [], s2: [], sigs: [], hasImg: false };

if(workbook.SheetNames.includes("Teslim Alinanlar")) {

const ws1 = workbook.Sheets["Teslim Alinanlar"];

const json1 = XLSX.utils.sheet_to_json(ws1, {header:1});

for(let i=1; i<json1.length; i++) {

if(json1[i][0]) formData.s1.push(json1[i][0]);

}

if(workbook.SheetNames.includes("Degerlendirmeler")) {

const ws2 = workbook.Sheets["Degerlendirmeler"];

const json2 = XLSX.utils.sheet_to_json(ws2, {header:1});

for(let i=1; i<json2.length; i++) {

if(json2[i].length > 0) {

formData.s2.push({

urun: json2[i][0] || '',

marka: json2[i][1] || '',

model: json2[i][2] || '',

seri: json2[i][3] || '',

status: json2[i][4] || '',

feedbacks: json2[i][5] ? json2[i][5].toString().split(' | ').map(str => {

let icon = '( > )';

let text = str;

if(str.startsWith('( + )')) { icon = '( + )'; text = str.substring(5).trim(); }

else if(str.startsWith('( - )')) { icon = '( - )'; text = str.substring(5).trim(); }

else if(str.startsWith('( > )')) { icon = '( > )'; text = str.substring(5).trim(); }

return { icon, text };

}) : []

});

}

if(workbook.SheetNames.includes("Imzalar")) {

const ws3 = workbook.Sheets["Imzalar"];

const json3 = XLSX.utils.sheet_to_json(ws3, {header:1});

for(let i=1; i<json3.length; i++) {

if(json3[i][0] !== undefined) {

formData.sigs.push(json3[i][0]);

}

populateForm(formData);

document.getElementById('excel-import').value = '';

};

reader.readAsArrayBuffer(file);

}

window.onload = loadData;

</script>

</body>

</html>