Api-Football dan alınacak api ile çalışıyor. Bilginize
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canlı Skorlar | Real-Time</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/dist/css/all.min.css">
</head>
<body class="bg-gray-900 text-gray-100 pb-20">
<header class="bg-gray-800 p-4 shadow-xl sticky top-0 z-50 border-b border-gray-700">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-xl font-bold text-green-400"><i class="fas fa-broadcast-tower mr-2"></i>CANLI SKOR</h1>
<button onclick="fetchScores()" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full transition">
<i class="fas fa-sync-alt mr-1"></i> Yenile
</button>
</div>
</header>
<main class="container mx-auto p-4 max-w-2xl">
<div id="loader" class="text-center py-10">
<div class="animate-spin text-green-500 text-3xl"><i class="fas fa-circle-notch"></i></div>
<p class="mt-2 text-gray-400 text-sm">Maçlar yükleniyor...</p>
</div>
<div id="score-container" class="space-y-4">
</div>
</main>
<script>
// BURAYA API ANAHTARINI YAPIŞTIR
const API_KEY = "YOUR_API_KEY_HERE";
async function fetchScores() {
const container = document.getElementById('score-container');
const loader = document.getElementById('loader');
try {
loader.classList.remove('hidden');
// API-Football "live" endpoint'i (Tüm dünyadaki canlı maçlar)
const response = await fetch("https://v3.football.api-sports.io/fixtures?live=all", {
"method": "GET",
"headers": {
"x-rapidapi-host": "v3.football.api-sports.io",
"x-rapidapi-key": API_KEY
}
});
const data = await response.json();
displayScores(data.response);
} catch (error) {
container.innerHTML = `<p class="text-red-400 text-center">Veri çekilirken hata oluştu: ${error.message}</p>`;
} finally {
loader.classList.add('hidden');
}
}
function displayScores(matches) {
const container = document.getElementById('score-container');
container.innerHTML = '';
if (matches.length === 0) {
container.innerHTML = '<p class="text-gray-500 text-center">Şu an aktif canlı maç bulunmuyor.</p>';
return;
}
matches.forEach(match => {
const matchHtml = `
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700 shadow-sm">
<div class="flex justify-between text-[10px] mb-3 text-gray-400 uppercase tracking-tighter">
<span>${match.league.name}</span>
<span class="text-green-500 font-bold animate-pulse">${match.fixture.status.elapsed}' DK</span>
</div>
<div class="flex items-center justify-between">
<div class="flex flex-col items-center w-1/3">
<img src="${match.teams.home.logo}" class="w-10 h-10 mb-2 object-contain">
<span class="text-xs font-semibold text-center">${match.teams.home.name}</span>
</div>
<div class="flex flex-col items-center w-1/3">
<span class="text-3xl font-black">${match.goals.home} - ${match.goals.away}</span>
<span class="text-[10px] text-gray-500 mt-1">CANLI</span>
</div>
<div class="flex flex-col items-center w-1/3">
<img src="${match.teams.away.logo}" class="w-10 h-10 mb-2 object-contain">
<span class="text-xs font-semibold text-center">${match.teams.away.name}</span>
</div>
</div>
</div>
`;
container.innerHTML += matchHtml;
});
}
// Sayfa açıldığında çek ve her 60 saniyede bir güncelle
fetchScores();
setInterval(fetchScores, 60000);
</script>
</body>
</html>