<!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" type="text/css" href="suchergebnisse.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Candle Bibliothek | Suchergebnisse</title>
        <link rel="icon" href="pictures/candle.png">
        <script src="notwendiges_laden.js" defer></script>
    </head>
    <body>
    <header id="header">
        <h1 class="kopf" >
            <br><br>
            Bibliothek
            <a href="index.php" 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.php">Bücher</a>
            <a id="meinebuecher" href="anmelden_meinebuecher.php">
                Meine Bücher</a>
            <?php
               session_start();
               if(isset($_SESSION["eingeloggt"])  && $_SESSION["eingeloggt"] == 1 ){
                echo "<a id='abmelden' href='abmelden.php'>Abmelden</a>";}
            ?>
            <form action="suchergebnisse.php">
                <input type="hidden" name="searchType" value="simple">
                <input name="searchFor" 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.php">
                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="homepage">
            <img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
            <p class="p2">
                <span id="titlebraun"><strong> &Uuml;ber uns</strong></span>
                <br><br>
                In einer Zeit, die von Digitalisierung dominiert wird, 
                werden immer mehr physische 
                Medien in digitale Systeme integriert.
                <br>
                Auch wenn dieses Phänomen auf den ersten Blick 
                nur positiv erscheint, zieht es auch große Nachteile mit sich. 
                So ist zum Beispiel nicht jeder Mensch in der finanziellen Lage, 
                sich die nötigen technischen Geräte zu leisten.
                <br>
                Selbst wenn die Technik vorhanden ist, 
                kann oder will nicht jeder damit umgehen, 
                manche haben vielleicht sogar gesundheitliche Probleme, 
                die es Ihnen nicht ermöglichen, 
                für längere Zeit auf einem Bildschirm zu schauen.
                <br>
                Unsere Bibliothek Candle hat es sich deshalb zum Ziel gesetzt, 
                Bücher in einem greifbaren Zustand anzubieten. 
                Ob „Hamlet“, „Harry Potter“ oder „Der große Gatsby“, 
                bei uns kommt jeder Bücherwurm auf den Geschmack.  

            </p>
        </div> 

    <!------------------------------------------------------------------------->

    <!--Link JS file-->
    <script src="burgerIcon.js"></script>
    <!--If it was small and got big, 
        it calls the function only one time and doesn't do it all the time-->
    <script>
        var widthissue = false;
        window.addEventListener("resize", function(event) {
            if(window.innerWidth > 800 && widthissue) {
                widthissue = false
                unset()
            } 
            else if(window.innerWidth < 800) widthissue = true;
        })
    </script>
   
    <nav id="activeid" class="active"></nav>
   
    <footer id="footer" class="fuss" ></footer>
    
    </body>
</html>