Skip to content
Snippets Groups Projects
index.html 50 KiB
Newer Older
„Sophia's avatar
„Sophia committed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Manager</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
Sarah Gloger's avatar
Sarah Gloger committed


„Sophia's avatar
„Sophia committed
    <link rel="stylesheet" href="stylesheet.css">
Sarah Gloger's avatar
Sarah Gloger committed
    <script src="src/client.js"></script>
„Sophia's avatar
„Sophia committed
</head>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
<body>
Sarah Gloger's avatar
Sarah Gloger committed

<!--header-->
„Sophia's avatar
„Sophia committed
<header>
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="#">
Sarah Gloger's avatar
Sarah Gloger committed

                <img src="assets/helles logo.png" width="94" height="80" alt="Logo" onclick="showPage('startseite')"/>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
            </a>
            <ul class="nav-links">
„Sophia's avatar
„Sophia committed
                <li><a onclick="showPage('reisen')">Reisen</a></li>
                <li><a onclick="showPage('about-Us')">About Us</a></li>
                <li><a onclick="showPage('kontakt')">Kontakt</a></li>

„Sophia's avatar
„Sophia committed
            </ul>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
            <div class="icons">
„Sophia's avatar
„Sophia committed
                <i class="> fa-regular fa-heart" id="merkliste-navbar"></i>
„Sophia's avatar
„Sophia committed
            </div>
            <div class="dropdown">
                <div type="button" class="btn" data-bs-toggle="dropdown">
                    <i class="fa-solid fa-circle-user"></i>
                </div>
Sarah Gloger's avatar
Sarah Gloger committed

„Sophia's avatar
„Sophia committed
                <form class="dropdown-menu p-4" id="dropdown-anmelden">
„Sophia's avatar
„Sophia committed
                    <div class="mb-3">
Sarah Gloger's avatar
Sarah Gloger committed

„Sophia's avatar
„Sophia committed
                        <label for="exampleDropdownFormEmail2" class="form-label">E-Mail</label>
                        <input type="email" class="form-control" id="exampleDropdownFormEmail2">
                    </div>
                    <div class="mb-3">
                        <label for="exampleDropdownFormPassword2" class="form-label">Passwort</label>
                        <input type="password" class="form-control" id="exampleDropdownFormPassword2">
                    </div>

                    <button type="submit" class="btn btn-primary" id="login-button" onclick="showPage('meineReisen')">
                        Login
                    </button>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
                    <a class="dropdown-item" onclick="showPage('registrieren')"><u>Registrieren</u></a>
„Sophia's avatar
„Sophia committed

                </form>
            </div>
        </div>

    </nav>
</header>

„Sophia's avatar
„Sophia committed
<div class="container mb-3">
    <div id="messages"></div>
</div>

„Sophia's avatar
„Sophia committed
<div id="startseite" class="page active">
Lilith Faust's avatar
Lilith Faust committed
    <!--Startseite                                                                                                                                                                                                  -bereich-->
„Sophia's avatar
„Sophia committed
    <div class="hero">
        <img src="assets/heroimage.jpg" height="570" width="1668" alt="Hero-Bild" class="hero-image"/>
        <div class="hero-text">
            <p>your journey begins</p>
            <h1>Entdecken, Erleben, Unterstützen</h1>
            <button id="hero-button" onclick="showPage('reisen')">Reise mit uns!</button>
„Sophia's avatar
„Sophia committed
        </div>
    </div>
„Sophia's avatar
„Sophia committed
    <!-- Titeltext-->
    <section class="horizon-changers-opening">
        <div class="horizon-changers-opening-container">
„Sophia's avatar
„Sophia committed
            <br>
            <br>
            <br>
            <br>
„Sophia's avatar
„Sophia committed
            <h2 class="horizon-changers-opening-title">Horizon Changers</h2>
„Sophia's avatar
„Sophia committed
            <p class="horizon-changers-description">
                Bei uns erlebst du Reisen, die Herz und Abenteuerlust vereinen. Tauche ein in soziale Projekte, entdecke
                <br> neue Kulturen und spüre den Nervenkitzel unvergesslicher Outdoor-Erlebnisse. Mach deine Reise zu
                etwas Bedeutungsvollem! <br> Wähle ein soziales Projekt plus passende abenteuerliche Freizeitaktivitäten
                (die Erste ist inklusive) und <br> starte in dein Abenteuer...
„Sophia's avatar
„Sophia committed
            </p>
„Sophia's avatar
„Sophia committed
            <a class="horizon-changers-button" onclick="showPage('about-Us')"> Mehr erfahren</a>
„Sophia's avatar
„Sophia committed
        </div>
    </section>
Sarah Gloger's avatar
Sarah Gloger committed

Victoria Badeke's avatar
Victoria Badeke committed
    <!-- Titelbereich  Startseite-Karusell-->
„Sophia's avatar
„Sophia committed
    <div class="carousel-title" id="carousel-title">
        <h2>Unsere Reisen</h2>
        <p>Beginne jetzt die Reise deines Lebens</p>
    </div>
Sarah Gloger's avatar
Sarah Gloger committed

