Step 3: Styling with CSS
Here’s a sample style.css file to make your interface visually appealing:
css
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #212529;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.matches {
margin: 20px auto;
width: 90%;
max-width: 1200px;
}
.match-data {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
}
Etapa 4: busca de dados em tempo real
Para buscar dados esportivos em tempo real, usaremos uma API. Inscreva-se para obter uma chave de API gratuita da API-FOOTBALL ou de qualquer provedor de API de esportes.
api_handler.php:
Este script busca dados de partidas ao vivo e os formata para o front-end.
php
$api_url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
"x-rapidapi-key: $api_key",
"x-rapidapi-host: v3.football.api-sports.io"
]
]);
$response = curl_exec($curl);
curl_close($curl);
echo $response;
?>
Etapa 5: exibindo dados em tempo real
Em seu arquivo script.js, busque e exiba os dados dinamicamente.
javascript
document.addEventListener("DOMContentLoaded", function() {
const matchDataDiv = document.getElementById("dados-correspondência");
função assíncrona fetchMatchData() {
tentar {
resposta const = aguarda busca("api_handler.php");
dados const = aguardar resposta.json();
renderMatches(dados.resposta);
} pegar (erro) {
console.error("Erro ao buscar dados:", erro);
matchDataDiv.innerHTML = "Falha ao carregar dados de correspondência. Tente novamente mais tarde.
";
}
}
function renderMatches(correspondências) {
matchDataDiv.innerHTML = ""; //Limpa os dados anteriores
partidas.forEach(correspondência => {
const correspondênciaHTML = `
Etapa 6: Conectando dados de probabilidades (opcional)
Se você também quiser exibir probabilidades, encontre um provedor de API que ofereça dados de probabilidades em tempo real, como The Odds API.
Modifique o api_handler.php para incluir dados de probabilidades adicionando uma nova solicitação de API ou combinando vários endpoints.
Etapa 7: executando o aplicativo
- Inicie seu servidor local (por exemplo, usando XAMPP).
- Coloque a pasta do seu projeto no diretório htdocs.
- Abra index.php no seu navegador: localhost/project-folder/index.php
Conclusão
Parabéns! Você acabou de construir uma interface de apostas esportivas em tempo real usando PHP, CSS e JavaScript. Esta configuração busca dados de partidas ao vivo e atualiza dinamicamente a interface, fornecendo uma base sólida para criar um site no estilo SBOBET88.
Sinta-se à vontade para estender este projeto adicionando funcionalidade de login de usuário, recursos de apostas ou análises avançadas. Boa codificação! ?
