2026.06.04 frontend építés közben

frontend_old/components/LanguageSwitcher.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="language-switcher relative">
+    <button 
+      @click="toggleDropdown"
+      class="flex items-center space-x-2 px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors"
+    >
+      <span class="text-sm font-medium">{{ currentLanguageLabel }}</span>
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+    
+    <div 
+      v-if="dropdownOpen"
+      class="absolute top-full mt-1 right-0 bg-white rounded-lg shadow-lg border border-gray-200 z-50 min-w-[120px]"
+    >
+      <ul class="py-1">
+        <li v-for="lang in languages" :key="lang.code">
+          <button
+            @click="switchLanguage(lang.code)"
+            class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center justify-between"
+            :class="{ 'bg-blue-50 text-blue-700': lang.code === currentLanguage }"
+          >
+            <span>{{ lang.label }}</span>
+            <span v-if="lang.code === currentLanguage" class="text-blue-500">✓</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppModeStore } from '../stores/appModeStore'
+
+const { locale } = useI18n()
+const appModeStore = useAppModeStore()
+
+const dropdownOpen = ref(false)
+
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'hu', label: 'Magyar' },
+  { code: 'de', label: 'Deutsch' },
+  { code: 'fr', label: 'Français' }
+]
+
+const currentLanguage = computed(() => locale.value)
+const currentLanguageLabel = computed(() => {
+  const lang = languages.find(l => l.code === currentLanguage.value)
+  return lang ? lang.label : 'EN'
+})
+
+function toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+async function switchLanguage(langCode: string) {
+  locale.value = langCode
+  await appModeStore.setLanguage(langCode)
+  dropdownOpen.value = false
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+  const target = e.target as HTMLElement
+  if (!target.closest('.language-switcher')) {
+    dropdownOpen.value = false
+  }
+})
+</script>
+
+<style scoped>
+.language-switcher {
+  font-family: 'Inter', sans-serif;
+}
+</style>

