From d9f221a5c5728a76e8aa7482967551471d1afc83 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sat, 14 Jun 2025 22:27:05 +0200
Subject: [PATCH] Enhance analog clock styling

---
 analog.html | 90 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 64 insertions(+), 26 deletions(-)
diff --git a/analog.html b/analog.html
index 6c46615..1525c19 100644
--- a/analog.html
+++ b/analog.html
@@ -6,40 +6,78 @@
   <title>CoBiE Analog Clock</title>
   <link rel="stylesheet" href="style.css">
   <style>
-    body, html { height:100%; margin:0; }
+    body, html {
+        height: 100%;
+        margin: 0;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
+        color: #e0e0e0;
+    }
     .analog-clock-container {
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        height:100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
     }
     #clock {
-        position:relative;
-        width:90vmin;
-        height:90vmin;
-        border:6px solid #fff;
-        border-radius:50%;
-        background:radial-gradient(circle, #1a1f3a 0%, #0a0e27 100%);
+        position: relative;
+        width: 80vmin;
+        height: 80vmin;
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        background: radial-gradient(circle at center, #0a0e27 0%, #1a1f3a 100%);
+        box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2);
+    }
+    #clock::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 1.2em;
+        height: 1.2em;
+        transform: translate(-50%, -50%);
+        background: #ffffff;
+        border-radius: 50%;
+        box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
     }
     .marker {
-        position:absolute;
-        width:2em;
-        height:2em;
-        text-align:center;
-        line-height:2em;
-        font-family:'Courier New', monospace;
-        color:#fff;
-        transform:translate(-50%, -50%);
+        position: absolute;
+        width: 2em;
+        height: 2em;
+        text-align: center;
+        line-height: 2em;
+        font-family: 'Courier New', monospace;
+        font-size: 1.1em;
+        color: #ffffff;
+        text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+        transform: translate(-50%, -50%);
     }
     .hand {
-        position:absolute;
-        bottom:50%;
-        left:50%;
-        transform-origin:bottom;
+        position: absolute;
+        bottom: 50%;
+        left: 50%;
+        transform-origin: bottom;
+        transition: transform 0.5s ease-in-out;
+        border-radius: 2px;
+    }
+    .hand.xeno {
+        width: 4px;
+        height: 40%;
+        background: #00ffff;
+        box-shadow: 0 0 6px #00ffff;
+    }
+    .hand.quantic {
+        width: 3px;
+        height: 35%;
+        background: #ff00ff;
+        box-shadow: 0 0 6px #ff00ff;
+    }
+    .hand.chronon {
+        width: 2px;
+        height: 30%;
+        background: #ffff00;
+        box-shadow: 0 0 6px #ffff00;
     }
-    .hand.xeno { width:4px; height:40%; background:#00ffff; }
-    .hand.quantic { width:3px; height:35%; background:#ff00ff; }
-    .hand.chronon { width:2px; height:30%; background:#ffff00; }
   </style>
 </head>
 <body>
