Upload folder using huggingface_hub

README.md

@@ -1,10 +1,11 @@
 ---
 title: Mod Converter Preview
-emoji: 📈
-colorFrom: blue
-colorTo: green
+emoji: 🔧
+colorFrom: green
+colorTo: gray
 sdk: static
+app_file: index.html
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+CraftBridge - Minecraft Mod Converter

animations.css

@@ -0,0 +1,370 @@
+/* Mod Converter — Shared animation layer + custom components
+ * Applied ON TOP of the Tailwind-based Stitch pages.
+ * Adds smooth scroll animations, hover lifts, page transitions, and custom MC version selector.
+ */
+
+/* --- Keyframes --- */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(16px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
+  50% { box-shadow: 0 0 12px 2px rgba(74, 222, 128, 0.15); }
+}
+
+@keyframes progressPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* --- Page transition --- */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  animation: fadeIn 0.25s ease-out;
+}
+
+/* --- Scroll-triggered animations --- */
+.reveal {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-scale {
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
+}
+
+.reveal-scale.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Stagger children on reveal */
+.stagger > * {
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+
+.stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
+.stagger.visible > *:nth-child(2) { transition-delay: 70ms; opacity: 1; transform: none; }
+.stagger.visible > *:nth-child(3) { transition-delay: 140ms; opacity: 1; transform: none; }
+.stagger.visible > *:nth-child(4) { transition-delay: 210ms; opacity: 1; transform: none; }
+.stagger.visible > *:nth-child(5) { transition-delay: 280ms; opacity: 1; transform: none; }
+.stagger.visible > *:nth-child(6) { transition-delay: 350ms; opacity: 1; transform: none; }
+
+/* --- Hover lifts --- */
+.lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+/* --- Interactive states --- */
+button, a {
+  transition: all 0.15s ease;
+}
+
+button:active {
+  transform: scale(0.97);
+}
+
+/* --- Progress bar smooth fill --- */
+[class*="bg-emerald"] {
+  transition: width 0.5s ease-in-out, background-color 0.3s ease;
+}
+
+/* --- Active pulse for running status --- */
+.animate-pulse {
+  animation: progressPulse 1.5s ease-in-out infinite;
+}
+
+/* --- Terminal auto-scroll --- */
+.terminal-scroll {
+  scroll-behavior: smooth;
+}
+
+/* --- Dropzone drag feedback --- */
+.dropzone-active {
+  border-color: #4ade80 !important;
+  background: rgba(74, 222, 128, 0.03) !important;
+}
+
+/* --- Responsive sidebar --- */
+@media (max-width: 768px) {
+  aside.fixed { display: none !important; }
+  div.md\:pl-64 { padding-left: 0 !important; margin-left: 0 !important; }
+}
+
+/* --- Fix AI-generated tells --- */
+/* Remove excessive uppercase tracking in footers */
+footer span.tracking-widest {
+  letter-spacing: 0.08em;
+  font-size: 0.7rem;
+}
+
+/* Tone down glow effects */
+.shadow-\[0_0_15px_rgba\(16\,185\,129\,0\.2\)\] {
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.12);
+}
+
+.shadow-\[0_0_5px_rgba\(52\,211\,153\,0\.8\)\],
+.shadow-\[0_0_5px_rgba\(251\,191\,36\,0\.8\)\] {
+  box-shadow: 0 0 4px currentColor;
+}
+
+/* Smoother badge dots */
+.inline-flex span.w-1\.5 {
+  transition: opacity 0.2s ease;
+}
+
+/* ============================================
+   Custom MC Version Selector
+   ============================================ */
+
+.mc-selector {
+  position: relative;
+}
+
+/* Trigger button */
+.mc-selector-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 10px;
+  color: #e2e8f0;
+  font-family: 'Manrope', sans-serif;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.mc-selector-trigger:hover {
+  border-color: #4ade80;
+}
+
+.mc-selector-trigger.open {
+  border-color: #4ade80;
+  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.08);
+}
+
+.mc-selector-trigger .mc-selector-value {
+  color: #94a3b8;
+  transition: color 0.2s ease;
+}
+
+.mc-selector-trigger.has-value .mc-selector-value {
+  color: #e2e8f0;
+  font-weight: 600;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8125rem;
+  letter-spacing: 0.02em;
+}
+
+/* Arrow icon rotation */
+.mc-selector-arrow {
+  font-size: 20px;
+  color: #64748b;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
+}
+
+.mc-selector-trigger.open .mc-selector-arrow {
+  transform: rotate(180deg);
+  color: #4ade80;
+}
+
+/* Dropdown panel */
+.mc-selector-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 60;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.05);
+  overflow: hidden;
+
+  /* Animation: scale + fade from top */
+  opacity: 0;
+  transform: translateY(-8px) scale(0.98);
+  transform-origin: top center;
+  pointer-events: none;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mc-selector-panel.open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+/* Search bar */
+.mc-selector-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #1e293b;
+  background: #020617;
+}
+
+.mc-selector-search .material-symbols-outlined {
+  font-size: 18px;
+  color: #475569;
+}
+
+.mc-selector-search input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #e2e8f0;
+  font-family: 'Manrope', sans-serif;
+  font-size: 0.8125rem;
+}
+
+.mc-selector-search input::placeholder {
+  color: #475569;
+}
+
+/* Version list */
+.mc-selector-list {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 6px;
+  scroll-behavior: smooth;
+}
+
+.mc-selector-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.mc-selector-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mc-selector-list::-webkit-scrollbar-thumb {
+  background: #334155;
+  border-radius: 2px;
+}
+
+/* Group label */
+.mc-selector-group {
+  margin-bottom: 4px;
+}
+
+.mc-selector-group-label {
+  padding: 8px 12px 4px;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #475569;
+}
+
+/* Option button */
+.mc-selector-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #cbd5e1;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
+}
+
+.mc-selector-option:hover {
+  background: #1e293b;
+  color: #e2e8f0;
+  transform: translateX(4px);
+}
+
+.mc-selector-option.selected {
+  background: rgba(74, 222, 128, 0.08);
+  color: #4ade80;
+}
+
+.mc-selector-option:active {
+  transform: scale(0.98);
+}
+
+/* Version name */
+.mc-version-name {
+  font-weight: 500;
+}
+
+/* Version tag */
+.mc-version-tag {
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.mc-version-tag.latest {
+  background: rgba(74, 222, 128, 0.15);
+  color: #4ade80;
+  border: 1px solid rgba(74, 222, 128, 0.2);
+}
+
+.mc-version-tag.stable {
+  background: rgba(99, 102, 241, 0.12);
+  color: #818cf8;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+/* Hidden option (filtered out) */
+.mc-selector-option.hidden {
+  display: none;
+}
+
+.mc-selector-group.hidden {
+  display: none;
+}

app.js

@@ -0,0 +1,524 @@
+/* CraftBridge — Demo interaction handler
+ * Wires up all buttons, nav, dropzone, tables etc. with fake data.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  // --- Load demo data ---
+  const demoScript = document.createElement('script');
+  demoScript.src = 'demo-data.js';
+  demoScript.onload = initDemo;
+  document.head.appendChild(demoScript);
+
+function initDemo() {
+  initAnimations();
+  initDropzone();
+  initTerminal();
+  initNav();
+  initDashboard();
+  initJobDetail();
+  initResults();
+  initMcSelector();
+  initSettingsSelectors();
+}
+
+  // --- Scroll animations ---
+  function initAnimations() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+
+    document.querySelectorAll('.reveal, .reveal-scale, .stagger').forEach(el => {
+      observer.observe(el);
+    });
+  }
+
+  // --- Navigation ---
+  function initNav() {
+    const path = window.location.pathname;
+    document.querySelectorAll('aside nav a, .sidebar nav a').forEach(a => {
+      const href = a.getAttribute('href') || '';
+      a.classList.remove('active');
+      if (!a.classList.contains('text-emerald-400') && !a.classList.contains('text-emerald-700') && !a.classList.contains('dark\\:text-emerald-400')) {
+        // no-op
+      }
+    });
+  }
+
+  // --- Dashboard: populate job table ---
+  function initDashboard() {
+    const tbody = document.querySelector('[data-job-table]');
+    if (!tbody) return;
+
+    const jobs = getJobs();
+    tbody.innerHTML = '';
+
+    jobs.forEach(job => {
+      const tr = document.createElement('tr');
+      tr.className = 'hover:bg-slate-800/20 transition-colors group cursor-pointer';
+      tr.innerHTML = `
+        <td class="px-6 py-4 font-mono text-slate-500 text-xs">#${job.job_id.toUpperCase()}</td>
+        <td class="px-6 py-4 font-medium text-slate-200">${job.jar_name}</td>
+        <td class="px-6 py-4">
+          <span class="bg-slate-800 text-slate-300 text-[10px] font-bold px-2 py-1 rounded border border-slate-700">${job.mc_version}</span>
+        </td>
+        <td class="px-6 py-4">${statusBadge(job.status)}</td>
+        <td class="px-6 py-4 text-xs">${timeAgo(job.created_at)}</td>
+        <td class="px-6 py-4 text-right">
+          <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+            ${job.status === 'done' ? '<button class="p-1 text-slate-500 hover:text-emerald-400 transition-colors" onclick="window.location.href=\'results.html?job=' + job.job_id + '\'"><span class="material-symbols-outlined text-[18px]">download</span></button>' : ''}
+            ${job.status === 'running' ? '<button class="p-1 text-slate-500 hover:text-amber-400 transition-colors" onclick="window.location.href=\'job.html?job=' + job.job_id + '\'"><span class="material-symbols-outlined text-[18px]">visibility</span></button>' : ''}
+            <button class="p-1 text-slate-500 hover:text-red-400 transition-colors" onclick="this.closest(\'tr\').remove()"><span class="material-symbols-outlined text-[18px]">delete</span></button>
+          </div>
+        </td>
+      `;
+      tr.addEventListener('click', (e) => {
+        if (e.target.closest('button')) return;
+        if (job.status === 'done') window.location.href = `results.html?job=${job.job_id}`;
+        else if (job.status === 'running') window.location.href = `job.html?job=${job.job_id}`;
+        else window.location.href = `job.html?job=${job.job_id}`;
+      });
+      tbody.appendChild(tr);
+    });
+
+  // Update stat numbers
+  const totalEl = document.querySelector('[data-stat-total]');
+  const successEl = document.querySelector('[data-stat-success]');
+  const failedEl = document.querySelector('[data-stat-failed]');
+  if (totalEl) totalEl.textContent = jobs.length;
+  if (successEl) successEl.textContent = jobs.filter(j => j.status === 'done').length;
+  if (failedEl) failedEl.textContent = jobs.filter(j => j.status === 'failed').length;
+
+  // Show empty state if no jobs
+  const emptyState = document.querySelector('[data-empty-state]');
+  const tableEl = tbody.closest('table');
+  if (emptyState) {
+    if (jobs.length === 0) {
+      emptyState.classList.remove('hidden');
+      if (tableEl) tableEl.classList.add('hidden');
+    } else {
+      emptyState.classList.add('hidden');
+      if (tableEl) tableEl.classList.remove('hidden');
+    }
+  }
+}
+
+  // --- Job detail page ---
+  function initJobDetail() {
+    const params = new URLSearchParams(window.location.search);
+    const jobId = params.get('job');
+    if (!jobId) return;
+
+    const job = getJob(jobId);
+    if (!job) return;
+
+    // Update page content with job data
+    document.querySelectorAll('[data-job-id]').forEach(el => el.textContent = `#${jobId.toUpperCase()}`);
+    document.querySelectorAll('[data-job-name]').forEach(el => el.textContent = job.jar_name);
+    document.querySelectorAll('[data-job-version]').forEach(el => el.textContent = job.mc_version);
+    document.querySelectorAll('[data-job-status]').forEach(el => { el.innerHTML = statusBadge(job.status); });
+    document.querySelectorAll('[data-job-iteration]').forEach(el => { el.textContent = job.current_iteration; });
+
+    // Progress steps
+    const steps = ['Uploaded', 'Analyzing', 'Building', 'Testing', 'Complete'];
+    const activeIndex = job.status === 'done' ? 4 : job.status === 'failed' ? 2 : job.status === 'running' ? 2 : 0;
+
+    document.querySelectorAll('[data-progress-steps]').forEach(container => {
+      container.innerHTML = steps.map((step, i) => {
+        let cls = 'text-slate-500 border-slate-700';
+        let dotCls = 'bg-slate-700';
+        if (i < activeIndex) { cls = 'text-emerald-400 border-emerald-500'; dotCls = 'bg-emerald-500'; }
+        if (i === activeIndex && job.status === 'running') { cls = 'text-amber-400 border-amber-500'; dotCls = 'bg-amber-400 animate-pulse'; }
+        if (i === activeIndex && job.status === 'done') { cls = 'text-emerald-400 border-emerald-500'; dotCls = 'bg-emerald-500'; }
+        return `<div class="flex flex-col items-center gap-2 flex-1">
+          <div class="w-8 h-8 rounded-full border-2 ${dotCls} ${cls} flex items-center justify-center text-xs font-bold">${i < activeIndex || job.status === 'done' ? '✓' : i + 1}</div>
+          <span class="text-xs ${cls} font-label">${step}</span>
+        </div>${i < steps.length - 1 ? '<div class="flex-1 h-0.5 mt-4 ' + (i < activeIndex ? 'bg-emerald-500' : 'bg-slate-700') + '"></div>' : ''}`;
+      }).join('');
+    });
+
+    // Build iterations table
+    const buildTbody = document.querySelector('[data-build-table]');
+    if (buildTbody && job.build_run_ids) {
+      buildTbody.innerHTML = '';
+      job.build_run_ids.forEach((bid, i) => {
+        const build = DEMO.builds[bid];
+        if (!build) return;
+        const tr = document.createElement('tr');
+        tr.className = 'hover:bg-slate-800/20 transition-colors';
+        const statusIcon = build.status === 'passed' ? '✓' : build.status === 'failed' ? '✗' : '⏳';
+        const statusColor = build.status === 'passed' ? 'text-emerald-400' : build.status === 'failed' ? 'text-red-400' : 'text-amber-400';
+        tr.innerHTML = `
+          <td class="px-4 py-3 text-xs">${build.iteration}</td>
+          <td class="px-4 py-3 ${statusColor} font-bold text-sm">${statusIcon} ${build.status}</td>
+          <td class="px-4 py-3 text-xs text-slate-500">${build.time}</td>
+          <td class="px-4 py-3"><button class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors" onclick="showBuildLog('${bid}')">View Log</button></td>
+        `;
+        buildTbody.appendChild(tr);
+      });
+    }
+  }
+
+  // --- Show build log in terminal ---
+  window.showBuildLog = function(buildId) {
+    const build = DEMO.builds[buildId];
+    if (!build) return;
+    const terminal = document.querySelector('[data-terminal]');
+    if (!terminal) return;
+    terminal.innerHTML = build.log.split('\n').map(line => {
+      let cls = 'text-slate-400';
+      if (line.includes('[ERROR]')) cls = 'text-red-400';
+      else if (line.includes('[WARN]')) cls = 'text-amber-400';
+      else if (line.includes('[INFO]') && line.includes('SUCCESS')) cls = 'text-emerald-400';
+      else if (line.includes('[INFO]')) cls = 'text-slate-500';
+      else if (line.includes('>')) cls = 'text-emerald-400';
+      return `<div class="${cls}">${line}</div>`;
+    }).join('');
+    terminal.scrollTop = 0;
+    // Highlight the terminal section
+    terminal.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  };
+
+  // --- Results page ---
+  function initResults() {
+    const params = new URLSearchParams(window.location.search);
+    const jobId = params.get('job');
+    if (!jobId) return;
+
+    const job = getJob(jobId);
+    if (!job) return;
+
+    document.querySelectorAll('[data-result-name]').forEach(el => el.textContent = job.jar_name);
+    document.querySelectorAll('[data-result-version]').forEach(el => el.textContent = job.mc_version);
+
+    // Populate report
+    const reportEl = document.querySelector('[data-conversion-report]');
+    if (reportEl && jobId === 'cb-892a') {
+      reportEl.innerHTML = renderMarkdown(DEMO.conversionReport);
+    }
+  }
+
+  // --- Simple markdown renderer ---
+  function renderMarkdown(text) {
+    return text
+      .replace(/^### (.+)$/gm, '<h3 class="text-lg font-bold text-slate-200 mt-4 mb-2">$1</h3>')
+      .replace(/^## (.+)$/gm, '<h2 class="text-xl font-bold text-slate-100 mt-6 mb-3">$1</h2>')
+      .replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold text-white mt-8 mb-4">$1</h1>')
+      .replace(/^- (.+)$/gm, '<div class="flex gap-2 text-sm text-slate-300 pl-4"><span class="text-slate-500">•</span><span>$1</span></div>')
+      .replace(/⚠️/g, '<span class="text-amber-400">⚠️</span>')
+      .replace(/✅/g, '<span class="text-emerald-400">✅</span>')
+      .replace(/✗/g, '<span class="text-red-400">✗</span>')
+      .replace(/\*\*(.+?)\*\*/g, '<strong class="text-slate-200">$1</strong>')
+      .replace(/\n\n/g, '<br><br>')
+      .replace(/\n/g, '<br>');
+  }
+
+  // --- Dropzone ---
+  function initDropzone() {
+    const dropzone = document.querySelector('[data-dropzone]');
+    if (!dropzone) return;
+
+    const label = dropzone.querySelector('[data-dropzone-label]');
+
+    ['dragenter', 'dragover'].forEach(evt => {
+      dropzone.addEventListener(evt, (e) => {
+        e.preventDefault();
+        dropzone.classList.add('dropzone-active', 'border-emerald-500/50');
+      });
+    });
+
+    ['dragleave', 'drop'].forEach(evt => {
+      dropzone.addEventListener(evt, (e) => {
+        e.preventDefault();
+        dropzone.classList.remove('dropzone-active', 'border-emerald-500/50');
+      });
+    });
+
+    dropzone.addEventListener('drop', (e) => {
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        if (label) label.textContent = files[0].name;
+        dropzone.classList.add('has-file', 'border-emerald-500');
+        enableConvertBtn(files[0].name);
+      }
+    });
+
+  // Click to browse (only on the dropzone area, not the Browse button)
+  dropzone.addEventListener('click', (e) => {
+    // If clicking the Browse button, let it handle the file picker
+    // Otherwise open the file picker from the dropzone
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.jar';
+    input.onchange = () => {
+      if (input.files.length > 0) {
+        if (label) label.textContent = input.files[0].name;
+        dropzone.classList.add('has-file', 'border-emerald-500');
+        enableConvertBtn(input.files[0].name);
+      }
+};
+  input.click();
+});
+}
+
+  function enableConvertBtn(filename) {
+    const btn = document.querySelector('[data-convert-btn]');
+    if (btn) {
+      btn.disabled = false;
+      btn.classList.remove('opacity-40', 'cursor-not-allowed');
+    }
+  }
+
+  // --- Convert button ---
+  document.addEventListener('click', (e) => {
+    const convertBtn = e.target.closest('[data-convert-btn]');
+    if (convertBtn && !convertBtn.disabled) {
+      convertBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> Starting...';
+      convertBtn.disabled = true;
+      setTimeout(() => {
+        window.location.href = 'job.html?job=cb-892b';
+      }, 1500);
+    }
+
+    // Download buttons on results page
+    const downloadBtn = e.target.closest('[data-download-plugin], [data-download-rp], [data-download-dp]');
+    if (downloadBtn) {
+      const original = downloadBtn.innerHTML;
+      downloadBtn.innerHTML = '<span class="material-symbols-outlined">check</span> Downloaded!';
+      downloadBtn.classList.add('opacity-60');
+      setTimeout(() => {
+        downloadBtn.innerHTML = original;
+        downloadBtn.classList.remove('opacity-60');
+      }, 2000);
+    }
+
+    // Sign in button → go to dashboard
+    const signInBtn = e.target.closest('[data-sign-in]');
+    if (signInBtn) {
+      signInBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> Signing in...';
+      setTimeout(() => {
+        window.location.href = 'dashboard.html';
+      }, 800);
+    }
+
+    // Start Converting CTA
+    const startBtn = e.target.closest('[data-start-converting]');
+    if (startBtn) {
+      window.location.href = 'upload.html';
+    }
+
+    // Convert Another
+    const anotherBtn = e.target.closest('[data-convert-another]');
+    if (anotherBtn) {
+      window.location.href = 'upload.html';
+    }
+
+    // Cancel job
+    const cancelBtn = e.target.closest('[data-cancel-job]');
+    if (cancelBtn) {
+      cancelBtn.textContent = 'Cancelled';
+      cancelBtn.classList.add('opacity-50');
+      cancelBtn.disabled = true;
+    }
+  });
+
+  // --- Custom MC Version Selector (supports multiple on page) ---
+function initMcSelector() {
+  document.querySelectorAll('[data-mc-selector]').forEach(selector => {
+    const trigger = selector.querySelector('[data-mc-trigger]');
+    const panel = selector.querySelector('[data-mc-panel]');
+    const valueEl = selector.querySelector('[data-mc-value]');
+    const searchInput = selector.querySelector('[data-mc-search]');
+  const options = selector.querySelectorAll('.mc-selector-option');
+  const groups = selector.querySelectorAll('[data-mc-list] .mc-selector-group');
+
+    let isOpen = false;
+    let selectedValue = selector.dataset.defaultValue || '';
+
+    // Set initial value if provided
+    if (selectedValue && valueEl) {
+      valueEl.textContent = selectedValue;
+      trigger.classList.add('has-value');
+      options.forEach(o => {
+        if (o.dataset.value === selectedValue) o.classList.add('selected');
+      });
+    }
+
+    // Toggle open/close
+    function toggle(forceClose = false) {
+      isOpen = forceClose ? false : !isOpen;
+      trigger.classList.toggle('open', isOpen);
+      panel.classList.toggle('open', isOpen);
+      if (isOpen && searchInput) {
+        setTimeout(() => searchInput.focus(), 150);
+      }
+      if (!isOpen && searchInput) {
+        searchInput.value = '';
+        filterOptions('');
+      }
+    }
+
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggle();
+    });
+
+    // Close on outside click
+    document.addEventListener('click', (e) => {
+      if (!selector.contains(e.target)) {
+        toggle(true);
+      }
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && isOpen) {
+        toggle(true);
+        trigger.focus();
+      }
+    });
+
+    // Select an option
+    options.forEach(opt => {
+      opt.addEventListener('click', () => {
+        selectedValue = opt.dataset.value;
+        if (valueEl) valueEl.textContent = selectedValue;
+        trigger.classList.add('has-value');
+
+        // Mark selected
+        options.forEach(o => o.classList.remove('selected'));
+        opt.classList.add('selected');
+
+        // Smooth close
+        setTimeout(() => toggle(true), 120);
+
+        // Enable convert button if file is also selected
+        updateConvertButton();
+      });
+    });
+
+    // Search/filter
+    if (searchInput) {
+      searchInput.addEventListener('input', () => {
+        filterOptions(searchInput.value.toLowerCase());
+      });
+    }
+
+    function filterOptions(query) {
+      groups.forEach(group => {
+        const groupOptions = group.querySelectorAll('.mc-selector-option');
+        let anyVisible = false;
+        groupOptions.forEach(opt => {
+          const name = opt.querySelector('.mc-version-name');
+          const matches = !query || (name && name.textContent.toLowerCase().includes(query));
+          opt.classList.toggle('hidden', !matches);
+          if (matches) anyVisible = true;
+        });
+        // Hide group label if no options visible
+        const label = group.querySelector('.mc-selector-group-label');
+        if (label) label.classList.toggle('hidden', !anyVisible);
+      });
+    }
+
+    function updateConvertButton() {
+      const btn = document.querySelector('[data-convert-btn]');
+      if (!btn) return;
+      // Enable if both file and version are selected
+      const hasFile = document.querySelector('[data-dropzone].has-file');
+      if (hasFile && selectedValue) {
+        btn.disabled = false;
+        btn.classList.remove('opacity-40', 'cursor-not-allowed');
+      }
+    }
+  });
+}
+
+// --- Settings page selectors ---
+function initSettingsSelectors() {
+  // Iteration selector
+  const iterSelector = document.querySelector('[data-iter-selector]');
+  if (iterSelector) {
+    const trigger = iterSelector.querySelector('[data-mc-trigger]');
+    const panel = iterSelector.querySelector('[data-mc-panel]');
+    const valueEl = iterSelector.querySelector('[data-mc-value]');
+    const options = iterSelector.querySelectorAll('.mc-selector-option');
+
+    let isOpen = false;
+    let selectedValue = iterSelector.dataset.defaultValue || '5';
+
+    if (selectedValue && valueEl) {
+      valueEl.textContent = selectedValue === '0' ? '∞' : selectedValue;
+      trigger.classList.add('has-value');
+      options.forEach(o => {
+        if (o.dataset.value === selectedValue) o.classList.add('selected');
+      });
+    }
+
+    function toggle(forceClose = false) {
+      isOpen = forceClose ? false : !isOpen;
+      trigger.classList.toggle('open', isOpen);
+      panel.classList.toggle('open', isOpen);
+    }
+
+    trigger.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });
+    document.addEventListener('click', (e) => { if (!iterSelector.contains(e.target)) toggle(true); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isOpen) { toggle(true); trigger.focus(); } });
+
+    options.forEach(opt => {
+      opt.addEventListener('click', () => {
+        selectedValue = opt.dataset.value;
+        if (valueEl) valueEl.textContent = opt.dataset.display || selectedValue;
+        trigger.classList.add('has-value');
+        options.forEach(o => o.classList.remove('selected'));
+        opt.classList.add('selected');
+        setTimeout(() => toggle(true), 120);
+      });
+    });
+  }
+}
+
+// --- Terminal auto-scroll ---
+  function initTerminal() {
+    const terminal = document.querySelector('[data-terminal]');
+    if (!terminal) return;
+    terminal.scrollTop = terminal.scrollHeight;
+  }
+
+// --- Copy button ---
+document.querySelectorAll('[data-copy]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const target = document.querySelector(btn.dataset.copy);
+    if (target) {
+      navigator.clipboard.writeText(target.textContent).then(() => {
+        const original = btn.innerHTML;
+        btn.innerHTML = '<span class="material-symbols-outlined text-emerald-400">check</span>';
+        setTimeout(() => btn.innerHTML = original, 1500);
+      });
+    }
+  });
+});
+
+// --- Copy report as markdown ---
+document.querySelectorAll('[data-copy-report]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const reportEl = document.querySelector('[data-conversion-report]');
+    if (reportEl) {
+      const text = reportEl.innerText || reportEl.textContent;
+      navigator.clipboard.writeText(text).then(() => {
+        const original = btn.innerHTML;
+        btn.innerHTML = '<span class="material-symbols-outlined text-emerald-400 text-[16px]">check</span> Copied!';
+        btn.classList.add('text-emerald-400');
+        setTimeout(() => {
+          btn.innerHTML = original;
+          btn.classList.remove('text-emerald-400');
+        }, 2000);
+      });
+    }
+  });
+});
+});

