Spaces:
Running
Running
Upload reader.html
Browse files- reader.html +20 -5
reader.html
CHANGED
|
@@ -98,13 +98,23 @@
|
|
| 98 |
background-color: #007bff;
|
| 99 |
color: white;
|
| 100 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 101 |
</style>
|
| 102 |
</head>
|
| 103 |
<body>
|
| 104 |
<div id="reader-container">
|
| 105 |
<div id="page-number"></div>
|
| 106 |
<input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
|
| 107 |
-
<img id="page-image" src="pages/1.jpg" alt="Pagina 1">
|
|
|
|
| 108 |
</div>
|
| 109 |
|
| 110 |
<div class="controls">
|
|
@@ -119,6 +129,7 @@
|
|
| 119 |
const prevButton = document.getElementById('prev-button');
|
| 120 |
const nextButton = document.getElementById('next-button');
|
| 121 |
const pageNumberElement = document.getElementById('page-number');
|
|
|
|
| 122 |
|
| 123 |
const updatePage = () => {
|
| 124 |
imageElement.src = `pages/${currentPage}.jpg`;
|
|
@@ -127,6 +138,13 @@
|
|
| 127 |
nextButton.disabled = currentPage === TOTAL_PAGES;
|
| 128 |
const pageNumber = currentPage * 2 + 1;
|
| 129 |
pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
};
|
| 131 |
|
| 132 |
prevButton.addEventListener('click', () => {
|
|
@@ -238,18 +256,15 @@
|
|
| 238 |
const pageNumber = parseInt(value);
|
| 239 |
if (!isNaN(pageNumber)) {
|
| 240 |
if (pageNumber % 2 === 0) {
|
| 241 |
-
currentPage = pageNumber / 2
|
| 242 |
-
if (pageNumber % 2 === 0) {
|
| 243 |
currentPage = pageNumber / 2;
|
| 244 |
} else {
|
| 245 |
currentPage = (pageNumber - 1) / 2;
|
| 246 |
}
|
| 247 |
updatePage();
|
| 248 |
}
|
| 249 |
-
}
|
| 250 |
}
|
| 251 |
|
| 252 |
-
|
| 253 |
</script>
|
| 254 |
</body>
|
| 255 |
</html>
|
|
|
|
| 98 |
background-color: #007bff;
|
| 99 |
color: white;
|
| 100 |
}
|
| 101 |
+
|
| 102 |
+
#loading-message {
|
| 103 |
+
position: absolute;
|
| 104 |
+
top: 50%;
|
| 105 |
+
left: 50%;
|
| 106 |
+
transform: translate(-50%, -50%);
|
| 107 |
+
font-size: 24px;
|
| 108 |
+
color: #333;
|
| 109 |
+
}
|
| 110 |
</style>
|
| 111 |
</head>
|
| 112 |
<body>
|
| 113 |
<div id="reader-container">
|
| 114 |
<div id="page-number"></div>
|
| 115 |
<input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)">
|
| 116 |
+
<img id="page-image" src="pages/1.jpg" alt="Pagina 1" style="display: none;">
|
| 117 |
+
<div id="loading-message">Imaginea se încarcă, vă rog așteptați</div>
|
| 118 |
</div>
|
| 119 |
|
| 120 |
<div class="controls">
|
|
|
|
| 129 |
const prevButton = document.getElementById('prev-button');
|
| 130 |
const nextButton = document.getElementById('next-button');
|
| 131 |
const pageNumberElement = document.getElementById('page-number');
|
| 132 |
+
const loadingMessage = document.getElementById('loading-message');
|
| 133 |
|
| 134 |
const updatePage = () => {
|
| 135 |
imageElement.src = `pages/${currentPage}.jpg`;
|
|
|
|
| 138 |
nextButton.disabled = currentPage === TOTAL_PAGES;
|
| 139 |
const pageNumber = currentPage * 2 + 1;
|
| 140 |
pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`;
|
| 141 |
+
imageElement.style.display = 'none';
|
| 142 |
+
loadingMessage.style.display = 'block';
|
| 143 |
+
};
|
| 144 |
+
|
| 145 |
+
imageElement.onload = () => {
|
| 146 |
+
imageElement.style.display = 'block';
|
| 147 |
+
loadingMessage.style.display = 'none';
|
| 148 |
};
|
| 149 |
|
| 150 |
prevButton.addEventListener('click', () => {
|
|
|
|
| 256 |
const pageNumber = parseInt(value);
|
| 257 |
if (!isNaN(pageNumber)) {
|
| 258 |
if (pageNumber % 2 === 0) {
|
|
|
|
|
|
|
| 259 |
currentPage = pageNumber / 2;
|
| 260 |
} else {
|
| 261 |
currentPage = (pageNumber - 1) / 2;
|
| 262 |
}
|
| 263 |
updatePage();
|
| 264 |
}
|
|
|
|
| 265 |
}
|
| 266 |
|
| 267 |
+
updatePage();
|
| 268 |
</script>
|
| 269 |
</body>
|
| 270 |
</html>
|