chore: bootstrap agent-ready docs, rules and Bun workspace

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 <noreply@anthropic.com>
This commit is contained in:
Lucas WintherandClaude Opus 5.5 committed 2026-10-30 15:06:58 +01:00
commit 560c27c04d
23 files changed
+1392

No files matched your search

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>STTracker — style round 1</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=Archivo+Narrow:wght@500;700&family=Caveat:wght@500;700&family=Cutive+Mono&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;700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;800&family=Work+Sans:wght@400;500;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: 1100px; margin: 0 auto 28px; }
.intro h1 { font-size: 1.5rem; margin-bottom: .4rem; }
.intro p { color: #555; max-width: 70ch; line-height: 1.5; }
.style { max-width: 1100px; margin: 0 auto 40px; }
.style-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.style-head h2 { font-size: 1.1rem; }
.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; }
/* ---------- A: Card catalogue ---------- */
.a { background: #41566b; padding: 28px; font-family: "Libre Caslon Text", serif; }
.a-top { display: flex; justify-content: space-between; align-items: end; color: #dfe7ee; margin-bottom: 20px; }
.a-top h3 { font-size: 1.9rem; font-weight: 400; }
.a-top h3 i { opacity: .7; }
.a-top span { font-size: .85rem; opacity: .8; }
.a-drawer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.a-card { background: #fdfdfb; padding: 14px 16px 18px; min-height: 190px; position: relative;
background-image: linear-gradient(#c7d3e6 1px, transparent 1px); background-size: 100% 22px; background-position: 0 44px;
border-top: 3px solid #c0392b; box-shadow: 0 3px 0 #0003; }
.a-card .call { font-family: "Cutive Mono", monospace; font-size: .75rem; color: #7a1f14; }
.a-card h4 { font-size: 1.02rem; margin: 6px 0 4px; line-height: 22px; }
.a-card .by { font-style: italic; font-size: .85rem; line-height: 22px; color: #444; }
.a-card .note { font-family: "Cutive Mono", monospace; font-size: .78rem; line-height: 22px; color: #234; margin-top: 4px; }
.a-card .stamp { position: absolute; right: 12px; bottom: 10px; border: 2px solid #2d6a4f; color: #2d6a4f; font-family: "Cutive Mono", monospace; font-size: .72rem; padding: 2px 6px; transform: rotate(-6deg); }
.a-log { margin-top: 18px; background: #fdfdfb; padding: 12px 16px; font-family: "Cutive Mono", monospace; font-size: .82rem; color: #223; }
.a-log div { display: grid; grid-template-columns: 110px 1fr 90px 80px; padding: 5px 0; border-bottom: 1px dotted #b8c4d4; }
.a-log div:last-child { border: 0; }
/* ---------- B: The shelf ---------- */
.b { background: #d9ddd2; padding: 28px 32px 0; font-family: "Archivo", sans-serif; color: #1d2b22; }
.b-top { display: flex; justify-content: space-between; align-items: baseline; }
.b-top h3 { font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; }
.b-top p { font-size: .9rem; max-width: 36ch; text-align: right; }
.b-shelf { display: flex; align-items: flex-end; gap: 4px; height: 270px; margin-top: 18px; padding: 0 8px; border-bottom: 14px solid #5b4632; }
.b-sp { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Archivo Narrow", sans-serif; font-weight: 700; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-radius: 2px 2px 0 0; color: #fff; font-size: .95rem; }
.b-sp small { font-weight: 500; font-size: .7rem; opacity: .85; }
.b-sp.leaning { transform: rotate(180deg) translateX(-6px) skewY(-6deg); }
.b-box { width: 150px; height: 190px; background: #8a2c2c; color: #fff; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; font-family: "Archivo Narrow"; font-weight: 700; }
.b-legend { display: flex; gap: 22px; padding: 14px 8px 22px; font-size: .82rem; }
.b-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
/* ---------- C: Scrapbook ---------- */
.c { background: #c9a97c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); padding: 30px 36px 40px; font-family: "Gelasio", serif; color: #2a1f14; position: relative; min-height: 470px; }
.c h3 { font-family: "Caveat", cursive; font-size: 2.8rem; font-weight: 700; line-height: 1; }
.c .sub { font-style: italic; margin-bottom: 18px; }
.c-board { position: relative; height: 340px; }
.c-pol { position: absolute; background: #fff; padding: 10px 10px 34px; width: 190px; box-shadow: 0 4px 10px #0003; }
.c-pol .img { height: 150px; }
.c-pol .cap { font-family: "Caveat", cursive; font-size: 1.35rem; position: absolute; bottom: 4px; left: 12px; right: 10px; line-height: 1; }
.c-tape { position: absolute; width: 70px; height: 22px; background: #f3eec3cc; top: -10px; left: 60px; transform: rotate(-4deg); }
.c-note { position: absolute; background: #fffbe0; padding: 14px 16px; width: 250px; font-family: "Caveat", cursive; font-size: 1.3rem; line-height: 1.15; box-shadow: 0 3px 8px #0002; }
.c-ticket { position: absolute; background: #e9d3a6; border: 2px dashed #8a6b3d; padding: 10px 14px; font-size: .85rem; width: 220px; }
/* ---------- D: River (timeline across media) ---------- */
.d { background: #172338; color: #e9edf5; padding: 30px 36px; font-family: "Instrument Sans", sans-serif; }
.d h3 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 2.6rem; line-height: 1.05; }
.d .sub { color: #9fb0cc; margin: 6px 0 22px; }
.d-river { display: grid; grid-template-columns: 70px 1fr; gap: 0 18px; }
.d-month { font-family: "Instrument Serif"; font-size: 1.3rem; color: #9fb0cc; padding-top: 8px; }
.d-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 0 16px; border-left: 1px solid #33476a; padding-left: 18px; position: relative; }
.d-chip { border-radius: 999px; padding: 8px 14px 8px 10px; display: flex; gap: 10px; align-items: center; background: #22314d; font-size: .9rem; }
.d-chip b { font-weight: 600; }
.d-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); display: grid; place-items: center; color: #172338; font-size: .7rem; font-weight: 700; }
.d-chip em { font-style: normal; color: #ffd27a; }
.d-thread { margin-top: 18px; background: #22314d; border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.d-thread p { color: #9fb0cc; font-size: .9rem; }
.d-thread .line { flex: 1; height: 2px; background: linear-gradient(90deg, #f2a1a1, #9ad0c2, #b9a6f2, #ffd27a); }
/* ---------- E: Hardcover-inspired ---------- */
.e { background: #1e1b36; color: #ece9ff; font-family: "Inter", sans-serif; display: grid; grid-template-columns: 200px 1fr; min-height: 470px; }
.e-side { background: #17152b; padding: 22px 16px; font-size: .9rem; }
.e-side .logo { font-weight: 700; font-size: 1.1rem; margin-bottom: 22px; color: #fbbf24; }
.e-side div { padding: 8px 10px; border-radius: 8px; color: #b8b3e0; }
.e-side div.on { background: #2d2852; color: #fff; }
.e-main { padding: 24px 28px; }
.e-main h3 { font-size: 1.4rem; margin-bottom: 4px; }
.e-main .sub { color: #a9a3d6; font-size: .9rem; margin-bottom: 18px; }
.e-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.e-tabs span { padding: 6px 12px; border-radius: 999px; background: #2d2852; font-size: .82rem; color: #c9c4f0; }
.e-tabs span.on { background: #6d5dfc; color: #fff; }
.e-row { display: grid; grid-template-columns: 56px 1fr 120px 110px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid #2d2852; }
.e-cover { width: 56px; height: 80px; border-radius: 4px; }
.e-row h4 { font-size: .98rem; }
.e-row .meta { color: #a9a3d6; font-size: .82rem; margin-top: 3px; }
.e-stars { color: #fbbf24; letter-spacing: 2px; }
.e-status { font-size: .8rem; background: #2d2852; padding: 4px 10px; border-radius: 999px; text-align: center; }
.e-series { background: #2d2852; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
/* ---------- F: Letterboxd-inspired ---------- */
.f { background: #14181c; color: #9ab; font-family: "Work Sans", sans-serif; padding: 0 0 26px; }
.f-nav { background: #0f1215; padding: 14px 32px; display: flex; gap: 22px; align-items: center; font-size: .85rem; }
.f-nav .logo { display: flex; gap: 4px; margin-right: 10px; }
.f-nav .logo i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.f-prof { display: flex; gap: 18px; align-items: center; padding: 22px 32px; }
.f-av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #556677, #2c3440); }
.f-prof h3 { color: #fff; font-size: 1.5rem; }
.f-stats { margin-left: auto; display: flex; gap: 22px; text-align: center; }
.f-stats b { display: block; color: #fff; font-size: 1.3rem; }
.f-stats span { font-size: .75rem; }
.f-sec { padding: 0 32px; }
.f-sec h4 { font-weight: 500; font-size: .85rem; border-bottom: 1px solid #2c3440; padding-bottom: 6px; margin: 10px 0 12px; }
.f-posters { display: flex; gap: 10px; }
.f-p { width: 128px; height: 190px; border-radius: 4px; box-shadow: inset 0 0 0 1px #fff2; position: relative; display: flex; align-items: end; padding: 8px; color: #fff; font-size: .78rem; font-weight: 700; }
.f-p small { position: absolute; top: 6px; left: 6px; background: #000a; padding: 2px 6px; border-radius: 3px; font-weight: 500; font-size: .65rem; }
.f-diary { display: grid; grid-template-columns: 70px 1fr 110px 40px; gap: 10px; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid #2c3440; align-items: center; }
.f-diary b { color: #fff; }
.f-g { color: #00e054; }
/* ---------- G: Trakt-inspired ---------- */
.g { background: #161616; color: #eee; font-family: "Montserrat", sans-serif; }
.g-hero { height: 150px; background: linear-gradient(120deg, #9f1239cc, #6d28d9cc), linear-gradient(0deg, #222, #444); display: flex; align-items: end; padding: 18px 28px; gap: 18px; }
.g-hero .av { width: 78px; height: 78px; border-radius: 50%; border: 3px solid #fff; background: #333; }
.g-hero h3 { font-size: 1.6rem; font-weight: 800; }
.g-hero p { font-size: .82rem; opacity: .9; }
.g-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; padding: 22px 28px 28px; }
.g-card { background: #222; border-radius: 6px; padding: 14px 16px; }
.g-card h4 { font-size: .8rem; color: #ed2224; margin-bottom: 10px; font-weight: 800; }
.g-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g-stat div b { font-size: 1.5rem; display: block; }
.g-stat div span { font-size: .72rem; color: #aaa; }
.g-prog { margin-top: 10px; }
.g-prog .t { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 4px; }
.g-bar { height: 6px; background: #333; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.g-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ed2224, #9f42c6); }
.g-hist { display: grid; grid-template-columns: 46px 1fr 70px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #2d2d2d; font-size: .82rem; }
.g-hist .th { width: 46px; height: 30px; border-radius: 3px; }
.g-hist span { color: #aaa; font-size: .75rem; }
</style>
</head>
<body>
<div class="intro">
<h1>Style round 1: seven directions</h1>
<p>Each mockup shows the same content: your shareable page with favourites from four kinds of media, plus recent activity. A–D are new looks. E–G borrow from Hardcover, Letterboxd and Trakt. Mark the ones you like (more than one is fine), then tell me in the terminal what works and what doesn't in each.</p>
</div>
<!-- A -->
<section class="style">
<div class="style-head"><h2>A. Card catalogue</h2><p>Every entry is an index card in your own library. Personal, archival, a little bookish.</p><button class="pick" data-choice="a-catalogue" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame a">
<div class="a-top"><h3>The collection of <i>Lucas W.</i></h3><span>1,284 entries · catalogued since 2014</span></div>
<div class="a-drawer">
<div class="a-card"><div class="call">BK · 823.92 LEI</div><h4>From the Library of Jurgen Leitner</h4><div class="by">book, read twice</div><div class="note">"Don't read it in the dark."</div><div class="stamp">★ 5 / 5</div></div>
<div class="a-card"><div class="call">AU · 791.44 MAG</div><h4>The Magnus Archives</h4><div class="by">podcast, 200 episodes</div><div class="note">Series rated separately</div><div class="stamp">★ 5 / 5</div></div>
<div class="a-card"><div class="call">GM · 794.8 VOI</div><h4>Voices of the Void</h4><div class="by">game, 41 h played</div><div class="note">Bought: itch.io, 2023</div><div class="stamp">★ 4 / 5</div></div>
<div class="a-card"><div class="call">TV · 791.45 TWI</div><h4>The Twilight Zone</h4><div class="by">series, 1959</div><div class="note">Watching s3, slowly</div><div class="stamp" style="border-color:#7a5b10;color:#7a5b10">IN PROGRESS</div></div>
</div>
<div class="a-log">
<div><span>28 Oct 2026</span><span>Annihilation — finished</span><span>book</span><span>★★★★½</span></div>
<div><span>26 Oct 2026</span><span>Outer Wilds — 3rd playthrough</span><span>game</span><span>★★★★★</span></div>
<div><span>25 Oct 2026</span><span>Severance s2e04</span><span>tv</span><span>—</span></div>
</div>
</div>
</section>
<!-- B -->
<section class="style">
<div class="style-head"><h2>B. The shelf</h2><p>Everything sits as a spine on one shelf, whatever the medium. Colour shows the kind of media; width shows how long it took.</p><button class="pick" data-choice="b-shelf" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame b">
<div class="b-top"><h3>Lucas's shelf</h3><p>Things that stayed with me. Books, games, shows and records on one shelf.</p></div>
<div class="b-shelf">
<div class="b-sp" style="--w:46px;width:46px;height:230px;background:#6b3fa0">From the Library of Jurgen Leitner <small>2025</small></div>
<div class="b-sp" style="width:78px;height:250px;background:#2f6b58">The Magnus Archives <small>200 ep</small></div>
<div class="b-sp" style="width:58px;height:205px;background:#c1652f">Voices of the Void <small>41 h</small></div>
<div class="b-sp" style="width:64px;height:240px;background:#344b7a">The Twilight Zone <small>s1–s3</small></div>
<div class="b-sp" style="width:40px;height:185px;background:#6b3fa0">Annihilation <small>2026</small></div>
<div class="b-sp leaning" style="width:52px;height:215px;background:#c1652f">Outer Wilds <small>3×</small></div>
<div class="b-sp" style="width:36px;height:200px;background:#a33b62">Lateralus <small>LP</small></div>
<div class="b-sp" style="width:60px;height:225px;background:#344b7a">Severance <small>s2</small></div>
<div class="b-box"><span>Box set</span><span style="font-size:1.1rem">Silent Hill, everything<br><small style="font-weight:500">12 entries, my order</small></span></div>
</div>
<div class="b-legend"><span style="--c:#6b3fa0">Books</span><span style="--c:#2f6b58">Audio</span><span style="--c:#c1652f">Games</span><span style="--c:#344b7a">Film &amp; TV</span><span style="--c:#a33b62">Music</span></div>
</div>
</section>
<!-- C -->
<section class="style">
<div class="style-head"><h2>C. Scrapbook</h2><p>A personal page that feels made by hand: your screenshots, notes and tickets pinned up. Leans hard into "my page, my way."</p><button class="pick" data-choice="c-scrapbook" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame c">
<h3>stuff that got under my skin</h3>
<p class="sub">Lucas W. — updated last Tuesday</p>
<div class="c-board">
<div class="c-pol" style="left:0;top:10px;transform:rotate(-4deg)"><div class="c-tape"></div><div class="img" style="background:linear-gradient(160deg,#1b2a1f,#4f6b3a 60%,#c9d18a)"></div><div class="cap">Voices of the Void, night 12</div></div>
<div class="c-pol" style="left:220px;top:40px;transform:rotate(3deg)"><div class="c-tape" style="left:40px;transform:rotate(6deg)"></div><div class="img" style="background:radial-gradient(circle at 40% 40%,#e0e0e0,#3a3a3a 70%)"></div><div class="cap">Twilight Zone, s1e8 ★★★★★</div></div>
<div class="c-note" style="left:450px;top:0;transform:rotate(-2deg)">The Magnus Archives —<br>finished all 200 episodes. The series gets 5 stars even though season 2 dragged. Episodes rated on their own.</div>
<div class="c-ticket" style="left:470px;top:170px;transform:rotate(2deg)"><b>From the Library of Jurgen Leitner</b><br>Bought: Waterstones, Leeds, £14<br>Read twice · ★★★★★</div>
<div class="c-pol" style="left:760px;top:30px;transform:rotate(5deg);width:170px"><div class="c-tape" style="left:50px"></div><div class="img" style="height:130px;background:linear-gradient(200deg,#f3a35c,#5c2d6e)"></div><div class="cap">Outer Wilds, 3rd time</div></div>
</div>
</div>
</section>
<!-- D -->
<section class="style">
<div class="style-head"><h2>D. River</h2><p>Time is the organiser. Everything you consumed flows by month, and threads link related things across media.</p><button class="pick" data-choice="d-river" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame d">
<h3>Lucas, the last three months</h3>
<p class="sub">43 entries across 5 kinds of media</p>
<div class="d-river">
<div class="d-month">Oct</div>
<div class="d-row">
<div class="d-chip"><span class="d-dot" style="--c:#b9a6f2">BK</span><b>Annihilation</b><em>★ 4.5</em></div>
<div class="d-chip"><span class="d-dot" style="--c:#f2a1a1">GM</span><b>Outer Wilds</b><span>3rd run</span><em>★ 5</em></div>
<div class="d-chip"><span class="d-dot" style="--c:#9ad0c2">TV</span><b>Severance</b><span>s2 · 4 ep</span></div>
</div>
<div class="d-month">Sep</div>
<div class="d-row">
<div class="d-chip"><span class="d-dot" style="--c:#ffd27a">AU</span><b>The Magnus Archives</b><span>finished</span><em>★ 5</em></div>
<div class="d-chip"><span class="d-dot" style="--c:#b9a6f2">BK</span><b>From the Library of Jurgen Leitner</b><em>★ 5</em></div>
</div>
<div class="d-month">Aug</div>
<div class="d-row">
<div class="d-chip"><span class="d-dot" style="--c:#f2a1a1">GM</span><b>Voices of the Void</b><span>41 h</span><em>★ 4</em></div>
<div class="d-chip"><span class="d-dot" style="--c:#9ad0c2">TV</span><b>The Twilight Zone</b><span>s1–s3</span></div>
</div>
</div>
<div class="d-thread"><p>Thread: <b style="color:#fff">"Cosmic dread"</b></p><div class="line"></div><p>Leitner → Magnus Archives → Voices of the Void → Twilight Zone</p></div>
</div>
</section>
<!-- E -->
<section class="style">
<div class="style-head"><h2>E. Hardcover-inspired</h2><p>Hardcover's dark, calm library app, stretched to every kind of media. Shelves by status, series rated as a whole.</p><button class="pick" data-choice="e-hardcover" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame e">
<div class="e-side"><div class="logo">STTracker</div><div class="on">Library</div><div>Log</div><div>Lists</div><div>Owned</div><div>Sources</div><div>Changes</div></div>
<div class="e-main">
<h3>Library</h3><p class="sub">1,284 entries · 6 sources connected · last sync 4 min ago</p>
<div class="e-tabs"><span class="on">All media</span><span>Books</span><span>Games</span><span>Film &amp; TV</span><span>Audio</span><span>Music</span></div>
<div class="e-series"><span><b>The Magnus Archives</b> — series · 200 of 200 episodes</span><span class="e-stars">★★★★★</span></div>
<div class="e-row"><div class="e-cover" style="background:linear-gradient(#6b3fa0,#2a1747)"></div><div><h4>From the Library of Jurgen Leitner</h4><div class="meta">Book · Hardcover · read twice</div></div><div class="e-stars">★★★★★</div><div class="e-status">Read</div></div>
<div class="e-row"><div class="e-cover" style="background:linear-gradient(#c1652f,#3d1d0c)"></div><div><h4>Voices of the Void</h4><div class="meta">Game · Steam · 41 h</div></div><div class="e-stars">★★★★☆</div><div class="e-status">Played</div></div>
<div class="e-row"><div class="e-cover" style="background:linear-gradient(#344b7a,#111a2e)"></div><div><h4>The Twilight Zone</h4><div class="meta">Show · Trakt · season 3 of 5</div></div><div class="e-stars" style="opacity:.35">☆☆☆☆☆</div><div class="e-status" style="background:#6d5dfc">Watching</div></div>
</div>
</div>
</section>
<!-- F -->
<section class="style">
<div class="style-head"><h2>F. Letterboxd-inspired</h2><p>Poster-first profile with favourites up top and a diary underneath. Very shareable; covers carry the page.</p><button class="pick" data-choice="f-letterboxd" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame f">
<div class="f-nav"><span class="logo"><i style="background:#ff8000"></i><i style="background:#00e054"></i><i style="background:#40bcf4"></i></span><span>Profile</span><span>Diary</span><span>Lists</span><span>Library</span></div>
<div class="f-prof"><div class="f-av"></div><div><h3>Lucas W.</h3><span>Reads, plays, watches, listens.</span></div><div class="f-stats"><div><b>312</b><span>books</span></div><div><b>188</b><span>games</span></div><div><b>640</b><span>films &amp; shows</span></div><div><b>14k</b><span>tracks</span></div></div></div>
<div class="f-sec"><h4>Favourites</h4>
<div class="f-posters">
<div class="f-p" style="background:linear-gradient(#6b3fa0,#1d0f30)"><small>BOOK</small>From the Library of Jurgen Leitner</div>
<div class="f-p" style="background:linear-gradient(#2f6b58,#0d211b)"><small>PODCAST</small>The Magnus Archives</div>
<div class="f-p" style="background:linear-gradient(#c1652f,#2b1306)"><small>GAME</small>Voices of the Void</div>
<div class="f-p" style="background:linear-gradient(#344b7a,#0c1324)"><small>SERIES</small>The Twilight Zone</div>
</div>
<h4>Diary</h4>
<div class="f-diary"><span>OCT 28</span><b>Annihilation</b><span class="f-g">★★★★½</span><span>♥</span></div>
<div class="f-diary"><span>OCT 26</span><b>Outer Wilds <span style="font-weight:400;color:#9ab">· replay</span></b><span class="f-g">★★★★★</span><span>♥</span></div>
</div>
</div>
</section>
<!-- G -->
<section class="style">
<div class="style-head"><h2>G. Trakt-inspired</h2><p>Stats-heavy dashboard with progress bars, totals and history. Great for "what am I in the middle of", less personal.</p><button class="pick" data-choice="g-trakt" onclick="this.classList.toggle('selected')">I like this</button></div>
<div class="frame g">
<div class="g-hero"><div class="av"></div><div><h3>Lucas W.</h3><p>Joined 2014 · 6 sources connected</p></div></div>
<div class="g-body">
<div>
<div class="g-card"><h4>This year</h4><div class="g-stat"><div><b>38</b><span>books</span></div><div><b>612 h</b><span>played</span></div><div><b>214</b><span>episodes</span></div><div><b>9.1k</b><span>scrobbles</span></div></div></div>
<div class="g-card" style="margin-top:14px"><h4>In progress</h4>
<div class="g-prog"><div class="t"><span>The Twilight Zone</span><span>58%</span></div><div class="g-bar"><i style="width:58%"></i></div>
<div class="t"><span>Severance s2</span><span>4 / 10</span></div><div class="g-bar"><i style="width:40%"></i></div>
<div class="t"><span>Children of Time</span><span>p. 212 / 600</span></div><div class="g-bar"><i style="width:35%"></i></div></div>
</div>
</div>
<div class="g-card"><h4>History</h4>
<div class="g-hist"><div class="th" style="background:#6b3fa0"></div><div>Annihilation<br><span>finished · book</span></div><span>2 d ago</span></div>
<div class="g-hist"><div class="th" style="background:#c1652f"></div><div>Outer Wilds<br><span>played 3 h · game</span></div><span>4 d ago</span></div>
<div class="g-hist"><div class="th" style="background:#344b7a"></div><div>Severance s2e04<br><span>watched · tv</span></div><span>5 d ago</span></div>
<div class="g-hist"><div class="th" style="background:#a33b62"></div><div>Tool — Lateralus<br><span>full album · music</span></div><span>5 d ago</span></div>
</div>
</div>
</div>
</section>
</body>
</html>
@@ -0,0 +1,215 @@
<!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 &amp; audio</span><span style="--c:#f2a1a1">Games</span><span style="--c:#9ad0c2">Film &amp; TV</span></div>
</div>
</section>
</body>
</html>