jbrechtel
ca03e87a46
- Replace Pico CSS with index-style custom CSS variables - Redesign layout: back breadcrumb, info table, shelf/status selects - Update spine-book-model: add shelf_name, format_icon/label, tags_display, date display fields, rating display, status/shelf options - Remove unused fields: meta, progress_label, formats array - Update spine-book-model-test.el: 23 tests cover all new fields - Add --text-danger CSS variable for remove button
162 lines
9.2 KiB
Plaintext
162 lines
9.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>Spine — {{title}}</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;
|
|
--bg-success: #e1f5ee; --text-success: #085041;
|
|
--text-danger: #c62828;
|
|
--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;
|
|
--bg-success: #103a30; --text-success: #9fe1cb;
|
|
--text-danger: #ef9a9a;
|
|
--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: 600px; 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: 48px; height: 66px; border-radius: var(--radius-md); background: var(--bg-info);
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.pill { padding: 2px 9px; border-radius: var(--radius-md); font-size: 12px; }
|
|
.pill.want { background: var(--bg-info); color: var(--text-info); }
|
|
.pill.reading { background: var(--bg-warning); color: var(--text-warning); }
|
|
.pill.read { background: var(--bg-success); color: var(--text-success); }
|
|
.tag { background: var(--bg-secondary); padding: 1px 7px; border-radius: var(--radius-md); margin-left: 4px; font-size: 12px; }
|
|
.tt { font-size: 12px; color: var(--text-tertiary); }
|
|
input, select, button { font-family: var(--sans); font-size: 13px; }
|
|
input, select { height: 34px; padding: 0 8px; border: 0.5px solid var(--border-secondary);
|
|
border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); width: 100%; }
|
|
input::placeholder { color: var(--text-tertiary); }
|
|
button { height: auto; padding: 2px 4px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="surface">
|
|
<div class="card">
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px;">
|
|
<a href="{{back_url}}" style="color: var(--text-tertiary); text-decoration: none; display: flex; align-items: center; gap: 8px;">
|
|
<i class="ti ti-arrow-left" style="font-size: 16px;" aria-hidden="true"></i>
|
|
<i class="ti ti-folder" style="font-size: 15px;" aria-hidden="true"></i>
|
|
<span>{{shelf_name}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px;">
|
|
<div class="cover"><i class="ti {{cover_icon}}" style="font-size: 24px; color: var(--text-info);" aria-hidden="true"></i></div>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<p style="font-weight: 500; font-size: 18px; margin: 0 0 2px;">{{title}}</p>
|
|
<p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 8px;">{{author}}</p>
|
|
{{#status_class}}
|
|
<span class="pill {{status_class}}">{{status_label}}</span>
|
|
{{/status_class}}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;">
|
|
<div>
|
|
<label style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 4px;">
|
|
<i class="ti ti-folder" style="font-size: 14px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Shelf
|
|
</label>
|
|
<select>
|
|
{{#shelf_options}}
|
|
<option{{#selected}} selected{{/selected}}>{{name}}</option>
|
|
{{/shelf_options}}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 4px;">
|
|
<i class="ti ti-bookmark" style="font-size: 14px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Status
|
|
</label>
|
|
<select>
|
|
{{#status_options}}
|
|
<option{{#selected}} selected{{/selected}}>{{name}}</option>
|
|
{{/status_options}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 16px;">
|
|
<table style="width: 100%; font-size: 13px; border-collapse: collapse;">
|
|
{{#format_label}}
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0; width: 38%;">Format</td>
|
|
<td style="text-align: right; padding: 4px 0;"><i class="ti {{format_icon}}" style="font-size: 15px; vertical-align: -2px; margin-right: 5px; color: var(--text-tertiary);" aria-hidden="true"></i>{{format_label}}</td></tr>
|
|
{{/format_label}}
|
|
{{#tags_display}}
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Tags</td>
|
|
<td style="text-align: right; padding: 4px 0;">{{{tags_display}}}</td></tr>
|
|
{{/tags_display}}
|
|
{{#added_display}}
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Added</td>
|
|
<td style="text-align: right; padding: 4px 0;">{{added_display}}</td></tr>
|
|
{{/added_display}}
|
|
{{#started_display}}
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Started</td>
|
|
<td style="text-align: right; padding: 4px 0;">{{started_display}}</td></tr>
|
|
{{/started_display}}
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Finished</td>
|
|
<td style="text-align: right; padding: 4px 0;{{^finished_display}} color: var(--text-tertiary);{{/finished_display}}">{{finished_display}}</td></tr>
|
|
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Rating</td>
|
|
<td style="text-align: right; padding: 4px 0;{{^has_rating}} color: var(--text-tertiary);{{/has_rating}}">{{rating_display}}</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
{{#notes}}
|
|
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 16px;">
|
|
<p style="font-size: 13px; color: var(--text-tertiary); margin: 0 0 10px;">Reading log</p>
|
|
{{#notes}}
|
|
<div style="display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;">
|
|
<span style="font-size: 12px; color: var(--text-tertiary); white-space: nowrap; padding-top: 1px;">{{date}}</span>
|
|
<span style="flex: 1; font-size: 14px; line-height: 1.5;">{{text}}</span>
|
|
</div>
|
|
{{/notes}}
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="text" placeholder="Add a note…" style="flex: 1;" />
|
|
<button style="width: auto; padding: 0 12px; border: 0.5px solid var(--border-secondary); border-radius: var(--radius-md);"><i class="ti ti-plus" style="font-size: 15px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Log note</button>
|
|
</div>
|
|
</div>
|
|
{{/notes}}
|
|
|
|
{{#recommendation}}
|
|
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 4px;">
|
|
<p style="font-size: 13px; color: var(--text-tertiary); margin: 0 0 10px;">On your radar</p>
|
|
<div style="display: flex; align-items: flex-start; gap: 10px;">
|
|
<div style="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;">{{initials}}</div>
|
|
<div style="font-size: 14px; line-height: 1.5;"><span style="font-weight: 500;">{{by}}</span><br />"{{note}}"</div>
|
|
</div>
|
|
</div>
|
|
{{/recommendation}}
|
|
|
|
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 12px; margin-top: 14px; display: flex; justify-content: space-between; align-items: center;">
|
|
<button style="color: var(--text-danger); font-size: 13px;"><i class="ti ti-trash" style="font-size: 14px; vertical-align: -2px; margin-right: 3px;" aria-hidden="true"></i>Remove</button>
|
|
<button style="color: var(--text-secondary); font-size: 13px;"><i class="ti ti-external-link" style="font-size: 14px; vertical-align: -2px; margin-right: 3px;" aria-hidden="true"></i>Open in Emacs</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|