clock widget

examples/app_hub/hub.css

@@ -8,6 +8,8 @@
   font-display: swap;
 }
 
+/* Clockopia kept for legacy only; hub clock uses DSEG14 (see .hub-clock-widget rules). */
+
 @font-face {
   font-family: "DSEG14 Classic";
   src: url("assets/fonts/DSEG14Classic-Regular.ttf") format("truetype");
@@ -339,7 +341,11 @@
   overflow: visible;
   background: rgba(18, 24, 34, 0.88);
   backdrop-filter: blur(1.5px);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.28s ease,
+    border-color 0.28s ease,
+    filter 0.22s ease;
   cursor: move;
   user-select: none;
   touch-action: none;
@@ -347,7 +353,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  font-family: "DSEG14 Classic", "Consolas", monospace;
+  font-family: "Clockopia", "Consolas", monospace;
 }
 
 .cw-clock-inner {
@@ -379,8 +385,23 @@
 
 .hub-clock-widget:hover {
   transform: scale(1.035);
-  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62), 0 0 26px rgba(155, 205, 255, 0.22);
+  border-color: rgba(165, 225, 255, 0.98);
-  filter: saturate(1.04);
+  box-shadow:
+    0 16px 42px rgba(0, 0, 0, 0.62),
+    0 0 0 1px rgba(140, 210, 255, 0.55),
+    0 0 22px rgba(120, 200, 255, 0.52),
+    0 0 44px rgba(90, 175, 255, 0.32),
+    inset 0 0 14px rgba(120, 200, 255, 0.07);
+  filter: saturate(1.06);
+}
+
+.hub-clock-widget.is-dragging {
+  opacity: 0.25;
+  transition: opacity 0.12s ease;
+}
+
+.hub-clock-widget.is-dragging:hover {
+  transform: none;
 }
 
 .cw-primary-block {
@@ -393,6 +414,14 @@
   background: transparent;
 }
 
+.cw-row-tz {
+  margin-top: 15px; /* 15dip between line 1 and line 2 */
+}
+
+.cw-row-date {
+  margin-top: 5px; /* 5dip between line 2 and line 3 */
+}
+
 .cw-row {
   width: 100%;
   min-height: 0;
@@ -569,7 +598,7 @@
   letter-spacing: 0.16em;
   font-weight: 400;
   text-transform: uppercase;
-  font-family: "DSEG14 Classic", "Consolas", monospace;
+  font-family: "Digital-7 Mono Italic", "Consolas", monospace;
 }
 
 .cw-line-date {
@@ -578,7 +607,7 @@
   letter-spacing: 0.12em;
   font-weight: 400;
   text-transform: uppercase;
-  font-family: "DSEG14 Classic", "Consolas", monospace;
+  font-family: "Digital-7 Mono Italic", "Consolas", monospace;
 }
 
 .cw-separator {
@@ -607,13 +636,12 @@
 .cw-world-cell {
   min-width: 0;
   width: 100%;
-  min-height: 178px;
+  min-height: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 5px;
+  padding: 16px 4px;
-  padding: 20px 4px;
   background: rgba(20, 28, 40, 0.62);
   border-left: 1px solid rgba(255, 255, 255, 0.22);
 }
@@ -622,88 +650,109 @@
   border-left: 0;
 }
 