dashboard.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Dashboard</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body { background-color: #020617; color: #f1f5f9; }
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-dashboard').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-slate-400 hover:text-slate-200 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-dashboard" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-dashboard').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-dashboard').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px]">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-slate-500 hover:text-slate-300 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]">settings</span>
+      </a>
+    </div>
+  </div>
+</aside>
+</div>
+<!-- Main Content Canvas -->
+<main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen p-4 sm:p-8 flex flex-col">
+  <div class="w-full max-w-5xl mx-auto flex flex-col gap-8 relative">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+    <!-- Header Section -->
+    <div class="flex flex-col gap-2 relative z-10">
+      <h2 class="font-headline text-3xl sm:text-4xl font-bold text-slate-100 tracking-tight">Dashboard</h2>
+      <p class="font-body text-slate-400 text-sm sm:text-base">Overview of your recent mod conversion jobs.</p>
+    </div>
+    <!-- Stats Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 relative z-10" stagger reveal>
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-indigo-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-2 relative z-10">
+          <span class="text-slate-400 text-sm font-medium">Total Conversions</span>
+          <span class="material-symbols-outlined text-indigo-400 bg-indigo-500/10 p-1.5 rounded-lg text-sm">data_usage</span>
+        </div>
+        <div class="text-3xl font-headline font-bold text-slate-100 relative z-10"><span data-stat-total>0</span></div>
+      </div>
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-emerald-500/20 transition-colors relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-2 relative z-10">
+          <span class="text-slate-400 text-sm font-medium">Successful</span>
+          <span class="material-symbols-outlined text-emerald-400 bg-emerald-500/10 p-1.5 rounded-lg text-sm">check_circle</span>
+        </div>
+        <div class="text-3xl font-headline font-bold text-emerald-400 relative z-10"><span data-stat-success>0</span></div>
+      </div>
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-rose-500/20 transition-colors relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-rose-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-2 relative z-10">
+          <span class="text-slate-400 text-sm font-medium">Failed</span>
+          <span class="material-symbols-outlined text-rose-400 bg-rose-500/10 p-1.5 rounded-lg text-sm">error</span>
+        </div>
+        <div class="text-3xl font-headline font-bold text-rose-400 relative z-10"><span data-stat-failed>0</span></div>
+      </div>
+    </div>
+    <!-- Recent Jobs Section -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl overflow-hidden relative z-10">
+      <div class="p-5 border-b border-slate-800 flex justify-between items-center">
+        <h2 class="font-headline font-bold text-slate-200">Recent Jobs</h2>
+        <a href="upload.html" class="text-xs font-label font-semibold text-slate-400 hover:text-emerald-400 transition-colors flex items-center gap-1 no-underline">
+          New Conversion <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
+        </a>
+      </div>
+      <div class="overflow-x-auto" reveal>
+        <table class="w-full text-left text-sm text-slate-400">
+          <thead class="text-xs uppercase bg-slate-950/50 border-b border-slate-800 font-label tracking-wider">
+            <tr>
+              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Job ID</th>
+              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Mod Name</th>
+              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">MC Version</th>
+              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Status</th>
+              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Date</th>
+              <th class="px-6 py-4 font-semibold text-slate-500 text-right" scope="col">Actions</th>
+            </tr>
+          </thead>
+          <tbody data-job-table class="divide-y divide-slate-800/50">
+          </tbody>
+        </table>
+      </div>
+      <!-- Empty state -->
+      <div data-empty-state class="hidden p-12 text-center">
+        <span class="material-symbols-outlined text-5xl text-slate-700 mb-4">inbox</span>
+        <p class="text-slate-500 font-medium">No conversions yet</p>
+        <p class="text-slate-600 text-sm mt-1">Upload a mod JAR to get started</p>
+        <a href="upload.html" class="inline-block mt-4 px-5 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-lg text-sm transition-colors no-underline">Start Converting</a>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

