structured email; smooth cooldown

backend/server.py

@@ -200,7 +200,7 @@ FEEDBACK_PATH = Path(tempfile.gettempdir()) / "urbanflow_feedback.json"
 def send_feedback_email(api_key, feedback):
     try:
         resend.api_key = api_key
-        fb_type = (feedback.get('type') or 'General').capitalize()
+        fb_type = feedback.get('type') or 'General'
         rating = feedback.get('rating', 0)
         details = feedback.get('details') or "No text provided"
         usecase = feedback.get('usecase') or "Not specified"
@@ -208,42 +208,64 @@ def send_feedback_email(api_key, feedback):
         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>"
+        def get_emoji_row(label, choice):
+            options = ["Poor", "Fair", "Good", "Great"]
+            # Map choice to title case for comparison
+            c = (choice or "").title()
+            
+            row = f"<div style='margin-bottom: 12px;'><span style='font-size: 11px; font-weight: bold; color: #777; text-transform: uppercase;'>{label}</span><br><div style='margin-top: 4px;'>"
+            for opt in options:
+                if c == opt:
+                    row += f"<span style='display: inline-block; background: #c89a6c; color: #000; font-size: 10px; font-weight: bold; padding: 3px 10px; border-radius: 4px; margin-right: 6px;'>{opt}</span>"
+                else:
+                    row += f"<span style='display: inline-block; background: #f5f5f5; color: #bbb; font-size: 10px; padding: 2px 9px; border-radius: 4px; border: 1px solid #eee; margin-right: 6px;'>{opt}</span>"
+            row += "</div></div>"
+            return row
+
+        metrics_html = ""
+        metrics_html += get_emoji_row("Recommend Product", emojis.get("fb-recommend"))
+        metrics_html += get_emoji_row("Security Assessment", emojis.get("fb-security"))
+        metrics_html += get_emoji_row("Integration Ready", emojis.get("fb-integration"))
+        metrics_html += get_emoji_row("Ease of Use", emojis.get("fb-ease"))
 
         priority_section = ""
         if priorities:
-            priority_section = "<p><strong>Priorities:</strong></p><ul style='font-size: 13px;'>"
+            priority_section = "<p style='font-size: 11px; font-weight: bold; color: #777; text-transform: uppercase; margin-bottom: 8px;'>Feature Prioritization:</p>"
+            priority_section += "<div style='display: flex; flex-wrap: wrap; gap: 6px;'>"
             for p in priorities:
-                priority_section += f"<li>{p.replace('-', ' ').capitalize()}</li>"
-            priority_section += "</ul>"
+                priority_section += f"<span style='display: inline-block; background: #eee; border-left: 3px solid #c89a6c; padding: 6px 12px; font-size: 12px; font-weight: 600; margin-bottom: 6px;'>{p}</span> "
+            priority_section += "</div>"
 
         html_body = f"""
-        <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;">
+        <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; max-width: 600px; border: 1px solid #ddd; padding: 40px; border-radius: 16px; line-height: 1.6;">
+            <div style="text-align: center; margin-bottom: 30px;">
+                <h2 style="color: #8b5e3c; margin: 0; font-size: 24px; letter-spacing: -0.5px;">UrbanFlow Intelligence</h2>
+                <p style="color: #999; font-size: 12px; text-transform: uppercase; tracking: 1px;">Session Feedback Artifact</p>
+            </div>
             
-            {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>
+            <div style="background: #fafafa; padding: 20px; border-radius: 12px; margin-bottom: 30px;">
+                <table style="width: 100%; font-size: 14px;">
+                    <tr><td style="color: #777; width: 40%; padding: 4px 0;">Primary Use Case:</td><td style="font-weight: 600;">{usecase}</td></tr>
+                    <tr><td style="color: #777; padding: 4px 0;">Feedback Category:</td><td style="font-weight: 600;">{fb_type}</td></tr>
+                    <tr><td style="color: #777; padding: 4px 0;">Overall Rating:</td><td style="font-weight: 600; color: #c89a6c;">{'★' * rating}{'☆' * (5-rating)} ({rating}/5)</td></tr>
+                </table>
+            </div>
+
+            <div style="margin-bottom: 30px;">
+                {metrics_html}
+            </div>
+
+            <div style="margin-bottom: 30px;">
+                {priority_section}
+            </div>
+
+            <div style="margin-bottom: 10px;">
+                <p style="font-size: 11px; font-weight: bold; color: #777; text-transform: uppercase;">Detailed Word Feedback:</p>
+                <div style="background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 8px; font-size: 14px; color: #444; white-space: pre-wrap; line-height: 1.8;">{details}</div>
+            </div>
             
-            <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
-            <p style="font-size: 11px; color: #999; text-align: center;">Sent via UrbanFlow Demo Platform Engine</p>
+            <hr style="border: 0; border-top: 1px solid #eee; margin: 40px 0;">
+            <p style="font-size: 10px; color: #aaa; text-align: center; font-style: italic;">Automated transmission from UrbanFlow Inference Engine v1.0</p>
         </div>
         """
         

