Spaces:
Running
Running
File size: 6,099 Bytes
b0579ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<!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> |