+.cw-world-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
 .cw-world-label {
-  color: #a6b0c2;
+  color: #c5d0e2;
-  font-size: 9.5px;
+  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
   letter-spacing: 0.12em;
-  margin-top: 0;
+  font-weight: 400;
-  margin-bottom: 8px;
+  text-transform: uppercase;
-  font-family: "DSEG14 Classic", "Consolas", monospace;
+  margin: 0;
+  line-height: 1;
+  flex: 0 0 auto;
+  font-family: "Digital-7 Mono Italic", "Consolas", monospace;
 }
 
 .cw-dial {
-  width: 100%;
+  --cw-dial-size: 90px;
-  max-width: 70px;
+  --cw-roman-orbit: 28px;
-  aspect-ratio: 1;
+  width: var(--cw-dial-size);
-  height: auto;
+  max-width: var(--cw-dial-size);
-  margin-inline: auto;
+  height: var(--cw-dial-size);
+  flex: 0 0 auto;
+  margin: 0;
   border-radius: 50%;
   position: relative;
-  border: 2px solid rgba(239, 243, 252, 0.8);
+  border: none;
-  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 36%), #edf2fb;
+  background:
-  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.14), inset 6px 7px 9px rgba(255, 255, 255, 0.42);
+    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 36%),
+    #edf2fb;
+  box-shadow:
+    0 0 0 4px #b8c6d8,
+    0 0 0 5px rgba(244, 248, 253, 0.94),
+    0 0 0 6px #7f94aa,
+    0 2px 8px rgba(0, 0, 0, 0.38),
+    inset 0 1px 2px rgba(255, 255, 255, 0.55),
+    inset 0 -2px 4px rgba(70, 86, 108, 0.22),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.12),
+    inset 5px 6px 8px rgba(255, 255, 255, 0.38);
 }
 
 .cw-roman {
   position: absolute;
   left: 50%;
   top: 50%;
-  width: 15px;
+  width: 14px;
-  height: 15px;
+  height: 14px;
-  margin: -7.5px;
+  margin: -7px;
-  transform: rotate(calc(var(--i) * 30deg)) translateY(-30px) rotate(calc(var(--i) * -30deg));
+  transform: rotate(calc(var(--i) * 30deg)) translateY(calc(-1 * var(--cw-roman-orbit))) rotate(calc(var(--i) * -30deg));
-  font-family: "Times New Roman", serif;
+  font-family: "Clockopia", "Consolas", monospace;
   font-size: 9px;
   font-weight: 700;
   color: #223147;
   text-align: center;
+  line-height: 1;
 }
 
 .cw-roman-major {
-  font-size: 11.5px;
+  font-size: 11px;
   opacity: 1;
 }
 
 .cw-roman-minor {
-  font-size: 3.2px;
+  font-size: 3px;
   opacity: 0.25;
 }
 
-html[data-clock-font="dseg14-modern"] .hub-clock-widget,
+/* Mixed clock typography: line 1 DSEG14, lines 2–3 Digital-7, rest Clockopia */
-html[data-clock-font="dseg14-modern"] .cw-lcd-text {
+.hub-clock-widget .cw-line-time,
-  font-family: "DSEG14 Modern", "Consolas", monospace;
+.hub-clock-widget .cw-line-time .cw-lcd-text,
-}
+.hub-clock-widget .cw-time-main,
-
+.hub-clock-widget .cw-time-main .cw-lcd-text {
-html[data-clock-font="ds-digital"] .hub-clock-widget,
+  font-family: "DSEG14 Classic", "Consolas", monospace !important;
-html[data-clock-font="ds-digital"] .cw-lcd-text {
-  font-family: "DS-Digital", "Consolas", monospace;
-}
-
-html[data-clock-font="digital-7-mono-italic"] .hub-clock-widget,
-html[data-clock-font="digital-7-mono-italic"] .cw-lcd-text {
-  font-family: "Digital-7 Mono Italic", "Consolas", monospace;
-}
-
-.cw-lcd-text {
-  font-family: "DSEG14 Classic", "Consolas", monospace;
   font-variant-numeric: tabular-nums;
 }
 
+.hub-clock-widget .cw-line-region,
+.hub-clock-widget .cw-line-region.cw-lcd-text,
+.hub-clock-widget .cw-line-date,
+.hub-clock-widget .cw-line-date.cw-lcd-text,
+.hub-clock-widget .cw-world-label {
+  font-family: "Digital-7 Mono Italic", "Consolas", monospace !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.hub-clock-widget .cw-world-section,
+.hub-clock-widget .cw-roman {
+  font-family: "Clockopia", "Consolas", monospace !important;
+}
+
 .cw-resize-handle {
-  position: absolute;
+  display: none !important;
-  width: 50px;
+  background: none !important;
-  height: 50px;
+  border: 0 !important;
-  min-width: 50px;
+  box-shadow: none !important;
-  min-height: 50px;
+}
-  z-index: 6;
+
-  display: flex;
+.hub-clock-widget:hover .cw-resize-handle {
-  align-items: center;
+  display: flex !important;
-  justify-content: center;
+  background: transparent !important;
-  color: rgba(220, 236, 255, 0.9);
-  filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.35));
-  pointer-events: auto;
-  background: transparent;
-  box-sizing: border-box;
 }
 
 .cw-resize-handle-visual {

examples/app_hub/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-clock-font="dseg14-classic">
+<html lang="en" data-theme="dark" data-clock-font="mixed">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,7 +11,7 @@
     })();
   </script>
   <link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
