Spaces:
Running
Running
| <html lang="ro"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cititor</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| background-color: #f5f5f5; | |
| overflow: hidden; | |
| } | |
| #reader-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #reader-container img { | |
| width: 100%; | |
| height: auto; | |
| transform-origin: center center; | |
| transition: opacity 0.2s ease, transform 0.3s; | |
| cursor: grab; | |
| opacity: 0; | |
| position: absolute; | |
| } | |
| #reader-container img.visible { | |
| opacity: 1; | |
| } | |
| @media (min-width: 768px) { | |
| #reader-container img { | |
| height: 90vh; | |
| width: auto; | |
| } | |
| } | |
| .controls { | |
| position: absolute; | |
| bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border: none; | |
| border-radius: 5px; | |
| background-color: #007bff; | |
| color: white; | |
| transition: background-color 0.3s; | |
| } | |
| button:disabled { | |
| background-color: #ddd; | |
| cursor: not-allowed; | |
| } | |
| button:hover:not(:disabled) { | |
| background-color: #0056b3; | |
| } | |
| #page-input { | |
| position: absolute; | |
| top: 20px; | |
| font-size: 24px; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 10px; | |
| text-align: center; | |
| z-index: 1; | |
| width: 210px; | |
| } | |
| #page-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | |
| } | |
| #page-number { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| font-size: 24px; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 10px; | |
| text-align: center; | |
| z-index: 1; | |
| background-color: #007bff; | |
| color: white; | |
| } | |
| #loading-message { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 24px; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="reader-container"> | |
| <div id="page-number"></div> | |
| <input id="page-input" type="number" placeholder="Introdu pagina" oninput="handlePageInput(this.value)"> | |
| <img id="page-image" src="" alt="Pagina" style="display: none;"> | |
| <div id="loading-message">Imaginea se încarcă, vă rog așteptați</div> | |
| </div> | |
| <div class="controls"> | |
| <button id="prev-button" disabled>Înapoi</button> | |
| <button id="next-button">Înainte</button> | |
| </div> | |
| <script> | |
| const TOTAL_PAGES = 92; | |
| let currentPage = 1; | |
| const imageElement = document.getElementById('page-image'); | |
| const prevButton = document.getElementById('prev-button'); | |
| const nextButton = document.getElementById('next-button'); | |
| const pageNumberElement = document.getElementById('page-number'); | |
| const loadingMessage = document.getElementById('loading-message'); | |
| const preloadImages = []; | |
| const preload = (pages) => { | |
| pages.forEach(page => { | |
| if (page >= 1 && page <= TOTAL_PAGES) { | |
| const img = new Image(); | |
| img.src = `pages/${page}.jpg`; | |
| preloadImages.push(img); | |
| } | |
| }); | |
| }; | |
| const updatePage = () => { | |
| imageElement.classList.remove('visible'); | |
| loadingMessage.style.display = 'block'; | |
| setTimeout(() => { | |
| imageElement.src = `pages/${currentPage}.jpg`; | |
| imageElement.alt = `Pagina ${currentPage}`; | |
| prevButton.disabled = currentPage === 1; | |
| nextButton.disabled = currentPage === TOTAL_PAGES; | |
| const pageNumber = currentPage * 2 + 1; | |
| pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`; | |
| }, 0); | |
| }; | |
| imageElement.onload = () => { | |
| imageElement.style.display = 'block'; | |
| loadingMessage.style.display = 'none'; | |
| imageElement.classList.add('visible'); | |
| }; | |
| prevButton.addEventListener('click', () => { | |
| if (currentPage > 1) { | |
| currentPage--; | |
| updatePage(); | |
| } | |
| }); | |
| nextButton.addEventListener('click', () => { | |
| if (currentPage < TOTAL_PAGES) { | |
| currentPage++; | |
| updatePage(); | |
| } | |
| }); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowLeft' && currentPage > 1) { | |
| currentPage--; | |
| updatePage(); | |
| } else if (e.key === 'ArrowRight' && currentPage < TOTAL_PAGES) { | |
| currentPage++; | |
| updatePage(); | |
| } | |
| }); | |
| function handlePageInput(value) { | |
| const pageNumber = parseInt(value); | |
| if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= TOTAL_PAGES * 2) { | |
| currentPage = Math.ceil(pageNumber / 2); | |
| updatePage(); | |
| } | |
| } | |
| updatePage(); | |
| </script> | |
| </body> | |
| </html> | |