| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Luckify | Test Your Luck</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Plus Jakarta Sans', sans-serif; |
| background: #050505; |
| background-image: |
| radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%), |
| radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.15) 0px, transparent 50%); |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| margin: 0; |
| overflow-y: auto; |
| padding: 2rem 1rem; |
| } |
| |
| .luck-card { |
| background: rgba(255, 255, 255, 0.02); |
| backdrop-filter: blur(25px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 32px; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| } |
| |
| .input-luck { |
| background: rgba(255, 255, 255, 0.03); |
| border: 2px solid rgba(255, 255, 255, 0.05); |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .input-luck:focus { |
| background: rgba(255, 255, 255, 0.07); |
| border-color: #818cf8; |
| box-shadow: 0 0 25px rgba(129, 140, 248, 0.2); |
| transform: translateY(-2px); |
| } |
| |
| .btn-gradient { |
| background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-gradient:hover { |
| filter: brightness(1.1); |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4); |
| } |
| |
| .btn-gradient:active { |
| transform: translateY(0); |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) scale(1); } |
| 50% { transform: translateY(-10px) scale(1.02); } |
| } |
| |
| .animate-luck { |
| animation: float 4s ease-in-out infinite; |
| } |
| |
| .result-box { |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .hidden-card { |
| opacity: 0; |
| transform: translateY(20px) scale(0.9); |
| pointer-events: none; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #050505; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #312e81; |
| border-radius: 10px; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <main class="w-full max-w-md luck-card p-10 relative z-10"> |
| <div class="text-center mb-12"> |
| <h1 class="text-5xl font-extrabold tracking-tight bg-gradient-to-b from-white to-slate-400 bg-clip-text text-transparent mb-3"> |
| Luckify |
| </h1> |
| <p class="text-slate-500 font-medium tracking-tight">Guess the Number, Win the Prize</p> |
| </div> |
|
|
| <form id="luckForm" class="space-y-8"> |
| <div class="relative"> |
| <div class="flex justify-between items-end mb-3 px-1"> |
| <label for="numberInput" class="text-sm font-semibold text-slate-300"> |
| Pick a Number |
| </label> |
| <span class="text-[11px] font-bold text-slate-500 bg-slate-800/50 px-2 py-1 rounded">1 — 10</span> |
| </div> |
| <input |
| type="number" |
| id="numberInput" |
| required |
| min="1" |
| max="10" |
| placeholder="Enter your guess..." |
| class="w-full input-luck rounded-2xl px-6 py-5 text-2xl font-bold text-white outline-none placeholder:text-slate-700 text-center" |
| > |
| </div> |
|
|
| <button |
| type="submit" |
| id="submitBtn" |
| class="w-full btn-gradient py-5 rounded-2xl font-extrabold text-xl tracking-wide flex items-center justify-center gap-3" |
| > |
| <span id="btnText">Test Your Luck</span> |
| <div id="loader" class="hidden"> |
| <svg class="animate-spin h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
| <path class="opacity-75" fill="currentColor" d="4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
| </svg> |
| </div> |
| </button> |
| </form> |
|
|
| <div id="resultContainer" class="mt-10 result-box hidden-card"> |
| <div class="bg-gradient-to-br from-indigo-500/5 to-purple-500/5 border border-white/5 rounded-3xl p-8 text-center animate-luck"> |
| <div class="w-12 h-1 w-1/4 bg-indigo-500/30 mx-auto mb-6 rounded-full"></div> |
| <p id="resultText" class="text-xl text-slate-100 font-semibold leading-relaxed tracking-tight"></p> |
| </div> |
| </div> |
|
|
| <footer class="mt-12 text-center border-t border-white/5 pt-8"> |
| <p class="text-slate-600 text-xs font-bold tracking-[0.2em] uppercase">Developed by Hamza</p> |
| </footer> |
| </main> |
|
|
| <script> |
| const luckForm = document.getElementById('luckForm'); |
| const numberInput = document.getElementById('numberInput'); |
| const submitBtn = document.getElementById('submitBtn'); |
| const btnText = document.getElementById('btnText'); |
| const loader = document.getElementById('loader'); |
| const resultContainer = document.getElementById('resultContainer'); |
| const resultText = document.getElementById('resultText'); |
| |
| const BASE_URL = 'https://humza7656-guess-backend.hf.space'; |
| |
| luckForm.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| const guessValue = parseInt(numberInput.value); |
| |
| if (isNaN(guessValue) || guessValue < 1 || guessValue > 10) { |
| showFeedback("Pick a number between 1 and 10."); |
| return; |
| } |
| |
| setLoading(true); |
| resultContainer.classList.add('hidden-card'); |
| |
| try { |
| const url = new URL(`${BASE_URL}/guess_it`); |
| url.searchParams.append('number', guessValue); |
| |
| const response = await fetch(url.toString(), { |
| method: 'GET', |
| headers: { 'Accept': 'application/json' } |
| }); |
| |
| if (!response.ok) throw new Error('API is taking a nap'); |
| |
| const data = await response.json(); |
| showFeedback(data.Guessy || "The crystal ball is cloudy. Try again."); |
| |
| } catch (error) { |
| showFeedback(`System Error: ${error.message}`); |
| } finally { |
| setLoading(false); |
| } |
| }); |
| |
| function setLoading(isLoading) { |
| if (isLoading) { |
| loader.classList.remove('hidden'); |
| btnText.textContent = ''; |
| submitBtn.disabled = true; |
| submitBtn.classList.add('opacity-90', 'cursor-not-allowed'); |
| } else { |
| loader.classList.add('hidden'); |
| btnText.textContent = 'Test Your Luck'; |
| submitBtn.disabled = false; |
| submitBtn.classList.remove('opacity-90', 'cursor-not-allowed'); |
| } |
| } |
| |
| function showFeedback(message) { |
| resultText.textContent = message; |
| resultContainer.classList.remove('hidden-card'); |
| } |
| </script> |
| </body> |
| </html> |
