Deneyim: Promt-AI-“ARIZA TESPİT VE ONARIM FORMU"

Promt-AI-“ARIZA TESPİT VE ONARIM FORMU"

Helpdesk / Kullanıcı Destek biriminde görev alıyorsanız, hizmet sunduğunuz departmanlardaki kullanıcıların kullandığı ürün ve sistemlerde yaşanan sorunlara ilk müdahaleyi sağlayan ekip sizsiniz. Üründe meydana gelen fiziksel hasar, arıza, servis süreci, parça değişimi veya cihaz değişimi gibi durumlarda ise sürecin kayıt altına alınabilmesi için resmi bir rapor hazırlanması gereklidir.

Rapor hazırlama süreçlerinde Word veya Excel üzerinde manuel veri akışıyla çalışmak artık eski yöntemler arasında kaldı. Bu sürecin modern, dinamik ve tek bir uygulama üzerinden yönetilebilmesi ise; yazılım bilgisi yada yapay zekâyı etkili kullanabilme becerisiyle mümkün hale geliyor.

Buradaki en önemli konu, yapay zekâ ile aynı dili konuşabilmek ve doğru promptlar (komutları) verebilmek. Mevcut Excel tablo yapımı ekleyerek bunu HTML tabanlı bir sayfaya dönüştürmesini istedim. Ardından ihtiyaçlara göre yeni talepler oluşturarak, her aşamada testler yapıp geliştirilmiş bir kod yapısı elde ettim.

Daha sonra bu süreci tekrar kullanılabilir hale getirmek için, oluşturulan yapının promptlara dönüştürülmesini talep ettim. Sonuç olarak aşağıda yer alan komutlar, kodlar, görseller ve ek özellikler ortaya çıktı.

Çıktı üzerinde, Neler yapabiliyoruz?

Hızlı veri girişi ve Modern arayüz
Kod içinde; "HELPDESK", "MYO" bu kelimeleri "Ctrt + F ile araştırıp, kalıcı olarak değiştirebilirsiniz. Birim ve veya Bağlı bulunduğunuz Müdürlüğün ismini girebilirsiniz.
Önizleme, İçeri aktar, CSV olarak dışarı aktarma, Yazdırma ve Kaydetme yer alır.
Logo üzerinde peş peşe 5 defa bastığınızda, logo değişimi yapabiliyorsunuz.
Logo görünümü için, logo isminin "logo.jpg" olması ve resmin html dosyası ile aynı klasörde yer alması yeterli.
Kodu kopyala (Aşağıda, Yeşil metin) not defterine yapıştır, uzantıyı ".html" yap. Yapılması gereken tek işlem, çift tıklayarak çalıştırmak.

Form veri giriş ekranı:

Veri Girişi:

İşlem yaptığınız tarihi seçip, Form numarası manuel giriniz. Kullanıcı ve Ürüne ait bilgileri doldurunuz.

Bildirilen arıza, Arıza sebebi ihtiyaca göre (Birden çok seçebilirsiniz), yapılan işlem, Sonuç, İşlemi yapan teknik Personel ve Onaylayan alanlarını doldurunuz.

"Önizleme Oluştur" butonuna basarak, tüm girilen veriyi tablo halinde görebilirsiniz.

"Yazdır/PDF" butonuna basarak, Kaydedebilir, yazdırabilirsiniz.

"İçeri Aktar" butonuna basarak, öncesi CSV Export ile dışarı alıp arşivlediğiniz veriyi içeri alabilirsiniz.

"Önizleme Oluştur" butonuna basarak, Form üzerinde düzenleme yapabilir, Önizleme yapabilir, yeniden Export edebilir veya Yazdırabilirsiniz.

HTML Kod:

<!DOCTYPE html>

<head>

<title>ARIZA TESPİT VE ONARIM FORMU</title>

<style>

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Segoe UI',sans-serif;

}

:root{

--primary:#2563eb;

--success:#16a34a;

--danger:#dc2626;

--warning:#ea580c;

--bg:#f3f4f6;

--card:#ffffff;

--border:#dbe4ee;

--text:#111827;

}

