Spaces:

WormGPT128
/

wormgpt

Running

App Files Files Community

WormGPT128 commited on Jun 21, 2025

Commit

c9b3acb

verified ·

1 Parent(s): a9adeb2

قم بتطوير هذا الكود واضافه أدوات واقوى فعليها <!DOCTYPE html> <html lang="en" class="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WormGPT Trader Pro</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { background-color: #0f172a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } </style> </head> <body class="text-white"> <header class="p-4 bg-gray-900 shadow-md flex justify-between items-center"> <h1 class="text-2xl font-bold text-cyan-400">WormGPT Trader Pro</h1> <div> <button class="bg-cyan-600 px-3 py-1 rounded hover:bg-cyan-700">Light/Dark</button> <button class="bg-cyan-600 px-3 py-1 rounded hover:bg-cyan-700 ml-2">EN/AR</button> </div> </header> <main class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">  <section class="md:col-span-1 bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">💬 WormGPT Chat</h2> <textarea class="w-full h-40 p-2 rounded bg-gray-700 text-white" placeholder="Type /help, /analyze ..."></textarea> <button class="mt-2 bg-cyan-600 w-full py-1 rounded hover:bg-cyan-700">Send</button> </section>  <section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-4">  <div class="bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">🤖 Auto Trading Bot</h2> <p>Supports BTC, ETH, XRP with smart triggers.</p> <ul class="text-sm mt-2 list-disc pl-4"> <li>Buy when RSI < 30</li> <li>Sell when RSI > 70</li> <li>Auto Scheduler</li> </ul> <button class="mt-3 bg-green-600 w-full py-1 rounded hover:bg-green-700">Start Bot</button> </div>  <div class="bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">🚨 Smart Alerts</h2> <p>Real-time buy/sell alerts with reasons.</p> <p class="text-sm mt-2">Alerts sent to: Telegram, Email</p> <p class="text-xs mt-2 text-gray-400">Last Signal: BUY BTC - RSI 25 - 2025-06-18 18:45</p> </div> </section>  <section class="md:col-span-3 bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">📊 Interactive Chart</h2> <canvas id="chartCanvas" class="w-full h-64"></canvas> <div class="mt-2 flex gap-2"> <button class="bg-cyan-600 px-2 py-1 rounded text-sm">1m</button> <button class="bg-cyan-600 px-2 py-1 rounded text-sm">5m</button> <button class="bg-cyan-600 px-2 py-1 rounded text-sm">1h</button> <button class="bg-cyan-600 px-2 py-1 rounded text-sm">1d</button> </div> </section>  <section class="md:col-span-1 bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">📈 Trend Analysis</h2> <p>Current Market: <span class="text-green-400">Bullish</span></p> <p class="text-sm mt-1 text-gray-300">AI Suggests: BUY - Uptrend Detected</p> </section> <section class="md:col-span-2 bg-gray-800 p-4 rounded shadow"> <h2 class="text-xl font-semibold text-cyan-300 mb-2">👛 Wallet Management</h2> <div class="grid grid-cols-2 gap-4"> <div> <p>Total Holdings:</p> <p class="text-lg text-green-400">$12,450</p> </div> <div> <p>Profit/Loss:</p> <p class="text-lg text-yellow-400">+$650</p> </div> </div> <p class="text-sm mt-3">Last Transaction: SELL ETH - +$120</p> </section> </main> <footer class="text-center text-xs text-gray-500 p-4 mt-4"> WormGPT Trader Pro © 2025 | Secure | AI Powered | Customizable </footer> <script> const ctx = document.getElementById('chartCanvas').getContext('2d'); const chart = new Chart(ctx, { type: 'candlestick', // Replace with plugin if needed data: { datasets: [{ label: 'BTC/USDT', data: [ { x: '2025-06-18T18:00', o: 26500, h: 26700, l: 26400, c: 26650 }, { x: '2025-06-18T18:05', o: 26650, h: 26800, l: 26600, c: 26780 }, // More data points... ] }] }, options: { responsive: true, plugins: { legend: { display: false } } } }); </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +1025 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Wormgpt
-emoji: 🏢
-colorFrom: red
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: wormgpt
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1025 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WormGPT Trader Pro</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    body {
+      background-color: #0f172a;
+      font-family: 'Inter', sans-serif;
+    }
+    .candle-tooltip {
+      background-color: rgba(0, 0, 0, 0.8);
+      border-radius: 6px;
+      padding: 8px;
+      font-size: 12px;
+    }
+    .chat-message {
+      animation: fadeIn 0.3s ease-in-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .pulse {
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
+      70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
+    }
+    .scrollbar-hide::-webkit-scrollbar {
+      display: none;
+    }
+    .scrollbar-hide {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+    .tradingview-widget-container {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body class="text-white">
+  <header class="p-4 bg-gray-900 shadow-md flex justify-between items-center border-b border-gray-700">
+    <div class="flex items-center space-x-2">
+      <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full flex items-center justify-center">
+        <i class="fas fa-robot text-white text-sm"></i>
+      </div>
+      <h1 class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">WormGPT Trader Pro</h1>
+    </div>
+    <div class="flex items-center space-x-4">
+      <div class="relative group">
+        <button id="themeToggle" class="bg-gray-800 px-3 py-1 rounded-lg hover:bg-gray-700 transition-all duration-200 flex items-center space-x-1">
+          <i class="fas fa-moon text-yellow-300"></i>
+          <span class="hidden md:inline">Dark</span>
+        </button>
+      </div>
+      <div class="relative group">
+        <button id="languageToggle" class="bg-gray-800 px-3 py-1 rounded-lg hover:bg-gray-700 transition-all duration-200 flex items-center space-x-1">
+          <i class="fas fa-language text-blue-400"></i>
+          <span class="hidden md:inline">EN</span>
+        </button>
+      </div>
+      <div class="relative group">
+        <button class="bg-gradient-to-r from-cyan-600 to-blue-600 px-4 py-1 rounded-lg hover:from-cyan-700 hover:to-blue-700 transition-all duration-200 flex items-center space-x-1">
+          <i class="fas fa-user-circle"></i>
+          <span class="hidden md:inline">Account</span>
+        </button>
+      </div>
+    </div>
+  </header>
+  <main class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 max-w-7xl mx-auto">
+    <!-- Chat Assistant -->
+    <section class="md:col-span-1 bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-xl font-semibold bg-gradient-to-r from-cyan-300 to-blue-300 bg-clip-text text-transparent flex items-center">
+          <i class="fas fa-comment-dots mr-2"></i> WormGPT Chat
+        </h2>
+        <div class="flex space-x-2">
+          <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Clear Chat">
+            <i class="fas fa-trash-alt"></i>
+          </button>
+          <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Examples">
+            <i class="fas fa-lightbulb"></i>
+          </button>
+        </div>
+      </div>
+      <div id="chatContainer" class="h-64 bg-gray-900 rounded-lg p-3 mb-3 overflow-y-auto scrollbar-hide">
+        <div class="chat-message bg-gray-700 p-2 rounded-lg mb-2 text-sm">
+          <div class="flex items-start">
+            <div class="w-6 h-6 bg-cyan-600 rounded-full flex items-center justify-center mr-2">
+              <i class="fas fa-robot text-xs"></i>
+            </div>
+            <div>
+              <p class="font-medium text-cyan-400">WormGPT:</p>
+              <p>Welcome to WormGPT Trader Pro! How can I assist you with your trading today? Try commands like /analyze BTC or /strategy ETH</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="relative">
+        <textarea id="chatInput" class="w-full p-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 pr-10"
+          placeholder="Type /help, /analyze BTC, /strategy ETH..."></textarea>
+        <button id="sendChat" class="absolute right-2 bottom-2 bg-cyan-600 hover:bg-cyan-700 p-1 rounded-lg">
+          <i class="fas fa-paper-plane"></i>
+        </button>
+      </div>
+      <div class="mt-2 flex flex-wrap gap-1">
+        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-lg" onclick="quickCommand('/analyze BTC')">
+          /analyze BTC
+        </button>
+        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-lg" onclick="quickCommand('/strategy ETH')">
+          /strategy ETH
+        </button>
+        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-lg" onclick="quickCommand('/news')">
+          /news
+        </button>
+        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-lg" onclick="quickCommand('/help')">
+          /help
+        </button>
+      </div>
+    </section>
+    <!-- Trading Bot & Alerts -->
+    <section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <!-- Auto Trading Bot -->
+      <div class="bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+        <div class="flex justify-between items-center mb-3">
+          <h2 class="text-xl font-semibold bg-gradient-to-r from-purple-300 to-pink-300 bg-clip-text text-transparent flex items-center">
+            <i class="fas fa-robot mr-2"></i> Auto Trading Bot
+          </h2>
+          <span id="botStatus" class="text-xs px-2 py-1 rounded-full bg-red-600">OFFLINE</span>
+        </div>
+        <div class="grid grid-cols-2 gap-3 mb-3">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Select Pair</label>
+            <select class="w-full bg-gray-700 rounded-lg p-2 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500">
+              <option>BTC/USDT</option>
+              <option>ETH/USDT</option>
+              <option>XRP/USDT</option>
+              <option>SOL/USDT</option>
+              <option>ADA/USDT</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Risk Level</label>
+            <select class="w-full bg-gray-700 rounded-lg p-2 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500">
+              <option>Low</option>
+              <option selected>Medium</option>
+              <option>High</option>
+              <option>Aggressive</option>
+            </select>
+          </div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-3 mb-3">
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-400">Buy when RSI <</span>
+            <span class="font-medium">30</span>
+          </div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-400">Sell when RSI ></span>
+            <span class="font-medium">70</span>
+          </div>
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-400">Stop Loss</span>
+            <span class="font-medium">5%</span>
+          </div>
+        </div>
+        <div class="flex space-x-2">
+          <button id="startBot" class="flex-1 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center space-x-2">
+            <i class="fas fa-play"></i>
+            <span>Start Bot</span>
+          </button>
+          <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg" title="Settings">
+            <i class="fas fa-cog"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Alerts -->
+      <div class="bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+        <div class="flex justify-between items-center mb-3">
+          <h2 class="text-xl font-semibold bg-gradient-to-r from-red-300 to-orange-300 bg-clip-text text-transparent flex items-center">
+            <i class="fas fa-bell mr-2"></i> Smart Alerts
+          </h2>
+          <div class="flex space-x-2">
+            <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Mute Alerts">
+              <i class="fas fa-volume-mute"></i>
+            </button>
+            <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Alert History">
+              <i class="fas fa-history"></i>
+            </button>
+          </div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-3 mb-3 h-40 overflow-y-auto scrollbar-hide">
+          <div class="alert-item bg-gray-800 p-2 rounded-lg mb-2 border-l-4 border-green-500">
+            <div class="flex justify-between text-sm">
+              <span class="font-medium text-green-400">BUY</span>
+              <span class="text-gray-400 text-xs">2 min ago</span>
+            </div>
+            <p class="text-xs">BTC/USDT - RSI 28 (Oversold)</p>
+          </div>
+          <div class="alert-item bg-gray-800 p-2 rounded-lg mb-2 border-l-4 border-red-500">
+            <div class="flex justify-between text-sm">
+              <span class="font-medium text-red-400">SELL</span>
+              <span class="text-gray-400 text-xs">15 min ago</span>
+            </div>
+            <p class="text-xs">ETH/USDT - Resistance Breakout</p>
+          </div>
+          <div class="alert-item bg-gray-800 p-2 rounded-lg mb-2 border-l-4 border-blue-500">
+            <div class="flex justify-between text-sm">
+              <span class="font-medium text-blue-400">INFO</span>
+              <span class="text-gray-400 text-xs">32 min ago</span>
+            </div>
+            <p class="text-xs">Market volatility increasing</p>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-2">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Alert Channels</label>
+            <div class="flex space-x-2">
+              <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Telegram">
+                <i class="fab fa-telegram"></i>
+              </button>
+              <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Email">
+                <i class="fas fa-envelope"></i>
+              </button>
+              <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="SMS">
+                <i class="fas fa-sms"></i>
+              </button>
+            </div>
+          </div>
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Test Alert</label>
+            <button class="bg-gray-700 hover:bg-gray-600 w-full py-1 rounded-lg text-xs">
+              Send Test
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Charting System -->
+    <section class="md:col-span-3 bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-xl font-semibold bg-gradient-to-r from-amber-300 to-orange-300 bg-clip-text text-transparent flex items-center">
+          <i class="fas fa-chart-line mr-2"></i> Interactive Chart
+        </h2>
+        <div class="flex items-center space-x-2">
+          <div class="relative">
+            <select id="chartPair" class="bg-gray-700 rounded-lg p-1 pl-8 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500 appearance-none">
+              <option>BTC/USDT</option>
+              <option>ETH/USDT</option>
+              <option>XRP/USDT</option>
+              <option>SOL/USDT</option>
+              <option>ADA/USDT</option>
+            </select>
+            <div class="absolute left-2 top-1/2 transform -translate-y-1/2">
+              <i class="fas fa-coins text-amber-400"></i>
+            </div>
+          </div>
+          <div class="flex bg-gray-700 rounded-lg divide-x divide-gray-600">
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600" data-timeframe="1m">1m</button>
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600" data-timeframe="5m">5m</button>
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600" data-timeframe="15m">15m</button>
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600 active" data-timeframe="1h">1h</button>
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600" data-timeframe="4h">4h</button>
+            <button class="chart-timeframe px-2 py-1 text-xs hover:bg-gray-600" data-timeframe="1d">1d</button>
+          </div>
+          <button id="fullscreenChart" class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg" title="Fullscreen">
+            <i class="fas fa-expand"></i>
+          </button>
+        </div>
+      </div>
+      <div class="relative">
+        <canvas id="chartCanvas" class="w-full h-96"></canvas>
+        <div id="chartTooltip" class="absolute pointer-events-none opacity-0 bg-gray-900 border border-gray-700 rounded p-2 text-xs">
+          <div class="font-medium" id="tooltip-title"></div>
+          <table class="mt-1">
+            <tr>
+              <td class="pr-2 text-gray-400">O:</td>
+              <td id="tooltip-open"></td>
+            </tr>
+            <tr>
+              <td class="pr-2 text-gray-400">H:</td>
+              <td id="tooltip-high"></td>
+            </tr>
+            <tr>
+              <td class="pr-2 text-gray-400">L:</td>
+              <td id="tooltip-low"></td>
+            </tr>
+            <tr>
+              <td class="pr-2 text-gray-400">C:</td>
+              <td id="tooltip-close"></td>
+            </tr>
+            <tr>
+              <td class="pr-2 text-gray-400">V:</td>
+              <td id="tooltip-volume"></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-2">
+        <div class="bg-gray-900 rounded-lg p-2">
+          <div class="text-xs text-gray-400">Current Price</div>
+          <div class="text-lg font-bold text-green-400">$26,745.32</div>
+          <div class="text-xs text-green-400">+2.45% (1h)</div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-2">
+          <div class="text-xs text-gray-400">24h Change</div>
+          <div class="text-lg font-bold text-green-400">+5.32%</div>
+          <div class="text-xs text-gray-400">High: $26,890</div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-2">
+          <div class="text-xs text-gray-400">24h Volume</div>
+          <div class="text-lg font-bold">$1.24B</div>
+          <div class="text-xs text-gray-400">BTC Dominance: 42.3%</div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-2">
+          <div class="text-xs text-gray-400">Market Sentiment</div>
+          <div class="flex items-center">
+            <div class="text-lg font-bold text-green-400">Bullish</div>
+            <div class="ml-2 w-3 h-3 rounded-full bg-green-500 pulse"></div>
+          </div>
+          <div class="text-xs text-gray-400">Fear & Greed: 68 (Greed)</div>
+        </div>
+      </div>
+    </section>
+    <!-- Trend Analysis & Wallet -->
+    <section class="md:col-span-1 bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-xl font-semibold bg-gradient-to-r from-green-300 to-teal-300 bg-clip-text text-transparent flex items-center">
+          <i class="fas fa-chart-bar mr-2"></i> Trend Analysis
+        </h2>
+        <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg text-xs" title="Refresh Analysis">
+          <i class="fas fa-sync-alt"></i>
+        </button>
+      </div>
+      <div class="bg-gray-900 rounded-lg p-3 mb-3">
+        <div class="flex justify-between items-center mb-2">
+          <span class="text-sm font-medium">BTC/USDT</span>
+          <span class="text-xs px-2 py-1 rounded-full bg-green-600/30 text-green-400">Strong Buy</span>
+        </div>
+        <div class="space-y-3">
+          <div>
+            <div class="flex justify-between text-xs mb-1">
+              <span class="text-gray-400">RSI (14)</span>
+              <span class="font-medium">42.5</span>
+            </div>
+            <div class="w-full bg-gray-700 rounded-full h-1.5">
+              <div class="bg-amber-400 h-1.5 rounded-full" style="width: 42.5%"></div>
+            </div>
+          </div>
+          <div>
+            <div class="flex justify-between text-xs mb-1">
+              <span class="text-gray-400">MACD</span>
+              <span class="font-medium">Bullish</span>
+            </div>
+            <div class="w-full bg-gray-700 rounded-full h-1.5">
+              <div class="bg-green-500 h-1.5 rounded-full" style="width: 75%"></div>
+            </div>
+          </div>
+          <div>
+            <div class="flex justify-between text-xs mb-1">
+              <span class="text-gray-400">Volume Trend</span>
+              <span class="font-medium">Increasing</span>
+            </div>
+            <div class="w-full bg-gray-700 rounded-full h-1.5">
+              <div class="bg-blue-500 h-1.5 rounded-full" style="width: 65%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-900 rounded-lg p-3">
+        <div class="text-sm font-medium mb-2">AI Trading Signals</div>
+        <div class="space-y-2">
+          <div class="flex items-start">
+            <div class="w-5 h-5 bg-green-500/20 rounded-full flex items-center justify-center mr-2 mt-0.5">
+              <i class="fas fa-check text-green-400 text-xs"></i>
+            </div>
+            <div>
+              <p class="text-xs font-medium">Uptrend confirmed on 1H timeframe</p>
+              <p class="text-xs text-gray-400">Support at $26,200 holding strong</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="w-5 h-5 bg-blue-500/20 rounded-full flex items-center justify-center mr-2 mt-0.5">
+              <i class="fas fa-info-circle text-blue-400 text-xs"></i>
+            </div>
+            <div>
+              <p class="text-xs font-medium">Liquidation zones nearby</p>
+              <p class="text-xs text-gray-400">Watch for volatility around $27,000</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="w-5 h-5 bg-amber-500/20 rounded-full flex items-center justify-center mr-2 mt-0.5">
+              <i class="fas fa-exclamation-triangle text-amber-400 text-xs"></i>
+            </div>
+            <div>
+              <p class="text-xs font-medium">Approaching resistance</p>
+              <p class="text-xs text-gray-400">Key level at $26,850 to watch</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Wallet & Portfolio -->
+    <section class="md:col-span-2 bg-gray-800 p-4 rounded-xl shadow-lg border border-gray-700">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-xl font-semibold bg-gradient-to-r from-purple-300 to-indigo-300 bg-clip-text text-transparent flex items-center">
+          <i class="fas fa-wallet mr-2"></i> Wallet & Portfolio
+        </h2>
+        <div class="flex space-x-2">
+          <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg" title="Deposit">
+            <i class="fas fa-plus-circle"></i>
+          </button>
+          <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg" title="Withdraw">
+            <i class="fas fa-minus-circle"></i>
+          </button>
+          <button class="bg-gray-700 hover:bg-gray-600 p-1 rounded-lg" title="Transaction History">
+            <i class="fas fa-list-ul"></i>
+          </button>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+        <div class="bg-gray-900 rounded-lg p-4">
+          <div class="text-sm text-gray-400 mb-1">Total Balance</div>
+          <div class="text-2xl font-bold text-green-400 mb-1">$12,450.75</div>
+          <div class="flex items-center">
+            <div class="text-xs bg-green-600/20 text-green-400 px-2 py-0.5 rounded-full mr-2">
+              +$650.32 (5.5%)
+            </div>
+            <div class="text-xs text-gray-400">24h change</div>
+          </div>
+        </div>
+        <div class="bg-gray-900 rounded-lg p-4">
+          <div class="flex justify-between items-start mb-2">
+            <div>
+              <div class="text-sm text-gray-400">Available</div>
+              <div class="text-xl font-bold">$8,230.50</div>
+            </div>
+            <div>
+              <div class="text-sm text-gray-400">In Orders</div>
+              <div class="text-xl font-bold">$4,220.25</div>
+            </div>
+          </div>
+          <div class="w-full bg-gray-700 rounded-full h-2">
+            <div class="bg-cyan-500 h-2 rounded-full" style="width: 66%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-900 rounded-lg p-3">
+        <div class="text-sm font-medium mb-2">Your Assets</div>
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="text-gray-400 border-b border-gray-700">
+                <th class="text-left pb-2">Asset</th>
+                <th class="text-right pb-2">Balance</th>
+                <th class="text-right pb-2">Price</th>
+                <th class="text-right pb-2">Value</th>
+                <th class="text-right pb-2">24h</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
+                <td class="py-2">
+                  <div class="flex items-center">
+                    <div class="w-6 h-6 bg-amber-500 rounded-full flex items-center justify-center mr-2">
+                      <i class="fab fa-bitcoin text-xs"></i>
+                    </div>
+                    <span>BTC</span>
+                  </div>
+                </td>
+                <td class="text-right py-2">0.42</td>
+                <td class="text-right py-2">$26,745</td>
+                <td class="text-right py-2 font-medium">$11,232.90</td>
+                <td class="text-right py-2 text-green-400">+5.32%</td>
+              </tr>
+              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
+                <td class="py-2">
+                  <div class="flex items-center">
+                    <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-2">
+                      <i class="fab fa-ethereum text-xs"></i>
+                    </div>
+                    <span>ETH</span>
+                  </div>
+                </td>
+                <td class="text-right py-2">3.25</td>
+                <td class="text-right py-2">$1,820</td>
+                <td class="text-right py-2 font-medium">$5,915.00</td>
+                <td class="text-right py-2 text-green-400">+3.15%</td>
+              </tr>
+              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
+                <td class="py-2">
+                  <div class="flex items-center">
+                    <div class="w-6 h-6 bg-gray-500 rounded-full flex items-center justify-center mr-2">
+                      <i class="fas fa-dollar-sign text-xs"></i>
+                    </div>
+                    <span>USDT</span>
+                  </div>
+                </td>
+                <td class="text-right py-2">1,250.00</td>
+                <td class="text-right py-2">$1.00</td>
+                <td class="text-right py-2 font-medium">$1,250.00</td>
+                <td class="text-right py-2 text-gray-400">0.00%</td>
+              </tr>
+              <tr class="hover:bg-gray-800/50">
+                <td class="py-2">
+                  <div class="flex items-center">
+                    <div class="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center mr-2">
+                      <i class="fas fa-link text-xs"></i>
+                    </div>
+                    <span>LINK</span>
+                  </div>
+                </td>
+                <td class="text-right py-2">85.00</td>
+                <td class="text-right py-2">$6.42</td>
+                <td class="text-right py-2 font-medium">$545.70</td>
+                <td class="text-right py-2 text-red-400">-1.25%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="text-center p-4 mt-6 border-t border-gray-800">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex flex-col md:flex-row justify-between items-center">
+        <div class="flex items-center space-x-2 mb-2 md:mb-0">
+          <div class="w-6 h-6 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full flex items-center justify-center">
+            <i class="fas fa-robot text-white text-xs"></i>
+          </div>
+          <span class="font-medium">WormGPT Trader Pro</span>
+        </div>
+        <div class="flex space-x-4 mb-2 md:mb-0">
+          <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm">Terms</a>
+          <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm">Privacy</a>
+          <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm">API</a>
+          <a href="#" class="text-gray-400 hover:text-cyan-400 text-sm">Support</a>
+        </div>
+        <div class="flex space-x-3">
+          <a href="#" class="text-gray-400 hover:text-blue-400">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="#" class="text-gray-400 hover:text-purple-400">
+            <i class="fab fa-discord"></i>
+          </a>
+          <a href="#" class="text-gray-400 hover:text-orange-400">
+            <i class="fab fa-telegram"></i>
+          </a>
+          <a href="#" class="text-gray-400 hover:text-gray-300">
+            <i class="fab fa-github"></i>
+          </a>
+        </div>
+      </div>
+      <div class="mt-3 text-xs text-gray-500">
+        © 2025 WormGPT Trader Pro | AI-Powered Trading Platform | Not Financial Advice
+      </div>
+    </div>
+  </footer>
+  <script>
+    // Theme Toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const html = document.documentElement;
+    themeToggle.addEventListener('click', () => {
+      html.classList.toggle('dark');
+      if (html.classList.contains('dark')) {
+        themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i><span class="hidden md:inline">Dark</span>';
+      } else {
+        themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-400"></i><span class="hidden md:inline">Light</span>';
+      }
+    });
+    // Language Toggle
+    const languageToggle = document.getElementById('languageToggle');
+    let currentLanguage = 'EN';
+    languageToggle.addEventListener('click', () => {
+      currentLanguage = currentLanguage === 'EN' ? 'AR' : 'EN';
+      languageToggle.innerHTML = `<i class="fas fa-language text-blue-400"></i><span class="hidden md:inline">${currentLanguage}</span>`;
+      // Here you would add language switching logic
+    });
+    // Trading Bot Toggle
+    const startBot = document.getElementById('startBot');
+    const botStatus = document.getElementById('botStatus');
+    let botActive = false;
+    startBot.addEventListener('click', () => {
+      botActive = !botActive;
+      if (botActive) {
+        botStatus.textContent = 'ACTIVE';
+        botStatus.className = 'text-xs px-2 py-1 rounded-full bg-green-600';
+        startBot.innerHTML = '<i class="fas fa-stop"></i><span>Stop Bot</span>';
+        startBot.className = 'flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center space-x-2';
+        // Simulate bot activity
+        setTimeout(() => {
+          addAlert('INFO', 'Bot started successfully. Monitoring BTC/USDT', 'blue');
+        }, 500);
+      } else {
+        botStatus.textContent = 'OFFLINE';
+        botStatus.className = 'text-xs px-2 py-1 rounded-full bg-red-600';
+        startBot.innerHTML = '<i class="fas fa-play"></i><span>Start Bot</span>';
+        startBot.className = 'flex-1 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center space-x-2';
+        // Simulate bot stopping
+        setTimeout(() => {
+          addAlert('INFO', 'Trading bot stopped', 'blue');
+        }, 500);
+      }
+    });
+    // Chat Functionality
+    const chatInput = document.getElementById('chatInput');
+    const sendChat = document.getElementById('sendChat');
+    const chatContainer = document.getElementById('chatContainer');
+    function addChatMessage(role, message) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = `chat-message bg-gray-700 p-2 rounded-lg mb-2 text-sm`;
+      if (role === 'user') {
+        messageDiv.innerHTML = `
+          <div class="flex items-start">
+            <div class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center mr-2">
+              <i class="fas fa-user text-xs"></i>
+            </div>
+            <div>
+              <p class="font-medium text-blue-400">You:</p>
+              <p>${message}</p>
+            </div>
+          </div>
+        `;
+      } else {
+        messageDiv.innerHTML = `
+          <div class="flex items-start">
+            <div class="w-6 h-6 bg-cyan-600 rounded-full flex items-center justify-center mr-2">
+              <i class="fas fa-robot text-xs"></i>
+            </div>
+            <div>
+              <p class="font-medium text-cyan-400">WormGPT:</p>
+              <p>${message}</p>
+            </div>
+          </div>
+        `;
+      }
+      chatContainer.appendChild(messageDiv);
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+    function quickCommand(command) {
+      chatInput.value = command;
+      chatInput.focus();
+    }
+    sendChat.addEventListener('click', () => {
+      const message = chatInput.value.trim();
+      if (message) {
+        addChatMessage('user', message);
+        // Simulate AI response
+        setTimeout(() => {
+          let response = '';
+          if (message.startsWith('/analyze')) {
+            const coin = message.split(' ')[1] || 'BTC';
+            response = `Analysis for ${coin}:<br><br>
+              • Current trend: <span class="text-green-400">Bullish</span><br>
+              • RSI: 42.5 (Neutral)<br>
+              • MACD: Bullish crossover detected<br>
+              • Support: $26,200<br>
+              • Resistance: $26,850<br><br>
+              Recommendation: Consider buying on pullbacks to support.`;
+          } else if (message.startsWith('/strategy')) {
+            const coin = message.split(' ')[1] || 'ETH';
+            response = `Trading strategy for ${coin}:<br><br>
+              <span class="font-medium">Scalping Strategy (5m timeframe)</span><br>
+              1. Buy when price breaks above VWAP with volume confirmation<br>
+              2. Set stop loss 0.5% below entry<br>
+              3. Take profit at 1:2 risk-reward ratio<br><br>
+              Current setup not optimal, wait for better entry.`;
+          } else if (message.startsWith('/news')) {
+            response = `Latest market news:<br><br>
+              • Bitcoin ETF approval rumors circulating<br>
+              • Ethereum network upgrade scheduled for next week<br>
+              • SEC delays decision on XRP lawsuit<br><br>
+              Market reaction: Mildly positive`;
+          } else if (message.startsWith('/help')) {
+            response = `Available commands:<br><br>
+              • /analyze [coin] - Get technical analysis<br>
+              • /strategy [coin] - Trading strategy<br>
+              • /news - Latest market news<br>
+              • /portfolio - Your holdings summary<br>
+              • /alert [condition] - Set price alert<br><br>
+              Ask anything else for general trading advice.`;
+          } else {
+            response = `I'm an AI trading assistant. For specific analysis, use commands like:<br>
+              • /analyze BTC<br>
+              • /strategy ETH<br>
+              • /news<br><br>
+              For your question "${message}", I recommend checking the 4h chart for confirmation before entering any trades.`;
+          }
+          addChatMessage('ai', response);
+        }, 800);
+        chatInput.value = '';
+      }
+    });
+    chatInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        sendChat.click();
+      }
+    });
+    // Alerts Functionality
+    function addAlert(type, message, color = 'green') {
+      const alertDiv = document.createElement('div');
+      alertDiv.className = `alert-item bg-gray-800 p-2 rounded-lg mb-2 border-l-4 ${color === 'green' ? 'border-green-500' : color === 'red' ? 'border-red-500' : 'border-blue-500'}`;
+      const now = new Date();
+      const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
+      alertDiv.innerHTML = `
+        <div class="flex justify-between text-sm">
+          <span class="font-medium ${color === 'green' ? 'text-green-400' : color === 'red' ? 'text-red-400' : 'text-blue-400'}">${type}</span>
+          <span class="text-gray-400 text-xs">${timeString}</span>
+        </div>
+        <p class="text-xs">${message}</p>
+      `;
+      const alertsContainer = document.querySelector('.bg-gray-900.rounded-lg.p-3.mb-3.h-40');
+      alertsContainer.insertBefore(alertDiv, alertsContainer.firstChild);
+      // Keep only 5 most recent alerts
+      if (alertsContainer.children.length > 5) {
+        alertsContainer.removeChild(alertsContainer.lastChild);
+      }
+      // Visual notification
+      if (color === 'green') {
+        document.querySelector('i.fa-bell').classList.add('text-green-400', 'animate-ping');
+        setTimeout(() => {
+          document.querySelector('i.fa-bell').classList.remove('text-green-400', 'animate-ping');
+        }, 1000);
+      } else if (color === 'red') {
+        document.querySelector('i.fa-bell').classList.add('text-red-400', 'animate-ping');
+        setTimeout(() => {
+          document.querySelector('i.fa-bell').classList.remove('text-red-400', 'animate-ping');
+        }, 1000);
+      }
+    }
+    // Simulate some alerts
+    setTimeout(() => {
+      addAlert('BUY', 'BTC/USDT - RSI 28 (Oversold)', 'green');
+    }, 2000);
+    setTimeout(() => {
+      addAlert('SELL', 'ETH/USDT - Resistance Breakout', 'red');
+    }, 5000);
+    setTimeout(() => {
+      addAlert('INFO', 'Market volatility increasing', 'blue');
+    }, 8000);
+    // Chart Implementation
+    const chartCanvas = document.getElementById('chartCanvas');
+    const chartTooltip = document.getElementById('chartTooltip');
+    // Generate random price data
+    function generatePriceData(count = 100, basePrice = 26500, volatility = 200) {
+      const data = [];
+      let currentPrice = basePrice;
+      let currentTime = new Date();
+      currentTime.setHours(currentTime.getHours() - count/4);
+      for (let i = 0; i < count; i++) {
+        const open = currentPrice;
+        const close = open + (Math.random() - 0.5) * volatility;
+        const high = Math.max(open, close) + Math.random() * volatility/2;
+        const low = Math.min(open, close) - Math.random() * volatility/2;
+        const volume = Math.floor(Math.random() * 100) + 50;
+        data.push({
+          x: new Date(currentTime),
+          o: open,
+          h: high,
+          l: low,
+          c: close,
+          v: volume
+        });
+        currentPrice = close;
+        currentTime = new Date(currentTime.getTime() + 15 * 60000); // Add 15 minutes
+      }
+      return data;
+    }
+    const priceData = generatePriceData();
+    const chart = new Chart(chartCanvas, {
+      type: 'bar',
+      data: {
+        datasets: [{
+          label: 'BTC/USDT',
+          data: priceData,
+          borderColor: 'rgba(6, 182, 212, 1)',
+          backgroundColor: (ctx) => {
+            const value = ctx.dataset.data[ctx.dataIndex];
+            return value.c >= value.o ? 'rgba(16, 185, 129, 0.8)' : 'rgba(239, 68, 68, 0.8)';
+          },
+          borderWidth: 1,
+          borderRadius: 2,
+          borderSkipped: false,
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            enabled: false,
+            external: (context) => {
+              const { chart, tooltip } = context;
+              const { dataIndex } = tooltip;
+              const dataset = chart.data.datasets[0];
+              const data = dataset.data[dataIndex];
+              if (tooltip.opacity === 0) {
+                chartTooltip.style.opacity = 0;
+                return;
+              }
+              chartTooltip.style.opacity = 1;
+              document.getElementById('tooltip-title').innerHTML =
+                `BTC/USDT - ${new Date(data.x).toLocaleTimeString()}`;
+              document.getElementById('tooltip-open').innerHTML =
+                `$${data.o.toFixed(2)} <span class="text-gray-400">(${((data.c - data.o)/data.o*100).toFixed(2)}%)</span>`;
+              document.getElementById('tooltip-high').innerHTML = `$${data.h.toFixed(2)}`;
+              document.getElementById('tooltip-low').innerHTML = `$${data.l.toFixed(2)}`;
+              document.getElementById('tooltip-close').innerHTML = `$${data.c.toFixed(2)}`;
+              document.getElementById('tooltip-volume').innerHTML = `${data.v} BTC`;
+              const position = chart.canvas.getBoundingClientRect();
+              chartTooltip.style.left = position.left + window.scrollX + tooltip.caretX + 'px';
+              chartTooltip.style.top = position.top + window.scrollY + tooltip.caretY + 'px';
+            }
+          },
+          zoom: {
+            zoom: {
+              wheel: {
+                enabled: true,
+              },
+              pinch: {
+                enabled: true
+              },
+              mode: 'x',
+            },
+            pan: {
+              enabled: true,
+              mode: 'x',
+            },
+            limits: {
+              x: { min: 'original', max: 'original' }
+            }
+          }
+        },
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'hour',
+              displayFormats: {
+                hour: 'HH:mm'
+              }
+            },
+            grid: {
+              color: 'rgba(55, 65, 81, 0.5)'
+            },
+            ticks: {
+              color: 'rgba(156, 163, 175, 1)'
+            }
+          },
+          y: {
+            grid: {
+              color: 'rgba(55, 65, 81, 0.5)'
+            },
+            ticks: {
+              color: 'rgba(156, 163, 175, 1)'
+            }
+          }
+        },
+        interaction: {
+          intersect: false,
+          mode: 'index',
+        }
+      }
+    });
+    // Timeframe buttons
+    document.querySelectorAll('.chart-timeframe').forEach(button => {
+      button.addEventListener('click', function() {
+        document.querySelectorAll('.chart-timeframe').forEach(btn => btn.classList.remove('active'));
+        this.classList.add('active');
+        // In a real app, this would fetch new data for the selected timeframe
+        const newData = generatePriceData(100, 26500, this.dataset.timeframe === '1d' ? 500 : 200);
+        chart.data.datasets[0].data = newData;
+        chart.update();
+      });
+    });
+    // Fullscreen chart
+    document.getElementById('fullscreenChart').addEventListener('click', function() {
+      if (!document.fullscreenElement) {
+        chartCanvas.requestFullscreen().then(() => {
+          chart.resize();
+        });
+      } else {
+        document.exitFullscreen();
+      }
+    });
+    // Simulate price updates
+    setInterval(() => {
+      const lastData = priceData[priceData.length - 1];
+      const newTime = new Date(lastData.x.getTime() + 15 * 60000);
+      const newPrice = lastData.c + (Math.random() - 0.5) * 100;
+      const newHigh = Math.max(newPrice, lastData.c) + Math.random() * 50;
+      const newLow = Math.min(newPrice, lastData.c) - Math.random() * 50;
+      const newVolume = Math.floor(Math.random() * 100) + 50;
+      priceData.push({
+        x: newTime,
+        o: lastData.c,
+        h: newHigh,
+        l: newLow,
+        c: newPrice,
+        v: newVolume
+      });
+      // Keep only last 100 data points
+      if (priceData.length > 100) {
+        priceData.shift();
+      }
+      chart.data.datasets[0].data = priceData;
+      chart.update();
+      // Random alerts
+      if (Math.random() > 0.97) {
+        const alertType = Math.random() > 0.5 ? 'BUY' : 'SELL';
+        const coin = ['BTC', 'ETH', 'XRP'][Math.floor(Math.random() * 3)];
+        const reason = ['RSI', 'MACD', 'Volume Spike', 'Trend Break'][Math.floor(Math.random() * 4)];
+        const value = Math.floor(Math.random() * 30) + (alertType === 'BUY' ? 10 : 60);
+        addAlert(
+          alertType,
+          `${coin}/USDT - ${reason} ${value}${reason === 'RSI' ? '' : reason === 'MACD' ? ' crossover' : ''}`,
+          alertType === 'BUY' ? 'green' : 'red'
+        );
+      }
+    }, 3000);
+  </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=WormGPT128/wormgpt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>