<!DOCTYPE html>
<html>
    <head>
        <title>nick s.</title>
        <!-- <style>
            body {
                margin: 0;
                padding: 0;
                font-family: monospace;
                background-color: #141414;
                color: #4d5b83;
            }
            .webbody {
                padding: 10px 40px;
                text-align: left;
            }
            h1 {
                margin: 0;
                font-size: 24px;
            }
            p {
                margin: 5px 0;
                font-size: 18px;
                color: #bebebe;
            }
        </style> -->
    </head>
    <!-- <body>
        <div class="webbody">
            <h1>nick s.</h1>
            <p id="paragraph">
                <strong>nkdmns.info</strong> media viewer
            </p>
        </div>
    </body> -->

    <!-- <form action="auth.php" method="post" style="display: flex; flex-direction: column; align-items: center;">
        <p style="margin-bottom: 3px;">username: <input type="text" id="username" name="username" required style="border-radius: 5px; border: 1px solid #808080; padding: 5px; margin-bottom: 3px; background-color: transparent;"></p>
        <p style="margin-bottom: 3px;">secret key: <input type="password" id="password" name="secret" required style="border-radius: 5px; border: 1px solid #808080; padding: 5px; margin-bottom: 3px; background-color: transparent;"></p>
        <input type="submit" value="submit" style="background-color: #4d5b83; color: #bebebe; border-radius: 5px; border: none; padding: 5px; margin-bottom: 10px; cursor: pointer;">
    </form>
    <div id="output" style="text-align: center;"></div>
    <textarea id="responseBox" rows="4" cols="50" readonly style="width: 100%; border-radius: 5px; border: 1px solid #808080; padding: 5px; background-color: transparent;"></textarea>
    <style>
        p {
            font-family: monospace;
        }
    </style>
    <script>
        document.querySelector("form").addEventListener("submit", function(e) {
            e.preventDefault();
            var username = document.querySelector("#username").value;
            var secret = document.querySelector("#password").value;

            fetch("auth.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `username=${username}&secret=${secret}`
            })
            .then(response => response.text())
            .then(data => {
                // Handle the response from the server
                document.querySelector("#output").innerHTML = data;
                document.querySelector("#responseBox").value = data;
            });
        });
    </script> -->
    <body class="loginbody">
        <div class="main">
            <h1>nkdmns.info/media</h1>
            <p id="fadingtext"></p>

            <form action="" id="loginForm">
                <label for="first">
                    username:
                </label>
                <input type="text" id="first" name="first" 
                    placeholder="enter your username" required>

                <label for="password">
                    secret:
                </label>
                <input type="password" id="password" name="password" 
                    placeholder="enter your secret" required>

                <div class="wrap">
                    <button type="submit" style="font-family: consolas;">
                        submit
                    </button>
                </div>
            </form>
        </div>

        <script>
            document.getElementById("loginForm").addEventListener("submit", function(e) {
                e.preventDefault();
                // Add your logic for form submission here
                var username = document.getElementById("first").value;
                var secret = document.getElementById("password").value;

                fetch("auth.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    body: `username=${username}&secret=${secret}`
                })
                .then(response => response.text())
                .then(data => {
                    // Handle the response from the server
                    if (data == "true") {
                        console.log("login success");
                    }else{
                        console.log("login failed");
                    }
                });
                });
        </script>

        <script>
            let fadingtexts = ["custom image hoster provided by nick s.", "want an invite? contact domiiinos on discord"];
            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>
    </body>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: monospace;
            line-height: 1.5;
            min-height: 100vh;
            background: #141414;
            flex-direction: column;
            margin: 0;
        }

        .main {
            background-color: #202020;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 10px 20px;
            transition: transform 0.2s;
            width: 500px;
            text-align: center;
        }

        .main h1 {
            color: #4d5b83; 
        }

        label {
            display: block;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 5px;
            text-align: left;
            color: #bebebe;
            font-family: consolas;
        }

        input {
            display: block;
            width: 100%;
            margin-bottom: 15px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #141414;
            border-radius: 5px;
            background-color: #141414;
            color: #bebebe;
            font-family: consolas;
            outline: none;
        }
        input:focus {
            outline: 1px solid #bebebe;
        }

        button {
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            margin-bottom: 15px;
            border: none;
            color: #bebebe;
            cursor: pointer;
            background-color: #4d5b83;
            width: 100%;
            font-size: 16px;
        }
        .wrap {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* wfaf */
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .webbody {
            text-align: left;
            padding-left: 40px;
            padding-top: 10px;
            vertical-align: top;
            background-color: #141414;
            font-family: monospace;
            font-size: 12px;
            font-weight: normal;
            color: #4d5b83; 
            /* #ddb895 */
        }
        #header {
            color: #4d5b83;
            font-size: 20px;
            text-align: center;
        }
        #paragraph {
            color: #bebebe;
            font-weight: normal;
        }
        p {
            color: #bebebe;
            font-size: 18px;
        }
    </style>
</html>