Serveur

Runtime error

App Files Files Community

Docfile commited on Nov 30, 2024

Commit

dff3fca

verified ·

1 Parent(s): efcc0c3

Update templates/viewer.html

Browse files

Files changed (1) hide show

templates/viewer.html +96 -152

templates/viewer.html CHANGED Viewed

@@ -1,79 +1,54 @@
 <!DOCTYPE html>
-<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Visualiseur de PDF</title>
     <style>
-        :root {
-            --primary-color: #007bff;
-            --primary-hover: #0056b3;
-            --bg-color: #f8f9fa;
-            --border-color: #ddd;
-            --text-color: #333;
-            --error-color: #dc3545;
-        }
-        * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
-        }
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            color: var(--text-color);
-            line-height: 1.6;
-            min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
         #pdf-container {
-            flex: 1;
             overflow-y: auto;
-            padding: 20px;
-            background-color: var(--bg-color);
-            scroll-behavior: smooth;
         }
         .page {
-            max-width: 1000px;
-            margin: 0 auto 30px;
             background-color: #fff;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            padding: 20px;
-            position: relative;
-            transition: transform 0.2s ease;
-        }
-        .page:hover {
-            transform: translateY(-2px);
         }
         .page img {
-            width: 100%;
             height: auto;
-            border-radius: 4px;
-            display: block;
         }
         .page button {
-            margin-top: 15px;
-            padding: 12px 20px;
-            background-color: var(--primary-color);
             color: white;
             border: none;
-            border-radius: 6px;
             cursor: pointer;
-            transition: background-color 0.2s ease;
-            font-weight: 500;
-            width: 100%;
         }
         .page button:hover {
-            background-color: var(--primary-hover);
         }
         .loading-indicator {
@@ -81,119 +56,87 @@
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(0, 123, 255, 0.2);
-            border-top-color: var(--primary-color);
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            display: none;
         }
         .page.loading .loading-indicator {
-            display: block;
         }
-        .error-message {
-            color: var(--error-color);
-            text-align: center;
-            margin-top: 15px;
-            font-weight: 500;
         }
         #navigation {
-            background-color: #fff;
-            padding: 15px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            position: sticky;
             top: 0;
-            z-index: 100;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            flex-wrap: wrap;
         }
         #navigation button {
-            padding: 8px 16px;
-            background-color: var(--primary-color);
             color: white;
             border: none;
-            border-radius: 6px;
             cursor: pointer;
-            transition: all 0.2s ease;
-            font-weight: 500;
-        }
-        #navigation button:hover:not(:disabled) {
-            background-color: var(--primary-hover);
-            transform: translateY(-1px);
         }
         #navigation button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        #pageNumberInput {
-            width: 70px;
-            padding: 8px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            text-align: center;
         }
         @keyframes spin {
-            to { transform: translate(-50%, -50%) rotate(360deg); }
-        }
-        @media (max-width: 600px) {
-            #navigation {
-                padding: 10px;
-                font-size: 14px;
-            }
-            #navigation button {
-                padding: 6px 12px;
-            }
-            .page {
-                margin: 0 10px 20px;
-                padding: 15px;
-            }
         }
     </style>
 </head>
 <body>
     <div id="navigation">
-        <button id="prevPage">Précédente</button>
         <span>Page <span id="currentPage">1</span> / <span id="totalPagesSpan">210</span></span>
-        <button id="nextPage">Suivante</button>
-        <button id="gotoPage">Aller à</button>
-        <input type="number" id="pageNumberInput" min="1" value="1" aria-label="Numéro de page">
     </div>
-    <div id="pdf-container"></div>
     <script>
         const totalPages = 210;
-        const lowResEndpoint = "/low_res/";
-        const highResEndpoint = "/high_res/";
         let currentPage = 1;
