Meta Description" name="description" />
<!DOCTYPE html>
<html lang="ur">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Tournament Results</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; direction: rtl; }
.header { background: #2c3e50; color: white; padding: 20px; text-align: center; border-radius: 10px; margin-bottom: 20px; }
.header img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #fff; }
.stats-container { display: flex; justify-content: space-around; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
.table-container { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; text-align: center; }
th { background-color: #34495e; color: white; padding: 15px; }
td { padding: 12px; border-bottom: 1px solid #ddd; }
tr:nth-child(even) { background-color: #f9f9f9; }
.live-tag { background: red; color: white; padding: 2px 8px; border-radius: 5px; font-size: 12px; animation: blink 1s infinite; }
@keyframes blink { 0% {opacity: 1;} 50% {opacity: 0.5;} 100% {opacity: 1;} }
</style>
</head>
<body>
<div class="header" id="main-header">
<img src="https://via.placeholder.com/100" id="user-img" alt="Logo">
<h1 id="tournament-name">ٹورنامنٹ کا نام یہاں لکھیں</h1>
<p>لائیو ٹریکنگ: <span class="live-tag">LIVE</span></p>
</div>
<div class="stats-container">
<div>کل کبوتر: <strong id="total-birds">50</strong></div>
<div>واپس آئے: <strong id="returned-birds">30</strong></div>
<div>باقی: <strong id="pending-birds">20</strong></div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>نمبر</th>
<th>نام کھلاڑی</th>
<th>اڑان کا وقت</th>
<th>واپسی کا وقت</th>
<th>ٹوٹل ٹائم</th>
</tr>
</thead>
<tbody id="results-body">
</tbody>
</table>
</div>
<script>
// یہ ڈیٹا آپ بعد میں ڈیٹا بیس سے بھی جوڑ سکتے ہیں
const tournamentData = [
{ id: 1, name: "احمد خان", fly: "06:00 AM", return: "04:30 PM", total: "10h 30m" },
{ id: 2, name: "محمد علی", fly: "06:15 AM", return: "05:00 PM", total: "10h 45m" }
];
function displayData() {
const tableBody = document.getElementById('results-body');
tableBody.innerHTML = tournamentData.map(player => `
<tr>
<td>${player.id}</td>
<td>${player.name}</td>
<td>${player.fly}</td>
<td>${player.return}</td>
<td><strong>${player.total}</strong></td>
</tr>
`).join('');
}
displayData();
</script>
</body>
</html>
2
2
3KB
3KB
98.0ms
204.0ms
217.0ms