File size: 11,890 Bytes
024380d bc7f623 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 | <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blaze Double - Previsão de Branco</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}
</style>
</head>
<body class="gradient-bg min-h-screen text-white">
<div class="container mx-auto px-4 py-8">
<header class="text-center mb-8">
<h1 class="text-4xl font-bold mb-2" data-aos="fade-down">Blaze Double Analyzer</h1>
<p class="text-xl opacity-75" data-aos="fade-down" data-aos-delay="100">Previsão de horários para saída do branco</p>
</header>
<main class="max-w-2xl mx-auto">
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 shadow-lg backdrop-blur-sm mb-8" data-aos="fade-up">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-semibold">Últimos Resultados</h2>
<button id="fetchBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition-all">
<i data-feather="refresh-cw" class="mr-2"></i>
Atualizar
</button>
</div>
<div id="resultsContainer" class="grid grid-cols-5 gap-2 mb-6">
<!-- Results will be loaded here -->
</div>
<div class="bg-gray-900 rounded-lg p-4">
<h3 class="text-lg font-medium mb-3">Próximas Previsões de Branco</h3>
<div id="predictionsContainer" class="space-y-2">
<div class="text-center py-4">
<p class="text-gray-400">Clique em "Atualizar" para ver as previsões</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 shadow-lg backdrop-blur-sm" data-aos="fade-up" data-aos-delay="100">
<h2 class="text-2xl font-semibold mb-4">Como Funciona</h2>
<ul class="space-y-3">
<li class="flex items-start">
<div class="bg-blue-600 rounded-full p-1 mr-3 mt-1">
<i data-feather="check" class="w-4 h-4"></i>
</div>
<span>Analisa o histórico recente do Double da Blaze</span>
</li>
<li class="flex items-start">
<div class="bg-blue-600 rounded-full p-1 mr-3 mt-1">
<i data-feather="check" class="w-4 h-4"></i>
</div>
<span>Identifica quando saiu o branco (0)</span>
</li>
<li class="flex items-start">
<div class="bg-blue-600 rounded-full p-1 mr-3 mt-1">
<i data-feather="check" class="w-4 h-4"></i>
</div>
<span>Calcula o próximo branco como minuto atual +5 minutos</span>
</li>
<li class="flex items-start">
<div class="bg-blue-600 rounded-full p-1 mr-3 mt-1">
<i data-feather="check" class="w-4 h-4"></i>
</div>
<span>Se não sair no minuto previsto, soma o valor da cor como minutos extras</span>
</li>
</ul>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
AOS.init();
feather.replace();
// Mock data - in a real app, you would fetch from Blaze API
const mockResults = [
{ color: 'red', number: 7, time: '14:30:45' },
{ color: 'black', number: 14, time: '14:30:30' },
{ color: 'white', number: 0, time: '14:30:15' },
{ color: 'red', number: 3, time: '14:30:00' },
{ color: 'black', number: 11, time: '14:29:45' },
{ color: 'red', number: 5, time: '14:29:30' },
{ color: 'black', number: 12, time: '14:29:15' },
{ color: 'red', number: 1, time: '14:29:00' },
{ color: 'black', number: 8, time: '14:28:45' },
{ color: 'white', number: 0, time: '14:28:30' }
];
const fetchBtn = document.getElementById('fetchBtn');
const resultsContainer = document.getElementById('resultsContainer');
const predictionsContainer = document.getElementById('predictionsContainer');
function renderResults(results) {
resultsContainer.innerHTML = '';
results.slice(0, 10).forEach(result => {
const colorClass = result.color === 'white' ? 'bg-white text-black' :
result.color === 'red' ? 'bg-red-600' : 'bg-black';
const resultElement = document.createElement('div');
resultElement.className = `flex flex-col items-center justify-center p-2 rounded-lg ${colorClass}`;
resultElement.innerHTML = `
<span class="font-bold">${result.number}</span>
<span class="text-xs opacity-75">${result.time.split(' ')[1]}</span>
`;
resultsContainer.appendChild(resultElement);
});
}
function calculatePredictions(results) {
predictionsContainer.innerHTML = '';
// Find the most recent white (0)
const lastWhiteIndex = results.findIndex(r => r.color === 'white');
if (lastWhiteIndex === -1) {
predictionsContainer.innerHTML = '<div class="text-center py-4"><p class="text-gray-400">Nenhum branco recente encontrado</p></div>';
return;
}
const lastWhite = results[lastWhiteIndex];
const whiteTime = new Date(`2000-01-01T${lastWhite.time}`);
// Base prediction: white time + 5 minutes
const basePrediction = new Date(whiteTime);
basePrediction.setMinutes(basePrediction.getMinutes() + 5);
// If base prediction didn't hit, add color values as minutes
const nextResults = results.slice(0, lastWhiteIndex);
let additionalPredictions = [];
if (nextResults.length > 0) {
// Check if base prediction was correct
const basePredictionTimeStr = basePrediction.toTimeString().substr(0, 8);
const wasCorrect = results.some(r => r.time.includes(basePredictionTimeStr) && r.color === 'white');
if (!wasCorrect) {
// Add color values as minutes for next predictions
for (let i = 0; i < Math.min(2, nextResults.length); i++) {
const result = nextResults[i];
const newPrediction = new Date(basePrediction);
newPrediction.setMinutes(newPrediction.getMinutes() + result.number);
additionalPredictions.push(newPrediction);
}
}
}
// Display predictions
const allPredictions = [basePrediction, ...additionalPredictions];
if (allPredictions.length === 0) {
predictionsContainer.innerHTML = '<div class="text-center py-4"><p class="text-gray-400">Nenhuma previsão disponível</p></div>';
return;
}
allPredictions.forEach((prediction, index) => {
const now = new Date();
const predictionTime = prediction.toTimeString().substr(0, 5);
const predictionElement = document.createElement('div');
predictionElement.className = `bg-gray-700 rounded-lg p-3 flex justify-between items-center ${index === 0 ? 'border-l-4 border-blue-500' : ''}`;
predictionElement.innerHTML = `
<div class="flex items-center">
<div class="w-8 h-8 rounded-full ${index === 0 ? 'bg-blue-500' : 'bg-purple-500'} flex items-center justify-center mr-3">
<span class="text-xs font-bold">${index + 1}</span>
</div>
<div>
<p class="font-medium">Previsão ${index === 0 ? 'principal' : 'alternativa'}</p>
<p class="text-xs opacity-75">Baseado na estratégia</p>
</div>
</div>
<div class="text-right">
<p class="text-xl font-bold ${isPredictionActive(prediction) ? 'text-green-400 blink' : ''}">${predictionTime}</p>
<p class="text-xs opacity-75">${getTimeStatus(prediction)}</p>
</div>
`;
predictionsContainer.appendChild(predictionElement);
});
}
function isPredictionActive(prediction) {
const now = new Date();
const predictionTime = new Date(prediction);
// Consider active if within 30 seconds of current time
return Math.abs(now - predictionTime) < 30000;
}
function getTimeStatus(prediction) {
const now = new Date();
const predictionTime = new Date(prediction);
if (predictionTime < now) {
const diff = Math.floor((now - predictionTime) / 60000);
return `Há ${diff} min atrás`;
} else {
const diff = Math.floor((predictionTime - now) / 60000);
return `Em ${diff} min`;
}
}
fetchBtn.addEventListener('click', function() {
// Show loading state
fetchBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Carregando...';
feather.replace();
// Simulate API fetch delay
setTimeout(() => {
renderResults(mockResults);
calculatePredictions(mockResults);
// Reset button
fetchBtn.innerHTML = '<i data-feather="refresh-cw" class="mr-2"></i> Atualizar';
feather.replace();
}, 1000);
});
// Initial load
renderResults(mockResults);
});
</script>
</body>
</html>
|