Subh775 commited on
Commit
9530a74
·
1 Parent(s): 9631c6c

feedback improved..

Browse files
Files changed (1) hide show
  1. frontend/vehicles.html +59 -46
frontend/vehicles.html CHANGED
@@ -1142,33 +1142,40 @@
1142
  </div>
1143
 
1144
  <!-- TAB: Feedback -->
1145
- <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:24px">
 
1146
  <div class="max-w-6xl mx-auto space-y-6">
1147
- <div class="bg-black border border-slate-800 rounded-2xl p-10 shadow-2xl space-y-10">
1148
- <div class="text-center space-y-3">
1149
- <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
1150
- <p class="text-xs" style="color:#777">We are actively refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
1151
- <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full">
1152
- <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
1153
- <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">Takes about 2 minutes to complete</span>
1154
- </div>
1155
  </div>
 
1156
 
1157
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
1158
- <!-- Left Side: Emoji Metrics & Selectors -->
1159
- <div class="space-y-6 flex flex-col justify-between">
1160
- <div class="space-y-6">
1161
- <div>
1162
- <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Overall Experience</label>
1163
- <div class="fb-stars" id="fb-stars">
1164
- <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
1165
- <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
1166
- <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
1167
- <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
1168
- <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
1169
- </div>
 
 
 
 
1170
  </div>
1171
-
 
 
 
1172
  <div>
1173
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
1174
  <div class="flex gap-2" id="fb-recommend">
@@ -1216,7 +1223,29 @@
1216
  </div>
1217
  </div>
1218
 
1219
- <div class="grid grid-cols-2 gap-4 mt-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1220
  <div>
1221
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
1222
  <select class="fb-select w-full" id="fb-usecase">
@@ -1239,37 +1268,21 @@
1239
  </select>
1240
  </div>
1241
  </div>
1242
- </div>
1243
-
1244
- <!-- Right Side: Features & Text -->
1245
- <div class="space-y-6 flex flex-col">
1246
- <div>
1247
- <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" style="color:#a89f97">Feature Prioritization (Select all that apply)</label>
1248
- <div class="grid grid-cols-2 gap-3" id="fb-priorities">
1249
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="live-rtsp">Live RTSP Streams</div>
1250
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="api-access">REST API Access</div>
1251
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="multi-cam">Junction Stitching</div>
1252
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="violation">Traffic Violations</div>
1253
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="edge-deploy">Cloud-to-Edge Sync</div>
1254
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">ANPR Integration</div>
1255
- </div>
1256
- </div>
1257
 
1258
- <div class="flex-1 min-h-[140px]">
1259
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Detailed Word Feedback</label>
1260
- <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>
1261
  </div>
1262
 
1263
- <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"
1264
- style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)">
1265
  Transmit Feedback <i class="fa-solid fa-paper-plane text-[10px]"></i>
1266
  </button>
1267
  </div>
1268
  </div>
 
1269
 
1270
- <div class="pt-6 border-t border-[#111]">
1271
- <p class="text-[10px] text-center" style="color:#444">Queries: <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
1272
- </div>
1273
  </div>
1274
  </div>
1275
  </div>
 
1142
  </div>
1143
 
1144
  <!-- TAB: Feedback -->
1145
+ <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto">
1146
+ <!-- Full Header Area -->
1147
  <div class="max-w-6xl mx-auto space-y-6">
1148
+ <div class="text-center space-y-3 mb-6">
1149
+ <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
1150
+ <p class="text-xs" style="color:#777">We are actively refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
1151
+ <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full mt-2">
1152
+ <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
1153
+ <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">Takes about 2 minutes to complete</span>
 
 
1154
  </div>
1155
+ </div>
1156
 
1157
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
1158
+ <!-- Left Side: Experience & Requirements (All Selective Choices) -->
1159
+ <div class="col-span-1 bg-black rounded-xl border border-slate-800 shadow-sm overflow-hidden flex flex-col">
1160
+ <div class="px-6 py-4 border-b border-slate-800 bg-[#050505]">
1161
+ <h3 class="font-bold text-white text-sm flex items-center">Experience & Priorities</h3>
1162
+ <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Rate your experience</p>
1163
+ </div>
1164
+ <div class="p-6 flex-1 space-y-8">
1165
+ <!-- Overall Experience Centered -->
1166
+ <div class="flex flex-col items-center justify-center border-b border-slate-800 pb-6">
1167
+ <label class="text-[10px] font-bold uppercase tracking-widest block mb-3 text-center" style="color:#a89f97">Overall Experience</label>
1168
+ <div class="fb-stars" id="fb-stars">
1169
+ <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
1170
+ <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
1171
+ <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
1172
+ <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
1173
+ <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
1174
  </div>
1175
+ </div>
1176
+
1177
+ <!-- Emojis Grid -->
1178
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
1179
  <div>
1180
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
1181
  <div class="flex gap-2" id="fb-recommend">
 
1223
  </div>
1224
  </div>
1225
 
1226
+ <!-- Feature Prioritization -->
1227
+ <div class="pt-4 border-t border-slate-800">
1228
+ <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" style="color:#a89f97">Feature Prioritization (Select all that apply)</label>
1229
+ <div class="grid grid-cols-2 gap-3" id="fb-priorities">
1230
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="live-rtsp">Live RTSP Streams</div>
1231
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="api-access">REST API Access</div>
1232
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">ANPR Recognition</div>
1233
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="security">Security Focus</div>
1234
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="regulation">Regulation & Policies</div>
1235
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet">Helmet Compliance</div>
1236
+ </div>
1237
+ </div>
1238
+ </div>
1239
+ </div>
1240
+
1241
+ <!-- Right Side: Categorization & Feedback Text -->
1242
+ <div class="col-span-1 bg-black rounded-xl border border-slate-800 shadow-sm overflow-hidden flex flex-col">
1243
+ <div class="px-6 py-4 border-b border-slate-800 bg-[#050505]">
1244
+ <h3 class="font-bold text-white text-sm flex items-center">Categorization & Feedback</h3>
1245
+ <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Detailed workflow insights</p>
1246
+ </div>
1247
+ <div class="p-6 flex-1 flex flex-col space-y-6">
1248
+ <div class="grid grid-cols-2 gap-4">
1249
  <div>
1250
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
1251
  <select class="fb-select w-full" id="fb-usecase">
 
1268
  </select>
1269
  </div>
1270
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1271
 
1272
+ <div class="flex-1 flex flex-col">
1273
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Detailed Word Feedback</label>
1274
+ <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>
1275
  </div>
1276
 
1277
+ <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)">
 
1278
  Transmit Feedback <i class="fa-solid fa-paper-plane text-[10px]"></i>
1279
  </button>
1280
  </div>
1281
  </div>
1282
+ </div>
1283
 
1284
+ <div class="pt-6 border-t border-[#111]">
1285
+ <p class="text-[10px] text-center uppercase tracking-widest" style="color:#444">Queries: <strong style="color:#c89a6c">support@urbanflow.in</strong></p>
 
1286
  </div>
1287
  </div>
1288
  </div>