babelman97 · babelman97 · Mar 18, 2026
diff --git 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
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Full Screen Digital Clock</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="clock"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js 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
@@ -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;
+}