Şifre: 9999
HTML Kod:
<html lang="tr"><head><meta charset="utf-8"></meta><meta content="width=device-width,initial-scale=1" name="viewport"></meta>
<title>Su Hayattır</title>
<style>
body{font-family:Arial;background:#f4f7fb;max-width:480px;margin:auto;padding:8px}
.card{background:#fff;border-radius:18px;padding:10px;margin:8px 0;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.box{text-align:center;background:#f8fafc;padding:6px;border-radius:10px;font-size:12px}
.glass{width:85px;height:130px;margin:auto;border:3px solid #333;border-radius:0 0 18px 18px;overflow:hidden;position:relative}
.water{position:absolute;bottom:0;width:100%;height:0;background:linear-gradient(#7ad9ff,#0a84ff)}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.row>*{min-width:0}
.btns{display:grid;grid-template-columns:1fr;gap:5px}
input,select,button{width:100%;box-sizing:border-box;padding:10px;border-radius:10px;border:1px solid #ddd}
button{border:none;color:#fff;font-weight:bold}.b{background:#0a84ff}.g{background:#34c759}.o{background:#ff9500}.r{background:#ff3b30}.x{background:#666}
table{width:100%;border-collapse:collapse;font-size:12px}th,td{border:1px solid #eee;padding:5px;text-align:center}
h1,h3{text-align:center;margin:4px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.day{padding:4px;border-radius:6px;background:#eee;text-align:center;font-size:10px}.ok{background:#b8f5b8}
</style></head><body>
<div id="clock"></div>
<div class="card"><h1>💧 Su Hayattır</h1>
<div class="top"><div class="box">Hedef<br /><span id="t"></span></div><div class="box">Tüketim<br /><span id="c"></span></div><div class="box">İlerleme<br /><span id="p"></span></div></div>
<div class="glass"><div class="water" id="w"></div></div>
<button class="b" onclick="addWater()">Su Ekle</button><div id="celebrate" style="text-align: center;"></div></div>
<div class="card"><h3>Hedef Ayarları</h3>
<div class="row"><select id="u"><option value="ml">mL</option><option value="bardak">Bardak</option></select><input id="tg" placeholder="Hedef" type="number" /><select id="gs"><option value="200">200 mL</option><option selected="" value="250">250 mL</option><option value="370">370 mL</option><option value="540">540 mL</option><option value="750">750 mL</option><option value="960">960 mL</option><option value="1000">1 Litre</option><option value="1500">1,5 Litre</option></select></div>
<button class="o" onclick="updateSettings()">Güncelle</button></div>
<div class="card"><h3>Haftalık Çetele</h3><div class="week" id="week"></div></div>
<div class="card"><h3>Günlük İçim Geçmişi</h3><table><thead><tr><th>Saat</th><th>Miktar</th></tr></thead><tbody id="logs"></tbody></table></div>
<div class="card"><div class="btns">
<button class="r" onclick="resetAll()">Verileri Sıfırla</button>
</div></div>
<div style="color: #666666; text-align: center;">Designer: Muhammed Yusuf OLGUN</div>
<script>
let d=JSON.parse(localStorage.getItem('waterV4'))||{target:1000,unit:'ml',glass:250,current:0,logs:[],week:{}};
function save(){localStorage.setItem('waterV4',JSON.stringify(d));render();}
function addWater(){d.current+=+d.glass;let dt=new Date();d.logs.unshift({t:dt.toLocaleTimeString('tr-TR'),a:d.glass});d.week[dt.toISOString().slice(0,10)]=1;save();}
function updateSettings(){d.target=+(tg.value||1000);d.unit=u.value;d.glass=+gs.value;save();}
function resetAll(){if(prompt('Sıfırlama Şifresi')!=='9999')return;localStorage.removeItem('waterV4');location.reload();}
function render(){let tm=d.unit==='ml'?d.target:d.target*d.glass,pct=Math.min(100,Math.round(d.current/tm*100));
t.innerText=(d.target>=1000&&d.unit==='ml')?(d.target/1000)+' L':d.target;c.innerText=d.current>=1000?(d.current/1000).toFixed(2)+' L':d.current+' mL';p.innerText='%'+pct;
w.style.height=pct+'%';celebrate.innerHTML=d.current>=tm?'🎉 Tebrikler!':'';
logs.innerHTML=d.logs.map(x=>`<tr><td>${x.t}</td><td>${x.a} mL</td></tr>`).join('');
let n=['Pzt','Sal','Çar','Per','Cum','Cts','Paz'],h='';for(let i=6;i>=0;i--){let dte=new Date();dte.setDate(dte.getDate()-i);let k=dte.toISOString().slice(0,10);h+=`<div class="day ${d.week[k]?'ok':''}">${n[(dte.getDay()+6)%7]}</div>`}week.innerHTML=h;}
setInterval(()=>clock.innerText=new Date().toLocaleString('tr-TR'),1000);render();
</script></body></html>