From b739b1d1dce067a809e258d228546700b937d5cd Mon Sep 17 00:00:00 2001
From: 0xjrx <mrmarquard@protonmail.com>
Date: Fri, 7 Mar 2025 16:24:16 +0100
Subject: [PATCH] style: Add removal of submit message if no image is submitted
 yet

Refs: OPS-55
---
 senju/templates/scan.html | 74 ++++++++++++++++++++++++++++++++-------
 1 file changed, 61 insertions(+), 13 deletions(-)
diff --git a/senju/templates/scan.html b/senju/templates/scan.html
index 65f7bfd..af939ec 100644
--- a/senju/templates/scan.html
+++ b/senju/templates/scan.html
@@ -12,8 +12,9 @@
 <body>
     <div class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6">
         <div class="bg-white text-gray-900 p-8 rounded-xl shadow-lg max-w-lg w-full text-center transform transition duration-300 hover:scale-105 mb-8">
-            <h1 class="text-3xl font-bold text-violet-700 mb-4">Upload your image</h1>
-            <!-- File upload container -->
+            
+        <h1 class="text-3xl font-bold text-violet-700 mb-4">Upload your image</h1>
+            <!-- File Upload container-->
             <div id="upload-area" class="flex items-center justify-center w-full">
                 <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                     <div class="flex flex-col items-center justify-center pt-5 pb-6">
@@ -27,7 +28,7 @@
                 </label>
             </div>
             
-            <!-- Image Preview container -->
+            <!-- Image Preview container-->
             <div id="image-preview" class="w-full hidden">
                 <div class="relative">
                     <img id="preview-img" src="" alt="Preview" class="w-full h-auto rounded-lg">
@@ -39,6 +40,11 @@
                 </div>
             </div>
             
+            <!-- Error message -->
+            <div id="error-message" class="mt-4 text-red-500 hidden">
+                Please upload an image first.
+            </div>
+            
             <button id="submit-button" type="submit" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300">
                 Submit
             </button>
@@ -59,12 +65,15 @@
         const removeImageBtn = document.getElementById('remove-image');
         const responseBox = document.getElementById('response-box');
         const submitButton = document.getElementById('submit-button');
+        const errorMessage = document.getElementById('error-message');
+        
+        let imageUploaded = false;
 
         function handleFileSelect(event) {
             const file = event.target.files[0];
             
             if (file && file.type.startsWith('image/')) {
-                // Create a URL for selected image
+                // Create a URL for the selected image
                 const imageUrl = URL.createObjectURL(file);
                 
                 // Set the image source
@@ -73,35 +82,74 @@
                 // Hide upload area and show image preview
                 uploadArea.classList.add('hidden');
                 imagePreview.classList.remove('hidden');
+                errorMessage.classList.add('hidden');
+                
+                // Set flag that image is uploaded
+                imageUploaded = true;
             }
         }
 
-        
         function removeImage() {
-            
             dropzoneFile.value = '';
             
             // Hide image 
             imagePreview.classList.add('hidden');
             uploadArea.classList.remove('hidden');
             
-            // Revoke the object
             URL.revokeObjectURL(previewImg.src);
             previewImg.src = '';
+            
+            imageUploaded = false;
+            responseBox.classList.add('opacity-0');
+            setTimeout(() => {
+                document.getElementById('ai-response').textContent = 'Waiting for input...';
+            }, 500);
         }
 
         function handleSubmit() {
-                       responseBox.classList.remove('opacity-0');
-            
-            //Example usage
-            document.getElementById('ai-response').textContent = 'Image uploaded successfully!';
+            if (imageUploaded) {
+                // Hide error
+                errorMessage.classList.add('hidden');
+                
+                // Show response box 
+                responseBox.classList.remove('opacity-0');
+                
+                // Example response 
+                document.getElementById('ai-response').textContent = 'Generating Haiku from image...';
+            } else {
+                
+                errorMessage.classList.remove('hidden');
+                
+                uploadArea.classList.add('shake');
+                setTimeout(() => {
+                    uploadArea.classList.remove('shake');
+                }, 600);
+            }
         }
 
-        // Add event listeners
+        
         dropzoneFile.addEventListener('change', handleFileSelect);
         removeImageBtn.addEventListener('click', removeImage);
         submitButton.addEventListener('click', handleSubmit);
+        
+        // Add some CSS animation
+        document.head.insertAdjacentHTML('beforeend', `
+        <style>
+            @keyframes shake {
+                0% { transform: translateX(0); }
+                25% { transform: translateX(-5px); }
+                50% { transform: translateX(5px); }
+                75% { transform: translateX(-5px); }
+                100% { transform: translateX(0); }
+            }
+            .shake {
+                animation: shake 0.5s ease-in-out;
+                border-color: #ef4444 !important;
+            }
+        </style>
+        `);
     </script>
 </body>
-</html>{% endblock %}
+</html>
+{% endblock %}
 
