PDFouX-Viewer/index.html at main · ERFouX/PDFouX-Viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,minimum-scale=0.25" />
	<title>PDF Viewer</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="toolbar" role="toolbar" aria-label="toolbar">
		<!-- LEFT: Dark mode button -->
		<div style="display:flex;align-items:center;gap:8px;">
			<button id="dark-mode" class="btn" title="Dark mode" style="filter: grayscale(1);">🌙</button>
		</div>

		<!-- CENTER: page number -->
		<div style="display:flex;align-items:center;gap:8px;">
			<input id="page-num" type="number" value="1" min="1" aria-label="page number"> /
			<span id="page-count">0</span>
		</div>

		<!-- RIGHT: fit/zoom controls -->
		<div style="display:flex;align-items:center;gap:8px;">
			<button id="fit-width" class="btn" title="Fit to width" style="line-height:1;">↔</button>
			<span id="zoom-level">100%</span>
			<button id="zoom-out" class="btn" aria-label="zoom out">−</button>
			<button id="zoom-in" class="btn" aria-label="zoom in">+</button>
		</div>
	</div>

	<div id="pdf-container" tabindex="0" aria-label="PDF container">
		<div class="pages" id="pages"></div>
	</div>

	<div class="scroll-indicator" id="scroll-indicator">Page <span id="visible-page">1</span></div>
<script src="script.js"></script>
</body>
</html>