Serveur

Running

App Files Files Community

Docfile commited on Nov 30, 2024

Commit

efcc0c3

verified ·

1 Parent(s): b04d078

Update templates/viewer.html

Browse files

Files changed (1) hide show

templates/viewer.html +152 -96

templates/viewer.html CHANGED Viewed

@@ -1,54 +1,79 @@
 <!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 {
@@ -56,87 +81,119 @@
             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';
@@ -144,28 +201,28 @@
             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");
@@ -173,6 +230,7 @@
                 button.onclick = () => downloadHighRes(pageNumber);
                 pageDiv.appendChild(button);
             };
             img.onerror = () => {
                 hideLoadingIndicator(pageDiv);
                 const errorMsg = document.createElement('p');
@@ -182,13 +240,10 @@
             };
         }
-        // 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 => {
@@ -198,50 +253,51 @@
                         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();

 <!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 {
             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';
             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");
                 button.onclick = () => downloadHighRes(pageNumber);
                 pageDiv.appendChild(button);
             };
             img.onerror = () => {
                 hideLoadingIndicator(pageDiv);
                 const errorMsg = document.createElement('p');
             };
         }
         function downloadHighRes(pageNumber) {
+            window.open(`${highResEndpoint}${pageNumber}`, "_blank");
         }
         function initLazyLoading() {
             const observer = new IntersectionObserver(entries => {
                 entries.forEach(entry => {
                         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();