From e27b6f2a23f021467841726f96aa8ad5996ff995 Mon Sep 17 00:00:00 2001
From: eric <3024947@stud.hs-mannheim.de>
Date: Sun, 10 Aug 2025 18:41:23 +0200
Subject: [PATCH] Clipboard aesthetic
---
src/main/resources/public/lobby.html | 126 +++++++++++++++++++++++----
1 file changed, 110 insertions(+), 16 deletions(-)
diff --git a/src/main/resources/public/lobby.html b/src/main/resources/public/lobby.html
index 42dbe38..32eabcf 100644
--- a/src/main/resources/public/lobby.html
+++ b/src/main/resources/public/lobby.html
@@ -53,14 +53,50 @@
.tile .txt b{font-size:16px}
.tile .txt span{font-size:13px; color:var(--muted)}
- /* Join form */
- .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
- label{color:var(--muted)}
- input[type="text"]{
- background:#0f0f0f; color:var(--text); border:1px solid var(--border);
- padding:12px 14px; border-radius:12px; outline:none; min-width:180px;
+ /* Join form – Spotify-like Input */
+ .row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
+ .field{display:flex; flex-direction:column; gap:6px}
+ label{color:var(--muted); font-size:13px}
+
+ .inputWrap{position:relative; min-width:220px}
+ .inputWrap .leading-icon{
+ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.9;
}
- input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
+ .inputWrap .chip{
+ position:absolute; right:10px; top:50%; transform:translateY(-50%);
+ font-size:11px; color:var(--muted);
+ border:1px solid var(--border); background:#0d0d0d;
+ padding:4px 8px; border-radius:999px;
+ }
+ input#gameId{
+ width:100%;
+ background:#0b0b0b; color:var(--text);
+ border:1px solid var(--border);
+ border-radius:999px;
+ padding:14px 78px 14px 42px; /* Platz für Icon + Chip */
+ outline:none;
+ letter-spacing:.12em; font-weight:600;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
+ transition:border-color .2s, box-shadow .2s, background .2s, transform .06s;
+ }
+ input#gameId::placeholder{color:#777}
+ input#gameId:focus{
+ border-color:var(--accent);
+ box-shadow:0 0 0 4px var(--glow), inset 0 1px 0 rgba(255,255,255,.02);
+ background:#0e0e0e;
+ }
+ input#gameId:active{transform:translateY(1px)}
+
+ /* Icon-only clipboard button */
+ .icon-btn{width:auto; padding:10px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center}
+ .icon-btn svg{display:block}
+ .icon-btn--accent{
+ background:var(--accent); color:#0a0a0a;
+ box-shadow:0 0 0 0 var(--glow);
+ transition: box-shadow .2s, filter .15s, transform .06s, background .2s;
+ }
+ .icon-btn--accent:hover{ filter:brightness(1.05); box-shadow:0 0 0 6px var(--glow) }
+ .icon-btn--accent:active{ background:var(--accent-press); transform:translateY(1px) }
@@ -98,31 +134,89 @@
-
- Tipp: Code ist vierstellig (z.B. 3759).
+ Tipp: Code ist vierstellig (z. B. 6767).
-
+
+
-
+
-