Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Financial Dashboard</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #0f0f13 0%, #1a1a24 100%); | |
| min-height: 100vh; | |
| overflow-x: auto; | |
| } | |
| .dashboard-container { | |
| backdrop-filter: blur(10px); | |
| } | |
| .panel { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(30, 30, 40, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(8px); | |
| overflow: hidden; | |
| position: relative; | |
| height: 420px; /* Increased height */ | |
| } | |
| .panel:hover { | |
| background: rgba(40, 40, 50, 0.8); | |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); | |
| } | |
| .panel::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); | |
| } | |
| .panel.active { | |
| background: rgba(45, 45, 60, 0.85); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .panel.active::before { | |
| background: linear-gradient(90deg, transparent, rgba(100, 150, 255, 0.3), transparent); | |
| } | |
| .vertical-text { | |
| writing-mode: vertical-rl; | |
| text-orientation: mixed; | |
| } | |
| .content { | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| } | |
| .panel.active .content, .panel:hover .content { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .title-vertical { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity 0.3s ease; | |
| } | |
| .panel.active .title-vertical, .panel:hover .title-vertical { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .btn-action { | |
| background: linear-gradient(135deg, rgba(80, 120, 255, 0.8), rgba(100, 150, 255, 0.8)); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-action:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(100, 150, 255, 0.3); | |
| } | |
| .blob { | |
| position: absolute; | |
| filter: blur(40px); | |
| opacity: 0.15; | |
| z-index: -1; | |
| border-radius: 50%; | |
| } | |
| .blob-1 { | |
| width: 200px; | |
| height: 200px; | |
| background: #4f46e5; | |
| top: 20%; | |
| left: 10%; | |
| } | |
| .blob-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: #10b981; | |
| bottom: 10%; | |
| right: 15%; | |
| } | |
| /* Panel width transitions */ | |
| .panel { | |
| width: 4rem; /* 64px - collapsed state */ | |
| } | |
| .panel.active, .panel:hover { | |
| width: 280px; /* Increased expanded width */ | |
| } | |
| /* Custom scrollbar - More elegant version */ | |
| .content::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .content::-webkit-scrollbar-track { | |
| background: transparent; | |
| border-radius: 10px; | |
| margin: 8px 0; | |
| } | |
| .content::-webkit-scrollbar-thumb { | |
| background: rgba(100, 150, 255, 0.4); | |
| border-radius: 10px; | |
| transition: background 0.3s ease; | |
| } | |
| .content::-webkit-scrollbar-thumb:hover { | |
| background: rgba(100, 150, 255, 0.6); | |
| } | |
| /* Ensure content spacing */ | |
| .panel-content { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .panel-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding-bottom: 1rem; | |
| margin-right: -0.5rem; /* Compensate for scrollbar */ | |
| padding-right: 0.5rem; /* Add space for scrollbar */ | |
| } | |
| /* Smooth scrolling */ | |
| .panel-body { | |
| scroll-behavior: smooth; | |
| } | |
| /* Hide scrollbar when not needed */ | |
| .panel-body { | |
| -ms-overflow-style: none; /* IE and Edge */ | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .panel-body::-webkit-scrollbar { | |
| display: none; /* Chrome, Safari and Opera */ | |
| } | |
| /* Better spacing for content */ | |
| .panel-body > * + * { | |
| margin-top: 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-200 p-8"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="max-w-7xl mx-auto"> | |
| <h1 class="text-3xl font-bold mb-2">Financial Dashboard</h1> | |
| <p class="text-gray-400 mb-8">Interactive financial tools at your fingertips</p> | |
| <div class="dashboard-container p-4 rounded-xl"> | |
| <div class="flex space-x-4 overflow-x-auto pb-4"> | |
| <!-- Live Pricing Panel (active by default) --> | |
| <div class="panel active flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">LIVE PRICING</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Live Pricing</h3> | |
| <p class="text-gray-300 text-sm mb-6">Real-time stock prices, indices, and market data with customizable alerts and thresholds.</p> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>AAPL</span> | |
| <span class="text-green-400">+1.24%</span> | |
| </div> | |
| <div class="text-lg font-medium">$189.37</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>MSFT</span> | |
| <span class="text-green-400">+0.87%</span> | |
| </div> | |
| <div class="text-lg font-medium">$328.39</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>GOOGL</span> | |
| <span class="text-red-400">-0.32%</span> | |
| </div> | |
| <div class="text-lg font-medium">$142.56</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>AMZN</span> | |
| <span class="text-green-400">+0.65%</span> | |
| </div> | |
| <div class="text-lg font-medium">$125.98</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>TSLA</span> | |
| <span class="text-red-400">-1.12%</span> | |
| </div> | |
| <div class="text-lg font-medium">$248.50</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-chart-line mr-2"></i> View Charts | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analyst Estimates Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">ANALYST ESTIMATES</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Analyst Estimates</h3> | |
| <p class="text-gray-300 text-sm mb-6">Consensus estimates, price targets, and recommendations from top analysts.</p> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-400">Buy</span> | |
| <div class="w-3/4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="text-xs">65%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-400">Hold</span> | |
| <div class="w-3/4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| <span class="text-xs">25%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-400">Sell</span> | |
| <div class="w-3/4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| <span class="text-xs">10%</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="text-xs text-gray-400 mb-1">Average Price Target</div> | |
| <div class="text-lg font-medium">$210.50</div> | |
| <div class="text-xs text-green-400 mt-1">+11.2% upside</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors mt-4"> | |
| <div class="text-xs text-gray-400 mb-1">High / Low Target</div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <div class="text-sm font-medium">$245.00</div> | |
| <div class="text-xs text-green-400">+29.4%</div> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">$175.00</div> | |
| <div class="text-xs text-red-400">-7.6%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-analytics mr-2"></i> View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Company Financials Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">COMPANY FINANCIALS</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Company Financials</h3> | |
| <p class="text-gray-300 text-sm mb-6">Detailed financial statements, ratios, and key metrics for comprehensive analysis.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">Revenue</div> | |
| <div class="text-lg font-medium">$394.3B</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">EPS</div> | |
| <div class="text-lg font-medium">$6.11</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">P/E</div> | |
| <div class="text-lg font-medium">31.0</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">ROE</div> | |
| <div class="text-lg font-medium">147%</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">Gross Margin</div> | |
| <div class="text-lg font-medium">42.3%</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-3 rounded hover:bg-opacity-70 transition-colors"> | |
| <div class="text-gray-400 text-xs">FCF</div> | |
| <div class="text-lg font-medium">$90.2B</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="text-xs text-gray-400 mb-1">Next Earnings Date</div> | |
| <div class="text-lg font-medium">Jul 27, 2023</div> | |
| <div class="text-xs text-gray-400 mt-1">Estimated EPS: $1.19</div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-file-invoice-dollar mr-2"></i> View Reports | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Peer Analysis Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">PEER ANALYSIS</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Peer Analysis</h3> | |
| <p class="text-gray-300 text-sm mb-6">Compare performance metrics against industry peers and competitors.</p> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">AAPL</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+12.5%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">MSFT</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+9.3%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">GOOGL</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+7.1%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">AMZN</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+5.8%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">META</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+4.2%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 text-xs">NVDA</div> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs">+18.7%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-users mr-2"></i> Compare | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Historical Earnings Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">HISTORICAL EARNINGS</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Historical Earnings</h3> | |
| <p class="text-gray-300 text-sm mb-6">Track past earnings performance, surprises, and guidance trends.</p> | |
| <div class="mb-6"> | |
| <div class="flex items-end h-24 mb-2 space-x-2"> | |
| <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 30%" title="Q3 2022: $1.29"></div> | |
| <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 45%" title="Q4 2022: $1.88"></div> | |
| <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 60%" title="Q1 2023: $1.52"></div> | |
| <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 75%" title="Q2 2023: $1.26"></div> | |
| <div class="w-5 bg-blue-500 rounded-t hover:bg-blue-400 transition-colors" style="height: 90%" title="Q3 2023: $1.46"></div> | |
| <div class="w-5 bg-green-500 rounded-t hover:bg-green-400 transition-colors" style="height: 100%" title="Q4 2023: $1.89 (+7.3%)"></div> | |
| </div> | |
| <div class="flex text-xs text-gray-400 space-x-2"> | |
| <div class="w-5 text-center">Q3</div> | |
| <div class="w-5 text-center">Q4</div> | |
| <div class="w-5 text-center">Q1</div> | |
| <div class="w-5 text-center">Q2</div> | |
| <div class="w-5 text-center">Q3</div> | |
| <div class="w-5 text-center">Q4</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors mb-4"> | |
| <div class="text-xs text-gray-400 mb-1">Last Earnings Surprise</div> | |
| <div class="text-lg font-medium text-green-400">+7.3%</div> | |
| <div class="text-xs mt-1">Beat consensus by $0.12</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg hover:bg-opacity-70 transition-colors"> | |
| <div class="text-xs text-gray-400 mb-1">Next Quarter Guidance</div> | |
| <div class="text-lg font-medium">$1.19 - $1.31</div> | |
| <div class="text-xs text-gray-400 mt-1">Consensus: $1.24</div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-history mr-2"></i> View History | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Insider Transactions Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">INSIDER TRANSACTIONS</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Insider Transactions</h3> | |
| <p class="text-gray-300 text-sm mb-6">Monitor buying and selling activity by company executives and directors.</p> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">T. Cook</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right">+5,000</div> | |
| </div> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">L. Maestri</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right text-red-400">-10,000</div> | |
| </div> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">D. Williams</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right">+2,500</div> | |
| </div> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">K. Adams</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right text-red-400">-7,500</div> | |
| </div> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">J. Riccio</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right">+3,750</div> | |
| </div> | |
| <div class="flex items-center text-xs hover:bg-gray-800 hover:bg-opacity-50 p-2 rounded transition-colors"> | |
| <div class="w-24 truncate">S. O'Brien</div> | |
| <div class="flex-1 px-2"> | |
| <div class="bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div class="w-16 text-right text-red-400">-6,250</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-user-tie mr-2"></i> View Activity | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Updates Panel --> | |
| <div class="panel flex-shrink-0 rounded-xl relative"> | |
| <div class="title-vertical"> | |
| <span class="vertical-text font-medium text-sm tracking-wider">EMAIL UPDATES</span> | |
| </div> | |
| <div class="content"> | |
| <div class="panel-content"> | |
| <div class="panel-body"> | |
| <h3 class="text-xl font-semibold mb-4">Email Updates</h3> | |
| <p class="text-gray-300 text-sm mb-6">Subscribe to customized email alerts for news, earnings, and price movements.</p> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg mb-4 hover:bg-opacity-70 transition-colors"> | |
| <div class="flex items-center mb-3"> | |
| <input type="checkbox" id="price-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500" checked> | |
| <label for="price-alerts" class="text-sm">Price Alerts</label> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <input type="checkbox" id="earnings-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500" checked> | |
| <label for="earnings-alerts" class="text-sm">Earnings Alerts</label> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <input type="checkbox" id="news-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500"> | |
| <label for="news-alerts" class="text-sm">News Alerts</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="insider-alerts" class="mr-3 rounded bg-gray-700 border-gray-600 focus:ring-blue-500"> | |
| <label for="insider-alerts" class="text-sm">Insider Trading Alerts</label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email-frequency" class="block text-xs text-gray-400 mb-2">Frequency</label> | |
| <select id="email-frequency" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 text-sm rounded-lg p-2 hover:bg-opacity-70 transition-colors"> | |
| <option>Daily</option> | |
| <option>Weekly</option> | |
| <option>Monthly</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email-address" class="block text-xs text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="email-address" class="w-full bg-gray-800 bg-opacity-50 border border-gray-700 text-sm rounded-lg p-2 hover:bg-opacity-70 transition-colors" placeholder="[email protected]"> | |
| </div> | |
| </div> | |
| <button class="btn-action text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center w-full mt-4"> | |
| <i class="fas fa-envelope mr-2"></i> Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-500 text-sm"> | |
| <p>Interactive financial dashboard with expandable panels. Hover over any panel to view details.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Make the first panel active by default | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const panels = document.querySelectorAll('.panel'); | |
| // Set first panel as active initially | |
| panels[0].classList.add('active'); | |
| panels.forEach(panel => { | |
| panel.addEventListener('mouseenter', function() { | |
| // Remove active class from all panels except the one being hovered | |
| panels.forEach(p => { | |
| if (p !== this) p.classList.remove('active'); | |
| }); | |
| // Add active class to hovered panel | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // When mouse leaves the dashboard, keep the first panel active | |
| const dashboardContainer = document.querySelector('.dashboard-container'); | |
| dashboardContainer.addEventListener('mouseleave', function() { | |
| panels.forEach(p => p.classList.remove('active')); | |
| panels[0].classList.add('active'); | |
| }); | |
| // Smooth scroll to top when panel is activated | |
| panels.forEach(panel => { | |
| panel.addEventListener('mouseenter', function() { | |
| const content = this.querySelector('.content'); | |
| if (content) { | |
| content.scrollTop = 0; | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=Gavin-yang/gavin" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |