2123174
/
Candle
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

committinggggg

master_stand_10_05_23
DexterHK 2023-05-03 23:07:04 +02:00
parent d8dcb0aef0
commit 217d3c7ac5
28 changed files with 1969 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored 100644
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

100
anmelden.html 100644
View File

@ -0,0 +1,100 @@
<!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/shoppingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">
<h1 id="BuchHeader">
Anmelden
</h1>
<p class="p2" id="obererText">Über die Websieite werden personenbenzogene Daten erhoben und genutzt. Für Details, beizhene Sie sich bitte auf die Seite Datenschutz</p>
</div>
<div id="anmeldeInput">
<p >Angaben zur Anmeldung</p>
<hr style="background-color:#A78766; height: 2px; width: 200px; border: none; position: relative;
top:3px">
<div id="AnmeldeInput">
<p>Karten-ID</p>
<input type="text" >
</br>
</br>
<p>Passwort</p>
<input type="password" >
<a href="" id="anmeldebutton">Anmelden</a>
</div>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</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>

138
buecher.html 100644
View File

@ -0,0 +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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="containerofbuecher">
<p id="büchertitel">Bücher</p>
<div id="firstItem" class="items" >
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Percy Jackson: Diebe im Olymp
</h3>
<p class="discinItem">Verfasser: Rick Riordan <br>
Erscheinungsjahr: 2010 <br>
Verlag: Carlsen <br>
Kategorie: Fantasy
</p>
<a class="greenbutton" href="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">
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
<h3 class="headerinItem">
The Hundred and One Dalmatians
</h3>
<p class="discinItem">Verfasser: Dodie Smith <br>
Erscheinungsjahr: 2015 <br>
Verlag: Farshore <br>
Kategorie: Kinderbuch
</p>
<a class="redbutton" href="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">
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Penguin Highway
</h3>
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
Erscheinungsjahr: 2019 <br>
Verlag: Yen On <br>
Kategorie: Fantasy
</p>
<a class="greenbutton" href="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" >
<img src="pictures/es.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Es
</h3>
<p class="discinItem">Verfasser: Stephen King <br>
Erscheinungsjahr: 2011 <br>
Verlag: Heyne <br>
Kategorie: Horror
</p>
<a class="redbutton" href="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>
<!--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>

3
burgerIcon.js
View File

@ -108,4 +108,5 @@ function unset()
document.head.appendChild(styleSheet)
}

97
dalmatians.html 100644
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta lang="de"/>
<meta charset="utf-8"/>
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="haupt">
<!--Second Item-->
<div id="secondItem" class="items" >
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
<h3 class="headerinItem">
The Hundred and One Dalmatians
</h3>
<p class="discinItem">Verfasser: Dodie Smith <br>
Erscheinungsjahr: 2015 <br>
Verlag: Farshore <br>
Kategorie: Kinderbuch
</p>
<a class="redbutton" href="">Verfügbar ab: 03.04.2023</a>
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
<p class="percypar">
<strong style="font-size: 25px;">Inhalt</strong> <br>
When Missis and Pongo's darling Dalmatian puppies are stolen, they know just who to suspect... the evil Cruella de Vill She's enough to
scare the spots off a pup and she would love nothing more than to turn them into a spotty fur coat! <br><br>
With the help of some fearless furry friends, the parents set off on a brave rescue attempt. But can the Dalmatian parents rescue their precious pups in time?
<br><br>
<strong style="font-size: 25px;">Details</strong> <br>
ISBN: 978-1-4052-7840-9 <br>
Sprahce: Englisch <br>
Stichwörter: Dalmatiner, Hunde, England, Welpen
</p>
</div>
</div>
<!--Link JS file-->
<script src="burgerIcon.js"></script>
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
<a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
</body>
</html>

10
datenschutz.html
View File

@ -17,14 +17,16 @@
<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>
<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 id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">

55
erweiterteSuche.html
View File

