more cleanup

webapp/src/components/DFCode.vue

@@ -46,6 +46,10 @@ code {
   overflow-x: scroll;
 }
 
+code {
+  white-space: nowrap;
+}
+
 .copy-button {
   position: absolute;
   right: 0;

webapp/src/components/OSMTagSelector.vue

@@ -14,6 +14,8 @@
           hide-details
         ></v-select>
         <v-img
+          :aspect-ratio="3/2"
+          cover
           v-if="selectedBrand"
           :src="selectedBrand.exampleImage"
           :alt="selectedBrand.nickname"
@@ -40,15 +42,6 @@
           operator=<span class="highlight">(Police Dept/Owner)</span><br>
           operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
         </DFCode>
-
-        <v-alert
-          v-if="selectedBrand.nickname === 'Other'"
-          class="mt-4"
-          variant="tonal"
-          type="info"
-        >
-          Please provide additional details about the ALPR.
-        </v-alert>
       </v-col>
     </v-row>
 </template>
@@ -87,6 +80,7 @@ const alprBrands: WikidataItem[] = [
     name: '(brand goes here)',
     nickname: 'Other',
     wikidata: '(wikidata goes here)',
+    exampleImage: '/other-1.jpeg',
   }
 ];
 const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);

webapp/src/views/Donate.vue

@@ -18,8 +18,12 @@
         <p class="mb-8">
           Want to see your name here? <a href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
         </p>
+
         <v-row>
-          <v-col v-for="sponsor in sponsors" :key="sponsor.login" cols="6" md="4" lg="3">
+          <v-col v-if="isLoadingSponsors" v-for="n in 4" cols="6" md="4" lg="3">
+            <v-skeleton-loader type="image"></v-skeleton-loader>
+          </v-col>
+          <v-col v-else v-for="sponsor in sponsors" :key="sponsor.login" cols="6" md="4" lg="3">
             <v-card :href="sponsor.url" target="_blank" variant="flat" class="text-center py-2" color="transparent">
               <v-avatar size="64px" class="mb-3">
                 <v-img :src="sponsor.avatarUrl" :alt="sponsor.name" />
@@ -63,6 +67,7 @@ interface Sponsor {
 }
 
 const sponsors: Ref<Sponsor[]> = ref([]);
+const isLoadingSponsors = ref(true);
 
 onMounted(() => {
   getSponsors()
@@ -71,6 +76,9 @@ onMounted(() => {
     })
     .catch((error) => {
       console.error(error);
+    })
+    .finally(() => {
+      isLoadingSponsors.value = false;
     });
 });
 </script>

webapp/src/views/Landing.vue

@@ -28,6 +28,14 @@
   
   <!-- Dangers Section -->
   <v-container class="py-10 text-center info-section">
+
+    <h2 class="mb-4">What is an ALPR</h2>
+    <p class="text-left">
+      Automated License Plate Readers (ALPRs) are cameras that capture images of all passing license plates, storing details like the car's location, date, and time. These cameras collect data on millions of vehicles—regardless of whether the driver is suspected of a crime. While these systems can be useful for tracking stolen cars or wanted individuals, they are mostly used to track the movements of innocent people.
+    </p>
+
+    <v-divider class="my-8" />
+
     <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
     <p class="subtitle-1 px-8">
       ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements and profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
@@ -69,9 +77,9 @@
       </v-col>
     </v-row>
     
-    <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
+    <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/what-is-an-alpr">
       <v-icon start>mdi-book-open-page-variant</v-icon>
-      See All Dangers
+      Read More
     </v-btn>
   </v-container>
   
@@ -113,7 +121,7 @@
 }
 
 .map-section {
-  background: url('/deflock-screenshot.webp') no-repeat center center;
+  background: url('/deflock-screenshot.webp') no-repeat right center;
   background-size: cover;
   color: white;
   padding: 100px 0;

webapp/src/views/WhatIsAnALPRView.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-container class="info-section" max-width="1000">
+  <v-container fluid>
-    <p>
+    <v-row justify="center" class="hero-section-whatis text-center mb-4">
-      <v-img max-height="450" width="100%" cover src="/flock-camera.jpeg" />
+    </v-row>
-    </p>
+  </v-container>
   
-    <h2>What is an ALPR</h2>
+  <v-container class="info-section">
+    <h1 class="mt-0">What is an ALPR?</h1>
     <p>
       Automated License Plate Readers (ALPRs) are cameras that capture images of all passing license plates, storing details like the car's location, date, and time. These cameras collect data on millions of vehicles—regardless of whether the driver is suspected of a crime. While these systems can be useful for tracking stolen cars or wanted individuals, they are mostly used to track the movements of innocent people.
     </p>
@@ -12,110 +13,159 @@
     <p>For a detailed explanation of how ALPRs are a threat to privacy, see this <a href="https://www.aclu.org/issues/privacy-technology/you-are-being-tracked" target="_blank">ACLU article</a> as well as this <a href="https://sls.eff.org/technologies/automated-license-plate-readers-alprs" target="_blank">EFF article</a> on ALPRs.</p>
 
     <h2>Why Should You Be Concerned</h2>
-    <p class="mb-4">
+    <p class="mb-8 text-center">
       ALPRs invade your privacy and violate your civil liberties. Here's how:
     </p>
 
     <dangers />
 
-    <h2 id="not-alpr" :class="{ highlighted: route.hash === '#not-alpr' }">What They Look Like</h2>
+    <h2>What They Look Like</h2>
-    <v-carousel class="my-4" hide-delimiters>
-      <v-carousel-item
-        v-for="{ url, brand } in images"
-        :key="url"
-        aspect-ratio="1"
-        :src="url"
-        class="text-center"
-      >
-        <v-chip :rounded="false" color="warning" variant="elevated" size="x-large" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);">
-          <span class="font-weight-bold">Brand: <span class="text-uppercase">{{ brand }}</span></span>
-        </v-chip>
-      </v-carousel-item>
-    </v-carousel>
 
