Spaces:
Running
Running
File size: 3,231 Bytes
c001f24 | 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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>{{ pdf_title }}</title>
<style>
body {
background-color: #2b3035;
color: #fff;
margin: 0;
font-family: sans-serif;
}
.viewer-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.viewer-header {
padding: 10px;
background-color: #212529;
text-align: center;
}
.viewer-main {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.viewer-main img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.viewer-footer {
padding: 10px;
background-color: #212529;
display: flex;
justify-content: center;
align-items: center;
}
.viewer-footer button {
background-color: #0d6efd;
color: #fff;
border: none;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
border-radius: 5px;
}
.viewer-footer button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="viewer-container">
<div class="viewer-header">
<h1>{{ pdf_title }}</h1>
</div>
<div class="viewer-main">
<img id="main-image" src="" alt="PDF Page">
</div>
<div class="viewer-footer">
<button id="prev-btn">Previous</button>
<span id="page-counter"></span>
<button id="next-btn">Next</button>
</div>
</div>
<script>
const imageUrls = {{ image_urls|tojson }};
let currentIndex = 0;
const mainImage = document.getElementById('main-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const pageCounter = document.getElementById('page-counter');
function showImage(index) {
if (index >= 0 && index < imageUrls.length) {
mainImage.src = imageUrls[index];
currentIndex = index;
pageCounter.textContent = `${index + 1} / ${imageUrls.length}`;
prevBtn.disabled = index === 0;
nextBtn.disabled = index === imageUrls.length - 1;
}
}
prevBtn.addEventListener('click', () => {
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', () => {
showImage(currentIndex + 1);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
prevBtn.click();
} else if (e.key === 'ArrowRight') {
nextBtn.click();
}
});
// Initial load
showImage(0);
</script>
</body>
</html>
|