footer für alle Seiten und new Modal

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

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%;
+}

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,

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();

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');
+        }
+    });
+
+});

Views/User/showUserAccountPage.phtml

@@ -3,6 +3,13 @@
 ?>
 
 <article>
+    <div id="confirmModal" class="modal-overlay">
+        <div class="modal">
+            <p>Sind Sie sicher, dass Sie Ihren Account löschen möchten?</p>
+            <button id="btnCancel" class="button button-secondary">Abbrechen</button>
+            <button id="btnConfirm" class="button button-danger">Ja, Account löschen</button>
+        </div>
+    </div>
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -32,7 +39,7 @@
                                    </form>
                                </li>
                                <li>
-                                   <form method="post">
+                                   <form method="post" id="deleteForm">
                                        <input type="hidden" name="controller" value="user">
                                        <input type="hidden" name="do" value="deleteAccount">
                                        <button type="submit" class="btn btn-logout">Meinen Account löschen</button>
@@ -52,5 +59,4 @@
     </div>
 </article>
 
-
 <?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserChangeAccountSettings.phtml

@@ -5,7 +5,7 @@ include dirname(__DIR__).'/header.phtml';
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h1>Change Account Info</h1>
+            <h1>Meine Daten ändern</h1>
 
             <form method="post" class="form-grid form-user">
                 <?php foreach ($changeUserLabels as $key => $label): ?>
@@ -31,4 +31,6 @@ include dirname(__DIR__).'/header.phtml';
             </form>
         </div>
     </div>
-</div>
+</div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserDeleteConfirmation.phtml

@@ -12,3 +12,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserLoginConfirmation.phtml

@@ -22,3 +22,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserLoginForm.phtml

@@ -31,4 +31,6 @@
             </form>
         </div>
     </div>
-</div>
+</div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/User/showUserRegisterConfirmation.phtml

@@ -9,3 +9,5 @@
 <?php
 include dirname(__DIR__).'/footer.phtml';
 ?>
+
+

Views/User/showUserRegisterForm.phtml

@@ -35,3 +35,5 @@
         </div>
     </div>
 </div>
+
+<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/footer.phtml

@@ -1,6 +1,6 @@
 </main>
     <footer>
-        footer
     </footer>
+    <script src="JS/modal.js"></script>
     </body>
 </html>