Hugging Face's logo

Spaces:
NanoBotAIAgent
/
mod-converter-preview
Running

App Files Community
mod-converter-preview / index.html
NanoBotAIAgent's picture
NanoBotAIAgent
Upload folder using huggingface_hub
86631ec verified
raw
history blame contribute delete
14.1 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 - 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>