MaashkinoozheandClaude Opus 5.5
74842c59e0
Reader: bookmark button and M save the page (Flow: page at the reading line, Book: the spread) with an optional dragged region, exactly one category (Twist, Hot, Awesome, Cute, Funny, Feels) and a note. I now toggles the bars; ? lists all keys. Keys dispatch through public/keys.js, which also feeds the new Settings -> Keyboard shortcuts section. Manga page: "Your moments" strip of crops (story or recent order, category filters), viewer with step, full page, edit, delete and "Open in reader" (read.html ...&p=). Moments point at pages by file name and show "page moved" when the file is gone. Private per user. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
60 lines
3.5 KiB
HTML
60 lines
3.5 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<title>MangaCircus</title>
|
||
<link rel="stylesheet" href="app.css">
|
||
<link rel="icon" href="icon.svg">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<meta name="theme-color" content="#0b0b0c">
|
||
<script src="common.js" defer></script>
|
||
<script src="reading-clock-core.js" defer></script>
|
||
<script src="reading-clock.js" defer></script>
|
||
<script src="keys.js" defer></script>
|
||
<script src="moments.js" defer></script>
|
||
<script src="reader.js" defer></script>
|
||
</head>
|
||
<body class="reader">
|
||
<div id="stage" tabindex="-1"><div id="canvas"><p class="loading">Loading…</p></div></div>
|
||
|
||
<div id="top" class="bar">
|
||
<a id="back" class="btn icon" href="./" title="Back to the manga" aria-label="Back">‹</a>
|
||
<div id="title" class="grow"></div>
|
||
<select id="chsel" title="Jump to a chapter" aria-label="Chapter"></select>
|
||
<button id="moment" class="btn icon moment-btn" title="Save a moment of this page (M)" aria-label="Save a moment"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3.5h10v17l-5-3.6l-5 3.6z"/><path d="M19.5 2.5v5M17 5h5"/></svg></button>
|
||
<button id="fs" class="btn icon" title="Fullscreen" aria-label="Fullscreen"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg></button>
|
||
</div>
|
||
|
||
<div id="bot" class="bar">
|
||
<div class="row">
|
||
<input id="slider" type="range" min="1" max="1" value="1" aria-label="Page">
|
||
<span id="pageno"></span>
|
||
</div>
|
||
<div id="tools">
|
||
<a id="prevch" class="btn" title="Previous chapter">‹<span class="wide-only"> Prev</span></a>
|
||
<div id="modes" class="seg" role="group" aria-label="View mode">
|
||
<button data-mode="flow" title="Continuous flow: all pages below each other">Flow</button>
|
||
<button data-mode="page" title="One page at a time">Page</button>
|
||
<button data-mode="book" title="Two pages side by side, like an open book">Book</button>
|
||
</div>
|
||
<button id="page-tone" class="btn page-tone" type="button" title="Change page colors; controls and theme stay the same" aria-label="Page tone: Original. Change page colors">Tone: Original</button>
|
||
<button id="shift" class="btn" title="Page pairs look wrong? Shift them by one page">⇄<span class="wide-only"> Shift</span></button>
|
||
<div class="seg zoom-controls" role="group" aria-label="Page zoom">
|
||
<button id="zoomout" title="Zoom out 5%" aria-label="Zoom out 5%">−</button>
|
||
<button id="zoom" title="Current page zoom. Click to fit the screen again.">100%</button>
|
||
<button id="zoomin" title="Zoom in 5%" aria-label="Zoom in 5%">+</button>
|
||
</div>
|
||
<button id="readclock" class="btn clock-chip" hidden aria-label="Active Reading Clock"><span class="clock-icon">⏸</span> <span class="clock-time">00:00</span><span class="clock-label"></span></button>
|
||
<select id="ver" title="Version of this chapter" aria-label="Version"></select>
|
||
<a id="nextch" class="btn" title="Next chapter"><span class="wide-only">Next </span>›</a>
|
||
</div>
|
||
</div>
|
||
<div id="clockpanel" class="clock-panel" hidden></div>
|
||
<div id="toast"></div>
|
||
</body>
|
||
</html>
|