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/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>