<!DOCTYPE html><html lang="id"><head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Komunitas Kami</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
    <link href="https://ai-public.creatie.ai/gen_page/tailwind-custom.css" rel="stylesheet"/>
    <script src="https://cdn.tailwindcss.com/3.4.5?plugins=forms@0.5.7,typography@0.5.13,aspect-ratio@0.4.2,container-queries@0.1.1"></script>
    <script src="https://ai-public.creatie.ai/gen_page/tailwind-config.min.js" data-color="#000000" data-border-radius="small"></script>
</head>
    <script>
        // Set theme based on localStorage or system preference
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }

        // Toggle theme on button click
        document.addEventListener('DOMContentLoaded', function () {
            const toggleButton = document.getElementById('toggle-theme');
            toggleButton.addEventListener('click', function () {
                if (document.documentElement.classList.contains('dark')) {
                    localStorage.theme = 'light';
                } else {
                    localStorage.theme = 'dark';
                }
                document.documentElement.classList.toggle('dark');

                // Change button icon based on theme
                if (document.documentElement.classList.contains('dark')) {
                    toggleButton.innerHTML = '<i class="fas fa-moon text-white"></i>'; // Moon icon for Dark Mode
                } else {
                    toggleButton.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>'; // Sun icon for Light Mode
                }
            });

            // Set default icon on page load
            if (document.documentElement.classList.contains('dark')) {
                toggleButton.innerHTML = '<i class="fas fa-moon text-white"></i>';
            } else {
                toggleButton.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
            }
        });

                // Mencegah F12 dan klik kanan
                document.addEventListener("keydown", function(e) {
            if (e.keyCode === 123) {  // F12
                e.preventDefault();
            }
            if (e.ctrlKey && e.shiftKey && e.keyCode === 73) {  // Ctrl+Shift+I (Inspect)
                e.preventDefault();
            }
            if (e.ctrlKey && e.keyCode === 85) {  // Ctrl+U (View Source)
                e.preventDefault();
            }
        });

        // Mencegah klik kanan
        document.addEventListener("contextmenu", function(e) {
            e.preventDefault();
        });

        (function() {


            // Blokir akses ke F12 dan Inspect Element
            document.addEventListener("keydown", function(e) {
                if (e.keyCode === 123) {  // F12
                    e.preventDefault();
                }
                if (e.ctrlKey && e.shiftKey && e.keyCode === 73) {  // Ctrl+Shift+I (Inspect)
                    e.preventDefault();
                }
                if (e.ctrlKey && e.keyCode === 85) {  // Ctrl+U (View Source)
                    e.preventDefault();
                }
            });

            // Mencegah klik kanan
            document.addEventListener("contextmenu", function(e) {
                e.preventDefault();
            });
        })();

    </script>
<body class="min-h-screen bg-gray-50 flex flex-col">
    <header class="bg-white shadow-sm">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex items-center justify-center">
                <img src="img/logo.jpg" alt="Logo" class="h-12 w-auto"/>
                <h1 class="ml-4 text-4xl font-bold text-gray-900 tracking-tight">Komunitas Kami</h1>
            </div>
        </div>
    </header>
    <main class="flex-grow container mx-auto px-4 py-16 max-w-5xl">
        <section class="mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Grup WhatsApp</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <a href="https://chat.whatsapp.com/DM0DbSWebTtEw1MXRC2KFg" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors">
                    <i class="fab fa-whatsapp text-xl mr-3"></i>
                    GB RXC TEAM INDONESIA 1
                </a>
                <a href="https://chat.whatsapp.com/KF5oalhpeY88L1WP4l7u6k" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors">
                    <i class="fab fa-whatsapp text-xl mr-3"></i>
                    GB RXC TEAM INDONESIA 2
                </a>
                <a href="https://chat.whatsapp.com/CofgDt7bMKAEttB1bJtLbl" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors">
                    <i class="fab fa-whatsapp text-xl mr-3"></i>
                    GB RXC TEAM INDONESIA 3
                </a>
                <a href="https://chat.whatsapp.com/IJ6EvR2zaZHGzt90UFpLmC" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors">
                    <i class="fab fa-whatsapp text-xl mr-3"></i>
                    GB RXC TEAM INDONESIA 4
                </a>
                <a href="https://chat.whatsapp.com/CP9ux8bEwaDKfsU5w9Ggn9" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors">
                    <i class="fab fa-whatsapp text-xl mr-3"></i>
                    GB RXC TEAM INDONESIA 5
                </a>
            <a href="https://chat.whatsapp.com/EQJGampBB8A0c1Zck5NVcC" class="!rounded-button flex items-center justify-center px-6 py-3 bg-custom text-white font-medium hover:bg-custom/90 transition-colors"><i class="fab fa-whatsapp text-xl mr-3"></i>Gabung Grup RIZZ X NIX</a></div>
        </section>
        <section>
            <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center mt-16">Media Sosial</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <a href="https://discord.gg/rizzxiters" class="!rounded-button flex items-center justify-center px-6 py-3 bg-[#5865F2] text-white font-medium hover:bg-[#5865F2]/90 transition-colors">
                    <i class="fab fa-discord text-xl mr-3"></i>
                    Bergabung Discord
                </a>
                <a href="https://www.tiktok.com/@rizzxiters" class="!rounded-button flex items-center justify-center px-6 py-3 bg-[#000000] text-white font-medium hover:bg-[#000000]/90 transition-colors">
                    <i class="fab fa-tiktok text-xl mr-3"></i>
                    Ikuti TikTok
                </a>
                <a href="https://wwww.instagram.com/rizzx_xits" class="!rounded-button flex items-center justify-center px-6 py-3 bg-[#E4405F] text-white font-medium hover:bg-[#E4405F]/90 transition-colors">
                    <i class="fab fa-instagram text-xl mr-3"></i>
                    Ikuti Instagram
                </a>
                <a href="https://www.youtube.com/@RizzXiters" class="!rounded-button flex items-center justify-center px-6 py-3 bg-[#FF0000] text-white font-medium hover:bg-[#FF0000]/90 transition-colors">
                    <i class="fab fa-youtube text-xl mr-3"></i>
                    Subscribe YouTube
                </a>
            </div>
        </section>
    </main>
    <footer class="bg-white border-t border-gray-200 mt-16">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">   
            <div class="text-center space-y-4">
                <p class="text-gray-500 text-sm">© 2024 RXC TEAM INDONESIA. Hak Cipta Dilindungi.</p>
            </div>
        </div>
    </footer>
