Spaces:

Really-amin
/

Datasourceforcryptocurrency

Paused

App Files Files Community

Really-amin commited on 27 days ago

Commit

250b128

verified ·

1 Parent(s): dd7ffbd

Upload 196 files

Browse files

Files changed (5) hide show

api_server_extended.py +129 -2
app.py +4 -14
index.html +407 -443
static/css/main.css +802 -568
static/js/app.js +0 -0

api_server_extended.py CHANGED Viewed

@@ -2082,8 +2082,9 @@ async def get_defi():
 # ===== News Endpoint (compatible with UI) =====
 @app.get("/api/news")
 async def get_news_api(limit: int = 20):
-    """Get news (compatible with UI)"""
     try:
         conn = sqlite3.connect(str(DB_PATH))
         cursor = conn.cursor()
         cursor.execute("""
@@ -2105,12 +2106,50 @@ async def get_news_api(limit: int = 20):
                     pass
             results.append(record)
         return {
             "success": True,
             "news": results,
-            "count": len(results)
         }
     except Exception as e:
         return {
             "success": False,
             "news": [],
@@ -2667,6 +2706,94 @@ async def get_sentiment_history(
         raise HTTPException(status_code=500, detail=f"Failed to fetch sentiment history: {str(e)}")
 @app.get("/api/news/latest")
 async def get_latest_news(
     limit: int = 20,

 # ===== News Endpoint (compatible with UI) =====
 @app.get("/api/news")
 async def get_news_api(limit: int = 20):
+    """Get news (compatible with UI) - with external API fallback"""
     try:
+        # Try to get news from database first
         conn = sqlite3.connect(str(DB_PATH))
         cursor = conn.cursor()
         cursor.execute("""
                     pass
             results.append(record)
+        # If database is empty, fetch from external API
+        if len(results) == 0:
+            logger.info("No news in database, fetching from external API...")
+            try:
+                # Get API key from environment
+                cryptocompare_api_key = os.getenv("CRYPTOCOMPARE_API_KEY", "968a5e25552b4cb5ba3280361d8444ab")
+                async with httpx.AsyncClient(timeout=10.0) as client:
+                    # Try CryptoCompare News API with API key
+                    response = await client.get(
+                        "https://min-api.cryptocompare.com/data/v2/news/?lang=EN",
+                        headers={
+                            "User-Agent": "Mozilla/5.0",
+                            "authorization": f"Apikey {cryptocompare_api_key}"
+                        }
+                    )
+                    if response.status_code == 200:
+                        data = response.json()
+                        if data.get("Data"):
+                            for article in data["Data"][:limit]:
+                                results.append({
+                                    "id": article.get("id"),
+                                    "title": article.get("title", ""),
+                                    "content": article.get("body", "")[:500],
+                                    "url": article.get("url", ""),
+                                    "source": article.get("source", "CryptoCompare"),
+                                    "sentiment_label": None,
+                                    "sentiment_confidence": None,
+                                    "related_symbols": article.get("categories", "").split("|") if article.get("categories") else [],
+                                    "published_date": datetime.fromtimestamp(article.get("published_on", 0)).isoformat() if article.get("published_on") else None,
+                                    "analyzed_at": datetime.now().isoformat()
+                                })
+                            logger.info(f"Fetched {len(results)} news articles from CryptoCompare")
+            except Exception as api_error:
+                logger.warning(f"External news API failed: {api_error}")
         return {
             "success": True,
             "news": results,
+            "count": len(results),
+            "source": "database" if len(results) > 0 and rows else "external_api"
         }
     except Exception as e:
+        logger.error(f"Error in get_news_api: {e}")
         return {
             "success": False,
             "news": [],
         raise HTTPException(status_code=500, detail=f"Failed to fetch sentiment history: {str(e)}")
+@app.post("/api/news/fetch")
+async def fetch_and_save_news(limit: int = 50):
+    """Fetch news from CryptoCompare API and save to database"""
+    try:
+        cryptocompare_api_key = os.getenv("CRYPTOCOMPARE_API_KEY", "968a5e25552b4cb5ba3280361d8444ab")
+        async with httpx.AsyncClient(timeout=15.0) as client:
+            response = await client.get(
+                "https://min-api.cryptocompare.com/data/v2/news/?lang=EN",
+                headers={
+                    "User-Agent": "Mozilla/5.0",
+                    "authorization": f"Apikey {cryptocompare_api_key}"
+                }
+            )
+            if response.status_code != 200:
+                return {
+                    "success": False,
+                    "error": f"CryptoCompare API returned {response.status_code}",
+                    "saved": 0
+                }
+            data = response.json()
+            if not data.get("Data"):
+                return {
+                    "success": False,
+                    "error": "No news data returned from API",
+                    "saved": 0
+                }
+            # Save to database
+            conn = sqlite3.connect(str(DB_PATH))
+            cursor = conn.cursor()
+            saved_count = 0
+            for article in data["Data"][:limit]:
+                try:
+                    # Check if article already exists
+                    cursor.execute("SELECT id FROM news_articles WHERE url = ?", (article.get("url", ""),))
+                    if cursor.fetchone():
+                        continue  # Skip duplicates
+                    # Extract related symbols from categories
+                    categories = article.get("categories", "").split("|") if article.get("categories") else []
+                    related_symbols_json = json.dumps(categories)
+                    # Insert news article
+                    cursor.execute("""
+                        INSERT INTO news_articles (
+                            title, content, url, source,
+                            related_symbols, published_date, analyzed_at
+                        ) VALUES (?, ?, ?, ?, ?, ?, ?)
+                    """, (
+                        article.get("title", ""),
+                        article.get("body", "")[:1000],  # Limit content length
+                        article.get("url", ""),
+                        article.get("source", "CryptoCompare"),
+                        related_symbols_json,
+                        datetime.fromtimestamp(article.get("published_on", 0)).isoformat() if article.get("published_on") else None,
+                        datetime.now().isoformat()
+                    ))
+                    saved_count += 1
+                except Exception as e:
+                    logger.warning(f"Error saving article: {e}")
+                    continue
+            conn.commit()
+            conn.close()
+            logger.info(f"✅ Saved {saved_count} news articles to database")
+            return {
+                "success": True,
+                "saved": saved_count,
+                "total_fetched": len(data["Data"][:limit]),
+                "message": f"Successfully saved {saved_count} news articles"
+            }
+    except Exception as e:
+        logger.error(f"Error fetching news: {e}")
+        return {
+            "success": False,
+            "error": str(e),
+            "saved": 0
+        }
 @app.get("/api/news/latest")
 async def get_latest_news(
     limit: int = 20,

app.py CHANGED Viewed

@@ -768,9 +768,10 @@ if __name__ == "__main__":
     logger.info(f"🤖 Models available: {len(hub.get_available_models())}")
     logger.info(f"🔌 FastAPI available: {FASTAPI_AVAILABLE}")
     # Choose mode based on environment variables
-    if USE_FASTAPI_HTML and FASTAPI_AVAILABLE:
-        # Run FastAPI with HTML interface
         logger.info("🌐 Starting FastAPI server with HTML interface...")
         import uvicorn
         port = int(os.getenv("PORT", "7860"))
@@ -781,7 +782,7 @@ if __name__ == "__main__":
             log_level="info"
         )
     elif USE_GRADIO:
-        # Run Gradio interface (default)
         logger.info("🎨 Starting Gradio interface...")
         app = create_gradio_interface()
         app.launch(
@@ -790,17 +791,6 @@ if __name__ == "__main__":
             share=False,
             show_error=True
         )
-    elif FASTAPI_AVAILABLE:
-        # Fallback to FastAPI if Gradio is disabled but FastAPI is available
-        logger.info("🌐 Starting FastAPI server (fallback)...")
-        import uvicorn
-        port = int(os.getenv("PORT", "7860"))
-        uvicorn.run(
-            fastapi_app,
-            host="0.0.0.0",
-            port=port,
-            log_level="info"
-        )
     else:
         # No UI mode available
         logger.error("❌ No UI mode available (FastAPI unavailable and Gradio disabled). Exiting.")

     logger.info(f"🤖 Models available: {len(hub.get_available_models())}")
     logger.info(f"🔌 FastAPI available: {FASTAPI_AVAILABLE}")
+    # Force FastAPI+HTML mode for HuggingFace Spaces
     # Choose mode based on environment variables
+    if FASTAPI_AVAILABLE:
+        # Run FastAPI with HTML interface (preferred for HF Spaces)
         logger.info("🌐 Starting FastAPI server with HTML interface...")
         import uvicorn
         port = int(os.getenv("PORT", "7860"))
             log_level="info"
         )
     elif USE_GRADIO:
+        # Run Gradio interface (fallback)
         logger.info("🎨 Starting Gradio interface...")
         app = create_gradio_interface()
         app.launch(
             share=False,
             show_error=True
         )
     else:
         # No UI mode available
         logger.error("❌ No UI mode available (FastAPI unavailable and Gradio disabled). Exiting.")

index.html CHANGED Viewed

@@ -9,16 +9,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <!-- Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- Charts -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     <!-- Styles -->
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/toast.css">
-    <link rel="stylesheet" href="/static/css/enhancements.css">
     <script src="/static/js/trading-pairs-loader.js" defer></script>
     <script src="/static/js/app.js" defer></script>
@@ -29,488 +25,456 @@
     <!-- Toast Container -->
     <div class="toast-container" id="toast-container"></div>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="app-header">
-            <div class="header-content">
-                <div class="logo">
                     <div class="logo-icon">
-                        <i class="fas fa-rocket"></i>
                     </div>
                     <div class="logo-text">
-                        <h1>Crypto Intelligence Hub</h1>
-                        <p><i class="fas fa-brain"></i> AI-Powered Crypto Data Collection Center</p>
                     </div>
                 </div>
-                <div class="header-actions">
-                    <div class="header-stats">
-                        <div class="mini-stat">
-                            <i class="fas fa-database"></i>
-                            <span id="header-resources">-</span>
-                            <small>Resources</small>
-                        </div>
-                        <div class="mini-stat">
-                            <i class="fas fa-robot"></i>
-                            <span id="header-models">-</span>
-                            <small>Models</small>
-                        </div>
                     </div>
-                    <div class="status-badge" id="api-status">
-                        <span class="status-dot"></span>
-                        <span>Checking...</span>
                     </div>
-                    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
-                        <i class="fas fa-moon"></i>
-                    </button>
                 </div>
             </div>
-        </header>
-        <!-- Navigation Tabs -->
-        <nav class="tabs-nav">
-            <button class="tab-btn active" data-tab="dashboard">
-                <i class="fas fa-chart-line"></i>
-                <span>Dashboard</span>
-            </button>
-            <button class="tab-btn" data-tab="market">
-                <i class="fas fa-coins"></i>
-                <span>Market</span>
-            </button>
-            <button class="tab-btn" data-tab="models">
-                <i class="fas fa-robot"></i>
-                <span>AI Models</span>
-            </button>
-            <button class="tab-btn" data-tab="sentiment">
-                <i class="fas fa-brain"></i>
-                <span>Sentiment</span>
-            </button>
-            <button class="tab-btn" data-tab="ai-analyst">
-                <i class="fas fa-magic"></i>
-                <span>AI Analyst</span>
-            </button>
-            <button class="tab-btn" data-tab="trading-assistant">
-                <i class="fas fa-chart-bar"></i>
-                <span>Trading Signals</span>
-            </button>
-            <button class="tab-btn" data-tab="news">
-                <i class="fas fa-newspaper"></i>
-                <span>News</span>
-            </button>
-            <button class="tab-btn" data-tab="providers">
-                <i class="fas fa-server"></i>
-                <span>Providers</span>
-            </button>
-            <button class="tab-btn" data-tab="diagnostics">
-                <i class="fas fa-stethoscope"></i>
-                <span>Diagnostics</span>
-            </button>
-            <button class="tab-btn" data-tab="api-explorer">
-                <i class="fas fa-code"></i>
-                <span>API</span>
-            </button>
-        </nav>
-        <!-- Main Content -->
-        <main class="main-content">
-            <!-- Dashboard Tab -->
-            <section id="tab-dashboard" class="tab-content active">
-                <div class="section-header">
-                    <h2>System Overview</h2>
-                    <button class="btn-refresh" onclick="loadDashboard()">🔄 Refresh</button>
                 </div>
-                <div class="stats-grid" id="dashboard-stats">
-                    <div class="stat-card gradient-purple">
-                        <div class="stat-icon"><i class="fas fa-database"></i></div>
-                        <div class="stat-content">
-                            <div class="stat-value" id="stat-total-resources">-</div>
-                            <div class="stat-label">Total Resources</div>
-                            <div class="stat-trend"><i class="fas fa-arrow-up"></i> Active</div>
                         </div>
-                    </div>
-                    <div class="stat-card gradient-green">
-                        <div class="stat-icon"><i class="fas fa-gift"></i></div>
-                        <div class="stat-content">
-                            <div class="stat-value" id="stat-free-resources">-</div>
-                            <div class="stat-label">Free Resources</div>
-                            <div class="stat-trend"><i class="fas fa-check-circle"></i> Available</div>
                         </div>
-                    </div>
-                    <div class="stat-card gradient-blue">
-                        <div class="stat-icon"><i class="fas fa-robot"></i></div>
-                        <div class="stat-content">
-                            <div class="stat-value" id="stat-models">-</div>
-                            <div class="stat-label">AI Models</div>
-                            <div class="stat-trend"><i class="fas fa-brain"></i> Ready</div>
                         </div>
-                    </div>
-                    <div class="stat-card gradient-orange">
-                        <div class="stat-icon"><i class="fas fa-server"></i></div>
-                        <div class="stat-content">
-                            <div class="stat-value" id="stat-providers">-</div>
-                            <div class="stat-label">Providers</div>
-                            <div class="stat-trend"><i class="fas fa-signal"></i> Online</div>
                         </div>
                     </div>
-                </div>
-                <div class="grid-2">
-                    <div class="card">
-                        <h3>System Status</h3>
-                        <div id="system-status"></div>
-                    </div>
-                    <div class="card">
-                        <h3>Category Statistics</h3>
-                        <canvas id="categories-chart"></canvas>
-                    </div>
-                </div>
-            </section>
-            <!-- Market Tab -->
-            <section id="tab-market" class="tab-content">
-                <div class="section-header">
-                    <h2>Market Data</h2>
-                    <button class="btn-refresh" onclick="loadMarketData()">🔄 Refresh</button>
-                </div>
-                <div class="card">
-                    <h3>Top Cryptocurrencies</h3>
-                    <div id="market-data"></div>
-                </div>
-                <div class="card">
-                    <h3>Trending Coins</h3>
-                    <div id="trending-coins"></div>
-                </div>
-                <div class="card">
-                    <h3>Fear & Greed Index</h3>
-                    <div id="fear-greed"></div>
-                </div>
-            </section>
-            <!-- Models Tab -->
-            <section id="tab-models" class="tab-content">
-                <div class="section-header">
-                    <h2>Hugging Face Models</h2>
-                    <button class="btn-refresh" onclick="loadModels()">🔄 Refresh</button>
-                    <button class="btn-primary" onclick="initializeModels()">🚀 Load Models</button>
-                </div>
-                <div class="card">
-                    <h3>Models Status</h3>
-                    <div id="models-status"></div>
-                </div>
-                <div class="card">
-                    <h3>Models List</h3>
-                    <div id="models-list"></div>
-                </div>
-                <div class="card">
-                    <h3>Usage Statistics</h3>
-                    <div id="models-stats"></div>
-                </div>
-            </section>
-            <!-- Sentiment Analysis Tab -->
-            <section id="tab-sentiment" class="tab-content">
-                <div class="section-header">
-                    <h2>Sentiment Analysis</h2>
-                </div>
-                <!-- Global Market Sentiment -->
-                <div class="card">
-                    <h3>Global Market Sentiment</h3>
-                    <p style="color: var(--text-secondary); margin-bottom: 15px;">Analyze overall crypto market sentiment using AI models</p>
-                    <button class="btn-primary" onclick="analyzeGlobalSentiment()">📊 Analyze Market Sentiment</button>
-                    <div id="global-sentiment-result" style="margin-top: 20px;"></div>
-                </div>
-                <!-- Per-Asset Sentiment -->
-                <div class="card">
-                    <h3>Per-Asset Sentiment Analysis</h3>
-                    <div class="form-group">
-                        <label>Trading Pair:</label>
-                        <div id="asset-symbol-container">
-                            <input type="text" id="asset-symbol" placeholder="Loading pairs..." readonly>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label>Related Text or News (Optional):</label>
-                        <textarea id="asset-sentiment-text" rows="3" placeholder="Example: Bitcoin breaks resistance at $50,000"></textarea>
-                    </div>
-                    <button class="btn-primary" onclick="analyzeAssetSentiment()">🔍 Analyze Asset Sentiment</button>
-                    <div id="asset-sentiment-result" style="margin-top: 20px;"></div>
-                </div>
-                <!-- Text Analysis -->
-                <div class="card">
-                    <h3>Text Analysis</h3>
-                    <div class="form-group">
-                        <label>Text to Analyze:</label>
-                        <textarea id="sentiment-text" rows="5" placeholder="Example: Bitcoin price is rising rapidly!"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Analysis Type:</label>
-                        <select id="sentiment-mode">
-                            <option value="auto">Auto (Crypto)</option>
-                            <option value="crypto">Crypto</option>
-                            <option value="financial">Financial</option>
-                            <option value="social">Social</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>Select Model (Optional):</label>
-                        <select id="sentiment-model"></select>
-                    </div>
-                    <button class="btn-primary" onclick="analyzeSentiment()">🔍 Analyze</button>
-                    <div id="sentiment-result"></div>
-                </div>
-                <!-- News/Financial Sentiment -->
-                <div class="card">
-                    <h3>News & Financial Sentiment Analysis</h3>
-                    <div class="form-group">
-                        <label>News Title:</label>
-                        <input type="text" id="news-title" placeholder="Example: Bitcoin ETF Approval Expected">
-                    </div>
-                    <div class="form-group">
-                        <label>Content or Description:</label>
-                        <textarea id="news-content" rows="4" placeholder="Full news text or description..."></textarea>
                     </div>
-                    <button class="btn-primary" onclick="analyzeNewsSentiment()">📰 Analyze News</button>
-                    <div id="news-sentiment-result" style="margin-top: 20px;"></div>
-                </div>
-                <!-- News Summarization -->
-                <div class="card">
-                    <h3>📝 News Summarization</h3>
-                    <p style="color: var(--text-secondary); margin-bottom: 15px;">
-                        Summarize crypto/financial news using AI-powered Hugging Face model
-                    </p>
-                    <div class="form-group">
-                        <label>News Title:</label>
-                        <input type="text" id="summary-news-title" placeholder="Example: Bitcoin Reaches New All-Time High">
                     </div>
-                    <div class="form-group">
-                        <label>News Content:</label>
-                        <textarea id="summary-news-content" rows="6" placeholder="Enter the full article text here. The AI will generate a concise summary highlighting the key points..."></textarea>
                     </div>
-                    <button class="btn-primary" onclick="summarizeNews()">✨ Summarize News</button>
-                    <div id="news-summary-result" style="margin-top: 20px;"></div>
-                </div>
-                <div class="card">
-                    <h3>Analysis History</h3>
-                    <div id="sentiment-history"></div>
-                </div>
-            </section>
-            <!-- AI Analyst Tab -->
-            <section id="tab-ai-analyst" class="tab-content">
-                <div class="section-header">
-                    <h2>🪄 AI Crypto Analyst</h2>
-                    <p style="color: var(--text-secondary); margin-top: 10px;">Powered by OpenC/crypto-gpt-o3-mini</p>
-                </div>
-                <div class="card">
-                    <h3>Text Generation & Analysis</h3>
-                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
-                        Use AI to generate crypto market analysis, insights, or creative content related to crypto and DeFi.
-                    </p>
-                    <div class="form-group">
-                        <label>Prompt / Question:</label>
-                        <textarea id="ai-analyst-prompt" rows="6" placeholder="Example: Analyze the current state of Bitcoin and explain potential price movements based on market sentiment..."></textarea>
                     </div>
-                    <div class="form-group">
-                        <label>Mode:</label>
-                        <select id="ai-analyst-mode">
-                            <option value="analysis">Analysis</option>
-                            <option value="generation">Generation</option>
-                        </select>
                     </div>
-                    <div class="form-group">
-                        <label>Max Length (tokens):</label>
-                        <select id="ai-analyst-max-length">
-                            <option value="100">100</option>
-                            <option value="200" selected>200</option>
-                            <option value="300">300</option>
-                            <option value="500">500</option>
-                        </select>
                     </div>
-                    <button class="btn-primary" onclick="runAIAnalyst()">✨ Generate Analysis</button>
-                    <div id="ai-analyst-result" style="margin-top: 20px;"></div>
-                </div>
-                <div class="card">
-                    <h3>💡 Example Prompts</h3>
-                    <div style="display: grid; gap: 10px;">
-                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('Analyze the current DeFi market trends and identify key opportunities.')">
-                            <strong>DeFi Market Analysis</strong>
-                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Analyze the current DeFi market trends and identify key opportunities.</p>
-                        </div>
-                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('Explain how Layer 2 solutions are impacting Ethereum scalability.')">
-                            <strong>Layer 2 Solutions</strong>
-                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Explain how Layer 2 solutions are impacting Ethereum scalability.</p>
                         </div>
-                        <div style="padding: 10px; background: rgba(31, 41, 55, 0.6); border-radius: 8px; cursor: pointer;" onclick="setAIAnalystPrompt('What are the key factors affecting Bitcoin price movements?')">
-                            <strong>Bitcoin Price Factors</strong>
-                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">What are the key factors affecting Bitcoin price movements?</p>
                         </div>
                     </div>
-                </div>
-            </section>
-            <!-- Trading Assistant Tab -->
-            <section id="tab-trading-assistant" class="tab-content">
-                <div class="section-header">
-                    <h2>📊 Trading Signal Assistant</h2>
-                    <p style="color: var(--text-secondary); margin-top: 10px;">Powered by agarkovv/CryptoTrader-LM</p>
-                </div>
-                <div class="card">
-                    <h3>Get Trading Decision</h3>
-                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
-                        Get AI-powered trading signals (BUY/SELL/HOLD) based on market analysis.
-                    </p>
-                    <div class="form-group">
-                        <label>Trading Symbol:</label>
-                        <div id="trading-symbol-container">
-                            <input type="text" id="trading-symbol" placeholder="Loading pairs..." readonly>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label>Market Context (Optional):</label>
-                        <textarea id="trading-context" rows="4" placeholder="Example: Recent breakout above resistance, high volume, positive news flow..."></textarea>
                     </div>
-                    <button class="btn-primary" onclick="runTradingAssistant()">🎯 Get Trading Signal</button>
-                    <div id="trading-assistant-result" style="margin-top: 20px;"></div>
-                </div>
-                <div class="card">
-                    <h3>⚠️ Disclaimer</h3>
-                    <div class="alert alert-warning">
-                        <strong>Important:</strong> This trading assistant provides AI-generated signals for informational purposes only.
-                        It should NOT be used as the sole basis for trading decisions. Always conduct your own research,
-                        consider multiple factors, and consult with financial professionals before making investment decisions.
-                        Past performance does not guarantee future results.
                     </div>
-                </div>
-            </section>
-            <!-- News Tab -->
-            <section id="tab-news" class="tab-content">
-                <div class="section-header">
-                    <h2>Crypto News</h2>
-                    <button class="btn-refresh" onclick="loadNews()">🔄 Refresh</button>
-                </div>
-                <div id="news-list"></div>
-            </section>
-            <!-- Providers Tab -->
-            <section id="tab-providers" class="tab-content">
-                <div class="section-header">
-                    <h2>Resources & Providers</h2>
-                    <button class="btn-refresh" onclick="loadProviders()">🔄 Refresh</button>
-                </div>
-                <div class="card">
-                    <h3>Providers List</h3>
-                    <div id="providers-list"></div>
-                </div>
-                <div class="card">
-                    <h3>Search Resources</h3>
-                    <div class="form-group">
-                        <input type="text" id="search-resources" placeholder="Search..." onkeypress="if(event.key === 'Enter') searchResources()">
-                        <button class="btn-primary" onclick="searchResources()">🔍 Search</button>
                     </div>
-                    <div id="search-results"></div>
-                </div>
-            </section>
-            <!-- Diagnostics Tab -->
-            <section id="tab-diagnostics" class="tab-content">
-                <div class="section-header">
-                    <h2>Diagnostics & Reports</h2>
-                    <button class="btn-primary" onclick="runDiagnostics()">▶️ Run Diagnostics</button>
-                </div>
-                <div class="card">
-                    <h3>System Health</h3>
-                    <button class="btn-refresh" onclick="loadHealthDiagnostics()">🔄 Refresh Health</button>
-                    <div id="health-diagnostics-result" style="margin-top: 15px;"></div>
-                </div>
-                <div class="card">
-                    <h3>System Status</h3>
-                    <div id="diagnostics-status"></div>
-                </div>
-                <div class="card">
-                    <h3>Error Reports</h3>
-                    <div id="error-logs"></div>
-                </div>
-                <div class="card">
-                    <h3>Recent Logs</h3>
-                    <div id="recent-logs"></div>
-                </div>
-            </section>
-            <!-- API Explorer Tab -->
-            <section id="tab-api-explorer" class="tab-content">
-                <div class="section-header">
-                    <h2>API Explorer</h2>
-                </div>
-                <div class="card">
-                    <h3>Test API Endpoints</h3>
-                    <div class="form-group">
-                        <label>Select Endpoint:</label>
-                        <select id="api-endpoint">
-                            <option value="/api/health">GET /api/health</option>
-                            <option value="/api/status">GET /api/status</option>
-                            <option value="/api/market">GET /api/market</option>
-                            <option value="/api/sentiment">GET /api/sentiment</option>
-                            <option value="/api/resources">GET /api/resources</option>
-                            <option value="/api/providers">GET /api/providers</option>
-                            <option value="/api/models/list">GET /api/models/list</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>Method:</label>
-                        <select id="api-method">
-                            <option value="GET">GET</option>
-                            <option value="POST">POST</option>
-                        </select>
                     </div>
-                    <div class="form-group">
-                        <label>Body (JSON - for POST):</label>
-                        <textarea id="api-body" rows="5"></textarea>
                     </div>
-                    <button class="btn-primary" onclick="testAPI()">▶️ Execute</button>
-                    <div id="api-result"></div>
-                </div>
-            </section>
-        </main>
-        <!-- Footer -->
-        <footer class="app-footer">
-            <p>Crypto Intelligence Hub - Powered by FastAPI & Hugging Face</p>
-            <p><a href="/docs" target="_blank">📖 API Documentation</a> | <a href="/health" target="_blank">💚 System Health</a></p>
-        </footer>
     </div>
 </body>
 </html>

     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <!-- Charts -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     <!-- Styles -->
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/toast.css">
     <script src="/static/js/trading-pairs-loader.js" defer></script>
     <script src="/static/js/app.js" defer></script>
     <!-- Toast Container -->
     <div class="toast-container" id="toast-container"></div>
+    <div class="app-layout">
+        <!-- Sidebar Navigation -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <div class="sidebar-logo">
                     <div class="logo-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
+                            <path d="M2 17l10 5 10-5"></path>
+                            <path d="M2 12l10 5 10-5"></path>
+                        </svg>
                     </div>
                     <div class="logo-text">
+                        <h1>Crypto Hub</h1>
+                        <p>AI-Powered</p>
                     </div>
                 </div>
+                <button class="sidebar-toggle-btn" id="sidebar-close" onclick="toggleSidebar()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <nav class="sidebar-nav">
+                <button class="nav-item active" data-tab="dashboard" onclick="switchTab('dashboard')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="20" x2="18" y2="10"></line>
+                        <line x1="12" y1="20" x2="12" y2="4"></line>
+                        <line x1="6" y1="20" x2="6" y2="14"></line>
+                    </svg>
+                    <span>Dashboard</span>
+                </button>
+                <button class="nav-item" data-tab="market" onclick="switchTab('market')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <path d="M12 6v6l4 2"></path>
+                    </svg>
+                    <span>Market</span>
+                </button>
+                <button class="nav-item" data-tab="models" onclick="switchTab('models')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                        <rect x="7" y="7" width="3" height="3"></rect>
+                        <rect x="14" y="7" width="3" height="3"></rect>
+                        <rect x="7" y="14" width="3" height="3"></rect>
+                        <rect x="14" y="14" width="3" height="3"></rect>
+                    </svg>
+                    <span>AI Models</span>
+                </button>
+                <button class="nav-item" data-tab="sentiment" onclick="switchTab('sentiment')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0z"></path>
+                        <path d="M17.5 11a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0z"></path>
+                        <path d="M6.5 11a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0z"></path>
+                    </svg>
+                    <span>Sentiment</span>
+                </button>
+                <button class="nav-item" data-tab="trading-assistant" onclick="switchTab('trading-assistant')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="12" y1="1" x2="12" y2="23"></line>
+                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+                    </svg>
+                    <span>Trading Signals</span>
+                </button>
+                <button class="nav-item" data-tab="news" onclick="switchTab('news')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+                        <line x1="9" y1="8" x2="15" y2="8"></line>
+                        <line x1="9" y1="12" x2="15" y2="12"></line>
+                    </svg>
+                    <span>News</span>
+                </button>
+                <button class="nav-item" data-tab="settings" onclick="switchTab('settings')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="3"></circle>
+                        <path d="M12 1v6m0 6v6m9-9h-6m-6 0H3m15.364 6.364l-4.243-4.243m-4.242 0L5.636 17.364m12.728 0l-4.243-4.243m-4.242 0L5.636 6.636"></path>
+                    </svg>
+                    <span>Settings</span>
+                </button>
+            </nav>
+            <div class="sidebar-footer">
+                <div class="status-indicator">
+                    <span class="status-dot"></span>
+                    <span id="sidebar-status">System Active</span>
+                </div>
+                <div class="sidebar-stats">
+                    <div class="stat-mini">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                        </svg>
+                        <span id="sidebar-resources">-</span>
                     </div>
+                    <div class="stat-mini">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                            <rect x="7" y="7" width="3" height="3"></rect>
+                            <rect x="14" y="7" width="3" height="3"></rect>
+                            <rect x="7" y="14" width="3" height="3"></rect>
+                            <rect x="14" y="14" width="3" height="3"></rect>
+                        </svg>
+                        <span id="sidebar-models">-</span>
                     </div>
                 </div>
             </div>
+        </aside>
+        <!-- Mobile Overlay -->
+        <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
+        <!-- Main Content Area -->
+        <div class="main-wrapper">
+            <!-- Top Header -->
+            <header class="top-header">
+                <button class="hamburger-btn" id="hamburger-btn" onclick="toggleSidebar()">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="3" y1="12" x2="21" y2="12"></line>
+                        <line x1="3" y1="6" x2="21" y2="6"></line>
+                        <line x1="3" y1="18" x2="21" y2="18"></line>
+                    </svg>
+                </button>
+                <div class="header-title">
+                    <h2 id="page-title">Dashboard</h2>
+                    <p id="page-subtitle">System Overview</p>
                 </div>
+                <div class="header-actions">
+                    <button class="icon-btn" onclick="toggleTheme()" title="Toggle Theme">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                        </svg>
+                    </button>
+                    <button class="icon-btn" onclick="refreshCurrentTab()" title="Refresh">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="23 4 23 10 17 10"></polyline>
+                            <polyline points="1 20 1 14 7 14"></polyline>
+                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                        </svg>
+                    </button>
+                </div>
+            </header>
+            <!-- Content Area -->
+            <main class="content-area">
+                <!-- Dashboard Tab -->
+                <section id="tab-dashboard" class="tab-panel active">
+                    <div class="stats-grid" id="dashboard-stats">
+                        <div class="stat-card gradient-purple">
+                            <div class="stat-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                                </svg>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-value" id="stat-total-resources">-</div>
+                                <div class="stat-label">Total Resources</div>
+                                <div class="stat-trend">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                                        <polyline points="17 6 23 6 23 12"></polyline>
+                                    </svg>
+                                    Active
+                                </div>
+                            </div>
                         </div>
+                        <div class="stat-card gradient-green">
+                            <div class="stat-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                </svg>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-value" id="stat-free-resources">-</div>
+                                <div class="stat-label">Free Resources</div>
+                                <div class="stat-trend">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                    Available
+                                </div>
+                            </div>
                         </div>
+                        <div class="stat-card gradient-blue">
+                            <div class="stat-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                    <rect x="7" y="7" width="3" height="3"></rect>
+                                    <rect x="14" y="7" width="3" height="3"></rect>
+                                    <rect x="7" y="14" width="3" height="3"></rect>
+                                    <rect x="14" y="14" width="3" height="3"></rect>
+                                </svg>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-value" id="stat-models">-</div>
+                                <div class="stat-label">AI Models</div>
+                                <div class="stat-trend">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0z"></path>
+                                        <path d="M17.5 11a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0z"></path>
+                                        <path d="M6.5 11a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0z"></path>
+                                    </svg>
+                                    Ready
+                                </div>
+                            </div>
                         </div>
+                        <div class="stat-card gradient-orange">
+                            <div class="stat-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                                    <line x1="8" y1="21" x2="16" y2="21"></line>
+                                    <line x1="12" y1="17" x2="12" y2="21"></line>
+                                </svg>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-value" id="stat-providers">-</div>
+                                <div class="stat-label">Providers</div>
+                                <div class="stat-trend">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M2 12h20M12 2v20"></path>
+                                    </svg>
+                                    Online
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <div class="grid-2">
+                        <div class="glass-card">
+                            <h3>System Status</h3>
+                            <div id="system-status"></div>
+                        </div>
+                        <div class="glass-card">
+                            <h3>Category Statistics</h3>
+                            <canvas id="categories-chart"></canvas>
                         </div>
                     </div>
+                </section>
+                <!-- Market Tab -->
+                <section id="tab-market" class="tab-panel">
+                    <div class="glass-card">
+                        <h3>Top Cryptocurrencies</h3>
+                        <div id="market-data"></div>
                     </div>
+                    <div class="glass-card">
+                        <h3>Trending Coins</h3>
+                        <div id="trending-coins"></div>
                     </div>
+                    <div class="glass-card">
+                        <h3>Fear & Greed Index</h3>
+                        <div id="fear-greed"></div>
                     </div>
+                </section>
+                <!-- Models Tab -->
+                <section id="tab-models" class="tab-panel">
+                    <div class="glass-card">
+                        <div class="card-header">
+                            <h3>Hugging Face Models</h3>
+                            <button class="btn-primary" onclick="initializeModels()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+                                </svg>
+                                Load Models
+                            </button>
+                        </div>
+                        <div id="models-status"></div>
                     </div>
+                    <div class="glass-card">
+                        <h3>Models List</h3>
+                        <div id="models-list"></div>
                     </div>
+                </section>
+                <!-- Sentiment Analysis Tab -->
+                <section id="tab-sentiment" class="tab-panel">
+                    <!-- Global Market Sentiment -->
+                    <div class="glass-card">
+                        <h3>Global Market Sentiment</h3>
+                        <p class="text-secondary">Analyze overall crypto market sentiment using AI models</p>
+                        <button class="btn-primary" onclick="analyzeGlobalSentiment()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                <line x1="18" y1="20" x2="18" y2="10"></line>
+                                <line x1="12" y1="20" x2="12" y2="4"></line>
+                                <line x1="6" y1="20" x2="6" y2="14"></line>
+                            </svg>
+                            Analyze Market Sentiment
+                        </button>
+                        <div id="global-sentiment-result" style="margin-top: 20px;"></div>
                     </div>
+                    <!-- Per-Asset Sentiment -->
+                    <div class="glass-card">
+                        <h3>Per-Asset Sentiment Analysis</h3>
+                        <div class="form-group">
+                            <label>Trading Pair:</label>
+                            <div id="asset-symbol-container">
+                                <input type="text" id="asset-symbol" placeholder="Loading pairs..." readonly>
+                            </div>
                         </div>
+                        <div class="form-group">
+                            <label>Related Text or News (Optional):</label>
+                            <textarea id="asset-sentiment-text" rows="3" placeholder="Example: Bitcoin breaks resistance at $50,000"></textarea>
                         </div>
+                        <button class="btn-primary" onclick="analyzeAssetSentiment()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="M21 21l-4.35-4.35"></path>
+                            </svg>
+                            Analyze Asset Sentiment
+                        </button>
+                        <div id="asset-sentiment-result" style="margin-top: 20px;"></div>
                     </div>
+                    <!-- Text Analysis -->
+                    <div class="glass-card">
+                        <h3>Text Analysis</h3>
+                        <div class="form-group">
+                            <label>Text to Analyze:</label>
+                            <textarea id="sentiment-text" rows="5" placeholder="Example: Bitcoin price is rising rapidly!"></textarea>
                         </div>
+                        <div class="form-group">
+                            <label>Analysis Type:</label>
+                            <select id="sentiment-mode">
+                                <option value="auto">Auto (Crypto)</option>
+                                <option value="crypto">Crypto</option>
+                                <option value="financial">Financial</option>
+                                <option value="social">Social</option>
+                            </select>
+                        </div>
+                        <button class="btn-primary" onclick="analyzeSentiment()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="M21 21l-4.35-4.35"></path>
+                            </svg>
+                            Analyze
+                        </button>
+                        <div id="sentiment-result"></div>
                     </div>
+                </section>
+                <!-- Trading Assistant Tab -->
+                <section id="tab-trading-assistant" class="tab-panel">
+                    <div class="glass-card">
+                        <h3>Trading Signal Assistant</h3>
+                        <p class="text-secondary">Get AI-powered trading signals (BUY/SELL/HOLD) based on market analysis.</p>
+                        <div class="form-group">
+                            <label>Trading Symbol:</label>
+                            <div id="trading-symbol-container">
+                                <input type="text" id="trading-symbol" placeholder="Loading pairs..." readonly>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label>Market Context (Optional):</label>
+                            <textarea id="trading-context" rows="4" placeholder="Example: Recent breakout above resistance, high volume, positive news flow..."></textarea>
+                        </div>
+                        <button class="btn-primary" onclick="runTradingAssistant()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <polygon points="12 6 16 14 8 14"></polygon>
+                            </svg>
+                            Get Trading Signal
+                        </button>
+                        <div id="trading-assistant-result" style="margin-top: 20px;"></div>
                     </div>
+                    <div class="glass-card">
+                        <h3>⚠️ Disclaimer</h3>
+                        <div class="alert alert-warning">
+                            <strong>Important:</strong> This trading assistant provides AI-generated signals for informational purposes only.
+                            It should NOT be used as the sole basis for trading decisions. Always conduct your own research.
+                        </div>
                     </div>
+                </section>
+                <!-- News Tab -->
+                <section id="tab-news" class="tab-panel">
+                    <div class="glass-card">
+                        <div class="card-header">
+                            <h3>Crypto News</h3>
+                            <div style="display: flex; gap: 10px;">
+                                <button class="btn-primary" onclick="fetchNewsFromAPI()">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                        <polyline points="7 10 12 15 17 10"></polyline>
+                                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                                    </svg>
+                                    Fetch Latest News
+                                </button>
+                                <button class="btn-refresh" onclick="loadNews()">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                        <polyline points="23 4 23 10 17 10"></polyline>
+                                        <polyline points="1 20 1 14 7 14"></polyline>
+                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                                    </svg>
+                                    Refresh
+                                </button>
+                            </div>
+                        </div>
+                        <div id="news-list"></div>
                     </div>
+                </section>
+                <!-- Settings Tab -->
+                <section id="tab-settings" class="tab-panel">
+                    <div class="glass-card">
+                        <h3>System Settings</h3>
+                        <div class="form-group">
+                            <label>Theme:</label>
+                            <select id="theme-select" onchange="changeTheme(this.value)">
+                                <option value="dark">Dark Mode</option>
+                                <option value="light">Light Mode</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Auto Refresh Interval (seconds):</label>
+                            <input type="number" id="refresh-interval" value="30" min="10" max="300">
+                        </div>
+                        <button class="btn-primary" onclick="saveSettings()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
+                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+                                <polyline points="17 21 17 13 7 13 7 21"></polyline>
+                                <polyline points="7 3 7 8 15 8"></polyline>
+                            </svg>
+                            Save Settings
+                        </button>
                     </div>
+                    <div class="glass-card">
+                        <h3>API Information</h3>
+                        <div id="api-info"></div>
                     </div>
+                </section>
+            </main>
+        </div>
     </div>
 </body>
 </html>

static/css/main.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Crypto Intelligence Hub - Enhanced Stylesheet */
 :root {
     /* Primary Colors */
@@ -32,6 +32,10 @@
     --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
     --glow: 0 0 20px rgba(102, 126, 234, 0.3);
     /* Gradients */
     --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
@@ -77,48 +81,60 @@ body::before {
     z-index: 0;
 }
-.app-container {
-    max-width: 1920px;
-    margin: 0 auto;
-    min-height: 100vh;
     display: flex;
-    flex-direction: column;
     position: relative;
     z-index: 1;
 }
-/* Header */
-.app-header {
-    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.7) 100%);
     backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-    padding: 20px 30px;
     box-shadow: var(--shadow);
 }
-.header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 20px;
 }
-.logo {
     display: flex;
     align-items: center;
-    gap: 15px;
 }
-.logo-icon {
-    width: 60px;
-    height: 60px;
     background: var(--gradient-purple);
-    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28px;
     color: white;
     box-shadow: var(--glow);
     animation: float 3s ease-in-out infinite;
@@ -129,30 +145,102 @@ body::before {
     50% { transform: translateY(-5px); }
 }
-.logo-text h1 {
-    font-size: 28px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
-.logo-text p {
-    font-size: 14px;
     color: var(--text-secondary);
 }
-.status-badge {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
     background: rgba(16, 185, 129, 0.15);
     border: 1px solid rgba(16, 185, 129, 0.3);
-    border-radius: 12px;
-    font-size: 14px;
     font-weight: 600;
 }
 .status-dot {
@@ -168,61 +256,162 @@ body::before {
     50% { opacity: 0.5; transform: scale(1.2); }
 }
-.status-badge.error .status-dot {
-    background: var(--danger);
 }
-.status-badge.warning .status-dot {
-    background: var(--warning);
 }
-/* Navigation Tabs */
-.tabs-nav {
     display: flex;
-    gap: 10px;
-    padding: 20px 30px;
-    background: rgba(17, 24, 39, 0.5);
     border-bottom: 1px solid var(--border);
-    overflow-x: auto;
 }
-.tab-btn {
-    padding: 12px 24px;
-    background: transparent;
-    border: 1px solid var(--border);
     border-radius: 10px;
-    color: var(--text-secondary);
     cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    transition: all 0.3s;
-    white-space: nowrap;
 }
-.tab-btn:hover {
-    background: rgba(102, 126, 234, 0.1);
-    border-color: var(--primary);
     color: var(--text-primary);
 }
-.tab-btn.active {
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     border-color: var(--primary);
-    color: white;
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
 }
-/* Main Content */
-.main-content {
     flex: 1;
     padding: 30px;
 }
-.tab-content {
     display: none;
 }
-.tab-content.active {
     display: block;
     animation: fadeIn 0.3s;
 }
@@ -232,22 +421,44 @@ body::before {
     to { opacity: 1; transform: translateY(0); }
 }
-.section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 30px;
-    flex-wrap: wrap;
-    gap: 15px;
 }
-.section-header h2 {
-    font-size: 28px;
-    font-weight: 700;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
 }
 /* Stats Grid */
@@ -263,83 +474,128 @@ body::before {
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 25px;
-    text-align: center;
-    transition: all 0.3s;
     backdrop-filter: blur(10px);
 }
 .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
-    border-color: var(--primary);
-}
-.stat-icon {
-    font-size: 40px;
-    margin-bottom: 10px;
 }
-.stat-value {
-    font-size: 36px;
-    font-weight: 800;
-    color: var(--primary);
-    margin-bottom: 5px;
 }
-.stat-label {
-    font-size: 14px;
-    color: var(--text-secondary);
-    font-weight: 600;
 }
-/* Cards */
-.card {
-    background: rgba(17, 24, 39, 0.6);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 25px;
-    margin-bottom: 20px;
-    backdrop-filter: blur(10px);
 }
-.card h3 {
-    font-size: 20px;
-    margin-bottom: 20px;
-    color: var(--text-primary);
-    border-bottom: 2px solid var(--border);
-    padding-bottom: 10px;
 }
-.grid-2 {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    gap: 20px;
 }
-/* Buttons */
-.btn-primary, .btn-refresh {
-    padding: 12px 24px;
-    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-    border: none;
-    border-radius: 10px;
     color: white;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s;
     font-size: 14px;
 }
-.btn-primary:hover, .btn-refresh:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
 }
