feat: render index via Mustache template with spine-index-model
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Spine — Direction B (journal)</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.31.0/iconfont/tabler-icons.min.css" />
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #efeee9; --bg-primary: #ffffff; --bg-secondary: #f5f4ef;
|
||||
--text-primary: #1d1d1b; --text-secondary: #5f5e5a; --text-tertiary: #8a8980;
|
||||
--bg-info: #e6f1fb; --text-info: #0c447c; --border-info: #378add;
|
||||
--bg-warning: #faeeda; --text-warning: #854f0b;
|
||||
--border-tertiary: rgba(0,0,0,0.12); --border-secondary: rgba(0,0,0,0.22);
|
||||
--radius-md: 8px; --radius-lg: 12px;
|
||||
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-page: #161615; --bg-primary: #232321; --bg-secondary: #1c1c1a;
|
||||
--text-primary: #ededeb; --text-secondary: #a8a79f; --text-tertiary: #76756d;
|
||||
--bg-info: #14304a; --text-info: #b5d4f4; --border-info: #378add;
|
||||
--bg-warning: #3a2c12; --text-warning: #fac775;
|
||||
--border-tertiary: rgba(255,255,255,0.14); --border-secondary: rgba(255,255,255,0.24);
|
||||
}
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--bg-page); color: var(--text-primary);
|
||||
font-family: var(--sans); padding: 28px 16px; }
|
||||
.wrap { max-width: 560px; margin: 0 auto; }
|
||||
.surface { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 1.25rem; }
|
||||
.card { background: var(--bg-primary); border:0.5px solid var(--border-tertiary);
|
||||
border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
|
||||
.cover { width:44px; height:60px; border-radius:var(--radius-md); background:var(--bg-info);
|
||||
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||||
.pill { background:var(--bg-warning); color:var(--text-warning); padding:2px 9px;
|
||||
border-radius:var(--radius-md); font-size:12px; }
|
||||
.seg { flex:1; text-align:center; padding:7px 0; font-size:13px; border:0.5px solid var(--border-tertiary);
|
||||
border-radius:var(--radius-md); color:var(--text-secondary); }
|
||||
.seg.active { border:2px solid var(--border-info); color:var(--text-info); background:var(--bg-info); }
|
||||
.seclabel { font-size:12px; letter-spacing:0.03em; color:var(--text-tertiary); margin-bottom:10px; }
|
||||
.thread { border-left:2px solid var(--border-tertiary); padding-left:14px; margin-bottom:14px; }
|
||||
.entry { margin-bottom:12px; }
|
||||
.entry:last-child { margin-bottom:0; }
|
||||
.edate { font-size:12px; color:var(--text-tertiary); margin-bottom:2px; }
|
||||
.etext { font-size:14px; line-height:1.5; }
|
||||
input, button { font-family: var(--sans); font-size:14px; }
|
||||
input { height:36px; padding:0 10px; border:0.5px solid var(--border-secondary);
|
||||
border-radius:var(--radius-md); background:var(--bg-primary); color:var(--text-primary); }
|
||||
input::placeholder { color:var(--text-tertiary); }
|
||||
button { height:36px; padding:0 12px; border:0.5px solid var(--border-secondary);
|
||||
border-radius:var(--radius-md); background:transparent; color:var(--text-primary); cursor:pointer; }
|
||||
button:hover { background:var(--bg-secondary); }
|
||||
.avatar { width:30px; height:30px; border-radius:50%; background:var(--bg-info);
|
||||
display:flex; align-items:center; justify-content:center; font-size:12px;
|
||||
color:var(--text-info); flex-shrink:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="surface">
|
||||
<div class="card">
|
||||
|
||||
<div style="display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;">
|
||||
<div class="cover"><i class="ti ti-book" style="font-size:22px; color:var(--text-info);" aria-hidden="true"></i></div>
|
||||
<div style="flex:1; min-width:0;">
|
||||
<div style="font-weight:500; font-size:16px;">Use of Weapons</div>
|
||||
<div style="font-size:14px; color:var(--text-secondary); margin-bottom:6px;">Iain M. Banks</div>
|
||||
<span class="pill">Reading</span>
|
||||
<span style="color:var(--text-tertiary); font-size:13px; margin-left:8px;">started 20 Feb · 62%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:8px; margin-bottom:18px;">
|
||||
<div class="seg"><i class="ti ti-book" style="font-size:15px; vertical-align:-2px; margin-right:5px;" aria-hidden="true"></i>Hardcover</div>
|
||||
<div class="seg"><i class="ti ti-device-tablet" style="font-size:15px; vertical-align:-2px; margin-right:5px;" aria-hidden="true"></i>eBook</div>
|
||||
<div class="seg active"><i class="ti ti-headphones" style="font-size:15px; vertical-align:-2px; margin-right:5px;" aria-hidden="true"></i>Audiobook</div>
|
||||
</div>
|
||||
|
||||
<div class="seclabel">Reading log</div>
|
||||
<div class="thread">
|
||||
<div class="entry">
|
||||
<div class="edate">2 Mar</div>
|
||||
<div class="etext">The two-track structure is doing something I can't name yet. Suspicious of the chair.</div>
|
||||
</div>
|
||||
<div class="entry">
|
||||
<div class="edate">7 Mar</div>
|
||||
<div class="etext">Zakalwe's competence is starting to read as a wound. Banks never lets a skill be free.</div>
|
||||
</div>
|
||||
<div class="entry">
|
||||
<div class="edate">9 Mar</div>
|
||||
<div class="etext">The chapter numbering. Oh.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:8px; margin-bottom:20px;">
|
||||
<input type="text" placeholder="Add a note at 62%…" style="flex:1;" />
|
||||
<button><i class="ti ti-plus" style="font-size:15px; vertical-align:-2px; margin-right:4px;" aria-hidden="true"></i>Log note</button>
|
||||
</div>
|
||||
|
||||
<div style="border-top:0.5px solid var(--border-tertiary); padding-top:14px;">
|
||||
<div class="seclabel">On your radar</div>
|
||||
<div style="display:flex; align-items:flex-start; gap:10px; margin-bottom:14px;">
|
||||
<div class="avatar">PK</div>
|
||||
<div style="font-size:14px; line-height:1.5;"><span style="font-weight:500;">Priya</span> <span style="color:var(--text-tertiary);">· 12 Jan</span><br>"If you liked Player of Games, this one will wreck you in a better way."</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input type="text" placeholder="Recommended by…" style="width:34%;" />
|
||||
<input type="text" placeholder="Why it's on your radar…" style="flex:1;" />
|
||||
<button aria-label="Save recommendation"><i class="ti ti-check" style="font-size:16px;" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user