@ -17,23 +17,24 @@
<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>
<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 id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
<p class="p3">
<span id="titleschwarz" > Erweiterte Suche </span> <br><br>
<div class="hauptcontainer">
<span id="titelerweitertesuche" > Erweiterte Suche </span> <br><br>
<form action="">
<input type="search" class="buchtitel" list="Titel">
<input type="search" value="Titel" class="buchtitel" list="Titel">
<datalist id="Titel">
<option value="Titel"></option>
</datalist>
@ -41,13 +42,13 @@
<input type="text" class="buchtiteloptions" list="buchtiteloptionen">
<input type="search" class="und-wort1" list="Und">
<input type="search" value="und" class="und-wort1" list="Und">
<datalist id="Und">
<option value="und"></option>
<option value="oder"></option>
</datalist>
<input type="search" class="autor" list="Autor">
<input type="search" value="Autor" class="autor" list="Autor">
<datalist id="Autor">
<option value="Autor"></option>
</datalist>
@ -55,13 +56,13 @@
<input type="text" class="autoroptions" list="autoroptionen">
<input type="search" class="und-wort2" list="Und" >
<input type="search" value="und" class="und-wort2" list="Und" >
<datalist id="Und">
<option value="und"></option>
<option value="oder"></option>
</datalist>
<input type="search" class="stichwort" list="Stichwort">
<input type="search" value="Stichwort" class="stichwort" list="Stichwort">
<datalist id="Stichwort">
<option value="Stichwort"></option>
</datalist>
@ -71,31 +72,29 @@
<span id="titleschwarz" class="p4" style> Weitere Suchkriterien</span><br><br></p>
<span class="p5">Jahr von </span>
<input type="date" class="p6" name="Buchdatum1">
<span class="p7">bis </span>
<input type="date" class="p8" name="Buchdatum2">
<span class="p9">Sprache </span>
<input type="search" class="p10" list="sprachoptionen">
<span id="weiteresuchkriterien" style> Weitere Suchkriterien</span><br><br></p>
<span class="jahrvon">Jahr von </span>
<input type="date" class="anfangsdatum" name="Buchdatum1">
<span class="bis">bis </span>
<input type="date" class="endsdatum" name="Buchdatum2">
<span class="sprache">Sprache </span>
<input type="search" class="spracheingabe" list="sprachoptionen">
<datalist id="sprachoptionen">
<option value="Deutsch"></option>
<option value="Englisch"></option>
<option value="Arabisch"></option>
<option value="Französisch"></option>
</datalist>
<span class="p11">Verfügbarkeit</span>
<input type="checkbox" class="p12" name="status" value="verfügbareBücher">
<span class="p13">verfügbare Bücher</span>
<span class="verfügbarkeit">Verfügbarkeit</span>
<input type="checkbox" class="checkbox" name="status" value="verfügbareBücher">
<span class="kommentar">verfügbare Bücher</span>
<a id="suchen" href="">suchen</a>
<a id="suchfelderleeren" href="">Suchfelder leeren</a>
</form>
</p>
</div>
</div>
<!--Link JS file-->
<script src="burgerIcon.js"></script>

97
es.html 100644
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta lang="de"/>
<meta charset="utf-8"/>
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="haupt">
<!--fourth Item-->
<div id="firstItem" class="items" >
<img src="pictures/es.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Es
</h3>
<p class="discinItem">Verfasser: Stephen King <br>
Erscheinungsjahr: 2011 <br>
Verlag: Heyne <br>
Kategorie: Horror
</p>
<a class="redbutton" href="">Verfügbar ab: 10.05.2023</a>
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
<p class="percypar">
<strong style="font-size: 25px;">Inhalt</strong> <br>
Inhalt:
In Derry, Maine, schlummert das Böse in der Kanalisation: Alle 28 Jahre wacht es auf und muss fressen.
Jetzt taucht »Es« wieder empor. Sieben Freunde entschließen sich, dem Grauen entgegenzutreten und ein Ende zu setzen.
<br><br>
<strong style="font-size: 25px;">Details</strong> <br>
ISBN: 978-3-453-43577-3 <br>
Sprahce: Deutsch <br>
Stichwörter: Horror, clown, Teenager, Monster
</p>
</div>
</div>
<!--Link JS file-->
<script src="burgerIcon.js"></script>
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
<a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
</body>
</html>

10
impressum.html
View File

@ -17,14 +17,16 @@
<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>
<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 id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">

13
index.html
View File

@ -17,16 +17,19 @@
<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>
<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 id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">

8
kontakt.html
View File

@ -17,14 +17,16 @@
<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>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">

128
meinebuecher.html 100644
View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta lang="de"/>
<meta charset="utf-8"/>
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="containerofmeinebuecher">
<p id="meinebüchertitel">Meine Bücher</p>
<!--first item-->
<div id="firstItem" class="items" >
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Percy Jackson: Diebe im Olymp
</h3>
<p class="discinItem">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>
<!--Second Item-->
<div id="secondItem" class="items">
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
<h3 class="headerinItem">
The Hundred and One Dalmatians
</h3>
<p class="discinItem">von Dodie Smith <br>
</p>
<a class="redbutton" href="">Abholbereit am: 03.05.2023</a>
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
<p id="message">Dieses buch ist für Sie reserviert.</p>
<hr style="width:92%;">
</div>
<!--Third Item-->
<div id="thirdItem" class="items">
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Penguin Highway
</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" >
<img src="pictures/es.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Es
</h3>
<p class="discinItem">von Stephen King <br>
</p>
<a class="redbutton" href="" >Rückgabe am: 03.05.2023</a>
<a class="binPicture" href=""><img src="pictures/extend_hover.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>

