From 1729a61dc5e4317cec5f90dbecca0b0aeda9bcbe Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 5 Dec 2024 15:01:21 -0700
Subject: [PATCH] dedicated homepage, updated qr page, added counter, clickable
 logo

---
 webapp/package-lock.json                   |  11 ++
 webapp/package.json                        |   1 +
 webapp/src/App.vue                         |  10 +-
 webapp/src/assets/main.css                 |   1 +
 webapp/src/components/ALPRCounter.vue      |  89 ++++++----
 webapp/src/router/index.ts                 |  19 ++-
 webapp/src/views/Landing.vue               | 185 +++++++++++++++++++++
 webapp/src/views/{HomeView.vue => Map.vue} |   7 +-
 webapp/src/views/QRLandingView.vue         |  24 ++-
 9 files changed, 301 insertions(+), 46 deletions(-)
 create mode 100644 webapp/src/views/Landing.vue
 rename webapp/src/views/{HomeView.vue => Map.vue} (98%)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 183f590..1b9e9de 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.7",
+        "countup.js": "^2.8.0",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3",
         "vuetify": "^3.7.2"
@@ -929,6 +930,11 @@
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true
     },
+    "node_modules/countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2092,6 +2098,11 @@
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true
     },
+    "countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 826d2ac..c48f62f 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "countup.js": "^2.8.0",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
     "vuetify": "^3.7.2"
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 0fe6006..4b4a3df 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRouter } from 'vue-router'
 import { ref, watch } from 'vue'
 import { useTheme } from 'vuetify';
 
 const theme = useTheme();
