remove dangers page, fix counter

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