Update static/admin.html

static/admin.html

@@ -11,12 +11,14 @@
         .container { max-width: 800px; margin: 0 auto; }
         .box { border: 1px solid var(--text-color); padding: 40px; box-shadow: 8px 8px 0 var(--shadow-color); margin-top: 10vh; }
         label { display: block; margin-top: 20px; font-weight: 700; font-size: 0.8rem; opacity: 0.7; }
-        input, textarea { width: 100%; background: transparent; border: 1px solid var(--text-color); color: var(--text-color); padding: 12px; margin-top: 8px; font-family: inherit; outline: none; }
+        input, textarea, select { width: 100%; background: transparent; border: 1px solid var(--text-color); color: var(--text-color); padding: 12px; margin-top: 8px; font-family: inherit; outline: none; }
+        select option { color: #000; } /* Fix option visibility in dark mode */
         .btn { padding: 12px 24px; font-weight: 700; cursor: pointer; border: 1px solid var(--text-color); text-transform: uppercase; font-family: inherit; margin-top: 20px; }
         .btn-main { background: var(--text-color); color: var(--bg-color); }
         .btn-alt { background: transparent; color: var(--text-color); border-color: var(--text-color); }
-        .tabs { display: flex; border: 1px solid var(--text-color); margin: 30px 0; }
-        .tab { flex: 1; padding: 15px; background: none; color: var(--text-color); border: none; border-right: 1px solid var(--text-color); cursor: pointer; text-transform: uppercase; font-weight: 700; }
+        .tabs { display: flex; border: 1px solid var(--text-color); margin: 30px 0; overflow-x: auto;}
+        .tab { flex: 1; padding: 15px; background: none; color: var(--text-color); border: none; border-right: 1px solid var(--text-color); cursor: pointer; text-transform: uppercase; font-weight: 700; white-space: nowrap;}
+        .tab:last-child { border-right: none; }
         .tab.active { background: var(--text-color); color: var(--bg-color); }
     </style>
 </head>
@@ -37,6 +39,8 @@
             <div class="tabs">
                 <button class="tab active" id="btn-post" onclick="switchTab('post')">EDITOR</button>
                 <button class="tab" id="btn-manage" onclick="switchTab('manage')">MANAGE_DATA</button>
+                <button class="tab" id="btn-link" onclick="switchTab('link')">ADD_LINK</button>
+                <button class="tab" id="btn-manage-links" onclick="switchTab('manage-links')">MANAGE_LINKS</button>
             </div>
 
             <div id="tab-post">
@@ -61,16 +65,43 @@
             <div id="tab-manage" style="display: none;">
                 <div id="articleList"></div>
             </div>
+
+            <div id="tab-link" style="display: none;">
+                <label>RESOURCE_TITLE</label>
+                <input type="text" id="linkTitle" placeholder="e.g., Evaluating Whisper Medium on FLEURS">
+                
+                <label>TARGET_URL</label>
+                <input type="url" id="linkUrl" placeholder="https://...">
+
+                <label>CATEGORY</label>
+                <select id="linkCategory">
+                    <option value="Research Paper">Research Paper</option>
+                    <option value="GitHub Repo">GitHub Repo</option>
+                    <option value="Dataset">Dataset</option>
+                    <option value="Article/Tutorial">Article/Tutorial</option>
+                </select>
+                
+                <label>DESCRIPTION (Optional)</label>
+                <input type="text" id="linkDesc" placeholder="Brief note on why this is saved...">
+                
+                <button class="btn btn-main" onclick="submitLink()">SAVE_LINK</button>
+            </div>
+
+            <div id="tab-manage-links" style="display: none;">
+                <div id="linkList"></div>
+            </div>
+
         </div>
     </div>
 
     <script>
         const API = '/api';
         let globalArticles = [];
+        let globalLinks = [];
         let currentEditId = null;
 
         function autoSlug(val) {
-            if (currentEditId) return; // Don't auto-update slug if editing
+            if (currentEditId) return; 
             document.getElementById('postSlug').value = val.toLowerCase().trim()
                 .replace(/[^a-z0-9]+/g, '-')
                 .replace(/(^-|-$)/g, '');
@@ -81,19 +112,21 @@
             sessionStorage.setItem('key', pass);
             
             const res = await fetch(`${API}/auth/verify`, { 
-                headers: { 'X-Admin-Password': pass }
+                 headers: { 'X-Admin-Password': pass }
             });
             
             if (res.ok) {
                 document.getElementById('loginSection').style.display = 'none';
                 document.getElementById('adminPanel').style.display = 'block';
                 loadArticles();
+                loadLinks();
             } else { 
-                alert('ACCESS_DENIED: Invalid Key'); 
-                sessionStorage.clear();
+                 alert('ACCESS_DENIED: Invalid Key'); 
+                 sessionStorage.clear();
             }
         }
 
+        // --- ARTICLE LOGIC ---
         async function submitArticle() {
             const data = {
                 title: document.getElementById('postTitle').value,
@@ -109,20 +142,18 @@
             const res = await fetch(url, {
                 method: method,
                 headers: { 
-                    'Content-Type': 'application/json', 
-                    'X-Admin-Password': sessionStorage.getItem('key') 
-                },
+                     'Content-Type': 'application/json', 
+                     'X-Admin-Password': sessionStorage.getItem('key') 
+                 },
                 body: JSON.stringify(data)
             });
             
             if (res.ok) { 
-                alert(currentEditId ? '✓ UPDATE_SUCCESS' : '✓ UPLOAD_SUCCESS'); 
-                cancelEdit();
+                 alert(currentEditId ? '✓ UPDATE_SUCCESS' : '✓ UPLOAD_SUCCESS'); 
+                 cancelEdit();
                 loadArticles();
                 switchTab('manage');
-            } else {
-                alert('✗ OPERATION_FAILED');
-            }
+            } else { alert('✗ OPERATION_FAILED'); }
         }
 
         async function loadArticles() {
@@ -143,16 +174,13 @@
         function editArt(id) {
             const article = globalArticles.find(a => a.id === id);
             if (!article) return;
-
             currentEditId = id;
             document.getElementById('postTitle').value = article.title;
             document.getElementById('postSlug').value = article.slug;
             document.getElementById('postExcerpt').value = article.excerpt || '';
             document.getElementById('postContent').value = article.content;
-
             document.getElementById('submitBtn').innerText = "UPDATE_DATA";
             document.getElementById('cancelBtn').style.display = "block";
-            
             switchTab('post');
         }
 
@@ -162,7 +190,6 @@
             document.getElementById('postSlug').value = '';
             document.getElementById('postExcerpt').value = '';
             document.getElementById('postContent').value = '';
-            
             document.getElementById('submitBtn').innerText = "EXECUTE_UPLOAD";
             document.getElementById('cancelBtn').style.display = "none";
         }
