Sindbad~EG File Manager

function GetCaption() {
    return new Promise(resolve => {
        // Create overlay
        const overlay = document.createElement("div");
        overlay.style.position = "fixed";
        overlay.style.top = 0;
        overlay.style.left = 0;
        overlay.style.width = "100%";
        overlay.style.height = "100%";
        overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
        overlay.style.display = "flex";
        overlay.style.alignItems = "center";
        overlay.style.justifyContent = "center";
        overlay.style.zIndex = 1000;

        // Create modal
        const modal = document.createElement("div");
		  modal.style.position = "relative"; 
        modal.style.backgroundColor = "#fff";
        modal.style.padding = "20px";
        modal.style.borderRadius = "10px";
        modal.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.25)";
        modal.style.width = "400px";
        modal.style.maxWidth = "90%";
        modal.style.fontFamily = "Arial, sans-serif";
		  
        // Close (X) button
        const closeButton = document.createElement("span");
        closeButton.innerHTML = "×";
        closeButton.style.position = "absolute";
        closeButton.style.top = "8px";
        closeButton.style.right = "12px";
        closeButton.style.fontSize = "20px";
        closeButton.style.cursor = "pointer";
        closeButton.style.color = "#999";
        closeButton.title = "Cancel";
        modal.appendChild(closeButton);

        closeButton.addEventListener("click", () => {
            document.body.removeChild(overlay);
            resolve("");
        });

        // Title
        const title = document.createElement("h3");
        title.textContent = "Enter a caption for this problem?";
        modal.appendChild(title);

        // Input field
        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = "caption is optional";
        input.maxLength = 127;
        input.style.width = "100%";
        input.style.marginTop = "10px";
        input.style.marginBottom = "15px";
        input.style.padding = "8px";
        input.style.fontSize = "14px";
        modal.appendChild(input);

        // Continue button
        const button = document.createElement("button");
        button.textContent = "Continue";
        button.style.padding = "8px 16px";
        button.style.backgroundColor = "darkblue";
        button.style.color = "white";
        button.style.border = "none";
        button.style.borderRadius = "4px";
        button.style.cursor = "pointer";
        modal.appendChild(button);

        // Handle Enter and Escape keys
        input.addEventListener("keydown", function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                button.click();
            } else if (e.key === "Escape") {
                e.preventDefault();
                document.body.removeChild(overlay);
                resolve("");
            }
        });
        

        // On click, resolve and clean up
        button.addEventListener("click", () => {
            const caption = input.value.trim();
            document.body.removeChild(overlay);
            resolve(caption);
        });

        overlay.appendChild(modal);
        document.body.appendChild(overlay);

        // Focus input on load
        input.focus();
    });
}