gistManager.txt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gist Manager (Final Clean)</title>
<style>
body { font-family: Arial; margin: 20px; }
textarea { width: 100%; height: 200px; }
button { margin: 5px 0; }
.box { border:1px solid #ccc; padding:10px; margin-top:10px; }
</style>
</head>

<body>

<h2>Gist Manager</h2>
<b>Enter your Token</b> (<i>Keep it permanent: Edit the page, paste your token in value="Paste-Your-Token-Here", save, and refresh</i>)<br>
<input id="token" placeholder="GitHub Token" value='Paste-Your-Token-Here' style="width:300px"> <button onclick="listGists()">List My Gists</button>




<br><br>

<input id="filename" placeholder="filename.txt" style="width:300px"> <button onclick="createGist()">Create</button> <button onclick="updateGist()">Update</button>
<br><br>

<textarea id="content" placeholder="File content..."></textarea>

<h3>Gists</h3>
<div id="output1" class="box"></div>

<h3>Log / Actions <button onclick="clearLog()">Clear Log</button></h3>
<div id="output2" class="box"></div>

<script>

// ==== ELEMENTS ====
const tokenInput = document.getElementById("token");
const output1 = document.getElementById("output1");
const output2 = document.getElementById("output2");
const filename = document.getElementById("filename");
const content = document.getElementById("content");

// ==== STORAGE ====
function setGist(id, raw){
    localStorage.setItem("gist_id", id);
    localStorage.setItem("gist_raw", raw);
}
function getGist(){
    return {
        id: localStorage.getItem("gist_id"),
        raw: localStorage.getItem("gist_raw")
    };
}

// ==== LOG ====
function appendLog(msg){
    output2.innerHTML += "<div>" + msg + "</div>";
}
function clearLog(){
    output2.innerHTML = "";
}

// ==== LIST GISTS ====
let loading = false;

function listGists(){

    if (loading) return;
    loading = true;

    let token = tokenInput.value;
    if (!token) {
        alert("Enter token");
        loading = false;
        return;
    }

    fetch("https://api.github.com/gists", {
        headers: { Authorization: "token " + token }
    })
    .then(r => r.json())
    .then(data => {

        if (!Array.isArray(data)) {
            output1.innerHTML = "Error: " + JSON.stringify(data);
            loading = false;
            return;
        }

        output1.innerHTML = data.map(g =>
            `<div>
                <b>${g.id}</b>
                <button onclick="listFiles('${g.id}')">Open</button>
            </div>`
        ).join("");

        appendLog("Gists loaded ✔");
        loading = false;
    })
    .catch(() => {
        appendLog("Error loading gists");
        loading = false;
    });
}

// ==== LIST FILES ====
function listFiles(id){

    fetch("https://api.github.com/gists/" + id)
    .then(r => r.json())
    .then(g => {

        let html = `<div style="border-top:1px solid #ccc; margin-top:10px;">
                    <b>Gist ${id}</b><br>`;

        html += Object.entries(g.files).map(([name,f]) =>
            `${name}
             <a href="${f.raw_url}" target="_blank">RAW</a>
             <button onclick="loadFile('${f.raw_url}','${name}','${id}')">Load</button><br>`
        ).join("");

        html += "</div>";

        output2.innerHTML += html;
    });
}

// ==== LOAD FILE ====
function loadFile(url, name, id){

    fetch(url + "?t=" + Date.now())
    .then(r => r.text())
    .then(t => {

        filename.value = name;
        content.value = t;

        setGist(id, url);

        appendLog("Loaded: " + name + " (gist " + id + ")");
    });
}

// ==== CREATE ====
function createGist(){

    let token = tokenInput.value;
    if (!token) return alert("Enter token");

    if (!filename.value) return alert("Filename required");

    fetch("https://api.github.com/gists", {
        method: "POST",
        headers: {
            Authorization: "token " + token,
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            public: true,
            files: {
                [filename.value]: { content: content.value }
            }
        })
    })
    .then(r => r.json())
    .then(d => {

        if (d.message) {
            appendLog("Error: " + d.message);
            return;
        }

        let raw = d.files[filename.value].raw_url;
        setGist(d.id, raw);

        appendLog("Created ✔ (gist " + d.id + ")");
    });
}

// ==== UPDATE ====
let updating = false;

function updateGist(){

    if (updating) return;
    updating = true;

    let token = tokenInput.value;
    let g = getGist();

    if (!token) { alert("Enter token"); updating=false; return; }
    if (!g.id) { alert("No gist loaded"); updating=false; return; }
    if (!filename.value) { alert("Filename required"); updating=false; return; }

    fetch("https://api.github.com/gists/" + g.id, {
        method: "PATCH",
        headers: {
            Authorization: "token " + token,
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            files: {
                [filename.value]: { content: content.value }
            }
        })
    })
    .then(r => r.json())
    .then(data => {

        if (data.message) {
            appendLog("Error: " + data.message);
            updating = false;
            return;
        }

        let raw = data.files[filename.value].raw_url;
        setGist(data.id, raw);

        appendLog("Updated ✔ (gist " + data.id + ")");

        loadFile(raw, filename.value, data.id);

        updating = false;
    })
    .catch(() => {
        appendLog("Update failed");
        updating = false;
    });
}

</script>

</body>
</html>