<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PAGLA – Color Predictor</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
<div class="bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-md">
<h1 class="text-3xl font-bold text-center text-yellow-400 mb-6">🎯 PAGLA</h1>
<div class="text-center mb-6">
<p class="text-xl">Next Winning Color:</p>
<p id="predictedColor" class="text-5xl font-bold my-3 text-green-400">—</p>
<button id="predictBtn" class="bg-yellow-400 text-black font-semibold px-6 py-3 rounded-xl shadow hover:bg-yellow-300">
Predict Now
</button>
</div>
<div class="mt-6">
<h2 class="text-lg font-semibold border-b border-yellow-400 mb-2">Prediction History</h2>
<ul id="historyList" class="space-y-1 text-sm max-h-40 overflow-y-auto"></ul>
</div>
</div>
<script>
const predictBtn = document.getElementById('predictBtn');
const predictedColor = document.getElementById('predictedColor');
const historyList = document.getElementById('historyList');
const colors = ['🟥 Red', '🟩 Green', '🟦 Blue', '🟨 Yellow', '🟪 Purple'];
predictBtn.addEventListener('click', () => {
const selected = colors[Math.floor(Math.random() * colors.length)];
predictedColor.textContent = selected;
const li = document.createElement('li');
li.textContent = `${new Date().toLocaleTimeString()} — ${selected}`;
historyList.prepend(li);
});
</script>
</body>
</html>
