football2801
01b6007b1c
CI / test (push) Has been cancelled
Self-contained HTML/CSS mockups proposing the brand-as-surface direction: - Camogli harbor photo as the permanent backdrop on every authenticated view - Six user themes rebuilt as atmospheric "dusks" (tinted overlays + accents) instead of cream variants - Frosted-glass cards on top of the photo - Same type system (Marcellus / Cormorant Garamond italic / Nunito body) shared between login and in-app Includes: - login-cinematic.html: canonical pre-auth example with Ken-Burns + grain - spa/home.html, library.html, settings.html: in-app views with the new chrome - spa/_tokens.css + _chrome.css: dusk system and frosted-glass primitives - favicons/A-D: in-progress icon directions - README.md with serving instructions and the porting checklist Saved as a durable design artifact so the iteration survives /tmp wipes and can be referred back to when porting to Vue. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
20 lines
1.1 KiB
HTML
20 lines
1.1 KiB
HTML
<div class="theme-switcher" role="region" aria-label="Theme switcher (mockup only)">
|
|
<span class="theme-switcher__label">User-pref theme</span>
|
|
<div class="theme-switcher__chips">
|
|
<button class="theme-switcher__chip active" data-theme="warm-craft" title="warm-craft"></button>
|
|
<button class="theme-switcher__chip" data-theme="ocean-dusk" title="ocean-dusk"></button>
|
|
<button class="theme-switcher__chip" data-theme="sage-cream" title="sage-cream"></button>
|
|
<button class="theme-switcher__chip" data-theme="playful-pop" title="playful-pop"></button>
|
|
<button class="theme-switcher__chip" data-theme="dusty-mauve" title="dusty-mauve"></button>
|
|
<button class="theme-switcher__chip" data-theme="honey-slate" title="honey-slate"></button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('.theme-switcher__chip').forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
document.documentElement.setAttribute('data-theme', chip.dataset.theme);
|
|
document.querySelectorAll('.theme-switcher__chip').forEach(c => c.classList.toggle('active', c === chip));
|
|
});
|
|
});
|
|
</script>
|