feedback updated..

frontend/vehicles.html

@@ -1143,8 +1143,8 @@
 
         <!-- TAB: Feedback -->
         <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:24px">
-            <div class="w-full h-full">
-                <div class="bg-black border border-slate-800 rounded-2xl p-10 shadow-2xl space-y-10 min-h-full">
+            <div class="max-w-6xl mx-auto space-y-6">
+                <div class="bg-black border border-slate-800 rounded-2xl p-10 shadow-2xl space-y-10">
                     <div class="text-center space-y-3">
                         <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
                         <p class="text-xs" style="color:#777">We are actively refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
@@ -1155,8 +1155,9 @@
                     </div>
 
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
-                        <div class="space-y-8">
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <!-- Left Side: Emoji Metrics & Selectors -->
+                        <div class="space-y-6 flex flex-col justify-between">
+                            <div class="space-y-6">
                                 <div>
                                     <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Overall Experience</label>
                                     <div class="fb-stars" id="fb-stars">
@@ -1167,6 +1168,7 @@
                                         <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
                                     </div>
                                 </div>
+                                
                                 <div>
                                     <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
                                     <div class="flex gap-2" id="fb-recommend">
@@ -1176,38 +1178,71 @@
                                         <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Highly')"><i class="fa-solid fa-face-grin-stars text-xl"></i><span class="block mt-1 text-[8px] uppercase">Highly</span></div>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                                 <div>
-                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Security</label>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Security
+                                        <span class="info-wrap ml-1"><span class="info-btn"><i class="fa-solid fa-info"></i></span><span class="info-tip">How confident are you in our data handling and privacy measures?</span></span>
+                                    </label>
                                     <div class="flex gap-2" id="fb-security">
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i><span class="block mt-1 text-[8px] uppercase">Poor</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i><span class="block mt-1 text-[8px] uppercase">Fair</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i><span class="block mt-1 text-[8px] uppercase">Good</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i><span class="block mt-1 text-[8px] uppercase">Great</span></div>
                                     </div>
                                 </div>
+
                                 <div>
-                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Integrations</label>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Integrations
+                                        <span class="info-wrap ml-1"><span class="info-btn"><i class="fa-solid fa-info"></i></span><span class="info-tip">How well does UrbanFlow fit into your existing TMS or software ecosystem?</span></span>
+                                    </label>
                                     <div class="flex gap-2" id="fb-integration">
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i><span class="block mt-1 text-[8px] uppercase">Poor</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i><span class="block mt-1 text-[8px] uppercase">Fair</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i><span class="block mt-1 text-[8px] uppercase">Good</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i><span class="block mt-1 text-[8px] uppercase">Great</span></div>
                                     </div>
                                 </div>
+
                                 <div>
-                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Ease of Use</label>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Ease of Use
+                                        <span class="info-wrap ml-1"><span class="info-btn"><i class="fa-solid fa-info"></i></span><span class="info-tip">How intuitive is the dashboard and configuration process?</span></span>
+                                    </label>
                                     <div class="flex gap-2" id="fb-ease">
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
-                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i><span class="block mt-1 text-[8px] uppercase">Poor</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i><span class="block mt-1 text-[8px] uppercase">Fair</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i><span class="block mt-1 text-[8px] uppercase">Good</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i><span class="block mt-1 text-[8px] uppercase">Great</span></div>
                                     </div>
                                 </div>
                             </div>
 
+                            <div class="grid grid-cols-2 gap-4 mt-6">
+                                <div>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
+                                    <select class="fb-select w-full" id="fb-usecase">
+                                        <option value="" disabled selected>Select your use case</option>
+                                        <option value="research">Academic / Traffic Research</option>
+                                        <option value="planning">Urban Planning & Capacity</option>
+                                        <option value="highway">Highway Authority (NHAI/State)</option>
+                                        <option value="smartcity">Smart City Integrator</option>
+                                        <option value="other">Other Institutional</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Feedback Category</label>
+                                    <select class="fb-select w-full" id="fb-type">
+                                        <option value="" disabled selected>General Professional Feedback</option>
+                                        <option value="bug">Technical Issue / Bug Report</option>
+                                        <option value="feature">Strategic Feature Request</option>
+                                        <option value="accuracy">Inference Accuracy Review</option>
+                                        <option value="ux">Dashboard Workflow / UX</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Right Side: Features & Text -->
+                        <div class="space-y-6 flex flex-col">
                             <div>
                                 <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" style="color:#a89f97">Feature Prioritization (Select all that apply)</label>
                                 <div class="grid grid-cols-2 gap-3" id="fb-priorities">
@@ -1219,26 +1254,13 @@
                                     <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">ANPR Integration</div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="space-y-6">
-                            <div>
-                                <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Feedback Category</label>
-                                <select class="fb-select w-full" id="fb-type">
-                                    <option value="general">General Professional Feedback</option>
-                                    <option value="bug">Technical Issue / Bug Report</option>
-                                    <option value="feature">Strategic Feature Request</option>
-                                    <option value="accuracy">Inference Accuracy Review</option>
-                                    <option value="ux">Dashboard Workflow / UX</option>
-                                </select>
-                            </div>
-
-                            <div>
+                            <div class="flex-1 min-h-[140px]">
                                 <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Detailed Word Feedback</label>
-                                <textarea class="fb-textarea w-full 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>
+                                <textarea class="fb-textarea w-full h-full min-h-[220px]" style="height: calc(100% - 24px);" 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-xl transition hover:scale-[1.01] active:scale-95 shadow-lg flex items-center justify-center gap-3"
+                            <button onclick="submitFeedback()" class="w-full py-4 font-bold text-sm rounded-xl 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 <i class="fa-solid fa-paper-plane text-[10px]"></i>
                             </button>
@@ -1246,7 +1268,7 @@
                     </div>
 
                     <div class="pt-6 border-t border-[#111]">
-                        <p class="text-[10px] text-center" style="color:#444">Institutional queries: <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
+                        <p class="text-[10px] text-center" style="color:#444">Queries: <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
                     </div>
                 </div>
             </div>