<!DOCTYPE html>
<html lang="en" theme="White">
<head>
    <style>
        * {
            cursor: url(vez/resources/cursor.cur) 16 16, auto !important;
        }
     </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="discord.gg/revgng" property="og:title">
    <link rel="shortcut icon" type="home-icon" href="vez/resources/revg.png">
    <link rel="stylesheet" href="vez/css/main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
    <link href="vez/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('vez/resources/backround.gif') 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('vez/resources/cursor.cur'), auto !important;
}</style>

<body>
    <script src="vez/js/anti-tanga.js"></script>
    <div class="user-profile" data-tilt>
        <div class="profile-header">
            <div class="avatar">
            </div>
            <div class="user-info">
                <h1>Vez</h1>
                <h3>revgang revshit</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.instagram.com/aikoococo/" target="_blank" class="social-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
                    </svg>
                </a>
                <a href="https://open.spotify.com/user/31vgzytoji2vkz3cdukhxvdvwccu?si=U6KAIt3qS3yOfZ3kR4-raw" target="_blank" class="social-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2931 2931">
                        <path fill="currentColor" d="M1465.5 0C656.1 0 0 656.1 0 1465.5S656.1 2931 1465.5 2931 2931 2274.9 2931 1465.5C2931 656.2 2274.9.1 1465.5 0zm672.1 2113.6c-26.3 43.2-82.6 56.7-125.6 30.4-344.1-210.3-777.3-257.8-1287.4-141.3-49.2 11.3-98.2-19.5-109.4-68.7-11.3-49.2 19.4-98.2 68.7-109.4C1242.1 1697.1 1721 1752 2107.3 1988c43 26.5 56.7 82.6 30.3 125.6zm179.3-398.9c-33.1 53.8-103.5 70.6-157.2 37.6-393.8-242.1-994.4-312.2-1460.3-170.8-60.4 18.3-124.2-15.8-142.6-76.1-18.2-60.4 15.9-124.1 76.2-142.5 532.2-161.5 1193.9-83.3 1646.2 194.7 53.8 33.1 70.8 103.4 37.7 157.1zm15.4-415.6c-472.4-280.5-1251.6-306.3-1702.6-169.5-72.4 22-149-18.9-170.9-91.3-21.9-72.4 18.9-149 91.4-171 517.7-157.1 1378.2-126.8 1922 196 65.1 38.7 86.5 122.8 47.9 187.8-38.5 65.2-122.8 86.7-187.8 48z"/>
                    </svg>
                </a>
                <a href="https://www.facebook.com/kio.castillo.571273" 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://tiktok.com/@veezzaauzouruz" target="_blank" class="social-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="currentColor" d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"/>
                    </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='["Kamatayan"]' 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="vez/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/960232530689273906`);
                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(discordId) {
            // Initial fetch using REST API
            fetchDiscordPresence(discordId);

            // 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(960232530689273906);
                }, 1000);
            };
        }

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

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

        function createFallingWord() {
            const words = ['revgng', 'xtazy', 'revshit', '$', 'vez', '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="vez/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>