update color and use fragments
This commit is contained in:
parent
96a1cc826d
commit
6985b22e82
@ -37,11 +37,11 @@ public class RequestController {
|
|||||||
return "greeting";
|
return "greeting";
|
||||||
}
|
}
|
||||||
|
|
||||||
@GetMapping("/articledetail")
|
@GetMapping("/articleDetail")
|
||||||
public String articledetail() { return "articledetail";}
|
public String articleDetail() { return "articleDetail";}
|
||||||
|
|
||||||
@GetMapping("/searchresults")
|
@GetMapping("/searchResults")
|
||||||
public String searchresults() { return "searchresults";}
|
public String searchResults() { return "searchResults";}
|
||||||
|
|
||||||
@GetMapping("/login")
|
@GetMapping("/login")
|
||||||
public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
|
public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
.articledetail {
|
.articledetail {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
background-color: var(--root-c-secondary);
|
background-color: var(--c-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.availability {
|
.availability {
|
||||||
color: var(--c-primary);
|
color: var(--root-c-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkout {
|
.checkout {
|
||||||
@ -24,3 +24,7 @@
|
|||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkout button {
|
||||||
|
background-color: var(--root-c-secondary);
|
||||||
|
}
|
@ -5,7 +5,7 @@
|
|||||||
.searchresults {
|
.searchresults {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
background-color: var(--root-c-secondary);
|
background-color: var(--c-white);
|
||||||
border: 0px;
|
border: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.articlelist {
|
.articlelist {
|
||||||
background-color: var(--root-c-secondary);
|
background-color: var(--c-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
@ -34,12 +34,12 @@ h2 {
|
|||||||
|
|
||||||
.articlelink {
|
.articlelink {
|
||||||
color: var(--c-white);
|
color: var(--c-white);
|
||||||
background-color: var(--root-c-secondary);
|
background-color: var(--c-white);
|
||||||
border: 0px;
|
border: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.articlelink:hover {
|
.articlelink:hover {
|
||||||
color: var(--c-primary)
|
color: var(--root-c-secondary)
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" dir="ltr">
|
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>e-commerce</title>
|
<title>e-commerce</title>
|
||||||
@ -8,81 +8,44 @@
|
|||||||
<link href="/css/articleDetail.css" rel="stylesheet"/>
|
<link href="/css/articleDetail.css" rel="stylesheet"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class='hero'>
|
<nav th:replace="fragments/header :: header">Header</nav>
|
||||||
<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="hero">
|
||||||
<div class="articledetail">
|
<main>
|
||||||
<div class="row">
|
<div class="articledetail">
|
||||||
<div class="picture col-4">
|
<div class="row">
|
||||||
<img src="/img/product-1.jpg" />
|
<div class="picture col-4">
|
||||||
</div>
|
<img src="/img/product-1.jpg" />
|
||||||
<div class="articleinfo col-6">
|
</div>
|
||||||
<h2>Tolle Kamera</h2>
|
<div class="articleinfo col-6">
|
||||||
<p>25.14 €</p>
|
<h2>Tolle Kamera</h2>
|
||||||
<p>
|
<p>25.14 €</p>
|
||||||
Eine TOLLE Kamera <br>
|
<p>
|
||||||
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
|
Eine TOLLE Kamera <br>
|
||||||
Aber glaub mir, sie is echt echt TOLL! <br>
|
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
|
||||||
Indianerehrenwort!
|
Aber glaub mir, sie is echt echt TOLL! <br>
|
||||||
</p>
|
Indianerehrenwort!
|
||||||
</div>
|
</p>
|
||||||
<div class="checkout col-2">
|
</div>
|
||||||
<h2>50.28 €</h2>
|
<div class="checkout col-2">
|
||||||
<p class="availability">Auf Lager</p>
|
<h2>50.28 €</h2>
|
||||||
<br>
|
<p class="availability">Auf Lager</p>
|
||||||
<form>
|
<br>
|
||||||
<div class="quantity row">
|
<form>
|
||||||
<label>Menge:</label>
|
<div class="quantity row">
|
||||||
<select size="1">
|
<label>Menge:</label>
|
||||||
<option>2</option>
|
<select size="1">
|
||||||
</select>
|
<option>2</option>
|
||||||
</div>
|
</select>
|
||||||
</form>
|
</div>
|
||||||
<br>
|
</form>
|
||||||
<br>
|
<br>
|
||||||
<button>In den Einkaufswagen</button>
|
<br>
|
||||||
|
<button>In den Einkaufswagen</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<footer th:replace="fragments/footer :: footer"></footer>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" dir="ltr">
|
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>e-commerce</title>
|
<title>e-commerce</title>
|
||||||
@ -8,22 +8,7 @@
|
|||||||
<link href="/css/searchResults.css" rel="stylesheet"/>
|
<link href="/css/searchResults.css" rel="stylesheet"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class='hero'>
|
<nav th:replace="fragments/header :: header">Header</nav>
|
||||||
<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>
|
<main>
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<div class="searchresults">
|
<div class="searchresults">
|
||||||
@ -46,7 +31,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-9 articledesc">
|
<div class="col-9 articledesc">
|
||||||
<h2>
|
<h2>
|
||||||
<form action="/articledetail" method="GET">
|
<form action="/articleDetail" method="GET">
|
||||||
<input type="submit" value="Tolle Kamera" class="articlelink">
|
<input type="submit" value="Tolle Kamera" class="articlelink">
|
||||||
</form>
|
</form>
|
||||||
</h2>
|
</h2>
|
||||||
@ -66,7 +51,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-9 articledesc">
|
<div class="col-9 articledesc">
|
||||||
<h2>
|
<h2>
|
||||||
<form action="/articledetail" method="GET">
|
<form action="/articleDetail" method="GET">
|
||||||
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
|
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
|
||||||
</form>
|
</form>
|
||||||
</h2>
|
</h2>
|
||||||
@ -83,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-9 articledesc">
|
<div class="col-9 articledesc">
|
||||||
<h2>
|
<h2>
|
||||||
<form action="/articledetail" method="GET">
|
<form action="/articleDetail" method="GET">
|
||||||
<input type="submit" value="???" class="articlelink">
|
<input type="submit" value="???" class="articlelink">
|
||||||
</form>
|
</form>
|
||||||
</h2>
|
</h2>
|
||||||
@ -99,28 +84,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="hero-black">
|
<footer th:replace="fragments/footer :: footer"></footer>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
Reference in New Issue
Block a user