File size: 8,149 Bytes
f578a2b aba8fef | 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 | <!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>
|