⤢ + − Geri Sayım Saat 40:00 Ayarlar Başlat Durdur Sıfırla 00:00 Kemal ŞİMŞEK'in desteği ile Necati YALÇIN tarafından yapay zeka ile hazırlanmıştır 😊 × Dakika Ayarı Hazır Ayarlar Bir Ders Saati 40 Dakika LGS Sözel 75 Dakika LGS Sayısal 80 Dakika Kaydet ve Kapat * { box-sizing: border-box; } #app-container { margin: 0 auto; font-family: 'Segoe UI', sans-serif; background-color: #1e1e2f; color: white; position: relative; padding: 20px; transition: transform 0.3s ease; } .tab-container { display: flex; flex-direction: column; height: 100%; } .tabs { display: flex; justify-content: center; padding: 20px 0; background-color: transparent; border-bottom: 1px solid rgba(255,255,255,0.1); } .tab { position: relative; margin: 0 15px; padding: 10px 20px; cursor: pointer; font-size: 18px; transition: color 0.3s; text-align: center; } .tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #3498db; } .tab:hover { color: #3498db; } .tab-content { flex: 1; display: none; justify-content: center; align-items: center; flex-direction: column; padding: 20px; } .tab-content.active { display: flex; } #countdown, #current-time { font-size: 300px; line-height: 1; text-align: center; margin: 20px 0; transition: font-size 0.3s ease; } .controls { margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .controls button { border: none; color: black; padding: 12px 20px; margin: 5px; font-size: 16px; cursor: pointer; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.3s ease; font-weight: bold; } .btn-settings { background-color: #A0D8F3; } .btn-settings:hover { background-color: #89cfe0; } .btn-start { background-color: #B4F8C8; } .btn-start:hover { background-color: #a3e4d7; } .btn-pause { background-color: #FFAEBC; } .btn-pause:hover { background-color: #f5c2c1; } .btn-reset { background-color: #FBE7C6; } .btn-reset:hover { background-color: #f9e0a9; } .font-controls { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; } .font-btn { background-color: #2c2c3c; color: white; border: none; padding: 8px 12px; font-size: 20px; border-radius: 5px; cursor: pointer; transition: background 0.3s; } .font-btn:hover { background-color: #444; } .fullscreen-icon { position: absolute; top: 20px; left: 20px; font-size: 24px; cursor: pointer; user-select: none; } .footer { text-align: center; font-size: 12px; color: #aaa; margin-top: -50px; padding: 10px; } @media screen and (max-width: 600px) { #countdown, #current-time { font-size: 150px; word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progress-bar { max-width: 90%; height: 15px; } .progress-percent { font-size: 12px; top: -20px; } .font-controls, .fullscreen-icon { display: none; } .controls { margin-top: 40px; } .footer { margin-top: -30px; } } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); } .modal-content { background-color: #2c2c3c; margin: 10% auto; padding: 40px; border-radius: 10px; width: 90%; max-width: 800px; position: relative; } .modal-content span { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; } .modal-content input[type="number"] { width: 100%; padding: 10px; border-radius: 5px; border: none; font-size: 18px; margin-bottom: 20px; } .modal-content button { width: 100%; padding: 12px; font-size: 18px; margin-top: 10px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; } .lgs-button { background-color: rebeccapurple; color: white; } .lgs-button:hover { background-color: indigo; } .save-button { background-color: #2ecc71; color: white; } .save-button:hover { background-color: #27ae60; } .progress-bar { width: 100%; max-width: 1000px; height: 20px; background-color: #444; border-radius: 10px; overflow: hidden; margin-top: 30px; position: relative; } .progress-fill { height: 100%; background-color: #2ecc71; width: 0%; transition: width 0.5s ease-out, background-color 0.5s ease; } .progress-percent { position: absolute; top: -25px; left: 0; font-size: 14px; color: white; transform: translateX(-50%); pointer-events: none; } let countdownInterval; let totalSeconds = 2400; // 40 dakika let running = false; let maxCountdown = 2400; let fontSizeOptions = [300, 320, 350, 370]; let currentFontSizeIndex = 0; let customFontSize = null; function switchTab(tabId) { document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active')); document.querySelectorAll('.tab').forEach(el => el.classList.remove('active')); document.getElementById(tabId).classList.add('active'); const index = tabId === 'countdown-tab' ? 0 : 1; document.querySelectorAll('.tab')[index].classList.add('active'); updateDisplay(); } function updateDisplay() { let timeStr; if (totalSeconds >= 3600) { const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } else { const minutes = Math.floor(totalSeconds / 60); const seconds = totalSeconds % 60; timeStr = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } document.getElementById("countdown").textContent = timeStr; adjustFontSize(); if (maxCountdown > 0 && totalSeconds 0) { currentFontSizeIndex--; changeFontSize(fontSizeOptions[currentFontSizeIndex]); } } function changeFontSize(size) { document.getElementById("countdown").style.fontSize = size + "px"; customFontSize = size; } function adjustFontSize() { const countdown = document.getElementById("countdown"); if (!countdown) return; if (customFontSize !== null) { countdown.style.fontSize = customFontSize + "px"; return; } if (window.innerWidth = 3600) { countdown.style.fontSize = "150px"; } else { countdown.style.fontSize = "200px"; } } else { if (totalSeconds >= 3600) { countdown.style.fontSize = "240px"; } else { countdown.style.fontSize = "300px"; } } } window.addEventListener("resize", () => { adjustFontSize(); }); function updateClock() { const now = new Date(); let hours = now.getHours().toString().padStart(2, '0'); let minutes = now.getMinutes().toString().padStart(2, '0'); let seconds = now.getSeconds().toString().padStart(2, '0'); document.getElementById("current-time").textContent = `${hours}:${minutes}:${seconds}`; setTimeout(updateClock, 1000); } // Başlangıç updateDisplay(); updateClock();
