Refactor: standardize on n.e.V. legal requirements, add Dark Mode, and update handbook

src/App.vue

@@ -12,9 +12,7 @@ import { useAuth } from './composables/useAuth'
 const { isAllowed } = useAuth()
 
 const theme = ref('classic')
-const lang = ref<'de' | 'bar'>('de')
 const showGame = ref(false)
-const showBSOD = ref(false)
 const isNatUnlocked = ref(false)
 const boars = ref<{id: number, top: number}[]>([])
 
@@ -34,7 +32,7 @@ const unlockNat = () => {
 }
 
 const handleBackdoor = () => {
-  const secret = prompt('Bitte Geheimcode eigem (Unlock NAT):')
+  const secret = prompt('Bitte Geheimcode eingeben (Unlock NAT):')
   if (secret?.toLowerCase() === 'nat mode') {
     unlockNat()
     alert('🐗 NAT-Modus freigschaltet! Wiedaschaun, reinghaun!')
@@ -53,32 +51,18 @@ const startBoarRun = () => {
   }, 8000)
 }
 
-const triggerBSOD = () => {
-  if (theme.value === 'win95') {
-    showBSOD.value = true
-    setTimeout(() => showBSOD.value = false, 3000)
-  }
-}
-
-const toggleLang = (newLang: 'de' | 'bar') => {
-  lang.value = newLang
-  localStorage.setItem('haumdaucher-lang', newLang)
-}
-
 onMounted(() => {
   const savedTheme = localStorage.getItem('haumdaucher-theme')
   if (savedTheme) toggleTheme(savedTheme)
 
-  const savedLang = localStorage.getItem('haumdaucher-lang') as 'de' | 'bar'
-  if (savedLang) lang.value = savedLang
-
   const savedNat = localStorage.getItem('haumdaucher-nat-unlocked')
   if (savedNat === 'true') isNatUnlocked.value = true
 })
 
