mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-11 21:41:02 +08:00
Kiro Agent
858a7479bf
Implements docs/prototypes/Reader V3 主题语义令牌.md (v3.1): - 暖陶 (default), 雾蓝, 青绿 app themes plus the reading-only 黑白灰, each light and dark. Components read --color-* tokens from styles/theme-tokens.css, selected by data-theme + data-mode; the TypeScript mirror lives in shared/theme/theme.ts. - Brand is split per the spec: brand/ch-* only fill (with on-brand/on-ch on top), brand-text/ch-*-text for text. --reader-accent/--media-accent are now brand text; --reader-fill/--media-fill are brand fills. Selected segmented controls use brand-soft + brand-text. - One preference per server+account (reader.theme.v2): app theme, mode (system/light/dark), the follow-system light/dark pair, and the reading theme. V3 choices migrate per spec §8 (rose falls back to 暖陶 light). - 外观与主题 rebuilt from prototype 23: follow-system switch with the light/dark pair, app-theme cards with light/dark previews, and the reading theme (跟随应用 / 黑白灰). - Reader: 黑白灰 is set on the reader container only; the appearance panel offers 跟随应用/黑白灰 and 明暗; day/night sets the mode; the e-ink preset uses 黑白灰 light. - Video and music players wear the current theme's dark values (§4.7). - Removed the legacy light/sepia/green/dark palettes and the <html data-theme> writes from reader settings, which would now collide with data-theme="green". - Tests: theme-tokens.test.ts keeps CSS and TS values identical and checks the §5 contrast pairs for all 8 palettes; theme.test.tsx covers migration, resolution, the controller and the settings page.
93 lines
9.5 KiB
HTML
93 lines
9.5 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1"
|
|
/>
|
|
<!--
|
|
maximum-scale=1 disables pinch-zoom. That is deliberate: text size belongs
|
|
to the reader's own control, and a visual zoom fights CSS pagination, which
|
|
is measured in viewport units. Android WebView honours this; iOS Safari
|
|
ignores it, which is acceptable since iOS is out of scope for v1.
|
|
|
|
No external font: a self-hosted reader must work with no outbound network
|
|
at all, and a webfont would also fail on the LAN with no internet uplink.
|
|
The book's own embedded fonts are unaffected — they load from the archive.
|
|
|
|
The icon font is not an exception to this. It is a 16KB file in the bundle,
|
|
loaded by a relative URL from the same directory as this document, so it is
|
|
covered by the same rule: nothing here reaches the network.
|
|
-->
|
|
<meta name="color-scheme" content="light dark" />
|
|
<meta name="theme-color" content="#fdf9f6" />
|
|
<link rel="manifest" href="./manifest.webmanifest" />
|
|
<link rel="icon" type="image/svg+xml" href="./icons/reader.svg" />
|
|
<link rel="alternate icon" type="image/png" href="./icons/icon-192.png" />
|
|
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="reader" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<!-- startup-images:start -->
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2532x1170.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1179x2556.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2556x1179.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1206x2622.png" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2622x1206.png" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1792x828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2778x1284.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1290x2796.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2796x1290.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1320x2868.png" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2868x1320.png" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1620x2160.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2160x1620.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1640x2360.png" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2360x1640.png" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2388x1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
|
|
<link rel="apple-touch-startup-image" href="./startup/startup-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
|
|
<!-- startup-images:end -->
|
|
<title>reader</title>
|
|
<style>
|
|
/* First paint only: prevents a white flash before the bundle applies the
|
|
stored theme, and gives the reader something to look at on a slow LAN. */
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
background: #fdf9f6;
|
|
}
|
|
.app-startup { position: fixed; inset: 0; display: grid; place-items: center; background: #fdf9f6; z-index: 9999; }
|
|
/* 暖陶 is the default theme; its dark half until the stored choice is applied. */
|
|
@media (prefers-color-scheme: dark) {
|
|
html, body, .app-startup { background: #1f1713; }
|
|
}
|
|
.app-startup img { width: 96px; height: 96px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<div id="app-startup" class="app-startup" role="status" aria-label="正在启动 reader"><img src="./icons/icon-192.png" width="96" height="96" alt="" /></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|