Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Visualiseur de PDF</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #pdf-container { | |
| height: 100vh; | |
| overflow-y: auto; | |
| padding: 10px; | |
| background-color: #f8f9fa; | |
| } | |
| .page { | |
| margin-bottom: 20px; | |
| text-align: center; | |
| border: 1px solid #ddd; | |
| background-color: #fff; | |
| padding: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .page img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .page button { | |
| margin-top: 10px; | |
| padding: 10px 15px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .page button:hover { | |
| background-color: #0056b3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="pdf-container"> | |
| <!-- Les pages PDF seront ajoutées ici dynamiquement --> | |
| </div> | |
| <script> | |
| // Configuration de l'application | |
| const totalPages = 210; // Changez ce nombre selon le nombre de pages de votre PDF | |
| const lowResEndpoint = "/low_res/"; // Endpoint Flask pour les images basse résolution | |
| const highResEndpoint = "/high_res/"; // Endpoint Flask pour les images haute résolution | |
| // Référence au conteneur | |
| const pdfContainer = document.getElementById("pdf-container"); | |
| // Fonction pour charger les pages PDF | |
| function loadPages() { | |
| for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) { | |
| // Créer un conteneur pour chaque page | |
| const pageDiv = document.createElement("div"); | |
| pageDiv.className = "page"; | |
| pageDiv.id = `page-${pageNumber}`; | |
| // Ajouter une image basse résolution | |
| const img = document.createElement("img"); | |
| img.src = `${lowResEndpoint}${pageNumber}`; | |
| img.alt = `Page ${pageNumber}`; | |
| pageDiv.appendChild(img); | |
| // Ajouter un bouton pour la haute résolution | |
| const button = document.createElement("button"); | |
| button.innerText = "Télécharger en haute résolution"; | |
| button.onclick = () => downloadHighRes(pageNumber); | |
| pageDiv.appendChild(button); | |
| // Ajouter la page au conteneur | |
| pdfContainer.appendChild(pageDiv); | |
| } | |
| } | |
| // Fonction pour télécharger une image en haute résolution | |
| function downloadHighRes(pageNumber) { | |
| const highResUrl = `${highResEndpoint}${pageNumber}`; | |
| window.open(highResUrl, "_blank"); | |
| } | |
| // Charger les pages PDF au chargement de la page | |
| window.onload = loadPages; | |
| </script> | |
| </body> | |
| </html> |