adsd

partials/landing/account/dashboard.php

@@ -1,6 +1,4 @@
 <?php
-use PDO;
-
 if (!isset($_SESSION['user_id'])) {
   redirect('/login');
 }
@@ -114,6 +112,67 @@ $events = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
       <div class="card dash-card">
         <div class="badge">Profil</div>
         <h3>Deine Angaben</h3>
+        <ul class="dash-list">
+          <li>Anzeigename: <?= htmlspecialchars($profile['display_name'], ENT_QUOTES) ?></li>
+          <li>Ort: <?= htmlspecialchars($profile['city'], ENT_QUOTES) ?> <?= htmlspecialchars($profile['zip'], ENT_QUOTES) ?></li>
+          <li>Beruf: <?= htmlspecialchars($profile['profession'], ENT_QUOTES) ?></li>
+          <li>Sprachen: <?= htmlspecialchars($profile['languages'], ENT_QUOTES) ?></li>
+          <li>About: <?= htmlspecialchars($profile['about'], ENT_QUOTES) ?></li>
+        </ul>
+        <div class="flex gap-12" style="margin-top:12px;">
+          <button class="btn" type="button" data-modal-open="modalProfile">Bearbeiten</button>
+        </div>
+      </div>
+
+      <div class="card dash-card">
+        <div class="badge">Kinder</div>
+        <h3>Deine Kids</h3>
+        <?php if (!$children): ?>
+          <p class="muted small">Noch keine Kinder eingetragen.</p>
+        <?php else: ?>
+          <ul class="dash-list">
+            <?php foreach ($children as $c): ?>
+              <li><?= htmlspecialchars($c['first_name'], ENT_QUOTES) ?>, <?= htmlspecialchars($c['gender'], ENT_QUOTES) ?> <?= $c['age_years'] ? '(' . (int)$c['age_years'] . ' Jahre)' : '' ?></li>
+            <?php endforeach; ?>
+          </ul>
+        <?php endif; ?>
+        <div class="flex gap-12" style="margin-top:12px;">
+          <button class="btn" type="button" data-modal-open="modalChild">Kind hinzufügen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container dash-section">
+    <div class="card dash-card">
+      <div class="badge">Deine Events</div>
+      <?php if (!$events): ?>
+        <p class="muted small">Noch keine Events angelegt.</p>
+      <?php else: ?>
+        <ul class="dash-list">
+          <?php foreach ($events as $e): ?>
+            <li><?= htmlspecialchars($e['title'], ENT_QUOTES) ?> – <?= htmlspecialchars($e['city'], ENT_QUOTES) ?>, <?= htmlspecialchars($e['starts_at'], ENT_QUOTES) ?> (<?= htmlspecialchars($e['visibility'], ENT_QUOTES) ?>)</li>
+          <?php endforeach; ?>
+        </ul>
+      <?php endif; ?>
+    </div>
+  </div>
+
+  <div class="container dash-section" id="events">
+    <div class="card dash-card">
+      <div class="badge">Eigenes Event</div>
+      <h3>Neuen Termin erstellen</h3>
+      <button class="btn" type="button" data-modal-open="modalEvent">Event anlegen</button>
+    </div>
+  </div>
+
+  <!-- Modals -->
+  <div class="modal" id="modalProfile">
+    <div class="panel">
+      <div class="head flex between center-y">
+        <h3>Profil bearbeiten</h3>
+        <button class="btn ghost" type="button" data-modal-close>✕</button>
+      </div>
       <form method="post" class="stack gap-12">
         <input type="hidden" name="action" value="profile">
         <div class="form-grid">
@@ -144,23 +203,21 @@ $events = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
           <label class="label" for="pAbout">Kurzvorstellung</label>
           <textarea id="pAbout" name="about" class="textarea" rows="3"><?= htmlspecialchars($profile['about'], ENT_QUOTES) ?></textarea>
         </div>
+        <div class="flex gap-12">
+          <button class="btn ghost" type="button" data-modal-close>Abbrechen</button>
           <button class="btn" type="submit">Speichern</button>
+        </div>
       </form>
     </div>
+  </div>
 
