188 lines
4.7 KiB
HTML
188 lines
4.7 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;
|
||
}
|
||
|
||
/* Text layer — transparent spans matching PDF text positions for selection.
|
||
pointer-events must NOT be none on the container: WebKit does not allow
|
||
text selection through a pointer-events:none parent, even when child
|
||
spans have pointer-events:all. */
|
||
.text-layer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
overflow: hidden;
|
||
line-height: 1;
|
||
cursor: text;
|
||
user-select: text;
|
||
-webkit-user-select: text;
|
||
}
|
||
|
||
.text-layer span,
|
||
.text-layer div,
|
||
.text-layer br {
|
||
color: transparent;
|
||
position: absolute;
|
||
white-space: pre;
|
||
cursor: text;
|
||
transform-origin: 0% 0%;
|
||
}
|
||
|
||
.text-layer ::selection {
|
||
background: rgba(100, 160, 255, 0.3);
|
||
}
|
||
|
||
/* Annotation overlay — SVG with highlight polygons */
|
||
.annot-layer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
overflow: visible;
|
||
}
|
||
|
||
.annot-layer polygon.highlight {
|
||
fill: rgba(255, 220, 0, 0.38);
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.annot-layer polygon.highlight:hover {
|
||
fill: rgba(255, 180, 0, 0.55);
|
||
}
|
||
|
||
.annot-layer polygon.highlight.selected {
|
||
fill: rgba(255, 140, 0, 0.55);
|
||
stroke: #e07000;
|
||
stroke-width: 1.5;
|
||
}
|
||
</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/pdfjs/build/pdf.min.js"></script>
|
||
<script type="module" src="brittle://app/viewer/performance-manager.js"></script>
|
||
<script type="module" src="brittle://app/viewer/render-system.js"></script>
|
||
<script type="module" src="brittle://app/viewer/visibility-manager.js"></script>
|
||
<script type="module" src="brittle://app/viewer/zoom-controller-enhanced.js"></script>
|
||
<script type="module" src="brittle://app/viewer/page-manager-enhanced.js"></script>
|
||
<script type="module" src="brittle://app/viewer/viewer.js"></script>
|
||
</body>
|
||
</html>
|