body{

background:var(--bg);

color:var(--text);

padding:18px;

}

.container{

max-width:1800px;

margin:auto;

}

/* =========================================================

HEADER

========================================================= */

.main-header{

background:#ffffff;

border-radius:22px;

padding:16px 20px;

display:flex;

align-items:center;

gap:14px;

margin-bottom:18px;

color:#111827;

border:1px solid #dbe4ee;

box-shadow:

0 4px 12px rgba(15,23,42,.05);

}

.header-left{

display:flex;

align-items:center;

gap:12px;

flex:1;

width:100%;

}

/* =========================================================

LOGO

========================================================= */

.logo-wrapper{

width:82px;

height:82px;

background:#fff;

border-radius:14px;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

padding:6px;

cursor:pointer;

border:1px solid #dbe4ee;

flex-shrink:0;

}

.logo-wrapper img{

width:100%;

height:100%;

object-fit:contain;

}

/* =========================================================

TITLE AREA

========================================================= */

.header-title-group{

display:flex;

flex-direction:column;

justify-content:center;

gap:2px;

flex:1;

min-width:0;

}

.title-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

width:100%;

}

.main-title{

font-size:30px;

font-weight:800;

line-height:1;

outline:none;

color:#111827;

}

.main-subtitle{

font-size:15px;

color:#475569;

font-weight:700;

margin-top:2px;

}

/* =========================================================

HEADER RIGHT

========================================================= */

.header-mini-wrapper{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:4px;

flex-shrink:0;

}

.header-mini-info{

display:flex;

gap:8px;

align-items:center;

flex-wrap:nowrap;

}

.mini-box{

background:#f8fafc;

padding:6px 8px;

border-radius:12px;

border:1px solid #dbe4ee;

}

.mini-box span{

display:block;

font-size:11px;

margin-bottom:4px;

color:#475569;

font-weight:700;

text-align:center;

}

.mini-box input{

width:100%;

border:1px solid #cbd5e1;

border-radius:8px;

padding:6px 8px;

font-weight:700;

background:#fff;

color:#111827;

font-size:14px;

text-align:center;

}

.mini-box.date-box{

min-width:135px;

}

.mini-box.formno-box{

min-width:88px;

width:88px;

}

.mini-box.formno-box input{

padding:6px 4px;

}

.header-right-department{

font-size:13px;

font-weight:900;

color:#111827;

white-space:nowrap;

display:flex;

align-items:center;

justify-content:flex-end;

width:100%;

text-align:right;

letter-spacing:.4px;

}

/* =========================================================

FORM GRID

========================================================= */

.form-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(700px,1fr));

gap:18px;

}

.panel{

background:#fff;

border-radius:20px;

padding:18px;

box-shadow:

0 4px 12px rgba(15,23,42,.05);

}

.panel h3{

margin-bottom:16px;

padding:12px 16px;

border-radius:14px;

background:

linear-gradient(

135deg,

#eff6ff,

#dbeafe

);

color:#1e3a8a;

font-size:16px;

font-weight:800;

}

.form-row{

display:grid;

grid-template-columns:210px 1fr;

gap:12px;

align-items:center;

margin-bottom:12px;

}

label{

font-weight:700;

font-size:15px;

}

input,

textarea{

width:100%;

border:1px solid #cbd5e1;

border-radius:12px;

padding:10px 12px;

font-size:15px;

background:#fff;

color:#111827;

}

textarea{

min-height:90px;

resize:vertical;

}

.checkbox-group{

display:flex;

flex-wrap:wrap;

gap:14px;

}

.checkbox-item{

display:flex;

align-items:center;

gap:6px;

font-weight:600;

font-size:15px;

}

.checkbox-item input{

width:auto;

}

/* =========================================================

BUTTONS

========================================================= */

.actions{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-top:20px;

}

.btn{

border:none;

border-radius:14px;

padding:12px 20px;

font-weight:700;

cursor:pointer;

color:#fff;

transition:.2s;

font-size:14px;

}

.btn:hover{

opacity:.92;

transform:translateY(-1px);

}

.btn-primary{

background:var(--primary);

}

