Skip to content
Snippets Groups Projects
index.html 27.5 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

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

„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>

Victoria Badeke's avatar
Victoria Badeke committed
                    <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">
Sarah Gloger's avatar
Sarah Gloger committed


„Sophia's avatar
„Sophia committed
    <div class="modal fade" id="edit-user-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="edit-user-form">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="edit-user-id">
„Sophia's avatar
„Sophia committed
                        <label for="edit-user-first-namee">Vorname</label>
                        <input type="text" class="form-control mb-3" id="edit-user-first-namee">
                        <label for="edit-user-last-namee">Name</label>
                        <input type="text" class="form-control" id="edit-user-last-namee">
„Sophia's avatar
„Sophia committed
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                        <button type="submit" class="btn btn-primary">Sichern</button>
                    </div>
                </form>
            </div>
        </div>
Sarah Gloger's avatar
Sarah Gloger committed
    </div>
Victoria Badeke's avatar
Victoria Badeke committed
    <!--Startseite hero-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>
        </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">
„Sophia's avatar
„Sophia committed
                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...
            </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>
„Sophia's avatar
„Sophia committed
                                <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>
                            </div>
„Sophia's avatar
„Sophia committed
                        </div>
                    </div>
„Sophia's avatar
„Sophia committed
                    <!-- 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>
                            </div>
„Sophia's avatar
„Sophia committed
                        </div>
                    </div>
„Sophia's avatar
„Sophia committed
                    <!-- 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>
„Sophia's avatar
„Sophia committed
                        </div>
                    </div>
                </div>
„Sophia's avatar
„Sophia committed
                <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>
„Sophia's avatar
„Sophia committed
            </div>
„Sophia's avatar
„Sophia committed

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

Victoria Badeke's avatar
Victoria Badeke committed
<!--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

„Sophia's avatar
„Sophia committed
        <img src="assets/MAPLÄNDER.png"  alt="Weltkarte" class="map" height="484" width="860"/>
        <div class="pin" title="Südamerika"></div>
        <div class="pin" title="Afrika"></div>
        <div class="pin" title="Asien"></div>
    </div>
„Sophia's avatar
„Sophia committed
</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

„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">

Victoria Badeke's avatar
Victoria Badeke committed
<div class="container-meineReisen">
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" id="current-user-firstName">Hallo,</p>
Victoria Badeke's avatar
Victoria Badeke committed
        <nav class="menu">
„Sophia's avatar
„Sophia committed
            <ul>
Victoria Badeke's avatar
Victoria Badeke committed
                <li><a href="#">Meine Reisen</a></li>
                <li><a onclick="showPage('profil')">Mein Profil</a></li>
                <li><a href="#">Merkliste</a></li>
                <li><a href="#">Meine Supportanfragen</a></li>
                <li><a href="#">Reisebericht schreiben</a></li>
„Sophia's avatar
„Sophia committed
                <div id="logout-form">
                    <li><a  id="logout-button" onclick="showPage('startseite')">Abmelden</a></li>
                </div>
Victoria Badeke's avatar
Victoria Badeke committed
            </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>
            </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">Reisebericht schreiben</button>
                </div>
            </div>
        </section>
    </main>
</div>
</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>Merkliste</a></li>
                    <li><a>Meine Supportanfragen</a></li>
                    <li><a>Reisebericht schreiben</a></li>
                    <li><a>Abmelden</a></li>
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" >
                            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

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

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <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>
                        </div>
Victoria Badeke's avatar
Victoria Badeke committed
                    </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">
            <img src="assets/heroAboutUs.jpeg" height="1104" width="736" alt="Teamwork" class="hero-image">
        </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>
                            </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">
                        </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>
                            </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>

Victoria Badeke's avatar
Victoria Badeke committed
<!--Admin-Nutzerliste muss noch an die richtige STelle gerückt werden-->
<div id="kontakt" class="page">
    <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>
                    <li><a>Abmelden</a></li>
                </ul>
            </nav>
        </aside>
    </div>
    <div class="nutzerliste-container">
        <h1>Kundendaten</h1>
        <div class="table-container-nutzerliste">
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Vorname</th>
                    <th>Name</th>
                    <th>Adresse</th>
                    <th>E-mail</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Anna</td>
                    <td>Peters</td>
                    <td>Hauptstraße 12, 61276 Weilrod</td>
                    <td>anna.peters@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Bob</td>
                    <td>Hase</td>
                    <td>Hauptstraße 10, 61276 Weilrod</td>
                    <td>bob.hase@outlook.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Claus</td>
                    <td>Krause</td>
                    <td>Hauptstraße 5, 61276 Weilrod</td>
                    <td>claus.krause@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Eva</td>
                    <td>Groß</td>
                    <td>Hauptstraße 20, 61276 Weilrod</td>
                    <td>eva.groß@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Gustaf</td>
                    <td>Arndt</td>
                    <td>Hauptstraße 35, 61276 Weilrod</td>
                    <td>gustaf.arndt@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Hans</td>
                    <td>Steffens</td>
                    <td>Klausstraße 12, 61276 Weilrod</td>
                    <td>hans.steffens@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Ingo</td>
                    <td>Keiner</td>
                    <td>lehmstraße 12, 61276 Weilrod</td>
                    <td>ingo.keiner@gmail.com</td>
                    <td><i class="fa-solid fa-pen updateButton"></i> <i class="fa-solid fa-trash-can deleteButton"></i></td>
                </tr>
                </tbody>
                </table>
        </div>
    </div>
</div>



Victoria Badeke's avatar
Victoria Badeke committed
<!--Footer-->
„Sophia's avatar
„Sophia committed
<footer class="footer">
    <div class="footer-container">
        <div class="footer-logo">
Sarah Gloger's avatar
Sarah Gloger committed

            <img src="assets/HORIZON CHANGERS.PNG"   alt="Horizon Changers Logo"/>
„Sophia's avatar
„Sophia committed
        </div>
        <div class="footer-section">
            <h4>Nützliche Informationen</h4>
            <ul>
                <li> <a href="#">FAQ</a>
                    <a href="#">Impressum</a>
                </li>
            </ul>
        </div>
        <div class="footer-section">
            <h4>Unsere Zahlungsmöglichkeiten</h4>
            <div class="payment-icons">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Paypal_2014_logo.png" alt="PayPal">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Klarna_Payment_Badge.svg/1280px-Klarna_Payment_Badge.svg.png" alt="Klarna">
                <img src="https://e7.pngegg.com/pngimages/530/165/png-clipart-logo-mastercard-pentagram-flat-design-brand-mastercard-text-trademark.png" alt="Mastercard">
                <img src="https://img.icons8.com/?size=512&id=13608&format=png" alt="Visa">
            </div>
        </div>
        <div class="footer-section">
            <h4>Mehr Inspirationen</h4>
            <div class="social-icons">
                <a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
„Sophia's avatar
„Sophia committed
                <a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a>
„Sophia's avatar
„Sophia committed
                <a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>Copyright © 2025 Horizon Changers GmbH | Alle Rechte vorbehalten</p>
    </div>
</footer>


„Sophia's avatar
„Sophia committed
</body>
</html>