feedback section enhancement..

frontend/vehicles.html

@@ -421,6 +421,27 @@
             transition: color 0.15s;
         }
         .fb-star.active, .fb-star:hover { color: var(--cocoa-l); }
+        .fb-chip {
+            background: #050505;
+            border: 1px solid #222;
+            border-radius: 8px;
+            color: #666;
+            font-size: 10px;
+            font-weight: 700;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-align: center;
+            text-transform: uppercase;
+            tracking-widest: 0.05em;
+        }
+        .fb-chip:hover { border-color: #444; color: #999; }
+        .fb-chip.active {
+            border-color: var(--cocoa-l);
+            background: #111;
+            color: #fff;
+            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+        }
     </style>
 </head>
 
@@ -1103,63 +1124,85 @@
         </div>
 
         <!-- TAB: Feedback -->
-        <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:16px">
-            <div class="max-w-4xl mx-auto w-full">
-                <div class="bg-black border border-slate-800 rounded-xl p-8 shadow-2xl space-y-6">
-                    <div class="text-center">
-                        <h2 class="text-xl font-bold" style="color:#f0ece6">Share Your Feedback</h2>
-                        <p class="text-xs mt-2" style="color:#777">We're in the requirements-gathering phase. Your input directly shapes what gets built.</p>
+        <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:24px">
+            <div class="max-w-6xl mx-auto w-full">
+                <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>
+                        <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full">
+                            <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
+                            <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">Takes about 2 minutes to complete</span>
+                        </div>
                     </div>
 
-                    <div class="space-y-6">
-                        <div class="grid grid-cols-2 gap-6">
+                    <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">
+                                <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">
+                                        <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
+                                        <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
+                                        <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
+                                        <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
+                                        <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">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>
+
                             <div>
-                                <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Overall Experience</label>
-                                <div class="fb-stars" id="fb-stars">
-                                    <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
-                                    <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
-                                    <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
-                                    <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
-                                    <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
+                                <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">
+                                    <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="live-rtsp">Live RTSP Streams</div>
+                                    <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="api-access">REST API Access</div>
+                                    <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="multi-cam">Junction Stitching</div>
+                                    <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="violation">Traffic Violations</div>
+                                    <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="edge-deploy">Cloud-to-Edge Sync</div>
+                                    <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-2" 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</option>
+                                <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>
-                            <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Category</label>
-                            <select class="fb-select w-full" id="fb-type">
-                                <option value="general">General Feedback</option>
-                                <option value="bug">Bug Report / Processing Failure</option>
-                                <option value="feature">Feature Request / Enhancements</option>
-                                <option value="accuracy">Detection Accuracy (Misses/False Positives)</option>
-                                <option value="ux">User Experience / Interface</option>
-                            </select>
-                        </div>
+                            <div>
+                                <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>
+                            </div>
 
-                        <div>
-                            <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Details</label>
-                            <textarea class="fb-textarea w-full min-h-[140px]" id="fb-text" placeholder="Please provide specific details. If reporting accuracy issues, mention vehicle types or lighting conditions..."></textarea>
+                            <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"
+                                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>
                         </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"
-                            style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)">
-                            Submit Feedback <i class="fa-solid fa-paper-plane ml-2 text-[10px]"></i>
-                        </button>
                     </div>
 
-                    <p class="text-[10px] text-center" style="color:#444">Or email us directly at <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
+                    <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>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1298,15 +1341,36 @@
         async function submitFeedback() {
             const type = document.getElementById('fb-type').value;
             const text = document.getElementById('fb-text').value.trim();
-            if (!text && !_fbRating) { showToast('Please add a rating or comment', 'error'); return; }
+            const usecase = document.getElementById('fb-usecase').value;
+            
+            const priorities = [];
+            document.querySelectorAll('#fb-priorities .fb-chip.active').forEach(c => {
+                priorities.push(c.getAttribute('data-val'));
+            });
+
+            if (!text && _fbRating === 0) {
+                showToast("Please provide a rating or some word feedback", "error");
+                return;
+            }
+
+            const payload = {
+                rating: _fbRating,
+                type: type,
+                usecase: usecase,
+                priorities: priorities,
+                details: text,
+                timestamp: new Date().toISOString()
+            };
             const res = await fetch('/api/feedback', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ rating: _fbRating, type, text })
+                body: JSON.stringify(payload)
             });
             if (res.ok) {
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
+                document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
+                _fbRating = 0;
                 setRating(0);
             } else {
                 showToast('Failed to submit — please try again', 'error');