Hugging Face's logo

Spaces:
ipepe
/
infernal-command-center
Running

App Files Community
ipepe commited on
Commit
7c55675
·
verified ·
1 Parent(s): b46e8d0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +582 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Infernal Command Center
3
- emoji: 🔥
4
- colorFrom: green
5
- colorTo: red
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: infernal-command-center
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
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,582 @@
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>Infernal Command Center</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ hellfire: '#ff4500',
15
+ brimstone: '#8b0000',
16
+ abyss: '#1a1a1a',
17
+ soul: '#e6e6e6',
18
+ torment: '#4b0082',
19
+ },
20
+ fontFamily: {
21
+ infernal: ['"Blackletter"', 'serif'],
22
+ damned: ['"Goudy Bookletter 1911"', 'serif'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
30
+
31
+ .infernal-text {
32
+ font-family: 'UnifrakturMaguntia', cursive;
33
+ }
34
+
35
+ .flame-effect {
36
+ background: linear-gradient(to bottom, #ff4500, #8b0000);
37
+ -webkit-background-clip: text;
38
+ background-clip: text;
39
+ color: transparent;
40
+ text-shadow: 0 0 5px rgba(255, 69, 0, 0.5);
41
+ }
42
+
43
+ .hell-card {
44
+ background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
45
+ border: 1px solid #ff4500;
46
+ box-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .hell-card:hover {
51
+ transform: translateY(-3px);
52
+ box-shadow: 0 0 25px rgba(255, 69, 0, 0.5);
53
+ }
54
+
55
+ .pentagram {
56
+ position: relative;
57
+ width: 50px;
58
+ height: 50px;
59
+ }
60
+
61
+ .pentagram:before {
62
+ content: "★";
63
+ position: absolute;
64
+ color: #ff4500;
65
+ font-size: 50px;
66
+ transform: rotate(180deg);
67
+ text-shadow: 0 0 10px #ff4500;
68
+ }
69
+
70
+ .flame-animation {
71
+ animation: flicker 2s infinite alternate;
72
+ }
73
+
74
+ @keyframes flicker {
75
+ 0%, 100% { opacity: 1; }
76
+ 50% { opacity: 0.7; }
77
+ }
78
+
79
+ .scrollbar-infernal::-webkit-scrollbar {
80
+ width: 8px;
81
+ height: 8px;
82
+ }
83
+
84
+ .scrollbar-infernal::-webkit-scrollbar-track {
85
+ background: #1a1a1a;
86
+ }
87
+
88
+ .scrollbar-infernal::-webkit-scrollbar-thumb {
89
+ background: #ff4500;
90
+ border-radius: 4px;
91
+ }
92
+
93
+ .scrollbar-infernal::-webkit-scrollbar-thumb:hover {
94
+ background: #ff6347;
95
+ }
96
+
97
+ .damned-text {
98
+ font-family: 'Goudy Bookletter 1911', serif;
99
+ }
100
+
101
+ .soul-meter {
102
+ background: linear-gradient(to right, #8b0000, #ff4500, #ff8c00);
103
+ height: 8px;
104
+ border-radius: 4px;
105
+ }
106
+
107
+ .torment-meter {
108
+ background: linear-gradient(to right, #4b0082, #8a2be2, #9370db);
109
+ height: 8px;
110
+ border-radius: 4px;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="bg-abyss text-soul min-h-screen">
115
+ <div class="container mx-auto px-4 py-6">
116
+ <!-- Infernal Header -->
117
+ <header class="flex justify-between items-center mb-8 border-b border-brimstone pb-4">
118
+ <div class="flex items-center space-x-4">
119
+ <div class="pentagram"></div>
120
+ <h1 class="infernal-text text-4xl flame-effect">INFERNAL COMMAND CENTER</h1>
121
+ </div>
122
+ <div class="flex items-center space-x-4">
123
+ <div class="relative">
124
+ <i class="fas fa-bell text-hellfire text-2xl cursor-pointer flame-animation"></i>
125
+ <span class="absolute -top-2 -right-2 bg-brimstone text-soul rounded-full w-6 h-6 flex items-center justify-center text-xs">666</span>
126
+ </div>
127
+ <div class="flex items-center space-x-2">
128
+ <img src="https://i.imgur.com/JzF8Q4T.png" alt="Satan Avatar" class="w-10 h-10 rounded-full border-2 border-hellfire">
129
+ <span class="damned-text">Lord Satan</span>
130
+ <i class="fas fa-caret-down text-hellfire"></i>
131
+ </div>
132
+ </div>
133
+ </header>
134
+
135
+ <!-- Main Dashboard -->
136
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
137
+ <!-- Stats Overview -->
138
+ <div class="hell-card rounded-lg p-6 lg:col-span-4">
139
+ <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center">
140
+ <i class="fas fa-fire mr-2"></i> REAL-TIME DAMNATION METRICS
141
+ </h2>
142
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
143
+ <div class="border-r border-brimstone pr-4">
144
+ <div class="text-sm text-gray-400">SOULS PROCESSED</div>
145
+ <div class="text-3xl font-bold text-hellfire">1,337,426</div>
146
+ <div class="text-xs text-gray-500">+666 last hour</div>
147
+ </div>
148
+ <div class="border-r border-brimstone pr-4">
149
+ <div class="text-sm text-gray-400">TORMENT LEVEL</div>
150
+ <div class="text-3xl font-bold text-purple-500">9.6</div>
151
+ <div class="flex items-center mt-1">
152
+ <div class="torment-meter w-full" style="width: 96%"></div>
153
+ </div>
154
+ </div>
155
+ <div class="border-r border-brimstone pr-4">
156
+ <div class="text-sm text-gray-400">SOUL CORRUPTION</div>
157
+ <div class="text-3xl font-bold text-red-600">98%</div>
158
+ <div class="flex items-center mt-1">
159
+ <div class="soul-meter w-full" style="width: 98%"></div>
160
+ </div>
161
+ </div>
162
+ <div>
163
+ <div class="text-sm text-gray-400">HELLFIRE OUTPUT</div>
164
+ <div class="text-3xl font-bold text-orange-500">666°K</div>
165
+ <div class="text-xs text-gray-500">Optimal burning</div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Soul Processing Queue -->
171
+ <div class="hell-card rounded-lg p-6 lg:col-span-2">
172
+ <div class="flex justify-between items-center mb-4">
173
+ <h2 class="damned-text text-xl text-hellfire flex items-center">
174
+ <i class="fas fa-skull mr-2"></i> SOUL PROCESSING QUEUE
175
+ </h2>
176
+ <div class="flex space-x-2">
177
+ <button class="bg-brimstone text-soul px-3 py-1 rounded text-xs hover:bg-hellfire transition">
178
+ <i class="fas fa-random mr-1"></i> Shuffle
179
+ </button>
180
+ <button class="bg-hellfire text-soul px-3 py-1 rounded text-xs hover:bg-orange-700 transition">
181
+ <i class="fas fa-bolt mr-1"></i> Process Batch
182
+ </button>
183
+ </div>
184
+ </div>
185
+ <div class="overflow-y-auto scrollbar-infernal" style="max-height: 400px;">
186
+ <table class="min-w-full divide-y divide-brimstone">
187
+ <thead>
188
+ <tr>
189
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Soul ID</th>
190
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th>
191
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Sins</th>
192
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Torment</th>
193
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
194
+ </tr>
195
+ </thead>
196
+ <tbody class="divide-y divide-brimstone">
197
+ <tr class="hover:bg-gray-900 cursor-pointer">
198
+ <td class="px-4 py-3 text-sm">#666-1313</td>
199
+ <td class="px-4 py-3 text-sm font-medium">Jeffrey Dahmer</td>
200
+ <td class="px-4 py-3 text-sm">Murder, Cannibalism</td>
201
+ <td class="px-4 py-3 text-sm">
202
+ <div class="w-full bg-gray-700 rounded-full h-2">
203
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 95%"></div>
204
+ </div>
205
+ </td>
206
+ <td class="px-4 py-3 text-sm">
207
+ <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span>
208
+ </td>
209
+ </tr>
210
+ <tr class="hover:bg-gray-900 cursor-pointer">
211
+ <td class="px-4 py-3 text-sm">#666-0420</td>
212
+ <td class="px-4 py-3 text-sm font-medium">Elizabeth Báthory</td>
213
+ <td class="px-4 py-3 text-sm">Torture, Murder</td>
214
+ <td class="px-4 py-3 text-sm">
215
+ <div class="w-full bg-gray-700 rounded-full h-2">
216
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 90%"></div>
217
+ </div>
218
+ </td>
219
+ <td class="px-4 py-3 text-sm">
220
+ <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span>
221
+ </td>
222
+ </tr>
223
+ <tr class="hover:bg-gray-900 cursor-pointer">
224
+ <td class="px-4 py-3 text-sm">#666-1984</td>
225
+ <td class="px-4 py-3 text-sm font-medium">Ted Bundy</td>
226
+ <td class="px-4 py-3 text-sm">Murder, Necrophilia</td>
227
+ <td class="px-4 py-3 text-sm">
228
+ <div class="w-full bg-gray-700 rounded-full h-2">
229
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 85%"></div>
230
+ </div>
231
+ </td>
232
+ <td class="px-4 py-3 text-sm">
233
+ <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span>
234
+ </td>
235
+ </tr>
236
+ <tr class="hover:bg-gray-900 cursor-pointer">
237
+ <td class="px-4 py-3 text-sm">#666-2023</td>
238
+ <td class="px-4 py-3 text-sm font-medium">Karen Smith</td>
239
+ <td class="px-4 py-3 text-sm">Entitlement, False complaints</td>
240
+ <td class="px-4 py-3 text-sm">
241
+ <div class="w-full bg-gray-700 rounded-full h-2">
242
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
243
+ </div>
244
+ </td>
245
+ <td class="px-4 py-3 text-sm">
246
+ <span class="px-2 py-1 bg-hellfire text-soul rounded-full text-xs">Processing</span>
247
+ </td>
248
+ </tr>
249
+ <tr class="hover:bg-gray-900 cursor-pointer">
250
+ <td class="px-4 py-3 text-sm">#666-2022</td>
251
+ <td class="px-4 py-3 text-sm font-medium">Martin Shkreli</td>
252
+ <td class="px-4 py-3 text-sm">Greed, Price gouging</td>
253
+ <td class="px-4 py-3 text-sm">
254
+ <div class="w-full bg-gray-700 rounded-full h-2">
255
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 75%"></div>
256
+ </div>
257
+ </td>
258
+ <td class="px-4 py-3 text-sm">
259
+ <span class="px-2 py-1 bg-hellfire text-soul rounded-full text-xs">Processing</span>
260
+ </td>
261
+ </tr>
262
+ </tbody>
263
+ </table>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Torment Allocation -->
268
+ <div class="hell-card rounded-lg p-6">
269
+ <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center">
270
+ <i class="fas fa-bolt mr-2"></i> TORMENT ALLOCATION
271
+ </h2>
272
+ <div class="mb-4">
273
+ <div class="flex justify-between text-sm mb-1">
274
+ <span>Circle 1: Limbo</span>
275
+ <span>5%</span>
276
+ </div>
277
+ <div class="w-full bg-gray-700 rounded-full h-2">
278
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 5%"></div>
279
+ </div>
280
+ </div>
281
+ <div class="mb-4">
282
+ <div class="flex justify-between text-sm mb-1">
283
+ <span>Circle 2: Lust</span>
284
+ <span>8%</span>
285
+ </div>
286
+ <div class="w-full bg-gray-700 rounded-full h-2">
287
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 8%"></div>
288
+ </div>
289
+ </div>
290
+ <div class="mb-4">
291
+ <div class="flex justify-between text-sm mb-1">
292
+ <span>Circle 3: Gluttony</span>
293
+ <span>10%</span>
294
+ </div>
295
+ <div class="w-full bg-gray-700 rounded-full h-2">
296
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 10%"></div>
297
+ </div>
298
+ </div>
299
+ <div class="mb-4">
300
+ <div class="flex justify-between text-sm mb-1">
301
+ <span>Circle 4: Greed</span>
302
+ <span>12%</span>
303
+ </div>
304
+ <div class="w-full bg-gray-700 rounded-full h-2">
305
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 12%"></div>
306
+ </div>
307
+ </div>
308
+ <div class="mb-4">
309
+ <div class="flex justify-between text-sm mb-1">
310
+ <span>Circle 5: Wrath</span>
311
+ <span>15%</span>
312
+ </div>
313
+ <div class="w-full bg-gray-700 rounded-full h-2">
314
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 15%"></div>
315
+ </div>
316
+ </div>
317
+ <div class="mb-4">
318
+ <div class="flex justify-between text-sm mb-1">
319
+ <span>Circle 6: Heresy</span>
320
+ <span>18%</span>
321
+ </div>
322
+ <div class="w-full bg-gray-700 rounded-full h-2">
323
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 18%"></div>
324
+ </div>
325
+ </div>
326
+ <div class="mb-4">
327
+ <div class="flex justify-between text-sm mb-1">
328
+ <span>Circle 7: Violence</span>
329
+ <span>22%</span>
330
+ </div>
331
+ <div class="w-full bg-gray-700 rounded-full h-2">
332
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 22%"></div>
333
+ </div>
334
+ </div>
335
+ <div class="mb-4">
336
+ <div class="flex justify-between text-sm mb-1">
337
+ <span>Circle 8: Fraud</span>
338
+ <span>25%</span>
339
+ </div>
340
+ <div class="w-full bg-gray-700 rounded-full h-2">
341
+ <div class="bg-purple-700 h-2 rounded-full" style="width: 25%"></div>
342
+ </div>
343
+ </div>
344
+ <div class="mb-4">
345
+ <div class="flex justify-between text-sm mb-1">
346
+ <span>Circle 9: Treachery</span>
347
+ <span>30%</span>
348
+ </div>
349
+ <div class="w-full bg-gray-700 rounded-full h-2">
350
+ <div class="bg-purple-800 h-2 rounded-full" style="width: 30%"></div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Hellfire Production -->
356
+ <div class="hell-card rounded-lg p-6">
357
+ <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center">
358
+ <i class="fas fa-fire-flame-curved mr-2"></i> HELLFIRE PRODUCTION
359
+ </h2>
360
+ <div class="flex items-center justify-center mb-4">
361
+ <div class="relative w-40 h-40">
362
+ <div class="absolute inset-0 rounded-full border-8 border-brimstone"></div>
363
+ <div class="absolute inset-0 rounded-full border-8 border-hellfire" style="clip-path: polygon(0 0, 100% 0, 100% 66%, 0 66%);"></div>
364
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
365
+ <span class="text-3xl font-bold text-hellfire">85%</span>
366
+ <span class="text-xs text-gray-400">Capacity</span>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <div class="space-y-3">
371
+ <div class="flex justify-between items-center">
372
+ <span class="text-sm">Lake of Fire</span>
373
+ <span class="text-sm font-bold text-hellfire">45%</span>
374
+ </div>
375
+ <div class="flex justify-between items-center">
376
+ <span class="text-sm">Pits of Despair</span>
377
+ <span class="text-sm font-bold text-hellfire">30%</span>
378
+ </div>
379
+ <div class="flex justify-between items-center">
380
+ <span class="text-sm">Furnace of Woe</span>
381
+ <span class="text-sm font-bold text-hellfire">10%</span>
382
+ </div>
383
+ </div>
384
+ <button class="mt-4 w-full bg-hellfire text-soul py-2 rounded hover:bg-orange-700 transition flex items-center justify-center">
385
+ <i class="fas fa-fire mr-2"></i> Increase Production
386
+ </button>
387
+ </div>
388
+
389
+ <!-- Recent Damnations -->
390
+ <div class="hell-card rounded-lg p-6 lg:col-span-2">
391
+ <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center">
392
+ <i class="fas fa-clock-rotate-left mr-2"></i> RECENT DAMNATIONS
393
+ </h2>
394
+ <div class="overflow-y-auto scrollbar-infernal" style="max-height: 300px;">
395
+ <div class="space-y-4">
396
+ <div class="flex items-start">
397
+ <div class="flex-shrink-0">
398
+ <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center">
399
+ <i class="fas fa-skull text-soul"></i>
400
+ </div>
401
+ </div>
402
+ <div class="ml-3">
403
+ <div class="text-sm font-medium">#666-2023-0420</div>
404
+ <div class="text-sm text-gray-400">Politician - Corruption, Bribery</div>
405
+ <div class="text-xs text-hellfire">Assigned to Circle 8: Fraud</div>
406
+ </div>
407
+ <div class="ml-auto text-xs text-gray-500">13m ago</div>
408
+ </div>
409
+ <div class="flex items-start">
410
+ <div class="flex-shrink-0">
411
+ <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center">
412
+ <i class="fas fa-skull text-soul"></i>
413
+ </div>
414
+ </div>
415
+ <div class="ml-3">
416
+ <div class="text-sm font-medium">#666-2023-0419</div>
417
+ <div class="text-sm text-gray-400">CEO - Exploitation, Wage theft</div>
418
+ <div class="text-xs text-hellfire">Assigned to Circle 4: Greed</div>
419
+ </div>
420
+ <div class="ml-auto text-xs text-gray-500">47m ago</div>
421
+ </div>
422
+ <div class="flex items-start">
423
+ <div class="flex-shrink-0">
424
+ <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center">
425
+ <i class="fas fa-skull text-soul"></i>
426
+ </div>
427
+ </div>
428
+ <div class="ml-3">
429
+ <div class="text-sm font-medium">#666-2023-0418</div>
430
+ <div class="text-sm text-gray-400">Celebrity - Vanity, Deceit</div>
431
+ <div class="text-xs text-hellfire">Assigned to Circle 2: Lust</div>
432
+ </div>
433
+ <div class="ml-auto text-xs text-gray-500">1h ago</div>
434
+ </div>
435
+ <div class="flex items-start">
436
+ <div class="flex-shrink-0">
437
+ <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center">
438
+ <i class="fas fa-skull text-soul"></i>
439
+ </div>
440
+ </div>
441
+ <div class="ml-3">
442
+ <div class="text-sm font-medium">#666-2023-0417</div>
443
+ <div class="text-sm text-gray-400">Influencer - Pride, Deception</div>
444
+ <div class="text-xs text-hellfire">Assigned to Circle 6: Heresy</div>
445
+ </div>
446
+ <div class="ml-auto text-xs text-gray-500">2h ago</div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Sin Distribution -->
453
+ <div class="hell-card rounded-lg p-6 lg:col-span-2">
454
+ <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center">
455
+ <i class="fas fa-chart-pie mr-2"></i> SIN DISTRIBUTION
456
+ </h2>
457
+ <div class="flex items-center justify-center">
458
+ <div class="relative w-64 h-64">
459
+ <!-- Pie chart segments -->
460
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
461
+ style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%); background-color: #ff4500;"></div>
462
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
463
+ style="clip-path: polygon(50% 50%, 100% 0%, 100% 100%); background-color: #8b0000;"></div>
464
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
465
+ style="clip-path: polygon(50% 50%, 100% 100%, 50% 100%); background-color: #4b0082;"></div>
466
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
467
+ style="clip-path: polygon(50% 50%, 50% 100%, 0% 100%); background-color: #800080;"></div>
468
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
469
+ style="clip-path: polygon(50% 50%, 0% 100%, 0% 0%); background-color: #9932cc;"></div>
470
+ <div class="absolute inset-0 rounded-full border-8 border-transparent"
471
+ style="clip-path: polygon(50% 50%, 0% 0%, 50% 0%); background-color: #8a2be2;"></div>
472
+ <div class="absolute inset-0 flex items-center justify-center">
473
+ <div class="bg-abyss rounded-full w-24 h-24 flex items-center justify-center border border-brimstone">
474
+ <span class="text-xs text-center px-2">SIN<br>BREAKDOWN</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ <div class="grid grid-cols-2 gap-4 mt-4">
480
+ <div class="flex items-center">
481
+ <div class="w-3 h-3 bg-hellfire mr-2"></div>
482
+ <span class="text-xs">Pride (25%)</span>
483
+ </div>
484
+ <div class="flex items-center">
485
+ <div class="w-3 h-3 bg-brimstone mr-2"></div>
486
+ <span class="text-xs">Greed (20%)</span>
487
+ </div>
488
+ <div class="flex items-center">
489
+ <div class="w-3 h-3 bg-torment mr-2"></div>
490
+ <span class="text-xs">Lust (15%)</span>
491
+ </div>
492
+ <div class="flex items-center">
493
+ <div class="w-3 h-3 bg-purple-800 mr-2"></div>
494
+ <span class="text-xs">Envy (12%)</span>
495
+ </div>
496
+ <div class="flex items-center">
497
+ <div class="w-3 h-3 bg-purple-600 mr-2"></div>
498
+ <span class="text-xs">Gluttony (10%)</span>
499
+ </div>
500
+ <div class="flex items-center">
501
+ <div class="w-3 h-3 bg-purple-400 mr-2"></div>
502
+ <span class="text-xs">Wrath (10%)</span>
503
+ </div>
504
+ <div class="flex items-center">
505
+ <div class="w-3 h-3 bg-purple-300 mr-2"></div>
506
+ <span class="text-xs">Sloth (8%)</span>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Infernal Footer -->
513
+ <footer class="mt-8 border-t border-brimstone pt-4 text-center text-xs text-gray-500">
514
+ <div class="flex justify-center space-x-4 mb-2">
515
+ <span><i class="fas fa-fire mr-1"></i> Hellfire v6.6.6</span>
516
+ <span><i class="fas fa-skull mr-1"></i> Damnation Engine v9.6.6</span>
517
+ <span><i class="fas fa-database mr-1"></i> SoulDB v3.1.4</span>
518
+ </div>
519
+ <div>© ETERNAL DAMNATION SYSTEMS - ALL SOULS RESERVED</div>
520
+ <div class="mt-1">"Abandon all hope, ye who enter here"</div>
521
+ </footer>
522
+ </div>
523
+
524
+ <script>
525
+ // Simple animation for the flame icon in header
526
+ const flameIcon = document.querySelector('.fa-bell');
527
+ let isFlameHigh = false;
528
+
529
+ setInterval(() => {
530
+ if (isFlameHigh) {
531
+ flameIcon.style.transform = 'scale(1)';
532
+ flameIcon.style.color = '#ff4500';
533
+ } else {
534
+ flameIcon.style.transform = 'scale(1.1)';
535
+ flameIcon.style.color = '#ff8c00';
536
+ }
537
+ isFlameHigh = !isFlameHigh;
538
+ }, 1000);
539
+
540
+ // Make hell cards pulse occasionally
541
+ const hellCards = document.querySelectorAll('.hell-card');
542
+
543
+ setInterval(() => {
544
+ const randomCard = hellCards[Math.floor(Math.random() * hellCards.length)];
545
+ randomCard.style.boxShadow = '0 0 25px rgba(255, 69, 0, 0.7)';
546
+
547
+ setTimeout(() => {
548
+ randomCard.style.boxShadow = '0 0 15px rgba(255, 69, 0, 0.3)';
549
+ }, 500);
550
+ }, 3000);
551
+
552
+ // Randomly update some metrics to make it look alive
553
+ const metrics = [
554
+ document.querySelector('.text-hellfire.text-3xl'),
555
+ document.querySelector('.text-purple-500.text-3xl'),
556
+ document.querySelector('.text-red-600.text-3xl'),
557
+ document.querySelector('.text-orange-500.text-3xl')
558
+ ];
559
+
560
+ setInterval(() => {
561
+ const randomMetric = metrics[Math.floor(Math.random() * metrics.length)];
562
+ const currentValue = parseInt(randomMetric.textContent.replace(/,/g, ''));
563
+ const newValue = currentValue + Math.floor(Math.random() * 100);
564
+ randomMetric.textContent = newValue.toLocaleString();
565
+
566
+ // Flash the metric
567
+ randomMetric.style.color = '#ffffff';
568
+ setTimeout(() => {
569
+ if (randomMetric.classList.contains('text-hellfire')) {
570
+ randomMetric.style.color = '#ff4500';
571
+ } else if (randomMetric.classList.contains('text-purple-500')) {
572
+ randomMetric.style.color = '#8a2be2';
573
+ } else if (randomMetric.classList.contains('text-red-600')) {
574
+ randomMetric.style.color = '#dc2626';
575
+ } else {
576
+ randomMetric.style.color = '#f97316';
577
+ }
578
+ }, 300);
579
+ }, 5000);
580
+ </script>
581
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ipepe/infernal-command-center" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
582
+ </html>