feat: footer, auto-pause on no viewers, and Redsys question submissions
- Footer: add site-footer with one-liner + Cloud Host branding linking to cloudhost.es (mobile only, hidden on desktop) - Auto-pause: game pauses automatically after AUTOPAUSE_DELAY_MS (default 60s) with no viewers connected; auto-resumes when first viewer connects; shows "Esperando espectadores…" in the UI - Redsys: new /pregunta page lets viewers pay 1€ via Redsys to submit a fill-in question; submitted questions are used as prompts in the next round instead of AI generation; new redsys.ts implements HMAC_SHA256_V1 signing (3DES key derivation + HMAC-SHA256); notification endpoint at /api/redsys/notificacion handles server-to-server confirmation - db.ts: questions table with createPendingQuestion / markQuestionPaid / getNextPendingQuestion / markQuestionUsed - .env.sample: added AUTOPAUSE_DELAY_MS, PUBLIC_URL, REDSYS_* vars Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
187
pregunta.css
Normal file
187
pregunta.css
Normal file
@@ -0,0 +1,187 @@
|
||||
/* ── Reset & Variables ────────────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #111;
|
||||
--border: #1c1c1c;
|
||||
--text: #ededed;
|
||||
--text-dim: #888;
|
||||
--text-muted: #444;
|
||||
--accent: #D97757;
|
||||
--sans: 'Inter', -apple-system, sans-serif;
|
||||
--mono: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* ── Layout ────────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.pregunta__panel {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* ── Logo ──────────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__logo {
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pregunta__logo img {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* ── Typography ────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__panel h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.pregunta__sub {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Form ──────────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pregunta__label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pregunta__textarea {
|
||||
width: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
min-height: 88px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.pregunta__textarea:focus {
|
||||
outline: none;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.pregunta__textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pregunta__hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
/* ── Error ─────────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__error {
|
||||
background: rgba(220, 60, 60, 0.08);
|
||||
border: 1px solid rgba(220, 60, 60, 0.25);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
color: #ff6b6b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── Submit ────────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__submit {
|
||||
padding: 12px 20px;
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-family: var(--sans);
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.pregunta__submit:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.pregunta__submit:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Status button (ok/ko states) ──────────────────────────────── */
|
||||
|
||||
.pregunta__btn {
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.pregunta__btn:hover {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
/* ── Quick links ───────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pregunta__links a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pregunta__links a:hover {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
Reference in New Issue
Block a user