Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}DIS IPL 2026{% endblock %}</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0e1a; | |
| --bg2: #111827; | |
| --bg3: #1a2234; | |
| --card: #141c2e; | |
| --border: #1e2d45; | |
| --orange: #f97316; | |
| --orange2: #fb923c; | |
| --gold: #fbbf24; | |
| --blue: #3b82f6; | |
| --green: #22c55e; | |
| --red: #ef4444; | |
| --text: #e2e8f0; | |
| --muted: #64748b; | |
| --muted2: #94a3b8; | |
| --white: #ffffff; | |
| --font-display: 'Bebas Neue', sans-serif; | |
| --font-body: 'DM Sans', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| /* ── SCROLLBAR ──────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg2); } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| /* ── NAVBAR ─────────────────────────────────── */ | |
| nav { | |
| background: rgba(10,14,26,0.95); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; top: 0; z-index: 100; | |
| padding: 0 1.5rem; | |
| } | |
| .nav-inner { | |
| max-width: 1200px; margin: 0 auto; | |
| display: flex; align-items: center; gap: 1rem; | |
| height: 60px; | |
| } | |
| .nav-brand { | |
| font-family: var(--font-display); | |
| font-size: 1.6rem; | |
| letter-spacing: 2px; | |
| color: var(--orange); | |
| text-decoration: none; | |
| display: flex; align-items: center; gap: 0.4rem; | |
| } | |
| .nav-brand .brand-ipl { color: var(--white); font-weight: 600; } | |
| .nav-brand .brand-year { color: var(--gold); } | |
| .nav-links { | |
| display: flex; align-items: center; gap: 0.25rem; | |
| margin-left: auto; | |
| } | |
| .nav-link { | |
| color: var(--muted2); text-decoration: none; | |
| font-size: 0.875rem; font-weight: 500; | |
| padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); | |
| transition: all 0.2s; white-space: nowrap; | |
| } | |
| .nav-link:hover, .nav-link.active { color: var(--white); background: var(--bg3); } | |
| .nav-link.active { color: var(--orange); } | |
| .pts-badge { | |
| font-family: var(--font-mono); | |
| background: linear-gradient(135deg, var(--orange), var(--gold)); | |
| color: var(--bg); | |
| font-size: 0.8rem; font-weight: 700; | |
| padding: 0.3rem 0.75rem; border-radius: 99px; | |
| margin-left: 0.5rem; | |
| } | |
| .nav-admin-badge { | |
| background: var(--blue); color: white; | |
| font-size: 0.7rem; padding: 0.2rem 0.5rem; | |
| border-radius: 4px; font-weight: 600; | |
| } | |
| .hamburger { display: none; background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 1.5rem; } | |
| /* ── LAYOUT ─────────────────────────────────── */ | |
| .page { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } | |
| .page-header { margin-bottom: 2rem; } | |
| .page-title { | |
| font-family: var(--font-display); | |
| font-size: 2.5rem; letter-spacing: 2px; | |
| color: var(--white); line-height: 1; | |
| } | |
| .page-subtitle { color: var(--muted2); margin-top: 0.4rem; } | |
| /* ── CARDS ───────────────────────────────────── */ | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| } | |
| .card-sm { padding: 1rem; } | |
| .card-title { | |
| font-family: var(--font-display); | |
| font-size: 1.2rem; letter-spacing: 1px; | |
| color: var(--orange); margin-bottom: 1rem; | |
| display: flex; align-items: center; gap: 0.5rem; | |
| } | |
| /* ── BUTTONS ─────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; align-items: center; gap: 0.4rem; | |
| font-family: var(--font-body); font-weight: 600; | |
| font-size: 0.875rem; padding: 0.6rem 1.25rem; | |
| border-radius: var(--radius-sm); border: none; | |
| cursor: pointer; text-decoration: none; | |
| transition: all 0.2s; white-space: nowrap; | |
| } | |
| .btn-primary { background: var(--orange); color: var(--bg); } | |
| .btn-primary:hover { background: var(--orange2); transform: translateY(-1px); } | |
| .btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); } | |
| .btn-secondary:hover { border-color: var(--muted); } | |
| .btn-danger { background: var(--red); color: white; } | |
| .btn-danger:hover { opacity: 0.85; } | |
| .btn-success { background: var(--green); color: var(--bg); } | |
| .btn-sm { font-size: 0.8rem; padding: 0.4rem 0.9rem; } | |
| .btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border); } | |
| .btn-ghost:hover { color: var(--text); border-color: var(--muted); } | |
| .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none ; } | |
| /* ── FORMS ───────────────────────────────────── */ | |
| .form-group { margin-bottom: 1.25rem; } | |
| label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--muted2); margin-bottom: 0.4rem; } | |
| input, select, textarea { | |
| width: 100%; background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); color: var(--text); | |
| font-family: var(--font-body); font-size: 0.9rem; | |
| padding: 0.65rem 1rem; transition: border-color 0.2s; | |
| outline: none; | |
| } | |
| input:focus, select:focus, textarea:focus { border-color: var(--orange); } | |
| select option { background: var(--bg2); } | |
| textarea { resize: vertical; min-height: 80px; } | |
| .form-row { display: grid; gap: 1rem; } | |
| .form-row.cols-2 { grid-template-columns: 1fr 1fr; } | |
| .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } | |
| .form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; } | |
| /* ── ALERTS / FLASH ──────────────────────────── */ | |
| .alerts { max-width: 1200px; margin: 1rem auto; padding: 0 1.5rem; } | |
| .alert { | |
| padding: 0.75rem 1rem; border-radius: var(--radius-sm); | |
| font-size: 0.9rem; border-left: 3px solid; | |
| display: flex; align-items: center; gap: 0.5rem; | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } | |
| .alert-success { background: rgba(34,197,94,0.1); border-color: var(--green); color: #86efac; } | |
| .alert-danger { background: rgba(239,68,68,0.1); border-color: var(--red); color: #fca5a5; } | |
| .alert-warning { background: rgba(251,191,36,0.1); border-color: var(--gold); color: #fde68a; } | |
| .alert-info { background: rgba(59,130,246,0.1); border-color: var(--blue); color: #93c5fd; } | |
| /* ── BADGES ──────────────────────────────────── */ | |
| .badge { | |
| display: inline-flex; align-items: center; | |
| font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; | |
| padding: 0.2rem 0.6rem; border-radius: 99px; | |
| text-transform: uppercase; | |
| } | |
| .badge-upcoming { background: rgba(59,130,246,0.2); color: var(--blue); } | |
| .badge-locked { background: rgba(251,191,36,0.2); color: var(--gold); } | |
| .badge-live { background: rgba(239,68,68,0.2); color: var(--red); } | |
| .badge-completed{ background: rgba(34,197,94,0.2); color: var(--green); } | |
| .badge-abandoned{ background: rgba(100,116,139,0.2);color: var(--muted2); } | |
| .badge-postponed{ background: rgba(249,115,22,0.2); color: var(--orange); } | |
| .status-dot { | |
| width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; | |
| } | |
| .dot-live { background: var(--red); animation: pulse 1.5s infinite; } | |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } | |
| /* ── TABLES ──────────────────────────────────── */ | |
| .table-wrap { overflow-x: auto; } | |
| table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } | |
| th { | |
| text-align: left; padding: 0.75rem 1rem; | |
| color: var(--muted); font-size: 0.75rem; font-weight: 600; | |
| text-transform: uppercase; letter-spacing: 0.5px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| td { padding: 0.875rem 1rem; border-bottom: 1px solid rgba(30,45,69,0.5); } | |
| tr:last-child td { border-bottom: none; } | |
| tr:hover td { background: rgba(255,255,255,0.02); } | |
| /* ── MATCH CARD ──────────────────────────────── */ | |
| .match-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem; | |
| position: relative; overflow: hidden; | |
| transition: border-color 0.2s, transform 0.2s; | |
| } | |
| .match-card:hover { border-color: var(--muted); } | |
| .match-card.predicted { border-color: rgba(249,115,22,0.4); } | |
| .match-vs { | |
| display: flex; align-items: center; gap: 1rem; | |
| justify-content: space-between; | |
| } | |
| .team-block { text-align: center; flex: 1; } | |
| .team-abbr { | |
| font-family: var(--font-display); | |
| font-size: 2rem; letter-spacing: 2px; | |
| } | |
| .team-name { font-size: 0.75rem; color: var(--muted2); margin-top: 0.2rem; } | |
| .vs-divider { | |
| font-family: var(--font-display); | |
| font-size: 1.2rem; color: var(--muted); | |
| letter-spacing: 2px; flex-shrink: 0; | |
| } | |
| .match-meta { | |
| display: flex; gap: 1rem; flex-wrap: wrap; | |
| margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted2); | |
| } | |
| .match-meta span { display: flex; align-items: center; gap: 0.3rem; } | |
| /* ── GRID HELPERS ────────────────────────────── */ | |
| .grid { display: grid; gap: 1rem; } | |
| .grid-2 { grid-template-columns: repeat(2, 1fr); } | |
| .grid-3 { grid-template-columns: repeat(3, 1fr); } | |
| .grid-4 { grid-template-columns: repeat(4, 1fr); } | |
| .grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } | |
| /* ── MISC ────────────────────────────────────── */ | |
| .text-orange { color: var(--orange); } | |
| .text-gold { color: var(--gold); } | |
| .text-green { color: var(--green); } | |
| .text-red { color: var(--red); } | |
| .text-muted { color: var(--muted2); } | |
| .text-center { text-align: center; } | |
| .text-right { text-align: right; } | |
| .mt-1 { margin-top: 0.5rem; } | |
| .mt-2 { margin-top: 1rem; } | |
| .mt-3 { margin-top: 1.5rem; } | |
| .mb-1 { margin-bottom: 0.5rem; } | |
| .mb-2 { margin-bottom: 1rem; } | |
| .mono { font-family: var(--font-mono); } | |
| .fw-bold { font-weight: 700; } | |
| hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } | |
| .section-title { | |
| font-family: var(--font-display); font-size: 1.5rem; | |
| letter-spacing: 1.5px; margin-bottom: 1rem; color: var(--white); | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .empty-state { text-align: center; padding: 3rem; color: var(--muted); } | |
| .empty-state .icon { font-size: 3rem; margin-bottom: 1rem; } | |
| /* ── STAT BOX ────────────────────────────────── */ | |
| .stat-box { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); padding: 1.25rem; | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-family: var(--font-mono); font-size: 2rem; | |
| font-weight: 700; line-height: 1; | |
| background: linear-gradient(135deg, var(--orange), var(--gold)); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; } | |
| /* ── POINTS METER ────────────────────────────── */ | |
| .points-bar-wrap { margin-top: 0.5rem; } | |
| .points-bar { | |
| height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; | |
| } | |
| .points-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--orange), var(--gold)); | |
| border-radius: 3px; transition: width 0.5s ease; | |
| } | |
| /* ── RESPONSIVE ──────────────────────────────── */ | |
| @media (max-width: 768px) { | |
| .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } | |
| .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; } | |
| .nav-links { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; | |
| background: var(--bg2); padding: 1rem; border-bottom: 1px solid var(--border); gap: 0.5rem; } | |
| .nav-links.open { display: flex; } | |
| .hamburger { display: block; margin-left: auto; } | |
| .page { padding: 1rem; } | |
| .page-title { font-size: 1.8rem; } | |
| } | |
| /* ── ACCENT GLOW ─────────────────────────────── */ | |
| .glow { | |
| position: fixed; pointer-events: none; z-index: 0; | |
| width: 600px; height: 600px; border-radius: 50%; | |
| background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%); | |
| top: -200px; right: -200px; | |
| } | |
| </style> | |
| {% block head %}{% endblock %} | |
| </head> | |
| <body> | |
| <div class="glow"></div> | |
| {% if current_user %} | |
| <nav> | |
| <div class="nav-inner"> | |
| <a href="{{ url_for('index') }}" class="nav-brand" title="{{ app_brand }} — pick name / switch user">DIS <span class="brand-ipl">IPL</span> <span class="brand-year">2026</span></a> | |
| <button class="hamburger" onclick="toggleNav()">☰</button> | |
| <div class="nav-links" id="navLinks"> | |
| <a href="{{ url_for('dashboard') }}" class="nav-link {% if request.endpoint == 'dashboard' %}active{% endif %}">🏠 Home</a> | |
| <a href="{{ url_for('user_guide') }}" class="nav-link {% if request.endpoint == 'user_guide' %}active{% endif %}">📘 Guide</a> | |
| <a href="{{ url_for('matches') }}" class="nav-link {% if request.endpoint == 'matches' %}active{% endif %}">📅 Matches</a> | |
| <a href="{{ url_for('team_pool') }}" class="nav-link {% if request.endpoint == 'team_pool' %}active{% endif %}">🃏 Pool</a> | |
| <a href="{{ url_for('leaderboard') }}"class="nav-link {% if request.endpoint == 'leaderboard'%}active{% endif %}">🏆 Board</a> | |
| <a href="{{ url_for('analytics') }}" class="nav-link {% if request.endpoint == 'analytics' %}active{% endif %}">📈 Analytics</a> | |
| <a href="{{ url_for('history') }}" class="nav-link {% if request.endpoint == 'history' %}active{% endif %}">📊 My Stats</a> | |
| {% if admin_login_configured %} | |
| {% if staff_session %} | |
| <a href="{{ url_for('admin') }}" class="nav-link {% if request.endpoint and request.endpoint.startswith('admin') %}active{% endif %}">⚙️ Admin</a> | |
| {% else %} | |
| <a href="{{ url_for('admin_login', next=url_for('admin')) }}" class="nav-link">🔐 Admin</a> | |
| {% endif %} | |
| {% endif %} | |
| <span class="pts-badge">{{ '%.0f'|format(current_user.points) }} pts</span> | |
| </div> | |
| </div> | |
| </nav> | |
| {% endif %} | |
| <div class="alerts"> | |
| {% for cat, msg in get_flashed_messages(with_categories=True) %} | |
| <div class="alert alert-{{ cat }}" role="alert"> | |
| {% if cat == 'success' %}✅{% elif cat == 'danger' %}❌{% elif cat == 'warning' %}⚠️{% else %}ℹ️{% endif %} | |
| {{ msg }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% block content %}{% endblock %} | |
| <script> | |
| function toggleNav() { | |
| document.getElementById('navLinks').classList.toggle('open'); | |
| } | |
| // Auto-dismiss alerts | |
| setTimeout(() => { | |
| document.querySelectorAll('.alert').forEach(a => { | |
| a.style.transition = 'opacity 0.5s'; | |
| a.style.opacity = '0'; | |
| setTimeout(() => a.remove(), 500); | |
| }); | |
| }, 4000); | |
| </script> | |
| {% block scripts %}{% endblock %} | |
| </body> | |
| </html> | |