237 lines
11 KiB
HTML
237 lines
11 KiB
HTML
<div id="sny-dealer-wrapper">
|
||
|
||
<div class="sny-info-header">
|
||
<div class="schedule-box">
|
||
<strong>📅 Zeitplan:</strong><br>
|
||
Aufbau: Freitag, 9:00 – 17:00 Uhr<br>
|
||
Veranstaltung: Samstag, 09:00 – 20:00 Uhr<br>
|
||
Abbau: Samstag 20-22.30 Uhr
|
||
</div>
|
||
<p class="small-note" style="margin-top:10px;">Hinweis: Im Standpreis sind 2 Ausstellerausweise enthalten. | Hinweis zu Tischgrößen: ca. 100 x 60 cm</p>
|
||
</div>
|
||
|
||
<div class="sny-form-card">
|
||
<form id="dealer-form" action="/process_form.php" method="POST" oninput="calculateTotal()">
|
||
|
||
<input type="hidden" name="template_id" value="2">
|
||
|
||
<h3 class="form-section-title">1. Ausstellerdaten</h3>
|
||
<div class="form-grid">
|
||
<div class="field-group full-width">
|
||
<label>Name des Standes / Künstlers:</label>
|
||
<input type="text" name="shop_name" placeholder="Wie heißt dein Shop?" required="">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Ansprechpartner (Vor- & Nachname):</label>
|
||
<input type="text" name="contact_name" placeholder="Max Mustermann" required="">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Steuernummer (Pflicht bei Händlern):</label>
|
||
<input type="text" name="tax_id" placeholder="123/456/789">
|
||
</div>
|
||
<div class="field-group full-width">
|
||
<label>Anschrift (Straße, PLZ, Ort):</label>
|
||
<input type="text" name="address" placeholder="Musterstraße 1, 12345 Stadt" required="">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>E-Mail:</label>
|
||
<input type="email" name="email" placeholder="mail@example.com" required="">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Telefon (für Rückfragen):</label>
|
||
<input type="text" name="phone" placeholder="Mobilnummer">
|
||
</div>
|
||
<div class="field-group full-width">
|
||
<label>Kurze Beschreibung des Angebots:</label>
|
||
<input type="text" name="description" placeholder="Was verkaufst du? (Merch, Prints...)" required="">
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="form-section-title">2. Standfläche, Ausstattung & Strom</h3>
|
||
|
||
<div class="type-selection">
|
||
<label class="radio-card">
|
||
<input type="radio" name="stand_type" value="Händler" checked="" onclick="calculateTotal()">
|
||
<div>
|
||
<strong>Gewerblicher Händler</strong>
|
||
<div class="price-tag">85 € / Meter</div>
|
||
<div class="sub-price">Tischmiete: +10 € / Stk.</div>
|
||
</div>
|
||
</label>
|
||
<label class="radio-card">
|
||
<input type="radio" name="stand_type" value="Künstler" onclick="calculateTotal()">
|
||
<div>
|
||
<strong>Künstler / Artist</strong>
|
||
<div class="price-tag">30 € / Meter</div>
|
||
<div class="sub-price">Tischmiete: +5 € / Stk. | Strom inkl. (20 €)</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="calc-area">
|
||
<div class="calc-row">
|
||
<label>Benötigte Standmeter:</label>
|
||
<div class="input-with-unit">
|
||
<input type="number" name="meters" id="meters" value="3" min="1" style="width: 80px;" onchange="calculateTotal()">
|
||
<span>m</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-row">
|
||
<label>Miet-Tische gewünscht?</label>
|
||
<div class="input-with-unit">
|
||
<input type="number" name="tables" id="tables" value="0" min="0" style="width: 80px;" onchange="calculateTotal()">
|
||
<span>Stk</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-row" id="power-row">
|
||
<label>Strompauschale:</label>
|
||
<div class="power-options">
|
||
<label><input type="radio" name="power_option" value="kein" checked="" onclick="calculateTotal()"> Keine</label>
|
||
<label><input type="radio" name="power_option" value="klein" onclick="calculateTotal()"> Klein (25 €)</label>
|
||
<label><input type="radio" name="power_option" value="gross" onclick="calculateTotal()"> Groß (50 €)</label>
|
||
</div>
|
||
</div>
|
||
<div id="artist-power-info" style="font-size: 0.85em; color: #666; font-style: italic; margin-top: -5px; margin-bottom: 15px; display: none;">
|
||
* Für Künstler ist die Strompauschale fix in Höhe von 20,00 € enthalten.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="total-box">
|
||
<span style="font-size: 0.9em;">Voraussichtliche Standgebühr:</span>
|
||
<div id="total-display">135,00 €</div>
|
||
|
||
<input type="hidden" name="total_price" id="hidden_total_price" value="135,00 €">
|
||
</div>
|
||
<div style="clear:both; height:1px;"></div>
|
||
|
||
<h3 class="form-section-title">3. Bestätigung</h3>
|
||
<div class="legal-check">
|
||
<input type="text" name="website_hp" style="display:none !important" tabindex="-1" autocomplete="off">
|
||
|
||
<label class="checkbox-option">
|
||
<input type="checkbox" name="confirm_terms" required="">
|
||
<span>Ich erkenne die Teilnahmebedingungen und die Marktordnung des Sakura No Yume e.V an.</span>
|
||
</label>
|
||
<label class="checkbox-option">
|
||
<input type="checkbox" name="confirm_privacy" required="">
|
||
<span>Ich willige in die Datenspeicherung zur Vertragsabwicklung ein.</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="sny-action-area">
|
||
<p class="hint-text" style="margin-bottom:15px;">Mit Klick auf den Button wird der Vertrag erstellt.</p>
|
||
<button type="submit" id="submit-btn" class="btn-print" style="width:100%; max-width:400px;">✍️ Weiter zur Unterschrift</button>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
#sny-dealer-wrapper { font-family: 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto; color: #333; }
|
||
.sny-info-header { text-align: center; margin-bottom: 30px; }
|
||
.schedule-box { background: #f0f0f5; padding: 15px; border-radius: 8px; border: 1px solid #ddd; display: inline-block; text-align: left; font-size: 0.95em; }
|
||
.small-note { font-size: 0.85em; color: #666; font-style: italic; }
|
||
|
||
.sny-form-card { background: #fff; padding: 40px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
|
||
|
||
.form-section-title { color: #8a2be2; border-bottom: 2px solid #eee; margin-top: 30px; margin-bottom: 15px; padding-bottom: 5px; }
|
||
|
||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
|
||
.full-width { grid-column: span 2; }
|
||
|
||
.field-group { display: flex; flex-direction: column; }
|
||
.field-group label { font-size: 0.85em; font-weight: bold; margin-bottom: 4px; }
|
||
.field-group input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; background: #fafafa; }
|
||
|
||
.type-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||
.radio-card {
|
||
display: flex; align-items: center; gap: 10px;
|
||
border: 2px solid #eee; padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.radio-card:hover { border-color: #e94598; background: #fff0f8; }
|
||
.radio-card input:checked + div { color: #e94598; }
|
||
|
||
.price-tag { font-size: 1.2em; font-weight: bold; color: #333; }
|
||
.sub-price { font-size: 0.85em; color: #666; }
|
||
|
||
.calc-area { background: #f9f9f9; padding: 20px; border-radius: 8px; }
|
||
.calc-row { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
|
||
.input-with-unit input { padding: 8px; text-align: center; font-size: 1.1em; border: 1px solid #ccc; border-radius: 4px; }
|
||
.power-options { display: flex; gap: 15px; font-size: 0.95em; }
|
||
|
||
.total-box {
|
||
background: #8a2be2; color: white; padding: 15px; margin-top: 20px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 1.5em; font-weight: bold; border-radius: 8px;
|
||
}
|
||
|
||
.legal-check { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
|
||
.checkbox-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.95em; }
|
||
.checkbox-option input { margin-top: 4px; }
|
||
|
||
.sny-action-area { text-align: center; margin-top: 40px; padding: 20px; background: #f0f0f5; border-radius: 8px; }
|
||
.btn-print { background: #e94598; color: white; border: none; padding: 15px 30px; font-size: 1.2em; border-radius: 50px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
|
||
.btn-print:hover { background: #d63384; }
|
||
.btn-print:disabled { background: #ccc; cursor: not-allowed; }
|
||
</style>
|
||
|
||
<script>
|
||
function calculateTotal() {
|
||
let pricePerMeter = 85;
|
||
let pricePerTable = 10;
|
||
let powerCost = 0;
|
||
|
||
const typeInputs = document.getElementsByName('stand_type');
|
||
let selectedType = "Händler";
|
||
|
||
for(let i = 0; i < typeInputs.length; i++){
|
||
if(typeInputs[i].checked){
|
||
selectedType = typeInputs[i].value;
|
||
}
|
||
}
|
||
|
||
const powerRow = document.getElementById('power-row');
|
||
const artistInfo = document.getElementById('artist-power-info');
|
||
|
||
if (selectedType === "Künstler") {
|
||
pricePerMeter = 30;
|
||
pricePerTable = 5;
|
||
powerCost = 20;
|
||
|
||
powerRow.style.display = "none";
|
||
artistInfo.style.display = "block";
|
||
} else {
|
||
powerRow.style.display = "flex";
|
||
artistInfo.style.display = "none";
|
||
|
||
const powerInputs = document.getElementsByName('power_option');
|
||
for(let j = 0; j < powerInputs.length; j++){
|
||
if(powerInputs[j].checked){
|
||
if(powerInputs[j].value === "klein") powerCost = 25;
|
||
if(powerInputs[j].value === "gross") powerCost = 50;
|
||
}
|
||
}
|
||
}
|
||
|
||
let meters = parseFloat(document.getElementById('meters').value) || 0;
|
||
let tables = parseFloat(document.getElementById('tables').value) || 0;
|
||
|
||
let total = (meters * pricePerMeter) + (tables * pricePerTable) + powerCost;
|
||
|
||
let totalString = total.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
|
||
|
||
document.getElementById('total-display').innerText = totalString;
|
||
document.getElementById('hidden_total_price').value = totalString;
|
||
}
|
||
|
||
document.getElementById('dealer-form').onsubmit = function() {
|
||
const btn = document.getElementById('submit-btn');
|
||
btn.disabled = true;
|
||
btn.innerHTML = "⌛ Verarbeite...";
|
||
};
|
||
|
||
window.onload = calculateTotal;
|
||
</script> |