Spaces:
Running
Running
Update reader.html
Browse files- reader.html +11 -42
reader.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
margin: 0;
|
|
@@ -69,26 +69,6 @@
|
|
| 69 |
background-color: #0056b3;
|
| 70 |
}
|
| 71 |
|
| 72 |
-
#page-input {
|
| 73 |
-
position: absolute;
|
| 74 |
-
top: 20px;
|
| 75 |
-
font-size: 24px;
|
| 76 |
-
padding: 10px 20px;
|
| 77 |
-
border: none;
|
| 78 |
-
border-radius: 10px;
|
| 79 |
-
text-align: center;
|
| 80 |
-
z-index: 1;
|
| 81 |
-
width: 190px;
|
| 82 |
-
@media (orientation: portrait) {
|
| 83 |
-
transform: translate(30px, 0px);
|
| 84 |
-
}
|
| 85 |
-
}
|
| 86 |
-
|
| 87 |
-
#page-input:focus {
|
| 88 |
-
outline: none;
|
| 89 |
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
| 90 |
-
}
|
| 91 |
-
|
| 92 |
#page-number {
|
| 93 |
position: absolute;
|
| 94 |
top: 20px;
|
|
@@ -116,14 +96,13 @@
|
|
| 116 |
<body>
|
| 117 |
<div id="reader-container">
|
| 118 |
<div id="page-number"></div>
|
| 119 |
-
<
|
| 120 |
-
<
|
| 121 |
-
<div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
|
| 122 |
</div>
|
| 123 |
|
| 124 |
<div class="controls">
|
| 125 |
-
<button id="prev-button" disabled
|
| 126 |
-
<button id="next-button"
|
| 127 |
</div>
|
| 128 |
|
| 129 |
<script>
|
|
@@ -136,12 +115,14 @@
|
|
| 136 |
const loadingMessage = document.getElementById('loading-message');
|
| 137 |
|
| 138 |
const updatePage = () => {
|
| 139 |
-
|
|
|
|
|
|
|
|
|
|
| 140 |
imageElement.alt = `Pagina ${currentPage}`;
|
| 141 |
prevButton.disabled = currentPage === 1;
|
| 142 |
nextButton.disabled = currentPage === TOTAL_PAGES;
|
| 143 |
-
|
| 144 |
-
pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
|
| 145 |
imageElement.style.display = 'none';
|
| 146 |
loadingMessage.style.display = 'block';
|
| 147 |
};
|
|
@@ -256,19 +237,7 @@
|
|
| 256 |
isDragging = false;
|
| 257 |
});
|
| 258 |
|
| 259 |
-
function handlePageInput(value) {
|
| 260 |
-
const pageNumber = parseInt(value);
|
| 261 |
-
if (!isNaN(pageNumber)) {
|
| 262 |
-
if (pageNumber % 2 === 0) {
|
| 263 |
-
currentPage = pageNumber / 2;
|
| 264 |
-
} else {
|
| 265 |
-
currentPage = (pageNumber - 1) / 2;
|
| 266 |
-
}
|
| 267 |
-
updatePage();
|
| 268 |
-
}
|
| 269 |
-
}
|
| 270 |
-
|
| 271 |
updatePage();
|
| 272 |
</script>
|
| 273 |
</body>
|
| 274 |
-
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Reader</title>
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
margin: 0;
|
|
|
|
| 69 |
background-color: #0056b3;
|
| 70 |
}
|
| 71 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
#page-number {
|
| 73 |
position: absolute;
|
| 74 |
top: 20px;
|
|
|
|
| 96 |
<body>
|
| 97 |
<div id="reader-container">
|
| 98 |
<div id="page-number"></div>
|
| 99 |
+
<img id="page-image" src="pages/01.jpg" alt="Pagina 1" style="display: none;">
|
| 100 |
+
<div id="loading-message">Loading. Please wait.</div>
|
|
|
|
| 101 |
</div>
|
| 102 |
|
| 103 |
<div class="controls">
|
| 104 |
+
<button id="prev-button" disabled>Back</button>
|
| 105 |
+
<button id="next-button">Next</button>
|
| 106 |
</div>
|
| 107 |
|
| 108 |
<script>
|
|
|
|
| 115 |
const loadingMessage = document.getElementById('loading-message');
|
| 116 |
|
| 117 |
const updatePage = () => {
|
| 118 |
+
// Format page number with leading zero if needed
|
| 119 |
+
const formattedPage = currentPage < 10 ? `0${currentPage}` : `${currentPage}`;
|
| 120 |
+
|
| 121 |
+
imageElement.src = `pages/${formattedPage}.jpg`;
|
| 122 |
imageElement.alt = `Pagina ${currentPage}`;
|
| 123 |
prevButton.disabled = currentPage === 1;
|
| 124 |
nextButton.disabled = currentPage === TOTAL_PAGES;
|
| 125 |
+
pageNumberElement.textContent = `${currentPage}`;
|
|
|
|
| 126 |
imageElement.style.display = 'none';
|
| 127 |
loadingMessage.style.display = 'block';
|
| 128 |
};
|
|
|
|
| 237 |
isDragging = false;
|
| 238 |
});
|
| 239 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 240 |
updatePage();
|
| 241 |
</script>
|
| 242 |
</body>
|
| 243 |
+
</html>
|