+// Simplified translation: German only
 const t = (key: string) => {
   const keys = key.split('.')
-  let result: any = messages[lang.value]
+  let result: any = messages.de
   for (const k of keys) {
     if (result[k]) result = result[k]
     else return key
@@ -90,25 +74,24 @@ const t = (key: string) => {
 <template>
   <Header 
     :currentTheme="theme" 
-    :currentLang="lang" 
     :isNatUnlocked="isNatUnlocked"
     @update:theme="toggleTheme" 
-    @update:lang="toggleLang"
     @open:game="showGame = true"
     :t="t"
   />
-  <main @click="triggerBSOD">
-    
-    <!-- Member Banner -->
-
+  <main>
     <Hero :theme="theme" :t="t" />
-    <ClubSpirit :t="t" />
+    <ClubSpirit :t="t" id="spirit" />
     
-    <!-- Legal Pages Section -->
-    <Impressum :t="t" />
-    <Datenschutz :t="t" />
+    <div class="legal-separator"></div>
+    
+    <section id="impressum" class="legal-section">
+      <Impressum :t="t" />
+    </section>
+    <section id="datenschutz" class="legal-section">
+      <Datenschutz :t="t" />
+    </section>
     
-    <!-- Hidden Backdoor Pixel -->
     <div class="backdoor" @click.stop="handleBackdoor"></div>
   </main>
   
@@ -120,16 +103,19 @@ const t = (key: string) => {
     @unlock-nat="unlockNat"
   />
   
-  <div v-if="showBSOD" class="bsod">
-    <h1>:(</h1>
-    <p>A problem has been detected and Windows has been shut down to prevent damage to your Haumdaucher.</p>
-    <p>DRIVER_IRQL_NOT_LESS_OR_EQUAL</p>
-    <p>Press any key to continue... just kidding, it's a website.</p>
-  </div>
-
   <div v-for="boar in boars" :key="boar.id" class="running-boar" :style="{ top: boar.top + '%' }">🐗💨</div>
-  <footer class="container" style="padding: 40px 0; opacity: 0.6; font-size: 0.9em; text-align: center;">
-    © {{ new Date().getFullYear() }} HAUMDAUCHER Wurst und Spezialitäten n.e.V. (in Gründung)
+  
+  <footer class="site-footer">
+    <div class="container footer-content">
+      <div class="footer-info">
+        © {{ new Date().getFullYear() }} HAUMDAUCHER Wurst und Spezialitäten n.e.V.
+      </div>
+      <nav class="footer-links">
+        <a href="#impressum">Impressum</a>
+        <span class="sep">•</span>
+        <a href="#datenschutz">Datenschutz</a>
+      </nav>
+    </div>
   </footer>
 </template>
 
@@ -137,19 +123,6 @@ const t = (key: string) => {
 <style>
 @import './assets/styles/global.css';
 
-.bsod {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #0000aa;
-  color: white;
-  z-index: 3000;
-  padding: 50px;
-  font-family: 'Courier New', monospace;
-}
-
 .running-boar {
   position: fixed;
   left: -100px;
@@ -174,4 +147,63 @@ const t = (key: string) => {
   opacity: 0;
 }
 
+.legal-section {
+  min-height: auto !important;
+  padding: 60px 20px !important;
+  opacity: 0.8;
+}
+
+.legal-separator {
+  height: 1px;
+  background: var(--glass-border);
+  margin: 40px 10% 0;
+  opacity: 0.3;
+}
+
+.site-footer {
+  padding: 60px 0 100px; /* Extra bottom padding for mobile drawer */
+  border-top: 1px solid var(--glass-border);
+  background: var(--bg-color);
+  opacity: 0.8;
+  font-size: 0.85rem;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
+.footer-links {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.footer-links a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.footer-links a:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.sep {
+  opacity: 0.3;
+}
+
+@media (min-width: 768px) {
+  .site-footer {
+    padding: 60px 0;
+  }
+  .footer-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
 </style>

src/assets/styles/global.css

@@ -42,10 +42,9 @@ body {
 
 .container {
   width: 100%;
-  max-width: 100%;
-  margin: 0;
-  padding: 0 10px;
-  /* Reduced from 15px to save space */
+  max-width: 1000px; /* Centered content on desktop */
+  margin: 0 auto;
+  padding: 0 20px;
   box-sizing: border-box;
 }
 
@@ -94,43 +93,14 @@ p {
   max-width: 100%;
 }
 
-/* Theme Overrides (Remain same but refined) */
-[data-theme='unicorn'] {
-  --bg-color: #fff0fb;
-  --text-color: #4a148c;
-  --primary-color: #f06292;
-  --accent-color: #ba68c8;
-  --header-bg: rgba(255, 240, 251, 0.85);
-  --glass-border: rgba(240, 98, 146, 0.2);
-}
-
-[data-theme='luxury'] {
-  --bg-color: #0a0a0a;
-  --text-color: #e0e0e0;
+/* Theme Overrides */
+[data-theme='dark'] {
+  --bg-color: #0f0f0f;
+  --text-color: #f0f0f0;
   --primary-color: #d4af37;
-  --accent-color: #e5e4e2;
-  --header-bg: rgba(10, 10, 10, 0.85);
-  --glass-border: rgba(212, 175, 55, 0.3);
-}
-
-[data-theme='win95'] {
-  --bg-color: #008080;
-  --text-color: #000000;
-  --primary-color: #c0c0c0;
-  --accent-color: #808080;
-  --header-bg: #c0c0c0;
-  --glass-border: #ffffff;
-  --font-family: 'MS Sans Serif', Tahoma, sans-serif;
-  cursor: url('https://cur.cursors-4u.net/games/gam-4/gam373.cur'), auto;
-}
-
-[data-theme='win95'] * {
-  border-radius: 0 !important;
-}
-
-[data-theme='win95'] .fancy-glass {
-  border: 2px solid;
-  border-color: #ffffff #808080 #808080 #ffffff;
+  --accent-color: #ffffff;
+  --header-bg: rgba(15, 15, 15, 0.85);
+  --glass-border: rgba(212, 175, 55, 0.2);
 }
 
 [data-theme='nat'] {

src/components/layout/Header.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import { useAuth } from '../../composables/useAuth'
+import { watch, ref } from 'vue'
+
 const props = defineProps<{
   currentTheme: string
-  currentLang: string
   isNatUnlocked: boolean
   t: (key: string) => string
 }>()
 
-const emit = defineEmits(['update:theme', 'update:lang', 'open:game'])
+const emit = defineEmits(['update:theme', 'open:game'])
 
-const themes = ['classic', 'unicorn', 'luxury', 'win95', 'nat']
+const themes = ['classic', 'dark', 'nat']
 
-import { useAuth } from '../../composables/useAuth'
-import { watch, ref } from 'vue'
 const { user, login, logout, error } = useAuth()
 const showSettings = ref(false)
 
@@ -29,8 +29,8 @@ watch(user, (u) => {
       <div class="branding-area">
         <div class="logo-text">HAUMDAUCHER</div>
         <div v-if="user" class="status-message">
-          <span class="desktop-msg">{{ isNatUnlocked || isAllowed ? 'Du bist a Haumdaucher 🫵 🍻' : 'Vielleicht... bist du a Haumdaucher' }}</span>
-          <span class="mobile-msg">{{ isNatUnlocked || isAllowed ? 'Haumdaucher! 🫵' : 'Vielleicht... 🤔' }}</span>
+          <span class="desktop-msg">{{ isNatUnlocked ? 'Du bist a Haumdaucher 🫵 🍻' : 'Vielleicht... bist du a Haumdaucher' }}</span>
+          <span class="mobile-msg">{{ isNatUnlocked ? 'Haumdaucher! 🫵' : 'Vielleicht... 🤔' }}</span>
         </div>
       </div>
 
@@ -53,19 +53,8 @@ watch(user, (u) => {
           </div>
         </div>
 
-        <!-- Combined switch for better mobile spacing -->
+        <!-- Theme switch -->
         <div class="control-wrapper" :class="{ 'show-mobile': showSettings }">
-
-          <div class="switch-group">
-            <button 
-              v-for="l in ['de', 'bar']" 
-              :key="l"
-              :class="{ active: currentLang === l }"
-              @click="emit('update:lang', l)"
-            >
-              {{ l.toUpperCase() }}
-            </button>
-          </div>
           <div class="switch-group">
             <template v-for="th in themes">
               <button 
@@ -74,12 +63,10 @@ watch(user, (u) => {
                 :class="{ active: currentTheme === th }"
                 @click="emit('update:theme', th)"
                 class="theme-btn"
-                :title="th"
+                :title="t('themes.' + th)"
               >
-                <span v-if="th === 'classic'">⚫</span>
-                <span v-if="th === 'unicorn'">🦄</span>
-                <span v-if="th === 'luxury'">👑</span>
-                <span v-if="th === 'win95'">💾</span>
+                <span v-if="th === 'classic'">☀️</span>
+                <span v-if="th === 'dark'">🌙</span>
                 <span v-if="th === 'nat'">🐗</span>
               </button>
             </template>
@@ -149,8 +136,6 @@ watch(user, (u) => {
   display: flex;
   gap: 8px;
   align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
 }
 
 .status-message {
@@ -185,12 +170,14 @@ watch(user, (u) => {
     position: absolute;
     top: 60px;
     right: 10px;
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--header-bg);
     padding: 10px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     flex-direction: column;
     align-items: flex-end;
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(10px);
   }
 
   .control-wrapper.show-mobile {
@@ -227,7 +214,7 @@ button {
 
 button.active {
   background: var(--primary-color);
-  color: white;
+  color: #fff;
   opacity: 1;
 }
 

src/locales/i18n.ts

@@ -15,17 +15,15 @@ export const messages = {
     },
     impressum: {
       title: 'Impressum',
-      content: 'HAUMDAUCHER Wurst und Spezialitäten n.e.V. (in Gründung)\n\nVertreten durch:\n[Name des Vertreters]\n[Straße Hausnummer]\n[PLZ Ort]\n\nKontakt:\nE-Mail: info@haumdaucher.de'
+      content: 'HAUMDAUCHER Wurst und Spezialitäten n.e.V. (in Gründung)\n\nVertreten durch:\nMoritz Graf (1. Vorstand)\nGrabengasse 7\n93059 Regensburg\n\nKontakt:\nTelefon: 094183065717\nE-Mail: info@haumdaucher.de'
     },
     datenschutz: {
       title: 'Datenschutzerklärung',
-      content: 'Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Als reine Repräsentationsseite erheben wir keine personenbezogenen Daten von Besuchern, es sei denn, dies ist technisch für die Bereitstellung der Website absolut notwendig (z.B. Server-Logfiles). Wir verwenden keine Cookies zur Nachverfolgung Ihres Surfverhaltens.'
+      content: 'Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Als reine Repräsentationsseite erheben wir keine personenbezogenen Daten von Besuchern, es sei denn, dies ist technisch notwendig.\n\n**Google Firebase Authentication**\nZur Bereitstellung unseres Mitglieder-Logins nutzen wir Firebase Authentication (Google Ireland Limited). Dabei werden Daten (z.B. E-Mail) verarbeitet. Dies erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO. Daten können in die USA übertragen werden, abgesichert durch das EU-U.S. Data Privacy Framework und Standardvertragsklauseln.'
     },
     themes: {
       classic: 'Klassisch',
-      unicorn: 'Einhorn',
-      luxury: 'Luxus',
-      win95: 'Windows 95',
+      dark: 'Dunkel',
       nat: 'NAT-Mode'
     },
     game: {
@@ -35,42 +33,5 @@ export const messages = {
       level: 'Level',
       win: 'NATinator bezwungen! Du bist a echter Haumdaucher.'
     }
-  },
-  bar: {
-    nav: {
-      home: 'Dahoam',
-      spirit: 'Unsara Spirit',
-      game: 'Haumdaucher Spui'
-    },
-    hero: {
-      title: 'D\'Haumdaucher',
-      subtitle: 'Wuarscht und Spezialitätn n.e.V. – owei no am werkeln'
-    },
-    spirit: {
-      title: 'Unsara Spirit',
-      content: 'Mir lem d\'Kultur vom guatn Essn. Bei uns in da DNA steht gschriem, dass ma andre Leid mid Spezialitätn gmiatlich bekocht und si a moi gegenseitig verwehnt. Da Fokus liegt hoid – oba ned nua – af echtem Wuarscht-Handwerk.'
-    },
-    impressum: {
-      title: 'Impressum (Rechtlichs Zoig)',
-      content: 'HAUMDAUCHER Wurst und Spezialitäten n.e.V. (in Gründung)\n\nVadredn durch:\n[Name des Vertreters]\n[Straße Hausnummer]\n[PLZ Ort]\n\nKontakt:\nE-Mail: info@haumdaucher.de'
-    },
-    datenschutz: {
-      title: 'Datenschutz',
-      content: 'Mir passn af dei Datn auf wia af a rohes Ei. Weil des nua a Schauseitn is, sammln mia a koane Datn vo dir eib, außa des wos da Server unbedingt braucht damits lafft. Mir schiabn dir a koane Cookies unda.'
-    },
-    themes: {
-      classic: 'Klassisch',
-      unicorn: 'Einhorn',
-      luxury: 'Luxus',
-      win95: 'Windows 95',
-      nat: 'NAT-Mode'
-    },
-    game: {
-      title: 'Haumdaucher Spui',
-      start: 'Af geht\'s!',
-      gameOver: 'Schluss is! Game Over.',
-      level: 'Level',
-      win: 'NATinator gschlong! Du bist a Pfundskerl.'
-    }
   }
 }