changes to feedback receive & submission

backend/server.py

@@ -205,16 +205,45 @@ def send_feedback_email(api_key, feedback):
         details = feedback.get('details') or "No text provided"
         usecase = feedback.get('usecase') or "Not specified"
         
+        emojis = feedback.get('emojis', {})
+        priorities = feedback.get('priorities', [])
+        
+        emoji_section = ""
+        if emojis:
+            emoji_section = "<p><strong>Experience Metrics:</strong></p><ul style='font-size: 13px;'>"
+            for key, val in emojis.items():
+                if val:
+                    label = key.replace('fb-', '').replace('-', ' ').title()
+                    emoji_section += f"<li>{label}: <span style='color:#c89a6c;'>{val.capitalize()}</span></li>"
+            emoji_section += "</ul>"
+
+        priority_section = ""
+        if priorities:
+            priority_section = "<p><strong>Priorities:</strong></p><ul style='font-size: 13px;'>"
+            for p in priorities:
+                priority_section += f"<li>{p.replace('-', ' ').capitalize()}</li>"
+            priority_section += "</ul>"
+
         html_body = f"""
-        <div style="font-family: sans-serif; color: #333; max-width: 600px; border: 1px solid #eee; padding: 20px; border-radius: 10px;">
-            <h2 style="color: #8b5e3c;">New UrbanFlow Feedback</h2>
-            <p><strong>Category:</strong> {fb_type}</p>
-            <p><strong>Rating:</strong> {'★' * rating}{'☆' * (5-rating)} ({rating}/5)</p>
-            <p><strong>Usecase:</strong> {usecase}</p>
+        <div style="font-family: sans-serif; color: #333; max-width: 600px; border: 1px solid #eee; padding: 25px; border-radius: 12px; line-height: 1.5;">
+            <h2 style="color: #8b5e3c; margin-top: 0;">New UrbanFlow Feedback</h2>
+            
+            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+                <tr><td style="padding: 5px 0;"><strong>Category:</strong></td><td>{fb_type}</td></tr>
+                <tr><td style="padding: 5px 0;"><strong>Rating:</strong></td><td>{'★' * rating}{'☆' * (5-rating)} ({rating}/5)</td></tr>
+                <tr><td style="padding: 5px 0;"><strong>Usecase:</strong></td><td>{usecase}</td></tr>
+            </table>
+
             <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
-            <p style="white-space: pre-wrap;">{details}</p>
+            
+            {emoji_section}
+            {priority_section}
+
+            <p><strong>Detailed Feedback:</strong></p>
+            <div style="background: #f9f9f9; padding: 15px; border-radius: 8px; font-size: 14px; color: #555; white-space: pre-wrap;">{details}</div>
+            
             <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
-            <p style="font-size: 12px; color: #999;">This email was sent automatically from the UrbanFlow Demo Platform.</p>
+            <p style="font-size: 11px; color: #999; text-align: center;">Sent via UrbanFlow Demo Platform Engine</p>
         </div>
         """
         

frontend/js/vehicles.js

@@ -187,6 +187,36 @@
 
                 _fbRating = 0;
                 setRating(0);
+
+                // Start Cooldown (60 seconds)
+                const btn = document.getElementById('fb-submit-btn');
+                const wrap = document.getElementById('fb-cooldown-wrap');
+                const bar = document.getElementById('fb-cooldown-bar');
+                const timerEl = document.getElementById('fb-cooldown-timer');
+                
+                btn.disabled = true;
+                btn.style.opacity = '0.5';
+                btn.style.cursor = 'not-allowed';
+                btn.innerText = 'Feedback Received';
+                wrap.classList.remove('hidden');
+                
+                let timeLeft = 60;
+                const total = 60;
+                const interval = setInterval(() => {
+                    timeLeft -= 1;
+                    timerEl.innerText = timeLeft;
+                    bar.style.width = (timeLeft / total * 100) + '%';
+                    
+                    if (timeLeft <= 0) {
+                        clearInterval(interval);
+                        btn.disabled = false;
+                        btn.style.opacity = '1';
+                        btn.style.cursor = 'pointer';
+                        btn.innerText = 'Transmit Feedback';
+                        wrap.classList.add('hidden');
+                        bar.style.width = '100%';
+                    }
+                }, 1000);
             } else {
                 showToast('Failed to submit — please try again', 'error');
             }

frontend/vehicles.html

@@ -828,9 +828,18 @@
                                 <textarea class="fb-textarea w-full flex-1 min-h-[180px]" id="fb-text" placeholder="Please take a moment to provide a meaningful response. Describe your specific workflow needs or any limitations you encountered..."></textarea>
                             </div>
 
-                            <button onclick="submitFeedback()" class="w-full py-4 font-bold text-sm rounded-full transition hover:scale-[1.01] active:scale-95 shadow-lg flex items-center justify-center gap-3 mt-4" style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)">
+                            <button id="fb-submit-btn" onclick="submitFeedback()" class="w-full py-4 font-bold text-sm rounded-full transition hover:scale-[1.01] active:scale-95 shadow-lg flex items-center justify-center gap-3 mt-4" style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)">
                                 Transmit Feedback
                             </button>
+
+                            <!-- Cooldown Progress Bar -->
+                            <div id="fb-cooldown-wrap" class="w-full mt-4 hidden">
+                                <div class="w-full h-1 bg-neutral-900 rounded-full overflow-hidden">
+                                    <div id="fb-cooldown-bar" class="h-full w-full transition-all duration-100 ease-linear rounded-full" style="background:var(--cocoa-l)"></div>
+                                </div>
+                                <p class="text-[9px] font-bold text-center mt-2 uppercase tracking-[0.2em]" style="color:#555">Anti-Spam Cooldown: <span id="fb-cooldown-timer">60</span>s</p>
+                            </div>
+
                         </div>
                     </div>
                 </div>