Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Live QR Clock</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); | |
| /* General Body Styling - Light Theme by Default */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| background-color: #ffffff; /* Light background by default */ | |
| font-family: 'Poppins', sans-serif; | |
| color: #121212; /* Dark text by default */ | |
| transition: background-color 0.3s, color 0.3s; /* Smooth transitions */ | |
| } | |
| /* Dark Theme Styles (applied via JavaScript) */ | |
| body.dark-theme { | |
| background-color: #121212; | |
| color: #ffffff; | |
| } | |
| /* Title Styling */ | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 600; | |
| margin: 0; | |
| color: inherit; /* Inherit from body text color */ | |
| text-align: center; | |
| } | |
| /* Instruction Text Styling */ | |
| .instruction { | |
| margin-top: 5px; | |
| font-size: 0.9rem; | |
| color: #a8a8a8; /* Light grey text for instructions */ | |
| text-align: center; | |
| } | |
| /* Button Styling */ | |
| #theme-toggle { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| padding: 10px 15px; | |
| background-color: #ddd; | |
| color: #333; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| transition: background-color 0.3s; | |
| } | |
| #theme-toggle:hover{ | |
| background-color: #ccc; | |
| } | |
| #theme-toggle.dark { | |
| background-color: #333; | |
| color: #ddd; | |
| } | |
| #theme-toggle.dark:hover { | |
| background-color: #555; | |
| } | |
| /* Container Styling */ | |
| .container { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 30px; | |
| background-color: #f0f0f0; /* Slightly lighter background for container */ | |
| border-radius: 15px; | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Shadow for separation */ | |
| border: 1px solid #eee; /* Added a subtle border */ | |
| transition: background-color 0.3s, border-color 0.3s; | |
| } | |
| .dark-theme .container { | |
| background-color: #1e1e1e; /* Darker background in dark theme */ | |
| border-color: #333; /* Border matching the dark theme */ | |
| } | |
| /* Date and Time Styling */ | |
| #current-datetime { | |
| text-align: center; | |
| font-size: 1.8em; /* make the combined datetime bigger */ | |
| font-weight: 500; | |
| color: inherit; /* Inherit from body text color */ | |
| text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Add a very subtle text glow */ | |
| margin: 10px 0 0 0 ; /* Added spacing above date/time */ | |
| } | |
| .dark-theme #current-datetime { | |
| text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); /* White glow in dark theme */ | |
| } | |
| /* QR Code Styling */ | |
| #qr-code { | |
| width: 300px; | |
| height: 300px; | |
| margin-bottom: 10px; /* Added spacing below the qr code */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Theme Toggle Button --> | |
| <button id="theme-toggle">Dark Mode</button> | |
| <!-- Title Section --> | |
| <h1>QR Clock</h1> | |
| <p class="instruction">Scan the QR code with your phone camera app</p> | |
| <!-- QR Code and Date/Time Container --> | |
| <div class="container"> | |
| <div id="qr-code"></div> | |
| <!-- Date and Time card --> | |
| <span id="current-datetime"></span> | |
| </div> | |
| <!-- QR Code Library --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> | |
| <script> | |
| const body = document.body; | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| let isDarkMode = false; | |
| function updateDateTimeAndQR() { | |
| // Get current date and time | |
| const now = new Date(); | |
| const dateString = now.toLocaleDateString('en-GB'); // Format: DD/MM/YYYY | |
| const timeString = now.toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| second: '2-digit', | |
| hour12: true | |
| }); | |
| // Combine date and time into a single string | |
| const dateTimeString = `${dateString} ${timeString}`; | |
| // Update the displayed date and time in one single place | |
| document.getElementById('current-datetime').textContent = dateTimeString; | |
| // Update the QR Code with the time only | |
| const qrCodeDiv = document.getElementById('qr-code'); | |
| qrCodeDiv.innerHTML = ''; // Clear the previous QR code | |
| new QRCode(qrCodeDiv, { | |
| text: timeString, // QR Code contains only the time | |
| width: 300, | |
| height: 300, | |
| colorDark: isDarkMode ? "#ffffff" : "#000000" , | |
| colorLight: "transparent", // Transparent background | |
| }); | |
| } | |
| // Theme Toggle Functionality | |
| themeToggle.addEventListener('click', () => { | |
| isDarkMode = !isDarkMode; | |
| body.classList.toggle('dark-theme', isDarkMode); | |
| themeToggle.textContent = isDarkMode ? 'Light Mode' : 'Dark Mode'; | |
| themeToggle.classList.toggle('dark', isDarkMode); | |
| updateDateTimeAndQR(); | |
| }); | |
| // Initial call and periodic updates | |
| updateDateTimeAndQR(); | |
| setInterval(updateDateTimeAndQR, 1000); | |
| </script> | |
| </body> | |
| </html> |