diff --git a/CSS/Element/button.css b/CSS/Element/button.css index 3bbb93c..9f9edea 100644 --- a/CSS/Element/button.css +++ b/CSS/Element/button.css @@ -1,3 +1,10 @@ +.buttons-container{ + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; +} + .btn{ padding: 5px 10px; font-weight: var(--font-weight-semibold); @@ -6,7 +13,9 @@ color: var(--brand-white); display: flex; flex-direction: row; + justify-content: center; align-items: center; + cursor: pointer; } .btn-primary { @@ -14,6 +23,11 @@ border-radius: 3px; } +.btn-secondary{ + background: var(--fullblock); + border-radius: 3px; +} + .btn-user { border-radius: 9999px; color: var(--brand-primary); @@ -27,6 +41,18 @@ aspect-ratio: 1/1; } +.btn-form{ + padding: 10px 20px; +} + +.btn-login{ + background-color: transparent; +} + .btn-user > span { font-size: 28px; } + +.btn-logout{ + background-color: red; +} diff --git a/CSS/Element/card.css b/CSS/Element/card.css new file mode 100644 index 0000000..272a636 --- /dev/null +++ b/CSS/Element/card.css @@ -0,0 +1,111 @@ +/* === Grundlayout === */ +body { + 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; +} + +.welcome-heading { + 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; +} + +/* === Kurs-Grid === */ +.course-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 30px; + margin: 0 auto; +} + +/* === Kurs-Karte === */ +.course-card { + flex: 0 0 calc(33.333% - 20px); /* Drei nebeneinander */ + 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; + margin-top: 30px; +} + +/* Optional: Kurs-Bildbereich */ +.course-image { + background-color: #ddd; /* Platzhalter – kannst du durch echte Bilder ersetzen */ + 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; +} + +.course-left, +.course-right { + 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; +} + +.course-right { + text-align: right; +} + +/* === Responsive Anpassung === */ +@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; + } + + .welcome-subheading { + font-size: 20px; + text-align: center; + } +} diff --git a/CSS/Element/form.css b/CSS/Element/form.css index 87bdb51..49eef03 100644 --- a/CSS/Element/form.css +++ b/CSS/Element/form.css @@ -72,3 +72,26 @@ form .error { margin-block-end: 0; outline-color: var(--error); } +.form-user{ + justify-content: center!important; + grid-template-columns: auto!important; +} + +/* fix radio buttons registration */ +.input:nth-child(5){ + flex-direction: row; + justify-content: space-between; + max-width: 290px; + align-items: center; +} + +.input:nth-child(5) label{ + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; +} + +.input:nth-child(5) label input{ + margin-top: 0; +} diff --git a/CSS/style.css b/CSS/style.css index 0c3d47a..fcb7762 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -1,9 +1,11 @@ @import url(variables.css); +@import url(style_columns.css); @import url(Block/header.css); @import url(Block/footer.css); @import url(Element/logo.css); @import url(Element/form.css); @import url(Element/button.css); +@import url(Element/card.css); *, *:before, *:after { -moz-box-sizing: border-box; @@ -35,7 +37,6 @@ h2 { main { margin-top: 190px; - padding: 10px; } .msg { @@ -106,3 +107,7 @@ main { text-decoration: none; } +.paragraph{ + font-size: var(--font-size-smalltext); + color: var(--brand-white); +} diff --git a/CSS/style_columns.css b/CSS/style_columns.css index 6c03506..4541368 100644 --- a/CSS/style_columns.css +++ b/CSS/style_columns.css @@ -6,6 +6,13 @@ /*** 12 spaltiges Grid mit Flexboxen ***/ /*** Container ***/ + +.container{ + max-width: 90%; + padding: 24px 42px 24px 42px; + margin: 0 auto; +} + .row { display: flex; flex-flow: row; diff --git a/Controller/UserController.php b/Controller/UserController.php index 53b5982..8177e6c 100644 --- a/Controller/UserController.php +++ b/Controller/UserController.php @@ -10,13 +10,32 @@ class UserController{ private $validData = array(); private $errors = array(); + private $labels = [ + "name" => "Vorname*", + "lastname" => "Nachname*", + "email" => "E-Mail*", + "password" => "Passwort*", + "role" => "Rolle*" + ]; + + private $validLoginData = array(); + private $loginErrors = array(); + private $loginLabels = [ + "email" => "E-Mail*", + "password" => "Passwort*", + ]; + public function __construct($view){ $this->db = new UserModel(); $this->view = $view; } public function showUserRegisterForm(){ - + $this->view->setVars([ + 'labels' => $this->labels, + 'errors' => $this->errors, + 'validData' => $this->validData + ]); } public function showUserRegisterConfirmation(){ @@ -24,23 +43,63 @@ class UserController{ } public function showUserLoginForm(){ + $this->view->setVars([ + 'labels' => $this->loginLabels, + 'errors' => $this->loginErrors, + 'validData' => $this->validLoginData + ]); + } + private function validateForm() { + foreach ($this->labels as $key => $label) { + if (!isset($_POST[$key]) || trim($_POST[$key]) === '') { + $this->errors[$key] = "Bitte $label angeben"; + } else { + $this->validData[$key] = trim($_POST[$key]); + } + } + + if (isset($this->validData['password'])) { + if (strlen($this->validData['password']) < 6) { + $this->errors['password'] = "Das Passwort muss mindestens 6 Zeichen lang sein."; + } + } + + if (isset($this->validData['email']) && !filter_var($this->validData['email'], FILTER_VALIDATE_EMAIL)) { + $this->errors['email'] = "Bitte eine gültige E-Mail-Adresse eingeben."; + } + } + + public function validateLoginForm(){ + foreach ($this->loginLabels as $key => $label) { + if (isset($this->validData['password'])) { + if (strlen($this->validData['password']) < 6) { + $this->errors['password'] = "Das Passwort muss mindestens 6 Zeichen lang sein."; + } + } + + if (isset($this->validData['email']) && !filter_var($this->validData['email'], FILTER_VALIDATE_EMAIL)) { + $this->errors['email'] = "Bitte eine gültige E-Mail-Adresse eingeben."; + } + } } public function showUserLoginConfirmation(){ $userId = $this->getCurrentUserId(); $user = null; - var_dump($user . "user"); if($userId){ $user = $this->db->getUserById($userId); } - include 'Views/User/showUserLoginConfirmation.phtml'; + + $path = "Views/User/showUserLoginConfirmation.phtml"; + if(file_exists($path)){ + include $path; + } } public function register(){ $this->db->createUser($_POST); - $this->view->setDoMethodName("showUserRegisterConfirmation"); - $this->showUserRegisterConfirmation(); + $this->login(); } public function login(){ @@ -73,7 +132,8 @@ class UserController{ public function logout(){ $this->clearUserSession(); - echo "Erfolgreich ausgeloggt"; + header("Location: index.php?controller=user&do=showUserLoginForm"); + exit(); } public function isUserLoggenIn(){ @@ -83,4 +143,8 @@ class UserController{ public function getCurrentUserId(){ return $_SESSION["user_id"] ?? null; } + + public function showUserAccountPage (){ + + } } \ No newline at end of file diff --git a/Views/User/showUserAccountPage.phtml b/Views/User/showUserAccountPage.phtml new file mode 100644 index 0000000..80b531e --- /dev/null +++ b/Views/User/showUserAccountPage.phtml @@ -0,0 +1,17 @@ + + +
+
+
+
+
+ + + +
+
+
+
+
\ No newline at end of file diff --git a/Views/User/showUserLoginConfirmation.phtml b/Views/User/showUserLoginConfirmation.phtml index d5289c1..004dbc1 100644 --- a/Views/User/showUserLoginConfirmation.phtml +++ b/Views/User/showUserLoginConfirmation.phtml @@ -2,16 +2,23 @@ include dirname(__DIR__).'/header.phtml'; ?> - -

Hallo, !

- -

Benutzerdaten konnten nicht geladen werden.

- +
+
+
+

Erfolgreiche Anmeldung!

-

Sie haben sich erfolgreich angemeldet

+ +

Hallo, !

+ + +

Benutzerdaten konnten nicht geladen werden.

+ - +
+
+
diff --git a/Views/User/showUserLoginForm.phtml b/Views/User/showUserLoginForm.phtml index e541dbf..f087019 100644 --- a/Views/User/showUserLoginForm.phtml +++ b/Views/User/showUserLoginForm.phtml @@ -2,22 +2,33 @@ include dirname(__DIR__).'/header.phtml'; ?> -

Als Benutzer anmelden

+
+
+
+

Als Benutzer anmelden

-
+ + $label): ?> +
+ + + + + + + + - - + +
+ +
+ - - - - - - -
- - - + + + + +
+
+
\ No newline at end of file diff --git a/Views/User/showUserRegisterForm.phtml b/Views/User/showUserRegisterForm.phtml index 2ca254c..f2802b8 100644 --- a/Views/User/showUserRegisterForm.phtml +++ b/Views/User/showUserRegisterForm.phtml @@ -2,38 +2,36 @@ include dirname(__DIR__).'/header.phtml'; ?> -

Benutzer erstellen

+
+
+
+

Benutzer erstellen

-
-

Registrieren

+ - - + $label): ?> +
+ + + + + + + + + - - + +
+ +
+ - - + + - - - -

Wähle deine Rolle:

- - - - - - -
- -Haben Sie schon ein Benutzer Konto? - - + + +
+
+
diff --git a/Views/Welcome/showWelcome.phtml b/Views/Welcome/showWelcome.phtml index f19e71c..78c2255 100644 --- a/Views/Welcome/showWelcome.phtml +++ b/Views/Welcome/showWelcome.phtml @@ -1,9 +1,60 @@ -
- HIER LANDING PAGE -
- +
+
+
+

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' + ] + ]; + foreach ($kurse as $kurs): ?> +
+
+
+
+
+
+
Kursleiter:
+
+
+
+
+
+
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/Views/header.phtml b/Views/header.phtml index b8124d2..1854b4a 100644 --- a/Views/header.phtml +++ b/Views/header.phtml @@ -16,16 +16,25 @@