Spaces:

JIGH4T-OT
/

ticktock-timer

Running

App Files Files Community

JIGH4T-OT commited on Nov 21, 2025

Commit

47df9fc

verified ·

1 Parent(s): 307bc7d

Create a clean, minimalist timer website that allows users to:

Browse files

Set countdown timers with start, pause, and reset functionality.

Use an alarm sound when the timer reaches zero.

Input time quickly via intuitive controls (e.g., typing or slider).

Have a clear, readable display of the remaining time.

Support basic customization like choosing alarm sounds and light/dark mode.

Be responsive for desktop and mobile devices.

Focus on simplicity and ease of use, with no clutter or unnecessary features. Prioritize fast loading speed and accessibility. Provide a modern, friendly UI design that users of all ages find straightforward.

Files changed (4) hide show

README.md +7 -4
index.html +122 -19
script.js +137 -0
style.css +13 -21

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Ticktock Timer
-emoji: 👁
 colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TickTock Timer ⏱️
 colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,122 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TickTock Timer ⏱️</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            100: '#d1d5db',
+                            200: '#9ca3af',
+                            300: '#6b7280',
+                            400: '#4b5563',
+                            500: '#374151',
+                            600: '#1f2937',
+                            700: '#111827',
+                        },
+                        secondary: {
+                            100: '#e5e7eb',
+                            200: '#d1d5db',
+                            300: '#9ca3af',
+                            400: '#6b7280',
+                            500: '#4b5563',
+                            600: '#374151',
+                            700: '#1f2937',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">
+    <div class="container mx-auto px-4 py-8 max-w-md">
+        <!-- Theme Toggle -->
+        <div class="flex justify-end mb-4">
+            <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                <i data-feather="moon" class="hidden dark:block"></i>
+                <i data-feather="sun" class="dark:hidden"></i>
+            </button>
+        </div>
+        <!-- Timer Header -->
+        <h1 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8">TickTock Timer ⏱️</h1>
+        <!-- Timer Display -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
+            <div id="timer-display" class="text-6xl font-mono text-center text-gray-800 dark:text-gray-100 mb-6">00:00:00</div>
+            <!-- Timer Controls -->
+            <div class="flex justify-center space-x-4 mb-6">
+                <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-medium transition-colors">
+                    Start
+                </button>
+                <button id="pause-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50" disabled>
+                    Pause
+                </button>
+                <button id="reset-btn" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg font-medium transition-colors">
+                    Reset
+                </button>
+            </div>
+            <!-- Time Input -->
+            <div class="space-y-4">
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Hours:</span>
+                    <input type="number" id="hours-input" min="0" max="23" value="0" class="w-16 p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Minutes:</span>
+                    <input type="number" id="minutes-input" min="0" max="59" value="0" class="w-16 p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Seconds:</span>
+                    <input type="number" id="seconds-input" min="0" max="59" value="0" class="w-16 p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
+                </div>
+            </div>
+        </div>
+        <!-- Alarm Settings -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Alarm Settings</h2>
+            <div class="space-y-4">
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Alarm Sound:</span>
+                    <select id="alarm-select" class="p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100">
+                        <option value="beep">Beep</option>
+                        <option value="bell">Bell</option>
+                        <option value="digital">Digital</option>
+                    </select>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Volume:</span>
+                    <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5" class="w-full">
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-700 dark:text-gray-300">Test Alarm:</span>
+                    <button id="test-alarm" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1 rounded-lg text-sm transition-colors">
+                        Play
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <audio id="alarm-sound" src=""></audio>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,137 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const timerDisplay = document.getElementById('timer-display');
+    const startBtn = document.getElementById('start-btn');
+    const pauseBtn = document.getElementById('pause-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const hoursInput = document.getElementById('hours-input');
+    const minutesInput = document.getElementById('minutes-input');
+    const secondsInput = document.getElementById('seconds-input');
+    const alarmSelect = document.getElementById('alarm-select');
+    const volumeControl = document.getElementById('volume-control');
+    const testAlarmBtn = document.getElementById('test-alarm');
+    const alarmSound = document.getElementById('alarm-sound');
+    const themeToggle = document.getElementById('theme-toggle');
+    // Timer variables
+    let timer;
+    let totalSeconds = 0;
+    let remainingSeconds = 0;
+    let isRunning = false;
+    // Theme toggle
+    themeToggle.addEventListener('click', () => {
+        document.documentElement.classList.toggle('dark');
+        feather.replace();
+    });
+    // Initialize timer display
+    updateTimerDisplay(0);
+    // Start button click handler
+    startBtn.addEventListener('click', () => {
+        if (!isRunning) {
+            if (remainingSeconds === 0) {
+                const hours = parseInt(hoursInput.value) || 0;
+                const minutes = parseInt(minutesInput.value) || 0;
+                const seconds = parseInt(secondsInput.value) || 0;
+                totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
+                remainingSeconds = totalSeconds;
+            }
+            if (remainingSeconds > 0) {
+                isRunning = true;
+                startBtn.disabled = true;
+                pauseBtn.disabled = false;
+                toggleInputs(true);
+                timer = setInterval(() => {
+                    remainingSeconds--;
+                    updateTimerDisplay(remainingSeconds);
+                    if (remainingSeconds <= 0) {
+                        clearInterval(timer);
+                        isRunning = false;
+                        startBtn.disabled = false;
+                        pauseBtn.disabled = true;
+                        playAlarm();
+                    }
+                }, 1000);
+            }
+        }
+    });
+    // Pause button click handler
+    pauseBtn.addEventListener('click', () => {
+        if (isRunning) {
+            clearInterval(timer);
+            isRunning = false;
+            startBtn.disabled = false;
+            pauseBtn.disabled = true;
+        }
+    });
+    // Reset button click handler
+    resetBtn.addEventListener('click', () => {
+        clearInterval(timer);
+        isRunning = false;
+        remainingSeconds = 0;
+        updateTimerDisplay(0);
+        startBtn.disabled = false;
+        pauseBtn.disabled = true;
+        toggleInputs(false);
+    });
+    // Test alarm button click handler
+    testAlarmBtn.addEventListener('click', () => {
+        playAlarm();
+    });
+    // Volume control change handler
+    volumeControl.addEventListener('input', () => {
+        alarmSound.volume = volumeControl.value;
+    });
+    // Update timer display
+    function updateTimerDisplay(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        timerDisplay.textContent =
+            `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+    // Play alarm sound
+    function playAlarm() {
+        const soundFile = {
+            'beep': 'https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3',
+            'bell': 'https://assets.mixkit.co/sfx/preview/mixkit-digital-clock-digital-alarm-buzzer-992.mp3',
+            'digital': 'https://assets.mixkit.co/sfx/preview/mixkit-simple-digital-clock-alarm-995.mp3'
+        }[alarmSelect.value];
+        alarmSound.src = soundFile;
+        alarmSound.volume = volumeControl.value;
+        alarmSound.play();
+    }
+    // Toggle input fields disabled state
+    function toggleInputs(disabled) {
+        hoursInput.disabled = disabled;
+        minutesInput.disabled = disabled;
+        secondsInput.disabled = disabled;
+    }
+    // Input validation
+    function validateInput(input, max) {
+        if (input.value > max) {
+            input.value = max;
+        } else if (input.value < 0) {
+            input.value = 0;
+        }
+    }
+    hoursInput.addEventListener('change', () => validateInput(hoursInput, 23));
+    minutesInput.addEventListener('change', () => validateInput(minutesInput, 59));
+    secondsInput.addEventListener('change', () => validateInput(secondsInput, 59));
+});

style.css CHANGED Viewed

@@ -1,28 +1,20 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
-}

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+body {
+    font-family: 'Inter', sans-serif;
 }
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
+input[type="number"] {
+    -moz-appearance: textfield;
 }
+#timer-display {
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}