| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Blaze Double Predictor</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> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .blaze-red { |
| background-color: #f43f5e; |
| } |
| .blaze-black { |
| background-color: #18181b; |
| } |
| .blaze-white { |
| background-color: #f4f4f5; |
| } |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { |
| transform: scale(0.95); |
| box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); |
| } |
| 70% { |
| transform: scale(1); |
| box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); |
| } |
| 100% { |
| transform: scale(0.95); |
| box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="min-h-screen"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full blaze-red"></div> |
| <h1 class="text-xl font-bold text-gray-900">Blaze Predictor</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition"> |
| <i data-feather="settings" class="w-4 h-4 mr-2 inline"></i> |
| Settings |
| </button> |
| <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition"> |
| <i data-feather="bell" class="w-4 h-4 mr-2 inline"></i> |
| Alerts |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden col-span-1 md:col-span-2" data-aos="fade-up"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-900">Next Prediction</h2> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full text-gray-600">Updated 30s ago</span> |
| </div> |
| <div class="flex flex-col items-center justify-center py-8"> |
| <div id="prediction-circle" class="w-32 h-32 rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4 blaze-red pulse-animation"> |
| RED |
| </div> |
| <p class="text-gray-600 mb-4">Next signal in: <span id="countdown" class="font-bold">30</span>s</p> |
| <button id="telegram-btn" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition flex items-center"> |
| <i data-feather="send" class="w-4 h-4 mr-2"></i> |
| Send to Telegram |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2> |
| <div class="space-y-4"> |
| <div> |
| <p class="text-sm text-gray-500">Last 10 Rounds</p> |
| <div class="flex space-x-1 mt-2"> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| <div class="w-6 h-6 rounded-full blaze-black"></div> |
| <div class="w-6 h-6 rounded-full blaze-white"></div> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| <div class="w-6 h-6 rounded-full blaze-black"></div> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| <div class="w-6 h-6 rounded-full blaze-black"></div> |
| <div class="w-6 h-6 rounded-full blaze-red"></div> |
| </div> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Color Distribution</p> |
| <div class="mt-2 h-40"> |
| <canvas id="colorChart"></canvas> |
| </div> |
| </div> |
| <div class="grid grid-cols-3 gap-2 text-center"> |
| <div class="p-2 bg-gray-50 rounded"> |
| <p class="text-xs text-gray-500">Accuracy</p> |
| <p class="font-bold text-green-600">78%</p> |
| </div> |
| <div class="p-2 bg-gray-50 rounded"> |
| <p class="text-xs text-gray-500">Red Hits</p> |
| <p class="font-bold text-red-600">62%</p> |
| </div> |
| <div class="p-2 bg-gray-50 rounded"> |
| <p class="text-xs text-gray-500">Black Hits</p> |
| <p class="font-bold">24%</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden col-span-1 md:col-span-3" data-aos="fade-up" data-aos-delay="200"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Recent Predictions</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prediction</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Result</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 min ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-red">RED</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-red">RED</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-bold">HIT</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 min ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-black">BLACK</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-red">RED</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full bg-red-100 text-red-800 text-xs font-bold">MISS</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6 min ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-red">RED</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full text-white text-xs font-bold blaze-red">RED</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-bold">HIT</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| const ctx = document.getElementById('colorChart').getContext('2d'); |
| const colorChart = new Chart(ctx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Red', 'Black', 'White'], |
| datasets: [{ |
| data: [62, 24, 14], |
| backgroundColor: [ |
| '#f43f5e', |
| '#18181b', |
| '#f4f4f5' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| cutout: '70%', |
| plugins: { |
| legend: { |
| position: 'bottom', |
| labels: { |
| usePointStyle: true, |
| padding: 20 |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| let seconds = 30; |
| const countdownElement = document.getElementById('countdown'); |
| |
| function updateCountdown() { |
| seconds--; |
| countdownElement.textContent = seconds; |
| |
| if (seconds <= 0) { |
| seconds = 30; |
| |
| const colors = ['blaze-red', 'blaze-black', 'blaze-white']; |
| const colorNames = ['RED', 'BLACK', 'WHITE']; |
| const randomIndex = Math.floor(Math.random() * colors.length); |
| |
| const predictionCircle = document.getElementById('prediction-circle'); |
| predictionCircle.className = `w-32 h-32 rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4 ${colors[randomIndex]} pulse-animation`; |
| predictionCircle.textContent = colorNames[randomIndex]; |
| } |
| } |
| |
| setInterval(updateCountdown, 1000); |
| |
| |
| document.getElementById('telegram-btn').addEventListener('click', function() { |
| const prediction = document.getElementById('prediction-circle').textContent; |
| alert(`Signal "${prediction}" sent to Telegram!`); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