-  <link rel="stylesheet" href="hub.css?v=20260530k">
+  <link rel="stylesheet" href="hub.css?v=20260530t">
   <link rel="stylesheet" href="hub-logo-layers.css">
   <script src="assets/analytics.config.js"></script>
   <script src="/app/androidcast_project/crashes/assets/js/analytics.js" defer></script>
@@ -158,7 +158,7 @@
       var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover'));
       var logoEnabled = !!(stage && supportsSvg && supportsLayout);
 
-      var logoBuild = '20260530k';
+      var logoBuild = '20260530t';
 
       function hubAsset(rel) {
         var link = document.querySelector('link[href*="hub.css"]');
@@ -193,8 +193,8 @@
       };
 
       var clockFontParams = new URLSearchParams(window.location.search);
-      var clockFontKey = (clockFontParams.get('clockFont') || 'dseg14-classic').toLowerCase();
+      var clockFontKey = (clockFontParams.get('clockFont') || 'digital-7-mono-italic').toLowerCase();
-      if (!LCD_FONT_CATALOG[clockFontKey]) clockFontKey = 'dseg14-classic';
+      if (!LCD_FONT_CATALOG[clockFontKey]) clockFontKey = 'digital-7-mono-italic';
       var lcdFontReady = false;
       var lcdSymbolIds = {};
       var lcdFontPrefix = LCD_FONT_CATALOG[clockFontKey].prefix;
@@ -550,10 +550,13 @@
       function buildWorldClock(tz) {
         var cell = document.createElement('div');
         cell.className = 'cw-cell cw-world-cell';
+        var stack = document.createElement('div');
+        stack.className = 'cw-world-stack';
+
         var label = document.createElement('div');
         label.className = 'cw-world-label';
         label.textContent = cityLabels[tz] || tz.toUpperCase();
-        cell.appendChild(label);
+        stack.appendChild(label);
 
         var dial = document.createElement('div');
         dial.className = 'cw-dial';
@@ -579,7 +582,8 @@
         dial.appendChild(minute);
         dial.appendChild(second);
         dial.appendChild(pin);
-        cell.appendChild(dial);
+        stack.appendChild(dial);
+        cell.appendChild(stack);
 
         return { tz: tz, hour: hour, minute: minute, second: second, root: cell };
       }
@@ -664,7 +668,7 @@
               if (sym.id) lcdSymbolIds[sym.id] = sym;
             });
             lcdFontReady = Object.keys(lcdSymbolIds).length > 0;
-            document.documentElement.setAttribute('data-clock-font', clockFontKey);
+            document.documentElement.setAttribute('data-clock-font', 'mixed');
             var widget = document.getElementById('hub-clock-widget');
             if (widget) widget.setAttribute('data-lcd-mode', lcdFontReady ? 'svg' : 'text');
             done(lcdFontReady);