+    <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>
 
-    <p>
+    <v-row>
-      While <a href="https://en.wikipedia.org/wiki/Flock_Safety" target="_blank">Flock Safety</a> is a common brand of ALPRs in the US, there are several others, including <a href="https://en.wikipedia.org/wiki/Vigilant_Solutions" target="_blank">Vigilant Solutions</a>, owned by Motorola Solutions. Flock Safety ALPRs are easy to spot as they almost all look the same, typically mounted on poles with a solar panel on top. In rural areas, they are likely to be on standalone black poles, while in cities, they are more likely to be on existing utility or traffic poles. The cameras are often placed near intersections or on main roads at the edge of a city or town. Vigilant Solutions ALPRs, on the other hand, are typically mounted on traffic poles at or near intersections, with a distinctive white box mounted nearby.
+      <v-col v-for="image in images" cols="12" sm="6" md="4">
-    </p>
+        <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-col>
+    </v-row>
 
-    <h2>Not All Cameras are Law Enforcement ALPRs</h2>
+    <h2>Common Brands of ALPRs</h2>
-    <p>
+    <ul class="serif mb-16">
-      Not all cameras near roads are ALPRs operated by law enforcement. Many people mistakenly assume that every traffic camera or intersection camera is an ALPR, but the reality is more nuanced. Here are some common types of cameras you might see near roads:
+      <li>
-    </p>
+        <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.
-
+      </li>
-    <div class="ml-4">
+      <li>
-      <h3>Traffic Cameras</h3>
+        <a href="https://www.motorolasolutions.com/en_us/video-security-access-control/license-plate-recognition-camera-systems.html" target="_blank">Vigilant Solutions</a> - Owned by Motorola Solutions, offering a range of ALPR products and services.
-      <div class="flex-image">
+      </li>
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/traffic-camera.jpg" />
+      <li>
-        <p>Standard traffic cameras typically capture live video or images of intersections to monitor traffic flow and manage signals. They do not specifically focus on reading license plates or storing data long-term.</p>
+        <a href="https://www.leonardocompany-us.com/lpr/elsag-fixed" target="_blank">ELSAG</a> - A subsidiary of Leonardo, specializing in ALPR technology.
-      </div>
+      </li>
-
+      <li>
-      <h3>Red Light Cameras/Speed Cameras</h3>
+        <a href="https://neology.com/solutions/enforcement/" target="_blank">Neology</a> - Specializes in ALPR technology and tolling solutions.
-      <div class="flex-image">
+      </li>
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/redlight-camera.jpg" />
+    </ul>
-        <p>These cameras are set up to capture violations, such as running a red light or speeding. They may record plate numbers when a violation is detected, but they do not perform continuous surveillance or collect location data over time.</p>
-      </div>
-
-      <h3>Toll Cameras</h3>
-      <div class="flex-image">
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/toll-camera.jpg" />
-        <p>Cameras on toll roads are used to capture license plates for billing purposes. They are not designed to track vehicles or store data beyond the transaction.</p>
-      </div>
-    </div>
   </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;
+}
+
 const images = [
   ...Array.from({ length: flockImageCount }, (_, i) => ({
     url: `/flock-${i + 1}.jpg`,
-    brand: 'flock'
+    brand: 'flock',
+    useDarkCloseButton: false,
   })),
   ...Array.from({ length: vigilantImageCount }, (_, i) => ({
     url: `/vigilant-${i + 1}.jpg`,
-    brand: 'motorola'
+    brand: 'motorola',
+    useDarkCloseButton: true,
   }))
 ];
 </script>
 
 <style scoped>
-h2 {
+@import url('@/assets/typography.css');
-  margin-top: 2rem;
+
+h1, h2 {
+  text-align: center;
 }
 
-h3 {
+.scrim {
-  margin-top: 1.25rem;
+  position: absolute;
-}
+  top: 0;
-
+  left: 0;
-p {
+  right: 0;
-  margin-top: 0.5rem;
+  bottom: 0;
-}
+  background-color: rgba(0, 0, 0, 0.5);
-
-.flex-image {
   display: flex;
-  gap: 1rem;
+  justify-content: center;
   align-items: center;
-  margin-top: 0.5rem;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
-li {
+.image-close-btn {
-  margin-top: 0.5rem;
+  position: absolute;
-  margin-left: 1rem;
+  top: 0;
+  right: 0;
+  color: white;
+  z-index: 100;
 }
 
-.highlighted {
+.scrim-text {
-  background-color: yellow;
+  text-transform: uppercase;
-  padding: 0.5rem;
+}
-  border-radius: 0.25rem;
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.hero-section-whatis {
+  background: url('/flock-camera.jpeg') no-repeat right center;
+  background-size: cover;
+  color: white;
+  position: relative;
+  height: 400px;
 }
 </style>