PBA3H22AJO/ProbelaufZoo
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 2 Releases Wiki Activity

Compare commits

base: PBA3H22AJO:40c80456dd211176b243c225a59ddc5f1786de91
Branches Tags
PBA3H22AJO:main
...
compare: PBA3H22AJO:main
Branches Tags
PBA3H22AJO:main

16 Commits
40c80456dd ... main

Author SHA1 Message Date
JoulianALS
032d40ef47 Tutti Frutti 2024-04-18 16:54:15 +02:00
JoulianALS
3fceb2490a Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:48:00 +02:00
JoulianALS
9d862eea57 HTML CSS sauber 2024-04-18 16:47:57 +02:00
SergejJahne
f41c7b1589 Javascript kommentare 2024-04-18 16:47:42 +02:00
Juwan Jouma
b2b7cfaef7 Update position and alignment of elements in the "patenshop" section 2024-04-18 16:44:11 +02:00
SergejJahne
a76bf5fb2b U groß 2024-04-18 16:39:12 +02:00
JoulianALS
1e61ee7223 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:36:57 +02:00
JoulianALS
3b4a2a1218 Lorem Ipsum bearbeitet 2024-04-18 16:36:49 +02:00
SergejJahne
0fa9a37b3a Patenshop fertig 2024-04-18 16:36:22 +02:00
SergejJahne
4dda6c16f0 patenshop mit fluid 2024-04-18 16:29:34 +02:00
SergejJahne
b28f043fc3 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:27:32 +02:00
SergejJahne
901be6fde6 Patenshop noch kein Preis 2024-04-18 16:27:29 +02:00
Juwan Jouma
d19fd1e1c6 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:25:00 +02:00
Juwan Jouma
8462f72479 Refactor CSS styles and update HTML structure for the "Über Uns" section 2024-04-18 16:23:04 +02:00
SergejJahne
a35efe4c16 Patenshop weiterarbeiten 2024-04-18 16:20:03 +02:00
Juwan Jouma
a90941491a Fix link in navbar to navigate to the Patenshop section 2024-04-18 15:57:05 +02:00
4 changed files with 108 additions and 100 deletions
Expand all files Collapse all files

52
Javascript/app.js
View File

@@ -8,25 +8,37 @@ const swiper = new Swiper('.swiper', {
}); });
// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben // Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
document.addEventListener("DOMContentLoaded", function() { var navLinks = document.querySelectorAll('.navbar .nav-link');
var navLinks = document.querySelectorAll('.navbar .nav-link'); var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]'); if (initialSelected) {
if (initialSelected) { initialSelected.classList.add('selected');
initialSelected.classList.add('selected'); }
}
navLinks.forEach(function(link) { navLinks.forEach(function(link) {
link.addEventListener('click', function() { link.addEventListener('click', function() {
// Alle anderen Links zurücksetzen // Alle anderen Links zurücksetzen
navLinks.forEach(l => l.classList.remove('selected')); navLinks.forEach(l => l.classList.remove('selected'));
// Die 'selected' Klasse zum angeklickten Link hinzufügen // Die 'selected' Klasse zum angeklickten Link hinzufügen
link.classList.add('selected'); link.classList.add('selected');
}); });
});
});
// Für Patenshop
document.getElementById('donationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Verhindert die tatsächliche Formularübermittlung
alert('Alles in Ordnung. Vielen Dank für Ihre Spende!');
this.reset(); // Setzt das Formular zurück
}); });
// Für Preis
updatePrice();
function updatePrice() {
const fresserchenSelect = document.getElementById('Fresserchen');
const mengeSelect = document.getElementById('Menge');
const priceInput = document.getElementById('Preis');
const selectedFood = fresserchenSelect.options[fresserchenSelect.selectedIndex];
const pricePerUnit = selectedFood.getAttribute('data-price');
const quantity = mengeSelect.value;
const total = pricePerUnit * quantity;
priceInput.value = total.toFixed(2);
}
function showDonationAmount() {
const priceInput = document.getElementById('Preis').value;
alert('Danke für deine Spende von €' + priceInput + '!');
window.location.reload();
}

BIN
Src/zoowebseite-transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

10
Styles/style.css
View File