demo-data.js

@@ -0,0 +1,132 @@
+/* CraftBridge — Fake backend for demo mode
+ * Intercepts all interactions, uses localStorage for state.
+ */
+
+const DEMO = {
+  user: {
+    user_id: 'demo_user',
+    provider: 'github',
+    username: 'DemoUser',
+    email: 'demo@craftbridge.io',
+    avatar_url: null,
+  },
+  jobs: [
+    {
+      job_id: 'cb-892a',
+      jar_name: 'better_combat_1.20.1.jar',
+      mc_version: '1.20.1',
+      status: 'done',
+      created_at: Date.now() - 7200000,
+      current_iteration: 3,
+      build_run_ids: ['build-001', 'build-002', 'build-003'],
+      smoke_test_log_ids: ['smoke-001', 'smoke-002'],
+    },
+    {
+      job_id: 'cb-892b',
+      jar_name: 'create_infrastructure.jar',
+      mc_version: '1.20.4',
+      status: 'running',
+      created_at: Date.now() - 18000000,
+      current_iteration: 2,
+      build_run_ids: ['build-004', 'build-005'],
+      smoke_test_log_ids: ['smoke-003'],
+    },
+    {
+      job_id: 'cb-892c',
+      jar_name: 'thaumcraft_lite.jar',
+      mc_version: '1.19.4',
+      status: 'failed',
+      created_at: Date.now() - 86400000,
+      current_iteration: 5,
+      build_run_ids: ['build-006', 'build-007', 'build-008', 'build-009', 'build-010'],
+      smoke_test_log_ids: [],
+    },
+    {
+      job_id: 'cb-892d',
+      jar_name: 'jei_1.21.jar',
+      mc_version: '1.21',
+      status: 'queued',
+      created_at: Date.now() - 3600000,
+      current_iteration: 0,
+      build_run_ids: [],
+      smoke_test_log_ids: [],
+    },
+  ],
+  builds: {
+    'build-001': { iteration: 1, status: 'failed', time: '45s', log: '[ERROR] Missing dependency: bukkit-api\n[ERROR] Compilation failed\n> Task :compileJava FAILED' },
+    'build-002': { iteration: 2, status: 'passed', time: '52s', log: '[INFO] Resolving dependencies...\n[INFO] Compiling 14 source files...\n[INFO] BUILD SUCCESSFUL in 52s' },
+    'build-003': { iteration: 3, status: 'passed', time: '48s', log: '[INFO] Incremental compilation...\n[INFO] Compiling 2 source files...\n[INFO] Running unit tests...\n[INFO] BUILD SUCCESSFUL in 48s' },
+    'build-004': { iteration: 1, status: 'passed', time: '61s', log: '[INFO] Compiling 23 source files...\n[INFO] BUILD SUCCESSFUL in 61s' },
+    'build-005': { iteration: 2, status: 'running', time: '—', log: '[INFO] Compiling 23 source files...\n[INFO] Running tests...' },
+    'build-006': { iteration: 1, status: 'failed', time: '30s', log: '[ERROR] Cannot resolve symbol: ModLoader\n[ERROR] Compilation failed' },
+    'build-007': { iteration: 2, status: 'failed', time: '33s', log: '[ERROR] Missing method: onWorldLoad\n[ERROR] Compilation failed' },
+    'build-008': { iteration: 3, status: 'failed', time: '28s', log: '[ERROR] Incompatible types: EventHandler → Listener\n[ERROR] Compilation failed' },
+    'build-009': { iteration: 4, status: 'failed', time: '35s', log: '[ERROR] Stack overflow in mixin adapter\n[ERROR] Compilation failed' },
+    'build-010': { iteration: 5, status: 'failed', time: '31s', log: '[ERROR] Max iterations reached\n[ERROR] Unable to resolve: ThaumcraftApi → BukkitApi' },
+  },
+  smokeTests: {
+    'smoke-001': { job_id: 'cb-892a', passed: true, log: '[Server] Starting Paper 1.20.1...\n[Server] Loading plugin: BetterCombat\n[Server] Plugin loaded successfully\n[Server] Running /version BetterCombat\n[Server] ✓ Plugin is enabled and responding\n[Server] All smoke tests passed' },
+    'smoke-002': { job_id: 'cb-892a', passed: true, log: '[Server] Starting Paper 1.20.1...\n[Server] Loading plugin: BetterCombat\n[Server] Testing /bettercombat reload\n[Server] ✓ Reload successful\n[Server] Testing event listeners\n[Server] ✓ 12/12 listeners active' },
+    'smoke-003': { job_id: 'cb-892b', passed: false, log: '[Server] Starting Paper 1.20.4...\n[Server] Loading plugin: CreateInfrastructure\n[Server] [WARN] Missing config defaults\n[Server] [ERROR] Plugin threw exception on enable\n[Server] ✗ Smoke test failed' },
+  },
+  conversionReport: `# Conversion Report: better_combat_1.20.1.jar
+
+## Summary
+- **Source**: Fabric 1.20.1 mod (better_combat)
+- **Target**: Paper 1.20.1 plugin
+- **Iterations**: 3 (2 AI fix cycles)
+- **Result**: ✅ Success
+
+## Changes Made
+1. **Mixins → Paper Listeners**: Converted 8 Fabric Mixin handlers to Bukkit EventListeners
+2. **Fabric API → Paper API**: Replaced 14 Fabric API calls with Paper equivalents
+3. **Registry Access**: Mapped Fabric Registry to Bukkit Material/EntityType
+4. **Client-side code**: Stripped 3 client-only classes (render, HUD, keybinds)
+
+## Warnings
+- ⚠️ 2 client-side features removed (HUD overlay, keybind settings)
+- ⚠️ Custom enchantment integration uses placeholder logic
+
+## Resource Pack
+- 12 item models extracted and remapped
+- 4 sound events converted to .ogg format
+- Textures: 16x16 default, no HD variants
+
+## Smoke Test
+- ✅ Plugin loads without errors
+- ✅ All commands register
+- ✅ Event listeners active (12/12)
+`,
+};
+
+// --- State management ---
+function getJobs() { return DEMO.jobs; }
+function getJob(id) { return DEMO.jobs.find(j => j.job_id === id); }
+function getUser() { return DEMO.user; }
+
+// --- Utility ---
+function timeAgo(ts) {
+  const diff = Date.now() - ts;
+  if (diff < 60000) return 'just now';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+  return Math.floor(diff / 86400000) + 'd ago';
+}
+
+function statusBadge(status) {
+  const map = {
+    done: '<span class="badge badge-success"><span class="badge-dot"></span>Completed</span>',
+    running: '<span class="badge badge-running"><span class="badge-dot"></span>Running</span>',
+    failed: '<span class="badge badge-failed"><span class="badge-dot"></span>Failed</span>',
+    queued: '<span class="badge badge-queued"><span class="badge-dot"></span>Queued</span>',
+  };
+  return map[status] || map.queued;
+}
+
+// Make globally available
+window.DEMO = DEMO;
+window.getJobs = getJobs;
+window.getJob = getJob;
+window.getUser = getUser;
+window.timeAgo = timeAgo;
+window.statusBadge = statusBadge;

