diff --git a/html/word-guesser/css/styles.css b/html/word-guesser/css/styles.css index 7791b95..6da9243 100644 --- a/html/word-guesser/css/styles.css +++ b/html/word-guesser/css/styles.css @@ -2,13 +2,11 @@ .form_container { background-color: #ffffff; border: 1px solid #dee2e6; - border-radius: 8px; - padding: 2rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - margin-top: 1rem; - max-width: 400px; - margin: 0 auto; - padding: 10px; + border-radius: 12px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); + max-width: 500px; + margin: 2rem auto; + padding: 20px; display: flex; flex-direction: column; gap: 15px; @@ -363,4 +361,76 @@ color: var(--text-primary, #212529); } -/* Guesses List Styling */ +#game_container { + max-width: 500px; + margin: 2rem auto; + background: #fff; + border-radius: 12px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + padding: 20px; + overflow: hidden; +} + +/* Splash Screen (Login) specific styling */ +#user_info_container { + display: flex; /* Show by default */ +} + +#splash_screen { + border: none; + box-shadow: none; + padding: 0; +} + +/* Hide the game form properly via CSS instead of inline styles */ +#game_form { + display: none; /* Changed from visibility:hidden to display:none */ +} + +/* Scoreboard Overlay */ +#scoreboard_overlay { + display: none; /* Toggle to 'flex' via JS */ + position: fixed; + inset: 0; /* Shorthand for top/bottom/left/right: 0 */ + background: rgba(15, 23, 42, 0.9); /* Darker slate backdrop */ + backdrop-filter: blur(8px); + z-index: 9999; + justify-content: center; + align-items: center; + color: #f8fafc; +} + +#scoreboard_overlay > div { + /* The wrapper inside the overlay */ + background: #1e293b; + border: 2px solid #38bdf8; + border-radius: 16px; + padding: 2rem; + width: 90%; + max-width: 400px; + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); +} + +/* Individual Stat Rows */ +#scoreboard_overlay > div > div { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 0.5rem; + border-bottom: 1px solid #334155; +} + +#scoreboard_overlay > div > div:last-child { + border-bottom: none; +} + +#scoreboard_overlay [id^="total_"], +#scoreboard_overlay [id^="average_"] { + font-family: "Roboto Mono", monospace; + font-weight: bold; + color: #38bdf8; + font-size: 1.2rem; +} diff --git a/html/word-guesser/index.html b/html/word-guesser/index.html index 1b40d1c..755af7b 100644 --- a/html/word-guesser/index.html +++ b/html/word-guesser/index.html @@ -1,9 +1,22 @@ -