-.btn-refresh {
-    background: rgba(102, 126, 234, 0.2);
-    border: 1px solid var(--primary);
 }
-/* Forms */
 .form-group {
     margin-bottom: 20px;
 }
@@ -362,6 +618,7 @@ body::before {
     color: var(--text-primary);
     font-family: inherit;
     font-size: 14px;
 }
 .form-group input:focus,
@@ -372,7 +629,61 @@ body::before {
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
-/* Tables */
 table {
     width: 100%;
     border-collapse: collapse;
@@ -381,7 +692,7 @@ table {
 table th,
 table td {
     padding: 12px;
-    text-align: right;
     border-bottom: 1px solid var(--border);
 }
@@ -395,29 +706,10 @@ table tr:hover {
     background: rgba(102, 126, 234, 0.05);
 }
-/* Loading */
-.loading {
-    text-align: center;
-    padding: 40px;
-    color: var(--text-secondary);
-}
-.spinner {
-    border: 3px solid var(--border);
-    border-top: 3px solid var(--primary);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 0 auto;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-/* Alerts */
 .alert {
     padding: 15px;
     border-radius: 10px;
@@ -442,583 +734,525 @@ table tr:hover {
     color: var(--warning);
 }
-/* Footer */
-.app-footer {
-    background: rgba(17, 24, 39, 0.8);
-    border-top: 1px solid var(--border);
-    padding: 20px 30px;
-    text-align: center;
-    color: var(--text-secondary);
-}
-.app-footer a {
-    color: var(--primary);
-    text-decoration: none;
-    margin: 0 10px;
-}
-.app-footer a:hover {
-    text-decoration: underline;
-}
-/* Sentiment Badges */
-.sentiment-badge {
-    display: inline-block;
-    padding: 6px 12px;
-    border-radius: 8px;
-    font-size: 13px;
-    font-weight: 600;
-    margin: 5px 5px 5px 0;
-}
-.sentiment-badge.bullish {
-    background: rgba(16, 185, 129, 0.2);
-    color: var(--success);
-    border: 1px solid rgba(16, 185, 129, 0.3);
-}
-.sentiment-badge.bearish {
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--danger);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-.sentiment-badge.neutral {
-    background: rgba(156, 163, 175, 0.2);
-    color: var(--text-secondary);
-    border: 1px solid rgba(156, 163, 175, 0.3);
-}
-/* AI Result Cards */
-.ai-result-card {
-    background: rgba(17, 24, 39, 0.6);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 20px;
-    margin-top: 15px;
-    transition: all 0.3s;
-}
-.ai-result-card:hover {
-    border-color: var(--primary);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
-}
-.ai-result-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--border);
 }
-.ai-result-metric {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 15px;
-    background: rgba(31, 41, 55, 0.6);
-    border-radius: 10px;
-    min-width: 120px;
 }
-.ai-result-metric-value {
-    font-size: 28px;
-    font-weight: 800;
-    margin-bottom: 5px;
 }
-.ai-result-metric-label {
-    font-size: 12px;
     color: var(--text-secondary);
-    text-transform: uppercase;
 }
-/* Model Status Indicators */
-.model-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 600;
-}
-.model-status.available {
-    background: rgba(16, 185, 129, 0.15);
-    color: var(--success);
 }
-.model-status.unavailable {
-    background: rgba(239, 68, 68, 0.15);
-    color: var(--danger);
 }
-.model-status.partial {
-    background: rgba(245, 158, 11, 0.15);
-    color: var(--warning);
 }
-/* Form Improvements for AI Sections */
-.form-group input[type="text"] {
-    text-transform: uppercase;
 }
-.form-group textarea {
-    resize: vertical;
-    min-height: 80px;
-}
-/* Loading States */
-.loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px;
-    color: var(--text-secondary);
-}
-.loading .spinner {
-    margin-bottom: 15px;
-}
-/* Confidence Bar */
-.confidence-bar {
-    width: 100%;
-    height: 8px;
-    background: rgba(31, 41, 55, 0.6);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-top: 5px;
-}
-.confidence-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
-    transition: width 0.3s ease;
-}
-.confidence-fill.high {
-    background: linear-gradient(90deg, var(--success), #059669);
-}
-.confidence-fill.low {
-    background: linear-gradient(90deg, var(--danger), #dc2626);
-}
-/* Responsive */
 @media (max-width: 768px) {
-    .header-content {
-        flex-direction: column;
-        align-items: flex-start;
     }
-    .tabs-nav {
-        padding: 15px;
     }
-    .main-content {
         padding: 15px;
     }
-    .grid-2 {
-        grid-template-columns: 1fr;
     }
     .stats-grid {
         grid-template-columns: 1fr;
     }
-    .ai-result-metric {
-        min-width: 100px;
-        padding: 10px;
     }
-    .ai-result-metric-value {
-        font-size: 20px;
     }
-    .card {
-        padding: 15px;
     }
 }
-/* Enhanced Header Actions */
-.header-actions {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    flex-wrap: wrap;
 }
-.header-stats {
-    display: flex;
-    gap: 15px;
 }
-.mini-stat {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 10px 15px;
-    background: rgba(31, 41, 55, 0.6);
-    border-radius: 10px;
-    border: 1px solid var(--border);
-    min-width: 80px;
-    transition: var(--transition-normal);
 }
-.mini-stat:hover {
-    background: rgba(31, 41, 55, 0.8);
-    border-color: var(--primary);
-    transform: translateY(-2px);
 }
-.mini-stat i {
-    font-size: 18px;
-    color: var(--primary);
-    margin-bottom: 5px;
 }
-.mini-stat span {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--text-primary);
 }
-.mini-stat small {
-    font-size: 10px;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
 }
-.theme-toggle {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background: rgba(31, 41, 55, 0.6);
     border: 1px solid var(--border);
-    color: var(--text-primary);
-    cursor: pointer;
-    transition: var(--transition-normal);
     display: flex;
-    align-items: center;
-    justify-content: center;
 }
-.theme-toggle:hover {
-    background: var(--gradient-purple);
-    border-color: var(--primary);
-    transform: rotate(15deg);
 }
-/* Enhanced Stat Cards */
-.stat-card {
     display: flex;
     align-items: center;
-    gap: 20px;
-    position: relative;
-    overflow: hidden;
 }
-.stat-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
-    opacity: 0;
-    transition: var(--transition-normal);
 }
