197 lines
11 KiB
Vue
Executable File
197 lines
11 KiB
Vue
Executable File
<script setup>
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/authStore'
|
||
import { useThemeStore } from '@/stores/themeStore'
|
||
import DailyQuizModal from '@/components/DailyQuizModal.vue'
|
||
import QuickActionsFAB from '@/components/actions/QuickActionsFAB.vue'
|
||
import { ref } from 'vue'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const authStore = useAuthStore()
|
||
const themeStore = useThemeStore()
|
||
|
||
const handleLogout = () => {
|
||
authStore.logout()
|
||
}
|
||
|
||
const toggleTheme = () => {
|
||
themeStore.toggleTheme()
|
||
}
|
||
|
||
// Legal modal state
|
||
const showLegalModal = ref(false)
|
||
const legalModalTitle = ref('')
|
||
const legalModalContent = ref('')
|
||
|
||
const openLegalModal = (type) => {
|
||
if (type === 'aszf') {
|
||
legalModalTitle.value = 'Általános Szerződési Feltételek (ÁSZF)'
|
||
legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... A Service Finder szolgáltatás használatával Ön elfogadja az Általános Szerződési Feltételeket, amelyek meghatározzák a szolgáltatás használatának feltételeit, a felelősség korlátozását és a felhasználói jogokat.'
|
||
} else if (type === 'adatkezeles') {
|
||
legalModalTitle.value = 'Adatkezelési Tájékoztató (GDPR)'
|
||
legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... A Service Finder tiszteletben tartja az Ön adatvédelmét. E tájékoztató részletezi, hogyan gyűjtjük, tároljuk és kezeljük személyes adatait az Európai Unió Általános Adatvédelmi Rendelete (GDPR) és a vonatkozó magyar jogszabályok értelmében.'
|
||
} else if (type === 'cookies') {
|
||
legalModalTitle.value = 'Sütik (Cookies) Használata'
|
||
legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... Weboldalunk sütiket (cookies) használ a felhasználói élmény javítása, a funkciók működésének biztosítása és a forgalom elemzése érdekében. A sütik használatával kapcsolatos részletes információkat itt találja.'
|
||
}
|
||
showLegalModal.value = true
|
||
}
|
||
|
||
const closeLegalModal = () => {
|
||
showLegalModal.value = false
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div :class="['min-h-screen flex flex-col font-sans transition-all duration-500', themeStore.themeClasses.background, themeStore.themeClasses.text]">
|
||
<!-- Premium Navigation -->
|
||
<nav class="bg-gradient-to-r from-slate-800 to-slate-900 text-white p-4 shadow-xl flex justify-between items-center z-50 border-b border-slate-700/50 backdrop-blur-md">
|
||
<div class="flex items-center gap-3 cursor-pointer group" @click="router.push('/')">
|
||
<div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 group-hover:from-blue-600 group-hover:to-cyan-600 transition-all duration-200">
|
||
<span class="text-2xl">🚗</span>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<span class="font-bold text-xl tracking-tight">Service Finder</span>
|
||
<span class="text-xs text-slate-300">Premium Vehicle Management</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-x-6 hidden md:flex items-center">
|
||
<template v-if="authStore.isLoggedIn">
|
||
<router-link to="/" class="nav-link text-slate-200 hover:text-white font-medium transition-colors duration-200 hover:scale-105">Dashboard</router-link>
|
||
<router-link to="/expenses" class="nav-link text-slate-200 hover:text-white font-medium transition-colors duration-200 hover:scale-105">Költségek</router-link>
|
||
<router-link v-if="authStore.isAdmin" to="/admin" class="text-amber-300 font-bold hover:text-amber-200 transition-colors duration-200 hover:scale-105">⚙️ Admin</router-link>
|
||
|
||
<!-- User Role Badge -->
|
||
<div v-if="authStore.isTester" class="px-3 py-1.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-xs font-bold text-white border border-purple-500/50 shadow-md animate-pulse">
|
||
🧪 {{ authStore.displayName }}
|
||
</div>
|
||
<div v-else-if="authStore.isAdmin" class="px-3 py-1.5 bg-gradient-to-r from-amber-600 to-orange-600 rounded-lg text-xs font-bold text-white border border-amber-500/50 shadow-md">
|
||
⚡ {{ authStore.displayName }}
|
||
</div>
|
||
|
||
<button @click="toggleTheme" :class="['px-4 py-2.5 rounded-xl text-sm transition-all duration-200 active:scale-95 border shadow-md hover:shadow-lg', themeStore.isLuxury ? 'bg-gradient-to-r from-amber-700 to-amber-800 border-amber-600/50 text-white hover:from-amber-800 hover:to-amber-900' : 'bg-gradient-to-r from-orange-700 to-orange-800 border-orange-600/50 text-white hover:from-orange-800 hover:to-orange-900']">
|
||
{{ themeStore.isLuxury ? '🏛️ Luxury' : '🔧 Workshop' }}
|
||
</button>
|
||
<button @click="handleLogout" class="bg-gradient-to-r from-slate-700 to-slate-800 px-5 py-2.5 rounded-xl text-sm hover:from-slate-800 hover:to-slate-900 transition-all duration-200 active:scale-95 border border-slate-600/50 shadow-md hover:shadow-lg">
|
||
Kijelentkezés
|
||
</button>
|
||
</template>
|
||
<template v-else>
|
||
<router-link to="/login" class="text-slate-200 hover:text-white font-medium transition-colors duration-200">Bejelentkezés</router-link>
|
||
<router-link to="/register" class="bg-gradient-to-r from-blue-600 to-cyan-600 px-5 py-2.5 rounded-xl text-sm hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg">
|
||
Regisztráció
|
||
</router-link>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Mobile menu button -->
|
||
<button class="md:hidden p-2 rounded-lg bg-slate-700/50 hover:bg-slate-700 transition-colors">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Main Content -->
|
||
<main class="flex-1 p-4 md:p-6 max-w-7xl mx-auto w-full">
|
||
<router-view />
|
||
</main>
|
||
|
||
<!-- Daily Quiz Modal -->
|
||
<DailyQuizModal v-if="authStore.isLoggedIn && route.path !== '/login' && route.path !== '/register' && route.path !== '/debug'" />
|
||
|
||
<!-- Quick Actions FAB -->
|
||
<QuickActionsFAB v-if="authStore.isLoggedIn && route.path !== '/login' && route.path !== '/register' && route.path !== '/debug'" />
|
||
|
||
<!-- Legal Modal -->
|
||
<div v-if="showLegalModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm transition-all duration-300">
|
||
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl shadow-2xl border border-slate-700/50 w-full max-w-2xl mx-4 overflow-hidden transform transition-all duration-300 scale-100">
|
||
<div class="p-6 border-b border-slate-700/50">
|
||
<div class="flex justify-between items-center">
|
||
<h3 class="text-xl font-bold text-white">{{ legalModalTitle }}</h3>
|
||
<button @click="closeLegalModal" class="text-slate-400 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-slate-700/50">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 max-h-[60vh] overflow-y-auto">
|
||
<div class="prose prose-invert max-w-none">
|
||
<p class="text-slate-300 mb-4">{{ legalModalContent }}</p>
|
||
<div class="bg-slate-800/50 rounded-xl p-4 border border-slate-700/50 mt-6">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
|
||
<span class="text-white font-bold">ℹ️</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-slate-400">Ez egy helykitöltő szöveg. A végleges jogi dokumentáció a termék bevezetésével együtt kerül feltöltésre.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 border-t border-slate-700/50 bg-slate-900/50">
|
||
<div class="flex justify-end">
|
||
<button @click="closeLegalModal" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-medium rounded-xl transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg">
|
||
Bezárás
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Premium Footer -->
|
||
<footer class="mt-auto bg-gradient-to-r from-slate-800 to-slate-900 text-slate-300 p-6 border-t border-slate-700/50">
|
||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
|
||
<div class="mb-4 md:mb-0">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<span class="text-2xl">🚗</span>
|
||
<span class="font-bold text-white">Service Finder</span>
|
||
</div>
|
||
<p class="text-sm text-slate-400">Premium vehicle management for individuals and businesses</p>
|
||
</div>
|
||
<div class="flex gap-6">
|
||
<button @click="openLegalModal('aszf')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">ÁSZF</button>
|
||
<button @click="openLegalModal('adatkezeles')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">Adatkezelési Tájékoztató</button>
|
||
<button @click="openLegalModal('cookies')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">Sütik</button>
|
||
<a href="#" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm">Kapcsolat</a>
|
||
</div>
|
||
</div>
|
||
<div class="max-w-7xl mx-auto mt-6 pt-6 border-t border-slate-700/50 text-center text-xs text-slate-500">
|
||
© 2026 Service Finder. Minden jog fenntartva. Gépjármű-rajongók számára készült precízióval.
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.nav-link {
|
||
position: relative;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: linear-gradient(to right, #3b82f6, #06b6d4);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Smooth transitions */
|
||
* {
|
||
transition-property: color, background-color, border-color, transform, box-shadow;
|
||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
transition-duration: 150ms;
|
||
}
|
||
</style> |