Hugging Face's logo

Spaces:
karhar92
/
looplayer
Running

App Files Community
karhar92 commited on
Commit
f20fa55
·
verified ·
1 Parent(s): f637175

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1242 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Looplayer
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: looplayer
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1242 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LoopLayer Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://d3js.org/d3.v7.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Pixelify+Sans:wght@400;500;600&display=swap');
13
+
14
+ :root {
15
+ --bg-dark: #000000;
16
+ --primary: #00C2FF;
17
+ --secondary: #8C52FF;
18
+ --accent: #00FF9D;
19
+ --dao: #FFB800;
20
+ --text: #FFFFFF;
21
+ --card-bg: #1C1C1C;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Inter', sans-serif;
26
+ background-color: var(--bg-dark);
27
+ color: var(--text);
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ .pixel-font {
32
+ font-family: 'Pixelify Sans', sans-serif;
33
+ }
34
+
35
+ .neon-text {
36
+ text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
37
+ }
38
+
39
+ .neon-glow {
40
+ box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary);
41
+ }
42
+
43
+ .category-defi {
44
+ background: rgba(0, 194, 255, 0.2);
45
+ border-color: var(--primary);
46
+ }
47
+
48
+ .category-gaming {
49
+ background: rgba(140, 82, 255, 0.2);
50
+ border-color: var(--secondary);
51
+ }
52
+
53
+ .category-zkml {
54
+ background: rgba(0, 255, 157, 0.2);
55
+ border-color: var(--accent);
56
+ }
57
+
58
+ .category-dao {
59
+ background: rgba(255, 184, 0, 0.2);
60
+ border-color: var(--dao);
61
+ }
62
+
63
+ .tab-content {
64
+ display: none;
65
+ animation: fadeIn 0.5s ease;
66
+ }
67
+
68
+ .tab-content.active {
69
+ display: block;
70
+ }
71
+
72
+ @keyframes fadeIn {
73
+ from { opacity: 0; transform: translateY(10px); }
74
+ to { opacity: 1; transform: translateY(0); }
75
+ }
76
+
77
+ .card {
78
+ background-color: rgba(28, 28, 28, 0.8);
79
+ backdrop-filter: blur(10px);
80
+ border: 1px solid rgba(255, 255, 255, 0.1);
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .card:hover {
85
+ transform: translateY(-5px);
86
+ box-shadow: 0 10px 25px rgba(0, 194, 255, 0.3);
87
+ }
88
+
89
+ .logo-spin {
90
+ animation: spin 8s linear infinite;
91
+ }
92
+
93
+ @keyframes spin {
94
+ 0% { transform: rotate(0deg); }
95
+ 100% { transform: rotate(360deg); }
96
+ }
97
+
98
+ .pulse {
99
+ animation: pulse 2s infinite;
100
+ }
101
+
102
+ @keyframes pulse {
103
+ 0% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.7); }
104
+ 70% { box-shadow: 0 0 0 10px rgba(0, 194, 255, 0); }
105
+ 100% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0); }
106
+ }
107
+
108
+ .bubble {
109
+ transition: all 0.3s ease;
110
+ }
111
+
112
+ .bubble:hover {
113
+ transform: scale(1.1);
114
+ z-index: 10;
115
+ }
116
+
117
+ .tooltip {
118
+ opacity: 0;
119
+ transition: opacity 0.3s ease;
120
+ pointer-events: none;
121
+ }
122
+
123
+ .bubble:hover .tooltip {
124
+ opacity: 1;
125
+ }
126
+
127
+ .status-badge {
128
+ display: inline-flex;
129
+ align-items: center;
130
+ }
131
+
132
+ .status-badge::before {
133
+ content: "";
134
+ display: inline-block;
135
+ width: 8px;
136
+ height: 8px;
137
+ border-radius: 50%;
138
+ margin-right: 6px;
139
+ }
140
+
141
+ .status-active::before {
142
+ background-color: #00FF9D;
143
+ }
144
+
145
+ .status-pending::before {
146
+ background-color: #FFB800;
147
+ }
148
+
149
+ .status-inactive::before {
150
+ background-color: #FF3E3E;
151
+ }
152
+
153
+ .rank-badge {
154
+ width: 24px;
155
+ height: 24px;
156
+ display: flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ border-radius: 4px;
160
+ font-weight: bold;
161
+ font-size: 12px;
162
+ }
163
+
164
+ .rank-1 {
165
+ background: linear-gradient(135deg, #FFD700, #FFB800);
166
+ color: #000;
167
+ }
168
+
169
+ .rank-2 {
170
+ background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
171
+ color: #000;
172
+ }
173
+
174
+ .rank-3 {
175
+ background: linear-gradient(135deg, #CD7F32, #A05A2C);
176
+ color: #000;
177
+ }
178
+
179
+ .profile-card {
180
+ background: linear-gradient(135deg, rgba(28, 28, 28, 0.8), rgba(40, 40, 40, 0.8));
181
+ border: 1px solid rgba(255, 255, 255, 0.1);
182
+ }
183
+
184
+ .profile-cover {
185
+ height: 100px;
186
+ background: linear-gradient(90deg, #00C2FF, #8C52FF);
187
+ }
188
+
189
+ .profile-avatar {
190
+ width: 80px;
191
+ height: 80px;
192
+ border: 3px solid var(--bg-dark);
193
+ margin-top: -40px;
194
+ }
195
+
196
+ .progress-bar {
197
+ height: 4px;
198
+ background-color: rgba(255, 255, 255, 0.1);
199
+ }
200
+
201
+ .progress-fill {
202
+ height: 100%;
203
+ background: linear-gradient(90deg, #00C2FF, #00FF9D);
204
+ }
205
+
206
+ .patch-timeline {
207
+ position: relative;
208
+ padding-left: 30px;
209
+ }
210
+
211
+ .patch-timeline::before {
212
+ content: "";
213
+ position: absolute;
214
+ left: 10px;
215
+ top: 0;
216
+ bottom: 0;
217
+ width: 2px;
218
+ background-color: rgba(255, 255, 255, 0.1);
219
+ }
220
+
221
+ .patch-item {
222
+ position: relative;
223
+ margin-bottom: 20px;
224
+ }
225
+
226
+ .patch-item::before {
227
+ content: "";
228
+ position: absolute;
229
+ left: -30px;
230
+ top: 5px;
231
+ width: 12px;
232
+ height: 12px;
233
+ border-radius: 50%;
234
+ border: 2px solid var(--primary);
235
+ background-color: var(--bg-dark);
236
+ }
237
+
238
+ .patch-validated::before {
239
+ background-color: var(--primary);
240
+ }
241
+
242
+ .patch-pending::before {
243
+ background-color: var(--dao);
244
+ }
245
+
246
+ .patch-rejected::before {
247
+ background-color: #FF3E3E;
248
+ }
249
+
250
+ /* New styles for logo header */
251
+ .logo-header {
252
+ display: flex;
253
+ align-items: center;
254
+ padding: 1rem;
255
+ position: fixed;
256
+ top: 0;
257
+ left: 0;
258
+ z-index: 50;
259
+ }
260
+
261
+ .logo-container {
262
+ display: flex;
263
+ align-items: center;
264
+ gap: 0.75rem;
265
+ }
266
+
267
+ .logo-text {
268
+ font-family: 'Pixelify Sans', sans-serif;
269
+ font-size: 1.5rem;
270
+ font-weight: 600;
271
+ background: linear-gradient(90deg, #00C2FF, #8C52FF);
272
+ -webkit-background-clip: text;
273
+ background-clip: text;
274
+ color: transparent;
275
+ text-shadow: 0 0 5px rgba(0, 194, 255, 0.3);
276
+ }
277
+
278
+ .main-content {
279
+ padding-top: 6rem;
280
+ }
281
+
282
+ /* Consistent section headers */
283
+ .section-header {
284
+ font-family: 'Pixelify Sans', sans-serif;
285
+ font-size: 1.25rem;
286
+ font-weight: 600;
287
+ margin-bottom: 1rem;
288
+ color: #00C2FF;
289
+ display: flex;
290
+ align-items: center;
291
+ gap: 0.5rem;
292
+ }
293
+ </style>
294
+ </head>
295
+ <body class="min-h-screen">
296
+ <!-- Background Bubbles -->
297
+ <div id="background-bubbles" class="fixed inset-0 overflow-hidden pointer-events-none z-0"></div>
298
+
299
+ <!-- Logo Header -->
300
+ <header class="logo-header">
301
+ <div class="logo-container">
302
+ <div class="logo-spin">
303
+ <svg width="40" height="40" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
304
+ <path d="M60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0ZM60 110C32.3858 110 10 87.6142 10 60C10 32.3858 32.3858 10 60 10C87.6142 10 110 32.3858 110 60C110 87.6142 87.6142 110 60 110Z" fill="#00C2FF"/>
305
+ <path d="M60 20C37.9086 20 20 37.9086 20 60C20 82.0914 37.9086 100 60 100C82.0914 100 100 82.0914 100 60C100 37.9086 82.0914 20 60 20ZM60 90C42.3265 90 30 77.6735 30 60C30 42.3265 42.3265 30 60 30C77.6735 30 90 42.3265 90 60C90 77.6735 77.6735 90 60 90Z" fill="#8C52FF"/>
306
+ <path d="M60 40C48.9543 40 40 48.9543 40 60C40 71.0457 48.9543 80 60 80C71.0457 80 80 71.0457 80 60C80 48.9543 71.0457 40 60 40ZM60 70C55.5817 70 50 65.5817 50 60C50 54.4183 55.5817 50 60 50C64.4183 50 70 54.4183 70 60C70 65.5817 64.4183 70 60 70Z" fill="#00FF9D"/>
307
+ </svg>
308
+ </div>
309
+ <span class="logo-text">LOOPLAYER</span>
310
+ </div>
311
+ </header>
312
+
313
+ <div class="container mx-auto px-4 py-8 relative z-10 main-content">
314
+ <!-- Tabs Navigation -->
315
+ <div class="flex justify-center mb-8">
316
+ <div class="inline-flex rounded-md shadow-sm" role="group">
317
+ <button onclick="switchTab('dashboard')" class="px-6 py-3 text-sm font-medium rounded-l-lg bg-indigo-600 text-white hover:bg-indigo-700 focus:z-10 focus:ring-2 focus:ring-indigo-500">
318
+ <i class="fas fa-chart-line mr-2"></i> Dashboard
319
+ </button>
320
+ <button onclick="switchTab('patches')" class="px-6 py-3 text-sm font-medium bg-gray-700 text-white hover:bg-gray-600 focus:z-10 focus:ring-2 focus:ring-gray-500">
321
+ <i class="fas fa-code-branch mr-2"></i> Patches
322
+ </button>
323
+ <button onclick="switchTab('community')" class="px-6 py-3 text-sm font-medium rounded-r-lg bg-gray-700 text-white hover:bg-gray-600 focus:z-10 focus:ring-2 focus:ring-gray-500">
324
+ <i class="fas fa-users mr-2"></i> Community
325
+ </button>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Dashboard Tab Content -->
330
+ <div id="dashboard" class="tab-content active">
331
+ <!-- Top AI Agents Bubble Chart -->
332
+ <div class="card rounded-xl p-6 mb-8">
333
+ <div class="flex justify-between items-center mb-6">
334
+ <h3 class="section-header">
335
+ <i class="fas fa-chart-pie"></i>
336
+ Top AI Agents
337
+ </h3>
338
+ <div class="flex items-center">
339
+ <span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-2 pulse"></span>
340
+ <span class="text-sm text-gray-300">Live Data</span>
341
+ </div>
342
+ </div>
343
+ <div id="bubble-chart" class="h-96 relative">
344
+ <!-- Bubbles will be inserted here by JavaScript -->
345
+ </div>
346
+ <div class="flex justify-center mt-4 space-x-4">
347
+ <div class="flex items-center">
348
+ <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span>
349
+ <span class="text-xs">DeFi</span>
350
+ </div>
351
+ <div class="flex items-center">
352
+ <span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span>
353
+ <span class="text-xs">Gaming</span>
354
+ </div>
355
+ <div class="flex items-center">
356
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
357
+ <span class="text-xs">zkML</span>
358
+ </div>
359
+ <div class="flex items-center">
360
+ <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
361
+ <span class="text-xs">DAO</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
367
+ <!-- LoopScore Over Time -->
368
+ <div class="card rounded-xl p-6">
369
+ <h3 class="section-header">
370
+ <i class="fas fa-chart-line"></i>
371
+ LoopScore Trend
372
+ </h3>
373
+ <div class="h-64 flex items-center justify-center">
374
+ <canvas id="scoreChart"></canvas>
375
+ </div>
376
+ <div class="flex justify-center mt-4 space-x-4">
377
+ <button class="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-600">7D</button>
378
+ <button class="px-3 py-1 text-xs bg-blue-600 rounded">30D</button>
379
+ <button class="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-600">90D</button>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Agent Stats -->
384
+ <div class="card rounded-xl p-6">
385
+ <h3 class="section-header">
386
+ <i class="fas fa-chart-bar"></i>
387
+ Agent Statistics
388
+ </h3>
389
+ <div class="grid grid-cols-2 gap-4">
390
+ <div class="bg-gray-800 p-3 rounded-lg">
391
+ <p class="text-sm text-gray-400 mb-1">Total Agents</p>
392
+ <p class="text-2xl font-mono">1,248</p>
393
+ </div>
394
+ <div class="bg-gray-800 p-3 rounded-lg">
395
+ <p class="text-sm text-gray-400 mb-1">Active</p>
396
+ <p class="text-2xl font-mono text-green-400">1,124</p>
397
+ </div>
398
+ <div class="bg-gray-800 p-3 rounded-lg">
399
+ <p class="text-sm text-gray-400 mb-1">Avg. Score</p>
400
+ <p class="text-2xl font-mono">72.5</p>
401
+ </div>
402
+ <div class="bg-gray-800 p-3 rounded-lg">
403
+ <p class="text-sm text-gray-400 mb-1">Categories</p>
404
+ <p class="text-2xl font-mono">12</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Agent Rankings -->
411
+ <div class="card rounded-xl p-6 mb-8">
412
+ <div class="flex justify-between items-center mb-4">
413
+ <h3 class="section-header">
414
+ <i class="fas fa-trophy"></i>
415
+ Agent Rankings
416
+ </h3>
417
+ <div class="relative">
418
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
419
+ <option selected>All Categories</option>
420
+ <option>DeFi</option>
421
+ <option>Gaming</option>
422
+ <option>zkML</option>
423
+ <option>DAO</option>
424
+ </select>
425
+ </div>
426
+ </div>
427
+ <div class="overflow-x-auto">
428
+ <table class="min-w-full divide-y divide-gray-700">
429
+ <thead>
430
+ <tr>
431
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Agent</th>
432
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Category</th>
433
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">LoopScore</th>
434
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Patches</th>
435
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Updated</th>
436
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
437
+ </tr>
438
+ </thead>
439
+ <tbody class="divide-y divide-gray-700" id="agent-table-body">
440
+ <!-- Rows will be inserted here by JavaScript -->
441
+ </tbody>
442
+ </table>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Patches Tab Content -->
448
+ <div id="patches" class="tab-content">
449
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
450
+ <!-- Agent Profile -->
451
+ <div class="card rounded-xl p-6 lg:col-span-1">
452
+ <div class="flex flex-col items-center">
453
+ <div class="w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center mb-4">
454
+ <span class="text-2xl font-bold">AX</span>
455
+ </div>
456
+ <h3 class="text-xl font-bold mb-1 pixel-font">AIXBT</h3>
457
+ <span class="text-sm bg-blue-900 text-blue-300 px-2 py-1 rounded-full mb-4">DeFi</span>
458
+
459
+ <div class="w-full mb-6">
460
+ <div class="flex justify-between items-center mb-1">
461
+ <span class="text-sm text-gray-400">LoopScore</span>
462
+ <span class="text-sm font-mono">92.4</span>
463
+ </div>
464
+ <div class="progress-bar rounded-full">
465
+ <div class="progress-fill rounded-full" style="width: 92.4%"></div>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="grid grid-cols-2 gap-4 w-full mb-6">
470
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
471
+ <p class="text-sm text-gray-400 mb-1">Patches</p>
472
+ <p class="text-xl font-mono">7</p>
473
+ </div>
474
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
475
+ <p class="text-sm text-gray-400 mb-1">Uptime</p>
476
+ <p class="text-xl font-mono text-green-400">98.2%</p>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="w-full">
481
+ <h4 class="text-sm font-semibold mb-2">Current Version</h4>
482
+ <div class="bg-gray-800 p-3 rounded-lg">
483
+ <div class="flex justify-between items-center">
484
+ <span class="font-mono">v2.1.4</span>
485
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Active</span>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Patch Timeline -->
493
+ <div class="card rounded-xl p-6 lg:col-span-2">
494
+ <div class="flex justify-between items-center mb-6">
495
+ <h3 class="section-header">
496
+ <i class="fas fa-history"></i>
497
+ Patch Timeline
498
+ </h3>
499
+ <button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-lg transition-all">
500
+ <i class="fas fa-plus mr-2"></i> Propose Patch
501
+ </button>
502
+ </div>
503
+
504
+ <div class="patch-timeline">
505
+ <!-- Patch Item -->
506
+ <div class="patch-item patch-validated">
507
+ <div class="bg-gray-800 rounded-lg p-4">
508
+ <div class="flex justify-between items-start mb-2">
509
+ <div>
510
+ <h4 class="font-medium text-lg pixel-font">v2.1.4 Patch</h4>
511
+ <p class="text-sm text-gray-400">Released 2 days ago</p>
512
+ </div>
513
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">Validated</span>
514
+ </div>
515
+ <p class="text-gray-300 mb-3">Optimized transaction processing pipeline for better throughput and reduced gas costs by 12%.</p>
516
+ <div class="flex flex-wrap gap-2">
517
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">Performance</span>
518
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">Core</span>
519
+ <a href="#" class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 hover:underline">View Proof</a>
520
+ <a href="#" class="text-xs px-2 py-1 rounded bg-purple-900 text-purple-300 hover:underline">Benchmarks</a>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Patch Item -->
526
+ <div class="patch-item patch-validated">
527
+ <div class="bg-gray-800 rounded-lg p-4">
528
+ <div class="flex justify-between items-start mb-2">
529
+ <div>
530
+ <h4 class="font-medium text-lg pixel-font">v2.1.3 Hotfix</h4>
531
+ <p class="text-sm text-gray-400">Released 1 week ago</p>
532
+ </div>
533
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">Validated</span>
534
+ </div>
535
+ <p class="text-gray-300 mb-3">Fixed edge case in liquidity calculation that could lead to incorrect pricing in high volatility scenarios.</p>
536
+ <div class="flex flex-wrap gap-2">
537
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">Bug Fix</span>
538
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">DeFi</span>
539
+ <a href="#" class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 hover:underline">View Proof</a>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- Patch Item -->
545
+ <div class="patch-item patch-validated">
546
+ <div class="bg-gray-800 rounded-lg p-4">
547
+ <div class="flex justify-between items-start mb-2">
548
+ <div>
549
+ <h4 class="font-medium text-lg pixel-font">v2.1.2 Update</h4>
550
+ <p class="text-sm text-gray-400">Released 2 weeks ago</p>
551
+ </div>
552
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">Validated</span>
553
+ </div>
554
+ <p class="text-gray-300 mb-3">Added support for new token standards and improved compatibility with multi-chain deployments.</p>
555
+ <div class="flex flex-wrap gap-2">
556
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">Feature</span>
557
+ <span class="text-xs px-2 py-1 rounded bg-gray-700 text-gray-300">Compatibility</span>
558
+ <a href="#" class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 hover:underline">View Proof</a>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="mt-8">
565
+ <h4 class="font-medium mb-4 pixel-font">Upcoming Patches</h4>
566
+ <div class="space-y-4">
567
+ <div class="flex items-center">
568
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-blue-500 mr-3"></div>
569
+ <div>
570
+ <p class="text-sm font-medium pixel-font">v2.2.0 - Smart Contract Enhancements</p>
571
+ <p class="text-xs text-gray-400">Estimated release: 2023-11-15 | Status: In Testing</p>
572
+ </div>
573
+ </div>
574
+ <div class="flex items-center">
575
+ <div class="flex-shrink-0 h-3 w-3 rounded-full bg-purple-500 mr-3"></div>
576
+ <div>
577
+ <p class="text-sm font-medium pixel-font">v2.1.5 - Performance Improvements</p>
578
+ <p class="text-xs text-gray-400">Estimated release: 2023-10-30 | Status: Development</p>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <!-- Community Tab Content -->
588
+ <div id="community" class="tab-content">
589
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
590
+ <!-- Top Contributors -->
591
+ <div class="card rounded-xl p-6 lg:col-span-2">
592
+ <div class="flex justify-between items-center mb-6">
593
+ <h3 class="section-header">
594
+ <i class="fas fa-trophy"></i>
595
+ Top Contributors
596
+ </h3>
597
+ <div class="flex space-x-2">
598
+ <button id="solvers-tab" class="px-3 py-1 text-xs bg-blue-600 rounded">Solvers</button>
599
+ <button id="validators-tab" class="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-600">Validators</button>
600
+ <button id="checkers-tab" class="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-600">Checkers</button>
601
+ </div>
602
+ </div>
603
+
604
+ <div class="overflow-x-auto">
605
+ <table class="min-w-full divide-y divide-gray-700">
606
+ <thead>
607
+ <tr>
608
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
609
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Contributor</th>
610
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Patches</th>
611
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Accuracy</th>
612
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rewards</th>
613
+ </tr>
614
+ </thead>
615
+ <tbody class="divide-y divide-gray-700" id="contributors-table-body">
616
+ <!-- Rows will be inserted here by JavaScript -->
617
+ </tbody>
618
+ </table>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Contributor Profile -->
623
+ <div class="card rounded-xl p-6 lg:col-span-1">
624
+ <div class="profile-card rounded-lg overflow-hidden">
625
+ <div class="profile-cover"></div>
626
+ <div class="flex flex-col items-center px-6 pb-6 relative">
627
+ <div class="profile-avatar rounded-full bg-gray-800 flex items-center justify-center">
628
+ <span class="text-2xl font-bold">QS</span>
629
+ </div>
630
+ <h3 class="text-xl font-bold mt-4 pixel-font">QuantumStake</h3>
631
+ <p class="text-sm text-gray-400 mb-2">0x8f...3e2d</p>
632
+
633
+ <div class="flex space-x-4 my-4">
634
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-github"></i></a>
635
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
636
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a>
637
+ </div>
638
+
639
+ <div class="w-full mb-4">
640
+ <div class="flex justify-between items-center mb-1">
641
+ <span class="text-sm text-gray-400">LoopScore</span>
642
+ <span class="text-sm font-mono">98.7</span>
643
+ </div>
644
+ <div class="progress-bar rounded-full">
645
+ <div class="progress-fill rounded-full" style="width: 98.7%"></div>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="grid grid-cols-3 gap-4 w-full mb-6">
650
+ <div class="bg-gray-800 p-2 rounded-lg text-center">
651
+ <p class="text-sm text-gray-400 mb-1">Patches</p>
652
+ <p class="text-lg font-mono">24</p>
653
+ </div>
654
+ <div class="bg-gray-800 p-2 rounded-lg text-center">
655
+ <p class="text-sm text-gray-400 mb-1">Validated</p>
656
+ <p class="text-lg font-mono">187</p>
657
+ </div>
658
+ <div class="bg-gray-800 p-2 rounded-lg text-center">
659
+ <p class="text-sm text-gray-400 mb-1">Accuracy</p>
660
+ <p class="text-lg font-mono text-green-400">99.2%</p>
661
+ </div>
662
+ </div>
663
+
664
+ <div class="w-full">
665
+ <h4 class="text-sm font-semibold mb-2 pixel-font">Recent Activity</h4>
666
+ <div class="space-y-2">
667
+ <div class="flex items-center text-sm">
668
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
669
+ <span>Validated AIXBT v2.1.4</span>
670
+ <span class="text-gray-500 ml-auto">2d ago</span>
671
+ </div>
672
+ <div class="flex items-center text-sm">
673
+ <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
674
+ <span>Proposed patch for ZKML-1</span>
675
+ <span class="text-gray-500 ml-auto">5d ago</span>
676
+ </div>
677
+ <div class="flex items-center text-sm">
678
+ <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
679
+ <span>Earned 12,400 LOOP</span>
680
+ <span class="text-gray-500 ml-auto">1w ago</span>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+
689
+ <!-- Community Feed -->
690
+ <div class="card rounded-xl p-6 mb-8">
691
+ <div class="flex justify-between items-center mb-6">
692
+ <h3 class="section-header">
693
+ <i class="fas fa-comments"></i>
694
+ Community Feed
695
+ </h3>
696
+ <button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-lg transition-all">
697
+ <i class="fas fa-plus mr-2"></i> Propose CIT
698
+ </button>
699
+ </div>
700
+
701
+ <div class="space-y-6">
702
+ <!-- Feed Item -->
703
+ <div class="bg-gray-800 rounded-lg p-4">
704
+ <div class="flex items-start mb-3">
705
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
706
+ <span class="text-sm font-bold">ZK</span>
707
+ </div>
708
+ <div>
709
+ <div class="flex items-center">
710
+ <span class="font-medium pixel-font">ZKValidator</span>
711
+ <span class="text-xs text-gray-500 ml-2">2 hours ago</span>
712
+ </div>
713
+ <p class="text-sm text-gray-400">Proposed a new CIT for zkML agents: "Standardized benchmarks for zk-SNARK proving times"</p>
714
+ </div>
715
+ </div>
716
+ <div class="flex items-center space-x-4 text-sm">
717
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
718
+ <i class="far fa-thumbs-up mr-1"></i> 12
719
+ </button>
720
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
721
+ <i class="far fa-comment mr-1"></i> 3
722
+ </button>
723
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
724
+ <i class="fas fa-share mr-1"></i> Share
725
+ </button>
726
+ </div>
727
+ </div>
728
+
729
+ <!-- Feed Item -->
730
+ <div class="bg-gray-800 rounded-lg p-4">
731
+ <div class="flex items-start mb-3">
732
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
733
+ <span class="text-sm font-bold">GP</span>
734
+ </div>
735
+ <div>
736
+ <div class="flex items-center">
737
+ <span class="font-medium pixel-font">GamePro</span>
738
+ <span class="text-xs text-gray-500 ml-2">5 hours ago</span>
739
+ </div>
740
+ <p class="text-sm text-gray-400">Just submitted a patch for GameAI that reduces rendering latency by 15%. Looking for validators!</p>
741
+ </div>
742
+ </div>
743
+ <div class="flex items-center space-x-4 text-sm">
744
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
745
+ <i class="far fa-thumbs-up mr-1"></i> 8
746
+ </button>
747
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
748
+ <i class="far fa-comment mr-1"></i> 2
749
+ </button>
750
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
751
+ <i class="fas fa-share mr-1"></i> Share
752
+ </button>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- Feed Item -->
757
+ <div class="bg-gray-800 rounded-lg p-4">
758
+ <div class="flex items-start mb-3">
759
+ <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
760
+ <span class="text-sm font-bold">DA</span>
761
+ </div>
762
+ <div>
763
+ <div class="flex items-center">
764
+ <span class="font-medium pixel-font">DeFiArchitect</span>
765
+ <span class="text-xs text-gray-500 ml-2">1 day ago</span>
766
+ </div>
767
+ <p class="text-sm text-gray-400">Our proposal for a standardized DeFi agent interface has been approved! Looking forward to community contributions.</p>
768
+ </div>
769
+ </div>
770
+ <div class="flex items-center space-x-4 text-sm">
771
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
772
+ <i class="far fa-thumbs-up mr-1"></i> 24
773
+ </button>
774
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
775
+ <i class="far fa-comment mr-1"></i> 7
776
+ </button>
777
+ <button class="flex items-center text-gray-400 hover:text-blue-400">
778
+ <i class="fas fa-share mr-1"></i> Share
779
+ </button>
780
+ </div>
781
+ </div>
782
+ </div>
783
+ </div>
784
+
785
+ <!-- Community Links -->
786
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
787
+ <div class="card rounded-xl p-6 text-center hover:bg-gray-800 transition-colors cursor-pointer">
788
+ <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center mx-auto mb-4">
789
+ <i class="fab fa-discord text-xl"></i>
790
+ </div>
791
+ <h4 class="font-medium mb-2 pixel-font">Join Discord</h4>
792
+ <p class="text-sm text-gray-400">Chat with the community and get real-time updates</p>
793
+ </div>
794
+ <div class="card rounded-xl p-6 text-center hover:bg-gray-800 transition-colors cursor-pointer">
795
+ <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mx-auto mb-4">
796
+ <i class="fas fa-book text-xl"></i>
797
+ </div>
798
+ <h4 class="font-medium mb-2 pixel-font">Documentation</h4>
799
+ <p class="text-sm text-gray-400">Learn how to contribute and build on LoopLayer</p>
800
+ </div>
801
+ <div class="card rounded-xl p-6 text-center hover:bg-gray-800 transition-colors cursor-pointer">
802
+ <div class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center mx-auto mb-4">
803
+ <i class="fas fa-file-contract text-xl"></i>
804
+ </div>
805
+ <h4 class="font-medium mb-2 pixel-font">Governance</h4>
806
+ <p class="text-sm text-gray-400">Participate in protocol decisions and proposals</p>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ </div>
811
+
812
+ <footer class="text-center py-6 text-gray-400 text-sm relative z-10">
813
+ <p>© 2023 LoopLayer. All rights reserved.</p>
814
+ </footer>
815
+
816
+ <script>
817
+ // Tab switching functionality
818
+ function switchTab(tabName) {
819
+ // Hide all tab contents
820
+ document.querySelectorAll('.tab-content').forEach(tab => {
821
+ tab.classList.remove('active');
822
+ });
823
+
824
+ // Show the selected tab content
825
+ document.getElementById(tabName).classList.add('active');
826
+
827
+ // Update tab button styles
828
+ const buttons = document.querySelectorAll('[onclick^="switchTab"]');
829
+ buttons.forEach(btn => {
830
+ if (btn.getAttribute('onclick').includes(tabName)) {
831
+ btn.classList.remove('bg-gray-700');
832
+ btn.classList.add('bg-indigo-600');
833
+ } else {
834
+ btn.classList.remove('bg-indigo-600');
835
+ btn.classList.add('bg-gray-700');
836
+ }
837
+ });
838
+
839
+ // If switching to dashboard, recreate the bubble chart
840
+ if (tabName === 'dashboard') {
841
+ createBubbleChart();
842
+ }
843
+ }
844
+
845
+ // Create background bubbles
846
+ function createBackgroundBubbles() {
847
+ const container = document.getElementById('background-bubbles');
848
+ const colors = ['rgba(0, 194, 255, 0.1)', 'rgba(140, 82, 255, 0.1)', 'rgba(0, 255, 157, 0.1)'];
849
+
850
+ for (let i = 0; i < 20; i++) {
851
+ const bubble = document.createElement('div');
852
+ bubble.className = 'bubble absolute rounded-full pointer-events-none';
853
+
854
+ // Random size between 20px and 150px
855
+ const size = Math.random() * 130 + 20;
856
+ bubble.style.width = `${size}px`;
857
+ bubble.style.height = `${size}px`;
858
+
859
+ // Random position
860
+ bubble.style.left = `${Math.random() * 100}%`;
861
+ bubble.style.top = `${Math.random() * 100}%`;
862
+
863
+ // Random color
864
+ bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
865
+
866
+ // Random animation duration and delay
867
+ const duration = Math.random() * 20 + 10;
868
+ const delay = Math.random() * 5;
869
+ bubble.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
870
+
871
+ container.appendChild(bubble);
872
+ }
873
+ }
874
+
875
+ // Create bubble chart for AI Agents
876
+ function createBubbleChart() {
877
+ // Clear existing bubbles
878
+ const container = document.getElementById('bubble-chart');
879
+ container.innerHTML = '';
880
+
881
+ // Sample data - in a real app, this would come from APIs
882
+ const agents = [
883
+ { id: 'aixbt-1', name: 'AIXBT', score: 92.4, category: 'DeFi', patches: 7, lastUpdate: '2023-10-15', source: 'loop' },
884
+ { id: 'gameai-2', name: 'GameAI', score: 85.2, category: 'Gaming', patches: 5, lastUpdate: '2023-10-14', source: 'loop' },
885
+ { id: 'zkml-3', name: 'ZKML-1', score: 88.7, category: 'zkML', patches: 9, lastUpdate: '2023-10-13', source: 'loop' },
886
+ { id: 'daobot-4', name: 'DAOBot', score: 78.3, category: 'DAO', patches: 4, lastUpdate: '2023-10-12', source: 'loop' },
887
+ { id: 'vitalik-5', name: 'Vitalik', score: 3569.71, category: 'DeFi', patches: 0, lastUpdate: '2023-10-15', source: 'kaito' },
888
+ { id: 'nftbot-6', name: 'NFTBot', score: 65.8, category: 'NFT', patches: 3, lastUpdate: '2023-10-11', source: 'loop' },
889
+ { id: 'defi-7', name: 'DeFiMax', score: 81.5, category: 'DeFi', patches: 6, lastUpdate: '2023-10-10', source: 'loop' },
890
+ { id: 'oracle-8', name: 'OracleX', score: 76.2, category: 'Oracle', patches: 2, lastUpdate: '2023-10-09', source: 'loop' },
891
+ { id: 'lending-9', name: 'LendFi', score: 72.9, category: 'DeFi', patches: 3, lastUpdate: '2023-10-08', source: 'loop' },
892
+ { id: 'gamefi-10', name: 'GameFiPro', score: 68.4, category: 'Gaming', patches: 2, lastUpdate: '2023-10-07', source: 'loop' }
893
+ ];
894
+
895
+ // Set up SVG container
896
+ const width = container.clientWidth;
897
+ const height = container.clientHeight;
898
+
899
+ const svg = d3.select(container)
900
+ .append('svg')
901
+ .attr('width', width)
902
+ .attr('height', height);
903
+
904
+ // Create a force simulation
905
+ const simulation = d3.forceSimulation(agents)
906
+ .force('charge', d3.forceManyBody().strength(5))
907
+ .force('center', d3.forceCenter(width / 2, height / 2))
908
+ .force('collision', d3.forceCollide().radius(d => {
909
+ // Normalize scores for bubble sizes
910
+ if (d.source === 'kaito') {
911
+ return Math.min(60, Math.max(20, d.score / 60));
912
+ }
913
+ return d.score * 0.6;
914
+ }));
915
+
916
+ // Create bubbles
917
+ const bubbles = svg.selectAll('g')
918
+ .data(agents)
919
+ .enter()
920
+ .append('g')
921
+ .attr('transform', d => `translate(${width / 2}, ${height / 2})`);
922
+
923
+ // Add circles for each bubble
924
+ bubbles.append('circle')
925
+ .attr('r', d => {
926
+ if (d.source === 'kaito') {
927
+ return Math.min(60, Math.max(20, d.score / 60));
928
+ }
929
+ return d.score * 0.6;
930
+ })
931
+ .attr('fill', d => {
932
+ switch(d.category) {
933
+ case 'DeFi': return 'rgba(0, 194, 255, 0.3)';
934
+ case 'Gaming': return 'rgba(140, 82, 255, 0.3)';
935
+ case 'zkML': return 'rgba(0, 255, 157, 0.3)';
936
+ case 'DAO': return 'rgba(255, 184, 0, 0.3)';
937
+ default: return 'rgba(255, 255, 255, 0.2)';
938
+ }
939
+ })
940
+ .attr('stroke', d => {
941
+ switch(d.category) {
942
+ case 'DeFi': return '#00C2FF';
943
+ case 'Gaming': return '#8C52FF';
944
+ case 'zkML': return '#00FF9D';
945
+ case 'DAO': return '#FFB800';
946
+ default: return '#FFFFFF';
947
+ }
948
+ })
949
+ .attr('stroke-width', 1)
950
+ .attr('class', 'cursor-pointer')
951
+ .on('mouseover', function(event, d) {
952
+ d3.select(this)
953
+ .transition()
954
+ .duration(200)
955
+ .attr('stroke-width', 3)
956
+ .attr('filter', 'url(#glow)');
957
+
958
+ // Show tooltip
959
+ tooltip.style('opacity', 1)
960
+ .html(`
961
+ <div class="text-sm">
962
+ <div class="font-bold pixel-font">${d.name}</div>
963
+ <div class="text-${d.category === 'DeFi' ? 'blue' : d.category === 'Gaming' ? 'purple' : d.category === 'zkML' ? 'green' : 'yellow'}-400">${d.category}</div>
964
+ <div class="mt-1">Score: ${d.score}</div>
965
+ <div>Patches: ${d.patches}</div>
966
+ <div class="text-xs text-gray-400">Updated: ${d.lastUpdate}</div>
967
+ <div class="text-xs text-gray-400">Source: ${d.source === 'loop' ? 'LoopLayer' : 'Kaito'}</div>
968
+ </div>
969
+ `);
970
+ })
971
+ .on('mouseout', function() {
972
+ d3.select(this)
973
+ .transition()
974
+ .duration(200)
975
+ .attr('stroke-width', 1)
976
+ .attr('filter', null);
977
+
978
+ // Hide tooltip
979
+ tooltip.style('opacity', 0);
980
+ })
981
+ .on('click', function(event, d) {
982
+ // In a real app, this would open the agent in the Patches tab
983
+ alert(`Showing details for ${d.name}\nCategory: ${d.category}\nScore: ${d.score}\nPatches: ${d.patches}`);
984
+ });
985
+
986
+ // Add glow filter
987
+ const defs = svg.append('defs');
988
+ const glowFilter = defs.append('filter')
989
+ .attr('id', 'glow')
990
+ .attr('height', '130%')
991
+ .attr('width', '130%');
992
+
993
+ glowFilter.append('feGaussianBlur')
994
+ .attr('stdDeviation', '3.5')
995
+ .attr('result', 'coloredBlur');
996
+
997
+ const feMerge = glowFilter.append('feMerge');
998
+ feMerge.append('feMergeNode').attr('in', 'coloredBlur');
999
+ feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
1000
+
1001
+ // Add text labels
1002
+ bubbles.append('text')
1003
+ .text(d => d.name)
1004
+ .attr('text-anchor', 'middle')
1005
+ .attr('dy', '.3em')
1006
+ .attr('fill', 'white')
1007
+ .attr('font-size', d => {
1008
+ const size = d.source === 'kaito' ?
1009
+ Math.min(12, Math.max(8, d.score / 300)) :
1010
+ Math.min(12, Math.max(8, d.score / 20));
1011
+ return `${size}px`;
1012
+ })
1013
+ .attr('class', 'pointer-events-none pixel-font');
1014
+
1015
+ // Create tooltip
1016
+ const tooltip = d3.select(container)
1017
+ .append('div')
1018
+ .attr('class', 'absolute bg-gray-900 border border-gray-700 rounded-lg p-3 pointer-events-none opacity-0 transition-opacity')
1019
+ .style('left', '0')
1020
+ .style('top', '0');
1021
+
1022
+ // Update positions on simulation tick
1023
+ simulation.on('tick', () => {
1024
+ bubbles.attr('transform', d => `translate(${d.x}, ${d.y})`);
1025
+
1026
+ // Keep bubbles within container
1027
+ agents.forEach(d => {
1028
+ const radius = d.source === 'kaito' ?
1029
+ Math.min(60, Math.max(20, d.score / 60)) :
1030
+ d.score * 0.6;
1031
+
1032
+ d.x = Math.max(radius, Math.min(width - radius, d.x));
1033
+ d.y = Math.max(radius, Math.min(height - radius, d.y));
1034
+ });
1035
+ });
1036
+ }
1037
+
1038
+ // Create line chart for LoopScore over time
1039
+ function createScoreChart() {
1040
+ const ctx = document.getElementById('scoreChart').getContext('2d');
1041
+
1042
+ // Sample data
1043
+ const labels = Array.from({length: 30}, (_, i) => `Day ${i+1}`);
1044
+ const data = Array.from({length: 30}, (_, i) => 70 + Math.sin(i/3) * 10 + Math.random() * 5);
1045
+
1046
+ new Chart(ctx, {
1047
+ type: 'line',
1048
+ data: {
1049
+ labels: labels,
1050
+ datasets: [{
1051
+ label: 'LoopScore',
1052
+ data: data,
1053
+ borderColor: '#00C2FF',
1054
+ backgroundColor: 'rgba(0, 194, 255, 0.1)',
1055
+ borderWidth: 2,
1056
+ fill: true,
1057
+ tension: 0.4,
1058
+ pointRadius: 0
1059
+ }]
1060
+ },
1061
+ options: {
1062
+ responsive: true,
1063
+ maintainAspectRatio: false,
1064
+ plugins: {
1065
+ legend: {
1066
+ display: false
1067
+ }
1068
+ },
1069
+ scales: {
1070
+ y: {
1071
+ beginAtZero: false,
1072
+ grid: {
1073
+ color: 'rgba(255, 255, 255, 0.1)'
1074
+ },
1075
+ ticks: {
1076
+ color: 'rgba(255, 255, 255, 0.7)'
1077
+ }
1078
+ },
1079
+ x: {
1080
+ grid: {
1081
+ display: false
1082
+ },
1083
+ ticks: {
1084
+ color: 'rgba(255, 255, 255, 0.7)'
1085
+ }
1086
+ }
1087
+ }
1088
+ }
1089
+ });
1090
+ }
1091
+
1092
+ // Populate agent table
1093
+ function populateAgentTable() {
1094
+ const agents = [
1095
+ { name: 'AIXBT', category: 'DeFi', score: 92.4, patches: 7, updated: '2023-10-15', status: 'Active' },
1096
+ { name: 'GameAI', category: 'Gaming', score: 85.2, patches: 5, updated: '2023-10-14', status: 'Active' },
1097
+ { name: 'ZKML-1', category: 'zkML', score: 88.7, patches: 9, updated: '2023-10-13', status: 'Active' },
1098
+ { name: 'DAOBot', category: 'DAO', score: 78.3, patches: 4, updated: '2023-10-12', status: 'Active' },
1099
+ { name: 'NFTBot', category: 'NFT', score: 65.8, patches: 3, updated: '2023-10-11', status: 'Active' },
1100
+ { name: 'DeFiMax', category: 'DeFi', score: 81.5, patches: 6, updated: '2023-10-10', status: 'Active' },
1101
+ { name: 'OracleX', category: 'Oracle', score: 76.2, patches: 2, updated: '2023-10-09', status: 'Active' },
1102
+ { name: 'LendFi', category: 'DeFi', score: 72.9, patches: 3, updated: '2023-10-08', status: 'Active' },
1103
+ { name: 'GameFiPro', category: 'Gaming', score: 68.4, patches: 2, updated: '2023-10-07', status: 'Active' }
1104
+ ];
1105
+
1106
+ const tbody = document.getElementById('agent-table-body');
1107
+
1108
+ agents.forEach(agent => {
1109
+ const row = document.createElement('tr');
1110
+ row.className = 'hover:bg-gray-800 cursor-pointer';
1111
+
1112
+ // Status badge color
1113
+ let statusClass = '';
1114
+ let statusText = '';
1115
+ switch(agent.status) {
1116
+ case 'Active':
1117
+ statusClass = 'bg-green-900 text-green-300';
1118
+ statusText = 'status-active';
1119
+ break;
1120
+ case 'Pending':
1121
+ statusClass = 'bg-yellow-900 text-yellow-300';
1122
+ statusText = 'status-pending';
1123
+ break;
1124
+ case 'Inactive':
1125
+ statusClass = 'bg-red-900 text-red-300';
1126
+ statusText = 'status-inactive';
1127
+ break;
1128
+ default:
1129
+ statusClass = 'bg-gray-700 text-gray-300';
1130
+ }
1131
+
1132
+ row.innerHTML = `
1133
+ <td class="px-6 py-4 whitespace-nowrap font-medium pixel-font">${agent.name}</td>
1134
+ <td class="px-6 py-4 whitespace-nowrap">
1135
+ <span class="text-xs px-2 py-1 rounded-full ${agent.category === 'DeFi' ? 'bg-blue-900 text-blue-300' : agent.category === 'Gaming' ? 'bg-purple-900 text-purple-300' : agent.category === 'zkML' ? 'bg-green-900 text-green-300' : 'bg-yellow-900 text-yellow-300'}">
1136
+ ${agent.category}
1137
+ </span>
1138
+ </td>
1139
+ <td class="px-6 py-4 whitespace-nowrap font-mono">${agent.score}</td>
1140
+ <td class="px-6 py-4 whitespace-nowrap font-mono">${agent.patches}</td>
1141
+ <td class="px-6 py-4 whitespace-nowrap">${agent.updated}</td>
1142
+ <td class="px-6 py-4 whitespace-nowrap">
1143
+ <span class="${statusText} text-xs px-2 py-1 rounded-full ${statusClass}">${agent.status}</span>
1144
+ </td>
1145
+ `;
1146
+
1147
+ row.addEventListener('click', () => {
1148
+ // In a real app, this would switch to the Patches tab with this agent selected
1149
+ alert(`Showing details for ${agent.name}\nCategory: ${agent.category}\nScore: ${agent.score}\nPatches: ${agent.patches}`);
1150
+ });
1151
+
1152
+ tbody.appendChild(row);
1153
+ });
1154
+ }
1155
+
1156
+ // Populate contributors table
1157
+ function populateContributorsTable() {
1158
+ const contributors = [
1159
+ { rank: 1, name: 'QuantumStake', role: 'Solver', patches: 24, validated: 187, accuracy: 99.2, rewards: 24500 },
1160
+ { rank: 2, name: 'InfinityNode', role: 'Solver', patches: 18, validated: 156, accuracy: 98.7, rewards: 19200 },
1161
+ { rank: 3, name: 'StakeCapital', role: 'Solver', patches: 15, validated: 132, accuracy: 97.8, rewards: 14700 },
1162
+ { rank: 4, name: 'ZKValidator', role: 'Validator', patches: 8, validated: 210, accuracy: 99.5, rewards: 12500 },
1163
+ { rank: 5, name: 'DeFiArchitect', role: 'Solver', patches: 12, validated: 98, accuracy: 96.3, rewards: 9800 }
1164
+ ];
1165
+
1166
+ const tbody = document.getElementById('contributors-table-body');
1167
+
1168
+ contributors.forEach(contributor => {
1169
+ const row = document.createElement('tr');
1170
+ row.className = 'hover:bg-gray-800 cursor-pointer';
1171
+
1172
+ row.innerHTML = `
1173
+ <td class="px-6 py-4 whitespace-nowrap">
1174
+ <div class="flex items-center">
1175
+ <div class="rank-badge ${contributor.rank === 1 ? 'rank-1' : contributor.rank === 2 ? 'rank-2' : 'rank-3'}">
1176
+ ${contributor.rank}
1177
+ </div>
1178
+ </div>
1179
+ </td>
1180
+ <td class="px-6 py-4 whitespace-nowrap font-medium pixel-font">${contributor.name}</td>
1181
+ <td class="px-6 py-4 whitespace-nowrap font-mono">${contributor.patches}</td>
1182
+ <td class="px-6 py-4 whitespace-nowrap font-mono">${contributor.accuracy}%</td>
1183
+ <td class="px-6 py-4 whitespace-nowrap font-mono text-green-400">+${contributor.rewards.toLocaleString()}</td>
1184
+ `;
1185
+
1186
+ row.addEventListener('click', () => {
1187
+ // In a real app, this would show the contributor's profile
1188
+ alert(`Showing profile for ${contributor.name}\nRank: ${contributor.rank}\nPatches: ${contributor.patches}\nRewards: ${contributor.rewards}`);
1189
+ });
1190
+
1191
+ tbody.appendChild(row);
1192
+ });
1193
+ }
1194
+
1195
+ // Initialize everything when the page loads
1196
+ window.onload = function() {
1197
+ createBackgroundBubbles();
1198
+ createBubbleChart();
1199
+ createScoreChart();
1200
+ populateAgentTable();
1201
+ populateContributorsTable();
1202
+
1203
+ // Set up tab switching for community tabs
1204
+ document.getElementById('solvers-tab').addEventListener('click', function() {
1205
+ this.classList.remove('bg-gray-700');
1206
+ this.classList.add('bg-blue-600');
1207
+ document.getElementById('validators-tab').classList.remove('bg-blue-600');
1208
+ document.getElementById('validators-tab').classList.add('bg-gray-700');
1209
+ document.getElementById('checkers-tab').classList.remove('bg-blue-600');
1210
+ document.getElementById('checkers-tab').classList.add('bg-gray-700');
1211
+ // In a real app, this would filter the table
1212
+ });
1213
+
1214
+ document.getElementById('validators-tab').addEventListener('click', function() {
1215
+ this.classList.remove('bg-gray-700');
1216
+ this.classList.add('bg-blue-600');
1217
+ document.getElementById('solvers-tab').classList.remove('bg-blue-600');
1218
+ document.getElementById('solvers-tab').classList.add('bg-gray-700');
1219
+ document.getElementById('checkers-tab').classList.remove('bg-blue-600');
1220
+ document.getElementById('checkers-tab').classList.add('bg-gray-700');
1221
+ // In a real app, this would filter the table
1222
+ });
1223
+
1224
+ document.getElementById('checkers-tab').addEventListener('click', function() {
1225
+ this.classList.remove('bg-gray-700');
1226
+ this.classList.add('bg-blue-600');
1227
+ document.getElementById('solvers-tab').classList.remove('bg-blue-600');
1228
+ document.getElementById('solvers-tab').classList.add('bg-gray-700');
1229
+ document.getElementById('validators-tab').classList.remove('bg-blue-600');
1230
+ document.getElementById('validators-tab').classList.add('bg-gray-700');
1231
+ // In a real app, this would filter the table
1232
+ });
1233
+
1234
+ // Simulate some data updates
1235
+ setInterval(() => {
1236
+ const uptimeElement = document.querySelector('.pulse');
1237
+ if (uptimeElement) {
1238
+ // Randomly change status for demo purposes
1239
+ if (Math.random() > 0.95) {
1240
+ uptimeElement.classList.remove('bg-green-500', 'pulse');
1241
+
1242
+ </html>