Spaces:

imxuma
/

personal

Running

App Files Files Community

imxuma commited on Mar 29, 2025

Commit

368afb6

verified ·

1 Parent(s): 4420807

Add 1 files

Browse files

Files changed (1) hide show

index.html +172 -182

index.html CHANGED Viewed

@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fullscreen Countdown Timer</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
@@ -11,68 +11,69 @@
             padding: 0;
             box-sizing: border-box;
             font-family: 'Arial', sans-serif;
         }
         body {
             background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
             color: white;
-            height: 100vh;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             overflow: hidden;
             position: relative;
         }
         .timer-container {
             text-align: center;
             z-index: 1;
-            padding: 2rem;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 20px;
             backdrop-filter: blur(10px);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             border: 1px solid rgba(255, 255, 255, 0.1);
-            max-width: 90%;
             transition: all 0.3s ease;
-            margin-top: -80px;
-        }
-        .timer-container:hover {
-            transform: scale(1.02);
         }
         h1 {
-            font-size: 2.5rem;
-            margin-bottom: 2.5rem;
             text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
             letter-spacing: 1px;
         }
         .timer {
             display: flex;
-            justify-content: center;
-            gap: 1rem;
-            margin-bottom: 2rem;
         }
         .time-box {
             position: relative;
-            width: 120px;
-            height: 180px;  /* Увеличил высоту контейнера */
             perspective: 1000px;
         }
         .time-value {
             position: absolute;
             width: 100%;
-            height: 120px;  /* Высота цифр */
             display: flex;
-            flex-direction: column;
             justify-content: center;
             align-items: center;
-            font-size: 5rem;
             font-weight: bold;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 10px;
@@ -80,7 +81,6 @@
             transition: all 0.3s ease;
             backface-visibility: hidden;
             transform-style: preserve-3d;
-            top: 0;
         }
         .time-value.flip {
@@ -100,25 +100,39 @@
             position: absolute;
             bottom: 0;
             width: 100%;
-            margin-top: 2.5rem;  /* Увеличил отступ сверху */
-            margin-bottom: 0;
-            font-size: 1.2rem;
             opacity: 0.8;
             text-transform: uppercase;
-            letter-spacing: 2px;
-            padding-top: 10px;  /* Дополнительное пространство между цифрами и текстом */
         }
         .controls {
             display: flex;
-            gap: 1rem;
             justify-content: center;
-            margin-top: 2rem;
         }
         button {
-            padding: 0.8rem 1.5rem;
-            font-size: 1rem;
             background: rgba(255, 255, 255, 0.2);
             color: white;
             border: none;
@@ -129,41 +143,55 @@
             align-items: center;
             gap: 0.5rem;
             backdrop-filter: blur(5px);
         }
-        button:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-3px);
         }
-        button:active {
-            transform: translateY(1px);
         }
         .set-timer {
             display: flex;
-            gap: 1rem;
-            margin-top: 2rem;
             justify-content: center;
             align-items: center;
         }
         .time-input {
             position: relative;
         }
         .time-input input {
-            padding: 0.8rem;
-            width: 100px;
             text-align: center;
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: 5px;
             color: white;
-            font-size: 1.5rem;
             font-weight: bold;
             appearance: textfield;
             -moz-appearance: textfield;
         }
         .time-input input::-webkit-outer-spin-button,
