major cleanup

2026-05-29 10:41:32 +02:00 · 2024-12-27 12:06:39 -07:00
parent 3f4052df20
commit 7904af0fb6
27 changed files with 681 additions and 250 deletions
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { RouterView, useRouter } from 'vue-router'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useTheme } from 'vuetify';

 const theme = useTheme();
 const router = useRouter();
+const isDark = computed(() => theme.name.value === 'dark');

 function toggleTheme() {
  const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -23,7 +24,7 @@ const items = [
 ]

 const metaItems = [
-  { title: 'Discord', icon: 'mdi-chat-processing-outline', href: 'https://discord.gg/aV7v4R3sKT'},
+  { title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', href: 'https://discord.gg/aV7v4R3sKT'},
  { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
  { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
  { title: 'Donate', icon: 'mdi-heart', to: '/donate'},
@@ -34,11 +35,9 @@ 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');
  }
 });
@@ -86,7 +85,11 @@ watch(() => theme.global.name.value, (newTheme) => {
          :to="item.to"
          :href="item.href"
          :target="{ '_blank': item.href }"
-        ><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
+        >
+          <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
+            <v-img v-else-if="item.customIcon" class="mr-2 custom-icon" contain width="24" height="24" :src="isDark ? item.customIconDark : item.customIcon" style="vertical-align: middle;" />
+            <span style="vertical-align: middle;">{{ item.title }}</span>
+        </v-list-item>
      </v-list>
    </v-navigation-drawer>

@@ -95,3 +98,10 @@ watch(() => theme.global.name.value, (newTheme) => {
    </v-main>
  </v-app>
 </template>
+
+<style lang="css" scoped>
+.custom-icon {
+  display: inline-block;
+  margin-right: 5px;
+}
+</style>
@@ -1,17 +1,18 @@
 a {
  font-weight: bold;
-  color: rgb(18, 151, 195);
+  color: var(--df-blue);
  text-decoration: none;
 }

-a:hover {
+/* underline only simple <a> elements */
+a:not([class]):hover {
  text-decoration: underline;
 }

 :root {
  --df-background-color: white;
  --df-text-color: #ccc;
-  --df-page-background-color: #f5f5f5;
+  --df-blue: rgb(18, 151, 195);
 }

 .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a {
@@ -0,0 +1,26 @@
+/* Typography rules */
+
+body {
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+
+p {
+  margin: 0.5em 0;
+}
+
+ul, ol {
+  margin: 1em 0;
+  padding-left: 1.5em;
+}
+
+ul li, ol li {
+  margin: 0.5em 0;
+}
@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panels multiple>
+  <v-expansion-panels multiple :model-value :readonly="showAll">
    <v-expansion-panel>
      <v-expansion-panel-title class="font-weight-bold">
        ALPRs Do Not Reduce Crime
@@ -19,7 +19,7 @@
          What research does exist regarding the ability of ALPRs to reduce crime is inconclusive at best:
        </p>

-        <quoted-source source-url="https://example.com/study" attribution-text="Journal of Experimental Criminology">
+        <quoted-source source-url="https://link.springer.com/article/10.1007/s11292-011-9133-9" attribution-text="Journal of Experimental Criminology">
          Our findings indicate that, when small numbers of LPR patrols are used in crime hot spots in the way we have tested them here, they do not seem to generate either a general or offense-specific deterrent effect.
        </quoted-source>

@@ -156,6 +156,16 @@

 <script setup lang="ts">
 import QuotedSource from '@/components/QuotedSource.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  showAll: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const modelValue = computed(() => props.showAll ? [0,1,2,3,4,5] : []);
 </script>

 <style scoped>
@@ -60,7 +60,7 @@ function initializeMap() {
  registerWatchers();

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  emit('update:bounds', map.getBounds()); // XXX: this event populates the map
@@ -69,8 +69,6 @@ function initializeMap() {
 function renderCurrentLocation() {
  if (!props.currentLocation)
    return;
-  else
-    console.log('Current location:', props.currentLocation);

  if (currentLocationLayer) {
    map.removeLayer(currentLocationLayer);
@@ -0,0 +1,95 @@
+<template>
+  <v-footer>
+    <v-container>
+      <v-row align-items="center" justify="center">
+
+        <v-col cols="12" class="mt-4">
+          <v-img height="30" contain src="/deflock-logo-grey.svg" />
+        </v-col>
+        
+        <!-- Internal Links -->
+        <v-col cols="7" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Info</v-list-subheader>
+            <v-list-item
+              v-for="link in internalLinks"
+              :key="link.title"
+              link
+              :to="link.to"
+              slim
+            >
+                <v-list-item-title class="d-flex align-center">
+                <v-icon class="custom-icon" start :icon="link.icon" />
+                {{ link.title }}
+                </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- External Links -->
+        <v-col cols="5" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Get Involved</v-list-subheader>
+            <v-list-item
+              v-for="link in externalLinks"
+              :key="link.title"
+              link
+              slim
+              :href="link.href"
+              :to="link.to"
+              :target="link.href ? '_blank' : undefined"
+            >
+              <v-list-item-title class="d-flex align-center justify-start">
+                <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
+                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" />
+                {{ link.title }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- Copyright -->
+        <v-col
+          class="text-center serif copyright d-flex align-center justify-center text-grey-darken-1"
+          cols="12"
+          sm="6"
+        >
+        <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>
+        </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const isDark = computed(() => theme.name.value === 'dark');
+const currentYear = new Date().getFullYear();
+
+const internalLinks = [
+  { title: 'About', to: '/about', icon: 'mdi-information' },
+  { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield' },
+  { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document' },
+  { title: 'Contact', to: '/contact', icon: 'mdi-email' },
+];
+
+const externalLinks = [
+  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg' },
+  { title: 'Donate', to: '/donate', icon: 'mdi-heart' },
+  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
+]
+</script>
+
+<style scoped>
+.custom-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.copyright {
+  font-size: 0.85rem;
+}
+</style>
@@ -17,6 +17,13 @@ const vuetify = createVuetify({
  directives,
  theme: {
    defaultTheme: 'light',
+    themes: {
+      light: {
+        colors: {
+          background: '#f5f5f5',
+        }
+      }
+    }
  }
 })

@@ -83,11 +83,19 @@ const router = createRouter({
      }
    },
    {
-      path: '/legal',
-      name: 'legal',
-      component: () => import('../views/LegalView.vue'),
+      path: '/terms',
+      name: 'terms',
+      component: () => import('../views/TermsOfService.vue'),
      meta: {
-        title: 'Legal | DeFlock'
+        title: 'Terms of Service | DeFlock'
+      }
+    },
+    {
+      path: '/privacy',
+      name: 'privacy',
+      component: () => import('../views/PrivacyPolicy.vue'),
+      meta: {
+        title: 'Privacy Policy | DeFlock'
      }
    },
    {
@@ -1,5 +1,5 @@
 <template>
-  <v-container max-width="1000">
+  <v-container max-width="1000" class="mb-16">
    <h2>About Us</h2>
    <p>
      Welcome to DeFlock, your go-to resource for understanding and addressing the growing presence of Automated License Plate Readers (ALPRs) in our communities.
@@ -48,22 +48,13 @@
        Share our site with your friends, family, and social networks to help raise awareness about the dangers of ALPRs.
      </p>
    </div>
-
-    <v-footer class="my-6">
-      <v-col cols="7" class="text-grey">
-        &copy; {{ thisYear }} DeFlock. All rights reserved.
-      </v-col>
-      <v-spacer></v-spacer>
-      <v-col cols="5">
-        <p><router-link class="text-grey" to="/legal">Legal</router-link></p>
-        <p><router-link class="text-grey" to="/contact">Contact Us</router-link></p>
-      </v-col>
-    </v-footer>
  </v-container>
+
+  <Footer />
 </template>

 <script setup lang="ts">
-const thisYear = new Date().getFullYear();
+import Footer from '@/components/layout/Footer.vue';
 </script>

 <style scoped>
@@ -1,14 +1,63 @@
 <template>
-  <v-container max-width="1000">
-    <h2>Contact Us</h2>
-    <p>
-      If you have any questions or concerns about the data on this site, please contact us at <a href="mailto:contact@deflock.me">contact@deflock.me</a>.
-    </p>
+  <v-container class="mb-16 text-center">
+    <h1>Contact Us</h1>
+
+    <div>
+      <p>
+        Have questions about DeFlock? Need help contributing to OpenStreetMap?
+      </p>
+      <p>
+        Reach out using the contact options below.
+      </p>
+    </div>
+
+    <v-row class="mt-12">
+      <v-col cols="12" sm="6">
+        <v-card
+          variant="outlined"
+          append-icon="mdi-open-in-new"
+          class="mx-auto my-2"
+          href="mailto:contact@deflock.me"
+          max-width="344"
+          prepend-icon="mdi-email"
+          subtitle="contact@deflock.me"
+          target="_blank"
+          title="Email Us"
+        ></v-card>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <v-card
+          variant="outlined"
+          append-icon="mdi-open-in-new"
+          class="mx-auto my-2"
+          href="https://discord.gg/aV7v4R3sKT"
+          max-width="344"
+          subtitle="discord.gg/aV7v4R3sKT"
+          target="_blank"
+          title="Join our Discord"
+        >
+          <template v-slot:prepend>
+            <v-img class="mr-2" contain width="24" height="24" :src="isDark ? 'icon-discord-white.svg' : 'icon-discord.svg'" />
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
  </v-container>
+  
+  <Footer />
 </template>

-<style scoped>
-p {
-  margin-top: 0.5rem;
-}
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+import { useTheme } from 'vuetify';
+import { computed } from 'vue';
+
+const theme = useTheme();
+const isDark = computed(() => theme.name.value === 'dark');
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
 </style>
+
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="info-section">
+  <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">
@@ -21,12 +21,15 @@
      </v-col>
    </v-row>
    
-    <dangers />
+    <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>
@@ -57,8 +60,4 @@ import Dangers from '@/components/Dangers.vue';
 p {
  margin-bottom: 16px;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="sponsor-page">
+  <v-container fluid class="sponsor-page">
    <!-- Hero Section -->
    <v-row justify="center" class="hero-section-sponsor text-center mb-4">
      <v-col cols="12" md="8">
@@ -14,10 +14,13 @@
    <!-- GitHub Sponsors Section -->
    <v-row justify="center" class="sponsors-section text-center">
      <v-col cols="12" md="10">
-        <h2 class="mb-4">Our Amazing Sponsors</h2>
+        <h2 class="mb-2">Our Amazing Sponsors</h2>
+        <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-card variant="flat" class="text-center py-2">
+            <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" />
              </v-avatar>
@@ -27,26 +30,36 @@
        </v-row>
      </v-col>
    </v-row>
-  </v-container>

-  <!-- Footer Section -->
-  <v-footer class="text-center mt-8">
-    <v-row>
-      <v-col>
-        <p>&copy; {{ new Date().getFullYear() }} DeFlock. All rights reserved.</p>
+    <!-- GitHub Sponsors Section -->
+    <v-row justify="center" class="sponsors-section text-center mt-4">
+      <v-col cols="12" md="10">
+        <h2 class="mb-2">Special Thanks</h2>
+        
+        <v-card href="https://www.404media.co/" target="_blank" max-width="250" variant="flat" class="text-center py-2 mx-auto" color="transparent">
+          <v-img class="ma-4" src="/404media.svg" alt="404 Media Logo" contain />
+          <v-card-title class="mt-2 serif text-center font-weight-bold">404 Media</v-card-title>
+          <v-card-text>
+            <p>Special thanks to Jason Koebler at 404 Media for popularizing this project. Be sure to support them, as they are fellow privacy advocates.</p>
+          </v-card-text>
+        </v-card>
      </v-col>
    </v-row>
-  </v-footer>
+  </v-container>
+
+  <Footer />
 </template>

 <script setup lang="ts">
 import { ref, onMounted, type Ref } from "vue";
 import { getSponsors } from "@/services/apiService";
+import Footer from "@/components/layout/Footer.vue";

 interface Sponsor {
  login: string;
  name: string;
  avatarUrl: string;
+  url: string;
 }

 const sponsors: Ref<Sponsor[]> = ref([]);
@@ -1,78 +1,90 @@
 <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 bigger">
-           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>
-
-   <!-- Dangers Section -->
-   <v-container class="py-10 text-center info-section">
-      <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, profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
-      </p>
-      
-     <v-row class="align-center mt-4">
-       <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-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
-        See All Dangers
-        <v-icon end>mdi-shield-alert</v-icon>
-      </v-btn>
-    </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-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 bigger">
+          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>
+        
+        <!-- Featured On Section -->
+        <v-container class="featured-on-section mt-10">
+          <h4 class="mb-8" style="opacity: 0.8">Featured On</h4>
+          <v-row justify="center" align-items="center">
+            <v-card flat v-for="site in featuredOn" class="mx-4" :width="site.wide ? 200 : 100" height="50" :href="site.url" target="_blank" style="background: rgba(0,0,0,0)">
+              <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />
+            </v-card>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+  
+  <!-- Dangers Section -->
+  <v-container class="py-10 text-center info-section">
+    <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.
+    </p>
+    
+    <v-row class="align-center mt-4">
+      <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-robber</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-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
+      <v-icon start>mdi-book-open-page-variant</v-icon>
+      See All Dangers
+    </v-btn>
+  </v-container>
+  
+  <!-- Map Section -->
+  <v-container fluid 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>
+  
+  <Footer />
 </template>

 <style>
@@ -80,7 +92,7 @@
  background: url('/flock-camera.jpeg') no-repeat center center;
  background-size: cover;
  color: white;
-  padding: 100px 0 !important;
+  padding: 100px 0 50px 0 !important;
  position: relative;
 }

@@ -100,10 +112,6 @@
  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;
@@ -130,6 +138,10 @@
 .bigger {
  font-size: 1.1rem;
 }
+
+.featured-logo {
+  opacity: 0.7;
+}
 </style>


@@ -137,6 +149,7 @@
 import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
 import { useGlobalStore } from '@/stores/global';
+import Footer from '@/components/layout/Footer.vue';

 const router = useRouter();
 const { setCurrentLocation } = useGlobalStore();
@@ -145,6 +158,25 @@ interface GoToMapOptions {
  withCurrentLocation?: boolean;
 }

+const featuredOn = [
+{
+  name: 'Forbes',
+  logo: '/white-logos/forbes.svg',
+  url: 'https://www.forbes.com/sites/larsdaniel/2024/11/26/think-youre-not-being-watched-deflock-says-think-again/',
+},
+{
+  name: '404 Media',
+  logo: '/white-logos/404media.svg',
+  url: 'https://www.404media.co/the-open-source-project-deflock-is-mapping-license-plate-surveillance-cameras-all-over-the-world/',
+},
+{
+  name: 'LA Times',
+  logo: '/white-logos/latimes.svg',
+  url: 'https://www.latimes.com/california/story/2024-11-14/are-there-automated-license-plate-readers-in-your-city-theres-an-open-source-program-for-that',
+  wide: true,
+}
+];
+
 async function goToMap(options: GoToMapOptions = {}) {
  if (options.withCurrentLocation) {
    setCurrentLocation()
@@ -1,84 +0,0 @@
-<template>
-  <v-container max-width="1000">
-    <h1>Legal</h1>
-    <h2>Attribution</h2>
-    <p>
-      This website uses data from <a href="https://openstreetmap.org" target="_blank">OpenStreetMap</a>. OpenStreetMap is open data, licensed under the <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">Open Data Commons Open Database License (ODbL)</a>.
-    </p>
-    <p>
-      Geocoding services are provided by <a href="https://nominatim.org/" target="_blank">Nominatim</a>, a project of OpenStreetMap.
-    </p>
-
-    <h2>Privacy Policy</h2>
-    <h3>Plausible Analytics</h3>
-
-    <p>
-      We use Plausible Analytics to track anonymous usage data. Plausible does not use cookies or collect personally identifiable information. The data collected is used solely to understand how people are using the site and to improve user experience.
-    </p>
-    <p>
-      No data is shared with third parties, and no personally identifiable information is stored or collected.
-    </p>
-
-    <h3>User Reports</h3>
-    <p>
-      At this time, DeFlock.me does not collect or store user-submitted reports. Users are directed to submit ALPR camera locations directly to OpenStreetMap via their editing platform, which has its own privacy policy and data practices.
-    </p>
-
-    <h2>Terms of Use</h2>
-
-    <h3>Use of the Website</h3>
-    <p>
-      DeFlock.me provides a service to help users locate and report Automated License Plate Reader (ALPR) cameras through external services like OpenStreetMap. By using this site, you agree to use the tools and resources in a lawful and ethical manner.
-    </p>
-
-    <h3>Liability Disclaimer</h3>
-    <p>
-      DeFlock.me provides information and directs users to third-party services for ALPR reporting. We do not guarantee the accuracy or completeness of the data presented on the map.
-    </p>
-    <p>
-      DeFlock.me and its operators are not liable for any direct or indirect damages arising from the use of the site, including reliance on third-party data or the submission of ALPR locations via OpenStreetMap.
-    </p>
-
-    <h2>User-Generated Content</h2>
-    <p>
-      DeFlock.me does not currently accept user-generated reports directly. All ALPR camera reports are directed to OpenStreetMap&apos;s editing platform. Users should follow OSM&apos;s guidelines and policies when submitting data.
-    </p>
-    <p>
-      In the future, we may add the ability to report ALPR cameras directly on this site. At that time, additional policies will be introduced regarding the use and storage of user-generated content.
-    </p>
-
-    <h2>Copyright Notice</h2>
-    <p>
-      All original content, design, and features of DeFlock.me are © {{ thisYear }} DeFlock.me. All rights reserved. Reproduction, distribution, or use of site content without permission is prohibited.
-    </p>
-    <p>
-      OpenStreetMap data is © OpenStreetMap contributors and is licensed under the Open Data Commons Open Database License (ODbL).
-    </p>
-
-  </v-container>
-</template>
-
-<script setup lang="ts">
-const thisYear = new Date().getFullYear();
-</script>
-
-<style scoped>
-/* TODO: put this all in one place, also in what-is view */
-h2 {
-  margin-top: 2rem;
-}
-
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-/* as you can see, this one is the most updated */
-a {
-  color: var(green);
-  text-decoration: none;
-}
-</style>
@@ -51,12 +51,15 @@
      We are getting a lot of new datasets and trying to decide how to import them at a large scale, since they need to be verified and deduplicated. If you have any ideas or want to help, please reach out to us <router-link to="/contact">here</router-link> or join our <a href="https://discord.gg/aV7v4R3sKT" target="_blank">Discord</a>.
    </p>
  </v-container>
+
+  <Footer />
 </template>

 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue';
 import { getCities } from '@/services/apiService';
 import CommunityDatasets from '@/components/CommunityDatasets.vue';
+import Footer from '@/components/layout/Footer.vue';

 const page = ref(1);
 const selectedState = ref('');
@@ -125,8 +128,4 @@ code {
  border-radius: 0.25rem;
  font-weight: bold;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
@@ -0,0 +1,48 @@
+<template>
+  <v-container class="mb-16">
+    <h1>Privacy Policy</h1>
+    <p>Effective Date: <b>12/26/2024</b></p>
+
+    <p>
+      At DeFlock, we respect your privacy. This privacy policy outlines our approach to user privacy and how information may be handled when using our platform.
+    </p>
+
+    <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.
+    </p>
+
+    <h2>Third-Party Services</h2>
+    <p>
+      DeFlock relies on OpenStreetMap (OSM) for map data and functionality. If you choose to contribute Automatic License Plate Recognition (ALPR) data or other content to OSM, you will interact directly with their platform. OSM may request personal information, such as your email address and name, to facilitate your contributions. Please refer to the OpenStreetMap Privacy Policy for details on their data practices.
+    </p>
+
+    <h2>Your Choices</h2>
+    <p>
+      If you prefer not to share personal information, you are not required to contribute to OSM to use DeFlock. You can still enjoy the map data we source from OSM without uploading additional information.
+    </p>
+
+    <h2>Contact Us</h2>
+    <p>
+      If you have any questions or concerns about this privacy policy, please contact us at:
+    </p>
+    <p>
+      Email: <a href="mailto:contact@deflock.me">contact@deflock.me</a>
+    </p>
+
+    <h2>Policy Updates</h2>
+    <p>
+      We may update this privacy policy from time to time to reflect changes in our practices or for legal compliance. The "Effective Date" above will indicate when the latest changes were made.
+    </p>
+  </v-container>
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
+</style>
@@ -1,31 +1,11 @@
 <template>
  <v-container class="info-section" max-width="1000">
-    <v-alert
-      variant="tonal"
-      type="info"
-      class="my-6"
-      title="Reporting Feature Coming Soon"
-    >
-      <p>
-        We're working on a feature that will allow you to report ALPRs directly on this site. In the meantime, you can follow the steps below to add the ALPR to OpenStreetMap.
-      </p>
-    </v-alert>
+
    <h2>How to Report an ALPR</h2>
    <p>
      If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
    </p>

-    <v-alert
-      variant="tonal"
-      type="warning"
-      class="my-6"
-      title="Are you sure it's an ALPR?"
-    >
-      <p>
-        Before you report an ALPR, please read our <router-link style="color: unset !important" to="/what-is-an-alpr#not-alpr">guide on what ALPRs look like</router-link> to make sure you're reporting the right thing.
-      </p>
-    </v-alert>
-
    <div class="ml-4 mt-4">
      <h3>1. Create an OpenStreetMap Account</h3>
      <p>
@@ -69,6 +49,17 @@
        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.
      </p>

+      <v-alert
+        variant="tonal"
+        type="info"
+        class="my-6"
+        title="How Long Will It Take?"
+      >
+        <p>
+          We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
+        </p>
+      </v-alert>
+
      <h3>6. Hang a Sign</h3>
      <p>
        Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
@@ -76,11 +67,12 @@

    </div>
  </v-container>
+  <Footer />
 </template>

 <script setup lang="ts">
-import DFCode from '@/components/DFCode.vue';
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
+import Footer from '@/components/layout/Footer.vue';
 </script>

 <style scoped>
@@ -118,8 +110,4 @@ code {
  border-radius: 0.25rem;
  font-weight: bold;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
@@ -0,0 +1,101 @@
+<template>
+  <v-container class="mb-16">
+    <h1>Terms of Service for DeFlock</h1>
+    <p>Effective Date: <b>12/26/2024</b></p>
+    
+    <p>
+      Welcome to DeFlock. By accessing or using our site, you agree to these Terms of Service. If you do not agree, please refrain from using DeFlock.
+    </p>
+
+    <h2>
+      1. About DeFlock
+    </h2>
+    <p>
+      DeFlock provides access to map data sourced from OpenStreetMap (OSM). Our platform allows users to view maps and provides examples of OSM tags for contributing Automatic License Plate Recognition (ALPR) data or other information to OSM.
+    </p>
+
+    <h2>
+      2. User Responsibilities
+    </h2>
+    <h3>
+      2.1 Tagging Guidance
+    </h3>
+    <p>
+      While DeFlock provides examples of OSM tags that may be relevant for your contributions, it is the user’s responsibility to ensure the accuracy and appropriateness of the tags used when uploading to OSM. DeFlock is not liable for any consequences arising from incorrect or inappropriate tagging.
+    </p>
+
+    <h3>
+      2.2 Prohibited Uses
+    </h3>
+    <p>
+      DeFlock must not be used for any of the following purposes:
+    </p>
+
+    <ul class="serif">
+      <li>Locating specific nodes, ways, or relations on OpenStreetMap for the purpose of vandalism, including deleting accurate information or modifying it to be false or misleading.</li>
+      <li>Scraping, harvesting, or systematically collecting data from DeFlock or OpenStreetMap in violation of their terms or for unauthorized purposes.</li>
+      <li>Impersonating other contributors or providing false information when contributing to OpenStreetMap.</li>
+      <li>Using DeFlock or its guidance to create commercial products or services without proper attribution or compliance with OpenStreetMap's licensing terms.</li>
+      <li>Attempting to disrupt or interfere with the functionality of DeFlock, including through hacking, reverse engineering, or introducing malicious software.</li>
+      <li>Using DeFlock in ways that promote hate speech, harassment, or illegal activities.</li>
+    </ul>
+
+    <p>
+      By using DeFlock, you agree to comply with all applicable laws and regulations.
+    </p>
+
+    <h2>
+      3. Third-Party Services
+    </h2>
+    <p>
+      DeFlock integrates with OpenStreetMap, and any interactions with OSM are governed by their terms of use. DeFlock is not responsible for the collection, storage, or use of data by OSM or any third-party services. For more information, please review the OpenStreetMap Terms of Use.
+    </p>
+
+    <h2>4. Disclaimer of Liability</h2>
+    <p>
+      DeFlock is provided "as is" without warranties of any kind. We do not guarantee the accuracy, reliability, or completeness of any map data or tagging guidance provided. DeFlock is not liable for any issues arising from:
+    </p>
+
+    <ul class="serif">
+      <li>The accuracy or use of data sourced from OpenStreetMap.</li>
+      <li>Contributions made to OpenStreetMap, including tagging errors or disputes.</li>
+      <li>Any unauthorized or prohibited use of our platform.</li>
+    </ul>
+
+    <h2>5. Intellectual Property</h2>
+    <p>
+      All content provided by DeFlock, including design, text, and logos, is the intellectual property of DeFlock unless otherwise noted. Users may not copy, distribute, or modify this content without prior written permission.
+    </p>
+    <p>
+      DeFlock's source code is licensed under the MIT License. For details, please refer to the <a target="_blank" href="https://github.com/FoggedLens/deflock?tab=MIT-1-ov-file#readme">LICENSE file</a>.
+    </p>
+
+    <h2>6. Termination of Use</h2>
+    <p>
+      We reserve the right to suspend or terminate access to DeFlock at our sole discretion if we believe a user has violated these Terms of Service.
+    </p>
+
+    <h2>7. Changes to the Terms of Service</h2>
+    <p>
+      DeFlock reserves the right to update or modify these Terms of Service at any time. Changes will be effective upon posting to our website. Continued use of DeFlock constitutes acceptance of the updated terms.
+    </p>
+
+    <h2>8. Contact Us</h2>
+    <p>
+      If you have any questions or concerns regarding these Terms of Service, please contact us at:
+    </p>
+    <p>
+      Email: <a href="mailto:contact@deflock.me">contact@deflock.me</a>
+    </p>
+  </v-container>
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
+</style>
@@ -63,11 +63,14 @@
      </div>
    </div>
  </v-container>
+
+  <Footer />
 </template>

 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 import Dangers from '@/components/Dangers.vue';
+import Footer from '@/components/layout/Footer.vue';
 const route = useRoute();

 const flockImageCount = 6;
@@ -115,8 +118,4 @@ li {
  padding: 0.5rem;
  border-radius: 0.25rem;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>