@@ -687,51 +691,9 @@
       function renderLcdText(el, text, opts) {
         opts = opts || {};
         if (!el) return;
-        el.innerHTML = '';
+        el.textContent = text;
         el.classList.add('cw-lcd-text');
-        var fontCss = LCD_FONT_CATALOG[clockFontKey].css;
+        if (opts.blinkColon) el.classList.add('ot-colon-blink');
-        if (!lcdFontReady) {
-          el.textContent = text;
-          el.style.fontFamily = fontCss;
-          return;
-        }
-        var renderedSvg = false;
-        String(text).split('').forEach(function (ch) {
-          var up = ch.toUpperCase();
-          var sid = lcdSymbolId(up === ch ? ch : up);
-          if (!sid || !lcdSymbolIds[sid]) {
-            var fb = document.createElement('span');
-            fb.className = 'ot-fallback-char' + (opts.bold ? ' ot-fallback-char--bold' : '');
-            fb.style.fontFamily = fontCss;
-            fb.textContent = ch === ' ' ? '\u00A0' : ch;
-            el.appendChild(fb);
-            return;
-          }
-          var sym = lcdSymbolIds[sid];
-          if (!sym.childNodes.length) {
-            var emptyFb = document.createElement('span');
-            emptyFb.className = 'ot-fallback-char';
-            emptyFb.style.fontFamily = fontCss;
-            emptyFb.textContent = ch === ' ' ? '\u00A0' : ch;
-            el.appendChild(emptyFb);
-            return;
-          }
-          renderedSvg = true;
-          var wrap = document.createElement('span');
-          wrap.className = 'ot-glyph-wrap' + (opts.bold ? ' ot-glyph-wrap--bold' : '');
-          if (opts.blinkColon && ch === ':') wrap.className += ' ot-colon-blink';
-          var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          svg.setAttribute('viewBox', sym.getAttribute('viewBox') || '0 0 20 32');
-          svg.setAttribute('class', 'ot-glyph');
-          svg.setAttribute('aria-hidden', 'true');
-          cloneLcdSymbolContent(svg, sym);
-          wrap.appendChild(svg);
-          el.appendChild(wrap);
-        });
-        if (!renderedSvg) {
-          el.textContent = text;
-          el.style.fontFamily = fontCss;
-        }
       }
 
       function loadQuartzAlphabet(done) {
@@ -990,28 +952,15 @@
         });
       }
 
+      loadLcdAlphabet(function () {
+        updateClockWidget();
+        setInterval(updateClockWidget, 1000);
+      });
+
+      /* Resize handles: hidden by default (CSS). Skip red debug boxes entirely. */
       (function makeClockWidgetInteractive() {
         var widget = document.getElementById('hub-clock-widget');
         if (!widget) return;
-        var arrowPath = 'M44.106,42.943H3.987L44.933,1.995c0.456-0.455,0.456-1.196,0-1.651c-0.452-0.455-1.195-0.455-1.651,0L2.336,41.292V1.168C2.336,0.524,1.81,0,1.168,0C0.523,0,0,0.524,0,1.168v44.111h44.111c0.644,0,1.168-0.522,1.168-1.168C45.279,43.469,44.755,42.943,44.106,42.943z';
-        var handles = ['nw', 'ne', 'sw', 'se'];
-        handles.forEach(function (pos) {
-          var h = document.createElement('span');
-          h.className = 'cw-resize-handle cw-resize-' + pos;
-          h.dataset.resize = pos;
-          h.setAttribute('aria-hidden', 'true');
-          var visual = document.createElement('span');
-          visual.className = 'cw-resize-handle-visual';
-          var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          svg.setAttribute('viewBox', '0 0 45.279 45.279');
-          var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          path.setAttribute('d', arrowPath);
-          svg.appendChild(path);
-          visual.appendChild(svg);
-          h.appendChild(visual);
-          widget.appendChild(h);
-        });
-
         var drag = null;
         widget.addEventListener('pointerdown', function (ev) {
           var target = ev.target;
@@ -1030,6 +979,7 @@
             drag = { mode: 'move', dx: ev.clientX - box.left, dy: ev.clientY - box.top };
           }
           widget.setPointerCapture(ev.pointerId);
+          widget.classList.add('is-dragging');
           ev.preventDefault();
         });
 
@@ -1061,16 +1011,16 @@
           }
         });
 
-        widget.addEventListener('pointerup', function (ev) {
+        function endDrag(ev) {
           if (!drag) return;
           drag = null;
+          widget.classList.remove('is-dragging');
           widget.releasePointerCapture(ev.pointerId);
-        });
+        }
+
+        widget.addEventListener('pointerup', endDrag);
+        widget.addEventListener('pointercancel', endDrag);
       })();
-      loadLcdAlphabet(function () {
-        updateClockWidget();
-        setInterval(updateClockWidget, 1000);
-      });
     })();
   </script>
 </body>