mirror of
https://github.com/FoggedLens/deflock.git
synced 2026-07-16 00:37:21 +02:00
Will Freeman
87 lines
2.9 KiB
Vue
87 lines
2.9 KiB
Vue
<template>
|
|
<DefaultLayout>
|
|
<template #header>
|
|
<Hero
|
|
title="Support DeFlock"
|
|
subtitle="Your contributions help us fight for privacy and raise awareness about ALPR technology."
|
|
image-url="/donate.webp"
|
|
background-position="0 25%"
|
|
button-text="Donate Now"
|
|
button-href="https://github.com/sponsors/frillweeman"
|
|
:opacity="0.25"
|
|
/>
|
|
</template>
|
|
|
|
<v-container fluid>
|
|
<!-- GitHub Sponsors Section -->
|
|
<v-row justify="center" class="sponsors-section text-center">
|
|
<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 target="_blank" href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
|
|
</p>
|
|
|
|
<v-row>
|
|
<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" />
|
|
</v-avatar>
|
|
<p>{{ sponsor.name ?? sponsor.login }}</p>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 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 style="background: rgb(245,245,245)" />
|
|
<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.</p>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</DefaultLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, type Ref } from "vue";
|
|
import { getSponsors } from "@/services/apiService";
|
|
import DefaultLayout from "@/layouts/DefaultLayout.vue";
|
|
import Hero from "@/components/layout/Hero.vue";
|
|
|
|
interface Sponsor {
|
|
login: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
url: string;
|
|
}
|
|
|
|
const sponsors: Ref<Sponsor[]> = ref([]);
|
|
const isLoadingSponsors = ref(true);
|
|
|
|
onMounted(() => {
|
|
getSponsors()
|
|
.then((data) => {
|
|
sponsors.value = data.map((s: any) => s.sponsor);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
})
|
|
.finally(() => {
|
|
isLoadingSponsors.value = false;
|
|
});
|
|
});
|
|
</script>
|