Sponsors and tags (#22)

* brand -> manufacturer

* clean up

* add donation page

* display manufacturer first, brand for backward compat

webapp/src/App.vue

@@ -25,7 +25,7 @@ const metaItems = [
   { title: 'Discord', icon: 'mdi-chat-processing-outline', 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', href: 'https://github.com/sponsors/frillweeman'},
+  { title: 'Donate', icon: 'mdi-heart', to: '/donate'},
 ];
 const drawer = ref(false)
 

webapp/src/components/DFMapPopup.vue

@@ -15,7 +15,10 @@
       </v-list-item>
       <v-list-item>
         <v-icon start>mdi-domain</v-icon> <b>
-          <span v-if="alpr.tags.brand">
+          <span v-if="alpr.tags.manufacturer">
+            {{ alpr.tags.manufacturer }}
+          </span>
+          <span v-else-if="alpr.tags.brand">
             {{ alpr.tags.brand }}
           </span>
           <span v-else>

webapp/src/components/OSMTagSelector.vue

@@ -1,15 +1,6 @@
 <template>
   <v-row style="align-items: center; margin-top: 1.25rem;">
     <v-col cols="12" sm="6">
-      <!-- <v-select
-        v-model="selectedBrand"
-        return-object
-        :items="alprBrands"
-        item-title="name"
-        item-value="wikidata"
-        label="Select a company"
-        outlined
-      /> -->
       <h2 class="text-center mb-4">Choose Brand</h2>
       <v-row>
         <v-col v-for="brand in alprBrands" :key="brand.wikidata" cols="6">
@@ -26,10 +17,6 @@
       </v-row>
     </v-col>
 
-    <!-- <v-col cols="12" sm="4">
-      <v-img rounded cover aspect-ratio="1" width="220" :src="selectedBrand.exampleImage" />
-    </v-col> -->
-
     <v-col cols="12" sm="6">
       <h3 class="text-center">{{ selectedBrand.nickname }}</h3>
       <DFCode>
@@ -39,8 +26,8 @@
         camera:type=fixed<br>
         surveillance=public<br>
         surveillance:zone=traffic<br>
-        brand=<span class="highlight">{{ selectedBrand.name }}</span><br>
-        brand:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
+        manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
+        manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
       </DFCode>
 
       <h5 class="text-center mt-4">and if operator is known</h5>

webapp/src/router/index.ts

@@ -67,6 +67,11 @@ const router = createRouter({
       name: 'qr-landing',
       component: () => import('../views/QRLandingView.vue')
     },
+    {
+      path: '/donate',
+      name: 'donate',
+      component: () => import('../views/Donate.vue')
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',

webapp/src/services/apiService.ts

@@ -65,6 +65,11 @@ export const getALPRs = async (boundingBox: BoundingBox) => {
   return response.data;
 }
 
+export const getSponsors = async () => {
+  const response = await apiService.get("/sponsors/github");
+  return response.data;
+}
+
 export const getALPRCounts = async () => {
   const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/alpr-counts.json";
   const response = await apiService.get(s3Url);

webapp/src/views/Donate.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-container class="sponsor-page">
+    <!-- Hero Section -->
+    <v-row justify="center" class="hero-section-sponsor text-center mb-4">
+      <v-col cols="12" md="8">
+        <h1 class="mb-4">Join Us in Protecting Privacy</h1>
+        <p class="mb-4">
+          DeFlock empowers individuals to understand and combat the rise of Automatic License Plate Readers (ALPRs). Your support helps us spread awareness, maintain infrastructure, and advocate for privacy rights.
+        </p>
+        <v-btn href="https://github.com/sponsors/frillweeman" target="_blank" color="rgb(18, 151, 195)" class="mt-4">Donate Now</v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- 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>
+        <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-avatar size="64px" class="mb-3">
+                <v-img :src="sponsor.avatarUrl" :alt="sponsor.name" />
+              </v-avatar>
+              <p>{{ sponsor.name ?? sponsor.login }}</p>
+            </v-card>
+          </v-col>
+        </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>
+      </v-col>
+    </v-row>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, type Ref } from "vue";
+import { getSponsors } from "@/services/apiService";
+
+interface Sponsor {
+  login: string;
+  name: string;
+  avatarUrl: string;
+}
+
+const sponsors: Ref<Sponsor[]> = ref([]);
+
+onMounted(() => {
+  getSponsors()
+    .then((data) => {
+      sponsors.value = data.map((s: any) => s.sponsor);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
+</script>
+
+<style scoped>
+.hero-section-sponsor {
+  background: url('/torches.webp') no-repeat center center;
+  background-size: cover;
+  color: white;
+  padding: 100px 0 !important;
+  position: relative;
+  }
+
+ .hero-section-sponsor::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.5);
+   z-index: 1;
+ }
+
+ .hero-section-sponsor > * {
+   position: relative;
+   z-index: 2;
+}
+</style>