Düş Şifre:9, Niyet Değiştir Ş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>Namaz Borcu Takip</title>
<style>
:root{
--bg:#f6f8fb;
--card:#ffffff;
--primary:#2563eb;
--text:#111827;
--muted:#6b7280;
--border:#e5e7eb;
}
*{box-sizing:border-box;font-family:system-ui,Arial,sans-serif}
body{margin:0;background:var(--bg);padding:12px;color:var(--text)}
.container{max-width:700px;margin:auto}
.card{
background:var(--card);
border-radius:24px;
padding:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.time{font-size:12px;color:var(--muted);text-align:right}
/* Siyah Arka Planlı Başlık Alanı */
.header-box{
background-color:#000000;
color:#ffffff;
padding:12px;
border-radius:16px;
margin-bottom:15px;
}
.niyet{font-size:24px;font-weight:700;text-align:center}
.sub{font-size:14px;color:#9ca3af;text-align:center;margin-top:4px}
/* Gri ve Dikey Daraltılmış Toplam Alanı */
.total{
background:#e5e7eb;
color:var(--text);
padding:8px 16px;
border-radius:18px;
text-align:center;
margin-bottom:14px;
}
.total b{font-size:28px}
.row{
display:grid;
grid-template-columns:1fr 90px 90px;
gap:8px;
align-items:center;
padding:10px;
border:1px solid var(--border);
border-radius:14px;
margin-bottom:8px;
background:#fff;
}
.vakit b{display:block}
.vakit span{color:var(--muted);font-size:13px}
input,button{
width:100%;
border-radius:12px;
padding:11px;
border:1px solid var(--border);
}
button{
background:var(--primary);
color:white;
border:none;
font-weight:600;
}
.tools{
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--border);
}
.toolbtn{margin-top:8px}
/* Özel Buton Renkleri */
.btn-red{background-color:#dc2626 !important;}
.btn-green{background-color:#16a34a !important;}
.footer{
text-align:center;
margin-top:18px;
font-size:12px;
color:var(--muted);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="top">
<div>🕌</div>
<div class="time" id="clock"></div>
</div>
<div class="header-box">
<div class="niyet" id="niyetText">Niyet</div>
<div class="sub">NAMAZ BORCU TAKİP</div>
</div>
<div class="total">
Toplam Kalan Borç<br />
<b id="toplam">0</b>
</div>
<div id="liste"></div>
<div class="tools">
<button class="toolbtn btn-red" onclick="olustur()">Borç Oluştur</button>
<button class="toolbtn btn-green" onclick="niyetDegistir()">Niyet Değiştir</button>
</div>
<div class="footer">
Designer: Muhammed Yusuf OLGUN
</div>
</div>
</div>
<script>
let veri=JSON.parse(localStorage.getItem("namazTakip"))||{
Sabah:100,Ogle:100,Ikindi:100,Aksam:100,Yatsi:100
};
let niyet=localStorage.getItem("niyet")||"Allah Rızası";
const kod="9";
function saat(){
document.getElementById("clock").innerHTML=
new Date().toLocaleString("tr-TR");
}
function save(){
localStorage.setItem("namazTakip",JSON.stringify(veri));
}
function render(){
document.getElementById("niyetText").innerText=niyet;
let html="",top=0;
for(let v in veri){
top+=veri[v];
html+=`
<div class="row">
<div class="vakit">
<b>${v}</b>
<span>Kalan: ${veri[v]}</span>
</div>
<div><input type="number" id="${v}" value="1"></div>
<div><button onclick="dus('${v}')">Düş</button></div>
</div>`;
}
document.getElementById("liste").innerHTML=html;
document.getElementById("toplam").innerText=top;
}
function dus(v){
let girilenKod = prompt("Lütfen şifreyi girin:");
if(girilenKod !== kod) {
if(girilenKod !== null) alert("Hatalı şifre!");
return;
}
let a=Number(document.getElementById(v).value||0);
veri[v]=Math.max(0,veri[v]-a);
save();
render();
}
function olustur(){
// 1. Adım: Şifre Kontrolü
let girilenKod = prompt("İşlem şifresini girin (Varsayılan: 9):");
if(girilenKod !== kod){
if(girilenKod !== null) alert("Hatalı şifre girdiniz, işlem iptal edildi.");
return;
}
// 2. Adım: Miktar Girişi (Her vakit için)
let miktar = prompt("Her bir vakit için oluşturulacak borç miktarını girin:\n(Örnek: 100 yazarsanız, 5 vakit için toplam 500 borç oluşur)", "100");
if(miktar === null || miktar.trim() === "") return; // İptale basılırsa veya boş bırakılırsa çık
let d = parseInt(miktar);
if(isNaN(d) || d < 0) {
alert("Lütfen geçerli ve pozitif bir sayı giriniz!");
return;
}
// 3. Adım: Veriyi Kaydet ve Güncelle
veri = {Sabah:d, Ogle:d, Ikindi:d, Aksam:d, Yatsi:d};
save();
render();
alert("Borçlar başarıyla oluşturuldu! Yeni toplam borcunuz: " + (d * 5));
}
function niyetDegistir(){
// Şifre sorusuna varsayılan bilgi eklendi
let girilenKod = prompt("İşlem şifresini girin (Varsayılan: 9):");
if(girilenKod !== kod){
if(girilenKod !== null) alert("Hatalı şifre!");
return;
}
let y=prompt("Yeni niyet metnini girin:");
if(y === null || y.trim() === "") return; // İptale basılırsa veya sadece boşluk girilirse iptal et
niyet=y;
localStorage.setItem("niyet",y);
render();
alert("Niyet metni başarıyla güncellendi!");
}
setInterval(saat,1000);
saat();
render();
</script>
</body>
</html><div><br /></div>