„Sophia's avatar
„Sophia committed
    <div class="carousel-wrapper" id="beispielreisen-carrousel">
        <!-- Karussell -->
        <div id="travelCarousel" class="carousel slide">
            <div class="carousel-inner">
                <!-- Erstes Element -->
                <div class="carousel-item active">
                    <div class="card-carrousel-reisen">
                        <div class="position-relative">

                            <img src="assets/spanienprojket 2.jpg" class="card-img-beispiel" alt="Erlebe Spanien"><img/>
                            <span class="bestseller-badge">Bestseller</span>
                            <i class="favorite-icon fa-regular fa-heart"></i>
„Sophia's avatar
„Sophia committed
                        </div>
                        <div class="card-body">
                            <h5 class="card-title-carousel">Erlebe Spanien von einer besonderen Seite - Pfoten ohne
                                Grenzen</h5>
                            <p class="card-text-carousel">Hilf dabei, Straßenhunde zu retten und ihnen ein besseres
                                Leben zu schenken! Tauche ein in die lokale Kultur, arbeite mit engagierten
                                Tierschutzteams zusammen und genieße unvergessliche Momente an Spaniens sonnigen Küsten.
                                Dein Einsatz macht den Unterschied!</p>
„Sophia's avatar
„Sophia committed
                        </div>
                    </div>
                </div>
                <!-- Zweites Element -->
                <div class="carousel-item">
                    <div class="card-carrousel-reisen">
                        <div class="position-relative">
                            <img src="assets/keniaprojekt.jpeg" class="card-img-beispiel" alt="Reiseziel 2">
                            <span class="bestseller-badge">Neu</span>
                            <i class="favorite-icon fa-regular fa-heart"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title-carousel">Mach den Unterschied - Lebensquelle in Kenia</h5>
                            <p class="card-text-carousel">Hilf dabei Brunnen für Trinkwasser zu bauen. Sei der
                                Unterschied selbst.</p>
„Sophia's avatar
„Sophia committed
                        </div>
                    </div>
                </div>
                <!-- Drittes Element -->
                <div class="carousel-item">
                    <div class="card-carrousel-reisen">
                        <div class="position-relative">

                            <img src="assets/peruprojekt (1).jpeg" class="card-img-beispiel" alt="Reiseziel 3">
                            <span class="bestseller-badge">Beliebt</span>
                            <i class="favorite-icon fa-regular fa-heart"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title-carousel">Lebensqualität in Peru - Lebenscomfort für jeden</h5>
                            <p class="card-text-carousel">Tauche ein in die Welt des Inselparadieses. Genieße traumhafte
                                Strände, kristallklares Wasser und entspannte Stunden unter der Sonne.</p>
                        </div>
                    </div>
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed
            </div>
            <div>
                <button class="carousel-control-prev" type="button" data-bs-target="#travelCarousel"
                        data-bs-slide="prev">
                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
                    <span class="visually-hidden">Vorherige</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#travelCarousel"
                        data-bs-slide="next">
                    <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                    <span class="visually-hidden">Nächste</span>
                </button>
            </div>
        </div>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
    </div>

    <!--Startseite Landkarte-->
„Sophia's avatar
„Sophia committed
    <div class="header">
        <h1 id="h1-landkarte"> Unsere Länder</h1>
        <p id="subtitle-landkarte">Die Welt ist voller Abenteuer – wohin führt Deine nächste Reise?</p>
    </div>
    <div class="map-container">
Sarah Gloger's avatar
Sarah Gloger committed

        <img src="assets/MAPLÄNDER.png" alt="Weltkarte" class="map" height="484" width="860"/>
„Sophia's avatar
„Sophia committed
        <div class="pin" title="Südamerika"></div>
        <div class="pin" title="Afrika"></div>
        <div class="pin" title="Asien"></div>
    </div>
    <!-- Erfahrungsberichte Startseite-->
    <div class="erfahrungsberichte">
        <div class="header-berichte-title">
            <h2>Unsere Reisen, Eure Erlebnisse</h2>
        </div>
        <div class="header-berichte-title1">
            <p>Horizon Changers travel experience</p>
        </div>
Lilith Faust's avatar
Lilith Faust committed

        <div class="cards-container">
            <!-- Card 1 -->
            <div class="card">
                <img src="assets/Kenia.jpg" alt="Kenia" height="114" width="257"/>
                <div class="card-content">
                    <h3>Kenia</h3>
                    <p>Schon bei der Ankunft spüre ich: Dieses Abenteuer wird unvergesslich... </p>
                    <br>
                    <div class="stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
Lilith Faust's avatar
Lilith Faust committed
                </div>
                <button class="card-button">weiter lesen</button>
Lilith Faust's avatar
Lilith Faust committed
            </div>

            <!-- Card 2 -->
            <div class="card">
                <img src="assets/Spanien.jpg" height="114" width="257" alt="Spanien">
                <div class="card-content">
                    <h3>Spanien</h3>
                    <p>Ein Land voller Magie und Vielfalt. Jeder Moment erzählt eine neue Geschichte, geprägt von
                        Farben, Düften und...</p>
                    <div class="stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
Lilith Faust's avatar
Lilith Faust committed
                </div>
                <button class="card-button">weiter lesen</button>
