typography; mapping; reordering; state reset in form submission..

backend/server.py

@@ -200,73 +200,102 @@ 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'
-        rating = feedback.get('rating', 0)
-        details = feedback.get('details') or "No text provided"
-        usecase = feedback.get('usecase') or "Not specified"
-        
         emojis = feedback.get('emojis', {})
         priorities = feedback.get('priorities', [])
         
-        def get_emoji_row(label, choice):
-            options = ["Poor", "Fair", "Good", "Great"]
-            # Map choice to title case for comparison
+        # Check if it's stars-only (no emojis, no priorities, no text)
+        has_emojis = any(v for v in emojis.values())
+        has_priorities = len(priorities) > 0
+        has_text = bool(details and details.strip() and details != "No text provided")
+        is_stars_only = not (has_emojis or has_priorities or has_text)
+
+        def get_emoji_row(label, choice, custom_options=None):
+            options = custom_options or ["Poor", "Fair", "Good", "Great"]
             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;'>"
+            row = f"<div style='margin-bottom: 16px;'><span style='font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 1px;'>{label}</span><br><div style='margin-top: 6px;'>"
             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>"
+                    row += f"<span style='display: inline-block; background: #c89a6c; color: #000; font-size: 10px; font-weight: bold; padding: 4px 12px; border-radius: 6px; margin-right: 8px;'>{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 += f"<span style='display: inline-block; background: #fff; color: #ccc; font-size: 10px; padding: 3px 11px; border-radius: 6px; border: 1px solid #eee; margin-right: 8px;'>{opt}</span>"
             row += "</div></div>"
             return row
 
+        # Section 1: Experience Metrics (Above)
         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"))
+        if not is_stars_only:
+            metrics_html += get_emoji_row("Recommend Product", emojis.get("fb-recommend"), ["Unlikely", "Maybe", "Likely", "Highly"])
+            metrics_html += get_emoji_row("Security Assessment", emojis.get("fb-security"))
+            metrics_html += get_emoji_row("Integration Readiness", emojis.get("fb-integration"))
+            metrics_html += get_emoji_row("Ease of Use", emojis.get("fb-ease"))
 
+        # Section 2: Priorities (Below)
         priority_section = ""
-        if priorities:
-            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;'>"
+        if has_priorities:
+            priority_section = "<p style='font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;'>Feature Prioritization:</p>"
             for p in priorities:
-                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: '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>
-            
-            <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>
+                priority_section += f"<div style='background: #fff; border-left: 4px solid #c89a6c; padding: 10px 16px; font-size: 13px; font-weight: 600; margin-bottom: 8px; border-top: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; border-radius: 0 8px 8px 0;'>{p}</div>"
+
+        # Categorization & Feedback Content
+        categorization_html = ""
+        if not is_stars_only:
+            categorization_html = f"""
+            <div style="background: #fafafa; padding: 25px; border-radius: 16px; margin: 30px 0; border: 1px solid #f0f0f0;">
+                <table style="width: 100%; font-size: 13px;">
+                    <tr><td style="color: #999; width: 40%; padding: 6px 0; text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: 0.5px;">Primary Use Case</td><td style="font-weight: 700; color: #333;">{usecase}</td></tr>
+                    <tr><td style="color: #999; padding: 6px 0; text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: 0.5px;">Feedback Category</td><td style="font-weight: 700; color: #333;">{fb_type}</td></tr>
                 </table>
             </div>
-
-            <div style="margin-bottom: 30px;">
-                {metrics_html}
+            """
+
+        detailed_feedback_html = ""
+        if has_text:
+            detailed_feedback_html = f"""
+            <div style="margin-top: 30px;">
+                <p style="font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;">Detailed Word Feedback</p>
+                <div style="background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 14px; font-size: 14px; color: #444; white-space: pre-wrap; line-height: 1.8; box-shadow: 0 2px 10px rgba(0,0,0,0.02);">{details}</div>
             </div>
+            """
+
+        # Header with Rating
+        header_rating = f"""
+        <div style="text-align: center; margin-bottom: 40px; padding: 20px; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border-radius: 20px;">
+            <h2 style="color: #8b5e3c; margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -1px;">UrbanFlow Intelligence</h2>
+            <div style="margin-top: 15px; font-size: 22px; color: #c89a6c; letter-spacing: 4px;">{'★' * rating}{'☆' * (5-rating)}</div>
+            <p style="color: #aaa; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; font-weight: 700;">Overall Experience: {rating}/5 Stars</p>
+        </div>
+        """
 
-            <div style="margin-bottom: 30px;">
-                {priority_section}
-            </div>
+        # Assemble the body
+        final_content = header_rating
+        if is_stars_only:
+            final_content += "<div style='text-align: center; padding: 40px; color: #777; font-style: italic; font-size: 14px;'>User submitted an overall star rating with no additional details.</div>"
+        else:
+            final_content += f"""
+                <div style="margin-bottom: 40px;">{metrics_html}</div>
+                {categorization_html}
+                <div style="margin-bottom: 40px;">{priority_section}</div>
+                {detailed_feedback_html}
+            """
 
-            <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>
+        html_body = f"""
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+        </head>
+        <body style="margin: 0; padding: 0; background-color: #ffffff;">
+            <div style="font-family: 'Montserrat', sans-serif; color: #333; max-width: 600px; margin: 40px auto; padding: 0 20px;">
+                {final_content}
+                
+                <div style="margin-top: 60px; padding-top: 30px; border-top: 1px solid #eee; text-align: center;">
+                    <p style="font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin: 0;">Inference Engine Feedback Capture</p>
+                    <p style="font-size: 9px; color: #ddd; margin-top: 5px;">&copy; 2026 UrbanFlow. All rights reserved.</p>
+                </div>
             </div>
-            
-            <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>
+        </body>
+        </html>
         """
         
         resend.Emails.send({

frontend/js/vehicles.js

@@ -158,8 +158,8 @@
                 priorities.push(c.innerText);
             });
 
-            if (!text && _fbRating === 0 && !_fbEmojis['fb-recommend'] && !_fbEmojis['fb-security'] && !_fbEmojis['fb-integration'] && !_fbEmojis['fb-ease']) {
-                showToast("Please provide a rating, some emojis, or word feedback", "error");
+            if (_fbRating === 0 && !text && !Object.values(_fbEmojis).some(v => v) && priorities.length === 0) {
+                showToast("Please provide a star rating or some detailed feedback", "error");
                 return;
             }
 
@@ -180,6 +180,8 @@
             if (res.ok) {
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
+                document.getElementById('fb-usecase').selectedIndex = 0;
+                document.getElementById('fb-type').selectedIndex = 0;
                 document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
                 
                 // Reset Emojis