-        const elements = {
-            pdfContainer: document.getElementById("pdf-container"),
-            prevPageButton: document.getElementById("prevPage"),
-            nextPageButton: document.getElementById("nextPage"),
-            currentPageSpan: document.getElementById("currentPage"),
-            totalPagesSpan: document.getElementById("totalPagesSpan"),
-            gotoPageButton: document.getElementById("gotoPage"),
-            pageNumberInput: document.getElementById("pageNumberInput")
-        };
-        elements.totalPagesSpan.textContent = totalPages;
         function showLoadingIndicator(pageDiv) {
             const loadingIndicator = document.createElement('div');
             loadingIndicator.className = 'loading-indicator';
@@ -201,28 +144,28 @@
             pageDiv.classList.add('loading');
         }
         function hideLoadingIndicator(pageDiv) {
             const loadingIndicator = pageDiv.querySelector('.loading-indicator');
             if (loadingIndicator) {
-                loadingIndicator.remove();
             }
             pageDiv.classList.remove('loading');
         }
         function loadPage(pageNumber) {
             const pageDiv = document.getElementById(`page-${pageNumber}`);
-            if (!pageDiv) return;
             showLoadingIndicator(pageDiv);
             const img = new Image();
             img.src = `${lowResEndpoint}${pageNumber}`;
             img.alt = `Page ${pageNumber}`;
-            img.loading = "lazy";
             img.onload = () => {
                 hideLoadingIndicator(pageDiv);
-                pageDiv.innerHTML = '';
                 pageDiv.appendChild(img);
                 const button = document.createElement("button");
@@ -230,7 +173,6 @@
                 button.onclick = () => downloadHighRes(pageNumber);
                 pageDiv.appendChild(button);
             };
             img.onerror = () => {
                 hideLoadingIndicator(pageDiv);
                 const errorMsg = document.createElement('p');
@@ -240,10 +182,13 @@
             };
         }
         function downloadHighRes(pageNumber) {
-            window.open(`${highResEndpoint}${pageNumber}`, "_blank");
         }
         function initLazyLoading() {
             const observer = new IntersectionObserver(entries => {
                 entries.forEach(entry => {
@@ -253,51 +198,50 @@
                         observer.unobserve(entry.target);
                     }
                 });
-            }, {
-                rootMargin: '50px'
             });
             for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
                 const pageDiv = document.createElement('div');
                 pageDiv.className = 'page';
                 pageDiv.id = `page-${pageNumber}`;
-                elements.pdfContainer.appendChild(pageDiv);
                 observer.observe(pageDiv);
             }
         }
         function updateNavigation() {
-            elements.currentPageSpan.textContent = currentPage;
-            elements.prevPageButton.disabled = currentPage === 1;
-            elements.nextPageButton.disabled = currentPage === totalPages;
-            elements.pageNumberInput.value = currentPage;
         }
         function goToPage(pageNumber) {
-            if (pageNumber >= 1 && pageNumber <= totalPages) {
-                currentPage = pageNumber;
-                updateNavigation();
-                document.getElementById(`page-${pageNumber}`)?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
-                });
-            }
         }
-        elements.prevPageButton.addEventListener('click', () => goToPage(currentPage - 1));
-        elements.nextPageButton.addEventListener('click', () => goToPage(currentPage + 1));
-        elements.gotoPageButton.addEventListener('click', () => {
-            const pageNumber = parseInt(elements.pageNumberInput.value);
-            if (pageNumber) goToPage(pageNumber);
         });
-        elements.pageNumberInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                const pageNumber = parseInt(e.target.value);
-                if (pageNumber) goToPage(pageNumber);
-            }
         });
         window.onload = () => {
             initLazyLoading();
             updateNavigation();

 <!DOCTYPE html>
+<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;
             display: flex;
             flex-direction: column;
+            min-height: 100vh;
         }
         #pdf-container {
+            flex-grow: 1;
             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);
+            position: relative; /* Pour positionner l'indicateur de chargement */
         }
         .page img {
+            max-width: 100%;
             height: auto;
+            display: block; /* Empêche l'espace sous l'image */
         }
         .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;
         }
         .loading-indicator {
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-top: 4px solid #007bff;
             border-radius: 50%;
+            width: 30px;
+            height: 30px;
             animation: spin 1s linear infinite;
+            display: none; /* Masqué par défaut */
         }
         .page.loading .loading-indicator {
+            display: block; /* Affiché pendant le chargement */
         }
+        .page .error-message {
+            color: red;
+            margin-top: 10px;
         }
         #navigation {
+            background-color: #eee;
+            padding: 10px;
+            text-align: center;
+            border-bottom: 1px solid #ccc;
+            position: sticky; /* Barre de navigation fixe en haut */
             top: 0;
+            z-index: 10; /* S'assurer qu'elle est au-dessus du contenu */
         }
         #navigation button {
+            padding: 8px 12px;
+            margin: 0 5px;
+            background-color: #007bff;
             color: white;
             border: none;
+            border-radius: 4px;
             cursor: pointer;
         }
         #navigation button:disabled {
+            opacity: 0.6;
+            cursor: default;
         }
         @keyframes spin {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
         }
     </style>
 </head>
 <body>
     <div id="navigation">
