3014947
/
SpotifyRoulette
1
0
Fork 0
Code Issues 20 Pull Requests Packages Projects Releases Wiki Activity

Spiel erstellen GUI

pull/32/head
eric 2025-08-10 18:05:30 +02:00
parent 83c36b27f6
commit be3e5f268e
2 changed files with 99 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/main/resources/public/create-game.html
View File

@ -1,12 +1,107 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spiel erstellen – Spotify Roulette</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:980px; 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:1.2fr .8fr; 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:16px 18px; 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)}
.list{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.row{display:flex; gap:10px; align-items:center}
.help{font-size:14px; color:var(--muted); margin-top:10px}
.tile{display:flex; gap:14px; align-items:flex-start; 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)}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:#0f0f0f; color:var(--muted); font-size:12px}
</style>
</head>
<body>
<h1>Neues Spiel erstellen</h1>
<button id="createGame">Spiel erstellen</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>Neues Spiel erstellen</h1>
<span class="pill">Angemeldet als <b id="uname" style="color:#fff">—</b></span>
</header>
<section class="grid" aria-label="Spiel erstellen">
<div class="card">
<div class="hd"><h2 style="margin:0">Sofort starten</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 3 2 9l10 6 10-6-10-6Zm10 8-10 6-10-6v4l10 6 10-6v-4Z"/></svg>
</div>
<div class="txt">
<b>Standard-Spiel</b>
<span>Erstellt eine Lobby mit Standardregeln. </span>
</div>
</div>
<button id="createGame" class="btn btn-primary">Spiel erstellen</button>
<p class="help">Du bekommst einen Spiel‑Code zum Teilen.</p>
</div>
</div>
<div class="card">
<div class="hd"><h2 style="margin:0">WIP Einstellungen</h2></div>
<div class="bd">
<div class="list">
<div class="row"><span class="badge">Bald</span><span class="muted">Max. Spieler • Rundenanzahl • Song‑Ausschnitt • Privat/Öffentlich</span></div>
<div class="row"><span class="muted">WIP Optionen die evtl dazu kommen</span></div>
</div>
</div>
</div>
</section>
</div>
<script type="module">
// Nur für die Anzeige oben rechts; beeinflusst deinen Flow nicht
const p = new URLSearchParams(location.search);
const u = p.get('username');
if (u) document.querySelector('#uname').textContent = u;
</script>
<script type="module" src="/js/create-game.js"></script>
</body>
</html>

1
src/main/resources/public/index.html
View File

@ -73,7 +73,6 @@
</section>
</div>
<!-- Dein bestehendes Script beibehalten -->
<script type="module" src="/js/login.js"></script>
</body>
</html>