<!DOCTYPE html>
<html lang="Bo M6er lang">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" 
          integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" 
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <title>░y.l ░░░░}._／'´%‾‾´i 　 ░ Q </title>
    <style>
        * {
            cursor: url(https://r2.guns.lol/bb144107-4be9-4a88-8b84-feac85918dc7.cur) 16 16, auto !important;
        }
        body {
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
            font-family: monospace;
            color: #cecece;
            overflow: hidden;
        }
        .rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
            display: none; 
        }
        .raindrop {
            position: absolute;
            bottom: 100%;
            width: 2px;
            height: 10px;
            background: rgba(255, 255, 255, 0.5);
            animation: fall linear infinite;
        }
        @keyframes fall {
            to {
                transform: translateY(100vh);
                opacity: 0;
            }
        }
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 2; 
        }
        .container-header {
            width: 250px;
            text-align: center;
            position: relative;
        }
        .container-header-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 3px solid #ef5858;
            transition: transform 0.3s;
        }
        .container-header-img:hover {
            transform: scale(1.1);
        }
        .container-header-logo img {
            width: 30px;
            height: 30px;
        }
        .container-header-name-discord {
            font-size: 25px;
            color: #cecece;
        }
        .container-header-body-element {
            width: 250px;
            text-align: center;
            border-bottom: 1px solid #cecece;
            padding: 10px 0;
        }
        .container-header-body-card-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-top: 20px;
        }
        .load {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            text-align: center;
        }
        .term {
            text-align: center;
            cursor: text; 
            white-space: pre; 
            font-size: 16px; 
        }
    </style>
</head>
<body>
<div class="rain"></div>
<div class="load">
    <div class="term"></div> 
</div>
<div class="container" style="display: none;">
    <div class="container-header">
        <img class="container-header-img" src="https://cdn.discordapp.com/avatars/768830527024267264/85ad6e23a33d7df0080cd81341ab4dc5.png?size=1024" alt="Bo M6erz Discord">
        <div class="container-header-logo">
            <img src="https://cdn.discordapp.com/badge-icons/848f79194d4be5ff5f81505cbd0ce1e6.png"/>
        </div>
        <div class="container-header-name">
            <div class="container-header-name-discord">Bo M6er</div>
        </div>
        <div class="container-header-body">
            <div class="container-header-body-element">Hello! I'm Bo M6er.</div>
            <div class="container-header-body-element">Get in touch with me: 
                <div><i class="fab fa-instagram"></i> <a href="https://www.instagram.com/b0.m6er/">b0.m6er</a></div>
                <div><i class="fab fa-discord"></i> <a href="https://discord.gg/001">discord.gg/001</a></div>
            </div>
        </div>
    </div>
</div>
<audio id="myAudio" src="https://cdn.discordapp.com/attachments/1295512538674630677/1299514313417162852/Y2meta.app_-_C418__Aria_Math_320_kbps.mp3?ex=671d7a84&is=671c2904&hm=179729a952bed7d65edaa6955134797dfd7fe6e75618bc32b5bc95c559df7d7e&" preload="auto"></audio>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    const textarea = $('.term');
    let currentIndex = 0;
    let dataIndex = 0;

    const scripts = [
        './start.sh',
        '*********',
        'Yes\n',
        'crew',
        'igoose1',
        'N/A'
    ];

    const prompts = [
        "Please state the user you would like to add > ",
        "Please set the password for 'bom6er' > ",
        "Shall we create a home directory for 'bom6er' > ",
        "Directory Created, time for your socials!\n\nPlease state your TikTok username, if none put 'N/A' > ",
    ];

    const output = [
        "Information complete! Initializing database.",
        "Creating user account 'bom6er.'",
        "Setting user account password > *********",
        "Creating user home directory, /home/bom6er",
    ];

    function displayText(text, callback) {
        if (currentIndex < text.length) {
            textarea.append(`<span style="color: #c2b0d5;">${text.charAt(currentIndex)}</span>`);
            currentIndex++;
            setTimeout(() => displayText(text, callback), Math.floor(Math.random() * 50) + 20);
        } else {
            currentIndex = 0;
            textarea.append("<br>");
            if (callback) callback();
        }
    }

    function runScriptAndPrompt() {
        if (dataIndex < scripts.length) {
            displayText(scripts[dataIndex], () => {
                if (prompts[dataIndex]) {
                    textarea.append(`<span style="color: #ffffff;">${prompts[dataIndex]}</span>`);
                }
                dataIndex++;
                runScriptAndPrompt();
            });
        } else {
            setTimeout(runFeedback, 650);
        }
    }

    function runFeedback() {
        let index = 0;
        const interval = setInterval(() => {
            if (index < output.length) {
                textarea.append(`<span style="color: #ffffff;">[${(index / 1000).toFixed(3)}] ${output[index]}<br></span>`);
                index++;
            } else {
                clearInterval(interval);
                textarea.append("<br>Initializing...<br>");
                startRain(); 
                $(".load").fadeOut(2000, () => $(".container").fadeIn(2000));
            }
        }, 500);
    }

    function createRaindrop() {
        const rainContainer = document.querySelector('.rain');
        const raindrop = document.createElement('div');
        raindrop.classList.add('raindrop');
        raindrop.style.left = Math.random() * 100 + 'vw';
        raindrop.style.animationDuration = Math.random() * 1 + 0.5 + 's';
        rainContainer.appendChild(raindrop);

        setTimeout(() => raindrop.remove(), 2000); 
    }

    function startRain() {
        document.querySelector('.rain').style.display = 'block';
        setInterval(createRaindrop, 50);
    }

    setTimeout(() => {
        document.getElementById('myAudio').play();
    }, 5000); 

    runScriptAndPrompt();
</script>
</body>
</html>
