Responsive design

johnstack · johnstack · commit 8241918f6ab6 · 2025-12-24T11:05:15.000Z
diff --git a/.DS_Store b/.DS_Store
diff --git a/clock_demo/index.html b/clock_demo/index.html
@@ -6,32 +6,47 @@
 
   <style>
     body {
+      margin: 0;
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 90vh;
-      background: white;
+      min-height: 100vh;
     }
 
     .clock {
       position: relative;
-      width: 600px;
-      height: 600px;
+      width: min(80vw, 80vh);
+      aspect-ratio: 1 / 1;
     }
 
+   /* Background image (static) */
+    .background {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      pointer-events: none;
+    }
+
+/* Clock hands */
     .hand {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform-origin: 50% 50%; /* center */
+      width: auto;
+      height: 100%;
+      max-height: 100%;
+      transform-origin: 50% 50%;
       transform: translate(-50%, -50%) rotate(0deg);
+      pointer-events: none;
     }
 
-    /* Optional sizing */
-    .background   { height: 600px; }
-    #hours   { height: 600px; }
-    #minutes { height: 600px; }
-    #seconds { height: 600px; }
+    /* Scale individual hands */
+    #hours   { height: 90%; }
+    #minutes { height: 90%; }
+    #seconds { height: 90%; }
+
   </style>
 </head>
 
diff --git a/clock_demo/index_nonresponsive.html b/clock_demo/index_nonresponsive.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Clock demo</title>
+
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 90vh;
+      background: white;
+    }
+
+    .clock {
+      position: relative;
+      width: 600px;
+      height: 600px;
+    }
+
+    .hand {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform-origin: 50% 50%; /* center */
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    /* Optional sizing */
+    .background   { height: 600px; }
+    #hours   { height: 600px; }
+    #minutes { height: 600px; }
+    #seconds { height: 600px; }
+  </style>
+</head>
+
+<body>
+  <div class="clock">
+    <img src="background.png" class="background" alt="Clock background">
+    <img src="hours.png"   id="hours"   class="hand">
+    <img src="minutes.png" id="minutes" class="hand">
+    <img src="seconds.png" id="seconds" class="hand">
+  </div>
+
+  <script>
+    const h = document.getElementById("hours");
+    const m = document.getElementById("minutes");
+    const s = document.getElementById("seconds");
+
+    function updateClock() {
+      const now = new Date();
+
+      const seconds = now.getSeconds();
+      const minutes = now.getMinutes() + seconds / 60;
+      const hours   = (now.getHours() % 12) + minutes / 60;
+
+      h.style.transform = `translate(-50%, -50%) rotate(${hours * 30}deg)`;
+      m.style.transform = `translate(-50%, -50%) rotate(${minutes * 6}deg)`;
+      s.style.transform = `translate(-50%, -50%) rotate(${seconds * 6}deg)`;
+    }
+
+    updateClock();
+    setInterval(updateClock, 10);
+  </script>
+</body>
+</html>