-.stat-card:hover::before {
-    opacity: 1;
 }
-.stat-card.gradient-purple {
-    border-left: 4px solid #667eea;
 }
-.stat-card.gradient-green {
-    border-left: 4px solid #10b981;
 }
-.stat-card.gradient-blue {
-    border-left: 4px solid #3b82f6;
 }
-.stat-card.gradient-orange {
-    border-left: 4px solid #f59e0b;
 }
-.stat-card .stat-icon {
-    width: 70px;
-    height: 70px;
-    border-radius: 16px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    flex-shrink: 0;
 }
-.stat-card.gradient-purple .stat-icon {
-    background: var(--gradient-purple);
-    color: white;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
 }
-.stat-card.gradient-green .stat-icon {
-    background: var(--gradient-green);
-    color: white;
-    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
 }
-.stat-card.gradient-blue .stat-icon {
-    background: var(--gradient-blue);
-    color: white;
-    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
 }
-.stat-card.gradient-orange .stat-icon {
-    background: var(--gradient-orange);
-    color: white;
-    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
 }
-.stat-content {
-    flex: 1;
-}
-.stat-trend {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 5px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
 }
-.stat-trend i {
-    color: var(--success);
 }
-/* Enhanced Tab Buttons */
-.tab-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
 }
-.tab-btn i {
-    font-size: 16px;
 }
