Minor Improvements (#24)

* remove dangers page, fix counter

* fix bad instrucitons

* cleanup

* allow nonstandard direction tag, link to OSM

* update privacy policy to account for intro message

webapp/public/flock-logo.svg

@@ -0,0 +1,14 @@
+<svg width="121" height="18" viewBox="0 0 121 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4761 6.32521L13.788 0.448419C13.7896 0.413513 13.8046 0.380613 13.8295 0.356532C13.8547 0.332451 13.8879 0.319048 13.9224 0.319092H14.7619C14.7971 0.319194 14.8309 0.333183 14.8561 0.35807C14.8812 0.382957 14.8959 0.416808 14.8968 0.452417L15.4112 13.981C15.4119 13.9993 15.4088 14.0176 15.4023 14.0348C15.3959 14.0519 15.386 14.0676 15.3734 14.0808C15.3609 14.094 15.3458 14.1045 15.3292 14.1117C15.3125 14.119 15.2945 14.1227 15.2763 14.1227H13.172C13.1539 14.1228 13.1359 14.119 13.1191 14.1118C13.1024 14.1047 13.0873 14.0941 13.0747 14.0808C13.062 14.0674 13.0522 14.0518 13.0458 14.0345C13.0394 14.0173 13.0365 13.9989 13.0372 13.9806L13.2204 9.44001C13.2215 9.40983 13.2127 9.3801 13.1954 9.35564L10.8178 5.96969C10.8023 5.94754 10.7937 5.92123 10.793 5.89408C10.7923 5.86693 10.7995 5.8402 10.8139 5.81726L11.4605 4.78669C11.4716 4.76924 11.4862 4.75454 11.5036 4.74368C11.5211 4.73283 11.5406 4.72609 11.561 4.724C11.5813 4.7219 11.6019 4.72449 11.6211 4.73158C11.6402 4.73867 11.6576 4.75007 11.6719 4.76491L13.2455 6.41676C13.2639 6.43571 13.2876 6.44875 13.3134 6.45426C13.3392 6.45976 13.366 6.45751 13.3905 6.44778C13.415 6.43804 13.4362 6.42124 13.4514 6.39946C13.4667 6.37768 13.4752 6.35187 13.4761 6.32521Z" fill="black"/>
+<path d="M15.6543 5.19123C15.6543 5.19123 15.9881 3.28518 16.7275 2.65813C17.4668 2.03108 18.7074 2.12484 18.7074 2.12484C18.7074 2.12484 18.5405 3.88646 17.6816 4.6344C17.1853 5.07036 16.8228 5.16724 15.6543 5.19123Z" fill="black"/>
+<path d="M2.3352 14.1187V6.37055L1.52381 6.24122C1.36856 6.21994 1.22198 6.15616 1.0999 6.05679C0.993596 5.96495 0.94043 5.83578 0.94043 5.66928V4.73603H2.3352V4.03698C2.3352 3.4957 2.41574 3.00981 2.57682 2.57933C2.72465 2.16477 2.96231 1.78893 3.27236 1.47935C3.58241 1.16976 3.95701 0.934281 4.36871 0.79016C4.8001 0.630175 5.2864 0.550183 5.82762 0.550183C6.23528 0.546843 6.64108 0.605875 7.0313 0.725285L6.98736 1.86917C6.97506 2.04694 6.89292 2.15759 6.74091 2.20114C6.5689 2.2468 6.39157 2.26864 6.21375 2.26603C5.97222 2.26328 5.73142 2.29316 5.49771 2.35491C5.29698 2.40819 5.11327 2.51305 4.9644 2.65933C4.80898 2.81966 4.69467 3.01602 4.63141 3.23127C4.55556 3.46829 4.51764 3.76189 4.51764 4.11208V4.73913H6.95222V6.36255H4.58748V14.1187H2.3352Z" fill="black"/>
+<path d="M25.2125 4.50732C25.9117 4.50732 26.5452 4.6211 27.1133 4.84864C27.6612 5.06244 28.1573 5.39282 28.5679 5.81744C28.9813 6.25557 29.2983 6.77736 29.4978 7.34841C29.7166 7.95101 29.826 8.62444 29.826 9.3687C29.826 10.1188 29.7166 10.7953 29.4978 11.3979C29.2967 11.9703 28.98 12.4943 28.5679 12.9364C28.1593 13.3657 27.6629 13.6994 27.1133 13.914C26.5449 14.1416 25.9112 14.2554 25.2125 14.2554C24.5138 14.2554 23.8785 14.1416 23.3068 13.914C22.7547 13.6994 22.2551 13.3658 21.8432 12.9364C21.4281 12.4943 21.1083 11.9697 20.9044 11.396C20.682 10.7934 20.571 10.1171 20.5713 9.36695C20.5713 8.62265 20.6823 7.94924 20.9044 7.34663C21.107 6.77503 21.4269 6.25329 21.8432 5.81565C22.2574 5.39143 22.7564 5.06157 23.3068 4.84818C23.8779 4.62095 24.5132 4.50732 25.2125 4.50732ZM25.2125 12.5044C25.9906 12.5044 26.5665 12.24 26.9403 11.7111C27.314 11.1823 27.5008 10.4075 27.5008 9.38687C27.5008 8.36624 27.314 7.58839 26.9403 7.05331C26.5665 6.51825 25.9906 6.25072 25.2125 6.25072C24.4218 6.25072 23.8383 6.51973 23.4619 7.05777C23.0856 7.59579 22.8972 8.37216 22.8966 9.38687C22.8966 10.4017 23.085 11.1749 23.4619 11.7067C23.8389 12.2385 24.4223 12.5044 25.2125 12.5044Z" fill="black"/>
+<path d="M40.1105 6.65647C40.0539 6.73217 39.988 6.80039 39.9147 6.85957C39.8511 6.90903 39.7584 6.93363 39.6366 6.93333C39.5163 6.93207 39.399 6.89515 39.2991 6.82712C39.1897 6.75661 39.0591 6.67676 38.9073 6.58758C38.735 6.48922 38.5533 6.40882 38.3649 6.34761C38.112 6.27072 37.8489 6.23487 37.585 6.24139C37.1897 6.24139 36.8432 6.31368 36.5457 6.45827C36.2507 6.60014 35.9953 6.81394 35.8024 7.08043C35.5937 7.37597 35.4436 7.70966 35.3604 8.06301C35.2581 8.49021 35.2092 8.92868 35.2146 9.36826C35.2085 9.8222 35.2622 10.2751 35.3741 10.7147C35.4638 11.0724 35.6207 11.4092 35.8362 11.7067C36.0272 11.9662 36.2773 12.1751 36.5654 12.3156C36.868 12.4574 37.1984 12.5284 37.5319 12.523C37.8904 12.523 38.1805 12.4786 38.4026 12.3897C38.6 12.3135 38.7881 12.2145 38.9631 12.0947C39.1151 11.987 39.2469 11.8887 39.3585 11.7995C39.4656 11.7124 39.5992 11.6654 39.7368 11.6662C39.9195 11.6662 40.0562 11.7368 40.1471 11.8782L40.7945 12.7083C40.5583 12.9917 40.2854 13.2415 39.9832 13.4509C39.7003 13.6461 39.3958 13.807 39.0761 13.9305C38.7623 14.0505 38.4367 14.1356 38.1048 14.1842C37.7754 14.2328 37.4429 14.2572 37.1101 14.2572C36.5499 14.2605 35.9947 14.1491 35.4781 13.9296C34.9697 13.7131 34.5138 13.3875 34.1422 12.975C33.7615 12.5567 33.4607 12.0447 33.2395 11.4392C33.0184 10.8335 32.9074 10.1434 32.9065 9.3687C32.9005 8.71239 33.0007 8.05953 33.203 7.43595C33.3862 6.86773 33.6826 6.3435 34.0737 5.89564C34.4679 5.45401 34.9536 5.1059 35.4961 4.87619C36.0618 4.63028 36.7121 4.50732 37.4476 4.50732C38.1466 4.50732 38.7589 4.6211 39.2846 4.84864C39.815 5.0794 40.2964 5.41135 40.7027 5.82633L40.1105 6.65647Z" fill="black"/>
+<path d="M46.4673 0.412354V8.26186H46.8865C47.0084 8.26779 47.1301 8.24576 47.2423 8.19742C47.3482 8.13644 47.4413 8.05488 47.516 7.95744L49.8407 5.05193C49.9341 4.93771 50.045 4.83955 50.1693 4.76129C50.2844 4.69048 50.4363 4.65508 50.625 4.65508H52.6857L49.777 8.16943C49.6779 8.2943 49.5714 8.41302 49.4582 8.52495C49.3502 8.63169 49.2309 8.72602 49.1023 8.80628C49.2291 8.89753 49.3426 9.00637 49.4397 9.12927C49.5367 9.25231 49.6339 9.38443 49.7313 9.52579L52.8504 14.1195H50.8164C50.6624 14.1244 50.5094 14.0927 50.3696 14.0271C50.235 13.9536 50.1217 13.8453 50.0415 13.7133L47.6619 10.1252C47.5704 9.98397 47.4793 9.89184 47.3881 9.84877C47.2971 9.80585 47.1603 9.78432 46.9778 9.78432H46.4673V14.1195H44.2139V0.412354H46.4673Z" fill="black"/>
+<path d="M67.2182 6.49959C67.1717 6.58335 67.106 6.65454 67.0266 6.70713C66.9485 6.75015 66.8603 6.77087 66.7714 6.76712C66.6489 6.76387 66.5286 6.73241 66.4199 6.67513C66.2952 6.6138 66.1508 6.54462 65.9868 6.4676C65.8054 6.38417 65.618 6.31479 65.4262 6.26005C65.184 6.19437 64.9338 6.16326 64.683 6.16763C64.2393 6.16763 63.8898 6.26303 63.6343 6.45382C63.379 6.64462 63.2514 6.89364 63.2517 7.20086C63.2493 7.29508 63.2652 7.38886 63.2989 7.47674C63.3326 7.56463 63.3831 7.64487 63.4477 7.71281C63.5977 7.865 63.7738 7.98846 63.9674 8.07722C64.2046 8.18994 64.45 8.28399 64.7014 8.35854C64.9747 8.4418 65.2543 8.53245 65.54 8.6305C65.8258 8.72857 66.1055 8.84079 66.3791 8.96735C66.6466 9.08893 66.8945 9.25064 67.1145 9.44692C67.3314 9.64218 67.5079 9.87874 67.6342 10.1433C67.7645 10.414 67.8298 10.7399 67.8301 11.1209C67.8346 11.5533 67.7508 11.9819 67.5841 12.3799C67.4209 12.7626 67.1748 13.1032 66.8636 13.3762C66.5473 13.6563 66.1569 13.8746 65.692 14.0313C65.2273 14.188 64.6939 14.2664 64.0917 14.2664C63.7751 14.2664 63.4593 14.2367 63.1481 14.1776C62.8472 14.1206 62.5514 14.0389 62.2637 13.9332C61.992 13.8338 61.7296 13.7102 61.4797 13.5639C61.2533 13.4326 61.0409 13.2782 60.8457 13.1031L61.3655 12.2359C61.425 12.1383 61.5061 12.0562 61.6026 11.996C61.7084 11.9368 61.8283 11.9081 61.9492 11.9129C62.0897 11.9133 62.227 11.9551 62.3446 12.0329C62.4694 12.1129 62.6137 12.199 62.7777 12.2911C62.9633 12.3932 63.1571 12.4795 63.3568 12.5492C63.5784 12.6292 63.8596 12.6693 64.2002 12.6693C64.4333 12.6742 64.6657 12.6415 64.8886 12.5724C65.0609 12.5185 65.2219 12.4323 65.363 12.3187C65.482 12.2215 65.5757 12.0966 65.6363 11.9547C65.6939 11.819 65.7238 11.673 65.7241 11.5253C65.7319 11.3251 65.6615 11.1297 65.5281 10.9814C65.3791 10.8269 65.2029 10.7018 65.0085 10.6126C64.7701 10.4991 64.5232 10.4049 64.27 10.3308C63.9933 10.2482 63.7107 10.1575 63.4223 10.0588C63.133 9.96063 62.8497 9.84505 62.5739 9.71308C62.3037 9.58505 62.0546 9.41543 61.8354 9.21051C61.6141 8.99987 61.4373 8.74602 61.3158 8.46431C61.1849 8.16804 61.1196 7.81148 61.1199 7.39463C61.1186 7.01356 61.1962 6.63645 61.3479 6.28761C61.5012 5.93505 61.7303 5.62154 62.0186 5.36991C62.3135 5.10861 62.6815 4.8996 63.1221 4.74286C63.5629 4.58615 64.0719 4.50763 64.6492 4.50732C65.2934 4.50732 65.8801 4.61503 66.409 4.83041C66.9379 5.0458 67.3787 5.32859 67.7312 5.67878L67.2182 6.49959Z" fill="black"/>
+<path d="M78.9161 14.1186H77.9057C77.6928 14.1186 77.5256 14.0864 77.404 14.0218C77.2825 13.9572 77.1913 13.8265 77.1308 13.6298L76.9301 12.9564C76.7086 13.159 76.4756 13.3484 76.2324 13.5236C76.0106 13.6831 75.774 13.8207 75.526 13.9342C75.2776 14.0465 75.0175 14.13 74.7506 14.183C74.4503 14.2411 74.1449 14.2689 73.8391 14.2661C73.4683 14.2696 73.0992 14.2151 72.7448 14.1044C72.4269 14.0057 72.1334 13.84 71.8833 13.6182C71.6386 13.3963 71.4469 13.1211 71.3224 12.8135C71.1888 12.4925 71.1221 12.1193 71.1221 11.6935C71.1253 11.3222 71.2209 10.9577 71.4002 10.6336C71.5855 10.2852 71.8939 9.97059 72.3253 9.68964C72.7567 9.40884 73.3311 9.17593 74.0487 8.99108C74.7662 8.80593 75.6567 8.71332 76.7205 8.71332V8.1556C76.7205 7.51744 76.5887 7.04502 76.3251 6.7384C76.0615 6.43176 75.6769 6.27829 75.1715 6.27798C74.8069 6.27798 74.503 6.32109 74.2599 6.40731C74.0397 6.48285 73.8274 6.5802 73.6261 6.69795C73.4468 6.8055 73.2812 6.90238 73.1292 6.98858C72.9758 7.07477 72.803 7.11919 72.6275 7.11747C72.4876 7.12118 72.3501 7.07909 72.2357 6.99748C72.128 6.9193 72.0381 6.81868 71.9722 6.70239L71.5618 5.97357C72.6375 4.97751 73.9354 4.47949 75.4553 4.47949C76.0023 4.47949 76.4902 4.57015 76.9186 4.75146C77.331 4.92173 77.7024 5.17933 78.0081 5.50694C78.312 5.83973 78.5433 6.23338 78.6872 6.6624C78.8467 7.13753 78.9254 7.63654 78.92 8.13826L78.9161 14.1186ZM74.5393 12.6966C74.7538 12.6983 74.9678 12.6771 75.1776 12.633C75.3685 12.592 75.5537 12.528 75.7295 12.4423C75.9064 12.3559 76.0743 12.2517 76.2306 12.1313C76.4036 11.9964 76.5666 11.849 76.7188 11.6904V10.1061C76.0621 10.1061 75.5135 10.1478 75.0727 10.2315C74.6319 10.315 74.278 10.4217 74.0108 10.5518C73.7435 10.6819 73.5532 10.8338 73.4398 11.0074C73.329 11.1749 73.2703 11.3722 73.271 11.574C73.271 11.9766 73.3883 12.2646 73.6226 12.4379C73.8568 12.6112 74.1621 12.6979 74.538 12.6979L74.5393 12.6966Z" fill="black"/>
+<path d="M83.4845 14.1187V6.37055L82.6732 6.24122C82.5179 6.21994 82.3713 6.15616 82.2492 6.05679C82.143 5.96495 82.0898 5.83578 82.0898 5.66928V4.73603H83.4845V4.03698C83.4845 3.4957 83.5651 3.00981 83.7262 2.57933C83.8741 2.16477 84.1117 1.78893 84.4217 1.47935C84.7317 1.16976 85.1063 0.934281 85.5181 0.79016C85.9495 0.630175 86.4357 0.550183 86.9769 0.550183C87.3845 0.546843 87.7902 0.605875 88.1802 0.725285L88.1363 1.86917C88.124 2.04694 88.0418 2.15759 87.8899 2.20114C87.7179 2.2468 87.5405 2.26862 87.3627 2.26603C87.1214 2.26326 86.8806 2.29316 86.647 2.35491C86.4463 2.40819 86.2627 2.51305 86.1138 2.65933C85.9583 2.81966 85.8441 3.01602 85.7808 3.23127C85.7046 3.46829 85.6667 3.76189 85.667 4.11208V4.73913H88.1016V6.36255H85.7399V14.1187H83.4845Z" fill="black"/>
+<path d="M95.2924 4.5071C95.8477 4.50107 96.3993 4.59806 96.92 4.79329C97.4014 4.975 97.8383 5.25968 98.201 5.62787C98.571 6.01215 98.8566 6.47097 99.0396 6.97443C99.2405 7.50771 99.3408 8.11507 99.3405 8.79646C99.3423 8.93972 99.3346 9.08298 99.3176 9.22535C99.3086 9.31896 99.2809 9.40963 99.2359 9.49195C99.1987 9.5542 99.1427 9.60269 99.0761 9.63022C98.9943 9.66025 98.9077 9.67431 98.8208 9.67153H93.04C93.1068 10.6436 93.3651 11.3569 93.8149 11.8117C94.2649 12.2666 94.8605 12.494 95.6021 12.4943C95.9214 12.5008 96.24 12.4573 96.5461 12.365C96.7847 12.2899 97.0164 12.1942 97.2389 12.0794C97.4365 11.9748 97.6098 11.8793 97.7586 11.7931C97.8894 11.7126 98.0387 11.668 98.1917 11.6642C98.2742 11.662 98.3557 11.6811 98.429 11.7193C98.4975 11.758 98.5566 11.8116 98.602 11.8762L99.2584 12.7063C99.0168 12.9947 98.7343 13.245 98.4197 13.4489C98.1152 13.646 97.7894 13.8069 97.4484 13.9285C97.1143 14.0476 96.7692 14.1326 96.4182 14.1822C96.0815 14.2306 95.7419 14.2552 95.4018 14.256C94.782 14.2615 94.1666 14.1504 93.5871 13.9285C93.0371 13.7166 92.5393 13.3861 92.1281 12.9601C91.7146 12.5326 91.3895 12.0038 91.1529 11.3736C90.9162 10.7435 90.7976 10.0131 90.797 9.18273C90.7927 8.56151 90.8977 7.94452 91.1072 7.36061C91.3025 6.81043 91.6049 6.30543 91.9963 5.87541C92.3937 5.44628 92.875 5.10547 93.4096 4.87462C93.9658 4.6296 94.5933 4.5071 95.2924 4.5071ZM95.3363 6.13984C94.68 6.13984 94.1665 6.32737 93.7956 6.70245C93.4249 7.07752 93.1878 7.60948 93.0844 8.29832H97.3153C97.3169 8.01555 97.2769 7.73415 97.1968 7.46328C97.1226 7.21149 96.9984 6.97768 96.8317 6.77622C96.6624 6.57567 96.4506 6.41646 96.2118 6.31048C95.9358 6.19141 95.6376 6.13324 95.3376 6.13984H95.3363Z" fill="black"/>
+<path d="M106.197 14.2664C105.388 14.2664 104.765 14.0344 104.328 13.57C103.89 13.1059 103.671 12.465 103.671 11.6476V6.3614H102.723C102.607 6.36353 102.494 6.32059 102.408 6.24141C102.32 6.16172 102.276 6.04187 102.276 5.88189V4.97798L103.781 4.72865L104.255 2.14623C104.274 2.03273 104.334 1.93051 104.424 1.86003C104.52 1.78969 104.638 1.75404 104.757 1.75871H105.924V4.73621H108.384V6.35962H105.924V11.488C105.924 11.7843 105.997 12.015 106.143 12.18C106.29 12.345 106.484 12.4279 106.727 12.4288C106.846 12.432 106.965 12.4149 107.078 12.3781C107.163 12.3487 107.245 12.3134 107.324 12.2724C107.394 12.2353 107.457 12.2 107.512 12.1662C107.56 12.1341 107.617 12.1167 107.675 12.1155C107.734 12.113 107.792 12.1309 107.84 12.1662C107.892 12.2104 107.938 12.2615 107.976 12.3182L108.649 13.4252C108.315 13.7051 107.932 13.9179 107.519 14.0523C107.092 14.1948 106.646 14.267 106.197 14.2664Z" fill="black"/>
+<path d="M115.452 16.7196C115.397 16.8617 115.308 16.9872 115.192 17.0841C115.085 17.1671 114.923 17.2086 114.704 17.2086H113.026L114.778 13.4174L110.994 4.65458H112.964C113.146 4.65458 113.286 4.69768 113.383 4.7839C113.477 4.86485 113.552 4.96557 113.603 5.07899L115.6 9.98611C115.667 10.1486 115.725 10.3148 115.773 10.4843C115.821 10.6567 115.864 10.8288 115.901 11.0006C115.949 10.8229 116.002 10.6508 116.06 10.4843C116.118 10.3177 116.181 10.1486 116.247 9.97673L118.125 5.07899C118.174 4.95564 118.259 4.84973 118.367 4.77456C118.477 4.69517 118.61 4.65316 118.746 4.65458H120.551L115.452 16.7196Z" fill="black"/>
+</svg>

webapp/src/App.vue

@@ -16,7 +16,6 @@ const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
   { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
-  { title: 'Dangers of ALPRs', icon: 'mdi-shield-alert', to: '/dangers' },
   { title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
   { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
   // { title: 'About', icon: 'mdi-information', to: '/about' },

webapp/src/assets/main.css

@@ -32,6 +32,10 @@ p {
   font-family: "PT Serif", serif;
 }
 
+.sans-serif {
+  font-family: unset !important;
+}
+
 /* Prevent Scrolling Horizontally */
 html, body {
   overflow-x: hidden;

webapp/src/components/ALPRCounter.vue

@@ -12,6 +12,13 @@ import { useDisplay } from 'vuetify'
 import { getALPRCounts } from '@/services/apiService';
 import { CountUp } from 'countup.js';
 
+const props = defineProps({
+  delayMs: {
+    type: Number,
+    default: 200,
+  }
+});
+
 const counterEl: Ref<HTMLElement|null> = ref(null);
 const countupOptions = {
   useEasing: true,
@@ -33,13 +40,17 @@ const counts: Ref<Counts> = ref({
 const showFinalAnimation = ref(false);
 const { xs: isMobile } = useDisplay();
 
+let timeOfMount: number|undefined = undefined;
+
 onMounted(() => {
-  getALPRCounts().then((response) => {
-    counts.value = response;
+  timeOfMount = new Date().getTime();
+  getALPRCounts().then((countResponse) => {
+    counts.value = countResponse;
+    countUp(countResponse);
   });
 });
 
-watch(counts, (newCounts: Counts) => {
+function countUp(newCounts: Counts) {
   if (!newCounts.worldwide) return;
   if (!counterEl.value) {
     console.error('Counter element not found');
@@ -48,14 +59,23 @@ watch(counts, (newCounts: Counts) => {
 
   if (!counter) {
     counter = new CountUp(counterEl.value, newCounts.worldwide, countupOptions);
-    setTimeout(() => {
-      counter?.start();
-    }, 500);
+
+    if (timeOfMount) {
+      const timeSinceMount = new Date().getTime() - timeOfMount;
+      if (timeSinceMount < props.delayMs) {
+        setTimeout(() => {
+          counter?.start();
+        }, props.delayMs - timeSinceMount);
+      } else {
+        counter.start();
+      }
+    }
+
     setTimeout(() => {
       showFinalAnimation.value = true;
-    }, 3000);
+    }, 2500);
   }
-});
+}
 </script>
 
 <style scoped>

webapp/src/components/DFMapPopup.vue

@@ -22,7 +22,7 @@
             {{ alpr.tags.brand }}
           </span>
           <span v-else>
-            Unknown Manufacturer
+            Unspecified Manufacturer
           </span>
         </b>
       </v-list-item>
@@ -32,19 +32,14 @@
             {{ alpr.tags.operator }}
           </span>
           <span v-else>
-            Unknown Operator
+            Unspecified Operator
           </span>
         </b>
       </v-list-item>
     </v-list>
 
-    <div class="text-center text-grey-darken-1">
-      
-      <v-tooltip open-delay="500" text="OSM Node ID" location="bottom">
-        <template #activator="{ props }">
-          <span style="font-size: 0.9em; cursor: default" v-bind="props">node/{{ alpr.id }}</span>
-        </template>
-      </v-tooltip>
+    <div class="text-center">
+      <v-btn target="_blank" size="x-small" :href="osmNodeLink(props.alpr.id)" variant="text" color="grey-darken-1"><v-icon start>mdi-open-in-new</v-icon>View on OSM</v-btn>
     </div>
   </v-sheet>
 </template>
@@ -53,7 +48,7 @@
 import { defineProps, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
-import { VIcon, VList, VSheet, VListItem, VTooltip } from 'vuetify/components';
+import { VIcon, VList, VSheet, VListItem, VBtn } from 'vuetify/components';
 
 const props = defineProps({
   alpr: {
@@ -64,12 +59,18 @@ const props = defineProps({
 
 const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
 
-const cardinalDirection = computed(() => 
-  props.alpr.tags.direction === undefined ? 'Unknown Direction' : degreesToCardinal(parseInt(props.alpr.tags.direction))
+const cardinalDirection = computed(() => {
+  const direction = props.alpr.tags.direction || props.alpr.tags["camera:direction"];
+  return direction === undefined ? 'Unspecified Direction' : degreesToCardinal(parseInt(direction))
+}
 );
 
 function degreesToCardinal(degrees: number): string {
   const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
   return 'Faces ' + cardinals[Math.round(degrees / 45) % 8];
 }
+
+function osmNodeLink(id: string): string {
+  return `https://www.openstreetmap.org/node/${id}`;
+}
 </script>

webapp/src/components/LeafletMap.vue

@@ -56,7 +56,7 @@ let currentLocationLayer: FeatureGroup;
 
 // Marker Creation Utilities
 function createSVGMarker(alpr: ALPR): string {
-  const orientationDegrees = alpr.tags.direction;
+  const orientationDegrees = alpr.tags.direction || alpr.tags['camera:direction'];
   const fovPath = `
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
@@ -73,7 +73,7 @@ function createSVGMarker(alpr: ALPR): string {
 }
 
 function createMarker(alpr: ALPR): Marker | CircleMarker {
-  if (hasPlottableOrientation(alpr.tags.direction)) {
+  if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) {
     const icon = L.divIcon({
       className: 'leaflet-data-marker',
       html: createSVGMarker(alpr),

webapp/src/components/NewVisitor.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-dialog v-model="show" max-width="900">
+    <v-card>
+      <v-card-title class="text-center py-4 font-weight-bold">
+        <h3 class="headline">Welcome to DeFlock</h3>
+      </v-card-title>
+      <p class="mx-8 text-center">
+        DeFlock is powered by <b>crowdsourced data</b> from the OpenStreetMap community.
+      </p>
+
+      <v-divider class="mx-4 mt-4" />
+
+      <v-list class="text-center">
+        <v-list-item class="my-4">
+          <v-icon size="x-large" color="primary" class="mb-2">mdi-progress-pencil</v-icon>
+          <v-list-item-title class="font-weight-bold">The map is incomplete!</v-list-item-title>
+          <v-list-item-subtitle>The ALPRs displayed here are a starting point, and new locations are constantly being added.</v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+
+      <div class="small text-grey-darken-2 text-center mx-4 mb-2">By using this site, you agree to our <router-link to="/terms">Terms of Service</router-link>.</div>
+      <v-card-actions>
+        <v-btn flat class="w-100" size="x-large" color="rgb(18, 151, 195)" variant="elevated" @click="acknowledge">Got it</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const show = ref(false);
+
+onMounted(() => {
+  if (!localStorage.getItem('acknowledged')) {
+    show.value = true;
+  }
+});
+
+function acknowledge() {
+  show.value = false;
+  localStorage.setItem('acknowledged', 'true');
+}
+</script>
+
+<style scoped>
+.no-small {
+  min-width: 160px;
+}
+
+.small {
+  font-size: 0.8rem;
+}
+</style>

webapp/src/components/OSMTagSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <v-row class="align-center justify-center my-4">
-      <v-col cols="12" sm="6">
+      <v-col cols="12" sm="6" class="text-center">
         <v-select
           color="rgb(18, 151, 195)"
           prepend-inner-icon="mdi-factory"
@@ -22,6 +22,7 @@
           max-width="100%"
           class="my-4"
         ></v-img>
+        <v-btn to="/what-is-an-alpr#photos" color="grey-darken-2" variant="text" size="small"><v-icon start>mdi-image-multiple</v-icon> See All Photos</v-btn>
       </v-col>
     
       <v-col cols="12" sm="6">
@@ -56,25 +57,25 @@ const alprBrands: WikidataItem[] = [
     name: 'Flock Safety',
     nickname: 'Flock',
     wikidata: 'Q108485435',
-    exampleImage: '/flock-1.jpg',
+    exampleImage: '/alprs/flock-1.jpg',
   },
   {
     name: 'Motorola Solutions',
     nickname: 'Motorola/Vigilant',
     wikidata: 'Q634815',
-    exampleImage: '/vigilant-1.jpg',
+    exampleImage: '/alprs/motorola-4.jpg',
   },
   {
     name: 'Leonardo',
     nickname: 'Leonardo/ELSAG',
     wikidata: 'Q910379',
-    exampleImage: '/elsag.webp',
+    exampleImage: '/alprs/elsag-1.jpg',
   },
   {
     name: 'Neology, Inc.',
     nickname: 'Neology',
     wikidata: 'Q130958232',
-    exampleImage: '/neology-1.jpg',
+    exampleImage: '/alprs/neology-2.jpg',
   },
   {
     name: '(brand goes here)',

webapp/src/components/layout/Footer.vue

@@ -57,7 +57,7 @@
         <div>
           <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
           <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
-          <p class="mt-4">v1.0</p>
+          <p class="mt-4">v1.0.1</p>
         </div>
         </v-col>
       </v-row>

webapp/src/router/index.ts

@@ -114,14 +114,6 @@ const router = createRouter({
         title: 'Donate | DeFlock'
       }
     },
-    {
-      path: '/dangers',
-      name: 'dangers',
-      component: () => import('../views/Dangers.vue'),
-      meta: {
-        title: 'ALPR Dangers | DeFlock'
-      }
-    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',

webapp/src/views/Dangers.vue

@@ -1,63 +0,0 @@
-<template>
-  <v-container class="info-section mb-16">
-    <!-- Hero Section -->
-    <v-row justify="center" class="hero-section-harms text-center mb-4">
-      <v-col cols="12" md="8">
-        <h1 class="mb-4">The Dangers of ALPRs</h1>
-        <p class="mb-4 font-weight-bold bigger">
-          ALPRs promise safety but deliver risks to privacy and civil rights.
-        </p>
-      </v-col>
-    </v-row>
-
-    <v-row class="mb-4">
-      <v-col cols="12" class="bigger">
-        <p class="mb-4">
-          Thousands of police departments, homeowners associations, and businesses across the country deploy automated license plate readers (ALPRs) with the expectation that these surveillance tools can reduce crime.
-        </p>
-        <p>
-          In reality, ALPRs pose a real threat to the civil rights, liberties, and safety of the communities of people under surveillance.
-        </p>
-      </v-col>
-    </v-row>
-    
-    <dangers showAll />
-  </v-container>
-
-  <Footer />
-</template>
-
-<script setup lang="ts">
-import Dangers from '@/components/Dangers.vue';
-import Footer from '@/components/layout/Footer.vue';
-</script>
-
-<style scoped>
-.hero-section-harms {
-  background: url('/chicago-pd.jpg') no-repeat center center;
-  background-size: cover;
-  color: white;
-  padding: 100px 0 !important;
-  position: relative;
-  }
-
- .hero-section-harms::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.5);
-   z-index: 1;
- }
-
- .hero-section-harms > * {
-   position: relative;
-   z-index: 2;
-}
-
-p {
-  margin-bottom: 16px;
-}
-</style>

webapp/src/views/Map.vue

@@ -1,4 +1,5 @@
 <template>
+  <NewVisitor />
   <div class="map-container" @keyup="handleKeyUp">
     <leaflet-map
       v-if="center"
@@ -56,15 +57,14 @@ import { geocodeQuery } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
 import { useGlobalStore } from '@/stores/global';
 import { useTilesStore } from '@/stores/tiles';
-import type { ALPR } from '@/types';
 import L from 'leaflet';
 globalThis.L = L;
 import 'leaflet/dist/leaflet.css'
 import LeafletMap from '@/components/LeafletMap.vue';
+import NewVisitor from '@/components/NewVisitor.vue';
 
 const DEFAULT_ZOOM = 12;
 
-const theme = useTheme();
 const zoom: Ref<number> = ref(DEFAULT_ZOOM);
 const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);

webapp/src/views/PrivacyPolicy.vue

@@ -9,7 +9,7 @@
 
     <h2>Information We Collect</h2>
     <p>
-      DeFlock does not collect, store, or process any personal information about our users. We do not use cookies, analytics, or tracking technologies on our website.
+      DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
     </p>
 
     <h2>Third-Party Services</h2>

webapp/src/views/ReportView.vue

@@ -80,7 +80,7 @@
           editable
         >
           <p>
-            Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
+            Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top right corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
           </p>
           <v-alert
             variant="tonal"
@@ -117,15 +117,10 @@
       </template>
     </v-stepper-vertical>
 
-    <h2 class="text-center mt-16">Edit an Existing ALPR</h2>
-    <p>
-      If you find an ALPR that's missing information and would like to update it, you can follow the same steps as above. Each ALPR on DeFlock has a Node ID that you can use to find it on OpenStreetMap.
-    </p>
-
+    <h2 class="text-center">Edit an Existing ALPR</h2>
     <p class="mb-16">
-      Simply click on the ALPR with missing information, and find the Node ID (e.g. <code>node/1237489334</code>) at the bottom of the popup. In the OSM editor search field, paste the <i>numerical portion</i> of the Node ID to find the ALPR and make your changes.
+      If you find an ALPR that's missing information and would like to update it, you can click the <b>View on OSM</b> button to edit it in the OpenStreetMap editor.
     </p>
-
   </v-container>
   <Footer />
 </template>

webapp/src/views/WhatIsAnALPRView.vue

@@ -17,43 +17,20 @@
       ALPRs invade your privacy and violate your civil liberties. Here's how:
     </p>
 
-    <dangers />
+    <Dangers />
 
-    <h2>What They Look Like</h2>
+    <h2 id="photos">Photos by Vendor</h2>
 
-    <v-alert
-      density="compact"
-      class="mb-6 text-center"
-      variant="tonal"
-      color="rgb(18, 151, 195)"
-    >
-      <p>
-        <v-icon v-if="isMobile" size="x-large">mdi-gesture-tap</v-icon>
-        <v-icon v-else size="x-large">mdi-button-cursor</v-icon>
-      </p>
-      <p>
-        <b>{{ isMobile ? 'Tap' : 'Hover over' }}</b> an image below to identify the make.
-        <span v-if="!isMobile"><b>Click</b> an image to enlarge.</span>
-      </p>
-    </v-alert>
-
-    <v-row>
-      <v-col v-for="image in images" cols="12" sm="6" md="4">
-        <v-hover>
-          <template v-slot:default="{ isHovering, props }">
-            <v-img style="cursor: pointer;" @click="openFullScreenImage(image)" v-bind="props" cover :aspect-ratio="3/2" :src="image.url">
-              <transition name="fade">
-                <div class="scrim" v-show="isHovering">
-                  <span class="scrim-text">{{ image.brand }}</span>
-                </div>
-              </transition>
-            </v-img>
-          </template>
-        </v-hover>
+    <v-row v-for="vendor in vendors" :key="vendor.vendor" class="mb-4">
+      <v-col cols="12">
+        <h3 class="text-center">{{ vendor.vendor }}</h3>
+      </v-col>
+      <v-col v-for="url in vendor.imageUrls" cols="12" sm="6" md="4">
+        <v-img @click="openImageInNewTab(url)" style="cursor: pointer;" cover :aspect-ratio="3/2" :src="url" />
       </v-col>
     </v-row>
 
-    <h2>Common Brands of ALPRs</h2>
+    <h2>Common Vendors</h2>
     <ul class="serif mb-16">
       <li>
         <a href="https://www.flocksafety.com/devices/lpr" target="_blank">Flock Safety</a> - A leading provider of ALPR technology, known for their solar-powered cameras. This is the most common brand of ALPR in the US. Flock Safety cameras are used by police departments, HOAs, as well as private businesses such as hardware stores and hotels. One of the most appealing features of Flock cameras is the data sharing network, which allows law enforcement agencies to access data from other Flock cameras in the area. This means that even if your local police department doesn't have a Flock camera, they can still access data from other Flock cameras in the area.
@@ -69,54 +46,52 @@
       </li>
     </ul>
   </v-container>
-
-  <v-dialog class="full-screen-image" v-model="showFullScreenImage">
-    <v-card style="overflow: hidden;">
-      <v-btn size="x-large" class="image-close-btn" flat icon @click="showFullScreenImage = false" color="transparent">
-        <v-icon :color="fullScreenImage.useDarkCloseButton ? 'black' : 'white'">mdi-close</v-icon>
-      </v-btn>
-      <v-img v-if="fullScreenImage" cover :aspect-ratio="3/2" :src="fullScreenImage.url" />
-    </v-card>
-    
-  </v-dialog>
-
   <Footer />
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
 import { ref, type Ref } from 'vue';
 import { useDisplay } from 'vuetify';
 import Dangers from '@/components/Dangers.vue';
 import Footer from '@/components/layout/Footer.vue';
-const route = useRoute();
 const { xs: isMobile } = useDisplay();
 
-const flockImageCount = 6;
-const vigilantImageCount = 3;
-
 const showFullScreenImage = ref(false);
 const fullScreenImage: Ref<any|undefined> = ref(undefined);
 
-function openFullScreenImage(image: object) {
-  if (isMobile.value)
-    return;
-  fullScreenImage.value = image;
-  showFullScreenImage.value = true;
+function openImageInNewTab(url: string, newTab: boolean = true) {
+  window.open(url, newTab ? '_blank' : '_self');
 }
 
-const images = [
-  ...Array.from({ length: flockImageCount }, (_, i) => ({
-    url: `/flock-${i + 1}.jpg`,
-    brand: 'flock',
-    useDarkCloseButton: false,
-  })),
-  ...Array.from({ length: vigilantImageCount }, (_, i) => ({
-    url: `/vigilant-${i + 1}.jpg`,
-    brand: 'motorola',
-    useDarkCloseButton: true,
-  }))
-];
+const vendors = [
+  {
+    vendor: 'Flock',
+    count: 4,
+    urlScheme: '/alprs/flock-{index}.jpg',
+  },
+  {
+    vendor: 'Motorola/Vigilant',
+    count: 4,
+    urlScheme: '/alprs/motorola-{index}.jpg',
+  },
+  {
+    vendor: 'Leonardo/ELSAG',
+    count: 4,
+    urlScheme: '/alprs/elsag-{index}.jpg',
+  },
+  {
+    vendor: 'Neology',
+    count: 2,
+    urlScheme: '/alprs/neology-{index}.jpg',
+  },
+].reduce((acc: any, vendor: any) => {
+  const imageUrls = Array.from({ length: vendor.count }, (_, index) => 
+    vendor.urlScheme.replace('{index}', String(index + 1)),
+  );
+
+  acc.push({ vendor: vendor.vendor, imageUrls });
+  return acc;
+}, []);
 </script>
 
 <style scoped>