.btn-success{

background:var(--success);

}

.btn-import{

background:var(--danger);

}

.btn-print{

background:var(--warning);

}

/* =========================================================

PREVIEW

========================================================= */

.preview{

margin-top:22px;

background:#fff;

border-radius:22px;

padding:18px;

box-shadow:

0 4px 12px rgba(15,23,42,.05);

}

.preview-header{

background:#ffffff;

border:1px solid #dbe4ee;

border-radius:18px;

padding:16px;

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

margin-bottom:18px;

}

.preview-left{

display:flex;

align-items:center;

gap:12px;

flex:1;

}

.preview-logo{

width:72px;

height:72px;

background:#fff;

border-radius:14px;

border:1px solid #dbe4ee;

padding:6px;

overflow:hidden;

flex-shrink:0;

}

.preview-logo img{

width:100%;

height:100%;

object-fit:contain;

}

.preview-title{

display:flex;

flex-direction:column;

justify-content:center;

gap:2px;

}

.preview-title h1{

font-size:30px;

font-weight:800;

line-height:1;

color:#111827;

}

.preview-title h2{

font-size:15px;

color:#475569;

font-weight:700;

}

.preview-meta{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:4px;

}

.preview-meta-top{

display:flex;

gap:8px;

align-items:center;

}

.preview-meta-card{

background:#f8fafc;

border:1px solid #dbe4ee;

border-radius:12px;

padding:8px;

min-width:110px;

}

.preview-meta-card.formno-preview{

min-width:88px;

width:88px;

}

.preview-meta-card h4{

font-size:11px;

margin-bottom:4px;

color:#64748b;

text-align:center;

}

.preview-meta-card div{

text-align:center;

font-weight:800;

color:#111827;

font-size:14px;

}

/* =========================================================

TABLE

========================================================= */

.preview-table{

width:100%;

border-collapse:collapse;

}

.preview-table td{

border:1px solid #dbe4ee;

padding:8px 10px;

font-size:13px;

vertical-align:top;

word-break:break-word;

}

.preview-label{

width:220px;

font-weight:800;

background:#f8fafc;

}

/* =========================================================

SIGNATURE

========================================================= */

