Serveur

Sleeping

App Files Files Community

Docfile commited on 17 days ago

Commit

24f661d

•

1 Parent(s): 0b07caa

Rename templates/viewer.html to templates/index.html

Browse files

Files changed (2) hide show

templates/index.html +43 -0
templates/viewer.html +0 -252

templates/index.html ADDED Viewed

	@@ -0,0 +1,43 @@

+ <!DOCTYPE html>
+<html>
+<head>
+    <title>Traduction Yipunu</title>
+    <style>
+        .translation-container {
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    </style>
+</head>
+<body>
+    <h1>Traductions Yipunu</h1>
+    {% for translation in translations %}
+        <div class="translation-container">
+            <div>
+                <p><strong>Français:</strong> {{ translation.fr }}</p>
+                <p><strong>Yipunu:</strong> {{ translation.yi }}</p>
+                <p>
+                  Likes: {{ translation.likes }} | Dislikes: {{ translation.dislikes }}
+                </p>
+            </div>
+            <div>
+                 <a href="{{ url_for('vote', id=translation.id, action='like') }}">Like</a>
+                <a href="{{ url_for('vote', id=translation.id, action='dislike') }}">Dislike</a>
+                 {% if not translation.feedback_sent %}
+                    <form action="{{ url_for('submit_feedback', id=translation.id) }}" method="POST">
+                         <textarea name="feedback" placeholder="Laissez votre avis"></textarea>
+                         <button type="submit">Envoyer avis</button>
+                     </form>
+                    {% else %}
+                      <p>Feedback envoyé</p>
+                    {% endif %}
+             </div>
+        </div>
+    {% endfor %}
+</body>
+</html>

templates/viewer.html DELETED Viewed

@@ -1,252 +0,0 @@
-<!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 {
-            position: absolute;
-            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.appendChild(loadingIndicator);
-            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.innerText = "Télécharger en haute résolution";
-                button.onclick = () => downloadHighRes(pageNumber);
-                pageDiv.appendChild(button);
-            };
-            img.onerror = () => {
-                hideLoadingIndicator(pageDiv);
-                const errorMsg = document.createElement('p');
-                errorMsg.className = 'error-message';
-                errorMsg.innerText = `Erreur de chargement de la page ${pageNumber}`;
-                pageDiv.appendChild(errorMsg);
-            };
-        }
-        // 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 => {
-                    if (entry.isIntersecting) {
-                        const pageNumber = parseInt(entry.target.id.split('-')[1]);
-                        loadPage(pageNumber);
-                        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();
-            goToPage(currentPage);
-        };
-    </script>
-</body>
-</html>