Spaces:

humza7656
/

Luckify

Running

App Files Files Community

humza7656 commited on Dec 21, 2025

Commit

f1a5508

verified ·

1 Parent(s): 3a1206f

Update index.html

Browse files

Files changed (1) hide show

index.html +215 -19

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <!-- Updated font to Plus Jakarta Sans for a more premium, modern feel -->
+    <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>