<!DOCTYPE html>
<html>
<head>
<title>بث مباشر - كورة لايف</title>
<style>
/* CSS تنسيقات */
body {
background: #1a1a1a;
color: #fff;
font-family: 'Tajawal', sans-serif;
}
.live-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.player-wrapper {
background: #000;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
}
#live-player {
width: 100%;
height: 500px;
border: none;
}
.match-info {
background: #2a2a2a;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.live-updates {
background: #333;
padding: 15px;
border-radius: 8px;
height: 300px;
overflow-y: auto;
}
.commentary-item {
margin: 10px 0;
padding: 8px;
border-bottom: 1px solid #444;
}
.teams {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 20px 0;
}
.team-logo {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="live-container">
<!-- مشغل البث -->
<div class="player-wrapper">
<iframe id="live-player" src="YOUR_STREAM_URL" allowfullscreen></iframe>
</div>
<!-- معلومات المباراة -->
<div class="match-info">
<div class="teams">
<img src="TEAM1_LOGO" class="team-logo" alt="الفريق الأول">
<h2>الفريق الأول 0 - 0 الفريق الثاني</h2>
<img src="TEAM2_LOGO" class="team-logo" alt="الفريق الثاني">
</div>
<p>الدوري: الدوري الممتاز</p>
<p>الوقت: <span id="match-time">45'</span></p>
</div>
<!-- التحديثات المباشرة -->
<div class="live-updates">
<div class="commentary-item">
<span class="time">15'</span> ▶️ هجمة خطيرة للفريق الأول
</div>
<div class="commentary-item">
<span class="time">30'</span> 🟨 بطاقة صفراء للاعب الفريق الثاني
</div>
</div>
</div>
<script>
// JavaScript للتحديث التلقائي
function updateCommentary() {
fetch('YOUR_COMMENTARY_API')
.then(response => response.json())
.then(data => {
const updates = document.querySelector('.live-updates');
updates.innerHTML = data.map(item => `
<div class="commentary-item">
<span class="time">${item.time}'</span> ${item.text}
</div>
`).join('');
});
}
// تحديث كل 30 ثانية
setInterval(updateCommentary, 30000);
// مؤقت المباراة
let matchTime = 0;
setInterval(() => {
matchTime++;
document.getElementById('match-time').textContent = matchTime + "'";
}, 60000);
</script>
</body>
</html>
