commit f998ee7078b97a655167a20be8fd5eea686e85b5
Author: root <root@hub.scroll.pub> Date: 2024-12-27 10:38:39 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..5091c15 --- /dev/null +++ b/body.html @@ -0,0 +1,56 @@ +<header> + <h1>WorldTicks</h1> + <p class="tagline">Real-time visualizations across time zones</p> +</header> + +<main> + <div class="clock-grid"> + <section class="clock-card" aria-label="Sydney Clock"> + <h2>Sydney</h2> + <div class="clock" data-timezone="Australia/Sydney"> + <div class="hand hour"></div> + <div class="hand minute"></div> + <div class="hand second"></div> + <div class="center-dot"></div> + <div class="time-display"></div> + </div> + </section> + + <section class="clock-card" aria-label="Brisbane Clock"> + <h2>Brisbane</h2> + <div class="clock" data-timezone="Australia/Brisbane"> + <div class="hand hour"></div> + <div class="hand minute"></div> + <div class="hand second"></div> + <div class="center-dot"></div> + <div class="time-display"></div> + </div> + </section> + + <section class="clock-card" aria-label="Tokyo Clock"> + <h2>Tokyo</h2> + <div class="clock" data-timezone="Asia/Tokyo"> + <div class="hand hour"></div> + <div class="hand minute"></div> + <div class="hand second"></div> + <div class="center-dot"></div> + <div class="time-display"></div> + </div> + </section> + + <section class="clock-card" aria-label="London Clock"> + <h2>London</h2> + <div class="clock" data-timezone="Europe/London"> + <div class="hand hour"></div> + <div class="hand minute"></div> + <div class="hand second"></div> + <div class="center-dot"></div> + <div class="time-display"></div> + </div> + </section> + </div> +</main> + +<footer> + <p>Made with ❤️ for time zone travelers</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..ff9203b --- /dev/null +++ b/index.scroll @@ -0,0 +1,10 @@ +buildHtml +baseUrl https://worldticks.scroll.pub +metaTags + description "Beautiful real-time clock visualizations for Sydney, Brisbane, Tokyo and London" + keywords "world clock, time zones, clock visualization, Sydney time, Brisbane time, Tokyo time, London time" +editButton /edit.html +title WorldTicks - Beautiful World Time Visualizations +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..e5aff7f --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# worldticks.scroll.pub +Website generated by Claude from prompt: Clock visualisations for current time in Sydney, Brisbane, Tokyo and London \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..217a95f --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +document.addEventListener('DOMContentLoaded', () => { + const clocks = document.querySelectorAll('.clock'); + + function updateClocks() { + clocks.forEach(clock => { + const timezone = clock.dataset.timezone; + const now = new Date().toLocaleString('en-US', { timeZone: timezone }); + const time = new Date(now); + + const hours = time.getHours(); + const minutes = time.getMinutes(); + const seconds = time.getSeconds(); + + const hourDeg = (hours % 12) * 30 + minutes * 0.5; + const minuteDeg = minutes * 6; + const secondDeg = seconds * 6; + + const hourHand = clock.querySelector('.hour'); + const minuteHand = clock.querySelector('.minute'); + const secondHand = clock.querySelector('.second'); + const timeDisplay = clock.querySelector('.time-display'); + + hourHand.style.transform = `rotate(${hourDeg}deg)`; + minuteHand.style.transform = `rotate(${minuteDeg}deg)`; + secondHand.style.transform = `rotate(${secondDeg}deg)`; + + timeDisplay.textContent = time.toLocaleTimeString('en-US', { + hour: '2-digit', + minute: '2-digit', + hour12: true + }); + }); + } + + // Update every second + setInterval(updateClocks, 1000); + // Initial update + updateClocks(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e1934f3 --- /dev/null +++ b/style.css @@ -0,0 +1,163 @@ +:root { + --primary-color: #2a2b2e; + --accent-color: #4a90e2; + --background-color: #f5f6fa; + --card-background: #ffffff; + --text-color: #2a2b2e; + --clock-size: 200px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--background-color); + color: var(--text-color); + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + text-align: center; + padding: 2rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: white; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.tagline { + font-size: 1.1rem; + opacity: 0.9; +} + +main { + flex: 1; + padding: 2rem; +} + +.clock-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.clock-card { + background: var(--card-background); + border-radius: 15px; + padding: 1.5rem; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + text-align: center; + transition: transform 0.3s ease; +} + +.clock-card:hover { + transform: translateY(-5px); +} + +.clock-card h2 { + margin-bottom: 1.5rem; + color: var(--accent-color); +} + +.clock { + width: var(--clock-size); + height: var(--clock-size); + border: 8px solid var(--primary-color); + border-radius: 50%; + margin: 0 auto; + position: relative; + background: var(--card-background); +} + +.hand { + position: absolute; + bottom: 50%; + left: 50%; + transform-origin: bottom; + background: var(--primary-color); + border-radius: 4px; +} + +.hour { + width: 4px; + height: 25%; +} + +.minute { + width: 3px; + height: 35%; + background: var(--accent-color); +} + +.second { + width: 2px; + height: 40%; + background: #e74c3c; +} + +.center-dot { + position: absolute; + width: 12px; + height: 12px; + background: var(--accent-color); + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.time-display { + position: absolute; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + font-size: 1rem; + font-weight: 500; +} + +footer { + text-align: center; + padding: 2rem; + background: var(--primary-color); + color: white; +} + +@media (max-width: 768px) { + :root { + --clock-size: 180px; + } + + .clock-grid { + gap: 1.5rem; + } + + header { + padding: 1.5rem 1rem; + } + + h1 { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + :root { + --clock-size: 160px; + } + + main { + padding: 1rem; + } +}