From 83c36b27f6c991006f540adf82b1d2ac709a43ca Mon Sep 17 00:00:00 2001
From: eric <3024947@stud.hs-mannheim.de>
Date: Sun, 10 Aug 2025 17:52:49 +0200
Subject: [PATCH] Lobby GUI

---
 src/main/resources/public/lobby.html | 103 +++++++++++++++++++++++++--
 1 file changed, 97 insertions(+), 6 deletions(-)
diff --git a/src/main/resources/public/lobby.html b/src/main/resources/public/lobby.html
index 63d7e23..4aa961e 100644
--- a/src/main/resources/public/lobby.html
+++ b/src/main/resources/public/lobby.html
@@ -1,14 +1,105 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <title>Lobby – Spotify Roulette</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Spotify Roulette – Lobby</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root{
+            --bg:#121212; --card:#181818; --border:#282828; --text:#fff; --muted:#b3b3b3;
+            --accent:#1db954; --accent-press:#169e47; --glow:rgba(29,185,84,.25);
+            --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35)
+        }
+        *{box-sizing:border-box}
+        html,body{height:100%}
+        body{
+            margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
+            color:var(--text);
+            background: radial-gradient(1000px 500px at 20% -10%, rgba(29,185,84,.14), transparent 60%),
+            radial-gradient(900px 450px at 110% -20%, rgba(29,185,84,.12), transparent 70%),
+            var(--bg);
+            padding:24px;
+        }
+        .container{max-width:1100px; margin:0 auto}
+        header{display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border)}
+        .logo{width:40px; height:40px; border-radius:50%; background:var(--accent); color:#121212;
+            display:grid; place-content:center; box-shadow:0 0 0 6px var(--glow)}
+        h1{margin:0; font-size:24px}
+        .pill{margin-left:auto; display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
+            border:1px solid var(--border); background:#101010; color:var(--muted); font-size:12px}
+
+        .grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
+        @media (max-width:900px){ .grid{grid-template-columns:1fr} }
+
+        .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
+        .card .hd{padding:18px 18px 8px}
+        .card .bd{padding:0 18px 18px}
+        .muted{color:var(--muted)}
+
+        .btn{width:100%; border:0; border-radius:14px; padding:14px 16px; cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .06s ease, filter .15s ease, background .2s ease}
+        .btn:active{transform:translateY(1px)}
+        .btn-primary{background:var(--accent); color:#0a0a0a}
+        .btn-primary:hover{filter:brightness(1.05)}
+        .btn-primary:active{background:var(--accent-press)}
+        .btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
+        .btn-ghost:hover{border-color:var(--muted)}
+
+        .tile{display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:14px; background:#101010}
+        .tile .icon{width:44px; height:44px; border-radius:10px; display:grid; place-content:center; background:#0e0e0e; border:1px solid var(--border)}
+        .tile .txt{display:flex; flex-direction:column}
+        .tile .txt b{font-size:16px}
+        .tile .txt span{font-size:13px; color:var(--muted)}
+    </style>
 </head>
 <body>
-<h1>Lobby</h1>
-<p>Was möchtest du tun?</p>
-<button id="createGame">Spiel erstellen</button>
-<button id="joinGame">Spiel beitreten</button>
+<div class="container">
+    <header>
+        <div class="logo" aria-hidden="true">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5Zm10 7-10 5v9l10-5V9ZM2 9v9l10 5v-9L2 9Z"/></svg>
+        </div>
+        <h1>Lobby</h1>
+        <span class="pill">Angemeldet als <b id="uname" style="color:#fff">—</b></span>
+    </header>
+
+    <section class="grid" aria-label="Aktionen">
+        <div class="card">
+            <div class="hd"><h2 style="margin:0">Neues Spiel</h2></div>
+            <div class="bd">
+                <div class="tile" style="margin-bottom:12px">
+                    <div class="icon" aria-hidden="true">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="#1db954"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z"/></svg>
+                    </div>
+                    <div class="txt"><b>Spiel erstellen</b><span>Starte eine neue Runde und teile den Code.</span></div>
+                </div>
+                <button id="createGame" class="btn btn-primary">Spiel erstellen</button>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="hd"><h2 style="margin:0">Spiel beitreten</h2></div>
+            <div class="bd">
+                <div class="tile" style="margin-bottom:12px">
+                    <div class="icon" aria-hidden="true">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="#1db954"><path d="M12 2a6 6 0 0 1 6 6v2h2v12H4V10h2V8a6 6 0 0 1 6-6Zm0 2a4 4 0 0 0-4 4v2h8V8a4 4 0 0 0-4-4Z"/></svg>
+                    </div>
+                    <div class="txt"><b>Bestehendem Spiel beitreten</b><span>Du hast schon einen Code? Klicke hier.</span></div>
+                </div>
+                <button id="joinGame" class="btn btn-ghost">Spiel beitreten</button>
+            </div>
+        </div>
+    </section>
+</div>
+
+<!-- UI-Helfer: Username-Anzeige aus URL lesen -->
+<script type="module">
+    const p = new URLSearchParams(location.search);
+    const u = p.get('username');
+    const $ = (s)=>document.querySelector(s);
+    if (u) { $('#uname').textContent = u; }
+</script>
 
 <script type="module" src="/js/lobby.js"></script>
 </body>
