From 633f8eb1e2cd670aa575de590519f2a4b390aed5 Mon Sep 17 00:00:00 2001 From: Besmir Skenderi / PBBFS23A Date: Thu, 10 Jul 2025 11:40:20 +0200 Subject: [PATCH] =?UTF-8?q?=C3=84nderung=20der=20Startseite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CSS/Element/card.css | 127 ++++++++++++------------- CSS/Element/filter_box.css | 33 +++++++ CSS/style.css | 1 + Views/Welcome/showWelcome.phtml | 164 ++++++++++++++++++++++---------- 4 files changed, 213 insertions(+), 112 deletions(-) create mode 100644 CSS/Element/filter_box.css diff --git a/CSS/Element/card.css b/CSS/Element/card.css index 3c42570..2a41193 100644 --- a/CSS/Element/card.css +++ b/CSS/Element/card.css @@ -1,104 +1,103 @@ -/* === Grundlayout === */ + body { - margin: 0; - font-family: var(--font-family-main); - background-color: var(--brand-background); - color: var(--brand-white); + margin: 0; + font-family: var(--font-family-main); + background-color: var(--brand-background); + color: var(--brand-white); } -/* === Header-Bereich === */ .welcome-header { - text-align: center; - margin: 60px 20px 40px 20px; + text-align: center; + margin: 60px 20px 40px 20px; } .welcome-heading { - font-size: 50px; - font-weight: 500; - color: var(--brand-primary); - margin-bottom: 20px; + font-size: 50px; + font-weight: 500; + color: var(--brand-primary); + margin-bottom: 20px; } .welcome-subheading { - font-size: 28px; - font-weight: bold; - color: white; - text-align: left; - max-width: 1000px; - margin: 0 auto; - padding-left: 230px; + font-size: 28px; + font-weight: bold; + color: white; + text-align: left; + max-width: 1000px; + margin: 0 auto; + padding-left: 230px; + margin-bottom: 30px; } -/* === Kurs-Grid === */ -.courses-view { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 30px; - justify-content: center; - padding: 30px 0 30px 0; +.course-grid { + display: flex; + flex-wrap: wrap; + gap: 30px; + margin: 0 auto; } -/* === Kurs-Karte === */ .course-card { - background: var(--brand-white); - border-radius: 12px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - min-height: 300px; - display: flex; - flex-direction: column; - width: 100%; - max-width: 600px; + background: var(--brand-white); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + min-height: 300px; + display: flex; + flex-direction: column; } -/* Optional: Kurs-Bildbereich */ .course-image { - background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */ - height: 180px; - width: 100%; + background-color: #ddd; + height: 180px; + width: 100%; } -/* === Kurs-Inhalt === */ .course-content { - background-color: var(--brand-primary); /* Orange */ - color: var(--brand-white); - padding: 20px; - font-size: 16px; - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 10px; + background-color: var(--brand-primary); + color: var(--brand-white); + padding: 20px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 10px; } .course-left, .course-right { - display: flex; - flex-direction: column; - font-size: 14px; - line-height: 1.4; + display: flex; + flex-direction: column; + font-size: 14px; + line-height: 1.4; } .course-left div:first-child, .course-right div:first-child { - font-weight: bold; - font-size: 16px; + font-weight: bold; + font-size: 16px; } .course-right { - text-align: right; + text-align: right; } @media screen and (max-width: 1024px) { + .course-card { + flex: 0 0 calc(50% - 20px); + } } @media screen and (max-width: 640px) { - .welcome-heading { - font-size: 36px; - } + .course-card { + flex: 0 0 100%; + } - .welcome-subheading { - font-size: 20px; - text-align: center; - } + .welcome-heading { + font-size: 36px; + } + + .welcome-subheading { + font-size: 20px; + text-align: center; + } } diff --git a/CSS/Element/filter_box.css b/CSS/Element/filter_box.css new file mode 100644 index 0000000..007cfc0 --- /dev/null +++ b/CSS/Element/filter_box.css @@ -0,0 +1,33 @@ +.filter-box { + background: #EB8202; + color: #fff; + padding: 1em; + max-width: 300px; + border-radius: 8px; + font-family: sans-serif; + margin-bottom: 1em; +} + +.filter-box label { + display: block; + margin-top: 0.5em; +} + +.filter-box select, +.filter-box input[type="text"], +.filter-box input[type="range"] { + width: 100%; + margin-top: 0.25em; +} + +.filter-box button { + margin-top: 1em; + width: 100%; + background: white; + color: #000; + border: none; + padding: 0.5em; + font-weight: bold; + cursor: pointer; + border-radius: 4px; +} diff --git a/CSS/style.css b/CSS/style.css index 367bdb9..f630618 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -6,6 +6,7 @@ @import url(Element/form.css); @import url(Element/button.css); @import url(Element/card.css); +@import url(Element/filter_box.css); *, *:before, diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml index dd820db..ca7d4dd 100644 --- a/Views/Welcome/showWelcome.phtml +++ b/Views/Welcome/showWelcome.phtml @@ -1,60 +1,128 @@
-

KURSE & ERLEBNISSE JEDER ART

-

Alle Kurse in deiner Nähe – auf einen Blick

-
- 5, - 'titel' => 'Marketing Pro', - 'adresse' => 'Bulu ulu Straße 17', - 'preis' => '59,99€', - 'ort' => '33333 Frankfurt', - 'leiter' => 'Max Mustermann' - ], - [ - 'bewertung' => 4, - 'titel' => 'Design Basics', - 'adresse' => 'Musterstraße 10', - 'preis' => '39,99€', - 'ort' => '10115 Berlin', - 'leiter' => 'Lisa Beispiel' - ], - [ - 'bewertung' => 5, - 'titel' => 'Excel Masterclass', - 'adresse' => 'Tabellenweg 5', - 'preis' => '49,99€', - 'ort' => '20457 Hamburg', - 'leiter' => 'Thomas Tabelle' - ] - ]; +

