Compare commits
1 Commits
master
...
stand_24_0
| Author | SHA1 | Date |
|---|---|---|
 Nils Eilinghoff
|
5a8baa5381 |
|
|
@ -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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Abmelden</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!--------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div class="mainContentContainer">
|
||||||
|
<div class="titleContainer">
|
||||||
|
<h1 id="logOffTitle">Abmelden</h1>
|
||||||
|
</div>
|
||||||
|
<div class="mainContent">
|
||||||
|
<p id="mainText">
|
||||||
|
Sie sind bereits angemeldet, wollen Sie sich jetzt abmelden?
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<div class="buttonContainer">
|
||||||
|
<a id="backToHomeButton" href="abmelden_erfolgreich.html">Bestätigen</a>
|
||||||
|
<a id="logInAgainButton" href="meinebuecher.html">Abbrechen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
</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>
|
||||||
|
</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,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="style.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>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!--------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div class="mainContentContainer">
|
||||||
|
<div class="titleContainer">
|
||||||
|
<h1 id="logOffSuccessfulTitle">Erfolgreich abgemeldet</h1>
|
||||||
|
</div>
|
||||||
|
<div class="mainContent">
|
||||||
|
<p id="mainText">
|
||||||
|
Sie wurden abgemeldet.
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<div class="buttonContainer">
|
||||||
|
<a id="backToHomeButton" href="index.html">Zur Startseite</a>
|
||||||
|
<a id="logInAgainButton" href="anmelden_meinebuecher.html">Erneut anmelden</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
105
anmelden.html
105
anmelden.html
|
|
@ -1,105 +0,0 @@
|
||||||
<!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,355 @@
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$_SESSION['eingeloggt']=1;
|
||||||
|
if(!$_SESSION['eingeloggt'] == 1 ){
|
||||||
|
echo '<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Anmeldung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
sessionStorage.setItem("clicked-last", "warenkorb.html")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="anmeldung">
|
||||||
|
<h1 class="anmeldung-überschriften" >Anmelden</h1>
|
||||||
|
<div class="anmeldung-rest">
|
||||||
|
<div class="anmeldung-text">
|
||||||
|
|
||||||
|
<p id="obererText">Über die Webseite werden personenbezogene Daten erhoben und genutzt.
|
||||||
|
Für Details, beziehen Sie sich bitte auf die Seite <a href="datenschutz.html">Datenschutz</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anmeldeInput">
|
||||||
|
<h2 class="anmeldung-überschriften">Angaben zur Anmeldung</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<form class="anmeldung-überschriften" action="warenkorb.php">
|
||||||
|
Karten-ID <span id="question-mark">
|
||||||
|
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256
|
||||||
|
256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3
|
||||||
|
52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280
|
||||||
|
264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5
|
||||||
|
12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4
|
||||||
|
0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224
|
||||||
|
352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
|
||||||
|
<span id="tooltip">Ihre Karten-ID befindet sich auf ihrem Bibliotheksausweis</span>
|
||||||
|
</span></br>
|
||||||
|
<input type="text" name="karten-id" required></br>
|
||||||
|
Passwort</br>
|
||||||
|
<input type="password" name="password" required></br>
|
||||||
|
<input id="anmeldebutton" type="submit" name="submit" 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.php">Jetzt registrieren</a></p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<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>';
|
||||||
|
}else{
|
||||||
|
|
||||||
|
echo '<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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Warenkorb</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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" style="height:200px;" >
|
||||||
|
<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.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<h1 id="warenkorbHeader">
|
||||||
|
Warenkorb
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="containerOfAll">
|
||||||
|
<script src="plusminusbutton.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!--First Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="percy.html">Percy Jackson: Diebe im Olymp</a>
|
||||||
|
</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="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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="dalmatians.html">The Hundred and One Dalmatians</a>
|
||||||
|
</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="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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="penguin.html">Penguin Highway</a>
|
||||||
|
</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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="es.html">Es</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen King</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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Reservieren-->
|
||||||
|
<div id="reservieren">
|
||||||
|
<h2 id="ArtikelWarenkorb"> 3 Artikel</h2>
|
||||||
|
<a id="jetztReservieren" href="reservierung.html">Jetzt reservieren</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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,274 @@
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$_SESSION['eingeloggt']=2;
|
||||||
|
|
||||||
|
|
||||||
|
if(!$_SESSION['eingeloggt'] == 2 ){
|
||||||
|
echo '<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Anmeldung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
sessionStorage.setItem("clicked-last", "warenkorb.html")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="anmeldung">
|
||||||
|
<h1 class="anmeldung-überschriften" >Anmelden</h1>
|
||||||
|
<div class="anmeldung-rest">
|
||||||
|
<div class="anmeldung-text">
|
||||||
|
|
||||||
|
<p id="obererText">Über die Webseite werden personenbezogene Daten erhoben und genutzt.
|
||||||
|
Für Details, beziehen Sie sich bitte auf die Seite <a href="datenschutz.html">Datenschutz</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anmeldeInput">
|
||||||
|
<h2 class="anmeldung-überschriften">Angaben zur Anmeldung</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<form class="anmeldung-überschriften" action="meinebuecher.php">
|
||||||
|
Karten-ID <span id="question-mark">
|
||||||
|
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256
|
||||||
|
256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3
|
||||||
|
52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280
|
||||||
|
264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5
|
||||||
|
12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4
|
||||||
|
0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224
|
||||||
|
352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
|
||||||
|
<span id="tooltip">Ihre Karten-ID befindet sich auf ihrem Bibliotheksausweis</span>
|
||||||
|
</span></br>
|
||||||
|
<input type="text" name="karten-id" required></br>
|
||||||
|
Passwort</br>
|
||||||
|
<input type="password" name="password" required></br>
|
||||||
|
<input id="anmeldebutton" type="submit" name="submit" 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.php">Jetzt registrieren</a></p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>';
|
||||||
|
}else{
|
||||||
|
echo '<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Anmeldung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
sessionStorage.setItem("clicked-last", "warenkorb.html")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.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 id="firstItem" class="items" >
|
||||||
|
<a href="percy.html"><img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="percy.html">Percy Jackson: Diebe im Olymp</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Rick Riordan <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Sofort Abholbereit</a>
|
||||||
|
<a class="binPicture" href="loeschen_meine_buecher.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p class="message">Diese Reservierung verfällt, wenn das Buch nicht bis zum 24.04.2023 abgeholt wurde.</p>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<a href="dalmatians.html"><img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="dalmatians.html">The Hundred and One Dalmatians</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Dodie Smith <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="">Abholbereit am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href="loeschen_meine_buecher.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p class="message">Dieses Buch ist für Sie reserviert.</p>
|
||||||
|
<hr style="width:92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<a href="penguin.html"><img src="pictures/penguin_highway.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="penguin.html">Penguin Highway</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Tomihiko Morimi <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Rückgabe am: 03.05.2023</a>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<a href="es.html"><img src="pictures/es.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="es.html">Es</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen King <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="verlaengerung.html" >Rückgabe am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href="verlaengerung.html"><img src="pictures/extend.png" width="25" height="25"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>';
|
||||||
|
|
||||||
|
}
|
||||||
|
?>
|
||||||
69
buecher.html
69
buecher.html
|
|
@ -4,96 +4,102 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Bücher</title>
|
||||||
<script src="store.js" defer></script>
|
<link rel="icon" href="pictures/candle.png">
|
||||||
<title>Candle Bibliothek</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="containerofbuecher">
|
<div class="containerofbuecher">
|
||||||
<p id="büchertitel">Bücher</p>
|
<p id="büchertitel">Bücher</p>
|
||||||
|
<!--First Item-->
|
||||||
<div id="firstItem" class="items" >
|
<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>
|
<a href="percy.html"><img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
<h3 class="headerinItem">
|
<h3 class="headerinItem">
|
||||||
Percy Jackson: Diebe im Olymp
|
<a href="percy.html">Percy Jackson: Diebe im Olymp</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="discinItem">Verfasser: Rick Riordan <br>
|
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||||
Erscheinungsjahr: 2010 <br>
|
Erscheinungsjahr: 2010 <br>
|
||||||
Verlag: Carlsen <br>
|
Verlag: Carlsen <br>
|
||||||
Kategorie: Fantasy
|
Kategorie: Fantasy
|
||||||
</p>
|
</p>
|
||||||
<a class="greenbutton">Verfügbar</a>
|
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Second Item-->
|
<!--Second Item-->
|
||||||
<div id="secondItem" class="items">
|
<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>
|
<a href="dalmatians.html"><img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/></a>
|
||||||
<h3 class="headerinItem">
|
<h3 class="headerinItem">
|
||||||
The Hundred and One Dalmatians
|
<a href="dalmatians.html">The Hundred and One Dalmatians</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="discinItem">Verfasser: Dodie Smith <br>
|
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||||
Erscheinungsjahr: 2015 <br>
|
Erscheinungsjahr: 2015 <br>
|
||||||
Verlag: Farshore <br>
|
Verlag: Farshore <br>
|
||||||
Kategorie: Kinderbuch
|
Kategorie: Kinderbuch
|
||||||
</p>
|
</p>
|
||||||
<a class="redbutton" >Verfügbar ab: 30.04.2023</a>
|
<a class="redbutton" href="dalmatians.html">Verfügbar ab: 30.04.2023</a>
|
||||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
<hr style="width:92%;">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Third Item-->
|
<!--Third Item-->
|
||||||
<div id="thirdItem" class="items">
|
<div id="thirdItem" class="items">
|
||||||
<a href="penguin.html"><img class="buecherImages" src="pictures/penguin_highway.jpg" width="125" height="200"/> </a>
|
<a href="penguin.html"><img src="pictures/penguin_highway.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
<h3 class="headerinItem">
|
<h3 class="headerinItem">
|
||||||
Penguin Highway
|
<a href="penguin.html">Penguin Highway</a>
|
||||||
|
|
||||||
</h3>
|
</h3>
|
||||||
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||||
Erscheinungsjahr: 2019 <br>
|
Erscheinungsjahr: 2019 <br>
|
||||||
Verlag: Yen On <br>
|
Verlag: Yen On <br>
|
||||||
Kategorie: Fantasy
|
Kategorie: Fantasy
|
||||||
</p>
|
</p>
|
||||||
<a class="greenbutton" >Verfügbar</a>
|
<a class="greenbutton" href="penguin.html">Verfügbar</a>
|
||||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--fourth Item-->
|
<!--fourth Item-->
|
||||||
<div id="fourthItem" class="items" >
|
<div id="fourthItem" class="items" >
|
||||||
<a href="es.html"><img class="buecherImages" src="pictures/es.jpg" width="125" height="200"/> </a>
|
<a href="es.html"><img src="pictures/es.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
<h3 class="headerinItem">
|
<h3 class="headerinItem">
|
||||||
Es
|
<a href="es.html">Es</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="discinItem">Verfasser: Stephen King <br>
|
<p class="discinItem">Verfasser: Stephen King <br>
|
||||||
Erscheinungsjahr: 2011 <br>
|
Erscheinungsjahr: 2011 <br>
|
||||||
Verlag: Heyne <br>
|
Verlag: Heyne <br>
|
||||||
Kategorie: Horror
|
Kategorie: Horror
|
||||||
</p>
|
</p>
|
||||||
<a class="redbutton" >Verfügbar ab: 10.05.2023</a>
|
<a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
|
||||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,7 +109,6 @@
|
||||||
|
|
||||||
<!--Link JS file-->
|
<!--Link JS file-->
|
||||||
<script src="burgerIcon.js"></script>
|
<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>
|
<script>
|
||||||
var widthissue = false;
|
var widthissue = false;
|
||||||
window.addEventListener("resize", function(event) {
|
window.addEventListener("resize", function(event) {
|
||||||
|
|
@ -112,10 +117,10 @@
|
||||||
unset()
|
unset()
|
||||||
}
|
}
|
||||||
else if(window.innerWidth < 800) widthissue = true;
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<!--Burger-->
|
<!--Burger-->
|
||||||
<nav id="activeid" class="active">
|
<nav id="activeid" class="active">
|
||||||
<div class="navLinks">
|
<div class="navLinks">
|
||||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||||
|
|
@ -124,6 +129,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -136,4 +142,5 @@
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
@ -6,10 +6,15 @@ function openNav() {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#uberuns{
|
#uberuns{
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
#abmelden{
|
||||||
|
pointer-events: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
#buecher{
|
#buecher{
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -42,21 +47,59 @@ function openNav() {
|
||||||
right: 240px;
|
right: 240px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#uberuns{
|
#uberuns{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 340px;
|
left: 43%;
|
||||||
top: 43px;
|
top: 96px;
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
background-color:#664220 ;
|
||||||
|
color:rgb(255, 255, 255);
|
||||||
|
|
||||||
|
}
|
||||||
|
#abmelden{
|
||||||
|
position: fixed;
|
||||||
|
left: 0px;
|
||||||
|
top: 150px;
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
background-color:#664220 ;
|
||||||
|
color:rgb(255, 255, 255);
|
||||||
|
|
||||||
}
|
}
|
||||||
#buecher{
|
#buecher{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 340px;
|
left: 43%;
|
||||||
top: 96px;
|
top: 43px;
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
background-color:#664220 ;
|
||||||
|
color:rgb(255, 255, 255);
|
||||||
|
padding-right:10px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#meinebuecher{
|
#meinebuecher{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 340px;
|
left: 43%;
|
||||||
top: 150px;
|
top: 149px;
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
background-color:#664220 ;
|
||||||
|
color:rgb(255, 255, 255);
|
||||||
|
padding-right:10px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -65,6 +108,8 @@ function openNav() {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
if (document.getElementById('nav-toggle').checked) {
|
if (document.getElementById('nav-toggle').checked) {
|
||||||
var styleSheet = document.createElement("style")
|
var styleSheet = document.createElement("style")
|
||||||
|
|
@ -78,7 +123,7 @@ function openNav() {
|
||||||
|
|
||||||
link.type = 'text/css';
|
link.type = 'text/css';
|
||||||
|
|
||||||
link.href = 'probestyle.css';
|
link.href = 'style.css';
|
||||||
|
|
||||||
// Get HTML head element to append
|
// Get HTML head element to append
|
||||||
// link element to it
|
// link element to it
|
||||||
|
|
@ -91,21 +136,24 @@ function openNav() {
|
||||||
|
|
||||||
function unset()
|
function unset()
|
||||||
{
|
{
|
||||||
var link = document.createElement('link');
|
|
||||||
|
|
||||||
|
var link = document.createElement('link');
|
||||||
|
var head = document.getElementsByTagName('head')[0];
|
||||||
// set the attributes for link element
|
// set the attributes for link element
|
||||||
link.rel = 'stylesheet';
|
link.rel = 'stylesheet';
|
||||||
|
|
||||||
link.type = 'text/css';
|
link.type = 'text/css';
|
||||||
|
|
||||||
link.href = 'probestyle.css';
|
link.href = 'style.css';
|
||||||
|
link.media = 'all';
|
||||||
// Get HTML head element to append
|
// Get HTML head element to append
|
||||||
// link element to it
|
// link element to it
|
||||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
//document.getElementsByTagName('head').appendChild(link);
|
||||||
|
head.appendChild(link);
|
||||||
|
|
||||||
var styleSheet = document.createElement("style")
|
var styleSheet = document.createElement("style")
|
||||||
styleSheet.innerText = closeNav
|
styleSheet.innerText = closeNav
|
||||||
document.head.appendChild(styleSheet)
|
document.head.appendChild(styleSheet)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?php
|
||||||
|
$db_link = mysqli_connect('localhost', 'root', '', 'bibliothek');
|
||||||
|
|
||||||
|
if(!$db_link){
|
||||||
|
die("<p>Verbindung nicht hergestellt</p>");
|
||||||
|
}else{
|
||||||
|
echo "Verbindung hergestellt!";
|
||||||
|
}
|
||||||
|
|
||||||
|
function runSQL($sql){
|
||||||
|
global $db_link;
|
||||||
|
$db_res = mysqli_query($db_link, $sql) or die("SQL_Abfrage: " . $sql . "Fehler: " . mysqli_error($db_link));
|
||||||
|
return $db_res;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | The Hundred and One Dalmatians</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -46,13 +48,13 @@
|
||||||
|
|
||||||
<p class="percypar">
|
<p class="percypar">
|
||||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
<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
|
When Missis and Pongo's darling Dalmatian puppies are stolen, they know just who to suspect... the evil Cruella de Vil! 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>
|
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?
|
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>
|
<br><br>
|
||||||
<strong style="font-size: 25px;">Details</strong> <br>
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
ISBN: 978-1-4052-7840-9 <br>
|
ISBN: 978-1-4052-7840-9 <br>
|
||||||
Sprahce: Englisch <br>
|
Sprache: Englisch <br>
|
||||||
Stichwörter: Dalmatiner, Hunde, England, Welpen
|
Stichwörter: Dalmatiner, Hunde, England, Welpen
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -82,6 +84,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Datenschutz</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -78,6 +80,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Erweiterte Suche</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -119,6 +121,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
17
es.html
17
es.html
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Es</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -52,8 +54,8 @@
|
||||||
<br><br>
|
<br><br>
|
||||||
<strong style="font-size: 25px;">Details</strong> <br>
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
ISBN: 978-3-453-43577-3 <br>
|
ISBN: 978-3-453-43577-3 <br>
|
||||||
Sprahce: Deutsch <br>
|
Sprache: Deutsch <br>
|
||||||
Stichwörter: Horror, clown, Teenager, Monster
|
Stichwörter: Horror, Clown, Teenager, Monster
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,6 +84,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,49 +4,51 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Impressum</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
|
||||||
|
<div>
|
||||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||||
<p class="p2">
|
<div class="impressum-container">
|
||||||
<span id="titlebraun"><strong> Impressum </strong></span>
|
<h1>Impressum</h1>
|
||||||
<br><br>
|
<h2>Firmensitz</h2>
|
||||||
<strong style="font-style: italic;">Firmensitz</strong><br>
|
<p class="impressum-text">
|
||||||
Bibliothek Candle GmbH <br>
|
Bibliothek Candle GmbH <br>
|
||||||
Paul-Wittsack-Straße 10 <br>
|
Paul-Wittsack-Straße 10 <br>
|
||||||
68163 Mannheim <br>
|
68163 Mannheim <br>
|
||||||
|
</p>
|
||||||
<strong style="font-style: italic;">Kontaktdaten</strong> <br>
|
<h2>Kontaktdaten</h2>
|
||||||
|
<p class="impressum-text">
|
||||||
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
||||||
Telefax: 069 54 732122 <br>
|
Telefax: 069 54 732122 <br>
|
||||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Link JS file-->
|
<!--Link JS file-->
|
||||||
|
|
@ -72,6 +74,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
17
index.html
17
index.html
|
|
@ -4,29 +4,31 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Home</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -34,13 +36,13 @@
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||||
<p class="p1">
|
<p class="p1">
|
||||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
<span class="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||||
<br><br>
|
<br><br>
|
||||||
Die Bibliothek CANDLE begrüßt Sie ganz herzlich auf ihren Internetseiten. <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>
|
Nutzen Sie unser umfangreiches Angebot aus den beliebtesten Büchern. <br> <br>
|
||||||
Wir freuen uns auf Ihren Besuch!
|
Wir freuen uns auf Ihren Besuch!
|
||||||
<br><br>
|
<br><br>
|
||||||
<span id="titleschwarz">VERANSTALTUNGEN!</span>
|
<span class="titleschwarz">VERANSTALTUNGEN!</span>
|
||||||
<br><br>
|
<br><br>
|
||||||
Leserunde | jeden Mittwoch | 17:30 Uhr
|
Leserunde | jeden Mittwoch | 17:30 Uhr
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
@ -80,6 +82,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
14
kontakt.html
14
kontakt.html
|
|
@ -4,28 +4,31 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Kontakt</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -64,6 +67,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<footer class="fuss" >
|
<footer class="fuss" >
|
||||||
|
|
|
||||||
|
|
@ -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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Löschen Erfolgreich Meine Bücher</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Buch erfolgreich entfernt</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Die Reservierung wurde erfolgreich aufgehoben.</p>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungErfolgreichButton1" href="meinebuecher.html">Zurück zum Warennkorb</a>
|
||||||
|
</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>
|
||||||
|
</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,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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Löschen Erfolgreich</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Buch erfolgreich entfernt</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Das Buch wurde aus Ihrem Warenkorb entfernt.</p>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungErfolgreichButton1" href="warenkorb.html">Zurück zum Warennkorb</a>
|
||||||
|
</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>
|
||||||
|
</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,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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Löschen Meine Bücher</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Reservierung stornieren</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Möchten Sie die Reservierung für das folgende Buch wirklich stornieren?</p>
|
||||||
|
|
||||||
|
<div class="item" id="verlängerungItem">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" alt="The Hundred and One Dalmatians" height="200">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>The Hundred and One Dalmatians</h2>
|
||||||
|
<h3>von Dodie Smith</h3>
|
||||||
|
<div class="b2 red">Abholbereit am: 03.05.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungButton1" href="loeschenErfolgreich_meine_buecher.html">Bestätigen</a>
|
||||||
|
<a id = "verlängerungButton2" href="meinebuecher.html">Abbrechen</a>
|
||||||
|
</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>
|
||||||
|
</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,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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Löschen Warenkorb</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Buch entfernen</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Möchten Sie das folgende Buch wirklich aus Ihrem Warenkorb entfernen?</p>
|
||||||
|
|
||||||
|
<div class="item" id="verlängerungItem">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" alt="The Hundred and One Dalmatians" height="200">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>The Hundred and One Dalmatians</h2>
|
||||||
|
<h3>von Dodie Smith</h3>
|
||||||
|
<div class="b2 red">Verfügbar ab: 03.05.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungButton1" href="loeschenErfolgreich_warenkorb.html">Bestätigen</a>
|
||||||
|
<a id = "verlängerungButton2" href="warenkorb.html">Abbrechen</a>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<!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,142 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
if(isset($_SESSION['eingeloggt']) && $_SESSION['eingeloggt'] == 2 || $_SESSION['eingeloggt'] == 1 ){
|
||||||
|
echo '<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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Meine Bücher</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.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 id="firstItem" class="items" >
|
||||||
|
<a href="percy.html"><img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="percy.html">Percy Jackson: Diebe im Olymp</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Rick Riordan <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Sofort Abholbereit</a>
|
||||||
|
<a class="binPicture" href="loeschen_meine_buecher.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p class="message">Diese Reservierung verfällt, wenn das Buch nicht bis zum 24.04.2023 abgeholt wurde.</p>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<a href="dalmatians.html"><img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="dalmatians.html">The Hundred and One Dalmatians</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Dodie Smith <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="">Abholbereit am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href="loeschen_meine_buecher.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p class="message">Dieses Buch ist für Sie reserviert.</p>
|
||||||
|
<hr style="width:92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<a href="penguin.html"><img src="pictures/penguin_highway.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="penguin.html">Penguin Highway</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Tomihiko Morimi <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Rückgabe am: 03.05.2023</a>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<a href="es.html"><img src="pictures/es.jpg" width="125" height="200"/></a>
|
||||||
|
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="es.html">Es</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen King <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="verlaengerung.html" >Rückgabe am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href="verlaengerung.html"><img src="pictures/extend.png" width="25" height="25"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
13
penguin.html
13
penguin.html
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Penguin Highway</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -81,6 +83,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
17
percy.html
17
percy.html
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Percy Jackson: Diebe im Olymp</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -47,9 +49,9 @@
|
||||||
<p class="percypar">
|
<p class="percypar">
|
||||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
<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
|
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
|
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
|
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...
|
Feind: Kronos, den Titanen. Die Götter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
|
||||||
<br><br>
|
<br><br>
|
||||||
<strong style="font-size: 25px;">Details</strong> <br>
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
ISBN: 978-3-551-55661-5 <br>
|
ISBN: 978-3-551-55661-5 <br>
|
||||||
|
|
@ -84,6 +86,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,35 +11,35 @@ if (window.location.pathname.includes("/warenkorb.html")) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var minusButton = document.getElementsByClassName("fa fa-minus");
|
var minusButton = document.getElementsByClassName("fa fa-minus");
|
||||||
|
|
||||||
var plusButton = document.getElementsByClassName("fa fa-plus");
|
var plusButton = document.getElementsByClassName("fa fa-plus");
|
||||||
|
|
||||||
|
|
||||||
//Dieser Code Block gehört zur Warenkorb Datei
|
//Dieser Code Block gehört zur Warenkorb Datei
|
||||||
for(var i = 0;i<plusButton.length;i++)
|
for(var i = 0;i<plusButton.length;i++)
|
||||||
{
|
{
|
||||||
|
|
||||||
var button = plusButton[i]
|
var button = plusButton[i]
|
||||||
|
|
||||||
button.addEventListener('click', incrmenetValue)
|
button.addEventListener('click', incrmenetValue)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var j = 0;j<minusButton.length;j++)
|
for(var j = 0;j<minusButton.length;j++)
|
||||||
{
|
{
|
||||||
var button1 = minusButton[j]
|
var button1 = minusButton[j]
|
||||||
|
|
||||||
button1.addEventListener('click', decrmenetValue)
|
button1.addEventListener('click', decrmenetValue)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//<input class="input-group-field" type="number" name="quantity" value="1">
|
//<input class="input-group-field" type="number" name="quantity" value="1">
|
||||||
|
|
@ -67,7 +67,7 @@ function incrmenetValue(event)
|
||||||
// var getValue = shopItem.getElementsByClassName('input-group-field')[0].value;
|
// var getValue = shopItem.getElementsByClassName('input-group-field')[0].value;
|
||||||
if(getValue < 10){
|
if(getValue < 10){
|
||||||
getValue++;
|
getValue++;
|
||||||
}
|
}
|
||||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||||
localStorage.setItem(title, getValue)
|
localStorage.setItem(title, getValue)
|
||||||
|
|
||||||
|
|
@ -81,7 +81,7 @@ function decrmenetValue(event)
|
||||||
var getValue= localStorage.getItem(title) || 0;
|
var getValue= localStorage.getItem(title) || 0;
|
||||||
if(getValue > 0){
|
if(getValue > 0){
|
||||||
getValue--;
|
getValue--;
|
||||||
}
|
}
|
||||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||||
localStorage.setItem(title, getValue)
|
localStorage.setItem(title, getValue)
|
||||||
|
|
||||||
|
|
|
||||||
92
probe.html
92
probe.html
|
|
@ -1,92 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,94 +1,138 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Registrierung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<div class="hauptcontainer">
|
<div class="hauptcontainer">
|
||||||
|
|
||||||
<form action="">
|
<!--Bei action wird später eine php-Datei eingefügt,
|
||||||
|
welche sich um die Verarbeitung der Daten kümmert.-->
|
||||||
|
<form id="registrierungForm" action="">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span id="registrierungTitel" > Regestrierung </span>
|
<span id="registrierungTitel" > Registrierung </span>
|
||||||
<br>
|
<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>
|
<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>
|
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung<hr id="registrierungHr"></h4>
|
||||||
<br>
|
<br>
|
||||||
<span id="registrierungInputSpan" >
|
<div id="registrierungInputDiv" >
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="vorName"><b>Vorname</b></label>
|
<label for="vorName"><b>Vorname</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required>
|
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="nachName"><b>Nachname</b></label>
|
<label for="nachName"><b>Nachname</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required>
|
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="strasse" id="strasse" required>
|
<input type="text" name="strasse" id="strasse">
|
||||||
<input type="number" name="hausnummer" id="hausNummer" required>
|
|
||||||
|
<input type="text" name="hausnummer" id="hausNummer"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="number" name="postleitzahl" id="postleitzahl" required>
|
<input type="text" name="postleitzahl" id="postleitzahl">
|
||||||
<input type="text" name="ort" id="ort" required>
|
|
||||||
|
<input type="text" name="ort" id="ort"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required>
|
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required>
|
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="passwort"><b>Passwort</b></label>
|
<label for="passwort"><b>Passwort</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required>
|
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
|
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
<button type="submit" class="registrierenKnopf">Registrieren</button>
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<input type="button" value="Registrieren" id="registrierenKnopf" class="registrierenKnopf">
|
||||||
|
</div>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Sie habe bereits ein Konto?</summary>
|
<summary>Sie habe bereits ein Konto?</summary>
|
||||||
<p id="registrierenAusklappe"> <a href="anmelden.html"> Jetzt anmelden</a></p>
|
<p id="registrierenAusklappe"> <a href="anmelden_warenkorb.html"> Jetzt anmelden</a></p>
|
||||||
</details>
|
</details>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Link JS file-->
|
<!--Link JS file-->
|
||||||
<script src="burgerIcon.js"></script>
|
<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-->
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
|
@ -124,6 +168,8 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="registrierung_verhalten.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Registrierung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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="anmelden.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer">
|
||||||
|
|
||||||
|
<!--Bei action wird später eine php-Datei eingefügt,
|
||||||
|
welche sich um die Verarbeitung der Daten kümmert.-->
|
||||||
|
<form id="registrierungForm" action="">
|
||||||
|
<div class="container">
|
||||||
|
<span id="registrierungTitel" > Registrierung </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 Registrierung<hr id="registrierungHr"></h4>
|
||||||
|
<br>
|
||||||
|
<div id="registrierungInputDiv" >
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="vorName"><b>Vorname</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="nachName"><b>Nachname</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="text" name="strasse" id="strasse">
|
||||||
|
|
||||||
|
<input type="text" name="hausnummer" id="hausNummer"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="text" name="postleitzahl" id="postleitzahl">
|
||||||
|
|
||||||
|
<input type="text" name="ort" id="ort"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="passwort"><b>Passwort</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||||
|
<br>
|
||||||
|
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld"><br>
|
||||||
|
<p class="errorMessage"></p>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<input type="button" value="Registrieren" id="registrierenKnopf" class="registrierenKnopf">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Sie habe bereits ein Konto?</summary>
|
||||||
|
<p id="registrierenAusklappe"> <a href="anmelden_warenkorb.html"> Jetzt anmelden</a></p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<script src="registrierung_verhalten.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Erfolgreich Registriert</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!--------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div class="mainContentContainer">
|
||||||
|
<div class="titleContainer">
|
||||||
|
<h1 id="registeredTitle">Erfolgreich registriert</h1>
|
||||||
|
</div>
|
||||||
|
<div class="mainContent">
|
||||||
|
<p id="textFirstHalf">
|
||||||
|
Sie wurden erfolgreich registriert.
|
||||||
|
<br><br>Ihre Karten-ID ist</p>
|
||||||
|
<!--TODO: Placeholder entfernen
|
||||||
|
und durch ID aus Datenbank ersetzen-->
|
||||||
|
<p id="cardID">XXXXXX.</p>
|
||||||
|
<br><br>
|
||||||
|
<p id="textLastHalf">
|
||||||
|
Mit dieser ID und Ihrem Passwort
|
||||||
|
können Sie sich direkt auf unserer Website anmelden und,
|
||||||
|
bei Bedarf, bereits Bücher für eine Ausleihe reservieren.
|
||||||
|
<br><br>Die Karten-ID findet sich auf Ihrem
|
||||||
|
Bibliotheksausweis wieder, welchen Sie bei Ihrem ersten
|
||||||
|
Besuch in unserer Bibliothek erhalten.
|
||||||
|
<br>Der Bibliotheksausweis kostet 10€ und muss jedes Jahr
|
||||||
|
vor Ort für den gleichen Preis verlängert werden.
|
||||||
|
<br>Bitte beachten Sie, dass ohne Vorlage eines
|
||||||
|
gültigen Ausweises, keine Bücher abgeholt werden können.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<!--TODO: Event für den Button befindet sich momentan
|
||||||
|
noch hier in der Datei. Soll die Funktion in eine
|
||||||
|
andere Datei verschoben werden, da sich eigentlich keine
|
||||||
|
EventListener in der HTML-Datei befinden sollen?-->
|
||||||
|
<input type="button" id="loginNowButton" value="Jetzt anmelden"
|
||||||
|
onclick="linkToLoginPage()">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function linkToLoginPage() {
|
||||||
|
window.location.replace("anmelden_meinebuecher.html");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
</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>
|
||||||
|
</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,655 @@
|
||||||
|
// TODO: Aufräumen
|
||||||
|
|
||||||
|
// Großbuchstaben -> [A-Z]
|
||||||
|
// Kleinbuchstaben -> [a-z]
|
||||||
|
// Bindestrich -> [-]
|
||||||
|
// Unterstrich -> [_]
|
||||||
|
// Leerzeichen -> [ ]
|
||||||
|
// Großbuchstaben (Umlaute) -> [ÄÖÜ]
|
||||||
|
// Kleinbuchstaben (Umlaute) -> [äöü]
|
||||||
|
// Sonderzeichen -> [°^!"§$%&/{}()[]=?\´`@€+*~#'<>|,;.:-_]
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// EventListener für die Eingabefelder hinzufügen.
|
||||||
|
document.getElementById("vorName").addEventListener("blur", checkFirstName);
|
||||||
|
document.getElementById("nachName").addEventListener("blur", checkLastName);
|
||||||
|
document.getElementById("strasse").addEventListener("blur", checkStreetName);
|
||||||
|
document.getElementById("hausNummer")
|
||||||
|
.addEventListener("blur", checkHouseNumber);
|
||||||
|
document.getElementById("postleitzahl").addEventListener("blur", checkPLZ);
|
||||||
|
document.getElementById("ort").addEventListener("blur", checkCity);
|
||||||
|
document.getElementById("email").addEventListener("blur", checkEmailAddress);
|
||||||
|
document.getElementById("emailRep")
|
||||||
|
.addEventListener("blur", checkRepeat_EmailAddress);
|
||||||
|
document.getElementById("passwort").addEventListener("blur", checkPassword);
|
||||||
|
document.getElementById("passwortRep")
|
||||||
|
.addEventListener("blur", checkRepeat_Password);
|
||||||
|
|
||||||
|
// EventListener für den Button "Registrieren" hinzufügen.
|
||||||
|
document.getElementById("registrierenKnopf")
|
||||||
|
.addEventListener("click", checkForPossibleSubmit);
|
||||||
|
|
||||||
|
/* // EventListener für das Formular hinzufügen.
|
||||||
|
document.getElementById("registrierungForm")
|
||||||
|
.addEventListener("submit", checkForPossibleSubmit); */
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Überprüft, ob ein Eingabefeld ausgefüllt wurde.
|
||||||
|
*
|
||||||
|
* @param element Eingabefeld, welches überprüft werden soll.
|
||||||
|
* @returns false -> Feld wurde nicht ausgefüllt; true -> Feld wurde ausgefüllt.
|
||||||
|
*/
|
||||||
|
function checkIfElementHasValue(element) {
|
||||||
|
regex_onlyWhitespaces = /^\s*$/;
|
||||||
|
if (element.value == "" || element.value == null
|
||||||
|
|| regex_onlyWhitespaces.test(element.value)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zeigt eine Fehlermeldung unter dem übergebenen Eingabefeld ein.
|
||||||
|
*
|
||||||
|
* @param inputField Eingabefeld, unter dem die Meldung erscheinen soll.
|
||||||
|
* @param pNumber Nummer des Paragraphen Elements, welches geändert werden soll.
|
||||||
|
* @param message Fehlermeldung, die angezeigt werden soll.
|
||||||
|
*/
|
||||||
|
function showErrorMessage(inputField, pNumber, message) {
|
||||||
|
inputField.style.border = "2px solid #F22C2C"
|
||||||
|
var classOfInputField = inputField.parentElement;
|
||||||
|
var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
|
||||||
|
errorMessage.innerHTML = message;
|
||||||
|
errorMessage.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Entfernt eine Fehlermeldung, falls vorhanden.
|
||||||
|
*
|
||||||
|
* @param inputField Eingabefeld, dessen Meldung entfernt werden soll.
|
||||||
|
* @param pNumber Nummer des Paragraphen Elements, welches geändert werden soll.
|
||||||
|
*/
|
||||||
|
function removeErrorMessage(inputField, pNumber) {
|
||||||
|
inputField.style.border = "2px solid #70AD47"
|
||||||
|
var classOfInputField = inputField.parentElement;
|
||||||
|
var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
|
||||||
|
errorMessage.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Jeder Vorname beginnt mit einem Großbuchstaben,
|
||||||
|
* gefolgt von mindestens einem Kleinbuchstaben.
|
||||||
|
* Mehrere Vornamen können mit einem Leerzeichen
|
||||||
|
* oder Bindestrich getrennt werden.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// Anna -> Keine Fehlermeldung
|
||||||
|
// Björn -> Keine Fehlermeldung
|
||||||
|
// Anna-Maria -> Keine Fehlermeldung
|
||||||
|
// Anna Maria -> Keine Fehlermeldung
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// Sarah. -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// Karín -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// 1234 -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// L -> Fehlermeldung Anzahl Zeichen
|
||||||
|
// Anna maria -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// Anna MAria -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// Annnna -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
// Anna--Maria -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
// Anna Maria -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
// Anna M -> Fehlermeldung Anzahl Zeichen pro Teil
|
||||||
|
// Anna- -> Fehlermeldung Letztes Zeichen
|
||||||
|
// Anna -> Fehlermeldung Letztes Zeichen
|
||||||
|
function checkFirstName() {
|
||||||
|
var firstName = document.getElementById("vorName");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(firstName))) {
|
||||||
|
showErrorMessage(firstName, 0, "Bitte füllen Sie das Feld aus.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erlaubte Zeichen
|
||||||
|
else if (!(/^[A-Za-zÄÖÜäöüß -]*$/.test(firstName.value))) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Ein Vorname darf nur Groß- und Kleinbuchstaben von A-Z, "
|
||||||
|
+ "sowie Umlaute, Eszett, Bindestriche und Leerzeichen enthalten.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen
|
||||||
|
else if (!(/.{2,}/.test(firstName.value))) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Ein Vorname muss aus mindestens zwei Buchstaben bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
else if (/(?:([- ])\1{1,}|( -)|(- ))/.test(firstName.value)) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen pro Teil
|
||||||
|
else if (!(/^([A-ZÄÖÜa-zäöüß]{2,}[ -]?)+$/.test(firstName.value))) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Jeder Teil eines Vornamens muss aus "
|
||||||
|
+ "mindestens zwei Buchstaben bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Letztes Zeichen
|
||||||
|
else if (!(/[a-zäöüß]$/.test(firstName.value))) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Der Vorname muss mit einem Kleinbuchstaben enden.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([- ][A-ZÄÖÜ][a-zäöüß]+)*$/
|
||||||
|
.test(firstName.value))) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Jeder Teil eines Vornamens "
|
||||||
|
+ "muss mit einem Großbuchstaben beginnen. "
|
||||||
|
+ "Nach einem Großbuchstaben folgen nur Kleinbuchstaben.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
else if (/(\w)\1{2,}/.test(firstName.value)) {
|
||||||
|
showErrorMessage(firstName, 0,
|
||||||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
||||||
|
+ "nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(firstName, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ein Nachname kann mit einem Klein- oder Großbuchstaben beginnen,
|
||||||
|
* gefolgt von mindestens einem Kleinbuchstaben.
|
||||||
|
* Mehrere Nachnamen können mit einem Leerzeichen
|
||||||
|
* oder Bindestrich getrennt werden.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// Schulze -> Keine Fehlermeldung
|
||||||
|
// Jäger -> Keine Fehlermeldung
|
||||||
|
// Ziegler-Hermann -> Keine Fehlermeldung
|
||||||
|
// von der Leyen -> Keine Fehlermeldung
|
||||||
|
// von Bern -> Keine Fehlermeldung
|
||||||
|
// zu Liechtenstein -> Keine Fehlermeldung
|
||||||
|
// Bÿl -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// Jäger. -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// 1234 -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// B -> Fehlermeldung Anzahl Zeichen
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// bauer -> Fehlermeldung Erlaubtes Namenspräfix
|
||||||
|
// vom Bauer -> Fehlermeldung Erlaubtes Namenspräfix
|
||||||
|
// BauEr -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// Bauuuer -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
// Ziegler Hermann -> Fehler Doppelnamen
|
||||||
|
// Ziegler--Hermann -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
// Bauer- -> Fehlermeldung Letztes Zeichen
|
||||||
|
function checkLastName() {
|
||||||
|
var lastName = document.getElementById("nachName");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(lastName))) {
|
||||||
|
showErrorMessage(lastName, 0, "Bitte füllen Sie das Feld aus.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erlaubte Zeichen
|
||||||
|
else if (!(/^[A-Za-zÄÖÜäöüß -]*$/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Ein Nachname darf nur Groß- und Kleinbuchstaben von A-Z, "
|
||||||
|
+ "sowie Umlaute, Eszett, Bindestriche und Leerzeichen enthalten.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen
|
||||||
|
else if (!(/.{2,}/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Ein Nachname muss aus mindestens zwei Buchstaben bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
else if (/([-])\1{1,}/.test(lastName.value)) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen pro Teil
|
||||||
|
else if (!(/^([A-ZÄÖÜa-zäöüß]{2,}[ -]?)+$/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Jeder Teil eines Nachnamens muss aus "
|
||||||
|
+ "mindestens zwei Buchstaben bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Letztes Zeichen
|
||||||
|
else if (!(/[a-zäöüß]$/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Der Nachname muss mit einem Kleinbuchstaben enden.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehler Doppelnamen
|
||||||
|
else if (/[A-ZÄÖÜ][a-zäöüß]+[ ]+[A-ZÄÖÜ][a-zäöüß]+/.test(lastName.value)) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Doppelnamen müssen mit einem Bindestrich getrennt werden.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erlaubtes Namenspräfix
|
||||||
|
else if (!(/^(von( der)?|zu)[ ][A-ZÄÖÜ]|^[A-ZÄÖÜ]/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Ein Nachname muss muss mit einem Großbuchstaben beginnen, "
|
||||||
|
+ "es sei denn, Sie benutzen ein Namenspräfix.<br>"
|
||||||
|
+ "Gültige Namenspräfixe sind 'von', 'zu' und 'von der'.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
else if (!(/(^(von( der)?|zu)[ ][A-ZÄÖÜ][a-zäöüß]+|^[A-ZÄÖÜ][a-zäöüß]+)([-][A-ZÄÖÜ][a-zäöüß]+)?$/.test(lastName.value))) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Jeder Teil eines Nachnamens, bis auf den möglichen Namenszusatz am Anfang, "
|
||||||
|
+ "muss mit einem Großbuchstaben beginnen. "
|
||||||
|
+ "Nach einem Großbuchstaben folgen nur Kleinbuchstaben.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
else if (/(\w)\1{2,}/.test(lastName.value)) {
|
||||||
|
showErrorMessage(lastName, 0,
|
||||||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
||||||
|
+ "nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(lastName, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ein Straßenname kann aus Buchstaben (inlusive Umlaute), Ziffern
|
||||||
|
* oder einer Mischung aus beidem bestehen.
|
||||||
|
* Auch Apostrophen und das scharfe S können im Namen vorkommen,
|
||||||
|
* stehen aber nie am Anfang.
|
||||||
|
* Ein Straßenname kann aus mehreren Teilen bestehen,
|
||||||
|
* welche mit einem Leerzeichen oder Bindestrich getrennt werden.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// Straße 73 -> Keine Fehlermeldung
|
||||||
|
// Kurt-Romstöck-Ring -> Keine Fehlermeldung
|
||||||
|
// Laehr'scher Jagdweg -> Keine Fehlermeldung
|
||||||
|
// A 3 -> Keine Fehlermeldung -> Keine Fehlermeldung
|
||||||
|
// A3 -> Keine Fehlermeldung
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// Frießenstr. -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// D -> Fehlermeldung Anzahl Zeichen
|
||||||
|
// 1234 -> Fehlermeldung Ziffern
|
||||||
|
// Fri3senstraße -> Fehlermeldung Ziffern
|
||||||
|
// kurt-Romstöck-Ring -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// Rue de Saint-Germain-lès-Corbeil -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// Musterstraße' -> Fehlermeldung Letztes Zeichen
|
||||||
|
function checkStreetName() {
|
||||||
|
var streetName = document.getElementById("strasse");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(streetName))) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Bitte füllen Sie das Feld Straße aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen
|
||||||
|
else if (!(/.{2,}/.test(streetName.value))) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Ein Straßenname muss aus mindestens zwei Zeichen bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Ziffern
|
||||||
|
else if (!(/^[^0-9]*$|[0-9]$/.test(streetName.value))) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Ziffern und Zahlen dürfen nur am Ende des Straßennamens stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erlaubte Zeichen
|
||||||
|
else if (!(/^[A-Za-z0-9ÄÖÜäöüß' -]+$/.test(streetName.value))) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Ein Straßenname darf nur aus Groß- und Kleinbuchstaben, "
|
||||||
|
+ "Umlauten, Eszett, Ziffern, Bindestrichen "
|
||||||
|
+ "und Apostrophen bestehen.<br>Bitte stellen Sie sicher, "
|
||||||
|
+ "dass alle Abkürzungen ausgeschrieben sind.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
else if (!(/^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']+([ -]?[A-ZÄÖÜ0-9][A-Za-z0-9ÄÖÜäöüß']+)*$/)
|
||||||
|
.test(streetName.value)) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Jeder Teil des Straßennamens muss "
|
||||||
|
+ "mit einem Großbuchstaben beginnen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Letztes Zeichen
|
||||||
|
else if (!(/[0-9]$|[a-zäöüß]$/.test(streetName.value))) {
|
||||||
|
showErrorMessage(streetName, 0,
|
||||||
|
"Ein Straßenname kann nur mit einer Ziffer "
|
||||||
|
+ "oder einem Kleinbuchstaben enden.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(streetName, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen.
|
||||||
|
* Jede Hausnummer beginnt mit mindestens einer Ziffer.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// 54 -> Keine Fehlermeldung
|
||||||
|
// 2a -> Keine Fehlermeldung
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// a3 -> Fehlermeldung Erstes Zeichen
|
||||||
|
// 2A -> Fehlermeldung Syntax
|
||||||
|
// 2ab -> Fehlermeldung Syntax
|
||||||
|
// 12345 -> Fehlermeldung Syntax
|
||||||
|
// 0 -> Fehlermeldung Führende Null
|
||||||
|
function checkHouseNumber() {
|
||||||
|
var houseNumber = document.getElementById("hausNummer");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(houseNumber))) {
|
||||||
|
showErrorMessage(houseNumber, 1,
|
||||||
|
"Bitte füllen Sie das Feld Hausnummer aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erstes Zeichen
|
||||||
|
else if (!(/^[0-9]/.test(houseNumber.value))) {
|
||||||
|
showErrorMessage(houseNumber, 1,
|
||||||
|
"Eine Hausnummer muss mit einer Ziffer beginnen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Führende Null
|
||||||
|
else if (/^0/.test(houseNumber.value)) {
|
||||||
|
showErrorMessage(houseNumber, 1,
|
||||||
|
"Eine Hausnummer kann nicht mit einer Null beginnen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Syntax
|
||||||
|
else if (!(/^[1-9][0-9]{0,3}[a-z]?$/.test(houseNumber.value))) {
|
||||||
|
showErrorMessage(houseNumber, 1,
|
||||||
|
"Bitte geben Sie eine gültige Hausnummer ein, "
|
||||||
|
+ "welche aus maximal fünf Ziffern und maximal "
|
||||||
|
+ "einem Kleinbuchstaben am Ende der Hausnummer besteht.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(houseNumber, 1);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern.
|
||||||
|
* Die kleinste mögliche Postzahl ist 01001.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// 67547 -> Keine Fehlermeldung
|
||||||
|
// 08123 -> Keine Fehlermeldung
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// 00000 -> Fehlermeldung Syntax
|
||||||
|
function checkPLZ() {
|
||||||
|
var plz = document.getElementById("postleitzahl");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(plz))) {
|
||||||
|
showErrorMessage(plz, 0,
|
||||||
|
"Bitte füllen Sie das Feld Postleitzahl aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Syntax
|
||||||
|
else if (!(/^(0100[1-9]|010[1-9][0-9]|01[1-9][0-9]{2}|0[2-9][0-9]{3}|[1-9][0-9]{4})$/
|
||||||
|
.test(plz.value))) {
|
||||||
|
showErrorMessage(plz, 0,
|
||||||
|
"Bitte geben Sie eine gültige Postleitzahl ein, "
|
||||||
|
+ "welche aus fünf Ziffern besteht. "
|
||||||
|
+ "Die kleinste gültige Postleitzahl ist 01001.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(plz, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ein Stadtname besteht aus Buchstaben (inklusive Umlaute und Eszett),
|
||||||
|
* kann mehrere Teile haben und beginnt immer mit einem Großbuchstaben.
|
||||||
|
* Die einzelnen Teile können durch ein Leerzeichen, einen Bindestrich,
|
||||||
|
* oder einen Schrägstrich getrennt werden.
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// Füssen -> Keine Fehlermeldung
|
||||||
|
// Frankenberg/Sachsen -> Keine Fehlermeldung
|
||||||
|
// Eschenbach in der Oberpfalz -> Keine Fehlermeldung
|
||||||
|
// Auma-Weidatal -> Keine Fehlermeldung
|
||||||
|
// Gießen -> Keine Fehlermeldung
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// -> Fehlermeldung Leeres Feld
|
||||||
|
// St. Ingbert -> Fehlermeldung Erlaubte Zeichen
|
||||||
|
// Auma--Weidatal -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
// Frankenberg/ Sachsen -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
// Füsssen -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
// S -> Fehlermeldung Anzahl Zeichen
|
||||||
|
// Auma-weidatal -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// füssen -> Fehlermeldung Großschreibung Anfang
|
||||||
|
// FüSsen -> Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
// Auma- -> Fehlermeldung Letztes Zeichen
|
||||||
|
function checkCity() {
|
||||||
|
var city = document.getElementById("ort");
|
||||||
|
// Fehlermeldung Leeres Feld
|
||||||
|
if (!(checkIfElementHasValue(city))) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Bitte füllen Sie das Feld Ort aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen
|
||||||
|
else if (!(/.{2,}/.test(city.value))) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Ein Ortsname muss aus mindestens zwei Zeichen bestehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
||||||
|
else if (/[ \/-][ \/-]/.test(city.value)) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Erlaubte Zeichen
|
||||||
|
else if (!(/^[A-ZÄÖÜa-zäöüß \/-]+$/.test(city.value))) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Ein Ortsname kann nur aus Groß- und Kleinbuchstaben, "
|
||||||
|
+ "inklusive Umlauten und Eszett bestehen. "
|
||||||
|
+ "Mehrteilige Ortsnamen können mit einem Leerzeichen, Bindestrich "
|
||||||
|
+ "oder Schrägstrich getrennt werden. Bitte stellen Sie außerdem "
|
||||||
|
+" sicher, dass alle Abkürzungen ausgeschrieben sind.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
||||||
|
else if (/(\w)\1{2,}/.test(city.value)) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
||||||
|
+ "nebeneinander stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Großschreibung Anfang
|
||||||
|
else if (!(/^[A-ZÄÖÜ]/.test(city.value))) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Ein Ortsname muss mit einem Großbuchstaben beginnen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Letztes Zeichen
|
||||||
|
else if (!(/[a-zäöüß]$/.test(city.value))) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Ein Ortsname kann nur mit einem Kleinbuchstaben enden.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Groß- und Kleinschreibung
|
||||||
|
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([ -\/][A-ZÄÖÜa-zäöü][a-zäöüß]+)*$/)
|
||||||
|
.test(city.value)) {
|
||||||
|
showErrorMessage(city, 1,
|
||||||
|
"Großbuchstaben können nur am Anfang des Ortsnamens oder, "
|
||||||
|
+ "bei mehrteiligen Ortsnamen, am Anfang eines Teilnamens stehen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(city, 1);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eine E-Mail-Addresse besteht aus einem Lokal- und einem Domänenteil,
|
||||||
|
* welche durch ein @ Zeichen getrennt werden.
|
||||||
|
* Der lokale Teil darf Buchstaben (Basis-Lateinisch), Ziffern
|
||||||
|
* und verschiedene Sonderzeichen enthalten.
|
||||||
|
*
|
||||||
|
* Der ganze Lokalteil oder Teilabschnitte
|
||||||
|
* können mit Anführungszeichen umschlossen werden.
|
||||||
|
* Innerhalb der Anführungszeichen dürfen zusätzliche Sonderzeichen
|
||||||
|
* und Leerzeichen genutzt werden.
|
||||||
|
* Auch erneute Anführungszeichen und Backslashes sind erlaubt,
|
||||||
|
* müssen aber nach einem zusätzlichen Backslash stehen.
|
||||||
|
* Am Anfang und Ende des lokalen Teils dürfen Kommentare in runden Klammern stehen.
|
||||||
|
* Der Lokalteil darf nicht mit einem Punkt beginnen oder enden.
|
||||||
|
*
|
||||||
|
* Der Domänenteil besteht meist selbst aus drei Teilen:
|
||||||
|
* einem Hostnamen, einem Punkt und einer Top-Level-Domain.
|
||||||
|
* Die Top-Level-Domain besteht aus mindestens zwei Zeichen.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
// Beispiele zum Testen:
|
||||||
|
// MaxMustermann@email.de -> Keine Fehlermeldung
|
||||||
|
// Max!#.Mustermann@email9.com -> Keine Fehlermeldung
|
||||||
|
function checkEmailAddress() {
|
||||||
|
const regex_emailAddress = /[A-Za-z0-9_!#$%&'*+-\/=?^_`.{|}~]+[@][A-Za-z0-9-]+[.][A-Za-z]{2,}/;
|
||||||
|
var emailAddress = document.getElementById("email");
|
||||||
|
if (!(checkIfElementHasValue(emailAddress))) {
|
||||||
|
showErrorMessage(emailAddress, 0, "Bitte füllen Sie das Feld aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else if (!(regex_emailAddress.test(emailAddress.value))) {
|
||||||
|
showErrorMessage(emailAddress, 0, "Bitte geben Sie eine gültige E-Mail-Addresse ein, welche die Form 'lokalerTeil@domainteil.topLevelDomain' hat. Erlaubte Zeichen sind Groß- und Kleinbuchstaben, Ziffern und Sonderzeichen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(emailAddress, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prüft die Übereinstimmung mit der bereits eingegebenen E-Mail-Addresse.
|
||||||
|
*/
|
||||||
|
function checkRepeat_EmailAddress() {
|
||||||
|
var emailAddress = document.getElementById("email");
|
||||||
|
var repeatEmailAddress = document.getElementById("emailRep");
|
||||||
|
if (!(checkIfElementHasValue(repeatEmailAddress))) {
|
||||||
|
showErrorMessage(repeatEmailAddress, 0,
|
||||||
|
"Bitte füllen Sie das Feld aus.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else if (emailAddress.value != repeatEmailAddress.value) {
|
||||||
|
showErrorMessage(repeatEmailAddress, 0,
|
||||||
|
"Bitte stellen Sie sicher, "
|
||||||
|
+ "dass die E-Mail-Addressen miteinander übereinstimmen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(repeatEmailAddress, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ein Passwort muss aus mindestens sechs Zeichen bestehen.
|
||||||
|
* Außerdem muss das Passwort mindestens einen Groß- und Kleinbuchstaben
|
||||||
|
* (Basis-Lateinisch und Umlaute), eine Ziffer
|
||||||
|
* und eines der folgenden Sonderzeichen enthalten:
|
||||||
|
* [!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]
|
||||||
|
*/
|
||||||
|
function checkPassword() {
|
||||||
|
var regex_password = /^(?=.*[A-ZÄÖÜ])(?=.*[a-zäöüß])(?=.*[0-9])(?=.*[!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,}$/;
|
||||||
|
var password = document.getElementById("passwort");
|
||||||
|
if (!(checkIfElementHasValue(password))) {
|
||||||
|
showErrorMessage(password, 0, "Bitte füllen Sie das Feld aus.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Fehlermeldung Anzahl Zeichen
|
||||||
|
else if (!(/.{6,}/.test(password))) {
|
||||||
|
showErrorMessage(password, 0,
|
||||||
|
"Ihr Passwort muss eine Länge von mindestens sechs Zeichen haben.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else if (!(regex_password.test(password.value))) {
|
||||||
|
showErrorMessage(password, 0,
|
||||||
|
"Ihr Passwort muss mindestens einen "
|
||||||
|
+ "Groß- und Kleinbuchstaben (inklusive Umlaute und Eszett), "
|
||||||
|
+ "eine Ziffer und ein Sonderzeichen enthalten.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(password, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prüft die Übereinstimmung mit dem bereits eingegebenen Passwort.
|
||||||
|
*/
|
||||||
|
function checkRepeat_Password() {
|
||||||
|
var password = document.getElementById("passwort");
|
||||||
|
var repeatPassword = document.getElementById("passwortRep");
|
||||||
|
if (!(checkIfElementHasValue(repeatPassword))) {
|
||||||
|
showErrorMessage(repeatPassword, 0, "Bitte füllen Sie das Feld aus.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else if (repeatPassword.value != password.value) {
|
||||||
|
showErrorMessage(repeatPassword, 0,
|
||||||
|
"Bitte stellen Sie sicher, "
|
||||||
|
+ "dass die Passwörter miteinander übereinstimmen.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeErrorMessage(repeatPassword, 0);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prüft, ob alle Eingaben des Formulars vorhanden und gültig sind.
|
||||||
|
* Ist dies der Fall, werden die Daten verarbeitet
|
||||||
|
* und der Nutzer wird auf die Seite "Erfolgreich registriert" weitergeleitet.
|
||||||
|
*/
|
||||||
|
function checkForPossibleSubmit() {
|
||||||
|
var firstName = checkFirstName();
|
||||||
|
var lastName = checkLastName();
|
||||||
|
var streetName = checkStreetName();
|
||||||
|
var houseNumber = checkHouseNumber();
|
||||||
|
var plz = checkPLZ();
|
||||||
|
var city = checkCity();
|
||||||
|
var emailAddress = checkEmailAddress();
|
||||||
|
var repeatEmailAddress = checkRepeat_EmailAddress();
|
||||||
|
var password = checkPassword();
|
||||||
|
var repeatPassword = checkRepeat_Password();
|
||||||
|
if (firstName && lastName && streetName && houseNumber && plz && city &&
|
||||||
|
emailAddress && repeatEmailAddress && password && repeatPassword) {
|
||||||
|
// TODO: Formular submitten.
|
||||||
|
window.location.replace("registrierung_erfolgreich.html");
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// TODO: Soll irgendetwas passieren?
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Reservierungsbestätigung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="reservierung">
|
||||||
|
<h1>Reservierung erfolgreich bestätigt</h1>
|
||||||
|
<div id="reservierung-left">
|
||||||
|
<p id="erklärung">Ihre Reservierung wurde bestätigt. Einen Überblick über Ihre reservierten Bücher
|
||||||
|
sowie die Informationen darüber, ab wann ein Buch verfügbar ist und bis wann es spätestens abgeholt
|
||||||
|
werden muss, finden Sie auf der Seite "<a href="meinebuecher.html">Meine Bücher</a>".</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="button-container">
|
||||||
|
<a href="meinebuecher.html">Meine Bücher</a>
|
||||||
|
</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>
|
||||||
|
</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,124 @@
|
||||||
|
<!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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Reservierung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="reservierung">
|
||||||
|
<h1>Reservierungsbestätigung</h1>
|
||||||
|
<div id="reservierung-left">
|
||||||
|
<p id="möchten-sie">Möchten Sie die folgenden Bücher reservieren?</p>
|
||||||
|
<div class="item">
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" alt="Percy Jackson: Diebe im Olymp" height="120">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>Percy Jackson: Diebe in Olymp</h2>
|
||||||
|
<div class="b2 green">Sofort Abholbereit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" alt="The Hundred and One Dalmatians" height="120">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>The Hundred and One Dalmatians</h2>
|
||||||
|
<div class="b2 red">Verfügbar ab: 03.05.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<img src="pictures/penguin_highway.jpg" alt="Penguin Highway" height="120">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>Penguin Highway</h2>
|
||||||
|
<div class="b2 red">Verfügbar ab: 30.04.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="erklärung">Bitte beachten Sie, dass die Reservierung für ein Buch automatisch verfällt, sollten Sie es nicht
|
||||||
|
innerhalb von 7 Tagen abholen.</br>
|
||||||
|
Die Informationen darüber, ab wann ein Buch verfügbar ist und bis wann es spätestens abgeholt werden muss,
|
||||||
|
finden Sie nach einer erfolgreichen Reservierung auf der Seite "<a href="meinebuecher.html">Meine Bücher</a>".
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="button-container">
|
||||||
|
<a href="warenkorb.html">Zurück zum Warenkorb</a>
|
||||||
|
<a href="reservierung-bestaetigung.html">Bestätigen</a>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
169
store.js
169
store.js
|
|
@ -1,169 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,28 +4,30 @@
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek | Über Uns</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
|
||||||
width="200" height="192"/> </a>
|
width="200" height="192"/> </a>
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="buecher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
<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"
|
<a href="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
width="50" height="50"/> </a>
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -70,6 +72,7 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
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,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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Verlängerung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Buch verlängern</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Möchten Sie das folgende Buch um 7 Tage verlängern?</p>
|
||||||
|
|
||||||
|
<div class="item" id="verlängerungItem">
|
||||||
|
<img src="pictures/es.jpg" alt="Es" height="200">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>Es</h2>
|
||||||
|
<h3>von Stephen King</h3>
|
||||||
|
<div class="b2 green">Rückgabe am: 03.05.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungButton1" href="verlaengerungErfolgreich.html">Bestätigen</a>
|
||||||
|
<a id = "verlängerungButton2" href="meinebuecher.html">Abbrechen</a>
|
||||||
|
</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>
|
||||||
|
</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,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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Verlängerung Bestätigung</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
<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="anmelden_meinebuecher.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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="anmelden.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="hauptcontainer" id="verlängerung">
|
||||||
|
<h1 id="verlängerungH1">Buch erfolgreich verlängert</h1>
|
||||||
|
<div id="verlängerungContent">
|
||||||
|
<p id="möchten-sie">Das Buch wurde verlängert.<br>Neues Rückgabedatum: 10.05.2023</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="item" id="verlängerungItem">
|
||||||
|
<img src="pictures/es.jpg" alt="Es" height="200">
|
||||||
|
<div class="beschreibung">
|
||||||
|
<h2>Es</h2>
|
||||||
|
<h3>von Stephen King</h3>
|
||||||
|
<div class="b2 green">Rückgabe am: 10.05.2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="verlängerungButtonContainer">
|
||||||
|
<a id = "verlängerungErfolgreichButton1" href="meinebuecher.html">Zurück zu Meine Bücher</a>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
225
warenkorb.html
225
warenkorb.html
|
|
@ -1,225 +0,0 @@
|
||||||
<!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>
|
|
||||||
153
warenkorb.js
153
warenkorb.js
|
|
@ -1,153 +0,0 @@
|
||||||
|
|
||||||
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")
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
if(isset($_SESSION['eingeloggt']) && $_SESSION['eingeloggt'] == 1 ){
|
||||||
|
echo '<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="style.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<title>Candle Bibliothek | Warenkorb</title>
|
||||||
|
<link rel="icon" href="pictures/candle.png">
|
||||||
|
</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.php">Meine Bücher</a>
|
||||||
|
<a id="abmelden" href="abmelden.html">Abmelden</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.php" id="warenKorbID"> <img id="shoppingCard" src="pictures/einkaufswagen.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<h1 id="warenkorbHeader">
|
||||||
|
Warenkorb
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="containerOfAll">
|
||||||
|
<script src="plusminusbutton.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!--First Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="percy.html">Percy Jackson: Diebe im Olymp</a>
|
||||||
|
</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="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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="dalmatians.html">The Hundred and One Dalmatians</a>
|
||||||
|
</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="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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="penguin.html">Penguin Highway</a>
|
||||||
|
</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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
<a href="es.html">Es</a>
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen King</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" href="loeschen_warenkorb.html"><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Reservieren-->
|
||||||
|
<div id="reservieren">
|
||||||
|
<h2 id="ArtikelWarenkorb"> 3 Artikel</h2>
|
||||||
|
<a id="jetztReservieren" href="reservierung.html">Jetzt reservieren</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
Loading…
Reference in New Issue