Update templates/index.html

dans la version précédente, le clic de la deuxième image ne produisait rien.
Celle-ci intègre de plus un fade-in et un liseré bleu

templates/index.html

@@ -15,12 +15,16 @@
             width: 100%;
             height: auto;
             cursor: pointer;
-            transition: transform 0.2s;
+            transition: transform 0.2s, border 0.2s;
+            border: 2px solid transparent;
             border-radius: 8px;
         }
         .preset-image:hover {
             transform: scale(1.05);
         }
+        .preset-image.selected {
+            border-color: #0d6efd;
+        }
         .dropzone {
             border: 2px dashed #ccc;
             padding: 20px;
@@ -34,6 +38,11 @@
             height: auto;
             margin-top: 10px;
             border-radius: 8px;
+            opacity: 0;
+            transition: opacity 0.5s ease-in;
+        }
+        .preview-image.visible {
+            opacity: 1;
         }
         .loading-container {
             text-align: center;
@@ -59,17 +68,17 @@
             <div class="row">
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/1.webp" class="preset-image" onclick="selectPreset(1, 1)" alt="Original 1">
+                        <img id="preset-1-1" src="/static/1.webp" class="preset-image" onclick="selectPreset(1, 1)" alt="Original 1">
                     </div>
                 </div>
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/2.webp" class="preset-image" onclick="selectPreset(2, 1)" alt="Original 2">
+                        <img id="preset-2-1" src="/static/2.webp" class="preset-image" onclick="selectPreset(2, 1)" alt="Original 2">
                     </div>
                 </div>
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/3.webp" class="preset-image" onclick="selectPreset(3, 1)" alt="Original 3">
+                        <img id="preset-3-1" src="/static/3.webp" class="preset-image" onclick="selectPreset(3, 1)" alt="Original 3">
                     </div>
                 </div>
             </div>
@@ -86,17 +95,17 @@
             <div class="row">
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/1.webp" class="preset-image" onclick="selectPreset(4, 2)" alt="AI 1">
+                        <img id="preset-1-2" src="/static/1.webp" class="preset-image" onclick="selectPreset(1, 2)" alt="AI 1">
                     </div>
                 </div>
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/2.webp" class="preset-image" onclick="selectPreset(5, 2)" alt="AI 2">
+                        <img id="preset-2-2" src="/static/2.webp" class="preset-image" onclick="selectPreset(2, 2)" alt="AI 2">
                     </div>
                 </div>
                 <div class="col-4">
                     <div class="preset-image-container">
-                        <img src="/static/3.webp" class="preset-image" onclick="selectPreset(6, 2)" alt="AI 3">
+                        <img id="preset-3-2" src="/static/3.webp" class="preset-image" onclick="selectPreset(3, 2)" alt="AI 3">
                     </div>
                 </div>
             </div>
@@ -112,6 +121,19 @@
     <!-- Compare Button -->
     <div id="compareButtonContainer" class="text-center my-4"></div>
 
+    <!-- Preview of Selected Images -->
+    <div class="row mt-5" id="previewSection" style="display:none;">
+        <h4 class="text-center mb-4">Selected Images</h4>
+        <div class="col-md-6 text-center">
+            <h6>Original Image</h6>
+            <img id="previewImage1" class="preview-image img-fluid" alt="Original Preview">
+        </div>
+        <div class="col-md-6 text-center">
+            <h6>AI Generated Image</h6>
+            <img id="previewImage2" class="preview-image img-fluid" alt="AI Preview">
+        </div>
+    </div>
+
     <!-- Result -->
     <div id="results" class="mt-5"></div>
 
@@ -122,6 +144,13 @@
     let file1 = null;
     let file2 = null;
 
+    function resetSelection(target) {
+        for (let i = 1; i <= 3; i++) {
+            const img = document.getElementById(`preset-${i}-${target}`);
+            if (img) img.classList.remove('selected');
+        }
+    }
+
     function selectPreset(presetNumber, target) {
         fetch(`/static/${presetNumber}.webp`)
             .then(res => res.blob())
@@ -129,34 +158,50 @@
                 const file = new File([blob], `preset${presetNumber}.webp`, { type: blob.type });
                 if (target === 1) {
                     file1 = file;
-                    updatePreview('dropzone1', blob);
+                    updatePreview('dropzone1', blob, 1);
+                    resetSelection(1);
+                    document.getElementById(`preset-${presetNumber}-1`).classList.add('selected');
                 } else {
                     file2 = file;
-                    updatePreview('dropzone2', blob);
+                    updatePreview('dropzone2', blob, 2);
+                    resetSelection(2);
+                    document.getElementById(`preset-${presetNumber}-2`).classList.add('selected');
                 }
             })
             .then(() => checkReadyToCompare());
     }
 
-    function updatePreview(dropzoneId, blob) {
+    function updatePreview(dropzoneId, blob, target) {
         const reader = new FileReader();
         reader.onload = (event) => {
             document.getElementById(dropzoneId).innerHTML = `
-                <img src="${event.target.result}" class="preview-image"/>
+                <img src="${event.target.result}" class="preview-image visible"/>
             `;
+
+            if (target === 1) {
+                document.getElementById('previewImage1').src = event.target.result;
+                document.getElementById('previewImage1').classList.add('visible');
+            } else {
+                document.getElementById('previewImage2').src = event.target.result;
+                document.getElementById('previewImage2').classList.add('visible');
+            }
+
+            document.getElementById('previewSection').style.display = 'flex';
         };
         reader.readAsDataURL(blob);
     }
 
     document.getElementById('fileInput1').addEventListener('change', (e) => {
         file1 = e.target.files[0];
-        updatePreview('dropzone1', file1);
+        updatePreview('dropzone1', file1, 1);
+        resetSelection(1);
         checkReadyToCompare();
     });
 
     document.getElementById('fileInput2').addEventListener('change', (e) => {
         file2 = e.target.files[0];
-        updatePreview('dropzone2', file2);
+        updatePreview('dropzone2', file2, 2);
+        resetSelection(2);
         checkReadyToCompare();
     });