2020-01-25 16:12:53 +01:00
<!DOCTYPE html>
< html lang = "de" dir = "ltr" xmlns:th = "http://www.thymeleaf.org" >
< head >
< meta charset = "utf-8" >
2020-01-25 16:41:11 +01:00
< title > Checkout< / title >
2020-01-25 16:12:53 +01:00
< 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 €< / 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 €< / 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 €< / 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 €< / 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 €< / 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 selected >
< label for = "payment-card" > Kartenzahlung< / label > < br / >
< input class = "full-width" type = "text" id = "cardnumber" name = "cardnumber" placeholder = "Kartennummer" required / >
< / fieldset >
< / div >
< div >
< h2 > Bestellübersicht< / h2 >
<!-- Dirty TODO: -->
< table >
< tr >
< th > Artikel (Netto)< / th >
< th > 200,29 €< / th >
< / tr >
< tr >
< th > Umsatzsteuer (19%)< / th >
< th > 35,00 €< / th >
< / tr >
< tr >
< th > Umsatzsteuer (7%)< / th >
< th > 2,50 €< / th >
< / tr >
< tr class = "secondary" >
< th > Gesamt:< / th >
< th > 240,79 €< / 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 >
