|
|
<!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> |
