<!DOCTYPE html>
<html>
    <head>
        <title id = title1>nick s.</title>
    </head>
    <body>
        <h1>
            nick s.
        </h1>
        <!-- <h1 onclick = "var audio = new Audio('audio/pop.mp3'); audio.play();">[ nick s. ]</h1> -->
        <p id = "fadingtext"></p> <script>
            let fadingtexts = ["nkdmns on telegram", "nkei#aim on val", "domiiinos on discord", "nkdmns on twitter"];
            let fadingtextindex = 0;
            let fadingtextopacity = 1;
            let fadingtextdirection = 1;
            let element = document.getElementById("fadingtext");
            setInterval(() => {
                element.innerHTML = `<i>${fadingtexts[fadingtextindex]}</i>`;
                element.style.opacity = fadingtextopacity;
                fadingtextopacity += 0.01 * fadingtextdirection;
                if (fadingtextopacity < 0 || fadingtextopacity > 1) {
                    fadingtextdirection *= -1;
                    if (fadingtextopacity <= 0) {
                        fadingtextindex = (fadingtextindex + 1) % fadingtexts.length;
                    }
                }
            }, 24);
        </script>
            <div id = "datadisplay"></div> <script>
                document.addEventListener("DOMContentLoaded", function () {
                fetch('https://api.lanyard.rest/v1/users/488358859589812244')
                    .then(response => response.json())
                    .then(data => {
                        const datadisplay = document.getElementById("datadisplay");
                    
                        const statuselement = document.createElement("p");
                        statuselement.innerHTML = "<b>status</b> " + data.data.discord_status;
                        datadisplay.appendChild(statuselement);
                    })
                    .catch(error => console.error("Error fetching JSON data:", error));
            });
            </script>
        <h1 id = "header1">404 - not found</p>
            <p id = "paragraph1" onclick="window.location.href='https://nkdmns.info/';" style="transition: all 0.3s;"
            onmouseover="this.style.color='#bebebe'"
            onmouseout="this.style.color='#808080'">return home</p>
        <div style = "position: fixed; bottom: 0; left: 0; padding: 10px;">
            <p style = "padding-left: 40px;" id = "paragraph1">last updated: never?</p>
        </div>
    </body>
    <style>
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        body {
            text-align: left;
            padding-left: 40px;
            padding-top: 10px;
            vertical-align: top;
            background-color: #141414;
            font-family: monospace;
            font-size: 12px;
            font-weight: normal;
        }
        h1 {
            color: #4d5b83;
        }
        /* h1:hover {
            color: #808080;
        }
        h1:active {
            color: #bebebe;
        } */
        #header1 {
            color: #4d5b83;
            font-size: 20px;
            text-align: center;
        }
        #paragraph1 {
            color: #bebebe;
            font-weight: normal;
        }
        p {
            color: #bebebe;
            font-size: 18px;
        }
        button {
            background-color: #bebebe;
        }
    </style>
</html>