Tutti Frutti

Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo
HTML CSS sauber
2024-04-18 16:54:15 +02:00 · 2024-04-18 16:48:00 +02:00 · 2024-04-18 16:47:57 +02:00 · 2024-04-18 16:47:42 +02:00 · 2024-04-18 16:44:11 +02:00 · 2024-04-18 16:39:12 +02:00
11 changed files with 283 additions and 29 deletions
--- a/Javascript/app.js
+++ b/Javascript/app.js
@@ -0,0 +1,44 @@
+const swiper = new Swiper('.swiper', {
+    direction: 'vertical',
+    loop: true,
+
+    pagination: {
+      el: '.swiper-pagination',
+    },
+});
+
+// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
+var navLinks = document.querySelectorAll('.navbar .nav-link');
+var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
+if (initialSelected) {
+    initialSelected.classList.add('selected');
+}
+
+navLinks.forEach(function(link) {
+    link.addEventListener('click', function() {
+        // Alle anderen Links zurücksetzen
+        navLinks.forEach(l => l.classList.remove('selected'));
+        // Die 'selected' Klasse zum angeklickten Link hinzufügen
+        link.classList.add('selected');
+    });
+});
+
+// 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();
+}
--- a/Src/elefant.jpg
+++ b/Src/elefant.jpg
--- a/Src/giraffe.jpg
+++ b/Src/giraffe.jpg
--- a/Src/gorilla.jpg
+++ b/Src/gorilla.jpg
--- a/Src/loewe.jpg
+++ b/Src/loewe.jpg
--- a/Src/zebra.jpg
+++ b/Src/zebra.jpg
--- a/Src/zoowebseite-high-resolution-logo-transparent.png
+++ b/Src/zoowebseite-high-resolution-logo-transparent.png
--- a/Src/zoowebseite-high-resolution-logo.png
+++ b/Src/zoowebseite-high-resolution-logo.png
--- a/Src/zoowebseite-transparent.png
+++ b/Src/zoowebseite-transparent.png
--- a/Styles/style.css
+++ b/Styles/style.css
@@ -0,0 +1,111 @@
+/* Navigation*/
+.navbar {
+    background-color: #212121   !important;
+    height: 70px;
+}
+
+.navbar .navbar-nav .nav-link {
+    color: #FFFFFF; 
+    font-size:  13pt;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link { 
+    padding-right: 20px !important;
+}
+
+.navbar-brand img {
+    padding-left: 10px; 
+}
+
+.nav-link.selected::after {
+    visibility: visible;
+    transform: scaleX(1);
+}
+
+.nav-link.active, .nav-link:hover, .nav-link:focus {
+    color: #4CAF50; 
+    transition: color 0.5s ease; 
+    color: #FFFFFF; 
+}
+
+.nav-link {
+    position: relative;
+    transition: all 0.3s ease-out;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #4CAF50;
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: all 0.3s ease-in-out 0s;
+}
+
+.nav-link:hover::after, .nav-link:focus::after {
+    visibility: visible;
+    transform: scaleX(1);
+}
+/* Navigationsende*/
+
+
+section {
+    width: 100%;
+    height: 100vh;
+}
+
+#ueberUns {
+    background: linear-gradient(0deg, rgb(0, 159, 155), rgb(33,33,33));
+}
+
+#openingHours {
+    background: linear-gradient(180deg, rgb(0, 159, 155), rgb(157, 254, 175));
+}
+
+#patenshop {
+    background: linear-gradient(0deg, rgb(255, 255, 255), rgb(157, 254, 175));
+
+}
+
+
+.glass {
+    padding: 30px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+
+    scale: .8;
+    opacity: 0;
+    animation: fade-in linear forwards;
+    animation-timeline: view();
+    animation-range: entry;
+}
+
+.table>:not(caption)>*>* {
+    background-color: transparent !important;
+    border-bottom-width: 0 !important;
+}
+
+footer {
+    height: 160px;
+    background-color: white;
+}
+
+.swiper {
+    width: 600px;
+    height: 300px;
+}
+
+.swiper-pagination-bullet {
+    background-color: rgba(0, 0, 0, 1) !important
+}
+
+@keyframes fade-in {
+    to { scale: 1; opacity: 1;}
+}
--- a/index.html
+++ b/index.html
@@ -1,53 +1,152 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Styles/style.css">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
        <title>ZooWebsite</title>
    </head>
    <body>
-        <!-- Navbar -->
-        <nav>
-            <a><img>logo</a>

-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-        </nav>
+        <!-- Navbar -->    
+        <nav class="navbar sticky-top navbar-expand-lg">
+          <div class="container-fluid">
+              <a class="navbar-brand" href="#">
+                  <img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
+              </a>
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                  <span class="navbar-toggler-icon"></span>
+              </button>
+              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                  <div class="navbar-nav ms-auto">
+                      <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="#patenshop">Patenshop</a>  
+                  </div>
+              </div>
+          </div>
+      </nav>

        <!-- Über Uns Section -->
-        <section>
-            <h1>Über Uns</h1>
-            <p>Über Uns</p>
+        <section class="position-relative" id="ueberUns">
+            <div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
+                <div class="row align-items-center">
+                    <div class="col">
+                        <div class="swiper rounded-4">
+                            <div class="swiper-wrapper">
+                                <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/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/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
+                            </div>
+                            <div class="swiper-pagination"></div>
+                        </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>
        </section>

        <!-- Öffnungszeiten Section -->
