From e6ff40184a3a26c07150237308be9ed7dfd8d8b7 Mon Sep 17 00:00:00 2001
From: Quality App Developer <dev@moto-adv.com>
Date: Tue, 27 Jan 2026 18:01:52 +0200
Subject: [PATCH] UX: Improve FG scan success notification styling

- Changed notification to small popup on right side of screen
- Added smooth slide-in/slide-out animations
- Positioned at top-right (30px from edges)
- Higher z-index (9999) to appear above all content
- Improved shadow and padding for better visibility
- Only affects FG scan page
---
 app/templates/modules/quality/fg_scan.html | 49 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/templates/modules/quality/fg_scan.html b/app/templates/modules/quality/fg_scan.html
index 61043f4..15bcd9f 100644
--- a/app/templates/modules/quality/fg_scan.html
+++ b/app/templates/modules/quality/fg_scan.html
@@ -224,23 +224,56 @@ if (shouldClearAfterSubmit === 'true' && cpCodeInput && oc1CodeInput && oc2CodeI
             cpCodeInput.focus();
         }
         
-        // Add visual feedback
+        // Add visual feedback - small notification on right side
         const successIndicator = document.createElement('div');
         successIndicator.style.cssText = `
             position: fixed;
-            top: 20px;
-            right: 20px;
+            top: 30px;
+            right: 30px;
             background: #4CAF50;
             color: white;
-            padding: 10px 20px;
-            border-radius: 5px;
-            z-index: 1000;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-            font-weight: bold;
+            padding: 12px 20px;
+            border-radius: 6px;
+            z-index: 9999;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+            font-weight: 600;
+            font-size: 14px;
+            white-space: nowrap;
+            animation: slideInRight 0.3s ease-out, slideOutRight 0.3s ease-in 2.7s forwards;
         `;
         successIndicator.textContent = '✅ Scan recorded! Ready for next scan';
         document.body.appendChild(successIndicator);
         
+        // Add keyframe animation if not already added
+        if (!document.getElementById('fg-scan-notification-styles')) {
+            const style = document.createElement('style');
+            style.id = 'fg-scan-notification-styles';
+            style.textContent = `
+                @keyframes slideInRight {
+                    from {
+                        transform: translateX(400px);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                }
+                
+                @keyframes slideOutRight {
+                    from {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                    to {
+                        transform: translateX(400px);
+                        opacity: 0;
+                    }
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        
         // Remove success indicator after 3 seconds
         setTimeout(function() {
             if (successIndicator.parentNode) {