| <!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&display=swap" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700;800;900&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"> |
| |
| <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> |
| |
| <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> |
| |
| <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"> |
| |
| <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> |
| |
| <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> |
| |
| <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"> |
| |
| <div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-500/5 rounded-full blur-[80px] pointer-events-none"></div> |
|
|
| |
| <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> |
|
|
| |
| <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-visible"> |
| <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> |
|
|
| |
| <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-visible"> |
| <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> |
|
|
| |
| <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-visible"> |
| <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"> |
| |
| <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> |
| |
| <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-44" 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> |
| |
| <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-52" 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> |
| |
| <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> |
|
|
| |
| <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-visible"> |
| <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> |
|
|