-        <section>
-            <h1>Öffnungszeiten</h1>
-            <p>Öffnungszeiten</p>
+        <section class="position-relative" id="openingHours">
+            <div class="position-absolute top-50 start-50 translate-middle w-50 glass text-white text-center">
+                <h1>Öffnungszeiten</h1>
+                <br>
+                <table class="table table-dark">
+                  <thead>
+                    <tr>
+                      <th>Tag</th>
+                      <th>Uhrzeit</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Montag - Freitag</td>
+                      <td>9:00 - 18:00 Uhr</td>
+                    </tr>
+                    <tr>
+                      <td>Samstag</td>
+                      <td>10:00 - 15:00 Uhr</td>
+                    </tr>
+                    <tr>
+                      <td>Sonntag</td>
+                      <td>Geschlossen</td>
+                    </tr>
+                  </tbody>
+                </table>
+            </div>
        </section>

        <!-- Patenshop Section -->
-        <section>
-            <h1>Patenshop</h1>
-            <p>Patenshop</p>
+        <section id="patenshop" class="container-fluid position-relative">
+            <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
+                <div class="col-md-8">
+                    <form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
+                        <div class="col-md-6">
+                            <label for="inputFirstName" class="form-label">Name</label>
+                            <input type="text" class="form-control" id="inputFirstName">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="inputLastName" class="form-label">Nachname</label>
+                            <input type="text" class="form-control" id="inputLastName">
+                        </div>
+                        <div class="col-md-12">
+                            <label for="inputEmail4" class="form-label">Email</label>
+                            <input type="email" class="form-control" id="inputEmail4">
+                        </div>
+                        <div class="col-md-12">
+                            <label for="IBAN" class="form-label">IBAN</label>
+                            <input type="text" class="form-control" id="inputText">
+                        </div>
+                        <div class="col-md-3">
+                            <label for="Fresserchen" class="form-label">Fresserchen</label>
+                            <select id="Fresserchen" class="form-select" onchange="updatePrice()">
+                                <option value="Steak" data-price="20">Steak</option>
+                                <option value="Fisch" data-price="15">Fisch</option>
+                                <option value="Beeren" data-price="10">Beeren</option>
+                                <option value="Nüsse" data-price="8">Nüsse</option>
+                                <option value="Gras" data-price="5">Gras</option>
+                            </select>
+                        </div>
+                        <div class="col-md-3">
+                            <label for="Menge" class="form-label">Menge</label>
+                            <select id="Menge" class="form-select" onchange="updatePrice()">
+                                <option>1</option>
+                                <option>2</option>
+                                <option>3</option>
+                                <option>4</option>
+                                <option>5</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="Preis" class="form-label">Preis (€)</label>
+                            <input type="text" class="form-control" id="Preis" readonly>
+                        </div>
+                        <div class="col-12 text-center mt-4">
+                            <button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
        </section>

        <!-- Footer -->
-        <footer>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
+        <footer class="container-fluid position-relative">
+            <div class="position-absolute top-50 start-50 translate-middle">
+                <img src="Src/zoowebseite-transparent.png" width="150">
+            </div>
        </footer>

        <!-- JavaScript -->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></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="Javascript/app.js"></script>
        
    </body>
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
SergejJahne	40c80456dd	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-18 15:51:42 +02:00
SergejJahne	8e8d68c61c	Patentshop anfang	2024-04-18 15:51:37 +02:00
Juwan Jouma	f2f41f6ecb	Refactor CSS styles and update HTML structure for the "Über Uns" section	2024-04-18 15:49:17 +02:00
SergejJahne	12ab5c9c29	Navbar fertiggestellt 2	2024-04-18 09:44:29 +02:00
SergejJahne	668297a1a4	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-17 23:22:10 +02:00
SergejJahne	0e68257a64	Navigation fertiggestellt	2024-04-17 23:14:22 +02:00
Juwan Jouma	3153b437ea	Refactor index.html and enhance style.css with glassmorphism effect for opening hours section	2024-04-17 22:17:36 +02:00
JoulianALS	e17aab4e00	Logo Neu	2024-04-17 10:53:59 +02:00
JoulianALS	04b00f38f8	Mein Teil komplett (Über uns)	2024-04-17 10:06:18 +02:00
JoulianALS	239204677c	Fertiger Commit/Merge	2024-04-17 09:56:58 +02:00
JoulianALS	a2fa71799e	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-17 09:54:37 +02:00
JoulianALS	bd9dfaa3f5	Bitte Funktionieren	2024-04-17 09:54:22 +02:00
JoulianALS	08bfdea57a	Revert "Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo " This reverts commit `7d7e130af3`, reversing changes made to `3639416d57`.	2024-04-17 09:47:58 +02:00
JoulianALS	b6709c537a	Revert "Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo " This reverts commit `7d7e130af3`, reversing changes made to `0d2a9cfb41`.	2024-04-17 09:43:51 +02:00
JoulianALS	7d7e130af3	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-17 09:36:17 +02:00
JoulianALS	0d2a9cfb41	Über Uns	2024-04-17 09:33:26 +02:00
Juwan Jouma	3639416d57	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-17 09:22:39 +02:00
Juwan Jouma	0edc084b36	Refactor index.html and update Öffnungszeiten section and footer	2024-04-17 09:22:19 +02:00
SergejJahne	071343fa20	Vorrübergehende Version von der Navbar	2024-04-17 09:19:51 +02:00
Juwan Jouma	086c1cd54e	Update Bootstrap to 5.3.3	2024-04-17 08:35:35 +02:00
Juwan Jouma	0a7b1664be	Add viewport height section styling in style.css	2024-04-17 08:32:48 +02:00
JoulianALS	1bfa4322d0	Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo	2024-04-17 08:29:10 +02:00
JoulianALS	999582ce20	Src Ordner mit Logo	2024-04-17 08:29:06 +02:00