frontend 2026-06-10 bontva a 2 felület
This commit is contained in:
Roo
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="relative min-h-screen text-white">
|
||||
<!-- Garage Background Image (no dark overlay — bright, light garage) -->
|
||||
<!-- Garage Background Image -->
|
||||
<div class="fixed inset-0 z-0">
|
||||
<div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
|
||||
|
||||
@@ -21,117 +21,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Spatial UI Layer: Hotspots (always visible, even in Zen mode) ── -->
|
||||
<div class="fixed inset-0 z-[5] pointer-events-none">
|
||||
<div class="relative w-full h-full">
|
||||
<!-- Hotspot 1: Szervizkönyv/Naptár (bal fal) -->
|
||||
<div class="absolute top-[30%] left-[20%] pointer-events-auto group">
|
||||
<!-- Pulzáló hotspot kör -->
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<!-- Glassmorphism Bento Box (hover opens) -->
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Szerviznaptár</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Közelgő események</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Olajcsere</span>
|
||||
<span class="text-[#00E5A0]">2 hét</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Műszaki vizsga</span>
|
||||
<span class="text-[#00E5A0]">3 hónap</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Gumi szezonális</span>
|
||||
<span class="text-yellow-400">1 hónap</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot 2: Szerszámok/Beállítások (jobb fal) -->
|
||||
<div class="absolute top-[30%] right-[20%] pointer-events-auto group">
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Felszerelés</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Alkatrészek és Skinek</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Alkatrész katalógus</span>
|
||||
<span class="text-[#418890]">42 tétel</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Skin csomagok</span>
|
||||
<span class="text-[#418890]">6 elérhető</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Beállítások</span>
|
||||
<span class="text-white/30">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot 3: Diagnosztika (monitor) -->
|
||||
<div class="absolute top-[60%] right-[30%] pointer-events-auto group">
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#70BC84]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Élő Diagnosztika</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Rendszerállapot</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Motor állapot</span>
|
||||
<span class="text-[#70BC84]">● Optimális</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Akkumulátor</span>
|
||||
<span class="text-[#70BC84]">● 87%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Hibakódok</span>
|
||||
<span class="text-white/30">0 találat</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Zen Mode FAB (always visible, above everything) ── -->
|
||||
<!-- ── Zen Mode FAB ── -->
|
||||
<button
|
||||
@click="isUiVisible = !isUiVisible"
|
||||
class="fixed bottom-8 right-8 z-50 btn-premium rounded-full p-4 shadow-2xl shadow-black/40"
|
||||
:title="isUiVisible ? 'UI elrejtése (Zen mód)' : 'UI megjelenítése'"
|
||||
:title="isUiVisible ? t('zen.hide') : t('zen.show')"
|
||||
>
|
||||
<!-- Eye icon when visible, eye-off when hidden -->
|
||||
<svg
|
||||
v-if="isUiVisible"
|
||||
class="w-6 h-6"
|
||||
@@ -153,114 +48,304 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- ── Top Navbar (always visible, even in Zen mode) ──────────────── -->
|
||||
<DashboardHeader
|
||||
:first-name="authStore.user?.first_name || 'Vendég'"
|
||||
subtitle="Irányítópultod és járműveid áttekintése"
|
||||
/>
|
||||
|
||||
<!-- ── Content (above the overlay) with fade transition ── -->
|
||||
<!-- ── Content with fade transition ── -->
|
||||
<Transition name="fade">
|
||||
<div v-if="isUiVisible" class="relative z-10">
|
||||
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<!-- ── Loading State ──────────────────────────────────────────── -->
|
||||
<div
|
||||
v-if="vehicleStore.isLoading"
|
||||
class="flex items-center justify-center py-20"
|
||||
>
|
||||
<!-- ── Bottom-aligned 5-card container ── -->
|
||||
<div class="flex flex-col justify-end min-h-[85vh] pb-8">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
|
||||
<!-- ── Loading State ── -->
|
||||
<div
|
||||
class="h-10 w-10 animate-spin rounded-full border-4 border-white/10 border-t-[#70BC84]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ── Garage Grid ────────────────────────────────────────────── -->
|
||||
<div
|
||||
v-if="!vehicleStore.isLoading"
|
||||
class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<div
|
||||
v-for="vehicle in vehicleStore.vehicles"
|
||||
:key="vehicle.id"
|
||||
class="group relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.05] p-6 backdrop-blur-xl shadow-xl shadow-black/20 transition-all duration-300 hover:border-[#70BC84]/30 hover:bg-white/[0.08] hover:shadow-2xl hover:shadow-black/30"
|
||||
v-if="vehicleStore.isLoading"
|
||||
class="flex items-center justify-center py-20"
|
||||
>
|
||||
<!-- ── License Plate (EU-style) ──────────────────────────── -->
|
||||
<div class="h-10 w-10 animate-spin rounded-full border-4 border-white/10 border-t-[#70BC84]" />
|
||||
</div>
|
||||
|
||||
<!-- ── 5-Card Grid ── -->
|
||||
<div
|
||||
v-if="!vehicleStore.isLoading"
|
||||
class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
|
||||
style="perspective: 1200px;"
|
||||
>
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
Card 1: 🚗 My Garage (Járműveim)
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
v-if="vehicle.license_plate"
|
||||
class="mb-4 inline-flex items-center overflow-hidden rounded-md border border-gray-600 shadow-sm"
|
||||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||||
@click="openCard('vehicles')"
|
||||
>
|
||||
<!-- Blue EU band -->
|
||||
<div class="flex h-9 w-9 items-center justify-center bg-[#003399] text-[10px] font-bold leading-tight text-white">
|
||||
<span class="block text-center leading-tight">SF</span>
|
||||
<!-- Top header bar -->
|
||||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||||
<span class="text-white font-bold text-sm tracking-wide">🚗 {{ t('dashboard.myVehicles') }}</span>
|
||||
<span class="ml-auto text-xs text-white/60">{{ vehicleStore.vehicles.length }} {{ t('dashboard.vehicles') }}</span>
|
||||
</div>
|
||||
<!-- White plate area -->
|
||||
<div class="flex h-9 items-center bg-white px-3">
|
||||
<span class="font-mono text-sm font-bold tracking-widest text-gray-900">
|
||||
{{ vehicle.license_plate }}
|
||||
<!-- Content -->
|
||||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||||
<div class="flex-1 overflow-y-auto space-y-2">
|
||||
<div
|
||||
v-for="vehicle in vehicleStore.vehicles.slice(0, 4)"
|
||||
:key="vehicle.id"
|
||||
class="rounded-xl border border-slate-200 bg-slate-50 p-3 transition-colors hover:bg-slate-100 cursor-pointer"
|
||||
>
|
||||
<!-- License Plate -->
|
||||
<div
|
||||
v-if="vehicle.license_plate"
|
||||
class="mb-1 inline-flex items-center overflow-hidden rounded-md border border-gray-400 shadow-sm"
|
||||
>
|
||||
<div class="flex h-6 w-6 items-center justify-center bg-[#003399] text-[7px] font-bold leading-tight text-white">
|
||||
<span class="block text-center leading-tight">SF</span>
|
||||
</div>
|
||||
<div class="flex h-6 items-center bg-white px-2">
|
||||
<span class="font-mono text-xs font-bold tracking-widest text-gray-900">
|
||||
{{ vehicle.license_plate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Brand + Model -->
|
||||
<h3 class="text-sm font-bold text-slate-800">
|
||||
{{ vehicle.brand || t('dashboard.statusUnknown') }}
|
||||
<span v-if="vehicle.model" class="font-normal text-slate-500"> {{ vehicle.model }}</span>
|
||||
</h3>
|
||||
<!-- Mileage -->
|
||||
<p class="mt-0.5 text-xs text-slate-400">
|
||||
{{ vehicle.current_mileage?.toLocaleString() || 0 }} {{ t('dashboard.mileage') }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-if="vehicleStore.vehicles.length === 0"
|
||||
class="flex flex-col items-center justify-center py-6 text-slate-400"
|
||||
>
|
||||
<svg class="w-10 h-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<p class="text-sm">{{ t('dashboard.noVehicles') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom CTA button -->
|
||||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||||
+ {{ t('dashboard.addVehicle') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
Card 2: 💰 Costs & TCO (Költségek & Analitika)
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||||
@click="openCard('financials')"
|
||||
>
|
||||
<!-- Top header bar -->
|
||||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||||
<span class="text-white font-bold text-sm tracking-wide">💰 {{ t('dashboard.fuelCost') }} & TCO</span>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||||
<div class="flex-1 space-y-3">
|
||||
<!-- Monthly cost summary -->
|
||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
|
||||
<p class="text-xs text-slate-500 uppercase tracking-wider font-semibold">{{ t('dashboard.monthlyScore') }}</p>
|
||||
<p class="text-2xl font-extrabold text-slate-800 mt-1">₿ 2,450</p>
|
||||
</div>
|
||||
<!-- Stat rows -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm">
|
||||
<span class="text-slate-500">{{ t('dashboard.totalKm') }}</span>
|
||||
<span class="font-semibold text-slate-800">12,430 km</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm">
|
||||
<span class="text-slate-500">{{ t('dashboard.fuelCost') }}</span>
|
||||
<span class="font-semibold text-slate-800">₿ 0.42</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm">
|
||||
<span class="text-slate-500">{{ t('dashboard.serviceCost') }}</span>
|
||||
<span class="font-semibold text-slate-800">₿ 1.28</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm">
|
||||
<span class="text-slate-500">{{ t('dashboard.co2Savings') }}</span>
|
||||
<span class="font-semibold text-emerald-600">-340 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom CTA button -->
|
||||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||||
{{ t('menu.finance') }} →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
Card 3: 🔧 Service Finder (Szerviz kereső)
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||||
@click="openCard('costs')"
|
||||
>
|
||||
<!-- Top header bar -->
|
||||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||||
<span class="text-white font-bold text-sm tracking-wide">🔧 Service Finder</span>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||||
<div class="flex-1 space-y-3">
|
||||
<!-- Active notifications / service alerts -->
|
||||
<div
|
||||
v-for="(notif, idx) in notifications"
|
||||
:key="idx"
|
||||
class="flex items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm"
|
||||
>
|
||||
<span class="mt-0.5 text-base">{{ notif.icon }}</span>
|
||||
<div>
|
||||
<p class="text-slate-800 font-medium">{{ notif.title }}</p>
|
||||
<p class="text-slate-400 text-xs mt-0.5">{{ notif.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-if="notifications.length === 0"
|
||||
class="flex flex-col items-center justify-center py-6 text-slate-400"
|
||||
>
|
||||
<svg class="w-10 h-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p class="text-sm">{{ t('dashboard.noNotifications') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom CTA button -->
|
||||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||||
{{ t('menu.features') }} 🔍
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
Card 4: 🏆 Gamification (Játékosítás)
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||||
@click="openCard('gamification')"
|
||||
>
|
||||
<!-- Top header bar -->
|
||||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||||
<span class="text-white font-bold text-sm tracking-wide">🏆 {{ t('dashboard.statsAndPoints') }}</span>
|
||||
<span class="ml-auto inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
|
||||
{{ t('dashboard.live') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Brand + Model ─────────────────────────────────────── -->
|
||||
<h3 class="text-xl font-bold text-white">
|
||||
{{ vehicle.brand || 'Ismeretlen' }}
|
||||
<span v-if="vehicle.model" class="font-normal text-white/70">{{ vehicle.model }}</span>
|
||||
</h3>
|
||||
|
||||
<!-- Year of manufacture -->
|
||||
<p v-if="vehicle.year_of_manufacture" class="mt-0.5 text-sm text-white/40">
|
||||
{{ vehicle.year_of_manufacture }}
|
||||
</p>
|
||||
|
||||
<!-- ── Divider ────────────────────────────────────────────── -->
|
||||
<div class="my-4 border-t border-white/[0.06]" />
|
||||
|
||||
<!-- ── Condition Score Bar ────────────────────────────────── -->
|
||||
<div class="mb-3">
|
||||
<div class="mb-1 flex items-center justify-between text-xs">
|
||||
<span class="text-white/50">Állapot</span>
|
||||
<span class="font-semibold text-[#70BC84]">{{ vehicle.condition_score }}%</span>
|
||||
<!-- Content -->
|
||||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||||
<div class="flex-1 space-y-3">
|
||||
<!-- Score card -->
|
||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3 text-center">
|
||||
<p class="text-3xl font-extrabold text-emerald-600">2,450</p>
|
||||
<p class="text-xs text-slate-500 mt-1">{{ t('dashboard.monthlyScore') }}</p>
|
||||
</div>
|
||||
<!-- Achievement badges -->
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||||
{{ t('dashboard.achievements') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="badge in badges"
|
||||
:key="badge.label"
|
||||
class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-600"
|
||||
>
|
||||
{{ badge.icon }} {{ badge.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-2 overflow-hidden rounded-full bg-white/10">
|
||||
<div
|
||||
class="h-full rounded-full bg-gradient-to-r from-[#70BC84] to-[#008CA4] transition-all duration-500"
|
||||
:style="{ width: Math.min(vehicle.condition_score, 100) + '%' }"
|
||||
/>
|
||||
<!-- Bottom CTA button -->
|
||||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||||
{{ t('dashboard.refresh') }} 🏆
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
Card 5: 🛡️ My Profile & Trust (Profil & Trust Score)
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||||
@click="openCard('stats')"
|
||||
>
|
||||
<!-- Top header bar -->
|
||||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||||
<span class="text-white font-bold text-sm tracking-wide">🛡️ {{ t('header.profile') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Mileage ────────────────────────────────────────────── -->
|
||||
<div class="flex items-center gap-2 text-sm text-white/60">
|
||||
<svg class="h-4 w-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ vehicle.current_mileage?.toLocaleString() || 0 }} km</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Status Badge ───────────────────────────────────────── -->
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="vehicle.status === 'active'
|
||||
? 'bg-[#70BC84]/15 text-[#70BC84]'
|
||||
: 'bg-white/5 text-white/40'"
|
||||
>
|
||||
<span
|
||||
class="mr-1.5 inline-block h-1.5 w-1.5 rounded-full"
|
||||
:class="vehicle.status === 'active' ? 'bg-[#70BC84]' : 'bg-white/20'"
|
||||
/>
|
||||
{{ vehicle.status === 'active' ? 'Aktív' : vehicle.status }}
|
||||
</span>
|
||||
<!-- Content -->
|
||||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||||
<div class="flex-1 space-y-3">
|
||||
<!-- User info -->
|
||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
|
||||
<p class="text-sm font-bold text-slate-800">{{ authStore.userName || t('dashboard.guest') }}</p>
|
||||
<p class="text-xs text-slate-400 mt-0.5">{{ authStore.user?.email }}</p>
|
||||
</div>
|
||||
<!-- Trust Score -->
|
||||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Trust Score</span>
|
||||
<span class="text-sm font-bold text-emerald-600">A+</span>
|
||||
</div>
|
||||
<div class="h-2 overflow-hidden rounded-full bg-slate-200">
|
||||
<div class="h-full rounded-full bg-gradient-to-r from-emerald-400 to-emerald-600 transition-all duration-500" style="width: 92%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick stats -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
|
||||
<p class="text-lg font-bold text-slate-800">{{ authStore.myOrganizations.length }}</p>
|
||||
<p class="text-xs text-slate-400">{{ t('header.myCompanies') }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
|
||||
<p class="text-lg font-bold text-slate-800">{{ vehicleStore.vehicles.length }}</p>
|
||||
<p class="text-xs text-slate-400">{{ t('dashboard.totalVehicles') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom CTA button -->
|
||||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||||
{{ t('header.profile') }} →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end relative z-10 content wrapper -->
|
||||
</Transition>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
Flip Modal – 3D átforduló részletes nézet
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
v-if="activeCard"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/85 backdrop-blur-md"
|
||||
@click.self="activeCard = null"
|
||||
>
|
||||
<div class="bg-white w-11/12 max-w-6xl h-[85vh] rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-flip-in relative">
|
||||
<!-- Close button (X) -->
|
||||
<button
|
||||
class="absolute top-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-slate-200/80 text-slate-600 hover:bg-slate-300 hover:text-slate-800 transition-colors text-xl font-bold"
|
||||
@click="activeCard = null"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<!-- Dynamic content area -->
|
||||
<div class="flex-1 p-8 overflow-y-auto text-slate-800">
|
||||
<h2 class="text-2xl font-bold mb-6">
|
||||
{{ t('dashboard.detailedView') }}: <span class="text-slate-500">{{ activeCard }}</span>
|
||||
</h2>
|
||||
<p class="text-slate-500">
|
||||
{{ t('dashboard.modalPlaceholder') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end min-h-screen -->
|
||||
</template>
|
||||
|
||||
@@ -269,17 +354,55 @@ import { ref, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useVehicleStore } from '../stores/vehicle'
|
||||
import DashboardHeader from '../components/DashboardHeader.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const vehicleStore = useVehicleStore()
|
||||
|
||||
// ── Zen Mode: UI láthatóság állapota ─────────────────────────────────
|
||||
// ── Zen Mode ──
|
||||
const isUiVisible = ref(true)
|
||||
|
||||
// ── Flip Modal State ──
|
||||
const activeCard = ref<string | null>(null)
|
||||
const openCard = (cardId: string) => {
|
||||
activeCard.value = cardId
|
||||
}
|
||||
|
||||
// ── Placeholder notifications ──
|
||||
const notifications = ref([
|
||||
{ icon: '🔧', title: 'Service due for BMW X5', time: '2 hours ago' },
|
||||
{ icon: '⛽', title: 'Fuel cost updated — +₿ 0.08', time: '5 hours ago' },
|
||||
{ icon: '🏆', title: 'You earned "Eco Driver" badge!', time: '1 day ago' },
|
||||
{ icon: '📊', title: 'Monthly report is ready', time: '2 days ago' },
|
||||
])
|
||||
|
||||
// ── Placeholder badges ──
|
||||
const badges = ref([
|
||||
{ icon: '🌱', label: 'Eco Driver' },
|
||||
{ icon: '📏', label: '10k km Club' },
|
||||
{ icon: '🔧', label: 'Service Pro' },
|
||||
{ icon: '⭐', label: 'Top Rater' },
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
vehicleStore.fetchVehicles()
|
||||
authStore.fetchMyOrganizations()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes flipIn {
|
||||
from {
|
||||
transform: perspective(1200px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: perspective(1200px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animate-flip-in {
|
||||
animation: flipIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user