Using image as clock background

hoel · Oct 23, 2025 · 7b25ca1 · 7b25ca1
1 parent c1b05f0
commit 7b25ca1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 34 deletions.
diff --git a/clock-face.png b/clock-face.png
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
             color: white;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
             margin-bottom: 20px;
-            font-family: 'Courier New', monospace;
+            font-family: 'Droid Sans Mono', 'Courier New', 'Consolas', 'Monaco', 'Courier', monospace;
         }
 
         .date {
@@ -81,16 +81,29 @@
                 0 0 0 4px #e8e8e8,
                 0 0 0 8px #a8a8a8,
                 0 0 15px rgba(255, 255, 255, 0.8);
+            overflow: visible;
+        }
+
+        .clock-face::after {
+            content: '';
+            position: absolute;
+            top: -30px;
+            left: -30px;
+            right: -30px;
+            bottom: -30px;
+            background: url('clock-face.png') center center / cover no-repeat;
+            border-radius: 50%;
+            z-index: 1;
         }
 
         /* Outer decorative ring */
         .clock-face::before {
             content: '';
             position: absolute;
-            top: -6px;
-            left: -6px;
-            right: -6px;
-            bottom: -6px;
+            top: -18px;
+            left: -18px;
+            right: -18px;
+            bottom: -18px;
             border-radius: 50%;
             background: conic-gradient(
                 from 0deg,
@@ -114,32 +127,12 @@
                 inset 0 0 10px rgba(255, 255, 255, 0.6);
         }
 
-        /* Inner decorative ring */
-        .clock-face::after {
-            content: '';
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            right: 15px;
-            bottom: 15px;
-            border-radius: 50%;
-            border: 2px solid transparent;
-            background: linear-gradient(45deg, #a8a8a8, #f0f0f0, #c0c0c0, #e8e8e8) border-box;
-            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-            -webkit-mask-composite: subtract;
-            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-            mask-composite: subtract;
-            opacity: 0.7;
-            box-shadow: 
-                0 0 8px rgba(255, 255, 255, 0.5),
-                inset 0 0 5px rgba(255, 255, 255, 0.3);
-        }
-
         .hour-markers {
             position: absolute;
             width: 100%;
             height: 100%;
             --marker-distance: -95px;
+            display: none;
         }
 
         .hour-marker {
@@ -177,14 +170,15 @@
             transform-origin: 50% 100%;
             border-radius: 3px;
             box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            z-index: 10;
         }
 
         .hour-hand {
             width: 8px;
-            height: 80px;
+            height: 95px;
             background: linear-gradient(to right, #1a0f08, #2c1810, #1a0f08);
             margin-left: -4px;
-            margin-top: -80px;
+            margin-top: -95px;
             z-index: 3;
             border-radius: 4px;
         }
@@ -204,10 +198,10 @@
 
         .minute-hand {
             width: 5px;
-            height: 110px;
+            height: 130px;
             background: linear-gradient(to right, #2c1810, #4a2c1a, #2c1810);
             margin-left: -2.5px;
-            margin-top: -110px;
+            margin-top: -130px;
             z-index: 2;
             border-radius: 3px;
         }
@@ -227,10 +221,10 @@
 
         .second-hand {
             width: 2px;
-            height: 120px;
+            height: 140px;
             background: linear-gradient(to bottom, #8b0000, #dc143c, #8b0000);
             margin-left: -1px;
-            margin-top: -120px;
+            margin-top: -140px;
             z-index: 4;
             border-radius: 1px;
         }
@@ -257,7 +251,7 @@
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            z-index: 5;
+            z-index: 15;
             border: 2px solid #888;
             box-shadow: 
                 0 0 8px rgba(255, 255, 255, 0.8),
@@ -274,6 +268,7 @@
             font-weight: bold;
             color: #2c1810;
             text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
+            display: none;
         }
 
         .roman-number {
@@ -308,7 +303,7 @@
             color: white;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
             margin-bottom: 15px;
-            font-family: 'Courier New', monospace;
+            font-family: 'Consolas', 'Monaco', 'Liberation Mono', 'Courier New', 'Courier', monospace;
             text-align: center;
             letter-spacing: 2px;
         }