frontend_old/components/ModeSwitcher.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mode-switcher">
+    <div class="flex items-center space-x-4">
+      <!-- B2B/B2C Toggle -->
+      <div class="flex items-center space-x-2">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('switchMode') }}</span>
+        <button
+          @click="toggleAppMode"
+          class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+          :class="isCorporate ? 'bg-corporate-blue' : 'bg-consumer-orange'"
+        >
+          <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+            :class="isCorporate ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </button>
+        <span class="text-sm font-medium min-w-[60px] dark:text-gray-300">
+          {{ isCorporate ? $t('corporate') : $t('consumer') }}
+        </span>
+      </div>
+
+      <!-- Admin Switch (only for admins) -->
+      <div v-if="showAdminSwitch" class="flex items-center space-x-2">
+        <div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
+        <button
+          @click="goToAdmin"
+          class="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 text-white hover:opacity-90 transition-opacity"
+        >
+          <span class="text-sm">⚙️</span>
+          <span class="text-sm font-medium">Admin</span>
+        </button>
+        <button
+          v-if="isInAdminMode"
+          @click="exitAdmin"
+          class="px-3 py-1.5 rounded-lg bg-red-900/30 hover:bg-red-900/50 text-red-400 text-sm font-medium transition-colors"
+        >
+          Exit Admin
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAppModeStore } from '../stores/appModeStore'
+import { useAuthStore } from '../stores/authStore'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const appModeStore = useAppModeStore()
+const authStore = useAuthStore()
+
+const isCorporate = computed(() => appModeStore.isCorporate)
+const isInAdminMode = computed(() => route.path.startsWith('/admin'))
+
+const showAdminSwitch = computed(() => {
+  // Check if user has admin privileges
+  return authStore.isAdmin
+})
+
+function toggleAppMode() {
+  appModeStore.toggleMode()
+}
+
+function goToAdmin() {
+  router.push('/admin')
+}
+
+function exitAdmin() {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.mode-switcher {
+  font-family: 'Inter', sans-serif;
+}
+</style>

frontend_old/components/TileCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tile-card group relative overflow-hidden rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
+    <!-- Background image with blur -->
+    <div class="absolute inset-0 z-0">
+      <img src="/sf_card.png" alt="Card background" class="w-full h-full object-cover opacity-20" />
+      <div class="absolute inset-0 backdrop-blur-lg bg-white/10"></div>
+    </div>
+
+    <!-- Header with dark blue background -->
+    <div class="relative z-10 bg-sf-blue text-white p-6 rounded-t-2xl">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-xl font-bold">
+            <slot name="title">Card Title</slot>
+          </h3>
+          <p class="text-sf-green-light text-sm mt-1">
+            <slot name="subtitle">Subtitle</slot>
+          </p>
+        </div>
+        <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
+          <slot name="icon">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+          </slot>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content area with strong backdrop blur -->
+    <div class="relative z-10 p-6 backdrop-blur-lg bg-white/5 rounded-b-2xl">
+      <div class="text-gray-800">
+        <slot>Card content goes here. This area has a strong backdrop blur effect to let the wall texture show through.</slot>
+      </div>
+      <!-- Optional footer -->
+      <div class="mt-6 pt-4 border-t border-white/20">
+        <slot name="footer">
+          <button class="btn-primary text-sm px-4 py-2">Action</button>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Decorative corner accent -->
+    <div class="absolute top-0 right-0 w-16 h-16 bg-sf-green/20 rounded-full -translate-y-8 translate-x-8 group-hover:scale-125 transition-transform"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No props needed for basic tile
+</script>
+
+<style scoped>
+.tile-card {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+</style>

frontend_old/views/AboutView.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="about-view">
+    <h1 class="text-3xl font-bold mb-6">About Service Finder</h1>
+    <p class="text-gray-700 mb-6">
+      This is a modern frontend foundation for the Service Finder platform, built with Vue 3, TypeScript, and Tailwind CSS.
+    </p>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div class="bg-white rounded-xl p-6 shadow">
+        <h2 class="text-xl font-bold mb-4">Tech Stack</h2>
+        <ul class="space-y-2">
+          <li>• Vue 3 (Composition API)</li>
+          <li>• TypeScript for type safety</li>
+          <li>• Vite for fast builds</li>
+          <li>• Pinia for state management</li>
+          <li>• Vue Router for navigation</li>
+          <li>• Vue I18n for translations</li>
+          <li>• Tailwind CSS for styling</li>
+          <li>• Axios for HTTP requests</li>
+        </ul>
+      </div>
+      <div class="bg-white rounded-xl p-6 shadow">
+        <h2 class="text-xl font-bold mb-4">Architecture</h2>
+        <ul class="space-y-2">
+          <li>• Multi-stage Docker build</li>
+          <li>• Nginx reverse proxy to backend</li>
+          <li>• Dual layout system (B2B/B2C)</li>
+          <li>• Centralized app mode store</li>
+          <li>• Dynamic translation loading</li>
+          <li>• Responsive design</li>
+          <li>• Component-based structure</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this simple about page
+</script>
+
+<style scoped>
+.about-view {
+  font-family: 'Inter', sans-serif;
+}
+</style>

frontend_old/views/AdminDashboard.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="admin-dashboard">
+    <!-- Page Header -->
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
+      <p class="text-gray-400">Monitor system health, manage translations, and oversee platform operations.</p>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm text-gray-400 mb-1">Total Users</div>
+            <div class="text-3xl font-bold">{{ stats.totalUsers }}</div>
+          </div>
+          <div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center">
+            <span class="text-2xl">👥</span>
+          </div>
+        </div>
+        <div class="mt-4 text-sm text-gray-400">
+          <span class="text-green-400">+{{ stats.newUsersToday }} today</span>
+        </div>
+      </div>
+
+      <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm text-gray-400 mb-1">Active Sessions</div>
+            <div class="text-3xl font-bold">{{ stats.activeSessions }}</div>
+          </div>
+          <div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center">
+            <span class="text-2xl">🔌</span>
+          </div>
+        </div>
+        <div class="mt-4 text-sm text-gray-400">
+          <span class="text-green-400">{{ stats.sessionGrowth }}% growth</span>
+        </div>
+      </div>
+
+      <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm text-gray-400 mb-1">Vehicles Catalog</div>
+            <div class="text-3xl font-bold">{{ stats.vehicleCount }}</div>
+          </div>
+          <div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center">
+            <span class="text-2xl">🚗</span>
+          </div>
+        </div>
+        <div class="mt-4 text-sm text-gray-400">
+          <span class="text-blue-400">{{ stats.pendingVerification }} pending</span>
+        </div>
+      </div>
+
+      <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm text-gray-400 mb-1">API Health</div>
+            <div class="text-3xl font-bold">{{ stats.apiLatency }}ms</div>
+          </div>
+          <div class="w-12 h-12 rounded-lg bg-yellow-900/30 flex items-center justify-center">
+            <span class="text-2xl">⚡</span>
+          </div>
+        </div>
+        <div class="mt-4 text-sm text-gray-400">
+          <span :class="stats.apiStatus === 'healthy' ? 'text-green-400' : 'text-red-400'">
+            {{ stats.apiStatus }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Two Column Layout -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <!-- i18n Translations Manager -->
+      <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+        <div class="flex items-center justify-between mb-6">
+          <h2 class="text-xl font-bold">i18n Translation Manager</h2>
+          <div class="flex space-x-2">
+            <button 
+              class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
+              @click="refreshTranslations"
+            >
+              Refresh
+            </button>
+            <button 
+              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+              @click="showAddModal = true"
+            >
+              Add Key
+            </button>
+          </div>
+        </div>
+
+        <!-- Language Selector -->
+        <div class="mb-6">
+          <label class="block text-sm font-medium text-gray-400 mb-2">Select Language</label>
+          <div class="flex space-x-2">
+            <button
+              v-for="lang in languages"
+              :key="lang.code"
+              class="px-4 py-2 rounded-lg transition-colors"
+              :class="selectedLanguage === lang.code 
+                ? 'bg-blue-600 text-white' 
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'"
+              @click="selectedLanguage = lang.code"
+            >
+              {{ lang.name }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Translations Table -->
+        <div class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-gray-700">
+                <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Key</th>
+                <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Translation</th>
+                <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr 
+                v-for="(translation, key) in filteredTranslations" 
+                :key="key"
+                class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors"
+              >
+                <td class="py-3 px-4 font-mono text-sm">{{ key }}</td>
+                <td class="py-3 px-4">
+                  <input
+                    v-model="translationEdits[key]"
+                    class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm"
+                    :placeholder="translation"
+                    @change="saveTranslation(key, translationEdits[key])"
+                  />
+                </td>
+                <td class="py-3 px-4">
+                  <button 
+                    class="px-3 py-1 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded text-sm"
+                    @click="deleteTranslation(key)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="Object.keys(filteredTranslations).length === 0" class="text-center py-8 text-gray-500">
+          No translations found for {{ selectedLanguage.toUpperCase() }}.
+        </div>
+      </div>
+
+      <!-- System Activity & Quick Actions -->
+      <div class="space-y-8">
+        <!-- Recent Activity -->
+        <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+          <h2 class="text-xl font-bold mb-6">Recent System Activity</h2>
+          <div class="space-y-4">
+            <div 
+              v-for="activity in recentActivity"
+              :key="activity.id"
+              class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-800/30 transition-colors"
+            >
+              <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
+                <span class="text-lg">{{ activity.icon }}</span>
+              </div>
+              <div class="flex-1">
+                <div class="font-medium">{{ activity.title }}</div>
+                <div class="text-sm text-gray-400">{{ activity.description }}</div>
+                <div class="text-xs text-gray-500 mt-1">{{ activity.time }}</div>
+              </div>
+              <div :class="`px-3 py-1 rounded-full text-xs ${activity.statusClass}`">
+                {{ activity.status }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+          <h2 class="text-xl font-bold mb-6">Quick Actions</h2>
+          <div class="grid grid-cols-2 gap-4">
+            <button 
+              class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
+              @click="runSystemAudit"
+            >
+              <div class="text-2xl mb-2">🔍</div>
+              <div class="font-medium">Run System Audit</div>
+              <div class="text-sm text-gray-400">Check for inconsistencies</div>
+            </button>
+            <button 
+              class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
+              @click="clearCache"
+            >
+              <div class="text-2xl mb-2">🧹</div>
+              <div class="font-medium">Clear Cache</div>
+              <div class="text-sm text-gray-400">Refresh all caches</div>
+            </button>
+            <button 
+              class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
+              @click="exportData"
+            >
+              <div class="text-2xl mb-2">📤</div>
+              <div class="font-medium">Export Data</div>
+              <div class="text-sm text-gray-400">Backup database</div>
+            </button>
+            <button 
+              class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
+              @click="showUserImpersonation = true"
+            >
+              <div class="text-2xl mb-2">👤</div>
+              <div class="font-medium">Impersonate User</div>
+              <div class="text-sm text-gray-400">Test as another user</div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Translation Modal -->
+    <div v-if="showAddModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+      <div class="bg-gray-800 rounded-xl border border-gray-700 p-6 w-full max-w-md">
+        <h3 class="text-xl font-bold mb-4">Add Translation Key</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-400 mb-2">Key</label>
+            <input 
+              v-model="newKey"
+              class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2"
+              placeholder="e.g., dashboard.welcome"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-400 mb-2">Value</label>
+            <textarea 
+              v-model="newValue"
+              class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2"
+              rows="3"
+              placeholder="Translation text"
+            />
+          </div>
+          <div class="flex justify-end space-x-3">
+            <button 
+              class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
+              @click="showAddModal = false"
+            >
+              Cancel
+            </button>
+            <button 
+              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
+              @click="addTranslation"
+            >
+              Add Translation
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+// Stats data
+const stats = ref({
+  totalUsers: 1247,
+  newUsersToday: 12,
+  activeSessions: 89,
+  sessionGrowth: 4.2,
+  vehicleCount: 8563,
+  pendingVerification: 42,
+  apiLatency: 42,
+  apiStatus: 'healthy' as 'healthy' | 'degraded' | 'down'
+})
+
+// i18n translations
+const languages = ref([
+  { code: 'hu', name: 'Hungarian' },
+  { code: 'en', name: 'English' },
+  { code: 'de', name: 'German' },
+  { code: 'fr', name: 'French' }
+])
+
+const selectedLanguage = ref('hu')
+const translations = ref<Record<string, string>>({
+  'dashboard.welcome': 'Üdvözöljük az admin felületen',
+  'dashboard.stats': 'Statisztikák',
+  'users.total': 'Összes felhasználó',
+  'vehicles.catalog': 'Jármű katalógus',
+  'system.health': 'Rendszer állapot',
+  'navigation.home': 'Kezdőlap',
+  'navigation.admin': 'Adminisztráció',
+  'button.save': 'Mentés',
+  'button.cancel': 'Mégse',
+  'error.not_found': 'Nem található',
+  'success.updated': 'Sikeresen frissítve'
+})
+
+const translationEdits = ref<Record<string, string>>({})
+
+// Filter translations for selected language (simulated)
+const filteredTranslations = computed(() => {
+  // In a real app, this would fetch from backend API
+  // For now, we'll just return all translations
+  return translations.value
+})
+
+// Recent activity
+const recentActivity = ref([
+  {
+    id: 1,
+    icon: '👤',
+    title: 'New user registration',
+    description: 'John Doe registered via email',
+    time: '5 minutes ago',
+    status: 'Completed',
+    statusClass: 'bg-green-900/30 text-green-400'
+  },
+  {
+    id: 2,
+    icon: '🚗',
+    title: 'Vehicle catalog update',
+    description: 'Robot-1-GB added 12 new vehicle models',
+    time: '15 minutes ago',
+    status: 'Processing',
+    statusClass: 'bg-blue-900/30 text-blue-400'
+  },
+  {
+    id: 3,
+    icon: '🔧',
+    title: 'System maintenance',
+    description: 'Database backup completed',
+    time: '1 hour ago',
+    status: 'Completed',
+    statusClass: 'bg-green-900/30 text-green-400'
+  },
+  {
+    id: 4,
+    icon: '⚠️',
+    title: 'API rate limit warning',
+    description: 'DVLA API approaching daily limit',
+    time: '2 hours ago',
+    status: 'Warning',
+    statusClass: 'bg-yellow-900/30 text-yellow-400'
+  }
+])
+
+// Modal state
+const showAddModal = ref(false)
+const newKey = ref('')
+const newValue = ref('')
+const showUserImpersonation = ref(false)
+
+// Methods
+function refreshTranslations() {
+  // Simulate API call
+  console.log('Refreshing translations for', selectedLanguage.value)
+  // In real app: fetch from /api/v1/translations/hu
+}
+
+function saveTranslation(key: string, value: string) {
+  translations.value[key] = value
+  console.log('Saving translation:', key, value)
+  // In real app: POST to backend
+}
+
+function deleteTranslation(key: string) {
+  if (confirm(`Delete translation key "${key}"?`)) {
+    delete translations.value[key]
+    console.log('Deleted translation:', key)
+  }
+}
+
+function addTranslation() {
+  if (newKey.value && newValue.value) {
+    translations.value[newKey.value] = newValue.value
+    newKey.value = ''
+    newValue.value = ''
+    showAddModal.value = false
+  }
+}
+
+function runSystemAudit() {
+  alert('System audit started. Check logs for results.')
+}
+
+function clearCache() {
+  alert('Cache cleared successfully.')
+}
+
+function exportData() {
+  alert('Data export initiated. Download will start shortly.')
+}
+
+onMounted(() => {
+  // Initialize translation edits
+  Object.keys(translations.value).forEach(key => {
+    translationEdits.value[key] = translations.value[key]
+  })
+})
+</script>
+
+<style scoped>
+.admin-dashboard {
+  font-family: 'Inter', sans-serif;
+}
+</style>

frontend_old/views/AdminSystemView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin-system-view">
+    <h1 class="text-2xl font-bold mb-6">System Settings</h1>
+    <p class="text-gray-400 mb-8">Configure system parameters, API keys, and platform settings.</p>
+    
+    <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+      <div class="text-center py-12 text-gray-500">
+        System configuration interface will be implemented here.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

frontend_old/views/AdminTranslationsView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin-translations-view">
+    <h1 class="text-2xl font-bold mb-6">i18n Translation Management</h1>
+    <p class="text-gray-400 mb-8">Manage translation keys and values for all supported languages.</p>
+    
+    <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+      <div class="text-center py-12 text-gray-500">
+        Advanced translation management interface will be implemented here.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

frontend_old/views/AdminUsersView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin-users-view">
+    <h1 class="text-2xl font-bold mb-6">User Management</h1>
+    <p class="text-gray-400 mb-8">Manage system users, roles, and permissions.</p>
+    
+    <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+      <div class="text-center py-12 text-gray-500">
+        User management interface will be implemented here.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

frontend_old/views/AdminVehiclesView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin-vehicles-view">
+    <h1 class="text-2xl font-bold mb-6">Vehicle Catalog Management</h1>
+    <p class="text-gray-400 mb-8">Manage vehicle models, technical data, and catalog synchronization.</p>
+    
+    <div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
+      <div class="text-center py-12 text-gray-500">
+        Vehicle catalog management interface will be implemented here.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

frontend_old/views/HomeView.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="home-view min-h-screen bg-sf-wall/80 bg-sf-wall-pattern p-4 md:p-8">
+    <!-- Hero Section with Logo and Slogan -->
+    <div class="text-center mb-10">
+      <div class="flex justify-center items-center mb-4">
+        <img src="/SF_logo.png" alt="Service Finder Logo" class="h-20 w-auto object-contain" />
+        <div class="ml-6 text-left">
+          <h1 class="text-4xl md:text-5xl font-bold text-sf-blue">SERVICE<span class="text-sf-green"> FINDER</span></h1>
+          <p class="text-lg text-sf-accent font-semibold mt-2">ONLINE JÁRMŰNYILVÁNTARTÓ & SZERVIZKERESŐ</p>
+        </div>
+      </div>
+      <p class="text-xl text-sf-gray-dark max-w-2xl mx-auto">
+        {{ isCorporate
+          ? 'Manage your vehicle fleet with powerful analytics and cost tracking.'
+          : 'Your personal garage dashboard - track costs, manage vehicles, and earn rewards.'
+        }}
+      </p>
+    </div>
+
+    <!-- Bento Grid Dashboard -->
+    <div class="max-w-7xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 auto-rows-[minmax(180px,auto)]">
+        
+        <!-- Costs Tile (2x1) -->
+        <div class="md:col-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 overflow-hidden">
+          <div class="bg-sf-blue text-white p-5">
+            <div class="flex items-center justify-between">
+              <h2 class="text-xl font-bold">Monthly Costs</h2>
+              <span class="text-sm bg-sf-green/20 text-sf-green px-3 py-1 rounded-full">April 2026</span>
+            </div>
+            <p class="text-sf-green/80 text-sm mt-1">Track your vehicle expenses</p>
+          </div>
+          <div class="p-5">
+            <div class="space-y-4">
+              <div class="flex items-center justify-between border-b border-gray-100 pb-3">
+                <div class="flex items-center">
+                  <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mr-3">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4 4 0 003 15z"></path>
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 class="font-semibold">Fuel</h3>
+                    <p class="text-sm text-gray-500">Last: 2 days ago</p>
+                  </div>
+                </div>
+                <div class="text-right">
+                  <p class="font-bold text-lg">€ 128.50</p>
+                  <p class="text-sm text-green-600">-12% vs last month</p>
+                </div>
+              </div>
+              
+              <div class="flex items-center justify-between border-b border-gray-100 pb-3">
+                <div class="flex items-center">
+                  <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mr-3">
+                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 class="font-semibold">Oil Change</h3>
+                    <p class="text-sm text-gray-500">Due in 14 days</p>
+                  </div>
+                </div>
+                <div class="text-right">
+                  <p class="font-bold text-lg">€ 89.00</p>
+                  <p class="text-sm text-gray-500">Regular maintenance</p>
+                </div>
+              </div>
+              
+              <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                  <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mr-3">
+                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 class="font-semibold">Insurance</h3>
+                    <p class="text-sm text-gray-500">Annual payment</p>
+                  </div>
+                </div>
+                <div class="text-right">
+                  <p class="font-bold text-lg">€ 420.00</p>
+                  <p class="text-sm text-blue-600">Next: June 15</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Profile Tile (1x1) -->
+        <div class="rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 flex flex-col items-center justify-center p-6">
+          <div class="relative mb-4">
+            <div class="w-24 h-24 rounded-full border-4 border-sf-blue overflow-hidden">
+              <div class="w-full h-full bg-gradient-to-br from-sf-blue to-sf-teal flex items-center justify-center text-white text-2xl font-bold">
+                JD
+              </div>
+            </div>
+            <div class="absolute bottom-0 right-0 w-8 h-8 bg-sf-green rounded-full border-2 border-white flex items-center justify-center">
+              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+              </svg>
+            </div>
+          </div>
+          <h3 class="text-xl font-bold text-gray-800">John Driver</h3>
+          <p class="text-gray-500 text-sm mb-4">Premium Member</p>
+          <div class="flex space-x-2">
+            <span class="px-3 py-1 bg-sf-blue/10 text-sf-blue text-xs rounded-full">2 Vehicles</span>
+            <span class="px-3 py-1 bg-sf-green/10 text-sf-green text-xs rounded-full">245 Points</span>
+          </div>
+        </div>
+
+        <!-- Fleet Tile (1x2) -->
+        <div class="md:row-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 p-6">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-gray-800">My Fleet</h2>
+            <button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium">+ Add Vehicle</button>
+          </div>
+          <div class="space-y-4">
+            <div class="flex items-center p-4 rounded-xl bg-blue-50/50 border border-blue-100">
+              <div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
+                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <h3 class="font-semibold">Volkswagen Golf</h3>
+                <p class="text-sm text-gray-500">ABC-123 • 1.6 TDI</p>
+              </div>
+              <div class="text-right">
+                <p class="font-bold">€ 2.45/km</p>
+                <p class="text-xs text-green-600">Good condition</p>
+              </div>
+            </div>
+            
+            <div class="flex items-center p-4 rounded-xl bg-gray-50/50 border border-gray-100">
+              <div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
+                <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <h3 class="font-semibold">Ford Transit</h3>
+                <p class="text-sm text-gray-500">DEF-456 • 2.0 EcoBlue</p>
+              </div>
+              <div class="text-right">
+                <p class="font-bold">€ 3.20/km</p>
+                <p class="text-xs text-amber-600">Service due</p>
+              </div>
+            </div>
+            
+            <div class="flex items-center p-4 rounded-xl bg-green-50/50 border border-green-100">
+              <div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
+                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <div class="flex-1">
+                <h3 class="font-semibold">Tesla Model 3</h3>
+                <p class="text-sm text-gray-500">GHI-789 • Electric</p>
+              </div>
+              <div class="text-right">
+                <p class="font-bold">€ 1.85/km</p>
+                <p class="text-xs text-green-600">Excellent</p>
+              </div>
+            </div>
+            
+            <div class="text-center pt-4 border-t border-gray-100">
+              <button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium flex items-center justify-center w-full">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                </svg>
+                Add another vehicle
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gamification Tile (2x1) -->
+        <div class="md:col-span-2 rounded-2xl bg-gradient-to-r from-sf-blue/10 to-sf-teal/10 backdrop-blur-md shadow-lg border border-gray-100 p-6">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h2 class="text-xl font-bold text-gray-800">Points & Rewards</h2>
+              <p class="text-gray-500">Complete tasks to earn badges and discounts</p>
+            </div>
+            <div class="text-right">
+              <div class="text-3xl font-bold text-sf-blue">1,245</div>
+              <div class="text-sm text-gray-500">Total Points</div>
+            </div>
+          </div>
+          
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            <div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
+              <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
+                </svg>
+              </div>
+              <h4 class="font-semibold text-sf-blue">Gold Member</h4>
+              <p class="text-xs text-gray-500">Top 10%</p>
+            </div>
+            
+            <div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
+              <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                </svg>
+              </div>
+              <h4 class="font-semibold text-sf-green">Security Expert</h4>
+              <p class="text-xs text-gray-500">Verified account</p>
+            </div>
+            
+            <div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
+              <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                </svg>
+              </div>
+              <h4 class="font-semibold text-sf-blue">Fast Responder</h4>
+              <p class="text-xs text-gray-500">Quick actions</p>
+            </div>
+            
+            <div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
+              <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <h4 class="font-semibold text-sf-purple">Time Saver</h4>
+              <p class="text-xs text-gray-500">Efficient user</p>
+            </div>
+          </div>
+          
+          <div class="text-center">
+            <button class="bg-sf-green hover:bg-sf-green/90 text-white font-medium py-2 px-6 rounded-lg transition-colors">
+              View All Rewards
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isCorporate = ref(false)
+</script>
+
+<style scoped>
+.home-view {
+  background-image: url('/garazs.jpg');
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: overlay;
+}
+
+.bg-sf-wall-pattern {
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+                    linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+</style>

frontend_old/views/LoginView.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="login-view min-h-screen flex items-center justify-center relative overflow-hidden">
+    <!-- Background Image with filters -->
+    <div class="absolute inset-0 z-0">
+      <img 
+        src="/sf_mobile_garage_1.png" 
+        alt="Garage Background" 
+        class="w-full h-full object-cover brightness-50 blur-md"
+      />
+      <div class="absolute inset-0 bg-gradient-to-br from-sf-blue/30 to-sf-green/30"></div>
+    </div>
+
+    <!-- Login Card -->
+    <div class="relative z-10 w-full max-w-md mx-4">
+      <div class="bg-white/10 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 p-8">
+        <!-- Branding Logo -->
+        <div class="flex justify-center mb-8">
+          <img 
+            src="/sf_logo_ok.png" 
+            alt="Service Finder Logo" 
+            class="h-20 w-auto mix-blend-multiply"
+          />
+        </div>
+
+        <!-- Title -->
+        <h1 class="text-3xl font-bold text-center text-white mb-2">
+          BELÉPÉS A GARÁZSBA
+        </h1>
+        <p class="text-center text-white/80 mb-8">
+          Add meg a hitelesítő adataidat a folytatáshoz
+        </p>
+
+        <!-- Login Form -->
+        <form @submit.prevent="handleLogin" class="space-y-6">
+          <!-- Email Input -->
+          <div>
+            <label for="email" class="block text-sm font-medium text-white mb-2">
+              E-mail cím
+            </label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
+                </svg>
+              </div>
+              <input
+                id="email"
+                v-model="email"
+                type="email"
+                required
+                class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-blue focus:border-transparent transition"
+                placeholder="pelda@email.hu"
+              />
+            </div>
+          </div>
+
+          <!-- Password Input -->
+          <div>
+            <label for="password" class="block text-sm font-medium text-white mb-2">
+              Jelszó
+            </label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                </svg>
+              </div>
+              <input
+                id="password"
+                v-model="password"
+                type="password"
+                required
+                class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-green focus:border-transparent transition"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <!-- Remember Me & Forgot Password -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <input
+                id="remember"
+                v-model="rememberMe"
+                type="checkbox"
+                class="h-4 w-4 text-sf-blue focus:ring-sf-blue border-white/30 rounded"
+              />
+              <label for="remember" class="ml-2 block text-sm text-white">
+                Emlékezz rám
+              </label>
+            </div>
+            <a href="#" class="text-sm text-white hover:text-sf-green transition">
+              Elfelejtetted a jelszavad?
+            </a>
+          </div>
+
+          <!-- Submit Button -->
+          <button
+            type="submit"
+            class="w-full py-3 px-4 bg-gradient-to-r from-sf-blue to-sf-green text-white font-bold rounded-xl hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sf-blue transition-all shadow-lg"
+          >
+            BELÉPÉS A GARÁZSBA
+          </button>
+
+          <!-- Divider -->
+          <div class="relative my-6">
+            <div class="absolute inset-0 flex items-center">
+              <div class="w-full border-t border-white/30"></div>
+            </div>
+            <div class="relative flex justify-center text-sm">
+              <span class="px-4 bg-transparent text-white/70">vagy</span>
+            </div>
+          </div>
+
+          <!-- Alternative Actions -->
+          <div class="space-y-4">
+            <button
+              type="button"
+              class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
+            >
+              <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.666-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.787-.94 1.324-2.245 1.171-3.54-1.133.052-2.518.754-3.334 1.701-.735.85-1.389 2.207-1.208 3.514 1.26.091 2.544-.596 3.371-1.675z"/>
+              </svg>
+              Folytatás Apple ID-val
+            </button>
+            <button
+              type="button"
+              class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
+            >
+              <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
+              </svg>
+              Folytatás Google-fiókkal
+            </button>
+          </div>
+
+          <!-- Registration Link -->
+          <p class="text-center text-white/80 text-sm mt-8">
+            Még nincs fiókod?
+            <router-link to="/register" class="text-sf-green font-semibold hover:underline ml-1">
+              Regisztrálj most!
+            </router-link>
+          </p>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+
+const email = ref('')
+const password = ref('')
+const rememberMe = ref(false)
+const router = useRouter()
+const authStore = useAuthStore()
+
+const handleLogin = async () => {
+  try {
+    await authStore.login({
+      email: email.value,
+      password: password.value,
+      remember: rememberMe.value
+    })
+    // Redirect to home or intended route
+    router.push('/')
+  } catch (error) {
+    console.error('Login failed:', error)
+    // In a real app, show error message to user
+    alert('Bejelentkezés sikertelen. Kérjük ellenőrizd az adatokat.')
+  }
+}
+</script>
+
+<style scoped>
+.login-view {
+  font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+</style>