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>
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="ocean-dusk">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Home — WeVisto</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Marcellus&family=Cormorant+Garamond:ital,wght@1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="_tokens.css">
|
||||
<link rel="stylesheet" href="_chrome.css">
|
||||
<style>
|
||||
/* ─── hero — editorial moment, sits directly on the photo ──────────── */
|
||||
.hero {
|
||||
padding: var(--space-6) var(--space-5) var(--space-5);
|
||||
position: relative;
|
||||
}
|
||||
.hero__plate {
|
||||
font: var(--type-label);
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.hero__plate .roman { color: var(--brand-yellow); font-family: var(--font-display); font-size: var(--text-md); }
|
||||
.hero__plate .sep { width: 24px; height: 1px; background: var(--glass-bord); }
|
||||
.hero__greeting {
|
||||
font: var(--type-display-lg);
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.hero__greeting em {
|
||||
font-family: var(--font-accent);
|
||||
font-style: italic;
|
||||
color: var(--brand-yellow);
|
||||
}
|
||||
.hero__sub {
|
||||
font: var(--type-accent-md);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
max-width: 38ch;
|
||||
}
|
||||
.hero__sub strong { color: var(--text); font-style: normal; font-family: var(--font-display); font-weight: 400; }
|
||||
.hero__rule {
|
||||
margin-top: var(--space-4);
|
||||
width: 80px; height: 1px;
|
||||
background: linear-gradient(90deg, var(--brand-yellow), transparent);
|
||||
}
|
||||
|
||||
/* ─── frame card — frosted glass, the user's photo is the inner content ── */
|
||||
.frame-card {
|
||||
margin: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
/* uses .glass class for the frost effect */
|
||||
}
|
||||
.frame-card__hero {
|
||||
aspect-ratio: 4/3;
|
||||
background-image: url('../assets/harbor.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
/* the user's frame photo — keep at full saturation (it's user content, not brand backdrop) */
|
||||
}
|
||||
.frame-card__status {
|
||||
position: absolute;
|
||||
top: 14px; left: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(8, 18, 30, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font: var(--type-label);
|
||||
color: var(--text);
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.frame-card__status .dot {
|
||||
width: 7px; height: 7px;
|
||||
background: #6cd498;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 3px rgba(108, 212, 152, 0.25);
|
||||
}
|
||||
.frame-card__plate {
|
||||
position: absolute;
|
||||
bottom: 14px; left: 14px;
|
||||
font: var(--type-label);
|
||||
background: rgba(8, 18, 30, 0.7);
|
||||
color: var(--text);
|
||||
padding: 5px 10px;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.frame-card__body { padding: var(--space-5) var(--space-5) var(--space-4); }
|
||||
.frame-card__name {
|
||||
font: var(--type-display-md);
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.frame-card__meta {
|
||||
font: italic 400 15px/1.4 var(--font-accent);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.frame-card__meta .sep { margin: 0 8px; opacity: 0.4; }
|
||||
.frame-card__schedule {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--glass-bord);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.frame-card__schedule svg {
|
||||
width: 18px; height: 18px;
|
||||
stroke: var(--brand-yellow);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.frame-card__schedule strong { font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; color: var(--text); display: block; margin-bottom: 2px; }
|
||||
.frame-card__schedule span { color: var(--text-muted); }
|
||||
.frame-card__actions { display: flex; gap: var(--space-3); }
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--glass-bord);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background var(--duration-fast);
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
}
|
||||
.btn:hover { background: rgba(255, 255, 255, 0.12); }
|
||||
.btn--primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
border-color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn--primary:hover { filter: brightness(1.08); }
|
||||
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
|
||||
|
||||
/* ─── upcoming photos strip — quiet teaser of what's queued ─────────── */
|
||||
.upcoming {
|
||||
margin: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.upcoming__head {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.upcoming__title {
|
||||
font: var(--type-display-md);
|
||||
color: var(--text);
|
||||
}
|
||||
.upcoming__hint {
|
||||
font: var(--type-accent-md);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.upcoming__row {
|
||||
display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: 4px;
|
||||
}
|
||||
.upcoming__row::-webkit-scrollbar { display: none; }
|
||||
.upcoming__row { scrollbar-width: none; }
|
||||
.thumb {
|
||||
flex-shrink: 0;
|
||||
width: 92px; height: 92px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
border: 1px solid var(--glass-bord);
|
||||
}
|
||||
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.thumb .when {
|
||||
position: absolute;
|
||||
bottom: 4px; left: 4px;
|
||||
font: var(--type-label);
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: var(--text);
|
||||
padding: 2px 6px;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="atmosphere"></div>
|
||||
|
||||
<header class="app-bar">
|
||||
<div class="app-bar__mark"><img src="../assets/mark-photo-64.png" alt=""></div>
|
||||
<div class="app-bar__title-group">
|
||||
<div class="app-bar__wordmark">We<span class="v">V</span>isto</div>
|
||||
<div class="app-bar__sub">— Margaret's frame</div>
|
||||
</div>
|
||||
<div class="app-bar__spacer"></div>
|
||||
<button class="app-bar__icon" aria-label="Notifications">
|
||||
<svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main class="main-scroll">
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero__plate"><span class="roman">I.</span><span class="sep"></span><span>Plate · today</span></div>
|
||||
<h1 class="hero__greeting">Good morning, <em>Alice.</em></h1>
|
||||
<p class="hero__sub">Margaret's frame is in sync. The next photograph will arrive at <strong>7:00 AM</strong>, quietly, on its own.</p>
|
||||
<div class="hero__rule"></div>
|
||||
</section>
|
||||
|
||||
<article class="frame-card glass">
|
||||
<div class="frame-card__hero">
|
||||
<div class="frame-card__status">
|
||||
<span class="dot"></span><span>Synced 12 min ago</span>
|
||||
</div>
|
||||
<div class="frame-card__plate">Plate XII</div>
|
||||
</div>
|
||||
<div class="frame-card__body">
|
||||
<h2 class="frame-card__name">Margaret's frame</h2>
|
||||
<p class="frame-card__meta">7.3″ landscape <span class="sep">·</span> Camden, Maine <span class="sep">·</span> est. May 2026</p>
|
||||
|
||||
<div class="frame-card__schedule">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<div>
|
||||
<strong>Next photograph at 7:00 AM</strong>
|
||||
<span>then again at 12:00 PM and 6:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frame-card__actions">
|
||||
<button class="btn btn--primary">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add photograph
|
||||
</button>
|
||||
<button class="btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="upcoming glass">
|
||||
<div class="upcoming__head">
|
||||
<h3 class="upcoming__title">Up next</h3>
|
||||
<span class="upcoming__hint">— in the library queue</span>
|
||||
</div>
|
||||
<div class="upcoming__row">
|
||||
<div class="thumb"><img src="../assets/harbor.jpg" alt=""><span class="when">7am</span></div>
|
||||
<div class="thumb"><img src="../assets/harbor.jpg" alt="" style="filter: hue-rotate(40deg);"><span class="when">noon</span></div>
|
||||
<div class="thumb"><img src="../assets/harbor.jpg" alt="" style="filter: hue-rotate(-30deg) saturate(1.2);"><span class="when">6pm</span></div>
|
||||
<div class="thumb"><img src="../assets/harbor.jpg" alt="" style="filter: brightness(0.85);"><span class="when">tmrw</span></div>
|
||||
<div class="thumb"><img src="../assets/harbor.jpg" alt="" style="filter: sepia(0.4);"><span class="when">+5</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<nav class="bottom-nav">
|
||||
<a class="bottom-nav__tab active" href="home.html">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>
|
||||
<span class="label">Home</span>
|
||||
</a>
|
||||
<a class="bottom-nav__tab" href="library.html">
|
||||
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
<span class="label">Library</span>
|
||||
</a>
|
||||
<a class="bottom-nav__tab" href="settings.html">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
<span class="label">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="theme-switcher" role="region" aria-label="Theme switcher (mockup only)">
|
||||
<span class="theme-switcher__label">Dusk</span>
|
||||
<div class="theme-switcher__chips">
|
||||
<button class="theme-switcher__chip active" data-theme="ocean-dusk" title="Ocean dusk"></button>
|
||||
<button class="theme-switcher__chip" data-theme="amber-dusk" title="Amber dusk"></button>
|
||||
<button class="theme-switcher__chip" data-theme="sage-dusk" title="Sage dusk"></button>
|
||||
<button class="theme-switcher__chip" data-theme="rose-dusk" title="Rose dusk"></button>
|
||||
<button class="theme-switcher__chip" data-theme="mauve-dusk" title="Mauve dusk"></button>
|
||||
<button class="theme-switcher__chip" data-theme="honey-dusk" title="Honey dusk"></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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user