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; | |
| } | |
| #page-image, #next-page-image { | |
| position: absolute; | |
| width: 100%; | |
| height: auto; | |
| transform-origin: center center; | |
| transition: opacity 0.2s ease; | |
| cursor: grab; | |
| opacity: 1; | |
| z-index: 1; | |
| } | |
| #next-page-image { | |
| opacity: 0; | |
| z-index: 0; | |
| } | |
| @media (min-width: 768px) { | |
| #page-image, #next-page-image { | |
| 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="pages/1.jpg" alt="Pagina 1"> | |
| <img id="next-page-image" src="" alt="" 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 currentImageElement = document.getElementById('page-image'); | |
| const nextPageImageElement = document.getElementById('next-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'); | |
| // Function to update the displayed page with cross-fade | |
| const updatePage = (newPage) => { | |
| currentPage = newPage; | |
| prevButton.disabled = currentPage === 1; | |
| nextButton.disabled = currentPage === TOTAL_PAGES; | |
| const pageNumber = currentPage * 2 + 1; | |
| pageNumberElement.textContent = `${pageNumber - 1}-${pageNumber}`; | |
| // Load the new image into the next image element | |
| nextPageImageElement.src = `pages/${currentPage}.jpg`; | |
| nextPageImageElement.alt = `Pagina ${currentPage}`; | |
| // Start the cross-fade transition | |
| currentImageElement.style.opacity = '0'; | |
| nextPageImageElement.style.opacity = '1'; | |
| nextPageImageElement.style.zIndex = '2'; | |
| setTimeout(() => { | |
| // Swap the images | |
| [currentImageElement.src, nextPageImageElement.src] = [nextPageImageElement.src, '']; | |
| currentImageElement.style.opacity = '1'; | |
| currentImageElement.style.zIndex = '1'; | |
| nextPageImageElement.style.opacity = '0'; | |
| nextPageImageElement.style.zIndex = '0'; | |
| }, 200); // Match the transition duration (0.2s) | |
| }; | |
| // Event listeners for buttons | |
| prevButton.addEventListener('click', () => { | |
| if (currentPage > 1) { | |
| updatePage(currentPage - 1); | |
| } | |
| }); | |
| nextButton.addEventListener('click', () => { | |
| if (currentPage < TOTAL_PAGES) { | |
| updatePage(currentPage + 1); | |
| } | |
| }); | |
| // Keyboard navigation | |
| window.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowLeft' && !prevButton.disabled) { | |
| prevButton.click(); | |
| } else if (e.key === 'ArrowRight' && !nextButton.disabled) { | |
| nextButton.click(); | |
| } | |
| }); | |
| // Handle page input | |
| function handlePageInput(value) { | |
| const pageNumber = parseInt(value); | |
| if (!isNaN(pageNumber)) { | |
| let newPage = Math.ceil(pageNumber / 2); | |
| if (newPage < 1) newPage = 1; | |
| if (newPage > TOTAL_PAGES) newPage = TOTAL_PAGES; | |
| updatePage(newPage); | |
| } | |
| } | |
| // Initialize the first page | |
| updatePage(1); | |
| </script> | |
| </body> | |
| </html> |