Lilith Faust's avatar
Lilith Faust committed
            </div>

            <!-- Card 3 -->
            <div class="card">
                <img src="assets/Indien.jpg" alt="Indien" height="114" width="257"/>
                <div class="card-content">
                    <h3>Indien</h3>
                    <p>Ein Ort der Sinne und Seele berührt. Jede Ecke birgt neue Wunder...</p>
                    <br>
                    <div class="stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
Lilith Faust's avatar
Lilith Faust committed
                </div>
                <button class="card-button">weiter lesen</button>
Lilith Faust's avatar
Lilith Faust committed
            </div>
        </div>
    </div>
</div>

Victoria Badeke's avatar
Victoria Badeke committed
<!--Registrieren-Seite-->
„Sophia's avatar
„Sophia committed
<div id="registrieren" class="page justify-content-center">
    <i class="fa-solid fa-circle-arrow-left backButton"></i>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
    <div class="card" id="card-registrieren">
        <div class="card-body">
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
            <h1>Registrieren</h1>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
            <!-- Formular erstellen -->
„Sophia's avatar
„Sophia committed
            <form id="add-user-form">
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
                <div id="label1" class="form-text-registrieren">
                    Vorname
Sarah Gloger's avatar
Sarah Gloger committed
                    <label for="add-user-first-name" class="d-none">Vorname</label>
                    <input type="text" class="form-control-registrieren" id="add-user-first-name">
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
                <div id="label2" class="form-text-registrieren">
Luisa Wenz's avatar
Luisa Wenz committed
                    Nachname
Sarah Gloger's avatar
Sarah Gloger committed
                    <label for="add-user-last-name" class="d-none">Name</label>
                    <input type="text" class="form-control-registrieren" id="add-user-last-name">
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed

„Sophia's avatar
„Sophia committed
                <div id="label3" class="form-text-registrieren">
                    E-Mail
Sarah Gloger's avatar
Sarah Gloger committed
                    <label for="add-user-email" class="d-none">E-Mail</label>
                    <input type="text" class="form-control-registrieren" id="add-user-email">
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed

                <div id="label4" class="form-text-registrieren">
„Sophia's avatar
„Sophia committed
                    Passwort
Sarah Gloger's avatar
Sarah Gloger committed
                    <label for="add-user-password" class="d-none">Passwort</label>
                    <input type="password" class="form-control-registrieren" id="add-user-password">
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
                <div id="label5" class="form-text-registrieren">
                    Passwort wiederholen
Sarah Gloger's avatar
Sarah Gloger committed
                    <label for="add-user-repeatPassword" class="d-none">Passwort wiederholen</label>
                    <input type="password" class="form-control-registrieren" id="add-user-repeatPassword">
„Sophia's avatar
„Sophia committed
                </div>
„Sophia's avatar
„Sophia committed

                <button type="submit" class="btn btn-primary" id="registrierenButton"
                        onclick="showPage ('meineReisen')">Registrieren
                </button>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
            </form>
        </div>
„Sophia's avatar
„Sophia committed
    </div>
</div>

Victoria Badeke's avatar
Victoria Badeke committed
<!--Meine Reisen-->
Victoria Badeke's avatar
Victoria Badeke committed
<div id="meineReisen" class="page">

    <div class="container-meineReisen">
        <aside class="sidebar">
            <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
            <p class="greeting" id="current-user-firstName">Hallo,</p>
            <nav class="menu">
                <ul>
                    <li><a href="#">Meine Reisen</a></li>
                    <li><a onclick="showPage('profil')">Mein Profil</a></li>
                    <li><a onclick="showPage('merkliste')">Merkliste</a></li>
                    <li><a href="#">Meine Supportanfragen</a></li>
                    <li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
                    <div id="logout-form">
                        <li><a id="logout-button" onclick="showPage('startseite')">Abmelden</a></li>
                    </div>
                </ul>
            </nav>
        </aside>
        <main class="content">
            <section>
                <h2>Meine bevorstehenden Reisen</h2>
                <div class="trip-card">
                    <img src="assets/bevorstehendeReisen.jpg" height="890" width="736"
                         alt="Projekt Bildung für Frauen"/>
                    <div class="trip-info">
                        <h3>Projekt Bildungslicht für Frauen (Indien)</h3>
                        <button class="details-button">Details</button>
                    </div>
„Sophia's avatar
„Sophia committed
                </div>
            </section>
            <section>
                <h2>Meine angetretenen Reisen</h2>
                <div class="trip-card">
                    <img src="assets/angetreteneReisen.jpg" height="1000" width="667"
                         alt="Projekt Bausteine der Gesundheit"/>
                    <div class="trip-info">
                        <h3>Projekt Bausteine der Gesundheit (Peru)</h3>
                        <button class="details-button">Details</button>
                        <button class="report-button" onclick="showPage('reiseberichtSchreiben')">Reisebericht
                            schreiben
                        </button>
                    </div>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
            </section>
        </main>
    </div>
</div>

<!--Merkliste-->
<div id="merkliste" class="page">
    <div class="container mt-4">
        <div class="row align-items-center mb-3">
            <div class="col-auto">
                <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('meineReisen')"></i>
                <h1>Meine Merkliste</h1>
