135 lines
6.3 KiB
HTML
135 lines
6.3 KiB
HTML
<div class="container wrapper maincontent">
|
|
<div class="row g-5">
|
|
<div class="col-md-5 col-lg-4 order-md-last">
|
|
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-success">Dein Einkaufswagen</span>
|
|
<span class="badge bg-success rounded-pill" id="gesamtMengeCart"></span>
|
|
</h4>
|
|
<ul class="list-group mb-3" id="productListSideways">
|
|
|
|
</ul>
|
|
|
|
<form class="card p-2">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Promo code">
|
|
<button type="submit" class="btn btn-secondary">Redeem</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-7 col-lg-8">
|
|
<h4 class="mb-3">Ihre angegebene Adresse:</h4>
|
|
<form class="needs-validation" novalidate="">
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label for="firstName" class="form-label">Vorname</label>
|
|
<input type="text" class="form-control" id="firstName" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Valid first name is required.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label for="lastName" class="form-label">Nachname</label>
|
|
<input type="text" class="form-control" id="lastName" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Valid last name is required.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label for="address" class="form-label">Address</label>
|
|
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
|
|
<div class="invalid-feedback">
|
|
Please enter your shipping address.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-4">
|
|
<label for="state" class="form-label">Stadt</label>
|
|
<input type="text" class="form-control" id="city" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Please provide a valid state.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label for="zip" class="form-label">Zip</label>
|
|
<input type="text" class="form-control" id="zip" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Zip code required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<!--
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="same-address">
|
|
<label class="form-check-label" for="same-address">Shipping address is the same as my billing
|
|
address</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="save-info">
|
|
<label class="form-check-label" for="save-info">Save this information for next time</label>
|
|
</div>
|
|
-->
|
|
|
|
<h4 class="mb-3">Bezahlung</h4>
|
|
|
|
<div class="my-3">
|
|
<div class="form-check">
|
|
<input id="credit" name="paymentMethod" type="radio" checked="checked" required="" onclick="javascript:paymentTypeClicked()">
|
|
<label class="form-check-label" for="credit">Kreditkarte</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="lieferung" name="paymentMethod" type="radio" required="" onclick="javascript:paymentTypeClicked()">
|
|
<label class="form-check-label" for="lieferung">Bei Lieferung (Bar oder Karte)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row gy-3" id="creditCardData">
|
|
<div class="col-md-6">
|
|
<label for="cc-name" class="form-label">Name auf der Karte</label>
|
|
<input type="text" class="form-control" id="cc-name" placeholder="" required="">
|
|
<small class="text-muted">Vor und Nachname wie auf der Karte ersichtlich</small>
|
|
<div class="invalid-feedback">
|
|
Name on card is required
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="cc-number" class="form-label">Kreditkartennummer</label>
|
|
<input type="text" class="form-control" id="cc-number" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Credit card number is required
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label for="cc-expiration" class="form-label">Ablaufdatum</label>
|
|
<input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Expiration date required
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label for="cc-cvv" class="form-label">CVV</label>
|
|
<input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
|
|
<div class="invalid-feedback">
|
|
Security code required
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<button class="w-100 btn btn-success btn-lg" id="submitOrder">Bestellung aufgeben</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../js/checkout.js"></script> |