Studium
/
Internet-Technologien
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

+ Buchdetail Seite

This commit is contained in:
Johannes Theiner 2019-03-23 08:37:31 +01:00
parent 358f80ffe2
commit 1acd6b6546
3 changed files with 185 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/main/webapp/preview/book.html Normal file
View File

@ -0,0 +1,169 @@
<!Doctype html>
<html lang="de">
<head>
<title>Amazon light</title>
<script>
function getStylesheet() {
var dark = true;
if (dark) {
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
} else {
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
}
}
getStylesheet();
</script>
<noscript>
<link href="css/m-light.css" rel="stylesheet">
</noscript>
<link href="css/custom.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<nav id="navigation">
<div class="m-container">
<div class="m-row">
<a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Amazon light</a>
<a id="m-navbar-show" href="#navigation" title="Show navigation"
class="m-col-t-3 m-hide-m m-text-right"></a>
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
<div class="m-row">
<ol class="m-col-t-6 m-col-m-none">
<li><a href="#">Katalog</a></li>
<li><a href="#">(1) Warenkorb</a></li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="4">
<li>
<a href="#">Mein Account</a>
<ol>
<li><a href="#">Meine Bestellungen</a></li>
<li><a href="#">Adressen & Konten</a></li>
<li><a href="#">Abmelden</a></li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<div class="m-container">
<div class="m-row">
<div class="m-col-l-4">
<img class="m-image" src="https://source.unsplash.com/DxAzOKSiPoE/900x900" alt="Buchcover">
</div>
<div class="m-col-l-4">
<h1>Your soul is a river</h1>
<br>
<h2>Nikita Gill</h2>
<br>
<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</span>
</div>
<div class="m-col-l-4">
<div class="m-block">
<h3>19,99 &euro;</h3>
<br>
gewöhnlich versandfertig in <span class="m-text m-success">2-3 Tagen</span>
<br>
<br>
<div class="m-button m-success">
<a href="#">
<i class="fas fa-cart-plus"></i>
in den Warenkorb
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<nav>
<div class="m-container">
<div class="m-row">
<div class="m-col-s-3 m-col-t-6">
<h3>Hilfe</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Rückgabe</a></li>
</ul>
</div>
<div class="m-col-s-3 m-col-t-6">
<h3>Zahlung</h3>
<ul>
<li><a href="#">Kreditkarten</a></li>
<li><a href="#">Gutscheine</a></li>
<li><a href="#">Bankeinzug</a></li>
</ul>
</div>
<div class="m-clearfix-t"></div>
<div class="m-col-s-3 m-col-t-6">
<h3>Amazon light</h3>
<ul>
<li><a href="#">Über</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
<div class="m-col-s-3 m-col-t-6">
<h3><a href="#">Rechtliches</a></h3>
<ul>
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
</ul>
</div>
</div>
<div class="m-row">
<div class="m-col-l-10 m-push-l-1">
<p>Amazon light. Copyright &copy; <a href="#">B1</a>,
2019. All rights reserved.</p>
</div>
</div>
</div>
</nav>
</footer>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
})
});
</script>
</body>
</html>

27
src/main/webapp/preview/catalog.html
View File

@ -35,8 +35,8 @@
<div class=""> <div class="">
<div class="m-row"> <div class="m-row">
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a> <a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
<div class="m-button m-default m-col-t-1 m-push-l-10"> <div class="m-button m-flat m-col-t-1 m-push-l-8">
<a href="login.html"><span class="fas fa-user"> Anmelden/Registrieren</span></a> <a href="#"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
</div> </div>
</div> </div>
</div> </div>
@ -102,7 +102,7 @@
<div class="m-col-t-4"> <div class="m-col-t-4">
<figure class="m-figure"> <figure class="m-figure">
<img src="https://source.unsplash.com/OApHds2yEGQ/900x900" alt="Münzen"> <img src="https://source.unsplash.com/OApHds2yEGQ/900x900" alt="Münzen">
<figcaption>Finanzen</figcaption> <figcaption>Wirtschaft</figcaption>
</figure> </figure>
</div> </div>
<div class="m-col-t-4"> <div class="m-col-t-4">
@ -145,7 +145,7 @@
<div class="m-col-t-4"> <div class="m-col-t-4">
<figure class="m-figure"> <figure class="m-figure">
<img src="https://source.unsplash.com/APDMfLHZiRA/900x900" alt="Pfanne"> <img src="https://source.unsplash.com/APDMfLHZiRA/900x900" alt="Pfanne">
<figcaption>Kochbücher</figcaption> <figcaption>Kochen</figcaption>
</figure> </figure>
</div> </div>
<div class="m-col-t-4"> <div class="m-col-t-4">
@ -186,18 +186,18 @@
<div class="m-container"> <div class="m-container">
<div class="m-row"> <div class="m-row">
<div class="m-col-s-3 m-col-t-6"> <div class="m-col-s-3 m-col-t-6">
<h3><a href="#">Hilfe</a></h3> <h3>Hilfe</h3>
<ul> <ul>
<li><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li>
<li><a href="#">Rückgabe</a></li> <li><a href="#">Rückgabe</a></li>
</ul> </ul>
</div> </div>
<div class="m-col-s-3 m-col-t-6"> <div class="m-col-s-3 m-col-t-6">
<h3><a href="#">Rechtliches</a></h3> <h3>Zahlung</h3>
<ul> <ul>
<li><a href="https://joethei.xyz/impress">Impressum</a></li> <li><a href="#">Kreditkarten</a></li>
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li> <li><a href="#">Gutscheine</a></li>
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li> <li><a href="#">Bankeinzug</a></li>
</ul> </ul>
</div> </div>
<div class="m-clearfix-t"></div> <div class="m-clearfix-t"></div>
@ -211,16 +211,17 @@
</ul> </ul>
</div> </div>
<div class="m-col-s-3 m-col-t-6"> <div class="m-col-s-3 m-col-t-6">
<h3><a href="#">Blog</a></h3> <h3><a href="#">Rechtliches</a></h3>
<ul> <ul>
<li><a href="#">News</a></li> <li><a href="https://joethei.xyz/impress">Impressum</a></li>
<li><a href="#">Archive</a></li> <li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="m-row"> <div class="m-row">
<div class="m-col-l-10 m-push-l-1"> <div class="m-col-l-10 m-push-l-1">
<p>Amazon light. Copyright &copy; <a href="#">Amazon</a>, <p>Amazon light. Copyright &copy; <a href="#">B1</a>,
2019. All rights reserved.</p> 2019. All rights reserved.</p>
</div> </div>
</div> </div>

3
src/main/webapp/preview/index.html
View File

@ -2,4 +2,5 @@
<a href="catalog.html">Katalog</a><br> <a href="catalog.html">Katalog</a><br>
<a href="login.html">Login</a><br> <a href="login.html">Login</a><br>
<a href="register.html">Registrierung</a><br> <a href="register.html">Registrierung</a><br>
<a href="detailpage.html">Bücherliste</a> <a href="detailpage.html">Bücherliste</a><br>
<a href="book.html">Buchdetails</a>