From 8836103447573c1e070e0da597a48252357faf29 Mon Sep 17 00:00:00 2001
From: thomas <thomas@de-roo.org>
Date: Wed, 12 Nov 2025 15:03:21 +0100
Subject: [PATCH] index

---
 index.php | 189 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 153 insertions(+), 36 deletions(-)
diff --git a/index.php b/index.php
index b2b232a..417922b 100644
--- a/index.php
+++ b/index.php
@@ -53,57 +53,174 @@ if ($current_round) {
 <html lang="nl">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Lootjes Trekking</title>
 <style>
-body { font-family: Arial, sans-serif; margin: 20px; }
-h2 { color: #333; }
-button { padding: 6px 12px; margin-top: 8px; }
-a { color: #0066cc; text-decoration: none; }
+:root {
+  --primary: #4c8bf5;
+  --secondary: #f7f9fc;
+  --accent: #2e6ae3;
+  --text: #333;
+  --muted: #777;
+  --card-bg: #fff;
+  --border: #ddd;
+}
+
+body {
+  font-family: "Segoe UI", Roboto, sans-serif;
+  background: var(--secondary);
+  margin: 0;
+  padding: 0;
+  color: var(--text);
+}
+
+header {
+  background: var(--primary);
+  color: white;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+header h1 {
+  font-size: 1.4em;
+  margin: 0;
+}
+
+header form {
+  margin: 0;
+}
+
+button.logout {
+  background: white;
+  color: var(--primary);
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: 0.2s;
+}
+button.logout:hover {
+  background: #e9efff;
+}
+
+main {
+  max-width: 800px;
+  margin: 30px auto;
+  background: var(--card-bg);
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  padding: 30px 40px;
+}
+
+h2 {
+  color: var(--primary);
+  margin-top: 0;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+}
 a:hover { text-decoration: underline; }
-.wishlist-box { border: 1px solid #ccc; padding: 10px; margin-top: 10px; background: #fafafa; }
-.info { color: #555; }
-.admin-link { margin-top: 20px; display: block; font-weight: bold; }
+
+.info {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.wishlist-box {
+  background: #fafbff;
+  border: 1px solid var(--border);
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 15px;
+}
+
+.wishlist-content {
+  background: #fff;
+  border: 1px solid #eee;
+  padding: 12px;
+  border-radius: 6px;
+  margin-top: 8px;
+}
+
+.admin-link {
+  display: inline-block;
+  background: var(--accent);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 600;
+  margin-top: 10px;
+  transition: background 0.2s;
+}
+.admin-link:hover {
+  background: #255bc7;
+}
+
+footer {
+  text-align: center;
+  font-size: 0.8em;
+  color: var(--muted);
+  padding: 20px;
+  margin-top: 30px;
+}
 </style>
 </head>
 <body>
 
-<h2>Welkom, <?= htmlspecialchars($displayName) ?>!</h2>
+<header>
+  <h1>🎁 Lootjes Trekking</h1>
+  <form method="post">
+    <button type="submit" name="logout" class="logout">Afmelden</button>
+  </form>
+</header>
 
-<form method="post" style="margin-bottom:15px;">
-    <button type="submit" name="logout">Uitloggen</button>
-</form>
+<main>
+  <h2>Welkom, <?= htmlspecialchars($displayName) ?>!</h2>
 
-<p><a href="wishlist.php">Mijn eigen verlanglijstje aanpassen</a></p>
+  <p><a href="wishlist.php">📜 Mijn verlanglijstje aanpassen</a></p>
 
-<?php if ($isAdmin): ?>
-    <p class="admin-link"><a href="admin.php">🛠 Naar de adminpagina</a></p>
-<?php endif; ?>
+  <?php if ($isAdmin): ?>
+      <p><a href="admin.php" class="admin-link">🛠 Naar de adminpagina</a></p>
+  <?php endif; ?>
 
-<hr>
+  <hr style="margin: 25px 0; border: none; border-top: 1px solid #eee;">
 
-<?php if (!$current_round): ?>
-    <p class="info">Er is momenteel geen actieve trekking.</p>
+  <?php if (!$current_round): ?>
+      <p class="info">Er is momenteel geen actieve trekking.</p>
 
-<?php else: ?>
-    <h3>Actieve ronde: <?= htmlspecialchars($current_round['naam']) ?></h3>
+  <?php else: ?>
+      <h3>🎄 Actieve ronde: <?= htmlspecialchars($current_round['naam']) ?></h3>
 
-    <?php if (!$lootje): ?>
-        <p class="info">Je lootje is nog niet toegewezen.</p>
-    <?php else: ?>
-        <div class="wishlist-box">
-            <p><strong>Jij trekt voor:</strong> <?= htmlspecialchars($lootje) ?></p>
+      <?php if (!$lootje): ?>
+          <p class="info">Je lootje is nog niet toegewezen.</p>
+      <?php else: ?>
+          <div class="wishlist-box">
+              <p><strong>Jij trekt voor:</strong> <?= htmlspecialchars($lootje) ?></p>
 
-            <?php if ($ontvanger_wishlist): ?>
-                <p><strong>Verlanglijstje van <?= htmlspecialchars($lootje) ?>:</strong></p>
-                <div style="border:1px solid #ddd; padding:10px; background:#fff;">
-                    <?= nl2br(htmlspecialchars($ontvanger_wishlist)) ?>
-                </div>
-            <?php else: ?>
-                <p class="info">Deze gebruiker heeft nog geen verlanglijstje ingevuld.</p>
-            <?php endif; ?>
-        </div>
-    <?php endif; ?>
-<?php endif; ?>
+              <?php if ($ontvanger_wishlist): ?>
+                  <p><strong>Verlanglijstje van <?= htmlspecialchars($lootje) ?>:</strong></p>
+                  <div class="wishlist-content">
+                      <?= nl2br(htmlspecialchars($ontvanger_wishlist)) ?>
+                  </div>
+              <?php else: ?>
+                  <p class="info">Deze gebruiker heeft nog geen verlanglijstje ingevuld.</p>
+              <?php endif; ?>
+          </div>
+      <?php endif; ?>
+  <?php endif; ?>
+</main>
+
+<footer>
+  &copy; <?= date('Y') ?> Lootjes Trekking — Gemaakt met ❤️ voor gezelligheid
+</footer>
 
 </body>
 </html>