Victoria Badeke's avatar
Victoria Badeke committed
            </div>
            <section class="projects-section-merkliste">
                <div class="project-card">
                    <img src="assets/bevorstehendeReisen.jpg" height="890" width="736" alt="Bildungslicht für Frauen"/>
                    <h3>Bildungslicht für Frauen</h3>
                    <p>Schulen und Träume in Indien verwirklichen</p>
                    <ul class="project-info">
                        <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                        <li><i class="fa-solid fa-earth-americas"></i> Indien</li>
                        <li><i class="fa-solid fa-star"></i>4,6</li>
                    </ul>
                    <p class="price">ab 1.500€</p>
                    <button class="info-button">Mehr Infos</button>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>

                <div class="project-card">
                    <img src="assets/Produkt%20Spanien.jpg" height="920" width="736" alt="Pfoten ohne Grenzen"/>
                    <h3>Pfoten ohne Grenzen</h3>
                    <p>Eine Reise zur Rettung von Straßenhunden</p>
                    <ul class="project-info">
                        <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                        <li><i class="fa-solid fa-earth-americas"></i> Spanien</li>
                        <li><i class="fa-solid fa-star"></i>4,8</li>
                    </ul>
                    <p class="price">ab 1.500€</p>
                    <button class="info-button">Mehr Infos</button>
                </div>
            </section>
        </div>
    </div>
Victoria Badeke's avatar
Victoria Badeke committed
</div>

<!--Profil-->

<div id="profil" class="page">
Victoria Badeke's avatar
Victoria Badeke committed
    <div class="sidebar-container">
Victoria Badeke's avatar
Victoria Badeke committed
        <aside class="sidebar">
„Sophia's avatar
„Sophia committed
            <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
            <p class="greeting">Hallo,</p>
Victoria Badeke's avatar
Victoria Badeke committed
            <nav class="menu">
                <ul>
Victoria Badeke's avatar
Victoria Badeke committed
                    <li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    <li><a>Mein Profil</a></li>
                    <li><a onclick="showPage('merkliste')">Merkliste</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    <li><a>Meine Supportanfragen</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    <li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    <div id="logout-form1">
                        <li><a id="logout-button1" onclick="showPage('startseite')">Abmelden</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
Victoria Badeke's avatar
Victoria Badeke committed
                </ul>
            </nav>
        </aside>
Victoria Badeke's avatar
Victoria Badeke committed
    </div>
„Sophia's avatar
„Sophia committed
    <!-- FORMULAR mit Profildaten und zum bearbeiten im Formular-->
    <div class="profil-container">
        <h1>Profil</h1>
        <div class="profil-card">
            <div class="section">
                <h2>Persönliche Daten</h2>

                <form id="edit-profile-form">

                    <div id="label1edit" class="form-text-profile">
                        Vorname
                        <label for="edit-user-first-name" class="d-none">Vorname</label>
                        <input type="text" class="form-control-registrieren" id="edit-user-first-name">
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
„Sophia's avatar
„Sophia committed

                    <div id="label2edit" class="form-text-profile">
                        Nachname
                        <label for="edit-user-last-name" class="d-none">Name</label>
                        <input type="text" class="form-control-registrieren" id="edit-user-last-name">
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
„Sophia's avatar
„Sophia committed


                    <div id="label3edit" class="form-text-profile">
                        E-Mail
                        <label for="edit-user-email" class="d-none">E-Mail</label>
                        <input type="text" class="form-control-registrieren" id="edit-user-email">
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
„Sophia's avatar
„Sophia committed

                    <div class="section">
                        <h2>Adressdaten</h2>

                        <div id="label5edit" class="form-text-profile">
„Sophia's avatar
„Sophia committed
                            Adresse
                            <label for="edit-user-adress" class="d-none">Adresse</label>
                            <input type="text" class="form-control-registrieren" id="edit-user-adress">
                        </div>
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                        Profil löschen
                    </button>

                    <!-- Delete-Popup-Modal -->
                    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel"
                         aria-hidden="true">
Sarah Gloger's avatar
Sarah Gloger committed
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="deleteModalLabel">Profil löschen</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
Sarah Gloger's avatar
Sarah Gloger committed
                                </div>
                                <div class="modal-body">
                                    Bist du dir sicher, dass du dein Profil löschen möchtest? Diese Aktion kann nicht
                                    rückgängig gemacht werden.
Sarah Gloger's avatar
Sarah Gloger committed
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" id="saveButtonDelete" class="btn btn-danger">Löschen</button>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Edit Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal">
                        Änderungen bestätigen
                    </button>
„Sophia's avatar
„Sophia committed

                    <!-- Modal -->
                    <div class="modal fade" id="updateModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">Zum Speichern der Änderungen ist
                                        die Passworteingabe erforderlich</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    Passwort
                                    <label for="modal-password" class="d-none">Passwort</label>
                                    <input type="password" class="form-control-registrieren-modal" id="modal-password">
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" id="saveButtonEdit" class="btn btn-primary">Sichern</button>
                                </div>
„Sophia's avatar
„Sophia committed
                            </div>
                        </div>
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
„Sophia's avatar
„Sophia committed
                </form>
Victoria Badeke's avatar
Victoria Badeke committed
            </div>
„Sophia's avatar
„Sophia committed
        </div>
Victoria Badeke's avatar
Victoria Badeke committed
    </div>
