diff options
| -rw-r--r-- | CoolMan - WhoIsUsingThisComputer_.mp3 | bin | 0 -> 2121186 bytes | |||
| -rw-r--r-- | aero.css | 869 | ||||
| -rw-r--r-- | aero.js | 60 | ||||
| -rwxr-xr-x | enter.html | 8 | ||||
| -rw-r--r-- | img/wallpaper-chrome.png | bin | 0 -> 4134174 bytes | |||
| -rwxr-xr-x | index.html | 37 | ||||
| -rw-r--r-- | test.txt | 0 |
7 files changed, 962 insertions, 12 deletions
diff --git a/CoolMan - WhoIsUsingThisComputer_.mp3 b/CoolMan - WhoIsUsingThisComputer_.mp3 Binary files differnew file mode 100644 index 0000000..577c80d --- /dev/null +++ b/CoolMan - WhoIsUsingThisComputer_.mp3 @@ -1,5 +1,19 @@ -/* Frutiger Aero shared stylesheet */ +/* Frutiger Aero shared stylesheet + Y2K Chrome theme override */ * { box-sizing: border-box; } + +/* smooth crossfade when switching themes */ +body, .desk, .win, .glass, .glass::before, .aqua, .titlebar, .icon .glyph, .icon .label, +.taskbar, .start, .photo, .aero-link, .counter, .gate, .enter, .mark, .badge, .bubble, +.theme-switcher, .theme-switcher button { + transition: + background 450ms ease, + background-color 450ms ease, + border-color 450ms ease, + box-shadow 450ms ease, + color 450ms ease, + text-shadow 450ms ease, + filter 450ms ease; +} html, body { margin: 0; padding: 0; font-family: "Segoe UI", Tahoma, "Trebuchet MS", sans-serif; @@ -37,7 +51,7 @@ html, body { .clouds { position: absolute; inset: 0; pointer-events: none; } /* BUBBLES */ -.bubble-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } +.bubble-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .bubble { position: absolute; bottom: -120px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.3) 18%, rgba(200,230,255,0.12) 55%, rgba(120,180,255,0.06) 100%); @@ -143,6 +157,52 @@ html, body { } .aero-link:hover { color: oklch(60% 0.17 40); border-bottom-color: oklch(60% 0.17 40); } +/* ================================================================ + THEME SWITCHER (shared widget — themes restyle it below) + ================================================================ */ +.theme-switcher { + position: fixed; top: 16px; right: 16px; z-index: 5000; + display: inline-flex; align-items: center; gap: 2px; + padding: 4px; + border-radius: 999px; + background: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(210,232,250,0.45)); + backdrop-filter: blur(16px) saturate(170%); + -webkit-backdrop-filter: blur(16px) saturate(170%); + border: 1px solid rgba(255,255,255,0.85); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.95), + inset 0 -1px 0 rgba(120,160,200,0.25), + 0 8px 24px rgba(40,80,140,0.28); + font-family: "Segoe UI", Tahoma, sans-serif; +} +.theme-switcher button { + border: 0; background: transparent; + padding: 6px 14px; border-radius: 999px; + font: 600 11px/1 "Segoe UI", Tahoma, sans-serif; + text-transform: lowercase; letter-spacing: 0.6px; + color: oklch(28% 0.06 240); + cursor: pointer; + white-space: nowrap; +} +.theme-switcher button:hover { color: oklch(45% 0.16 230); } +.theme-switcher button.active { + background: linear-gradient(to bottom, + oklch(95% 0.10 145) 0%, oklch(75% 0.18 145) 48%, + oklch(50% 0.16 150) 52%, oklch(70% 0.18 145) 100%); + color: white; + text-shadow: 0 1px 1px rgba(0,0,0,0.35); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(60,140,100,0.4); +} +.theme-switcher .ts-dot { + width: 10px; height: 10px; border-radius: 50%; display: inline-block; + margin-right: 6px; vertical-align: -1px; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 1px rgba(0,0,0,0.2); +} +.theme-switcher .ts-dot.aero { background: radial-gradient(circle at 30% 30%, oklch(94% 0.10 145), oklch(55% 0.16 150)); } +.theme-switcher .ts-dot.chrome { background: + conic-gradient(from 30deg, oklch(85% 0.13 30), oklch(85% 0.14 85), oklch(85% 0.14 150), + oklch(85% 0.14 200), oklch(85% 0.16 295), oklch(85% 0.13 350), oklch(85% 0.13 30)); } + /* COUNTER */ .counter { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; @@ -164,3 +224,808 @@ html, body { font-size: 9px; color: rgba(255,255,255,0.85); letter-spacing: 2px; text-transform: uppercase; font-family: "Segoe UI", Tahoma, sans-serif; } + +/* ================================================================ + THEME: Y2K CHROME (1999-2002 — liquid silver, holographic rims, + navy starfield, iridescent everything) + ================================================================ */ +body[data-theme="chrome"] { + /* redefine root vars used by inline styles in desktop.html */ + --sky: + linear-gradient(180deg, oklch(14% 0.04 250 / 0.35), oklch(8% 0.03 250 / 0.55)), + url("img/wallpaper-chrome.png") center / cover no-repeat, + linear-gradient(180deg, oklch(13% 0.05 250) 0%, oklch(7% 0.03 250) 100%); + --title-bar: linear-gradient(180deg, + oklch(94% 0.01 240) 0%, + oklch(75% 0.02 240) 45%, + oklch(55% 0.02 250) 50%, + oklch(72% 0.02 240) 55%, + oklch(88% 0.01 240) 100%); + --start-btn: linear-gradient(180deg, + oklch(92% 0.06 290) 0%, oklch(65% 0.16 290) 48%, + oklch(35% 0.16 290) 52%, oklch(72% 0.14 290) 100%); + --start-border: oklch(25% 0.10 290); + --icon-blue: linear-gradient(180deg, oklch(96% 0.02 240), oklch(72% 0.04 240) 45%, oklch(32% 0.06 250) 55%, oklch(82% 0.02 240)); + --icon-orange: linear-gradient(180deg, oklch(96% 0.02 240), oklch(72% 0.04 280) 45%, oklch(32% 0.06 290) 55%, oklch(82% 0.02 240)); + --icon-green: linear-gradient(180deg, oklch(96% 0.02 240), oklch(72% 0.04 200) 45%, oklch(32% 0.06 220) 55%, oklch(82% 0.02 240)); + --icon-pink: linear-gradient(180deg, oklch(96% 0.02 240), oklch(72% 0.04 320) 45%, oklch(32% 0.06 330) 55%, oklch(82% 0.02 240)); + --icon-silver: linear-gradient(180deg, oklch(96% 0.02 240), oklch(72% 0.02 250) 45%, oklch(32% 0.04 260) 55%, oklch(82% 0.02 240)); + background: + linear-gradient(180deg, oklch(14% 0.04 250 / 0.35), oklch(8% 0.03 250 / 0.55)), + url("img/wallpaper-chrome.png") center / cover no-repeat, + linear-gradient(180deg, oklch(13% 0.05 250) 0%, oklch(7% 0.03 250) 100%) !important; + background-attachment: fixed !important; + color: oklch(15% 0.02 250); +} +body[data-theme="chrome"] .desk { + background: + linear-gradient(180deg, oklch(14% 0.04 250 / 0.35), oklch(8% 0.03 250 / 0.55)), + url("img/wallpaper-chrome.png") center / cover no-repeat, + linear-gradient(180deg, oklch(13% 0.05 250) 0%, oklch(7% 0.03 250) 100%) !important; +} +body[data-theme="chrome"] .clouds, +body[data-theme="chrome"] .sun, +body[data-theme="chrome"] .lens-flare, +body[data-theme="chrome"] .bubble-field { display: none !important; } + +/* icons — chrome ball with iridescent halo */ +body[data-theme="chrome"] .icon .glyph { + background: linear-gradient(180deg, + oklch(96% 0.02 240) 0%, + oklch(75% 0.04 280) 42%, + oklch(30% 0.06 280) 52%, + oklch(70% 0.04 280) 72%, + oklch(88% 0.03 240) 100%) !important; + border: 1px solid oklch(45% 0.04 280); + box-shadow: + inset 0 2px 0 oklch(99% 0.01 240), + inset 0 -2px 4px oklch(15% 0.05 280), + 0 0 0 1px oklch(20% 0.05 280), + 0 4px 14px oklch(5% 0.04 280), + 0 0 12px oklch(60% 0.20 320 / 0.35) !important; + color: oklch(98% 0.02 320) !important; + text-shadow: + 0 1px 1px oklch(15% 0.05 280), + 0 0 6px oklch(80% 0.20 320), + 0 0 10px oklch(80% 0.20 200) !important; +} +body[data-theme="chrome"] .icon .glyph::before { + background: linear-gradient(180deg, + oklch(99% 0.01 240 / 0.95) 0%, + oklch(85% 0.10 200 / 0.45) 60%, + transparent 100%) !important; +} +body[data-theme="chrome"] .icon .label { + color: oklch(92% 0.02 240) !important; + text-shadow: 0 1px 2px oklch(5% 0.04 280), 0 0 6px oklch(50% 0.15 290 / 0.7) !important; + font-weight: 700; +} + +/* windows — brushed chrome panel */ +body[data-theme="chrome"] .glass { + background: + linear-gradient(180deg, + oklch(94% 0.01 240) 0%, + oklch(82% 0.01 240) 28%, + oklch(72% 0.02 240) 50%, + oklch(84% 0.01 240) 78%, + oklch(92% 0.01 240) 100%) !important; + border: 1px solid oklch(38% 0.03 250) !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0), + inset 0 -1px 0 oklch(45% 0.02 250), + inset 0 0 0 1px oklch(99% 0 0 / 0.35), + 0 14px 36px oklch(5% 0.03 270), + 0 0 0 1px oklch(20% 0.02 250) !important; + color: oklch(15% 0.02 250) !important; +} +/* iridescent rim overlay */ +body[data-theme="chrome"] .glass::before { + background: linear-gradient(180deg, + oklch(99% 0.01 240 / 0.85) 0%, + oklch(92% 0.06 200 / 0.5) 35%, + oklch(92% 0.06 320 / 0.25) 65%, + transparent 100%) !important; +} + +body[data-theme="chrome"] .titlebar { + background: linear-gradient(180deg, + oklch(94% 0.01 240) 0%, + oklch(75% 0.02 240) 45%, + oklch(55% 0.02 250) 50%, + oklch(72% 0.02 240) 55%, + oklch(88% 0.01 240) 100%) !important; + color: oklch(12% 0.02 250) !important; + text-shadow: 0 1px 0 oklch(99% 0 0 / 0.85) !important; + border-bottom: 1px solid oklch(35% 0.03 250) !important; +} +body[data-theme="chrome"] .titlebar .dot { + box-shadow: + inset 0 1px 0 oklch(99% 0 0 / 0.85), + inset 0 -1px 1px oklch(15% 0.04 250), + 0 0 0 1px oklch(35% 0.03 250) !important; +} + +/* aqua buttons → mercury chrome pills */ +body[data-theme="chrome"] .aqua, +body[data-theme="chrome"] .aqua.orange, +body[data-theme="chrome"] .aqua.green { + background: linear-gradient(180deg, + oklch(96% 0.01 240) 0%, + oklch(78% 0.02 240) 45%, + oklch(40% 0.03 250) 52%, + oklch(72% 0.02 240) 70%, + oklch(90% 0.01 240) 100%) !important; + border: 1px solid oklch(28% 0.03 250) !important; + color: oklch(98% 0 0) !important; + text-shadow: 0 1px 0 oklch(20% 0.04 250), 0 -1px 0 oklch(99% 0 0 / 0.5) !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0 / 0.9), + inset 0 -2px 4px oklch(20% 0.04 250), + 0 3px 12px oklch(5% 0.03 270) !important; +} +body[data-theme="chrome"] .aqua::before { + background: linear-gradient(180deg, oklch(99% 0 0 / 0.85), oklch(99% 0.05 200 / 0.15)) !important; +} + +/* taskbar */ +body[data-theme="chrome"] .taskbar { + background: linear-gradient(180deg, + oklch(88% 0.01 240) 0%, + oklch(60% 0.02 250) 50%, + oklch(75% 0.02 240) 100%) !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: 1px solid oklch(35% 0.03 250) !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0), + inset 0 -1px 0 oklch(40% 0.02 250), + 0 12px 36px oklch(5% 0.03 270) !important; +} +body[data-theme="chrome"] .tray { color: oklch(15% 0.02 250) !important; } +body[data-theme="chrome"] .clock { color: oklch(15% 0.02 250) !important; } +body[data-theme="chrome"] .taskbar .sep { + background: linear-gradient(to bottom, transparent, oklch(35% 0.03 250), transparent) !important; +} + +body[data-theme="chrome"] .start { + background: linear-gradient(180deg, + oklch(92% 0.06 290) 0%, + oklch(65% 0.16 290) 48%, + oklch(35% 0.16 290) 52%, + oklch(72% 0.14 290) 100%) !important; + border: 1px solid oklch(25% 0.10 290) !important; + color: oklch(99% 0.01 240) !important; + text-shadow: 0 1px 1px oklch(15% 0.10 290), 0 0 6px oklch(80% 0.20 320 / 0.6) !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0 / 0.9), + inset 0 -2px 4px oklch(20% 0.10 290), + 0 3px 12px oklch(5% 0.04 280) !important; +} + +/* music toggle */ +body[data-theme="chrome"] .music-toggle { + background: linear-gradient(180deg, oklch(94% 0.01 240), oklch(70% 0.02 240)) !important; + border: 1px solid oklch(38% 0.03 250) !important; + color: oklch(15% 0.02 250) !important; +} + +/* counter — chrome bezel */ +body[data-theme="chrome"] .counter { + background: linear-gradient(180deg, oklch(35% 0.04 250), oklch(20% 0.03 260)) !important; + border: 1px solid oklch(60% 0.04 250) !important; +} + +/* body text content */ +body[data-theme="chrome"] .win .body { color: oklch(15% 0.02 250) !important; } +body[data-theme="chrome"] .win .body a, +body[data-theme="chrome"] .aero-link { + color: oklch(40% 0.18 290) !important; + border-bottom-color: oklch(55% 0.18 290) !important; +} +body[data-theme="chrome"] .aero-link:hover { color: oklch(50% 0.20 320) !important; } +body[data-theme="chrome"] .photo { + background: linear-gradient(135deg, + oklch(85% 0.02 240) 0%, + oklch(55% 0.04 280) 45%, + oklch(80% 0.03 240) 100%) !important; + color: oklch(98% 0 0) !important; +} +body[data-theme="chrome"] .photo::before { + background: repeating-linear-gradient(45deg, + oklch(99% 0 0 / 0.12) 0 8px, transparent 8px 16px) !important; +} + +body[data-theme="chrome"] .srv-host { color: oklch(15% 0.02 250) !important; } +body[data-theme="chrome"] .srv-row { border-bottom-color: oklch(50% 0.03 250 / 0.5) !important; } +body[data-theme="chrome"] .film-row { border-bottom-color: oklch(50% 0.03 250 / 0.5) !important; } +body[data-theme="chrome"] .film-title { color: oklch(12% 0.02 250) !important; } + +/* counter digits keep their classic green LED — perfect Y2K touch */ + +/* scanline overlay across entire desk */ + +/* icons — dark HUD tile with neon outline */ + +/* windows — smoked glass with neon edge */ + +/* aqua buttons → neon HUD pills */ + +/* taskbar HUD */ + +/* music toggle */ + +/* counter — green LED on dark — feels right at home */ + +/* body text content — all bright/cyan/magenta */ + +/* photo placeholder → CRT readout */ + +/* servers + films + film posters */ + +/* form fields in guestbook */ + +/* ================================================================ + THEME SWITCHER per-theme restyle + ================================================================ */ +body[data-theme="chrome"] .theme-switcher { + background: linear-gradient(180deg, oklch(90% 0.01 240), oklch(62% 0.02 250), oklch(80% 0.01 240)) !important; + border: 1px solid oklch(35% 0.03 250); + backdrop-filter: none; + -webkit-backdrop-filter: none; + box-shadow: + inset 0 1px 0 oklch(99% 0 0), + inset 0 -1px 0 oklch(40% 0.02 250), + 0 8px 24px oklch(5% 0.03 270); +} +body[data-theme="chrome"] .theme-switcher button { color: oklch(15% 0.02 250); } +body[data-theme="chrome"] .theme-switcher button.active { + background: linear-gradient(180deg, oklch(92% 0.06 290), oklch(45% 0.16 290)); + color: oklch(99% 0 0); + text-shadow: 0 1px 1px oklch(15% 0.10 290); +} + +/* ================================================================ + WELCOME PAGE overrides + ================================================================ */ +/* CHROME welcome */ +body[data-theme="chrome"].welcome-body { /* set in welcome.html */ } +body[data-theme="chrome"] .gate { + background: + linear-gradient(180deg, oklch(94% 0.01 240) 0%, oklch(78% 0.02 240) 50%, oklch(90% 0.01 240) 100%) !important; + border: 1px solid oklch(35% 0.03 250) !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0), + inset 0 -1px 0 oklch(45% 0.02 250), + inset 0 0 0 1px oklch(99% 0 0 / 0.35), + 0 22px 60px oklch(5% 0.03 270) !important; +} +body[data-theme="chrome"] .gate::before { + background: linear-gradient(180deg, + oklch(99% 0.01 240 / 0.85) 0%, + oklch(92% 0.06 200 / 0.4) 40%, + transparent 100%) !important; +} +body[data-theme="chrome"] .mark { + background: + radial-gradient(circle at 30% 28%, oklch(99% 0.01 240) 0%, oklch(85% 0.05 290) 35%, oklch(40% 0.10 290) 100%) !important; + border: 1.5px solid oklch(99% 0 0 / 0.6) !important; + box-shadow: + inset -6px -8px 18px oklch(20% 0.08 280), + inset 4px 6px 12px oklch(99% 0 0 / 0.7), + 0 6px 22px oklch(50% 0.20 290 / 0.55), + 0 0 18px oklch(75% 0.20 320 / 0.4) !important; + color: oklch(99% 0 0) !important; + text-shadow: 0 1px 2px oklch(15% 0.10 290), 0 0 6px oklch(80% 0.20 320) !important; +} +body[data-theme="chrome"] .title { color: oklch(12% 0.02 250) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.7) !important; } +body[data-theme="chrome"] .title em { + background: linear-gradient(180deg, oklch(75% 0.18 290), oklch(45% 0.16 290) 50%, oklch(72% 0.14 320)); + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; + color: transparent !important; +} +body[data-theme="chrome"] .sub { color: oklch(20% 0.03 250) !important; } +body[data-theme="chrome"] .sub strong { color: oklch(35% 0.18 290) !important; } +body[data-theme="chrome"] .enter { + background: linear-gradient(180deg, + oklch(96% 0.02 240) 0%, + oklch(78% 0.02 240) 45%, + oklch(38% 0.04 250) 52%, + oklch(72% 0.02 240) 70%, + oklch(90% 0.01 240) 100%) !important; + border: 1.5px solid oklch(28% 0.03 250) !important; + color: oklch(98% 0 0) !important; + text-shadow: 0 1px 0 oklch(20% 0.04 250), 0 -1px 0 oklch(99% 0 0 / 0.5) !important; + box-shadow: + inset 0 2px 0 oklch(99% 0 0 / 0.9), + inset 0 -3px 6px oklch(20% 0.04 250), + 0 6px 22px oklch(5% 0.03 270), + 0 0 14px oklch(60% 0.20 320 / 0.4) !important; +} +body[data-theme="chrome"] .footer-note { color: oklch(90% 0.02 240) !important; text-shadow: 0 1px 2px oklch(5% 0.03 270) !important; } +body[data-theme="chrome"] .footer-note a { color: oklch(80% 0.18 290) !important; } +body[data-theme="chrome"] .meta { color: oklch(35% 0.03 250) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.5) !important; } +body[data-theme="chrome"] .badge { + background: linear-gradient(180deg, oklch(90% 0.01 240), oklch(58% 0.02 250)) !important; + border-color: oklch(30% 0.03 250) !important; + color: oklch(99% 0 0) !important; + text-shadow: 0 1px 1px oklch(15% 0.04 250) !important; +} +body[data-theme="chrome"] .badge.green { background: linear-gradient(180deg, oklch(85% 0.14 145), oklch(45% 0.12 150)) !important; } +body[data-theme="chrome"] .badge.silver { background: linear-gradient(180deg, oklch(94% 0.01 240), oklch(65% 0.02 250)) !important; color: oklch(15% 0.02 250) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.7) !important; } + +/* CHROME welcome body background */ +body[data-theme="chrome"].welcome-body { + background: + linear-gradient(180deg, oklch(14% 0.04 250 / 0.35), oklch(8% 0.03 250 / 0.55)), + url("img/wallpaper-chrome.png") center / cover no-repeat, + linear-gradient(180deg, oklch(13% 0.05 250) 0%, oklch(7% 0.03 250) 100%) !important; + background-attachment: fixed !important; +} + + +/* ================================================================ + Y2K CHROME — typography upgrade + extra polish + Audiowide (display) · Michroma (UI/labels) · Space Grotesk (body) · IBM Plex Mono (mono) + ================================================================ */ + +/* Window content reads as smooth modern sans */ +body[data-theme="chrome"] .win .body, +body[data-theme="chrome"] .win .body * { + font-family: "Space Grotesk", "Segoe UI", Tahoma, sans-serif; +} +/* Numeric/host bits stay mono */ +body[data-theme="chrome"] .srv-host, +body[data-theme="chrome"] .clock, +body[data-theme="chrome"] .film-year, +body[data-theme="chrome"] code, +body[data-theme="chrome"] .photo, +body[data-theme="chrome"] textarea { + font-family: "IBM Plex Mono", "Courier New", monospace !important; + letter-spacing: 0; +} + +/* Title bars → Michroma, narrow geometric, all-caps */ +body[data-theme="chrome"] .titlebar { + font-family: "Michroma", "Segoe UI", Tahoma, sans-serif !important; + font-size: 10px !important; + letter-spacing: 1.5px; + text-transform: uppercase; + font-weight: 400 !important; + position: relative; + height: 34px !important; +} +/* Iridescent seam under titlebar */ +body[data-theme="chrome"] .titlebar::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; + background: linear-gradient(90deg, + oklch(85% 0.18 30) 0%, + oklch(88% 0.14 80) 18%, + oklch(88% 0.16 150) 36%, + oklch(88% 0.14 200) 54%, + oklch(85% 0.18 295) 72%, + oklch(85% 0.18 350) 90%, + oklch(85% 0.18 30) 100%); + background-size: 200% 100%; + animation: chromeShimmer 8s linear infinite; + opacity: 0.85; + pointer-events: none; +} +@keyframes chromeShimmer { + 0% { background-position: 0% 0%; } + 100% { background-position: 200% 0%; } +} + +/* Icon labels → Michroma small caps */ +body[data-theme="chrome"] .icon .label { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1px; + text-transform: uppercase; + font-weight: 400; + line-height: 1.3; + margin-top: 4px; +} +/* Brighten icon halo + cleaner specular */ +body[data-theme="chrome"] .icon:hover .glyph { + filter: brightness(1.08); + box-shadow: + inset 0 2px 0 oklch(99% 0.01 240), + inset 0 -2px 4px oklch(15% 0.05 280), + 0 0 0 1px oklch(20% 0.05 280), + 0 4px 14px oklch(5% 0.04 280), + 0 0 18px oklch(65% 0.22 320 / 0.55) !important; +} + +/* Start button → Michroma */ +body[data-theme="chrome"] .start { + font-family: "Michroma", sans-serif !important; + font-size: 10px !important; + letter-spacing: 2px; + text-transform: uppercase; +} +body[data-theme="chrome"] .start span:first-child { font-size: 14px !important; letter-spacing: 0; } + +/* Music toggle */ +body[data-theme="chrome"] .music-toggle { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1px; + text-transform: uppercase; +} + +/* Tray text */ +body[data-theme="chrome"] .tray { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1px; + text-transform: uppercase; +} + +/* Aqua buttons → Michroma */ +body[data-theme="chrome"] .aqua, +body[data-theme="chrome"] .aqua.sm, +body[data-theme="chrome"] .aqua.lg { + font-family: "Michroma", sans-serif !important; + letter-spacing: 1.5px; + text-transform: uppercase; + font-size: 10px !important; +} +body[data-theme="chrome"] .aqua.sm { font-size: 9px !important; padding: 7px 14px !important; } + +/* Theme switcher pills */ +body[data-theme="chrome"] .theme-switcher button { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1.5px; + text-transform: uppercase; + padding: 7px 16px !important; +} + +/* Body content headings get more presence */ +body[data-theme="chrome"] .win .body > div[style*="font-size: 22px"], +body[data-theme="chrome"] .win .body > div > div[style*="font-size: 22px"] { + font-family: "Audiowide", "Space Grotesk", sans-serif !important; + letter-spacing: -0.5px; + text-shadow: 0 1px 0 oklch(99% 0 0 / 0.7) !important; +} + +/* Servers list — terminal vibe */ +body[data-theme="chrome"] .srv-row { font-family: "IBM Plex Mono", monospace; } +body[data-theme="chrome"] .srv-meta { font-family: "Space Grotesk", sans-serif !important; font-size: 9px !important; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; } + +/* Film titles get display font, year stays mono */ +body[data-theme="chrome"] .film-title { + font-family: "Audiowide", "Space Grotesk", sans-serif !important; + font-weight: 400 !important; + font-size: 12px !important; + letter-spacing: 0; +} + +/* Counter label */ +body[data-theme="chrome"] .counter .label { + font-family: "Michroma", sans-serif !important; + letter-spacing: 1.5px; + font-size: 8px !important; +} +body[data-theme="chrome"] .counter .d { + font-family: "IBM Plex Mono", "Courier New", monospace !important; +} + +/* Subtle horizontal banding on the chrome glass — looks like rolled steel */ +body[data-theme="chrome"] .glass { + background-image: + repeating-linear-gradient(0deg, + oklch(99% 0 0 / 0.04) 0px, oklch(99% 0 0 / 0.04) 1px, + transparent 1px, transparent 3px), + linear-gradient(180deg, + oklch(94% 0.01 240) 0%, + oklch(82% 0.01 240) 28%, + oklch(72% 0.02 240) 50%, + oklch(84% 0.01 240) 78%, + oklch(92% 0.01 240) 100%) !important; +} + +/* ================================================================ + WELCOME page — push the chrome treatment harder + ================================================================ */ +body[data-theme="chrome"] .title { + font-family: "Audiowide", sans-serif !important; + font-weight: 400 !important; + font-size: 78px !important; + letter-spacing: -2px !important; + line-height: 0.95; + color: oklch(12% 0.02 250) !important; + background: linear-gradient(180deg, + oklch(96% 0.01 240) 0%, + oklch(85% 0.01 240) 35%, + oklch(35% 0.02 250) 50%, + oklch(78% 0.02 240) 65%, + oklch(94% 0.01 240) 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-text-fill-color: transparent !important; + color: transparent !important; + text-shadow: none !important; + filter: drop-shadow(0 2px 0 oklch(99% 0 0 / 0.5)) drop-shadow(0 4px 12px oklch(5% 0.03 270 / 0.6)); +} +body[data-theme="chrome"] .title em { + font-family: "Audiowide", sans-serif !important; + font-style: italic; + background: linear-gradient(135deg, + oklch(85% 0.18 30) 0%, + oklch(88% 0.14 80) 20%, + oklch(88% 0.16 150) 40%, + oklch(85% 0.18 200) 60%, + oklch(85% 0.18 295) 80%, + oklch(85% 0.18 350) 100%) !important; + background-size: 200% 200% !important; + -webkit-background-clip: text !important; + background-clip: text !important; + -webkit-text-fill-color: transparent !important; + color: transparent !important; + animation: chromeShimmer 6s linear infinite; +} +body[data-theme="chrome"] .sub { + font-family: "Space Grotesk", sans-serif !important; + font-size: 13px !important; +} +body[data-theme="chrome"] .enter { + font-family: "Michroma", sans-serif !important; + font-size: 16px !important; + letter-spacing: 4px !important; + text-transform: uppercase; +} +body[data-theme="chrome"] .meta { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 2px; +} +body[data-theme="chrome"] .footer-note { + font-family: "IBM Plex Mono", monospace !important; + font-size: 10px !important; + letter-spacing: 0.5px; +} +body[data-theme="chrome"] .badge { + font-family: "Michroma", sans-serif !important; + font-size: 8px !important; + letter-spacing: 1.5px; +} + +/* Holographic shimmer sweep across the welcome glass */ +body[data-theme="chrome"] .gate { + position: relative; + overflow: hidden; +} +body[data-theme="chrome"] .gate::after { + content: ""; + position: absolute; inset: 0; + background: linear-gradient(115deg, + transparent 30%, + oklch(99% 0.05 200 / 0.18) 45%, + oklch(85% 0.16 320 / 0.12) 50%, + oklch(99% 0.05 200 / 0.18) 55%, + transparent 70%); + background-size: 250% 100%; + animation: chromeSweep 7s ease-in-out infinite; + pointer-events: none; + mix-blend-mode: screen; + border-radius: inherit; +} +@keyframes chromeSweep { + 0%, 100% { background-position: 200% 0%; } + 50% { background-position: -50% 0%; } +} + +/* Welcome mark — chrome orb gets a holographic ring */ +body[data-theme="chrome"] .mark { + position: relative; +} +body[data-theme="chrome"] .mark::after { + content: ""; + position: absolute; inset: -5px; + border-radius: 50%; + background: conic-gradient(from 0deg, + oklch(85% 0.18 30), + oklch(88% 0.14 80), + oklch(88% 0.16 150), + oklch(85% 0.18 200), + oklch(85% 0.18 295), + oklch(85% 0.18 350), + oklch(85% 0.18 30)); + mask: radial-gradient(circle, transparent 56%, black 58%, black 64%, transparent 66%); + -webkit-mask: radial-gradient(circle, transparent 56%, black 58%, black 64%, transparent 66%); + animation: spin 12s linear infinite; + pointer-events: none; + opacity: 0.9; +} +@keyframes spin { to { transform: rotate(360deg); } } + + +/* ================================================================ + AERO — typography upgrade (Plus Jakarta Sans — closest free Frutiger) + ================================================================ */ + +/* Base font for the aero theme (default) */ +body[data-theme="aero"], +body[data-theme="aero"] .win .body, +body[data-theme="aero"] .win .body * { + font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, "Trebuchet MS", sans-serif; + font-feature-settings: "ss01", "cv11"; +} + +/* Mono bits in aero — consistent with chrome */ +body[data-theme="aero"] .srv-host, +body[data-theme="aero"] .clock, +body[data-theme="aero"] .film-year, +body[data-theme="aero"] code, +body[data-theme="aero"] .photo, +body[data-theme="aero"] textarea { + font-family: "IBM Plex Mono", "Courier New", monospace !important; + letter-spacing: 0; +} + +/* Title bars — slightly tightened Jakarta */ +body[data-theme="aero"] .titlebar { + font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif !important; + font-weight: 700 !important; + font-size: 12px !important; + letter-spacing: 0.2px; +} + +/* Icon labels — refined */ +body[data-theme="aero"] .icon .label { + font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif !important; + font-weight: 600 !important; + font-size: 12px !important; + letter-spacing: 0.1px; +} + +/* Start, tray, music toggle */ +body[data-theme="aero"] .start { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 800 !important; + font-size: 13px !important; + letter-spacing: 0.3px; + text-transform: none; +} +body[data-theme="aero"] .tray { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 500 !important; + font-size: 12px !important; + letter-spacing: 0; + text-transform: none; +} +body[data-theme="aero"] .music-toggle { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 500 !important; + font-size: 12px !important; + letter-spacing: 0; + text-transform: none; +} + +/* Aqua buttons */ +body[data-theme="aero"] .aqua, +body[data-theme="aero"] .aqua.sm, +body[data-theme="aero"] .aqua.lg { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 700 !important; + letter-spacing: 0.2px; + text-transform: none; +} + +/* Theme switcher pills */ +body[data-theme="aero"] .theme-switcher button { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 700 !important; + font-size: 12px !important; + letter-spacing: 0.3px; + text-transform: lowercase; +} + +/* Servers list */ +body[data-theme="aero"] .srv-row { font-family: "IBM Plex Mono", monospace; } +body[data-theme="aero"] .srv-meta { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 500 !important; + font-size: 10px !important; + letter-spacing: 0.4px; + text-transform: uppercase; + opacity: 0.7; +} + +/* Film titles */ +body[data-theme="aero"] .film-title { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 800 !important; + letter-spacing: -0.2px; +} + +/* Counter label */ +body[data-theme="aero"] .counter .label { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 700 !important; + letter-spacing: 1.5px; + font-size: 9px !important; + text-transform: uppercase; +} +body[data-theme="aero"] .counter .d { + font-family: "IBM Plex Mono", "Courier New", monospace !important; +} + +/* ================================================================ + WELCOME — aero + ================================================================ */ +body[data-theme="aero"] .title { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 200 !important; + font-size: 72px !important; + letter-spacing: -2.5px !important; + line-height: 1; +} +body[data-theme="aero"] .title em { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 300 !important; + font-style: italic; + letter-spacing: -2px; +} +body[data-theme="aero"] .sub { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 400 !important; + font-size: 14px !important; + letter-spacing: 0; + line-height: 1.6; +} +body[data-theme="aero"] .sub strong { + font-weight: 700 !important; +} +body[data-theme="aero"] .enter { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 700 !important; + font-size: 22px !important; + letter-spacing: 0.3px !important; + text-transform: lowercase; +} +body[data-theme="aero"] .meta { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 600 !important; + font-size: 10px !important; + letter-spacing: 1.8px; + text-transform: uppercase; +} +body[data-theme="aero"] .footer-note { + font-family: "IBM Plex Mono", monospace !important; + font-size: 11px !important; + letter-spacing: 0.3px; +} +body[data-theme="aero"] .badge { + font-family: "Plus Jakarta Sans", sans-serif !important; + font-weight: 700 !important; + font-size: 9px !important; + letter-spacing: 1.2px; + text-transform: uppercase; +} + + +/* ================================================================ + CURSOR — chrome theme gets a silver Y2K bead instead of the + aero water-droplet. Sparkle trail stays. + ================================================================ */ +body[data-theme="chrome"], +body[data-theme="chrome"] * { + cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f4f6ff'/><stop offset='0.45' stop-color='%23808aa8'/><stop offset='0.55' stop-color='%232f3450'/><stop offset='1' stop-color='%23dbe2f0'/></linearGradient></defs><circle cx='11' cy='11' r='10' fill='none' stroke='%23c6a8ec' stroke-width='1' opacity='0.75'/><circle cx='11' cy='11' r='8' fill='url(%23c)' stroke='%23181a30' stroke-width='0.7'/><ellipse cx='8.6' cy='7.4' rx='2.8' ry='1.8' fill='white' opacity='0.9'/><circle cx='11' cy='11' r='1' fill='%23f8e6ff' opacity='0.9'/></svg>") 11 11, auto; +} +/* hover/pointer state inside chrome — same bead, no change needed */ +body[data-theme="chrome"] a, +body[data-theme="chrome"] button, +body[data-theme="chrome"] .icon, +body[data-theme="chrome"] .aqua, +body[data-theme="chrome"] .enter, +body[data-theme="chrome"] .start { + cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f4f6ff'/><stop offset='0.45' stop-color='%23808aa8'/><stop offset='0.55' stop-color='%232f3450'/><stop offset='1' stop-color='%23dbe2f0'/></linearGradient></defs><circle cx='11' cy='11' r='10' fill='none' stroke='%23c6a8ec' stroke-width='1' opacity='0.9'/><circle cx='11' cy='11' r='8' fill='url(%23c)' stroke='%23181a30' stroke-width='0.7'/><ellipse cx='8.6' cy='7.4' rx='2.8' ry='1.8' fill='white' opacity='0.95'/><circle cx='11' cy='11' r='1.4' fill='%23ffd4ff' opacity='1'/></svg>") 11 11, pointer; +} @@ -1,4 +1,4 @@ -// Shared Aero JS: bubbles, sparkle cursor, music toggle, drag windows, helpers. +// Shared Aero JS: bubbles, sparkle cursor, music toggle, drag windows, theme switcher, helpers. function spawnBubbles(host, count = 22) { const f = document.createElement('div'); @@ -50,8 +50,14 @@ function sparkleCursor() { s.className = 'sparkle'; s.style.left = e.clientX + 'px'; s.style.top = e.clientY + 'px'; - const hue = 30 + Math.random() * 200; - s.style.background = `radial-gradient(circle, oklch(95% 0.12 ${hue}) 0%, oklch(85% 0.18 ${hue} / 0.6) 40%, transparent 70%)`; + const theme = document.body.dataset.theme; + // chrome: iridescent / holographic palette (cyan→magenta→pink) + // aero: warm-cool rainbow as before + const hue = theme === 'chrome' + ? 200 + Math.random() * 160 + : 30 + Math.random() * 200; + const chroma = theme === 'chrome' ? 0.22 : 0.18; + s.style.background = `radial-gradient(circle, oklch(96% 0.10 ${hue}) 0%, oklch(82% ${chroma} ${hue} / 0.6) 40%, transparent 70%)`; document.body.appendChild(s); setTimeout(() => s.remove(), 900); }); @@ -147,6 +153,45 @@ function bindMusicToggle(root) { }); } +// THEME SWITCHER — Aero (Frutiger) ↔ Chrome (Y2K) +const THEME_KEY = 'tyler.theme'; +const THEMES = ['aero', 'chrome']; + +function getTheme() { + const t = localStorage.getItem(THEME_KEY); + return THEMES.includes(t) ? t : 'aero'; +} +function setTheme(t) { + if (!THEMES.includes(t)) t = 'aero'; + document.body.setAttribute('data-theme', t); + localStorage.setItem(THEME_KEY, t); + document.querySelectorAll('.theme-switcher button').forEach(b => { + b.classList.toggle('active', b.dataset.theme === t); + }); + try { window.dispatchEvent(new CustomEvent('themechange', { detail: t })); } catch(_){} +} +function mountThemeSwitcher(host) { + host = host || document.body; + const wrap = document.createElement('div'); + wrap.className = 'theme-switcher no-drag'; + wrap.innerHTML = THEMES.map(t => ` + <button data-theme="${t}" title="${t}" class="no-drag"> + <span class="ts-dot ${t}"></span>${t} + </button> + `).join(''); + host.appendChild(wrap); + wrap.querySelectorAll('button').forEach(b => { + b.addEventListener('click', () => setTheme(b.dataset.theme)); + }); + setTheme(getTheme()); + return wrap; +} +function initTheme() { + document.body.setAttribute('data-theme', getTheme()); +} + +// REAL API INTEGRATIONS + async function fetchLastFm(user = 'trollshotlol', key = 'e4d5c973811037717f7603f616259cdf', limit = 4) { const url = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${user}&api_key=${key}&format=json&limit=${limit}`; const r = await fetch(url); @@ -182,4 +227,11 @@ async function fetchReelMouthFeed(limit = 6) { return await r.json(); } -window.Aero = { spawnBubbles, makeClouds, sparkleCursor, makeDraggable, counterHTML, nowPlayingHTML, animateEq, musicToggleHTML, bindMusicToggle, fetchLastFm, fetchFilms, fetchVisitorCount, fetchReelMouthFeed }; +window.Aero = { + spawnBubbles, makeClouds, sparkleCursor, makeDraggable, + counterHTML, nowPlayingHTML, animateEq, musicToggleHTML, bindMusicToggle, + // theme api + getTheme, setTheme, mountThemeSwitcher, initTheme, THEMES, + // real api integrations + fetchLastFm, fetchFilms, fetchVisitorCount, fetchReelMouthFeed, +}; @@ -3,6 +3,9 @@ <head> <meta charset="UTF-8" /> <title>welcome — tyler.xyz</title> +<link rel="preconnect" href="https://fonts.googleapis.com" /> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" /> <link rel="stylesheet" href="aero.css" /> <style> body { @@ -157,7 +160,8 @@ .badge.silver { background: linear-gradient(to bottom, oklch(88% 0.02 230), oklch(60% 0.04 235)); border-color: oklch(45% 0.05 240); color: oklch(20% 0.04 240); text-shadow: 0 1px 0 rgba(255,255,255,0.6); } </style> </head> -<body> +<body class="welcome-body"> + <script>(function(){var t=localStorage.getItem('tyler.theme')||'aero';document.body.setAttribute('data-theme',t);})();</script> <div id="bub-stage" style="position:fixed;inset:0;pointer-events:none;z-index:0"></div> <div class="stage"> @@ -184,8 +188,10 @@ <script src="aero.js"></script> <script> + Aero.initTheme(); Aero.spawnBubbles(document.getElementById('bub-stage'), 26); Aero.sparkleCursor(); + Aero.mountThemeSwitcher(); </script> </body> </html> diff --git a/img/wallpaper-chrome.png b/img/wallpaper-chrome.png Binary files differnew file mode 100644 index 0000000..bb714a6 --- /dev/null +++ b/img/wallpaper-chrome.png @@ -3,6 +3,9 @@ <head> <meta charset="UTF-8" /> <title>tyler.xyz · Aqua Desktop</title> +<link rel="preconnect" href="https://fonts.googleapis.com" /> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" /> <link rel="stylesheet" href="aero.css" /> <style> /* ============= LOCKED PALETTE ============= */ @@ -19,7 +22,7 @@ --start-border: oklch(40% 0.14 150); } .desk { position: fixed; inset: 0; overflow: hidden; background: var(--sky); background-size: cover; background-position: center; } - .icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; } + .icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; z-index: 10; } .icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; cursor: pointer; text-align: center; } .icon .glyph { width: 56px; height: 56px; border-radius: 14px; @@ -37,7 +40,7 @@ .icon .label { font-size: 12px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-weight: 500; } .icon:hover .glyph { transform: translateY(-2px) scale(1.04); transition: transform 200ms; } - .win { position: absolute; min-width: 320px; } + .win { position: absolute; min-width: 320px; z-index: 50; } .win .titlebar { height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 18px 18px 0 0; @@ -113,6 +116,7 @@ </style> </head> <body> + <script>(function(){var t=localStorage.getItem('tyler.theme')||'aero';document.body.setAttribute('data-theme',t);})();</script> <div class="desk" id="desk"> <div class="sun" style="background: var(--sun);"></div> <div class="lens-flare"></div> @@ -323,15 +327,17 @@ </div> </div> - <audio id="bgm" src="/mus/bazaar-theme.mp3" loop preload="none"></audio> + <audio id="bgm" loop preload="none"></audio> </div> <script src="aero.js"></script> <script> + Aero.initTheme(); const desk = document.getElementById('desk'); Aero.makeClouds(document.getElementById('clouds')); Aero.spawnBubbles(desk, 24); Aero.sparkleCursor(); + Aero.mountThemeSwitcher(); document.querySelectorAll('.win').forEach(w => { Aero.makeDraggable(w, w.querySelector('.titlebar')); @@ -384,7 +390,11 @@ ic.addEventListener('dblclick', loadPodcast); }); - // music toggle + volume slider + // music toggle + volume slider (theme-aware) + const MUSIC = { + aero: { src: '/mus/bazaar-theme.mp3', label: '♪ a-dog — bazaar theme' }, + chrome: { src: '/CoolMan - WhoIsUsingThisComputer_.mp3', label: '♪ coolman — who is using this computer?' }, + }; document.getElementById('mt').innerHTML = Aero.musicToggleHTML(); const mtDiv = document.getElementById('mt'); const mtBtn = mtDiv.querySelector('.mt-btn'); @@ -401,12 +411,26 @@ vol.addEventListener('input', () => { bgm.volume = Number(vol.value); }); let musicOn = false; + + function applyMusicTheme() { + const track = MUSIC[Aero.getTheme()] || MUSIC.aero; + if (bgm.getAttribute('src') !== track.src) { + const pos = bgm.currentTime; + bgm.src = track.src; + if (musicOn) { bgm.load(); bgm.currentTime = 0; bgm.play(); } + } + if (musicOn) mtLabel.textContent = (MUSIC[Aero.getTheme()] || MUSIC.aero).label; + } + mtBtn.addEventListener('click', () => { musicOn = !musicOn; if (musicOn) { + const track = MUSIC[Aero.getTheme()] || MUSIC.aero; + bgm.src = track.src; + bgm.load(); bgm.play(); mtBtn.textContent = '❚❚'; - mtLabel.textContent = '♪ a-dog — bazaar theme'; + mtLabel.textContent = track.label; mtBtn.style.background = 'radial-gradient(circle at 30% 25%,white,oklch(75% 0.14 55) 60%,oklch(55% 0.15 35))'; } else { bgm.pause(); @@ -416,6 +440,9 @@ } }); + // swap track live when theme changes while music is playing + window.addEventListener('themechange', applyMusicTheme); + // counter document.getElementById('cc').innerHTML = Aero.counterHTML(0, 'visitors'); Aero.fetchVisitorCount() diff --git a/test.txt b/test.txt deleted file mode 100644 index e69de29..0000000 --- a/test.txt +++ /dev/null |
