Lucas WintherandClaude Opus 5.5
560c27c04d
Adds the approved v1 design spec, UI mockups, AGENTS.md (with CLAUDE.md and GEMINI.md pointers), architecture/decisions/todo/permissions docs, agent permission files, and an empty Bun workspaces skeleton. Co-Authored-By: Claude Opus 5.5 <[email protected]>
216 lines
19 KiB
HTML
216 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>STTracker — style round 2</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Gelasio:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;600&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { background: #e7e9ec; font-family: system-ui, sans-serif; color: #222; padding: 32px 24px 80px; }
|
||
.intro { max-width: 1160px; margin: 0 auto 28px; }
|
||
.intro h1 { font-size: 1.5rem; margin-bottom: .4rem; }
|
||
.intro p { color: #555; max-width: 75ch; line-height: 1.5; }
|
||
.style { max-width: 1160px; margin: 0 auto 44px; }
|
||
.style-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
|
||
.style-head h2 { font-size: 1.1rem; white-space: nowrap; }
|
||
.style-head p { color: #555; font-size: .9rem; flex: 1; }
|
||
.pick { border: 1px solid #999; background: #fff; border-radius: 6px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: .85rem; }
|
||
.pick.selected { background: #2b5cd6; color: #fff; border-color: #2b5cd6; }
|
||
.frame { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 #0002, 0 8px 30px #0001; }
|
||
|
||
/* ================= 1. App (Hardcover-inspired) ================= */
|
||
.app { background: #1e1b36; color: #ece9ff; font-family: "Inter", sans-serif; display: grid; grid-template-columns: 190px 360px 1fr; min-height: 640px; font-size: .9rem; }
|
||
.app-side { background: #17152b; padding: 20px 14px; }
|
||
.app-side .logo { font-weight: 700; font-size: 1.05rem; margin: 0 8px 20px; color: #fbbf24; }
|
||
.app-side .nav { padding: 8px 10px; border-radius: 8px; color: #b8b3e0; display: flex; justify-content: space-between; }
|
||
.app-side .nav.on { background: #2d2852; color: #fff; }
|
||
.app-side .nav em { font-style: normal; background: #f97316; color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; }
|
||
.app-side .grp { color: #6f69a3; font-size: .78rem; margin: 18px 10px 6px; }
|
||
.app-list { border-right: 1px solid #2d2852; padding: 18px 0; }
|
||
.app-search { margin: 0 16px 12px; background: #2d2852; border-radius: 8px; padding: 9px 12px; color: #8d87c2; }
|
||
.app-quick { margin: 0 16px 14px; border: 1px dashed #4b4485; border-radius: 8px; padding: 9px 12px; color: #c9c4f0; }
|
||
.app-quick b { color: #fbbf24; font-weight: 600; }
|
||
.app-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 16px; }
|
||
.app-item.on { background: #2d2852; }
|
||
.app-item .cv { width: 40px; height: 56px; border-radius: 3px; }
|
||
.app-item h4 { font-size: .88rem; font-weight: 600; }
|
||
.app-item .m { color: #a9a3d6; font-size: .76rem; margin-top: 2px; }
|
||
.app-item .flag { width: 8px; height: 8px; border-radius: 50%; background: #f97316; }
|
||
.app-item .draft { font-size: .7rem; color: #fbbf24; border: 1px solid #fbbf2466; border-radius: 4px; padding: 1px 5px; }
|
||
.app-detail { padding: 22px 26px; }
|
||
.det-head { display: grid; grid-template-columns: 110px 1fr; gap: 20px; }
|
||
.det-head .cv { width: 110px; height: 160px; border-radius: 5px; background: linear-gradient(160deg, #6b3fa0, #1d0f30); box-shadow: 0 6px 20px #0006; }
|
||
.det-head h3 { font-size: 1.45rem; line-height: 1.2; }
|
||
.det-head .m { color: #a9a3d6; margin: 4px 0 12px; }
|
||
.stars { color: #fbbf24; letter-spacing: 2px; font-size: 1.05rem; }
|
||
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||
.pills span { background: #2d2852; padding: 3px 10px; border-radius: 999px; font-size: .76rem; color: #c9c4f0; }
|
||
.alert { margin: 18px 0 14px; background: #3a2a1a; border: 1px solid #f9731666; border-radius: 10px; padding: 11px 14px; display: flex; gap: 12px; align-items: center; }
|
||
.alert p { flex: 1; color: #fde2c8; font-size: .85rem; line-height: 1.4; }
|
||
.alert button { background: #f97316; border: 0; color: #fff; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: .8rem; }
|
||
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||
.box { background: #262247; border-radius: 10px; padding: 12px 14px; }
|
||
.box h5 { font-size: .78rem; color: #8d87c2; font-weight: 600; margin-bottom: 8px; }
|
||
.box .r { display: flex; justify-content: space-between; padding: 4px 0; font-size: .84rem; }
|
||
.box .r span:first-child { color: #a9a3d6; }
|
||
.thumbs { display: flex; gap: 6px; }
|
||
.thumbs div { width: 58px; height: 44px; border-radius: 4px; }
|
||
.src { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .84rem; }
|
||
.src i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
|
||
.review { grid-column: 1 / -1; font-family: "Gelasio", serif; font-size: .95rem; line-height: 1.55; color: #e3e0fb; }
|
||
|
||
/* ================= 2. Scrapbook v2 ================= */
|
||
.sb { background: #d8c3a0; color: #2a1f14; font-family: "Gelasio", serif; padding: 34px 40px 44px; }
|
||
.sb-head { display: grid; grid-template-columns: 1fr auto; align-items: end; border-bottom: 1px solid #2a1f1433; padding-bottom: 14px; margin-bottom: 22px; }
|
||
.sb-head h3 { font-family: "Caveat", cursive; font-size: 3.2rem; font-weight: 700; line-height: .9; }
|
||
.sb-head p { font-style: italic; }
|
||
.sb-head .links { text-align: right; font-size: .85rem; line-height: 1.6; }
|
||
.sb-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 26px; align-items: start; }
|
||
.pol { background: #fffdf7; padding: 10px 10px 12px; box-shadow: 0 6px 14px #3b2a1533; position: relative; }
|
||
.pol .img { aspect-ratio: 4/3; }
|
||
.pol .cap { font-family: "Caveat", cursive; font-size: 1.35rem; line-height: 1.05; margin-top: 8px; }
|
||
.pol .meta { font-size: .78rem; color: #6b5640; margin-top: 4px; }
|
||
.tape { position: absolute; width: 74px; height: 22px; background: #f1ebc4c4; top: -11px; left: calc(50% - 37px); }
|
||
.card-n { background: #fffbe6; padding: 16px 18px; box-shadow: 0 4px 10px #3b2a1526; }
|
||
.card-n h4 { font-size: 1.05rem; margin-bottom: 6px; }
|
||
.card-n p { font-size: .9rem; line-height: 1.55; }
|
||
.card-n .sig { font-family: "Caveat"; font-size: 1.3rem; margin-top: 8px; color: #7a3b22; }
|
||
.tix { background: #efe0bd; border: 1.5px dashed #8a6b3d; padding: 12px 14px; font-size: .84rem; line-height: 1.5; }
|
||
.tix b { display: block; font-size: .95rem; }
|
||
.now { margin-top: 26px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||
.now .lbl { font-family: "Caveat"; font-size: 1.6rem; margin-right: 6px; }
|
||
.now span.it { background: #fffdf7; padding: 6px 12px; font-size: .85rem; box-shadow: 0 2px 5px #3b2a1522; }
|
||
|
||
/* ================= 3. River v2 ================= */
|
||
.rv { background: #142033; color: #e9edf5; font-family: "Instrument Sans", sans-serif; padding: 30px 34px 26px; }
|
||
.rv-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
|
||
.rv h3 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 2.6rem; line-height: 1; }
|
||
.rv-head p { color: #9fb0cc; max-width: 46ch; text-align: right; font-size: .9rem; line-height: 1.45; }
|
||
.rv-wrap { position: relative; }
|
||
.rv svg { display: block; width: 100%; height: auto; }
|
||
.rv-cov { position: absolute; width: 46px; height: 64px; border-radius: 4px; box-shadow: 0 0 0 2px #142033, 0 6px 14px #0008; display: flex; align-items: end; justify-content: center; font-size: .6rem; color: #fff; padding-bottom: 3px; }
|
||
.rv-pop { position: absolute; background: #f3f5fa; color: #142033; border-radius: 10px; padding: 12px 14px; width: 250px; box-shadow: 0 12px 30px #0009; font-size: .84rem; line-height: 1.45; }
|
||
.rv-pop b { font-size: .98rem; display: block; }
|
||
.rv-pop .st { color: #b7791f; }
|
||
.rv-pop .q { font-family: "Instrument Serif"; font-style: italic; font-size: 1.05rem; margin-top: 6px; }
|
||
.rv-legend { display: flex; gap: 20px; font-size: .82rem; color: #9fb0cc; margin-top: 10px; }
|
||
.rv-legend span::before { content: ""; display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 7px; vertical-align: 2px; background: var(--c); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="intro">
|
||
<h1>Style round 2: the app, and two public pages</h1>
|
||
<p><b>1</b> is the everyday app, a fuller Hardcover-style take showing a real entry: your reads, where you bought it, screenshots, linked sources, and a warning that a platform changed something. <b>2</b> and <b>3</b> are the shareable public page: a tidier scrapbook, and a river that actually does something. In the river, the card for the purple book is shown open, as it would appear when you hover over or tap a cover.</p>
|
||
</div>
|
||
|
||
<!-- 1 -->
|
||
<section class="style">
|
||
<div class="style-head"><h2>1. The app</h2><p>Library on the left, entry on the right. Quick entries without a source show as drafts you can fix later.</p><button class="pick" data-choice="app-v2" onclick="this.classList.toggle('selected')">I like this</button></div>
|
||
<div class="frame app">
|
||
<div class="app-side">
|
||
<div class="logo">STTracker</div>
|
||
<div class="nav on">Library</div><div class="nav">Log</div><div class="nav">Lists</div><div class="nav">Owned</div>
|
||
<div class="nav">Changes <em>3</em></div>
|
||
<div class="grp">Sources</div>
|
||
<div class="nav">Hardcover</div><div class="nav">Trakt</div><div class="nav">MangaBaka</div><div class="nav">ListenBrainz</div><div class="nav">Steam (owned)</div>
|
||
<div class="grp">Your page</div>
|
||
<div class="nav">Edit public page</div>
|
||
</div>
|
||
<div class="app-list">
|
||
<div class="app-search">Search 1,284 entries…</div>
|
||
<div class="app-quick"><b>+</b> Quick add: type a title, sort it out later</div>
|
||
<div class="app-item on"><div class="cv" style="background:linear-gradient(#6b3fa0,#1d0f30)"></div><div><h4>From the Library of Jurgen Leitner</h4><div class="m">Book · read twice</div></div><span class="flag" title="Changed on Hardcover"></span></div>
|
||
<div class="app-item"><div class="cv" style="background:linear-gradient(#2f6b58,#0d211b)"></div><div><h4>The Magnus Archives</h4><div class="m">Podcast series · 200 ep</div></div><span class="stars" style="font-size:.75rem">★★★★★</span></div>
|
||
<div class="app-item"><div class="cv" style="background:repeating-linear-gradient(45deg,#3a356b,#3a356b 6px,#2d2852 6px,#2d2852 12px)"></div><div><h4>that weird ARG youtube series</h4><div class="m">Video · added from phone</div></div><span class="draft">Draft</span></div>
|
||
<div class="app-item"><div class="cv" style="background:linear-gradient(#c1652f,#2b1306)"></div><div><h4>Voices of the Void</h4><div class="m">Game · 41 h</div></div><span class="stars" style="font-size:.75rem">★★★★☆</span></div>
|
||
<div class="app-item"><div class="cv" style="background:linear-gradient(#344b7a,#0c1324)"></div><div><h4>The Twilight Zone</h4><div class="m">Show · season 3 of 5</div></div><span class="flag" style="background:#6d5dfc"></span></div>
|
||
<div class="app-item"><div class="cv" style="background:linear-gradient(#7a6b3f,#2a2412)"></div><div><h4>Annihilation</h4><div class="m">Book · Southern Reach #1</div></div><span class="stars" style="font-size:.75rem">★★★★½</span></div>
|
||
</div>
|
||
<div class="app-detail">
|
||
<div class="det-head">
|
||
<div class="cv"></div>
|
||
<div>
|
||
<h3>From the Library of Jurgen Leitner</h3>
|
||
<div class="m">Book · Read twice · last finished 14 Sep 2026</div>
|
||
<div class="stars">★★★★★</div>
|
||
<div class="pills"><span>cosmic horror</span><span>re-read</span><span>Recommended by: Sam</span><span>Mood: 3am</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="alert"><p><b>Hardcover changed this book.</b> On 12 Oct it was merged into another edition. Your rating, reads and review here are unchanged.</p><button>See what changed</button></div>
|
||
<div class="det-grid">
|
||
<div class="box"><h5>Reads</h5><div class="r"><span>2nd read</span><span>2 Sep – 14 Sep 2026</span></div><div class="r"><span>1st read</span><span>Mar 2025 (no exact date)</span></div></div>
|
||
<div class="box"><h5>Your copy</h5><div class="r"><span>Bought</span><span>Waterstones, Leeds</span></div><div class="r"><span>When / price</span><span>Feb 2025 · £14</span></div><div class="r"><span>Format</span><span>Hardback</span></div></div>
|
||
<div class="box"><h5>Attachments</h5><div class="thumbs"><div style="background:linear-gradient(135deg,#5a4b3a,#a08a6a)"></div><div style="background:linear-gradient(135deg,#222,#666)"></div><div style="background:linear-gradient(135deg,#3b2f5c,#8a7bc0)"></div></div></div>
|
||
<div class="box"><h5>Linked sources</h5><div class="src"><i></i>Hardcover · synced 4 min ago</div><div class="src"><i style="background:#6f69a3"></i>Obsidian note · Books/Leitner.md</div></div>
|
||
<div class="box review"><h5 style="font-family:Inter">Your review</h5>Better the second time. Knowing what the books do makes every throwaway line land differently. Don't read it in the dark.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2 -->
|
||
<section class="style">
|
||
<div class="style-head"><h2>2. Scrapbook, tidied</h2><p>Same hand-made feel, but on a grid, so it holds up with lots of entries and reads well on a phone.</p><button class="pick" data-choice="scrapbook-v2" onclick="this.classList.toggle('selected')">I like this</button></div>
|
||
<div class="frame sb">
|
||
<div class="sb-head">
|
||
<div><h3>stuff that got under my skin</h3><p>Lucas W. Books, games, shows, sounds.</p></div>
|
||
<div class="links">Everything I've logged<br>Lists · Cosmic dread · Comfort games</div>
|
||
</div>
|
||
<div class="sb-grid">
|
||
<div>
|
||
<div class="pol" style="transform:rotate(-1.5deg)"><div class="tape"></div><div class="img" style="background:linear-gradient(160deg,#1b2a1f,#4f6b3a 60%,#c9d18a)"></div><div class="cap">Voices of the Void, night 12. Something knocked.</div><div class="meta">Game · 41 h · ★★★★☆ · my screenshot</div></div>
|
||
<div class="tix" style="margin-top:22px;transform:rotate(1deg)"><b>From the Library of Jurgen Leitner</b>Bought at Waterstones, Leeds, Feb 2025<br>Read twice · ★★★★★</div>
|
||
</div>
|
||
<div>
|
||
<div class="card-n" style="transform:rotate(1deg)"><h4>The Magnus Archives</h4><p>All 200 episodes. The series gets five stars even though season 2 dragged; the ending earns it. Episodes are rated on their own if you want to argue.</p><div class="sig">★★★★★ the whole thing</div></div>
|
||
<div class="pol" style="margin-top:24px;transform:rotate(-2deg)"><div class="tape" style="transform:rotate(4deg)"></div><div class="img" style="background:radial-gradient(circle at 40% 40%,#e0e0e0,#3a3a3a 70%)"></div><div class="cap">Twilight Zone, "Time Enough at Last"</div><div class="meta">Episode · ★★★★★</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="pol" style="transform:rotate(2deg)"><div class="tape"></div><div class="img" style="background:linear-gradient(200deg,#f3a35c,#5c2d6e)"></div><div class="cap">Outer Wilds, 3rd time and I still cried at the end</div><div class="meta">Game · ★★★★★</div></div>
|
||
<div class="card-n" style="margin-top:22px;transform:rotate(-1deg)"><h4>If you liked these…</h4><p>Leitner → Magnus Archives → Voices of the Void → Twilight Zone. One long thread of cosmic dread across four media.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="now"><span class="lbl">right now:</span><span class="it">📖 Children of Time, p. 212</span><span class="it">📺 Severance s2e05</span><span class="it">🎧 Lateralus, on repeat</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 -->
|
||
<section class="style">
|
||
<div class="style-head"><h2>3. River, take two</h2><p>Each kind of media is a stream; its width is how much time you spent on it. Covers sit where you finished things, and threads link related things across streams.</p><button class="pick" data-choice="river-v2" onclick="this.classList.toggle('selected')">I like this</button></div>
|
||
<div class="frame rv">
|
||
<div class="rv-head"><h3>Lucas, summer into autumn</h3><p>Summer was mostly games. Then September turned into one long, dark read-and-listen.</p></div>
|
||
<div class="rv-wrap">
|
||
<svg viewBox="0 0 1090 330" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- month grid -->
|
||
<g stroke="#2a3a55" stroke-width="1">
|
||
<line x1="20" y1="20" x2="20" y2="300"/><line x1="285" y1="20" x2="285" y2="300"/><line x1="550" y1="20" x2="550" y2="300"/><line x1="815" y1="20" x2="815" y2="300"/><line x1="1075" y1="20" x2="1075" y2="300"/>
|
||
</g>
|
||
<g fill="#6f84a8" font-size="13" font-family="Instrument Sans"><text x="26" y="318">July</text><text x="291" y="318">August</text><text x="556" y="318">September</text><text x="821" y="318">October</text></g>
|
||
<!-- streams: thickness = time spent -->
|
||
<path d="M20,60 C150,58 230,55 320,62 S520,40 600,48 S800,70 1075,62 L1075,82 C900,90 760,96 600,92 S420,74 320,70 S120,66 20,66 Z" fill="#b9a6f2" opacity=".85"/>
|
||
<path d="M20,120 C150,118 300,122 420,124 S540,100 650,98 S760,116 1075,124 L1075,130 C900,134 760,150 650,160 S520,140 420,132 S150,128 20,128 Z" fill="#ffd27a" opacity=".85"/>
|
||
<path d="M20,170 C120,150 200,140 300,145 S420,160 520,176 S800,186 1075,176 L1075,196 C800,212 640,200 520,192 S400,232 300,236 S120,220 20,210 Z" fill="#f2a1a1" opacity=".85"/>
|
||
<path d="M20,252 C200,250 380,254 560,252 S800,236 1075,240 L1075,270 C820,276 640,268 560,266 S220,262 20,262 Z" fill="#9ad0c2" opacity=".85"/>
|
||
<!-- thread -->
|
||
<path d="M640,64 C660,90 700,100 720,124" stroke="#fff" stroke-width="2" stroke-dasharray="4 5" fill="none"/>
|
||
<path d="M740,128 C700,170 380,140 360,186" stroke="#fff" stroke-width="2" stroke-dasharray="4 5" fill="none"/>
|
||
<path d="M352,214 C420,250 860,220 900,248" stroke="#fff" stroke-width="2" stroke-dasharray="4 5" fill="none"/>
|
||
<g font-family="Instrument Serif" font-style="italic" font-size="17" fill="#fff"><text x="470" y="150">cosmic dread</text></g>
|
||
</svg>
|
||
<div class="rv-cov" style="left:610px;top:22px;background:linear-gradient(#6b3fa0,#1d0f30)">Leitner</div>
|
||
<div class="rv-cov" style="left:715px;top:92px;background:linear-gradient(#2f6b58,#0d211b)">TMA</div>
|
||
<div class="rv-cov" style="left:330px;top:158px;background:linear-gradient(#c1652f,#2b1306)">VotV</div>
|
||
<div class="rv-cov" style="left:885px;top:216px;background:linear-gradient(#344b7a,#0c1324)">TZ</div>
|
||
<div class="rv-cov" style="left:960px;top:30px;background:linear-gradient(#7a6b3f,#2a2412)">Annih.</div>
|
||
<div class="rv-cov" style="left:200px;top:140px;background:linear-gradient(200deg,#f3a35c,#5c2d6e)">OW</div>
|
||
<div class="rv-pop" style="left:420px;top:4px"><b>From the Library of Jurgen Leitner</b><span class="st">★★★★★</span> · finished 14 Sep · 2nd read<div class="q">"Better the second time."</div></div>
|
||
</div>
|
||
<div class="rv-legend"><span style="--c:#b9a6f2">Books</span><span style="--c:#ffd27a">Podcasts & audio</span><span style="--c:#f2a1a1">Games</span><span style="--c:#9ad0c2">Film & TV</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|