</div>

<!--AboutUs-->

<div id="about-Us" class="page">
    <div class="containerAboutUs">
        <header class="hero">
Lilith Faust's avatar
Lilith Faust committed
            <img src="assets/heroAboutUs.jpeg" height="1104" width="736" alt="Teamwork" class="hero-image-aboutUs">
Victoria Badeke's avatar
Victoria Badeke committed
        </header>

        <main>
            <!-- Über uns Abschnitt -->
            <section class="about-section">
                <div class="container">
                    <div class="row align-items-center">
                        <!-- Textblock auf der linken Seite -->
                        <div class="col-lg-6">
                            <h1>Horizon Changers</h1>
                            <h2>Entdecken, Erleben, Unterstützen</h2>
                            <br>
                            <div class="text-box">
                                <p>
                                    Horizon Changers wurde gegründet auf einer Vision: soziales Engagement, Urlaub und
                                    abenteuerliche Aktivitäten verbinden. Wir bieten Reisen, bei denen Teilnehmer an
                                    Freiwilligenprojekten in Bereichen wie Bildung und Umweltschutz mitwirken und
                                    gleichzeitig spannende Aktivitäten wie Elefantentouren genießen können.
                                    Unser Ziel ist es, den Reisenden eine tiefere Verbindung zu den Kulturen und
                                    Gemeinschaften zu ermöglichen, in denen sie helfen. Ein Beispiel ist unser Projekt
                                    zum Bau von Schulen für Frauen, das den Zugang zu Bildung fördert. Wir legen großen
                                    Wert auf Nachhaltigkeit und respektvollen Umgang mit den lokalen Kulturen und
                                    möchten, dass jeder Reisende mit einem positiven Einfluss zurückkehrt.
                                </p>
Victoria Badeke's avatar
Victoria Badeke committed
                            </div>
                        </div>
                        <!-- Bild auf der rechten Seite -->
                        <div class="col-lg-6">
                            <img src="assets/UnternehmenAboutUs.jpg" class="img-fluid about-image" alt="Unser Team">
                        </div>
                    </div>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
Victoria Badeke's avatar
Victoria Badeke committed
            </section>

            <!-- Philosophie Abschnitt -->
            <section class="philosophy-section">
                <div class="container">
                    <div class="row align-items-center">
                        <!-- Bild auf der linken Seite -->
                        <div class="col-lg-6">
                            <img src="assets/PhilosophieAboutUs.jpg" class="img-fluid philosophy-image"
                                 alt="Unsere Mission">
Victoria Badeke's avatar
Victoria Badeke committed
                        </div>
                        <!-- Textblock auf der rechten Seite -->
                        <div class="col-lg-6">
                            <div class="text-box-philosophie">
                                <h2>Unsere Philosophie</h2>
                                <p>
                                    Bei Horizon Changers verbinden wir Reisen mit sozialem Engagement, um ein
                                    erfüllendes Erlebnis zu schaffen. Unsere Teilnehmer nehmen an Freiwilligenprojekten
                                    teil und entdecken gleichzeitig neue Kulturen und Sehenswürdigkeiten.
                                    Indien hat mich durch lebendige Straßen, beeindruckende Elefantentouren und ein
                                    berührendes Projekt, bei dem ich den Bau einer Schule für Frauen unterstützte, tief
                                    inspiriert. Unsere Reisen bieten eine ausgewogene Mischung aus Freizeit und
                                    sinnvollem Engagement in Bereichen wie Bildung und Umwelt.
                                    Wir setzen auf nachhaltige Praktiken, respektieren lokale Kulturen und fördern
                                    Empowerment. Horizon Changers lädt dazu ein, die Welt zu entdecken und gleichzeitig
                                    einen positiven Einfluss zu hinterlassen.
                                </p>
Victoria Badeke's avatar
Victoria Badeke committed
                            </div>
                        </div>
                    </div>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
Victoria Badeke's avatar
Victoria Badeke committed
            </section>

            <!-- Stimmen von Unterwegs -->
            <section class="testimonials">
                <h2>Stimmen von Unterwegs</h2>
                <div class="testimonial">
                    <div class="stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="name">Annika Kastner</p>
                    <p class="quote">
                        Es war die erfüllendste Reise, die ich je erleben durfte!
                    </p>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
Victoria Badeke's avatar
Victoria Badeke committed
                <div class="testimonial">
                    <div class="stars">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                    </div>
                    <p class="name">Max Mustermann</p>
                    <p class="quote">
                        Ich habe mich noch nie so mit Menschen und Kulturen verbunden gefühlt, wie auf dieser Reise!
                    </p>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
Victoria Badeke's avatar
Victoria Badeke committed
            </section>
        </main>
Victoria Badeke's avatar
Victoria Badeke committed
    </div>
</div>

„Sophia's avatar
„Sophia committed
<!--Admin-Nutzerliste muss noch an die richtige Stelle gerückt werden-->
„Sophia's avatar
„Sophia committed
<div id="nutzerliste" class="page">
Victoria Badeke's avatar
Victoria Badeke committed
    <div class="sidebarAdmin-container">
        <aside class="sidebarAdmin">
            <i class="fa-solid fa-circle-arrow-left backButton"></i>
            <nav class="menu">
                <ul>
                    <li><a>Dashboard</a></li>
                    <li><a>Kundendaten</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    <div id="logout-form2">
                        <li><a id="logout-button2" onclick="showPage('startseite')">Abmelden</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                    </div>
