156 lines
3.6 KiB
HTML
156 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PDF Viewer — Brittle</title>
|
||
<style>
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
html, body {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #1d2021;
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
color: #ebdbb2;
|
||
}
|
||
|
||
body { display: flex; flex-direction: column; }
|
||
|
||
#error-banner {
|
||
display: none;
|
||
flex-shrink: 0;
|
||
background: #fb4934;
|
||
color: #1d2021;
|
||
padding: 10px 20px;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid #cc241d;
|
||
}
|
||
|
||
#toolbar {
|
||
flex-shrink: 0;
|
||
background: #282828;
|
||
border-bottom: 1px solid #504945;
|
||
padding: 5px 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
#zoom-controls { display: flex; align-items: center; gap: 6px; }
|
||
|
||
button {
|
||
background: #3c3836;
|
||
color: #ebdbb2;
|
||
border: 1px solid #504945;
|
||
border-radius: 4px;
|
||
padding: 3px 10px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
min-width: 28px;
|
||
}
|
||
button:hover { background: #504945; }
|
||
|
||
#zoom-label {
|
||
min-width: 46px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #a89984;
|
||
}
|
||
|
||
#page-indicator {
|
||
color: #a89984;
|
||
font-size: 12px;
|
||
}
|
||
|
||
#status {
|
||
margin-left: auto;
|
||
color: #928374;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Scrollable viewport — contains the pages wrapper */
|
||
#canvas-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: auto;
|
||
background: #1d2021;
|
||
}
|
||
|
||
/* Column of page placeholders/canvases */
|
||
#pages-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 20px 0;
|
||
min-width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Each page: sized div that holds a canvas once rendered.
|
||
White background makes unrendered placeholders look like blank pages. */
|
||
.page-wrapper {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
background: #fff;
|
||
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
.page-wrapper canvas {
|
||
display: block;
|
||
}
|
||
|
||
/* Invisible text overlay for native selection. Spans are positioned via
|
||
CSS matrix() derived from PDF text transforms; color:transparent keeps
|
||
the canvas visible while the browser handles selection normally. */
|
||
.textLayer {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
line-height: 1;
|
||
text-size-adjust: none;
|
||
forced-color-adjust: none;
|
||
}
|
||
|
||
.textLayer span {
|
||
color: transparent;
|
||
position: absolute;
|
||
white-space: pre;
|
||
cursor: text;
|
||
transform-origin: 0% 0%;
|
||
font-size: 1px;
|
||
user-select: text;
|
||
-webkit-user-select: text;
|
||
}
|
||
|
||
.textLayer ::selection {
|
||
background: rgba(100, 160, 255, 0.35);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="error-banner"></div>
|
||
|
||
<div id="toolbar">
|
||
<div id="zoom-controls">
|
||
<button id="btn-zoom-out" title="Zoom out [ − ]">−</button>
|
||
<span id="zoom-label">—</span>
|
||
<button id="btn-zoom-in" title="Zoom in [ + ]">+</button>
|
||
<button id="btn-zoom-fit" title="Fit width [ 0 ]">Fit</button>
|
||
</div>
|
||
<span id="page-indicator">— / —</span>
|
||
<span id="status">Loading…</span>
|
||
</div>
|
||
|
||
<div id="canvas-container">
|
||
<div id="pages-wrapper"></div>
|
||
</div>
|
||
|
||
<script src="brittle://app/viewer/viewer.bundle.js"></script>
|
||
</body>
|
||
</html>
|