@@ -170,17 +197,75 @@
         async function deleteArt(id) {
             if (!confirm('CONFIRM_DATA_PURGE?')) return;
             await fetch(`${API}/articles/${id}`, { 
-                method: 'DELETE', 
-                headers: { 'X-Admin-Password': sessionStorage.getItem('key') }
+                 method: 'DELETE', 
+                 headers: { 'X-Admin-Password': sessionStorage.getItem('key') }
             });
             loadArticles();
         }
 
+        // --- LINK LOGIC ---
+        async function submitLink() {
+            const data = {
+                title: document.getElementById('linkTitle').value,
+                url: document.getElementById('linkUrl').value,
+                category: document.getElementById('linkCategory').value,
+                description: document.getElementById('linkDesc').value,
+                tags: []
+            };
+
+            const res = await fetch(`${API}/links`, {
+                method: 'POST',
+                headers: { 
+                     'Content-Type': 'application/json', 
+                     'X-Admin-Password': sessionStorage.getItem('key') 
+                 },
+                body: JSON.stringify(data)
+            });
+            
+            if (res.ok) { 
+                 alert('✓ LINK_SAVED'); 
+                 document.getElementById('linkTitle').value = '';
+                 document.getElementById('linkUrl').value = '';
+                 document.getElementById('linkDesc').value = '';
+                 loadLinks();
+                 switchTab('manage-links');
+            } else { alert('✗ OPERATION_FAILED'); }
+        }
+
+        async function loadLinks() {
+            const res = await fetch(`${API}/links`);
+            globalLinks = await res.json();
+            
+            document.getElementById('linkList').innerHTML = globalLinks.map(l => `
+                <div style="border: 1px solid; padding: 20px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
+                    <div>
+                        <span style="text-transform: uppercase; font-weight: 700; display: block;">${l.title}</span>
+                        <span style="font-size: 0.8rem; opacity: 0.7;">[${l.category}] ${l.url}</span>
+                    </div>
+                    <button class="btn" style="margin: 0; padding: 5px 15px; font-size: 0.7rem;" onclick="deleteLink(${l.id})">PURGE</button>
+                </div>
+            `).join('');
+        }
+
+        async function deleteLink(id) {
+            if (!confirm('CONFIRM_LINK_PURGE?')) return;
+            await fetch(`${API}/links/${id}`, { 
+                 method: 'DELETE', 
+                 headers: { 'X-Admin-Password': sessionStorage.getItem('key') }
+            });
+            loadLinks();
+        }
+
         function switchTab(t) {
             document.getElementById('tab-post').style.display = t === 'post' ? 'block' : 'none';
             document.getElementById('tab-manage').style.display = t === 'manage' ? 'block' : 'none';
+            document.getElementById('tab-link').style.display = t === 'link' ? 'block' : 'none';
+            document.getElementById('tab-manage-links').style.display = t === 'manage-links' ? 'block' : 'none';
+            
             document.getElementById('btn-post').classList.toggle('active', t === 'post');
             document.getElementById('btn-manage').classList.toggle('active', t === 'manage');
+            document.getElementById('btn-link').classList.toggle('active', t === 'link');
+            document.getElementById('btn-manage-links').classList.toggle('active', t === 'manage-links');
         }
 
         if(sessionStorage.getItem('key')) {