Last active
June 6, 2026 12:53
-
-
Save aoirint/9d2d7f7b7de478e135b6f923a35c3e12 to your computer and use it in GitHub Desktop.
UNLICENSE (Public domain). Font: https://github.com/rbanffy/3270font
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| @font-face { | |
| font-family: "ClockFont"; | |
| src: url("./assets/3270-Regular.ttf") format("truetype"); | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: transparent; | |
| overflow: hidden; | |
| } | |
| #clock { | |
| font-family: "ClockFont", monospace; | |
| white-space: nowrap; | |
| opacity: 0.9; | |
| color: #ffffff; | |
| -webkit-text-stroke: 6px #ff6687; | |
| paint-order: stroke; | |
| } | |
| #date { | |
| font-size: 26px; /* 0.66 × 40px */ | |
| } | |
| #time { | |
| font-size: 40px; | |
| } | |
| #colon { | |
| animation: blink 5s steps(1, end) infinite; | |
| } | |
| @keyframes blink { | |
| 96% { opacity: 1; } | |
| 96.01%, 100% { opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="clock"> | |
| <span id="date"></span> | |
| <span id="time"></span> | |
| </div> | |
| <script> | |
| // Recommended viewport size | |
| // 40px: 280px X 40px | |
| const TIME_ZONE = null; // e.g. "Asia/Tokyo" | |
| const dateEl = document.getElementById("date"); | |
| const timeEl = document.getElementById("time"); | |
| const pad = n => String(n).padStart(2, "0"); | |
| function showError(message) { | |
| dateEl.textContent = ""; | |
| timeEl.textContent = `ERROR: ${message}`; | |
| } | |
| function update() { | |
| try { | |
| const now = new Date(); | |
| const d = TIME_ZONE | |
| ? new Date(now.toLocaleString(undefined, { timeZone: TIME_ZONE })) | |
| : now; | |
| dateEl.textContent = | |
| `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; | |
| timeEl.innerHTML = | |
| ` ${pad(d.getHours())}<span id="colon">:</span>${pad(d.getMinutes())}`; | |
| setTimeout(update, 60000 - (Date.now() % 60000)); | |
| } catch (e) { | |
| showError(e?.message ?? String(e)); | |
| } | |
| } | |
| update(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment