484 lines
20 KiB
Vue
484 lines
20 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-2">
|
|
Mitgliedschaft
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-4"></div>
|
|
|
|
<!-- Mitgliedschaftspläne (ohne "Noch Fragen" Box) -->
|
|
<div class="mb-4">
|
|
<section id="membership" class="py-8 sm:py-12 bg-gradient-to-b from-gray-50 to-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-8">
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Werden Sie Teil unserer Tischtennis-Familie - Wählen Sie die passende Mitgliedschaft für sich
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
<!-- Mitgliedschaftspläne werden dynamisch geladen -->
|
|
</div>
|
|
|
|
<!-- Satzung Download -->
|
|
<div class="mt-4 bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
|
|
<div class="text-center mb-8">
|
|
<h3 class="text-3xl font-display font-bold text-gray-900 mb-4">
|
|
Vereinsatzung
|
|
</h3>
|
|
<p class="text-xl text-gray-600">
|
|
Laden Sie unsere aktuelle Vereinsatzung herunter
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a
|
|
href="/documents/satzung.pdf"
|
|
target="_blank"
|
|
class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="20" class="lucide lucide-file-text-icon mr-2">
|
|
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
|
|
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
|
|
<path d="M10 9H8"></path>
|
|
<path d="M16 13H8"></path>
|
|
<path d="M16 17H8"></path>
|
|
</svg>
|
|
Satzung herunterladen (PDF)
|
|
</a>
|
|
<span class="text-sm text-gray-500">oder</span>
|
|
<a
|
|
href="/satzung"
|
|
class="inline-flex items-center px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-900 font-semibold rounded-lg transition-colors"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="20" class="lucide lucide-eye-icon mr-2">
|
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
Online ansehen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Aufnahmeantrag Formular -->
|
|
<div class="bg-white rounded-xl shadow-lg p-8">
|
|
<h2 class="text-3xl font-display font-bold text-gray-900 mb-6">
|
|
Beitrittserklärung
|
|
</h2>
|
|
|
|
<form id="membershipForm" class="space-y-8">
|
|
<!-- Persönliche Daten -->
|
|
<div class="space-y-6">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Persönliche Daten
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="nachname" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Nachname
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="nachname"
|
|
name="nachname"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="vorname" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Vorname
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="vorname"
|
|
name="vorname"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="strasse" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Straße und Hausnummer
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="strasse"
|
|
name="strasse"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="plz" class="block text-sm font-medium text-gray-700 mb-2">
|
|
PLZ
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="plz"
|
|
name="plz"
|
|
type="text"
|
|
required
|
|
pattern="[0-9]{5}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="ort" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Wohnort
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="ort"
|
|
name="ort"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="geburtsdatum" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Geburtsdatum
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="geburtsdatum"
|
|
name="geburtsdatum"
|
|
type="date"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="telefon_privat" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Telefon (privat)
|
|
</label>
|
|
<input
|
|
id="telefon_privat"
|
|
name="telefon_privat"
|
|
type="tel"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
|
|
E-Mail
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="telefon_mobil" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Telefon (Mobil)
|
|
</label>
|
|
<input
|
|
id="telefon_mobil"
|
|
name="telefon_mobil"
|
|
type="tel"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mitgliedschaftsart -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Mitgliedschaftsart
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<label class="flex items-center">
|
|
<input
|
|
name="mitgliedschaftsart"
|
|
type="radio"
|
|
value="aktiv"
|
|
checked
|
|
class="mr-3 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<span class="text-gray-700">Aktives Mitglied</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input
|
|
name="mitgliedschaftsart"
|
|
type="radio"
|
|
value="passiv"
|
|
class="mr-3 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<span class="text-gray-700">Passives Mitglied</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Beitragszahlung -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Beitragszahlung
|
|
</h3>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<p class="text-gray-700 mb-4">
|
|
Den derzeitigen jährlichen Mitgliedsbeitrag in Höhe von:
|
|
</p>
|
|
<ul class="space-y-2 text-gray-700">
|
|
<li>• € 120,-- (Erwachsene)</li>
|
|
<li>• € 72,-- (Jugendliche bis zum vollendeten 18. Lebensjahr)</li>
|
|
<li>• € 30,-- (passive Mitglieder)</li>
|
|
</ul>
|
|
<p class="text-gray-700 mt-4">
|
|
bitte ich per Lastschrift jährlich von meinem Konto einzuziehen.
|
|
</p>
|
|
</div>
|
|
<label class="flex items-start">
|
|
<input
|
|
name="lastschrift_erlaubt"
|
|
type="checkbox"
|
|
required
|
|
class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<div>
|
|
<span class="text-gray-700">
|
|
Hierzu erteile ich das beigefügte SEPA-Lastschriftmandat.
|
|
</span>
|
|
<p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Bankdaten -->
|
|
<div class="space-y-6">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Bankdaten für SEPA-Lastschrift
|
|
</h3>
|
|
|
|
<div>
|
|
<label for="kontoinhaber" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Kontoinhaber (Vorname und Name)
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="kontoinhaber"
|
|
name="kontoinhaber"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="iban" class="block text-sm font-medium text-gray-700 mb-2">
|
|
IBAN
|
|
</label>
|
|
<p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
|
|
<input
|
|
id="iban"
|
|
name="iban"
|
|
type="text"
|
|
required
|
|
placeholder="DE89 3704 0044 0532 0130 00"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="bic" class="block text-sm font-medium text-gray-700 mb-2">
|
|
BIC
|
|
</label>
|
|
<input
|
|
id="bic"
|
|
name="bic"
|
|
type="text"
|
|
placeholder="COBADEFFXXX"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="bank" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Kreditinstitut
|
|
</label>
|
|
<input
|
|
id="bank"
|
|
name="bank"
|
|
type="text"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datenschutz -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Datenschutz und Einverständniserklärung
|
|
</h3>
|
|
<div class="bg-blue-50 p-4 rounded-lg">
|
|
<p class="text-sm text-gray-700 mb-4">
|
|
Der Vereinsvorstand weist darauf hin, dass ausreichende technische Maßnahmen zur Gewährleistung des Datenschutzes getroffen wurden. Dennoch kann bei einer Veröffentlichung von personenbezogenen Mitgliederdaten im Internet ein umfassender Datenschutz nicht garantiert werden.
|
|
</p>
|
|
|
|
<label class="flex items-start">
|
|
<input
|
|
name="datenschutz_einverstanden"
|
|
type="checkbox"
|
|
required
|
|
class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<div>
|
|
<span class="text-sm text-gray-700">
|
|
Ich bestätige das Vorstehende zur Kenntnis genommen zu haben und willige ein, dass der Harheimer Tischtennis-Club 1954 e.V. allgemeine Daten zu meiner Person (Name, Fotografien, Mannschaft, Leistungsergebnisse, Turnierteilnahmen, Lizenzen u.ä.) auf der Homepage des Vereins veröffentlichen darf.
|
|
</span>
|
|
<p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vereinssatzung -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
|
|
Vereinssatzung
|
|
</h3>
|
|
<label class="flex items-start">
|
|
<input
|
|
name="satzung_anerkannt"
|
|
type="checkbox"
|
|
required
|
|
class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
|
|
/>
|
|
<div>
|
|
<span class="text-gray-700">
|
|
Ich erkenne die Vereinssatzung (erhältlich beim Vorstand bzw. auf der Vereinshomepage) an.
|
|
</span>
|
|
<p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Hinweise -->
|
|
<div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
|
|
<h4 class="font-semibold text-gray-900 mb-2">Wichtige Hinweise:</h4>
|
|
<ul class="text-sm text-gray-700 space-y-1">
|
|
<li>• Die Mitgliedschaft im Harheimer Tischtennis-Club erlangt erst nach Bestätigung durch den Vorstand Wirksamkeit.</li>
|
|
<li>• Die Beitragspflicht beginnt mit dem darauf folgenden Monat.</li>
|
|
<li>• Sie können Ihre Einwilligung zur Datenveröffentlichung jederzeit widerrufen.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex justify-center pt-6">
|
|
<button
|
|
type="submit"
|
|
id="submitBtn"
|
|
class="px-8 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
|
|
>
|
|
<svg v-if="isGenerating" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Beitrittsformular erstellen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Noch Fragen Box -->
|
|
<div class="mt-12 bg-gradient-to-r from-primary-600 to-primary-700 rounded-2xl p-8 sm:p-12 text-center">
|
|
<h3 class="text-3xl font-display font-bold text-white mb-4">
|
|
Noch Fragen zur Mitgliedschaft?
|
|
</h3>
|
|
<p class="text-xl text-primary-100 mb-6">
|
|
Kontaktieren Sie uns - wir beraten Sie gerne persönlich
|
|
</p>
|
|
<a
|
|
href="/kontakt"
|
|
class="inline-flex items-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
Jetzt Kontakt aufnehmen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Einfaches JavaScript ohne Vue.js-Reaktivität
|
|
onMounted(() => {
|
|
const form = document.getElementById('membershipForm')
|
|
const submitBtn = document.getElementById('submitBtn')
|
|
|
|
// Formular absenden
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault()
|
|
|
|
submitBtn.disabled = true
|
|
submitBtn.textContent = 'Formular wird erstellt...'
|
|
|
|
try {
|
|
const formData = new FormData(form)
|
|
const data = Object.fromEntries(formData.entries())
|
|
|
|
// Volljährigkeit prüfen
|
|
const birthDate = new Date(data.geburtsdatum)
|
|
const today = new Date()
|
|
const age = today.getFullYear() - birthDate.getFullYear()
|
|
const monthDiff = today.getMonth() - birthDate.getMonth()
|
|
data.isVolljaehrig = age > 18 || (age === 18 && monthDiff >= 0)
|
|
|
|
const response = await fetch('/api/membership/generate-pdf', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (result.success) {
|
|
// PDF herunterladen
|
|
const downloadResponse = await fetch(result.downloadUrl)
|
|
const blob = await downloadResponse.blob()
|
|
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `beitrittserklärung_${Date.now()}.pdf`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
window.URL.revokeObjectURL(url)
|
|
document.body.removeChild(a)
|
|
|
|
alert('Beitrittsformular erfolgreich erstellt und heruntergeladen!')
|
|
} else {
|
|
alert('Fehler beim Erstellen des Formulars: ' + (result.error || 'Unbekannter Fehler'))
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler:', error)
|
|
alert('Fehler beim Senden des Formulars: ' + error.message)
|
|
} finally {
|
|
submitBtn.disabled = false
|
|
submitBtn.textContent = 'Beitrittsformular erstellen'
|
|
}
|
|
})
|
|
})
|
|
</script> |