frontend/js/vehicles.js

@@ -145,13 +145,17 @@
         }
 
         async function submitFeedback() {
-            const type = document.getElementById('fb-type').value;
+            const typeEl = document.getElementById('fb-type');
+            const typeText = typeEl.selectedIndex >= 0 ? typeEl.options[typeEl.selectedIndex].text : "";
+            
+            const usecaseEl = document.getElementById('fb-usecase');
+            const usecaseText = usecaseEl.selectedIndex >= 0 ? usecaseEl.options[usecaseEl.selectedIndex].text : "";
+            
             const text = document.getElementById('fb-text').value.trim();
-            const usecase = document.getElementById('fb-usecase').value;
             
             const priorities = [];
             document.querySelectorAll('#fb-priorities .fb-chip.active').forEach(c => {
-                priorities.push(c.getAttribute('data-val'));
+                priorities.push(c.innerText);
             });
 
             if (!text && _fbRating === 0 && !_fbEmojis['fb-recommend'] && !_fbEmojis['fb-security'] && !_fbEmojis['fb-integration'] && !_fbEmojis['fb-ease']) {
@@ -162,8 +166,8 @@
             const payload = {
                 rating: _fbRating,
                 emojis: _fbEmojis,
-                type: type,
-                usecase: usecase,
+                type: typeText,
+                usecase: usecaseText,
                 priorities: priorities,
                 details: text,
                 timestamp: new Date().toISOString()
@@ -188,11 +192,10 @@
                 _fbRating = 0;
                 setRating(0);
 
-                // Start Cooldown (60 seconds)
+                // Start Smooth 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';
@@ -200,15 +203,17 @@
                 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) + '%';
+                const startTime = Date.now();
+                const duration = 60000;
+                
+                function updateSmoothBar() {
+                    const elapsed = Date.now() - startTime;
+                    const remaining = Math.max(0, duration - elapsed);
+                    bar.style.width = (remaining / duration * 100) + '%';
                     
-                    if (timeLeft <= 0) {
-                        clearInterval(interval);
+                    if (remaining > 0) {
+                        requestAnimationFrame(updateSmoothBar);
+                    } else {
                         btn.disabled = false;
                         btn.style.opacity = '1';
                         btn.style.cursor = 'pointer';
@@ -216,7 +221,8 @@
                         wrap.classList.add('hidden');
                         bar.style.width = '100%';
                     }
-                }, 1000);
+                }
+                requestAnimationFrame(updateSmoothBar);
             } else {
                 showToast('Failed to submit — please try again', 'error');
             }

frontend/vehicles.html

@@ -833,11 +833,11 @@
                             </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 id="fb-cooldown-wrap" class="w-full mt-5 hidden">
+                                <div class="w-full h-[1.5px] bg-neutral-900 rounded-full overflow-hidden">
+                                    <div id="fb-cooldown-bar" class="h-full w-full 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>
+                                <p class="text-[9px] font-bold text-center mt-2.5 uppercase tracking-[0.25em]" style="color:#444">Ready to send again in a moment...</p>
                             </div>
 
                         </div>