web2468/template/missions.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Missions</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'app-bg': '#13151b',
                        'card-bg': '#1e232d',
                        'accent-green': '#00b87a',
                        'accent-green-hover': '#009e69',
                        'accent-yellow': '#facc15',
                        'text-muted': '#9ca3af',
                    },
                    backgroundImage: {
                        'card-gradient': 'linear-gradient(180deg, rgba(30, 35, 45, 0.8) 0%, rgba(19, 21, 27, 0.95) 100%)',
                        'btn-gradient': 'linear-gradient(90deg, #00b87a 0%, #00d48f 100%)',
                        'gold-gradient': 'linear-gradient(90deg, #FFD700 0%, #FFA500 100%)',
                    }
                }
            }
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        ::-webkit-scrollbar { display: none; }
        body { background-color: #13151b; color: #ffffff; font-family: 'Inter', sans-serif; }
        .glass-effect {
            background: rgba(30, 35, 45, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .mission-card-bg {
            background-image: url('https://images.unsplash.com/photo-1596838132731-3301c3fd4317?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
            background-size: cover;
            background-position: center;
        }
        .mission-overlay {
            background: linear-gradient(90deg, rgba(16, 20, 31, 0.95) 0%, rgba(16, 20, 31, 0.85) 100%);
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="antialiased min-h-screen relative pb-20">

    <!-- Header -->
    <header id="header" class="px-4 py-4 flex items-center justify-between max-w-md mx-auto relative z-40 bg-app-bg/95 backdrop-blur-sm sticky top-[0px]">
        <button class="w-10 h-10 flex items-center justify-center rounded-full bg-card-bg text-white hover:bg-white/10 transition-colors">
            <i class="fa-solid fa-chevron-left"></i>
        </button>
        <h1 class="text-xl font-bold tracking-wide">MISSION</h1>
        <button class="w-10 h-10 flex items-center justify-center rounded-full bg-card-bg text-gray-400 hover:text-white hover:bg-white/10 transition-colors">
            <i class="fa-regular fa-circle-question text-lg"></i>
        </button>
    </header>

    <!-- Main Content -->
    <main id="main-content" class="max-w-md mx-auto px-4 space-y-8 pt-2">

        <!-- Daily Mission Section -->
        <section id="daily-mission-section">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center text-green-500">
                        <i class="fa-regular fa-calendar-check"></i>
                    </div>
                    <h2 class="text-lg font-bold">Daily Mission</h2>
                </div>
                <div class="text-xs text-text-muted font-medium bg-card-bg px-3 py-1.5 rounded-full border border-white/5">
                    Reset: <span class="text-accent-green font-mono">00:58:43</span>
                </div>
            </div>

            <div class="space-y-4">
                <!-- Card 1 -->
                <div id="daily-card-1" class="relative overflow-hidden rounded-2xl border border-white/10 group">
                    <div class="absolute inset-0 mission-card-bg"></div>
                    <div class="absolute inset-0 mission-overlay"></div>
                    
                    <div class="relative p-5 z-10">
                        <div class="flex flex-col items-center text-center mb-4">
                            <div class="mb-2">
                                <span class="text-3xl">💵</span>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-1">0.5 Cash</h3>
                            <p class="text-sm text-gray-300">Betting $500 On Any Game</p>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mb-4">
                            <div class="flex justify-between text-xs text-gray-400 mb-1.5 font-medium">
                                <span>Progress</span>
                                <span>0 / 500</span>
                            </div>
                            <div class="h-2 w-full bg-black/40 rounded-full overflow-hidden border border-white/5">
                                <div class="h-full bg-gradient-to-r from-green-500 to-emerald-400 w-[0%] transition-all duration-500"></div>
                            </div>
                        </div>

                        <button class="w-full py-3 rounded-xl bg-btn-gradient text-white font-bold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-green-900/20 flex items-center justify-center gap-2 group-hover:scale-[1.02] transform transition-transform">
                            GO <i class="fa-solid fa-angles-right text-xs"></i>
                        </button>
                    </div>
                </div>

                <!-- Card 2 -->
                <div id="daily-card-2" class="relative overflow-hidden rounded-2xl border border-white/10 group">
                    <div class="absolute inset-0 mission-card-bg"></div>
                    <div class="absolute inset-0 mission-overlay"></div>
                    
                    <div class="relative p-5 z-10">
                        <div class="flex flex-col items-center text-center mb-4">
                            <div class="mb-2">
                                <span class="text-3xl">💰</span>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-1">1 Cash</h3>
                            <p class="text-sm text-gray-300">Betting $1000 On Any Game</p>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mb-4">
                            <div class="flex justify-between text-xs text-gray-400 mb-1.5 font-medium">
                                <span>Progress</span>
                                <span>0 / 1000</span>
                            </div>
                            <div class="h-2 w-full bg-black/40 rounded-full overflow-hidden border border-white/5">
                                <div class="h-full bg-gradient-to-r from-green-500 to-emerald-400 w-[0%] transition-all duration-500"></div>
                            </div>
                        </div>

                        <button class="w-full py-3 rounded-xl bg-btn-gradient text-white font-bold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-green-900/20 flex items-center justify-center gap-2 group-hover:scale-[1.02] transform transition-transform">
                            GO <i class="fa-solid fa-angles-right text-xs"></i>
                        </button>
                    </div>
                </div>

                <!-- Card 3 -->
                <div id="daily-card-3" class="relative overflow-hidden rounded-2xl border border-white/10 group">
                    <div class="absolute inset-0 mission-card-bg"></div>
                    <div class="absolute inset-0 mission-overlay"></div>
                    
                    <div class="relative p-5 z-10">
                        <div class="flex flex-col items-center text-center mb-4">
                            <div class="mb-2">
                                <span class="text-3xl">🎟️</span>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-1">Redemption Code ($0-5)</h3>
                            <p class="text-sm text-gray-300">Make $9.99 Deposits</p>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mb-4">
                            <div class="flex justify-between text-xs text-gray-400 mb-1.5 font-medium">
                                <span>Progress</span>
                                <span>0 / 9.99</span>
                            </div>
                            <div class="h-2 w-full bg-black/40 rounded-full overflow-hidden border border-white/5">
                                <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-400 w-[0%] transition-all duration-500"></div>
                            </div>
                        </div>

                        <button class="w-full py-3 rounded-xl bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-bold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-orange-900/20 flex items-center justify-center gap-2 group-hover:scale-[1.02] transform transition-transform">
                            DEPOSIT <i class="fa-solid fa-angles-right text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Weekly Mission Section -->
        <section id="weekly-mission-section" class="pb-10">
            <div class="flex items-center justify-between mb-4 pt-4 border-t border-white/5">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-500">
                        <i class="fa-solid fa-calendar-week"></i>
                    </div>
                    <h2 class="text-lg font-bold">Weekly Mission</h2>
                </div>
                <div class="text-xs text-text-muted font-medium bg-card-bg px-3 py-1.5 rounded-full border border-white/5">
                    Reset: <span class="text-blue-400 font-mono">144:58:43</span>
                </div>
            </div>

            <div class="space-y-4">
                <!-- Card 4 -->
                <div id="weekly-card-1" class="relative overflow-hidden rounded-2xl border border-white/10 group">
                    <div class="absolute inset-0 mission-card-bg"></div>
                    <div class="absolute inset-0 mission-overlay bg-gradient-to-r from-blue-900/90 to-slate-900/90"></div>
                    
                    <div class="relative p-5 z-10">
                        <div class="flex flex-col items-center text-center mb-4">
                            <div class="mb-2">
                                <span class="text-3xl">💎</span>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-1">2 Cash</h3>
                            <p class="text-sm text-gray-300">Betting $10000 On Any Game</p>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mb-4">
                            <div class="flex justify-between text-xs text-gray-400 mb-1.5 font-medium">
                                <span>Progress</span>
                                <span>0 / 10000</span>
                            </div>
                            <div class="h-2 w-full bg-black/40 rounded-full overflow-hidden border border-white/5">
                                <div class="h-full bg-gradient-to-r from-blue-500 to-cyan-400 w-[0%] transition-all duration-500"></div>
                            </div>
                        </div>

                        <button class="w-full py-3 rounded-xl bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-bold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2 group-hover:scale-[1.02] transform transition-transform">
                            GO <i class="fa-solid fa-angles-right text-xs"></i>
                        </button>
                    </div>
                </div>

                <!-- Stats Summary -->
                <div id="stats-summary" class="grid grid-cols-2 gap-3 mt-4">
                    <div class="bg-card-bg p-4 rounded-xl border border-white/5 flex flex-col items-center justify-center text-center">
                        <span class="text-xs text-gray-400 uppercase tracking-wider mb-1">Total Earned</span>
                        <span class="text-xl font-bold text-accent-green">$124.50</span>
                    </div>
                    <div class="bg-card-bg p-4 rounded-xl border border-white/5 flex flex-col items-center justify-center text-center">
                        <span class="text-xs text-gray-400 uppercase tracking-wider mb-1">Completed</span>
                        <span class="text-xl font-bold text-white">12/45</span>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- Bottom Navigation -->
    <nav id="bottom-nav" class="fixed bottom-0 w-full bg-card-bg border-t border-white/5 px-6 py-3 z-50">
        <div class="max-w-md mx-auto flex justify-between items-center">
            <a href="#" class="flex flex-col items-center gap-1 text-gray-400 hover:text-white transition-colors">
                <i class="fa-solid fa-house text-lg"></i>
                <span class="text-[10px] font-medium">Home</span>
            </a>
            <a href="#" class="flex flex-col items-center gap-1 text-accent-green">
                <i class="fa-solid fa-list-check text-lg"></i>
                <span class="text-[10px] font-medium">Mission</span>
            </a>
             <a href="#" class="relative -top-6 bg-accent-green hover:bg-accent-green-hover text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg shadow-green-900/50 transition-colors border-4 border-app-bg">
                <i class="fa-solid fa-gamepad text-2xl"></i>
            </a>
            <a href="#" class="flex flex-col items-center gap-1 text-gray-400 hover:text-white transition-colors">
                <i class="fa-solid fa-wallet text-lg"></i>
                <span class="text-[10px] font-medium">Wallet</span>
            </a>
            <a href="#" class="flex flex-col items-center gap-1 text-gray-400 hover:text-white transition-colors">
                <i class="fa-solid fa-user text-lg"></i>
                <span class="text-[10px] font-medium">Profile</span>
            </a>
        </div>
    </nav>

    <script>
        // Simple animation for progress bars on load
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                const bars = document.querySelectorAll('.bg-gradient-to-r');
                // Simulate some progress for visual appeal
                if(bars[0]) bars[0].style.width = '45%';
                if(bars[1]) bars[1].style.width = '12%';
                if(bars[2]) bars[2].style.width = '80%';
                if(bars[3]) bars[5].style.width = '5%';
            }, 500);
        });
    </script>
</body>
</html>