HTML Kod:
<html lang="tr">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width,initial-scale=1.0" name="viewport"></meta>
<title>Zikir</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif}
body{background:#f5f7fa;padding:10px}
.container{max-width:700px;margin:auto}
.card{background:#fff;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 4px 15px rgba(0,0,0,.08)}
h1{text-align:center;margin-bottom:12px}
/* min-height 100px'den 50px'e düşürüldü */
.zikirName{width:100%;min-height:50px;border:none;border-radius:12px;background:#f3f4f6;padding:12px;font-size:20px;resize:none;overflow:hidden}
.secondary{width:100%;margin-top:8px;padding:12px;border:none;border-radius:12px;background:#e5e7eb;color:#000}
.counter{text-align:center;font-size:clamp(48px,14vw,120px);font-weight:800;color:#000;margin:15px 0}
.target{text-align:center;font-size:18px;margin-bottom:10px}
.progress{height:18px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.progressBar{height:100%;width:0;background:#22c55e}
.zikirBtn{width:100%;margin-top:12px;border:none;border-radius:18px;padding:22px;font-size:26px;background:#16a34a;color:#fff}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:stretch;margin-top:10px}
.row3>*{height:50px;min-height:50px;max-height:50px;width:100%}
.row3 button{display:flex;align-items:center;justify-content:center;padding:0 8px}
input[type=number]{border:1px solid #d1d5db;border-radius:12px;text-align:center;height:50px}
.primary{background:#e5e7eb;color:#000;border:none;border-radius:12px}
.danger{background:#dc2626;color:#fff;border:none;border-radius:12px}
.message{text-align:center;margin-top:12px;font-weight:bold;color:#16a34a}
.footer{text-align:center;color:#6b7280;font-size:13px}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>📿 Zikir Sayacı</h1>
<!-- rows değeri 5'ten 2'ye düşürüldü -->
<textarea class="zikirName" id="zikirName" rows="2"></textarea>
<button class="secondary" onclick="changeZikir()">📝 Zikir Güncelle</button>
<div class="counter" id="counter">0</div>
<div class="target">🎯 Hedef: <span id="targetView">100</span></div>
<div class="progress"><div class="progressBar" id="progressBar"></div></div>
<button class="zikirBtn" onclick="increaseCount()">🤲 ZİKİR ÇEK</button>
<div class="message" id="message"></div>
</div>
<div class="card">
<div class="row3">
<input id="targetInput" placeholder="Hedef" type="number" />
<button class="primary" onclick="changeTarget()">🎯 Hedefi Güncelle</button>
<button class="danger" onclick="resetData()">🗑️ Sıfırla</button>
</div>
</div>
<div class="footer">AI Web Designer: Muhammed Yusuf OLGUN</div>
</div>
<script>
let count=Number(localStorage.getItem('count'))||0,
target=Number(localStorage.getItem('target'))||100,
zikir=localStorage.getItem('zikir')||'';
const counterEl=document.getElementById('counter'),
targetEl=document.getElementById('targetView'),
progressEl=document.getElementById('progressBar'),
zikirArea=document.getElementById('zikirName'),
message=document.getElementById('message');
counterEl.innerText=count;
targetEl.innerText=target;
zikirArea.value=zikir;
function autoGrow(){
zikirArea.style.height='auto';
zikirArea.style.height=zikirArea.scrollHeight+'px'
}
zikirArea.addEventListener('input',autoGrow);
autoGrow();
function saveData(){
localStorage.setItem('count',count);
localStorage.setItem('target',target);
localStorage.setItem('zikir',zikir)
}
function updateProgress(){
let p=(count/target)*100;
if(p>100) p=100;
progressEl.style.width=p+'%'
}
function increaseCount(){
if(count>=target){
message.innerHTML='✅ Hedef tamamlandı. Yeni hedef belirleyebilir veya sayacı sıfırlayabilirsiniz.';
return;
}
count++;
counterEl.innerText=count;
updateProgress();
saveData();
if(count>=target){
message.innerHTML='🎉 Tebrikler! Hedef tamamlandı.';
}
}
function changeTarget(){
if(prompt('Hedefi değiştirmek için şifreyi girin (Varsayılan: 9):')!=='9') return;
let v=parseInt(document.getElementById('targetInput').value);
if(!v||v<1) {
alert('Lütfen geçerli bir hedef sayısı girin!');
return;
}
target=v;
targetEl.innerText=v;
updateProgress();
saveData();
alert('Hedef başarıyla güncellendi.');
}
function changeZikir(){
if(prompt('Zikri kaydetmek için şifreyi girin (Varsayılan: 9):')!=='9') return;
zikir=zikirArea.value.trim();
saveData();
alert('Zikir başarıyla güncellendi.');
}
function resetData(){
if(prompt('Sayacı sıfırlamak için şifreyi girin (Varsayılan: 9):')!=='9') return;
if(!confirm('Sayaç ve hedefi tamamen sıfırlamak istediğinize emin misiniz?')) return;
count=0;
target=100;
localStorage.removeItem('count');
localStorage.removeItem('target');
counterEl.innerText=0;
targetEl.innerText=100;
message.innerHTML='';
updateProgress();
alert('Sayaç ve hedef sıfırlandı. Zikir korundu.');
}
updateProgress();
</script>
</body>
</html>