-.tab-btn span {
-    font-size: 14px;
 }
-/* Smooth Scrollbar */
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
 }
-::-webkit-scrollbar-track {
-    background: var(--dark-card);
 }
-::-webkit-scrollbar-thumb {
-    background: var(--gradient-purple);
-    border-radius: 5px;
 }
-::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-light);
 }
-/* Loading Animation Enhancement */
-.spinner {
-    border: 3px solid var(--border);
-    border-top: 3px solid var(--primary);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 0 auto;
     position: relative;
 }
-.spinner::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--secondary);
-    border-radius: 50%;
-    animation: spin 0.5s linear infinite reverse;
-}
-/* Card Enhancements */
-.card {
     position: relative;
     overflow: hidden;
 }
-.card::before {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
-    transition: var(--transition-slow);
 }
-.card:hover::before {
-    left: 100%;
 }
-/* Button Enhancements */
-.btn-primary, .btn-refresh {
-    position: relative;
-    overflow: hidden;
 }
-.btn-primary::before, .btn-refresh::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
 }
-.btn-primary:hover::before, .btn-refresh:hover::before {
-    width: 300px;
-    height: 300px;
 }
-/* Tooltip */
-[title] {
-    position: relative;
 }
-/* Focus States */
-*:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
 }
-/* Selection */
-::selection {
-    background: var(--primary);
-    color: white;
 }
