Add modal for export method selection in AdminPage and update export filename based on hosting type

src/app/admin/page.tsx

@@ -491,14 +491,80 @@ export default function AdminPage() {
   };
 
   function handleExportTarball() {
-    fetch('/api/admin/export')
+    // Create popup modal
+    const modal = document.createElement('div');
+    modal.style.position = 'fixed';
+    modal.style.top = '0';
+    modal.style.left = '0';
+    modal.style.width = '100%';
+    modal.style.height = '100%';
+    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    modal.style.display = 'flex';
+    modal.style.alignItems = 'center';
+    modal.style.justifyContent = 'center';
+    modal.style.zIndex = '1000';
+
+    const modalContent = document.createElement('div');
+    modalContent.style.backgroundColor = 'white';
+    modalContent.style.padding = '30px';
+    modalContent.style.borderRadius = '8px';
+    modalContent.style.maxWidth = '500px';
+    modalContent.style.width = '90%';
+    modalContent.style.textAlign = 'center';
+    modalContent.style.position = 'relative';
+
+    modalContent.innerHTML = `
+      <button id="close-btn" style="position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; font-weight: bold;">×</button>
+      <h2 style="margin: 0 0 20px 0; font-size: 1.5rem; font-weight: bold;">Export Method</h2>
+      <p style="margin: 0 0 20px 0; color: #666;">How are you hosting this application?</p>
+      <p style="margin: 0 0 20px 0; font-size: 0.9rem; color: #888; font-style: italic;">If you don't know your method of hosting, ask your Systems Administrator</p>
+      <div style="display: flex; gap: 10px; justify-content: center; margin-top: 20px;">
+        <button id="docker-btn" style="padding: 10px 20px; background-color: #059669; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;">Docker</button>
+        <button id="local-btn" style="padding: 10px 20px; background-color: #2563eb; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;">Local</button>
+      </div>
+    `;
+
+    modal.appendChild(modalContent);
+    document.body.appendChild(modal);
+
+    // Add event listeners
+    const dockerBtn = modal.querySelector('#docker-btn');
+    const localBtn = modal.querySelector('#local-btn');
+    const closeBtn = modal.querySelector('#close-btn');
+
+    const closeModal = () => {
+      document.body.removeChild(modal);
+    };
+
+    dockerBtn?.addEventListener('click', () => {
+      closeModal();
+      exportFromEndpoint('/api/admin/export');
+    });
+
+    localBtn?.addEventListener('click', () => {
+      closeModal();
+      exportFromEndpoint('/api/admin/exportlocal');
+    });
+
+    closeBtn?.addEventListener('click', closeModal);
+
+    // Close modal when clicking outside
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        closeModal();
+      }
+    });
+  }
+
+  function exportFromEndpoint(endpoint: string) {
+    fetch(endpoint)
       .then(async (res) => {
         if (!res.ok) throw new Error('Export failed');
         const blob = await res.blob();
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
-        a.download = 'markdownblog-export.tar.gz';
+        a.download = endpoint.includes('local') ? 'local-export.tar.gz' : 'docker-export.tar.gz';
         document.body.appendChild(a);
         a.click();
         a.remove();