index.html

@@ -1,19 +1,214 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Minecraft Mod to Plugin Converter</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body {
+  background-color: #020617;
+  color: #f1f5f9;
+}
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col">
+<!-- TopNavBar -->
+<header class="bg-slate-950/80 backdrop-blur-md font-headline text-sm tracking-tight sticky top-0 z-50 border-b border-slate-800 shadow-2xl flex justify-between items-center h-16 px-6 w-full transition-colors duration-200">
+  <div class="flex items-center gap-3">
+    <div class="w-8 h-8 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+      <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+    </div>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <nav class="hidden md:flex items-center gap-6">
+    <a class="text-slate-400 hover:text-slate-200 transition-colors duration-200 no-underline" href="#features">Features</a>
+    <a class="text-slate-400 hover:text-slate-200 transition-colors duration-200 no-underline" href="#how-it-works">How It Works</a>
+    <a class="text-slate-400 hover:text-slate-200 transition-colors duration-200 no-underline" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">GitHub</a>
+  </nav>
+  <button data-sign-in class="flex items-center gap-2 bg-slate-900 border border-slate-700 text-slate-200 px-4 py-2 rounded-lg font-body text-sm hover:bg-slate-800 hover:border-slate-600 transition-colors duration-200 active:scale-95">
+    <span class="material-symbols-outlined text-[18px]">login</span>
+    Sign in with GitHub
+  </button>
+</header>
+<main class="flex-grow">
+  <!-- Hero Section -->
+  <section class="w-full max-w-5xl mx-auto px-6 py-24 reveal flex flex-col items-center text-center mt-8 mb-12 relative overflow-hidden">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-40 -right-40 w-96 h-96 bg-emerald-500/5 rounded-full blur-[100px] pointer-events-none"></div>
+    <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+    <h1 class="font-headline text-4xl sm:text-5xl md:text-6xl font-bold text-slate-100 mb-6 max-w-3xl tracking-tight relative z-10">
+      Convert Any Mod to a Paper Plugin
+    </h1>
+    <p class="font-body text-slate-400 text-base sm:text-lg max-w-2xl mb-10 relative z-10">
+      Upload a Fabric or Forge mod JAR. Get a working Paper plugin, resource pack, and data pack — powered by AI. No java knowledge required.
+    </p>
+    <div class="flex flex-col sm:flex-row gap-4 relative z-10">
+      <button data-start-converting class="flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-headline font-bold px-8 py-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95">
+        <span class="material-symbols-outlined">rocket_launch</span>
+        Start Converting
+      </button>
+      <a href="https://github.com/NanoBotAgent/mod-converter" target="_blank" class="flex items-center justify-center gap-2 bg-slate-900 border border-slate-700 text-slate-200 font-body px-8 py-4 rounded-lg hover:bg-slate-800 hover:border-slate-600 transition-colors no-underline">
+        <span class="material-symbols-outlined">code</span>
+        View on GitHub
+      </a>
+    </div>
+  </section>
+  <!-- Terminal Section -->
+  <section class="w-full max-w-5xl mx-auto px-6 mb-24 reveal">
+    <div class="bg-slate-900/50 border border-slate-800 rounded-2xl overflow-hidden shadow-2xl backdrop-blur-xl relative">
+      <!-- Decorative Glow -->
+      <div class="absolute -top-20 -right-20 w-48 h-48 bg-emerald-500/5 rounded-full blur-[60px] pointer-events-none"></div>
+      <div class="flex items-center gap-2 px-4 py-3 border-b border-slate-800 bg-slate-950/50">
+        <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+        <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+        <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+        <span class="ml-4 font-mono text-xs text-slate-500">conversion_process.log</span>
+      </div>
+      <div class="p-6 font-mono text-sm text-slate-400 bg-slate-950/50 overflow-x-auto relative z-10">
+        <div class="text-slate-500 mb-2">&gt; Uploading better_combat_1.20.1.jar... [Done]</div>
+        <div class="text-emerald-400 mb-2">&gt; Analyzing Mixins (42 found)... [Done]</div>
+        <div class="mb-2">&gt; Mapping Forge Events to Bukkit Events...</div>
+        <div class="text-slate-500 pl-4 mb-1"> - Mapping RenderTickEvent -&gt; None (Client-side)</div>
+        <div class="text-slate-500 pl-4 mb-2"> - Mapping EntityDamageEvent -&gt; EntityDamageByEntityEvent</div>
+        <div class="text-emerald-400 mb-2">&gt; Extracting assets...</div>
+        <div class="text-slate-500 pl-4 mb-2"> - Generated resource_pack.zip (12 models, 4 sounds)</div>
+        <div class="mb-2">&gt; Compiling Paper Plugin...</div>
+        <div class="text-emerald-400 font-bold mt-4">&gt; Success! Plugin ready for download.</div>
+      </div>
+    </div>
+  </section>
+  <!-- Features Section -->
+  <section id="features" class="w-full max-w-5xl mx-auto px-6 py-24 reveal border-t border-slate-800">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8" stagger reveal>
+      <!-- Feature 1 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 sm:p-8 flex flex-col hover:border-slate-700 transition-colors group relative overflow-hidden shadow-2xl">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="w-12 h-12 rounded-lg bg-slate-950/50 border border-slate-800 flex items-center justify-center text-emerald-400 mb-6 relative z-10">
+          <span class="material-symbols-outlined">psychology</span>
+        </div>
+        <h3 class="font-headline text-xl font-bold text-slate-100 mb-4 relative z-10">AI-Powered Conversion</h3>
+        <p class="font-body text-slate-400 text-sm flex-grow relative z-10">
+          Our custom fine-tuned LLM translates Fabric/Forge mixins and events into native Paper API calls with high accuracy.
+        </p>
+      </div>
+      <!-- Feature 2 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 sm:p-8 flex flex-col hover:border-slate-700 transition-colors group relative overflow-hidden shadow-2xl">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="w-12 h-12 rounded-lg bg-slate-950/50 border border-slate-800 flex items-center justify-center text-indigo-400 mb-6 relative z-10">
+          <span class="material-symbols-outlined">category</span>
+        </div>
+        <h3 class="font-headline text-xl font-bold text-slate-100 mb-4 relative z-10">Automatic Resource Packs</h3>
+        <p class="font-body text-slate-400 text-sm flex-grow relative z-10">
+          Automatically extracts textures, models, and sounds from the mod JAR, mapping them seamlessly to custom model data.
+        </p>
+      </div>
+      <!-- Feature 3 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 sm:p-8 flex flex-col hover:border-slate-700 transition-colors group relative overflow-hidden shadow-2xl">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="w-12 h-12 rounded-lg bg-slate-950/50 border border-slate-800 flex items-center justify-center text-emerald-400 mb-6 relative z-10">
+          <span class="material-symbols-outlined">verified</span>
+        </div>
+        <h3 class="font-headline text-xl font-bold text-slate-100 mb-4 relative z-10">Smoke Tested</h3>
+        <p class="font-body text-slate-400 text-sm flex-grow relative z-10">
+          Every generated plugin is instantly spun up in an automated Paper environment to verify load integrity.
+        </p>
+      </div>
+    </div>
+  </section>
+  <!-- How It Works Section -->
+  <section id="how-it-works" class="w-full max-w-5xl mx-auto px-6 py-24 reveal border-t border-slate-800">
+    <h2 class="font-headline text-3xl font-bold text-slate-100 mb-16 text-center tracking-tight">How It Works</h2>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6" stagger reveal>
+      <!-- Step 1 -->
+      <div class="relative flex flex-col">
+        <div class="text-emerald-400 font-label text-sm font-bold mb-4">01</div>
+        <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex-grow shadow-2xl relative overflow-hidden">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-emerald-500/5 rounded-full blur-[40px] pointer-events-none"></div>
+          <h3 class="font-headline text-lg font-bold text-slate-100 mb-2 relative z-10">Upload JAR</h3>
+          <p class="font-body text-sm text-slate-400 relative z-10">Drag and drop your target Fabric or Forge modification.</p>
+        </div>
+      </div>
+      <!-- Step 2 -->
+      <div class="relative flex flex-col">
+        <div class="text-emerald-400 font-label text-sm font-bold mb-4">02</div>
+        <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex-grow shadow-2xl relative overflow-hidden">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-emerald-500/5 rounded-full blur-[40px] pointer-events-none"></div>
+          <h3 class="font-headline text-lg font-bold text-slate-100 mb-2 relative z-10">AI Analyzes</h3>
+          <p class="font-body text-sm text-slate-400 relative z-10">Our engine maps mixins and structures to Spigot/Paper API.</p>
+        </div>
+      </div>
+      <!-- Step 3 -->
+      <div class="relative flex flex-col">
+        <div class="text-emerald-400 font-label text-sm font-bold mb-4">03</div>
+        <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex-grow shadow-2xl relative overflow-hidden">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-emerald-500/5 rounded-full blur-[40px] pointer-events-none"></div>
+          <h3 class="font-headline text-lg font-bold text-slate-100 mb-2 relative z-10">Build &amp; Test</h3>
+          <p class="font-body text-sm text-slate-400 relative z-10">The code is refactored for Paper API and verified in a sandbox.</p>
+        </div>
+      </div>
+      <!-- Step 4 -->
+      <div class="relative flex flex-col">
+        <div class="text-emerald-400 font-label text-sm font-bold mb-4">04</div>
+        <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex-grow shadow-2xl relative overflow-hidden">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-emerald-500/5 rounded-full blur-[40px] pointer-events-none"></div>
+          <h3 class="font-headline text-lg font-bold text-slate-100 mb-2 relative z-10">Download Results</h3>
+          <p class="font-body text-sm text-slate-400 relative z-10">Get your ready-to-deploy plugin and resource pack.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+<!-- Footer -->
+<footer class="bg-slate-950 border-t border-slate-800 w-full py-12 px-6 flex flex-col md:flex-row justify-between items-center gap-4 mt-auto">
+  <div class="flex items-center gap-3">
+    <div class="w-8 h-8 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+      <span class="material-symbols-outlined text-emerald-500 text-[18px]" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+    </div>
+    <span class="text-lg font-black text-emerald-400 font-headline tracking-tight">CraftBridge</span>
+  </div>
+  <div class="text-slate-500 text-xs">&copy; 2025 CraftBridge. Built for modders.</div>
+  <nav class="flex gap-6">
+    <a class="text-slate-500 hover:text-emerald-400 transition-colors text-xs no-underline" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">Documentation</a>
+    <a class="text-slate-500 hover:text-emerald-400 transition-colors text-xs no-underline" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">Privacy Policy</a>
+    <a class="text-slate-500 hover:text-emerald-400 transition-colors text-xs no-underline" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">Terms of Service</a>
+    <a class="text-slate-500 hover:text-emerald-400 transition-colors text-xs no-underline" href="https://github.com/NanoBotAgent/mod-converter/actions" target="_blank">Status</a>
+  </nav>
+</footer>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