96
penguin.html 100644
View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta lang="de"/>
<meta charset="utf-8"/>
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="haupt">
<!--Third Item-->
<div id="firstItem" class="items" >
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Penguin Highway
</h3>
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
Erscheinungsjahr: 2019 <br>
Verlag: Yen On <br>
Kategorie: Fantasy
</p>
<a class="greenbutton" href="">Verfügbar</a>
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
<p class="percypar">
<strong style="font-size: 25px;">Inhalt</strong> <br>
I may only be in fourth grade, but I know more than most adults. I take notes every day and read all kinds of books, so I have a solid grasp on the world
around me. But suddenly, there are penguins in my town! I know it has something to do with the lady at the dentist and her weird powers, and I'm going to get to the bottom of it...
<br><br>
<strong style="font-size: 25px;">Details</strong> <br>
ISBN: 978-1-9753-8260-5 <br>
Sprache: Englisch <br>
Stichwörter: Penguine, Freundschaft, Meer, Küste
</p>
</div>
</div>
<!--Link JS file-->
<script src="burgerIcon.js"></script>
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
<a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
</body>
</html>

99
percy.html 100644
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta lang="de"/>
<meta charset="utf-8"/>
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Candle Bibliothek</title>
</head>
<body>
<header>
<h1 class="kopf" >
<br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a>
<br><br> Candle
</h1>
<div>
<a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
<form action="">
<input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form>
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="haupt">
<!--First Item-->
<div id="firstItem" class="items" >
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Percy Jackson: Diebe im Olymp
</h3>
<p class="discinItem">Verfasser: Rick Riordan <br>
Erscheinungsjahr: 2010 <br>
Verlag: Carlsen <br>
Kategorie: Fantasy
</p>
<a class="greenbutton" href="">Verfügbar</a>
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
<p class="percypar">
<strong style="font-size: 25px;">Inhalt</strong> <br>
Percy versteht die Welt nicht mehr. Jedes Jahr fliegt er von einer anderen Schule. Ständig passieren ihm seltsame Unfälle. Und jetzt soll er
auch noch an dem Tornado schuld sein! Langsam wird ihm klar: irgendjemand hat es auf ihn abgesehen. Als Percy sich mit Hilfe seines Freundes Grover vor
einem Minotaurus ins Camp Half-Blood rettet, erfährt er die Wahrheit: Sein Vater ist der Meeresgott Poseidon, Percy also ein Halbgott. Und er hat einen mächtigen
Feind: Kronos, den Titanen. Die Gotter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
<br><br>
<strong style="font-size: 25px;">Details</strong> <br>
ISBN: 978-3-551-55661-5 <br>
Sprache: Deutsch <br>
Stichwörter: Griechenland, Griechische Sagen, Griechische Götter, Zeus, Demeter, Persephone, Hera, Hades, Poseidon, Athene, Aphrodite, Ares, Hephaistos,
Apollo, Artemis, Hermes, Dionysos, Sage, Sagen
</p>
</div>
</div>
<!--Link JS file-->
<script src="burgerIcon.js"></script>
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
<a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
</body>
</html>

BIN
pictures/bin.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
pictures/es.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
pictures/extend_hover.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
pictures/penguin_highway.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
pictures/percy_jackson_diebe_im_olymp.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

0
pictures/photo.png 100644
View File

BIN
pictures/question_mark.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
pictures/question_mark_hover.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
pictures/shopping_cart.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
pictures/the_hundred_and_one_dalmatians.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 KiB

37
plusminusbutton.js 100644
View File

@ -0,0 +1,37 @@
jQuery(document).ready(function(){
// This button will increment the value
$('[data-quantity="plus"]').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('data-field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$('[data-quantity="minus"]').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('data-field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});

1190
probestyle.css
View File

File diff suppressed because it is too large Load Diff

10
uberUns.html
View File

@ -17,14 +17,16 @@
<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>
<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 id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a>
</div>
</header>
<div class="homepage">

219
warenkorb.html 100644
View File

@ -0,0 +1,219 @@
<!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 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">
<script src="plusminusbutton.js" type="text/javascript"></script>
<!-- Change the `data-field` of buttons and `name` of input field's for multiple plus minus buttons-->
<!--First Item-->
<div id="firstItem" class="items" >
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
<h3 class="headerinItem">
Percy Jackson: Diebe im Olymp
</h3>
<p class="discinItem">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=""><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">
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="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=""><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">
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" href=""><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">
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" href=""><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="">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>