Spaces:

NeuralFalcon
/

QR-Code-Clock

Running

App Files Files Community

NeuralFalcon commited on Jan 9, 2025

Commit

b0579ba

verified ·

1 Parent(s): 9397e0f

Update index.html

Browse files

Files changed (1) hide show

index.html +178 -19

index.html CHANGED Viewed

@@ -1,19 +1,178 @@
-<!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>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>