Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Infernal Command Center</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| hellfire: '#ff4500', | |
| brimstone: '#8b0000', | |
| abyss: '#1a1a1a', | |
| soul: '#e6e6e6', | |
| torment: '#4b0082', | |
| }, | |
| fontFamily: { | |
| infernal: ['"Blackletter"', 'serif'], | |
| damned: ['"Goudy Bookletter 1911"', 'serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap'); | |
| .infernal-text { | |
| font-family: 'UnifrakturMaguntia', cursive; | |
| } | |
| .flame-effect { | |
| background: linear-gradient(to bottom, #ff4500, #8b0000); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 5px rgba(255, 69, 0, 0.5); | |
| } | |
| .hell-card { | |
| background: linear-gradient(145deg, #2a2a2a, #1a1a1a); | |
| border: 1px solid #ff4500; | |
| box-shadow: 0 0 15px rgba(255, 69, 0, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .hell-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 0 25px rgba(255, 69, 0, 0.5); | |
| } | |
| .pentagram { | |
| position: relative; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .pentagram:before { | |
| content: "★"; | |
| position: absolute; | |
| color: #ff4500; | |
| font-size: 50px; | |
| transform: rotate(180deg); | |
| text-shadow: 0 0 10px #ff4500; | |
| } | |
| .flame-animation { | |
| animation: flicker 2s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .scrollbar-infernal::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .scrollbar-infernal::-webkit-scrollbar-track { | |
| background: #1a1a1a; | |
| } | |
| .scrollbar-infernal::-webkit-scrollbar-thumb { | |
| background: #ff4500; | |
| border-radius: 4px; | |
| } | |
| .scrollbar-infernal::-webkit-scrollbar-thumb:hover { | |
| background: #ff6347; | |
| } | |
| .damned-text { | |
| font-family: 'Goudy Bookletter 1911', serif; | |
| } | |
| .soul-meter { | |
| background: linear-gradient(to right, #8b0000, #ff4500, #ff8c00); | |
| height: 8px; | |
| border-radius: 4px; | |
| } | |
| .torment-meter { | |
| background: linear-gradient(to right, #4b0082, #8a2be2, #9370db); | |
| height: 8px; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-abyss text-soul min-h-screen"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Infernal Header --> | |
| <header class="flex justify-between items-center mb-8 border-b border-brimstone pb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="pentagram"></div> | |
| <h1 class="infernal-text text-4xl flame-effect">INFERNAL COMMAND CENTER</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-hellfire text-2xl cursor-pointer flame-animation"></i> | |
| <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> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://i.imgur.com/JzF8Q4T.png" alt="Satan Avatar" class="w-10 h-10 rounded-full border-2 border-hellfire"> | |
| <span class="damned-text">Lord Satan</span> | |
| <i class="fas fa-caret-down text-hellfire"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6"> | |
| <!-- Stats Overview --> | |
| <div class="hell-card rounded-lg p-6 lg:col-span-4"> | |
| <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center"> | |
| <i class="fas fa-fire mr-2"></i> REAL-TIME DAMNATION METRICS | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="border-r border-brimstone pr-4"> | |
| <div class="text-sm text-gray-400">SOULS PROCESSED</div> | |
| <div class="text-3xl font-bold text-hellfire">1,337,426</div> | |
| <div class="text-xs text-gray-500">+666 last hour</div> | |
| </div> | |
| <div class="border-r border-brimstone pr-4"> | |
| <div class="text-sm text-gray-400">TORMENT LEVEL</div> | |
| <div class="text-3xl font-bold text-purple-500">9.6</div> | |
| <div class="flex items-center mt-1"> | |
| <div class="torment-meter w-full" style="width: 96%"></div> | |
| </div> | |
| </div> | |
| <div class="border-r border-brimstone pr-4"> | |
| <div class="text-sm text-gray-400">SOUL CORRUPTION</div> | |
| <div class="text-3xl font-bold text-red-600">98%</div> | |
| <div class="flex items-center mt-1"> | |
| <div class="soul-meter w-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">HELLFIRE OUTPUT</div> | |
| <div class="text-3xl font-bold text-orange-500">666°K</div> | |
| <div class="text-xs text-gray-500">Optimal burning</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Soul Processing Queue --> | |
| <div class="hell-card rounded-lg p-6 lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="damned-text text-xl text-hellfire flex items-center"> | |
| <i class="fas fa-skull mr-2"></i> SOUL PROCESSING QUEUE | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-brimstone text-soul px-3 py-1 rounded text-xs hover:bg-hellfire transition"> | |
| <i class="fas fa-random mr-1"></i> Shuffle | |
| </button> | |
| <button class="bg-hellfire text-soul px-3 py-1 rounded text-xs hover:bg-orange-700 transition"> | |
| <i class="fas fa-bolt mr-1"></i> Process Batch | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-y-auto scrollbar-infernal" style="max-height: 400px;"> | |
| <table class="min-w-full divide-y divide-brimstone"> | |
| <thead> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Soul ID</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Sins</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Torment</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-brimstone"> | |
| <tr class="hover:bg-gray-900 cursor-pointer"> | |
| <td class="px-4 py-3 text-sm">#666-1313</td> | |
| <td class="px-4 py-3 text-sm font-medium">Jeffrey Dahmer</td> | |
| <td class="px-4 py-3 text-sm">Murder, Cannibalism</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 text-sm"> | |
| <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-900 cursor-pointer"> | |
| <td class="px-4 py-3 text-sm">#666-0420</td> | |
| <td class="px-4 py-3 text-sm font-medium">Elizabeth Báthory</td> | |
| <td class="px-4 py-3 text-sm">Torture, Murder</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 text-sm"> | |
| <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-900 cursor-pointer"> | |
| <td class="px-4 py-3 text-sm">#666-1984</td> | |
| <td class="px-4 py-3 text-sm font-medium">Ted Bundy</td> | |
| <td class="px-4 py-3 text-sm">Murder, Necrophilia</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 text-sm"> | |
| <span class="px-2 py-1 bg-brimstone text-soul rounded-full text-xs">Eternal</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-900 cursor-pointer"> | |
| <td class="px-4 py-3 text-sm">#666-2023</td> | |
| <td class="px-4 py-3 text-sm font-medium">Karen Smith</td> | |
| <td class="px-4 py-3 text-sm">Entitlement, False complaints</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 text-sm"> | |
| <span class="px-2 py-1 bg-hellfire text-soul rounded-full text-xs">Processing</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-900 cursor-pointer"> | |
| <td class="px-4 py-3 text-sm">#666-2022</td> | |
| <td class="px-4 py-3 text-sm font-medium">Martin Shkreli</td> | |
| <td class="px-4 py-3 text-sm">Greed, Price gouging</td> | |
| <td class="px-4 py-3 text-sm"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 text-sm"> | |
| <span class="px-2 py-1 bg-hellfire text-soul rounded-full text-xs">Processing</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Torment Allocation --> | |
| <div class="hell-card rounded-lg p-6"> | |
| <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> TORMENT ALLOCATION | |
| </h2> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 1: Limbo</span> | |
| <span>5%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 5%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 2: Lust</span> | |
| <span>8%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 8%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 3: Gluttony</span> | |
| <span>10%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 4: Greed</span> | |
| <span>12%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 5: Wrath</span> | |
| <span>15%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 6: Heresy</span> | |
| <span>18%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 18%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 7: Violence</span> | |
| <span>22%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 22%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 8: Fraud</span> | |
| <span>25%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-700 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Circle 9: Treachery</span> | |
| <span>30%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-800 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hellfire Production --> | |
| <div class="hell-card rounded-lg p-6"> | |
| <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center"> | |
| <i class="fas fa-fire-flame-curved mr-2"></i> HELLFIRE PRODUCTION | |
| </h2> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="relative w-40 h-40"> | |
| <div class="absolute inset-0 rounded-full border-8 border-brimstone"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-hellfire" style="clip-path: polygon(0 0, 100% 0, 100% 66%, 0 66%);"></div> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center"> | |
| <span class="text-3xl font-bold text-hellfire">85%</span> | |
| <span class="text-xs text-gray-400">Capacity</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">Lake of Fire</span> | |
| <span class="text-sm font-bold text-hellfire">45%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">Pits of Despair</span> | |
| <span class="text-sm font-bold text-hellfire">30%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">Furnace of Woe</span> | |
| <span class="text-sm font-bold text-hellfire">10%</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-hellfire text-soul py-2 rounded hover:bg-orange-700 transition flex items-center justify-center"> | |
| <i class="fas fa-fire mr-2"></i> Increase Production | |
| </button> | |
| </div> | |
| <!-- Recent Damnations --> | |
| <div class="hell-card rounded-lg p-6 lg:col-span-2"> | |
| <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center"> | |
| <i class="fas fa-clock-rotate-left mr-2"></i> RECENT DAMNATIONS | |
| </h2> | |
| <div class="overflow-y-auto scrollbar-infernal" style="max-height: 300px;"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center"> | |
| <i class="fas fa-skull text-soul"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">#666-2023-0420</div> | |
| <div class="text-sm text-gray-400">Politician - Corruption, Bribery</div> | |
| <div class="text-xs text-hellfire">Assigned to Circle 8: Fraud</div> | |
| </div> | |
| <div class="ml-auto text-xs text-gray-500">13m ago</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center"> | |
| <i class="fas fa-skull text-soul"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">#666-2023-0419</div> | |
| <div class="text-sm text-gray-400">CEO - Exploitation, Wage theft</div> | |
| <div class="text-xs text-hellfire">Assigned to Circle 4: Greed</div> | |
| </div> | |
| <div class="ml-auto text-xs text-gray-500">47m ago</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center"> | |
| <i class="fas fa-skull text-soul"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">#666-2023-0418</div> | |
| <div class="text-sm text-gray-400">Celebrity - Vanity, Deceit</div> | |
| <div class="text-xs text-hellfire">Assigned to Circle 2: Lust</div> | |
| </div> | |
| <div class="ml-auto text-xs text-gray-500">1h ago</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-brimstone flex items-center justify-center"> | |
| <i class="fas fa-skull text-soul"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">#666-2023-0417</div> | |
| <div class="text-sm text-gray-400">Influencer - Pride, Deception</div> | |
| <div class="text-xs text-hellfire">Assigned to Circle 6: Heresy</div> | |
| </div> | |
| <div class="ml-auto text-xs text-gray-500">2h ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sin Distribution --> | |
| <div class="hell-card rounded-lg p-6 lg:col-span-2"> | |
| <h2 class="damned-text text-xl text-hellfire mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2"></i> SIN DISTRIBUTION | |
| </h2> | |
| <div class="flex items-center justify-center"> | |
| <div class="relative w-64 h-64"> | |
| <!-- Pie chart segments --> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%); background-color: #ff4500;"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 100% 0%, 100% 100%); background-color: #8b0000;"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 100% 100%, 50% 100%); background-color: #4b0082;"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 50% 100%, 0% 100%); background-color: #800080;"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 0% 100%, 0% 0%); background-color: #9932cc;"></div> | |
| <div class="absolute inset-0 rounded-full border-8 border-transparent" | |
| style="clip-path: polygon(50% 50%, 0% 0%, 50% 0%); background-color: #8a2be2;"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="bg-abyss rounded-full w-24 h-24 flex items-center justify-center border border-brimstone"> | |
| <span class="text-xs text-center px-2">SIN<br>BREAKDOWN</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mt-4"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-hellfire mr-2"></div> | |
| <span class="text-xs">Pride (25%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-brimstone mr-2"></div> | |
| <span class="text-xs">Greed (20%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-torment mr-2"></div> | |
| <span class="text-xs">Lust (15%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-purple-800 mr-2"></div> | |
| <span class="text-xs">Envy (12%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-purple-600 mr-2"></div> | |
| <span class="text-xs">Gluttony (10%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-purple-400 mr-2"></div> | |
| <span class="text-xs">Wrath (10%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-purple-300 mr-2"></div> | |
| <span class="text-xs">Sloth (8%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Infernal Footer --> | |
| <footer class="mt-8 border-t border-brimstone pt-4 text-center text-xs text-gray-500"> | |
| <div class="flex justify-center space-x-4 mb-2"> | |
| <span><i class="fas fa-fire mr-1"></i> Hellfire v6.6.6</span> | |
| <span><i class="fas fa-skull mr-1"></i> Damnation Engine v9.6.6</span> | |
| <span><i class="fas fa-database mr-1"></i> SoulDB v3.1.4</span> | |
| </div> | |
| <div>© ETERNAL DAMNATION SYSTEMS - ALL SOULS RESERVED</div> | |
| <div class="mt-1">"Abandon all hope, ye who enter here"</div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simple animation for the flame icon in header | |
| const flameIcon = document.querySelector('.fa-bell'); | |
| let isFlameHigh = false; | |
| setInterval(() => { | |
| if (isFlameHigh) { | |
| flameIcon.style.transform = 'scale(1)'; | |
| flameIcon.style.color = '#ff4500'; | |
| } else { | |
| flameIcon.style.transform = 'scale(1.1)'; | |
| flameIcon.style.color = '#ff8c00'; | |
| } | |
| isFlameHigh = !isFlameHigh; | |
| }, 1000); | |
| // Make hell cards pulse occasionally | |
| const hellCards = document.querySelectorAll('.hell-card'); | |
| setInterval(() => { | |
| const randomCard = hellCards[Math.floor(Math.random() * hellCards.length)]; | |
| randomCard.style.boxShadow = '0 0 25px rgba(255, 69, 0, 0.7)'; | |
| setTimeout(() => { | |
| randomCard.style.boxShadow = '0 0 15px rgba(255, 69, 0, 0.3)'; | |
| }, 500); | |
| }, 3000); | |
| // Randomly update some metrics to make it look alive | |
| const metrics = [ | |
| document.querySelector('.text-hellfire.text-3xl'), | |
| document.querySelector('.text-purple-500.text-3xl'), | |
| document.querySelector('.text-red-600.text-3xl'), | |
| document.querySelector('.text-orange-500.text-3xl') | |
| ]; | |
| setInterval(() => { | |
| const randomMetric = metrics[Math.floor(Math.random() * metrics.length)]; | |
| const currentValue = parseInt(randomMetric.textContent.replace(/,/g, '')); | |
| const newValue = currentValue + Math.floor(Math.random() * 100); | |
| randomMetric.textContent = newValue.toLocaleString(); | |
| // Flash the metric | |
| randomMetric.style.color = '#ffffff'; | |
| setTimeout(() => { | |
| if (randomMetric.classList.contains('text-hellfire')) { | |
| randomMetric.style.color = '#ff4500'; | |
| } else if (randomMetric.classList.contains('text-purple-500')) { | |
| randomMetric.style.color = '#8a2be2'; | |
| } else if (randomMetric.classList.contains('text-red-600')) { | |
| randomMetric.style.color = '#dc2626'; | |
| } else { | |
| randomMetric.style.color = '#f97316'; | |
| } | |
| }, 300); | |
| }, 5000); | |
| </script> | |
| <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> | |
| </html> |