-/* Responsive Enhancements */
-@media (max-width: 768px) {
-    .header-stats {
-        display: none;
-    }
-    .mini-stat {
-        min-width: 60px;
-        padding: 8px 10px;
-    }
-    .stat-card {
-        flex-direction: column;
-        text-align: center;
-    }
-    .stat-card .stat-icon {
-        width: 60px;
-        height: 60px;
-        font-size: 28px;
-    }
-    .tab-btn span {
-        display: none;
-    }
-    .tab-btn {
-        padding: 12px 16px;
-    }
 }
-/* Light Theme */
-body.light-theme {
-    --dark: #f3f4f6;
-    --dark-card: #ffffff;
-    --dark-hover: #f9fafb;
-    --dark-elevated: #e5e7eb;
-    --text-primary: #111827;
-    --text-secondary: #6b7280;
-    --text-muted: #9ca3af;
-    --border: rgba(0, 0, 0, 0.1);
-    --border-light: rgba(0, 0, 0, 0.05);
-    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
-    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%);
 }
-body.light-theme::before {
-    background-image:
-        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
-        radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.08) 0%, transparent 50%),
-        radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
 }
-body.light-theme .app-header {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.7) 100%);
 }
-body.light-theme .tabs-nav {
-    background: rgba(255, 255, 255, 0.5);
-}
-body.light-theme .stat-card,
-body.light-theme .card {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
 }
-body.light-theme .mini-stat {
-    background: rgba(249, 250, 251, 0.8);
 }
-body.light-theme .theme-toggle {
-    background: rgba(249, 250, 251, 0.8);
 }
-body.light-theme .form-group input,
-body.light-theme .form-group textarea,
-body.light-theme .form-group select {
-    background: rgba(249, 250, 251, 0.8);
 }
-body.light-theme table th {
-    background: rgba(249, 250, 251, 0.8);
 }
-body.light-theme ::-webkit-scrollbar-track {
-    background: #e5e7eb;
 }

+/* Crypto Intelligence Hub - Enhanced Stylesheet with Sidebar Navigation */
 :root {
     /* Primary Colors */
     --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
     --glow: 0 0 20px rgba(102, 126, 234, 0.3);
+    /* Sidebar */
+    --sidebar-width: 280px;
+    --sidebar-collapsed-width: 80px;
     /* Gradients */
     --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
     z-index: 0;
 }
+/* =============================================================================
+   Layout Structure
+   ============================================================================= */
+.app-layout {
     display: flex;
+    min-height: 100vh;
     position: relative;
     z-index: 1;
 }
+/* =============================================================================
+   Sidebar Navigation
+   ============================================================================= */
+.sidebar {
+    width: var(--sidebar-width);
+    background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%);
     backdrop-filter: blur(20px);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 1000;
+    transition: transform var(--transition-normal);
     box-shadow: var(--shadow);
 }
+.sidebar-header {
+    padding: 25px 20px;
+    border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
+.sidebar-logo {
     display: flex;
     align-items: center;
+    gap: 12px;
 }
+.sidebar-logo .logo-icon {
+    width: 45px;
+    height: 45px;
     background: var(--gradient-purple);
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 22px;
     color: white;
     box-shadow: var(--glow);
     animation: float 3s ease-in-out infinite;
     50% { transform: translateY(-5px); }
 }
+.sidebar-logo .logo-text h1 {
+    font-size: 20px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    margin-bottom: 2px;
 }
+.sidebar-logo .logo-text p {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.sidebar-toggle-btn {
+    display: none;
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+.sidebar-toggle-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: rotate(90deg);
+}
+/* Sidebar Navigation */
+.sidebar-nav {
+    flex: 1;
+    padding: 20px 15px;
+    overflow-y: auto;
+}
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 12px;
     color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 600;
+    transition: all var(--transition-fast);
+    width: 100%;
+    text-align: left;
+    margin-bottom: 8px;
+}
+.nav-item svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    stroke-width: 2;
+}
+.nav-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: var(--primary);
+    color: var(--text-primary);
+    transform: translateX(5px);
+}
+.nav-item.active {
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    border-color: var(--primary);
+    color: white;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+/* Sidebar Footer */
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid var(--border);
 }
+.status-indicator {
     display: flex;
     align-items: center;
+    gap: 10px;
+    padding: 12px;
     background: rgba(16, 185, 129, 0.15);
     border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: 10px;
+    font-size: 13px;
     font-weight: 600;
+    margin-bottom: 12px;
 }
 .status-dot {
     50% { opacity: 0.5; transform: scale(1.2); }
 }
+.sidebar-stats {
+    display: flex;
+    gap: 10px;
+}
+.stat-mini {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    background: rgba(31, 41, 55, 0.6);
+    border-radius: 10px;
+    border: 1px solid var(--border);
+}
+.stat-mini svg {
+    width: 16px;
+    height: 16px;
+    color: var(--primary);
+    margin-bottom: 5px;
+    stroke-width: 2;
+}
+.stat-mini span {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+/* Sidebar Overlay for Mobile */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity var(--transition-normal);
 }
+.sidebar-overlay.active {
+    display: block;
+    opacity: 1;
 }
+/* =============================================================================
+   Main Wrapper
+   ============================================================================= */
+.main-wrapper {
+    flex: 1;
+    margin-left: var(--sidebar-width);
     display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    transition: margin-left var(--transition-normal);
+}
+/* Top Header */
+.top-header {
+    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.7) 100%);
+    backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
+    padding: 20px 30px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    box-shadow: var(--shadow);
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
+.hamburger-btn {
+    display: none;
+    width: 40px;
+    height: 40px;
+    background: rgba(102, 126, 234, 0.2);
+    border: 1px solid var(--primary);
     border-radius: 10px;
+    color: var(--text-primary);
     cursor: pointer;
+    font-size: 18px;
+    transition: var(--transition-fast);
 }
+.hamburger-btn:hover {
+    background: var(--gradient-purple);
+    transform: scale(1.05);
+}
+.header-title {
+    flex: 1;
+}
+.header-title h2 {
+    font-size: 24px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 2px;
+}
+.header-title p {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+.header-actions {
+    display: flex;
+    gap: 10px;
+}
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    background: rgba(31, 41, 55, 0.6);
+    border: 1px solid var(--border);
+    border-radius: 10px;
     color: var(--text-primary);
+    cursor: pointer;
+    transition: var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
 }
+.icon-btn:hover {
+    background: var(--gradient-purple);
     border-color: var(--primary);
+    transform: translateY(-2px);
 }
+/* =============================================================================
+   Content Area
+   ============================================================================= */
+.content-area {
     flex: 1;
     padding: 30px;
+    overflow-y: auto;
 }
+.tab-panel {
     display: none;
 }
+.tab-panel.active {
     display: block;
     animation: fadeIn 0.3s;
 }
     to { opacity: 1; transform: translateY(0); }
 }
+/* =============================================================================
+   Cards & Components
+   ============================================================================= */
+.glass-card {
+    background: rgba(17, 24, 39, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 25px;
+    margin-bottom: 20px;
+    transition: all var(--transition-normal);
+}
+.glass-card:hover {
+    border-color: rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
+}
+.glass-card h3 {
+    font-size: 20px;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+    border-bottom: 2px solid var(--border);
+    padding-bottom: 10px;
+}
+.card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 20px;
 }
+.card-header h3 {
+    margin-bottom: 0;
+    border-bottom: none;
+    padding-bottom: 0;
 }
 /* Stats Grid */
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 25px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    transition: all var(--transition-normal);
     backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
+    opacity: 0;
+    transition: var(--transition-normal);
 }
 .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
 }
+.stat-card:hover::before {
+    opacity: 1;
 }
+.stat-card.gradient-purple {
+    border-left: 4px solid #667eea;
 }
+.stat-card.gradient-green {
+    border-left: 4px solid #10b981;
 }
+.stat-card.gradient-blue {
+    border-left: 4px solid #3b82f6;
 }
+.stat-card.gradient-orange {
+    border-left: 4px solid #f59e0b;
 }
+.stat-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    flex-shrink: 0;
+}
+.stat-card.gradient-purple .stat-icon {
+    background: var(--gradient-purple);
     color: white;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+.stat-card.gradient-green .stat-icon {
+    background: var(--gradient-green);
+    color: white;
+    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
+}
+.stat-card.gradient-blue .stat-icon {
+    background: var(--gradient-blue);
+    color: white;
+    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+}
+.stat-card.gradient-orange .stat-icon {
+    background: var(--gradient-orange);
+    color: white;
+    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
+}
+.stat-content {
+    flex: 1;
+}
+.stat-value {
+    font-size: 36px;
+    font-weight: 800;
+    color: var(--primary);
+    margin-bottom: 5px;
+}
+.stat-label {
     font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 600;
 }
+.stat-trend {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
 }
+.stat-trend i {
+    color: var(--success);
+}
+/* Grid Layouts */
+.grid-2 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 20px;
 }
