COLORIZED v1

<!------------------------------------------------------>
<!--FIREBASE CDN (COMPAT MODE FOR BLOGGER)-->
<!------------------------------------------------------>
<script src="https:"comment">//www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https:"comment">//www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>

<script>
    "comment">/* =============================================== */
    "comment">/*                FIREBASE INIT                    */
    "comment">/* =============================================== */
    firebase.initializeApp({
        apiKey: "AIzaSyAF5r6Rvu-DmoV-vf47wYTZfarpVGmNYR0",
        authDomain: "ronin-11938.firebaseapp.com",
        databaseURL: "https:"comment">//ronin-11938-default-rtdb.firebaseio.com",
        projectId: "ronin-11938",
        storageBucket: "ronin-11938.firebasestorage.app",
        messagingSenderId: "823368889742",
        appId: "1:823368889742:web:609e16ace214b94a0df",
    });

    const rdb = firebase.database();
    const refCRUD = rdb.ref("urlCrudData"); "comment">// main collection
</script>

<!------------------------------------------------------>
<!--FULL APPLICATION HTML UI-->
<!------------------------------------------------------>
<div id="crud-app" style="font-family: Arial; margin: auto; max-width: 900px">
    <h2 id="todayHeader" style="color: #333333; font-size: 26px; margin-bottom: 25px; text-align: center"></h2>
    <h2 style="text-align: center">🔗 My Pending and Delayed POSTs SUMMARY</h2>

    <!--================== REPORT VIEW ==================-->
    <div
        id="reportView"
        style="
            background: rgb(255, 255, 255);
            border-radius: 10px;
            border: 1px solid rgb(204, 204, 204);
            margin-bottom: 25px;
            padding: 15px;
        "
    >
        <h3 style="margin-top: 0px; text-align: center">📘 RECORD SUMMARY (VIEW ONLY)</h3>

        <div style="border-bottom: 2px solid rgb(187, 187, 187); display: flex; font-weight: bold; padding: 8px 0px">
            <div style="width: 10%">DATE</div>
            <div style="width: 45%">AUTO TITLE</div>
            <div style="width: 45%">MY TITLE</div>
        </div>

        <div id="reportList"></div>
    </div>

    <!--================== INPUT FORM ==================-->
    <div
        style="
            background: rgb(244, 244, 244);
            border-radius: 10px;
            border: 1px solid rgb(204, 204, 204);
            margin-bottom: 20px;
            padding: 15px;
        "
    >
        <label><b>Insert URL Link:</b></label
        ><br />
        <input
            id="urlInput"
            placeholder="https:"comment">//example.com"
            style="
                border-radius: 6px;
                border: 1px solid rgb(170, 170, 170);
                margin-top: 5px;
                padding: 10px;
                width: 100%;
            "
            type="text"
        />

        <br /><br />

        <label><b>Your Own Title (Optional):</b></label
        ><br />
        <input
            id="myTitleInput"
            placeholder="Your custom title…"
            style="
                border-radius: 6px;
                border: 1px solid rgb(170, 170, 170);
                margin-top: 5px;
                padding: 10px;
                width: 100%;
            "
            type="text"
        />

        <br /><br />

        <button
            onclick="autoAdd()"
            style="background: rgb(0, 120, 255); border-radius: 8px; border: none; color: white; padding: 10px 18px"
        >
            ➕ ADD ENTRY
        </button>

        <button
            id="saveBtn"
            onclick="saveEdit()"
            style="
                background: rgb(255, 136, 0);
                border-radius: 8px;
                border: none;
                color: white;
                display: none;
                padding: 10px 18px;
            "
        >
            💾 SAVE EDIT
        </button>
    </div>

    <!--================== CRUD TABLE ==================-->
    <table id="linkTable" style="border-collapse: collapse; width: 100%">
        <thead>
            <tr style="background: rgb(238, 238, 238)">
                <th style="border: 1px solid rgb(204, 204, 204); padding: 10px; width: 12%">DATE</th>
                <th style="border: 1px solid rgb(204, 204, 204); padding: 10px; width: 30%">AUTO TITLE</th>
                <th style="border: 1px solid rgb(204, 204, 204); padding: 10px; width: 30%">MY TITLE</th>
                <th style="border: 1px solid rgb(204, 204, 204); padding: 10px; width: 12%">URL</th>
                <th style="border: 1px solid rgb(204, 204, 204); padding: 10px; width: 16%">ACTIONS</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<!------------------------------------------------------>
<!--FULL JAVASCRIPT CRUD LOGIC-->
<!------------------------------------------------------>
<script>
    "comment">/* =============================================== */
    "comment">/*            DATE + HELPER FUNCTIONS              */
    "comment">/* =============================================== */
    var BLOG_DOMAIN = "ronin1985.blogspot.com";

    function todayShort() {
        return new Date().toLocaleString("en-US", { month: "short", day: "2-digit" });
    }
    function todayLong() {
        return new Date().toLocaleString("en-US", { month: "short", day: "2-digit", year: "numeric" });
    }
    function setHeader() {
        document.getElementById("todayHeader").innerHTML = "📅 Today: " + todayLong();
    }

    function isBlog(url) {
        return url.includes(BLOG_DOMAIN);
    }

    function blogTitle(url) {
        try {
            let last = url.split("/").pop().replace(".html", "");
            return last.replace(/[-_]+/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
        } catch {
            return url;
        }
    }

    function guessTitle(url) {
        if (!url) return "(no title)";
        return url.replace("https:"comment">//", "").replace("http://", "").split("/")[0];
    }

    "comment">/* =============================================== */
    "comment">/*           FIREBASE GET + LIVE LISTEN            */
    "comment">/* =============================================== */
    function listenDatabase() {
        refCRUD.on("value", (snap) => {
            let raw = snap.val();
            let list = raw ? Object.values(raw) : [];
            renderReport(list);
            renderTable(list);
        });
    }

    "comment">/* =============================================== */
    "comment">/*                 RENDER REPORT                   */
    "comment">/* =============================================== */
    function renderReport(data) {
        let box = document.getElementById("reportList");
        if (data.length === 0) {
            box.innerHTML = "<div style='padding:10px; color:#777;'><i>No records yet.</i></div>";
            return;
        }

        let html = "";
        data.forEach((e) => {
            html += `
      <div style="display:flex; padding:6px 0; border-bottom:1px solid #eee;">
          <div style="width:10%; white-space:nowrap;">${e.date}</div>
          <div style="width:45%; color:#0066cc;">${e.autoTitle}</div>
          <div style="width:45%;">${e.myTitle || ""}</div>
      </div>`;
        });
        box.innerHTML = html;
    }

    "comment">/* =============================================== */
    "comment">/*                 RENDER TABLE                    */
    "comment">/* =============================================== */
    function renderTable(data) {
        let tbody = document.getElementById("tableBody");
        let html = "";

        data.forEach((e) => {
            html += `
      <tr>
        <td style="border:1px solid #ccc; padding:10px;">${e.date}</td>
        <td style="border:1px solid #ccc; padding:10px;">${e.autoTitle}</td>
        <td style="border:1px solid #ccc; padding:10px;">${e.myTitle || ""}</td>
        <td style="border:1px solid #ccc; padding:10px;">
          <a href="${e.url}" target="_blank">${e.url}</a>
        </td>
        
        
        
        
<td style="border:1px solid #ccc; padding:10px; text-align:center;">

    <button onclick="editLink('${e.id}')"
            style="width:110px; padding:8px 20px; background:#ffaa00; border:none; color:white; border-radius:6px;">
        ✏ Edit
    </button>

    <!-- SEPARATOR LINE -->
    <hr style="margin:12px auto; width:80%; border:0; border-top:1px solid #ccc;">

    <button onclick="deleteLink('${e.id}')"
            style="width:110px; padding:8px 20px; background:#ff4444; border:none; color:white; border-radius:6px;">
        🗑 Delete
    </button>

</td>




      </tr>`;
        });

        tbody.innerHTML = html;
    }

    "comment">/* =============================================== */
    "comment">/*                   ADD ENTRY                     */
    "comment">/* =============================================== */
    function autoAdd() {
        let url = document.getElementById("urlInput").value.trim();
        let myTitle = document.getElementById("myTitleInput").value.trim();

        if (!url) {
            alert("URL cannot be empty!");
            return;
        }

        let autoTitle = isBlog(url) ? blogTitle(url) : guessTitle(url);

        let key = refCRUD.push().key;

        refCRUD.child(key).set({
            id: key,
            date: todayShort(),
            autoTitle: autoTitle,
            myTitle: myTitle,
            url: url,
        });

        document.getElementById("urlInput").value = "";
        document.getElementById("myTitleInput").value = "";
    }

    "comment">/* =============================================== */
    "comment">/*                    EDIT ENTRY                   */
    "comment">/* =============================================== */
    var editingID = null;

    function editLink(id) {
        refCRUD.child(id).once("value", (snap) => {
            let d = snap.val();
            editingID = id;

            document.getElementById("urlInput").value = d.url;
            document.getElementById("myTitleInput").value = d.myTitle || "";
            document.getElementById("saveBtn").style.display = "inline-block";
        });
    }

    function saveEdit() {
        if (!editingID) return;

        let newUrl = document.getElementById("urlInput").value.trim();
        let newMyTitle = document.getElementById("myTitleInput").value.trim();

        if (!newUrl) {
            alert("URL cannot be empty!");
            return;
        }

        refCRUD.child(editingID).update({
            url: newUrl,
            myTitle: newMyTitle,
            autoTitle: isBlog(newUrl) ? blogTitle(newUrl) : guessTitle(newUrl),
        });

        editingID = null;
        document.getElementById("urlInput").value = "";
        document.getElementById("myTitleInput").value = "";
        document.getElementById("saveBtn").style.display = "none";
    }

    "comment">/* =============================================== */
    "comment">/*                 DELETE ENTRY                    */
    "comment">/* =============================================== */
    function deleteLink(id) {
        if (confirm("Delete this entry?")) {
            refCRUD.child(id).remove();
        }
    }

    "comment">/* =============================================== */
    "comment">/*                      INIT                       */
    "comment">/* =============================================== */
    window.onload = function () {
        setHeader();
        listenDatabase(); "comment">// auto live-sync
    };
</script>