Victoria Badeke's avatar
Victoria Badeke committed
                </ul>
            </nav>
        </aside>
    </div>
Luisa Wenz's avatar
Luisa Wenz committed

„Sophia's avatar
„Sophia committed
    <div class="container d-none" id="user-list-container">
„Sophia's avatar
„Sophia committed
        <table class="table-admin">
            <thead id="admin-table-head">
„Sophia's avatar
„Sophia committed
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Vorname
                </th>
                <th>
                    Name
                </th>
„Sophia's avatar
„Sophia committed
                <th>
                    E-Mail
                </th>
„Sophia's avatar
„Sophia committed
                <th>
                    Adresse
                </th>
                <th>
„Sophia's avatar
„Sophia committed
                    Rolle
„Sophia's avatar
„Sophia committed
                </th>
„Sophia's avatar
„Sophia committed
                <th>
                    Aktionen
                </th>
„Sophia's avatar
„Sophia committed
            </tr>
            </thead>
            <tbody id="user-list">

            </tbody>
        </table>
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
        <!-- Modal User von Admin aus bearbeiten -->
„Sophia's avatar
„Sophia committed
        <div class="modal fade" id="updateAdminModal">
„Sophia's avatar
„Sophia committed
            <div class="modal-dialog">
                <div class="modal-content">
„Sophia's avatar
„Sophia committed
                    <form id="edit-user-admin-form">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="updateModalLabel">Daten von Nutzer bearbeiten</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body card">
                            <input type="hidden" id="edit-user-admin-id">
                            <div id="label1edituser" class="form-text-profile">
                                Vorname
                                <label for="edit-user-admin-first-name" class="d-none">Vorname</label>
                                <input type="text" class="form-control-bearbeiten" id="edit-user-admin-first-name">
                            </div>
                            <div id="label2edituser" class="form-text-profile">
                                Nachname
                                <label for="edit-user-admin-last-name" class="d-none">Name</label>
                                <input type="text" class="form-control-bearbeiten" id="edit-user-admin-last-name">
                            </div>
                            <div id="label3edituser" class="form-text-profile">
                                E-Mail
                                <label for="edit-user-admin-email" class="d-none">E-Mail</label>
                                <input type="text" class="form-control-bearbeiten" id="edit-user-admin-email">
„Sophia's avatar
„Sophia committed
                            </div>
                            <div id="label4edituser" class="form-text-profile">
                                Adresse
                                <label for="edit-user-admin-adress" class="d-none">Adresse</label>
                                <input type="text" class="form-control-bearbeiten" id="edit-user-admin-adress">
                            </div>
                            <div id="label5edituser" class="form-text-profile">
                                Rolle
                                <label for="edit-user-admin-role" class="d-none">Rolle</label>
                                <input type="text" class="form-control-bearbeiten" id="edit-user-admin-role">
                            </div>
                            <div class="modal-footer">
                                <button type="submit" id="updateButtonEdit" class="editButton">Aktualisieren</button>
                            </div>
                        </div>
„Sophia's avatar
„Sophia committed
                    </form>
„Sophia's avatar
„Sophia committed
                </div>
            </div>
        </div>

„Sophia's avatar
„Sophia committed
        <!-- Modal User löschen vom admin aus -->
        <div class="modal fade" id="deleteModalAdmin" tabindex="-1" aria-labelledby="deleteModalLabel"
             aria-hidden="true">
„Sophia's avatar
„Sophia committed
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="deleteModalAdminLabel">Nutzerdaten löschen</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Sind Sie sicher, dass Sie den Nutzer löschen wollen?
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="nodeleteButtonEdit" class="btn btn-primary">abbrechen</button>
                        <button type="submit" id="deleteButtonAdmin" class="btn btn-primary">löschen</button>
„Sophia's avatar
„Sophia committed
                    </div>
                </div>
            </div>
        </div>
Victoria Badeke's avatar
Victoria Badeke committed
    </div>
</div>


Victoria Badeke's avatar
Victoria Badeke committed
<!--Impressum-->
<div id="Impressum" class="page">
    <div class="container-Impressum">
        <i class="fa-solid fa-circle-arrow-left backButton"></i>
        <h1>Impressum</h1>
        <section class="impressum">
            <h2>Impressum</h2>
            <br>
            <h3>Horizon Changers</h3>
            <p>Musterstraße 123<br>12345 Musterstadt<br>Deutschland</p>

            <h3>Vertreten durch:</h3>
            <p>Max Mustermann (Geschäftsführer)</p>

            <h3>Kontakt:</h3>
            <p>
                Telefon: +49 (0)123 4567890<br>
                E-Mail: <a href="mailto:info@horizonchangers.de">info@horizonchangers.de</a><br>
                Web: <a href="http://www.horizonchangers.de" target="_blank">www.horizonchangers.de</a>
            </p>

            <h3>Registereintrag:</h3>
            <p>
                Eingetragen im Handelsregister.<br>
                Registergericht: Amtsgericht Musterstadt<br>
                Registernummer: HRB 123456
            </p>

            <h3>Umsatzsteuer-ID:</h3>
            <p>DE123456789</p>

            <h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</h3>
            <p>
                Max Mustermann<br>
                Musterstraße 123<br>
                12345 Musterstadt
            </p>

            <h3>Hinweis auf EU-Streitschlichtung:</h3>
            <p>
                Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit.
                <br>
                <br>
                Unsere E-Mail-Adresse finden Sie oben im Impressum.
            </p>
        </section>

        <section class="datenschutz">
            <h3>Datenschutz</h3>
            <p>
                Sämtliche innerhalb des Internetauftritts verwendeten Texte, Bilder und Grafiken sind geistiges Eigentum
                und damit urheberrechtlich geschützt. Es besteht weder ein Recht auf Kopie, Download oder Abschrift.
                Insbesondere besteht kein Recht auf weitere Verwendung, es sei denn, ein Nutzungsrecht hierfür sei
                ausdrücklich eingeräumt worden.
