Web-Manager

Running

App Files Files Community

openfree commited on 14 days ago

Commit

beaf11d

verified ·

1 Parent(s): cd1d350

Update app.py

Browse files

Files changed (1) hide show

app.py +42 -670

app.py CHANGED Viewed

@@ -428,684 +428,56 @@ def delete_url():
 # ────────────────────────── 6. MAIN ROUTES ──────────────────────────
 @app.route('/')
 def home():
-    os.makedirs('templates', exist_ok=True)
-    with open('templates/index.html', 'w', encoding='utf-8') as fp:
-        fp.write(r'''<!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Web Gallery</title>
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;600&display=swap');
-body{margin:0;font-family:Nunito,sans-serif;background:#f6f8fb;}
-.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:16px;}
-.tab{padding:6px 14px;border:none;border-radius:18px;background:#e2e8f0;font-weight:600;cursor:pointer;}
-.tab.active{background:#a78bfa;color:#1a202c;}
-.tab.manage{background:#ff6e91;color:white;}
-.tab.manage.active{background:#ff2d62;color:white;}
-.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 16px 60px;}
-@media(max-width:800px){.grid{grid-template-columns:1fr;}}
-.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;height:420px;display:flex;flex-direction:column;position:relative;}
-.frame{flex:1;position:relative;overflow:hidden;}
-.frame iframe{position:absolute;width:166.667%;height:166.667%;transform:scale(.6);transform-origin:top left;border:0;}
-.frame img{width:100%;height:100%;object-fit:cover;}
-.card-label{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:bold;z-index:100;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
-.label-live{background:linear-gradient(135deg, #00c6ff, #0072ff);color:white;}
-.label-static{background:linear-gradient(135deg, #ff9a9e, #fad0c4);color:#333;}
-.foot{height:44px;background:#fafafa;display:flex;align-items:center;justify-content:center;border-top:1px solid #eee;}
-.foot a{font-size:.82rem;font-weight:700;color:#4a6dd8;text-decoration:none;}
-.pagination{display:flex;justify-content:center;margin:20px 0;gap:10px;}
-.pagination button{padding:5px 15px;border:none;border-radius:20px;background:#e2e8f0;cursor:pointer;}
-.pagination button:disabled{opacity:0.5;cursor:not-allowed;}
-.manage-panel{background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin:16px;padding:20px;}
-.form-group{margin-bottom:15px;}
-.form-group label{display:block;margin-bottom:5px;font-weight:600;}
-.form-control{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;}
-textarea.form-control{min-height:100px;font-family:monospace;resize:vertical;}
-.btn{padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-weight:600;}
-.btn-primary{background:#4a6dd8;color:white;}
-.btn-danger{background:#e53e3e;color:white;}
-.btn-success{background:#38a169;color:white;}
-.status{padding:10px;margin:10px 0;border-radius:4px;display:none;}
-.status.success{display:block;background:#c6f6d5;color:#22543d;}
-.status.error{display:block;background:#fed7d7;color:#822727;}
-.url-list{margin:20px 0;border:1px solid #eee;border-radius:4px;max-height:300px;overflow-y:auto;}
-.url-item{padding:10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
-.url-item:last-child{border-bottom:none;}
-.url-controls{display:flex;gap:5px;}
-</style>
 </head>
 <body>
-<header style="text-align: center; padding: 20px; background: linear-gradient(135deg, #f6f8fb, #e2e8f0); border-bottom: 1px solid #ddd;">
-  <h1 style="margin-bottom: 10px;">🌟 AI Favorite Sites</h1>
-  <p class="description" style="margin-bottom: 15px;">
-    🚀 <strong>Free AI Spaces & Website Gallery</strong> ✨ Save and manage your favorite sites! Supports <span style="background: linear-gradient(135deg, #00c6ff, #0072ff); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px;">LIVE</span> and <span style="background: linear-gradient(135deg, #ff9a9e, #fad0c4); color: #333; padding: 2px 6px; border-radius: 4px; font-size: 12px;">Static</span> preview modes.
-  </p>
-  <p>
-    <a href="https://discord.gg/openfreeai" target="_blank"><img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=%230000ff&labelColor=%23800080&logo=discord&logoColor=white&style=for-the-badge" alt="badge"></a>
-  </p>
-</header>
-<div class="tabs" id="tabs"></div>
-<div id="content"></div>
-<script>
-// Basic configuration
-const cats = {{cats|tojson}};
-const tabs = document.getElementById('tabs');
-const content = document.getElementById('content');
-let active = "";
-let currentPage = 1;
-// LocalStorage functionality for URL persistence
-function saveToLocalStorage(urls) {
-  try {
-    localStorage.setItem('favoriteUrls', JSON.stringify(urls));
-    console.log('Saved URLs to localStorage:', urls.length);
-    return true;
-  } catch (e) {
-    console.error('Error saving to localStorage:', e);
-    return false;
-  }
-}
-function loadFromLocalStorage() {
-  try {
-    const data = localStorage.getItem('favoriteUrls');
-    if (data) {
-      const urls = JSON.parse(data);
-      console.log('Loaded URLs from localStorage:', urls.length);
-      return urls;
-    }
-  } catch (e) {
-    console.error('Error loading from localStorage:', e);
-  }
-  return null;
-}
-// Export/Import functionality
-function exportUrls() {
-  makeRequest('/api/favorites?per_page=1000', 'GET', null, function(data) {
-    if (data.items && data.items.length > 0) {
-      const urls = data.items.map(item => item.url);
-      // Save to localStorage as backup
-      saveToLocalStorage(urls);
-      // Create file for download
-      const blob = new Blob([JSON.stringify(urls, null, 2)], { type: 'application/json' });
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = 'favorite_urls.json';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    } else {
-      alert('No URLs to export');
-    }
-  });
-}
-function importUrls() {
-  document.getElementById('import-file').click();
-}
-function handleImportFile(files) {
-  if (files.length === 0) return;
-  const file = files[0];
-  const reader = new FileReader();
-  reader.onload = function(e) {
-    try {
-      const urls = JSON.parse(e.target.result);
-      if (Array.isArray(urls)) {
-        // Save to localStorage
-        saveToLocalStorage(urls);
-        // Add each URL to the server
-        let processed = 0;
-        function addNextUrl(index) {
-          if (index >= urls.length) {
-            alert(`Import complete. Added ${processed} URLs.`);
-            loadUrlList();
-            if (active === 'Favorites') {
-              loadFavorites(currentPage);
-            }
-            return;
-          }
-          const formData = new FormData();
-          formData.append('url', urls[index]);
-          makeRequest('/api/url/add', 'POST', formData, function(data) {
-            if (data.success) processed++;
-            addNextUrl(index + 1);
-          });
-        }
-        addNextUrl(0);
-      } else {
-        alert('Invalid format. File must contain a JSON array of URLs.');
-      }
-    } catch (e) {
-      alert('Error parsing file: ' + e.message);
-    }
-  };
-  reader.readAsText(file);
-}
-// Simple utility functions
-function loadHTML(url, callback) {
-  const xhr = new XMLHttpRequest();
-  xhr.open('GET', url, true);
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4 && xhr.status === 200) {
-      callback(xhr.responseText);
-    }
-  };
-  xhr.send();
-}
-function makeRequest(url, method, data, callback) {
-  const xhr = new XMLHttpRequest();
-  xhr.open(method, url, true);
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4 && xhr.status === 200) {
-      callback(JSON.parse(xhr.responseText));
-    }
-  };
-  if (method === 'POST') {
-    xhr.send(data);
-  } else {
-    xhr.send();
-  }
-}
-function updateTabs() {
-  Array.from(tabs.children).forEach(b => {
-    b.classList.toggle('active', b.dataset.c === active);
-  });
-}
-// Tab handlers
-function loadCategory(cat) {
-  if(cat === active) return;
-  active = cat;
-  updateTabs();
-  content.innerHTML = '<p style="text-align:center;padding:40px">Loading…</p>';
-  makeRequest('/api/category?name=' + encodeURIComponent(cat), 'GET', null, function(data) {
-    let html = '<div class="grid">';
-    data.forEach(item => {
-      html += `
-        <div class="card">
-          <div class="card-label label-live">LIVE</div>
-          <div class="frame">
-            <iframe src="${item.iframe}" loading="lazy" sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads"></iframe>
-          </div>
-          <div class="foot">
-            <a href="${item.hf}" target="_blank">${item.title}</a>
-          </div>
-        </div>
-      `;
-    });
-    html += '</div>';
-    content.innerHTML = html;
-  });
-}
-function loadFavorites(page) {
-  if(active === 'Favorites' && currentPage === page) return;
-  active = 'Favorites';
-  currentPage = page || 1;
-  updateTabs();
-  content.innerHTML = '<p style="text-align:center;padding:40px">Loading…</p>';
-  makeRequest('/api/favorites?page=' + currentPage, 'GET', null, function(data) {
-    let html = '<div class="grid">';
-    if(data.items.length === 0) {
-      html += '<p style="grid-column:1/-1;text-align:center;padding:40px">No favorites saved yet.</p>';
-    } else {
-      data.items.forEach(item => {
-        if(item.mode === 'snapshot') {
-          html += `
-            <div class="card">
-              <div class="card-label label-static">Static</div>
-              <div class="frame">
-                <img src="${item.preview_url}" loading="lazy">
-              </div>
-              <div class="foot">
-                <a href="${item.url}" target="_blank">${item.title}</a>
-              </div>
-            </div>
-          `;
-        } else {
-          html += `
-            <div class="card">
-              <div class="card-label label-live">LIVE</div>
-              <div class="frame">
-                <iframe src="${item.preview_url}" loading="lazy" sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts allow-downloads"></iframe>
-              </div>
-              <div class="foot">
-                <a href="${item.url}" target="_blank">${item.title}</a>
-              </div>
-            </div>
-          `;
-        }
-      });
-    }
-    html += '</div>';
-    // Add pagination
-    html += `
-      <div class="pagination">
-        <button ${currentPage <= 1 ? 'disabled' : ''} onclick="loadFavorites(${currentPage-1})">« Previous</button>
-        <span>Page ${currentPage} of ${data.total_pages}</span>
-        <button ${currentPage >= data.total_pages ? 'disabled' : ''} onclick="loadFavorites(${currentPage+1})">Next »</button>
-      </div>
-    `;
-    content.innerHTML = html;
-  });
-}
-function loadManage() {
-  if(active === 'Manage') return;
-  active = 'Manage';
-  updateTabs();
-  content.innerHTML = `
-    <div class="manage-panel">
-      <h2>Add New URL</h2>
-      <div class="form-group">
-        <label for="new-url">Single URL</label>
-        <input type="text" id="new-url" class="form-control" placeholder="https://example.com">
-        <button onclick="addUrl()" class="btn btn-primary" style="margin-top:10px">Add URL</button>
-      </div>
-      <div class="form-group" style="margin-top:20px">
-        <label for="batch-urls">Multiple URLs (up to 100 URLs, one per line)</label>
-        <textarea id="batch-urls" class="form-control" rows="8" placeholder="https://example1.com&#10;https://example2.com&#10;https://example3.com"></textarea>
-        <button onclick="addBatchUrls()" class="btn btn-primary" style="margin-top:10px">Add All URLs</button>
-      </div>
-      <div id="add-status" class="status"></div>
-      <div id="progress-bar" style="display:none; margin:15px 0;">
-        <div style="height:20px; background-color:#f0f0f0; border-radius:4px; overflow:hidden;">
-          <div id="progress-fill" style="height:100%; width:0%; background-color:#4a6dd8; transition:width 0.3s;"></div>
-        </div>
-        <div id="progress-text" style="text-align:center; margin-top:5px; font-size:14px;">0%</div>
-      </div>
-      <h2>Manage Saved URLs</h2>
-      <div id="url-list" class="url-list">Loading...</div>
-      <div style="margin-top: 30px;">
-        <h3>Backup & Restore</h3>
-        <p>Server storage may not persist across restarts. Use these options to save your data:</p>
-        <button onclick="exportUrls()" class="btn btn-success">Export URLs</button>
-        <button onclick="importUrls()" class="btn btn-primary">Import URLs</button>
-        <input type="file" id="import-file" style="display:none" onchange="handleImportFile(this.files)">
-      </div>
-    </div>
-  `;
-  loadUrlList();
-}
-// URL management functions
-function loadUrlList() {
-  // First try to load from localStorage as a fallback
-  const localUrls = loadFromLocalStorage();
-  makeRequest('/api/favorites?per_page=100', 'GET', null, function(data) {
-    const urlList = document.getElementById('url-list');
-    // If server has no URLs but localStorage does, restore from localStorage
-    if (data.items.length === 0 && localUrls && localUrls.length > 0) {
-      showStatus('add-status', 'Restoring URLs from local backup...', true);
-      // Add each URL from localStorage to the server
-      let restored = 0;
-      function restoreNextUrl(index) {
-        if (index >= localUrls.length) {
-          showStatus('add-status', `Restored ${restored} URLs from local backup`, true);
-          // Reload the list after restoration
-          setTimeout(() => {
-            loadUrlList();
-            if (active === 'Favorites') {
-              loadFavorites(currentPage);
-            }
-          }, 1000);
-          return;
-        }
-        const formData = new FormData();
-        formData.append('url', localUrls[index]);
-        makeRequest('/api/url/add', 'POST', formData, function(data) {
-          if (data.success) restored++;
-          restoreNextUrl(index + 1);
-        });
-      }
-      restoreNextUrl(0);
-      return;
-    }
-    if(data.items.length === 0) {
-      urlList.innerHTML = '<p style="text-align:center;padding:20px">No URLs saved yet.</p>';
-      return;
-    }
-    // Update localStorage with server data
-    saveToLocalStorage(data.items.map(item => item.url));
-    let html = '';
-    data.items.forEach(item => {
-      // Escape the URL to prevent JavaScript injection when used in onclick handlers
-      const escapedUrl = item.url.replace(/'/g, "\\'");
-      html += `
-        <div class="url-item">
-          <div>${item.url}</div>
-          <div class="url-controls">
-            <button class="btn" onclick="editUrl('${escapedUrl}')">Edit</button>
-            <button class="btn btn-danger" onclick="deleteUrl('${escapedUrl}')">Delete</button>
-          </div>
-        </div>
-      `;
-    });
-    urlList.innerHTML = html;
-  });
-}
-function addUrl() {
-  const url = document.getElementById('new-url').value.trim();
-  if(!url) {
-    showStatus('add-status', 'Please enter a URL', false);
-    return;
-  }
-  const formData = new FormData();
-  formData.append('url', url);
-  makeRequest('/api/url/add', 'POST', formData, function(data) {
-    showStatus('add-status', data.message, data.success);
-    if(data.success) {
-      document.getElementById('new-url').value = '';
-      // Update localStorage
-      const localUrls = loadFromLocalStorage() || [];
-      if (!localUrls.includes(url)) {
-        localUrls.unshift(url); // Add to beginning
-        saveToLocalStorage(localUrls);
-      }
-      loadUrlList();
-      // If currently in Favorites tab, reload to see changes immediately
-      if(active === 'Favorites') {
-        loadFavorites(currentPage);
-      }
-    }
-  });
-}
-function addBatchUrls() {
-  const textarea = document.getElementById('batch-urls');
-  const text = textarea.value.trim();
-  if (!text) {
-    showStatus('add-status', 'Please enter at least one URL', false);
-    return;
-  }
-  // Split by newlines and filter out empty lines
-  let urls = text.split(/\r?\n/).filter(url => url.trim() !== '');
-  // Limit to 100 URLs
-  if (urls.length > 100) {
-    showStatus('add-status', 'Too many URLs. Limited to 100 at once.', false);
-    urls = urls.slice(0, 100);
-  }
-  if (urls.length === 0) {
-    showStatus('add-status', 'No valid URLs found', false);
-    return;
-  }
-  // Show progress bar
-  const progressBar = document.getElementById('progress-bar');
-  const progressFill = document.getElementById('progress-fill');
-  const progressText = document.getElementById('progress-text');
-  progressBar.style.display = 'block';
-  progressFill.style.width = '0%';
-  progressText.textContent = '0%';
-  // Add URLs one by one
-  let processed = 0;
-  let succeeded = 0;
-  function updateProgress() {
-    const percentage = Math.round((processed / urls.length) * 100);
-    progressFill.style.width = percentage + '%';
-    progressText.textContent = `${processed}/${urls.length} (${percentage}%)`;
-  }
-  function addNextUrl(index) {
-    if (index >= urls.length) {
-      // All done
-      setTimeout(() => {
-        progressBar.style.display = 'none';
-        textarea.value = '';
-        showStatus('add-status', `Added ${succeeded} of ${urls.length} URLs successfully`, true);
-        // Reload URL list and favorites
-        loadUrlList();
-        if (active === 'Favorites') {
-          loadFavorites(currentPage);
-        }
-      }, 500);
-      return;
-    }
-    const url = urls[index].trim();
-    if (!url) {
-      // Skip empty URLs
-      processed++;
-      updateProgress();
-      addNextUrl(index + 1);
-      return;
-    }
-    const formData = new FormData();
-    formData.append('url', url);
-    makeRequest('/api/url/add', 'POST', formData, function(data) {
-      processed++;
-      if (data.success) {
-        succeeded++;
-        // Update localStorage
-        const localUrls = loadFromLocalStorage() || [];
-        if (!localUrls.includes(url)) {
-          localUrls.unshift(url);
-          saveToLocalStorage(localUrls);
-        }
-      }
-      updateProgress();
-      addNextUrl(index + 1);
-    });
-  }
-  // Start adding URLs
-  addNextUrl(0);
-}
-function editUrl(url) {
-  // Decode URL if it was previously escaped
-  const decodedUrl = url.replace(/\\'/g, "'");
-  const newUrl = prompt('Edit URL:', decodedUrl);
-  if(!newUrl || newUrl === decodedUrl) return;
-  const formData = new FormData();
-  formData.append('old', decodedUrl);
-  formData.append('new', newUrl);
-  makeRequest('/api/url/update', 'POST', formData, function(data) {
-    if(data.success) {
-      // Update localStorage
-      let localUrls = loadFromLocalStorage() || [];
-      const index = localUrls.indexOf(decodedUrl);
-      if (index !== -1) {
-        localUrls[index] = newUrl;
-        saveToLocalStorage(localUrls);
-      }
-      loadUrlList();
-      // If currently in Favorites tab, reload to see changes immediately
-      if(active === 'Favorites') {
-        loadFavorites(currentPage);
-      }
-    } else {
-      alert(data.message);
-    }
-  });
-}
-function deleteUrl(url) {
-  // Decode URL if it was previously escaped
-  const decodedUrl = url.replace(/\\'/g, "'");
-  if(!confirm('Are you sure you want to delete this URL?')) return;
-  const formData = new FormData();
-  formData.append('url', decodedUrl);
-  makeRequest('/api/url/delete', 'POST', formData, function(data) {
-    if(data.success) {
-      // Update localStorage
-      let localUrls = loadFromLocalStorage() || [];
-      const index = localUrls.indexOf(decodedUrl);
-      if (index !== -1) {
-        localUrls.splice(index, 1);
-        saveToLocalStorage(localUrls);
-      }
-      loadUrlList();
-      // If currently in Favorites tab, reload to see changes immediately
-      if(active === 'Favorites') {
-        loadFavorites(currentPage);
-      }
-    } else {
-      alert(data.message);
-    }
-  });
-}
-function showStatus(id, message, success) {
-  const status = document.getElementById(id);
-  status.textContent = message;
-  status.className = success ? 'status success' : 'status error';
-  setTimeout(() => {
-    status.className = 'status';
-  }, 3000);
-}
-// Create tabs
-// Favorites tab first
-const favTab = document.createElement('button');
-favTab.className = 'tab';
-favTab.textContent = 'Favorites';
-favTab.dataset.c = 'Favorites';
-favTab.onclick = function() { loadFavorites(1); };
-tabs.appendChild(favTab);
-// Category tabs
-cats.forEach(c => {
-  const b = document.createElement('button');
-  b.className = 'tab';
-  b.textContent = c;
-  b.dataset.c = c;
-  b.onclick = function() { loadCategory(c); };
-  tabs.appendChild(b);
-});
-// Manage tab last
-const manageTab = document.createElement('button');
-manageTab.className = 'tab manage';
-manageTab.textContent = 'Manage';
-manageTab.dataset.c = 'Manage';
-manageTab.onclick = function() { loadManage(); };
-tabs.appendChild(manageTab);
-// Start with Favorites tab
-loadFavorites(1);
-// Check for localStorage on page load
-window.addEventListener('load', function() {
-  // Try to load URLs from localStorage
-  const localUrls = loadFromLocalStorage();
-  // If we have URLs in localStorage, make sure they're on the server
-  if (localUrls && localUrls.length > 0) {
-    console.log(`Found ${localUrls.length} URLs in localStorage`);
-    // First get server URLs to compare
-    makeRequest('/api/favorites?per_page=1000', 'GET', null, function(data) {
-      const serverUrls = data.items.map(item => item.url);
-      // Find URLs that are in localStorage but not on server
-      const missingUrls = localUrls.filter(url => !serverUrls.includes(url));
-      if (missingUrls.length > 0) {
-        console.log(`Found ${missingUrls.length} URLs missing from server, restoring...`);
-        // Add missing URLs to server
-        let restored = 0;
-        function restoreNextUrl(index) {
-          if (index >= missingUrls.length) {
-            console.log(`Restored ${restored} URLs from localStorage`);
-            if (active === 'Favorites') {
-              loadFavorites(currentPage);
-            }
-            return;
-          }
-          const formData = new FormData();
-          formData.append('url', missingUrls[index]);
-          makeRequest('/api/url/add', 'POST', formData, function(data) {
-            if (data.success) restored++;
-            restoreNextUrl(index + 1);
-          });
-        }
-        restoreNextUrl(0);
-      }
-    });
-  }
-});
-</script>
-</body>
-</html>''')
-    # Return the rendered template
     return render_template('index.html', cats=list(CATEGORIES.keys()))
 # Initialize database on startup

 # ────────────────────────── 6. MAIN ROUTES ──────────────────────────
 @app.route('/')
 def home():