+        <button id="prevPage">Page Précédente</button>
         <span>Page <span id="currentPage">1</span> / <span id="totalPagesSpan">210</span></span>
+        <button id="nextPage">Page Suivante</button>
+        <button id="gotoPage">Aller à la page:</button>
+        <input type="number" id="pageNumberInput" min="1" value="1">
     </div>
+    <div id="pdf-container">
+        <!-- Les pages PDF seront ajoutées ici dynamiquement -->
+    </div>
     <script>
+        // Configuration de l'application
         const totalPages = 210;
+                const lowResEndpoint = "/low_res/"; // Endpoint Flask pour les images basse résolution
+        const highResEndpoint = "/high_res/"; // Endpoint Flask pour les images haute résolution
         let currentPage = 1;
+        // Références aux éléments
+        const pdfContainer = document.getElementById("pdf-container");
+        const prevPageButton = document.getElementById("prevPage");
+        const nextPageButton = document.getElementById("nextPage");
+        const currentPageSpan = document.getElementById("currentPage");
+        const totalPagesSpan = document.getElementById("totalPagesSpan");
+        const gotoPageButton = document.getElementById("gotoPage");
+        const pageNumberInput = document.getElementById("pageNumberInput");
+        totalPagesSpan.textContent = totalPages;
+        // Fonction pour afficher un indicateur de chargement
         function showLoadingIndicator(pageDiv) {
             const loadingIndicator = document.createElement('div');
             loadingIndicator.className = 'loading-indicator';
             pageDiv.classList.add('loading');
         }
+        // Fonction pour masquer l'indicateur de chargement
         function hideLoadingIndicator(pageDiv) {
             const loadingIndicator = pageDiv.querySelector('.loading-indicator');
             if (loadingIndicator) {
+                pageDiv.removeChild(loadingIndicator);
             }
             pageDiv.classList.remove('loading');
         }
+        // Fonction pour charger une page spécifique
         function loadPage(pageNumber) {
             const pageDiv = document.getElementById(`page-${pageNumber}`);
+            if (!pageDiv) return; // Vérifier si l'élément existe
             showLoadingIndicator(pageDiv);
             const img = new Image();
             img.src = `${lowResEndpoint}${pageNumber}`;
             img.alt = `Page ${pageNumber}`;
             img.onload = () => {
                 hideLoadingIndicator(pageDiv);
+                pageDiv.innerHTML = ''; // Nettoyer le contenu précédent
                 pageDiv.appendChild(img);
                 const button = document.createElement("button");
                 button.onclick = () => downloadHighRes(pageNumber);
                 pageDiv.appendChild(button);
             };
             img.onerror = () => {
                 hideLoadingIndicator(pageDiv);
                 const errorMsg = document.createElement('p');
             };
         }
+        // Fonction pour télécharger une image en haute résolution
         function downloadHighRes(pageNumber) {
+            const highResUrl = `${highResEndpoint}${pageNumber}`;
+            window.open(highResUrl, "_blank");
         }
+        // Initialisation de l'Intersection Observer pour le lazy loading
         function initLazyLoading() {
             const observer = new IntersectionObserver(entries => {
                 entries.forEach(entry => {
                         observer.unobserve(entry.target);
                     }
                 });
             });
             for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
                 const pageDiv = document.createElement('div');
                 pageDiv.className = 'page';
                 pageDiv.id = `page-${pageNumber}`;
+                pdfContainer.appendChild(pageDiv);
                 observer.observe(pageDiv);
             }
         }
+        // Gestion de la navigation
         function updateNavigation() {
+            currentPageSpan.textContent = currentPage;
+            prevPageButton.disabled = currentPage === 1;
+            nextPageButton.disabled = currentPage === totalPages;
         }
         function goToPage(pageNumber) {
+          if (pageNumber >= 1 && pageNumber <= totalPages) {
+              currentPage = pageNumber;
+              updateNavigation();
+              const pageDiv = document.getElementById(`page-${pageNumber}`);
+              if (pageDiv) {
+                  pageDiv.scrollIntoView({ behavior: 'smooth' });
+              }
+          }
         }
+        prevPageButton.addEventListener('click', () => {
+          goToPage(currentPage - 1);
         });
+        nextPageButton.addEventListener('click', () => {
+           goToPage(currentPage + 1);
+        });
+        gotoPageButton.addEventListener('click', () => {
+            const pageNumber = parseInt(pageNumberInput.value);
+            goToPage(pageNumber);
         });
+        // Initialiser le visualiseur
         window.onload = () => {
             initLazyLoading();
             updateNavigation();