<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imgur Uploader</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #181818;
            color: #f0f0f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

        h1 {
            color: #b39ddb;
        }

        h4 {
            color: white;
        }

        .uploader {
            border: 1px solid #888;
            border-radius: 15px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #282828;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .uploader img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: none;
        }

        .uploader.ready img {
            display: block;
        }

        #ready-text {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            color: #b39ddb;
            display: none;
        }

        .uploader.ready #ready-text {
            display: block;
        }

        .file-info {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.85rem;
            color: #b39ddb;
            text-align: center;
            display: none;
        }

        .uploader.ready .file-info {
            display: block;
        }

        .upload-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1rem;
            color: #fff;
            background: #b39ddb;
            border: 1px solid #888;
            border-radius: 10px;
            cursor: pointer;
        }

        .upload-btn:hover {
            background: #9575cd;
        }

        .result {
            margin-top: 20px;
            border: 1px solid;
            border-radius: 15px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
            width: 300px;
            padding: 10px;
        }

        .result.success {
            border-color: #4caf50;
            background-color: rgba(76, 175, 80, 0.2);
        }

        .result.error {
            border-color: #f44336;
            background-color: rgba(244, 67, 54, 0.2);
        }

        .result .status {
            display: flex;
            align-items: center;
            font-size: 1rem;
        }

        .result .status i {
            margin-right: 10px;
        }

        .result .url {
            margin-top: 10px;
            word-wrap: break-word;
            white-space: normal;
        }

        .result .url a {
            color: #4caf50; /* Green color for the link */
            text-decoration: none; /* Remove the underline */
        }

        .copy-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #4caf50;
        }

        .copy-btn.error {
            color: #f44336;
        }

        .copy-btn:hover {
            text-decoration: underline;
        }

        /* Footer Text */
        .footer-text {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            color: #b39ddb; /* Green Fluorescent */
        }
    </style>
</head>
<body>
<h1>Imgur Uploader</h1>
    <h4>Press the container below to add a file ↓</h4>
    <div class="uploader" id="uploader">
        <img id="preview" alt="Preview">
        <div id="ready-text">Ready to upload</div>
        <div id="file-info" class="file-info"></div>
        <input type="file" id="fileInput" style="display: none;" accept="image/*,video/*">
    </div>
    <button class="upload-btn" id="uploadButton">Upload</button>
    <div id="result" class="result" hidden>
        <div class="status">
            <i id="statusIcon"></i>
            <span id="statusText"></span>
        </div>
        <div class="url" id="resultUrl"></div>
        <button id="copyButton" class="copy-btn"><i class="fa fa-copy"></i></button>
    </div>

    <!-- Footer Text -->
    <div class="footer-text">
        <strong>&copy; Created by <a href="https://github.com/Maskedlll" target="_blank" style="color: #860098;">Masked</a> on GitHub.</strong>
    </div>

<script>
        const CLIENT_ID = "0aef20b07dd8b40"; // Remplacez par votre Client ID Imgur
        const uploader = document.getElementById("uploader");
        const fileInput = document.getElementById("fileInput");
        const preview = document.getElementById("preview");
        const readyText = document.getElementById("ready-text");
        const fileInfo = document.getElementById("file-info");
        const uploadButton = document.getElementById("uploadButton");
        const result = document.getElementById("result");
        const statusIcon = document.getElementById("statusIcon");
        const statusText = document.getElementById("statusText");
        const resultUrl = document.getElementById("resultUrl");
        const copyButton = document.getElementById("copyButton");

        uploader.addEventListener("click", () => fileInput.click());

        fileInput.addEventListener("change", () => {
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = () => {
                    preview.src = reader.result;
                    preview.style.display = "block";
                    uploader.classList.add("ready");
                    fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
                };
                reader.readAsDataURL(file);
            }
        });

        uploadButton.addEventListener("click", async () => {
            const file = fileInput.files[0];
            if (!file) return alert("Can't upload while there's nothing in the container please add something.");

            const formData = new FormData();
            formData.append("image", file);
            formData.append("type", "file");

            try {
                const response = await fetch("https://api.imgur.com/3/image", {
                    method: "POST",
                    headers: {
                        Authorization: `Client-ID ${CLIENT_ID}`,
                    },
                    body: formData,
                });

                const data = await response.json();

                if (data.success) {
                    result.className = "result success";
                    statusIcon.className = "fa fa-check-circle";
                    statusText.textContent = "Success";
                    resultUrl.innerHTML = `<a href="${data.data.link}" target="_blank">${data.data.link}</a>`;
                    result.hidden = false;
                } else {
                    throw new Error(data.data.error);
                }
            } catch (error) {
                result.className = "result error";
                statusIcon.className = "fa fa-times-circle";
                statusText.textContent = "Error";
                resultUrl.textContent = error.message;
                result.hidden = false;
            }
        });

        copyButton.addEventListener("click", () => {
            navigator.clipboard.writeText(resultUrl.textContent).then(() => alert("Link copied!"));
        });
    </script>
</body>
</html>