From 4eef7457647139ca0d8cce151b605b73cc81835b Mon Sep 17 00:00:00 2001
From: 0xjrx <mrmarquard@protonmail.com>
Date: Fri, 14 Mar 2025 15:11:04 +0100
Subject: [PATCH] feat: add box to show generated haiku from image

OPS-55
---
 senju/templates/scan.html | 41 +++++++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/senju/templates/scan.html b/senju/templates/scan.html
index a051c8b..b84a917 100644
--- a/senju/templates/scan.html
+++ b/senju/templates/scan.html
@@ -75,6 +75,19 @@
             </div>
             <p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
         </div>
+        <div id="generated-haiku-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center hidden transition-opacity duration-500 ease-in-out">
+            <h2 class="text-2xl font-semibold text-violet-700">Red suit, vents unseen,<br>
+Sus behavior, crew unsure,<br>
+Vote him, task complete.</h2>
+            <div class="flex justify-center mt-4">
+                <div class="loader animate-pulse flex space-x-4">
+                    <div class="w-3 h-3 bg-violet-600 rounded-full"></div>
+                    <div class="w-3 h-3 bg-violet-600 rounded-full"></div>
+                    <div class="w-3 h-3 bg-violet-600 rounded-full"></div>
+                </div>
+            </div>
+            <p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
+        </div>
     </div>
 
     <script>
@@ -90,7 +103,7 @@
         const yesButton = document.getElementById('yes-button');
         const noButton = document.getElementById('no-button');
         const generatingHaikuBox = document.getElementById('generating-haiku-box');
-        
+        const generatedHaikuBox = document.getElementById('generated-haiku-box'); 
         let imageUploaded = false;
 
         function handleFileSelect(event) {
@@ -152,18 +165,22 @@
             }
         }
         
-        function handleYesClick() {
-            // Hide response box
-            responseBox.classList.add('opacity-0');
-            
-            // Show generating haiku box
-            setTimeout(() => {
-                responseBox.classList.add('hidden');
-                generatingHaikuBox.classList.remove('hidden');
-            }, 500);
-        }
+       function handleYesClick() {
+    // Hide response box
+    responseBox.classList.add('opacity-0');
+    
+    // Show generating haiku box first
+    setTimeout(() => {
+        responseBox.classList.add('hidden');
+        generatingHaikuBox.classList.remove('hidden');
         
-        function handleNoClick() {
+        // After a delay, hide generating box and show result
+        setTimeout(() => {
+            generatingHaikuBox.classList.add('hidden');
+            generatedHaikuBox.classList.remove('hidden');
+        }, 3000); // Show loading animation for 3 seconds before revealing the haiku
+    }, 500); // Wait for response box fade out
+}        function handleNoClick() {
             // Reset everything
             removeImage();
         }