Hugging Face's logo

Spaces:
Tiago520
/
branco001
Running

App Files Community
branco001 / index.html
Tiago520's picture
Tiago520
from selenium import webdriver
5744b91 verified
Raw
History Blame Contribute Delete
18.6 kB
<!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 Monitor</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>
 .white-pulse {
 animation: pulse-white 2s infinite;
 }
 @keyframes pulse-white {
 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
 }
 </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <header class="mb-8 text-center">
 <h1 class="text-3xl font-bold mb-2">Blaze Double Monitor</h1>
 <p class="text-gray-400">Monitoramento em tempo real do jogo Double</p>
 </header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <!-- Status Card -->
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg" data-aos="fade-up">
 <div class="flex items-center justify-between mb-4">
 <h2 class="text-xl font-semibold">Status</h2>
 <div class="flex items-center space-x-2">
 <span id="connection-status" class="h-3 w-3 rounded-full bg-red-500"></span>
 <span id="connection-text">Desconectado</span>
 </div>
 </div>
 <div class="space-y-4">
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Última verificação:</span>
 <span id="last-check" class="font-mono">--:--:--</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Tempo online:</span>
 <span id="uptime" class="font-mono">00:00:00</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Brancos detectados:</span>
 <span id="white-count" class="font-mono">0</span>
 </div>
 </div>
 </div>
<!-- Alert Card -->
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg" data-aos="fade-up" data-aos-delay="100">
 <h2 class="text-xl font-semibold mb-4">Alerta Branco</h2>
 <div id="white-alert" class="hidden flex flex-col items-center justify-center py-8">
 <div class="white-pulse bg-white rounded-full h-20 w-20 flex items-center justify-center mb-4">
 <i data-feather="alert-circle" class="text-gray-900 w-10 h-10"></i>
 </div>
 <p class="text-xl font-bold text-center">BRANCO DETECTADO!</p>
 <p class="text-gray-400 text-sm mt-2">Última ocorrência: <span id="last-white-time">--:--:--</span></p>
 </div>
 <div id="no-white" class="flex flex-col items-center justify-center py-8">
 <div class="bg-gray-700 rounded-full h-20 w-20 flex items-center justify-center mb-4">
 <i data-feather="check-circle" class="text-green-400 w-10 h-10"></i>
 </div>
 <p class="text-xl font-bold text-center">Nenhum branco</p>
 <p class="text-gray-400 text-sm mt-2">Monitorando...</p>
 </div>
 </div>
<!-- Controls Card -->
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg" data-aos="fade-up" data-aos-delay="200">
 <h2 class="text-xl font-semibold mb-4">Controles</h2>
 <div class="space-y-4">
 <button id="connect-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center space-x-2">
 <i data-feather="power"></i>
 <span>Conectar</span>
 </button>
 <div class="flex space-x-2">
 <button id="sound-btn" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded flex items-center justify-center space-x-2">
 <i data-feather="volume-2"></i>
 <span>Som</span>
 </button>
 <button id="test-btn" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded flex items-center justify-center space-x-2">
 <i data-feather="bell"></i>
 <span>Testar</span>
 </button>
 </div>
 <div class="pt-4 border-t border-gray-700">
 <label class="flex items-center space-x-2">
 <input type="checkbox" id="auto-refresh" class="rounded text-blue-500" checked>
 <span>Atualização automática</span>
 </label>
 </div>
 </div>
 </div>
 </div>
<!-- History Section -->
 <div class="mt-12" data-aos="fade-up">
 <h2 class="text-xl font-semibold mb-4">Histórico Recente</h2>
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
 <div id="history-grid" class="grid grid-cols-8 sm:grid-cols-12 md:grid-cols-16 lg:grid-cols-20 gap-2">
 <!-- Results will be inserted here by JavaScript -->
 <div class="text-center text-gray-500">Carregando...</div>
 </div>
 </div>
 </div>
<!-- Stats Section -->
 <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6" data-aos="fade-up">
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
 <h3 class="text-lg font-semibold mb-4">Estatísticas</h3>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-gray-400">Brancos</span>
 <span id="white-percent" class="font-mono">0%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2.5">
 <div id="white-bar" class="bg-white h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-red-400">Vermelhos</span>
 <span id="red-percent" class="font-mono">0%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2.5">
 <div id="red-bar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-black">Pretos</span>
 <span id="black-percent" class="font-mono">0%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2.5">
 <div id="black-bar" class="bg-gray-900 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="bg-gray-800 rounded-lg p-6 shadow-lg col-span-2">
 <h3 class="text-lg font-semibold mb-4">Sequências</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <h4 class="text-gray-400 mb-2">Maior sequência de brancos</h4>
 <div class="flex items-center space-x-2">
 <div class="bg-white text-gray-900 font-bold rounded-full h-8 w-8 flex items-center justify-center">0</div>
 <span>em <span id="white-sequence-time" class="font-mono">--:--:--</span></span>
 </div>
 </div>
 <div>
 <h4 class="text-gray-400 mb-2">Tempo desde último branco</h4>
 <div class="flex items-center space-x-2">
 <div class="bg-gray-700 text-white font-bold rounded-full h-8 w-8 flex items-center justify-center">
 <i data-feather="clock" class="w-4 h-4"></i>
 </div>
 <span id="time-since-white" class="font-mono">--:--:--</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Initialize AOS and Feather Icons
 AOS.init();
 feather.replace();
 // Simulate connection to Blaze
 let isConnected = false;
 let whiteCount = 0;
 let lastWhiteTime = null;
 let startTime = null;
 let timerInterval = null;
 let checkInterval = null;
 let soundEnabled = true;
 // Sample data for demonstration
 const sampleResults = [
 {color: 'red', value: 7},
 {color: 'black', value: 11},
 {color: 'white', value: 0},
 {color: 'red', value: 5},
 {color: 'black', value: 8},
 {color: 'red', value: 3},
 {color: 'black', value: 14},
 {color: 'red', value: 2},
 {color: 'black', value: 9},
 {color: 'white', value: 0},
 {color: 'red', value: 6},
 {color: 'black', value: 10},
 {color: 'red', value: 4},
 {color: 'black', value: 12},
 {color: 'red', value: 1},
 {color: 'black', value: 13},
 {color: 'red', value: 5},
 {color: 'black', value: 7},
 {color: 'white', value: 0},
 {color: 'red', value: 3}
 ];
 // DOM elements
 const connectBtn = document.getElementById('connect-btn');
 const soundBtn = document.getElementById('sound-btn');
 const testBtn = document.getElementById('test-btn');
 const connectionStatus = document.getElementById('connection-status');
 const connectionText = document.getElementById('connection-text');
 const lastCheck = document.getElementById('last-check');
 const uptime = document.getElementById('uptime');
 const whiteCountEl = document.getElementById('white-count');
 const whiteAlert = document.getElementById('white-alert');
 const noWhite = document.getElementById('no-white');
 const lastWhiteTimeEl = document.getElementById('last-white-time');
 const historyGrid = document.getElementById('history-grid');
 const whitePercent = document.getElementById('white-percent');
 const redPercent = document.getElementById('red-percent');
 const blackPercent = document.getElementById('black-percent');
 const whiteBar = document.getElementById('white-bar');
 const redBar = document.getElementById('red-bar');
 const blackBar = document.getElementById('black-bar');
 const whiteSequenceTime = document.getElementById('white-sequence-time');
 const timeSinceWhite = document.getElementById('time-since-white');
 // Connect button click handler
 connectBtn.addEventListener('click', () => {
 if (isConnected) {
 disconnect();
 } else {
 connect();
 }
 });
 // Sound button click handler
 soundBtn.addEventListener('click', () => {
 soundEnabled = !soundEnabled;
 soundBtn.innerHTML = `
 <i data-feather="${soundEnabled ? 'volume-2' : 'volume-x'}"></i>
 <span>${soundEnabled ? 'Som' : 'Mudo'}</span>
 `;
 feather.replace();
 });
 // Test button click handler
 testBtn.addEventListener('click', () => {
 triggerWhiteAlert();
 });
 // Connect function
 function connect() {
 isConnected = true;
 startTime = new Date();
// Update UI
 connectBtn.innerHTML = `
 <i data-feather="power"></i>
 <span>Desconectar</span>
 `;
 connectionStatus.classList.remove('bg-red-500');
 connectionStatus.classList.add('bg-green-500');
 connectionText.textContent = 'Conectado';
// Start timers
 timerInterval = setInterval(updateTimer, 1000);
 checkInterval = setInterval(checkResults, 10000); // Check every 10 seconds
// Initial check
 checkResults();
 updateHistory();
feather.replace();
 }
 // Disconnect function
 function disconnect() {
 isConnected = false;
// Update UI
 connectBtn.innerHTML = `
 <i data-feather="power"></i>
 <span>Conectar</span>
 `;
 connectionStatus.classList.remove('bg-green-500');
 connectionStatus.classList.add('bg-red-500');
 connectionText.textContent = 'Desconectado';
// Clear timers
 clearInterval(timerInterval);
 clearInterval(checkInterval);
feather.replace();
 }
 // Update timer function
 function updateTimer() {
 const now = new Date();
 const elapsed = new Date(now - startTime);
// Format time as HH:MM:SS
 const hours = elapsed.getUTCHours().toString().padStart(2, '0');
 const minutes = elapsed.getUTCMinutes().toString().padStart(2, '0');
 const seconds = elapsed.getUTCSeconds().toString().padStart(2, '0');
uptime.textContent = `${hours}:${minutes}:${seconds}`;
 lastCheck.textContent = now.toLocaleTimeString();
 }
 // Check results function (simulated)
 function checkResults() {
 // Simulate getting new results
 const now = new Date();
 lastCheck.textContent = now.toLocaleTimeString();
// Randomly add a white result for demo purposes (10% chance)
 if (Math.random() < 0.1) {
 triggerWhiteAlert();
 }
 }
 // Trigger white alert
 function triggerWhiteAlert() {
 whiteCount++;
 lastWhiteTime = new Date();
// Update UI
 whiteCountEl.textContent = whiteCount;
 whiteAlert.classList.remove('hidden');
 noWhite.classList.add('hidden');
 lastWhiteTimeEl.textContent = lastWhiteTime.toLocaleTimeString();
// Play sound if enabled
 if (soundEnabled) {
 const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
 audio.play();
 }
// Update stats
 updateStats();
// Hide alert after 10 seconds
 setTimeout(() => {
 whiteAlert.classList.add('hidden');
 noWhite.classList.remove('hidden');
 }, 10000);
 }
 // Update history grid
 function updateHistory() {
 historyGrid.innerHTML = '';
sampleResults.forEach(result => {
 const resultEl = document.createElement('div');
 resultEl.className = 'rounded-full h-8 w-8 flex items-center justify-center font-bold text-sm';
if (result.color === 'white') {
 resultEl.classList.add('bg-white', 'text-gray-900');
 } else if (result.color === 'red') {
 resultEl.classList.add('bg-red-500', 'text-white');
 } else {
 resultEl.classList.add('bg-gray-900', 'text-white');
 }
resultEl.textContent = result.value;
 historyGrid.appendChild(resultEl);
 });
 }
 // Update statistics
 function updateStats() {
 const total = sampleResults.length;
 const whites = sampleResults.filter(r => r.color === 'white').length;
 const reds = sampleResults.filter(r => r.color === 'red').length;
 const blacks = sampleResults.filter(r => r.color === 'black').length;
const whitePct = Math.round((whites / total) * 100);
 const redPct = Math.round((reds / total) * 100);
 const blackPct = Math.round((blacks / total) * 100);
whitePercent.textContent = `${whitePct}%`;
 redPercent.textContent = `${redPct}%`;
 blackPercent.textContent = `${blackPct}%`;
whiteBar.style.width = `${whitePct}%`;
 redBar.style.width = `${redPct}%`;
 blackBar.style.width = `${blackPct}%`;
// For demo purposes, set some sequence times
 whiteSequenceTime.textContent = '12:34:56';
if (lastWhiteTime) {
 const now = new Date();
 const diff = Math.floor((now - lastWhiteTime) / 1000);
 const hours = Math.floor(diff / 3600).toString().padStart(2, '0');
 const minutes = Math.floor((diff % 3600) / 60).toString().padStart(2, '0');
 const seconds = (diff % 60).toString().padStart(2, '0');
 timeSinceWhite.textContent = `${hours}:${minutes}:${seconds}`;
 }
 }
 // Initialize
 updateHistory();
 updateStats();
 </script>
</body>
</html>