Initial commit: Harheimer TC Website

- Vue 3 + Nuxt 3 Framework
- Tailwind CSS Styling
- Responsive Design mit schwarz-roten Vereinsfarben
- Dynamische Galerie mit Lightbox
- Event-Management über CSV-Dateien
- Mannschaftsübersicht mit dynamischen Seiten
- SMTP-Kontaktformular
- Google Maps Integration
- Mobile-optimierte Navigation mit Submenus
- Trainer-Übersicht
- Vereinsmeisterschaften, Spielsysteme, TT-Regeln
- Impressum mit Datenschutzerklärung

components/TermineVorschau.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+      <div class="text-center mb-6">
+        <h2 class="text-2xl font-display font-bold text-gray-900 mb-2">
+          Kommende Termine
+        </h2>
+        <div class="w-16 h-0.5 bg-primary-600 mx-auto" />
+      </div>
+
+      <div v-if="naechsteTermine.length > 0" class="space-y-2 mb-6">
+        <div
+          v-for="(termin, index) in naechsteTermine"
+          :key="index"
+          class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+              <div class="w-10 h-10 bg-primary-600 rounded-lg flex flex-col items-center justify-center text-white text-xs font-bold">
+                <span>{{ formatDay(termin.datum) }}</span>
+                <span>{{ formatMonth(termin.datum) }}</span>
+              </div>
+              <div>
+                <h3 class="font-semibold text-gray-900">{{ termin.titel }}</h3>
+                <p class="text-sm text-gray-600">{{ termin.beschreibung }}</p>
+              </div>
+            </div>
+            <span :class="[
+              'px-2 py-1 text-xs font-medium rounded-full',
+              termin.kategorie === 'Turnier' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'
+            ]">
+              {{ termin.kategorie }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-8 bg-gray-50 rounded-lg">
+        <Calendar :size="32" class="text-gray-400 mx-auto mb-2" />
+        <p class="text-gray-600 text-sm">Keine kommenden Termine</p>
+      </div>
+
+      <div v-if="naechsteTermine.length > 0" class="text-center">
+        <NuxtLink
+          to="/termine"
+          class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          Alle Termine anzeigen
+          <ArrowRight :size="16" class="ml-1" />
+        </NuxtLink>
+      </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { Calendar, ArrowRight } from 'lucide-vue-next'
+
+const termine = ref([])
+
+const naechsteTermine = computed(() => {
+  const heute = new Date()
+  console.log('Heute ist:', heute.toISOString().split('T')[0])
+  
+  const kommende = termine.value
+    .filter(t => {
+      const terminDatum = new Date(t.datum)
+      const istKommend = terminDatum >= heute
+      console.log(`Termin ${t.titel} (${t.datum}): ${istKommend ? 'KOMMEND' : 'VERSTRICHEN'}`)
+      return istKommend
+    })
+    .sort((a, b) => new Date(a.datum) - new Date(b.datum))
+  
+  console.log('Kommende Termine:', kommende)
+  return kommende
+})
+
+const formatDay = (dateString) => {
+  const date = new Date(dateString)
+  return date.getDate()
+}
+
+const formatMonth = (dateString) => {
+  const date = new Date(dateString)
+  const monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+  return monate[date.getMonth()]
+}
+
+const loadTermine = async () => {
+  try {
+    console.log('Lade Termine...')
+    const response = await fetch('/data/termine.csv')
+    console.log('Response:', response)
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    const csv = await response.text()
+    console.log('CSV Text:', csv)
+    
+    // Vereinfachter CSV-Parser
+    const lines = csv.split('\n').filter(line => line.trim() !== '')
+    console.log('CSV Lines:', lines)
+    
+    if (lines.length < 2) {
+      console.log('Keine Datenzeilen gefunden')
+      return
+    }
+    
+    termine.value = lines.slice(1).map((line, index) => {
+      // Entferne Anführungszeichen und teile bei Kommas
+      const cleanLine = line.replace(/"/g, '')
+      const values = cleanLine.split(',')
+      
+      if (values.length < 4) {
+        console.log(`Zeile ${index + 2} hat zu wenige Werte:`, values)
+        return null
+      }
+      
+      const termin = {
+        datum: values[0].trim(),
+        titel: values[1].trim(),
+        beschreibung: values[2].trim(),
+        kategorie: values[3].trim()
+      }
+      
+      console.log(`Termin ${index + 1}:`, termin)
+      return termin
+    }).filter(termin => termin !== null)
+    
+    console.log('Alle geparsten Termine:', termine.value)
+  } catch (error) {
+    console.error('Fehler beim Laden der Termine:', error)
+  }
+}
+
+onMounted(() => {
+  loadTermine()
+})
+</script>
+