1633 lines
62 KiB
HTML
1633 lines
62 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Football League Admin — Mockup</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-base: #0a0e1a;
|
||
--bg-surface: #111827;
|
||
--bg-elevated: #1a2235;
|
||
--bg-overlay: #243047;
|
||
--brand-primary: #22c55e;
|
||
--brand-accent: #3b82f6;
|
||
--brand-danger: #ef4444;
|
||
--brand-warning: #f59e0b;
|
||
--text-primary: #f9fafb;
|
||
--text-secondary: #9ca3af;
|
||
--text-muted: #4b5563;
|
||
--border: #1e2d45;
|
||
--border-active: #22c55e;
|
||
--font-display: 'Bebas Neue', sans-serif;
|
||
--font-body: 'IBM Plex Sans', sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: var(--bg-base);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-body);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* NAV MOCKUP */
|
||
.mockup-nav {
|
||
background: #070b14;
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 10px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.mockup-nav span {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
margin-right: 8px;
|
||
}
|
||
.nav-btn {
|
||
padding: 5px 12px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-surface);
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
font-family: var(--font-body);
|
||
transition: all 0.15s;
|
||
}
|
||
.nav-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
|
||
.nav-btn.active { background: var(--brand-primary); color: #000; border-color: var(--brand-primary); font-weight: 600; }
|
||
|
||
/* LAYOUT */
|
||
.app {
|
||
display: flex;
|
||
flex: 1;
|
||
height: calc(100vh - 45px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* SIDEBAR */
|
||
.sidebar {
|
||
width: 220px;
|
||
background: #0d1220;
|
||
border-right: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
overflow-y: auto;
|
||
}
|
||
.sidebar-logo {
|
||
padding: 20px 16px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.logo-icon {
|
||
width: 32px; height: 32px;
|
||
background: var(--brand-primary);
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
}
|
||
.logo-text {
|
||
font-family: var(--font-display);
|
||
font-size: 18px;
|
||
letter-spacing: 1px;
|
||
color: var(--text-primary);
|
||
}
|
||
.logo-sub {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.sidebar-section {
|
||
padding: 12px 8px 4px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 9px 16px;
|
||
cursor: pointer;
|
||
border-left: 3px solid transparent;
|
||
transition: all 0.15s;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
position: relative;
|
||
}
|
||
.nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
|
||
.nav-item.active {
|
||
border-left-color: var(--brand-primary);
|
||
background: rgba(34, 197, 94, 0.08);
|
||
color: var(--brand-primary);
|
||
font-weight: 500;
|
||
}
|
||
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
|
||
.live-badge {
|
||
margin-left: auto;
|
||
background: var(--brand-danger);
|
||
color: white;
|
||
font-size: 9px;
|
||
padding: 2px 5px;
|
||
border-radius: 4px;
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
animation: pulse-badge 1.5s infinite;
|
||
}
|
||
@keyframes pulse-badge {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.sidebar-bottom {
|
||
margin-top: auto;
|
||
border-top: 1px solid var(--border);
|
||
padding: 8px;
|
||
}
|
||
|
||
/* HEADER */
|
||
.header {
|
||
height: 52px;
|
||
background: var(--bg-surface);
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24px;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
.header-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
.header-breadcrumb {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
}
|
||
.header-right {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.live-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
color: var(--brand-danger);
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
}
|
||
.live-indicator:hover { background: rgba(239, 68, 68, 0.2); }
|
||
.live-dot {
|
||
width: 6px; height: 6px;
|
||
background: var(--brand-danger);
|
||
border-radius: 50%;
|
||
animation: pulse-dot 1.5s infinite;
|
||
}
|
||
@keyframes pulse-dot {
|
||
0%, 100% { transform: scale(1); opacity: 1; }
|
||
50% { transform: scale(1.4); opacity: 0.6; }
|
||
}
|
||
.user-avatar {
|
||
width: 30px; height: 30px;
|
||
background: var(--bg-overlay);
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 13px;
|
||
border: 1px solid var(--border);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* MAIN CONTENT */
|
||
.main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 24px;
|
||
}
|
||
|
||
/* PAGE VIEWS */
|
||
.page { display: none; }
|
||
.page.active { display: block; }
|
||
|
||
/* COMPONENTS */
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-title {
|
||
font-family: var(--font-display);
|
||
font-size: 28px;
|
||
letter-spacing: 1px;
|
||
color: var(--text-primary);
|
||
}
|
||
.page-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-family: var(--font-body);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: all 0.15s;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.btn-primary { background: var(--brand-primary); color: #000; }
|
||
.btn-primary:hover { background: #16a34a; }
|
||
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
|
||
.btn-secondary:hover { background: var(--bg-overlay); }
|
||
.btn-danger { background: rgba(239,68,68,0.15); color: var(--brand-danger); border: 1px solid rgba(239,68,68,0.3); }
|
||
.btn-live { background: var(--brand-danger); color: white; }
|
||
.btn-live:hover { background: #dc2626; }
|
||
.btn-sm { padding: 5px 10px; font-size: 12px; }
|
||
|
||
.badge {
|
||
display: inline-flex; align-items: center;
|
||
padding: 3px 8px; border-radius: 20px;
|
||
font-size: 11px; font-weight: 600;
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.badge-live { background: rgba(239,68,68,0.15); color: var(--brand-danger); border: 1px solid rgba(239,68,68,0.3); }
|
||
.badge-scheduled { background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border); }
|
||
.badge-finished { background: rgba(59,130,246,0.15); color: var(--brand-accent); border: 1px solid rgba(59,130,246,0.3); }
|
||
.badge-halftime { background: rgba(245,158,11,0.15); color: var(--brand-warning); border: 1px solid rgba(245,158,11,0.3); }
|
||
|
||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
|
||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||
|
||
.card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
transition: all 0.2s;
|
||
}
|
||
.card:hover { border-color: var(--border-active); box-shadow: 0 0 0 1px rgba(34,197,94,0.1); }
|
||
.card-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 6px;
|
||
}
|
||
.card-value {
|
||
font-family: var(--font-display);
|
||
font-size: 32px;
|
||
color: var(--text-primary);
|
||
}
|
||
.card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
|
||
|
||
/* GAME CARD */
|
||
.game-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
transition: all 0.2s;
|
||
margin-bottom: 10px;
|
||
}
|
||
.game-card:hover { border-color: rgba(34,197,94,0.3); }
|
||
.game-card.live-card { border-color: rgba(239,68,68,0.4); background: linear-gradient(135deg, rgba(239,68,68,0.05), var(--bg-surface)); }
|
||
.game-meta {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
margin-bottom: 12px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.game-teams {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
.team-side {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.team-side.away { flex-direction: row-reverse; text-align: right; }
|
||
.team-crest {
|
||
width: 36px; height: 36px;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
background: var(--bg-elevated);
|
||
flex-shrink: 0;
|
||
}
|
||
.team-name { font-size: 15px; font-weight: 500; }
|
||
.team-short { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }
|
||
.score-display {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 0 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.score-num {
|
||
font-family: var(--font-display);
|
||
font-size: 36px;
|
||
color: var(--text-primary);
|
||
line-height: 1;
|
||
min-width: 30px;
|
||
text-align: center;
|
||
}
|
||
.score-sep { font-size: 20px; color: var(--text-muted); }
|
||
.game-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* LIVE EDITOR */
|
||
.live-editor {
|
||
background: var(--bg-surface);
|
||
border: 1px solid rgba(239,68,68,0.3);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
.live-editor-header {
|
||
background: rgba(239,68,68,0.08);
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
border-bottom: 1px solid rgba(239,68,68,0.2);
|
||
}
|
||
.live-timer {
|
||
font-family: var(--font-mono);
|
||
font-size: 22px;
|
||
color: var(--brand-danger);
|
||
font-weight: 600;
|
||
letter-spacing: 2px;
|
||
}
|
||
.live-editor-body { padding: 32px 40px; }
|
||
.scoreboard {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 32px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.scoreboard-team {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
.scoreboard-crest { font-size: 48px; margin-bottom: 8px; }
|
||
.scoreboard-name {
|
||
font-family: var(--font-display);
|
||
font-size: 22px;
|
||
letter-spacing: 2px;
|
||
color: var(--text-primary);
|
||
}
|
||
.scoreboard-score {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
.score-big {
|
||
font-family: var(--font-display);
|
||
font-size: 80px;
|
||
color: var(--text-primary);
|
||
line-height: 1;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
.score-big-sep { font-family: var(--font-display); font-size: 48px; color: var(--text-muted); }
|
||
|
||
.score-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.score-ctrl-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.ctrl-label { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 1px; }
|
||
.ctrl-btns { display: flex; gap: 8px; }
|
||
.btn-score {
|
||
width: 52px; height: 52px;
|
||
border-radius: 12px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
transition: all 0.1s;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.btn-score.plus { background: var(--brand-primary); color: #000; }
|
||
.btn-score.plus:hover { background: #16a34a; transform: scale(1.05); }
|
||
.btn-score.minus { background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border); }
|
||
.btn-score.minus:hover { background: var(--bg-elevated); }
|
||
.btn-event {
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-elevated);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-family: var(--font-body);
|
||
transition: all 0.15s;
|
||
display: flex; align-items: center; gap: 5px;
|
||
}
|
||
.btn-event:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||
|
||
.events-section { border-top: 1px solid var(--border); padding: 20px 40px; }
|
||
.events-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
.events-title {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
}
|
||
.event-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(30,45,69,0.5);
|
||
font-size: 13px;
|
||
}
|
||
.event-min {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--brand-warning);
|
||
min-width: 32px;
|
||
}
|
||
.event-icon { font-size: 16px; }
|
||
.event-text { color: var(--text-secondary); }
|
||
.event-club { margin-left: auto; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
|
||
|
||
/* TABLE */
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
.data-table th {
|
||
text-align: left;
|
||
padding: 8px 12px;
|
||
font-size: 10px;
|
||
font-family: var(--font-mono);
|
||
color: var(--text-muted);
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
border-bottom: 1px solid var(--border);
|
||
font-weight: 500;
|
||
}
|
||
.data-table td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid rgba(30,45,69,0.5);
|
||
color: var(--text-secondary);
|
||
vertical-align: middle;
|
||
}
|
||
.data-table tr:hover td { background: rgba(26,34,53,0.5); color: var(--text-primary); }
|
||
.td-pos {
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
color: var(--text-muted) !important;
|
||
font-size: 12px;
|
||
}
|
||
.td-pts {
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
color: var(--text-primary) !important;
|
||
}
|
||
.club-cell {
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.table-crest { font-size: 20px; }
|
||
|
||
/* PLAYER CARD */
|
||
.player-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
transition: all 0.2s;
|
||
margin-bottom: 8px;
|
||
}
|
||
.player-card:hover { border-color: rgba(34,197,94,0.3); }
|
||
.player-num {
|
||
font-family: var(--font-display);
|
||
font-size: 28px;
|
||
color: var(--text-muted);
|
||
min-width: 36px;
|
||
text-align: center;
|
||
}
|
||
.player-avatar {
|
||
width: 40px; height: 40px;
|
||
background: var(--bg-elevated);
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
.player-info { flex: 1; }
|
||
.player-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
||
.player-meta { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
|
||
.player-stats { display: flex; gap: 16px; }
|
||
.stat-item { text-align: center; }
|
||
.stat-val { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text-primary); }
|
||
.stat-lbl { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 1px; }
|
||
|
||
/* DASHBOARD */
|
||
.dashboard-live-alert {
|
||
background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04));
|
||
border: 1px solid rgba(239,68,68,0.35);
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.dashboard-live-alert:hover { border-color: rgba(239,68,68,0.6); }
|
||
.live-pulse {
|
||
width: 12px; height: 12px;
|
||
background: var(--brand-danger);
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
.live-pulse::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -4px;
|
||
background: var(--brand-danger);
|
||
border-radius: 50%;
|
||
opacity: 0.3;
|
||
animation: pulse-ring 1.5s infinite;
|
||
}
|
||
@keyframes pulse-ring {
|
||
0% { transform: scale(1); opacity: 0.3; }
|
||
100% { transform: scale(2); opacity: 0; }
|
||
}
|
||
.live-alert-text { flex: 1; }
|
||
.live-alert-title { font-size: 13px; font-weight: 600; color: var(--brand-danger); margin-bottom: 2px; }
|
||
.live-alert-sub { font-size: 12px; color: var(--text-secondary); }
|
||
.live-score-mini {
|
||
font-family: var(--font-display);
|
||
font-size: 24px;
|
||
color: var(--text-primary);
|
||
letter-spacing: 4px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 12px;
|
||
font-family: var(--font-mono);
|
||
color: var(--text-muted);
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
/* FILTER TABS */
|
||
.filter-tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 4px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.filter-tab {
|
||
padding: 6px 14px;
|
||
border-radius: 7px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
font-family: var(--font-body);
|
||
transition: all 0.15s;
|
||
}
|
||
.filter-tab.active {
|
||
background: var(--bg-elevated);
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* SEPARATORS */
|
||
.standings-sep {
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--brand-accent), transparent);
|
||
margin: 0;
|
||
opacity: 0.4;
|
||
}
|
||
.standings-sep.danger {
|
||
background: linear-gradient(90deg, var(--brand-danger), transparent);
|
||
}
|
||
|
||
.search-bar {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 8px 14px;
|
||
color: var(--text-primary);
|
||
font-size: 13px;
|
||
font-family: var(--font-body);
|
||
width: 240px;
|
||
outline: none;
|
||
transition: all 0.15s;
|
||
}
|
||
.search-bar:focus { border-color: var(--brand-primary); }
|
||
.search-bar::placeholder { color: var(--text-muted); }
|
||
|
||
/* TOOLTIP */
|
||
.tooltip {
|
||
position: fixed;
|
||
background: var(--bg-overlay);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
color: var(--text-primary);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
z-index: 1000;
|
||
max-width: 200px;
|
||
}
|
||
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar { width: 4px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--bg-overlay); border-radius: 2px; }
|
||
|
||
.form-row { display: flex; gap: 12px; margin-bottom: 14px; }
|
||
.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; }
|
||
.form-label { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
|
||
.form-input {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 9px 12px;
|
||
color: var(--text-primary);
|
||
font-size: 13px;
|
||
font-family: var(--font-body);
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.form-input:focus { border-color: var(--brand-primary); }
|
||
.form-select {
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 9px 12px;
|
||
color: var(--text-primary);
|
||
font-size: 13px;
|
||
font-family: var(--font-body);
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.modal-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.7);
|
||
z-index: 500;
|
||
backdrop-filter: blur(4px);
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.modal-overlay.open { display: flex; }
|
||
.modal {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
width: 440px;
|
||
max-width: 90vw;
|
||
overflow: hidden;
|
||
}
|
||
.modal-header {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.modal-title { font-size: 15px; font-weight: 600; }
|
||
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
|
||
.modal-body { padding: 20px; }
|
||
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
|
||
|
||
.animate-in {
|
||
animation: fadeSlideIn 0.3s ease forwards;
|
||
}
|
||
@keyframes fadeSlideIn {
|
||
from { opacity: 0; transform: translateY(8px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* Score flash */
|
||
.score-flash {
|
||
animation: scoreFlash 0.6s ease;
|
||
}
|
||
@keyframes scoreFlash {
|
||
0% { color: var(--brand-primary); transform: scale(1.2); }
|
||
100% { color: var(--text-primary); transform: scale(1); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- MOCKUP NAV -->
|
||
<div class="mockup-nav">
|
||
<span>MOCKUP SCREENS:</span>
|
||
<button class="nav-btn active" onclick="showPage('dashboard', this)">Dashboard</button>
|
||
<button class="nav-btn" onclick="showPage('games', this)">Jogos</button>
|
||
<button class="nav-btn" onclick="showPage('live', this)">⚡ Live Editor</button>
|
||
<button class="nav-btn" onclick="showPage('clubs', this)">Clubes</button>
|
||
<button class="nav-btn" onclick="showPage('players', this)">Jogadores</button>
|
||
<button class="nav-btn" onclick="showPage('standings', this)">Classificação</button>
|
||
<button class="nav-btn" onclick="showPage('newgame', this)">+ Novo Jogo</button>
|
||
</div>
|
||
|
||
<div class="app">
|
||
<!-- SIDEBAR -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-logo">
|
||
<div class="logo-icon">⚽</div>
|
||
<div>
|
||
<div class="logo-text">LIGA ADMIN</div>
|
||
<div class="logo-sub">2024/2025</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-section">Principal</div>
|
||
<div class="nav-item active" onclick="switchNav(this); showPage('dashboard', document.querySelectorAll('.nav-btn')[0])">
|
||
<span class="icon">◉</span> Dashboard
|
||
</div>
|
||
<div class="nav-item" onclick="switchNav(this); showPageByBtn('games')">
|
||
<span class="icon">🗓</span> Jogos
|
||
<span class="live-badge">LIVE</span>
|
||
</div>
|
||
|
||
<div class="sidebar-section">Gestão</div>
|
||
<div class="nav-item" onclick="switchNav(this); showPageByBtn('clubs')">
|
||
<span class="icon">🛡</span> Clubes
|
||
</div>
|
||
<div class="nav-item" onclick="switchNav(this); showPageByBtn('players')">
|
||
<span class="icon">👤</span> Jogadores
|
||
</div>
|
||
<div class="nav-item" onclick="switchNav(this); showPageByBtn('standings')">
|
||
<span class="icon">🏆</span> Classificação
|
||
</div>
|
||
<div class="nav-item">
|
||
<span class="icon">⚽</span> Artilheiros
|
||
</div>
|
||
|
||
<div class="sidebar-section">Config</div>
|
||
<div class="nav-item">
|
||
<span class="icon">⚙</span> Definições
|
||
</div>
|
||
|
||
<div class="sidebar-bottom">
|
||
<div class="nav-item" style="color: var(--brand-danger);">
|
||
<span class="icon">↪</span> Logout
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<main class="main">
|
||
<div class="header">
|
||
<div>
|
||
<div class="header-title" id="headerTitle">Dashboard</div>
|
||
<div class="header-breadcrumb" id="headerBreadcrumb">Liga 2024/2025 • Jornada 15</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="live-indicator" onclick="showPage('live', document.querySelectorAll('.nav-btn')[2])">
|
||
<div class="live-dot"></div>
|
||
Porto 2–1 Benfica • 71'
|
||
</div>
|
||
<div class="user-avatar">👤</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- ====== DASHBOARD ====== -->
|
||
<div class="page active" id="page-dashboard">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">DASHBOARD</div>
|
||
<div class="page-sub">Visão geral da liga</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live Alert -->
|
||
<div class="dashboard-live-alert" onclick="showPage('live', document.querySelectorAll('.nav-btn')[2])">
|
||
<div class="live-pulse"></div>
|
||
<div class="live-alert-text">
|
||
<div class="live-alert-title">● JOGO A DECORRER</div>
|
||
<div class="live-alert-sub">FC Porto vs SL Benfica • Jornada 15 • 71'</div>
|
||
</div>
|
||
<div class="live-score-mini">2 — 1</div>
|
||
<button class="btn btn-live btn-sm">Gerir →</button>
|
||
</div>
|
||
|
||
<!-- Stats Cards -->
|
||
<div class="grid-4" style="margin-bottom: 24px;">
|
||
<div class="card">
|
||
<div class="card-label">Jornada Atual</div>
|
||
<div class="card-value">15</div>
|
||
<div class="card-sub">de 34 jornadas</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-label">Jogos Disputados</div>
|
||
<div class="card-value">104</div>
|
||
<div class="card-sub">+8 esta jornada</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-label">Golos Marcados</div>
|
||
<div class="card-value">287</div>
|
||
<div class="card-sub">Média: 2.76/jogo</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-label">Clubes</div>
|
||
<div class="card-value">18</div>
|
||
<div class="card-sub">Liga profissional</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- Proximos jogos -->
|
||
<div>
|
||
<div class="section-title">Próximos Jogos</div>
|
||
<div class="game-card">
|
||
<div class="game-meta"><span class="badge badge-scheduled">AGENDADO</span> Sáb • 15 Mar • 20:30</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🦁</div><div><div class="team-name">Sporting CP</div><div class="team-short">SCP</div></div></div>
|
||
<div class="score-display"><span class="score-num" style="font-size:22px;color:var(--text-muted)">vs</span></div>
|
||
<div class="team-side away"><div class="team-crest">🐉</div><div><div class="team-name">SC Braga</div><div class="team-short">SCB</div></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="game-card">
|
||
<div class="game-meta"><span class="badge badge-scheduled">AGENDADO</span> Dom • 16 Mar • 18:00</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🌊</div><div><div class="team-name">Vitória SC</div><div class="team-short">VSC</div></div></div>
|
||
<div class="score-display"><span class="score-num" style="font-size:22px;color:var(--text-muted)">vs</span></div>
|
||
<div class="team-side away"><div class="team-crest">🔵</div><div><div class="team-name">FC Vizela</div><div class="team-short">VIZ</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Top Artilheiros -->
|
||
<div>
|
||
<div class="section-title">Top Artilheiros</div>
|
||
<div class="player-card">
|
||
<div class="player-num" style="color:var(--brand-warning)">1</div>
|
||
<div class="player-avatar">⚽</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Mehdi Taremi</div>
|
||
<div class="player-meta">FC Porto • ATA</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val">18</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">7</div><div class="stat-lbl">ASS</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="player-card">
|
||
<div class="player-num" style="color:var(--text-secondary)">2</div>
|
||
<div class="player-avatar">⚽</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Gonçalo Ramos</div>
|
||
<div class="player-meta">SL Benfica • ATA</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val">14</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">5</div><div class="stat-lbl">ASS</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="player-card">
|
||
<div class="player-num" style="color:var(--text-muted)">3</div>
|
||
<div class="player-avatar">⚽</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Francisco Trincão</div>
|
||
<div class="player-meta">Sporting CP • ATA</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val">11</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">9</div><div class="stat-lbl">ASS</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== JOGOS ====== -->
|
||
<div class="page" id="page-games">
|
||
<div class="page-header">
|
||
<div><div class="page-title">JOGOS</div><div class="page-sub">Jornada 15 de 34</div></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<button class="btn btn-secondary" style="font-size:12px;">‹ Jornada 14</button>
|
||
<button class="btn btn-secondary" style="font-size:12px;">Jornada 15 ▾</button>
|
||
<button class="btn btn-secondary" style="font-size:12px;">Jornada 16 ›</button>
|
||
<button class="btn btn-primary" onclick="showPage('newgame', document.querySelectorAll('.nav-btn')[6])">+ Novo Jogo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-tabs">
|
||
<button class="filter-tab active">Todos (8)</button>
|
||
<button class="filter-tab">Agendados (5)</button>
|
||
<button class="filter-tab">Live (1)</button>
|
||
<button class="filter-tab">Terminados (2)</button>
|
||
</div>
|
||
|
||
<!-- Live Game -->
|
||
<div class="game-card live-card">
|
||
<div class="game-meta">
|
||
<span class="badge badge-live">● LIVE</span>
|
||
<span style="color:var(--brand-danger);font-family:var(--font-mono)">71'</span>
|
||
Estádio do Dragão
|
||
</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🐉</div><div><div class="team-name">FC Porto</div><div class="team-short">FCP</div></div></div>
|
||
<div class="score-display">
|
||
<span class="score-num">2</span>
|
||
<span class="score-sep">—</span>
|
||
<span class="score-num">1</span>
|
||
</div>
|
||
<div class="team-side away"><div class="team-crest">🦅</div><div><div class="team-name">SL Benfica</div><div class="team-short">SLB</div></div></div>
|
||
</div>
|
||
<div class="game-actions">
|
||
<button class="btn btn-live btn-sm" onclick="showPage('live', document.querySelectorAll('.nav-btn')[2])">⚡ Gerir ao Vivo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Finished Game -->
|
||
<div class="game-card">
|
||
<div class="game-meta"><span class="badge badge-finished">TERMINADO</span> Sex 14 Mar • 20:30</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🦁</div><div><div class="team-name">Sporting CP</div></div></div>
|
||
<div class="score-display"><span class="score-num">3</span><span class="score-sep">—</span><span class="score-num">0</span></div>
|
||
<div class="team-side away"><div class="team-crest">🔵</div><div><div class="team-name">FC Arouca</div></div></div>
|
||
</div>
|
||
<div class="game-actions">
|
||
<button class="btn btn-secondary btn-sm">Ver Eventos</button>
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scheduled Games -->
|
||
<div class="game-card">
|
||
<div class="game-meta"><span class="badge badge-scheduled">AGENDADO</span> Sáb 15 Mar • 18:00</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🌊</div><div><div class="team-name">Vitória SC</div></div></div>
|
||
<div class="score-display"><span style="font-family:var(--font-display);font-size:20px;color:var(--text-muted)">18:00</span></div>
|
||
<div class="team-side away"><div class="team-crest">⚡</div><div><div class="team-name">Casa Pia AC</div></div></div>
|
||
</div>
|
||
<div class="game-actions">
|
||
<button class="btn btn-primary btn-sm" onclick="showPage('live', document.querySelectorAll('.nav-btn')[2])">▶ Iniciar Jogo</button>
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
<button class="btn btn-danger btn-sm">🗑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<div class="game-meta"><span class="badge badge-scheduled">AGENDADO</span> Sáb 15 Mar • 20:30</div>
|
||
<div class="game-teams">
|
||
<div class="team-side"><div class="team-crest">🐉</div><div><div class="team-name">SC Braga</div></div></div>
|
||
<div class="score-display"><span style="font-family:var(--font-display);font-size:20px;color:var(--text-muted)">20:30</span></div>
|
||
<div class="team-side away"><div class="team-crest">🦅</div><div><div class="team-name">Gil Vicente</div></div></div>
|
||
</div>
|
||
<div class="game-actions">
|
||
<button class="btn btn-primary btn-sm">▶ Iniciar Jogo</button>
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
<button class="btn btn-danger btn-sm">🗑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== LIVE EDITOR ====== -->
|
||
<div class="page" id="page-live">
|
||
<div class="page-header">
|
||
<div><div class="page-title">LIVE EDITOR</div><div class="page-sub">FC Porto vs SL Benfica • Jornada 15</div></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<button class="btn btn-secondary" onclick="document.getElementById('halfModal').classList.toggle('open')">⏸ Intervalo</button>
|
||
<button class="btn btn-danger" onclick="document.getElementById('endModal').classList.toggle('open')">■ Terminar Jogo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="live-editor">
|
||
<div class="live-editor-header">
|
||
<div class="live-dot" style="width:10px;height:10px;"></div>
|
||
<div class="live-timer" id="liveTimer">71:23</div>
|
||
<span class="badge badge-live">● LIVE</span>
|
||
<div style="margin-left:auto;display:flex;gap:8px;">
|
||
<button class="btn-event" onclick="document.getElementById('goalModal').classList.add('open'); document.getElementById('goalModalTeam').textContent='FC Porto'">🟢 + Evento</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="live-editor-body">
|
||
<div class="scoreboard">
|
||
<div class="scoreboard-team">
|
||
<div class="scoreboard-crest">🐉</div>
|
||
<div class="scoreboard-name">FC PORTO</div>
|
||
</div>
|
||
<div class="scoreboard-score">
|
||
<div>
|
||
<div class="score-big" id="scoreHome">2</div>
|
||
</div>
|
||
<div class="score-big-sep">—</div>
|
||
<div>
|
||
<div class="score-big" id="scoreAway">1</div>
|
||
</div>
|
||
</div>
|
||
<div class="scoreboard-team">
|
||
<div class="scoreboard-crest">🦅</div>
|
||
<div class="scoreboard-name">BENFICA</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="score-controls">
|
||
<div class="score-ctrl-group">
|
||
<div class="ctrl-label">FC PORTO</div>
|
||
<div class="ctrl-btns">
|
||
<button class="btn-score minus" onclick="adjustScore('home', -1)">−</button>
|
||
<button class="btn-score plus" onclick="openGoalModal('FC Porto', 'home')">+</button>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-top:6px;">
|
||
<button class="btn-event btn-sm" onclick="addEvent('🟨', 'Cartão Amarelo', 'FC Porto')">🟨</button>
|
||
<button class="btn-event btn-sm" onclick="addEvent('🟥', 'Cartão Vermelho', 'FC Porto')">🟥</button>
|
||
<button class="btn-event btn-sm" onclick="addEvent('🔄', 'Substituição', 'FC Porto')">🔄</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="width:60px;"></div>
|
||
|
||
<div class="score-ctrl-group">
|
||
<div class="ctrl-label">BENFICA</div>
|
||
<div class="ctrl-btns">
|
||
<button class="btn-score plus" onclick="openGoalModal('Benfica', 'away')">+</button>
|
||
<button class="btn-score minus" onclick="adjustScore('away', -1)">−</button>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-top:6px;">
|
||
<button class="btn-event btn-sm" onclick="addEvent('🟨', 'Cartão Amarelo', 'Benfica')">🟨</button>
|
||
<button class="btn-event btn-sm" onclick="addEvent('🟥', 'Cartão Vermelho', 'Benfica')">🟥</button>
|
||
<button class="btn-event btn-sm" onclick="addEvent('🔄', 'Substituição', 'Benfica')">🔄</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="events-section">
|
||
<div class="events-header">
|
||
<div class="events-title">Eventos do Jogo</div>
|
||
<button class="btn btn-secondary btn-sm" onclick="undoLastEvent()">↩ Desfazer</button>
|
||
</div>
|
||
<div id="eventsList">
|
||
<div class="event-item">
|
||
<span class="event-min">23'</span>
|
||
<span class="event-icon">⚽</span>
|
||
<span class="event-text">Mehdi Taremi</span>
|
||
<span class="event-club">FC Porto</span>
|
||
</div>
|
||
<div class="event-item">
|
||
<span class="event-min">31'</span>
|
||
<span class="event-icon">🟨</span>
|
||
<span class="event-text">João Mário</span>
|
||
<span class="event-club">Benfica</span>
|
||
</div>
|
||
<div class="event-item">
|
||
<span class="event-min">58'</span>
|
||
<span class="event-icon">⚽</span>
|
||
<span class="event-text">Gonçalo Ramos</span>
|
||
<span class="event-club">Benfica</span>
|
||
</div>
|
||
<div class="event-item">
|
||
<span class="event-min">71'</span>
|
||
<span class="event-icon">⚽</span>
|
||
<span class="event-text">Evanilson</span>
|
||
<span class="event-club">FC Porto</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== CLUBES ====== -->
|
||
<div class="page" id="page-clubs">
|
||
<div class="page-header">
|
||
<div><div class="page-title">CLUBES</div><div class="page-sub">18 clubes na liga</div></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<input class="search-bar" placeholder="🔍 Pesquisar clube...">
|
||
<button class="btn btn-primary">+ Novo Clube</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="card" style="cursor:pointer;">
|
||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px;">
|
||
<div style="font-size:40px;">🐉</div>
|
||
<div>
|
||
<div style="font-family:var(--font-display);font-size:20px;letter-spacing:1px;">FC PORTO</div>
|
||
<div style="font-size:12px;color:var(--text-muted);font-family:var(--font-mono);">FCP • Porto</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--border);">
|
||
<div class="stat-item"><div class="stat-val">24</div><div class="stat-lbl">JOGS</div></div>
|
||
<div class="stat-item"><div class="stat-val">42</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val" style="color:var(--brand-primary)">65</div><div class="stat-lbl">PONTOS</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-top:12px;">
|
||
<button class="btn btn-secondary btn-sm" style="flex:1;">Ver Jogadores</button>
|
||
<button class="btn btn-secondary btn-sm">✏</button>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="cursor:pointer;">
|
||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px;">
|
||
<div style="font-size:40px;">🦅</div>
|
||
<div>
|
||
<div style="font-family:var(--font-display);font-size:20px;letter-spacing:1px;">SL BENFICA</div>
|
||
<div style="font-size:12px;color:var(--text-muted);font-family:var(--font-mono);">SLB • Lisboa</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--border);">
|
||
<div class="stat-item"><div class="stat-val">24</div><div class="stat-lbl">JOGS</div></div>
|
||
<div class="stat-item"><div class="stat-val">38</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val" style="color:var(--brand-primary)">61</div><div class="stat-lbl">PONTOS</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-top:12px;">
|
||
<button class="btn btn-secondary btn-sm" style="flex:1;">Ver Jogadores</button>
|
||
<button class="btn btn-secondary btn-sm">✏</button>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="cursor:pointer;">
|
||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px;">
|
||
<div style="font-size:40px;">🦁</div>
|
||
<div>
|
||
<div style="font-family:var(--font-display);font-size:20px;letter-spacing:1px;">SPORTING CP</div>
|
||
<div style="font-size:12px;color:var(--text-muted);font-family:var(--font-mono);">SCP • Lisboa</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--border);">
|
||
<div class="stat-item"><div class="stat-val">24</div><div class="stat-lbl">JOGS</div></div>
|
||
<div class="stat-item"><div class="stat-val">35</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val" style="color:var(--brand-primary)">58</div><div class="stat-lbl">PONTOS</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-top:12px;">
|
||
<button class="btn btn-secondary btn-sm" style="flex:1;">Ver Jogadores</button>
|
||
<button class="btn btn-secondary btn-sm">✏</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== JOGADORES ====== -->
|
||
<div class="page" id="page-players">
|
||
<div class="page-header">
|
||
<div><div class="page-title">JOGADORES</div><div class="page-sub">324 jogadores registados</div></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<input class="search-bar" placeholder="🔍 Pesquisar jogador...">
|
||
<select class="form-select" style="font-size:13px;">
|
||
<option>Todos os clubes</option>
|
||
<option>FC Porto</option>
|
||
<option>SL Benfica</option>
|
||
<option>Sporting CP</option>
|
||
</select>
|
||
<select class="form-select" style="font-size:13px;">
|
||
<option>Posição</option>
|
||
<option>GR</option><option>DEF</option><option>MED</option><option>ATA</option>
|
||
</select>
|
||
<button class="btn btn-primary">+ Novo Jogador</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="player-card">
|
||
<div class="player-num">9</div>
|
||
<div class="player-avatar">👤</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Mehdi Taremi</div>
|
||
<div class="player-meta">FC Porto • ATA • 🇮🇷 Iran</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val" style="color:var(--brand-primary)">18</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">7</div><div class="stat-lbl">ASSIST</div></div>
|
||
<div class="stat-item"><div class="stat-val">3</div><div class="stat-lbl">🟨</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-left:16px;">
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
</div>
|
||
</div>
|
||
<div class="player-card">
|
||
<div class="player-num">7</div>
|
||
<div class="player-avatar">👤</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Gonçalo Ramos</div>
|
||
<div class="player-meta">SL Benfica • ATA • 🇵🇹 Portugal</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val" style="color:var(--brand-primary)">14</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">5</div><div class="stat-lbl">ASSIST</div></div>
|
||
<div class="stat-item"><div class="stat-val">2</div><div class="stat-lbl">🟨</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-left:16px;">
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
</div>
|
||
</div>
|
||
<div class="player-card" style="opacity:0.6">
|
||
<div class="player-num">10</div>
|
||
<div class="player-avatar">👤</div>
|
||
<div class="player-info">
|
||
<div class="player-name">Francisco Trincão</div>
|
||
<div class="player-meta">Sporting CP • ATA • 🇵🇹 Portugal</div>
|
||
</div>
|
||
<div class="player-stats">
|
||
<div class="stat-item"><div class="stat-val">11</div><div class="stat-lbl">GOLOS</div></div>
|
||
<div class="stat-item"><div class="stat-val">9</div><div class="stat-lbl">ASSIST</div></div>
|
||
<div class="stat-item"><div class="stat-val">1</div><div class="stat-lbl">🟨</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;margin-left:16px;">
|
||
<span class="badge" style="background:rgba(245,158,11,0.15);color:var(--brand-warning);border:1px solid rgba(245,158,11,0.3);">LESIONADO</span>
|
||
<button class="btn btn-secondary btn-sm">✏ Editar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== CLASSIFICAÇÃO ====== -->
|
||
<div class="page" id="page-standings">
|
||
<div class="page-header">
|
||
<div><div class="page-title">CLASSIFICAÇÃO</div><div class="page-sub">Liga 2024/2025 • Jornada 15</div></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<button class="btn btn-secondary btn-sm">↻ Recalcular</button>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:40px;">#</th>
|
||
<th>Clube</th>
|
||
<th>J</th><th>V</th><th>E</th><th>D</th>
|
||
<th>GM</th><th>GS</th><th>DG</th>
|
||
<th style="color:var(--text-primary);font-size:12px;">PTS</th>
|
||
<th>Forma</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="td-pos">1</td><td><div class="club-cell"><span class="table-crest">🐉</span>FC Porto</div></td><td>15</td><td>20</td><td>3</td><td>2</td><td>42</td><td>18</td><td>+24</td><td class="td-pts" style="color:var(--brand-primary)">65</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--brand-primary)">VVVEV</td></tr>
|
||
<tr><td class="td-pos">2</td><td><div class="club-cell"><span class="table-crest">🦅</span>SL Benfica</div></td><td>15</td><td>19</td><td>4</td><td>2</td><td>38</td><td>20</td><td>+18</td><td class="td-pts">61</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--brand-primary)">VVVVE</td></tr>
|
||
<tr><td class="td-pos">3</td><td><div class="club-cell"><span class="table-crest">🦁</span>Sporting CP</div></td><td>15</td><td>18</td><td>4</td><td>3</td><td>35</td><td>19</td><td>+16</td><td class="td-pts">58</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;">EVVVD</td></tr>
|
||
<tr><td class="td-pos">4</td><td><div class="club-cell"><span class="table-crest">🐉</span>SC Braga</div></td><td>15</td><td>13</td><td>4</td><td>8</td><td>28</td><td>24</td><td>+4</td><td class="td-pts">43</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;">VDVEV</td></tr>
|
||
<tr><td colspan="11"><div class="standings-sep"></div></td></tr>
|
||
<tr><td class="td-pos">5</td><td><div class="club-cell"><span class="table-crest">🌊</span>Vitória SC</div></td><td>15</td><td>12</td><td>3</td><td>10</td><td>22</td><td>26</td><td>-4</td><td class="td-pts">39</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;">DVDEV</td></tr>
|
||
<tr><td class="td-pos">6</td><td><div class="club-cell"><span class="table-crest">⚡</span>Casa Pia AC</div></td><td>15</td><td>10</td><td>5</td><td>10</td><td>19</td><td>28</td><td>-9</td><td class="td-pts">35</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;">EVDDV</td></tr>
|
||
<tr><td colspan="11" style="padding:0;"><div style="height:2px;background:linear-gradient(90deg,rgba(245,158,11,0.3),transparent);"></div></td></tr>
|
||
<tr style="opacity:0.7"><td class="td-pos">16</td><td><div class="club-cell"><span class="table-crest">🔵</span>FC Vizela</div></td><td>15</td><td>3</td><td>4</td><td>18</td><td>14</td><td>40</td><td>-26</td><td class="td-pts" style="color:var(--brand-danger)">13</td><td style="font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--brand-danger)">DDDDD</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== NOVO JOGO ====== -->
|
||
<div class="page" id="page-newgame">
|
||
<div class="page-header">
|
||
<div><div class="page-title">NOVO JOGO</div><div class="page-sub">Agendar partida</div></div>
|
||
<button class="btn btn-secondary" onclick="showPage('games', document.querySelectorAll('.nav-btn')[1])">✕ Cancelar</button>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:600px;">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Jornada</label>
|
||
<select class="form-select"><option>Jornada 15</option><option>Jornada 16</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Estado</label>
|
||
<select class="form-select"><option>Agendado</option><option>Adiado</option></select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Data</label>
|
||
<input class="form-input" type="date" value="2025-03-15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Hora</label>
|
||
<input class="form-input" type="time" value="20:30">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Clube Casa</label>
|
||
<select class="form-select">
|
||
<option>FC Porto</option><option>SL Benfica</option><option>Sporting CP</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Clube Fora</label>
|
||
<select class="form-select">
|
||
<option>SL Benfica</option><option>FC Porto</option><option>Sporting CP</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Estádio / Local</label>
|
||
<input class="form-input" type="text" placeholder="Ex: Estádio do Dragão" value="Estádio do Dragão">
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--border);">
|
||
<button class="btn btn-secondary">Guardar Rascunho</button>
|
||
<button class="btn btn-primary" onclick="showPage('games', document.querySelectorAll('.nav-btn')[1])">✓ Criar Jogo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /content -->
|
||
</main>
|
||
</div>
|
||
|
||
<!-- GOAL MODAL -->
|
||
<div class="modal-overlay" id="goalModal">
|
||
<div class="modal animate-in">
|
||
<div class="modal-header">
|
||
<div class="modal-title">⚽ Registar Golo — <span id="goalModalTeam">FC Porto</span></div>
|
||
<button class="modal-close" onclick="document.getElementById('goalModal').classList.remove('open')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Jogador</label>
|
||
<select class="form-select">
|
||
<option>Mehdi Taremi (#9)</option>
|
||
<option>Evanilson (#11)</option>
|
||
<option>Galeno (#7)</option>
|
||
<option>Pepê (#29)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group" style="max-width:90px;">
|
||
<label class="form-label">Minuto</label>
|
||
<input class="form-input" type="number" value="71" min="1" max="120">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Tipo de Golo</label>
|
||
<select class="form-select">
|
||
<option>Normal</option><option>Penálti</option><option>Livre direto</option><option>Cabeça</option><option>Autogolo</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Assistência (opcional)</label>
|
||
<select class="form-select">
|
||
<option value="">— Sem assistência —</option>
|
||
<option>Galeno (#7)</option>
|
||
<option>Otávio (#25)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="document.getElementById('goalModal').classList.remove('open')">Cancelar</button>
|
||
<button class="btn btn-primary" onclick="confirmGoal()">✓ Confirmar Golo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HALFTIME MODAL -->
|
||
<div class="modal-overlay" id="halfModal">
|
||
<div class="modal animate-in">
|
||
<div class="modal-header">
|
||
<div class="modal-title">⏸ Intervalo</div>
|
||
<button class="modal-close" onclick="document.getElementById('halfModal').classList.remove('open')">✕</button>
|
||
</div>
|
||
<div class="modal-body" style="text-align:center;padding:28px;">
|
||
<div style="font-size:40px;margin-bottom:12px;">⏸</div>
|
||
<div style="font-size:15px;color:var(--text-primary);margin-bottom:8px;">Marcar Intervalo?</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);">O cronómetro será pausado e o estado do jogo mudará para "Intervalo".</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="document.getElementById('halfModal').classList.remove('open')">Cancelar</button>
|
||
<button class="btn btn-primary" onclick="document.getElementById('halfModal').classList.remove('open')">✓ Confirmar Intervalo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- END GAME MODAL -->
|
||
<div class="modal-overlay" id="endModal">
|
||
<div class="modal animate-in">
|
||
<div class="modal-header">
|
||
<div class="modal-title">■ Terminar Jogo</div>
|
||
<button class="modal-close" onclick="document.getElementById('endModal').classList.remove('open')">✕</button>
|
||
</div>
|
||
<div class="modal-body" style="text-align:center;padding:28px;">
|
||
<div style="font-size:40px;margin-bottom:12px;">🏁</div>
|
||
<div style="font-family:var(--font-display);font-size:36px;margin-bottom:8px;">FC Porto <span id="finalScore">2 — 1</span> Benfica</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);">O resultado final será registado, a classificação atualizada automaticamente e o jogo fechado.</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="document.getElementById('endModal').classList.remove('open')">Cancelar</button>
|
||
<button class="btn btn-danger" onclick="document.getElementById('endModal').classList.remove('open')">■ Confirmar Resultado Final</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let homeScore = 2, awayScore = 1;
|
||
let timerSeconds = 71 * 60 + 23;
|
||
let timerInterval;
|
||
let currentMinute = 71;
|
||
let goalTeamSide = 'home';
|
||
let events = [
|
||
{ min: 23, icon: '⚽', text: 'Mehdi Taremi', club: 'FC Porto' },
|
||
{ min: 31, icon: '🟨', text: 'João Mário', club: 'Benfica' },
|
||
{ min: 58, icon: '⚽', text: 'Gonçalo Ramos', club: 'Benfica' },
|
||
{ min: 71, icon: '⚽', text: 'Evanilson', club: 'FC Porto' },
|
||
];
|
||
|
||
// Start timer
|
||
timerInterval = setInterval(() => {
|
||
timerSeconds++;
|
||
const m = Math.floor(timerSeconds / 60);
|
||
const s = timerSeconds % 60;
|
||
const el = document.getElementById('liveTimer');
|
||
if (el) el.textContent = `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
|
||
currentMinute = m;
|
||
}, 1000);
|
||
|
||
function showPage(id, btn) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||
const page = document.getElementById('page-' + id);
|
||
if (page) page.classList.add('active');
|
||
if (btn) btn.classList.add('active');
|
||
|
||
const titles = {
|
||
dashboard: ['Dashboard', 'Liga 2024/2025 • Jornada 15'],
|
||
games: ['Jogos', 'Jornada 15 de 34'],
|
||
live: ['Live Editor', 'FC Porto vs SL Benfica'],
|
||
clubs: ['Clubes', '18 clubes na liga'],
|
||
players: ['Jogadores', '324 jogadores registados'],
|
||
standings: ['Classificação', 'Liga 2024/2025 • Jornada 15'],
|
||
newgame: ['Novo Jogo', 'Agendar partida'],
|
||
};
|
||
if (titles[id]) {
|
||
document.getElementById('headerTitle').textContent = titles[id][0];
|
||
document.getElementById('headerBreadcrumb').textContent = titles[id][1];
|
||
}
|
||
}
|
||
|
||
function showPageByBtn(id) {
|
||
const btnMap = { games: 1, clubs: 3, players: 4, standings: 5 };
|
||
showPage(id, document.querySelectorAll('.nav-btn')[btnMap[id]]);
|
||
}
|
||
|
||
function switchNav(el) {
|
||
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
function adjustScore(side, delta) {
|
||
if (side === 'home') {
|
||
homeScore = Math.max(0, homeScore + delta);
|
||
const el = document.getElementById('scoreHome');
|
||
el.textContent = homeScore;
|
||
if (delta > 0) { el.classList.remove('score-flash'); void el.offsetWidth; el.classList.add('score-flash'); }
|
||
} else {
|
||
awayScore = Math.max(0, awayScore + delta);
|
||
const el = document.getElementById('scoreAway');
|
||
el.textContent = awayScore;
|
||
if (delta > 0) { el.classList.remove('score-flash'); void el.offsetWidth; el.classList.add('score-flash'); }
|
||
}
|
||
document.getElementById('finalScore').textContent = `${homeScore} — ${awayScore}`;
|
||
}
|
||
|
||
function openGoalModal(team, side) {
|
||
goalTeamSide = side;
|
||
document.getElementById('goalModalTeam').textContent = team;
|
||
const players = {
|
||
home: ['Mehdi Taremi (#9)', 'Evanilson (#11)', 'Galeno (#7)', 'Pepê (#29)'],
|
||
away: ['Gonçalo Ramos (#7)', 'João Mário (#10)', 'Rafa Silva (#27)', 'Di María (#11)']
|
||
};
|
||
const select = document.getElementById('goalModal').querySelector('select');
|
||
select.innerHTML = players[side].map(p => `<option>${p}</option>`).join('');
|
||
const minInput = document.getElementById('goalModal').querySelectorAll('input')[0];
|
||
minInput.value = currentMinute;
|
||
document.getElementById('goalModal').classList.add('open');
|
||
}
|
||
|
||
function confirmGoal() {
|
||
const modal = document.getElementById('goalModal');
|
||
const player = modal.querySelector('select').value.split(' (#')[0];
|
||
const min = parseInt(modal.querySelectorAll('input')[0].value) || currentMinute;
|
||
const club = goalTeamSide === 'home' ? 'FC Porto' : 'Benfica';
|
||
|
||
adjustScore(goalTeamSide, 1);
|
||
addEventItem(min, '⚽', player, club);
|
||
modal.classList.remove('open');
|
||
}
|
||
|
||
function addEvent(icon, type, club) {
|
||
const names = {
|
||
'FC Porto': ['Pepe (#3)', 'Otávio (#25)', 'Zaidu (#5)'],
|
||
'Benfica': ['António Silva (#2)', 'João Neves (#87)', 'Morato (#4)']
|
||
};
|
||
const name = names[club][Math.floor(Math.random() * 3)].split(' (#')[0];
|
||
addEventItem(currentMinute, icon, name, club);
|
||
}
|
||
|
||
function addEventItem(min, icon, text, club) {
|
||
events.push({ min, icon, text, club });
|
||
renderEvents();
|
||
}
|
||
|
||
function undoLastEvent() {
|
||
if (events.length === 0) return;
|
||
const last = events.pop();
|
||
if (last.icon === '⚽') {
|
||
const side = last.club === 'FC Porto' ? 'home' : 'away';
|
||
adjustScore(side, -1);
|
||
}
|
||
renderEvents();
|
||
}
|
||
|
||
function renderEvents() {
|
||
const sorted = [...events].sort((a,b) => b.min - a.min);
|
||
document.getElementById('eventsList').innerHTML = sorted.map(e => `
|
||
<div class="event-item">
|
||
<span class="event-min">${e.min}'</span>
|
||
<span class="event-icon">${e.icon}</span>
|
||
<span class="event-text">${e.text}</span>
|
||
<span class="event-club">${e.club}</span>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Filter tabs
|
||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
tab.closest('.filter-tabs').querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|