<!DOCTYPE html>
<html lang="en" theme="White">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="home-icon" href="xen/resources/revg.png">
    <link rel="stylesheet" href="xen/css/main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
    <link href="xen/css/remixicon.css" rel="stylesheet">
    <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="
    https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js
    "></script>
</head>
        <script>
      var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = "";
        this.tick();
        this.isDeleting = false;
      };
      TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];
        if (this.isDeleting) {
          this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
          this.txt = fullTxt.substring(0, this.txt.length + 1);
        }
        this.el.innerHTML = '<span class = "wrap" >' + this.txt + "</span>";
        var that = this;
        var delta = 200 - Math.random() * 100;
        if (this.isDeleting) {
          delta /= 2;
        }
        if (!this.isDeleting && this.txt === fullTxt) {
          delta = this.period;
          this.isDeleting = true;
        } else if (this.isDeleting && this.txt === "") {
          this.isDeleting = false;
          this.loopNum++;
          delta = 500;
        }
        setTimeout(function() {
          that.tick();
        }, delta);
      };
      window.onload = function() {
        var elements = document.getElementsByClassName("typewrite");
        for (var i = 0; i < elements.length; i++) {
          var toRotate = elements[i].getAttribute("data-type");
          var period = elements[i].getAttribute("data-period");
          if (toRotate) {
            new TxtType(elements[i], JSON.parse(toRotate), period);
          }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
      };
      
        </script>
        
<style>    
    body {
    background: url('xen/resources/backround.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Fira Code', monospace;
    cursor: url('xen/resources/cursor.png'), auto !important;
}</style>

<body>
    <div class="user-profile" data-tilt>
        <div class="profile-header">
            <div class="avatar">
            </div>
            <div class="user-info">
                <h1>Xen</h1>
                <h3>all eyez on me.</h3>
            </div>
        </div>
        <div class="profile-details">
            <div class="social-links">
                <div class="discord-avatar">
                    <img id="avatar" src="" alt="Discord Avatar">
                </div>
                <div class="user-info-detail">
                    <span id="username" class="username">Loading...</span>
                    <br>
                    <span id="status" class="user-description">Fetching status...</span>
                </div>
            </div>
        </div>
        <div class="social-media">
            <div class="social-icons-container">
                <a href="https://www.youtube.com/@fvckedbyx" target="_blank" class="social-icon">
                    <!-- YouTube Icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="1.99 5 20.01 14.01">
                        <path fill="currentColor" d="M21.593 7.203a2.506 2.506 0 0 0-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 0 0-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765c1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 0 0 1.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6l5.207 3.005l-5.212 2.995z"></path>
                    </svg>
                </a>
                <a href="https://www.facebook.com/@dfxwx" target="_blank" class="social-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                        <path fill="currentColor" d="M40,0H10C4.486,0,0,4.486,0,10v30c0,5.514,4.486,10,10,10h30c5.514,0,10-4.486,10-10V10C50,4.486,45.514,0,40,0z M39,17h-3 c-2.145,0-3,0.504-3,2v3h6l-1,6h-5v20h-7V28h-3v-6h3v-3c0-4.677,1.581-8,7-8c2.902,0,6,1,6,1V17z"/>
                    </svg>
                </a>
                <a href="https://discord.gg/revgng" target="_blank" class="social-icon">
                    <!-- Discord Icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="1.96 4.26 20.03 15.53">
                        <path fill="currentColor" d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1a14.66 14.66 0 0 0-4.58 0a10.14 10.14 0 0 0-.53-1.1a16 16 0 0 0-4.13 1.3a17.33 17.33 0 0 0-3 11.59a16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83a3.39 3.39 0 0 0 .42-.33a11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84a12.41 12.41 0 0 0 1.08 1.78a16.44 16.44 0 0 0 5.06-2.59a17.22 17.22 0 0 0-3-11.59a16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2a1.93 1.93 0 0 1 1.8-2a1.93 1.93 0 0 1 1.8 2a1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2a1.94 1.94 0 0 1 1.8-2a1.94 1.94 0 0 1 1.8 2a1.94 1.94 0 0 1-1.8 2z"></path>
                    </svg>
                </a>
            </div>
        </div>
        <p>
            <span class="typewrite" data-period="2000" class="footer" data-type='["real eyes realize real lies."]' style="color: white; opacity: 0.8;">
            <span class="wrap"></span>
        </p>
    </div>
    <div id="clickanywhere" class="click_anywhere">
        <b>proceed</b>          
    </div>

    <div id="snow-container"></div>

    <!-- Audio Player -->
    <audio id="bgMusic" loop>
        <source src="xen/resources/bgmusic.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <!-- Play/Pause Button -->
    <div class="music-control">
        <button id="musicToggle" onclick="toggleMusic()">
            <i class="ri-music-2-fill"></i>
        </button>
        
        <!-- Volume Control -->
        <div class="volume-control">
            <input type="range" id="volumeSlider" min="0" max="100" value="50">
            <span class="volume-icon">
                <i class="ri-volume-up-fill"></i>
            </span>
        </div>
    </div>

    <script>
        // Add this at the beginning of your script section
        async function fetchDiscordPresence(discordId) {
            try {
                const response = await fetch(`https://api.lanyard.rest/v1/users/1258358721675792435`);
                const data = await response.json();

                if (data.success) {
                    const user = data.data.discord_user;
                    const presence = data.data.activities[0]?.name || "Currently doing nothing";

                    // Update the avatar with animated support
                    const avatarHash = user.avatar;
                    const isAnimated = avatarHash?.startsWith('a_');
                    const avatarFormat = isAnimated ? 'gif' : 'webp';
                    document.getElementById('avatar').src = `https://cdn.discordapp.com/avatars/${user.id}/${avatarHash}.${avatarFormat}?size=512`;

                    // Update the username and status
                    document.getElementById('username').textContent = user.username;
                    document.getElementById('status').textContent = presence;
                } else {
                    document.getElementById('status').textContent = "Unable to fetch presence.";
                }
            } catch (error) {
                console.error("Error fetching Discord presence:", error);
                document.getElementById('status').textContent = "Error fetching data.";
            }
        }

        function initializeDiscordPresence(1258358721675792435) {
            // Initial fetch using REST API
            fetchDiscordPresence(1258358721675792435);

            // Set up WebSocket connection
            const ws = new WebSocket('wss://api.lanyard.rest/socket');

            ws.onopen = () => {
                // Subscribe to updates for specific user
                ws.send(JSON.stringify({
                    op: 2,
                    d: {
                        subscribe_to_ids: [discordId]
                    }
                }));
            };

            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                
                // Handle heartbeat
                if (data.op === 1) {
                    ws.send(JSON.stringify({
                        op: 3
                    }));
                    return;
                }

                // Handle presence update
                if (data.op === 0 && data.t === 'PRESENCE_UPDATE') {
                    const user = data.d.discord_user;
                    const presence = data.d.activities[0]?.name || "Currently doing nothing";

                    // Update the avatar with animated support
                    const avatarHash = user.avatar;
                    const isAnimated = avatarHash?.startsWith('a_');
                    const avatarFormat = isAnimated ? 'gif' : 'webp';
                    document.getElementById('avatar').src = `https://cdn.discordapp.com/avatars/${user.id}/${avatarHash}.${avatarFormat}?size=512`;

                    // Update the username and status
                    document.getElementById('username').textContent = user.username;
                    document.getElementById('status').textContent = presence;
                }
            };

            // Reconnect if connection is lost
            ws.onclose = () => {
                setTimeout(() => {
                    initializeDiscordPresence(1258358721675792435);
                }, 1000);
            };
        }

        // Initialize with WebSocket connection
        initializeDiscordPresence('1258358721675792435');

        const snowContainer = document.getElementById('snow-container');

        function createFallingWord() {
            const words = ['revgng', 'xtazy', 'revshit', '3117', 'xen', 'revgng', 'xorev'];
            const word = document.createElement('div');
            word.classList.add('falling-word');
            word.textContent = words[Math.floor(Math.random() * words.length)];
            word.style.left = Math.random() * 100 + 'vw';
            word.style.animationDuration = Math.random() * 3 + 3 + 's';
            word.style.opacity = Math.random();
            snowContainer.appendChild(word);

            setTimeout(() => {
                word.remove();
            }, 6000);
        }

        setInterval(createFallingWord, 100);

        const bgMusic = document.getElementById('bgMusic');
        const musicToggle = document.getElementById('musicToggle');
        let isMusicPlaying = false;

        function toggleMusic() {
            if (isMusicPlaying) {
                bgMusic.pause();
                musicToggle.classList.remove('playing');
            } else {
                bgMusic.play();
                musicToggle.classList.add('playing');
            }
            isMusicPlaying = !isMusicPlaying;
        }

        // Auto-play policy handling
        document.addEventListener('click', function() {
            const clickAnywhereText = document.getElementById('clickanywhere');
            const userProfile = document.querySelector('.user-profile');
            
            if (clickAnywhereText) {
                // Hide the click anywhere text
                clickAnywhereText.classList.add('hidden');
                
                // Show the main content
                userProfile.classList.add('visible');
                
                // Start playing music
                if (!isMusicPlaying) {
                    toggleMusic();
                }
                
                // Remove the click text after animation
                setTimeout(() => {
                    clickAnywhereText.remove();
                }, 500);
            }
        }, { once: true });

        // Preload the audio
        bgMusic.load();

        // Optional: Start playing when the audio is loaded
        bgMusic.addEventListener('canplaythrough', function() {
            console.log('Audio ready to play');
        });

        const volumeSlider = document.getElementById('volumeSlider');
        const volumeIcon = document.querySelector('.volume-icon i');
        let lastVolume = 0.5; // Store last volume level

        // Initialize volume
        bgMusic.volume = lastVolume;

        // Volume slider control
        volumeSlider.addEventListener('input', function() {
            const volume = this.value / 100;
            bgMusic.volume = volume;
            lastVolume = volume;
            updateVolumeIcon(volume);
        });

        // Volume icon click to mute/unmute
        volumeIcon.addEventListener('click', function() {
            if (bgMusic.volume > 0) {
                lastVolume = bgMusic.volume;
                bgMusic.volume = 0;
                volumeSlider.value = 0;
                volumeIcon.className = 'ri-volume-mute-fill';
            } else {
                bgMusic.volume = lastVolume;
                volumeSlider.value = lastVolume * 100;
                updateVolumeIcon(lastVolume);
            }
        });

        // Update volume icon based on volume level
        function updateVolumeIcon(volume) {
            if (volume === 0) {
                volumeIcon.className = 'ri-volume-mute-fill';
            } else if (volume < 0.3) {
                volumeIcon.className = 'ri-volume-down-fill';
            } else {
                volumeIcon.className = 'ri-volume-up-fill';
            }
        }

        // Save volume preference to localStorage (optional)
        volumeSlider.addEventListener('change', function() {
            localStorage.setItem('musicVolume', this.value);
        });

        // Load saved volume preference (optional)
        document.addEventListener('DOMContentLoaded', function() {
            const savedVolume = localStorage.getItem('musicVolume');
            if (savedVolume !== null) {
                volumeSlider.value = savedVolume;
                bgMusic.volume = savedVolume / 100;
                updateVolumeIcon(bgMusic.volume);
            }
        });
    </script>
    <script type="text/javascript" src="xen/js/vanilla-tilt.js"></script>        
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        animateTitle();
    });
  
    function animateTitle() {
        const title = document.title;
        const originalTitle = 'revgang';
        let index = 0;
  
        setInterval(function () {
            index = (index + 1) % (originalTitle.length + 1);
            document.title = originalTitle.substring(0, index);
        }, 300); 
    }
  </script>
<script>
const b = baffle('.click_anywhere');

    b.set({
      character: '>▓▒ /█▒</ >▒░>▒ █<░ ░█▒░> ▓░/▒ ▒>░ █<▒▓ ▓▒>░',
      speed: 120
    });
    
    b.start();
    b.reveal(5000);
    b.stop();</script>  
</html>

