initial searchresult and detailview
This commit is contained in:
parent
0738a4402e
commit
213c5a2c94
|
@ -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());
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
Reference in New Issue