From c87f8b29f986a4c7e8b9c9bd80f6d2baa06ffe87 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 09:37:01 +0000
Subject: [PATCH] Add web-based version of the digital clock
Co-authored-by: babelman97 <186798789+babelman97@users.noreply.github.com>
---
README.md | 10 ++++++++++
index.html | 13 +++++++++++++
script.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 19 +++++++++++++++++++
4 files changed, 91 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/README.md b/README.md
index 18a719d..bb8b159 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,8 @@ A simple full-screen digital clock application built with PyQt5.
- Exit the application with `Ctrl + Q`.
- Switch between screens using number keys (1-9).
+- **Web Version**: A new web-based version is now available, allowing you to use the clock in any modern web browser.
+
## Requirements
- Python 3.x
@@ -49,6 +51,14 @@ Run the application with:
- Exit: Press Ctrl + Q
- Switch Screen: Press 1-9
+## Web Version
+
+To use the web-based version of the clock:
+
+1. Open `index.html` in your favorite web browser.
+2. The clock will automatically start in full-screen mode (if supported by the browser) or you can press `F` to toggle full-screen.
+3. Use the `+` or `=` keys to increase the font size and the `-` key to decrease it.
+
## License
This project is licensed under the MIT License.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8540fab
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Full Screen Digital Clock
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c12c5cd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+function updateTime() {
+ const now = new Date();
+ const options = {
+ timeZone: 'Asia/Taipei',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ };
+ const formatter = new Intl.DateTimeFormat('en-GB', options);
+ const timeParts = formatter.formatToParts(now);
+
+ let hours, minutes, seconds;
+ for (const part of timeParts) {
+ if (part.type === 'hour') hours = part.value;
+ if (part.type === 'minute') minutes = part.value;
+ if (part.type === 'second') seconds = part.value;
+ }
+
+ const formattedTime = `${hours}:${minutes}:${seconds}`;
+ document.getElementById('clock').textContent = formattedTime;
+}
+
+let fontSize = 240;
+
+function changeFontSize(delta) {
+ fontSize += delta;
+ if (fontSize < 10) fontSize = 10;
+ document.getElementById('clock').style.fontSize = `${fontSize}px`;
+}
+
+document.addEventListener('keydown', (event) => {
+ if (event.key === '+' || event.key === '=') {
+ changeFontSize(10);
+ } else if (event.key === '-') {
+ changeFontSize(-10);
+ } else if (event.key === 'f' || event.key === 'F') {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen();
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ }
+ }
+ }
+});
+
+setInterval(updateTime, 1000);
+updateTime();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6b200df
--- /dev/null
+++ b/style.css
@@ -0,0 +1,19 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f5f5f5;
+ overflow: hidden;
+ font-family: Arial, sans-serif;
+}
+
+#clock {
+ font-size: 240px;
+ color: black;
+ text-align: center;
+ user-select: none;
+}