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]>
294 lines
25 KiB
HTML
294 lines
25 KiB
HTML
<!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 & 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 & 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 & 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>
|