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; + } +}