| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Lottery Prediction System</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://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .prediction-card { |
| box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2); |
| transition: all 0.3s ease; |
| } |
| .prediction-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 35px -10px rgba(0,0,0,0.25); |
| } |
| .time-badge { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="gradient-bg text-white py-12 px-4"> |
| <div class="container mx-auto text-center" data-aos="fade-down"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Lottery Prediction System</h1> |
| <p class="text-xl opacity-90">Advanced white ball prediction algorithm</p> |
| <div class="mt-8"> |
| <i data-feather="bar-chart-2" class="w-12 h-12 mx-auto"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="container mx-auto px-4 py-12"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="prediction-card bg-white rounded-xl p-8" data-aos="fade-right"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="clock" class="text-blue-600 w-6 h-6"></i> |
| </div> |
| <h2 class="text-2xl font-semibold text-gray-800">Last White Ball</h2> |
| </div> |
| <div class="time-badge bg-blue-100 text-blue-800 text-xl font-medium py-3 px-6 rounded-full inline-block mb-4"> |
| 14:32:45 |
| </div> |
| <p class="text-gray-600">This was the most recent occurrence of the white ball in the game.</p> |
| </div> |
|
|
| <div class="prediction-card bg-white rounded-xl p-8" data-aos="fade-left"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i data-feather="activity" class="text-purple-600 w-6 h-6"></i> |
| </div> |
| <h2 class="text-2xl font-semibold text-gray-800">Average Interval</h2> |
| </div> |
| <div class="text-3xl font-bold text-purple-600 mb-4">45.27 <span class="text-lg">seconds</span></div> |
| <p class="text-gray-600">Calculated based on historical white ball occurrences.</p> |
| </div> |
|
|
| <div class="prediction-card bg-white rounded-xl p-8 md:col-span-2" data-aos="zoom-in"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i data-feather="target" class="text-green-600 w-6 h-6"></i> |
| </div> |
| <h2 class="text-2xl font-semibold text-gray-800">Next White Ball Prediction</h2> |
| </div> |
| <div class="time-badge bg-gradient-to-r from-green-400 to-blue-500 text-white text-2xl font-bold py-4 px-8 rounded-full inline-block mb-6"> |
| 15:18:12 |
| </div> |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i data-feather="alert-circle" class="text-yellow-500 w-5 h-5"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-yellow-700"> |
| <span class="font-medium">Betting Window:</span> Place your bets within ±1 minute of the predicted time for optimal results. |
| </p> |
| </div> |
| </div> |
| </div> |
| <div class="flex flex-wrap gap-4 justify-center"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg flex items-center"> |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> Refresh Data |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg flex items-center"> |
| <i data-feather="settings" class="w-4 h-4 mr-2"></i> Settings |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg flex items-center"> |
| <i data-feather="bell" class="w-4 h-4 mr-2"></i> Set Reminder |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-16" data-aos="fade-up"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-6">Historical Data Analysis</h3> |
| <div class="bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-4 bg-gray-50 border-b flex justify-between items-center"> |
| <span class="text-gray-700 font-medium">Recent White Ball Occurrences</span> |
| <span class="text-sm text-gray-500">Last 10 events</span> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="p-4 flex justify-between hover:bg-gray-50"> |
| <span>14:32:45</span> |
| <span class="text-blue-600 font-medium">45.2s interval</span> |
| </div> |
| <div class="p-4 flex justify-between hover:bg-gray-50"> |
| <span>13:47:23</span> |
| <span class="text-blue-600 font-medium">46.8s interval</span> |
| </div> |
| <div class="p-4 flex justify-between hover:bg-gray-50"> |
| <span>13:00:35</span> |
| <span class="text-blue-600 font-medium">44.1s interval</span> |
| </div> |
| <div class="p-4 flex justify-between hover:bg-gray-50"> |
| <span>12:16:24</span> |
| <span class="text-blue-600 font-medium">45.9s interval</span> |
| </div> |
| <div class="p-4 flex justify-between hover:bg-gray-50"> |
| <span>11:30:25</span> |
| <span class="text-blue-600 font-medium">43.5s interval</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4 text-center"> |
| <p class="mb-4">Lottery Prediction System v1.0</p> |
| <div class="flex justify-center space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="mail" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