+/* =============================================================================
+   Forms
+   ============================================================================= */
 .form-group {
     margin-bottom: 20px;
 }
     color: var(--text-primary);
     font-family: inherit;
     font-size: 14px;
+    transition: var(--transition-fast);
 }
 .form-group input:focus,
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
+.form-group textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+/* =============================================================================
+   Buttons
+   ============================================================================= */
+.btn-primary, .btn-refresh {
+    padding: 12px 24px;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    border: none;
+    border-radius: 10px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 14px;
+    position: relative;
+    overflow: hidden;
+}
+.btn-primary::before, .btn-refresh::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+.btn-primary:hover, .btn-refresh:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+.btn-primary:hover::before, .btn-refresh:hover::before {
+    width: 300px;
+    height: 300px;
+}
+.btn-refresh {
+    background: rgba(102, 126, 234, 0.2);
+    border: 1px solid var(--primary);
+}
+/* =============================================================================
+   Tables
+   ============================================================================= */
 table {
     width: 100%;
     border-collapse: collapse;
 table th,
 table td {
     padding: 12px;
+    text-align: left;
     border-bottom: 1px solid var(--border);
 }
     background: rgba(102, 126, 234, 0.05);
 }
+/* =============================================================================
+   Alerts
+   ============================================================================= */
 .alert {
     padding: 15px;
     border-radius: 10px;
     color: var(--warning);
 }
+/* =============================================================================
+   Loading States
+   ============================================================================= */
+.loading {
     display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: var(--text-secondary);
 }
+.spinner {
+    border: 3px solid var(--border);
+    border-top: 3px solid var(--primary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
 }
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
+/* =============================================================================
+   Utility Classes
+   ============================================================================= */
+.text-secondary {
     color: var(--text-secondary);
+    margin-bottom: 15px;
 }
+/* =============================================================================
+   Scrollbar
+   ============================================================================= */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
 }
+::-webkit-scrollbar-track {
+    background: var(--dark-card);
 }
+::-webkit-scrollbar-thumb {
+    background: var(--gradient-purple);
+    border-radius: 5px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-light);
 }
+/* =============================================================================
+   Responsive Design (Mobile First)
+   ============================================================================= */
 @media (max-width: 768px) {
+    /* Hide sidebar by default on mobile */
+    .sidebar {
+        transform: translateX(-100%);
     }
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    .sidebar-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    /* Show hamburger button */
+    .hamburger-btn {
+        display: flex;
     }
+    /* Adjust main wrapper */
+    .main-wrapper {
+        margin-left: 0;
+    }
+    /* Adjust content padding */
+    .content-area {
         padding: 15px;
     }
+    .top-header {
+        padding: 15px 20px;
     }
+    /* Adjust grids */
     .stats-grid {
         grid-template-columns: 1fr;
     }
+    .grid-2 {
+        grid-template-columns: 1fr;
     }
+    /* Adjust stat cards */
+    .stat-card {
+        flex-direction: column;
+        text-align: center;
     }
+    .stat-card .stat-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 28px;
+    }
+    /* Adjust header title */
+    .header-title h2 {
+        font-size: 18px;
+    }
+    .header-title p {
+        font-size: 11px;
     }
 }
+/* Tablet adjustments */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+/* =============================================================================
+   Light Theme
+   ============================================================================= */
+body.light-theme {
+    --dark: #f3f4f6;
+    --dark-card: #ffffff;
+    --dark-hover: #f9fafb;
+    --dark-elevated: #e5e7eb;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    --text-muted: #9ca3af;
+    --border: rgba(0, 0, 0, 0.1);
+    --border-light: rgba(0, 0, 0, 0.05);
+    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%);
 }
+body.light-theme::before {
+    background-image:
+        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
 }
+body.light-theme .sidebar {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
 }
+body.light-theme .top-header {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.7) 100%);
 }
+body.light-theme .glass-card,
+body.light-theme .stat-card {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
 }
+body.light-theme .form-group input,
+body.light-theme .form-group textarea,
+body.light-theme .form-group select {
+    background: rgba(249, 250, 251, 0.8);
 }
+body.light-theme table th {
+    background: rgba(249, 250, 251, 0.8);
 }
+body.light-theme ::-webkit-scrollbar-track {
+    background: #e5e7eb;
+}
+/* =============================================================================
+   News Cards - Modern Design
+   ============================================================================= */
+.news-card {
+    background: rgba(17, 24, 39, 0.6);
+    backdrop-filter: blur(10px);
     border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 20px;
     display: flex;
+    gap: 20px;
+    transition: all var(--transition-normal);
+    cursor: pointer;
 }
+.news-card:hover {
+    border-color: rgba(102, 126, 234, 0.5);
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
+    transform: translateY(-2px);
 }
+.news-card-image {
+    width: 120px;
+    height: 120px;
+    border-radius: 12px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     display: flex;
     align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 32px;
 }
+.news-card-content {
+    flex: 1;
+    min-width: 0;
 }
+.news-card-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 10px;
+    line-height: 1.4;
 }
+.news-card-title a {
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
 }
+.news-card-title a:hover {
+    color: var(--primary);
 }
+.news-card-excerpt {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 12px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
+.news-card-meta {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+    font-size: 12px;
+    color: var(--text-muted);
 }
+.news-card-source {
     display: flex;
     align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: rgba(102, 126, 234, 0.1);
+    border-radius: 6px;
+    font-weight: 600;
 }
+.news-card-time {
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
+.news-card-time svg {
+    width: 14px;
+    height: 14px;
 }
+.news-card-symbols {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
 }
+.symbol-badge {
+    padding: 3px 8px;
+    background: rgba(59, 130, 246, 0.15);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--info);
 }
+/* =============================================================================
+   Sentiment Visualizations
+   ============================================================================= */
+.sentiment-gauge-container {
+    position: relative;
+    width: 300px;
+    height: 150px;
+    margin: 20px auto;
 }
+.sentiment-gauge {
+    width: 100%;
+    height: 100%;
 }
+.sentiment-trend-arrow {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin: 0 8px;
+    vertical-align: middle;
+    animation: pulse-arrow 2s ease-in-out infinite;
 }
+.sentiment-trend-arrow.bullish {
+    color: var(--success);
 }
+.sentiment-trend-arrow.bearish {
+    color: var(--danger);
+    transform: rotate(180deg);
 }
+.sentiment-trend-arrow.neutral {
+    color: var(--warning);
+    transform: rotate(90deg);
 }
+@keyframes pulse-arrow {
+    0%, 100% { transform: translateY(0); opacity: 1; }
+    50% { transform: translateY(-5px); opacity: 0.7; }
 }
+.confidence-bar-container {
+    margin: 15px 0;
 }
+.confidence-bar-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: var(--text-secondary);
 }
+.confidence-bar {
+    width: 100%;
+    height: 12px;
+    background: rgba(31, 41, 55, 0.6);
+    border-radius: 6px;
+    overflow: hidden;
     position: relative;
 }
+.confidence-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--primary-light));
+    border-radius: 6px;
+    transition: width 1s ease-out;
     position: relative;
     overflow: hidden;
 }
+.confidence-bar-fill::after {
     content: '';
     position: absolute;
     top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    animation: shimmer 2s infinite;
 }
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
 }
+.sentiment-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
+.sentiment-badge.bullish,
+.sentiment-badge.positive {
+    background: rgba(16, 185, 129, 0.2);
+    border: 1px solid rgba(16, 185, 129, 0.4);
+    color: var(--success);
 }
+.sentiment-badge.bearish,
+.sentiment-badge.negative {
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    color: var(--danger);
 }
+.sentiment-badge.neutral {
+    background: rgba(245, 158, 11, 0.2);
+    border: 1px solid rgba(245, 158, 11, 0.4);
+    color: var(--warning);
 }
+.ai-result-card {
+    background: rgba(17, 24, 39, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 25px;
+    margin-top: 20px;
 }
+.ai-result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--border);
 }
+.ai-result-header h4 {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-primary);
 }
+.ai-result-metric {
+    text-align: center;
 }
+.ai-result-metric-value {
+    font-size: 36px;
+    font-weight: 800;
+    margin-bottom: 5px;
 }
+.ai-result-metric-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
+/* =============================================================================
+   Utility Classes
+   ============================================================================= */
+.time-ago {
+    color: var(--text-muted);
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
 }
+.icon-btn svg {
+    width: 18px;
+    height: 18px;
+    stroke-width: 2;
 }
+.hamburger-btn svg {
+    width: 24px;
+    height: 24px;
+    stroke-width: 2;
 }
+.sidebar-toggle-btn svg {
+    width: 20px;
+    height: 20px;
+    stroke-width: 2;
 }
+.btn-primary svg,
+.btn-refresh svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+    vertical-align: middle;
 }
+/* Responsive adjustments for news cards */
+@media (max-width: 768px) {
+    .news-card {
+        flex-direction: column;
+    }
+    .news-card-image {
+        width: 100%;
+        height: 200px;
+    }
+    .sentiment-gauge-container {
+        width: 100%;
+        max-width: 300px;
+    }
 }

static/js/app.js CHANGED Viewed

The diff for this file is too large to render. See raw diff