test
DexterHK
commit
e607c7f6c1
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>404 - Page Or Resource Not Found</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 24pt;
|
||||
background-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 40px auto;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
color: #a12727;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a {
|
||||
color:white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.links {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.links a {
|
||||
margin: 0px 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>404 - Page Or Resource Not Found</h1>
|
||||
<div class="links">
|
||||
<a href="/">Bring me back home</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
<script src="burgerIcon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="anmeldung">
|
||||
<div class="anmeldung-text">
|
||||
<h1 class="anmeldung-überschrift" >Anmelden</h1>
|
||||
<p id="obererText">Über die Webseite werden personenbezogene Daten erhoben und genutzt.
|
||||
Für Details, beziehen Sie sich bitte auf die Seite <span>Datenschutz</span></p>
|
||||
</div>
|
||||
|
||||
<div class="anmeldeInput">
|
||||
<h2 class="anmeldung-überschrift">Angaben zur Anmeldung</h2>
|
||||
<hr style="background-color:#A78766; height: 2px; width: 200px; border: none; position: relative;
|
||||
top:3px">
|
||||
|
||||
<div>
|
||||
<form class="anmeldung-überschrift" action="meinebuecher.html">
|
||||
Karten-ID</br>
|
||||
<input type="text" name="karten-id"></br>
|
||||
Passwort</br>
|
||||
<input type="password" name="password"></br>
|
||||
<input id="anmeldebutton" type="submit" name="submit" href="buecher.html" value="Anmelden">
|
||||
</form>
|
||||
</div>
|
||||
<div class="anmeldung-ausklappen">
|
||||
<details>
|
||||
<summary>Passwort vergessen / Passwort ändern</summary>
|
||||
<p>Sollten sie Ihr Passwort vergessen haben oder wollen Sie es ändern,
|
||||
kommen Sie bitte mit ihrem Bibliotheksausweis zu uns in die Bibliothek</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Sie haben noch kein Konto?</summary>
|
||||
<p><a href="registrierung.html">Jetzt registrieren</a></p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="store.js" defer></script>
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="containerofbuecher">
|
||||
<p id="büchertitel">Bücher</p>
|
||||
<div id="firstItem" class="items" >
|
||||
<a href="percy.html"><img class="buecherImages" src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/></a>
|
||||
<h3 class="headerinItem">
|
||||
Percy Jackson: Diebe im Olymp
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||
Erscheinungsjahr: 2010 <br>
|
||||
Verlag: Carlsen <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton">Verfügbar</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
|
||||
</div>
|
||||
<!--Second Item-->
|
||||
<div id="secondItem" class="items">
|
||||
<a href="dalmatians.html"><img class="buecherImages" src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/></a>
|
||||
<h3 class="headerinItem">
|
||||
The Hundred and One Dalmatians
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||
Erscheinungsjahr: 2015 <br>
|
||||
Verlag: Farshore <br>
|
||||
Kategorie: Kinderbuch
|
||||
</p>
|
||||
<a class="redbutton" >Verfügbar ab: 30.04.2023</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
</div>
|
||||
|
||||
<!--Third Item-->
|
||||
<div id="thirdItem" class="items">
|
||||
<a href="penguin.html"><img class="buecherImages" src="pictures/penguin_highway.jpg" width="125" height="200"/> </a>
|
||||
<h3 class="headerinItem">
|
||||
Penguin Highway
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||
Erscheinungsjahr: 2019 <br>
|
||||
Verlag: Yen On <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" >Verfügbar</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
|
||||
</div>
|
||||
|
||||
<!--fourth Item-->
|
||||
<div id="fourthItem" class="items" >
|
||||
<a href="es.html"><img class="buecherImages" src="pictures/es.jpg" width="125" height="200"/> </a>
|
||||
<h3 class="headerinItem">
|
||||
Es
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Stephen King <br>
|
||||
Erscheinungsjahr: 2011 <br>
|
||||
Verlag: Heyne <br>
|
||||
Kategorie: Horror
|
||||
</p>
|
||||
<a class="redbutton" >Verfügbar ab: 10.05.2023</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
<!--Burger-->
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
|
||||
|
||||
function openNav() {
|
||||
var showNav = `
|
||||
#CandleID{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#uberuns{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#buecher{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#meinebuecher{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.suchleiste{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#buttonID{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.suchleiste{
|
||||
position: fixed;
|
||||
right: 280px;
|
||||
top: 0px;
|
||||
}
|
||||
#buttonID{
|
||||
position: fixed;
|
||||
right: 240px;
|
||||
top: 0px;
|
||||
}
|
||||
#uberuns{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 43px;
|
||||
}
|
||||
#buecher{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 96px;
|
||||
}
|
||||
|
||||
#meinebuecher{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
var closeNav = `#CandleID{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
`;
|
||||
if (document.getElementById('nav-toggle').checked) {
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = showNav
|
||||
document.head.appendChild(styleSheet)
|
||||
} else {
|
||||
var link = document.createElement('link');
|
||||
|
||||
// set the attributes for link element
|
||||
link.rel = 'stylesheet';
|
||||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
}
|
||||
|
||||
function unset()
|
||||
{
|
||||
var link = document.createElement('link');
|
||||
|
||||
// set the attributes for link element
|
||||
link.rel = 'stylesheet';
|
||||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="haupt">
|
||||
<!--Second Item-->
|
||||
<div id="secondItem" class="items" >
|
||||
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
The Hundred and One Dalmatians
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||
Erscheinungsjahr: 2015 <br>
|
||||
Verlag: Farshore <br>
|
||||
Kategorie: Kinderbuch
|
||||
</p>
|
||||
<a class="redbutton" href="">Verfügbar ab: 03.04.2023</a>
|
||||
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||
|
||||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
When Missis and Pongo's darling Dalmatian puppies are stolen, they know just who to suspect... the evil Cruella de Vill She's enough to
|
||||
scare the spots off a pup and she would love nothing more than to turn them into a spotty fur coat! <br><br>
|
||||
With the help of some fearless furry friends, the parents set off on a brave rescue attempt. But can the Dalmatian parents rescue their precious pups in time?
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-1-4052-7840-9 <br>
|
||||
Sprahce: Englisch <br>
|
||||
Stichwörter: Dalmatiner, Hunde, England, Welpen
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Datenschutz </strong></span>
|
||||
<br><br>
|
||||
<strong>Wir nehmen Datenschutz ernst</strong> <br>
|
||||
Der Schutz Ihrer Privatsphäre bei der Verarbeitung persönlicher Daten ist für uns ein wichtiges Anliegen. Wenn Sie unsere Webseite besuchen, speichern unsere Webserver standardmäßig die IP Ihres Internet Service Provider, die Webseite, von der aus Sie uns besuchen, die Webseiten, die Sie bei uns besuchen sowie das Datum und die Dauer des Besuches. Diese Informationen sind für die technische Übertragung der Webseiten und den sicheren Serverbetrieb zwingend erforderlich. Eine personalisierte Auswertung dieser Daten erfolgt nicht.
|
||||
<br><strong>Personenbezogene Daten</strong> <br>
|
||||
Personenbezogene Daten sind Daten über Ihre Person. Diese beinhalten Ihren Namen und Ihre Email Adresse. Sie müssen auch keine personenbezogenen Daten preisgeben um unsere Internetseite besuchen zu können. <br>
|
||||
In einigen Fällen benötigen wir Ihren Namen und Adresse sowie weitere Informationen um Ihnen die gewünschte Dienstleistung anbieten zu können. Wenn Sie einen unserer Services nutzen, sammeln wir in der Regel nur die Daten die notwendig sind um Ihnen unseren Service bieten zu können. Möglicherweise fragen wir Sie nach weiteren Informationen, die aber freiwilliger Natur sind. Wann immer wir personenbezogene Daten verarbeiten, tun wir dies um Ihnen unseren Service anbieten zu können oder um unsere kommerziellen Ziele zu verfolgen.
|
||||
<br><strong>Automatisch gespeicherte nicht personenbezogene Daten</strong>
|
||||
<br>Wenn Sie unsere Internetseiten besuchen, speichern wir aus administrativen und technischen Gründen bestimmte Informationen. Diese sind: Typ und Version des verwendeten Browsers, Datum und Uhrzeit des Zugriffs, sowie die IP Adresse.
|
||||
Diese Daten werden anonymisiert und lediglich für statistische Zwecke bzw. dafür verwendet, unsere Internet- und Onlinedienste zu verbessern.
|
||||
<br>Diese anonymisierten Daten werden getrennt von personenbezogenen Daten auf sicheren Systemen gespeichert und können keinen individuellen Personen zugeordnet werden. Das bedeutet, dass Ihre personenbezogenen Daten jederzeit geschützt bleiben.
|
||||
<br><strong>Cookies</strong> <br>Wenn Sie unsere Internetseiten besuchen speichern wir möglicherweise Informationen auf Ihrem Computer in Form von Cookies. Cookies sind kleine Dateien die von einem Internetserver an Ihren Browser übertragen und auf dessen Festplatte gespeichert werden. Die Rechtsgrundlage für die Verwendung von Cookies stellt dabei Art. 6 Abs. 1 lit f DSGVO dar.
|
||||
Lediglich die Internet Protokoll Adresse wird hierbei gespeichert keine sonstigen personenbezogenen Daten. Diese Information die in den Cookies gespeichert wird erlaubt es, Sie bei dem nächsten Besuch auf unserer Internetseite automatisch wiederzuerkennen, wodurch Ihnen die Nutzung erleichtert wird.
|
||||
<br>Natürlich können Sie unsere Internetseiten auch besuchen ohne Cookies zu akzeptieren. Wenn Sie nicht möchten, dass Ihr Computer beim nächsten Besuch wiedererkannt wird können Sie die Verwendung von Cookies auch ablehnen indem Sie die Einstellungen in Ihrem Browser auf „Cookies ablehnen“ ändern. Die jeweilige Vorgehensweise finden Sie in der Bedienungsanleitung Ihres jeweiligen Browsers. Wenn Sie die Verwendung von Cookies ablehnen, kann es jedoch zu Einschränkungen in der Nutzung mancher Bereiche unserer Internetseiten kommen.
|
||||
Rechtsgrundlage für den Einsatz der Cookies ist unser berechtigtes Interesse gem. Art. 6 Abs. 1 lit. f DSGVO.
|
||||
<br><strong>Sicherheit</strong><br>Wir haben technische und administrative Sicherheitsvorkehrungen getroffen um Ihre personenbezogenen Daten gegen Verlust, Zerstörung, Manipulation und unautorisierten Zugriff zu schützen. All unsere Mitarbeiter sowie für uns tätige Dienstleister sind auf die gültigen Datenschutzgesetze verpflichtet.
|
||||
<br>Wann immer wir personenbezogene Daten sammeln und verarbeiten werden diese verschlüsselt bevor sie übertragen werden. Das heißt, dass Ihre Daten nicht von Dritten missbraucht werden können. Unsere Sicherheitsvorkehrungen unterliegen dabei einem ständigen Verbesserungsprozess und unsere Datenschutzerklärungen werden ständig überarbeitet. Bitte stellen Sie sicher, dass Ihnen die aktuellste Version vorliegt.
|
||||
<br> <strong>Bettroffenenrechte</strong> <br>Bitte kontaktieren Sie uns jederzeit, wenn Sie sich informieren möchten welche personenbezogenen Daten wir über Sie speichern bzw. wenn Sie diese berichtigen oder löschen lassen wollen. Desweiteren haben Sie das Recht auf Einschränkung der Verarbeitung (Art. 18 DSGVO), ein Widerspruchsrechts gegen die Verarbeitung (Art. 21 DSGVO) sowie das Recht auf Datenübertragbarkeit (Art. 20 DSGVO).In diesen Fällen wenden Sie sich bitte direkt an uns.
|
||||
<br><strong>Änderungen dieser Datenschutzerklärung</strong><br>Wir behalten uns das Recht vor, unsere Datenschutzerklärungen zu ändern falls dies aufgrund neuer Technologien notwendig sein sollte. Bitte stellen Sie sicher, dass Ihnen die aktuellste Version vorliegt. Werden an dieser Datenschutzerklärung grundlegende Änderungen vorgenommen, geben wir diese auf unserer Website bekannt.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="hauptcontainer">
|
||||
<span id="titelerweitertesuche" > Erweiterte Suche </span> <br><br>
|
||||
<form action="">
|
||||
<input type="search" value="Titel" class="buchtitel" list="Titel">
|
||||
<datalist id="Titel">
|
||||
<option value="Titel"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="text" class="buchtiteloptions" list="buchtiteloptionen">
|
||||
|
||||
|
||||
<input type="search" value="und" class="und-wort1" list="Und">
|
||||
<datalist id="Und">
|
||||
<option value="und"></option>
|
||||
<option value="oder"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" value="Autor" class="autor" list="Autor">
|
||||
<datalist id="Autor">
|
||||
<option value="Autor"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="text" class="autoroptions" list="autoroptionen">
|
||||
|
||||
|
||||
<input type="search" value="und" class="und-wort2" list="Und" >
|
||||
<datalist id="Und">
|
||||
<option value="und"></option>
|
||||
<option value="oder"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" value="Stichwort" class="stichwort" list="Stichwort">
|
||||
<datalist id="Stichwort">
|
||||
<option value="Stichwort"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="text" class="stichwörteroptions" list="stichwörteroptionen">
|
||||
|
||||
|
||||
|
||||
|
||||
<span id="weiteresuchkriterien" style> Weitere Suchkriterien</span><br><br></p>
|
||||
<span class="jahrvon">Jahr von </span>
|
||||
<input type="date" class="anfangsdatum" name="Buchdatum1">
|
||||
<span class="bis">bis </span>
|
||||
<input type="date" class="endsdatum" name="Buchdatum2">
|
||||
<span class="sprache">Sprache </span>
|
||||
<input type="search" class="spracheingabe" list="sprachoptionen">
|
||||
<datalist id="sprachoptionen">
|
||||
<option value="Deutsch"></option>
|
||||
<option value="Englisch"></option>
|
||||
<option value="Arabisch"></option>
|
||||
<option value="Französisch"></option>
|
||||
</datalist>
|
||||
<span class="verfügbarkeit">Verfügbarkeit</span>
|
||||
<input type="checkbox" class="checkbox" name="status" value="verfügbareBücher">
|
||||
<span class="kommentar">verfügbare Bücher</span>
|
||||
|
||||
<a id="suchen" href="">suchen</a>
|
||||
<a id="suchfelderleeren" href="">Suchfelder leeren</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="haupt">
|
||||
<!--fourth Item-->
|
||||
<div id="firstItem" class="items" >
|
||||
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Es
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Stephen King <br>
|
||||
Erscheinungsjahr: 2011 <br>
|
||||
Verlag: Heyne <br>
|
||||
Kategorie: Horror
|
||||
</p>
|
||||
<a class="redbutton" href="">Verfügbar ab: 10.05.2023</a>
|
||||
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||
|
||||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
Inhalt:
|
||||
In Derry, Maine, schlummert das Böse in der Kanalisation: Alle 28 Jahre wacht es auf und muss fressen.
|
||||
Jetzt taucht »Es« wieder empor. Sieben Freunde entschließen sich, dem Grauen entgegenzutreten und ein Ende zu setzen.
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-3-453-43577-3 <br>
|
||||
Sprahce: Deutsch <br>
|
||||
Stichwörter: Horror, clown, Teenager, Monster
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Impressum </strong></span>
|
||||
<br><br>
|
||||
<strong style="font-style: italic;">Firmensitz</strong><br>
|
||||
Bibliothek Candle GmbH <br>
|
||||
Paul-Wittsack-Straße 10 <br>
|
||||
68163 Mannheim <br>
|
||||
|
||||
<strong style="font-style: italic;">Kontaktdaten</strong> <br>
|
||||
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p1">
|
||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||
<br><br>
|
||||
Die Bibliothek CANDLE begrüßt Sie ganz herzlich auf ihren Internetseiten. <br> <br>
|
||||
Nutzen Sie unser umfangreiches Angebot aus den beliebtesten Büchern. <br> <br>
|
||||
Wir freuen uns auf Ihren Besuch!
|
||||
<br><br>
|
||||
<span id="titleschwarz">VERANSTALTUNGEN!</span>
|
||||
<br><br>
|
||||
Leserunde | jeden Mittwoch | 17:30 Uhr
|
||||
<br><br>
|
||||
<span style="color: #000;" >HARRY POTTER-REIHE (aktuell) </span>
|
||||
<br><br>
|
||||
<span style="color: #000;">
|
||||
Die erfolgreiche Buchreihe um den Zauberlehrling Harry James Potter umfasst insgesamt sieben Bände.
|
||||
In jedem wird ein Schul- und Lehrjahr von Harry und seinen Freunden auf dem Zauberinternat Hogwarts erzählt.
|
||||
Neben alltäglichen Problemen eines Jugendlichen, wird Harry immer wieder mit dem bösen Magier Lord Voldemort und seinen Gefolgsleuten,
|
||||
den sogenannten Todessern, konfrontiert.
|
||||
</span>
|
||||
<br>
|
||||
<a href="" style="font-style: italic; text-decoration: none; color: #000;" >mehr dazu...</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Kontakt </strong></span>
|
||||
<br><br>
|
||||
|
||||
Kundenservice: +49XXXXXXXXX <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="warenkorb.js" async></script>
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="containerofmeinebuecher">
|
||||
<p id="meinebüchertitel">Meine Bücher</p>
|
||||
<!--first item-->
|
||||
<!-- <div class="items" >
|
||||
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Percy Jackson: Diebe im Olymp
|
||||
</h3>
|
||||
<p class="discinItem">von Rick Riordan <br>
|
||||
</p>
|
||||
<a class="greenbutton" href="">Sofort Abholbereit</a>
|
||||
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
<p id="message">Diese Reservierung verfällt, wenn das Buch nicht bis zum 24.04.2023 abgeholt wurde.</p>
|
||||
<hr style="width: 92%;">
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
<!--Burger-->
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="haupt">
|
||||
<!--Third Item-->
|
||||
<div id="firstItem" class="items" >
|
||||
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Penguin Highway
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||
Erscheinungsjahr: 2019 <br>
|
||||
Verlag: Yen On <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" href="">Verfügbar</a>
|
||||
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||
|
||||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
I may only be in fourth grade, but I know more than most adults. I take notes every day and read all kinds of books, so I have a solid grasp on the world
|
||||
around me. But suddenly, there are penguins in my town! I know it has something to do with the lady at the dentist and her weird powers, and I'm going to get to the bottom of it...
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-1-9753-8260-5 <br>
|
||||
Sprache: Englisch <br>
|
||||
Stichwörter: Penguine, Freundschaft, Meer, Küste
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="haupt">
|
||||
<!--First Item-->
|
||||
<div id="firstItem" class="items" >
|
||||
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Percy Jackson: Diebe im Olymp
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||
Erscheinungsjahr: 2010 <br>
|
||||
Verlag: Carlsen <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" href="">Verfügbar</a>
|
||||
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||
|
||||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
Percy versteht die Welt nicht mehr. Jedes Jahr fliegt er von einer anderen Schule. Ständig passieren ihm seltsame Unfälle. Und jetzt soll er
|
||||
auch noch an dem Tornado schuld sein! Langsam wird ihm klar: irgendjemand hat es auf ihn abgesehen. Als Percy sich mit Hilfe seines Freundes Grover vor
|
||||
einem Minotaurus ins Camp Half-Blood rettet, erfährt er die Wahrheit: Sein Vater ist der Meeresgott Poseidon, Percy also ein Halbgott. Und er hat einen mächtigen
|
||||
Feind: Kronos, den Titanen. Die Gotter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-3-551-55661-5 <br>
|
||||
Sprache: Deutsch <br>
|
||||
Stichwörter: Griechenland, Griechische Sagen, Griechische Götter, Zeus, Demeter, Persephone, Hera, Hades, Poseidon, Athene, Aphrodite, Ares, Hephaistos,
|
||||
Apollo, Artemis, Hermes, Dionysos, Sage, Sagen
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 667 KiB |
|
|
@ -0,0 +1,89 @@
|
|||
var inputNumber = document.getElementsByClassName('input-group-field');
|
||||
|
||||
if (window.location.pathname.includes("/warenkorb.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
$(window).on('load',function() {
|
||||
for(var y = 0;y<inputNumber.length;y++)
|
||||
{
|
||||
showValue(inputNumber[y]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var minusButton = document.getElementsByClassName("fa fa-minus");
|
||||
|
||||
var plusButton = document.getElementsByClassName("fa fa-plus");
|
||||
|
||||
|
||||
//Dieser Code Block gehört zur Warenkorb Datei
|
||||
for(var i = 0;i<plusButton.length;i++)
|
||||
{
|
||||
|
||||
var button = plusButton[i]
|
||||
|
||||
button.addEventListener('click', incrmenetValue)
|
||||
|
||||
|
||||
}
|
||||
|
||||
for(var j = 0;j<minusButton.length;j++)
|
||||
{
|
||||
var button1 = minusButton[j]
|
||||
|
||||
button1.addEventListener('click', decrmenetValue)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//<input class="input-group-field" type="number" name="quantity" value="1">
|
||||
//var addItemButton = document.getElementsByClassName("input-group-field");
|
||||
|
||||
function showValue(event)
|
||||
{
|
||||
|
||||
var shopItem = event.parentElement.parentElement.parentElement
|
||||
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue = localStorage.getItem(title) || 0;
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
|
||||
}
|
||||
|
||||
function incrmenetValue(event)
|
||||
{
|
||||
|
||||
|
||||
var buttony = event.target
|
||||
var shopItem = buttony.parentElement.parentElement.parentElement.parentElement.parentElement
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue= localStorage.getItem(title) || 0;
|
||||
// var getValue = shopItem.getElementsByClassName('input-group-field')[0].value;
|
||||
if(getValue < 10){
|
||||
getValue++;
|
||||
}
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
localStorage.setItem(title, getValue)
|
||||
|
||||
|
||||
}
|
||||
function decrmenetValue(event)
|
||||
{
|
||||
var buttony = event.target
|
||||
var shopItem = buttony.parentElement.parentElement.parentElement.parentElement.parentElement
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue= localStorage.getItem(title) || 0;
|
||||
if(getValue > 0){
|
||||
getValue--;
|
||||
}
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
localStorage.setItem(title, getValue)
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p1">
|
||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||
<br><br>
|
||||
Die Bibliothek CANDLE begrüßt Sie ganz herzlich auf ihren Internetseiten. <br> <br>
|
||||
Nutzen Sie unser umfangreiches Angebot aus den beliebtesten Büchern. <br> <br>
|
||||
Wir freuen uns auf Ihren Besuch!
|
||||
<br><br>
|
||||
<span id="titleschwarz">VERANSTALTUNGEN!</span>
|
||||
<br><br>
|
||||
Leserunde | jeden Mittwoch | 17:30 Uhr
|
||||
<br><br>
|
||||
<span style="color: #000;" >HARRY POTTER-REIHE (aktuell) </span>
|
||||
<br><br>
|
||||
<span style="color: #000;">
|
||||
Die erfolgreiche Buchreihe um den Zauberlehrling Harry James Potter umfasst insgesamt sieben Bände.
|
||||
In jedem wird ein Schul- und Lehrjahr von Harry und seinen Freunden auf dem Zauberinternat Hogwarts erzählt.
|
||||
Neben alltäglichen Problemen eines Jugendlichen, wird Harry immer wieder mit dem bösen Magier Lord Voldemort und seinen Gefolgsleuten,
|
||||
den sogenannten Todessern, konfrontiert.
|
||||
</span>
|
||||
<br>
|
||||
<a href="" style="font-style: italic; text-decoration: none; color: #000;" >mehr dazu...</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="hauptcontainer">
|
||||
|
||||
<form action="">
|
||||
<div class="container">
|
||||
<span id="registrierungTitel" > Regestrierung </span>
|
||||
<br>
|
||||
<p id="datenSchutzHinweisRegistrierung" > Über diese Webseite werden personenbezogene Daten erhoben und genutzt. Für Details, beziehen Sie sich bite auf die Seite Datenschutz.</p>
|
||||
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Regestrierung<hr id="registrierungHr"></h4>
|
||||
<br>
|
||||
<span id="registrierungInputSpan" >
|
||||
<label for="vorName"><b>Vorname</b></label>
|
||||
<br>
|
||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="nachName"><b>Nachname</b></label>
|
||||
<br>
|
||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||
<br>
|
||||
<input type="text" name="strasse" id="strasse" required>
|
||||
<input type="number" name="hausnummer" id="hausNummer" required>
|
||||
<br>
|
||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||
<br>
|
||||
<input type="number" name="postleitzahl" id="postleitzahl" required>
|
||||
<input type="text" name="ort" id="ort" required>
|
||||
<br>
|
||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||
<br>
|
||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||
<br>
|
||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwort"><b>Passwort</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<button type="submit" class="registrierenKnopf">Registrieren</button>
|
||||
<br><br>
|
||||
|
||||
<details>
|
||||
<summary>Sie habe bereits ein Konto?</summary>
|
||||
<p id="registrierenAusklappe"> <a href="anmelden.html"> Jetzt anmelden</a></p>
|
||||
</details>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
|
||||
|
||||
var warenkorb = [];
|
||||
|
||||
if (window.location.pathname.includes("/buecher.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
$(window).on('load',function() {
|
||||
var addItemButton = document.getElementsByClassName("binPicture");
|
||||
|
||||
|
||||
//Dieser Code Block gehört zur Warenkorb Datei
|
||||
for(var i = 0;i<addItemButton.length;i++)
|
||||
{
|
||||
var button = addItemButton[i]
|
||||
button.addEventListener('click', addtoCartClick)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
});
|
||||
}
|
||||
if (window.location.pathname.includes("/warenkorb.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
|
||||
|
||||
// convert JSON string to relevant object
|
||||
|
||||
var warenkorby = localStorage.getItem("items") || [];
|
||||
const parsedArray = JSON.parse(warenkorby)
|
||||
addingAll(parsedArray)
|
||||
}
|
||||
|
||||
);}
|
||||
|
||||
//headerinItem
|
||||
//discinItem
|
||||
function addtoCartClick(event)
|
||||
{
|
||||
|
||||
var button = event.target
|
||||
var shopItem = button.parentElement.parentElement
|
||||
var title = shopItem.getElementsByClassName('headerinItem')[0].innerHTML
|
||||
var desc = shopItem.getElementsByClassName('discinItem')[0].innerHTML
|
||||
var image = shopItem.getElementsByClassName('buecherImages')[0].src
|
||||
var buttonColor = shopItem.getElementsByTagName('a')[1].innerHTML
|
||||
//Split the description
|
||||
var firstName = desc.split(' ')[1];
|
||||
var lastName = desc.split(' ')[2];
|
||||
console.log(firstName)
|
||||
console.log(lastName)
|
||||
var description = 'von ' + firstName +' ' + lastName;
|
||||
|
||||
addItemToCart(title,description,image,buttonColor)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function addItemToCart(title,desc,image,buttonColor)
|
||||
{
|
||||
|
||||
var cartRow = document.createElement('div')
|
||||
// var cartItems = document.getElementsByClassName('containerofbuecher')[0]
|
||||
|
||||
var cartRowConetent = ` <div class="items" >
|
||||
<img src="${image}" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
${title}
|
||||
</h3>
|
||||
<p class="discinItem">${desc}</p>
|
||||
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||
|
||||
<!--Buttons-->
|
||||
<div class="inputPlusMinus">
|
||||
<div class="input-group plus-minus-input">
|
||||
<div class="input-group-button">
|
||||
|
||||
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input class="input-group-field" type="number" onkeydown="return false" name="quantity" value="0">
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a class="binPicture" ><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
</div>
|
||||
|
||||
<hr style="width: 96%;">
|
||||
</div>
|
||||
`
|
||||
try {
|
||||
var warenkorby = localStorage.getItem("items") || [];
|
||||
var parsedArray = JSON.parse(warenkorby)
|
||||
|
||||
} catch (error) {
|
||||
warenkorb.push(cartRowConetent)
|
||||
// convert array to JSON string using JSON.stringify()
|
||||
const jsonArray = JSON.stringify(warenkorb);
|
||||
|
||||
// save to localStorage using "array" as the key and jsonArray as the value
|
||||
localStorage.setItem('items', jsonArray);
|
||||
|
||||
return ;
|
||||
}
|
||||
|
||||
var existAlready = false;
|
||||
cartRow.innerHTML = cartRowConetent;
|
||||
|
||||
for(var j = 0;j<parsedArray.length;j++)
|
||||
{
|
||||
if(parsedArray[j] == cartRowConetent)
|
||||
{
|
||||
existAlready = true;
|
||||
}
|
||||
}
|
||||
if(buttonColor.includes("ab"))
|
||||
{
|
||||
existAlready = true;
|
||||
}
|
||||
|
||||
|
||||
if(!existAlready){
|
||||
var warenkorbying = localStorage.getItem("items") || [];
|
||||
warenkorb = JSON.parse(warenkorbying)
|
||||
warenkorb.push(cartRowConetent)
|
||||
// convert array to JSON string using JSON.stringify()
|
||||
const jsonArray = JSON.stringify(warenkorb);
|
||||
|
||||
// save to localStorage using "array" as the key and jsonArray as the value
|
||||
localStorage.setItem('items', jsonArray);
|
||||
|
||||
// localStorage.setItem("items",warenkorb)
|
||||
|
||||
// cartItems.append(cartRow);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function addingAll(wat) {
|
||||
// var cartItems = document.getElementsByClassName('containerOfAll')[0];
|
||||
for (var i = 0; i < wat.length; i++) {
|
||||
/* var cartRow = document.createElement('div');
|
||||
cartRow.insertAdjacentHTML('beforeend', wat[i]);
|
||||
cartItems.appendChild(cartRow);
|
||||
*/
|
||||
insertHTMLStringToContainer(wat[i],"containerOfAll")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function insertHTMLStringToContainer(htmlString, containerId) {
|
||||
var container = document.getElementsByClassName(containerId)[0];
|
||||
container.insertAdjacentHTML('beforeend', htmlString);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Über uns</strong></span>
|
||||
<br><br>
|
||||
In einer Zeit, die von Digitalisierung dominiert wird, werden immer mehr physische
|
||||
Medien in digitale Systeme integriert. <br> Auch wenn dieses Phänomen auf den ersten Blick nur positiv erscheint,
|
||||
zieht es auch große Nachteile mit sich. So ist zum Beispiel nicht jeder Mensch in der finanziellen Lage,
|
||||
sich die nötigen technischen Geräte zu leisten. <br>Selbst wenn die Technik vorhanden ist, kann oder will nicht jeder damit umgehen,
|
||||
manche haben vielleicht sogar gesundheitliche Probleme, die es Ihnen nicht ermöglichen,
|
||||
für längere Zeit auf einem Bildschirm zu schauen. <br>
|
||||
Unsere Bibliothek Candle hat es sich deshalb zum Ziel gesetzt, Bücher in einem greifbaren Zustand anzubieten.
|
||||
Ob „Hamlet“, „Harry Potter“ oder „Der große Gatsby“, bei uns kommt jeder Bücherwurm auf den Geschmack.
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
function checkFirstName() {
|
||||
let regex_firstName = /[A-Z]/;
|
||||
var firstName = document.getElementById("firstName");
|
||||
var errorMessage = document.getElementById("errorMessage_firstName");
|
||||
if (!(regex_firstName.test(firstName.value))) {
|
||||
errorMessage.innerHTML = "HALLO!";
|
||||
errorMessage.style.display = "block";
|
||||
}
|
||||
else {
|
||||
errorMessage.style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function checkLastName() {
|
||||
// Erlaubte Zeichen:
|
||||
// Großbuchstaben -> [A-Z]
|
||||
// Kleinbuchstaben -> [a-z]
|
||||
// Bindestrich -> [-]
|
||||
// Leerzeichen -> [ ]
|
||||
const regex_lastName = /1/;
|
||||
}
|
||||
|
||||
function checkStreetName() {
|
||||
// Erlaubte Zeichen:
|
||||
// Großbuchstaben -> [A-Z]
|
||||
// Kleinbuchstaben -> [a-z]
|
||||
// Bindestrich -> [-]
|
||||
//
|
||||
const regex_streetName = /1/;
|
||||
}
|
||||
|
||||
function checkHouseNumber() {
|
||||
const regex_houseNumber = /1/;
|
||||
}
|
||||
|
||||
function checkPLZ() {
|
||||
const regex_plz = /1/;
|
||||
}
|
||||
|
||||
function checkCity() {
|
||||
const regex_city = /1/;
|
||||
}
|
||||
|
||||
function checkEmailAddress() {
|
||||
const regex_emailAdress = /1/;
|
||||
}
|
||||
|
||||
function checkRepeat_EmailAddress() {
|
||||
|
||||
}
|
||||
|
||||
function checkPassword() {
|
||||
const regex_password = /1/;
|
||||
}
|
||||
|
||||
function checkRepeat_Password() {
|
||||
// Input des Felds password
|
||||
var password = document.getElementById("password");
|
||||
}
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="warenkorb.js" defer></script>
|
||||
<script src="plusminusbutton.js" type="text/javascript" ></script>
|
||||
<script src="store.js" ></script>
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body style="background-color:#987554;">
|
||||
|
||||
<header>
|
||||
<script src="burgerIcon.js"></script>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="main">
|
||||
<h1 id="warenkorbHeader">
|
||||
Warenkorb
|
||||
</h1>
|
||||
|
||||
<div class="containerOfAll">
|
||||
<!-- Change the `data-field` of buttons and `name` of input field's for multiple plus minus buttons-->
|
||||
|
||||
<!--First Item-->
|
||||
<!-- <div class="items" >
|
||||
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Percy Jackson: Diebe im Olymp
|
||||
</h3>
|
||||
<p class="discinItem">von Rick Riordan</p>
|
||||
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||
-->
|
||||
<!--Buttons-->
|
||||
<!-- <div class="inputPlusMinus">
|
||||
<div class="input-group plus-minus-input">
|
||||
<div class="input-group-button">
|
||||
|
||||
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input class="input-group-field" type="number" name="quantity" value="1">
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a class="binPicture" ><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
</div>
|
||||
|
||||
<hr style="width: 96%;">
|
||||
|
||||
</div>
|
||||
-->
|
||||
<!--Second Item-->
|
||||
<!--
|
||||
<div class="items">
|
||||
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
The Hundred and One Dalmatians
|
||||
</h3>
|
||||
<p class="discinItem">von Dodie Smith</p>
|
||||
<a class="redbutton" href="dalmatians.html">Verfügbar ab: 30.04.2023</a>
|
||||
-->
|
||||
<!--Buttons-->
|
||||
<!-- <div class="inputPlusMinus">
|
||||
<div class="input-group plus-minus-input">
|
||||
<div class="input-group-button">
|
||||
|
||||
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input class="input-group-field" type="number" name="quantity" value="1">
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a class="binPicture" ><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
</div>
|
||||
<hr style="width: 96%;">
|
||||
|
||||
</div>
|
||||
-->
|
||||
<!--Third Item-->
|
||||
<!-- <div class="items">
|
||||
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Penguin Highway
|
||||
</h3>
|
||||
<p class="discinItem">von Tomihiko Morimi</p>
|
||||
<a class="greenbutton" href="penguin.html">Verfügbar</a>
|
||||
-->
|
||||
<!--Buttons-->
|
||||
<!-- <div class="inputPlusMinus">
|
||||
<div class="input-group plus-minus-input">
|
||||
<div class="input-group-button">
|
||||
|
||||
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a class="binPicture"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
</div>
|
||||
<hr style="width: 96%;">
|
||||
|
||||
</div>
|
||||
-->
|
||||
<!--fourth Item-->
|
||||
<!-- <div class="items" >
|
||||
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
Es
|
||||
</h3>
|
||||
<p class="discinItem">von Stephen Kind</p>
|
||||
<a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
|
||||
-->
|
||||
<!--Buttons-->
|
||||
<!-- <div class="inputPlusMinus">
|
||||
<div class="input-group plus-minus-input">
|
||||
<div class="input-group-button">
|
||||
|
||||
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a class="binPicture"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!--Reservieren-->
|
||||
<div id="reservieren">
|
||||
<h2 id="ArtikelWarenkorb"> 0 Artikel</h2>
|
||||
<a id="jetztReservieren" href="anmelden.html">Jetzt reservieren</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
|
||||
var parsed = [];
|
||||
var addItemButton = document.getElementsByClassName("binPicture");
|
||||
if (window.location.pathname.includes("/warenkorb.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var addItemButton = document.getElementById("jetztReservieren");
|
||||
addItemButton.addEventListener('click', parseAttributes)
|
||||
|
||||
deleteItem()
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (window.location.pathname.includes("/meinebuecher.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
warenkorby = localStorage.getItem("meinebuecher") || [];
|
||||
const parsedArray = JSON.parse(warenkorby)
|
||||
addingMeinBuecher(parsedArray)
|
||||
}
|
||||
);}
|
||||
|
||||
|
||||
function deleteItem()
|
||||
{
|
||||
updateArticle()
|
||||
|
||||
//Dieser Code Block gehört zur Warenkorb Datei
|
||||
for(var i = 0;i<addItemButton.length;i++)
|
||||
{
|
||||
var button = addItemButton[i]
|
||||
button.addEventListener(('click'), function(event)
|
||||
{
|
||||
var buttonClicked = event.target
|
||||
|
||||
var diving = buttonClicked.parentElement.parentElement.parentElement;
|
||||
// Set counter to Zero
|
||||
var title = diving.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue= localStorage.getItem(title) || 0;
|
||||
diving.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
localStorage.setItem(title, 0)
|
||||
|
||||
|
||||
var title = diving.getElementsByTagName('h3')[0].innerHTML
|
||||
|
||||
var warenkorby = localStorage.getItem("items") || [];
|
||||
var parsedArray = JSON.parse(warenkorby)
|
||||
for(var j = 0;j<parsedArray.length;j++)
|
||||
{
|
||||
const parser = new DOMParser();
|
||||
const parsedDocument = parser.parseFromString(parsedArray[j], "text/html");
|
||||
var titling =parsedDocument.getElementsByTagName('h3')[0].innerHTML
|
||||
var classred = parsedDocument.getElementsByTagName('a')[0].innerHTML
|
||||
|
||||
|
||||
if(titling.includes(title) ||classred.includes("red") ) {
|
||||
delete warenkorb[j];
|
||||
const jsonArray = JSON.stringify(warenkorb);
|
||||
|
||||
localStorage.setItem('items', jsonArray);
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
buttonClicked.parentElement.parentElement.parentElement.remove()
|
||||
delete addItemButton[i]
|
||||
var getArticleNumber = document.getElementById("ArtikelWarenkorb").innerHTML = addItemButton.length + " Artikel";
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function updateArticle()
|
||||
{
|
||||
var getArticleNumber = document.getElementById("ArtikelWarenkorb").innerHTML = addItemButton.length + " Artikel";
|
||||
}
|
||||
|
||||
function parseAttributes()
|
||||
{
|
||||
|
||||
var warenkorby = localStorage.getItem("items") || [];
|
||||
var parsedArray = JSON.parse(warenkorby)
|
||||
for(var j =0 ;j<parsedArray.length;j++)
|
||||
{
|
||||
const parser = new DOMParser();
|
||||
const parsedDocument = parser.parseFromString(parsedArray[j], "text/html");
|
||||
var imaging =parsedDocument.getElementsByTagName('img')[0].src
|
||||
var discription = parsedDocument.getElementsByTagName('p')[0].innerHTML
|
||||
var titling = parsedDocument.getElementsByTagName('h3')[0].innerHTML
|
||||
|
||||
// var cartItems = document.getElementsByClassName('containerofbuecher')[0]
|
||||
|
||||
var cartRowConetent = `<div class="items" >
|
||||
<img src="${imaging}" width="125" height="200"/>
|
||||
<h3 class="headerinItem">
|
||||
${titling}</h3>
|
||||
<p class="discinItem">${discription}</p>
|
||||
<a class="greenbutton" href="">Sofort Abholbereit</a>
|
||||
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||
<p id="message">Diese Reservierung verfällt, wenn das Buch nicht bis zum 24.04.2023 abgeholt wurde.</p>
|
||||
|
||||
<hr style="width: 90%;">
|
||||
</div>
|
||||
|
||||
`
|
||||
|
||||
parsed.push(cartRowConetent)
|
||||
}
|
||||
|
||||
// convert array to JSON string using JSON.stringify()
|
||||
|
||||
const jsonArray = JSON.stringify(parsed);
|
||||
|
||||
// save to localStorage using "array" as the key and jsonArray as the value
|
||||
localStorage.setItem('meinebuecher', jsonArray);
|
||||
localStorage.removeItem('items');
|
||||
|
||||
|
||||
}
|
||||
|
||||
function addingMeinBuecher(wat) {
|
||||
// var cartItems = document.getElementsByClassName('containerOfAll')[0];
|
||||
for (var i = 0; i < wat.length; i++) {
|
||||
/* var cartRow = document.createElement('div');
|
||||
cartRow.insertAdjacentHTML('beforeend', wat[i]);
|
||||
cartItems.appendChild(cartRow);
|
||||
*/
|
||||
insertHTMLStringToContainer(wat[i],"containerofmeinebuecher")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function insertHTMLStringToContainer(htmlString, containerId) {
|
||||
var container = document.getElementsByClassName(containerId)[0];
|
||||
container.insertAdjacentHTML('beforeend', htmlString);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function addingAll(wat) {
|
||||
// var cartItems = document.getElementsByClassName('containerOfAll')[0];
|
||||
for (var i = 0; i < wat.length; i++) {
|
||||
/* var cartRow = document.createElement('div');
|
||||
cartRow.insertAdjacentHTML('beforeend', wat[i]);
|
||||
cartItems.appendChild(cartRow);
|
||||
*/
|
||||
insertHTMLStringToContainer(wat[i],"containerOfAll")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue