web2468/template/freespin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Spins Bonus</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script> window.FontAwesomeConfig = { autoReplaceSvg: 'nest'};</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Russo+One&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        display: ['Russo One', 'sans-serif'],
                    },
                    colors: {
                        gold: {
                            400: '#FFD700',
                            500: '#FFC000',
                            600: '#E6AC00',
                        },
                        dark: {
                            900: '#0F172A',
                            800: '#1E293B',
                            700: '#334155',
                        }
                    },
                    backgroundImage: {
                        'casino-gradient': 'linear-gradient(135deg, #1a1c2e 0%, #0f1016 100%)',
                        'btn-silver': 'linear-gradient(180deg, #F1F5F9 0%, #CBD5E1 100%)',
                        'btn-silver-hover': 'linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%)',
                    }
                }
            }
        }
    </script>
    <style>
        ::-webkit-scrollbar { display: none;}
        .text-glow {
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        .modal-enter {
            animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes modalPop {
            0% { transform: scale(0.9); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center font-sans antialiased p-4">

    <!-- Mobile Screen Container -->
    <div id="mobile-screen" class="w-full max-w-md h-[850px] bg-slate-900 relative rounded-3xl overflow-hidden shadow-2xl border border-slate-800">

        <!-- Background Elements (Simulating the app behind the modal) -->
        <div class="absolute inset-0 opacity-30 pointer-events-none">
            <div class="grid grid-cols-2 gap-4 p-4">
                <div class="h-32 bg-emerald-900/50 rounded-xl border border-emerald-500/20"></div>
                <div class="h-32 bg-emerald-900/50 rounded-xl border border-emerald-500/20"></div>
                <div class="h-32 bg-emerald-900/50 rounded-xl border border-emerald-500/20"></div>
                <div class="h-32 bg-emerald-900/50 rounded-xl border border-emerald-500/20"></div>
            </div>
        </div>

        <!-- Backdrop Blur -->
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm z-10"></div>

        <!-- Modal Container -->
        <div id="bonus-modal" class="absolute top left -translate-x-1/2 -translate-y-1/2 w-[100%] max-w-sm z-20 modal-enter">

            <!-- Close Button -->
            <button class="absolute -top-12 right-0 w-8 h-8 flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors z-30">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <!-- Modal Content Card -->
            <div class="bg-[#1e2330] rounded-2xl shadow-2xl border border-white/10 overflow-hidden relative">

                <!-- Decorative Glow -->
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-yellow-500/20 blur-3xl rounded-full pointer-events-none"></div>

                <!-- Hero Section -->
                <div class="relative pt-6 px-4 pb-2 text-center">
                    <!-- Hero Image -->
                    <div class="relative w-full h-48 mb-2 mx-auto">
                        <div class="absolute inset-0 flex justify-center items-center z-10"
                             style="background:url('https://storage.googleapis.com/uxpilot-auth.appspot.com/72de738462-b525fc609d5e3acd8376.png') center/contain no-repeat; mix-blend-mode: normal; mask-image: radial-gradient(circle at center, black 40%, transparent 50%);">
                            <div class="w-full h-full object-contain drop-shadow-2xl scale-110 absolute inset-0 bg-gradient-to-t from-black/100 via-transparent to-casino-dark"></div>
                        </div>
                    </div>

                    <!-- Main Title -->
                    <h1 class="text-2xl md:text-3xl font-display font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-yellow-100 to-yellow-300 uppercase tracking-wide text-glow mb-1">
                        Free Spins Madness!
                    </h1>

                    <!-- Subtitle -->
                    <p class="text-slate-300 text-sm font-medium">
                        Log in to claim <span class="text-yellow-400 font-bold">0 free spins</span>
                    </p>
                </div>

                <!-- Scrollable Content Area -->
                <div class="px-4 pb-6 space-y-5">

                    <!-- Countdown Timer -->
                    <div class="bg-gradient-to-b from-orange-500 to-orange-600 rounded-xl p-3 shadow-lg border border-orange-400/50">
                        <div class="text-center">
                            <h3 class="text-orange-100 text-xs font-bold uppercase tracking-wider mb-2">Countdown to next claim</h3>
                            <div class="flex justify-center items-center gap-2 text-white font-display">
                                <!-- Hours -->
                                <div class="bg-black/30 rounded px-2 py-1 min-w-[40px]">
                                    <span class="text-2xl font-bold">18</span>
                                    <div class="text-[9px] text-orange-200 font-sans font-normal">HH</div>
                                </div>
                                <span class="text-xl pb-3">:</span>
                                <!-- Minutes -->
                                <div class="bg-black/30 rounded px-2 py-1 min-w-[40px]">
                                    <span class="text-2xl font-bold">56</span>
                                    <div class="text-[9px] text-orange-200 font-sans font-normal">MM</div>
                                </div>
                                <span class="text-xl pb-3">:</span>
                                <!-- Seconds -->
                                <div class="bg-black/30 rounded px-2 py-1 min-w-[40px]">
                                    <span class="text-2xl font-bold" id="seconds">44</span>
                                    <div class="text-[9px] text-orange-200 font-sans font-normal">SS</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Schedule Section -->
                    <div class="rounded-xl overflow-hidden border border-emerald-500/30 bg-slate-900/50">
                        <!-- Header -->
                        <div class="bg-gradient-to-r from-emerald-600 to-emerald-500 py-2 text-center shadow-md">
                            <h3 class="text-white font-bold text-sm uppercase flex items-center justify-center gap-2">
                                <i class="fa-regular fa-clock"></i> Time to Claim
                            </h3>
                        </div>

                        <!-- Grid -->
                        <div class="p-3 grid grid-cols-4 gap-2">
                            <!-- Days 1-4 -->
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">SUN</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">MON</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">TUE</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">WED</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                        </div>
                        <!-- Days 5-7 (Centered bottom row) -->
                        <div class="px-3 pb-3 flex justify-center gap-2">
                             <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700 w-1/4">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">THU</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700 w-1/4">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">FRI</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                            <div class="bg-slate-800 rounded p-1.5 text-center border border-slate-700 w-1/4">
                                <div class="text-[10px] text-slate-400 font-bold mb-0.5">SAT</div>
                                <div class="text-[9px] text-yellow-400 font-mono">18-22h</div>
                            </div>
                        </div>
                    </div>

                    <!-- Info List -->
                    <ul class="space-y-2 text-xs text-slate-400 px-1">
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-crown text-yellow-500 mt-0.5 text-[10px]"></i>
                            <span>VIP members get free spins every day during event hours.</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-hourglass-half text-slate-500 mt-0.5 text-[10px]"></i>
                            <span>Use within 12 hours—expired spins disappear.</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-gamepad text-slate-500 mt-0.5 text-[10px]"></i>
                            <span>Only valid for selected games. Terms apply.</span>
                        </li>
                    </ul>

                    <!-- CTA Button -->
                    <button class="w-full bg-btn-silver hover:bg-btn-silver-hover text-slate-900 font-display font-bold text-lg py-3 rounded-xl shadow-lg transform active:scale-95 transition-all duration-150 uppercase tracking-wide border-b-4 border-slate-400 active:border-b-0 active:translate-y-1">
                        Claim Your Free Spins
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- Countdown Script -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const secElement = document.getElementById('seconds');
            let seconds = 44;

            setInterval(() => {
                seconds--;
                if (seconds < 0) seconds = 59;
                secElement.textContent = seconds < 10 ? '0' + seconds : seconds;
            }, 1000);
        });
    </script>
</body>
</html>