<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zki</title>
    
    <link rel="icon" type="image/png" href="fav.png"> 
    
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
    
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3BE9FSRNBZ"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-3BE9FSRNBZ');
    </script>
    <style>
        
        body {
            margin: 0;
            padding: 0;
            background: #000; 
            color: white;
            font-family: 'Source Code Pro', monospace; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            opacity: 0; 
            animation: fadeIn 2s forwards; 
            cursor: none; 
        }

       
        @keyframes fadeIn {
            0% {
                opacity: 0; 
            }
            100% {
                opacity: 1; 
            }
        }

   
        .cursor {
            position: absolute;
            width: 32px;
            height: 32px;
            background: url('windows.png') no-repeat center center;
            background-size: contain;
            pointer-events: none;
            transform: translate(-50%, -50%);
            display: none; 
        }

        .cursor-trail {
            position: absolute;
            width: 16px;
            height: 16px;
            background: url('windows.png') no-repeat center center;
            background-size: contain;
            pointer-events: none;
            animation: fadeOut 0.6s forwards;
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

     
        @keyframes snow {
            0% {
                transform: translateY(-100px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .snowflake {
            position: absolute;
            top: -50px;
            left: 50%;
            font-size: 24px;
            color: white;
            opacity: 0.8;
            animation: snow 5s linear infinite;
        }

        .snowflake:nth-child(2) {
            animation-delay: 1s;
            left: 20%;
        }

        .snowflake:nth-child(3) {
            animation-delay: 2s;
            left: 80%;
        }

        .snowflake:nth-child(4) {
            animation-delay: 3s;
            left: 40%;
        }

        
        h1 {
            font-size: 24px;
            margin-bottom: 10px;
            text-transform: uppercase;
            font-weight: normal; 
        }

       
        .profile img {
            width: 600px;
            height: auto;
            margin-bottom: 20px;
            position: relative;
        }

        
        .social-icons {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .social-icons a img {
            width: 24px;
            height: 24px;
            transition: transform 0.3s; 
        }

        .social-icons a:hover img {
            transform: scale(1.1); 
        }

        
        .inquiry-buttons {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .inquiry-buttons a {
         position: absolute;
         top: 60%; /* Adjust based on where the text is in Hi.png */
         left: 50%;
         transform: translate(-50%, -50%);
         background: transparent;
         border: none;
         color: #ECE8D7;
         font-size: 16px;
         cursor: pointer;
         text-decoration: none;
         display: block;
        }

        .inquiry-buttons a:hover {
            color: lightgray;
        }

       
        footer {
            font-size: 12px;
            margin-top: 30px;
            color: gray;
            text-align: center;
        }

        #clock {
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- Snowflakes -->
    <div class="snowflake">❄</div>
    <div class="snowflake">❄</div>
    <div class="snowflake">❄</div>
    <div class="snowflake">❄</div>

    <!-- Custom Cursor -->
    <div class="cursor" id="customCursor"></div>

    <!-- Profile Image -->
    <div class="profile">
        <img src="Hi.png" alt="Hi">
    </div>

    <!-- Social Icons -->
    <div class="social-icons">
        <a href="https://discord.com/users/214514923064131585" target="_blank">
            <img src="discord.png" alt="Discord">
        </a>
        <a href="https://www.instagram.com/weluvukeemy/" target="_blank">
            <img src="insta.png" alt="Instagram">
        </a>
        <a href="https://www.youtube.com/@maybesori" target="_blank">
            <img src="youtube.png" alt="YouTube">
        </a>
        <a href="https://x.com/weluvukeemy" target="_blank">
            <img src="twitter.png" alt="Twitter">
        </a>
        <a href="https://www.roblox.com/users/219554096/profile" target="_blank">
            <img src="roblox.png" alt="Roblox">
        </a>
    </div>

    <!-- Inquiry Button -->
    <div class="inquiry-buttons">
        <a href="nga/wsg.html">.</a>
    </div>

    <!-- Footer with Clock -->
    <footer>
        <p id="clock"></p>
        <p>© 2024 zki.lol • all rights reserved :3</p>
    </footer>

    <script>
        // Function to update the clock
        function updateClock() {
            const clockElement = document.getElementById('clock');
            const now = new Date();
            const options = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
            clockElement.textContent = now.toLocaleTimeString('en-US', options);
        }

        // Initialize and update the clock every second
        setInterval(updateClock, 1000);
        updateClock();

        // Custom Cursor Script
        const cursor = document.querySelector('#customCursor');

        document.addEventListener('mousemove', (e) => {
            cursor.style.left = `${e.pageX}px`;
            cursor.style.top = `${e.pageY}px`;

            const trail = document.createElement('div');
            trail.classList.add('cursor-trail');
            document.body.appendChild(trail);

            trail.style.left = `${e.pageX - 8}px`; // Offset to center the trail
            trail.style.top = `${e.pageY - 8}px`;

            setTimeout(() => {
                trail.remove(); // Remove the trail after animation
            }, 600);
        });

        // Title Animation Script
        const titleText = ["zki", "zki runs", "zki runs you"];
        let currentTitleIndex = 0;
        
        function animateTitle() {
            document.title = titleText[currentTitleIndex];
            currentTitleIndex = (currentTitleIndex + 1) % titleText.length; // Reset to 0 after the last one
        }

        // Ensure that the title changes immediately on page load
        window.onload = function() {
            animateTitle();
            setInterval(animateTitle, 1000); // Change title every 1 second
            callBackend(); // Call the backend API when the page loads
        };

        // Function to call the backend API
        async function callBackend() {
            try {
                const response = await fetch('/api/hello');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const result = await response.json(); // Assuming your API returns JSON
                console.log('Backend response:', result); // Log the response or handle it as needed
            } catch (error) {
                console.error('Error calling backend:', error);
            }
        }
    </script>
</body>
</html>
