181 lines
6.7 KiB
HTML
181 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Checkout</title>
|
|
<link rel="stylesheet" th:href="@{/css/ecom.css}" />
|
|
<link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
|
|
<script th:src="@{/js/filterTable.js}"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<nav th:replace="fragments/header :: header">Header</nav>
|
|
<div class="sidebar-layout content-width">
|
|
<div>
|
|
<h1>Warenkorb</h1>
|
|
</div>
|
|
<nav></nav>
|
|
</div>
|
|
<!-- TODO: this is suboptimal on mobile -->
|
|
<main class="content-width sidebar-layout">
|
|
<div style="min-height: 100vh;">
|
|
<table>
|
|
<tr>
|
|
<th>Bild</th>
|
|
<th>Name</th>
|
|
<th>Preis (Brutto)</th>
|
|
<th>Menge</th>
|
|
<th></th>
|
|
</tr>
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s" /><a /></td>
|
|
<td><a th:href="@{/shop/articles/4151}">Kamera<a /></td>
|
|
<td>100,50 EUR</td>
|
|
<td>
|
|
<select size="1">
|
|
<option value="1" selected>1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button class="small">Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-2.jpg}" class="s" /><a /></td>
|
|
<td><a th:href="@{/shop/articles/4151}">Earbuds<a /></td>
|
|
<td>63,95 EUR</td>
|
|
<td>
|
|
<select size="1">
|
|
<option value="1" selected>1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button>Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-3.jpg}" class="s" /><a /></td>
|
|
<td><a th:href="@{/shop/articles/4151}">USB-Magic Light<a /></td>
|
|
<td>11,90 EUR</td>
|
|
<td>
|
|
<select size="1">
|
|
<option value="1">1</option>
|
|
<option value="2" selected>2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button>Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-4.jpg}" class="s" /><a /></td>
|
|
<td><a th:href="@{/shop/articles/4151}">3D Magic Stativ<a /></td>
|
|
<td>15,99 EUR</td>
|
|
<td>
|
|
<select size="1">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5" selected>5</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button>Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-5.jpg}" class="s" /><a /></td>
|
|
<td><a th:href="@{/shop/articles/4151}">Ersatzfernbedinung<a /></td>
|
|
<td>7,95 EUR</td>
|
|
<td>
|
|
<select size="1">
|
|
<option value="1" selected>1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button>Entfernen</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<form method="POST" th:action="@{/shop/checkoutFinish}">
|
|
<div class="detailflex hero">
|
|
<div>
|
|
<h1>Checkout</h1>
|
|
</div>
|
|
<div>
|
|
<h2>Lieferadresse:</h2>
|
|
<textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz Optional: Unternehmen Straße Hausnummer Postleitzeit Ort Land">
|
|
Max Mustermann
|
|
Musterstraße 42
|
|
42424 Mustertal
|
|
</textarea>
|
|
</div>
|
|
<div>
|
|
<h2>Zahlung:</h2>
|
|
<fieldset>
|
|
<input type="radio" name="type" value="priv" id="payment-card" required checked>
|
|
<label for="payment-card">Kartenzahlung</label> <br />
|
|
<input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer" required />
|
|
</fieldset>
|
|
<fieldset>
|
|
<input class="" type="checkbox" id="bonus" name="bonus" checked/>
|
|
<label for="bonus"><h3>10 gesammelte Bonuspunkte verwenden</h3></label>
|
|
</fieldset>
|
|
</div>
|
|
<div>
|
|
<h2>Bestellübersicht</h2>
|
|
<!-- Dirty TODO: -->
|
|
<table>
|
|
<tr>
|
|
<th>Artikel (Netto)</th>
|
|
<th>200,29 EUR</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Bonuspunkte</th>
|
|
<th>-5,00 EUR</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Umsatzsteuer (19%)</th>
|
|
<th>35,00 EUR</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Umsatzsteuer (7%)</th>
|
|
<th>2,50 EUR</th>
|
|
</tr>
|
|
<tr class="secondary">
|
|
<th>Gesamt:</th>
|
|
<th>240,79 EUR</th>
|
|
</tr>
|
|
<tr class="secondary">
|
|
<th colspan="2" class=" no-padding"><button class=" no-margin secondary full-width">jetzt kostenpflichtig bestellen</button></th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
<footer th:replace="fragments/footer :: footer"></footer>
|
|
|
|
</body>
|
|
|
|
</html>
|