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

dedicated homepage, updated qr page, added counter, clickable logo

Browse Source
This commit is contained in:
Will Freeman
2024-12-05 15:01:21 -07:00
parent 33dfd4a321
commit 1729a61dc5
9 changed files with 301 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/views/Landing.vue
+185
View File
@@ -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>
webapp/src/views/HomeView.vue → webapp/src/views/Map.vue
+1 -6
View File
@@ -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;
webapp/src/views/QRLandingView.vue
+17 -7
View File
@@ -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>