Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrade AI - Intelligent Portfolio Management</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); | |
| } | |
| .blur-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .risk-moderate { | |
| background: linear-gradient(90deg, #f59e0b 0%, #f59e0b 50%, #10b981 50%, #10b981 100%); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| } | |
| .social-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .portfolio-item:hover { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="gradient-bg fixed top-0 left-0 w-full h-1/2 -z-10"></div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-white text-blue-600 p-2 rounded-lg"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold">QuantumTrade AI</h1> | |
| <p class="text-blue-200">Your intelligent trading assistant</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="absolute -top-2 -right-2 h-4 w-4 bg-green-400 rounded-full pulse"></div> | |
| <button class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium flex items-center space-x-2"> | |
| <span>Active</span> | |
| <i class="fas fa-caret-down"></i> | |
| </button> | |
| </div> | |
| <button class="bg-blue-700 hover:bg-blue-600 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Portfolio Summary --> | |
| <div class="lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Portfolio Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-sm">1D</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">1W</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">1M</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">1Y</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <p class="text-gray-400 text-sm">Total Value</p> | |
| <p class="text-2xl font-bold">$124,568.42</p> | |
| <p class="text-green-400 text-sm">+2.34% <span class="text-gray-400">today</span></p> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <p class="text-gray-400 text-sm">Gain/Loss</p> | |
| <p class="text-2xl font-bold text-green-400">+$8,742.15</p> | |
| <p class="text-green-400 text-sm">+7.54% <span class="text-gray-400">all time</span></p> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <p class="text-gray-400 text-sm">Risk Profile</p> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-full h-2 rounded-full risk-moderate"></div> | |
| </div> | |
| <p class="text-sm mt-2">Moderate-Aggressive</p> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="portfolioChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">AI Recommendations</h2> | |
| <span class="text-xs bg-blue-600 px-2 py-1 rounded">Updated 2 min ago</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="blur-card rounded-lg p-4 border border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Buy Opportunity</p> | |
| <p class="text-sm text-gray-400">High confidence (87%)</p> | |
| </div> | |
| <span class="bg-green-500 text-white px-2 py-1 rounded text-xs">STRONG BUY</span> | |
| </div> | |
| <p class="text-lg font-bold mt-2">TSLA</p> | |
| <p class="text-sm mt-1">Social sentiment +32%, Technical breakout detected</p> | |
| <div class="flex justify-between mt-3"> | |
| <button class="bg-green-600 hover:bg-green-500 px-3 py-1 rounded text-sm w-full mr-2">Execute</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm w-full">Details</button> | |
| </div> | |
| </div> | |
| <div class="blur-card rounded-lg p-4 border border-yellow-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Partial Sell</p> | |
| <p class="text-sm text-gray-400">Medium confidence (65%)</p> | |
| </div> | |
| <span class="bg-yellow-500 text-white px-2 py-1 rounded text-xs">SELL 30%</span> | |
| </div> | |
| <p class="text-lg font-bold mt-2">NVDA</p> | |
| <p class="text-sm mt-1">Overbought signal, Profit taking recommended</p> | |
| <div class="flex justify-between mt-3"> | |
| <button class="bg-yellow-600 hover:bg-yellow-500 px-3 py-1 rounded text-sm w-full mr-2">Execute</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm w-full">Details</button> | |
| </div> | |
| </div> | |
| <div class="blur-card rounded-lg p-4 border border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Rebalance</p> | |
| <p class="text-sm text-gray-400">Low confidence (42%)</p> | |
| </div> | |
| <span class="bg-blue-500 text-white px-2 py-1 rounded text-xs">MONITOR</span> | |
| </div> | |
| <p class="text-lg font-bold mt-2">Portfolio</p> | |
| <p class="text-sm mt-1">Tech overweight, Consider rebalancing to 35%</p> | |
| <div class="flex justify-between mt-3"> | |
| <button class="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-sm w-full mr-2">Optimize</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm w-full">Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Data Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Current Holdings --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Current Holdings</h2> | |
| <button class="text-blue-400 text-sm">View All</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="portfolio-item flex justify-between items-center p-3 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-blue-600 p-2 rounded-lg"> | |
| <i class="fab fa-apple text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">AAPL</p> | |
| <p class="text-sm text-gray-400">Apple Inc.</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$12,345.67</p> | |
| <p class="text-sm text-green-400">+2.1%</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-item flex justify-between items-center p-3 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-green-600 p-2 rounded-lg"> | |
| <i class="fab fa-google text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">GOOGL</p> | |
| <p class="text-sm text-gray-400">Alphabet Inc.</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$9,876.54</p> | |
| <p class="text-sm text-green-400">+1.4%</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-item flex justify-between items-center p-3 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-yellow-500 p-2 rounded-lg"> | |
| <i class="fas fa-car text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">TSLA</p> | |
| <p class="text-sm text-gray-400">Tesla Inc.</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$15,678.90</p> | |
| <p class="text-sm text-red-400">-0.8%</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-item flex justify-between items-center p-3 rounded-lg cursor-pointer transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-purple-600 p-2 rounded-lg"> | |
| <i class="fas fa-microchip text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">NVDA</p> | |
| <p class="text-sm text-gray-400">NVIDIA Corp.</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">$8,765.43</p> | |
| <p class="text-sm text-green-400">+3.2%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Watch --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Market Watch</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-sm">Indices</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Sectors</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">S&P 500</p> | |
| <p class="text-sm text-gray-400">INDEXSP: .INX</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">4,567.89</p> | |
| <p class="text-sm text-green-400">+0.67%</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">NASDAQ</p> | |
| <p class="text-sm text-gray-400">INDEXNASDAQ: .IXIC</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">14,321.09</p> | |
| <p class="text-sm text-green-400">+0.89%</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">DOW JONES</p> | |
| <p class="text-sm text-gray-400">INDEXDJX: .DJI</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">34,567.89</p> | |
| <p class="text-sm text-red-400">-0.12%</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium">VIX</p> | |
| <p class="text-sm text-gray-400">CBOE Volatility</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">15.67</p> | |
| <p class="text-sm text-red-400">-2.34%</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Tech</span> | |
| <span>+1.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 38%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400 mt-3 mb-1"> | |
| <span>Finance</span> | |
| <span>-0.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 22%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400 mt-3 mb-1"> | |
| <span>Healthcare</span> | |
| <span>+0.7%</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> | |
| </div> | |
| <!-- Social Sentiment --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Social Sentiment</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-sm">All</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Hot</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="social-card bg-gray-700 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="bg-red-500 text-white px-2 py-0.5 rounded text-xs">TRENDING</span> | |
| <span class="text-xs text-gray-400">Twitter • 12K posts</span> | |
| </div> | |
| <p class="font-medium">$TSLA</p> | |
| <p class="text-sm text-gray-300">Elon Musk announces new AI breakthrough at Tesla - sentiment score +87</p> | |
| <div class="flex justify-between mt-3"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-500 px-2 py-0.5 rounded">AI</span> | |
| <span class="text-xs bg-green-500 px-2 py-0.5 rounded">TECH</span> | |
| </div> | |
| <span class="text-xs text-gray-400">15 min ago</span> | |
| </div> | |
| </div> | |
| <div class="social-card bg-gray-700 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="bg-yellow-500 text-white px-2 py-0.5 rounded text-xs">WARNING</span> | |
| <span class="text-xs text-gray-400">Reddit • 8.2K comments</span> | |
| </div> | |
| <p class="font-medium">$AMZN</p> | |
| <p class="text-sm text-gray-300">Labor disputes spreading to more warehouses - sentiment score -42</p> | |
| <div class="flex justify-between mt-3"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-red-500 px-2 py-0.5 rounded">LABOR</span> | |
| <span class="text-xs bg-purple-500 px-2 py-0.5 rounded">RETAIL</span> | |
| </div> | |
| <span class="text-xs text-gray-400">1 hour ago</span> | |
| </div> | |
| </div> | |
| <div class="social-card bg-gray-700 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="bg-green-500 text-white px-2 py-0.5 rounded text-xs">NEW</span> | |
| <span class="text-xs text-gray-400">YouTube • 1.2M views</span> | |
| </div> | |
| <p class="font-medium">$META</p> | |
| <p class="text-sm text-gray-300">New VR headset demo goes viral - sentiment score +65</p> | |
| <div class="flex justify-between mt-3"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-pink-500 px-2 py-0.5 rounded">VR</span> | |
| <span class="text-xs bg-indigo-500 px-2 py-0.5 rounded">SOCIAL</span> | |
| </div> | |
| <span class="text-xs text-gray-400">3 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Strategy Panel --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">AI Strategy Configuration</h2> | |
| <button class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-medium">Save Settings</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Risk Tolerance</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <input type="range" min="1" max="10" value="7" class="w-full accent-blue-500"> | |
| <div class="flex justify-between text-xs mt-2"> | |
| <span>Conservative</span> | |
| <span>Aggressive</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Time Horizon</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2"> | |
| <option>Short-term (1-3 months)</option> | |
| <option selected>Medium-term (6-12 months)</option> | |
| <option>Long-term (1-3 years)</option> | |
| <option>Very long-term (5+ years)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Sector Focus</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2"> | |
| <option selected>Balanced</option> | |
| <option>Technology</option> | |
| <option>Healthcare</option> | |
| <option>Finance</option> | |
| <option>Energy</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Social Media Weight</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <input type="range" min="0" max="100" value="65" class="w-full accent-blue-500"> | |
| <div class="flex justify-between text-xs mt-2"> | |
| <span>Low</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Stop-Loss Protection</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center space-x-2"> | |
| <input type="checkbox" id="stopLoss" checked class="h-4 w-4 accent-blue-500"> | |
| <label for="stopLoss">Enable automatic stop-loss</label> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-gray-400 text-sm mb-1">Trigger at:</label> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2"> | |
| <option>5% decline</option> | |
| <option selected>7% decline</option> | |
| <option>10% decline</option> | |
| <option>15% decline</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Profit Taking</label> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center space-x-2"> | |
| <input type="checkbox" id="profitTake" checked class="h-4 w-4 accent-blue-500"> | |
| <label for="profitTake">Enable automatic profit taking</label> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-gray-400 text-sm mb-1">Take profit at:</label> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2"> | |
| <option>10% gain</option> | |
| <option selected>15% gain</option> | |
| <option>20% gain</option> | |
| <option>25% gain</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Portfolio Chart | |
| const portfolioCtx = document.getElementById('portfolioChart').getContext('2d'); | |
| const portfolioChart = new Chart(portfolioCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [{ | |
| label: 'Portfolio Value', | |
| data: [105000, 108000, 112000, 115000, 117000, 120000, 124568], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| fill: true, | |
| tension: 0.4 | |
| }, { | |
| label: 'S&P 500 Benchmark', | |
| data: [100000, 102000, 104000, 106000, 108000, 110000, 112000], | |
| borderColor: '#94a3b8', | |
| backgroundColor: 'rgba(148, 163, 184, 0.1)', | |
| fill: true, | |
| tension: 0.4, | |
| borderDash: [5, 5] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| color: '#f1f5f9' | |
| } | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#f1f5f9' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#f1f5f9', | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| }, | |
| interaction: { | |
| mode: 'nearest', | |
| axis: 'x', | |
| intersect: false | |
| } | |
| } | |
| }); | |
| // Toggle active status | |
| document.querySelectorAll('.portfolio-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| // In a real app, this would show detailed info about the holding | |
| console.log('Selected holding:', this.querySelector('p.font-medium').textContent); | |
| }); | |
| }); | |
| // Social card interactions | |
| document.querySelectorAll('.social-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would show detailed sentiment analysis | |
| console.log('Selected social trend:', this.querySelector('p.font-medium').textContent); | |
| }); | |
| }); | |
| // Recommendation buttons | |
| document.querySelectorAll('.bg-green-600').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| alert('Buy order would be executed here'); | |
| }); | |
| }); | |
| document.querySelectorAll('.bg-yellow-600').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| alert('Sell order would be executed here'); | |
| }); | |
| }); | |
| document.querySelectorAll('.bg-blue-600').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| alert('Rebalancing would occur here'); | |
| }); | |
| }); | |
| </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=vnsavitri/quantumtrade-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |