football2801
3bd0b9a5a1
CI / test (push) Has been cancelled
Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
311 lines
12 KiB
HTML
311 lines
12 KiB
HTML
<!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>
|