From ff5c64d9d1016b316fa429b1f6b8941d2d2b69c3 Mon Sep 17 00:00:00 2001
From: Victoria Badeke <victoria.badeke@mni.thm.de>
Date: Tue, 28 Jan 2025 16:01:42 +0100
Subject: [PATCH] Repairing changes made on master
---
userman_all/client/index.html | 830 +++++++++-------
userman_all/client/stylesheet.css | 1483 ++++++++++++++++-------------
2 files changed, 1324 insertions(+), 989 deletions(-)
diff --git a/userman_all/client/index.html b/userman_all/client/index.html
index 13a80e2..a22536d 100644
--- a/userman_all/client/index.html
+++ b/userman_all/client/index.html
@@ -21,7 +21,7 @@
<div class="container">
<a class="navbar-brand" href="#">
- <img src="assets/helles logo.png" width="94" height="80" alt="Logo" onclick="showPage('startseite')"/>
+ <img src="assets/helles logo.png" width="94" height="80" alt="Logo" onclick="showPage('startseite')"/>
</a>
<ul class="nav-links">
@@ -50,7 +50,9 @@
<input type="password" class="form-control" id="exampleDropdownFormPassword2">
</div>
- <button type="submit" class="btn btn-primary" id="login-button" onclick="showPage('meineReisen')">Login</button>
+ <button type="submit" class="btn btn-primary" id="login-button" onclick="showPage('meineReisen')">
+ Login
+ </button>
<a class="dropdown-item" onclick="showPage('registrieren')"><u>Registrieren</u></a>
@@ -72,7 +74,7 @@
<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>
+ <button id="hero-button" onclick="showPage('reisen')">Reise mit uns!</button>
</div>
</div>
<!-- Titeltext-->
@@ -84,7 +86,10 @@
<br>
<h2 class="horizon-changers-opening-title">Horizon Changers</h2>
<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...
+ 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>
<a class="horizon-changers-button" onclick="showPage('about-Us')"> Mehr erfahren</a>
</div>
@@ -97,148 +102,156 @@
</div>
<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>
- </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>
+ <!-- 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>
</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>
- </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>
</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>
+ <!-- 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>
</div>
</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>
+ <!-- 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>
</div>
</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>
</div>
-<!--Startseite Landkarte-->
+ <!--Startseite Landkarte-->
<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">
- <img src="assets/MAPLÄNDER.png" alt="Weltkarte" class="map" height="484" width="860"/>
+ <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>
-</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>
+ <!-- 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>
- <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 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>
</div>
+ <button class="card-button">weiter lesen</button>
</div>
- <button class="card-button">weiter lesen</button>
- </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>
+ <!-- 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>
</div>
+ <button class="card-button">weiter lesen</button>
</div>
- <button class="card-button">weiter lesen</button>
- </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>
+ <!-- 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>
</div>
+ <button class="card-button">weiter lesen</button>
</div>
- <button class="card-button">weiter lesen</button>
</div>
</div>
</div>
+
<!--Registrieren-Seite-->
<div id="registrieren" class="page justify-content-center">
<i class="fa-solid fa-circle-arrow-left backButton"></i>
@@ -271,7 +284,7 @@
</div>
- <div id="label4" class="form-text-registrieren" >
+ <div id="label4" class="form-text-registrieren">
Passwort
<label for="add-user-password" class="d-none">Passwort</label>
<input type="password" class="form-control-registrieren" id="add-user-password">
@@ -283,7 +296,9 @@
<input type="password" class="form-control-registrieren" id="add-user-repeatPassword">
</div>
- <button type="submit" class="btn btn-primary" id="registrierenButton" onclick="showPage ('meineReisen')">Registrieren</button>
+ <button type="submit" class="btn btn-primary" id="registrierenButton"
+ onclick="showPage ('meineReisen')">Registrieren
+ </button>
</form>
</div>
@@ -293,47 +308,90 @@
<!--Meine Reisen-->
<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 href="#">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 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>
</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>
+ </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>
</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>
</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>
+ <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>
</div>
- </div>
- </section>
- </main>
-</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>
</div>
<!--Profil-->
@@ -347,11 +405,11 @@
<ul>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
- <li><a>Merkliste</a></li>
+ <li><a onclick="showPage('merkliste')">Merkliste</a></li>
<li><a>Meine Supportanfragen</a></li>
<li><a onclick="showPage ('meineReiseberichte')">Meine Reiseberichte </a></li>
<div id="logout-form1">
- <li><a id="logout-button1" onclick="showPage('startseite')">Abmelden</a></li>
+ <li><a id="logout-button1" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
@@ -388,7 +446,7 @@
<div class="section">
<h2>Adressdaten</h2>
- <div id="label5edit" class="form-text-profile" >
+ <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">
@@ -400,15 +458,18 @@
</button>
<!-- Delete-Popup-Modal -->
- <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+ <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel"
+ aria-hidden="true">
<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>
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+ aria-label="Close"></button>
</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.
+ Bist du dir sicher, dass du dein Profil löschen möchtest? Diese Aktion kann nicht
+ rückgängig gemacht werden.
</div>
<div class="modal-footer">
<button type="submit" id="saveButtonDelete" class="btn btn-danger">Löschen</button>
@@ -419,29 +480,31 @@
<!-- Edit Button trigger modal -->
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal">
- Änderungen bestätigen
- </button>
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal">
+ Änderungen bestätigen
+ </button>
- <!-- 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>
+ <!-- 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>
</div>
</div>
</div>
- </div>
</form>
</div>
</div>
@@ -467,10 +530,17 @@
<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>
+ <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 -->
@@ -487,17 +557,25 @@
<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">
+ <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>
+ <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>
@@ -548,7 +626,7 @@
<li><a>Dashboard</a></li>
<li><a>Kundendaten</a></li>
<div id="logout-form2">
- <li><a id="logout-button2" onclick="showPage('startseite')">Abmelden</a></li>
+ <li><a id="logout-button2" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
@@ -598,43 +676,44 @@
<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">
- </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>
+ <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">
</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>
</form>
</div>
</div>
</div>
<!-- Modal User löschen vom admin aus -->
- <div class="modal fade" id="deleteModalAdmin" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+ <div class="modal fade" id="deleteModalAdmin" tabindex="-1" aria-labelledby="deleteModalLabel"
+ aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -645,8 +724,8 @@
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>
+ <button type="submit" id="nodeleteButtonEdit" class="btn btn-primary">abbrechen</button>
+ <button type="submit" id="deleteButtonAdmin" class="btn btn-primary">löschen</button>
</div>
</div>
</div>
@@ -705,11 +784,19 @@
<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.
+ 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.
<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.
+ 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.
</p>
</section>
</div>
@@ -724,11 +811,11 @@
<ul>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
- <li><a>Merkliste</a></li>
+ <li><a onclick="showPage('merkliste')">Merkliste</a></li>
<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>
+ <li><a id="logout-button3" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
@@ -740,7 +827,7 @@
<select id="country" name="country">
<option value="">-- Bitte wählen --</option>
<option value="spanien">Spanien</option>
- <option value="peru" >Peru</option>
+ <option value="peru">Peru</option>
<option value="indien">Indien</option>
<option value="kenia">Kenia</option>
</select>
@@ -777,11 +864,12 @@
<ul>
<li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
<li><a>Mein Profil</a></li>
- <li><a>Merkliste</a></li>
+ <li><a onclick="showPage('merkliste')">Merkliste</a></li>
<li><a>Meine Supportanfragen</a></li>
- <li><a onclick="showPage ('meineReiseberichte')" id="meineReiseberichteSeite" >Meine Reiseberichte </a></li>
+ <li><a onclick="showPage ('meineReiseberichte')" id="meineReiseberichteSeite">Meine Reiseberichte </a>
+ </li>
<div id="logout-form4">
- <li><a id="logout-button4" onclick="showPage('startseite')">Abmelden</a></li>
+ <li><a id="logout-button4" onclick="showPage('startseite')">Abmelden</a></li>
</div>
</ul>
</nav>
@@ -790,11 +878,15 @@
<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>
+ <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>
</div>
</section>
</main>
@@ -803,100 +895,190 @@
<!--Reisen-->
<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 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>
</div>
- </div>
+ </section>
- <button class="filter-button">Filtern</button>
- </div>
-</section>
-
-<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>
+ <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>
- <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 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>
</div>
+</div>
+
+<!--Kontakt-->
- <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>
+<div id="kontakt" class="page">
+ <br>
+ <br>
+ <br>
+ <div class="container">
+ <i class="fa-solid fa-circle-arrow-left backButton" onclick="showPage('startseite')"></i>
+ <h1>Fragen, Wünsche, Abenteuerlust?</h1>
+ <p>Wir sind für Dich da!</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>
+ <br>
+ <h3>Du kannst uns auf folgenden Wegen erreichen:</h3>
+
+ <div class="contact-box">
+ <div class="contact-box-info">
+ <h4><i class="fa-solid fa-user"> </I> Kontakt</h4>
+ <p><strong>Ruf uns an</strong><br>0800 – 11001100<br>Kostenfrei für Deutschland.</p>
+ <p><strong>Erreichbarkeit:</strong><br>Montag bis Freitag 8-21 Uhr<br>Samstag und Sonntag 9-17 Uhr</p>
+ <p>Folge uns in den sozialen Medien, um nichts zu verpassen:</p>
+ <div class="social-icons">
+ <span><i class="fa-brands fa-instagram"></i></span> <span><i
+ class="fa-brands fa-facebook"></I></span> <span><i class="fa-brands fa-youtube"></I></span>
+ </div>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+
+ <div class="form-box">
+ <div class="form-box-info">
+ <h4><i class="fa-solid fa-envelope"></I> Oder melde Dich schriftlich bei uns...</h4>
+ <br>
+ <form>
+ <label for="vorname">Vorname*</label>
+ <input type="text" id="vorname" name="vorname" required>
+
+ <label for="name">Name*</label>
+ <input type="text" id="name" name="name" required>
+
+ <label for="telefonnummer">Telefonnummer</label>
+ <input type="text" id="telefonnummer" name="telefonnummer">
+
+ <label for="email">E-Mail*</label>
+ <input type="text" id="email" name="email" required>
- <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>
+ <label for="betreff">Betreff*</label>
+ <input type="text" id="betreff" name="betreff" required>
+
+ <label for="nachricht">Deine Nachricht*</label>
+ <textarea id="nachricht" name="nachricht" required></textarea>
+
+ <button type="submit" class="absendenKontakt">Absenden</button>
+ </form>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+
+ <div class="video-box">
+ <div class="video-box-info">
+ <h4><i class="fa-solid fa-video"></I> Videocalls</h4>
+ <p>Melde dich zu unseren monatlichen Videocalls an, um direkt Fragen an unsere ExpertInnen zu
+ stellen.</p>
+ <form>
+ <label for="vorname-vc">Vorname</label>
+ <input type="text" id="vorname-vc" name="vorname">
+
+ <label for="name-vc">Name</label>
+ <input type="text" id="name-vc" name="name">
+
+ <label for="email-vc">E-Mail*</label>
+ <input type="text" id="email-vc" name="email" required>
+
+ <p><strong>Nächster Call: 31.11.2024</strong></p>
+ <p>Der Zugangslink wird dir per E-Mail zugesendet.</p>
+
+ <button type="submit" class="absendenKontakt">Absenden</button>
+ </form>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
</div>
-</section>
-</body>
-</div>
+
</div>
@@ -905,12 +1087,12 @@
<div class="footer-container">
<div class="footer-logo">
- <img src="assets/HORIZON CHANGERS.PNG" alt="Horizon Changers Logo"/>
+ <img src="assets/HORIZON CHANGERS.PNG" alt="Horizon Changers Logo"/>
</div>
<div class="footer-section">
<h4>Nützliche Informationen</h4>
<ul>
- <li> <a href="#">FAQ</a>
+ <li><a href="#">FAQ</a>
<a onclick="showPage('Impressum')">Impressum</a>
</li>
</ul>
@@ -919,8 +1101,10 @@
<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://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>
diff --git a/userman_all/client/stylesheet.css b/userman_all/client/stylesheet.css
index 196bdc5..f74a65b 100644
--- a/userman_all/client/stylesheet.css
+++ b/userman_all/client/stylesheet.css
@@ -6,250 +6,250 @@ body {
align-items: center;
background-color: #ffffff;
-header {
- background-color: #ffffff;
- color: #ffffff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Abgrenzung */
-}
+ header {
+ background-color: #ffffff;
+ color: #ffffff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Abgrenzung */
+ }
-/*Navbar*/
+ /*Navbar*/
-.nav {
- height: 100px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- justify-items: center;
- padding: 20px 10%;
+ .nav {
+ height: 100px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ justify-items: center;
+ padding: 20px 10%;
-}
-.logo img {
- height: 50px;
- align-items: center;
-}
+ }
+ .logo img {
+ height: 50px;
+ align-items: center;
+ }
-.nav-links {
- list-style: none;
- display: flex;
- gap: 100px;
- margin: 0;
- padding: 0;
- align-items: center;
- box-sizing: border-box;
- color: #03355C;
- cursor: pointer;
-}
+ .nav-links {
+ list-style: none;
+ display: flex;
+ gap: 100px;
+ margin: 0;
+ padding: 0;
+ align-items: center;
+ box-sizing: border-box;
+ color: #03355C;
+ cursor: pointer;
+ }
-.nav-links li a {
- text-decoration: none;
- color: #03355c;
- font-size: 26px;
- font-weight: 500;
- align-items: center;
-}
+ .nav-links li a {
+ text-decoration: none;
+ color: #03355c;
+ font-size: 26px;
+ font-weight: 500;
+ align-items: center;
+ }
-.nav-links li a:hover {
- color: #03355c; /* Hover-Farbe */
- opacity: 0.5;
-}
+ .nav-links li a:hover {
+ color: #03355c; /* Hover-Farbe */
+ opacity: 0.5;
+ }
-#merkliste-navbar {
- font-size:40px;
- color: #03355c;
+ #merkliste-navbar {
+ font-size:40px;
+ color: #03355c;
-}
-#merkliste-navbar:hover {
- color: #03355c; /* Hover-Farbe */
- opacity: 0.5;
-}
+ }
+ #merkliste-navbar:hover {
+ color: #03355c; /* Hover-Farbe */
+ opacity: 0.5;
+ }
-.fa-circle-user {
- margin-right: 30px;
- color: #03355c;
- font-size: 40px;
- cursor: pointer;
-}
-.fa-circle-user:hover {
- color: #03355c;
- opacity: 0.5;
- border: none;
-}
+ .fa-circle-user {
+ margin-right: 30px;
+ color: #03355c;
+ font-size: 40px;
+ cursor: pointer;
+ }
+ .fa-circle-user:hover {
+ color: #03355c;
+ opacity: 0.5;
+ border: none;
+ }
-#dropdown-anmelden {
- border: none;
- border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Abgrenzung */
- color: #03355c;
-}
+ #dropdown-anmelden {
+ border: none;
+ border-radius: 10px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Abgrenzung */
+ color: #03355c;
+ }
-#login-button {
- background-color: #fb7300;
- color: #ffffff;
- border: none;
- border-radius: 50px;
- margin-left: 10px;
- cursor: pointer;
+ #login-button {
+ background-color: #fb7300;
+ color: #ffffff;
+ border: none;
+ border-radius: 50px;
+ margin-left: 10px;
+ cursor: pointer;
-}
-#login-button:hover {
- background-color: #e36c20;
- color: #ffffff;
-}
-#exampleDropdownFormEmail2 {
- border-color: #03355c;
- border-radius: 50px;
-}
-#exampleDropdownFormPassword2 {
- border-color: #03355c;
- border-radius: 50px;
-}
+ }
+ #login-button:hover {
+ background-color: #e36c20;
+ color: #ffffff;
+ }
+ #exampleDropdownFormEmail2 {
+ border-color: #03355c;
+ border-radius: 50px;
+ }
+ #exampleDropdownFormPassword2 {
+ border-color: #03355c;
+ border-radius: 50px;
+ }
-/*Footer*/
-.footer {
- background-color: #03355C;
- color: #fff;
- padding: 20px 10%;
- font-size: 20px;
+ /*Footer*/
+ .footer {
+ background-color: #03355C;
+ color: #fff;
+ padding: 20px 10%;
+ font-size: 20px;
-}
+ }
-.footer-container {
- display: flex;
- justify-content: space-between;
- gap: 20px;
-}
+ .footer-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+ }
-.footer-logo img {
- max-width: 150px;
-}
+ .footer-logo img {
+ max-width: 150px;
+ }
-.footer-section h4 {
- margin-bottom: 20px;
-}
+ .footer-section h4 {
+ margin-bottom: 20px;
+ }
-.footer-section ul {
- list-style: none;
- font-size: 20px;
- padding: 0;
- margin: 0;
-}
+ .footer-section ul {
+ list-style: none;
+ font-size: 20px;
+ padding: 0;
+ margin: 0;
+ }
-.footer-section ul li a {
- color: #fff;
- margin: 20px;
-}
+ .footer-section ul li a {
+ color: #fff;
+ margin: 20px;
+ }
-.footer-section ul li a:hover {
- opacity: 0.5;
-}
+ .footer-section ul li a:hover {
+ opacity: 0.5;
+ }
-.payment-icons img {
- max-height: 40px;
- margin-right: 20px;
-}
+ .payment-icons img {
+ max-height: 40px;
+ margin-right: 20px;
+ }
-.social-icons a {
- color: #fff;
- font-size: 45px;
- margin-right: 20px;
- cursor: pointer;
-}
+ .social-icons a {
+ color: #fff;
+ font-size: 45px;
+ margin-right: 20px;
+ cursor: pointer;
+ }
-.social-icons a:hover {
- opacity: 0.5;
-}
+ .social-icons a:hover {
+ opacity: 0.5;
+ }
-.footer-bottom {
- text-align: center;
- margin-top: 20px;
- font-size: 0.9em;
- border-top: 1px solid #fff;
- padding-top: 10px;
-}
+ .footer-bottom {
+ text-align: center;
+ margin-top: 20px;
+ font-size: 0.9em;
+ border-top: 1px solid #fff;
+ padding-top: 10px;
+ }
-/*Landkarte*/
+ /*Landkarte*/
-/* Ãœberschrift mit eigener Schriftart */
-#h1-landkarte {
- font-family: Cy Grotesk Wide;
- color: #03355C;
- font-size: 34px;
- margin: 0;
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
- padding-top: 200px;
-}
+ /* Ãœberschrift mit eigener Schriftart */
+ #h1-landkarte {
+ font-family: Cy Grotesk Wide;
+ color: #03355C;
+ font-size: 34px;
+ margin: 0;
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ padding-top: 200px;
+ }
-/* Absatztext mit Standardschriftart */
-#subtitle-landkarte {
- font-family: 'DM Sans', sans-serif; /* Schriftart für den Absatztext */
- color: #03355C;
- font-size: 20px; /* Schriftgröße */
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
-}
+ /* Absatztext mit Standardschriftart */
+ #subtitle-landkarte {
+ font-family: 'DM Sans', sans-serif; /* Schriftart für den Absatztext */
+ color: #03355C;
+ font-size: 20px; /* Schriftgröße */
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ }
-/* Weltkarte mit Pins */
-.map-container {
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
-}
-/*Bild der Karte*/
-.map {
- max-width: 100%; /* Karte passt sich der Bildschirmbreite an */
- height: auto;
-}
+ /* Weltkarte mit Pins */
+ .map-container {
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ }
+ /*Bild der Karte*/
+ .map {
+ max-width: 100%; /* Karte passt sich der Bildschirmbreite an */
+ height: auto;
+ }
-/*Karusell Startseite Reisen*/
+ /*Karusell Startseite Reisen*/
-#beispielreisen-carrousel {
- display: flex;
- justify-content: center;
- align-items: center;
-}
+ #beispielreisen-carrousel {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
-.card-carrousel-reisen .position-relative {
- object-position: center; /* Zentriert das Bild innerhalb des Containers */
- display: flex;
- flex-direction: column; /* Für vertikale Inhalte */
- gap: 10px;
-}
+ .card-carrousel-reisen .position-relative {
+ object-position: center; /* Zentriert das Bild innerhalb des Containers */
+ display: flex;
+ flex-direction: column; /* Für vertikale Inhalte */
+ gap: 10px;
+ }
-.card-img-beispiel {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- fill-rule: evenodd;
- width: 600px;
- height: 200px;
- object-fit: cover;
-}
+ .card-img-beispiel {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ fill-rule: evenodd;
+ width: 600px;
+ height: 200px;
+ object-fit: cover;
+ }
-.bestseller-badge {
- position: absolute;
- top: 10px;
- left: 10px;
- color: #e36c20;
- background: #ffffff;
- padding: 5px 10px;
- border-radius: 5px;
-}
+ .bestseller-badge {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ color: #e36c20;
+ background: #ffffff;
+ padding: 5px 10px;
+ border-radius: 5px;
+ }
-.favorite-icon {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 40px;
- height: 40px;
- color: #03355C;
-}
+ .favorite-icon {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 40px;
+ height: 40px;
+ color: #03355C;
+ }
.card-carrousel-reisen {
@@ -270,350 +270,350 @@ header {
}
#carousel-title {
- padding: 20px 10px;
- border-radius: 15px;
- margin-bottom: 20px;
+ padding: 20px 10px;
+ border-radius: 15px;
+ margin-bottom: 20px;
-}
+ }
-#carousel-title h2 {
- font-family: Cy Grotesk Wide;
- font-size: 34px;
- margin: 0;
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
- padding-top: 200px;
-}
+ #carousel-title h2 {
+ font-family: Cy Grotesk Wide;
+ font-size: 34px;
+ margin: 0;
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ padding-top: 200px;
+ }
-#carousel-title p {
- font-family: "DM Sans", sans-serif;
- margin: 0;
- font-size: 26px;
- color: #03355c;
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
-}
+ #carousel-title p {
+ font-family: "DM Sans", sans-serif;
+ margin: 0;
+ font-size: 26px;
+ color: #03355c;
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ }
-.card-title-carousel {
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- text-align: start;
-}
-.card-text-carousel {
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- text-align: start;
-}
-.carousel-control-prev,
-.carousel-control-next {
- color: #03355c;
-}
-/* Positioniere die Pfeile außerhalb des Karussells */
-.carousel-control-prev,
-.carousel-control-next {
- top: 50%;
- transform: translateY(-50%);
-}
+ .card-title-carousel {
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ text-align: start;
+ }
+ .card-text-carousel {
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ text-align: start;
+ }
+ .carousel-control-prev,
+ .carousel-control-next {
+ color: #03355c;
+ }
+ /* Positioniere die Pfeile außerhalb des Karussells */
+ .carousel-control-prev,
+ .carousel-control-next {
+ top: 50%;
+ transform: translateY(-50%);
+ }
-/* Verschiebe die Pfeile nach außen */
-.carousel-control-prev {
- left: -70px
-}
+ /* Verschiebe die Pfeile nach außen */
+ .carousel-control-prev {
+ left: -70px
+ }
-.carousel-control-next {
- right: -70px;
-}
+ .carousel-control-next {
+ right: -70px;
+ }
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
- background-color: #03355c;
-}
+ .carousel-control-prev-icon,
+ .carousel-control-next-icon {
+ background-color: #03355c;
+ }
-.carousel-control-next-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- color: #03355C;
-}
-/*Pfeil rechts (Karussell)*/
-.fa-chevron-right {
- font-size: 40px;
- color: #03355C;
-}
+ .carousel-control-next-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ color: #03355C;
+ }
+ /*Pfeil rechts (Karussell)*/
+ .fa-chevron-right {
+ font-size: 40px;
+ color: #03355C;
+ }
-/* Pfeil links (Karussell) */
-.fa-chevron-left {
- font-size: 40px;
- color: #03355C;
+ /* Pfeil links (Karussell) */
+ .fa-chevron-left {
+ font-size: 40px;
+ color: #03355C;
-}
+ }
+
+ /*Registrierenseite*/
+
+ #backButtonRegistrieren {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ font-size: 30px;
+ color: #03355C; /* Dunkelblau passend zur Ãœberschrift */
+ cursor: pointer;
+ }
-/*Registrierenseite*/
-
- #backButtonRegistrieren {
- position: absolute;
- top: 20px;
- left: 20px;
- font-size: 30px;
- color: #03355C; /* Dunkelblau passend zur Ãœberschrift */
- cursor: pointer;
- }
-
- #card-registrieren {
- background-color: #FCF3E4; /* Heller Beige-Hintergrund */
- border-radius: 10px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- padding: 20px;
- width: 701px; /* Breite des Formulars */
- height: 775px;
- text-align: center;
-
- }
-
- h1 {
- font-family: Cy Grotesk Wide;
- font-size: 34px;
- color: #03355C; /* Dunkelblau für die Überschrift */
- margin-bottom: 20px;
- }
-
- .form-control-registrieren {
- width: 525px;
- height: 57px;
- padding-left: 15px;
- margin-bottom: 10px;
- border: 1px solid #03355C; /* dunkelblauer Rahmen */
- border-radius: 30px; /* Runde Ecken für Eingabefelder */
- box-sizing: border-box;
- font-family: "DM Sans", sans-serif;
- font-size: 20px;
- color: #03355C;
- }
-
- .form-text-registrieren {
- text-align: left;
- font-size: 20px;
- margin-top: 5px;
- margin-bottom: 15px;
- color: #03355C; /* Dunkelblauer Text */
- padding-left: 90px; /* Gleiche Einrückung wie das Eingabefeld */
- }
-
-
- #registrierenButton {
- background-color: #FB7300; /* Orange Farbe */
- font-family: "DM Sans", sans-serif, bold;
- font-size: 26px;
- color: white;
- border: none;
- border-radius: 50px;
- padding: 10px 20px;
- cursor: pointer;
- width: 242px;
- height: 55px;
- margin: 30px;
- }
-
- #registrierenButton:hover {
- background-color: #e36c20; /* Etwas dunkleres Orange bei Hover */
- }
-
-/*Meine Reisen*/
-
-/* Sidebar */
+ #card-registrieren {
+ background-color: #FCF3E4; /* Heller Beige-Hintergrund */
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ width: 701px; /* Breite des Formulars */
+ height: 775px;
+ text-align: center;
+
+ }
+
+ h1 {
+ font-family: Cy Grotesk Wide;
+ font-size: 34px;
+ color: #03355C; /* Dunkelblau für die Überschrift */
+ margin-bottom: 20px;
+ }
+
+ .form-control-registrieren {
+ width: 525px;
+ height: 57px;
+ padding-left: 15px;
+ margin-bottom: 10px;
+ border: 1px solid #03355C; /* dunkelblauer Rahmen */
+ border-radius: 30px; /* Runde Ecken für Eingabefelder */
+ box-sizing: border-box;
+ font-family: "DM Sans", sans-serif;
+ font-size: 20px;
+ color: #03355C;
+ }
+
+ .form-text-registrieren {
+ text-align: left;
+ font-size: 20px;
+ margin-top: 5px;
+ margin-bottom: 15px;
+ color: #03355C; /* Dunkelblauer Text */
+ padding-left: 90px; /* Gleiche Einrückung wie das Eingabefeld */
+ }
+
+
+ #registrierenButton {
+ background-color: #FB7300; /* Orange Farbe */
+ font-family: "DM Sans", sans-serif, bold;
+ font-size: 26px;
+ color: white;
+ border: none;
+ border-radius: 50px;
+ padding: 10px 20px;
+ cursor: pointer;
+ width: 242px;
+ height: 55px;
+ margin: 30px;
+ }
+
+ #registrierenButton:hover {
+ background-color: #e36c20; /* Etwas dunkleres Orange bei Hover */
+ }
+
+ /*Meine Reisen*/
+
+ /* Sidebar */
.container-meineReisen {
display: flex;
}
- .sidebar {
- background-color: #f1f4f9;
- width: 322px;
- padding: 20px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
- height: 100vh;
- }
-
- .backButton {
- background: none;
- border: none;
- font-size: 30px;
- color: #03355C;
- cursor: pointer;
- margin-bottom: 20px;
- }
-
- .greeting {
- margin-top: 20px;
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- font-size: 26px;
- margin-bottom: 20px;
- }
-
- .menu ul {
- list-style: none;
- padding: 0;
- width: 100%;
- }
-
- .menu li {
- margin-bottom: 15px;
- cursor: pointer;
- }
-
- .menu a {
- font-family: 'DM Sans', sans-serif;
- text-decoration: none;
- color: #03355C;
- font-size: 20px;
- cursor: pointer;
- }
-
- /* Main Content */
-
- .content {
- flex-grow: 1;
- padding: 20px;
- background-color: #ffffff;
- overflow-y: auto;
- margin-top:100px
- }
-
- h2 {
- font-family: 'Cy Grotesk Wide';
- font-size: 34px;
- color: #03355C;
- margin-bottom: 20px;
- margin-top: 100px;
- }
-
- .trip-card {
- width: 662px;
- height: 163px;
- display: flex;
- align-items: center;
- background-color: #FCF3E4;
- border-radius: 30px;
- padding: 15px;
- margin-bottom: 20px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
-
- .trip-card img {
- width: 246px;
- height: 163px;
- border-radius: 30px;
- margin-right: 15px;
- object-fit: cover;
- }
-
- .trip-info {
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- font-size: 20px;
- flex-grow: 1;
- }
-
- h3 {
- font-family: 'dM Sans', sans-serif;
- font-size: 34px;
- margin: 0;
- color: #03355C;
- }
-
- .details-button, .report-button {
- margin-top: 10px;
- padding: 10px 15px;
- font-family: 'dm sans', sans-serif, bold;
- font-size: 20px;
- border: none;
- border-radius: 50px;
- cursor: pointer;
- }
-
- .details-button {
- background-color: #FB7300;
- color: #fff;
- }
-
- .report-button {
- background-color: #FCF3E4;
- color: #03355C;
- border: 1px solid #FB7300;
- margin-left: 10px;
- }
-
-/*Profil*/
-/*Main Body*/
-.profil-container {
- max-width: 600px;
- margin: 50px auto;
-}
+ .sidebar {
+ background-color: #f1f4f9;
+ width: 322px;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+ height: 100vh;
+ }
-h1 {
- text-align: center;
- font-family: 'Cy Grotesk Wide';
- font-size: 34px;
- color: #03355C;
-}
+ .backButton {
+ background: none;
+ border: none;
+ font-size: 30px;
+ color: #03355C;
+ cursor: pointer;
+ margin-bottom: 20px;
+ }
+
+ .greeting {
+ margin-top: 20px;
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ font-size: 26px;
+ margin-bottom: 20px;
+ }
+
+ .menu ul {
+ list-style: none;
+ padding: 0;
+ width: 100%;
+ }
+
+ .menu li {
+ margin-bottom: 15px;
+ cursor: pointer;
+ }
+
+ .menu a {
+ font-family: 'DM Sans', sans-serif;
+ text-decoration: none;
+ color: #03355C;
+ font-size: 20px;
+ cursor: pointer;
+ }
+
+ /* Main Content */
+
+ .content {
+ flex-grow: 1;
+ padding: 20px;
+ background-color: #ffffff;
+ overflow-y: auto;
+ margin-top:100px
+ }
+
+ h2 {
+ font-family: 'Cy Grotesk Wide';
+ font-size: 34px;
+ color: #03355C;
+ margin-bottom: 20px;
+ margin-top: 100px;
+ }
+
+ .trip-card {
+ width: 662px;
+ height: 163px;
+ display: flex;
+ align-items: center;
+ background-color: #FCF3E4;
+ border-radius: 30px;
+ padding: 15px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .trip-card img {
+ width: 246px;
+ height: 163px;
+ border-radius: 30px;
+ margin-right: 15px;
+ object-fit: cover;
+ }
+
+ .trip-info {
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ font-size: 20px;
+ flex-grow: 1;
+ }
+
+ h3 {
+ font-family: 'dM Sans', sans-serif;
+ font-size: 34px;
+ margin: 0;
+ color: #03355C;
+ }
+
+ .details-button, .report-button {
+ margin-top: 10px;
+ padding: 10px 15px;
+ font-family: 'dm sans', sans-serif, bold;
+ font-size: 20px;
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ }
+
+ .details-button {
+ background-color: #FB7300;
+ color: #fff;
+ }
+
+ .report-button {
+ background-color: #FCF3E4;
+ color: #03355C;
+ border: 1px solid #FB7300;
+ margin-left: 10px;
+ }
+
+ /*Profil*/
+ /*Main Body*/
+ .profil-container {
+ max-width: 600px;
+ margin: 50px auto;
+ }
-.profil-card {
- width: 644px;
- height: auto; /* Automatische Höhe für dynamische Inhalte */
- background-color: #FCF3E4;
- padding: 50px;
- border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+ h1 {
+ text-align: center;
+ font-family: 'Cy Grotesk Wide';
+ font-size: 34px;
+ color: #03355C;
+ }
-.section {
- margin-bottom: 20px;
-}
+ .profil-card {
+ width: 644px;
+ height: auto; /* Automatische Höhe für dynamische Inhalte */
+ background-color: #FCF3E4;
+ padding: 50px;
+ border-radius: 10px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
-h2 {
- margin-bottom: 10px;
- font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- color: #03355C;
- font-size: 26px;
-}
+ .section {
+ margin-bottom: 20px;
+ }
-.row {
- display: flex;
- justify-content: space-between; /* Platz zwischen den Spans */
- align-items: center; /* Zentriere den Text vertikal */
- padding: 5px 0;
-}
+ h2 {
+ margin-bottom: 10px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ color: #03355C;
+ font-size: 26px;
+ }
-.row span {
- display: inline-block; /* Stellt sicher, dass Spans korrekt dargestellt werden */
- white-space: nowrap; /* Verhindert, dass Inhalte umbrechen */
-}
+ .row {
+ display: flex;
+ justify-content: space-between; /* Platz zwischen den Spans */
+ align-items: center; /* Zentriere den Text vertikal */
+ padding: 5px 0;
+ }
-.row span:first-child {
- font-family: 'DM Sans', sans-serif;
- font-size: 20px;
- color: #03355C;
- flex: 1; /* Erlaubt dynamische Breite */
- }
+ .row span {
+ display: inline-block; /* Stellt sicher, dass Spans korrekt dargestellt werden */
+ white-space: nowrap; /* Verhindert, dass Inhalte umbrechen */
+ }
-.row span:last-child {
- font-family: 'DM Sans', sans-serif;
- font-size: 20px;
- color: #03355C;
- text-align: right; /* Richtet den Text am rechten Rand aus */
- flex: 1; /* Erlaubt dynamische Breite */
-}
+ .row span:first-child {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
+ color: #03355C;
+ flex: 1; /* Erlaubt dynamische Breite */
+ }
+
+ .row span:last-child {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
+ color: #03355C;
+ text-align: right; /* Richtet den Text am rechten Rand aus */
+ flex: 1; /* Erlaubt dynamische Breite */
+ }
-.row:last-child {
- border-bottom: none;
-}
+ .row:last-child {
+ border-bottom: none;
+ }
#changes-button {
background-color: #fb7300;
@@ -624,11 +624,11 @@ h2 {
cursor: pointer;
}
-/*AboutUs*/
-.containerAboutUs {
- width: 100%;
- height: 100%;
-}
+ /*AboutUs*/
+ .containerAboutUs {
+ width: 100%;
+ height: 100%;
+ }
/* Allgemein */
body {
margin: 0;
@@ -639,18 +639,18 @@ h2 {
}
h1 {
- margin: 0;
- font-family: "Cy Grotesk Wide";
- font-size: 43px;
- color: #03355C;
- text-align: left;
+ margin: 0;
+ font-family: "Cy Grotesk Wide";
+ font-size: 43px;
+ color: #03355C;
+ text-align: left;
}
- h2 {
- margin: 0;
- font-family: "dM Sans", sans-serif;
- font-size: 26px;
- color: #03355C;
+ h2 {
+ margin: 0;
+ font-family: "dM Sans", sans-serif;
+ font-size: 26px;
+ color: #03355C;
}
/* Header Hero-Bereich */
@@ -706,9 +706,9 @@ h2 {
}
-/*Philosophy Section*/
+ /*Philosophy Section*/
- .philosophy-section {
+ .philosophy-section {
padding: 50px;
display: flex;
justify-content: right;
@@ -716,7 +716,7 @@ h2 {
gap: 30px;
}
-.philosophy-container {
+ .philosophy-container {
max-width: 100%;
display: flex;
gap: 30px;
@@ -735,10 +735,10 @@ h2 {
max-width: 500px;
}
-.philosophy-image {
- width: 473px;
- height: 275px;
- border-radius: 30px;
+ .philosophy-image {
+ width: 473px;
+ height: 275px;
+ border-radius: 30px;
}
@@ -798,101 +798,101 @@ h2 {
}
.hero {
- position: relative;
- text-align: right;
- color: white;
- }
+ position: relative;
+ text-align: right;
+ color: white;
+ }
.hero-image {
- width: 100%;
- height: auto;
- }
+ width: 100%;
+ height: auto;
+ }
.hero-text {
- color: #03355C;
- position: absolute;
- top: 30%;
- left: 80%;
- transform: translate(-50%, -50%);
- white-space: nowrap; /* Verhindert Zeilenumbrüche */
- padding-right: 60px;
- }
+ color: #03355C;
+ position: absolute;
+ top: 30%;
+ left: 80%;
+ transform: translate(-50%, -50%);
+ white-space: nowrap; /* Verhindert Zeilenumbrüche */
+ padding-right: 60px;
+ }
#hero-button {
- background-color: #fb7300;
- color: #ffffff;
- border: none;
- border-radius: 50px;
- margin-left: 10px;
- cursor: pointer;
+ background-color: #fb7300;
+ color: #ffffff;
+ border: none;
+ border-radius: 50px;
+ margin-left: 10px;
+ cursor: pointer;
- }
+ }
#hero-button:hover {
- background-color: #e36c20 /* Dunkleres Orange bei Hover */
- }
+ background-color: #e36c20 /* Dunkleres Orange bei Hover */
+ }
- /* Horizon Changers Section */
+ /* Horizon Changers Section */
-/*Startseite*/
+ /*Startseite*/
.horizon-changers-opening {
- padding: 60px 20px; /* Abstand innen */
- text-align: center; /* Zentriert den Text */
- }
+ padding: 60px 20px; /* Abstand innen */
+ text-align: center; /* Zentriert den Text */
+ }
.horizon-changers-opening-container {
- max-width: 900px; /* Maximale Breite für den Textbereich */
- margin: 0 auto; /* Zentriert den Container */
- position: absolute;
- left: 50%;
- transform: translate(-50%, -50%);
+ max-width: 900px; /* Maximale Breite für den Textbereich */
+ margin: 0 auto; /* Zentriert den Container */
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
- }
+ }
.horizon-changers-opening-title {
- font-family: Cy Grotesk Wide;
- font-size: 43px; /* Schriftgröße */
- color: #03355c; /* Dunkelblau */
- margin-bottom: 20px; /* Abstand nach unten */
- margin-top: 60px;
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
+ font-family: Cy Grotesk Wide;
+ font-size: 43px; /* Schriftgröße */
+ color: #03355c; /* Dunkelblau */
+ margin-bottom: 20px; /* Abstand nach unten */
+ margin-top: 60px;
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
- }
+ }
.horizon-changers-description {
- font-family: "DM Sans", sans-serif; /* Standardschriftart */
- font-size: 1.2rem; /* Schriftgröße für den Absatz */
- color: #03355c; /* Dunkelblau */
- margin-bottom: 40px; /* Abstand nach unten */
- line-height: 1.6; /* Zeilenhöhe für Lesbarkeit */
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
- text-align: center;
- white-space: nowrap; /* Verhindert Zeilenumbrüche */
- }
-
- .horizon-changers-button {
- background-color: #fb7300;
- color: #ffffff;
- font-family: "DM Sans", sans-serif; /* Button-Schriftart */
- font-size: 26px; /* Schriftgröße */
- padding: 12px 25px; /* Innenabstand */
- border: none; /* Keine Umrandung */
- border-radius: 30px; /* Runde Kanten */
- cursor: pointer; /* Zeigt Klickbarkeit an */
- align-items: center;
- }
-
- .horizon-changers-button:hover {
- background-color: #e36c20
- }
-
- /* Dunkleres Orange bei Hover */
-
-/*Admin-Nutzerliste*/
+ font-family: "DM Sans", sans-serif; /* Standardschriftart */
+ font-size: 1.2rem; /* Schriftgröße für den Absatz */
+ color: #03355c; /* Dunkelblau */
+ margin-bottom: 40px; /* Abstand nach unten */
+ line-height: 1.6; /* Zeilenhöhe für Lesbarkeit */
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ text-align: center;
+ white-space: nowrap; /* Verhindert Zeilenumbrüche */
+ }
+
+ .horizon-changers-button {
+ background-color: #fb7300;
+ color: #ffffff;
+ font-family: "DM Sans", sans-serif; /* Button-Schriftart */
+ font-size: 26px; /* Schriftgröße */
+ padding: 12px 25px; /* Innenabstand */
+ border: none; /* Keine Umrandung */
+ border-radius: 30px; /* Runde Kanten */
+ cursor: pointer; /* Zeigt Klickbarkeit an */
+ align-items: center;
+ }
+
+ .horizon-changers-button:hover {
+ background-color: #e36c20
+ }
+
+ /* Dunkleres Orange bei Hover */
+
+ /*Admin-Nutzerliste*/
.sidebarAdmin {
@@ -995,19 +995,19 @@ h2 {
opacity: 0.8;
}
-/*Single Page Application */
- .page {
- display: none;
- }
+ /*Single Page Application */
+ .page {
+ display: none;
+ }
- .active {
- display: flex;
- }
+ .active {
+ display: flex;
+ }
#startseite {
flex-direction: column;
}
- }
+}
.form-control-registrieren-modal {
width: 300px;
@@ -1307,19 +1307,25 @@ a:hover {
margin-top: 40px;
}
/*Reisebericht schreiben*/
+.reiseberichtFormular {
+ margin-left: 200px;
+}
h1 {
+ font-family: "Cy Grotesk Wide";
font-size: 24px;
color: #03355C;
margin-bottom: 20px;
+
}
-form {
+form.reiseberichtFormular {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
+
}
label {
@@ -1353,6 +1359,7 @@ select {
textarea {
height: 150px;
background-color: #FCF3E4;
+ border: 1px solid #03355C;
}
.rating {
@@ -1379,18 +1386,171 @@ textarea {
}
.reiseberichtAbsenden:hover {
- background-color: #e36c20;
+ background-color: #FB7300;
+}
+
+
+/* Reisen */
+.reisen {
+ width: 50%;
+ height: 100%;
+ justify-content: center;
+ margin-left:400px;
+}
+
+
+
+header.reisen {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ background-color: #fff;
+
+}
+.back-button {
+ background: none;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ margin-right: 10px;
+}
+
+.reisen h1{
+ font-size: 43px;
+ color: #03355C;
+ font-family: "Cy Grotesk Wide";
+}
+
+.filter-section {
+ background-color: #FCF3E4;
+ padding: 20px;
+ margin: 20px;
+ border-radius: 8px;
+}
+
+.filter-container {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+}
+
+select, input[type="range"] {
+ padding: 10px;
+ font-size: 20px;
+ font-family: "DM Sans", sans-serif;
+ border: 1px solid #03355C;
+ border-radius: 24px;
+ color: #03355C;
+}
+
+.price-filter {
+ display: flex;
+ flex-direction: column;
+}
+
+.price-values {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 5px;
+ font-size: 14px;
+ color: #03355C;
+}
+
+.filter-button {
+ padding: 10px 20px;
+ background-color: #BDD4CE;
+ color: #03355C;
+ border: none;
+ border-radius: 24px;
+ cursor: pointer;
+}
+
+.projects-section {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ margin: 20px;
+}
+
+.project-card {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-card img {
+ width: 100%;
+ height: 150px;
+ object-fit: cover;
+}
+
+.project-card h3 {
+ font-family: "DM Sans", sans-serif, bold;
+ font-size: 26px;
+ color: #03355C;
+ margin: 10px;
+}
+
+.project-card p {
+ margin: 0 10px 10px;
+ color: #03355C;
+ font-family: "DM Sans", sans-serif;
+ font-size: 20px;
}
+.project-info {
+ padding-left: 1px;
+ display: flex;
+ gap: 10px;
+ margin: 10px;
+ font-size: 14px;
+ color: #03355C;
+ list-style: none;
+}
+
+/* Kalender (Produktkatalog, Sticky) */
+.fa-calendar-days {
+ color: #03355C;
+}
+
+/* Weltkugel (Produktkatalog) */
+.fa-earth-americas {
+ color: #03355C;
+}
+/* Stern ausgefüllt */
+.fa-star {
+ color: #03355C;
+}
+
+
+.price {
+ font-size: 18px;
+ font-weight: bold;
+ color: #03355C;
+ margin: 10px;
+}
+
+.info-button {
+ margin: 10px;
+ padding: 10px;
+ background-color: #fb7300;
+ color: white;
+ border: none;
+ border-radius: 24px;
+ cursor: pointer;
+}
-/* Erfahrungsberichte Startseite*/
+/*Erfahrungsberichte Startseite*/
-.erfahrungsberichte {
+.erfahrungsberichte{
margin: 0;
padding: 0;
box-sizing: border-box;
-}
+}
.header-berichte-title {
font-family: "Cy Grotesk Wide";
@@ -1409,24 +1569,35 @@ textarea {
}
.cards-container {
+ font-family: "DM Sans", sans-serif;
+ color: #03355C;
+ padding: 20px;
+ text-align: center;
display: flex;
- justify-content: center;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
gap: 20px;
flex-wrap: wrap;
- margin-bottom: 40px;
- box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
+ overflow-x: hidden;
+
}
+
+.cards-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px;
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
+}
.card {
background: white;
- border-radius: 40px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-radius: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px; /* Feste Breite */
display: flex;
flex-direction: column;
justify-content: space-between;
- text-align: center;
}
.card img {
@@ -1441,26 +1612,25 @@ textarea {
}
.card-content h3 {
- font-family: "DM Sans", sans-serif;
font-size: 1.5rem;
margin-bottom: 10px;
- color: #03355C;
+ color: #033355;
}
.card-content p {
- font-family: "DM Sans", sans-serif;
font-size: 0.9rem;
- color: #03355C;
+ color: #555;
margin-bottom: 20px;
}
.stars {
color: #ff9900;
- margin-bottom: 10px;
+ margin-bottom: 20px;
}
.card-button {
- background-color: #bdd4ce;
+ font-family: "DM Sans", sans-serif;
+ background-color: #bde4cc;
color: #ffffff;
padding: 10px 15px;
border: none;
@@ -1477,22 +1647,3 @@ textarea {
}
-.reisebericht-card {
- width: 662px;
- height: auto;
- display: flex;
- flex-direction: column;
- align-items: normal;
- background-color: #FCF3E4;
- border-radius: 30px;
- padding: 15px;
- margin-bottom: 20px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.reisebericht-info {
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- font-size: 20px;
- flex-grow: 1;
-}
\ No newline at end of file
--
GitLab