.signature-grid{

margin-top:26px;

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.signature-box{

border:1px solid #dbe4ee;

border-radius:14px;

padding:14px;

text-align:center;

background:#fafcff;

}

.signature-box h4{

margin-bottom:12px;

font-size:13px;

}

.signature-line{

margin-top:28px;

color:#94a3b8;

font-size:12px;

}

/* =========================================================

FOOTER

========================================================= */

.preview-footer{

margin-top:18px;

}

.footer-credit{

color:#cbd5e1;

font-size:13px;

font-weight:600;

}

/* =========================================================

========================================================= */

@page{

size:A4 portrait;

margin:.5cm;

}

@media print{

body{

background:#fff;

padding:0;

}

.main-header,

.form-grid,

.actions,

.preview-footer{

display:none !important;

}

.preview{

margin:0;

padding:0;

border:none;

box-shadow:none;

width:100%;

}

.preview-header{

padding:8px;

gap:8px;

margin-bottom:8px;

}

.preview-logo{

width:52px;

height:52px;

}

.preview-title h1{

font-size:17px !important;

white-space:nowrap;

}

.preview-title h2{

font-size:10px !important;

}

.preview-meta-card{

min-width:72px !important;

padding:4px;

}

.preview-meta-card.formno-preview{

min-width:58px !important;

width:58px !important;

}

.preview-meta-card h4{

font-size:8px !important;

}

.preview-meta-card div{

font-size:8px !important;

}

.header-right-department{

font-size:8px !important;

}

.preview-table td{

font-size:8.8px !important;

padding:3px 4px !important;

line-height:1.1 !important;

}

.preview-label{

width:120px !important;

}

.signature-grid{

margin-top:18px !important;

gap:8px !important;

}

.signature-box{

padding:6px;

}

.signature-box h4{

font-size:8px;

margin-bottom:6px;

}

.signature-line{

margin-top:14px;

font-size:7px;

}

table,

tr,

td,

.signature-grid,

.preview-header{

page-break-inside:avoid !important;

break-inside:avoid !important;

}

/* =========================================================

RESPONSIVE

========================================================= */

@media(max-width:900px){

body{

padding:12px;

}

.main-header{

flex-wrap:wrap;

}

.header-left{

flex-direction:column;

align-items:flex-start;

}

.title-row{

flex-direction:column;

align-items:flex-start;

}

.header-mini-wrapper{

align-items:flex-start;

}

.header-right-department{

white-space:normal;

text-align:left;

}

.form-grid{

grid-template-columns:1fr;

}

.form-row{

grid-template-columns:1fr;

}

.preview-header{

flex-wrap:wrap;

}

</style>

</head>

<body>

<div class="logo-wrapper"

id="logoWrapper">

<img

id="logoImage"

src="logo.jpg"

alt="Logo"

onerror="this.style.display='none'">

</div>

<input type="file"

id="logoInput"

hidden

accept="image/*">

<div>

<div class="main-title"

id="editableTitle"

contenteditable="true">

ARIZA TESPİT VE ONARIM FORMU

</div>

Helpdesk

</div>

<span>Tarih</span>

</div>

<input

type="text"

id="formNo"

maxlength="5"

inputmode="numeric"

pattern="[0-9]*"

placeholder=""

</div>

MYO

</div>

<h3>KULLANICI BİLGİLERİ</h3>

<label>Ad Soyad</label>

</div>

<label>Departman</label>

</div>

<h3>ÜRÜN BİLGİLERİ</h3>

<label>Cihaz Türü</label>

</div>

<label>Marka</label>

</div>

<label>Model</label>

</div>

</div>

<label>Servis Etiketi</label>

</div>

<label>Garanti Tarihi</label>

</div>

<label>Garanti</label>

<input type="radio"

name="garanti"

value="Var"

id="garantiVar">

Var

</label>

<input type="radio"

name="garanti"

value="Yok"

id="garantiYok">

Yok

</label>

</div>

<h3>BİLDİRİLEN ARIZA</h3>

</div>

<h3>ARIZA SEBEPLERİ</h3>

Kullanıcı Hatası

</label>

Ürün Hatası

</label>

Teknolojik Ömrünü Tamamlaması

</label>

</div>

<h3>TESPİT EDİLEN ARIZA</h3>

</div>

<h3>YAPILAN İŞLEM</h3>

</div>

<h3>SONUÇ</h3>

</div>

<h3>PERSONEL BİLGİLERİ</h3>

<label>Teknik Personel</label>

</div>

<label>Onaylayan</label>

<input type="text"

id="onaylayan"

value="Muhammed Yusuf OLGUN">

</div>

<button class="btn btn-primary"

onclick="previewForm()">

Önizleme Oluştur

</button>

<button class="btn btn-success"

onclick="exportCSV()">

CSV Export

</button>

<button class="btn btn-warning btn-print"

onclick="printPreviewOnly()">

Yazdır / PDF

</button>

<button class="btn btn-import"

onclick="csvInput.click()">

İçeri Aktar

</button>

<input type="file"

id="csvInput"

accept=".csv"

hidden>

</div>

AI Web Designer: Muhammed Yusuf OLGUN

</div>

/* =========================================================

DEFAULT DATE

========================================================= */

tarih.value =

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

garantiTarihi.value =

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

/* =========================================================

FORM NO LIMIT

========================================================= */

formNo.addEventListener('input',function(){

this.value =

this.value

.replace(/\D/g,'')

.slice(0,5);

});

/* =========================================================

LOGO CHANGE

========================================================= */

let clickCount=0;

logoWrapper.addEventListener('click',()=>{

clickCount++;

if(clickCount===5){

logoInput.click();

clickCount=0;

}

setTimeout(()=>{

clickCount=0;

},1500);

});

logoInput.addEventListener('change',function(e){

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

if(!file) return;

const reader=

new FileReader();

reader.onload=function(ev){

logoImage.src=

ev.target.result;

};

reader.readAsDataURL(file);

});

/* =========================================================

HELPERS

========================================================= */

function getGaranti(){

const checked =

document.querySelector(

'input[name="garanti"]:checked'

);

return checked

? checked.value

: '';

}

function getSebepler(){

let arr=[];

if(sebep1.checked)

arr.push('Kullanıcı Hatası');

if(sebep2.checked)

arr.push('Ürün Hatası');

if(sebep3.checked)

arr.push('Teknolojik Ömrünü Tamamlaması');

return arr.join(', ');

}

function escapeHTML(text){

if(!text) return '';

return text

.replace(/&/g,'&')

.replace(/</g,'<')

.replace(/>/g,'>');

}

function formatDateTR(dateString){

if(!dateString) return '';

const parts = dateString.split('-');

if(parts.length !== 3) return dateString;

return `${parts[2]}.${parts[1]}.${parts[0]}`;

}

/* =========================================================

PREVIEW

========================================================= */

function previewForm(){

const rows = [

['Ad Soyad',adsoyad.value],

['Departman',departman2.value],

['Cihaz Türü',cihaz.value],

['Marka',marka.value],

['Model',model.value],

['Seri No',seri.value],

['Servis Etiketi',etiket.value],

['Garanti Tarihi',formatDateTR(garantiTarihi.value)],

['Garanti',getGaranti()],

['Arıza Sebepleri',getSebepler()],

['Bildirilen Arıza',bildirilen.value],

['Tespit Edilen Arıza',tespit.value],

['Yapılan İşlem',islem.value],

['Sonuç',sonuc.value]

];

let html=`

</div>

<h1>

${editableTitle.innerText}

</h1>

<h2>

${document.querySelector('.main-subtitle').innerText}

</h2>

</div>

<h4>Tarih</h4>

<div>${formatDateTR(tarih.value)}</div>

</div>

<div>${formNo.value}</div>

</div>

<div class="header-right-department"

style="

font-size:12px;

padding-right:2px;

TEKNİK İŞLETME DAİRESİ BAŞKANLIĞI

</div>

rows.forEach(row=>{

if(row[1]){

html += `

<tr>

${row[0]}

</td>

<td>

${escapeHTML(row[1])}

</td>

</tr>

}

});

html += `

</table>

<h4>TEKNİK PERSONEL</h4>

<div>

${personel.value}

</div>

İmza

</div>

<h4>ONAYLAYAN</h4>

<div>

${onaylayan.value}

</div>

İmza

</div>

previewContent.innerHTML=html;

}

/* =========================================================

========================================================= */

function printPreviewOnly(){

if(

previewContent.innerHTML.includes(

'Önizleme oluşturmak için'

)

){

alert(

'Önce önizleme oluşturunuz.'

);

return;

}

window.print();

}

/* =========================================================

CSV EXPORT UTF-8

========================================================= */

function exportCSV(){

const rows = [

['Tarih',formatDateTR(tarih.value)],

['Form No',formNo.value],

['Ad Soyad',adsoyad.value],

['Departman',departman2.value],

['Cihaz Türü',cihaz.value],

['Marka',marka.value],

['Model',model.value],

['Seri No',seri.value],

['Servis Etiketi',etiket.value],

['Garanti Tarihi',formatDateTR(garantiTarihi.value)],

['Garanti',getGaranti()],

['Arıza Sebepleri',getSebepler()],

['Bildirilen Arıza',bildirilen.value],

['Tespit Edilen Arıza',tespit.value],

['Yapılan İşlem',islem.value],

['Sonuç',sonuc.value],

['Teknik Personel',personel.value],

['Onaylayan',onaylayan.value]

];

let csvContent='';

rows.forEach(r=>{

csvContent +=

`"${String(r[0]).replace(/"/g,'""')}","${String(r[1]).replace(/"/g,'""')}"\r\n`;

});

const BOM = "\uFEFF";

const blob =

new Blob(

[BOM + csvContent],

{

type:'text/csv;charset=utf-8;'

}

);

const link =

document.createElement('a');

link.href =

URL.createObjectURL(blob);

link.download =

'ARIZA_TESPIT_VE_ONARIM_FORMU.csv';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

/* =========================================================

CSV IMPORT

========================================================= */

csvInput.addEventListener(

'change',

function(e){

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

if(!file) return;

const reader=

new FileReader();

reader.onload=function(ev){

const text=

ev.target.result;

const lines=

text

.replace(/\r/g,'')

.split('\n')

.filter(x=>x.trim());

const data={};

lines.forEach(line=>{

const match=

line.match(/"([^"]*)","([^"]*)"/);

if(match){

data[match[1]]=

match[2];

}

});

adsoyad.value=data['Ad Soyad'] || '';

departman2.value=data['Departman'] || '';

cihaz.value=data['Cihaz Türü'] || '';

marka.value=data['Marka'] || '';

model.value=data['Model'] || '';

seri.value=data['Seri No'] || '';

etiket.value=data['Servis Etiketi'] || '';

bildirilen.value=data['Bildirilen Arıza'] || '';

tespit.value=data['Tespit Edilen Arıza'] || '';

islem.value=data['Yapılan İşlem'] || '';

sonuc.value=data['Sonuç'] || '';

personel.value=data['Teknik Personel'] || '';

onaylayan.value=data['Onaylayan'] || '';

formNo.value=data['Form No'] || '';

garantiVar.checked =

data['Garanti']==='Var';

garantiYok.checked =

data['Garanti']==='Yok';

const sebep =

data['Arıza Sebepleri'] || '';

sebep1.checked =

sebep.includes('Kullanıcı Hatası');

sebep2.checked =

sebep.includes('Ürün Hatası');

sebep3.checked =

sebep.includes('Teknolojik Ömrünü Tamamlaması');

alert(

'CSV başarıyla içeri aktarıldı.'

);

};

reader.readAsText(file,'utf-8');

});

/* =========================================================

INIT

========================================================= */

window.addEventListener(

'load',

function(){

previewContent.innerHTML = `

<div style="

padding:50px 20px;

text-align:center;

color:#94a3b8;

font-size:14px;

font-weight:600;

Önizleme oluşturmak için yukarıdaki butonu kullanınız.

</div>

}

);

