Πινακας 1

FIFA World Cup 2026 Dashboard

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: ‘Segoe UI’, sans-serif; background: #0a0e1a; color: #fff; }
.dashboard { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header { text-align: center; padding: 24px 0 16px; }
.header h1 { font-size: 2rem; background: linear-gradient(90deg, #FFD700, #FF6B35, #4ECDC4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; }
.header p { color: #aaa; margin-top: 6px; font-size: 0.9rem; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; justify-content: center; }
.tab-btn { padding: 10px 18px; border: none; border-radius: 25px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.3s; background: #1a2035; color: #aaa; }
.tab-btn.active { background: linear-gradient(135deg, #FFD700, #FF6B35); color: #000; }
.tab-btn:hover:not(.active) { background: #2a3050; color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.card { background: #1a2035; border-radius: 12px; padding: 16px; margin-bottom: 16px; border: 1px solid #2a3050; }
.card h3 { font-size: 1rem; color: #FFD700; margin-bottom: 12px; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.group-card { background: #0f1628; border-radius: 10px; padding: 14px; border: 1px solid #2a3050; }
.group-card.host { border-color: #FFD700; }
.group-title { font-size: 0.95rem; font-weight: 700; color: #4ECDC4; margin-bottom: 10px; display: flex; justify-content: space-between; }
.team-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #1a2035; font-size: 0.82rem; }
.team-row:last-child { border-bottom: none; }
.team-name { display: flex; align-items: center; gap: 6px; }
.flag { font-size: 1.1rem; }
.odds { color: #FFD700; font-weight: 600; font-size: 0.8rem; }
.host-badge { background: #FFD700; color: #000; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; font-weight: 700; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stat-card { background: #0f1628; border-radius: 10px; padding: 14px; text-align: center; border: 1px solid #2a3050; cursor: pointer; transition: all 0.3s; }
.stat-card:hover, .stat-card.selected { border-color: #4ECDC4; background: #162040; }
.stat-card .team-flag { font-size: 2rem; }
.stat-card .team-nm { font-size: 0.85rem; font-weight: 700; margin: 6px 0 4px; }
.stat-card .rank { font-size: 0.75rem; color: #aaa; }
.stat-card .titles { font-size: 1.4rem; font-weight: 900; color: #FFD700; }
.stat-card .titles-label { font-size: 0.7rem; color: #888; }
.chart-container { position: relative; height: 320px; margin-top: 12px; }
.bracket { overflow-x: auto; padding: 10px 0; }
.bracket-grid { display: grid; grid-template-columns: repeat(5, 180px); gap: 0; min-width: 900px; }
.round-col { display: flex; flex-direction: column; }
.round-title { text-align: center; font-size: 0.75rem; font-weight: 700; color: #4ECDC4; padding: 8px; background: #0f1628; border-radius: 8px; margin-bottom: 8px; }
.match-slot { background: #0f1628; border: 1px solid #2a3050; border-radius: 8px; padding: 8px; margin: 4px; font-size: 0.75rem; }
.match-slot .team-a { color: #FFD700; font-weight: 600; padding: 3px 0; border-bottom: 1px solid #1a2035; }
.match-slot .team-b { color: #fff; padding: 3px 0; }
.match-slot .match-date { font-size: 0.65rem; color: #888; margin-top: 4px; }
.final-slot { background: linear-gradient(135deg, #1a2035, #0f1628); border: 2px solid #FFD700; border-radius: 12px; padding: 16px; margin: 4px; text-align: center; }
.final-slot .trophy { font-size: 2rem; }
.final-slot .final-title { color: #FFD700; font-weight: 900; font-size: 0.9rem; margin: 6px 0; }
.final-slot .final-date { font-size: 0.75rem; color: #aaa; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.home-card { background: #0f1628; border-radius: 12px; padding: 18px; border: 1px solid #2a3050; }
.home-card h4 { font-size: 1rem; color: #FFD700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.home-stat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #1a2035; font-size: 0.82rem; }
.home-stat:last-child { border-bottom: none; }
.home-stat .label { color: #aaa; }
.home-stat .value { color: #4ECDC4; font-weight: 600; }
.progress-bar { background: #1a2035; border-radius: 10px; height: 8px; margin-top: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #4ECDC4, #FFD700); }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-btn { padding: 6px 14px; border: 1px solid #2a3050; border-radius: 20px; background: #0f1628; color: #aaa; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.filter-btn.active { border-color: #4ECDC4; color: #4ECDC4; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.75rem; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 600px) {
.header h1 { font-size: 1.4rem; }
.tab-btn { padding: 8px 12px; font-size: 0.78rem; }
.groups-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}

⚽ FIFA World Cup 2026

Διαδραστικό Dashboard Πρόβλεψης • ΗΠΑ / Καναδάς / Μεξικό




📋 Όμιλοι Μουντιάλ 2026 — Αποδόσεις Τίτλου



📈 Σύγκριση Αποδόσεων — Top 10 Φαβορί

🏆 Επιλέξτε ομάδα για λεπτομέρειες

📊 Σύγκριση Φόρμας & Επίθεσης

🔀 Διάγραμμα Ροής — Φάση 32 → Τελικός 19 Ιουλίου 2026

📅 Χρονοδιάγραμμα Φάσεων

🏠 Ανάλυση Πλεονεκτήματος Έδρας

📊 Ιστορικό Επίδοσης Διοργανωτών (1930–2022)

// ===== DATA =====
const groups = [
{ id:’A’, host:true, teams:[
{name:’ΗΠΑ’, flag:’🇺🇸’, odds:’8.00′, host:true},
{name:’Παναμάς’, flag:’🇵🇦’, odds:’250′},
{name:’Αλγερία’, flag:’🇩🇿’, odds:’200′},
{name:’Νέα Ζηλανδία’, flag:’🇳🇿’, odds:’500′}
]},
{ id:’B’, host:false, teams:[
{name:’Αργεντινή’, flag:’🇦🇷’, odds:’5.50′},
{name:’Χιλή’, flag:’🇨🇱’, odds:’150′},
{name:’Μαρόκο’, flag:’🇲🇦’, odds:’30’},
{name:’Ουκρανία’, flag:’🇺🇦’, odds:’120′}
]},
{ id:’C’, host:false, teams:[
{name:’Γαλλία’, flag:’🇫🇷’, odds:’6.00′},
{name:’Βέλγιο’, flag:’🇧🇪’, odds:’40’},
{name:’Αυστραλία’, flag:’🇦🇺’, odds:’200′},
{name:’Σαουδική Αραβία’, flag:’🇸🇦’, odds:’300′}
]},
{ id:’D’, host:false, teams:[
{name:’Βραζιλία’, flag:’🇧🇷’, odds:’6.50′},
{name:’Κολομβία’, flag:’🇨🇴’, odds:’60’},
{name:’Ιαπωνία’, flag:’🇯🇵’, odds:’80’},
{name:’Σενεγάλη’, flag:’🇸🇳’, odds:’100′}
]},
{ id:’E’, host:false, teams:[
{name:’Αγγλία’, flag:’🏴’, odds:’7.00′},
{name:’Ολλανδία’, flag:’🇳🇱’, odds:’20’},
{name:’Ιράν’, flag:’🇮🇷’, odds:’250′},
{name:’Ακτή Ελεφαντοστού’, flag:’🇨🇮’, odds:’150′}
]},
{ id:’F’, host:false, teams:[
{name:’Γερμανία’, flag:’🇩🇪’, odds:’8.00′},
{name:’Πορτογαλία’, flag:’🇵🇹’, odds:’12’},
{name:’Τυνησία’, flag:’🇹🇳’, odds:’300′},
{name:’Κόστα Ρίκα’, flag:’🇨🇷’, odds:’400′}
]},
{ id:’G’, host:true, teams:[
{name:’Μεξικό’, flag:’🇲🇽’, odds:’40’, host:true},
{name:’Ισπανία’, flag:’🇪🇸’, odds:’7.00′},
{name:’Καμερούν’, flag:’🇨🇲’, odds:’200′},
{name:’Βολιβία’, flag:’🇧🇴’, odds:’500′}
]},
{ id:’H’, host:false, teams:[
{name:’Ισπανία’, flag:’🇪🇸’, odds:’7.00′},
{name:’Κροατία’, flag:’🇭🇷’, odds:’50’},
{name:’Αίγυπτος’, flag:’🇪🇬’, odds:’200′},
{name:’Ισημερινός’, flag:’🇪🇨’, odds:’300′}
]},
{ id:’I’, host:false, teams:[
{name:’Ιταλία’, flag:’🇮🇹’, odds:’15’},
{name:’Μεξικό’, flag:’🇲🇽’, odds:’40’},
{name:’Ν. Κορέα’, flag:’🇰🇷’, odds:’100′},
{name:’Ονδούρα’, flag:’🇭🇳’, odds:’500′}
]},
{ id:’J’, host:false, teams:[
{name:’Ουρουγουάη’, flag:’🇺🇾’, odds:’30’},
{name:’Δανία’, flag:’🇩🇰’, odds:’35’},
{name:’Γκάνα’, flag:’🇬🇭’, odds:’300′},
{name:’Σλοβακία’, flag:’🇸🇰’, odds:’200′}
]},
{ id:’K’, host:true, teams:[
{name:’Καναδάς’, flag:’🇨🇦’, odds:’60’, host:true},
{name:’Ελβετία’, flag:’🇨🇭’, odds:’40’},
{name:’Νιγηρία’, flag:’🇳🇬’, odds:’150′},
{name:’Αλβανία’, flag:’🇦🇱’, odds:’400′}
]},
{ id:’L’, host:false, teams:[
{name:’Πορτογαλία’, flag:’🇵🇹’, odds:’12’},
{name:’Αυστρία’, flag:’🇦🇹’, odds:’80’},
{name:’Μαλί’, flag:’🇲🇱’, odds:’300′},
{name:’Ελ Σαλβαδόρ’, flag:’🇸🇻’, odds:’600′}
]}
];

const teamStats = [
{name:’Βραζιλία’, flag:’🇧🇷’, titles:5, apps:22, rank:5, attack:95, defense:88, midfield:90, form:85},
{name:’Γερμανία’, flag:’🇩🇪’, titles:4, apps:20, rank:16, attack:88, defense:85, midfield:87, form:80},
{name:’Ιταλία’, flag:’🇮🇹’, titles:4, apps:18, rank:9, attack:82, defense:90, midfield:85, form:75},
{name:’Αργεντινή’, flag:’🇦🇷’, titles:3, apps:18, rank:1, attack:92, defense:82, midfield:88, form:95},
{name:’Γαλλία’, flag:’🇫🇷’, titles:2, apps:16, rank:2, attack:93, defense:87, midfield:89, form:90},
{name:’Αγγλία’, flag:’🏴’, titles:1, apps:16, rank:5, attack:87, defense:83, midfield:85, form:85},
{name:’Ισπανία’, flag:’🇪🇸’, titles:1, apps:16, rank:3, attack:89, defense:86, midfield:92, form:88},
{name:’Ολλανδία’, flag:’🇳🇱’, titles:0, apps:11, rank:7, attack:85, defense:80, midfield:83, form:82},
{name:’Πορτογαλία’, flag:’🇵🇹’, titles:0, apps:8, rank:6, attack:90, defense:78, midfield:82, form:87},
{name:’Μαρόκο’, flag:’🇲🇦’, titles:0, apps:6, rank:14, attack:78, defense:85, midfield:76, form:83},
{name:’ΗΠΑ’, flag:’🇺🇸’, titles:0, apps:11, rank:13, attack:75, defense:72, midfield:70, form:78, host:true},
{name:’Μεξικό’, flag:’🇲🇽’, titles:0, apps:17, rank:15, attack:76, defense:74, midfield:73, form:72, host:true},
{name:’Καναδάς’, flag:’🇨🇦’, titles:0, apps:2, rank:40, attack:70, defense:68, midfield:65, form:70, host:true},
{name:’Κροατία’, flag:’🇭🇷’, titles:0, apps:7, rank:10, attack:82, defense:80, midfield:84, form:78},
{name:’Ουρουγουάη’, flag:’🇺🇾’, titles:2, apps:14, rank:18, attack:80, defense:82, midfield:78, form:76},
{name:’Δανία’, flag:’🇩🇰’, titles:0, apps:6, rank:22, attack:78, defense:79, midfield:77, form:80}
];

const schedule = [
{round:’Φάση Ομίλων’, dates:’11 Ιουν – 2 Ιουλ 2026′, teams:’48 ομάδες, 12 όμιλοι’},
{round:’Φάση των 32′, dates:’4–8 Ιουλ 2026′, teams:’32 ομάδες’},
{round:’Φάση των 16′, dates:’10–12 Ιουλ 2026′, teams:’16 ομάδες’},
{round:’Προημιτελικά’, dates:’14–15 Ιουλ 2026′, teams:’8 ομάδες’},
{round:’Ημιτελικά’, dates:’17–18 Ιουλ 2026′, teams:’4 ομάδες’},
{round:’🏆 ΤΕΛΙΚΟΣ’, dates:’19 Ιουλίου 2026′, teams:’MetLife Stadium, Νέα Υόρκη’}
];

const hostData = [
{
country:’🇺🇸 ΗΠΑ’, color:’#3C78D8′,
stats:[
{label:’Γήπεδα’, value:’11 (MetLife, SoFi, AT&T…)’},
{label:’Χωρητικότητα’, value:’60.000–82.500′},
{label:’Κλίμα’, value:’Ποικίλο (ζέστη/ψύχος)’},
{label:’FIFA Ranking’, value:’#13′},
{label:’Καλύτερη επίδοση’, value:’3η θέση (1930)’},
{label:’Bonus Έδρας’, value:’85%’, bar:85}
]
},
{
country:’🇲🇽 Μεξικό’, color:’#2E7D32′,
stats:[
{label:’Γήπεδα’, value:’3 (Azteca, Guadalajara…)’},
{label:’Χωρητικότητα’, value:’45.000–87.000′},
{label:’Κλίμα’, value:’Ζεστό & υγρό’},
{label:’FIFA Ranking’, value:’#15′},
{label:’Καλύτερη επίδοση’, value:’Προημιτελικά (1970, 1986)’},
{label:’Bonus Έδρας’, value:’78%’, bar:78}
]
},
{
country:’🇨🇦 Καναδάς’, color:’#C62828′,
stats:[
{label:’Γήπεδα’, value:’2 (BMO Field, BC Place)’},
{label:’Χωρητικότητα’, value:’45.000–54.000′},
{label:’Κλίμα’, value:’Δροσερό & ήπιο’},
{label:’FIFA Ranking’, value:’#40′},
{label:’Καλύτερη επίδοση’, value:’Φάση Ομίλων (1986)’},
{label:’Bonus Έδρας’, value:’65%’, bar:65}
]
}
];

const hostHistory = [
{year:’1930′, host:’Ουρουγουάη’, result:’🏆 Νικητής’},
{year:’1934′, host:’Ιταλία’, result:’🏆 Νικητής’},
{year:’1966′, host:’Αγγλία’, result:’🏆 Νικητής’},
{year:’1974′, host:’Γερμανία’, result:’🏆 Νικητής’},
{year:’1978′, host:’Αργεντινή’, result:’🏆 Νικητής’},
{year:’1998′, host:’Γαλλία’, result:’🏆 Νικητής’},
{year:’2006′, host:’Γερμανία’, result:’3η θέση’},
{year:’2010′, host:’Ν. Αφρική’, result:’Φάση 16′},
{year:’2014′, host:’Βραζιλία’, result:’4η θέση’},
{year:’2018′, host:’Ρωσία’, result:’Προημιτελικά’},
{year:’2022′, host:’Κατάρ’, result:’Φάση Ομίλων’}
];

// ===== RENDER GROUPS =====
function renderGroups(filter=’all’) {
const grid = document.getElementById(‘groupsGrid’);
grid.innerHTML = ”;
groups.forEach(g => {
const hasFav = g.teams.some(t => parseFloat(t.odds) < 15);
if (filter === 'host' && !g.host) return;
if (filter === 'fav' && !hasFav) return;
const card = document.createElement('div');
card.className = 'group-card' + (g.host ? ' host' : '');
card.innerHTML = `

Όμιλος ${g.id} ${g.host ? ‘🏠 ΕΔΡΑ‘ : ”}

` +
g.teams.map(t => `

${t.flag}${t.name}${t.host ? ‘ 🏠‘ : ”}

${t.odds}x

`).join(”);
grid.appendChild(card);
});
}

function filterGroups(f, btn) {
document.querySelectorAll(‘.filter-btn’).forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
renderGroups(f);
}

// ===== ODDS CHART =====
function renderOddsChart() {
const top10 = [
{name:’Αργεντινή 🇦🇷’, odds:5.5},
{name:’Γαλλία 🇫🇷’, odds:6.0},
{name:’Βραζιλία 🇧🇷’, odds:6.5},
{name:’Αγγλία 🏴’, odds:7.0},
{name:’Ισπανία 🇪🇸’, odds:7.0},
{name:’Γερμανία 🇩🇪’, odds:8.0},
{name:’ΗΠΑ 🇺🇸’, odds:8.0},
{name:’Πορτογαλία 🇵🇹’, odds:12.0},
{name:’Ιταλία 🇮🇹’, odds:15.0},
{name:’Ολλανδία 🇳🇱’, odds:20.0}
];
new Chart(document.getElementById(‘oddsChart’), {
type: ‘bar’,
data: {
labels: top10.map(t => t.name),
datasets: [{
label: ‘Απόδοση Τίτλου (x)’,
data: top10.map(t => t.odds),
backgroundColor: top10.map((t,i) => i < 3 ? '#FFD700' : i {
const card = document.createElement(‘div’);
card.className = ‘stat-card’;
card.innerHTML = `

${t.flag}
${t.name}${t.host ? ‘ 🏠’ : ”}
FIFA #${t.rank}
${t.titles}
Τίτλοι

`;
card.onclick = () => showTeamDetail(t, card);
grid.appendChild(card);
});
}

function showTeamDetail(team, card) {
document.querySelectorAll(‘.stat-card’).forEach(c => c.classList.remove(‘selected’));
card.classList.add(‘selected’);
document.getElementById(‘teamDetailCard’).style.display = ‘block’;
document.getElementById(‘teamDetailTitle’).textContent = `${team.flag} ${team.name} — Στατιστικά`;
if (radarChart) radarChart.destroy();
radarChart = new Chart(document.getElementById(‘radarChart’), {
type: ‘radar’,
data: {
labels: [‘Επίθεση’, ‘Άμυνα’, ‘Μέση’, ‘Φόρμα’],
datasets: [{
label: team.name,
data: [team.attack, team.defense, team.midfield, team.form],
backgroundColor: ‘rgba(78,205,196,0.2)’,
borderColor: ‘#4ECDC4’,
pointBackgroundColor: ‘#FFD700’,
pointRadius: 5
}]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { labels: { color: ‘#fff’ } } },
scales: { r: { ticks: { color: ‘#aaa’, backdropColor: ‘transparent’ }, grid: { color: ‘#2a3050’ }, pointLabels: { color: ‘#fff’ }, min: 50, max: 100 } }
}
});
}

function renderCompareChart() {
new Chart(document.getElementById(‘compareChart’), {
type: ‘bar’,
data: {
labels: teamStats.map(t => t.flag + ‘ ‘ + t.name),
datasets: [
{ label: ‘Φόρμα’, data: teamStats.map(t => t.form), backgroundColor: ‘rgba(78,205,196,0.7)’, borderRadius: 4 },
{ label: ‘Επίθεση’, data: teamStats.map(t => t.attack), backgroundColor: ‘rgba(255,215,0,0.7)’, borderRadius: 4 }
]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { labels: { color: ‘#fff’ } } },
scales: {
x: { ticks: { color: ‘#aaa’, maxRotation: 45 }, grid: { color: ‘#1a2035’ } },
y: { ticks: { color: ‘#aaa’ }, grid: { color: ‘#1a2035’ }, min: 50, max: 100 }
}
}
});
}

// ===== BRACKET =====
function renderBracket() {
const grid = document.getElementById(‘bracketGrid’);
const rounds = [
{ title: ‘⚽ Φάση 32n4–8 Ιουλ’, matches: [
{a:’1Α vs 2Β’, b:”, date:’4 Ιουλ’},
{a:’1Γ vs 2Δ’, b:”, date:’4 Ιουλ’},
{a:’1Ε vs 2Ζ’, b:”, date:’5 Ιουλ’},
{a:’1Η vs 2Θ’, b:”, date:’5 Ιουλ’},
{a:’1Ι vs 2Κ’, b:”, date:’6 Ιουλ’},
{a:’1Λ vs 2Α’, b:”, date:’6 Ιουλ’},
{a:’1Β vs 2Γ’, b:”, date:’7 Ιουλ’},
{a:’1Δ vs 2Ε’, b:”, date:’7 Ιουλ’}
]},
{ title: ‘🔟 Φάση 16n10–12 Ιουλ’, matches: [
{a:’Νικητής M1′, b:’Νικητής M2′, date:’10 Ιουλ’},
{a:’Νικητής M3′, b:’Νικητής M4′, date:’10 Ιουλ’},
{a:’Νικητής M5′, b:’Νικητής M6′, date:’11 Ιουλ’},
{a:’Νικητής M7′, b:’Νικητής M8′, date:’11 Ιουλ’}
]},
{ title: ‘🔝 Προημιτελικάn14–15 Ιουλ’, matches: [
{a:’Νικητής QF1′, b:’Νικητής QF2′, date:’14 Ιουλ’},
{a:’Νικητής QF3′, b:’Νικητής QF4′, date:’15 Ιουλ’}
]},
{ title: ‘🥊 Ημιτελικάn17–18 Ιουλ’, matches: [
{a:’Νικητής SF1′, b:’Νικητής SF2′, date:’17 Ιουλ’},
{a:’Νικητής SF3′, b:’Νικητής SF4′, date:’18 Ιουλ’}
]},
{ title: ‘🏆 ΤΕΛΙΚΟΣn19 Ιουλ’, matches: [] }
];

rounds.forEach((r, ri) => {
const col = document.createElement(‘div’);
col.className = ’round-col’;
const title = document.createElement(‘div’);
title.className = ’round-title’;
title.textContent = r.title;
col.appendChild(title);
if (ri === 4) {
const fin = document.createElement(‘div’);
fin.className = ‘final-slot’;
fin.innerHTML = `

🏆
ΤΕΛΙΚΟΣ
MetLife Stadium
19 Ιουλίου 2026
Νέα Υόρκη / Νιου Τζέρσεϊ

`;
col.appendChild(fin);
} else {
r.matches.forEach(m => {
const slot = document.createElement(‘div’);
slot.className = ‘match-slot’;
slot.innerHTML = `

${m.a}
${m.b || ‘???’}
📅 ${m.date}

`;
col.appendChild(slot);
});
}
grid.appendChild(col);
});

const list = document.getElementById(‘scheduleList’);
schedule.forEach(s => {
const row = document.createElement(‘div’);
row.style.cssText = ‘display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #1a2035;font-size:0.85rem;’;
row.innerHTML = `${s.round}${s.dates}${s.teams}`;
list.appendChild(row);
});
}

// ===== HOME ADVANTAGE =====
function renderHome() {
const grid = document.getElementById(‘homeGrid’);
hostData.forEach(h => {
const card = document.createElement(‘div’);
card.className = ‘home-card’;
card.innerHTML = `

${h.country}

` +
h.stats.map(s => `

${s.label}
${s.value}

${s.bar ? `

` : ”}`).join(”);
grid.appendChild(card);
});

new Chart(document.getElementById(‘hostChart’), {
type: ‘bar’,
data: {
labels: hostHistory.map(h => h.year + ‘ ‘ + h.host),
datasets: [{
label: ‘Επίδοση Διοργανωτή’,
data: hostHistory.map(h => h.result.includes(‘Νικητής’) ? 7 : h.result.includes(‘3η’) ? 5 : h.result.includes(‘4η’) ? 4 : h.result.includes(‘Προημιτελικά’) ? 3 : h.result.includes(’16’) ? 2 : 1),
backgroundColor: hostHistory.map(h => h.result.includes(‘Νικητής’) ? ‘#FFD700’ : h.result.includes(‘3η’) || h.result.includes(‘4η’) ? ‘#4ECDC4’ : ‘#FF6B35’),
borderRadius: 6
}]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: {
legend: { labels: { color: ‘#fff’ } },
tooltip: { callbacks: { label: (ctx) => hostHistory[ctx.dataIndex].result } }
},
scales: {
x: { ticks: { color: ‘#aaa’, maxRotation: 45 }, grid: { color: ‘#1a2035’ } },
y: { display: false }
}
}
});
}

// ===== TAB SWITCHING =====
function showTab(tab) {
document.querySelectorAll(‘.tab-content’).forEach(t => t.classList.remove(‘active’));
document.querySelectorAll(‘.tab-btn’).forEach(b => b.classList.remove(‘active’));
document.getElementById(‘tab-‘ + tab).classList.add(‘active’);
event.target.classList.add(‘active’);
}

// ===== INIT =====
renderGroups();
renderOddsChart();
renderStatsGrid();
renderCompareChart();
renderBracket();
renderHome();