From 6fb1b51b5c54a62871dff16621356ca7786030ee Mon Sep 17 00:00:00 2001 From: "cubic-dev-ai[bot]" <1082092+cubic-dev-ai[bot]@users.noreply.github.com> Date: Fri, 19 Dec 2025 04:39:59 +0000 Subject: [PATCH] Replace Tailwind Play CDN in static example with production-safe CSS (merges into #8) --- examples/src/static/index.html | 33 ++++++++++---------- examples/src/static/styles.css | 57 ++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 17 deletions(-) diff --git a/examples/src/static/index.html b/examples/src/static/index.html index 45d0f90360f..a61aa4fba24 100644 --- a/examples/src/static/index.html +++ b/examples/src/static/index.html @@ -8,30 +8,29 @@ -
- + -
-

World Clocks

-
-
-
New York
-
--:--:--
+
+

World Clocks

+
+
+
New York
+
--:--:--
-
-
London
-
--:--:--
+
+
London
+
--:--:--
-
-
Tokyo
-
--:--:--
+
+
Tokyo
+
--:--:--
-
-
Local Time
-
--:--:--
+
+
Local Time
+
--:--:--
diff --git a/examples/src/static/styles.css b/examples/src/static/styles.css index 2304318ef5d..a1995854239 100644 --- a/examples/src/static/styles.css +++ b/examples/src/static/styles.css @@ -775,3 +775,60 @@ body { .pcui-slider > .pcui-numeric-input { flex: 1.5 !important; } + +/* World Clocks Widget */ +#world-clocks { + position: fixed; + bottom: 1rem; + right: 1rem; + background-color: rgba(17, 24, 39, 0.9); + border-radius: 0.5rem; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + padding: 1.5rem; + backdrop-filter: blur(4px); + border: 1px solid #374151; +} + +#world-clocks h2 { + font-size: 1.5rem; + font-weight: 700; + color: #fff; + margin: 0 0 1rem 0; + text-align: center; + border-bottom: 1px solid #374151; + padding-bottom: 0.5rem; +} + +.clocks-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.clock-item { + background-color: #1f2937; + border-radius: 0.5rem; + padding: 1rem; + text-align: center; + transition: background-color 0.15s ease-in-out; +} + +.clock-item:hover { + background-color: #374151; +} + +.clock-item .clock-label { + font-size: 0.875rem; + color: #9ca3af; + margin-bottom: 0.25rem; +} + +.clock-item .clock-time { + font-size: 1.25rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; +} + +.clock-time.blue { color: #60a5fa; } +.clock-time.green { color: #34d399; } +.clock-time.purple { color: #a78bfa; } +.clock-time.orange { color: #fb923c; }