</script>

</body>

</html>

Profesyonel HTML Form Sistemi Promptu

Kurumsal kullanım için modern, responsive ve yazdırılabilir bir web tabanlı “ARIZA TESPİT VE ONARIM FORMU” sistemi tasarla.

Sistem tamamen tek HTML dosyası içerisinde çalışmalı.

HTML, CSS ve JavaScript tek dosyada birleşik olmalı.

Harici framework kullanılmamalı.

GENEL AMAÇ

Bu sistem;

Helpdesk

Teknik servis

IT Support

Teknik işletme

Envanter yönetimi

Donanım arıza kayıt süreçleri

için kullanılacak profesyonel bir form altyapısıdır.

Kullanıcı:

cihaz bilgilerini,

kullanıcı bilgilerini,

arıza detaylarını,

yapılan işlemleri,

teknik personel bilgilerini

girerek profesyonel çıktı alabilmelidir.

Sistem:

Önizleme oluşturmalı

Yazdırılabilir PDF çıktısı vermeli

CSV export/import desteklemeli

Responsive çalışmalı

Kurumsal görünmelidir

TASARIM KRİTERLERİ

Tasarım:

modern,

minimalist,

kurumsal,

premium,

sade,

profesyonel

olmalıdır.

Renk yapısı:

Beyaz kartlar

