Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Agent Stock Trading System</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%, #1e40af 100%); | |
| } | |
| .card-hover: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); | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .signal-buy { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| border-left: 4px solid #10b981; | |
| } | |
| .signal-sell { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| border-left: 4px solid #ef4444; | |
| } | |
| .signal-hold { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| } | |
| .risk-indicator { | |
| transition: all 0.3s ease; | |
| } | |
| .risk-indicator:hover { | |
| transform: scale(1.05); | |
| } | |
| .agent-avatar { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid white; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <span class="text-xl font-bold">AlphaTrade AI</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-blue-200 transition">Dashboard</a> | |
| <a href="#" class="hover:text-blue-200 transition">Agents</a> | |
| <a href="#" class="hover:text-blue-200 transition">Portfolio</a> | |
| <a href="#" class="hover:text-blue-200 transition">Analytics</a> | |
| <a href="#" class="hover:text-blue-200 transition">Settings</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"> | |
| <i class="fas fa-play mr-2"></i>Start System | |
| </button> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- System Status --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">System Overview</h2> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-sm text-gray-600">Running</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-600">Mode:</span> | |
| <select class="ml-2 bg-gray-100 rounded px-2 py-1 text-sm"> | |
| <option>Long-term</option> | |
| <option>Short-term</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <!-- Performance Card --> | |
| <div class="bg-blue-50 rounded-lg p-4 flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Portfolio Return</p> | |
| <p class="text-2xl font-bold text-blue-600">+12.4%</p> | |
| <p class="text-xs text-gray-500">YTD</p> | |
| </div> | |
| </div> | |
| <!-- Risk Card --> | |
| <div class="bg-red-50 rounded-lg p-4 flex items-center"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-red-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Risk Level</p> | |
| <p class="text-2xl font-bold text-red-600">Medium</p> | |
| <p class="text-xs text-gray-500">Sharpe: 1.2</p> | |
| </div> | |
| </div> | |
| <!-- Capital Card --> | |
| <div class="bg-green-50 rounded-lg p-4 flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-wallet text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Capital</p> | |
| <p class="text-2xl font-bold text-green-600">$1,245,000</p> | |
| <p class="text-xs text-gray-500">+$24,500 today</p> | |
| </div> | |
| </div> | |
| <!-- Transactions Card --> | |
| <div class="bg-purple-50 rounded-lg p-4 flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-exchange-alt text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Today's Trades</p> | |
| <p class="text-2xl font-bold text-purple-600">14</p> | |
| <p class="text-xs text-gray-500">8 buys, 6 sells</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent Dashboard --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Agent Dashboard</h2> | |
| <div class="flex mb-6 space-x-4 overflow-x-auto pb-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">All Agents</button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition">Analysts</button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition">Manager</button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition">Trader</button> | |
| <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition">Risk</button> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <!-- Warren Buffet Agent --> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Warren_Buffett_at_the_2015_SelectUSA_Investment_Summit.jpg" class="agent-avatar"> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Warren Buffet</h3> | |
| <p class="text-sm text-gray-500">Value Investing</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Accuracy</span> | |
| <span class="font-bold">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-600 mb-2">Current Signals:</p> | |
| <div class="space-y-2"> | |
| <div class="signal-buy p-2 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">AAPL</span> | |
| <span class="text-green-600 font-bold">BUY</span> | |
| </div> | |
| <p class="text-xs text-gray-500">P/E: 24.5, P/B: 1.2</p> | |
| </div> | |
| <div class="signal-hold p-2 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">MSFT</span> | |
| <span class="text-blue-600 font-bold">HOLD</span> | |
| </div> | |
| <p class="text-xs text-gray-500">P/E: 32.1, P/B: 1.8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-50 hover:bg-blue-100 text-blue-600 py-2 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Charlie Munger Agent --> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Charlie_Munger_at_Berkshire_Hathaway.jpg" class="agent-avatar"> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Charlie Munger</h3> | |
| <p class="text-sm text-gray-500">Quality Investing</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Accuracy</span> | |
| <span class="font-bold">82%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-600 mb-2">Current Signals:</p> | |
| <div class="space-y-2"> | |
| <div class="signal-buy p-2 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">GOOGL</span> | |
| <span class="text-green-600 font-bold">BUY</span> | |
| </div> | |
| <p class="text-xs text-gray-500">ROE: 18%, D/E: 0.2</p> | |
| </div> | |
| <div class="signal-sell p-2 rounded"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">TSLA</span> | |
| <span class="text-red-600 font-bold">SELL</span> | |
| </div> | |
| <p class="text-xs text-gray-500">ROE: 8%, D/E: 0.4</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-50 hover:bg-blue-100 text-blue-600 py-2 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Manager Agent --> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class | |
| </html> |