Aaron/Kino-Website
2
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added assets, started actual work on making this a proper multi file webapp. gonna continue tonight

Browse Source
This commit is contained in:
Jannis Heydemann
2026-04-30 12:30:54 +02:00
parent 23d5a75891
commit e72f8a4f1f
104 changed files with 8799 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/CheckoutView.astro Normal file
View File

@@ -0,0 +1,52 @@
<section id="checkout-view" class="hidden" style="padding: 40px 20px;">
<div class="checkout-container">
<div class="progress-bar">
<div class="step active" id="step-1-indicator">1</div>
<div class="line" id="line-1"></div>
<div class="step" id="step-2-indicator">2</div>
<div class="line" id="line-2"></div>
<div class="step" id="step-3-indicator">3</div>
</div>
<div id="checkout-step-1" class="checkout-step">
<h2 style="text-align: center; margin-bottom: 20px;">Zahlungsmethode wählen</h2>
<div class="payment-grid">
<div class="payment-method" data-method="Apple Pay">
<img src="/img/applepay.png" alt="Apple Pay" style="height: 20px;">
<span>Apple Pay</span>
</div>
<div class="payment-method" data-method="PayPal">
<img src="/img/paypal.png" alt="PayPal" style="height: 20px;">
<span>PayPal</span>
</div>
<div class="payment-method" data-method="Google Pay">
<img src="/img/googlepay.png" alt="Google Pay" style="height: 20px;">
<span>Google Pay</span>
</div>
<div class="payment-method" data-method="Visa">
<img src="/img/visa.png" alt="Visa" style="height: 20px;">
<span>Visa</span>
</div>
</div>
<button id="btn-next-step-2" class="hidden" style="margin-top: 25px; width: 100%; padding: 15px; background: #0071e3; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Weiter zur Übersicht</button>
</div>
<div id="checkout-step-2" class="checkout-step hidden">
<div style="position: relative;">
<button id="btn-back-to-step1" style="position: absolute; top: -15px; left: 0; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.6; transition: 0.3s;">&larr;</button>
<h2 style="text-align: center; margin-bottom: 25px;">Persönliche Daten</h2>
</div>
<h2 style="text-align: center; margin-bottom: 20px;">Bestellübersicht</h2>
<div id="checkout-summary-list" style="background: #222; padding: 15px; border-radius: 8px;"></div>
<h3 id="checkout-total-display" style="text-align: right; margin-top: 15px;"></h3>
<div id="checkout-vat-display" style="text-align: right; color: #86868b; font-size: 0.8rem;"></div>
<button id="btn-pay-now" style="margin-top: 25px; width: 100%; padding: 15px; background: #4caf50; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">Jetzt Bezahlen</button>
</div>
<div id="checkout-step-3" class="checkout-step hidden">
<h2 style="color: #4caf50; text-align: center;">Kauf erfolgreich!</h2>
<div id="ticket-container" style="margin-top: 30px;"></div>
<button id="btn-back-home" style="margin-top: 30px; width: 100%; padding: 15px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer;">Zurück zur Startseite</button>
</div>
</div>
</section>