-      <div class="card dash-card">
+  <div class="modal" id="modalChild">
-        <div class="badge">Kinder</div>
+    <div class="panel">
-        <h3>Deine Kids</h3>
+      <div class="head flex between center-y">
-        <?php if (!$children): ?>
+        <h3>Kind hinzufügen</h3>
-          <p class="muted small">Noch keine Kinder eingetragen.</p>
+        <button class="btn ghost" type="button" data-modal-close>✕</button>
-        <?php else: ?>
+      </div>
-          <ul class="dash-list">
+      <form method="post" class="stack gap-12">
-            <?php foreach ($children as $c): ?>
-              <li><?= htmlspecialchars($c['first_name'], ENT_QUOTES) ?>, <?= htmlspecialchars($c['gender'], ENT_QUOTES) ?> <?= $c['age_years'] ? '(' . (int)$c['age_years'] . ' Jahre)' : '' ?></li>
-            <?php endforeach; ?>
-          </ul>
-        <?php endif; ?>
-        <form method="post" class="stack gap-12" style="margin-top:12px;">
         <input type="hidden" name="action" value="child_add">
         <div class="form-grid">
           <div class="stack gap-6">
@@ -191,31 +248,20 @@ $events = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
           <label class="label" for="cNote">Notiz</label>
           <input id="cNote" name="note" class="input">
         </div>
-          <button class="btn" type="submit">Kind hinzufügen</button>
+        <div class="flex gap-12">
+          <button class="btn ghost" type="button" data-modal-close>Abbrechen</button>
+          <button class="btn" type="submit">Speichern</button>
+        </div>
       </form>
     </div>
   </div>
-  </div>
 
-  <div class="container dash-section">
+  <div class="modal" id="modalEvent">
-    <div class="card dash-card">
+    <div class="panel">
-      <div class="badge">Deine Events</div>
+      <div class="head flex between center-y">
-      <?php if (!$events): ?>
+        <h3>Neues Event</h3>
-        <p class="muted small">Noch keine Events angelegt.</p>
+        <button class="btn ghost" type="button" data-modal-close>✕</button>
-      <?php else: ?>
-        <ul class="dash-list">
-          <?php foreach ($events as $e): ?>
-            <li><?= htmlspecialchars($e['title'], ENT_QUOTES) ?> – <?= htmlspecialchars($e['city'], ENT_QUOTES) ?>, <?= htmlspecialchars($e['starts_at'], ENT_QUOTES) ?> (<?= htmlspecialchars($e['visibility'], ENT_QUOTES) ?>)</li>
-          <?php endforeach; ?>
-        </ul>
-      <?php endif; ?>
       </div>
-  </div>
-
-  <div class="container dash-section" id="events">
-    <div class="card dash-card">
-      <div class="badge">Eigenes Event</div>
-      <h3>Neuen Termin erstellen</h3>
       <form class="stack gap-12" style="margin-top: 10px;" method="post" action="/dashboard#events">
         <input type="hidden" name="action" value="event_add">
         <div class="form-grid">
@@ -238,7 +284,7 @@ $events = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
             <input id="evDate" name="starts_at" class="input" type="datetime-local" required>
           </div>
           <div class="stack gap-6">
-            <label class="label" for="evLoc">Ort/Label</label>
+            <label class="label" for "evLoc">Ort/Label</label>
             <input id="evLoc" name="location_label" class="input" placeholder="Park / Café">
           </div>
         </div>
@@ -268,8 +314,32 @@ $events = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];
         <label class="label" style="display:flex; align-items:center; gap:8px;">
           <input type="checkbox" name="allow_kids" checked> Kinder erlaubt
         </label>
+        <div class="flex gap-12">
+          <button class="btn ghost" type="button" data-modal-close>Abbrechen</button>
           <button class="btn" type="submit">Event anlegen</button>
+        </div>
       </form>
     </div>
   </div>
 </main>
+
+<script>
+  document.querySelectorAll('[data-modal-open]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const id = btn.getAttribute('data-modal-open');
+      const modal = document.getElementById(id);
+      if (modal) modal.classList.add('open');
+    });
+  });
+  document.querySelectorAll('[data-modal-close]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const modal = btn.closest('.modal');
+      if (modal) modal.classList.remove('open');
+    });
+  });
+  document.querySelectorAll('.modal').forEach(modal => {
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) modal.classList.remove('open');
+    });
+  });
+</script>