web2468/template/customservice.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Service Modal</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;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .glass-effect {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .modal-gradient {
            background: linear-gradient(180deg, #2D3250 0%, #1a1c2e 100%);
        }
        .btn-gradient {
            background: linear-gradient(90deg, #00E676 0%, #00C853 100%);
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            background: linear-gradient(90deg, #00C853 0%, #00E676 100%);
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(0, 230, 118, 0.3);
        }
        .bg-casino-pattern {
            background-image: radial-gradient(circle at 50% 50%, #2a2d3e 0%, #0f111a 100%);
        }
    </style>
</head>
<body class="bg-gray-900 h-screen w-full overflow-hidden flex items-center justify-center relative">

    <!-- Background Layer (Simulating the App Behind) -->
    <div id="app-background" class="absolute inset-0 z-0 opacity-40 pointer-events-none">
        <!-- Abstract Casino Background -->
        <div class="absolute inset-0 bg-casino-pattern"></div>
        <!-- Decorative Elements simulating game UI behind -->
        <div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-black/80 to-transparent"></div>
        <div class="absolute top-10 right-4 text-white/20 text-4xl font-bold">777</div>
        <div class="absolute bottom-20 left-10 w-16 h-16 rounded-full bg-yellow-600/20 blur-xl"></div>
        <div class="absolute top-40 right-20 w-32 h-32 rounded-full bg-purple-600/20 blur-xl"></div>
        
        <!-- Blurred Game Image Placeholder -->
        <div class="w-full h-full overflow-hidden">
             <img class="w-full h-full object-cover blur-sm" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/6d91367d28-05cfbb95064579e97b71.png" alt="dark casino slot machine game interface background with neon lights and coins" />
        </div>
    </div>

    <!-- Dark Overlay -->
    <div class="absolute inset-0 bg-black/60 z-10 backdrop-blur-[2px]"></div>

    <!-- Close Button (External) -->
    <button class="absolute top-6 right-6 z-20 text-white/80 hover:text-white transition-colors">
        <i class="fa-solid fa-xmark text-3xl"></i>
    </button>

    <!-- Modal Container -->
    <div id="modal-container" class="relative z-30 w-[90%] max-w-[360px] modal-gradient rounded-2xl shadow-2xl overflow-hidden border border-white/10 animate-fade-in-up">
        
        <!-- Modal Header / Hero Section -->
        <div class="relative h-48 w-full overflow-hidden">
            <!-- Background glow for header -->
            <div class="absolute inset-0 bg-gradient-to-br from-indigo-900/80 to-slate-900/90 z-0"></div>
            
            <!-- Decorative particles -->
            <div class="absolute top-0 left-0 w-full h-full opacity-30 z-0">
                <div class="absolute top-4 left-10 w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
                <div class="absolute top-12 right-20 w-1 h-1 bg-green-400 rounded-full"></div>
                <div class="absolute bottom-8 left-1/3 w-3 h-3 bg-purple-400 rounded-full blur-[1px]"></div>
            </div>

            <!-- Content Container -->
            <div class="relative z-10 w-full h-full flex items-end justify-between">
                
                <!-- Text Area (Left) -->
                <div class="pl-5 pb-6 w-1/2 flex flex-col justify-center h-full pt-8">
                    <h2 class="text-white font-extrabold text-2xl leading-tight drop-shadow-lg">
                        We Are<br>Happy To<br>Serve You
                    </h2>
                </div>

                <!-- Image Area (Right) -->
                <div class="w-1/2 h-full relative">
                     <!-- Using object-contain and bottom alignment to mimic the popup style -->
                     <div class="absolute bottom-0 right-[-10px] w-[140%] h-[110%]">
                        <img class="w-full h-full object-contain object-bottom drop-shadow-2xl filter brightness-110" src="soso.png" alt="friendly female customer support agent wearing headset smiling, 3d cartoon style or realistic style, transparent background look, wearing business attire, holding a golden crown or coins" />
                     </div>
                </div>
            </div>
        </div>

        <!-- Modal Body -->
        <div class="px-6 pb-8 pt-2 text-center bg-[#252836]">
            
            <!-- Subtitle -->
            <p class="text-gray-400 text-sm mb-6 font-medium">
                Please select your customer service
            </p>

            <!-- Action Buttons -->
            <div class="space-y-4">
                <!-- 7x24 Online Chat Button -->
                <button class="w-full btn-gradient h-14 rounded-full flex items-center justify-center gap-3 group relative overflow-hidden shadow-lg shadow-green-900/20">
                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                    <div class="bg-white text-green-600 w-8 h-8 rounded-full flex items-center justify-center shadow-sm">
                        <i class="fa-solid fa-comment-dots text-xl"></i>
                    </div>
                    <span class="text-white font-bold text-base tracking-wide uppercase drop-shadow-sm">7x24 Online Chat</span>
                </button>

                <!-- First Row: Messenger and WhatsApp -->
                <div class="grid grid-cols-2 gap-4">
                    <button class="btn-gradient h-12 rounded-full flex items-center justify-center gap-1 group relative overflow-hidden shadow-lg shadow-green-900/20">
                        <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                        <div class="bg-white text-green-600 w-8 h-8 rounded-full flex items-center justify-center shadow-sm">
                            <i class="fa-brands fa-facebook-messenger text-xl"></i>
                        </div>
                        <span class="text-white font-bold text-sm tracking-wide drop-shadow-sm">Messenger</span>
                    </button>
                    
                    <button class="btn-gradient h-12 rounded-full flex items-center justify-center gap-1 group relative overflow-hidden shadow-lg shadow-green-900/20">
                        <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                        <div class="bg-white text-green-600 w-8 h-8 rounded-full flex items-center justify-center shadow-sm">
                            <i class="fa-brands fa-whatsapp text-xl"></i>
                        </div>
                        <span class="text-white font-bold text-sm tracking-wide drop-shadow-sm">WhatsApp</span>
                    </button>
                </div>
                
                <!-- Second Row: Telegram and Email -->
                <div class="grid grid-cols-2 gap-4">
                    <button class="btn-gradient h-12 rounded-full flex items-center justify-center gap-1 group relative overflow-hidden shadow-lg shadow-green-900/20">
                        <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                        <div class="bg-white text-green-600 w-8 h-8 rounded-full flex items-center justify-center shadow-sm pl-[2px]"> <!-- pl-[2px] to visually center the paper plane icon -->
                            <i class="fa-brands fa-telegram text-xl"></i>
                        </div>
                        <span class="text-white font-bold text-sm tracking-wide drop-shadow-sm ">Telegram</span>
                    </button>
                    
                    <button class="btn-gradient h-12 rounded-full flex items-center justify-center gap-1 group relative overflow-hidden shadow-lg shadow-green-900/20">
                        <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                        <div class="bg-white text-green-600 w-8 h-8 rounded-full flex items-center justify-center shadow-sm pl-[2px]"> <!-- pl-[2px] to visually center the paper plane icon -->
                            <i class="fa-solid fa-envelope text-xl"></i>
                        </div>
                        <span class="text-white font-bold text-sm tracking-wide drop-shadow-sm">Email</span>
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- Script for simple entrance animation -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('modal-container');
            modal.style.opacity = '0';
            modal.style.transform = 'scale(0.95) translateY(10px)';
            modal.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            
            setTimeout(() => {
                modal.style.opacity = '1';
                modal.style.transform = 'scale(1) translateY(0)';
            }, 100);
        });
    </script>

</body>
</html>