Spaces:
Running
Running
l'horloge est legerement décalée. le 1 a la place du 12 etc... remplacer les formules par des equations tres simples
30d8d56
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MathClock ⏰</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow flex items-center justify-center p-4"> | |
| <div class="clock-container relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 bg-white rounded-full shadow-xl border-8 border-indigo-500"> | |
| <!-- Clock face with math numbers --> | |
| <div class="numbers absolute w-full h-full"> | |
| <!-- Each number position is calculated with transform (corrected positions) --> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 5%; left: 50%; transform: translateX(-50%);">12÷1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 15%; left: 25%; transform: translateX(-50%);">2−1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 30%; left: 10%; transform: translateX(-50%);">1+2</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 50%; left: 5%; transform: translateX(-50%);">4−1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 70%; left: 10%; transform: translateX(-50%);">2+3</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 85%; left: 25%; transform: translateX(-50%);">6÷1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 95%; left: 50%; transform: translateX(-50%);">7−0</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 85%; left: 75%; transform: translateX(-50%);">4+4</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 70%; left: 90%; transform: translateX(-50%);">9×1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 50%; left: 95%; transform: translateX(-50%);">10−1</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 30%; left: 90%; transform: translateX(-50%);">5+6</div> | |
| <div class="number text-xs md:text-sm lg:text-base font-mono font-bold text-indigo-700 absolute" style="top: 15%; left: 75%; transform: translateX(-50%);">12×1</div> | |
| </div> | |
| <!-- Clock hands --> | |
| <div class="clock-hands absolute w-full h-full"> | |
| <div class="hand hour-hand absolute bg-indigo-800 rounded-full origin-bottom" style="width: 6px; height: 30%; bottom: 50%; left: 50%; transform: translateX(-50%);"></div> | |
| <div class="hand minute-hand absolute bg-indigo-600 rounded-full origin-bottom" style="width: 4px; height: 40%; bottom: 50%; left: 50%; transform: translateX(-50%);"></div> | |
| <div class="hand second-hand absolute bg-red-500 rounded-full origin-bottom" style="width: 2px; height: 45%; bottom: 50%; left: 50%; transform: translateX(-50%);"></div> | |
| <div class="center-dot absolute bg-indigo-500 rounded-full" style="width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="current-time-display text-center mb-8 text-xl font-mono font-bold text-indigo-800"></div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |