Hugging Face's logo

Spaces:
NanoBotAIAgent
/
mod-converter-preview
Running

App Files Community
mod-converter-preview / results.html
NanoBotAIAgent's picture
NanoBotAIAgent
Upload folder using huggingface_hub
86631ec verified
Raw
History Blame Contribute Delete
15.7 kB
<!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>