Açık gri arka plan

Mavi vurgu renkleri

Soft shadow

Yuvarlak köşeler

kullanılmalıdır.

Kullanılacak stil özellikleri:

border-radius: 20px+

soft box-shadow

grid layout

responsive yapı

modern form input tasarımı

HEADER YAPISI

Header alanında:

Sol tarafta:

Logo alanı

Büyük başlık

Alt başlık

bulunmalıdır.

Sağ tarafta:

Tarih alanı

Form No alanı

Departman adı

yer almalıdır.

Başlık editable olmalıdır.

Logo:

tıklanabilir olmalı

5 kez tıklayınca logo yükleme açılmalı

kullanıcı yeni logo yükleyebilmelidir.

FORM BÖLÜMLERİ

Form grid yapısında card/panel mantığında olmalıdır.

Aşağıdaki bölümler bulunmalıdır:

Kullanıcı Bilgileri

Ad Soyad

Departman

Ürün Bilgileri

Cihaz Türü

Marka

Model

Seri No

Servis Etiketi

Garanti Tarihi

Garanti Durumu (Radio Button)

Bildirilen Arıza

textarea

Arıza Sebepleri

Checkbox yapısında:

Kullanıcı Hatası

Ürün Hatası

Teknolojik Ömrünü Tamamlaması