Victoria Badeke's avatar
Victoria Badeke committed
                <br>
                Haftungsausschluss
                <br>
                Wir haben den Inhalt unserer Seiten nach bestem Wissen und Gewissen zusammengestellt. Eine Gewähr für
                die Funktion, Aktualität, Richtigkeit, Vollständigkeit oder Qualität der Informationen unserer
                Internet-Seiten, der Link-Verweise und insbesondere der Informationen der verwiesenen („verlinkten“)
                Internetseiten der Drittanbieter (inklusive Rechtmäßigkeit des Inhaltes) kann angesichts der
                Unentgeltlichkeit aber nicht übernommen werden. Die Rechte an diesen Seiten sowie die Verantwortlichkeit
                für deren Inhalt liegen ausschließlich beim Drittanbieter.
Victoria Badeke's avatar
Victoria Badeke committed
            </p>
        </section>
    </div>
</div>

<!--Reisebericht schreiben-->
<div id="reiseberichtSchreiben" class="page">
    <aside class="sidebar">
        <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
        <p class="greeting">Hallo,</p>
        <nav class="menu">
            <ul>
                <li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
                <li><a>Mein Profil</a></li>
                <li><a onclick="showPage('merkliste')">Merkliste</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                <li><a>Meine Supportanfragen</a></li>
                <li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
                <div id="logout-form3">
                    <li><a id="logout-button3" onclick="showPage('startseite')">Abmelden</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
            </ul>
        </nav>
    </aside>
    <div class="reiseberichtFormular">
        <h1>Wie war Deine Reise mit Uns?</h1>
„Sophia's avatar
„Sophia committed
        <form id="reiseberichtForm">
Victoria Badeke's avatar
Victoria Badeke committed
            <label for="country">Land auswählen</label>
            <select id="country" name="country">
                <option value="">-- Bitte wählen --</option>
„Sophia's avatar
„Sophia committed
                <option value="spanien">Spanien</option>
                <option value="peru">Peru</option>
„Sophia's avatar
„Sophia committed
                <option value="indien">Indien</option>
                <option value="kenia">Kenia</option>
Victoria Badeke's avatar
Victoria Badeke committed
            </select>

„Sophia's avatar
„Sophia committed
            <div class="rating" id="ratingReisebericht">
                <span id="stern1">&#9733;</span>
                <span id="stern2">&#9733;</span>
                <span id="stern3">&#9733;</span>
                <span id="stern4">&#9733;</span>
                <span id="stern5">&#9733;</span>
            </div>
Victoria Badeke's avatar
Victoria Badeke committed

„Sophia's avatar
„Sophia committed
            <label for="titleReisebericht">Titel</label>
            <input type="text" id="titleReisebericht" name="title" placeholder="titel">
Victoria Badeke's avatar
Victoria Badeke committed


            <label for="feedback">Feedback</label>
            <textarea id="feedback" name="feedback" placeholder="Schreibe hier dein Feedback..."></textarea>

„Sophia's avatar
„Sophia committed
            <button type="submit" class="reiseberichtAbsenden">Absenden</button>
Victoria Badeke's avatar
Victoria Badeke committed

        </form>
    </div>
</div>


<!--Meine Reiseberichte-->

<div id="meineReiseberichte" class="page">
    <aside class="sidebar">
        <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
        <p class="greeting">Hallo,</p>
        <nav class="menu">
            <ul>
                <li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
                <li><a>Mein Profil</a></li>
                <li><a onclick="showPage('merkliste')">Merkliste</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                <li><a>Meine Supportanfragen</a></li>
                <li><a onclick="showPage ('meineReiseberichte')" id="meineReiseberichteSeite">Meine Reiseberichte </a>
                </li>
Victoria Badeke's avatar
Victoria Badeke committed
                <div id="logout-form4">
                    <li><a id="logout-button4" onclick="showPage('startseite')">Abmelden</a></li>
Victoria Badeke's avatar
Victoria Badeke committed
                </div>
            </ul>
        </nav>
    </aside>
