Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrade Pulse Bot | AI Trading Signals</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#3B82F6', | |
| }, | |
| secondary: { | |
| 500: '#6B7280', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Dashboard Overview --> | |
| <div class="lg:col-span-4"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h1 class="text-2xl font-bold text-primary-500 mb-6">AI Trading Signals Dashboard</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="trending-up" class="text-indigo-500 mr-2"></i> | |
| <span class="font-medium text-gray-700">Active Signals</span> | |
| </div> | |
| <div class="text-2xl font-bold mt-2">24</div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="bar-chart-2" class="text-green-500 mr-2"></i> | |
| <span class="font-medium text-gray-700">Win Rate</span> | |
| </div> | |
| <div class="text-2xl font-bold mt-2">76.5%</div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="activity" class="text-blue-500 mr-2"></i> | |
| <span class="font-medium text-gray-700">Sharpe Ratio</span> | |
| </div> | |
| <div class="text-2xl font-bold mt-2">1.82</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <div class="flex flex-wrap items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Market Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-primary-500 text-white rounded">Crypto</button> | |
| <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded">Forex</button> | |
| <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded">Stocks</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">BTC/USDT</div> | |
| <div class="font-bold">$42,875</div> | |
| <div class="text-green-500 text-sm">+2.34%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">ETH/USDT</div> | |
| <div class="font-bold">$2,345</div> | |
| <div class="text-green-500 text-sm">+1.56%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">EUR/USD</div> | |
| <div class="font-bold">1.0824</div> | |
| <div class="text-red-500 text-sm">-0.12%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">XAU/USD</div> | |
| <div class="font-bold">$2,034</div> | |
| <div class="text-green-500 text-sm">+0.78%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">SOL/USDT</div> | |
| <div class="font-bold">$102.34</div> | |
| <div class="text-red-500 text-sm">-1.23%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded shadow-xs"> | |
| <div class="text-xs text-gray-500">ADA/USDT</div> | |
| <div class="font-bold">$0.512</div> | |
| <div class="text-green-500 text-sm">+0.45%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Signals --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold">Live Trading Signals</h2> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-gray-100 border border-gray-200 rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option>All Assets</option> | |
| <option>Crypto</option> | |
| <option>Forex</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-500" style="pointer-events: none;"></i> | |
| </div> | |
| <button class="p-2 bg-primary-500 text-white rounded"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Signal</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confidence</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timeframe</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Analysis</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">BTC/USDT</div> | |
| <div class="text-xs text-gray-500">Binance</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 84%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">84%</span> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">15m</td> | |
| <td class="px-4 py-3 text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <button class="text-primary-500 hover:text-primary-700 flex items-center"> | |
| <i data-feather="eye" class="w-4 h-4 mr-1"></i> | |
| View | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-purple-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">ETH/USDT</div> | |
| <div class="text-xs text-gray-500">Binance</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">SELL</span> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">72%</span> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">1h</td> | |
| <td class="px-4 py-3 text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <button class="text-primary-500 hover:text-primary-700 flex items-center"> | |
| <i data-feather="eye" class="w-4 h-4 mr-1"></i> | |
| View | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">XAU/USD</div> | |
| <div class="text-xs text-gray-500">OANDA</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 91%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">91%</span> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">4h</td> | |
| <td class="px-4 py-3 text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <button class="text-primary-500 hover:text-primary-700 flex items-center"> | |
| <i data-feather="eye" class="w-4 h-4 mr-1"></i> | |
| View | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">EUR/USD</div> | |
| <div class="text-xs text-gray-500">OANDA</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">HOLD</span> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gray-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">65%</span> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">1d</td> | |
| <td class="px-4 py-3 text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <button class="text-primary-500 hover:text-primary-700 flex items-center"> | |
| <i data-feather="eye" class="w-4 h-4 mr-1"></i> | |
| View | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm" disabled>N/A</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> signals</div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">Previous</button> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">1</button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">2</button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">3</button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Signal Details & AI Analysis --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold mb-6">Signal Details</h2> | |
| <div class="bg-indigo-50 p-4 rounded-lg mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="font-medium">BTC/USDT</div> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-2">Binance • 15m • 84% Confidence</div> | |
| <div class="text-sm text-gray-500">Updated: 2 min ago</div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="activity" class="w-4 h-4 mr-2"></i> | |
| Trading Plan | |
| </h3> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <div class="bg-gray-50 p-2 rounded"> | |
| <div class="text-gray-500">Entry</div> | |
| <div class="font-medium">$42,850</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded"> | |
| <div class="text-gray-500">Stop</div> | |
| <div class="font-medium">$41,900</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded"> | |
| <div class="text-gray-500">Target</div> | |
| <div class="font-medium">$44,200</div> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded"> | |
| <div class="text-gray-500">Risk</div> | |
| <div class="font-medium">0.5%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4 mr-2"></i> | |
| Key Indicators | |
| </h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">RSI (14)</span> | |
| <span class="font-medium">28.5 (Oversold)</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">MACD</span> | |
| <span class="font-medium">Bullish Cross</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Volume</span> | |
| <span class="font-medium">+34% above avg</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2 flex items-center"> | |
| <i data-feather="cpu" class="w-4 h-4 mr-2"></i> | |
| AI Analysis | |
| </h3> | |
| <div class="bg-blue-50 p-3 rounded text-sm text-gray-700"> | |
| <p class="mb-2">Strong buy signal triggered by oversold RSI (28.5) combined with bullish MACD crossover. Volume spike confirms accumulation. Sentiment score of 0.82 (positive) from news and social media.</p> | |
| <p class="text-xs italic text-gray-500">Note: This is not financial advice. Past performance is not indicative of future results.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |