Hugging Face's logo

Spaces:
NanoBotAIAgent
/
mod-converter-preview
Running

App Files Community
mod-converter-preview
File size: 12,725 Bytes
86631ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!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 - Dashboard</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-dashboard').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-dashboard" class="hidden fixed inset-0 z-50 md:hidden">
  <div class="absolute inset-0 bg-black/60" onclick="document.getElementById('mobile-sidebar-dashboard').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-dashboard').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 bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold 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 bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400 font-bold hover:translate-x-1 duration-200 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 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">
  <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 Section -->
    <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">Dashboard</h2>
      <p class="font-body text-slate-400 text-sm sm:text-base">Overview of your recent mod conversion jobs.</p>
    </div>
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 relative z-10" stagger reveal>
      <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 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-2 relative z-10">
          <span class="text-slate-400 text-sm font-medium">Total Conversions</span>
          <span class="material-symbols-outlined text-indigo-400 bg-indigo-500/10 p-1.5 rounded-lg text-sm">data_usage</span>
        </div>
        <div class="text-3xl font-headline font-bold text-slate-100 relative z-10"><span data-stat-total>0</span></div>
      </div>
      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-emerald-500/20 transition-colors 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-2 relative z-10">
          <span class="text-slate-400 text-sm font-medium">Successful</span>
          <span class="material-symbols-outlined text-emerald-400 bg-emerald-500/10 p-1.5 rounded-lg text-sm">check_circle</span>
        </div>
        <div class="text-3xl font-headline font-bold text-emerald-400 relative z-10"><span data-stat-success>0</span></div>
      </div>
      <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl p-5 shadow-2xl hover:border-rose-500/20 transition-colors 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 justify-between items-start mb-2 relative z-10">
          <span class="text-slate-400 text-sm font-medium">Failed</span>
          <span class="material-symbols-outlined text-rose-400 bg-rose-500/10 p-1.5 rounded-lg text-sm">error</span>
        </div>
        <div class="text-3xl font-headline font-bold text-rose-400 relative z-10"><span data-stat-failed>0</span></div>
      </div>
    </div>
    <!-- Recent Jobs Section -->
    <div class="bg-slate-900/50 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl overflow-hidden relative z-10">
      <div class="p-5 border-b border-slate-800 flex justify-between items-center">
        <h2 class="font-headline font-bold text-slate-200">Recent Jobs</h2>
        <a href="upload.html" class="text-xs font-label font-semibold text-slate-400 hover:text-emerald-400 transition-colors flex items-center gap-1 no-underline">
          New Conversion <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
        </a>
      </div>
      <div class="overflow-x-auto" reveal>
        <table class="w-full text-left text-sm text-slate-400">
          <thead class="text-xs uppercase bg-slate-950/50 border-b border-slate-800 font-label tracking-wider">
            <tr>
              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Job ID</th>
              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Mod Name</th>
              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">MC Version</th>
              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Status</th>
              <th class="px-6 py-4 font-semibold text-slate-500" scope="col">Date</th>
              <th class="px-6 py-4 font-semibold text-slate-500 text-right" scope="col">Actions</th>
            </tr>
          </thead>
          <tbody data-job-table class="divide-y divide-slate-800/50">
          </tbody>
        </table>
      </div>
      <!-- Empty state -->
      <div data-empty-state class="hidden p-12 text-center">
        <span class="material-symbols-outlined text-5xl text-slate-700 mb-4">inbox</span>
        <p class="text-slate-500 font-medium">No conversions yet</p>
        <p class="text-slate-600 text-sm mt-1">Upload a mod JAR to get started</p>
        <a href="upload.html" class="inline-block mt-4 px-5 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-lg text-sm transition-colors no-underline">Start Converting</a>
      </div>
    </div>
  </div>
</main>

<script src="demo-data.js"></script>
<script src="app.js"></script>

</body></html>