KURSE & ERLEBNISSE JEDER ART

+

Alle Kurse in deiner Nähe – auf einen Blick

- foreach ($kurse as $kurs): ?> -
-
-
-
-
★
-
-
Kursleiter:
-
-
-
-
-
-
+
+
+
+
+ + + + + + +
- -
+ +
+ +
+ 5, + 'titel' => 'Marketing Pro', + 'adresse' => 'Bulu ulu Straße 17', + 'preis' => '59,99€', + 'ort' => '33333 Frankfurt', + 'leiter' => 'Max Mustermann' + ], + [ + 'bewertung' => 4, + 'titel' => 'Design Basics', + 'adresse' => 'Musterstraße 10', + 'preis' => '39,99€', + 'ort' => '10115 Berlin', + 'leiter' => 'Lisa Beispiel' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + [ + 'bewertung' => 5, + 'titel' => 'Excel Masterclass', + 'adresse' => 'Tabellenweg 5', + 'preis' => '49,99€', + 'ort' => '20457 Hamburg', + 'leiter' => 'Thomas Tabelle' + ], + ]; + + // Filter anwenden + $filteredKurse = array_filter($kurse, function($kurs) use ($rating, $location) { + if ($rating && $kurs['bewertung'] < $rating) return false; + if ($location && stripos($kurs['ort'], $location) === false) return false; + return true; + }); + + // Preise in Float umwandeln für Sortierung + if ($price) { + usort($filteredKurse, function($a, $b) use ($price) { + $priceA = floatval(str_replace(',', '.', str_replace('€', '', $a['preis']))); + $priceB = floatval(str_replace(',', '.', str_replace('€', '', $b['preis']))); + return $price === 'asc' ? $priceA <=> $priceB : $priceB <=> $priceA; + }); + } + + foreach ($filteredKurse as $kurs): ?> +
+
+
+
+
★
+
+
Kursleiter:
+
+
+
+
+
+
+
+
+ +
+
+
+ + + +
-
\ No newline at end of file +