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>