Mathew Sir Guest the bestandClaude Opus 4.6
2ee8afe582
Recreates base.html and main.html templates (lost during reset). Adds game.html with setup UI (category picker, board size slider), interactive grid table, word list sidebar, text input, click-to-select, timer, and completion banner. Adds game.js for all frontend logic. Extends theme.css with game grid and form control styles using the indigo/coral palette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
225 lines
4.1 KiB
CSS
225 lines
4.1 KiB
CSS
:root {
|
|
--indigo-darkest: #1a1a2e;
|
|
--indigo-dark: #16213e;
|
|
--indigo-mid: #0f3460;
|
|
--coral: #e94560;
|
|
--coral-light: #ff6b81;
|
|
--gold: #f5c518;
|
|
--text-primary: #e0e0e0;
|
|
--text-muted: #a0aec0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--indigo-darkest);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
background-color: var(--indigo-dark);
|
|
border-bottom: 1px solid var(--indigo-mid);
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: var(--coral);
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
color: var(--coral-light);
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
color: var(--text-muted);
|
|
border-radius: 6px;
|
|
padding: 0.4rem 1rem;
|
|
margin: 0 0.15rem;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover {
|
|
color: #ffffff;
|
|
background-color: rgba(15, 52, 96, 0.5);
|
|
}
|
|
|
|
.navbar-nav .nav-link.active {
|
|
color: #ffffff;
|
|
background-color: var(--indigo-mid);
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.hero-emoji {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
color: #ffffff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero .lead {
|
|
color: var(--text-muted);
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-accent {
|
|
background-color: var(--coral);
|
|
border-color: var(--coral);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-accent:hover {
|
|
background-color: var(--coral-light);
|
|
border-color: var(--coral-light);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background-color: var(--indigo-dark);
|
|
border-color: var(--indigo-mid);
|
|
}
|
|
|
|
/* Content pages */
|
|
.content-section {
|
|
background-color: var(--indigo-dark);
|
|
border: 1px solid var(--indigo-mid);
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.step-number {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background-color: var(--indigo-mid);
|
|
color: var(--gold);
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.step-item p {
|
|
margin: 0;
|
|
}
|
|
|
|
.tip-card {
|
|
background-color: rgba(15, 52, 96, 0.4);
|
|
border-left: 3px solid var(--gold);
|
|
border-radius: 4px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer {
|
|
border-top: 1px solid var(--indigo-mid);
|
|
padding: 1.25rem 0;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
/* Game grid */
|
|
.game-grid {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.game-grid td {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
font-family: monospace;
|
|
border: 1px solid var(--indigo-mid);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.game-grid td:hover {
|
|
background-color: var(--indigo-mid);
|
|
}
|
|
|
|
.game-grid td.cell-selected {
|
|
background-color: rgba(233, 69, 96, 0.3);
|
|
outline: 2px solid var(--coral);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.game-grid td.cell-found {
|
|
background-color: var(--coral);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Word list */
|
|
.list-group-item {
|
|
background-color: var(--indigo-dark);
|
|
border-color: var(--indigo-mid);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.list-group-item.word-found {
|
|
text-decoration: line-through;
|
|
color: var(--coral);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: var(--indigo-mid);
|
|
border-color: var(--indigo-mid);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Form controls in dark theme */
|
|
.form-select,
|
|
.form-control {
|
|
background-color: var(--indigo-dark);
|
|
border-color: var(--indigo-mid);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-select:focus,
|
|
.form-control:focus {
|
|
background-color: var(--indigo-dark);
|
|
border-color: var(--coral);
|
|
color: var(--text-primary);
|
|
box-shadow: 0 0 0 0.2rem rgba(233, 69, 96, 0.25);
|
|
}
|
|
|
|
.form-range::-webkit-slider-thumb {
|
|
background: var(--coral);
|
|
}
|
|
|
|
.form-range::-moz-range-thumb {
|
|
background: var(--coral);
|
|
}
|