Sugary12/binary-mind-bender
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>NumGuess: The Binary Oracle</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="components/number-display.js"></script>12 <script src="components/prediction-button.js"></script>13</head>14<body class="bg-gray-100 min-h-screen">15 <div class="container mx-auto px-4 py-8">16 <header class="text-center mb-12">17 <h1 class="text-4xl font-bold text-indigo-700 mb-2">NumGuess</h1>18 <p class="text-xl text-gray-600">The Binary Oracle 🔮</p>19 </header>20 21 <main class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">22 <number-display></number-display>23 24 <div class="mt-8 text-center">25 <h2 class="text-2xl font-semibold text-gray-800 mb-4">Will the next number be ≤2?</h2>26 <div class="flex justify-center space-x-4">27 <prediction-button type="yes">Yes</prediction-button>28 <prediction-button type="no">No</prediction-button>29 </div>30 </div>31 32 <div class="mt-8 p-4 bg-indigo-50 rounded-lg">33 <h3 class="font-medium text-indigo-700 mb-2">Prediction Result:</h3>34 <p id="predictionResult" class="text-gray-700">Make your guess!</p>35 </div>36 </main>37 38 <div class="mt-8 text-center text-gray-500">39 <p>Current streak: <span id="streakCounter" class="font-bold">0</span></p>40 </div>41 </div>42 43 <script src="script.js"></script>44 <script>45 feather.replace();46 </script>47<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>48</body>49</html>