+const router = useRouter();
 
 function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -11,7 +12,8 @@ function toggleTheme() {
 }
 
 const items = [
-  { title: 'Map', icon: 'mdi-map', to: '/' },
+  { 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: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
   { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
@@ -31,9 +33,11 @@ watch(() => theme.global.name.value, (newTheme) => {
   const root = document.documentElement;
   if (newTheme === 'dark') {
     root.style.setProperty('--df-background-color', 'rgb(33, 33, 33)');
+    root.style.setProperty('--df-page-background-color', 'unset');
     root.style.setProperty('--df-text-color', '#ccc');
   } else {
     root.style.setProperty('--df-background-color', 'white');
+    root.style.setProperty('--df-page-background-color', '#f5f5f5');
     root.style.setProperty('--df-text-color', 'black');
   }
 });
@@ -48,7 +52,7 @@ watch(() => theme.global.name.value, (newTheme) => {
       <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
 
       <v-toolbar-title>
-        <v-img height="36" width="130" src="/deflock-logo.svg" />
+        <v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
diff --git a/webapp/src/assets/main.css b/webapp/src/assets/main.css
index cfed625..1f425f4 100644
--- a/webapp/src/assets/main.css
+++ b/webapp/src/assets/main.css
@@ -11,6 +11,7 @@ a:hover {
 :root {
   --df-background-color: white;
   --df-text-color: #ccc;
+  --df-page-background-color: #f5f5f5;
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a {
diff --git a/webapp/src/components/ALPRCounter.vue b/webapp/src/components/ALPRCounter.vue
index dbf8e6b..cbac5e1 100644
--- a/webapp/src/components/ALPRCounter.vue
+++ b/webapp/src/components/ALPRCounter.vue
@@ -1,29 +1,35 @@
 <template>
-  <v-card>
-    <v-card-text class="text-center">
-      <div class="d-flex flex-row justify-space-between">
-        <div class="px-2">
-          <h6>US</h6>
-          <h4>{{ formatCount(counts.us) }}</h4>
-        </div>
-        <v-divider vertical></v-divider>
-        <div class="px-2">
-          <h6>Worldwide</h6>
-          <h4>{{ formatCount(counts.worldwide) }}</h4>
-        </div>
-      </div>
-    </v-card-text>
-  </v-card>
+  <div class="counter">
+    <span ref="counterEl" class="font-weight-bold">0</span>
+    <span class="caption">&nbsp;ALPRs Reported Worldwide</span>
+    <div :class="{ 'fade-in': showFinalAnimation }" class="subheading fade-text">and rapidly growing!</div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch, type Ref } from 'vue';
 import { getALPRCounts } from '@/services/apiService';
+import { CountUp } from 'countup.js';
 
-const counts = ref({
-  us: null,
-  worldwide: null,
+const counterEl: Ref<HTMLElement|null> = ref(null);
+const countupOptions = {
+  useEasing: true,
+  useGrouping: true,
+  separator: ',',
+  decimal: '.',
+  prefix: '',
+  suffix: '',
+};
+let counter: CountUp|undefined = undefined;
+interface Counts {
+  us?: number;
+  worldwide?: number;
+}
+const counts: Ref<Counts> = ref({
+  us: undefined,
+  worldwide: undefined,
 });
+const showFinalAnimation = ref(false);
 
 onMounted(() => {
   getALPRCounts().then((response) => {
@@ -31,14 +37,41 @@ onMounted(() => {
   });
 });
 
-function formatCount(count: number | null): string {
-  if (count === null) {
-    return '-';
+watch(counts, (newCounts: Counts) => {
+  if (!newCounts.worldwide) return;
+  if (!counterEl.value) {
+    console.error('Counter element not found');
+    return;
+  };
+
+  if (!counter) {
+    counter = new CountUp(counterEl.value, newCounts.worldwide, countupOptions);
+    setTimeout(() => {
+      counter?.start();
+    }, 500);
+    setTimeout(() => {
+      showFinalAnimation.value = true;
+    }, 3000);
   }
-  if (count < 1000) {
-    return Math.round(count / 10) * 10 + '';
-  }
-  const rounded = Math.round(count / 100) / 10;
-  return `${rounded}k+`;
-}
+});
 </script>
+
+<style scoped>
+.counter {
+  font-size: 1.5rem;
+}
+
+.subheading {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.fade-text {
+  opacity: 0;
+  transition: opacity 1s ease;
+}
+
+.fade-in {
+  opacity: 1;
+}
+</style>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 2a94127..f9e345d 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Landing from '../views/Landing.vue'
+import Map from '../views/Map.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -16,7 +17,12 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: Landing
+    },
+    {
+      path: '/map',
+      name: 'map',
+      component: Map
     },
     {
       path: '/about',
@@ -69,4 +75,13 @@ const router = createRouter({
   ]
 })
 
+// backward compatibility with old url scheme
+router.beforeEach((to, from, next) => {
+  if (to.path === '/' && to.hash) {
+    next({ path: '/map', hash: to.hash })
+  } else {
+    next()
+  }
+})
+
 export default router
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
new file mode 100644
index 0000000..ca004fe
--- /dev/null
+++ b/webapp/src/views/Landing.vue
@@ -0,0 +1,185 @@
+<template>
+  <!-- Hero Section -->
+  <v-container fluid class="hero-section">
+     <v-row justify="center">
+       <v-col cols="12" md="8" class="text-center">
+       <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
+         <ALPRCounter class="mt-4" />
+         <p class="subtitle-1 px-8 mt-6 mb-12">
+           Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
+         </p>
+         <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+           Find Nearby ALPRs
+           <v-icon end>mdi-map</v-icon>
+         </v-btn>
+       </v-col>
+     </v-row>
+   </v-container>
+
+   <!-- Information Section -->
+   <v-container class="info-section py-10">
+     <v-row class="align-center">
+       <v-col cols="12" md="4" class="text-center">
+         <v-card>
+           <v-card-title class="headline">
+             <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
+             Privacy Violations
+           </v-card-title>
+           <v-card-text>
+             ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
+           </v-card-text>
+         </v-card>
+       </v-col>
+       <v-col cols="12" md="4" class="text-center">
+         <v-card>
+           <v-card-title class="headline">
+             <v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
+             Risk of Misuse
+           </v-card-title>
+           <v-card-text>
+             Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
+           </v-card-text>
+         </v-card>
+       </v-col>
+       <v-col cols="12" md="4" class="text-center">
+         <v-card>
+           <v-card-title class="headline">
+             <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
+             Limited Benefits
+           </v-card-title>
+           <v-card-text>
+             There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
+           </v-card-text>
+         </v-card>
+       </v-col>
+     </v-row>
+   </v-container>
+
+   <!-- Map Section -->
+   <v-container class="map-section py-10 text-center">
+     <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
+     <v-btn color="white" large @click="goToMap">
+       View the Map
+       <v-icon end>mdi-map</v-icon>
+     </v-btn>
+   </v-container>
+
+   <v-container>
+    <v-footer class="text-center">
+      <span class="attribution">
+        Maps ©&nbsp;<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>&nbsp;contributors.
+      </span>
+    </v-footer>
+   </v-container>
+</template>
+
+<style>
+.hero-section {
+  background: url('/flock-camera.jpeg') no-repeat center center;
+  background-size: cover;
+  color: white;
+  padding: 100px 0 !important;
+  position: relative;
+  }
+
+ .hero-section::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.5);
+   z-index: 1;
+ }
+
+ .hero-section > * {
+   position: relative;
+   z-index: 2;
+}
+
+.info-section {
+  background: var(--df-page-background-color);
+}
+
+.map-section {
+ background: url('/deflock-screenshot.webp') no-repeat center center;
+ background-size: cover;
+ color: white;
+ padding: 100px 0;
+ position: relative;
+ }
+ .map-section::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.4);
+   z-index: 1;
+ }
+
+ .map-section > * {
+   position: relative;
+   z-index: 2;
+}
+</style>
+
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import ALPRCounter from '@/components/ALPRCounter.vue';
+
+const router = useRouter();
+const userLocation = ref<[number, number] | null>(null);
+
+async function fetchUserLocation(): Promise<[number, number]> {
+ return new Promise((resolve, reject) => {
+   if (navigator.geolocation) {
+     navigator.geolocation.getCurrentPosition(
+       (position) => {
+         resolve([position.coords.latitude, position.coords.longitude]);
+       },
+       (error) => {
+         reject(error);
+       },
+       {
+         timeout: 10000,
+         enableHighAccuracy: true,
+       }
+     );
+   } else {
+     reject(new Error('Geolocation is not supported by this browser.'));
+   }
+ });
+}
+
+async function getUserLocation() {
+ try {
+   const [lat, lon] = await fetchUserLocation();
+   userLocation.value = [lat, lon];
+ } catch (error) {
+   console.debug('Error fetching user location:', error);
+ }
+}
+
+interface GoToMapOptions {
+ withCurrentLocation?: boolean;
+}
+
+async function goToMap(options: GoToMapOptions = {}) {
+ if (options.withCurrentLocation) {
+   await getUserLocation();
+   if (userLocation.value) {
+     const [lat, lon] = userLocation.value;
+     router.push({ path: '/map', hash: `#map=14/${lat.toFixed(6)}/${lon.toFixed(6)}` });
+   } else {
+     router.push({ path: '/map', hash: '#map=14/40.0150/-105.2705' });
+   }
+ } else {
+   router.push({ path: '/map' });
+ }
+}
+</script>
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/Map.vue
similarity index 98%
rename from webapp/src/views/HomeView.vue
rename to webapp/src/views/Map.vue
index 51c59bb..fb9bed7 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/Map.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-container" @keyup="handleKeyUp">
-    <NewVisitor />
+    <!-- <NewVisitor /> -->
 
     <v-card class="map-notif" v-show="isLoadingALPRs && !showClusters">
       <v-card-title><v-progress-circular indeterminate color="primary" /></v-card-title>
@@ -17,10 +17,6 @@
       @ready="mapLoaded"
       :options="{ zoomControl: false, attributionControl: false }"
     >
-      <l-control position="bottomleft">
-        <ALPRCounter />
-      </l-control>
-
       <l-control position="topleft">
         <form @submit.prevent="onSearch">
           <v-text-field
@@ -82,7 +78,6 @@ import { useDisplay, useTheme } from 'vuetify';
 import DFMapMarker from '@/components/DFMapMarker.vue';
 import DFMarkerCluster from '@/components/DFMarkerCluster.vue';
 import NewVisitor from '@/components/NewVisitor.vue';
-import ALPRCounter from '@/components/ALPRCounter.vue';
 import type { ALPR } from '@/types';
 
 const DEFAULT_ZOOM = 12;
diff --git a/webapp/src/views/QRLandingView.vue b/webapp/src/views/QRLandingView.vue
index aff7c6b..7ba65c9 100644
--- a/webapp/src/views/QRLandingView.vue
+++ b/webapp/src/views/QRLandingView.vue
@@ -4,6 +4,7 @@
       <v-row justify="center">
         <v-col cols="12" md="8" class="text-center">
           <h1 class="display-1 px-8">You're Being Tracked by an ALPR!</h1>
+          <ALPRCounter class="mt-4" />
           <p class="subtitle-1 px-8 mt-6 mb-12">
             Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
           </p>
@@ -36,7 +37,7 @@
               Risk of Misuse
             </v-card-title>
             <v-card-text>
-              Data from ALPRs has led to wrongful arrests, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
+              Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
             </v-card-text>
           </v-card>
         </v-col>
@@ -62,6 +63,14 @@
         <v-icon end>mdi-map</v-icon>
       </v-btn>
     </v-container>
+
+    <v-container>
+    <v-footer class="text-center">
+      <span class="attribution">
+        Maps ©&nbsp;<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>&nbsp;contributors.
+      </span>
+    </v-footer>
+   </v-container>
 </template>
 
 <style>
@@ -69,7 +78,7 @@
   background: url('/flock-camera.jpeg') no-repeat center center;
   background-size: cover;
   color: white;
-  padding: 100px 0;
+  padding: 100px 0 !important;
   position: relative;
   }
 
@@ -107,7 +116,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.4);
     z-index: 1;
   }
 
@@ -119,8 +128,9 @@
 
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import ALPRCounter from '@/components/ALPRCounter.vue';
 
 const router = useRouter();
 const userLocation = ref<[number, number] | null>(null);
@@ -164,12 +174,12 @@ async function goToMap(options: GoToMapOptions = {}) {
     await getUserLocation();
     if (userLocation.value) {
       const [lat, lon] = userLocation.value;
-      router.push({ path: '/', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
+      router.push({ path: '/map', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
     } else {
-      router.push({ path: '/', hash: '#map=16/40.0150/-105.2705' });
+      router.push({ path: '/map', hash: '#map=16/40.0150/-105.2705' });
     }
   } else {
-    router.push({ path: '/' });
+    router.push({ path: '/map' });
   }
 }
 </script>