<!-- Shuffle -->
<!--


                      ╔══╗
                      ╚╗╔╝[Furry Rave]
                      ╔╝(¯`v´¯)(¯`v´¯)
                      ╚══`.¸.´  `.¸.´


                                ....
                                .@.@....:     ....
                               ..@..-@.*@...:...-@..
                               :.@.....@..:.@@.@....@:
                                .#..::...::............
                                ..@..:::::::::..@..::..@:
                          .........@....:::::::.@@..::..@:
                          ..@........@@.:::::::.::@...:..@.
                            ....@..:....:::::::..+:=*.:..@.:
                          .:...@@@....::::::::..@@-=+...@@..
                       ...=@::@.....@....:::...@:::==@:@:@..:
                     ...@:::@@..:.=....@.::..@@:-::::-:::@:@.:
                    ..@##:::::::::@...@@..:.@@::::@@@===:::-..
                    ..@@@@@@@@@@@@..@#@=....@:::@::::-====:@-..
                          ...::.@.@=::::@..@::@-:::::-===:::@.
                             ..=...*:@@@:@@:::::@@@@%**+-:@@..
                                 :.@-:::@*::=:@@:.....:.@%@:=.
                                 :..@:::@:-==-:...........@:@.
                                 ....@:@::::::::.@@@#@.::..@.:
                                    :.@%@@@@@....#**#..:::.@@...:
                          ......:    ..@@@@@...@.@@@-.::...@::@*....
                        :.@.::.@..    .....@@............@:-:::-=#@.@.+
                       :.@..::.....   .@......:::::::..@.=:====+=:@+@@..:
                       .@.......@@@....@@...@..:::::..:..#====+::++-::-+@...
                      :.@.:.@....@.@@@:::@-..@...:...%..::+===-:@+-====::=+@...
                      ........@.@.@@:@=@:@:+...@.:.-*..::.%+::::+@-=======::#:@.:
                      ....@.:.@..@:::-:*@::@-....:.@=...:.:=-@#@+:::==-:::+@...@..
                      ..+........@@:==-:%@%@:#::::..@=@..::.-::.@@@+---#@%.:.:....
                      .#@.....@*+@:-===-:==*:::.:::...=@.::.-+-@.....@.....::::.@.
                      .@+++%@@...#:-::-%@@..@:@.:::::....:::.*-:..::..@.:::::::.@.:
                       ..@.....::=#-:@...::.@:+.::::::::::::.%=:@.:::.@..::.....@.:
                        .....::....@..:    .@:*:::::::::::::.+=:@..:..@#*****@@....
                         ..@.::.@..:      :.@:*-.:::::::::::.+=-:@.:.@@+++++++@**@.
                          ......:         :.@:*=::::::::::::.+==:@...@@-.:::=@@++@@.
                             #.:.::.: .:: :.=:+.::::::::::::.%==-:@.@....::......@@:
                        .....:+:...@-..@...:--#.::::::::::::.%===:@@..::::::::::.@.:
                     ...@@....:*@.....:@.@@@=+%.:::::::::::..+===::.@.::...:...:.@.:
                   :.#:..#%%@##:@%:%@@#..@::=*.:::::::::::..#+====:@.....@.:.+...@..
                  ..@+#@-::::::::@#::::@:::+#::::::::::::::*+=====:@..@@.....@.@@..
                   ..@:::=======::*@::@::=+*::::::::::::::.*======:@.....@@@.....
                  ..=::==========:@*-@::==#:::::::::::::::*+======:@.:   :::
                 ..+=============:@@:--===#.:::::::::::::*+=======:@.:
                ..@:=======:::=:::@::+==++-::::::::::::#++=======-:@.
                .:::--====::@:--@@::=====*:::::::::::#++=========:@.:
                .@::@==-::-@@@..@::=====+#::::::::-*+===========::@..
                .@=@-:::@@.....@:-=====+#:::::::.:+============-:@.:
                 ...+@@...   .=-:*****#+::::::::.@:===========--@..
                  .....      ..@..=::::..::::::..@::=========::@..
                              ..@....::::::::::.@.@::=======::@..
                               ...@@......:::::....@::-=-=:-:@.:
                                 :.@..@@@.:...::::..@@+@**+@..:
                                 ..@........@.-:::..:.......:
                                  :.@@@..@@%..:::..@..
                                    ..@@.....:::..@..
                                   :.@...@.:::...@..
                                   ..@..@.......@..
                                     ...@@@@@@@...
                                        .::::..
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta property="og:title" content="Racks's Website">
    <meta property="og:description" content="Here are some helpful things or social platforms you can find me on! :3">
    <meta property="og:image" content="https://raskinthewild.com/skyair.png">
    <meta property="og:url" content="https://raskinthewild.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="sky.gif" type="image/gif">
    <title>Puro :3</title>
    <link rel="stylesheet" href="css/all.min.css">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Racks's Website">
    <meta name="twitter:description" content="i dunno, here are some helpful things or social you can find me on! :3">
    <meta name="twitter:image" content="https://raskinthewild.com/skyair.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=0.4, user-scalable=no">
    <script type="module" src="model-viewer.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: white;
            cursor: none;
        }


        @font-face {
            font-family: 'OrbitronRegular';
            src: url('webfonts/Orbitron-Regular.woff2') format('woff2'),
                url('webfonts/Orbitron-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }


        .background-model-container-xyz456 {
            position: fixed;
            top: 0;
            left: 0;
            width: 40%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
@font-face {
    font-family: 'Orbitron';
    src: url('webfonts/Orbitron-Regular.woff2') format('woff2'),
         url('webfonts/Orbitron-Regular.ttf') format('truetype');
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-box {
    display: flex;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    width: 350px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #4caf50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 20px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader-text {
    flex: 1;
    text-align: left;
    font-family: 'Orbitron'
}

.loader-text p {
    margin: 0 0 10px;
    color: #333;
    font-family: 'Orbitron'
}

/* Progress bar container */
.progress-container {
    width: 100%;
    background: #f1f1f1;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    margin-top: 10px;
}

.progress-bar {
    height: 100%;
    background: #4caf50;
    width: 0%;
    transition: width 0.2s ease;
}

.completed-box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    display: none; /* Initially hidden */
    flex-direction: column;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #4caf50;
    width: 250px;
    gap: 5px;
    z-index: -1;
}

.completed-box a {
    text-decoration: none;
    color: #4caf50;
    cursor: none;
}

.completed-box a:hover {
    text-decoration: underline;
    cursor: none;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    cursor: none;
}

.close-btn:hover {
    color: #f44336;
}


        .background-model-container-xyz456 model-viewer {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        @media (max-width: 968px) {
            .background-model-container-xyz456 {
                width: 100%;
            }
        }


        .blur-effect {
            filter: blur(8px);
        }

        .popup {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: transparent;
            backdrop-filter: blur(8px);
        }

        .popup-content {
            width: 100%;
            height: 100%;
            padding: 0;
            border: none;
            box-sizing: border-box;
            overflow: hidden;
            background-color: transparent;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .close-button {
            color: #fff;
            float: right;
            font-size: 28px;
            font-weight: bold;
            z-index: 1001;
        }

        .close-button:hover,
        .close-button:focus {
            color: #ddd;
            text-decoration: none;
            cursor: none;
        }


        .background-image2 {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -2;
            width: 100%;
            height: auto;
            background: url('https://raskinthewild.com/nixos.jpeg') no-repeat bottom center;
            background-size: cover;
        }

        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            cursor: none;
        }
        .portfolio-box {
            background: url('frame.svg') no-repeat center center;
            background-size: contain;
            width: 900px;
            height: 500px;
            padding: 5%;
            box-sizing: border-box;
            border-radius: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        .profile-pic {
            width: 150px;
            border-radius: 50%;
            cursor: none;
        }

        .brief-comment {
             font-family: 'OrbitronRegular', sans-serif;
            font-size: 1.5vw;
            margin-top: 10px;
            color: #fff;
            font-size: 17px;
            margin-top: 10px;
            cursor: none;
        }

        .emoji {
            width: 24px;
            height: 19px;
            margin-right: 20px;
            cursor: none;
        }

        .buttons {
            margin-top: 20px;
            cursor: none;
        }

        .button {
            display: inline-block;
            position: relative;
            background: transparent;
            padding: 0;
            border: none;
            cursor: none;
            margin: 1.0px 0; /
            text-decoration: none;
            width: 400px;
            height: 42px;
            overflow: hidden;
        }

        .button img {
            width: 45%;
            height: auto;
        }

        .button span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-family: 'OrbitronRegular', sans-serif;
            font-size: 20px;
            pointer-events: none;
            display: flex;
            align-items: center;
        }

        .button span i {
            margin-right: 5px;
        }

        .button:hover {
            box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.6);
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .cat-container {
            position: absolute;
            right: -100px;
            top: 50%;
            transform: translate(0, -10%);
        }

        .cat {
            max-width: 300px;
            transition: transform 2s;
            transition-delay: 15s;
            animation: spin 5s linear infinite;
        }

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

        .speech-bubble {
            display: none;
            background: #fff;
            border-radius: 10px;
            padding: 10px;
            position: absolute;
            right: 120px;
            top: 20px;
            z-index: 1;
            font-family: 'Roboto', sans-serif;
            font-size: 24px;
        }

        .custom-cursor {
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            border-radius: 50%;
            position: absolute;
            mix-blend-mode: difference;
            pointer-events: none;
            animation: pulsate 1.5s ease-in-out infinite;
        }

        .purovibe-gif {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 28%;
        }

        @keyframes pulsate {
            0% {
                transform: scale(0.8);
                opacity: 0.49;
            }
            50% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(0.8);
                opacity: 0.6;
            }
        }

        .page-zoom-out {
            animation: zoomOutFade 1.5s forwards;
        }

        @keyframes zoomOutFade {
            to {
                transform: scale(1.9);
                opacity: 0.20;
            }
        }

        .bio-button-flash {
            animation: flashWhite 9s infinite;
        }

        @keyframes flashWhite {
            50% {
                background-color: white;
                color: black;
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body style="background-color:#151515;">
<div class="background-model-container-xyz456">
    <model-viewer
            src="puro.glb"
            alt="Puro 3D Model"
            camera-controls
            auto-rotate
            touch-action="pan-y"
            interaction-prompt="none">
    </model-viewer>
</div>

 <div id="loader">
    <div class="loader-box">
        <div class="spinner"></div>
        <div class="loader-text">
            <p>Site is loading...</p>
            <p id="progressText">Loading... 0MB downloaded</p>
            <div class="progress-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
        </div>
    </div>
</div>

<!-- Completed Box -->
<div id="completedBox" class="completed-box">
    <button class="close-btn" onclick="document.getElementById('completedBox').style.display='none';">X</button>
    <div>Welcome! <a href="https://raskinthewild.com/policy" target="_blank">Policy</a></div>
    <div>Completed!</div>
    <div id="downloadedData">↓ 0MB ↑ 0</div>
</div>
<script>
const loader = document.getElementById('loader');
const progressText = document.getElementById('progressText');
const progressBar = document.getElementById('progressBar');
const content = document.getElementById('content');
const completedBox = document.getElementById('completedBox');
const downloadedData = document.getElementById('downloadedData');

function monitorTraffic() {
    let totalIncomingBytes = 0;
    const totalExpectedBytes = 50 * 1024 * 1024; // Simulate expected data size (50MB)

    // Check resource sizes periodically
    const checkInterval = setInterval(() => {
        const resources = performance.getEntriesByType('resource');
        totalIncomingBytes = resources.reduce((sum, resource) => sum + (resource.transferSize || 0), 0);

        const totalIncomingMB = (totalIncomingBytes / (1024 * 1024)).toFixed(2);
        progressText.textContent = `Loading... ${totalIncomingMB}MB downloaded`;
        progressBar.style.width = `${(totalIncomingBytes / totalExpectedBytes) * 100}%`;

        if (document.readyState === 'complete') {
            clearInterval(checkInterval);

            // Hide
            loader.style.display = 'none';

            // Show completed box
            downloadedData.textContent = `↓ ${totalIncomingMB}MB ↑ 0`;
            completedBox.style.display = 'flex';
        }
    }, 200); // Update every 200ms
}

// Start monitoring
monitorTraffic();
</script>

    <div class="background-image2"></div>
    <canvas class="background-image2" style="width: 100%; height: 100%;" width="1920" height="941"></canvas>
    <div class="content">
        <div class="portfolio-box" id="portfolio-box">
            <img class="profile-pic" src="husky.webp" alt="Profile Picture">
            <p class="brief-comment">Hello there, fluffy visitors! Welcome to my cozy little corner of the internet
                <img class="emoji" src="purolove.png" alt="puro">
                 [The site is still in maintenance. Some services may not function.]
            </p>
            <div class="buttons button-container">
                <a href="https://www.furaffinity.net/user/furrofurry" target="_blank" class="button">
                    <img src="button1.svg" alt="furaffinity">
                    <span><i class="fas fa-paw"></i> Furaffinity</span>
                </a>
                <a href="https://t.me/Rask_Racks" target="_blank" class="button">
                    <img src="button2.svg" alt="Telegram Button">
                    <span><i class="fab fa-telegram"></i> Telegram</span>
                </a>
                <a href="https://yapp.protogen.engineering/@racks" target="_blank" class="button">
                    <img src="button3.svg" alt="Yapp Button">
                    <span><i class="fas fa-network-wired"></i>Proto Yapp</span>
                </a>
                <a class="button" id="music-button">
                    <img src="button4.svg" alt="Enable Music Button">
                    <span><i class="fas fa-play"></i> Enable music</span>
                </a>
                <a href="🫧.html" class="button" id="bio-button">
                    <img src="button5.svg" alt="Bio Button">
                    <span><i class="fas fa-user"></i> Bio</span>
                </a>
            </div>
        </div>
    </div>

    <div class="cat-container">
        <img class="cat" src="puroorange.png" alt="puro Image">
        <div class="speech-bubble">Welcome :3</div>
    </div>

    <img class="purovibe-gif" src="purovibe.gif" alt="Puro Vibe GIF">
    <div class="custom-cursor"></div>


    <script>

        const catContainer = document.querySelector(".cat-container");
        const catImage = document.querySelector(".cat");
        const speechBubble = document.querySelector(".speech-bubble");
        const purovibeGif = document.querySelector(".purovibe-gif");

        setTimeout(() => {
            catContainer.style.transform = "translateX(-100%)";
            catImage.style.transform = "scaleX(-1)";
            speechBubble.style.display = "block";
        }, 3000);

        setTimeout(() => {
            catImage.remove();
            speechBubble.remove();
        }, 15000);

        const musicButton = document.getElementById("music-button");
        const music = new Audio("lol.flac");
        music.loop = true;
        let isMusicPlaying = false;

        musicButton.addEventListener("click", () => {
            if (!isMusicPlaying) {
                music.play();
                musicButton.innerHTML = `<img src="button4.svg" alt="Disable Music Button"><span><i class="fas fa-pause"></i> Disable music</span>`;
                purovibeGif.style.display = "block";
                isMusicPlaying = true;
            } else {
                music.pause();
                musicButton.innerHTML = `<img src="button4.svg" alt="Enable Music Button"><span><i class="fas fa-play"></i> Enable music</span>`;
                purovibeGif.style.display = "none";
                isMusicPlaying = false;
            }

            const textEffect = "music " + (isMusicPlaying ? "enabled" : "disabled") + ".";
            const textElement = musicButton.querySelector("span");
            textElement.textContent = "";
            const interval = 100;
            let i = 0;
            const typing = setInterval(() => {
                if (i === textEffect.length) {
                    clearInterval(typing);
                    textElement.textContent = textEffect;
                } else {
                    textElement.textContent += textEffect[i];
                    i++;
                }
            }, interval);
        });

        const customCursor = document.querySelector(".custom-cursor");

        document.addEventListener("mousemove", (e) => {
            customCursor.style.left = e.pageX + "px";
            customCursor.style.top = e.pageY + "px";
        });

        document.getElementById('bio-button').addEventListener('click', function(event) {
            event.preventDefault();
            var sound = new Audio('int.mp3');
            sound.play();
            document.body.classList.add('page-zoom-out');
            this.classList.add('bio-button-flash');
            setTimeout(function() {
                window.location.href = 'https://raskinthewild.com/🫧.html';
            }, 3000);
        });

    </script>
    <script src="puro.js"></script>
    <script>
        function clearConsoleErrors() {
            if (typeof console !== 'undefined' && console.clear) {
                console.clear();
                consoleimg.load('https://raskinthewild.com/sky.png', {size:250});
            }
        }
        clearConsoleErrors();
    </script>
</body>
</html>