neuen Branch erstellt
parent
e607c7f6c1
commit
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>';
|
||||
|
||||
}
|
||||
?>
|
||||
281
buecher.html
281
buecher.html
|
|
@ -1,139 +1,146 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="store.js" defer></script>
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="containerofbuecher">
|
||||
<p id="büchertitel">Bücher</p>
|
||||
<div id="firstItem" class="items" >
|
||||
<a href="percy.html"><img class="buecherImages" src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/></a>
|
||||
<h3 class="headerinItem">
|
||||
Percy Jackson: Diebe im Olymp
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||
Erscheinungsjahr: 2010 <br>
|
||||
Verlag: Carlsen <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton">Verfügbar</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
|
||||
</div>
|
||||
<!--Second Item-->
|
||||
<div id="secondItem" class="items">
|
||||
<a href="dalmatians.html"><img class="buecherImages" src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/></a>
|
||||
<h3 class="headerinItem">
|
||||
The Hundred and One Dalmatians
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||
Erscheinungsjahr: 2015 <br>
|
||||
Verlag: Farshore <br>
|
||||
Kategorie: Kinderbuch
|
||||
</p>
|
||||
<a class="redbutton" >Verfügbar ab: 30.04.2023</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
</div>
|
||||
|
||||
<!--Third Item-->
|
||||
<div id="thirdItem" class="items">
|
||||
<a href="penguin.html"><img class="buecherImages" src="pictures/penguin_highway.jpg" width="125" height="200"/> </a>
|
||||
<h3 class="headerinItem">
|
||||
Penguin Highway
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||
Erscheinungsjahr: 2019 <br>
|
||||
Verlag: Yen On <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" >Verfügbar</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<hr style="width: 90%; position: absolute; top: 220px;">
|
||||
|
||||
</div>
|
||||
|
||||
<!--fourth Item-->
|
||||
<div id="fourthItem" class="items" >
|
||||
<a href="es.html"><img class="buecherImages" src="pictures/es.jpg" width="125" height="200"/> </a>
|
||||
<h3 class="headerinItem">
|
||||
Es
|
||||
</h3>
|
||||
<p class="discinItem">Verfasser: Stephen King <br>
|
||||
Erscheinungsjahr: 2011 <br>
|
||||
Verlag: Heyne <br>
|
||||
Kategorie: Horror
|
||||
</p>
|
||||
<a class="redbutton" >Verfügbar ab: 10.05.2023</a>
|
||||
<a class="binPicture" ><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
<!--Burger-->
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<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 | 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="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="containerofbuecher">
|
||||
<p id="büchertitel">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">Verfasser: Rick Riordan <br>
|
||||
Erscheinungsjahr: 2010 <br>
|
||||
Verlag: Carlsen <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<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">Verfasser: Dodie Smith <br>
|
||||
Erscheinungsjahr: 2015 <br>
|
||||
Verlag: Farshore <br>
|
||||
Kategorie: Kinderbuch
|
||||
</p>
|
||||
<a class="redbutton" href="dalmatians.html">Verfügbar ab: 30.04.2023</a>
|
||||
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||
<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">Verfasser: Tomihiko Morimi <br>
|
||||
Erscheinungsjahr: 2019 <br>
|
||||
Verlag: Yen On <br>
|
||||
Kategorie: Fantasy
|
||||
</p>
|
||||
<a class="greenbutton" href="penguin.html">Verfügbar</a>
|
||||
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></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">Verfasser: Stephen King <br>
|
||||
Erscheinungsjahr: 2011 <br>
|
||||
Verlag: Heyne <br>
|
||||
Kategorie: Horror
|
||||
</p>
|
||||
<a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
|
||||
<a class="binPicture" href=""><img src="pictures/shopping_cart.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>
|
||||
|
||||
|
|
@ -6,10 +6,15 @@ function openNav() {
|
|||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#uberuns{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#abmelden{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#buecher{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
|
|
@ -42,21 +47,59 @@ function openNav() {
|
|||
right: 240px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#uberuns{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 43px;
|
||||
left: 43%;
|
||||
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{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 96px;
|
||||
left: 43%;
|
||||
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{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 150px;
|
||||
left: 43%;
|
||||
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;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
if (document.getElementById('nav-toggle').checked) {
|
||||
var styleSheet = document.createElement("style")
|
||||
|
|
@ -78,7 +123,7 @@ function openNav() {
|
|||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
link.href = 'style.css';
|
||||
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
|
|
@ -91,21 +136,24 @@ function openNav() {
|
|||
|
||||
function unset()
|
||||
{
|
||||
|
||||
var link = document.createElement('link');
|
||||
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
// set the attributes for link element
|
||||
link.rel = 'stylesheet';
|
||||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
|
||||
link.href = 'style.css';
|
||||
link.media = 'all';
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
document.head.appendChild(styleSheet)
|
||||
//document.getElementsByTagName('head').appendChild(link);
|
||||
head.appendChild(link);
|
||||
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
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 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" 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>
|
||||
<title>Candle Bibliothek | The Hundred and One Dalmatians</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -46,13 +48,13 @@
|
|||
|
||||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
When Missis and Pongo's darling Dalmatian puppies are stolen, they know just who to suspect... the evil Cruella de Vill She's enough to
|
||||
scare the spots off a pup and she would love nothing more than to turn them into a spotty fur coat! <br><br>
|
||||
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>
|
||||
With the help of some fearless furry friends, the parents set off on a brave rescue attempt. But can the Dalmatian parents rescue their precious pups in time?
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-1-4052-7840-9 <br>
|
||||
Sprahce: Englisch <br>
|
||||
Sprache: Englisch <br>
|
||||
Stichwörter: Dalmatiner, Hunde, England, Welpen
|
||||
|
||||
</p>
|
||||
|
|
@ -74,15 +76,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
|
|
@ -4,28 +4,30 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Datenschutz</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -70,15 +72,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
|
|
@ -4,28 +4,30 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Erweiterte Suche</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -111,15 +113,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
29
es.html
29
es.html
|
|
@ -4,28 +4,30 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Es</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -52,8 +54,8 @@
|
|||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-3-453-43577-3 <br>
|
||||
Sprahce: Deutsch <br>
|
||||
Stichwörter: Horror, clown, Teenager, Monster
|
||||
Sprache: Deutsch <br>
|
||||
Stichwörter: Horror, Clown, Teenager, Monster
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -74,15 +76,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
|
|
@ -4,49 +4,51 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Impressum</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
|
||||
<div>
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Impressum </strong></span>
|
||||
<br><br>
|
||||
<strong style="font-style: italic;">Firmensitz</strong><br>
|
||||
Bibliothek Candle GmbH <br>
|
||||
Paul-Wittsack-Straße 10 <br>
|
||||
68163 Mannheim <br>
|
||||
|
||||
<strong style="font-style: italic;">Kontaktdaten</strong> <br>
|
||||
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
<div class="impressum-container">
|
||||
<h1>Impressum</h1>
|
||||
<h2>Firmensitz</h2>
|
||||
<p class="impressum-text">
|
||||
Bibliothek Candle GmbH <br>
|
||||
Paul-Wittsack-Straße 10 <br>
|
||||
68163 Mannheim <br>
|
||||
</p>
|
||||
<h2>Kontaktdaten</h2>
|
||||
<p class="impressum-text">
|
||||
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Link JS file-->
|
||||
|
|
@ -63,16 +65,17 @@
|
|||
})
|
||||
|
||||
</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>
|
||||
|
||||
<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" >
|
||||
|
|
|
|||
31
index.html
31
index.html
|
|
@ -4,29 +4,31 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Home</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,13 +36,13 @@
|
|||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p1">
|
||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||
<span class="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>
|
||||
<span class="titleschwarz">VERANSTALTUNGEN!</span>
|
||||
<br><br>
|
||||
Leserunde | jeden Mittwoch | 17:30 Uhr
|
||||
<br><br>
|
||||
|
|
@ -72,15 +74,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
26
kontakt.html
26
kontakt.html
|
|
@ -4,28 +4,31 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Kontakt</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -56,15 +59,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
}
|
||||
?>
|
||||
25
penguin.html
25
penguin.html
|
|
@ -4,28 +4,30 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Penguin Highway</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -73,15 +75,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
29
percy.html
29
percy.html
|
|
@ -4,28 +4,30 @@
|
|||
<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" 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>
|
||||
<title>Candle Bibliothek | Percy Jackson: Diebe im Olymp</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -47,9 +49,9 @@
|
|||
<p class="percypar">
|
||||
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||
Percy versteht die Welt nicht mehr. Jedes Jahr fliegt er von einer anderen Schule. Ständig passieren ihm seltsame Unfälle. Und jetzt soll er
|
||||
auch noch an dem Tornado schuld sein! Langsam wird ihm klar: irgendjemand hat es auf ihn abgesehen. Als Percy sich mit Hilfe seines Freundes Grover vor
|
||||
auch noch an dem Tornado schuld sein! Langsam wird ihm klar: Irgendjemand hat es auf ihn abgesehen. Als Percy sich mit Hilfe seines Freundes Grover vor
|
||||
einem Minotaurus ins Camp Half-Blood rettet, erfährt er die Wahrheit: Sein Vater ist der Meeresgott Poseidon, Percy also ein Halbgott. Und er hat einen mächtigen
|
||||
Feind: Kronos, den Titanen. Die Gotter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
|
||||
Feind: Kronos, den Titanen. Die Götter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
|
||||
<br><br>
|
||||
<strong style="font-size: 25px;">Details</strong> <br>
|
||||
ISBN: 978-3-551-55661-5 <br>
|
||||
|
|
@ -76,15 +78,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@ var inputNumber = document.getElementsByClassName('input-group-field');
|
|||
if (window.location.pathname.includes("/warenkorb.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
$(window).on('load',function() {
|
||||
for(var y = 0;y<inputNumber.length;y++)
|
||||
{
|
||||
showValue(inputNumber[y]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var minusButton = document.getElementsByClassName("fa fa-minus");
|
||||
for(var y = 0;y<inputNumber.length;y++)
|
||||
{
|
||||
showValue(inputNumber[y]);
|
||||
}
|
||||
|
||||
var plusButton = document.getElementsByClassName("fa fa-plus");
|
||||
|
||||
|
||||
|
||||
var minusButton = document.getElementsByClassName("fa fa-minus");
|
||||
|
||||
var plusButton = document.getElementsByClassName("fa fa-plus");
|
||||
|
||||
|
||||
//Dieser Code Block gehört zur Warenkorb Datei
|
||||
for(var i = 0;i<plusButton.length;i++)
|
||||
{
|
||||
|
||||
var button = plusButton[i]
|
||||
|
||||
button.addEventListener('click', incrmenetValue)
|
||||
|
||||
|
||||
}
|
||||
for(var i = 0;i<plusButton.length;i++)
|
||||
{
|
||||
|
||||
for(var j = 0;j<minusButton.length;j++)
|
||||
{
|
||||
var button1 = minusButton[j]
|
||||
|
||||
button1.addEventListener('click', decrmenetValue)
|
||||
var button = plusButton[i]
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
});
|
||||
button.addEventListener('click', incrmenetValue)
|
||||
|
||||
|
||||
}
|
||||
|
||||
for(var j = 0;j<minusButton.length;j++)
|
||||
{
|
||||
var button1 = minusButton[j]
|
||||
|
||||
button1.addEventListener('click', decrmenetValue)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//<input class="input-group-field" type="number" name="quantity" value="1">
|
||||
|
|
@ -47,41 +47,41 @@ for(var j = 0;j<minusButton.length;j++)
|
|||
|
||||
function showValue(event)
|
||||
{
|
||||
|
||||
|
||||
var shopItem = event.parentElement.parentElement.parentElement
|
||||
|
||||
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue = localStorage.getItem(title) || 0;
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
|
||||
|
||||
}
|
||||
|
||||
function incrmenetValue(event)
|
||||
{
|
||||
|
||||
|
||||
|
||||
var buttony = event.target
|
||||
var shopItem = buttony.parentElement.parentElement.parentElement.parentElement.parentElement
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue= localStorage.getItem(title) || 0;
|
||||
// var getValue = shopItem.getElementsByClassName('input-group-field')[0].value;
|
||||
// var getValue = shopItem.getElementsByClassName('input-group-field')[0].value;
|
||||
if(getValue < 10){
|
||||
getValue++;
|
||||
}
|
||||
getValue++;
|
||||
}
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = getValue;
|
||||
localStorage.setItem(title, getValue)
|
||||
|
||||
|
||||
}
|
||||
function decrmenetValue(event)
|
||||
{
|
||||
{
|
||||
var buttony = event.target
|
||||
var shopItem = buttony.parentElement.parentElement.parentElement.parentElement.parentElement
|
||||
var title = shopItem.getElementsByTagName('h3')[0].innerHTML
|
||||
var getValue= localStorage.getItem(title) || 0;
|
||||
if(getValue > 0){
|
||||
getValue--;
|
||||
}
|
||||
if(getValue > 0){
|
||||
getValue--;
|
||||
}
|
||||
shopItem.getElementsByClassName('input-group-field')[0].value = 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>
|
||||
<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" 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>
|
||||
<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="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>
|
||||
|
||||
<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">
|
||||
|
||||
<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">
|
||||
<span id="registrierungTitel" > Regestrierung </span>
|
||||
<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 Regestrierung<hr id="registrierungHr"></h4>
|
||||
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung<hr id="registrierungHr"></h4>
|
||||
<br>
|
||||
<span id="registrierungInputSpan" >
|
||||
<label for="vorName"><b>Vorname</b></label>
|
||||
<br>
|
||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="nachName"><b>Nachname</b></label>
|
||||
<br>
|
||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||
<br>
|
||||
<input type="text" name="strasse" id="strasse" required>
|
||||
<input type="number" name="hausnummer" id="hausNummer" required>
|
||||
<br>
|
||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||
<br>
|
||||
<input type="number" name="postleitzahl" id="postleitzahl" required>
|
||||
<input type="text" name="ort" id="ort" required>
|
||||
<br>
|
||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||
<br>
|
||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||
<br>
|
||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwort"><b>Passwort</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<button type="submit" class="registrierenKnopf">Registrieren</button>
|
||||
<br><br>
|
||||
|
||||
<details>
|
||||
<summary>Sie habe bereits ein Konto?</summary>
|
||||
<p id="registrierenAusklappe"> <a href="anmelden.html"> Jetzt anmelden</a></p>
|
||||
</details>
|
||||
</span>
|
||||
<div 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-->
|
||||
|
|
@ -104,10 +148,10 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
|
|
@ -124,6 +168,8 @@
|
|||
|
||||
</div>
|
||||
</footer>
|
||||
<script src="registrierung_verhalten.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</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 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" 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>
|
||||
<title>Candle Bibliothek | Über Uns</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>
|
||||
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>
|
||||
<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="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>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -62,15 +64,16 @@
|
|||
|
||||
</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" >
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
|
|
@ -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