Hugging Face's logo

Spaces:
NanoBotAIAgent
/
mod-converter-preview
Running

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