Merge branch 'master_stand_10_05_23' of https://gitty.informatik.hs-mannheim.de/2123174/Candle into master_stand_10_05_23

2023-05-17 11:20:10 +02:00 · 2023-05-17 11:20:10 +02:00 · 546d0ec97e
parent 085d74ae71 567cc17793
commit 546d0ec97e
26 changed files with 349 additions and 51 deletions
--- a/abmelden.html
+++ b/abmelden.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Abmelden</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>

    <body>
--- a/abmelden_erfolgreich.html
+++ b/abmelden_erfolgreich.html
@ -7,6 +7,7 @@
        <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>
--- a/anmelden_meinebuecher.html
+++ b/anmelden_meinebuecher.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Anmeldung</title>
+        <link rel="icon" href="pictures/candle.png">
        <script src="burgerIcon.js"></script>
    </head>
    <body>
--- a/anmelden_warenkorb.html
+++ b/anmelden_warenkorb.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Anmeldung</title>
+        <link rel="icon" href="pictures/candle.png">
        <script src="burgerIcon.js"></script>
    </head>
    <body>
--- a/buecher.html
+++ b/buecher.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Bücher</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
@ -31,10 +32,11 @@
        </header>
        <div class="containerofbuecher">
            <p id="büchertitel">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
+                        <a href="percy.html">Percy Jackson: Diebe im Olymp</a>
                    </h3>
                    <p class="discinItem">Verfasser: Rick Riordan <br> 
                        Erscheinungsjahr: 2010 <br>
@ -44,13 +46,13 @@
                    <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
+                        <a href="dalmatians.html">The Hundred and One Dalmatians</a>
                    </h3>
                    <p class="discinItem">Verfasser: Dodie Smith <br> 
                        Erscheinungsjahr: 2015 <br>
@ -67,7 +69,8 @@
                <div id="thirdItem" class="items">
                    <img src="pictures/penguin_highway.jpg" width="125" height="200"/> 
                    <h3 class="headerinItem">
-                        Penguin Highway
+                        <a href="penguin.html">Penguin Highway</a>
+
                    </h3>
                    <p class="discinItem">Verfasser: Tomihiko Morimi <br> 
                        Erscheinungsjahr: 2019 <br>
@ -84,7 +87,7 @@
                <div id="fourthItem" class="items" >
                    <img src="pictures/es.jpg" width="125" height="200"/> 
                    <h3 class="headerinItem">
-                        Es
+                        <a href="es.html">Es</a>
                    </h3>
                    <p class="discinItem">Verfasser: Stephen King <br> 
                        Erscheinungsjahr: 2011 <br>
--- a/dalmatians.html
+++ b/dalmatians.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | The Hundred and One Dalmatians</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/datenschutz.html
+++ b/datenschutz.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Datenschutz</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/erweiterteSuche.html
+++ b/erweiterteSuche.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Erweiterte Suche</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/es.html
+++ b/es.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Es</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/impressum.html
+++ b/impressum.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Impressum</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/index.html
+++ b/index.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Home</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/kontakt.html
+++ b/kontakt.html
@ -6,7 +6,9 @@
        <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>
+        <title>Candle Bibliothek | Kontakt</title>
+        <link rel="icon" href="pictures/candle.png">
+
    </head>
    <body>
        <header>
--- a/loeschen.html
+++ b/loeschen.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 | Löschen</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.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="anmelden_warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
+                                                                 width="50" height="50"/>  </a>
+    </div>
+</header>
+
+<div class="hauptcontainer" 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.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>
--- a/loeschenErfolgreich.html
+++ b/loeschenErfolgreich.html
@ -0,0 +1,86 @@
+<!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.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="anmelden_warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
+                                                             width="50" height="50"/>  </a>
+  </div>
+</header>
+
+<div class="hauptcontainer" 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>
--- a/meinebuecher.html
+++ b/meinebuecher.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Meine Bücher</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>

@ -36,7 +37,7 @@
                <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
+                        <a href="percy.html">Percy Jackson: Diebe im Olymp</a>
                    </h3>
                    <p class="discinItem">von Rick Riordan <br> 
                        </p>
@ -50,7 +51,7 @@
                <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
+                        <a href="dalmatians.html">The Hundred and One Dalmatians</a>
                    </h3>
                    <p class="discinItem">von Dodie Smith <br> 
                        </p>
@ -65,7 +66,7 @@
                <div id="thirdItem" class="items">
                    <img src="pictures/penguin_highway.jpg" width="125" height="200"/> 
                    <h3 class="headerinItem">
-                        Penguin Highway
+                        <a href="penguin.html">Penguin Highway</a>
                    </h3>
                    <p class="discinItem">von Tomihiko Morimi <br> 
                    </p>
@ -78,7 +79,7 @@
                <div id="fourthItem" class="items" >
                    <img src="pictures/es.jpg" width="125" height="200"/> 
                    <h3 class="headerinItem">
-                        Es
+                        <a href="es.html">Es</a>
                    </h3>
                    <p class="discinItem">von Stephen King <br> 
                        </p>
--- a/penguin.html
+++ b/penguin.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Penguin Highway</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/percy.html
+++ b/percy.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Percy Jackson: Diebe im Olymp</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/registrierung.html
+++ b/registrierung.html
@ -7,7 +7,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>
+        <title>Candle Bibliothek | Registrierung</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>

    <body>
--- a/registrierung_erfolgreich.html
+++ b/registrierung_erfolgreich.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Erfolgreich Registriert</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>

    <body>
--- a/reservierung-bestaetigung.html
+++ b/reservierung-bestaetigung.html
@ -6,7 +6,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>
+    <title>Candle Bibliothek | Reservierungsbestätigung</title>
+    <link rel="icon" href="pictures/candle.png">
    <script src="burgerIcon.js"></script>
 </head>
 <body>
--- a/reservierung.html
+++ b/reservierung.html
@ -6,7 +6,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>
+    <title>Candle Bibliothek | Reservierung</title>
+    <link rel="icon" href="pictures/candle.png">
    <script src="burgerIcon.js"></script>
 </head>
 <body>
--- a/style.css
+++ b/style.css
@ -755,6 +755,11 @@ left: 0px;
  width: 100%;
  height: 66%;
 }
+
+.headerinItem a {
+  text-decoration: none;
+  color: initial;
+}
 .containerofbuecher{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
@ -1403,10 +1408,8 @@ input[type=number] {
 /*Verlängerung Start*/

 #verlängerung {
-  overflow-y: scroll;
+  overflow: auto;
  display:flex;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
  position: absolute;
  top: 230px;
  left: 50px;
@ -1418,6 +1421,7 @@ input[type=number] {
  font-weight: normal;
 }
 #verlängerungContent {
+  overflow: auto;
  position: fixed;
  margin-top: 40px;
  margin-left: 25px;
@ -1501,6 +1505,10 @@ input[type=number] {
  border-radius: 8px;
  border: 0;
 }
+
+#verlängerungErfolgreichButton1{
+  width: 220px;
+}
 /*Verlängerung Ende*/

 /*Largest Devices*/
--- a/uberUns.html
+++ b/uberUns.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Über Uns</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body>
        <header>
--- a/verlaengerung.html
+++ b/verlaengerung.html
@ -6,7 +6,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>
+    <title>Candle Bibliothek | Verlängerung</title>
+    <link rel="icon" href="pictures/candle.png">
    <script src="burgerIcon.js"></script>
 </head>
 <body>
@ -31,8 +32,6 @@
        </div>
    </header>

-
-
    <div class="hauptcontainer" id="verlängerung">
        <h1 id="verlängerungH1">Buch verlängern</h1>
        <div id="verlängerungContent">
@ -54,7 +53,6 @@

        </div>

-
    </div>


--- a/verlaengerungErfolgreich.html
+++ b/verlaengerungErfolgreich.html
@ -1,10 +1,96 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <title>Title</title>
+    <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.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="anmelden_warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
+                                                                 width="50" height="50"/>  </a>
+    </div>
+</header>

+<div class="hauptcontainer" 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>
--- a/warenkorb.html
+++ b/warenkorb.html
@ -6,7 +6,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>
+        <title>Candle Bibliothek | Warenkorb</title>
+        <link rel="icon" href="pictures/candle.png">
    </head>
    <body style="background-color:#987554;">

@ -49,7 +50,7 @@
                    <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
+                            <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>
@ -72,7 +73,7 @@
                                </div>
                                
                            </div>
-                            <a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
+                            <a class="binPicture" href="loeschen.html"><img src="pictures/bin.png" width="25" height="25"></a>
                        </div>

                        <hr style="width: 96%;">
@ -82,7 +83,7 @@
                    <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
+                            <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>
@ -104,7 +105,7 @@
                                </button>
                                </div>
                            </div>
-                            <a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
+                            <a class="binPicture" href="loeschen.html"><img src="pictures/bin.png" width="25" height="25"></a>
                        </div>
                        <hr style="width: 96%;">

@ -114,7 +115,7 @@
                    <div id="thirdItem" class="items">
                        <img src="pictures/penguin_highway.jpg" width="125" height="200"/> 
                        <h3 class="headerinItem">
-                            Penguin Highway
+                            <a href="penguin.html">Penguin Highway</a>
                        </h3>
                        <p class="discinItem">von Tomihiko Morimi</p>
                        <a class="greenbutton" href="penguin.html">Verfügbar</a>
@ -136,7 +137,7 @@
                                </button>
                                </div>
                            </div>
-                            <a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
+                            <a class="binPicture" href="loeschen.html"><img src="pictures/bin.png" width="25" height="25"></a>
                        </div>
                        <hr style="width: 96%;">

@ -146,7 +147,7 @@
                    <div id="fourthItem" class="items" >
                        <img src="pictures/es.jpg" width="125" height="200"/> 
                        <h3 class="headerinItem">
-                            Es
+                            <a href="es.html">Es</a>
                        </h3>
                        <p class="discinItem">von Stephen Kind</p>
                        <a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
@ -168,7 +169,7 @@
                                </button>
                                </div>
                            </div>
-                            <a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
+                            <a class="binPicture" href="loeschen.html"><img src="pictures/bin.png" width="25" height="25"></a>
                        </div>