Spaces:
Running
Running
File size: 90,644 Bytes
b87a24a 0bdf61b 091ea0d 3e04ea5 5cd1866 091ea0d 5cd1866 b87a24a 3e04ea5 b87a24a 5cd1866 e3ec5d6 5cd1866 b87a24a 091ea0d 5cd1866 091ea0d 5cd1866 091ea0d 5cd1866 091ea0d b87a24a 0bdf61b bb34c97 e3ec5d6 b87a24a 3e04ea5 bb34c97 3e04ea5 7649f8a bb34c97 5cd1866 b87a24a 5cd1866 bb34c97 5cd1866 b87a24a 3e04ea5 bb34c97 0bdf61b b87a24a 8cb6af1 f34ec8a 8cb6af1 d9ebe88 5cd1866 b87a24a 77210b8 5cd1866 b87a24a d9ebe88 b8e06ad 5cd1866 e3ec5d6 5cd1866 d9ebe88 37ed3ef b87a24a 5cd1866 a018ed7 5cd1866 ab43833 37ed3ef 091ea0d 463cb88 b8e06ad 77210b8 3e04ea5 f111bd5 3e04ea5 b8e06ad f111bd5 3e04ea5 b8e06ad f111bd5 3e04ea5 a476183 a14a412 f111bd5 5cd1866 091ea0d b8e06ad a14a412 b8e06ad a14a412 b8e06ad a14a412 b8e06ad 5cd1866 b8e06ad a14a412 b8e06ad 3e04ea5 b8e06ad a14a412 091ea0d b8e06ad 091ea0d a14a412 5cd1866 091ea0d a14a412 091ea0d b8e06ad 5cd1866 b8e06ad f1b833a b8e06ad 3e04ea5 b8e06ad d9ebe88 a14a412 d9ebe88 b87a24a 3e04ea5 0bdf61b 4511f82 a14a412 4511f82 b87a24a 3e04ea5 b87a24a 3e04ea5 0bdf61b 3e04ea5 a14a412 3e04ea5 b87a24a a14a412 b8e06ad d9ebe88 b87a24a 0bdf61b 4511f82 3e04ea5 4511f82 3e04ea5 4511f82 b87a24a a14a412 3e04ea5 b87a24a 3e04ea5 0bdf61b 4511f82 a14a412 4511f82 3e04ea5 4511f82 091ea0d a14a412 b87a24a 3e04ea5 b87a24a 3e04ea5 0bdf61b 4511f82 3e04ea5 4511f82 3e04ea5 4511f82 3e04ea5 b87a24a 3e04ea5 b87a24a 5cd1866 b8e06ad dde3ae9 5cd1866 dde3ae9 b8e06ad dde3ae9 091ea0d 2a7f65a 9fd9567 5cd1866 9fd9567 5cd1866 a14a412 5cd1866 a14a412 2a7f65a 3e04ea5 37ed3ef b36e64b 3e04ea5 5cd1866 091ea0d f1b833a b8e06ad 091ea0d 3e04ea5 091ea0d 3e04ea5 5cd1866 3e04ea5 b8e06ad 87983b9 091ea0d 87983b9 b8e06ad 3e04ea5 091ea0d 3e04ea5 b8e06ad 87983b9 091ea0d 87983b9 b8e06ad 3e04ea5 091ea0d 3e04ea5 b8e06ad 87983b9 091ea0d 87983b9 b8e06ad 3e04ea5 091ea0d 3e04ea5 b8e06ad 87983b9 091ea0d 87983b9 b8e06ad 3e04ea5 091ea0d 3e04ea5 e12bf3c 091ea0d f1b833a b8e06ad 091ea0d e12bf3c b8e06ad 3e04ea5 091ea0d a14a412 3e04ea5 091ea0d a14a412 091ea0d dde3ae9 091ea0d 3e04ea5 dde3ae9 3e04ea5 dde3ae9 9fe06be 3e04ea5 d55f352 091ea0d d55f352 091ea0d d55f352 b8e06ad d55f352 b8e06ad d55f352 091ea0d d55f352 b8e06ad d55f352 7649f8a 3879f25 b8e06ad a476183 091ea0d a14a412 a476183 b8e06ad 3879f25 7649f8a 3e04ea5 e0d9763 3e04ea5 e0d9763 c734973 bb34c97 3e04ea5 5cd1866 a80bf6a 013fa42 e0d9763 5cd1866 013fa42 3e04ea5 f34ec8a 8cb6af1 b36e64b f1b833a 091ea0d b8e06ad f34ec8a 091ea0d a14a412 b8e06ad 8cb6af1 b8e06ad 9bd7d3f 8cb6af1 b8e06ad 9bd7d3f b8e06ad 8d1922c b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8d1922c b8e06ad 8cb6af1 b8e06ad a14a412 8cb6af1 b8e06ad 8d1922c b8e06ad 8cb6af1 b8e06ad 5cd1866 a14a412 8cb6af1 091ea0d b8e06ad 091ea0d b8e06ad a4a4430 8cb6af1 a4a4430 a14a412 8cb6af1 091ea0d b8e06ad a14a412 a4a4430 8cb6af1 a4a4430 b8e06ad a14a412 8cb6af1 b8e06ad 9bd7d3f b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad a14a412 b8e06ad 8cb6af1 b8e06ad a14a412 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad 8cb6af1 b8e06ad a14a412 b8e06ad 8cb6af1 37ed3ef 9530a74 7df9357 9530a74 b8e06ad 9530a74 b8e06ad d9ebe88 9530a74 d9ebe88 9530a74 091ea0d 7df9357 9530a74 091ea0d b8e06ad 9530a74 091ea0d b8e06ad 9530a74 2d0cf48 9530a74 173fc7b b8e06ad 173fc7b b8e06ad 091ea0d b8e06ad 173fc7b 2d0cf48 173fc7b b8e06ad 9631c6c 173fc7b b8e06ad 173fc7b 9631c6c 173fc7b b8e06ad 9631c6c 173fc7b b8e06ad 173fc7b 9631c6c 2d0cf48 b8e06ad 9631c6c 173fc7b b8e06ad 173fc7b 2d0cf48 9530a74 7df9357 b8e06ad 9530a74 b8e06ad 9530a74 091ea0d 7df9357 9530a74 091ea0d b8e06ad 9530a74 9631c6c b8e06ad 091ea0d 9631c6c b8e06ad 091ea0d 9631c6c d55f352 9530a74 b8e06ad 2d0cf48 d9ebe88 b8e06ad bda697c 2d0cf48 d0f2cef 6df8f0e b8e06ad d0f2cef b8e06ad d0f2cef d9ebe88 9530a74 d9ebe88 9530a74 b8e06ad d9ebe88 5cd1866 8d7da35 5cd1866 8d7da35 5cd1866 8cb6af1 5cd1866 8d7da35 5cd1866 8d7da35 3207e43 a80bf6a 091ea0d 8d7da35 5cd1866 091ea0d 5cd1866 091ea0d 0bdf61b 091ea0d 5cd1866 091ea0d 3207e43 b87a24a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>UrbanFlow</title>
<link rel="icon" type="image/png" href="assets/shuriken.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="UrbanFlow">
<link rel="apple-touch-icon" href="assets/shurkien_b.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/shared.css">
<link rel="stylesheet" href="css/vehicles.css">
<link rel="stylesheet" href="css/auth.css">
<!-- SPA Guard: no active run OR page refresh → go back to landing -->
<script>
(function() {
// SPA: rewrite URL to root so /vehicles never shows in the address bar
if (window.location.pathname !== '/') {
history.replaceState(null, '', '/');
}
var hasRun = sessionStorage.getItem('funky_run');
var consumed = sessionStorage.getItem('funky_run_consumed');
if (!hasRun || consumed) {
sessionStorage.removeItem('funky_run');
sessionStorage.removeItem('funky_run_consumed');
sessionStorage.removeItem('uf_active_tab');
window.location.replace('/');
} else {
// Mark as consumed immediately — any refresh from here will redirect
sessionStorage.setItem('funky_run_consumed', '1');
}
})();
</script>
</head>
<body class="bg-black text-white h-screen w-screen flex" style="overflow:hidden">
<!-- Fixed portal: bubbles, toasts, overlays append here — never clipped -->
<div id="fixed-portal" style="position:fixed;inset:0;pointer-events:none;z-index:8999"></div>
<div class="mobile-top-bar" id="mobile-top-bar">
<img src="assets/uf_rf.png" alt="UrbanFlow" class="h-14 w-auto object-contain">
<!-- Mobile Legal Overflow -->
<div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center">
<button id="mobile-menu-trigger" onclick="toggleLegalMenu(event)" class="text-[#a89f97] hover:text-white p-2 transition-colors" aria-label="Menu">
<i id="mobile-menu-icon" class="fa-solid fa-ellipsis-vertical text-lg"></i>
</button>
<div id="legal-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg shadow-2xl z-50 overflow-hidden">
<button onclick="openAppModal('privacyModal'); toggleLegalMenu(event)" class="w-full text-left px-4 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#a89f97] hover:text-white hover:bg-[#111] border-b border-[#1a1a1a] transition-all">
Privacy Policy
</button>
<button onclick="openAppModal('termsModal'); toggleLegalMenu(event)" class="w-full text-left px-4 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#a89f97] hover:text-white hover:bg-[#111] border-b border-[#1a1a1a] transition-all">
Terms & Conditions
</button>
<!-- Sign Out (populated by JS) -->
<button id="mobile-signout-btn" class="mobile-signout-btn" style="display:none" onclick="showLogoutConfirm()">Sign Out</button>
</div>
</div>
</div>
<!-- Sidebar -->
<aside class="w-60 bg-neutral-950 shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-neutral-800 relative">
<div class="h-28 bg-black flex items-center justify-center px-4 my-2 border-b border-slate-800 flex-shrink-0">
<img id="sidebar-logo-top" src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
</div>
<nav class="flex-1 px-4 py-4 space-y-1.5 overflow-y-auto text-sm">
<a onclick="switchTab('about')" id="nav-about"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-circle-info w-6"></i> <span class="font-medium">About</span>
</a>
<a onclick="switchTab('overview')" id="nav-overview"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
</a>
<a onclick="switchTab('results')" id="nav-results"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Results</span>
</a>
<a onclick="switchTab('settings')" id="nav-settings"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-gear w-6"></i> <span class="font-medium">Settings</span>
</a>
<a onclick="switchTab('help')" id="nav-help"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-circle-question w-6"></i> <span class="font-medium">Guide</span>
</a>
<a onclick="switchTab('feedback')" id="nav-feedback"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<i class="fa-solid fa-comment-dots w-6"></i> <span class="font-medium">Feedback</span>
</a>
<a onclick="switchTab('profile')" id="nav-profile"
class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
<div id="sidebar-profile-pfp-wrap" class="w-6 h-6 inline-flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-circle-user"></i></div>
<span class="font-medium ml-3">Profile</span>
</a>
</nav>
<div class="mt-auto border-t p-4 flex flex-col items-center gap-2 bg-black flex-shrink-0"
style="border-color:#2a2a2a">
<button onclick="openAppModal('privacyModal')"
class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded"
style="color:#a89f97" onmouseover="this.style.color='#c89a6c'"
onmouseout="this.style.color='#a89f97'">Privacy Policy</button>
<button onclick="openAppModal('termsModal')"
class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded"
style="color:#a89f97" onmouseover="this.style.color='#c89a6c'"
onmouseout="this.style.color='#a89f97'">Terms & Conditions</button>
<p class="text-[11px] font-medium mt-2 mb-1 text-center" style="color:#555">© 2026 UrbanFlow<br><span class="text-[9px] text-[#444] block mt-1">All rights reserved.</span></p>
</div>
</aside>
<!-- Mobile Navigation (hidden on desktop) -->
<div
class="mobile-nav hidden fixed top-0 left-0 right-0 z-30 bg-black border-b border-slate-800 px-4 py-2 items-center justify-between">
<img src="assets/uf_rf.png" alt="UF" class="h-8">
<div class="flex items-center gap-4">
<div class="dropdown relative">
<button onclick="toggleLegalMenu(event)" class="text-slate-500 hover:text-white transition">
<i class="fa-solid fa-ellipsis-vertical"></i>
</button>
<div id="legal-menu" class="hidden absolute right-0 mt-2 w-48 bg-neutral-900 border border-neutral-800 rounded-lg shadow-xl py-2 z-50">
<a onclick="openAppModal('privacyModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Privacy Policy</a>
<a onclick="openAppModal('termsModal')" class="block px-4 py-2 text-xs text-slate-300 hover:bg-neutral-800 hover:text-white cursor-pointer">Terms & Conditions</a>
</div>
</div>
</div>
</div>
<!-- Toast Container -->
<div id="toast-container"></div>
<main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
<!-- Progress Bar (shared) -->
<div id="progress-bar-wrapper"
class="w-full bg-neutral-950 rounded-xl px-6 py-4 border border-neutral-800 shadow-sm flex items-center justify-between flex-shrink-0">
<div class="flex items-center space-x-4 flex-1 mr-6">
<span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
id="proc-label">Waiting</span>
<div class="flex-1 h-2 bg-[#111111] rounded-full overflow-hidden relative border border-[#1a1a1a]">
<div id="proc-bar" class="h-full bg-[#444444] rounded-full transition-all duration-500 ease-out"
style="width: 0%"></div>
</div>
</div>
<div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap">
<span id="proc-frames">Awaiting Input</span>
<span id="proc-pct">Idle</span>
<div class="uf-select-wrap" id="live-palette-wrap">
<div class="uf-select-trigger" id="live-palette-trigger" onclick="ufSelectToggle('live-palette')">
<span class="uf-select-label" id="live-palette-label">Default</span>
<i class="fa-solid fa-chevron-down uf-select-arrow" id="live-palette-arrow"></i>
</div>
<div class="uf-select-dropdown hidden" id="live-palette-dropdown">
<div class="uf-select-option" data-value="default" onclick="ufSelectPick('live-palette','default','Default')">Default</div>
<div class="uf-select-option" data-value="vibrant" onclick="ufSelectPick('live-palette','vibrant','Vibrant')">Vibrant</div>
<div class="uf-select-option" data-value="corporate" onclick="ufSelectPick('live-palette','corporate','Corporate')">Corporate</div>
<div class="uf-select-option" data-value="neon" onclick="ufSelectPick('live-palette','neon','Neon Night')">Neon Night</div>
<div class="uf-select-option" data-value="earth" onclick="ufSelectPick('live-palette','earth','Earth Tones')">Earth Tones</div>
<div class="uf-select-option" data-value="ocean" onclick="ufSelectPick('live-palette','ocean','Ocean Breeze')">Ocean Breeze</div>
<div class="uf-select-option" data-value="sunset" onclick="ufSelectPick('live-palette','sunset','Sunset Glow')">Sunset Glow</div>
<div class="uf-select-option" data-value="midnight" onclick="ufSelectPick('live-palette','midnight','Midnight Deep')">Midnight Deep</div>
<div class="uf-select-option" data-value="gold" onclick="ufSelectPick('live-palette','gold','Monochrome Gold')">Monochrome Gold</div>
</div>
<input type="hidden" id="live-palette-select" value="default">
</div>
</div>
</div>
<!-- TAB: About -->
<div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
<div class="bg-black border rounded-xl p-12 shadow-2xl space-y-8 flex flex-col justify-center"
style="border-color:#2a2a2a">
<div class="text-center">
<p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto"
style="color:#c89a6c;font-family:'Montserrat',sans-serif">
“Traffic data has always existed on Indian roads — in the movement of every vehicle,
every crossing, every congested junction.
UrbanFlow is built to read that data precisely, and return it in a form that practitioners can
act on.”
</p>
</div>
<div class="space-y-5 leading-relaxed text-sm text-center" style="color:#a89f97">
<p>
UrbanFlow is a cloud-based traffic intelligence application that turns raw camera footage from
Indian roads
into structured, actionable data — vehicle counts by class, directional flow, congestion
patterns,
and downloadable reports — without requiring new hardware or on-site installation.
</p>
<p>
This is a <strong style="color:#f0ece6">demo application</strong>. It exists so that traffic
engineers, urban planners,
transport authorities, and researchers can evaluate what UrbanFlow delivers — and tell us
what they actually need.
We are in the <strong style="color:#f0ece6">requirements gathering phase</strong>, and your
feedback directly shapes
what gets built for production.
</p>
<p style="font-size:13px;color:#777">
The production system will support live-streaming and more advanced analytics.
This application only accepts video clips.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 pt-8 text-left border-t max-w-6xl mx-auto"
style="border-color:#1a1a1a">
<div class="space-y-4">
<h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Will Get Here</h4>
<ul class="text-xs space-y-3 pl-1">
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span>Class-wise vehicle counts</span>
</li>
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span>Directional Flow Analysis — incoming vs outgoing</span>
</li>
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span>Congestion Analytics, Peak Detection, and temporal Trends</span>
</li>
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span>Exportable Reports</span>
</li>
</ul>
</div>
<div class="space-y-4">
<h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Inference
Accuracy
</h4>
<p class="text-xs leading-relaxed" style="color:#a89f97">
UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
may vary slightly across runs due to frame-by-frame inference variability.
</p>
<p class="text-xs leading-relaxed" style="color:#a89f97">
For research or planning use, process the same footage 2–3 times
and average the results for improved reliability.
</p>
</div>
<div class="space-y-4">
<h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What's Next (Roadmap)</h4>
<ul class="text-xs space-y-3 pl-1">
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span><strong>RTSP Streaming Integration:</strong> Live CCTV stream processing directly from your network.</span>
</li>
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span><strong>ANPR / ALPR:</strong> Automated Number Plate Recognition for localized enforcement.</span>
</li>
<li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
style="color:#c89a6c"></i>
<span><strong>Helmet Detection:</strong> Real-time compliance tracking for two-wheelers.</span>
</li>
</ul>
</div>
</div>
<div class="text-center pt-6 border-t" style="border-color:#1a1a1a">
<p class="text-[13px] leading-relaxed" style="color:#888">
We are an applied research team — that work on solving real problems, not controlled test
environments.
The focus is on reliability under the actual condition: mixed lanes, dense occlusion,
heterogeneous vehicle type and variable lightning.
</p>
<p class="text-[12px] mt-3" style="color:#777">
Feedback, collaboration, or questions: <strong
style="color:#c89a6c">support.urbanflow365@gmail.com</strong>
</p>
</div>
</div>
</div>
<div id="tab-overview" class="hidden grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden"
style="position:relative">
<!-- Empty State Overlay -->
<div id="stats-empty-state" class="stats-empty-overlay">
<i class="fa-solid fa-chart-column text-4xl mb-4" style="color:#333"></i>
<span class="text-sm font-bold" style="color:#555">Awaiting Processing</span>
<span class="text-[11px] mt-1" style="color:#444">Charts will update dynamically as analysis
progresses.</span>
</div>
<!-- Congestion Index -->
<div
class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
<div class="flex justify-between items-center mb-2 relative">
<h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
<span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
<span class="info-tip">Count of active tracked vehicles visible in each processed
frame.</span></span>
</h3>
</div>
<div class="flex-1 relative w-full min-h-[220px]">
<canvas id="congestionChart"></canvas>
</div>
</div>
<!-- Doughnut — In / Out -->
<div
class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col items-center justify-center min-h-0">
<h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution
<span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
<span class="info-tip">Incoming vs outgoing vehicles detected along the defined path</span></span>
</h3>
<div class="relative w-full flex-1 min-h-[180px] flex items-center justify-center">
<canvas id="doughnutChart"></canvas>
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
<span class="text-3xl font-black text-slate-900" id="cnt-total">0</span>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Count</span>
<span class="text-[9px] font-bold mt-1 uppercase tracking-wider" style="color:#8b5e3c"
id="cnt-pcu-wrap"
title="Passenger Car Units (IRC:106-1990) — normalizes mixed traffic for capacity analysis">
<span id="cnt-pcu">0</span> PCU
</span>
</div>
</div>
</div>
<!-- Vehicle Classification Breakdown -->
<div
class="col-span-6 xl:col-span-3 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col overflow-hidden min-h-0">
<div class="flex justify-between items-center mb-1 relative">
<h3 class="font-bold text-slate-900 text-sm flex items-center">Vehicle Classification
<span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
<span class="info-tip">Per-class vehicle distribution with directional split across the
spatial boundary.</span></span>
</h3>
</div>
<div class="text-[10px] text-slate-400 mb-3 uppercase tracking-widest">Class Breakdown</div>
<div class="flex-1 overflow-y-auto pr-2 space-y-2" id="class-breakdown"></div>
</div>
<!-- Class Dominance -->
<div
class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
<div class="flex justify-between items-center mb-2 relative">
<h3 class="font-bold text-slate-900 text-sm flex items-center">Big Picture
<span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
<span class="info-tip">Aggregated vehicle count grouped by dominant category.</span></span>
</h3>
<span
class="text-[10px] text-slate-500 font-bold uppercase tracking-wider whitespace-nowrap">Category Dominance</span>
</div>
<div class="flex-1 w-full relative min-h-[220px]">
<canvas id="dominanceChart"></canvas>
</div>
</div>
<!-- Traffic Flow Over Time -->
<div
class="col-span-12 xl:col-span-6 bg-neutral-950 rounded-xl p-5 border border-neutral-800 shadow-sm flex flex-col min-h-0">
<div class="flex justify-between items-center mb-2 relative">
<h3 class="font-bold text-slate-900 text-sm flex items-center">Temporal Traffic Flow
<span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
<span class="info-tip">Number of vehicles analyzed within the spatial boundary, binned per
second of video duration.</span></span>
</h3>
<span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Units / Second</span>
</div>
<div class="flex-1 w-full relative min-h-[220px]">
<canvas id="flowChart"></canvas>
</div>
</div>
</div>
<!-- TAB: Results (Merged Artifacts + Run) -->
<div id="tab-results" class="hidden flex-1 min-h-0 overflow-y-auto">
<div id="reports-pending-message"
class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4"
style="min-height: 60vh;">
<i class="fa-solid fa-hourglass-half text-5xl mb-2" style="color:#3a3230;"></i>
<div style="color:#c89a6c; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;">
Results Pending
</div>
<span id="reports-pending-text"
class="text-xs font-medium tracking-wide uppercase leading-relaxed text-center"
style="color:#5a5450; max-width:220px; display:block;">
Upload a video & run analysis to access results and reports here.
</span>
</div>
<div id="results-content-wrap" class="hidden space-y-8 w-full pb-6">
<!-- Download Button -->
<div class="flex justify-center lg:hidden">
<button onclick="downloadArtifacts()" id="btn-download-bundle" class="w-fit px-8 py-3 font-bold text-xs rounded-full transition flex items-center justify-center gap-2 shadow-lg active:scale-95 hover:scale-105"
style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
<i class="fa-solid fa-download"></i> Download All Artifacts
</button>
</div>
<!-- Section: Performance Insights (formerly Run tab) -->
<div class="space-y-6">
<!-- PCU + Report Grid (unified) -->
<div id="post-process-cards" class="mb-4">
<div class="bg-black rounded-xl p-6 border border-neutral-800 shadow-sm flex flex-col min-h-[140px]">
<div class="flex justify-between items-center mb-4 relative">
<h3 class="font-bold text-white text-sm flex items-center">PCU Analysis
<span class="info-wrap"><span class="info-btn" style="background:#222;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian
traffic into standardized units for road capacity analysis.</span></span>
</h3>
</div>
<div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
<div class="text-center text-slate-600 text-xs">Available after processing</div>
</div>
</div>
</div>
<!-- Report Grid -->
<div id="reports-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-4"></div>
<!-- Collapsible Technical Telemetry (formerly Run tab) -->
<div class="mt-12 pt-12 border-t border-neutral-900">
<details class="group">
<summary class="flex items-center justify-between cursor-pointer list-none text-slate-500 hover:text-slate-300 transition">
<div class="flex items-center gap-3">
<i class="fa-solid fa-microchip text-xs"></i>
<span class="text-sm font-bold uppercase tracking-widest">Technical Runtime Telemetry</span>
</div>
<i class="fa-solid fa-chevron-down text-[10px] group-open:rotate-180 transition-transform"></i>
</summary>
<div class="mt-8 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500">
<!-- Process Analytics -->
<div id="run-results-card" class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm overflow-hidden flex flex-col">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-sm text-white">Execution Telemetry</h3>
</div>
<div class="p-8">
<div id="run-results-content" class="grid grid-cols-3 gap-8"></div>
</div>
</div>
<!-- Technical Context Row -->
<div class="grid grid-cols-2 gap-6">
<div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-sm text-white">Stream Source Profile</h3>
</div>
<div class="p-6 space-y-4 text-xs text-slate-400" id="panel-video"></div>
</div>
<div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-sm text-white">System Resource Utilization</h3>
</div>
<div class="p-6 space-y-4 text-xs text-slate-400" id="panel-perf"></div>
</div>
<div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-sm text-white">Model Architecture & Logic</h3>
</div>
<div class="p-6 space-y-4 text-xs text-slate-400" id="panel-model"></div>
</div>
<div class="bg-neutral-950 rounded-xl border border-neutral-800 shadow-sm flex flex-col overflow-hidden">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-sm text-white">Inference Parameters</h3>
</div>
<div class="p-6 space-y-4 text-xs text-slate-400" id="panel-infer"></div>
</div>
</div>
</div>
</details>
</div>
</div>
</div>
</div>
<!-- TAB: Settings -->
<div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
<div class="grid grid-cols-2 gap-6 w-full">
<!-- Processing Parameters -->
<div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col self-start"
style="border-color:#2a2a2a">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-white text-sm flex items-center">Inference Configuration Profile
<span class="info-wrap ml-2">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Figures and numbers below are auto-calculated for best
performance.</span>
</span>
</h3>
<p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
Auto-configured pipeline parameters</p>
</div>
<div class="px-6 py-2" id="settings-params">
<div class="s-row" data-param="imgsz">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Image Size
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Input resolution fed to the detection model. Optimized
for the resolution compiled into the OpenVINO weights.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Model input resolution</div>
</div>
<div class="s-stepper"><button onclick="stepParam('imgsz',-32)">‹</button><span
class="s-val" id="sv-imgsz">640</span><button
onclick="stepParam('imgsz',32)">›</button></div>
</div>
<div class="s-row" data-param="conf">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Confidence
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Minimum score a detection must reach to be counted. Lower
values detect more but may include false positives.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Minimum detection threshold</div>
</div>
<div class="s-stepper"><button onclick="stepParam('conf',-0.01)">‹</button><span
class="s-val" id="sv-conf">0.12</span><button
onclick="stepParam('conf',0.01)">›</button></div>
</div>
<div class="s-row" data-param="iou">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">IoU Threshold
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Controls how aggressively overlapping detections are
merged. Higher values allow more overlap before suppression.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Non-max suppression overlap</div>
</div>
<div class="s-stepper"><button onclick="stepParam('iou',-0.05)">‹</button><span
class="s-val" id="sv-iou">0.60</span><button
onclick="stepParam('iou',0.05)">›</button></div>
</div>
<div class="s-row" data-param="stride">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Frame Stride
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Number of frames skipped between each detection pass.
Higher values trade accuracy for speed.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Frames skipped between detections</div>
</div>
<div class="s-stepper"><button onclick="stepParam('stride',-1)">‹</button><span
class="s-val" id="sv-stride">2</span><button
onclick="stepParam('stride',1)">›</button></div>
</div>
</div>
</div>
<!-- Artifact Generation Settings -->
<div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col"
style="border-color:#2a2a2a">
<div class="px-6 py-4 border-b" style="border-color:#1a1a1a;background:#050505">
<h3 class="font-bold text-white text-sm">Artifact Settings</h3>
<p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
Configured visual overlay options</p>
</div>
<div class="px-6 py-4 flex-1 flex flex-col">
<div class="s-row" data-param="report">
<div>
<div class="text-xs font-semibold text-slate-300">Chart Format</div>
<div class="text-[10px] text-slate-500">Format for each KPI chart</div>
</div>
<div class="uf-select-wrap" id="sv-report-wrap">
<div class="uf-select-trigger" id="sv-report-trigger" onclick="ufSelectToggle('sv-report')">
<span class="uf-select-label" id="sv-report-label">PNG</span>
<i class="fa-solid fa-chevron-down uf-select-arrow" id="sv-report-arrow"></i>
</div>
<div class="uf-select-dropdown hidden" id="sv-report-dropdown">
<div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG')">PNG</div>
<div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF')">PDF</div>
</div>
<input type="hidden" id="sv-report" value="png">
</div>
</div>
<div class="s-row" data-param="annotated">
<div>
<div class="text-xs font-semibold text-slate-300">Export Annotated Video</div>
<div class="text-[10px] text-slate-500">Diagnostic visual overlays</div>
</div>
<div class="toggle-track" id="sv-annotated" onclick="toggleExportMaster(this)">
<div class="toggle-thumb"></div>
</div>
</div>
<div id="chip-selector" class="chip-container hidden-chip-container" data-param="annotated-chips">
<div class="chip frozen" id="chip-bbox">
<i class="fa-solid fa-check"></i> Bounding Boxes
</div>
<div class="chip active" id="chip-spatial" onclick="toggleChip('spatial')">
<i class="fa-solid fa-check"></i> Spatial Boundary
</div>
<div class="chip active" id="chip-class_id" onclick="toggleChip('class_id')">
<i class="fa-solid fa-check"></i> Class ID
</div>
<div class="chip active" id="chip-class_name" onclick="toggleChip('class_name')">
<i class="fa-solid fa-check"></i> Class Names
</div>
<div class="chip" id="chip-track_id" onclick="toggleChip('track_id')">
<i class="fa-solid fa-plus"></i> Track IDs
</div>
</div>
<div class="s-row">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Export Run Details
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Include analysis.json payload with all run parameters and
data structures.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Structurally represented technical details</div>
</div>
<div class="toggle-track" id="sv-export-json" onclick="this.classList.toggle('active')">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="s-row">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Export CSV Results
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Include frame-by-frame data in raw CSV format.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Include raw metrics and detections</div>
</div>
<div class="toggle-track" id="sv-export-csv" onclick="this.classList.toggle('active')">
<div class="toggle-thumb"></div>
</div>
</div>
<div class="s-row">
<div>
<div class="text-xs font-semibold text-slate-300 flex items-center">Auto-Download Report
<span class="info-wrap ml-1">
<span class="info-btn" style="background:#1a1a1a;color:#888"><i
class="fa-solid fa-info"></i></span>
<span class="info-tip">Enable before processing completes
to automatically download the report.</span>
</span>
</div>
<div class="text-[10px] text-slate-500">Save reports automatically</div>
</div>
<div class="toggle-track" id="sv-auto-download" onclick="toggleAutoDownload(this)">
<div class="toggle-thumb"></div>
</div>
</div>
</div>
</div>
<!-- Start Button -->
<div class="col-span-3 pb-4 flex justify-center" id="settings-start-wrap">
<button id="btn-start-processing" onclick="startProcessingFromSettings()"
class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
<span>Process <i class="fa-solid fa-arrow-right ml-2 text-[10px]"></i></span>
</button>
</div>
<!-- Home Button (visible only after processing completes) -->
<div class="col-span-3 pb-4 hidden flex justify-center" id="new-analysis-wrap">
<button onclick="startNewAnalysis()"
class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
<span><i class="fa-solid fa-house mr-2 text-sm"></i> Home</span>
</button>
</div>
</div>
</div>
<!-- TAB: Navigator -->
<div id="tab-help" class="hidden flex-1 min-h-0 overflow-y-auto">
<div class="space-y-6 w-full">
<div class="bg-black border rounded-xl overflow-hidden shadow-sm" style="border-color:#2a2a2a">
<div class="px-6 py-4 border-b flex justify-between items-center"
style="border-color:#1a1a1a;background:#050505">
<div>
<h3 class="font-bold text-white text-sm flex items-center">Navigator</h3>
<p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
Quick
assistance & Documentation</p>
</div>
</div>
<div class="p-8 space-y-10">
<!-- Category: Technical -->
<section>
<h4 class="text-[13px] font-bold uppercase tracking-[0.2em] mb-6 pb-2 border-b border-slate-900"
style="color:#c89a6c">Technical & Performance</h4>
<div class="space-y-4">
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h1')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Why is no live feed
analysis available instead of video exports?</span>
<i id="h1-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h1-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow Demo is currently hosted on standard CPU instances to demonstrate
accessibility. Real-time live analysis is exceptionally resource-intensive on
CPUs, which can lead to processing instability. By utilizing asynchronous
processing (Export Annotated Video), we optimize for low-hardware environments,
significantly reducing unnecessary energy consumption and contributing to lower
carbon emissions.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h2')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Why is auto-download
not functioning correctly?</span>
<i id="h2-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h2-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
Auto-download failures are typically caused by browser popup blockers. Please
ensure you have allowed popups for this site in your browser settings.
Alternatively, you can manually trigger the bundled ZIP download once processing reaches 100% by using the 'D' keyboard shortcut on Desktop, or tapping the 'Download All' button on Mobile.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h3')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Once processing
completes, how can I analyze another video?</span>
<i id="h3-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h3-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
To analyze a new video, go to 'Settings' and click 'Home'.
This resets your current session and returns you
to the Home screen.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h4')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">How accurate are
UrbanFlow's
traffic calculations?</span>
<i id="h4-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h4-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. While highly reliable, no computer vision model achieves 100% accuracy under all conditions. Results may vary slightly across runs due to frame-by-frame inference variability, severe occlusion, or extreme lighting. Our goal is constant iteration toward human-level perception.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h5')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis?</span>
<i id="h5-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h5-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
Passenger Car Unit (PCU) is a standard metric used in transportation engineering
to convert heterogeneous traffic (bikes, trucks, cars) into a common denominator
for capacity analysis. This allows UrbanFlow to accurately calculate standardized traffic loads and identify congestion bottlenecks regardless of vehicle composition.
</div>
</div>
</div>
</section>
<!-- Category: About -->
<section>
<h4 class="text-[13px] font-bold uppercase tracking-[0.2em] mb-6 pb-2 border-b border-slate-900"
style="color:#c89a6c">About UrbanFlow</h4>
<div class="space-y-4">
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h6')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Is UrbanFlow an
independent workspace or a collaborative project?</span>
<i id="h6-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h6-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow is an emerging, independent technology initiative currently in its
development phase. We are continuously scaling our internal infrastructure and
exploring future strategic collaborations with global leaders such as Google,
AWS, and Lambda to ensure compliance with international regulations and
standards.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h7')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Why is this application designed to be simple and focused?</span>
<i id="h7-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h7-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
This platform is intentionally built as a streamlined demo. We created it to allow users to explore and provide us with valuable feedback. This user feedback directly helps us continuously improve our models and guides the development of our full, enterprise-grade production suite.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h8')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">How can UrbanFlow
assist my business operations?</span>
<i id="h8-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h8-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow transforms passive visual data into actionable business intelligence.
By quantifying traffic patterns and demand, businesses can optimize site
selection, manage logistics more effectively, and improve general customer
accessibility through data-driven planning.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h9')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Where can I learn more
or verify the platform's reliability?</span>
<i id="h9-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h9-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow is built on a foundation of transparency. While currently in the
demonstration phase, we are establishing trust through rigorous internal testing
and by providing clear documentation on our data privacy and operational
standards.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h10')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">Is UrbanFlow a
Non-profit organization?</span>
<i id="h10-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h10-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
UrbanFlow is a commercial technology initiative focused on sustainable urban
development and providing scalable traffic intelligence solutions globally.
</div>
</div>
<div
class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
<button onclick="toggleHelp('h11')"
class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
<span class="text-sm font-semibold" style="color:#a89f97">What will UrbanFlow
provide in the future?</span>
<i id="h11-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
</button>
<div id="h11-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
style="color:#777">
Our roadmap includes multi-model fusion, real-time processing, advanced
ANPR integration, and deeper predictive analytics to support smarter city
infrastructure.
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto">
<!-- Full Header Area -->
<div class="space-y-6 w-full">
<div class="text-center space-y-3 mb-6">
<h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
<p class="text-xs" style="color:#777">We are constantly 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 mt-2">
<i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
<span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">It takes less than
a minute to complete</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
<!-- Left Side: Experience & Requirements (All Selective Choices) -->
<div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col"
style="border-color:#2a2a2a">
<div class="px-6 py-4 border-b bg-[#050505]" style="border-color:#1a1a1a">
<h3 class="font-bold text-white text-sm flex items-center">Experience & Priorities</h3>
<p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
Rate your
experience</p>
</div>
<div class="p-6 flex-1 space-y-8">
<!-- Overall Experience Centered -->
<div class="flex flex-col items-center justify-center border-b pb-6"
style="border-color:#1a1a1a">
<label class="text-[10px] font-bold uppercase tracking-widest block mb-3 text-center"
style="color:#a89f97">Overall Experience</label>
<div class="fb-stars" id="fb-stars">
<span class="fb-star" data-v="1" onclick="setRating(1)">★</span>
<span class="fb-star" data-v="2" onclick="setRating(2)">★</span>
<span class="fb-star" data-v="3" onclick="setRating(3)">★</span>
<span class="fb-star" data-v="4" onclick="setRating(4)">★</span>
<span class="fb-star" data-v="5" onclick="setRating(5)">★</span>
</div>
</div>
<!-- Emojis Grid -->
<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">Recommend Product</label>
<div class="flex gap-2" id="fb-recommend">
<div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')">
<i class="fa-solid fa-face-frown text-xl"></i><span
class="block mt-1 text-[8px] uppercase">Unlikely</span>
</div>
<div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i
class="fa-solid fa-face-meh text-xl"></i><span
class="block mt-1 text-[8px] uppercase">Maybe</span></div>
<div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Likely')"><i
class="fa-solid fa-face-smile text-xl"></i><span
class="block mt-1 text-[8px] uppercase">Likely</span></div>
<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>
<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><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
<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><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
<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><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>
<!-- Feature Prioritization -->
<div class="pt-4 border-t" style="border-color:#1a1a1a">
<label class="text-[10px] font-bold uppercase tracking-widest block mb-4"
style="color:#a89f97">Which feature we should prioritize?</label>
<div class="grid grid-cols-2 gap-3" id="fb-priorities">
<div class="fb-chip" onclick="this.classList.toggle('active')"
data-val="api-access">API Access & Shortcuts</div>
<div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">UI/UX
Improvements</div>
<div class="fb-chip" onclick="this.classList.toggle('active')" data-val="security">
Security Enhancement</div>
<div class="fb-chip" onclick="this.classList.toggle('active')"
data-val="regulation">IAM, Regulations & Policy Support</div>
<div class="fb-chip" onclick="this.classList.toggle('active')"
data-val="regulation">Customer Success & Business Support</div>
<div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet">
Features: Dwell Time, ANPR, Parking</div>
</div>
</div>
</div>
</div>
<!-- Right Side: Categorization & Feedback Text -->
<div class="col-span-1 bg-black rounded-xl border shadow-sm overflow-hidden flex flex-col"
style="border-color:#2a2a2a">
<div class="px-6 py-4 border-b bg-[#050505]" style="border-color:#1a1a1a">
<h3 class="font-bold text-white text-sm flex items-center">Categorization & Feedback</h3>
<p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
Detailed
workflow insights</p>
</div>
<div class="p-6 flex-1 flex flex-col space-y-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="text-[10px] font-bold uppercase tracking-widest block mb-3"
style="color:#a89f97">Primary Use Case</label>
<div class="uf-select-wrap w-full" id="fb-usecase-wrap">
<div class="uf-select-trigger" id="fb-usecase-trigger" onclick="ufSelectToggle('fb-usecase')">
<span class="uf-select-label" id="fb-usecase-label" style="color:#666">Select your use case</span>
<i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-usecase-arrow"></i>
</div>
<div class="uf-select-dropdown hidden" id="fb-usecase-dropdown">
<div class="uf-select-option" data-value="research" onclick="ufSelectPick('fb-usecase','research','Academic Research')">Academic Research</div>
<div class="uf-select-option" data-value="planning" onclick="ufSelectPick('fb-usecase','planning','Urban Planning')">Urban Planning</div>
<div class="uf-select-option" data-value="highway" onclick="ufSelectPick('fb-usecase','highway','Business Modelling')">Business Modelling</div>
<div class="uf-select-option" data-value="smartcity" onclick="ufSelectPick('fb-usecase','smartcity','Smart City Investment')">Smart City Investment</div>
<div class="uf-select-option" data-value="other" onclick="ufSelectPick('fb-usecase','other','Other...')">Other...</div>
</div>
<input type="hidden" id="fb-usecase" value="">
</div>
</div>
<div>
<label class="text-[10px] font-bold uppercase tracking-widest block mb-3"
style="color:#a89f97">Feedback Category</label>
<div class="uf-select-wrap w-full" id="fb-type-wrap">
<div class="uf-select-trigger" id="fb-type-trigger" onclick="ufSelectToggle('fb-type')">
<span class="uf-select-label" id="fb-type-label" style="color:#666">General Feedback</span>
<i class="fa-solid fa-chevron-down uf-select-arrow" id="fb-type-arrow"></i>
</div>
<div class="uf-select-dropdown hidden" id="fb-type-dropdown">
<div class="uf-select-option" data-value="bug" onclick="ufSelectPick('fb-type','bug','Technical Issue / Bug Report')">Technical Issue / Bug Report</div>
<div class="uf-select-option" data-value="feature" onclick="ufSelectPick('fb-type','feature','Feature Request')">Feature Request</div>
<div class="uf-select-option" data-value="accuracy" onclick="ufSelectPick('fb-type','accuracy','Inference Accuracy Review')">Inference Accuracy Review</div>
<div class="uf-select-option" data-value="ux" onclick="ufSelectPick('fb-type','ux','UI / UX')">UI / UX</div>
</div>
<input type="hidden" id="fb-type" value="">
</div>
</div>
</div>
<div class="flex-1 flex flex-col">
<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 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>
</div>
<button id="fb-submit-btn" onclick="submitFeedback()"
class="w-full py-4 font-bold text-sm rounded-full 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
</button>
<!-- Cooldown Progress Bar -->
<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.5 uppercase tracking-[0.25em]"
style="color:#444">Ready to send again in a moment...</p>
</div>
</div>
</div>
</div>
<div class="pt-6 border-t border-[#111]">
<p class="text-[10px] text-center tracking-widest" style="color:#444">Queries: <strong
style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p>
</div>
</div>
</div>
<!-- TAB: Profile -->
<div id="tab-profile" class="hidden flex-1 min-h-0 overflow-y-auto">
<!-- Single unified card — full width -->
<div class="bg-neutral-950 rounded-2xl border border-neutral-900 overflow-hidden">
<!-- Identity Section -->
<div class="p-6 lg:p-8 flex flex-col items-center lg:flex-row lg:items-start gap-6 border-b border-neutral-900">
<div class="relative group flex-shrink-0">
<img id="profile-pfp-large" src="" alt="" class="w-20 h-20 lg:w-24 lg:h-24 rounded-full border-2 border-neutral-800 shadow-2xl object-cover">
<div class="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-[10px] font-bold text-white uppercase text-center p-2">Managed by Google</div>
</div>
<div class="flex-1 w-full text-center lg:text-left space-y-4">
<div>
<label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Email Address</label>
<div id="profile-email" class="text-sm font-medium text-slate-300"></div>
</div>
<div>
<label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 block mb-1">Display Name</label>
<div class="flex items-center gap-3 justify-center lg:justify-start">
<input type="text" id="profile-username-input" class="bg-neutral-900 border border-neutral-800 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-neutral-600 transition w-full max-w-[240px]">
<button onclick="saveProfileUsername()" id="btn-save-username" class="px-4 py-2 bg-neutral-800 hover:bg-neutral-700 text-[10px] font-bold uppercase tracking-widest rounded-lg text-slate-300 transition">Save</button>
</div>
<p class="text-[9px] text-slate-600 mt-1">This name will be used on exported reports.</p>
</div>
</div>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-2 gap-0 border-b border-neutral-900">
<div class="p-5 lg:p-6 border-r border-neutral-900">
<div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Total Runs</div>
<div id="profile-total-runs" class="text-2xl font-bold text-white">0</div>
</div>
<div class="p-5 lg:p-6">
<div class="text-[9px] font-bold uppercase tracking-widest text-slate-600 mb-1">Last Active</div>
<div id="profile-last-active" class="text-sm font-bold text-slate-300">Never</div>
</div>
</div>
<!-- Terms Acceptance Indicator -->
<div class="p-5 lg:p-6 flex items-center gap-3 border-b border-neutral-900">
<i class="fa-solid fa-circle-check text-emerald-500"></i>
<div>
<div class="text-xs font-bold text-slate-300">Terms & Privacy Accepted</div>
<div class="text-[9px] text-slate-600">You have agreed to the Privacy Policy and Terms & Conditions.</div>
</div>
</div>
<!-- Sign Out -->
<div class="p-5 lg:p-6 flex items-center justify-between">
<div>
<h3 class="text-xs font-bold uppercase tracking-widest text-red-400">Account Access</h3>
<p class="text-[10px] text-slate-500 mt-1">Sign out clears your local session.</p>
</div>
<button onclick="showLogoutConfirm()" class="px-6 py-2.5 bg-red-900/20 hover:bg-red-900/30 text-red-400 border border-red-900/30 text-[10px] font-bold uppercase tracking-widest rounded-xl transition">Sign Out</button>
</div>
</div>
</div>
</main>
<script src="js/templates.js"></script>
<script src="js/shared.js"></script>
<script src="js/auth.js"></script>
<script src="js/vehicles.js"></script>
<script>
// Inject shared components (modals, shortcuts, nav)
injectLegalModals();
injectShortcutsModal();
// Auto-show keyboard shortcuts on first desktop visit
if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
setTimeout(function () { openAppModal('shortcutsModal'); }, 800);
}
</script>
<nav class="mobile-bottom-nav" id="mobile-bottom-nav">
<button class="mob-nav-item" id="mob-nav-about" onclick="switchTab('about')">
<i class="fa-solid fa-circle-info"></i>
</button>
<button class="mob-nav-item" id="mob-nav-overview" onclick="switchTab('overview')">
<i class="fa-solid fa-desktop"></i>
</button>
<button class="mob-nav-item" id="mob-nav-results" onclick="switchTab('results')">
<i class="fa-solid fa-file-lines"></i>
</button>
<button class="mob-nav-item" id="mob-nav-settings" onclick="switchTab('settings')">
<i class="fa-solid fa-gear"></i>
</button>
<button class="mob-nav-item" id="mob-nav-help" onclick="switchTab('help')">
<i class="fa-solid fa-circle-question"></i>
</button>
<button class="mob-nav-item" id="mob-nav-feedback" onclick="switchTab('feedback')">
<i class="fa-solid fa-comment-dots"></i>
</button>
<button class="mob-nav-item" id="mob-nav-profile" onclick="switchTab('profile')">
<div id="mob-pfp-wrap" class="w-7 h-7 rounded-full overflow-hidden bg-neutral-800 flex items-center justify-center mx-auto">
<i class="fa-solid fa-circle-user"></i>
</div>
</button>
</nav>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js');
});
}
</script>
</body>
</html> |