<style>
.spl-today-wrap {
font-family: Arial, sans-serif;
max-width: 680px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.10);
overflow: hidden;
}
.spl-today-wrap[dir="rtl"] { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
.spl-today-header {
background: linear-gradient(135deg, #1a6b3c 0%, #27ae60 100%);
color: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
[dir="rtl"] .spl-today-header { flex-direction: row-reverse; }
.spl-today-league {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 14px;
}
.spl-today-league img {
width: 24px;
height: 24px;
object-fit: contain;
background: rgba(255,255,255,0.15);
border-radius: 4px;
padding: 2px;
}
.spl-today-day-label {
font-size: 12px;
background: rgba(255,255,255,0.2);
padding: 3px 10px;
border-radius: 20px;
font-weight: 600;
white-space: nowrap;
}
.spl-today-list { padding: 4px 0; }
.spl-today-match {
display: flex;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid #f2f2f2;
gap: 8px;
transition: background 0.12s;
}
.spl-today-match:last-child { border-bottom: none; }
.spl-today-match:hover { background: #f8fdf9; }
.spl-today-team {
display: flex;
align-items: center;
gap: 7px;
flex: 1;
min-width: 0;
}
.spl-today-team.away {
justify-content: flex-end;
flex-direction: row-reverse;
}
[dir="rtl"] .spl-today-team { flex-direction: row-reverse; }
[dir="rtl"] .spl-today-team.away { flex-direction: row; justify-content: flex-start; }
.spl-today-team img {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.spl-today-team-name {
font-size: 13px;
font-weight: 600;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spl-today-score-wrap {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
min-width: 72px;
}
.spl-today-score {
font-size: 18px;
font-weight: 800;
color: #1a1a2e;
letter-spacing: 1px;
line-height: 1;
}
.spl-today-status {
font-size: 10px;
font-weight: 700;
margin-top: 2px;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spl-status-ft { background: #eee; color: #666; }
.spl-status-live { background: #e74c3c; color: #fff; }
.spl-status-sched { background: #f0f4ff; color: #3498db; }
.spl-today-empty {
padding: 24px;
text-align: center;
color: #aaa;
font-size: 13px;
}
.spl-today-footer {
padding: 8px 16px;
font-size: 11px;
color: #bbb;
text-align: right;
border-top: 1px solid #f2f2f2;
}
[dir="rtl"] .spl-today-footer { text-align: left; }
@media (max-width: 420px) {
.spl-today-team-name { font-size: 11px; }
.spl-today-score { font-size: 15px; }
.spl-today-match { padding: 8px 10px; gap: 4px; }
.spl-today-team img { width: 22px; height: 22px; }
}
</style>
<div class="spl-today-wrap" id="spl-today-root">
<div class="spl-today-header">
<div class="spl-today-league">
<img src="https://a.espncdn.com/i/leaguelogos/soccer/500/682.png" alt="SPL" onerror="this.style.display='none'">
<span id="spl-today-league-name">Saudi Pro League</span>
</div>
<div class="spl-today-day-label" id="spl-today-day-label">...</div>
</div>
<div class="spl-today-list" id="spl-today-list">
<div class="spl-today-empty" id="spl-today-loading">...</div>
</div>
<div class="spl-today-footer" id="spl-today-footer"></div>
</div>
<script>
(function() {
var I18N = {
fr: {
league: 'Saudi Pro League',
today: "Matchs du jour",
last: 'Dernière journée',
no_match: 'Aucun match aujourd\'hui',
ft: 'FT',
live: 'LIVE',
loading: 'Chargement...',
updated: 'Mis à jour : ',
months: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'],
dir: 'ltr'
},
en: {
league: 'Saudi Pro League',
today: 'Today\'s Matches',
last: 'Last Matchday',
no_match: 'No matches today',
ft: 'FT',
live: 'LIVE',
loading: 'Loading...',
updated: 'Updated: ',
months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dir: 'ltr'
},
ar: {
league: 'الدوري السعودي للمحترفين',
today: 'مباريات اليوم',
last: 'آخر جولة',
no_match: 'لا توجد مباريات اليوم',
ft: 'انتهت',
live: 'مباشر',
loading: 'جاري التحميل...',
updated: 'آخر تحديث: ',
months: ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'],
dir: 'rtl'
}
};
function detectLang() {
var lang = document.documentElement.lang || '';
lang = lang.toLowerCase().split('-')[0].split('_')[0];
return I18N[lang] ? lang : 'fr';
}
var lang = detectLang();
var t = I18N[lang];
var root = document.getElementById('spl-today-root');
root.setAttribute('dir', t.dir);
document.getElementById('spl-today-league-name').textContent = t.league;
document.getElementById('spl-today-loading').textContent = t.loading;
function teamLogo(team) {
var logos = team.logos || [];
if (logos.length) return logos[0].href;
var tid = team.id || '';
return tid ? 'https://a.espncdn.com/i/teamlogos/soccer/500/' + tid + '.png' : '';
}
function formatDate(dateStr) {
var p = dateStr.split('-');
return p[2] + ' ' + t.months[parseInt(p[1]) - 1] + ' ' + p[0];
}
function parseEvents(data) {
var events = [];
(data.events || []).forEach(function(evt) {
var comp = (evt.competitions || [{}])[0];
var competitors = comp.competitors || [];
var status = (comp.status || {}).type || {};
var home = competitors.find(function(c) { return c.homeAway === 'home'; }) || {};
var away = competitors.find(function(c) { return c.homeAway === 'away'; }) || {};
var homeTeam = home.team || {};
var awayTeam = away.team || {};
events.push({
date: (evt.date || '').substring(0, 10),
time: (evt.date || '').substring(11, 16),
status: status.description || '',
finished: status.completed || false,
homeTeam: homeTeam.displayName || '',
homeLogo: teamLogo(homeTeam),
homeScore: home.score || '',
awayTeam: awayTeam.displayName || '',
awayLogo: teamLogo(awayTeam),
awayScore: away.score || ''
});
});
return events;
}
function statusLabel(m) {
if (m.finished) return { text: t.ft, cls: 'spl-status-ft' };
if (m.status === 'In Progress') return { text: t.live, cls: 'spl-status-live' };
return { text: m.time || 'VS', cls: 'spl-status-sched' };
}
function renderMatches(matchday, events) {
if (matchday === 'today') {
document.getElementById('spl-today-day-label').textContent = t.today;
} else if (matchday === 'none') {
document.getElementById('spl-today-day-label').textContent = '';
} else {
document.getElementById('spl-today-day-label').textContent = t.last + ' · ' + formatDate(matchday);
}
if (!events || !events.length) {
document.getElementById('spl-today-list').innerHTML =
'<div class="spl-today-empty">' + t.no_match + '</div>';
return;
}
var html = '';
events.forEach(function(m) {
var st = statusLabel(m);
var homeClass = t.dir === 'rtl' ? 'spl-today-team away' : 'spl-today-team';
var awayClass = t.dir === 'rtl' ? 'spl-today-team' : 'spl-today-team away';
var scoreHtml = m.finished || m.status === 'In Progress'
? (m.homeScore + ' - ' + m.awayScore) : '-';
html += '<div class="spl-today-match">'
+ '<div class="' + homeClass + '">'
+ '<img src="' + m.homeLogo + '" alt="' + m.homeTeam + '" onerror="this.style.display=\'none\'">'
+ '<span class="spl-today-team-name">' + m.homeTeam + '</span></div>'
+ '<div class="spl-today-score-wrap">'
+ '<div class="spl-today-score">' + scoreHtml + '</div>'
+ '<div class="spl-today-status ' + st.cls + '">' + st.text + '</div></div>'
+ '<div class="' + awayClass + '">'
+ '<img src="' + m.awayLogo + '" alt="' + m.awayTeam + '" onerror="this.style.display=\'none\'">'
+ '<span class="spl-today-team-name">' + m.awayTeam + '</span></div>'
+ '</div>';
});
document.getElementById('spl-today-list').innerHTML = html;
var now = new Date();
document.getElementById('spl-today-footer').textContent =
t.updated + now.toLocaleDateString() + ' ' + now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
}
function loadToday() {
var today = new Date();
var fmt = function(d) { return d.getFullYear() + ('0'+(d.getMonth()+1)).slice(-2) + ('0'+d.getDate()).slice(-2); };
var todayStr = fmt(today);
/* D'abord, essayer les matchs du jour */
fetch('https://site.api.espn.com/apis/site/v2/sports/soccer/ksa.1/scoreboard?dates=' + todayStr)
.then(function(r) { return r.json(); })
.then(function(data) {
var events = parseEvents(data);
if (events.length) {
events.sort(function(a,b) { return a.time.localeCompare(b.time); });
renderMatches('today', events);
return;
}
/* Pas de match aujourd'hui → dernière journée jouée */
var start = new Date(today); start.setDate(start.getDate() - 10);
var url2 = 'https://site.api.espn.com/apis/site/v2/sports/soccer/ksa.1/scoreboard?limit=100&dates=' + fmt(start) + '-' + todayStr;
return fetch(url2).then(function(r) { return r.json(); }).then(function(data2) {
var finished = parseEvents(data2).filter(function(e) { return e.finished; });
if (!finished.length) {
renderMatches('none', []);
return;
}
finished.sort(function(a,b) { return b.date.localeCompare(a.date); });
var lastDate = finished[0].date;
var lastDay = finished.filter(function(e) { return e.date === lastDate; });
lastDay.sort(function(a,b) { return a.time.localeCompare(b.time); });
renderMatches(lastDate, lastDay);
});
})
.catch(function() {
document.getElementById('spl-today-list').innerHTML =
'<div class="spl-today-empty">' + t.no_match + '</div>';
});
}
loadToday();
setInterval(loadToday, 5 * 60 * 1000);
})();
</script>
