body { font-family: Arial, sans-serif; text-align: center; background-color: #1c1c1c; color: white; margin: 50px; } .zikirmatik { background-color: #2f2f2f; width: 300px; height: 500px; margin: 0 auto; border-radius: 20px; padding: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); position: relative; } .display { background-color: white; color: black; font-size: 48px; border-radius: 10px; padding: 10px; margin: 20px 0; } .button { font-size: 11px; padding: 10px 20px; margin: 10px; border: none; cursor: pointer; border-radius: 5px; } .big-button { width: 150px; height: 150px; background-color: white; color: black; font-size: 20px; border-radius: 50%; margin: 10px; line-height: 140px; } .reset-button, .input-button { background-color: #f44336; color: white; width: 200px; } .save-button { background-color: #4CAF50; color: white; width: 120px; margin: 10px 5px; display: inline-block; font-size: 11px; } .view-saved-button { background-color: #4CAF50; color: white; width: 120px; margin: 10px 5px; display: inline-block; font-size: 11px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .modal-content { background-color: #333; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; color: white; border-radius: 10px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer; } .reset-saved-button { background-color: #f44336; color: white; padding: 10px 20px; font-size: 14px; margin-top: 20px; border: none; cursor: pointer; border-radius: 5px; } input[type="text"] { font-size: 14px; padding: 12px; margin: 10px 0; width: 220px; /* Giriş alanı genişliğini artırdım */ border: 2px solid #f44336; border-radius: 5px; } 0 Zikir ÇekSıfırla Kaydet Kaydedilenler × Kaydedilen Zikirler Henüz kaydedilen zikir yok. Kaydedilenleri Sıfırla let count = 0; let savedCounts = []; // Zikir çekme fonksiyonu function increaseCounter() { count++; document.getElementById("counter").innerText = count; } // Zikir çek butonu ve dinamik isim güncelleme document.getElementById("zikirInput").oninput = function() { const zikirName = this.value || "Zikir Çek"; document.getElementById("zikirBtn").innerText = zikirName; }; // Zikir çek butonuna basınca sayaç artsın document.getElementById("zikirBtn").onclick = increaseCounter; // Sıfırlama butonu document.getElementById("resetBtn").onclick = function() { count = 0; document.getElementById("counter").innerText = "0"; }; // Zikir kaydetme butonu document.getElementById("saveBtn").onclick = function() { const zikirName = document.getElementById("zikirInput").value || "Zikir"; savedCounts.push(count + " " + zikirName); alert(zikirName + " zikri kaydedildi: " + count); count = 0; // Her kayıttan sonra sayacı sıfırla document.getElementById("counter").innerText = "0"; }; // Modal gösterme ve gizleme işlemleri const modal = document.getElementById("savedModal"); const closeModalBtn = document.getElementById("closeModal"); // Kaydedilen zikirleri görme butonu document.getElementById("viewSavedBtn").onclick = function() { const savedList = savedCounts.length === 0 ? "Henüz kaydedilen zikir yok." : savedCounts.join(""); document.getElementById("savedCountsList").innerHTML = savedList; modal.style.display = "block"; }; // Modal kapatma closeModalBtn.onclick = function() { modal.style.display = "none"; }; window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }; // Kaydedilenleri sıfırlama document.getElementById("resetSavedBtn").onclick = function() { savedCounts = []; document.getElementById("savedCountsList").innerHTML = "Henüz kaydedilen zikir yok."; };