„Sophia's avatar
„Sophia committed
    <main class="content">
        <section id="sectionNewReisebericht">
            <h2>Meine Reiseberichte</h2>
            <div class="reisebericht-card" id="reisebericht-card">
                <h3 id="titelReise">Meine Reise in Indien</h3>
                <h5 id="reiseland"> ...</h5>
                <p id="reisebeschreibung">Das Projekt setzt sich dafür ein, Frauen in benachteiligten Regionen Indiens
                    Zugang zu Bildung und beruflichen Chancen zu ermöglichen. Schon bei meiner Ankunft wurde deutlich,
                    wie wichtig diese Arbeit ist: Die strahlenden Augen der Teilnehmerinnen und ihre Geschichten
                    zeigten, dass Bildung für sie ein Tor zu einem besseren Leben bedeutet.</p>
                <button class="details-button">Reisebericht löschen</button>
                <button class="report-button" onclick="showPage('reiseberichtSchreiben')">Reisebericht bearbeiten
                </button>
„Sophia's avatar
„Sophia committed
            </div>
        </section>
    </main>
Victoria Badeke's avatar
Victoria Badeke committed
</div>

Victoria Badeke's avatar
Victoria Badeke committed
<!--Reisen-->
Victoria Badeke's avatar
Victoria Badeke committed

Victoria Badeke's avatar
Victoria Badeke committed
<div id="reisen" class="page">
    <div class="reisen">
        <body>
        <header.reisen>
            <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
            <h1>Bereise gemeinsam mit uns die Welt!</h1>
        </header.reisen>

        <section class="filter-section">
            <div class="filter-container">
                <select name="country" id="country1">
                    <option value="">Land</option>
                    <option value="indien">Indien</option>
                    <option value="spanien">Spanien</option>
                    <option value="kenia">Kenia</option>
                    <option value="peru">Kenia</option>
                </select>

                <select name="project-type" id="project-type">
                    <option value="">Freiwilligenprojekt</option>
                    <option value="bildung">Bildungslicht für Frauen</option>
                    <option value="tierschutz">Pfoten ohne Grenzen</option>
                    <option value="gesundheit">Bausteine der Gesundheit</option>
                    <option value="gesundheit">Lebensquellen</option>
                </select>

                <div class="price-filter">
                    <label for="price">Preis</label>
                    <input type="range" id="price" name="price" min="0" max="5000" step="500">
                    <div class="price-values">
                        <span>0</span>
                        <span>5.000</span>
                    </div>
                </div>

                <button class="filter-button">Filtern</button>
Victoria Badeke's avatar
Victoria Badeke committed
            </div>
        </section>
Victoria Badeke's avatar
Victoria Badeke committed

        <section class="projects-section">
            <div class="project-card">
                <img src="assets/bevorstehendeReisen.jpg" height="890" width="736" alt="Bildungslicht für Frauen"/>
                <h3>Bildungslicht für Frauen</h3>
                <p>Schulen und Träume in Indien verwirklichen</p>
                <ul class="project-info">
                    <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                    <li><i class="fa-solid fa-earth-americas"></i> Indien</li>
                    <li><i class="fa-solid fa-star"></i>4,6</li>
                </ul>
                <p class="price">ab 1.500€</p>
                <button class="info-button">Mehr Infos</button>
            </div>
Victoria Badeke's avatar
Victoria Badeke committed

            <div class="project-card">
                <img src="assets/Produkt%20Spanien.jpg" height="920" width="736" alt="Pfoten ohne Grenzen"/>
                <h3>Pfoten ohne Grenzen</h3>
                <p>Eine Reise zur Rettung von Straßenhunden</p>
                <ul class="project-info">
                    <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                    <li><i class="fa-solid fa-earth-americas"></i> Spanien</li>
                    <li><i class="fa-solid fa-star"></i>4,8</li>
                </ul>
                <p class="price">ab 1.500€</p>
                <button class="info-button">Mehr Infos</button>
            </div>

            <div class="project-card">
                <img src="assets/keniaprojekt.jpeg" height="491" width="736" alt="Lebensquellen Kenia"/>
                <h3>Lebensquellen Kenia</h3>
                <p>Brunnenbau für eine bessere Welt</p>
                <br>
                <ul class="project-info">
                    <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                    <li><i class="fa-solid fa-earth-americas"></i> Kenia</li>
                    <li><i class="fa-solid fa-star"></i>4,9</li>
                </ul>
                <p class="price">ab 1.500€</p>
                <button class="info-button">Mehr Infos</button>
            </div>

            <div class="project-card">
                <img src="assets/peruprojekt (1).jpeg" height="445" width="667" alt="Bausteine der Gesundheit"/>
                <h3>Bausteine der Gesundheit</h3>
                <p>Sanitäranlagen für eine nachhaltige Zukunft in Peru</p>
                <ul class="project-info">
                    <li><i class="fa-solid fa-calendar-days"></i> 2 - 6 Wochen</li>
                    <li><i class="fa-solid fa-earth-americas"></i> Peru</li>
                    <li><i class="fa-solid fa-star"></i>4,6</li>
                </ul>
                <p class="price">ab 1.500€</p>
                <button class="info-button">Mehr Infos</button>
            </div>
        </section>
        </body>
Victoria Badeke's avatar
Victoria Badeke committed
    </div>
</div>

<!--Kontakt-->
Victoria Badeke's avatar
Victoria Badeke committed

<div id="kontakt" class="page">
    <br>
    <br>
    <br>
    <div class="container">