job.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Job Detail</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body { background-color: #020617; color: #f1f5f9; }
+@keyframes shimmer { 100% { transform: translateX(100%); } }
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-job').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-slate-400 hover:text-slate-200 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-job" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-job').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-job').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-slate-500 hover:text-slate-300 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]">settings</span>
+      </a>
+    </div>
+  </div>
+</aside>
+</div>
+<!-- Main Content Canvas -->
+<main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen p-4 sm:p-8 flex flex-col gap-8 overflow-y-auto">
+  <div class="w-full max-w-6xl mx-auto flex flex-col gap-8 relative">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-32 -right-32 w-64 h-64 bg-amber-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 relative z-10">
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-3">
+          <h2 class="font-headline text-3xl font-bold text-slate-100 tracking-tight">Job <span class="font-mono text-slate-400" data-job-id>#8A2F4C</span></h2>
+          <div class="flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">
+            <span class="w-2 h-2 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.6)] animate-pulse"></span>
+            <span class="text-amber-400 text-xs font-bold uppercase tracking-wider font-label" data-job-status>Running</span>
+          </div>
+        </div>
+        <div class="flex items-center gap-4 text-sm text-slate-500 font-mono">
+          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">schedule</span> Elapsed: <span class="text-slate-300">04:12</span></span>
+          <span class="w-1 h-1 rounded-full bg-slate-700"></span>
+          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">target</span> Target: <span class="text-indigo-400" data-job-name>core_module.jar</span></span>
+          <span class="w-1 h-1 rounded-full bg-slate-700"></span>
+          <span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-sm">videogame_asset</span> MC: <span class="text-emerald-400" data-job-version>1.20.4</span></span>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <button data-cancel-job class="px-4 py-2 border border-rose-500/30 text-rose-400 hover:bg-rose-500/10 hover:border-rose-500/50 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
+          <span class="material-symbols-outlined text-lg">cancel</span>
+          Cancel Job
+        </button>
+      </div>
+    </div>
+
+    <!-- Progress Steps -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 shadow-2xl relative z-10">
+      <div data-progress-steps class="relative flex justify-between items-center w-full"></div>
+    </div>
+
+    <!-- Current Step Card -->
+    <div class="relative overflow-hidden rounded-2xl border border-amber-500/20 bg-slate-900/50 backdrop-blur-xl p-6 flex flex-col md:flex-row items-center justify-between gap-6 shadow-2xl relative z-10">
+      <div class="absolute -left-20 -top-20 w-40 h-40 bg-amber-500/10 blur-[60px] rounded-full pointer-events-none"></div>
+      <div class="flex items-center gap-5 relative z-10">
+        <div class="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center">
+          <span class="material-symbols-outlined text-amber-400 text-2xl animate-pulse">precision_manufacturing</span>
+        </div>
+        <div>
+          <h3 class="font-headline text-lg text-amber-400 font-semibold mb-1">Building plugin scaffold...</h3>
+          <p class="text-sm text-slate-400 font-body">Generating abstract syntax trees and applying injection hooks.</p>
+        </div>
+      </div>
+      <div class="flex flex-col gap-4 w-full md:w-64 relative z-10">
+        <div class="flex justify-between items-center text-xs font-mono">
+          <span class="text-slate-400 uppercase tracking-wider">Iteration <span data-job-iteration>2</span>/5</span>
+          <span class="text-indigo-300">1.2GB / 4.0GB Mem</span>
+        </div>
+        <div class="h-2 w-full bg-slate-800 rounded-full overflow-hidden">
+          <div class="h-full bg-indigo-500/80 rounded-full w-[30%] relative">
+            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 h-[400px] relative z-10">
+      <!-- Left - Build Iterations -->
+      <div class="lg:col-span-5 flex flex-col gap-6 h-full">
+        <div class="flex-1 bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl overflow-hidden flex flex-col shadow-2xl">
+          <div class="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/50">
+            <h4 class="font-headline font-semibold text-slate-200 text-sm">Build Iterations</h4>
+            <span class="material-symbols-outlined text-slate-500 text-sm">history</span>
+          </div>
+          <div class="flex-1 overflow-y-auto p-2">
+            <table class="w-full text-left text-sm">
+              <tbody data-build-table>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <!-- Smoke Tests -->
+        <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl">
+          <h4 class="font-headline font-semibold text-slate-200 text-sm mb-4">Smoke Tests</h4>
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
+                <span class="text-sm text-slate-300 font-medium">Compatibility Check</span>
+              </div>
+              <span class="font-mono text-xs text-emerald-400/80">Pass</span>
+            </div>
+            <div class="flex items-center justify-between opacity-50">
+              <div class="flex items-center gap-3">
+                <span class="material-symbols-outlined text-slate-500 text-lg">radio_button_unchecked</span>
+                <span class="text-sm text-slate-400 font-medium">Bytecode Validation</span>
+              </div>
+              <span class="font-mono text-xs text-slate-600">Wait</span>
+            </div>
+            <div class="flex items-center justify-between opacity-50">
+              <div class="flex items-center gap-3">
+                <span class="material-symbols-outlined text-slate-500 text-lg">radio_button_unchecked</span>
+                <span class="text-sm text-slate-400 font-medium">Runtime Entry Point</span>
+              </div>
+              <span class="font-mono text-xs text-slate-600">Wait</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Right - Terminal -->
+      <div class="lg:col-span-7 bg-slate-950/80 border border-slate-800 rounded-2xl flex flex-col overflow-hidden shadow-2xl relative group">
+        <div class="flex justify-between items-center px-4 py-2 border-b border-slate-800 bg-slate-950/50">
+          <div class="flex items-center gap-2">
+            <span class="material-symbols-outlined text-slate-500 text-sm">terminal</span>
+            <span class="font-mono text-xs text-slate-500 tracking-wider">Live Logs</span>
+          </div>
+          <div class="flex gap-1.5">
+            <div class="w-2.5 h-2.5 rounded-full bg-slate-700 hover:bg-rose-500 transition-colors cursor-pointer"></div>
+            <div class="w-2.5 h-2.5 rounded-full bg-slate-700 hover:bg-amber-500 transition-colors cursor-pointer"></div>
+            <div class="w-2.5 h-2.5 rounded-full bg-slate-700 hover:bg-emerald-500 transition-colors cursor-pointer"></div>
+          </div>
+        </div>
+        <div data-terminal class="flex-1 p-4 font-mono text-sm overflow-y-auto leading-relaxed tracking-tight">
+          <div class="text-slate-500 mb-2">System booted at 14:02:44 UTC. Connecting to socket...</div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:02</span>
+            <span class="text-indigo-400 font-medium w-16 shrink-0">[info]</span>
+            <span class="text-slate-300">Initializing build pipeline...</span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:02</span>
+            <span class="text-indigo-400 font-medium w-16 shrink-0">[info]</span>
+            <span class="text-slate-300">Target selected: <span class="text-slate-100">target.jar</span></span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:03</span>
+            <span class="text-emerald-400 font-medium w-16 shrink-0">[success]</span>
+            <span class="text-emerald-300/90">Analysis complete. Discovered 42 injection points.</span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:03</span>
+            <span class="text-indigo-400 font-medium w-16 shrink-0">[info]</span>
+            <span class="text-slate-300">Uploading bytecode definitions...</span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:03</span>
+            <span class="text-emerald-400 font-medium w-16 shrink-0">[success]</span>
+            <span class="text-emerald-300/90">Upload complete (142ms)</span>
+          </div>
+          <div class="my-3 border-t border-slate-800/50 pt-2 text-slate-600 text-xs uppercase tracking-widest text-center">--- Iteration 1 ---</div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded bg-amber-500/5">
+            <span class="text-slate-600 select-none">14:04</span>
+            <span class="text-amber-400 font-medium w-16 shrink-0">[warn]</span>
+            <span class="text-amber-200/90">Hook collision detected at 0x4F9A. Attempting resolution.</span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:04</span>
+            <span class="text-emerald-400 font-medium w-16 shrink-0">[success]</span>
+            <span class="text-emerald-300/90">Auto-resolved collision.</span>
+          </div>
+          <div class="my-3 border-t border-slate-800/50 pt-2 text-amber-500/50 text-xs uppercase tracking-widest text-center">--- Iteration 2 ---</div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:05</span>
+            <span class="text-indigo-400 font-medium w-16 shrink-0">[info]</span>
+            <span class="text-slate-300">AI generating scaffolding...</span>
+          </div>
+          <div class="flex gap-3 mt-1 hover:bg-slate-900/30 px-1 -mx-1 rounded">
+            <span class="text-slate-600 select-none">14:06</span>
+            <span class="text-indigo-400 font-medium w-16 shrink-0">[info]</span>
+            <span class="text-slate-300">Applying abstract syntax tree modifications...</span>
+          </div>
+          <div class="flex gap-3 mt-1 px-1 -mx-1 rounded items-center">
+            <span class="text-slate-600 select-none">14:06</span>
+            <span class="text-amber-400 font-medium w-16 shrink-0 animate-pulse">Building</span>
+            <span class="text-slate-100 flex items-center gap-1">AST nodes<span class="flex gap-0.5"><span class="w-1 h-1 bg-slate-400 rounded-full animate-bounce"></span><span class="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></span><span class="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></span></span></span>
+          </div>
+          <!-- Auto-scroll indicator -->
+          <div class="sticky bottom-2 left-1/2 -translate-x-1/2 mt-8 w-max px-3 py-1 bg-slate-800/80 backdrop-blur border border-slate-700 rounded-full text-[10px] text-slate-400 uppercase tracking-widest flex items-center gap-2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> Tail Mode Active
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

library.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Library</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body { background-color: #020617; color: #f1f5f9; }
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-library').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-slate-400 hover:text-slate-200 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-library" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-library').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-library').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px]">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-slate-500 hover:text-slate-300 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]">settings</span>
+      </a>
+    </div>
+  </div>
+</aside><main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen p-4 sm:p-8 flex flex-col">
+  <div class="w-full max-w-5xl mx-auto flex flex-col gap-8 relative">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+
+    <!-- Header -->
+    <div class="flex flex-col gap-2 relative z-10">
+      <h2 class="font-headline text-3xl sm:text-4xl font-bold text-slate-100 tracking-tight">Library</h2>
+      <p class="font-body text-slate-400 text-sm sm:text-base">Your converted plugins, resource packs, and data packs.</p>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="flex flex-col sm:flex-row gap-3 relative z-10">
+      <div class="relative flex-1">
+        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-[20px]">search</span>
+        <input type="text" placeholder="Search your library..." class="w-full bg-slate-950/50 border border-slate-800 rounded-lg py-2.5 pl-10 pr-4 text-sm text-slate-300 placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all font-body"/>
+      </div>
+      <div class="flex gap-2">
+        <button class="px-4 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-lg text-sm font-label font-semibold transition-colors">All</button>
+        <button class="px-4 py-2.5 bg-slate-950/50 border border-slate-800 text-slate-400 rounded-lg text-sm font-label font-medium hover:text-slate-200 hover:border-slate-700 transition-colors">Plugins</button>
+        <button class="px-4 py-2.5 bg-slate-950/50 border border-slate-800 text-slate-400 rounded-lg text-sm font-label font-medium hover:text-slate-200 hover:border-slate-700 transition-colors">Resource Packs</button>
+        <button class="px-4 py-2.5 bg-slate-950/50 border border-slate-800 text-slate-400 rounded-lg text-sm font-label font-medium hover:text-slate-200 hover:border-slate-700 transition-colors">Data Packs</button>
+      </div>
+    </div>
+
+    <!-- Library Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 relative z-10" id="library-grid">
+      <!-- Card 1 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-emerald-500/10 rounded-lg text-emerald-400">
+            <span class="material-symbols-outlined text-[20px]">extension</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">1.2 MB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">better_combat_1.20.1.jar</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.20.1 • Plugin</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>Complete</span>
+          <span class="text-[10px] text-slate-600">2h ago</span>
+        </div>
+      </div>
+      <!-- Card 2 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-indigo-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-indigo-500/10 rounded-lg text-indigo-400">
+            <span class="material-symbols-outlined text-[20px]">inventory_2</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">4.8 MB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">better_combat_resourcepack.zip</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.20.1 • Resource Pack</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>Complete</span>
+          <span class="text-[10px] text-slate-600">2h ago</span>
+        </div>
+      </div>
+      <!-- Card 3 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-amber-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-amber-500/10 rounded-lg text-amber-400">
+            <span class="material-symbols-outlined text-[20px]">folder_zip</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">124 KB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">better_combat_datapack.zip</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.20.1 • Data Pack</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>Complete</span>
+          <span class="text-[10px] text-slate-600">2h ago</span>
+        </div>
+      </div>
+      <!-- Card 4 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-emerald-500/10 rounded-lg text-emerald-400">
+            <span class="material-symbols-outlined text-[20px]">extension</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">890 KB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">create_infrastructure.jar</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.20.4 • Plugin</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>Building</span>
+          <span class="text-[10px] text-slate-600">5h ago</span>
+        </div>
+      </div>
+      <!-- Card 5 -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-rose-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-rose-500/10 rounded-lg text-rose-400">
+            <span class="material-symbols-outlined text-[20px]">extension</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">1.5 MB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">thaumcraft_lite.jar</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.19.4 • Plugin</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-rose-500 rounded-full"></span>Failed</span>
+          <span class="text-[10px] text-slate-600">1d ago</span>
+        </div>
+      </div>
+      <!-- Card 6 - Queued -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-slate-700 transition-colors group relative overflow-hidden opacity-60">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-slate-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex items-start justify-between mb-3 relative z-10">
+          <div class="p-2 bg-slate-800 rounded-lg text-slate-500">
+            <span class="material-symbols-outlined text-[20px]">extension</span>
+          </div>
+          <span class="text-[10px] font-mono text-slate-600">2.1 MB</span>
+        </div>
+        <h3 class="font-headline text-sm font-bold text-slate-100 mb-1 relative z-10">jei_1.21.jar</h3>
+        <p class="text-xs text-slate-500 font-mono mb-3 relative z-10">MC 1.21 • Plugin</p>
+        <div class="flex items-center gap-2 relative z-10">
+          <span class="flex items-center gap-1 text-[10px] text-slate-400 bg-slate-800 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 bg-slate-500 rounded-full"></span>Queued</span>
+          <span class="text-[10px] text-slate-600">1h ago</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

results.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Conversion Results</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body { background-color: #020617; color: #f1f5f9; }
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-results').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-slate-400 hover:text-slate-200 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-results" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-results').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-results').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-slate-500 hover:text-slate-300 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]">settings</span>
+      </a>
+    </div>
+  </div>
+</aside>
+</div>
+<!-- Main Content Canvas -->
+<main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen p-4 sm:p-8 flex flex-col items-center">
+  <div class="w-full max-w-4xl mx-auto flex flex-col gap-8 relative">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+
+    <!-- Success Header -->
+    <div class="flex flex-col items-center justify-center text-center mb-4 relative z-10">
+      <div class="w-20 h-20 rounded-full bg-emerald-500/10 flex items-center justify-center mb-6 border border-emerald-500/20">
+        <span class="material-symbols-outlined text-5xl text-emerald-500" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+      </div>
+      <h1 class="font-headline text-3xl sm:text-4xl font-bold text-slate-100 mb-3">Conversion Complete!</h1>
+      <p class="text-slate-400 max-w-lg">Successfully transformed <span data-result-name class="text-slate-200 font-medium">better_combat_1.20.1.jar</span> for MC <span data-result-version class="text-emerald-400 font-mono">1.20.1</span>.</p>
+    </div>
+
+    <!-- Download Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10" stagger reveal>
+      <!-- Plugin -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex flex-col hover:border-emerald-500/30 transition-colors group shadow-2xl relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-emerald-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-4 relative z-10">
+          <div class="p-3 bg-emerald-500/10 rounded-lg text-emerald-400 group-hover:bg-emerald-500/20 transition-colors">
+            <span class="material-symbols-outlined">extension</span>
+          </div>
+          <span class="text-xs font-mono text-slate-500">1.2 MB</span>
+        </div>
+        <h3 class="font-headline text-lg font-semibold text-slate-100 mb-1 relative z-10">Paper Plugin (.jar)</h3>
+        <p class="text-sm text-slate-400 mb-6 flex-grow relative z-10">Core logic, event handlers, and transpiled server code.</p>
+        <button data-download-plugin class="w-full py-2.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-medium rounded-lg transition-colors flex items-center justify-center gap-2 font-label text-sm relative z-10 active:scale-95">
+          <span class="material-symbols-outlined text-sm">download</span>
+          Download
+        </button>
+      </div>
+      <!-- Resource Pack -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex flex-col hover:border-slate-700 transition-colors group shadow-2xl relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-indigo-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-4 relative z-10">
+          <div class="p-3 bg-indigo-500/10 rounded-lg text-indigo-400 group-hover:bg-indigo-500/20 transition-colors">
+            <span class="material-symbols-outlined">inventory_2</span>
+          </div>
+          <span class="text-xs font-mono text-slate-500">4.8 MB</span>
+        </div>
+        <h3 class="font-headline text-lg font-semibold text-slate-100 mb-1 relative z-10">Resource Pack (.zip)</h3>
+        <p class="text-sm text-slate-400 mb-6 flex-grow relative z-10">Textures, models, and client-side language files.</p>
+        <button data-download-rp class="w-full py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 hover:border-slate-600 text-slate-200 font-medium rounded-lg transition-colors flex items-center justify-center gap-2 font-label text-sm relative z-10 active:scale-95">
+          <span class="material-symbols-outlined text-sm">download</span>
+          Download
+        </button>
+      </div>
+      <!-- Data Pack -->
+      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-6 flex flex-col hover:border-slate-700 transition-colors group shadow-2xl relative overflow-hidden">
+        <div class="absolute -top-16 -right-16 w-32 h-32 bg-amber-500/5 rounded-full blur-[50px] pointer-events-none"></div>
+        <div class="flex justify-between items-start mb-4 relative z-10">
+          <div class="p-3 bg-amber-500/10 rounded-lg text-amber-400 group-hover:bg-amber-500/20 transition-colors">
+            <span class="material-symbols-outlined">folder_zip</span>
+          </div>
+          <span class="text-xs font-mono text-slate-500">124 KB</span>
+        </div>
+        <h3 class="font-headline text-lg font-semibold text-slate-100 mb-1 relative z-10">Data Pack (.zip)</h3>
+        <p class="text-sm text-slate-400 mb-6 flex-grow relative z-10">Loot tables, recipes, and advancement generation.</p>
+        <button data-download-dp class="w-full py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 hover:border-slate-600 text-slate-200 font-medium rounded-lg transition-colors flex items-center justify-center gap-2 font-label text-sm relative z-10 active:scale-95">
+          <span class="material-symbols-outlined text-sm">download</span>
+          Download
+        </button>
+      </div>
+    </div>
+
+    <!-- Report Section -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl overflow-hidden shadow-2xl relative z-10">
+      <div class="px-6 py-4 border-b border-slate-800 flex justify-between items-center bg-slate-950/50">
+        <h3 class="font-headline text-lg font-semibold text-slate-100 flex items-center gap-2">
+          <span class="material-symbols-outlined text-slate-500 text-sm">article</span>
+          Conversion Report
+        </h3>
+        <button data-copy-report class="text-sm flex items-center gap-1.5 text-slate-400 hover:text-emerald-400 transition-colors font-label">
+          <span class="material-symbols-outlined text-[16px]">content_copy</span>
+          Copy as Markdown
+        </button>
+      </div>
+      <div class="p-6" data-conversion-report>
+        <ul class="space-y-3 font-mono text-sm text-slate-300">
+          <li class="flex items-start gap-3">
+            <span class="material-symbols-outlined text-emerald-500 text-[16px] mt-0.5">check</span>
+            <span>Transpiled 42 Fabric Mixins to Spigot Events.</span>
+          </li>
+          <li class="flex items-start gap-3">
+            <span class="material-symbols-outlined text-emerald-500 text-[16px] mt-0.5">check</span>
+            <span>Generated 12 custom model data mappings for items.</span>
+          </li>
+          <li class="flex items-start gap-3">
+            <span class="material-symbols-outlined text-emerald-500 text-[16px] mt-0.5">check</span>
+            <span>Converted 156 BlockStates to block data strings.</span>
+          </li>
+          <li class="flex items-start gap-3">
+            <span class="material-symbols-outlined text-amber-500 text-[16px] mt-0.5">warning</span>
+            <span class="text-amber-200/70">Warning: 3 complex NBT parsing methods require manual review (see lines 402-450 in Core.java).</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Metadata & Action -->
+    <div class="flex flex-col items-center relative z-10">
+      <div class="flex gap-6 text-xs text-slate-500 font-mono mb-8 justify-center">
+        <span>Job ID: <span data-job-id class="text-slate-400">#CB-892A</span></span>
+        <span class="hidden sm:inline">•</span>
+        <span>Elapsed: 4m 12s</span>
+        <span class="hidden sm:inline">•</span>
+        <span>Model: CraftBridge-v1</span>
+      </div>
+      <button data-convert-another class="px-8 py-4 bg-slate-900 border-2 border-slate-700 hover:border-emerald-500 hover:text-emerald-400 text-slate-200 font-headline font-semibold rounded-lg transition-colors flex items-center gap-2 text-lg active:scale-95">
+        <span class="material-symbols-outlined">refresh</span>
+        Convert Another Mod
+      </button>
+    </div>
+  </div>
+</main>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