+    # Create a simple initial template for debugging
+    template_dir = os.path.join(BASE_DIR, 'templates')
+    os.makedirs(template_dir, exist_ok=True)
+    index_html = '''<!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AI Favorite Sites</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
+        h1 { text-align: center; }
+    </style>
 </head>
 <body>
+    <h1>🌟 AI Favorite Sites</h1>
+    <p style="text-align: center;">
+        <a href="https://discord.gg/openfreeai" target="_blank">
+            <img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=%230000ff&labelColor=%23800080&logo=discord&logoColor=white&style=for-the-badge" alt="Discord">
+        </a>
+    </p>
+    <div id="content">Loading...</div>
+    <script>
+        // Simple alert to check if JavaScript is working
+        window.onload = function() {
+            document.getElementById('content').innerHTML = 'JavaScript is working! Loading content...';
+            // List available categories
+            const cats = {{cats|tojson}};
+            let catList = '<ul>';
+            cats.forEach(cat => {
+                catList += '<li>' + cat + '</li>';
+            });
+            catList += '</ul>';
+            document.getElementById('content').innerHTML += '<p>Available categories:</p>' + catList;
+        };
+    </script>
+</body>
+</html>'''
+    with open(os.path.join(template_dir, 'index.html'), 'w', encoding='utf-8') as f:
+        f.write(index_html)
+    # Log for debugging
+    logger.info(f"Template written to: {os.path.join(template_dir, 'index.html')}")
+    logger.info(f"Categories: {list(CATEGORIES.keys())}")
     return render_template('index.html', cats=list(CATEGORIES.keys()))
 # Initialize database on startup