From e495796902418d933dd90f6fc71c95680afbba57 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 16 Feb 2026 09:35:10 +0000 Subject: [PATCH] Add a simple clock web app optimized for iPhone PWA - Created `clock_app/` directory with `index.html`, `style.css`, `script.js`, and `icon.svg`. - Configured meta tags for iOS standalone mode (Add to Home Screen). - Implemented a responsive digital clock with dark mode. Co-authored-by: muumuu8181 <87556753+muumuu8181@users.noreply.github.com> --- clock_app/icon.svg | 6 ++++++ clock_app/index.html | 19 ++++++++++++++++++ clock_app/script.js | 27 ++++++++++++++++++++++++++ clock_app/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 98 insertions(+) create mode 100644 clock_app/icon.svg create mode 100644 clock_app/index.html create mode 100644 clock_app/script.js create mode 100644 clock_app/style.css diff --git a/clock_app/icon.svg b/clock_app/icon.svg new file mode 100644 index 0000000..c50a129 --- /dev/null +++ b/clock_app/icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/clock_app/index.html b/clock_app/index.html new file mode 100644 index 0000000..a1ab48e --- /dev/null +++ b/clock_app/index.html @@ -0,0 +1,19 @@ + + + + + + + + Clock App + + + + +
+
00:00:00
+
YYYY/MM/DD (Day)
+
+ + + \ No newline at end of file diff --git a/clock_app/script.js b/clock_app/script.js new file mode 100644 index 0000000..d67e6f0 --- /dev/null +++ b/clock_app/script.js @@ -0,0 +1,27 @@ +function updateClock() { + const now = new Date(); + + // Time + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + const timeString = `${hours}:${minutes}:${seconds}`; + + document.getElementById('time').textContent = timeString; + + // Date + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + const dayName = days[now.getDay()]; + const dateString = `${year}/${month}/${day} (${dayName})`; + + document.getElementById('date').textContent = dateString; +} + +// Initial call +updateClock(); + +// Update every second +setInterval(updateClock, 1000); diff --git a/clock_app/style.css b/clock_app/style.css new file mode 100644 index 0000000..b441737 --- /dev/null +++ b/clock_app/style.css @@ -0,0 +1,46 @@ +body { + margin: 0; + padding: 0; + background-color: #000; + color: #fff; + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; +} + +#clock-container { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; +} + +#time { + font-size: 18vw; + font-weight: bold; + line-height: 1; + letter-spacing: -0.05em; +} + +#date { + font-size: 5vw; + margin-top: 2vh; + color: #888; +} + +@media (orientation: landscape) { + #time { + font-size: 25vh; + } + #date { + font-size: 6vh; + } +}