@@ -174,37 +202,24 @@
         .arrows {
             position: absolute;
-            right: 8px;
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-            height: 100%;
             top: 0;
             pointer-events: none;
         }
         .arrow-btn {
             position: relative;
             width: 20px;
-            height: 50%;
             padding: 0;
             background: transparent;
             border: none;
             cursor: pointer;
             pointer-events: all;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .arrow-btn.up {
-            top: 0;
-            border-radius: 0 5px 0 0;
-        }
-        .arrow-btn.down {
-            bottom: 0;
-            border-radius: 0 0 5px 0;
         }
         .arrow-btn:after {
@@ -214,100 +229,22 @@
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
             border-bottom: 5px solid white;
-            transition: all 0.2s ease;
             opacity: 0.7;
         }
         .arrow-btn.down:after {
-            transform: rotate(180deg);
-        }
-        .arrow-btn:hover:after {
-            opacity: 1;
-            transform: scale(1.2);
-        }
-        .arrow-btn.down:hover:after {
-            transform: rotate(180deg) scale(1.2);
-        }
-        .time-input-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
         }
         .time-label-input {
-            margin-top: 1rem;
-            font-size: 1rem;
             opacity: 0.8;
             text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .timer {
-                flex-wrap: wrap;
-            }
-            .time-box {
-                width: 80px;
-                height: 140px;
-            }
-            .time-value {
-                font-size: 3rem;
-                height: 80px;
-            }
-            .time-label {
-                font-size: 1rem;
-                margin-top: 2rem;
-            }
-            h1 {
-                font-size: 2rem;
-            }
-            .time-input input {
-                width: 80px;
-                font-size: 1.2rem;
-            }
-            .time-label-input {
-                margin-top: 0.8rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .time-box {
-                width: 60px;
-                height: 120px;
-            }
-            .time-value {
-                font-size: 2rem;
-                height: 60px;
-            }
-            .time-label {
-                font-size: 0.8rem;
-                margin-top: 1.5rem;
-            }
-            button {
-                padding: 0.6rem 1rem;
-                font-size: 0.9rem;
-            }
-            .set-timer {
-                flex-direction: column;
-            }
-            .time-input input {
-                width: 100px;
-            }
-            .time-label-input {
-                margin-top: 0.6rem;
-            }
-        }
-        .confetti {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background: #f00;
-            opacity: 0;
         }
         .modal {
@@ -330,9 +267,11 @@
             padding: 2rem;
             border-radius: 15px;
             text-align: center;
-            max-width: 90%;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
             position: relative;
         }
         .close-modal {
@@ -340,8 +279,8 @@
             top: -10px;
             right: -10px;
             background: #ff6b6b;
-            width: 40px;
-            height: 40px;
             border-radius: 50%;
             display: flex;
             justify-content: center;
@@ -350,41 +289,76 @@
             transition: all 0.3s ease;
         }
-        .close-modal:hover {
-            transform: rotate(90deg) scale(1.1);
         }
         .modal h2 {
-            font-size: 3rem;
             margin-bottom: 1rem;
             color: #ff6b6b;
-            text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
         }
         .modal p {
-            font-size: 1.2rem;
             margin-bottom: 1.5rem;
         }
         @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
-        .progress-bar {
-            width: 100%;
-            height: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
-            margin-top: 1rem;
-            overflow: hidden;
         }
-        .progress {
-            height: 100%;
-            background: linear gradient(90deg, #ff6b6b, #ff8e8e);
-            width: 100%;
-            transition: width 0.3s ease;
         }
     </style>
 </head>
@@ -423,7 +397,7 @@
                 <div class="time-input">
                     <input type="number" id="inputHours" min="0" max="99" value="0">
                     <div class="arrows">
-                        <button class="arrow-btn up" onclick="incrementHours()"></button>
                         <button class="arrow-btn down" onclick="decrementHours()"></button>
                     </div>
                 </div>
@@ -433,7 +407,7 @@
                 <div class="time-input">
                     <input type="number" id="inputMinutes" min="0" max="59" value="10">
                     <div class="arrows">
-                        <button class="arrow-btn up" onclick="incrementMinutes()"></button>
                         <button class="arrow-btn down" onclick="decrementMinutes()"></button>
                     </div>
                 </div>
@@ -443,7 +417,7 @@
                 <div class="time-input">
                     <input type="number" id="inputSeconds" min="0" max="59" value="0">
                     <div class="arrows">
-                        <button class="arrow-btn up" onclick="incrementSeconds()"></button>
                         <button class="arrow-btn down" onclick="decrementSeconds()"></button>
                     </div>
                 </div>
@@ -459,7 +433,7 @@
             </div>
             <h2>Time's Up!</h2>
             <p>Your countdown has reached zero.</p>
-            <button id="newTimerBtn"><i class="fas fa-plus"></i> Start New Timer</button>
         </div>
     </div>
@@ -488,12 +462,12 @@
         // Create particles
         function createParticles() {
-            for (let i = 0; i < 50; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'confetti';
                 particle.style.left = `${Math.random() * 100}vw`;
                 particle.style.top = `${Math.random() * 100}vh`;
-                particle.style.width = `${5 + Math.random() * 10}px`;
                 particle.style.height = particle.style.width;
                 particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                 particles.appendChild(particle);
@@ -516,8 +490,6 @@
                     hoursElement.textContent = hours.toString().padStart(2, '0');
                     hoursElement.classList.remove('flip');
                 }, 300);
-            } else {
-                hoursElement.textContent = hours.toString().padStart(2, '0');
             }
             if (minutesElement.textContent !== minutes.toString().padStart(2, '0')) {
@@ -526,8 +498,6 @@
                     minutesElement.textContent = minutes.toString().padStart(2, '0');
                     minutesElement.classList.remove('flip');
                 }, 300);
-            } else {
-                minutesElement.textContent = minutes.toString().padStart(2, '0');
             }
             if (secondsElement.textContent !== secs.toString().padStart(2, '0')) {
@@ -536,8 +506,6 @@
                     secondsElement.textContent = secs.toString().padStart(2, '0');
                     secondsElement.classList.remove('flip');
                 }, 300);
-            } else {
-                secondsElement.textContent = secs.toString().padStart(2, '0');
             }
             // Update progress bar
@@ -563,7 +531,7 @@
             const seconds = parseInt(inputSeconds.value) || 0;
             if (hours === 0 && minutes === 0 && seconds === 0) {
-                alert('Please set a valid time before starting the timer.');
                 return;
             }
@@ -573,7 +541,7 @@
             isRunning = true;
             updateDisplay(remainingSeconds);
-            countdownInterval = setInterval(() {
                 remainingSeconds--;
                 if (remainingSeconds < 0) {
@@ -617,6 +585,11 @@
         // Close modal
         function closeModalFunc() {
             modal.style.display = 'none';
         }
         // Start new timer
@@ -634,13 +607,11 @@
             confettiElements.forEach((el, index) => {
                 setTimeout(() => {
                     el.style.opacity = '1';
-                    el.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px) rotate(${Math.random() * 360}deg)`;
                     el.style.transition = 'all 1s ease';
                     setTimeout(() => {
                         el.style.opacity = '0';
-                        el.style.transform = 'translate(0, 0) rotate(0deg)';
-                        el.style.transition = 'none';
                     }, 1000);
                 }, index * 50);
             });
@@ -681,15 +652,34 @@
             else inputSeconds.value = 59;
         }
         // Event listeners
         startBtn.addEventListener('click', startCountdown);
         pauseBtn.addEventListener('click', pauseCountdown);
         resetBtn.addEventListener('click', resetCountdown);
         closeModal.addEventListener('click', closeModalFunc);
         newTimerBtn.addEventListener('click', startNewTimer);
         // Initialize with default time
         resetCountdown();
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Countdown Timer</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
             padding: 0;
             box-sizing: border-box;
             font-family: 'Arial', sans-serif;
+            -webkit-tap-highlight-color: transparent;
         }
         body {
             background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
             color: white;
+            min-height: 100vh;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             overflow: hidden;
             position: relative;
+            touch-action: manipulation;
         }
         .timer-container {
             text-align: center;
             z-index: 1;
+            padding: 1.5rem;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 20px;
             backdrop-filter: blur(10px);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             border: 1px solid rgba(255, 255, 255, 0.1);
+            width: 95%;
+            max-width: 600px;
             transition: all 0.3s ease;
+            margin: 1rem;
         }
         h1 {
+            font-size: clamp(1.5rem, 5vw, 2.5rem);
+            margin-bottom: 1.5rem;
             text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
             letter-spacing: 1px;
         }
         .timer {
             display: flex;
+            justify-content: space-around;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
         }
         .time-box {
             position: relative;
+            width: 30%;
+            max-width: 120px;
+            min-width: 70px;
+            aspect-ratio: 0.7;
             perspective: 1000px;
         }
         .time-value {
             position: absolute;
             width: 100%;
+            height: 70%;
+            top: 0;
             display: flex;
             justify-content: center;
             align-items: center;
+            font-size: clamp(2.5rem, 8vw, 5rem);
             font-weight: bold;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 10px;
             transition: all 0.3s ease;
             backface-visibility: hidden;
             transform-style: preserve-3d;
         }
         .time-value.flip {
             position: absolute;
             bottom: 0;
             width: 100%;
+            padding-top: 1rem;
+            font-size: clamp(0.8rem, 3vw, 1.2rem);
             opacity: 0.8;
             text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            margin: 1rem 0;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
+            width: 100%;
+            transition: width 0.3s ease;
         }
         .controls {
             display: flex;
+            gap: 0.5rem;
             justify-content: center;
+            margin-top: 1rem;
         }
         button {
+            padding: 0.7rem 1.2rem;
+            font-size: clamp(0.9rem, 3.5vw, 1rem);
             background: rgba(255, 255, 255, 0.2);
             color: white;
             border: none;
             align-items: center;
             gap: 0.5rem;
             backdrop-filter: blur(5px);
+            flex: 1;
+            max-width: 120px;
+            justify-content: center;
+            user-select: none;
         }
+        button:active {
+            transform: scale(0.95);
         }
+        button i {
+            font-size: 1rem;
         }
         .set-timer {
             display: flex;
+            gap: 0.5rem;
+            margin-top: 1.5rem;
             justify-content: center;
             align-items: center;
+            flex-wrap: wrap;
+        }
+        .time-input-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex: 1;
+            min-width: 80px;
         }
         .time-input {
             position: relative;
+            width: 100%;
         }
         .time-input input {
+            padding: 0.6rem;
+            width: 100%;
             text-align: center;
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: 5px;
             color: white;
+            font-size: clamp(1rem, 4vw, 1.5rem);
             font-weight: bold;
             appearance: textfield;
             -moz-appearance: textfield;
+            min-height: 50px;
         }
         .time-input input::-webkit-outer-spin-button,
         .arrows {
             position: absolute;
+            right: 5px;
             top: 0;
+            height: 100%;
             pointer-events: none;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
         }
         .arrow-btn {
             position: relative;
             width: 20px;
+            height: calc(50% - 2px);
             padding: 0;
             background: transparent;
             border: none;
             cursor: pointer;
             pointer-events: all;
         }
         .arrow-btn:after {
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
             border-bottom: 5px solid white;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             opacity: 0.7;
         }
         .arrow-btn.down:after {
+            transform: translate(-50%, -50%) rotate(180deg);
         }
         .time-label-input {
+            margin-top: 0.5rem;
+            font-size: clamp(0.7rem, 3vw, 1rem);
             opacity: 0.8;
             text-transform: uppercase;
         }
         .modal {
             padding: 2rem;
             border-radius: 15px;
             text-align: center;
+            width: 90%;
+            max-width: 400px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
             position: relative;
+            margin: 1rem;
         }
         .close-modal {
             top: -10px;
             right: -10px;
             background: #ff6b6b;
+            width: 30px;
+            height: 30px;
             border-radius: 50%;
             display: flex;
             justify-content: center;
             transition: all 0.3s ease;
         }
+        .close-modal i {
+            font-size: 0.9rem;
         }
         .modal h2 {
+            font-size: clamp(1.8rem, 6vw, 3rem);
             margin-bottom: 1rem;
             color: #ff6b6b;
         }
         .modal p {
+            font-size: clamp(1rem, 4vw, 1.2rem);
             margin-bottom: 1.5rem;
         }
+        #newTimerBtn {
+            width: 100%;
+            max-width: 200px;
+            margin: 0 auto;
+        }
         @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: #f00;
+            opacity: 0;
+            pointer-events: none;
         }
+        /* Orientation specific adjustments */
+        @media (orientation: portrait) and (max-height: 700px) {
+            .timer-container {
+                padding: 1rem;
+                margin-top: 0;
+            }
+            h1 {
+                margin-bottom: 1rem;
+            }
+            .time-value {
+                height: 60%;
+            }
+            .time-label {
+                padding-top: 0.5rem;
+            }
+        }
+        @media (orientation: landscape) and (max-height: 500px) {
+            .timer-container {
+                padding: 0.5rem;
+                max-width: 90%;
+            }
+            h1 {
+                margin-bottom: 0.5rem;
+                font-size: 1.5rem;
+            }
+            .timer {
+                margin-bottom: 0.5rem;
+            }
+            .controls {
+                margin-top: 0.5rem;
+            }
+            .set-timer {
+                margin-top: 0.5rem;
+            }
         }
     </style>
 </head>
                 <div class="time-input">
                     <input type="number" id="inputHours" min="0" max="99" value="0">
                     <div class="arrows">
+                        <button class="arrow-btn" onclick="incrementHours()"></button>
                         <button class="arrow-btn down" onclick="decrementHours()"></button>
                     </div>
                 </div>
                 <div class="time-input">
                     <input type="number" id="inputMinutes" min="0" max="59" value="10">
                     <div class="arrows">
+                        <button class="arrow-btn" onclick="incrementMinutes()"></button>
                         <button class="arrow-btn down" onclick="decrementMinutes()"></button>
                     </div>
                 </div>
                 <div class="time-input">
                     <input type="number" id="inputSeconds" min="0" max="59" value="0">
                     <div class="arrows">
+                        <button class="arrow-btn" onclick="incrementSeconds()"></button>
                         <button class="arrow-btn down" onclick="decrementSeconds()"></button>
                     </div>
                 </div>
             </div>
             <h2>Time's Up!</h2>
             <p>Your countdown has reached zero.</p>
+            <button id="newTimerBtn"><i class="fas fa-plus"></i> New Timer</button>
         </div>
     </div>
         // Create particles
         function createParticles() {
+            for (let i = 0; i < 30; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'confetti';
                 particle.style.left = `${Math.random() * 100}vw`;
                 particle.style.top = `${Math.random() * 100}vh`;
+                particle.style.width = `${5 + Math.random() * 8}px`;
                 particle.style.height = particle.style.width;
                 particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                 particles.appendChild(particle);
                     hoursElement.textContent = hours.toString().padStart(2, '0');
                     hoursElement.classList.remove('flip');
                 }, 300);
             }
             if (minutesElement.textContent !== minutes.toString().padStart(2, '0')) {
                     minutesElement.textContent = minutes.toString().padStart(2, '0');
                     minutesElement.classList.remove('flip');
                 }, 300);
             }
             if (secondsElement.textContent !== secs.toString().padStart(2, '0')) {
                     secondsElement.textContent = secs.toString().padStart(2, '0');
                     secondsElement.classList.remove('flip');
                 }, 300);
             }
             // Update progress bar
             const seconds = parseInt(inputSeconds.value) || 0;
             if (hours === 0 && minutes === 0 && seconds === 0) {
+                alert('Please set a valid time before starting.');
                 return;
             }
             isRunning = true;
             updateDisplay(remainingSeconds);
+            countdownInterval = setInterval(() => {
                 remainingSeconds--;
                 if (remainingSeconds < 0) {
         // Close modal
         function closeModalFunc() {
             modal.style.display = 'none';
+            // Reset confetti positions
+            document.querySelectorAll('.confetti').forEach(el => {
+                el.style.transform = 'translate(0, 0) rotate(0deg)';
+                el.style.opacity = '0';
+            });
         }
         // Start new timer
             confettiElements.forEach((el, index) => {
                 setTimeout(() => {
                     el.style.opacity = '1';
+                    el.style.transform = `translate(${(Math.random() - 0.5) * 100}px, ${(Math.random() - 0.5) * 100}px) rotate(${Math.random() * 360}deg)`;
                     el.style.transition = 'all 1s ease';
                     setTimeout(() => {
                         el.style.opacity = '0';
                     }, 1000);
                 }, index * 50);
             });
             else inputSeconds.value = 59;
         }
+        // Handle keyboard input
+        function handleInputKeyPress(e) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (e.target.id === 'inputHours') incrementHours();
+                if (e.target.id === 'inputMinutes') incrementMinutes();
+                if (e.target.id === 'inputSeconds') incrementSeconds();
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (e.target.id === 'inputHours') decrementHours();
+                if (e.target.id === 'inputMinutes') decrementMinutes();
+                if (e.target.id === 'inputSeconds') decrementSeconds();
+            }
+        }
         // Event listeners
         startBtn.addEventListener('click', startCountdown);
         pauseBtn.addEventListener('click', pauseCountdown);
         resetBtn.addEventListener('click', resetCountdown);
         closeModal.addEventListener('click', closeModalFunc);
         newTimerBtn.addEventListener('click', startNewTimer);
+        inputHours.addEventListener('keydown', handleInputKeyPress);
+        inputMinutes.addEventListener('keydown', handleInputKeyPress);
+        inputSeconds.addEventListener('keydown', handleInputKeyPress);
         // Initialize with default time
         resetCountdown();
     </script>
+</body>
 </html>