Spaces:
Running
Running
| <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> |