robertoandClaude Sonnet 5
ddd2db2a52
Static Cloudflare Pages site + KV-backed Pages Function for jointly planning Tina's Barcelona visit (7 Jul - 18 Aug 2026). List and calendar views share one client state; dated evening events are radio groups to prevent double-booking, multi-night shows live once in TRIP_DATA.spanning instead of being duplicated per day, and undated collections get optionally date-tagged when picked from the calendar view. Includes a client-side-only password gate and an instructions page. Live at https://summeroffun.hortal.me. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
62 lines
3.6 KiB
HTML
62 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>How this page works</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header class="page-header">
|
|
<h1>How this page works</h1>
|
|
<p class="subtitle">A quick guide to picking your way through Tina's lovely summer in Barcelona.</p>
|
|
</header>
|
|
|
|
<main class="instructions">
|
|
<section class="instr-section">
|
|
<h2>The basics</h2>
|
|
<p>Every date with something specific on (a concert, a festival night, a booked event) shows a set of round buttons — pick <strong>one</strong> per evening. That's on purpose: it keeps you from accidentally double-booking a night, so you don't need to think about clashes at all.</p>
|
|
<p>Anything marked with a ✅ is already confirmed and booked — there's nothing to choose there, it's just shown so you know the evening's spoken for.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>Two ways to browse</h2>
|
|
<p>Use the <strong>List / Calendar</strong> toggle near the top:</p>
|
|
<ul>
|
|
<li><strong>List</strong> — every day, one after another, so you can scroll through the whole trip in one go. Undated things (exhibitions, restaurants, evening extras) are grouped in their own sections further down.</li>
|
|
<li><strong>Calendar</strong> — one day at a time, with a small month grid to jump around. A filled dot means that day already has something picked; an empty dot means it's still open.</li>
|
|
</ul>
|
|
<p>Both views are just two windows onto the same picks — anything chosen in one shows up correctly in the other.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>Shows that run more than one night</h2>
|
|
<p>A few things (like a play with a two-night run) are valid on either of two dates. They show up as a normal choice on both nights — but once you pick one night, the other night shows it as <em>"already picked — [date]"</em> instead, so you can't accidentally book it twice.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>Exhibitions, restaurants, and other "anytime" things</h2>
|
|
<p>These don't compete for one of your evening picks — tick as many as you like. In the calendar view, if you tick one while looking at a particular day, it gets tagged to that day; every other day will then show it as already picked, so you always know when you've actually planned to do it.</p>
|
|
<p>If you tick one from the list view instead, it's just marked as "want to do this" without a specific date yet — that's fine, it'll show up in your shortlist as unscheduled.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>The ⓘ icon</h2>
|
|
<p>Tap it to open more information (official page, tickets, menu, etc.) in a new tab. It's deliberately separate from the tick/radio button next to it, so opening a link never accidentally selects or deselects anything.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>Your shortlist</h2>
|
|
<p>Everything picked so far is collected at the bottom of the page, in date order, so you can see the whole plan taking shape at a glance.</p>
|
|
</section>
|
|
|
|
<section class="instr-section">
|
|
<h2>Sharing</h2>
|
|
<p>Everything saves automatically as you tap — no submit button needed. Anyone with the link sees the same shared picks, so you and Roberto can both browse and tick things whenever suits, from any device.</p>
|
|
</section>
|
|
|
|
<p><a href="index.html" class="how-it-works">← Back to the picker</a></p>
|
|
</main>
|
|
</body>
|
|
</html>
|