diff --git a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
index c46de63..d5c4527 100644
--- a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
+++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
@@ -37,6 +37,12 @@ public class RequestController {
return "greeting";
}
+ @GetMapping("/articledetail")
+ public String articledetail() { return "articledetail";}
+
+ @GetMapping("/searchresults")
+ public String searchresults() { return "searchresults";}
+
@GetMapping("/login")
public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
model.addAttribute(new Customer());
diff --git a/prototype/src/main/resources/static/css/articleDetail.css b/prototype/src/main/resources/static/css/articleDetail.css
new file mode 100644
index 0000000..ad62913
--- /dev/null
+++ b/prototype/src/main/resources/static/css/articleDetail.css
@@ -0,0 +1,26 @@
+.articledetail {
+ max-width: 100%;
+ padding: 2em;
+ background-color: var(--root-c-secondary);
+}
+
+.availability {
+ color: var(--c-primary);
+}
+
+.checkout {
+ border: 0px;
+ border-left: 2px;
+ border-color: var(--c-white);
+ border-style: solid;
+}
+
+.quantity {
+ display: flex;
+}
+
+.quantity label {
+ min-width: 5em;
+ margin-bottom: 0px;
+ padding-left: 15px;
+}
\ No newline at end of file
diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index 1d63c08..fe32f77 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -384,7 +384,7 @@ label {
box-shadow: none;
}
-.input-icon > button {
+.input-icon > form > button {
margin: 0px;
border-top-left-radius: 0px;
@@ -393,6 +393,8 @@ label {
}
+
+
/*
* CONTENT
*/
@@ -427,6 +429,3 @@ label {
}
-.container {
- padding: 16px;
-}
diff --git a/prototype/src/main/resources/static/css/searchResults.css b/prototype/src/main/resources/static/css/searchResults.css
new file mode 100644
index 0000000..b36808d
--- /dev/null
+++ b/prototype/src/main/resources/static/css/searchResults.css
@@ -0,0 +1,56 @@
+.container {
+
+}
+
+.searchresults {
+ max-width: 100%;
+ padding: 2em;
+ background-color: var(--root-c-secondary);
+ border: 0px;
+}
+
+.sidebar {
+ border: 0px;
+ border-right: 2px;
+ border-style: solid;
+ border-color: white;
+}
+
+.articlelist {
+ background-color: var(--root-c-secondary);
+}
+
+.article {
+ padding: 1em;
+}
+
+img {
+ width: 75%
+}
+
+h2 {
+ padding-bottom: 0px;
+}
+
+.articlelink {
+ color: var(--c-white);
+ background-color: var(--root-c-secondary);
+ border: 0px;
+}
+
+.articlelink:hover {
+ color: var(--c-primary)
+}
+
+h1 {
+ padding: 0px;
+ padding-bottom: 0.5em;
+}
+
+hr {
+ border-top: 2px solid white;
+ width: 75%;
+ margin: auto;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/articleDetail.html b/prototype/src/main/resources/templates/articleDetail.html
new file mode 100644
index 0000000..74cfa30
--- /dev/null
+++ b/prototype/src/main/resources/templates/articleDetail.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr">
+<head>
+ <meta charset="utf-8">
+ <title>e-commerce</title>
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+ <link href="/css/ecom.css" rel="stylesheet"/>
+ <link href="/css/articleDetail.css" rel="stylesheet"/>
+</head>
+<body>
+<nav class='hero'>
+ <div class='content-width flex'>
+ <h1>Project eCommerce</h1>
+ <button>Angebote</button>
+ <div class='spacer input-icon secondary'>
+ <input type="text" placeholder="Nach Produkten suchen..."/>
+ <form action="/searchresults" method="GET">
+ <button class='searchbutton' type="submit">Finden</button>
+ </form>
+ </div>
+
+ <form class="button" action="/login" method="GET">
+ <button type="submit">Login</button>
+ </form>
+ </div>
+</nav>
+<main>
+ <div class="hero">
+ <div class="articledetail">
+ <div class="row">
+ <div class="picture col-4">
+ <img src="/img/product-1.jpg" />
+ </div>
+ <div class="articleinfo col-6">
+ <h2>Tolle Kamera</h2>
+ <p>25.14 €</p>
+ <p>
+ Eine TOLLE Kamera <br>
+ Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
+ Aber glaub mir, sie is echt echt TOLL! <br>
+ Indianerehrenwort!
+ </p>
+ </div>
+ <div class="checkout col-2">
+ <h2>50.28 €</h2>
+ <p class="availability">Auf Lager</p>
+ <br>
+ <form>
+ <div class="quantity row">
+ <label>Menge:</label>
+ <select size="1">
+ <option>2</option>
+ </select>
+ </div>
+ </form>
+ <br>
+ <br>
+ <button>In den Einkaufswagen</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</main>
+<footer class="hero-black">
+ <div class='content-width flex'>
+ <h3>Project eCommerce</h3>
+ <div class="spacer"></div>
+ <div>
+ <h4>Seite</h4>
+ <ul>
+ <li><a>Login</a></li>
+ <li><a>Angebote</a></li>
+ <li><a>Suche</a></li>
+ <li><a>Mitarbeiter Login</a></li>
+ </ul>
+ </div>
+ <div>
+ <h4>Mehr</h4>
+ <ul>
+ <li><a>Nutzungsbedingungen</a></li>
+ <li><a>Datenschutz</a></li>
+ <li><a>Über</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/fragments/header.html b/prototype/src/main/resources/templates/fragments/header.html
index c3678d2..a64acd6 100644
--- a/prototype/src/main/resources/templates/fragments/header.html
+++ b/prototype/src/main/resources/templates/fragments/header.html
@@ -11,7 +11,9 @@
<button>Angebote</button>
<div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/>
- <button>Finden</button>
+ <form class="button" th:action="@{/searchresults}" method="GET">
+ <button type="submit">Finden</button>
+ </form>
</div>
<form class="button" th:action="@{/login}" method="GET">
diff --git a/prototype/src/main/resources/templates/searchResults.html b/prototype/src/main/resources/templates/searchResults.html
new file mode 100644
index 0000000..cf69e77
--- /dev/null
+++ b/prototype/src/main/resources/templates/searchResults.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr">
+<head>
+ <meta charset="utf-8">
+ <title>e-commerce</title>
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+ <link href="/css/ecom.css" rel="stylesheet"/>
+ <link href="/css/searchResults.css" rel="stylesheet"/>
+</head>
+<body>
+<nav class='hero'>
+ <div class='content-width flex'>
+ <h1>Project eCommerce</h1>
+ <button>Angebote</button>
+ <div class='spacer input-icon secondary'>
+ <input type="text" placeholder="Nach Produkten suchen..."/>
+ <form action="/searchresults" method="GET">
+ <button class='searchbutton' type="submit">Finden</button>
+ </form>
+ </div>
+
+ <form class="button" action="/login" method="GET">
+ <button type="submit">Login</button>
+ </form>
+ </div>
+</nav>
+<main>
+ <div class="hero">
+ <div class="searchresults">
+ <div class="row">
+ <div class="sidebar col-2">
+ <h1>Kategorie</h1>
+ <ul>
+ <li><span>Aufnahmegeräte</span></li>
+ <li><span>Computer</span></li>
+ <li><span>Fernseher</span></li>
+ <li><span>Handys</span></li>
+ <li><span>Unterhaltungselektronik</span></li>
+ <li><span>Sonstiges</span></li>
+ </ul>
+ </div>
+ <div class="articlelist col-10">
+ <div class="row article">
+ <div class="col-3 articleimg">
+ <img src="/img/product-1.jpg" />
+ </div>
+ <div class="col-9 articledesc">
+ <h2>
+ <form action="/articledetail" method="GET">
+ <input type="submit" value="Tolle Kamera" class="articlelink">
+ </form>
+ </h2>
+ <h1> 25.14 €</h1>
+ <p>
+ Eine TOLLE Kamera <br>
+ Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
+ Aber glaub mir, sie is echt echt TOLL! <br>
+ Indianerehrenwort!
+ </p>
+ </div>
+ </div>
+ <hr>
+ <div class="row article">
+ <div class="col-3 articleimg">
+ <img src="/img/product-2.jpg" />
+ </div>
+ <div class="col-9 articledesc">
+ <h2>
+ <form action="/articledetail" method="GET">
+ <input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
+ </form>
+ </h2>
+ <h1> 10.14 €</h1>
+ <p>
+ Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
+ </p>
+ </div>
+ </div>
+ <hr>
+ <div class="row article">
+ <div class="col-3 articleimg">
+ <img src="/img/product-3.jpg" />
+ </div>
+ <div class="col-9 articledesc">
+ <h2>
+ <form action="/articledetail" method="GET">
+ <input type="submit" value="???" class="articlelink">
+ </form>
+ </h2>
+ <h1> 44.14 €</h1>
+ <p>
+ Ich weiß selbst nich was das genau sein soll.<br>
+ Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</main>
+<footer class="hero-black">
+ <div class='content-width flex'>
+ <h3>Project eCommerce</h3>
+ <div class="spacer"></div>
+ <div>
+ <h4>Seite</h4>
+ <ul>
+ <li><a>Login</a></li>
+ <li><a>Angebote</a></li>
+ <li><a>Suche</a></li>
+ <li><a>Mitarbeiter Login</a></li>
+ </ul>
+ </div>
+ <div>
+ <h4>Mehr</h4>
+ <ul>
+ <li><a>Nutzungsbedingungen</a></li>
+ <li><a>Datenschutz</a></li>
+ <li><a>Über</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
+</body>
+</html>
\ No newline at end of file