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

haendler-kuenstler/Händler+Künstler.html aktualisiert

Browse Source
This commit is contained in:
Pingu
2026-07-20 21:27:27 +00:00
parent a93be06fc1
commit 092c81a8fd
1 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
haendler-kuenstler/Händler+Künstler.html
+63 -13
View File
@@ -1,15 +1,20 @@
<div id="sny-dealer-wrapper">
<div class="sny-info-header">
<div class="schedule-box">
<strong>📅 Zeitplan:</strong><br>
Aufbau: Freitag, 7:00 – 16:00 Uhr<br>
Veranstaltung: Samstag, 09:00 – 19:00 Uhr<br>
Abbau direkt am Samstag
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.</p>
<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="/send_to_docuseal.php" method="POST" oninput="calculateTotal()">
<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">
@@ -41,7 +46,9 @@
<input type="text" name="description" placeholder="Was verkaufst du? (Merch, Prints...)" required="">
</div>
</div>
<h3 class="form-section-title">2. Standfläche &amp; Ausstattung</h3>
<h3 class="form-section-title">2. Standfläche, Ausstattung &amp; Strom</h3>
<div class="type-selection">
<label class="radio-card">
<input type="radio" name="stand_type" value="Händler" checked="" onclick="calculateTotal()">
@@ -56,10 +63,11 @@
<div>
<strong>Künstler / Artist</strong>
<div class="price-tag">30 € / Meter</div>
<div class="sub-price">Tischmiete: +5 € / Stk.</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>
@@ -68,6 +76,7 @@
<span>m</span>
</div>
</div>
<div class="calc-row">
<label>Miet-Tische gewünscht?</label>
<div class="input-with-unit">
@@ -75,15 +84,28 @@
<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 €">
<input type="hidden" name="csrf_token" value="&lt;?php echo $_SESSION['csrf_token']; ?&gt;">
</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">
@@ -97,13 +119,16 @@
<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; }
@@ -121,7 +146,6 @@
.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; }
/* Radio Cards */
.type-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.radio-card {
display: flex; align-items: center; gap: 10px;
@@ -133,10 +157,10 @@
.price-tag { font-size: 1.2em; font-weight: bold; color: #333; }
.sub-price { font-size: 0.85em; color: #666; }
/* Calculation */
.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;
@@ -144,12 +168,10 @@
font-size: 1.5em; font-weight: bold; border-radius: 8px;
}
/* Checkboxes */
.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; }
/* Action Area */
.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; }
@@ -160,28 +182,56 @@
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);
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>