CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-07-16 00:37:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

a lot of refactoring and cleaning up

Browse Source
This commit is contained in:
Will Freeman
2024-12-27 20:22:04 -07:00
parent 75e12f43a4
commit 1ba3f9c3bb
15 changed files with 216 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/views/Donate.vue
+1 -1
View File
@@ -16,7 +16,7 @@
<v-col cols="12" md="10">
<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!
Want to see your name here? <a target="_blank" href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
</p>
<v-row>
webapp/src/views/Landing.vue
+17 -18
View File
@@ -3,25 +3,24 @@
<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>
<h1 class="display-1 px-8">You're Being Tracked</h1>
<ALPRCounter class="my-6" />
<!-- Featured On Section -->
<v-container class="featured-on-section mt-10">
<h4 class="mb-8" style="opacity: 0.8">Featured On</h4>
<v-container class="featured-on-section my-8">
<h4 class="mb-4" 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-card flat v-for="site in featuredOn" class="mx-4" :width="site.wide ? 200 : 100" height="50" 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-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
Explore the Map
<v-icon end>mdi-map</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
@@ -30,14 +29,14 @@
<v-container class="py-10 text-center info-section">
<h2 class="mb-4">What is an ALPR</h2>
<p class="text-left">
<p class="text-left px-6">
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">
<p class="px-6">
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>
@@ -49,7 +48,7 @@
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.
ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history.
</v-card-text>
</v-card>
</v-col>
@@ -100,7 +99,7 @@
background: url('/flock-camera.jpeg') no-repeat center center;
background-size: cover;
color: white;
padding: 100px 0 50px 0 !important;
padding: 60px 0 50px 0 !important;
position: relative;
}
@@ -111,7 +110,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.55);
z-index: 1;
}
@@ -121,7 +120,7 @@
}
.map-section {
background: url('/deflock-screenshot.webp') no-repeat right center;
background: url('/deflock-screenshot.webp') no-repeat center center;
background-size: cover;
color: white;
padding: 100px 0;
webapp/src/views/Map.vue
+3 -1
View File
@@ -112,7 +112,9 @@ function goToUserLocation() {
setCurrentLocation()
.then((cl) => {
center.value = cl;
zoom.value = DEFAULT_ZOOM;
setTimeout(() => {
zoom.value = DEFAULT_ZOOM;
}, 10);
})
.catch(error => {
console.debug('Error getting user location.', error);
webapp/src/views/QRLandingView.vue
-162
View File
@@ -1,162 +0,0 @@
<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 an ALPR!</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 the Nearest ALPR
<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>
</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: #f5f5f5;
}
.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;
}
.bigger {
font-size: 1.1rem;
}
</style>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import ALPRCounter from '@/components/ALPRCounter.vue';
import { useGlobalStore } from '@/stores/global';
const router = useRouter();
const { setCurrentLocation } = useGlobalStore();
interface GoToMapOptions {
withCurrentLocation?: boolean;
}
async function goToMap(options: GoToMapOptions = {}) {
if (options.withCurrentLocation) {
setCurrentLocation()
.then((currentLocation) => {
const [lat, lon] = currentLocation;
router.push({ path: '/map', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
})
.catch(() => {
router.push({ path: '/map' });
});
} else {
router.push({ path: '/map' });
}
}
</script>
webapp/src/views/ReportView.vue
+32 -3
View File
@@ -1,6 +1,6 @@
<template>
<v-container>
<h1 class="text-center">Report an ALPR</h1>
<h1 class="text-center mt-4">Report a New ALPR</h1>
<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:
@@ -9,6 +9,7 @@
<v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
<template v-slot:default="{ step }: { step: any }">
<v-stepper-vertical-item
class="transparent"
:complete="step > 1"
title="Create an OpenStreetMap Account"
value="1"
@@ -20,6 +21,7 @@
</v-stepper-vertical-item>
<v-stepper-vertical-item
class="transparent"
:complete="step > 2"
title="Find the ALPR's Location"
value="2"
@@ -31,6 +33,7 @@
</v-stepper-vertical-item>
<v-stepper-vertical-item
class="transparent"
:complete="step > 3"
title="Add the ALPR to OpenStreetMap"
value="3"
@@ -39,7 +42,7 @@
<p>
Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
</p>
<v-img max-width="450" src="/edit-map.png" class="my-8 mx-auto" />
<v-img max-width="450" src="/edit-map.png" class="my-8" />
<p class="mt-16 mb-8">
To add the ALPR, click the <strong>Point</strong> button in the top left corner of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
</p>
@@ -53,10 +56,11 @@
<p class="mt-8">
After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
</p>
<v-img max-width="450" class="my-8 mx-auto" src="/paste-tags.png" />
<v-img max-width="450" class="my-8" src="/paste-tags.png" />
</v-stepper-vertical-item>
<v-stepper-vertical-item
class="transparent"
:complete="step > 4"
title="Adjust the Direction"
value="4"
@@ -69,6 +73,7 @@
</v-stepper-vertical-item>
<v-stepper-vertical-item
class="transparent"
:complete="step > 5"
title="Submit Your Changes"
value="5"
@@ -90,6 +95,7 @@
</v-stepper-vertical-item>
<v-stepper-vertical-item
class="transparent"
:complete="step > 6"
title="Hang a Sign"
value="6"
@@ -98,9 +104,28 @@
<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.
</p>
<template v-slot:next>
<v-btn
color="primary"
disabled
>
Next
</v-btn>
</template>
</v-stepper-vertical-item>
</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>
<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.
</p>
</v-container>
<Footer />
</template>
@@ -116,4 +141,8 @@ const step = ref(1);
<style scoped>
@import url('@/assets/typography.css');
.transparent {
background-color: transparent !important;
}
</style>