Spaces:

snoofm
/

egg-timer

Running

App Files Files Community

snoofm commited on Sep 17, 2025

Commit

f7eedb8

verified ·

1 Parent(s): 6dbeac1

make it good it's not aligned, choose a nice font and buttons - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +354 -19
prompts.txt +2 -0

README.md CHANGED Viewed

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

 ---
+title: egg-timer
+emoji: 🐳
+colorFrom: purple
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,354 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>7-Minute Countdown Timer</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            color: white;
+        }
+        .timer-container {
+            text-align: center;
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(12px);
+            border-radius: 24px;
+            padding: 60px 40px;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+            border: 1px solid rgba(255, 255, 255, 0.25);
+            max-width: 480px;
+            width: 90%;
+        }
+        h1 {
+            font-weight: 600;
+            margin-bottom: 30px;
+            font-size: 2rem;
+        }
+        .timer-display {
+            font-size: 5rem;
+            font-weight: 600;
+            margin: 40px 0;
+            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+            font-family: 'Poppins', sans-serif;
+            letter-spacing: 1px;
+        }
+        .controls {
+            margin: 40px 0;
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        button {
+            background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
+            border: none;
+            color: white;
+            padding: 16px 32px;
+            border-radius: 12px;
+            font-size: 1.1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            min-width: 120px;
+        }
+        button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
+        }
+        button:active {
+            transform: translateY(1px);
+        }
+        button:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            transform: none;
+            background: linear-gradient(45deg, #bdc3c7, #2c3e50);
+        }
+        .time-input {
+            margin: 30px 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+        }
+        .time-input input {
+            width: 80px;
+            padding: 12px;
+            border-radius: 8px;
+            border: none;
+            text-align: center;
+            font-size: 1.1rem;
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            font-weight: 500;
+        }
+        .time-input label {
+            font-weight: 400;
+            font-size: 1.1rem;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 10px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 5px;
+            margin: 30px 0;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
+            border-radius: 5px;
+            transition: width 1s linear;
+            width: 100%;
+        }
+        .status {
+            font-size: 1.3rem;
+            margin: 30px 0;
+            font-weight: 400;
+        }
+        .alarm-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.85);
+            z-index: 1000;
+        }
+        .alarm-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: linear-gradient(135deg, #ff4d4d, #f94336);
+            padding: 50px;
+            border-radius: 24px;
+            text-align: center;
+            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
+            animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            max-width: 90%;
+            width: 400px;
+        }
+        @keyframes bounce {
+            0% { transform: translate(-50%, -50%) scale(0.5); }
+            100% { transform: translate(-50%, -50%) scale(1); }
+        }
+        .alarm-content h2 {
+            font-size: 2.8rem;
+            margin: 0 0 25px 0;
+            animation: pulse 1.2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .dismiss-btn {
+            background: white;
+            color: #ff4757;
+            margin-top: 25px;
+            padding: 14px 28px;
+            border-radius: 10px;
+            font-weight: 600;
+        }
+        @media (max-width: 480px) {
+            .timer-display {
+                font-size: 3.5rem;
+            }
+            .controls {
+                flex-direction: column;
+                gap: 12px;
+            }
+            button {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="timer-container">
+        <h1>Perfect Egg Timer</h1>
+        <div class="time-input">
+            <label for="minutes">Minutes:</label>
+            <input type="number" id="minutes" min="0" max="59" value="7">
+            <label for="seconds">Seconds:</label>
+            <input type="number" id="seconds" min="0" max="59" value="0">
+        </div>
+        <div class="timer-display" id="timerDisplay">07:00</div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+        </div>
+        <div class="status" id="status">Ready to start</div>
+        <div class="controls">
+            <button onclick="startTimer()" id="startBtn">Start</button>
+            <button onclick="pauseTimer()" id="pauseBtn" disabled>Pause</button>
+            <button onclick="resetTimer()" id="resetBtn">Reset</button>
+            <button onclick="setCustomTime()" id="setTimeBtn">Set Time</button>
+        </div>
+    </div>
+    <div class="alarm-modal" id="alarmModal">
+        <div class="alarm-content">
+            <h2>⏰ TIME'S UP! ⏰</h2>
+            <p>Your 7-minute timer has finished!</p>
+            <button class="dismiss-btn" onclick="dismissAlarm()">Dismiss</button>
+        </div>
+    </div>
+    <script>
+        let totalTime = 7 * 60; // 7 minutes in seconds
+        let currentTime = totalTime;
+        let isRunning = false;
+        let timerInterval;
+        let audioContext;
+        let alarmSound;
+        // Initialize audio context for alarm sound
+        function initAudio() {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        }
+        // Create alarm sound using Web Audio API
+        function createAlarmSound() {
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+            oscillator.type = 'sine';
+            gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+            gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.1);
+            gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.5);
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.5);
+        }
+        function playAlarm() {
+            if (!audioContext) initAudio();
+            // Play multiple beeps
+            for (let i = 0; i < 6; i++) {
+                setTimeout(() => createAlarmSound(), i * 600);
+            }
+        }
+        function updateDisplay() {
+            const minutes = Math.floor(currentTime / 60);
+            const seconds = currentTime % 60;
+            document.getElementById('timerDisplay').textContent =
+                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+            // Update progress bar
+            const progress = ((totalTime - currentTime) / totalTime) * 100;
+            document.getElementById('progressFill').style.width = `${progress}%`;
+        }
+        function startTimer() {
+            if (!audioContext) initAudio();
+            isRunning = true;
+            document.getElementById('startBtn').disabled = true;
+            document.getElementById('pauseBtn').disabled = false;
+            document.getElementById('status').textContent = 'Timer running...';
+            timerInterval = setInterval(() => {
+                if (currentTime > 0) {
+                    currentTime--;
+                    updateDisplay();
+                } else {
+                    // Timer finished
+                    clearInterval(timerInterval);
+                    isRunning = false;
+                    document.getElementById('startBtn').disabled = false;
+                    document.getElementById('pauseBtn').disabled = true;
+                    document.getElementById('status').textContent = 'Time\'s up!';
+                    // Show alarm modal and play sound
+                    document.getElementById('alarmModal').style.display = 'block';
+                    playAlarm();
+                }
+            }, 1000);
+        }
+        function pauseTimer() {
+            clearInterval(timerInterval);
+            isRunning = false;
+            document.getElementById('startBtn').disabled = false;
+            document.getElementById('pauseBtn').disabled = true;
+            document.getElementById('status').textContent = 'Timer paused';
+        }
+        function resetTimer() {
+            clearInterval(timerInterval);
+            isRunning = false;
+            currentTime = totalTime;
+            updateDisplay();
+            document.getElementById('startBtn').disabled = false;
+            document.getElementById('pauseBtn').disabled = true;
+            document.getElementById('status').textContent = 'Ready to start';
+        }
+        function dismissAlarm() {
+            document.getElementById('alarmModal').style.display = 'none';
+            resetTimer();
+        }
+        // Initialize display
+        updateDisplay();
+        // Handle browser tab visibility to continue timer
+        document.addEventListener('visibilitychange', function() {
+            if (document.hidden && isRunning) {
+                // Store the time when tab becomes hidden
+                localStorage.setItem('timerStartTime', Date.now() - (totalTime - currentTime) * 1000);
+            } else if (!document.hidden && isRunning) {
+                // Recalculate time when tab becomes visible
+                const startTime = localStorage.getItem('timerStartTime');
+                if (startTime) {
+                    const elapsed = Math.floor((Date.now() - parseInt(startTime)) / 1000);
+                    currentTime = Math.max(0, totalTime - elapsed);
+                    updateDisplay();
+                }
+            }
+        });
+    </script>
+</body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ add a function to customize the time not just 7minutes, and it's a egg boiling reminder so the time might change everytime
2	+ make it good it's not aligned, choose a nice font and buttons