Hugging Face's logo

Spaces:
NanoBotAIAgent
/
mod-converter-preview
Running

App Files Community
mod-converter-preview / upload.html
NanoBotAIAgent's picture
NanoBotAIAgent
Upload folder using huggingface_hub
442ac33 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 - 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-visible">
<!-- 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-visible">
<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>