admin/FamilyHUB
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Added vue frontend project, fixed swagger path

Browse Source
This commit is contained in:
AlexBelyan
2026-04-05 21:51:03 +03:00
parent 9d845c8899
commit 4902889401
35 changed files with 3810 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SwipeCards.vue
+179
View File
@@ -0,0 +1,179 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { Clock, Heart, MapPin, Sparkles, Star, X } from 'lucide-vue-next';
interface SwipeItem {
id: number;
type: 'food' | 'movie';
title: string;
subtitle: string;
rating: number;
location?: string;
duration?: string;
image: string;
}
const cards: SwipeItem[] = [
{
id: 1,
type: 'food',
title: 'Italian Restaurant',
subtitle: 'Authentic pasta & pizza',
rating: 4.8,
location: '2.3 km away',
image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80',
},
{
id: 2,
type: 'movie',
title: 'Dune: Part Two',
subtitle: 'Sci-Fi Epic',
rating: 4.9,
duration: '2h 46m',
image: 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=800&q=80',
},
{
id: 3,
type: 'food',
title: 'Sushi House',
subtitle: 'Fresh Japanese cuisine',
rating: 4.7,
location: '1.8 km away',
image: 'https://images.unsplash.com/photo-1579584425555-c3ce17fd4351?w=800&q=80',
},
];
const currentIndex = ref(0);
const swipeDirection = ref<'left' | 'right' | null>(null);
const pointerStartX = ref<number | null>(null);
const currentCard = computed(() => cards[currentIndex.value]);
function nextCard() {
currentIndex.value = (currentIndex.value + 1) % cards.length;
}
function handleSwipe(direction: 'left' | 'right') {
swipeDirection.value = direction;
window.setTimeout(() => {
nextCard();
swipeDirection.value = null;
}, 250);
}
function onPointerDown(event: PointerEvent) {
pointerStartX.value = event.clientX;
}
function onPointerUp(event: PointerEvent) {
if (pointerStartX.value === null) {
return;
}
const deltaX = event.clientX - pointerStartX.value;
pointerStartX.value = null;
if (deltaX > 60) {
handleSwipe('right');
} else if (deltaX < -60) {
handleSwipe('left');
}
}
</script>
<template>
<div class="rounded-[18px] border border-white/[0.06] bg-[#16161F] p-5 shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
<div class="mb-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="flex h-9 w-9 items-center justify-center rounded-[12px] border border-purple-500/20 bg-gradient-to-br from-purple-500/20 to-blue-500/20">
<Sparkles class="h-[18px] w-[18px] text-purple-400" :stroke-width="2" />
</div>
<div>
<h3 class="text-[15px] font-semibold text-white">Vote Now</h3>
<p class="text-[11px] text-zinc-500">Swipe to decide</p>
</div>
</div>
<div class="flex items-center gap-1">
<div
v-for="(_, i) in cards"
:key="i"
:class="[
'h-1.5 rounded-full transition-all',
i === currentIndex ? 'w-6 bg-gradient-to-r from-purple-500 to-blue-500' : 'w-1.5 bg-zinc-700',
]"
/>
</div>
</div>
<div class="relative mb-4 h-[360px]">
<div
class="absolute inset-0 cursor-grab overflow-hidden rounded-[18px] shadow-xl active:cursor-grabbing"
:class="swipeDirection ? 'transition-all duration-200 ease-out opacity-0 scale-95' : ''"
@pointerdown="onPointerDown"
@pointerup="onPointerUp"
>
<img :src="currentCard.image" :alt="currentCard.title" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
<div class="absolute top-4 right-4 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/60 px-3 py-1.5 backdrop-blur-md">
<Star class="h-3.5 w-3.5 fill-amber-400 text-amber-400" :stroke-width="2" />
<span class="text-[13px] font-bold text-white">{{ currentCard.rating }}</span>
</div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<div class="mb-3">
<span class="mb-3 inline-flex items-center gap-1.5 rounded-lg border border-purple-500/20 bg-purple-500/20 px-2.5 py-1.5 text-[11px] font-semibold text-purple-300 backdrop-blur-sm">
{{ currentCard.type === 'food' ? 'Restaurant' : 'Movie' }}
</span>
<h4 class="mb-1 text-[24px] font-bold leading-tight text-white">{{ currentCard.title }}</h4>
<p class="mb-3 text-[14px] text-zinc-300">{{ currentCard.subtitle }}</p>
</div>
<div class="flex items-center gap-4 text-[12px] text-zinc-400">
<div v-if="currentCard.location" class="flex items-center gap-1.5">
<MapPin class="h-3.5 w-3.5" :stroke-width="2" />
<span class="font-medium">{{ currentCard.location }}</span>
</div>
<div v-if="currentCard.duration" class="flex items-center gap-1.5">
<Clock class="h-3.5 w-3.5" :stroke-width="2" />
<span class="font-medium">{{ currentCard.duration }}</span>
</div>
</div>
</div>
</div>
<div v-if="swipeDirection" class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
<div
:class="[
'flex h-24 w-24 items-center justify-center rounded-full border-[3px] backdrop-blur-sm shadow-2xl',
swipeDirection === 'left' ? 'border-rose-500 bg-rose-500/20' : 'border-emerald-500 bg-emerald-500/20',
]"
>
<X v-if="swipeDirection === 'left'" class="h-12 w-12 text-rose-500" :stroke-width="3" />
<Heart
v-else
class="h-12 w-12 fill-emerald-500 text-emerald-500"
:stroke-width="3"
/>
</div>
</div>
</div>
<div class="flex items-center justify-center gap-4">
<button
type="button"
@click="handleSwipe('left')"
class="group flex h-14 w-14 items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.06] transition-all hover:border-rose-500/30 hover:bg-rose-500/10 active:scale-95"
>
<X class="h-6 w-6 text-zinc-400 transition-colors group-hover:text-rose-400" :stroke-width="2.5" />
</button>
<button
type="button"
@click="handleSwipe('right')"
class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-blue-500 shadow-[0_8px_24px_rgba(139,92,246,0.35)] transition-all hover:from-purple-600 hover:to-blue-600 hover:shadow-[0_12px_32px_rgba(139,92,246,0.5)] active:scale-95"
>
<Heart class="h-7 w-7 text-white" :stroke-width="2.5" />
</button>
</div>
</div>
</template>