<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta property="og:type" content="website" />
        <meta name="title" content="CDN Slave" />
        <meta name="description" content="Upload to Discord's CDN without needing their app." />
        <meta name="robots" content="index, follow" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="English" />
        <meta name="author" content="Spinfal" />
        <meta property="og:image" content="https://cdn.spin.rip/r/4EBFE1B7-D38B-421D-9289-EA85676DDF37.jpeg" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content="https://cdn.spin.rip/r/4EBFE1B7-D38B-421D-9289-EA85676DDF37.jpeg" />
        <link rel="icon" href="/favicon.ico" />
        <title>CDN Slave</title>
        <link rel="stylesheet" href="css/index.css" />
        <style type="text/tailwindcss">
            @layer utilities {
                body {
                    background-color: #e1e4ed;
                }
                .hidden {
                    display: none;
                }
                ::-webkit-file-upload-button {
                    display: none;
                }
            }
        </style>
    </head>
    <body class="px-2">
        <div class="container mx-auto">
            <div class="flex flex-col items-center justify-center min-h-screen">
                <div class="w-full max-w-md">
                    <div class="bg-white shadow-md rounded pt-6 pb-8 mb-4">
                        <div class="mb-4 text-center">
                            <h1 class="text-2xl font-semibold">CDN Slave</h1>
                            <p class="text-gray-700 text-sm">Because Discord is our new CDN slave</p>
                            <a href="https://blog.spin.rip/p/discord-cdn-changes" target="_blank" class="mt-2 inline-block text-red-500 hover:text-red-600 px-2 py-1 bg-red-200 hover:bg-red-300 rounded-md cursor-pointer"><strong>CDN-SLAVE UPDATES</strong></a>
                        </div>
                        <form id="upload-form" enctype="multipart/form-data" class="flex flex-col items-center px-8">
                            <label for="file" id="fileLabel" class="block shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">Choose a file</label>
                            <input onchange="window.label.innerText = this.files[0].name" type="file" name="file" id="file" class="hidden">
                            <p class="text-gray-700/75 text-sm mt-1 mb-2"><em>Maximum file size: ~<%= humanFileSize %></em></p>
                            <p class="text-gray-400/75">or</p>
                            <input type="number" name="mid" id="mid" placeholder="message id" class="block shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline cursor-pointer">
                            <button type="button" id="upload-btn" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-1/2">Go</button>
                            <p class="text-red-800 text-sm mt-2">I can see everything you upload, don't be dumb</p>
                            <!-- Progress Bar -->
                            <div class="mt-3 w-full bg-gray-300 rounded">
                                <div id="progress-bar" class="h-2 bg-blue-500 rounded" style="width: 0%;"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            const phrases = [
              "Must be a big file...",
              "Discord will love this...",
              "Still going...",
              "meow...",
              "Petting the cats...",
              "Churning the gears...",
              "Just a moment longer...",
              "Is it tea time yet?",
              "Loading pixels...",
              "Waking up the hamsters...",
              "Cranking the handle...",
              "Setting up the stage...",
              "Baking cookies...",
              "Spinning the wheel...",
              "Reeling in the fish...",
              "Consulting the oracle...",
            ];
            const uploadBtn = document.getElementById("upload-btn");
            const uploadForm = document.getElementById("upload-form");
            const progressBar = document.getElementById("progress-bar");
            window.label = document.getElementById("fileLabel");

            uploadBtn.addEventListener("click", function () {
                const fileInput = document.getElementById("file");
                const mid = document.getElementById("mid");
                const file = fileInput?.files[0];
                if (!file && !mid) {
                    return;
                }
                if (file && file.size >= <%= byteFileSize %>) {
                    return alert("Your file is over <%= humanFileSize %>!");
                }
                uploadBtn.classList.remove("bg-blue-500");
                uploadBtn.classList.remove("hover:bg-blue-700");
                uploadBtn.classList.add("bg-gray-500");
                uploadBtn.disabled = true;
                uploadBtn.innerText = "Please wait...";
                setInterval(() => uploadBtn.innerText = phrases[Math.floor(Math.random() * phrases.length)], 7000);

                let formData = new FormData(uploadForm);
                let request = new XMLHttpRequest();

                request.upload.addEventListener('progress', function (e) {
                    let percent_complete = (e.loaded / e.total)*100;
                    progressBar.style.width = percent_complete + '%';
                });

                request.addEventListener('load', function(e) {
                    if(request.status == 200){
                        location.href = '/results';
                    } else {
                        alert('Upload failed');
                    }
                });

                request.open('post', '/api/upload');
                request.send(formData);
            });
        </script>
    </body>
</html>
