Ajout des fichiers de configuration et du code pour le redimensionnement d'images avec Bottle et Pillow

2025-07-16 10:48:00 +00:00
commit 203e37ea12
8 changed files with 494 additions and 0 deletions
--- a/views/index.tpl
+++ b/views/index.tpl
@@ -0,0 +1,116 @@
+<!-- views/index.tpl -->
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Réduction d'images</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', sans-serif;
+            background: #f0f4f8;
+            padding: 40px;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: auto;
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+        }
+
+        h1 {
+            text-align: center;
+            color: #1e3a8a;
+        }
+
+        label {
+            margin-top: 20px;
+            font-weight: bold;
+            display: block;
+        }
+
+        input, select {
+            margin-top: 5px;
+            width: 100%;
+            padding: 10px;
+            font-size: 15px;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+        }
+
+        button {
+            margin-top: 30px;
+            width: 100%;
+            background-color: #1e40af;
+            color: white;
+            border: none;
+            padding: 15px;
+            font-size: 16px;
+            border-radius: 6px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #1d4ed8;
+        }
+
+        .loader {
+            display: none;
+            text-align: center;
+            margin-top: 40px;
+        }
+
+        .loader div {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #2563eb;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+            margin: auto;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>📷 Réduction d’images</h1>
+        <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
+            <label>Dossier d'images :</label>
+            <input type="file" name="files" webkitdirectory multiple required>
+
+            <label>Ratio de réduction :</label>
+            <select name="ratio" required>
+                <option value="1">1 (original)</option>
+                <option value="1.5">1.5 (réduction légère)</option>
+                <option value="2" selected>2 (moitié)</option>
+                <option value="3">3 (forte)</option>
+                <option value="4">4 (très forte)</option>
+            </select>
+
+            <button type="submit">📥 Réduire et télécharger</button>
+        </form>
+
+        <div class="loader" id="loader">
+            <p>Traitement des images en cours... Patientez ⏳</p>
+            <div></div>
+        </div>
+    </div>
+
+    <script>
+        const form = document.getElementById("uploadForm");
+        const loader = document.getElementById("loader");
+
+        form.addEventListener("submit", function() {
+            form.style.display = "none";
+            loader.style.display = "block";
+        });
+    </script>
+</body>
+</html>