<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>Masuk - Sistem Login yang Aman</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="WhatsApp Image 2024-10-11 at 22.18.01_698980f1.jpg">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            -webkit-font-smoothing: antialiased;
            user-select: none;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(-45deg, #2196F3, #00BCD4, #3F51B5, #673AB7);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .login-container {
            width: 100%;
            max-width: 420px;
            padding: 20px;
            perspective: 1500px;
        }

        .login-box {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transform-style: preserve-3d;
            animation: floatIn 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .login-box:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
        }

        @keyframes floatIn {
            0% {
                opacity: 0;
                transform: translateY(-100px) rotateX(-20deg);
            }

            50% {
                transform: translateY(20px) rotateX(10deg);
            }

            100% {
                opacity: 1;
                transform: translateY(0) rotateX(0);
            }
        }

        .login-header {
            text-align: center;
            margin-bottom: 35px;
            animation: fadeUpIn 1.2s ease 0.5s both;
        }

        .login-header h2 {
            color: #1a237e;
            font-size: 32px;
            margin-bottom: 15px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .login-header p {
            color: #546e7a;
            font-size: 16px;
            line-height: 1.6;
        }

        .login-button {
            width: 100%;
            padding: 16px 32px;
            background: white;
            border: 2px solid #e3f2fd;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 16px;
            font-weight: 500;
            color: #37474f;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .login-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(33, 150, 243, 0.2), rgba(0, 188, 212, 0.2));
            transition: 0.6s ease-out;
            z-index: 1;
        }

        .login-button:hover::before {
            left: 100%;
        }

        .login-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(33, 150, 243, 0.2);
            border-color: #2196F3;
            color: #1565c0;
        }

        .login-button:active {
            transform: translateY(1px);
        }

        .login-button img {
            width: 24px;
            height: 24px;
            z-index: 2;
            transition: transform 0.3s ease;
        }

        .login-button:hover img {
            transform: scale(1.1);
        }

        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 35px;
            height: 35px;
            border: 3px solid #e3f2fd;
            border-top: 3px solid #2196F3;
            border-radius: 50%;
            animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            background-color: rgba(255, 255, 255, 0.7);
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        @media (max-width: 480px) {
            .login-box {
                padding: 30px 20px;
            }

            .login-header h2 {
                font-size: 28px;
            }

            .login-button {
                padding: 14px 24px;
                font-size: 15px;
            }
        }

        /* Animasi untuk elemen yang muncul */
        @keyframes fadeUpIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Efek hover tambahan */
        .hover-effect {
            transition: all 0.3s ease;
        }

        .hover-effect:hover {
            filter: brightness(1.1);
        }
    </style>
</head>

<body>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <h2 class="animate__animated animate__fadeInDown">- Selamat Datang -</h2>
                <p class="animate__animated animate__fadeIn animate__delay-1s">Silakan masuk menggunakan akun Google
                    Anda untuk melanjutkan</p>
            </div>

            <button id="googleLogin" class="login-button hover-effect">
                <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google">
                Masuk dengan Google
            </button>
            <div class="loading" id="loading"></div>
        </div>
    </div>

    <!-- Firebase Scripts -->
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
        import { getAuth, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-analytics.js";

        const firebaseConfig = {
            apiKey: "AIzaSyBwpitBny00siG6uZjl2VvQKUhuYbTIMdk",
            authDomain: "affanhs-8b03c.firebaseapp.com",
            databaseURL: "https://affanhs-8b03c-default-rtdb.firebaseio.com",
            projectId: "affanhs-8b03c",
            storageBucket: "affanhs-8b03c.firebasestorage.app",
            messagingSenderId: "972603952785",
            appId: "1:972603952785:web:6d8419dfca466bc180f930",
            measurementId: "G-KPYHDR0L6W"
        };

        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);
        const auth = getAuth();
        const provider = new GoogleAuthProvider();

        // Tambahkan efek ripple ke tombol
        function createRipple(event) {
            const button = event.currentTarget;
            const ripple = document.createElement('span');
            const diameter = Math.max(button.clientWidth, button.clientHeight);
            const radius = diameter / 2;

            ripple.style.width = ripple.style.height = `${diameter}px`;
            ripple.style.left = `${event.clientX - button.offsetLeft - radius}px`;
            ripple.style.top = `${event.clientY - button.offsetTop - radius}px`;
            ripple.classList.add('ripple');

            const rippleContainer = button.getElementsByClassName('ripple')[0];
            if (rippleContainer) {
                rippleContainer.remove();
            }

            button.appendChild(ripple);
        }

        const loginButton = document.getElementById('googleLogin');
        loginButton.addEventListener('click', createRipple);

        // Penanganan autentikasi
        auth.onAuthStateChanged((user) => {
            if (user) {
                const userData = {
                    name: user.displayName,
                    email: user.email,
                    picture: user.photoURL,
                    uid: user.uid,
                    lastLogin: new Date().toISOString()
                };

                localStorage.setItem('user', JSON.stringify(userData));
                sessionStorage.setItem('isAuthenticated', 'true');

                // Redirect dengan animasi fade
                document.body.style.opacity = '0';
                setTimeout(() => {
                    window.location.href = '/AffanHs/AffanHs/dashboard.html';
                }, 500);
            }
        });

        loginButton.addEventListener('click', async () => {
            try {
                document.getElementById('loading').style.display = 'block';
                loginButton.disabled = true;

                const result = await signInWithPopup(auth, provider);
                const user = result.user;

                const userData = {
                    name: user.displayName,
                    email: user.email,
                    picture: user.photoURL,
                    uid: user.uid,
                    lastLogin: new Date().toISOString()
                };

                localStorage.setItem('user', JSON.stringify(userData));
                sessionStorage.setItem('isAuthenticated', 'true');

                // Redirect dengan animasi fade
                document.body.style.opacity = '0';
                setTimeout(() => {
                    window.location.href = '/AffanHs/AffanHs/dashboard.html';
                }, 500);

            } catch (error) {
                console.error('Error:', error);
                alert('Gagal masuk. Silakan coba lagi.');
                document.getElementById('loading').style.display = 'none';
                loginButton.disabled = false;
            }
        });
    </script>

    <!-- Keamanan yang Ditingkatkan -->
    <script>
        // Fungsi untuk mencegah debugging
        (function () {
            const devtools = {
                isOpen: false,
                orientation: undefined
            };

            const threshold = 160;

            const emitEvent = (isOpen, orientation) => {
                window.dispatchEvent(new CustomEvent('devtoolschange', {
                    detail: {
                        isOpen,
                        orientation
                    }
                }));
            };

            setInterval(() => {
                const widthThreshold = window.outerWidth - window.innerWidth > threshold;
                const heightThreshold = window.outerHeight - window.innerHeight > threshold;
                const orientation = widthThreshold ? 'vertical' : 'horizontal';

                if (
                    !(heightThreshold && widthThreshold) &&
                    ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
                ) {
                    if (!devtools.isOpen || devtools.orientation !== orientation) {
                        emitEvent(true, orientation);
                    }

                    devtools.isOpen = true;
                    devtools.orientation = orientation;
                } else {
                    if (devtools.isOpen) {
                        emitEvent(false, undefined);
                    }

                    devtools.isOpen = false;
                    devtools.orientation = undefined;
                }
            }, 500);

            // Mendeteksi dan mencegah Developer Tools
            window.addEventListener('devtoolschange', function (e) {
                if (e.detail.isOpen) {
                    document.body.innerHTML = '<div style="text-align:center;padding:50px;"><h1>Akses Ditolak</h1><p>Penggunaan Developer Tools tidak diizinkan pada halaman ini.</p></div>';
                }
            });
        })();

        // Mencegah klik kanan dan shortcut keyboard
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('keydown', function (e) {
            if (e.ctrlKey && (
                e.keyCode === 67 || // C
                e.keyCode === 86 || // V
                e.keyCode === 85 || // U
                e.keyCode === 117 || // F6
                e.keyCode === 73 || // I
                e.keyCode === 74 || // J
                e.keyCode === 83 || // S
                e.keyCode === 123 || // F12
                e.keyCode === 13 // Enter
            )) {
                e.preventDefault();
                return false;
            }
        });

        // Mencegah drag and drop
        document.addEventListener('dragstart', e => e.preventDefault());
        document.addEventListener('drop', e => e.preventDefault());

        // Mencegah pemilihan teks
        document.addEventListener('selectstart', e => e.preventDefault());

        // Mencegah copy paste
        ['copy', 'cut', 'paste'].forEach(event => {
            document.addEventListener(event, e => {
                e.preventDefault();
                alert('Operasi ' + event + ' tidak diizinkan pada halaman ini!');
            });
        });

        // Fungsi untuk mencegah inspect element
        (() => {
            // Mencegah akses ke console
            Object.defineProperty(window, 'console', {
                value: {
                    log: () => { },
                    info: () => { },
                    warn: () => { },
                    error: () => { },
                    debug: () => { }
                },
                writable: false,
                configurable: false
            });

            // Mencegah source view
            document.addEventListener('keydown', e => {
                if (e.key === 'F12' ||
                    (e.ctrlKey && e.shiftKey && e.key === 'I') ||
                    (e.ctrlKey && e.shiftKey && e.key === 'J') ||
                    (e.ctrlKey && e.shiftKey && e.key === 'C') ||
                    (e.ctrlKey && e.key === 'U')) {
                    e.preventDefault();
                    alert('Fitur ini tidak diizinkan!');
                }
            });

            // Mencegah print page
            window.addEventListener('keydown', e => {
                if (e.ctrlKey && e.key === 'p') {
                    e.preventDefault();
                    alert('Fitur print tidak diizinkan!');
                }
            });

            // Mencegah save page
            window.addEventListener('keydown', e => {
                if (e.ctrlKey && e.key === 's') {
                    e.preventDefault();
                    alert('Menyimpan halaman tidak diizinkan!');
                }
            });
        })();

        // Tambahan keamanan untuk mencegah debugging
        setInterval(() => {
            const startTime = performance.now();
            debugger;
            const endTime = performance.now();

            if (endTime - startTime > 100) {
                window.location.reload();
            }
        }, 1000);

        // Mencegah tab keluar fokus
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                document.title = 'Kembali ke halaman login!';
            } else {
                document.title = 'Masuk - Sistem Login yang Aman';
            }
        });

        // Mendeteksi dan mencegah penggunaan ekstensi pemeriksaan elemen
        const checkForDevTools = () => {
            const widthThreshold = window.outerWidth - window.innerWidth > threshold;
            const heightThreshold = window.outerHeight - window.innerHeight > threshold;

            if (widthThreshold || heightThreshold) {
                document.body.innerHTML = '<div style="text-align:center;padding:50px;"><h1>Akses Ditolak</h1><p>Penggunaan alat pengembang tidak diizinkan pada sistem ini.</p></div>';
            }
        };

        // Pemeriksaan berkala untuk developer tools
        setInterval(checkForDevTools, 1000);

        // Mencegah view source
        window.addEventListener('load', () => {
            document.querySelector('html').style.display = 'none';
            setTimeout(() => {
                document.querySelector('html').style.display = 'block';
            }, 100);
        });
    </script>

    <!-- Animasi smooth untuk transisi halaman -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.body.style.opacity = '0';
            setTimeout(() => {
                document.body.style.transition = 'opacity 0.5s ease';
                document.body.style.opacity = '1';
            }, 100);
        });

        // Transisi halaman saat keluar
        window.addEventListener('beforeunload', () => {
            document.body.style.opacity = '0';
        });
    </script>

    <script>
        (function () {
            // Contoh kode sederhana yang sudah diobfuscate
            var _0xabc1 = ['\x48\x65\x6c\x6c\x6f\x20\x57\x6f\x72\x6c\x64'];
            console.log(_0xabc1[0]);
        })();
    </script>
    

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Fungsi untuk memeriksa ukuran layar
            function checkScreenSize() {
                const minWidth = 768; // Lebar minimum yang diperbolehkan
                if (window.innerWidth < minWidth) {
                    // Membuat elemen overlay
                    const overlay = document.createElement('div');
                    overlay.style.position = 'fixed';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
                    overlay.style.color = 'white';
                    overlay.style.display = 'flex';
                    overlay.style.flexDirection = 'column';
                    overlay.style.justifyContent = 'center';
                    overlay.style.alignItems = 'center';
                    overlay.style.zIndex = '9999';
                    overlay.style.animation = 'fadeIn 1s ease';

                    // Pesan dalam overlay
                    const message = document.createElement('div');
                    message.style.textAlign = 'center';
                    message.style.maxWidth = '80%';
                    message.style.fontSize = '18px';
                    message.style.lineHeight = '1.5';
                    message.style.animation = 'zoomIn 0.8s ease';
                    message.innerHTML = `
                        <h1 style="margin-bottom: 20px; font-size: 24px;">Mohon Maaf</h1>
                        <p>Website ini tidak mendukung penggunaan pada perangkat dengan peforma kecil. 
                        Silakan gunakan perangkat dengan layar lebih besar dan sistem yang kuat untuk pengalaman yang optimal.</p>
                    `;

                    // Menambahkan pesan ke overlay
                    overlay.appendChild(message);

                    // Menambahkan overlay ke body
                    document.body.appendChild(overlay);

                    // Redirect setelah beberapa detik
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 4000);
                }
            }

            // Periksa ukuran layar saat halaman dimuat
            checkScreenSize();

            // Memantau perubahan ukuran layar
            window.addEventListener('resize', checkScreenSize);
        });

        // Menambahkan animasi
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
    
            @keyframes zoomIn {
                from {
                    transform: scale(0.8);
                    opacity: 0;
                }
                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        `;
        document.head.appendChild(style);
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Fungsi untuk memeriksa apakah pengguna menggunakan perangkat seluler
            function isMobileDevice() {
                const userAgent = navigator.userAgent || navigator.vendor || window.opera;
                return /android|ipad|iphone|ipod|mobile/i.test(userAgent);
            }
    
            // Fungsi untuk mencegah mode desktop pada perangkat seluler
            function preventDesktopModeOnMobile() {
                if (isMobileDevice()) {
                    // Menampilkan overlay
                    const overlay = document.createElement('div');
                    overlay.style.position = 'fixed';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
                    overlay.style.color = 'white';
                    overlay.style.display = 'flex';
                    overlay.style.flexDirection = 'column';
                    overlay.style.justifyContent = 'center';
                    overlay.style.alignItems = 'center';
                    overlay.style.zIndex = '9999';
                    overlay.style.animation = 'fadeIn 1s ease';
    
                    // Pesan dalam overlay
                    const message = document.createElement('div');
                    message.style.textAlign = 'center';
                    message.style.maxWidth = '80%';
                    message.style.fontSize = '18px';
                    message.style.lineHeight = '1.5';
                    message.style.animation = 'zoomIn 0.8s ease';
                    message.innerHTML = `
                        <h1 style="margin-bottom: 20px; font-size: 24px;">Mohon Maaf</h1>
                        <p>Mode desktop tidak didukung pada perangkat seluler. 
                        Silakan gunakan perangkat dengan layar lebih besar untuk pengalaman optimal.</p>
                    `;
    
                    // Menambahkan pesan ke overlay
                    overlay.appendChild(message);
    
                    // Menambahkan overlay ke body
                    document.body.appendChild(overlay);
    
                    // Redirect setelah beberapa detik
                    setTimeout(() => {
                        window.location.href = '/AffanHs/AffanHs/login.html';
                    }, 4000);
                }
            }
    
            // Periksa saat halaman dimuat
            preventDesktopModeOnMobile();
        });
    
        // Menambahkan animasi
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
    
            @keyframes zoomIn {
                from {
                    transform: scale(0.8);
                    opacity: 0;
                }
                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        `;
        document.head.appendChild(style);
    </script>

    <script src="https://accounts.google.com/gsi/client" async defer></script>
</body>

</html>