From a2b66de0bee5c9204337392476fd60c62c952483 Mon Sep 17 00:00:00 2001 From: illia Hromovoi Date: Thu, 10 Jul 2025 11:42:30 +0200 Subject: [PATCH] =?UTF-8?q?footer=20f=C3=BCr=20alle=20Seiten=20und=20new?= =?UTF-8?q?=20Modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CSS/Block/header.css | 13 ++++++- CSS/Element/modal.css | 20 +++++++++++ CSS/style.css | 1 + Controller/UserController.php | 8 ++--- JS/modal.js | 34 +++++++++++++++++++ Views/User/showUserAccountPage.phtml | 10 ++++-- .../User/showUserChangeAccountSettings.phtml | 6 ++-- Views/User/showUserDeleteConfirmation.phtml | 2 ++ Views/User/showUserLoginConfirmation.phtml | 2 ++ Views/User/showUserLoginForm.phtml | 4 ++- Views/User/showUserRegisterConfirmation.phtml | 2 ++ Views/User/showUserRegisterForm.phtml | 2 ++ Views/footer.phtml | 2 +- 13 files changed, 95 insertions(+), 11 deletions(-) create mode 100644 CSS/Element/modal.css create mode 100644 JS/modal.js diff --git a/CSS/Block/header.css b/CSS/Block/header.css index bdbd49f..e23497e 100644 --- a/CSS/Block/header.css +++ b/CSS/Block/header.css @@ -8,5 +8,16 @@ header { nav { display: flex; flex-direction: row; - padding: 24px 42px 24px 42px; +} + +@media only screen and (min-width: 900px) { + nav{ + padding: 24px 42px 24px 42px; + } +} + +@media only screen and (max-width: 800px) { + nav{ + padding: 0; + } } \ No newline at end of file diff --git a/CSS/Element/modal.css b/CSS/Element/modal.css new file mode 100644 index 0000000..6858bab --- /dev/null +++ b/CSS/Element/modal.css @@ -0,0 +1,20 @@ +.modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.6); + justify-content: center; + align-items: center; + z-index: 1000; +} +.modal-overlay.is-visible { + display: flex; +} +.modal { + background: var(--brand-background); + padding: 1.5rem; + border-radius: 6px; + text-align: center; + max-width: 320px; + width: 90%; +} \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 106edd8..97a05a9 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -7,6 +7,7 @@ @import url(Element/button.css); @import url(Element/card.css); @import url(Element/sidebar.css); +@import url(Element/modal.css); *, *:before, diff --git a/Controller/UserController.php b/Controller/UserController.php index 5837577..978e7f3 100644 --- a/Controller/UserController.php +++ b/Controller/UserController.php @@ -26,10 +26,10 @@ class UserController{ ]; private $changeUserLabels = [ - 'vorname' => 'Vorname*', - 'name' => 'Nachname*', - 'email' => 'E-Mail*', - 'password' => 'Passwort*', + 'vorname' => 'Vorname', + 'name' => 'Nachname', + 'email' => 'E-Mail', + 'password' => 'Passwort', ]; private $kursValidData = array(); diff --git a/JS/modal.js b/JS/modal.js new file mode 100644 index 0000000..b0eab3f --- /dev/null +++ b/JS/modal.js @@ -0,0 +1,34 @@ +document.addEventListener('DOMContentLoaded', () =>{ + const deleteForm = document.getElementById("deleteForm") + const confirmModal = document.getElementById("confirmModal"); + const btnCancel = document.getElementById("btnCancel"); + console.log(btnCancel); + const btnConfirm = document.getElementById("btnConfirm"); + + deleteForm.addEventListener('submit',e => { + e.preventDefault(); + confirmModal.classList.add('is-visible'); + }) + + btnCancel.addEventListener('click', e => { + confirmModal.classList.remove('is-visible'); + }) + + btnConfirm.addEventListener('click', e => { + confirmModal.classList.remove('is-visible'); + deleteForm.submit(); + }); + + deleteForm.addEventListener('click', e => { + if (e.target === deleteForm) { + confirmModal.classList.remove('is-visible'); + } + }); + + document.addEventListener('keydown', e => { + if (e.key === 'Escape' && deleteForm.classList.contains('is-visible')) { + confirmModal.classList.remove('is-visible'); + } + }); + +}); \ No newline at end of file diff --git a/Views/User/showUserAccountPage.phtml b/Views/User/showUserAccountPage.phtml index 3b0e0ef..5214f91 100644 --- a/Views/User/showUserAccountPage.phtml +++ b/Views/User/showUserAccountPage.phtml @@ -3,6 +3,13 @@ ?>
+
@@ -32,7 +39,7 @@
  • -
    + @@ -52,5 +59,4 @@
    • - \ No newline at end of file diff --git a/Views/User/showUserChangeAccountSettings.phtml b/Views/User/showUserChangeAccountSettings.phtml index aa22ca6..669e8b8 100644 --- a/Views/User/showUserChangeAccountSettings.phtml +++ b/Views/User/showUserChangeAccountSettings.phtml @@ -5,7 +5,7 @@ include dirname(__DIR__).'/header.phtml';
    -

    Change Account Info

    +

    Meine Daten ändern

    $label): ?> @@ -31,4 +31,6 @@ include dirname(__DIR__).'/header.phtml';
    -
    \ No newline at end of file + + + \ No newline at end of file diff --git a/Views/User/showUserDeleteConfirmation.phtml b/Views/User/showUserDeleteConfirmation.phtml index ff983b5..da56054 100644 --- a/Views/User/showUserDeleteConfirmation.phtml +++ b/Views/User/showUserDeleteConfirmation.phtml @@ -12,3 +12,5 @@ + + diff --git a/Views/User/showUserLoginConfirmation.phtml b/Views/User/showUserLoginConfirmation.phtml index 004dbc1..40c7169 100644 --- a/Views/User/showUserLoginConfirmation.phtml +++ b/Views/User/showUserLoginConfirmation.phtml @@ -22,3 +22,5 @@ + + diff --git a/Views/User/showUserLoginForm.phtml b/Views/User/showUserLoginForm.phtml index 45e52e2..f6e6dde 100644 --- a/Views/User/showUserLoginForm.phtml +++ b/Views/User/showUserLoginForm.phtml @@ -31,4 +31,6 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/Views/User/showUserRegisterConfirmation.phtml b/Views/User/showUserRegisterConfirmation.phtml index 2788b36..4606078 100644 --- a/Views/User/showUserRegisterConfirmation.phtml +++ b/Views/User/showUserRegisterConfirmation.phtml @@ -9,3 +9,5 @@ + + diff --git a/Views/User/showUserRegisterForm.phtml b/Views/User/showUserRegisterForm.phtml index 2d8671a..5a1e97b 100644 --- a/Views/User/showUserRegisterForm.phtml +++ b/Views/User/showUserRegisterForm.phtml @@ -35,3 +35,5 @@ + + diff --git a/Views/footer.phtml b/Views/footer.phtml index 58f5faa..755f01f 100644 --- a/Views/footer.phtml +++ b/Views/footer.phtml @@ -1,6 +1,6 @@ +