hour number should not touch the line - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Clock
-emoji: 🏃
-colorFrom: pink
-colorTo: blue
+title: clock
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,246 @@
-<!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>Beautiful Analog Clock</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .clock-face {
+            background: radial-gradient(circle at center, #f9f9f9, #e0e0e0);
+            box-shadow: 
+                0 0 0 8px rgba(255,255,255,0.8),
+                inset 0 0 15px rgba(0,0,0,0.1),
+                0 15px 30px rgba(0,0,0,0.15);
+            border: 1px solid rgba(255,255,255,0.5);
+        }
+        
+        .clock-center {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, #fff, #c0392b);
+            border: 2px solid #2c3e50;
+            box-shadow: 0 0 10px rgba(0,0,0,0.3);
+            z-index: 10;
+        }
+        
+        .hour-hand, .minute-hand, .second-hand {
+            transform-origin: 50% 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            border-radius: 10px;
+            transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1);
+        }
+        
+        .hour-hand {
+            width: 8px;
+            height: 30%;
+            margin-top: -30%;
+            margin-left: -4px;
+            background: linear-gradient(to top, #2c3e50, #34495e);
+            box-shadow: 0 0 5px rgba(0,0,0,0.3);
+            border-radius: 8px;
+            z-index: 3;
+        }
+        
+        .minute-hand {
+            width: 5px;
+            height: 40%;
+            margin-top: -40%;
+            margin-left: -2.5px;
+            background: linear-gradient(to top, #34495e, #7f8c8d);
+            box-shadow: 0 0 5px rgba(0,0,0,0.2);
+            border-radius: 8px;
+            z-index: 4;
+        }
+        
+        .second-hand {
+            width: 2px;
+            height: 45%;
+            margin-top: -45%;
+            margin-left: -1px;
+            background: linear-gradient(to top, #e74c3c, #c0392b);
+            box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
+            z-index: 5;
+        }
+        
+        .tick {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            font-weight: bold;
+            color: #333;
+        }
+        
+        .tick::after {
+            content: '';
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 3px;
+            height: 15px;
+            background: linear-gradient(to bottom, #2c3e50, #7f8c8d);
+            border-radius: 3px;
+            box-shadow: 0 0 3px rgba(0,0,0,0.2);
+        }
+        
+        .tick-number {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            text-align: center;
+            font-weight: bold;
+            color: #333;
+            font-size: 1.2rem;
+            transform-origin: center center;
+            line-height: 30px;
+            left: 50%;
+            top: 50%;
+            margin-left: -15px;
+            margin-top: -15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translate(0, -5px);
+        }
+        
+        @keyframes rotate {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        
+        .clock-decoration {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: radial-gradient(circle at center, transparent 60%, rgba(255,255,255,0.1) 60.5%, transparent 61%);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-gray-100 to-gray-300 min-h-screen flex items-center justify-center p-4">
+    <div class="relative">
+        <!-- Clock container -->
+        <div class="clock-face bg-white rounded-full shadow-xl relative" style="width: 300px; height: 300px;">
+            <!-- Decorative elements -->
+            <div class="clock-decoration"></div>
+            
+            <!-- Clock center -->
+            <div class="clock-center"></div>
+            
+            <!-- Clock hands -->
+            <div class="hour-hand" id="hour-hand"></div>
+            <div class="minute-hand" id="minute-hand"></div>
+            <div class="second-hand" id="second-hand"></div>
+            
+            <!-- Clock ticks and numbers -->
+            <div class="absolute inset-0">
+                <!-- Numbers -->
+                <div class="tick-number" style="transform: rotate(30deg) translate(0, -110px) rotate(-30deg); transform-origin: center center;">1</div>
+                <div class="tick-number" style="transform: rotate(60deg) translate(0, -110px) rotate(-60deg); transform-origin: center center;">2</div>
+                <div class="tick-number" style="transform: rotate(90deg) translate(0, -110px) rotate(-90deg); transform-origin: center center;">3</div>
+                <div class="tick-number" style="transform: rotate(120deg) translate(0, -110px) rotate(-120deg); transform-origin: center center;">4</div>
+                <div class="tick-number" style="transform: rotate(150deg) translate(0, -110px) rotate(-150deg); transform-origin: center center;">5</div>
+                <div class="tick-number" style="transform: rotate(180deg) translate(0, -110px) rotate(-180deg); transform-origin: center center;">6</div>
+                <div class="tick-number" style="transform: rotate(210deg) translate(0, -110px) rotate(-210deg); transform-origin: center center;">7</div>
+                <div class="tick-number" style="transform: rotate(240deg) translate(0, -110px) rotate(-240deg); transform-origin: center center;">8</div>
+                <div class="tick-number" style="transform: rotate(270deg) translate(0, -110px) rotate(-270deg); transform-origin: center center;">9</div>
+                <div class="tick-number" style="transform: rotate(300deg) translate(0, -110px) rotate(-300deg); transform-origin: center center;">10</div>
+                <div class="tick-number" style="transform: rotate(330deg) translate(0, -110px) rotate(-330deg); transform-origin: center center;">11</div>
+                <div class="tick-number" style="transform: rotate(0deg) translate(0, -110px) rotate(0deg); transform-origin: center center;">12</div>
+                
+                <!-- Ticks -->
+                <div class="tick" style="transform: rotate(0deg);"></div>
+                <div class="tick" style="transform: rotate(30deg);"></div>
+                <div class="tick" style="transform: rotate(60deg);"></div>
+                <div class="tick" style="transform: rotate(90deg);"></div>
+                <div class="tick" style="transform: rotate(120deg);"></div>
+                <div class="tick" style="transform: rotate(150deg);"></div>
+                <div class="tick" style="transform: rotate(180deg);"></div>
+                <div class="tick" style="transform: rotate(210deg);"></div>
+                <div class="tick" style="transform: rotate(240deg);"></div>
+                <div class="tick" style="transform: rotate(270deg);"></div>
+                <div class="tick" style="transform: rotate(300deg);"></div>
+                <div class="tick" style="transform: rotate(330deg);"></div>
+            </div>
+        </div>
+        
+        <!-- Digital time display -->
+        <div class="mt-8 text-center">
+            <div class="text-4xl font-light tracking-wider text-gray-700" id="digital-time">00:00:00</div>
+            <div class="text-lg font-medium text-gray-500 mt-3 tracking-wide" id="date-display">Monday, January 1, 2023</div>
+        </div>
+    </div>
+    
+    <script>
+        function updateClock() {
+            const now = new Date();
+            
+            // Get time components
+            const hours = now.getHours();
+            const twelveHourFormat = hours % 12 || 12; // Convert 0 to 12 for 12-hour format
+            const minutes = now.getMinutes();
+            const seconds = now.getSeconds();
+            const milliseconds = now.getMilliseconds();
+
+            // Announce the hour at the top of each hour
+            if (minutes === 0 && seconds === 0) {
+                const speech = new SpeechSynthesisUtterance();
+                speech.text = `It's ${twelveHourFormat} o'clock`;
+                speech.volume = 0.8;
+                speech.rate = 0.9;
+                speech.pitch = 1;
+                window.speechSynthesis.speak(speech);
+            }
+            
+            // Calculate angles for clock hands (use twelveHourFormat for display)
+            const hourAngle = (twelveHourFormat * 30) + (minutes * 0.5);
+            const minuteAngle = (minutes * 6) + (seconds * 0.1);
+            const secondAngle = (seconds * 6) + (milliseconds * 0.006);
+            
+            // Update clock hands
+            document.getElementById('hour-hand').style.transform = `rotate(${hourAngle}deg)`;
+            document.getElementById('minute-hand').style.transform = `rotate(${minuteAngle}deg)`;
+            document.getElementById('second-hand').style.transform = `rotate(${secondAngle}deg)`;
+            
+            // Update digital time
+            const formattedHours = String(now.getHours()).padStart(2, '0');
+            const formattedMinutes = String(minutes).padStart(2, '0');
+            const formattedSeconds = String(seconds).padStart(2, '0');
+            document.getElementById('digital-time').textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+            
+            // Update date display
+            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+            document.getElementById('date-display').textContent = now.toLocaleDateString('en-US', options);
+        }
+        
+        // Update clock immediately and then every 50ms for smooth animation
+        updateClock();
+        setInterval(updateClock, 50);
+        
+        // Add some interactive effects
+        const clock = document.querySelector('.clock-face');
+        clock.addEventListener('mouseenter', () => {
+            clock.classList.add('transform', 'scale-105');
+            clock.classList.remove('shadow-xl');
+            clock.classList.add('shadow-2xl');
+        });
+        
+        clock.addEventListener('mouseleave', () => {
+            clock.classList.remove('transform', 'scale-105');
+            clock.classList.add('shadow-xl');
+            clock.classList.remove('shadow-2xl');
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ionel/clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>