feat: time-based credits, JUGADORES leaderboard, fix footer visibility
- Credits system: 1€/day, 5€/week, 15€/month time-based access via Redsys - credits table with token, tier, expires_at, status lifecycle - /api/credito/iniciar, /api/credito/estado, /api/pregunta/enviar endpoints - Polling-based token delivery to browser after Redsys URLOK redirect - localStorage token storage with expiry check on load - JUGADORES leaderboard: top 7 players by questions used, polled every 60s - /api/jugadores endpoint, PlayerLeaderboard component in Standings sidebar - Footer: moved into Standings sidebar (.standings__footer) so it's always visible - pregunta.tsx: complete redesign with tier cards, credit badge, spinner, success state - pregunta.css: new styles for tier cards, input, badge, spinner, success, link-btn Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
136
pregunta.css
136
pregunta.css
@@ -173,6 +173,7 @@ body {
|
||||
.pregunta__links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -185,3 +186,138 @@ body {
|
||||
.pregunta__links a:hover {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pregunta__links-sep {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pregunta__link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-family: var(--sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pregunta__link-btn:hover {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Header row (logo + credit badge) ─────────────────────────── */
|
||||
|
||||
.pregunta__header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pregunta__credit-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #4caf7d;
|
||||
background: rgba(76, 175, 125, 0.12);
|
||||
border: 1px solid rgba(76, 175, 125, 0.25);
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Success banner ────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__success {
|
||||
background: rgba(76, 175, 125, 0.1);
|
||||
border: 1px solid rgba(76, 175, 125, 0.25);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
color: #4caf7d;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Username input ────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__input {
|
||||
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;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.pregunta__input:focus {
|
||||
outline: none;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.pregunta__input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── Tier cards ────────────────────────────────────────────────── */
|
||||
|
||||
.tier-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 18px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-family: var(--sans);
|
||||
color: var(--text);
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.tier-card:hover {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.tier-card--selected {
|
||||
border-color: var(--accent);
|
||||
background: rgba(217, 119, 87, 0.08);
|
||||
}
|
||||
|
||||
.tier-card__price {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tier-card__label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Spinner ───────────────────────────────────────────────────── */
|
||||
|
||||
.pregunta__spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: pregunta-spin 0.8s linear infinite;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
@keyframes pregunta-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user