@@ -4,7 +4,7 @@
height: 70px; height: 70px;
} }
.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern */ .navbar .navbar-nav .nav-link {
color: #FFFFFF; color: #FFFFFF;
font-size: 13pt; font-size: 13pt;
} }
@@ -17,7 +17,7 @@
padding-left: 10px; padding-left: 10px;
} }
.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */ .nav-link.selected::after {
visibility: visible; visibility: visible;
transform: scaleX(1); transform: scaleX(1);
} }
@@ -28,7 +28,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
.nav-link { /* Animation für das die Links */ .nav-link {
position: relative; position: relative;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
@@ -67,7 +67,7 @@ section {
} }
#patenshop { #patenshop {
background: linear-gradient(90deg, rgb(0, 159, 155), rgb(157, 254, 175)); background: linear-gradient(0deg, rgb(255, 255, 255), rgb(157, 254, 175));
} }
@@ -80,7 +80,6 @@ section {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
/* Animation */
scale: .8; scale: .8;
opacity: 0; opacity: 0;
animation: fade-in linear forwards; animation: fade-in linear forwards;
@@ -95,6 +94,7 @@ section {
footer { footer {
height: 160px; height: 160px;
background-color: white;
} }
.swiper { .swiper {

146
index.html
View File

@@ -21,9 +21,9 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto"> <div class="navbar-nav ms-auto">
<a class="nav-link" aria-current="page" href="#ueberUns">Über uns</a> <a class="nav-link" aria-current="page" href="#ueberUns">Über Uns</a>
<a class="nav-link" href="#openingHours">Öffnungszeiten</a> <a class="nav-link" href="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#">Patenshop</a> <a class="nav-link" href="#patenshop">Patenshop</a>
</div> </div>
</div> </div>
</div> </div>
@@ -32,25 +32,25 @@
<!-- Über Uns Section --> <!-- Über Uns Section -->
<section class="position-relative" id="ueberUns"> <section class="position-relative" id="ueberUns">
<div class="position-absolute top-50 start-50 translate-middle w-50 text-white"> <div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
<!-- Slider on the left --> <div class="row align-items-center">
<div class="col-6"> <div class="col">
<div class="swiper"> <div class="swiper rounded-4">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- Slides --> <div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div> <div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div> <div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div> <div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div>
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div> <div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div> </div>
<div class="swiper-pagination"></div>
</div> </div>
<div class="swiper-pagination"></div> </div>
<div class="col">
<h2>Über Uns</h2>
<p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
Finanziert von the only and only Herrn Shawn Smith.</p>
</div> </div>
</div> </div>
<!-- Text on the right -->
<div class="col-6">
<h2>Text on the Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, justo eget sagittis malesuada, leo velit lobortis orci, ac sodales lectus ipsum in libero. Phasellus hendrerit justo et risus blandit, nec ultricies ligula facilisis. Pellentesque luctus, justo id vehicula consectetur, metus tortor auctor felis, eget eleifend lorem neque eget lectus. Cras semper, velit non gravida pellentesque, elit lectus rhoncus eros, nec malesuada est nulla eu metus.</p>
</div>
</div> </div>
</section> </section>
@@ -85,66 +85,62 @@
</section> </section>
<!-- Patenshop Section --> <!-- Patenshop Section -->
<section> <section id="patenshop" class="container-fluid position-relative">
<div class="container mt-5"> <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
<h2>Spendenformular</h2> <div class="col-md-8">
<form id="donationForm"> <form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
<div class="mb-3"> <div class="col-md-6">
<label for="firstName" class="form-label">Name</label> <label for="inputFirstName" class="form-label">Name</label>
<input type="text" class="form-control" id="firstName" required> <input type="text" class="form-control" id="inputFirstName">
</div> </div>
<div class="mb-3"> <div class="col-md-6">
<label for="lastName" class="form-label">Nachname</label> <label for="inputLastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName" required> <input type="text" class="form-control" id="inputLastName">
</div> </div>
<div class="mb-3"> <div class="col-md-12">
<label for="email" class="form-label">Email</label> <label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required> <input type="email" class="form-control" id="inputEmail4">
</div> </div>
<div class="mb-3"> <div class="col-md-12">
<label for="bankDetails" class="form-label">Bankverbindung</label> <label for="IBAN" class="form-label">IBAN</label>
<input type="text" class="form-control" id="bankDetails" required> <input type="text" class="form-control" id="inputText">
</div> </div>
<div class="mb-3"> <div class="col-md-3">
<label for="comment" class="form-label">Kommentarfeld</label> <label for="Fresserchen" class="form-label">Fresserchen</label>
<textarea class="form-control" id="comment" rows="3"></textarea> <select id="Fresserchen" class="form-select" onchange="updatePrice()">
</div> <option value="Steak" data-price="20">Steak</option>
<div class="mb-3"> <option value="Fisch" data-price="15">Fisch</option>
<label for="itemSelect" class="form-label">Verpflegungsartikel</label> <option value="Beeren" data-price="10">Beeren</option>
<select class="form-select" id="itemSelect" required> <option value="Nüsse" data-price="8">Nüsse</option>
<option value="">Bitte wählen</option> <option value="Gras" data-price="5">Gras</option>
<option value="Heu">Heu</option> </select>
<option value="Körner">Körner</option> </div>
<option value="Nüsse">Nüsse</option> <div class="col-md-3">
<option value="Obst">Obst</option> <label for="Menge" class="form-label">Menge</label>
<option value="Gemüse">Gemüse</option> <select id="Menge" class="form-select" onchange="updatePrice()">
</select> <option>1</option>
</div> <option>2</option>
<div class="mb-3"> <option>3</option>
<label for="quantitySelect" class="form-label">Mengeneinheit</label> <option>4</option>
<select class="form-select" id="quantitySelect" required> <option>5</option>
<option value="">Bitte wählen</option> </select>
<option value="1">1</option> </div>
<option value="2">2</option> <div class="col-md-6">
<option value="3">3</option> <label for="Preis" class="form-label">Preis (€)</label>
<option value="4">4</option> <input type="text" class="form-control" id="Preis" readonly>
<option value="5">5</option> </div>
</select> <div class="col-12 text-center mt-4">
</div> <button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
<button type="submit" class="btn btn-primary">Spenden</button> </div>
</form> </form>
</div>
</div> </div>
</section> </section>
<!-- Footer --> <!-- Footer -->
<footer class="container-fluid d-flex bg-dark"> <footer class="container-fluid position-relative">
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" width="200" class="align-self-center"> <div class="position-absolute top-50 start-50 translate-middle">
<div> <img src="Src/zoowebseite-transparent.png" width="150">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div> </div>
</footer> </footer>
@@ -152,6 +148,6 @@
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="Javascript/app.js"></script> <script src="Javascript/app.js"></script>
</body> </body>
</html> </html>