Tespit Edilen Arıza

textarea

Yapılan İşlem

textarea

Sonuç

textarea

Personel Bilgileri

Teknik Personel

Onaylayan

BUTONLAR

Sistemde aşağıdaki aksiyon butonları olmalıdır:

Önizleme Oluştur

CSV Export

Yazdır / PDF

İçeri Aktar

Her buton farklı renkte olmalı.

Hover animasyonu bulunmalıdır.

ÖNİZLEME SİSTEMİ

“Önizleme Oluştur” butonuna basınca:

Profesyonel bir çıktı ekranı oluşmalıdır.

Bu çıktı:

kurumsal belge görünümünde,

tablo yapısında,

yazdırılabilir formatta

olmalıdır.

Önizleme alanında:

Header tekrar görünmeli

Logo görünmeli

Başlık görünmeli

Tarih ve form no görünmeli

Veriler tablo halinde listelenmelidir.

TABLO YAPISI

Önizleme tablosunda:

Sol kolon:

label alanı

Sağ kolon:

kullanıcı verisi

olmalıdır.

Label kolonları:

bold

açık gri arka planlı

olmalıdır.

İMZA ALANI

Önizleme altında:

2 kolonlu imza alanı bulunmalıdır.

Alanlar:

Teknik Personel

Onaylayan

şeklinde olmalıdır.

Her alan altında:

imza çizgisi

boşluk

olmalıdır.

YAZDIRMA MODU

@media print kullanılmalıdır.

Yazdırma modunda:

Gizlenecek alanlar:

form alanları

butonlar

footer

Sadece:

önizleme çıktısı

yazdırılmalıdır.

Yazdırma optimizasyonları:

A4 portrait

düşük margin

küçük font

tablo taşmaması

page-break engelleme

uygulanmalıdır.

RESPONSIVE TASARIM

Mobil uyumlu olmalıdır.

900px altında:

grid tek kolona düşmeli

header alt alta geçmeli

form row tek kolon olmalı

JAVASCRIPT ÖZELLİKLERİ

JavaScript ile:

Otomatik tarih atanmalı

Form No:

sadece sayı

maksimum 5 karakter

olmalıdır.

HTML escape sistemi olmalı

Tarih formatı:

GG.AA.YYYY

olmalıdır.

Önizleme dinamik oluşturulmalıdır.

CSV Export:

UTF-8 BOM destekli

olmalıdır.

CSV Import:

form alanlarını otomatik doldurmalıdır.

Önizleme oluşmadan yazdırmaya izin verilmemelidir.

CSS DETAYLARI

Kullanılacak yapılar:

CSS Variables (:root)

Flexbox

CSS Grid

Modern input tasarımı

Shadow sistemi

Responsive breakpoint

olmalıdır.

KOD KALİTESİ

Kod:

okunabilir,

bölümlendirilmiş,

yorum satırlarıyla ayrılmış,

profesyonel,

sürdürülebilir

olmalıdır.

CSS bölümleri şu başlıklarla organize edilmelidir:

HEADER

LOGO

TITLE AREA

BUTTONS

PREVIEW

TABLE

SIGNATURE

RESPONSIVE

EKSTRA İSTEKLER

Tek HTML dosyası olacak

Harici bağımlılık olmayacak

Profesyonel UI/UX olacak

Kurumsal görünüm korunacak

Yazdırma çıktısı Word/PDF kalitesinde olacak

Önizleme gerçek evrak görünümünde tasarlanacak

Modern admin panel hissi vermeli

Soft renk geçişleri kullanılmalı

Border ve spacing düzenli olmalı