web2468/template/dailybonus.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daily Betting Bonuses</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'casino-dark': '#0B0E14',
                        'casino-card': '#151C26',
                        'casino-gold': '#FFD700',
                        'casino-green': '#00E065',
                        'casino-green-dark': '#00B351',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <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; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .glass-panel {
            background: rgba(21, 28, 38, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .gold-gradient-text {
            background: linear-gradient(to bottom, #FFD700, #FDB931);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="bg-casino-dark text-white font-sans antialiased min-h-screen">

    <!-- Main Container for Mobile Layout -->
    <main id="main-container" class="max-w-md mx-auto bg-casino-dark min-h-screen relative shadow-2xl overflow-hidden pb-20">
        
        <!-- Header / Hero Section -->
        <header id="hero-section" class="relative w-full h-[280px]">
            <!-- Background Image -->
            <div class="absolute inset-0 z-0">
                <img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/031f9430a0-ea8e4ce4dcb998c61c59.png" alt="digital art of a vibrant casino slot machine theme, golden buffalo and lucky 7s, dark moody background with golden sparkles and bokeh, high quality render" />
                <!-- Overlay Gradient -->
                <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-casino-dark"></div>
            </div>

            <!-- Header Content -->
            <div class="relative z-10 p-4 flex flex-col h-full justify-between">
                <!-- Top Nav -->
                <div class="flex items-center">
                    <button class="w-10 h-10 flex items-center justify-center rounded-full bg-black/30 backdrop-blur-sm text-white hover:bg-white/10 transition">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                </div>

                <!-- Hero Text -->
                <div class="mb-4">
                    <p class="text-casino-gold font-bold text-lg mb-1 drop-shadow-md">Win Up To</p>
                    <h1 class="text-5xl font-extrabold text-white drop-shadow-lg tracking-tight mb-1">$ 200</h1>
                    <p class="text-gray-200 text-sm font-medium drop-shadow-md">Daily betting bonuses</p>
                </div>
            </div>
        </header>

        <!-- Content Body -->
        <div class="px-4 -mt-6 relative z-20 space-y-6">

            <!-- Info Card -->
            <section id="info-card" class="glass-panel rounded-2xl p-5 shadow-lg">
                <div class="space-y-4 text-sm text-gray-300 leading-relaxed">
                    <p>
                        <i class="fa-solid fa-gamepad text-casino-gold mr-2"></i>
                        Bet on the designated game and participate in the statistics.
                    </p>
                    <p>
                        <i class="fa-solid fa-trophy text-casino-gold mr-2"></i>
                        You can get <span class="text-white font-bold">JACKPOT rewards</span> if you bet a designated amount every day.
                    </p>
                    <p>
                        <i class="fa-regular fa-clock text-casino-gold mr-2"></i>
                        The rewards will be sent to your mailbox at 0:00 the next day.
                    </p>
                    <div class="flex items-start">
                        <i class="fa-solid fa-crown text-casino-gold mr-2 mt-1"></i>
                        <span class="text-yellow-100 font-medium">This event is only for VIPs</span>
                    </div>
                </div>

                <button class="w-full mt-6 bg-gradient-to-r from-casino-green to-casino-green-dark hover:from-green-400 hover:to-green-600 text-black font-bold py-3.5 px-6 rounded-xl shadow-[0_0_15px_rgba(0,224,101,0.4)] transition-all transform hover:scale-[1.02] active:scale-95 uppercase tracking-wide">
                    Become VIP
                </button>
            </section>

            <!-- Stats Table -->
            <section id="stats-table" class="bg-casino-card rounded-xl border border-white/5 overflow-hidden">
                <div class="flex flex-row">
                    <!-- Fixed Header Column -->
                    <div class="w-24 flex-shrink-0 bg-white/5 border-r border-white/5">
                        <div class="h-12 flex items-center justify-center text-xs font-bold text-gray-400 border-b border-white/5 px-2 text-center">
                            Total bet
                        </div>
                        <div class="h-12 flex items-center justify-center text-xs font-bold text-casino-gold px-2 text-center leading-tight">
                            JACKPOT Bonus
                        </div>
                    </div>

                    <!-- Scrollable Values -->
                    <div class="flex-1 overflow-x-auto hide-scrollbar">
                        <div class="flex min-w-max">
                            <!-- Column 1 -->
                            <div class="w-16 flex flex-col">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">300</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">0.3</div>
                            </div>
                            <!-- Column 2 -->
                            <div class="w-16 flex flex-col bg-white/[0.02]">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">600</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">0.8</div>
                            </div>
                            <!-- Column 3 -->
                            <div class="w-16 flex flex-col">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">1.5K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">1.5</div>
                            </div>
                            <!-- Column 4 -->
                            <div class="w-16 flex flex-col bg-white/[0.02]">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">3K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">7</div>
                            </div>
                            <!-- Column 5 -->
                            <div class="w-16 flex flex-col">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">4.5K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">15</div>
                            </div>
                            <!-- Column 6 -->
                            <div class="w-16 flex flex-col bg-white/[0.02]">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">9K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">35</div>
                            </div>
                            <!-- Column 7 -->
                            <div class="w-16 flex flex-col">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">30K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">120</div>
                            </div>
                             <!-- Column 8 -->
                             <div class="w-16 flex flex-col bg-white/[0.02]">
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-white border-b border-white/5 bg-white/5">60K</div>
                                <div class="h-12 flex items-center justify-center text-sm font-bold text-casino-gold bg-yellow-500/10">200</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Games Grid Section -->
            <section id="games-section" class="pb-8">
                <div class="text-center mb-5">
                    <h2 class="text-casino-gold font-semibold text-sm uppercase tracking-wider flex items-center justify-center gap-2">
                        <span class="w-8 h-[1px] bg-gradient-to-r from-transparent to-casino-gold"></span>
                        Only available for these games
                        <span class="w-8 h-[1px] bg-gradient-to-l from-transparent to-casino-gold"></span>
                    </h2>
                </div>

                <div class="grid grid-cols-3 gap-3">
                    <!-- Game 1 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                            <div class="absolute top-0 left-0 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-br-lg z-10">NEW</div>
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/1a847c1db0-0dc67d573c527ebcc751.png" alt="casino slot game icon buffalo king, golden buffalo head, fierce, vibrant colors" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>

                    <!-- Game 2 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/cddbfe884b-b5fdbe9f9b482ad5f01b.png" alt="casino slot game icon crazy 777, burning sevens, fire background, classic slot style" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>

                    <!-- Game 3 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/f148ec4fc3-bd3e1fd68174a4e5bf52.png" alt="casino slot game icon double diamond, shiny diamonds, blue luxury background" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>

                    <!-- Game 4 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                            <div class="absolute top-0 left-0 bg-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-br-lg z-10">HOT</div>
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/62c2c77016-daf70cfa821bdf134bd4.png" alt="casino slot game icon joker jester, colorful hat, carnival theme" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>

                    <!-- Game 5 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                             <div class="absolute top-0 left-0 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-br-lg z-10">NEW</div>
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/68cd1fc053-b93a203d1aa780a47c8c.png" alt="casino slot game icon fortune snake, green snake, asian theme, gold coins" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>

                    <!-- Game 6 -->
                    <div class="group relative">
                        <div class="relative aspect-square rounded-xl overflow-hidden border border-white/10 shadow-lg bg-gray-800">
                            <div class="absolute top-0 left-0 bg-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-br-lg z-10">HOT</div>
                            <img class="w-full h-full object-cover group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/d41df3bc75-b3b7151315139f3a95de.png" alt="casino slot game icon lucky fruit, cherries, lemons, slot machine style" />
                        </div>
                        <button class="w-full mt-2 bg-gradient-to-r from-casino-green to-casino-green-dark text-black text-xs font-bold py-1.5 rounded-full hover:brightness-110 transition">
                            Play
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>
</body>
</html>