settings.html

@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Settings</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+tailwind.config = {
+darkMode: "class",
+theme: {
+  extend: {
+    "colors": {},
+    "borderRadius": {
+      "DEFAULT": "0.25rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "full": "9999px"
+    },
+    "spacing": {},
+    "fontFamily": {
+      "headline": ["Space Grotesk"],
+      "display": ["Space Grotesk"],
+      "body": ["Manrope"],
+      "label": ["Plus Jakarta Sans"]
+    },
+    "fontSize": {}
+  }
+}
+}
+</script>
+<style>
+body { background-color: #020617; color: #f1f5f9; }
+</style>
+
+<link rel="stylesheet" href="animations.css"/>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-settings').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-emerald-400 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-settings" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-settings').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-settings').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-emerald-400 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">settings</span>
+      </a>
+    </div>
+  </div>
+</aside>
+<main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen p-4 sm:p-8 flex flex-col">
+  <div class="w-full max-w-5xl mx-auto flex flex-col gap-8 relative">
+    <!-- Decorative Glow -->
+    <div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div>
+
+    <!-- Header -->
+    <div class="flex flex-col gap-2 relative z-10">
+      <h2 class="font-headline text-3xl sm:text-4xl font-bold text-slate-100 tracking-tight">Settings</h2>
+      <p class="font-body text-slate-400 text-sm sm:text-base">Manage your account and conversion preferences.</p>
+    </div>
+
+    <!-- Profile Section -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl p-6 sm:p-8 relative z-10 overflow-hidden">
+      <div class="absolute -top-20 -right-20 w-48 h-48 bg-emerald-500/5 rounded-full blur-[60px] pointer-events-none"></div>
+      <h3 class="font-headline text-lg font-bold text-slate-100 mb-6 relative z-10 flex items-center gap-2">
+        <span class="material-symbols-outlined text-slate-400">person</span>
+        Profile
+      </h3>
+      <div class="flex items-center gap-6 mb-6 relative z-10">
+        <div class="w-16 h-16 rounded-full bg-emerald-500/20 border-2 border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-2xl">D</div>
+        <div>
+          <p class="font-headline font-bold text-slate-100 text-lg">Dev User</p>
+          <p class="text-sm text-slate-400">demo@craftbridge.io</p>
+          <p class="text-xs text-slate-500 mt-1">Signed in with GitHub</p>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
+        <div>
+          <label class="font-label text-xs font-semibold text-slate-500 mb-1 block">Username</label>
+          <input type="text" value="DevUser" class="w-full bg-slate-950/50 border border-slate-800 rounded-lg py-2.5 px-4 text-sm text-slate-300 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all font-body"/>
+        </div>
+        <div>
+          <label class="font-label text-xs font-semibold text-slate-500 mb-1 block">Email</label>
+          <input type="email" value="demo@craftbridge.io" class="w-full bg-slate-950/50 border border-slate-800 rounded-lg py-2.5 px-4 text-sm text-slate-300 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all font-body"/>
+        </div>
+      </div>
+    </div>
+
+    <!-- API Keys Section -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl p-6 sm:p-8 relative z-10 overflow-hidden">
+      <div class="absolute -top-20 -right-20 w-48 h-48 bg-indigo-500/5 rounded-full blur-[60px] pointer-events-none"></div>
+      <h3 class="font-headline text-lg font-bold text-slate-100 mb-6 relative z-10 flex items-center gap-2">
+        <span class="material-symbols-outlined text-slate-400">key</span>
+        API Keys
+      </h3>
+      <div class="flex flex-col gap-4 relative z-10">
+        <div class="flex items-center justify-between bg-slate-950/50 border border-slate-800 rounded-lg p-4">
+          <div>
+            <p class="text-sm text-slate-200 font-medium">CraftBridge API Key</p>
+            <p class="text-xs text-slate-500 font-mono mt-1">cb_••••••••••••k4m7</p>
+          </div>
+          <button class="px-3 py-1.5 bg-slate-800 border border-slate-700 text-slate-300 rounded-lg text-xs font-label hover:bg-slate-700 hover:border-slate-600 transition-colors">Regenerate</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Conversion Preferences -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl p-6 sm:p-8 relative z-10 overflow-hidden">
+      <div class="absolute -top-20 -right-20 w-48 h-48 bg-amber-500/5 rounded-full blur-[60px] pointer-events-none"></div>
+      <h3 class="font-headline text-lg font-bold text-slate-100 mb-6 relative z-10 flex items-center gap-2">
+        <span class="material-symbols-outlined text-slate-400">tune</span>
+        Conversion Preferences
+      </h3>
+      <div class="flex flex-col gap-5 relative z-10">
+        <!-- Auto smoke test -->
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-slate-200 font-medium">Auto smoke test</p>
+            <p class="text-xs text-slate-500">Run an automated server test after each build iteration — helps the AI learn from errors and produce better output on the next attempt.</p>
+          </div>
+          <button class="w-11 h-6 bg-emerald-500 rounded-full relative transition-colors flex-shrink-0" onclick="this.classList.toggle('bg-emerald-500'); this.classList.toggle('bg-slate-700'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0.5');">
+            <span class="absolute top-0.5 left-0 w-5 h-5 bg-white rounded-full shadow translate-x-5 transition-transform"></span>
+          </button>
+        </div>
+        <div class="border-t border-slate-800"></div>
+        <!-- Max build iterations -->
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-sm text-slate-200 font-medium">Max build iterations</p>
+            <p class="text-xs text-slate-500">Maximum AI fix cycles before marking as failed. Use ∞ for unlimited.</p>
+          </div>
+          <div class="mc-selector flex-shrink-0 w-32" data-iter-selector data-default-value="5">
+            <button type="button" class="mc-selector-trigger has-value" data-mc-trigger>
+              <span class="mc-selector-value" data-mc-value>5</span>
+              <span class="material-symbols-outlined mc-selector-arrow" data-mc-arrow>expand_more</span>
+            </button>
+            <div class="mc-selector-panel" data-mc-panel>
+              <div class="mc-selector-list" data-mc-list>
+                <div class="mc-selector-group">
+                  <button type="button" class="mc-selector-option" data-value="1" data-display="1"><span class="mc-version-name">1</span></button>
+                  <button type="button" class="mc-selector-option" data-value="3" data-display="3"><span class="mc-version-name">3</span></button>
+                  <button type="button" class="mc-selector-option selected" data-value="5" data-display="5"><span class="mc-version-name">5</span></button>
+                  <button type="button" class="mc-selector-option" data-value="10" data-display="10"><span class="mc-version-name">10</span></button>
+                  <button type="button" class="mc-selector-option" data-value="15" data-display="15"><span class="mc-version-name">15</span></button>
+                  <button type="button" class="mc-selector-option" data-value="20" data-display="20"><span class="mc-version-name">20</span></button>
+                  <button type="button" class="mc-selector-option" data-value="0" data-display="∞"><span class="mc-version-name">∞  Unlimited</span></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-slate-800"></div>
+        <!-- Default target version -->
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-sm text-slate-200 font-medium">Default target version</p>
+            <p class="text-xs text-slate-500">Pre-selected MC version for new conversions.</p>
+          </div>
+          <div class="mc-selector flex-shrink-0 w-40" data-mc-selector data-default-value="1.21.4">
+            <button type="button" class="mc-selector-trigger has-value" data-mc-trigger>
+              <span class="mc-selector-value" data-mc-value>1.21.4</span>
+              <span class="material-symbols-outlined mc-selector-arrow" data-mc-arrow>expand_more</span>
+            </button>
+            <div class="mc-selector-panel" data-mc-panel>
+              <div class="mc-selector-search">
+                <span class="material-symbols-outlined">search</span>
+                <input type="text" placeholder="Search versions..." data-mc-search autocomplete="off"/>
+              </div>
+              <div class="mc-selector-list" data-mc-list>
+                <div class="mc-selector-group">
+                  <div class="mc-selector-group-label">Latest</div>
+                  <button type="button" class="mc-selector-option" data-value="26.1.2"><span class="mc-version-name">26.1.2</span></button>
+                  <button type="button" class="mc-selector-option" data-value="26.1.1"><span class="mc-version-name">26.1.1</span></button>
+                  <button type="button" class="mc-selector-option" data-value="26.1"><span class="mc-version-name">26.1</span></button>
+                </div>
+                <div class="mc-selector-group">
+                  <div class="mc-selector-group-label">1.21.x</div>
+                  <button type="button" class="mc-selector-option" data-value="1.21.11"><span class="mc-version-name">1.21.11</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.10"><span class="mc-version-name">1.21.10</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.9"><span class="mc-version-name">1.21.9</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.8"><span class="mc-version-name">1.21.8</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.7"><span class="mc-version-name">1.21.7</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.6"><span class="mc-version-name">1.21.6</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.5"><span class="mc-version-name">1.21.5</span></button>
+                  <button type="button" class="mc-selector-option selected" data-value="1.21.4"><span class="mc-version-name">1.21.4</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.3"><span class="mc-version-name">1.21.3</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.21.1"><span class="mc-version-name">1.21.1</span></button>
+                </div>
+                <div class="mc-selector-group">
+                  <div class="mc-selector-group-label">1.20.x</div>
+                  <button type="button" class="mc-selector-option" data-value="1.20.6"><span class="mc-version-name">1.20.6</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.20.4"><span class="mc-version-name">1.20.4</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.20.2"><span class="mc-version-name">1.20.2</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.20.1"><span class="mc-version-name">1.20.1</span></button>
+                </div>
+                <div class="mc-selector-group">
+                  <div class="mc-selector-group-label">Legacy</div>
+                  <button type="button" class="mc-selector-option" data-value="1.19.4"><span class="mc-version-name">1.19.4</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.19.2"><span class="mc-version-name">1.19.2</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.18.2"><span class="mc-version-name">1.18.2</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.17.1"><span class="mc-version-name">1.17.1</span></button>
+                  <button type="button" class="mc-selector-option" data-value="1.16.5"><span class="mc-version-name">1.16.5</span></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-slate-800"></div>
+        <!-- Email notifications -->
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-slate-200 font-medium">Email notifications</p>
+            <p class="text-xs text-slate-500">Get notified when conversions complete.</p>
+          </div>
+          <button class="w-11 h-6 bg-slate-700 rounded-full relative transition-colors flex-shrink-0" onclick="this.classList.toggle('bg-emerald-500'); this.classList.toggle('bg-slate-700'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0.5');">
+            <span class="absolute top-0.5 left-0 w-5 h-5 bg-white rounded-full shadow translate-x-0.5 transition-transform"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Danger Zone -->
+    <div class="bg-slate-900/50 backdrop-blur-xl border border-rose-500/20 rounded-2xl shadow-2xl p-6 sm:p-8 relative z-10 overflow-hidden">
+      <h3 class="font-headline text-lg font-bold text-rose-400 mb-4 relative z-10 flex items-center gap-2">
+        <span class="material-symbols-outlined text-rose-400">warning</span>
+        Danger Zone
+      </h3>
+      <div class="flex items-center justify-between relative z-10">
+        <div>
+          <p class="text-sm text-slate-200 font-medium">Delete all conversion history</p>
+          <p class="text-xs text-slate-500">This will permanently remove all your jobs and generated files.</p>
+        </div>
+        <button class="px-4 py-2 bg-rose-500/10 border border-rose-500/20 text-rose-400 rounded-lg text-sm font-label font-semibold hover:bg-rose-500/20 hover:border-rose-500/40 transition-colors">Delete All</button>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script src="demo-data.js"></script>
+<script src="app.js"></script>
+
+</body></html>

