Pingu/Fuyuzakura
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Helfer/helfer.html hinzugefügt

Browse Source
This commit is contained in:
Pingu
2026-07-20 20:30:55 +00:00
parent e343077576
commit 487183b988
1 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Helfer/helfer.html
+147
View File
@@ -0,0 +1,147 @@
<div id="sny-volunteer-frontend">
<div class="sny-form-card">
<div class="form-header">
<h2>Volunteer Anmeldung</h2>
<p>Fülle deine Daten aus – wir bereiten dein Dokument zur digitalen Unterschrift vor.</p>
</div>
<form id="volunteer-prefill-form" action="DEIN URL" method="POST">
<div class="hp-field-wrap" style="display:none !important;" aria-hidden="true">
<input type="text" name="website_hp" autocomplete="off" tabindex="-1">
</div>
<h3 class="section-title"><span>1.</span> Persönliche Daten</h3>
<div class="form-grid">
<div class="field-wrap"><label>Vorname</label><input type="text" name="vorname" required=""></div>
<div class="field-wrap"><label>Nachname</label><input type="text" name="nachname" required=""></div>
<div class="field-wrap"><label>Geburtsdatum</label><input type="text" name="geburtstag" placeholder="TT.MM.JJJJ" required=""></div>
<div class="field-wrap"><label>T-Shirt Größe</label><input type="text" name="tshirt" placeholder="z.B. M"></div>
<div class="field-wrap full-width"><label>Straße &amp; Hausnummer</label><input type="text" name="strasse" required=""></div>
<div class="field-wrap full-width"><label>PLZ &amp; Ort</label><input type="text" name="plz_ort" required=""></div>
<div class="field-wrap"><label>E-Mail Adresse</label><input type="email" name="email" required=""></div>
<div class="field-wrap"><label>Handy (WhatsApp)</label><input type="text" name="handy" placeholder="+49 ..."></div>
<div class="field-wrap full-width feature-box discord-box">
<label>Discord Nutzername <span class="required-asterisk">*</span></label>
<input type="text" name="discord_name" id="discord_name" placeholder="z.B. username oder user#1234" required="">
</div>
<div class="field-wrap full-width feature-box emergency-box">
<label>Notfallkontakt <span class="required-asterisk">*</span></label>
<input type="text" name="notfall" placeholder="Name &amp; Telefonnummer" required="">
</div>
</div>
<h3 class="section-title"><span>2.</span> Verfügbarkeit &amp; Bereiche</h3>
<div class="selection-container">
<p class="selection-title">Wann kannst du?</p>
<div class="badge-notice">💡 Du musst nicht die volle Zeit helfen!</div>
<div class="checkbox-group">
<label class="custom-check"><input type="checkbox" name="tage[]" value="Fr"> <span>Freitag (15:00 - 20:00 Uhr)</span></label>
<label class="custom-check"><input type="checkbox" name="tage[]" value="Sa"> <span>Samstag (08:00 - 23:00 Uhr)</span></label>
</div>
</div>
<div class="selection-container">
<p class="selection-title">Wo möchtest du helfen?</p>
<div class="areas-grid-web">
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Kasse"> <span>Einlass / Kasse</span></label>
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Security"> <span>Security / Ordner</span></label>
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Info"> <span>Info-Point</span></label>
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Catering"> <span>Catering</span></label>
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Technik"> <span>Bühnentechnik</span></label>
<label class="custom-check"><input type="checkbox" name="bereiche[]" value="Springer"> <span>Springer / Allrounder</span></label>
</div>
</div>
<h3 class="section-title"><span>3.</span> Fähigkeiten &amp; Verpflegung</h3>
<div class="form-grid">
<div class="field-wrap full-width">
<label>Fähigkeiten / Ersthelfer / Führerschein</label>
<input type="text" name="skills" placeholder="z.B. Erste-Hilfe-Schein, handwerklich begabt...">
</div>
<div class="field-wrap"><label>Essen (Veggie/Vegan?)</label><input type="text" name="essen" placeholder="Deine Präferenz"></div>
<div class="field-wrap"><label>Allergien / Unverträglichkeiten</label><input type="text" name="allergien" placeholder="Falls ja, welche?"></div>
</div>
<h3 class="section-title"><span>4.</span> Rechtliches &amp; Kontakt</h3>
<div class="legal-container">
<label class="custom-check legal-check">
<input type="checkbox" name="einwilligung" value="1" required="">
<span>Ich stimme der Datenspeicherung und den Weisungen zu. <span class="required-asterisk">*</span></span>
</label>
<div class="divider"></div>
<label class="custom-check">
<input type="checkbox" name="discord_role" id="discord_role" value="1">
<span>
<strong>Ich bin bereits auf dem Discord-Server.</strong><br>
<span class="sub-text">Bitte weist mir automatisch die Helfer-Rolle zu.</span>
</span>
</label>
<label class="custom-check mt-2">
<input type="checkbox" name="whatsapp" value="1">
<span>Ich möchte in die Helfer-WhatsApp-Gruppe aufgenommen werden.</span>
</label>
</div>
<button type="submit" class="btn-submit" id="submit-btn">
<span>Daten prüfen &amp; Signatur starten</span>
<span class="arrow">➔</span>
</button>
</form>
</div>
</div>
<style>
#sny-volunteer-frontend { font-family: 'Inter', 'Segoe UI', sans-serif; max-width: 800px; margin: 40px auto; color: #2d3748; line-height: 1.6; }
#sny-volunteer-frontend * { box-sizing: border-box; }
.sny-form-card { background: #ffffff; padding: 40px 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid #edf2f7; }
.form-header { text-align: center; margin-bottom: 35px; }
.form-header h2 { color: #e94598; font-size: 2.2em; margin: 0 0 10px 0; font-weight: 800; letter-spacing: -0.5px; }
.form-header p { color: #718096; font-size: 1.05em; margin: 0; }
.section-title { color: #3250a0; font-size: 1.25em; font-weight: 700; margin: 35px 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #edf2f7; display: flex; align-items: center; gap: 10px; }
.section-title span { background: #e2e8f0; color: #4a5568; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: span 2; }
.field-wrap label { display: block; font-size: 0.9em; font-weight: 600; margin-bottom: 8px; color: #4a5568; }
.field-wrap input[type="text"], .field-wrap input[type="email"] { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; font-size: 1em; transition: all 0.25s ease; color: #2d3748; }
.field-wrap input:focus { outline: none; border-color: #e94598; background: #fff; box-shadow: 0 0 0 4px rgba(233, 69, 152, 0.1); }
.required-asterisk { color: #e53e3e; }
.feature-box { padding: 18px 20px; border-radius: 12px; }
.discord-box { background: #f0f4ff; border: 1px solid #c3d4ff; }
.emergency-box { background: #fff5f7; border: 1px solid #fed7e2; }
.selection-container { background: #f8fafc; padding: 22px; border-radius: 14px; margin-bottom: 20px; border: 1px solid #edf2f7; }
.selection-title { font-weight: 700; margin: 0 0 12px 0; color: #2d3748; }
.badge-notice { display: inline-block; background: #eebfdd; color: #701a4e; font-size: 0.85em; font-weight: 600; padding: 4px 10px; border-radius: 6px; margin-bottom: 15px; }
.checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.areas-grid-web { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.custom-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
.custom-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: #e94598; cursor: pointer; }
.custom-check span { font-size: 0.95em; font-weight: 500; color: #4a5568; }
.legal-container { background: #fff; border: 2px solid #edf2f7; padding: 25px; border-radius: 14px; }
.divider { height: 1px; background: #edf2f7; margin: 15px 0; }
.mt-2 { margin-top: 12px; }
.btn-submit { width: 100%; margin-top: 35px; padding: 18px; background: linear-gradient(135deg, #e94598 0%, #ba2b8c 100%); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 1.15em; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(233, 69, 152, 0.3); }
.btn-submit:disabled { background: #cbd5e0; cursor: not-allowed; }
.hp-field-wrap { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
@media (max-width: 600px) {
.sny-form-card { padding: 25px 20px; }
.form-grid, .areas-grid-web { grid-template-columns: 1fr; }
.full-width { grid-column: span 1; }
}
</style>
<script>
document.getElementById('volunteer-prefill-form').addEventListener('submit', function() {
const btn = document.getElementById('submit-btn');
btn.disabled = true;
btn.innerHTML = "<span>Wird vorbereitet... ⌛</span>";
});
</script>