PBBFA23AHR/kurs-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Änderung der Startseite

Browse Source
This commit is contained in:
Besmir Skenderi 2025-07-10 11:40:20 +02:00
parent 7ce389d179
commit 633f8eb1e2
4 changed files with 213 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
CSS/Element/card.css
View File

@ -1,4 +1,4 @@
/* === Grundlayout === */
body {
margin: 0;
font-family: var(--font-family-main);
@ -6,7 +6,6 @@ body {
color: var(--brand-white);
}
/* === Header-Bereich === */
.welcome-header {
text-align: center;
margin: 60px 20px 40px 20px;
@ -27,19 +26,16 @@ body {
max-width: 1000px;
margin: 0 auto;
padding-left: 230px;
margin-bottom: 30px;
}
/* === Kurs-Grid === */
.courses-view {
.course-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
padding: 30px 0 30px 0;
margin: 0 auto;
}
/* === Kurs-Karte === */
.course-card {
background: var(--brand-white);
border-radius: 12px;
@ -48,20 +44,16 @@ body {
min-height: 300px;
display: flex;
flex-direction: column;
width: 100%;
max-width: 600px;
}
/* Optional: Kurs-Bildbereich */
.course-image {
background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */
background-color: #ddd;
height: 180px;
width: 100%;
}
/* === Kurs-Inhalt === */
.course-content {
background-color: var(--brand-primary); /* Orange */
background-color: var(--brand-primary);
color: var(--brand-white);
padding: 20px;
font-size: 16px;
@ -90,9 +82,16 @@ body {
}
@media screen and (max-width: 1024px) {
.course-card {
flex: 0 0 calc(50% - 20px);
}
}
@media screen and (max-width: 640px) {
.course-card {
flex: 0 0 100%;
}
.welcome-heading {
font-size: 36px;
}

33
CSS/Element/filter_box.css Normal file
View File

@ -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;
}

1
CSS/style.css
View File

@ -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,

76
Views/Welcome/showWelcome.phtml
View File

@ -1,5 +1,10 @@
<?php
include dirname(__DIR__) . '/header.phtml';
// Filter auslesen
$rating = $_GET['rating'] ?? '';
$price = $_GET['price'] ?? '';
$location = $_GET['location'] ?? '';
?>
<div class="container">
@ -7,9 +12,34 @@ include dirname(__DIR__) . '/header.phtml';
<div class="col-12">
<h1 class="welcome-heading">KURSE & ERLEBNISSE JEDER ART</h1>
<p class="welcome-subheading">Alle Kurse in deiner Nähe – auf einen Blick</p>
<div class="courses-view">
<div class="row">
<div class="col-4">
<div class="filter-box">
<form method="get">
<label for="rating">Bewertung:</label>
<select name="rating" id="rating">
<option value="">Alle</option>
<option value="5" <?= $rating == '5' ? 'selected' : '' ?>>5 Sterne</option>
<option value="4" <?= $rating == '4' ? 'selected' : '' ?>>4 Sterne+</option>
<option value="3" <?= $rating == '3' ? 'selected' : '' ?>>3 Sterne+</option>
</select>
<label for="price">Preis:</label>
<select name="price" id="price">
<option value="">Alle</option>
<option value="asc" <?= $price == 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
<option value="desc" <?= $price == 'desc' ? 'selected' : '' ?>>Absteigend</option>
</select>
<button type="submit">Anwenden</button>
</form>
</div>
</div>
<div class="col-8">
<!-- KURSLISTE -->
<div class="course-grid row">
<?php
// Beispiel-Kurse
$kurse = [
[
'bewertung' => 5,
@ -34,10 +64,42 @@ include dirname(__DIR__) . '/header.phtml';
'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'
],
];
foreach ($kurse as $kurs): ?>
// 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): ?>
<div class="course-card col-4">
<div class="course-image"></div>
<div class="course-content">
@ -57,4 +119,10 @@ include dirname(__DIR__) . '/header.phtml';
</div>
</div>
</div>
</div>
</div>
</div>