upload.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>CraftBridge - Minecraft Mod to Plugin Converter</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@500;600;700&amp;family=Space+Grotesk:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
+
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {},
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {},
+                    "fontFamily": {
+                        "headline": ["Space Grotesk"],
+                        "display": ["Space Grotesk"],
+                        "body": ["Manrope"],
+                        "label": ["Plus Jakarta Sans"]
+                    },
+                    "fontSize": {}
+                },
+            },
+        }
+    </script>
+<style>
+        body {
+            background-color: #020617; /* slate-950 */
+            color: #f1f5f9; /* slate-100 */
+        }
+    </style>
+
+    <link rel="stylesheet" href="animations.css"/>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+
+</head>
+<body class="font-body antialiased selection:bg-emerald-500/30 selection:text-emerald-200 min-h-screen flex flex-col md:flex-row">
+<!-- TopNavBar (Mobile Only) -->
+<nav class="md:hidden bg-slate-950/80 backdrop-blur-md font-headline font-bold text-slate-100 fixed top-0 w-full z-50 border-b border-slate-800 shadow-2xl flex items-center justify-between px-6 h-16 transition-colors duration-200">
+  <div class="flex items-center gap-4">
+    <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-upload').classList.toggle('hidden')">
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+    <a href="index.html" class="text-xl font-black tracking-tighter text-emerald-400 no-underline">CraftBridge</a>
+  </div>
+  <a href="settings.html" class="text-slate-400 hover:text-slate-200 cursor-pointer active:scale-95 transition-transform">
+    <span class="material-symbols-outlined">settings</span>
+  </a>
+</nav>
+<!-- Mobile Sidebar Overlay -->
+<div id="mobile-sidebar-upload" class="hidden fixed inset-0 z-50 md:hidden">
+  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-upload').classList.add('hidden')"></div>
+  <aside class="absolute left-0 top-0 h-full w-64 bg-slate-950 border-r border-slate-800 flex flex-col py-4">
+    <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-black tracking-tighter text-emerald-400">CraftBridge</span>
+        <button class="text-slate-400 hover:text-slate-200" onclick="document.getElementById('mobile-sidebar-upload').classList.add('hidden')">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+    </div>
+    <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="dashboard.html">
+        <span class="material-symbols-outlined text-[22px]">dashboard</span>
+        Dashboard
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold group" href="upload.html">
+        <span class="material-symbols-outlined text-[22px]" style="font-variation-settings: 'FILL' 1;">upload_file</span>
+        Uploads
+      </a>
+      <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all group" href="library.html">
+        <span class="material-symbols-outlined text-[22px]">folder_open</span>
+        Library
+      </a>
+    </div>
+  </aside>
+</div>
+<!-- SideNavBar (Desktop Only) -->
+<aside class="hidden md:flex bg-slate-950 text-emerald-400 font-body font-medium text-sm fixed left-0 top-0 h-full w-64 pt-16 border-r border-slate-800 flex flex-col h-full py-4 z-40">
+  <!-- Header -->
+  <div class="px-6 pb-6 border-b border-slate-800 mb-6 flex flex-col gap-4 mt-2">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+        <span class="material-symbols-outlined text-emerald-500" style="font-variation-settings: 'FILL' 1;">build_circle</span>
+      </div>
+      <div>
+        <h1 class="font-headline text-lg font-bold text-emerald-500 tracking-tight">Mod Engine</h1>
+        <p class="text-xs text-slate-500">Developer Tools</p>
+      </div>
+    </div>
+    <button class="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold py-2.5 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] active:scale-95" onclick="window.location.href='upload.html'">
+      <span class="material-symbols-outlined text-[20px]">add</span>
+      New Project
+    </button>
+  </div>
+  <!-- Main Navigation -->
+  <div class="flex-1 px-3 space-y-1 overflow-y-auto">
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="dashboard.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">dashboard</span>
+      Dashboard
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold hover:translate-x-1 duration-200 group" href="upload.html">
+      <span class="material-symbols-outlined text-[22px]" style="font-variation-settings: 'FILL' 1;">upload_file</span>
+      Uploads
+    </a>
+    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all hover:translate-x-1 duration-200 group" href="library.html">
+      <span class="material-symbols-outlined text-[22px] group-hover:text-slate-300 transition-colors">folder_open</span>
+      Library
+    </a>
+  </div>
+  <!-- Footer Navigation -->
+  <div class="px-3 pt-6 pb-2 border-t border-slate-800 mt-auto space-y-1">
+    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-900 transition-all text-xs hover:translate-x-1 duration-200 group" href="https://github.com/NanoBotAgent/mod-converter" target="_blank">
+      <span class="material-symbols-outlined text-[18px] group-hover:text-slate-300 transition-colors">menu_book</span>
+      Documentation
+    </a>
+    <div class="mt-4 flex items-center justify-between px-3 py-2">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-sm">D</div>
+        <span class="text-sm text-slate-400 font-medium truncate max-w-[100px]">Dev User</span>
+      </div>
+      <a href="settings.html" class="text-slate-500 hover:text-slate-300 cursor-pointer transition-colors no-underline">
+        <span class="material-symbols-outlined text-[20px]">settings</span>
+      </a>
+    </div>
+  </div>
+</aside>
+<!-- Main Content Canvas -->
+<main class="flex-1 w-full md:ml-64 pt-16 md:pt-0 min-h-screen bg-[#020617] flex items-center justify-center p-4 sm:p-8">
+<!-- Center Card Container -->
+<div class="w-full max-w-[640px] bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl p-6 sm:p-10 flex flex-col gap-8 relative overflow-hidden">
+<!-- Decorative Glow -->
+<div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/10 rounded-full blur-[80px] pointer-events-none"></div>
+<!-- Header Section -->
+<div class="flex flex-col gap-2">
+<h2 class="font-headline text-3xl sm:text-4xl font-bold text-slate-100 tracking-tight">Convert a Mod</h2>
+<p class="font-body text-slate-400 text-sm sm:text-base">Upload your Fabric or Forge .jar to begin the AI conversion.</p>
+</div>
+<!-- Dropzone Area -->
+<div data-dropzone class="w-full h-64 border-2 border-dashed border-slate-700 rounded-xl bg-slate-950/50 flex flex-col items-center justify-center gap-4 hover:border-emerald-500/50 hover:bg-emerald-950/10 transition-all duration-300 group cursor-pointer relative overflow-hidden">
+<div class="w-16 h-16 rounded-full bg-slate-800/80 flex items-center justify-center group-hover:scale-110 group-hover:bg-emerald-900/50 transition-all duration-300 shadow-lg">
+<span class="material-symbols-outlined text-3xl text-slate-400 group-hover:text-emerald-400 transition-colors">cloud_upload</span>
+</div>
+<div class="text-center px-4">
+    <p class="font-label font-medium text-slate-300 mb-1" data-dropzone-label>Drag and drop your .jar file here or browse</p>
+<p class="text-xs text-slate-500">Supports .jar up to 100MB</p>
+</div>
+<button class="mt-2 px-5 py-2 rounded-lg bg-slate-800 border border-slate-700 text-slate-200 font-label text-sm hover:bg-slate-700 hover:border-slate-600 transition-colors active:scale-95">
+                    Browse Files
+                </button>
+</div>
+  <!-- Configuration Section -->
+  <div class="flex flex-col gap-3">
+    <label class="font-label text-sm font-semibold text-slate-300">Target Minecraft Version</label>
+    <div class="mc-selector" data-mc-selector>
+      <!-- Trigger button -->
+      <button type="button" class="mc-selector-trigger" data-mc-trigger>
+        <span class="mc-selector-value" data-mc-value>Select target version...</span>
+        <span class="material-symbols-outlined mc-selector-arrow" data-mc-arrow>expand_more</span>
+      </button>
+      <!-- Dropdown panel -->
+      <div class="mc-selector-panel" data-mc-panel>
+        <div class="mc-selector-search">
+          <span class="material-symbols-outlined">search</span>
+          <input type="text" placeholder="Search versions..." data-mc-search autocomplete="off"/>
+        </div>
+        <div class="mc-selector-list" data-mc-list>
+          <div class="mc-selector-group">
+            <div class="mc-selector-group-label">Latest</div>
+            <button type="button" class="mc-selector-option" data-value="26.1.2">
+              <span class="mc-version-name">26.1.2</span>
+              <span class="mc-version-tag latest">Latest</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="26.1.1">
+              <span class="mc-version-name">26.1.1</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="26.1">
+              <span class="mc-version-name">26.1</span>
+            </button>
+          </div>
+          <div class="mc-selector-group">
+            <div class="mc-selector-group-label">1.21.x</div>
+            <button type="button" class="mc-selector-option" data-value="1.21.11">
+              <span class="mc-version-name">1.21.11</span>
+              <span class="mc-version-tag stable">Stable</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.10">
+              <span class="mc-version-name">1.21.10</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.9">
+              <span class="mc-version-name">1.21.9</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.8">
+              <span class="mc-version-name">1.21.8</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.7">
+              <span class="mc-version-name">1.21.7</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.6">
+              <span class="mc-version-name">1.21.6</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.5">
+              <span class="mc-version-name">1.21.5</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.4">
+              <span class="mc-version-name">1.21.4</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.3">
+              <span class="mc-version-name">1.21.3</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.21.1">
+              <span class="mc-version-name">1.21.1</span>
+            </button>
+          </div>
+          <div class="mc-selector-group">
+            <div class="mc-selector-group-label">1.20.x</div>
+            <button type="button" class="mc-selector-option" data-value="1.20.6">
+              <span class="mc-version-name">1.20.6</span>
+              <span class="mc-version-tag stable">Stable</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.20.4">
+              <span class="mc-version-name">1.20.4</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.20.2">
+              <span class="mc-version-name">1.20.2</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.20.1">
+              <span class="mc-version-name">1.20.1</span>
+            </button>
+          </div>
+          <div class="mc-selector-group">
+            <div class="mc-selector-group-label">Legacy</div>
+            <button type="button" class="mc-selector-option" data-value="1.19.4">
+              <span class="mc-version-name">1.19.4</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.19.2">
+              <span class="mc-version-name">1.19.2</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.18.2">
+              <span class="mc-version-name">1.18.2</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.17.1">
+              <span class="mc-version-name">1.17.1</span>
+            </button>
+            <button type="button" class="mc-selector-option" data-value="1.16.5">
+              <span class="mc-version-name">1.16.5</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- Action Section -->
+<div class="flex flex-col gap-4 mt-2">
+    <button data-convert-btn disabled class="w-full py-4 rounded-xl bg-emerald-500/20 text-emerald-500/50 font-headline font-bold text-lg border border-emerald-500/20 cursor-not-allowed opacity-40 transition-all">
+                    Start Conversion
+                </button>
+<p class="text-center text-xs text-slate-500 font-body">Supported formats: .jar files from Fabric or Forge mods. Maximum size: 100MB.</p>
+</div>
+</div>
+</main>
+
+    <script src="demo-data.js"></script>
+    <script src="app.js"></script>
+
+</body></html>