Market and analysis pages (#114)

* feat: Add advanced technical indicators and improve data fetching

This commit enhances the technical analysis module by integrating several new indicators, including Bollinger Bands, Stochastic RSI, ATR, and SMAs. It also refines the data fetching from CoinGecko to include more comprehensive coin details and improves the fallback data with accurate image URLs. The analysis and recommendation logic has been updated to leverage these new indicators for more robust insights.

Co-authored-by: bxsfy712 <bxsfy712@outlook.com>

* feat: Add technical indicators API and UI

Integrates a new API for technical indicators and updates the UI to display them.

Co-authored-by: bxsfy712 <bxsfy712@outlook.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: bxsfy712 <bxsfy712@outlook.com>

backend/routers/indicators_api.py

@@ -0,0 +1,1131 @@
+#!/usr/bin/env python3
+"""
+Technical Indicators API Router
+Provides API endpoints for calculating technical indicators on cryptocurrency data.
+Includes: Bollinger Bands, Stochastic RSI, ATR, SMA, EMA, MACD, RSI
+"""
+
+from fastapi import APIRouter, HTTPException, Query
+from pydantic import BaseModel, Field
+from typing import List, Dict, Any, Optional
+from datetime import datetime
+import logging
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/indicators", tags=["Technical Indicators"])
+
+
+# ============================================================================
+# Pydantic Models
+# ============================================================================
+
+class OHLCVData(BaseModel):
+    """OHLCV data model"""
+    timestamp: int
+    open: float
+    high: float
+    low: float
+    close: float
+    volume: float
+
+
+class IndicatorRequest(BaseModel):
+    """Request model for indicator calculation"""
+    symbol: str = Field(default="BTC", description="Cryptocurrency symbol")
+    timeframe: str = Field(default="1h", description="Timeframe (1m, 5m, 15m, 1h, 4h, 1d)")
+    ohlcv: Optional[List[OHLCVData]] = Field(default=None, description="OHLCV data array")
+    period: int = Field(default=14, description="Indicator period")
+
+
+class BollingerBandsResponse(BaseModel):
+    """Bollinger Bands response model"""
+    upper: float
+    middle: float
+    lower: float
+    bandwidth: float
+    percent_b: float
+    signal: str
+    description: str
+
+
+class StochRSIResponse(BaseModel):
+    """Stochastic RSI response model"""
+    value: float
+    k_line: float
+    d_line: float
+    signal: str
+    description: str
+
+
+class ATRResponse(BaseModel):
+    """Average True Range response model"""
+    value: float
+    percent: float
+    volatility_level: str
+    signal: str
+    description: str
+
+
+class SMAResponse(BaseModel):
+    """Simple Moving Average response model"""
+    sma20: float
+    sma50: float
+    sma200: Optional[float]
+    price_vs_sma20: str
+    price_vs_sma50: str
+    trend: str
+    signal: str
+    description: str
+
+
+class EMAResponse(BaseModel):
+    """Exponential Moving Average response model"""
+    ema12: float
+    ema26: float
+    ema50: Optional[float]
+    trend: str
+    signal: str
+    description: str
+
+
+class MACDResponse(BaseModel):
+    """MACD response model"""
+    macd_line: float
+    signal_line: float
+    histogram: float
+    trend: str
+    signal: str
+    description: str
+
+
+class RSIResponse(BaseModel):
+    """RSI response model"""
+    value: float
+    signal: str
+    description: str
+
+
+class ComprehensiveIndicatorsResponse(BaseModel):
+    """All indicators combined response"""
+    symbol: str
+    timeframe: str
+    timestamp: str
+    current_price: float
+    bollinger_bands: BollingerBandsResponse
+    stoch_rsi: StochRSIResponse
+    atr: ATRResponse
+    sma: SMAResponse
+    ema: EMAResponse
+    macd: MACDResponse
+    rsi: RSIResponse
+    overall_signal: str
+    recommendation: str
+
+
+# ============================================================================
+# Helper Functions for Calculations
+# ============================================================================
+
+def calculate_sma(prices: List[float], period: int) -> float:
+    """Calculate Simple Moving Average"""
+    if len(prices) < period:
+        return prices[-1] if prices else 0
+    return sum(prices[-period:]) / period
+
+
+def calculate_ema(prices: List[float], period: int) -> float:
+    """Calculate Exponential Moving Average"""
+    if len(prices) < period:
+        return prices[-1] if prices else 0
+    
+    multiplier = 2 / (period + 1)
+    ema = sum(prices[:period]) / period  # SMA for first period
+    
+    for price in prices[period:]:
+        ema = (price * multiplier) + (ema * (1 - multiplier))
+    
+    return ema
+
+
+def calculate_rsi(prices: List[float], period: int = 14) -> float:
+    """Calculate Relative Strength Index"""
+    if len(prices) < period + 1:
+        return 50.0
+    
+    deltas = [prices[i] - prices[i-1] for i in range(1, len(prices))]
+    gains = [d if d > 0 else 0 for d in deltas[-period:]]
+    losses = [-d if d < 0 else 0 for d in deltas[-period:]]
+    
+    avg_gain = sum(gains) / period
+    avg_loss = sum(losses) / period
+    
+    if avg_loss == 0:
+        return 100.0 if avg_gain > 0 else 50.0
+    
+    rs = avg_gain / avg_loss
+    return 100 - (100 / (1 + rs))
+
+
+def calculate_bollinger_bands(prices: List[float], period: int = 20, std_dev: float = 2) -> Dict[str, float]:
+    """Calculate Bollinger Bands"""
+    if len(prices) < period:
+        current = prices[-1] if prices else 0
+        return {
+            "upper": current,
+            "middle": current,
+            "lower": current,
+            "bandwidth": 0,
+            "percent_b": 50
+        }
+    
+    recent_prices = prices[-period:]
+    middle = sum(recent_prices) / period
+    
+    # Calculate standard deviation
+    variance = sum((p - middle) ** 2 for p in recent_prices) / period
+    std = variance ** 0.5
+    
+    upper = middle + (std_dev * std)
+    lower = middle - (std_dev * std)
+    
+    # Bandwidth as percentage
+    bandwidth = ((upper - lower) / middle) * 100 if middle > 0 else 0
+    
+    # Percent B (position within bands)
+    current_price = prices[-1]
+    if upper != lower:
+        percent_b = ((current_price - lower) / (upper - lower)) * 100
+    else:
+        percent_b = 50
+    
+    return {
+        "upper": round(upper, 8),
+        "middle": round(middle, 8),
+        "lower": round(lower, 8),
+        "bandwidth": round(bandwidth, 2),
+        "percent_b": round(percent_b, 2)
+    }
+
+
+def calculate_stoch_rsi(prices: List[float], rsi_period: int = 14, stoch_period: int = 14) -> Dict[str, float]:
+    """Calculate Stochastic RSI"""
+    if len(prices) < rsi_period + stoch_period:
+        return {"value": 50, "k_line": 50, "d_line": 50}
+    
+    # Calculate RSI values for the stoch period
+    rsi_values = []
+    for i in range(stoch_period + 3):  # Extra for smoothing
+        end_idx = len(prices) - stoch_period + i + 1
+        if end_idx > rsi_period:
+            slice_prices = prices[:end_idx]
+            rsi_values.append(calculate_rsi(slice_prices, rsi_period))
+    
+    if len(rsi_values) < stoch_period:
+        return {"value": 50, "k_line": 50, "d_line": 50}
+    
+    recent_rsi = rsi_values[-stoch_period:]
+    rsi_high = max(recent_rsi)
+    rsi_low = min(recent_rsi)
+    
+    current_rsi = rsi_values[-1]
+    
+    if rsi_high == rsi_low:
+        stoch_rsi = 50
+    else:
+        stoch_rsi = ((current_rsi - rsi_low) / (rsi_high - rsi_low)) * 100
+    
+    # K line is the raw Stoch RSI
+    k_line = stoch_rsi
+    
+    # D line is 3-period SMA of K
+    if len(rsi_values) >= 3:
+        k_values = []
+        for i in range(3):
+            idx = -3 + i
+            r_high = max(rsi_values[idx-stoch_period+1:idx+1]) if idx+1 <= 0 else rsi_high
+            r_low = min(rsi_values[idx-stoch_period+1:idx+1]) if idx+1 <= 0 else rsi_low
+            curr = rsi_values[idx]
+            if r_high != r_low:
+                k_values.append(((curr - r_low) / (r_high - r_low)) * 100)
+            else:
+                k_values.append(50)
+        d_line = sum(k_values) / 3
+    else:
+        d_line = k_line
+    
+    return {
+        "value": round(stoch_rsi, 2),
+        "k_line": round(k_line, 2),
+        "d_line": round(d_line, 2)
+    }
+
+
+def calculate_atr(highs: List[float], lows: List[float], closes: List[float], period: int = 14) -> float:
+    """Calculate Average True Range"""
+    if len(closes) < period + 1:
+        if len(highs) > 0 and len(lows) > 0:
+            return highs[-1] - lows[-1]
+        return 0
+    
+    true_ranges = []
+    for i in range(1, len(closes)):
+        high = highs[i]
+        low = lows[i]
+        prev_close = closes[i-1]
+        
+        tr = max(
+            high - low,
+            abs(high - prev_close),
+            abs(low - prev_close)
+        )
+        true_ranges.append(tr)
+    
+    # ATR is the average of the last 'period' true ranges
+    if len(true_ranges) < period:
+        return sum(true_ranges) / len(true_ranges) if true_ranges else 0
+    
+    return sum(true_ranges[-period:]) / period
+
+
+def calculate_macd(prices: List[float], fast: int = 12, slow: int = 26, signal: int = 9) -> Dict[str, float]:
+    """Calculate MACD"""
+    if len(prices) < slow + signal:
+        return {"macd_line": 0, "signal_line": 0, "histogram": 0}
+    
+    ema_fast = calculate_ema(prices, fast)
+    ema_slow = calculate_ema(prices, slow)
+    macd_line = ema_fast - ema_slow
+    
+    # Calculate signal line (EMA of MACD)
+    # We need MACD values history for signal line
+    macd_values = []
+    for i in range(signal + 5):
+        idx = len(prices) - signal - 5 + i
+        if idx > slow:
+            slice_prices = prices[:idx+1]
+            ef = calculate_ema(slice_prices, fast)
+            es = calculate_ema(slice_prices, slow)
+            macd_values.append(ef - es)
+    
+    if len(macd_values) >= signal:
+        signal_line = calculate_ema(macd_values, signal)
+    else:
+        signal_line = macd_line
+    
+    histogram = macd_line - signal_line
+    
+    return {
+        "macd_line": round(macd_line, 8),
+        "signal_line": round(signal_line, 8),
+        "histogram": round(histogram, 8)
+    }
+
+
+# ============================================================================
+# API Endpoints
+# ============================================================================
+
+@router.get("/services")
+async def list_indicator_services():
+    """List all available technical indicator services"""
+    return {
+        "success": True,
+        "services": [
+            {
+                "id": "bollinger_bands",
+                "name": "Bollinger Bands",
+                "description": "Volatility bands placed above and below a moving average",
+                "endpoint": "/api/indicators/bollinger-bands",
+                "parameters": ["symbol", "timeframe", "period", "std_dev"],
+                "icon": "📊",
+                "category": "volatility"
+            },
+            {
+                "id": "stoch_rsi",
+                "name": "Stochastic RSI",
+                "description": "Combines Stochastic oscillator with RSI for momentum",
+                "endpoint": "/api/indicators/stoch-rsi",
+                "parameters": ["symbol", "timeframe", "rsi_period", "stoch_period"],
+                "icon": "📈",
+                "category": "momentum"
+            },
+            {
+                "id": "atr",
+                "name": "Average True Range (ATR)",
+                "description": "Measures market volatility and price movement",
+                "endpoint": "/api/indicators/atr",
+                "parameters": ["symbol", "timeframe", "period"],
+                "icon": "📉",
+                "category": "volatility"
+            },
+            {
+                "id": "sma",
+                "name": "Simple Moving Average (SMA)",
+                "description": "Average price over specified periods (20, 50, 200)",
+                "endpoint": "/api/indicators/sma",
+                "parameters": ["symbol", "timeframe"],
+                "icon": "〰️",
+                "category": "trend"
+            },
+            {
+                "id": "ema",
+                "name": "Exponential Moving Average (EMA)",
+                "description": "Weighted moving average giving more weight to recent prices",
+                "endpoint": "/api/indicators/ema",
+                "parameters": ["symbol", "timeframe"],
+                "icon": "📐",
+                "category": "trend"
+            },
+            {
+                "id": "macd",
+                "name": "MACD",
+                "description": "Moving Average Convergence Divergence - trend following momentum",
+                "endpoint": "/api/indicators/macd",
+                "parameters": ["symbol", "timeframe", "fast", "slow", "signal"],
+                "icon": "🔀",
+                "category": "momentum"
+            },
+            {
+                "id": "rsi",
+                "name": "RSI",
+                "description": "Relative Strength Index - momentum oscillator (0-100)",
+                "endpoint": "/api/indicators/rsi",
+                "parameters": ["symbol", "timeframe", "period"],
+                "icon": "💪",
+                "category": "momentum"
+            },
+            {
+                "id": "comprehensive",
+                "name": "Comprehensive Analysis",
+                "description": "All indicators combined with trading signals",
+                "endpoint": "/api/indicators/comprehensive",
+                "parameters": ["symbol", "timeframe"],
+                "icon": "🎯",
+                "category": "analysis"
+            }
+        ],
+        "categories": {
+            "volatility": "Measure price volatility and potential breakouts",
+            "momentum": "Identify overbought/oversold conditions",
+            "trend": "Determine market direction and strength",
+            "analysis": "Complete multi-indicator analysis"
+        },
+        "timestamp": datetime.utcnow().isoformat() + "Z"
+    }
+
+
+@router.get("/bollinger-bands")
+async def get_bollinger_bands(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe"),
+    period: int = Query(default=20, description="Period for calculation"),
+    std_dev: float = Query(default=2.0, description="Standard deviation multiplier")
+):
+    """Calculate Bollinger Bands for a symbol"""
+    try:
+        # Get OHLCV data from market API
+        from backend.services.coingecko_client import coingecko_client
+        
+        # Map timeframe to days
+        timeframe_days = {"1m": 1, "5m": 1, "15m": 1, "1h": 7, "4h": 30, "1d": 90}
+        days = timeframe_days.get(timeframe, 7)
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=days)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            # Return demo data if API fails
+            current_price = 67500 if symbol.upper() == "BTC" else 3400 if symbol.upper() == "ETH" else 100
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "bollinger_bands",
+                "data": {
+                    "upper": round(current_price * 1.05, 2),
+                    "middle": current_price,
+                    "lower": round(current_price * 0.95, 2),
+                    "bandwidth": 10.0,
+                    "percent_b": 50.0
+                },
+                "signal": "neutral",
+                "description": "Price is within the bands - no extreme conditions detected",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        bb = calculate_bollinger_bands(prices, period, std_dev)
+        
+        current_price = prices[-1] if prices else 0
+        
+        # Determine signal
+        if bb["percent_b"] > 95:
+            signal = "overbought"
+            description = "Price at upper band - potential reversal or breakout"
+        elif bb["percent_b"] < 5:
+            signal = "oversold"
+            description = "Price at lower band - potential bounce or breakdown"
+        elif bb["percent_b"] > 70:
+            signal = "bullish_caution"
+            description = "Price approaching upper band - watch for resistance"
+        elif bb["percent_b"] < 30:
+            signal = "bearish_caution"
+            description = "Price approaching lower band - watch for support"
+        else:
+            signal = "neutral"
+            description = "Price within normal range - no extreme conditions"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "bollinger_bands",
+            "data": bb,
+            "current_price": round(current_price, 8),
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"Bollinger Bands calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/stoch-rsi")
+async def get_stoch_rsi(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe"),
+    rsi_period: int = Query(default=14, description="RSI period"),
+    stoch_period: int = Query(default=14, description="Stochastic period")
+):
+    """Calculate Stochastic RSI for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        timeframe_days = {"1m": 1, "5m": 1, "15m": 1, "1h": 7, "4h": 30, "1d": 90}
+        days = timeframe_days.get(timeframe, 7)
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=days)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "stoch_rsi",
+                "data": {"value": 50.0, "k_line": 50.0, "d_line": 50.0},
+                "signal": "neutral",
+                "description": "Neutral momentum conditions",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        stoch = calculate_stoch_rsi(prices, rsi_period, stoch_period)
+        
+        # Determine signal
+        if stoch["value"] > 80:
+            signal = "overbought"
+            description = "Extreme overbought - high probability of pullback"
+        elif stoch["value"] < 20:
+            signal = "oversold"
+            description = "Extreme oversold - high probability of bounce"
+        elif stoch["k_line"] > stoch["d_line"] and stoch["value"] < 50:
+            signal = "bullish_crossover"
+            description = "K crossed above D in oversold territory - bullish signal"
+        elif stoch["k_line"] < stoch["d_line"] and stoch["value"] > 50:
+            signal = "bearish_crossover"
+            description = "K crossed below D in overbought territory - bearish signal"
+        else:
+            signal = "neutral"
+            description = "Normal momentum range - no extreme conditions"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "stoch_rsi",
+            "data": stoch,
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"Stochastic RSI calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/atr")
+async def get_atr(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe"),
+    period: int = Query(default=14, description="ATR period")
+):
+    """Calculate Average True Range for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        timeframe_days = {"1m": 1, "5m": 1, "15m": 1, "1h": 7, "4h": 30, "1d": 90}
+        days = timeframe_days.get(timeframe, 7)
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=days)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            current_price = 67500 if symbol.upper() == "BTC" else 3400 if symbol.upper() == "ETH" else 100
+            atr_value = current_price * 0.02  # 2% default volatility
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "atr",
+                "data": {
+                    "value": round(atr_value, 2),
+                    "percent": 2.0
+                },
+                "volatility_level": "medium",
+                "signal": "neutral",
+                "description": "Normal market volatility",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        # For ATR we need H/L/C - use price approximation
+        highs = [p * 1.005 for p in prices]  # Approximate
+        lows = [p * 0.995 for p in prices]
+        
+        atr_value = calculate_atr(highs, lows, prices, period)
+        current_price = prices[-1] if prices else 1
+        atr_percent = (atr_value / current_price) * 100 if current_price > 0 else 0
+        
+        # Determine volatility level
+        if atr_percent > 5:
+            volatility_level = "very_high"
+            signal = "high_risk"
+            description = "Very high volatility - increase position sizing caution"
+        elif atr_percent > 3:
+            volatility_level = "high"
+            signal = "caution"
+            description = "High volatility - wider stop losses recommended"
+        elif atr_percent > 1.5:
+            volatility_level = "medium"
+            signal = "neutral"
+            description = "Normal volatility - standard position sizing"
+        else:
+            volatility_level = "low"
+            signal = "breakout_watch"
+            description = "Low volatility - potential breakout forming"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "atr",
+            "data": {
+                "value": round(atr_value, 8),
+                "percent": round(atr_percent, 2)
+            },
+            "current_price": round(current_price, 8),
+            "volatility_level": volatility_level,
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"ATR calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/sma")
+async def get_sma(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe")
+):
+    """Calculate Simple Moving Averages (20, 50, 200) for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        # Need more data for SMA 200
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=365)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            current_price = 67500 if symbol.upper() == "BTC" else 3400 if symbol.upper() == "ETH" else 100
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "sma",
+                "data": {
+                    "sma20": current_price,
+                    "sma50": current_price * 0.98,
+                    "sma200": current_price * 0.95
+                },
+                "current_price": current_price,
+                "price_vs_sma20": "above",
+                "price_vs_sma50": "above",
+                "trend": "bullish",
+                "signal": "buy",
+                "description": "Price above all major SMAs - bullish trend",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        current_price = prices[-1] if prices else 0
+        
+        sma20 = calculate_sma(prices, 20)
+        sma50 = calculate_sma(prices, 50)
+        sma200 = calculate_sma(prices, 200) if len(prices) >= 200 else None
+        
+        price_vs_sma20 = "above" if current_price > sma20 else "below"
+        price_vs_sma50 = "above" if current_price > sma50 else "below"
+        
+        # Determine trend
+        if current_price > sma20 > sma50:
+            trend = "strong_bullish"
+            signal = "buy"
+            description = "Strong uptrend - price above rising SMAs"
+        elif current_price > sma20 and current_price > sma50:
+            trend = "bullish"
+            signal = "buy"
+            description = "Bullish trend - price above major SMAs"
+        elif current_price < sma20 < sma50:
+            trend = "strong_bearish"
+            signal = "sell"
+            description = "Strong downtrend - price below falling SMAs"
+        elif current_price < sma20 and current_price < sma50:
+            trend = "bearish"
+            signal = "sell"
+            description = "Bearish trend - price below major SMAs"
+        else:
+            trend = "neutral"
+            signal = "hold"
+            description = "Mixed signals - waiting for clearer direction"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "sma",
+            "data": {
+                "sma20": round(sma20, 8),
+                "sma50": round(sma50, 8),
+                "sma200": round(sma200, 8) if sma200 else None
+            },
+            "current_price": round(current_price, 8),
+            "price_vs_sma20": price_vs_sma20,
+            "price_vs_sma50": price_vs_sma50,
+            "trend": trend,
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"SMA calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/ema")
+async def get_ema(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe")
+):
+    """Calculate Exponential Moving Averages for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=90)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            current_price = 67500 if symbol.upper() == "BTC" else 3400 if symbol.upper() == "ETH" else 100
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "ema",
+                "data": {
+                    "ema12": current_price,
+                    "ema26": current_price * 0.99,
+                    "ema50": current_price * 0.97
+                },
+                "current_price": current_price,
+                "trend": "bullish",
+                "signal": "buy",
+                "description": "EMAs aligned bullish",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        current_price = prices[-1] if prices else 0
+        
+        ema12 = calculate_ema(prices, 12)
+        ema26 = calculate_ema(prices, 26)
+        ema50 = calculate_ema(prices, 50) if len(prices) >= 50 else None
+        
+        # Determine trend
+        if ema12 > ema26:
+            if current_price > ema12:
+                trend = "strong_bullish"
+                signal = "buy"
+                description = "Strong bullish - price above rising EMAs"
+            else:
+                trend = "bullish"
+                signal = "buy"
+                description = "Bullish EMAs - EMA12 above EMA26"
+        else:
+            if current_price < ema12:
+                trend = "strong_bearish"
+                signal = "sell"
+                description = "Strong bearish - price below falling EMAs"
+            else:
+                trend = "bearish"
+                signal = "sell"
+                description = "Bearish EMAs - EMA12 below EMA26"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "ema",
+            "data": {
+                "ema12": round(ema12, 8),
+                "ema26": round(ema26, 8),
+                "ema50": round(ema50, 8) if ema50 else None
+            },
+            "current_price": round(current_price, 8),
+            "trend": trend,
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"EMA calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/macd")
+async def get_macd(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe"),
+    fast: int = Query(default=12, description="Fast EMA period"),
+    slow: int = Query(default=26, description="Slow EMA period"),
+    signal_period: int = Query(default=9, description="Signal line period")
+):
+    """Calculate MACD for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=90)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "macd",
+                "data": {
+                    "macd_line": 50.0,
+                    "signal_line": 45.0,
+                    "histogram": 5.0
+                },
+                "trend": "bullish",
+                "signal": "buy",
+                "description": "MACD above signal line - bullish momentum",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        macd = calculate_macd(prices, fast, slow, signal_period)
+        
+        # Determine signal
+        if macd["histogram"] > 0:
+            if macd["macd_line"] > 0:
+                trend = "strong_bullish"
+                signal = "buy"
+                description = "Strong bullish - MACD and histogram positive"
+            else:
+                trend = "bullish"
+                signal = "buy"
+                description = "Bullish crossover - MACD above signal"
+        else:
+            if macd["macd_line"] < 0:
+                trend = "strong_bearish"
+                signal = "sell"
+                description = "Strong bearish - MACD and histogram negative"
+            else:
+                trend = "bearish"
+                signal = "sell"
+                description = "Bearish crossover - MACD below signal"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "macd",
+            "data": macd,
+            "trend": trend,
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"MACD calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/rsi")
+async def get_rsi(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe"),
+    period: int = Query(default=14, description="RSI period")
+):
+    """Calculate RSI for a symbol"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        timeframe_days = {"1m": 1, "5m": 1, "15m": 1, "1h": 7, "4h": 30, "1d": 90}
+        days = timeframe_days.get(timeframe, 7)
+        
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=days)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "indicator": "rsi",
+                "data": {"value": 55.0},
+                "signal": "neutral",
+                "description": "RSI in neutral zone - no extreme conditions",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        rsi = calculate_rsi(prices, period)
+        
+        # Determine signal
+        if rsi > 70:
+            signal = "overbought"
+            description = f"RSI at {rsi:.1f} - overbought conditions, potential pullback"
+        elif rsi < 30:
+            signal = "oversold"
+            description = f"RSI at {rsi:.1f} - oversold conditions, potential bounce"
+        elif rsi > 60:
+            signal = "bullish"
+            description = f"RSI at {rsi:.1f} - bullish momentum"
+        elif rsi < 40:
+            signal = "bearish"
+            description = f"RSI at {rsi:.1f} - bearish momentum"
+        else:
+            signal = "neutral"
+            description = f"RSI at {rsi:.1f} - neutral zone"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "indicator": "rsi",
+            "data": {"value": round(rsi, 2)},
+            "signal": signal,
+            "description": description,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"RSI calculation error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/comprehensive")
+async def get_comprehensive_analysis(
+    symbol: str = Query(default="BTC", description="Cryptocurrency symbol"),
+    timeframe: str = Query(default="1h", description="Timeframe")
+):
+    """Get comprehensive analysis with all indicators"""
+    try:
+        from backend.services.coingecko_client import coingecko_client
+        
+        # Get historical data
+        ohlcv = await coingecko_client.get_ohlcv(symbol, days=365)
+        
+        if not ohlcv or "prices" not in ohlcv:
+            # Return comprehensive fallback
+            current_price = 67500 if symbol.upper() == "BTC" else 3400 if symbol.upper() == "ETH" else 100
+            return {
+                "success": True,
+                "symbol": symbol.upper(),
+                "timeframe": timeframe,
+                "current_price": current_price,
+                "indicators": {
+                    "bollinger_bands": {"upper": current_price * 1.05, "middle": current_price, "lower": current_price * 0.95, "bandwidth": 10, "percent_b": 50},
+                    "stoch_rsi": {"value": 50, "k_line": 50, "d_line": 50},
+                    "atr": {"value": current_price * 0.02, "percent": 2.0},
+                    "sma": {"sma20": current_price, "sma50": current_price * 0.98, "sma200": current_price * 0.95},
+                    "ema": {"ema12": current_price, "ema26": current_price * 0.99},
+                    "macd": {"macd_line": 50, "signal_line": 45, "histogram": 5},
+                    "rsi": {"value": 55}
+                },
+                "signals": {
+                    "bollinger_bands": "neutral",
+                    "stoch_rsi": "neutral",
+                    "atr": "medium_volatility",
+                    "sma": "bullish",
+                    "ema": "bullish",
+                    "macd": "bullish",
+                    "rsi": "neutral"
+                },
+                "overall_signal": "HOLD",
+                "confidence": 60,
+                "recommendation": "Mixed signals - wait for clearer direction",
+                "timestamp": datetime.utcnow().isoformat() + "Z",
+                "source": "fallback"
+            }
+        
+        prices = [p[1] for p in ohlcv["prices"]]
+        current_price = prices[-1] if prices else 0
+        
+        # Calculate all indicators
+        bb = calculate_bollinger_bands(prices, 20, 2)
+        stoch = calculate_stoch_rsi(prices, 14, 14)
+        
+        # Approximate H/L for ATR
+        highs = [p * 1.005 for p in prices]
+        lows = [p * 0.995 for p in prices]
+        atr_value = calculate_atr(highs, lows, prices, 14)
+        atr_percent = (atr_value / current_price) * 100 if current_price > 0 else 0
+        
+        sma20 = calculate_sma(prices, 20)
+        sma50 = calculate_sma(prices, 50)
+        sma200 = calculate_sma(prices, 200) if len(prices) >= 200 else None
+        
+        ema12 = calculate_ema(prices, 12)
+        ema26 = calculate_ema(prices, 26)
+        
+        macd = calculate_macd(prices, 12, 26, 9)
+        rsi = calculate_rsi(prices, 14)
+        
+        # Determine individual signals
+        signals = {}
+        
+        # BB signal
+        if bb["percent_b"] > 80:
+            signals["bollinger_bands"] = "overbought"
+        elif bb["percent_b"] < 20:
+            signals["bollinger_bands"] = "oversold"
+        else:
+            signals["bollinger_bands"] = "neutral"
+        
+        # Stoch RSI signal
+        if stoch["value"] > 80:
+            signals["stoch_rsi"] = "overbought"
+        elif stoch["value"] < 20:
+            signals["stoch_rsi"] = "oversold"
+        else:
+            signals["stoch_rsi"] = "neutral"
+        
+        # ATR signal
+        if atr_percent > 5:
+            signals["atr"] = "high_volatility"
+        elif atr_percent < 1:
+            signals["atr"] = "low_volatility"
+        else:
+            signals["atr"] = "medium_volatility"
+        
+        # SMA signal
+        if current_price > sma20 and current_price > sma50:
+            signals["sma"] = "bullish"
+        elif current_price < sma20 and current_price < sma50:
+            signals["sma"] = "bearish"
+        else:
+            signals["sma"] = "neutral"
+        
+        # EMA signal
+        if ema12 > ema26:
+            signals["ema"] = "bullish"
+        else:
+            signals["ema"] = "bearish"
+        
+        # MACD signal
+        if macd["histogram"] > 0:
+            signals["macd"] = "bullish"
+        else:
+            signals["macd"] = "bearish"
+        
+        # RSI signal
+        if rsi > 70:
+            signals["rsi"] = "overbought"
+        elif rsi < 30:
+            signals["rsi"] = "oversold"
+        elif rsi > 50:
+            signals["rsi"] = "bullish"
+        else:
+            signals["rsi"] = "bearish"
+        
+        # Calculate overall signal
+        bullish_count = sum(1 for s in signals.values() if s in ["bullish", "oversold"])
+        bearish_count = sum(1 for s in signals.values() if s in ["bearish", "overbought"])
+        
+        if bullish_count >= 5:
+            overall_signal = "STRONG_BUY"
+            confidence = 85
+            recommendation = "Strong bullish signals across multiple indicators - consider buying"
+        elif bullish_count >= 4:
+            overall_signal = "BUY"
+            confidence = 70
+            recommendation = "Majority bullish signals - favorable conditions for entry"
+        elif bearish_count >= 5:
+            overall_signal = "STRONG_SELL"
+            confidence = 85
+            recommendation = "Strong bearish signals across multiple indicators - consider selling"
+        elif bearish_count >= 4:
+            overall_signal = "SELL"
+            confidence = 70
+            recommendation = "Majority bearish signals - unfavorable conditions"
+        else:
+            overall_signal = "HOLD"
+            confidence = 50
+            recommendation = "Mixed signals - wait for clearer direction before taking action"
+        
+        return {
+            "success": True,
+            "symbol": symbol.upper(),
+            "timeframe": timeframe,
+            "current_price": round(current_price, 8),
+            "indicators": {
+                "bollinger_bands": bb,
+                "stoch_rsi": stoch,
+                "atr": {"value": round(atr_value, 8), "percent": round(atr_percent, 2)},
+                "sma": {"sma20": round(sma20, 8), "sma50": round(sma50, 8), "sma200": round(sma200, 8) if sma200 else None},
+                "ema": {"ema12": round(ema12, 8), "ema26": round(ema26, 8)},
+                "macd": macd,
+                "rsi": {"value": round(rsi, 2)}
+            },
+            "signals": signals,
+            "overall_signal": overall_signal,
+            "confidence": confidence,
+            "recommendation": recommendation,
+            "timestamp": datetime.utcnow().isoformat() + "Z",
+            "source": "coingecko"
+        }
+        
+    except Exception as e:
+        logger.error(f"Comprehensive analysis error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))

backend/services/coingecko_client.py

@@ -133,13 +133,21 @@ class CoinGeckoClient:
                     prices = []
                     for coin in data:
                         prices.append({
+                            "id": coin.get("id", ""),
                             "symbol": coin.get("symbol", "").upper(),
                             "name": coin.get("name", ""),
+                            "image": coin.get("image", ""),  # CoinGecko provides real image URLs
                             "price": coin.get("current_price", 0),
                             "change24h": coin.get("price_change_24h", 0),
                             "changePercent24h": coin.get("price_change_percentage_24h", 0),
                             "volume24h": coin.get("total_volume", 0),
                             "marketCap": coin.get("market_cap", 0),
+                            "market_cap_rank": coin.get("market_cap_rank", 0),
+                            "circulating_supply": coin.get("circulating_supply", 0),
+                            "total_supply": coin.get("total_supply", 0),
+                            "max_supply": coin.get("max_supply", 0),
+                            "ath": coin.get("ath", 0),
+                            "atl": coin.get("atl", 0),
                             "source": "coingecko",
                             "timestamp": int(datetime.utcnow().timestamp() * 1000)
                         })

hf_unified_server.py

@@ -366,6 +366,14 @@ try:
 except Exception as e:
     logger.error(f"Failed to include realtime_monitoring_router: {e}")
 
+# Technical Indicators Services API
+try:
+    from backend.routers.indicators_api import router as indicators_router
+    app.include_router(indicators_router)  # Technical Indicators API (BB, StochRSI, ATR, SMA, EMA, MACD, RSI)
+    logger.info("✓ ✅ Technical Indicators Router loaded (Bollinger Bands, StochRSI, ATR, SMA, EMA, MACD, RSI)")
+except Exception as e:
+    logger.error(f"Failed to include indicators_router: {e}")
+
 # Add routers status endpoint
 @app.get("/api/routers")
 async def get_routers_status():
@@ -383,6 +391,7 @@ async def get_routers_status():
         "trading_backtesting": "loaded" if trading_router else "not_available",
         "market_api": "loaded",
         "technical_analysis": "loaded",
+        "technical_indicators": "loaded",  # NEW: BB, StochRSI, ATR, SMA, EMA, MACD, RSI
         "dynamic_model_loader": "loaded" if dynamic_model_router else "not_available"
     }
     return {
@@ -1316,13 +1325,19 @@ async def api_coins_top(limit: int = 50):
         # Transform to expected format with all required fields
         coins = []
         for idx, coin in enumerate(market_data):
+            # Use the real CoinGecko image URL if available
+            image_url = coin.get("image", "")
+            if not image_url:
+                # Fallback to a generated URL
+                image_url = f"https://assets.coingecko.com/coins/images/1/small/{coin.get('id', coin.get('symbol', '').lower())}.png"
+            
             coins.append({
-                "id": coin.get("symbol", "").lower(),
-                "rank": idx + 1,
-                "market_cap_rank": idx + 1,
+                "id": coin.get("id", coin.get("symbol", "").lower()),
+                "rank": coin.get("market_cap_rank", idx + 1),
+                "market_cap_rank": coin.get("market_cap_rank", idx + 1),
                 "symbol": coin.get("symbol", ""),
                 "name": coin.get("name", coin.get("symbol", "")),
-                "image": f"https://assets.coingecko.com/coins/images/1/small/{coin.get('symbol', '').lower()}.png",
+                "image": image_url,  # Real image URL from CoinGecko
                 "price": coin.get("price", 0),
                 "current_price": coin.get("price", 0),
                 "market_cap": coin.get("marketCap", 0),
@@ -1333,12 +1348,13 @@ async def api_coins_top(limit: int = 50):
                 "price_change_percentage_24h": coin.get("changePercent24h", 0),
                 "change_7d": 0,  # Will be populated if available
                 "price_change_percentage_7d": 0,
+                "price_change_percentage_7d_in_currency": 0,
                 "sparkline": [],  # Can be populated from separate API call if needed
-                "circulating_supply": 0,
-                "total_supply": 0,
-                "max_supply": 0,
-                "ath": 0,
-                "atl": 0,
+                "circulating_supply": coin.get("circulating_supply", 0),
+                "total_supply": coin.get("total_supply", 0),
+                "max_supply": coin.get("max_supply", 0),
+                "ath": coin.get("ath", 0),
+                "atl": coin.get("atl", 0),
                 "last_updated": coin.get("timestamp", int(datetime.utcnow().timestamp() * 1000))
             })
         
@@ -1352,31 +1368,32 @@ async def api_coins_top(limit: int = 50):
         }
     except Exception as e:
         logger.error(f"Failed to fetch top coins: {e}")
-        # Return minimal fallback data
+        # Return minimal fallback data with proper CoinGecko image URLs
         import random
         fallback_coins = []
+        # (symbol, name, price, mcap, coingecko_id, image_url)
         coin_data = [
-            ("BTC", "Bitcoin", 67850, 1_280_000_000_000),
-            ("ETH", "Ethereum", 3420, 410_000_000_000),
-            ("BNB", "Binance Coin", 585, 88_000_000_000),
-            ("SOL", "Solana", 145, 65_000_000_000),
-            ("XRP", "Ripple", 0.62, 34_000_000_000),
-            ("ADA", "Cardano", 0.58, 21_000_000_000),
-            ("AVAX", "Avalanche", 38, 14_500_000_000),
-            ("DOT", "Polkadot", 7.2, 9_800_000_000),
-            ("MATIC", "Polygon", 0.88, 8_200_000_000),
-            ("LINK", "Chainlink", 15.4, 8_900_000_000)
+            ("BTC", "Bitcoin", 67850, 1_280_000_000_000, "bitcoin", "https://assets.coingecko.com/coins/images/1/small/bitcoin.png"),
+            ("ETH", "Ethereum", 3420, 410_000_000_000, "ethereum", "https://assets.coingecko.com/coins/images/279/small/ethereum.png"),
+            ("BNB", "BNB", 585, 88_000_000_000, "binancecoin", "https://assets.coingecko.com/coins/images/825/small/bnb-icon2_2x.png"),
+            ("SOL", "Solana", 145, 65_000_000_000, "solana", "https://assets.coingecko.com/coins/images/4128/small/solana.png"),
+            ("XRP", "XRP", 0.62, 34_000_000_000, "ripple", "https://assets.coingecko.com/coins/images/44/small/xrp-symbol-white-128.png"),
+            ("ADA", "Cardano", 0.58, 21_000_000_000, "cardano", "https://assets.coingecko.com/coins/images/975/small/cardano.png"),
+            ("AVAX", "Avalanche", 38, 14_500_000_000, "avalanche-2", "https://assets.coingecko.com/coins/images/12559/small/Avalanche_Circle_RedWhite_Trans.png"),
+            ("DOT", "Polkadot", 7.2, 9_800_000_000, "polkadot", "https://assets.coingecko.com/coins/images/12171/small/polkadot.png"),
+            ("MATIC", "Polygon", 0.88, 8_200_000_000, "matic-network", "https://assets.coingecko.com/coins/images/4713/small/matic-token-icon.png"),
+            ("LINK", "Chainlink", 15.4, 8_900_000_000, "chainlink", "https://assets.coingecko.com/coins/images/877/small/chainlink-new-logo.png")
         ]
         
         for i in range(min(limit, len(coin_data) * 5)):
-            symbol, name, price, mcap = coin_data[i % len(coin_data)]
+            symbol, name, price, mcap, coingecko_id, image = coin_data[i % len(coin_data)]
             fallback_coins.append({
-                "id": symbol.lower(),
+                "id": coingecko_id,
                 "rank": i + 1,
                 "market_cap_rank": i + 1,
                 "symbol": symbol,
                 "name": name,
-                "image": f"https://assets.coingecko.com/coins/images/1/small/{symbol.lower()}.png",
+                "image": image,  # Correct CoinGecko image URL
                 "price": price,
                 "current_price": price,
                 "market_cap": mcap,
@@ -1387,6 +1404,7 @@ async def api_coins_top(limit: int = 50):
                 "price_change_percentage_24h": round(random.uniform(-8, 15), 2),
                 "change_7d": round(random.uniform(-20, 30), 2),
                 "price_change_percentage_7d": round(random.uniform(-20, 30), 2),
+                "price_change_percentage_7d_in_currency": round(random.uniform(-20, 30), 2),
                 "sparkline": []
             })
         

static/pages/services/index.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Technical Indicator Services - Bollinger Bands, Stochastic RSI, ATR, SMA, EMA, MACD, RSI">
+  <meta name="theme-color" content="#14b8a6">
+  <title>Indicator Services | Crypto Monitor</title>
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232dd4bf'/%3E%3Cstop offset='50%25' stop-color='%2322d3ee'/%3E%3Cstop offset='100%25' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23g)'/%3E%3Cpath d='M50 25 L65 45 L50 40 L35 45 Z M50 75 L35 55 L50 60 L65 55 Z' fill='white'/%3E%3C/svg%3E">
+
+  <!-- Preconnect -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <!-- Critical CSS -->
+  <style>
+    :root{--teal-dark:#0d7377;--teal:#14b8a6;--teal-light:#2dd4bf;--cyan:#22d3ee;--text-primary:#0f2926;--text-secondary:#2a5f5a;--text-muted:#64748b;--bg-main:#ffffff;--bg-secondary:#f8fdfc;--sidebar-width:260px}
+    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+    html{font-size:14px;-webkit-font-smoothing:antialiased}
+    body{font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;color:var(--text-secondary);background:var(--bg-main);min-height:100vh}
+    .app-container{display:flex;min-height:100vh}
+    .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:linear-gradient(180deg,#fff 0%,#f8fdfc 100%);border-right:1px solid rgba(20,184,166,0.12);z-index:100}
+    .main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh}
+    .page-content{padding:1.5rem;max-width:1400px;margin:0 auto}
+    @media(max-width:768px){.sidebar{transform:translateX(-100%)}.main-content{margin-left:0}}
+  </style>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="/static/shared/css/design-system.css?v=3.0" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/shared/css/design-system.css?v=3.0"></noscript>
+  <link rel="stylesheet" href="/static/shared/css/global.css?v=3.0" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/shared/css/global.css?v=3.0"></noscript>
+  <link rel="stylesheet" href="/static/shared/css/components.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/shared/css/components.css"></noscript>
+  <link rel="stylesheet" href="/static/shared/css/layout.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/shared/css/layout.css"></noscript>
+  <link rel="stylesheet" href="/static/pages/services/services.css?v=1.0" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/static/pages/services/services.css?v=1.0"></noscript>
+
+  <!-- Scripts -->
+  <script src="/static/shared/js/utils/error-suppressor.js"></script>
+  <script src="/static/js/api-config.js"></script>
+</head>
+<body>
+  <div class="app-container">
+    <!-- Sidebar -->
+    <aside id="sidebar-container"></aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Header -->
+      <header id="header-container"></header>
+
+      <!-- Services Content -->
+      <div class="page-content">
+        <!-- Page Header -->
+        <div class="page-header">
+          <div class="page-title">
+            <h1>
+              <span class="page-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="url(#iconGradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <defs>
+                    <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" stop-color="#2dd4bf"/>
+                      <stop offset="50%" stop-color="#22d3ee"/>
+                      <stop offset="100%" stop-color="#3b82f6"/>
+                    </linearGradient>
+                  </defs>
+                  <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>
+              Indicator Services
+            </h1>
+            <p class="page-subtitle">Technical Analysis Tools & Real-time Indicators</p>
+          </div>
+          <div class="page-actions">
+            <button id="refresh-btn" class="btn-icon" title="Refresh" aria-label="Refresh data">
+              <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="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                <path d="M21 3v5h-5"/>
+              </svg>
+            </button>
+            <span id="last-update" class="last-update">Loading...</span>
+          </div>
+        </div>
+
+        <!-- Symbol Selector -->
+        <div class="symbol-selector glass-card">
+          <div class="form-group">
+            <label for="symbol-input">Symbol</label>
+            <input type="text" id="symbol-input" class="form-input" value="BTC" placeholder="Enter symbol (e.g., BTC, ETH)">
+          </div>
+          <div class="form-group">
+            <label for="timeframe-select">Timeframe</label>
+            <select id="timeframe-select" class="form-select">
+              <option value="1h" selected>1 Hour</option>
+              <option value="4h">4 Hours</option>
+              <option value="1d">1 Day</option>
+            </select>
+          </div>
+          <button id="analyze-all-btn" class="btn btn-gradient">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+            </svg>
+            Analyze All Indicators
+          </button>
+        </div>
+
+        <!-- Services Categories -->
+        <div class="services-categories">
+          <button class="category-btn active" data-category="all">All Services</button>
+          <button class="category-btn" data-category="volatility">Volatility</button>
+          <button class="category-btn" data-category="momentum">Momentum</button>
+          <button class="category-btn" data-category="trend">Trend</button>
+        </div>
+
+        <!-- Services Grid -->
+        <div id="services-grid" class="services-grid">
+          <!-- Will be populated by JavaScript -->
+          <div class="loading-state">
+            <div class="loading-spinner"></div>
+            <p>Loading services...</p>
+          </div>
+        </div>
+
+        <!-- Results Section -->
+        <div id="results-section" class="results-section" style="display: none;">
+          <h2 class="section-title">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 8V4H8"/>
+              <rect x="2" y="14" width="4" height="6" rx="1"/>
+              <rect x="10" y="10" width="4" height="10" rx="1"/>
+              <rect x="18" y="6" width="4" height="14" rx="1"/>
+              <path d="m8 4 4 4"/>
+            </svg>
+            Analysis Results
+          </h2>
+          <div id="results-container" class="results-container">
+            <!-- Results will be rendered here -->
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Toast Container -->
+  <div id="toast-container" aria-live="polite"></div>
+
+  <script type="module">
+    (async function() {
+      try {
+        const { LayoutManager } = await import('/static/shared/js/core/layout-manager.js?v=3.0');
+        await LayoutManager.init('services');
+        
+        const { default: ServicesPage } = await import('/static/pages/services/services.js?v=1.0');
+        window.servicesPage = ServicesPage;
+      } catch (error) {
+        console.error('Failed to initialize services page:', error);
+      }
+    })();
+  </script>
+</body>
+</html>

static/pages/services/services.css

@@ -0,0 +1,528 @@
+/**
+ * Services Page Styles
+ * Technical Indicator Services
+ */
+
+/* Symbol Selector */
+.symbol-selector {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(6, 182, 212, 0.03));
+  border: 1px solid rgba(20, 184, 166, 0.15);
+  border-radius: 16px;
+}
+
+.symbol-selector .form-group {
+  flex: 1;
+  min-width: 150px;
+  margin: 0;
+}
+
+.symbol-selector label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.symbol-selector .form-input,
+.symbol-selector .form-select {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 2px solid rgba(20, 184, 166, 0.2);
+  border-radius: 10px;
+  font-size: 1rem;
+  background: white;
+  transition: all 0.3s ease;
+}
+
+.symbol-selector .form-input:focus,
+.symbol-selector .form-select:focus {
+  outline: none;
+  border-color: #14b8a6;
+  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
+}
+
+.symbol-selector .btn {
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Services Categories */
+.services-categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding: 0.5rem;
+  background: rgba(248, 250, 252, 0.8);
+  border-radius: 12px;
+}
+
+.category-btn {
+  padding: 0.625rem 1.25rem;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.category-btn:hover {
+  background: rgba(20, 184, 166, 0.1);
+  color: #14b8a6;
+}
+
+.category-btn.active {
+  background: linear-gradient(135deg, #14b8a6, #06b6d4);
+  color: white;
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
+}
+
+/* Services Grid */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* Service Card */
+.service-card-large {
+  background: white;
+  border: 1px solid rgba(20, 184, 166, 0.1);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.service-card-large:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(20, 184, 166, 0.15);
+  border-color: rgba(20, 184, 166, 0.3);
+}
+
+.service-card-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(6, 182, 212, 0.05));
+  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
+}
+
+.service-card-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  background: white;
+  border-radius: 14px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.service-card-title {
+  flex: 1;
+}
+
+.service-card-title h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 0.25rem;
+}
+
+.service-card-title .category-tag {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #14b8a6;
+  padding: 2px 8px;
+  background: rgba(20, 184, 166, 0.1);
+  border-radius: 4px;
+}
+
+.service-card-body {
+  padding: 1.25rem;
+}
+
+.service-card-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.service-card-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.param-tag {
+  font-size: 0.75rem;
+  padding: 4px 10px;
+  background: rgba(248, 250, 252, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
+  color: var(--text-muted);
+}
+
+.service-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: rgba(248, 250, 252, 0.5);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.service-card-footer .btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.service-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  color: #10b981;
+}
+
+.service-status .status-dot {
+  width: 8px;
+  height: 8px;
+  background: #10b981;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(1.1); }
+}
+
+/* Results Section */
+.results-section {
+  margin-top: 2rem;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid rgba(20, 184, 166, 0.2);
+}
+
+.section-title svg {
+  color: #14b8a6;
+}
+
+.results-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Result Card */
+.result-card {
+  background: white;
+  border: 1px solid rgba(20, 184, 166, 0.1);
+  border-radius: 16px;
+  overflow: hidden;
+  animation: fadeInUp 0.5s ease;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.result-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(6, 182, 212, 0.05));
+  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
+}
+
+.result-card-header h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.result-card-header .indicator-icon {
+  font-size: 1.25rem;
+}
+
+.signal-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.signal-badge.bullish,
+.signal-badge.buy,
+.signal-badge.oversold {
+  background: rgba(34, 197, 94, 0.15);
+  color: #16a34a;
+}
+
+.signal-badge.bearish,
+.signal-badge.sell,
+.signal-badge.overbought {
+  background: rgba(239, 68, 68, 0.15);
+  color: #dc2626;
+}
+
+.signal-badge.neutral,
+.signal-badge.hold {
+  background: rgba(234, 179, 8, 0.15);
+  color: #ca8a04;
+}
+
+.result-card-body {
+  padding: 1.25rem;
+}
+
+.result-values {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.result-value {
+  text-align: center;
+  padding: 0.75rem;
+  background: rgba(248, 250, 252, 0.8);
+  border-radius: 10px;
+}
+
+.result-value .label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.result-value .value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.result-description {
+  padding: 0.75rem;
+  background: rgba(20, 184, 166, 0.05);
+  border-radius: 8px;
+  border-left: 4px solid #14b8a6;
+}
+
+.result-description p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Loading State */
+.loading-state {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--text-muted);
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(20, 184, 166, 0.2);
+  border-top-color: #14b8a6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Error State */
+.error-state {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.error-state svg {
+  color: #ef4444;
+  margin-bottom: 1rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .symbol-selector {
+    flex-direction: column;
+  }
+  
+  .symbol-selector .form-group {
+    width: 100%;
+  }
+  
+  .symbol-selector .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .results-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .result-values {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dark Mode */
+[data-theme="dark"] .symbol-selector {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(6, 182, 212, 0.05));
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .symbol-selector .form-input,
+[data-theme="dark"] .symbol-selector .form-select {
+  background: rgba(30, 41, 59, 0.8);
+  border-color: rgba(20, 184, 166, 0.3);
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .services-categories {
+  background: rgba(30, 41, 59, 0.5);
+}
+
+[data-theme="dark"] .category-btn {
+  background: rgba(30, 41, 59, 0.8);
+  color: #94a3b8;
+}
+
+[data-theme="dark"] .category-btn:hover {
+  background: rgba(20, 184, 166, 0.2);
+  color: #2dd4bf;
+}
+
+[data-theme="dark"] .service-card-large {
+  background: #1e293b;
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .service-card-header {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
+}
+
+[data-theme="dark"] .service-card-icon {
+  background: rgba(15, 23, 42, 0.8);
+}
+
+[data-theme="dark"] .service-card-title h3 {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .service-card-body {
+  background: #1e293b;
+}
+
+[data-theme="dark"] .service-card-desc {
+  color: #94a3b8;
+}
+
+[data-theme="dark"] .param-tag {
+  background: rgba(15, 23, 42, 0.8);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #94a3b8;
+}
+
+[data-theme="dark"] .service-card-footer {
+  background: rgba(15, 23, 42, 0.5);
+}
+
+[data-theme="dark"] .result-card {
+  background: #1e293b;
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .result-card-header {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
+}
+
+[data-theme="dark"] .result-card-header h4 {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .result-value {
+  background: rgba(15, 23, 42, 0.5);
+}
+
+[data-theme="dark"] .result-value .value {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .result-description {
+  background: rgba(20, 184, 166, 0.1);
+}
+
+[data-theme="dark"] .result-description p {
+  color: #94a3b8;
+}

static/pages/services/services.js

@@ -0,0 +1,522 @@
+/**
+ * Services Page - Technical Indicator Services
+ */
+
+class ServicesPage {
+  constructor() {
+    this.services = [];
+    this.currentCategory = 'all';
+    this.currentSymbol = 'BTC';
+    this.currentTimeframe = '1h';
+  }
+
+  async init() {
+    console.log('[Services] Initializing...');
+    
+    this.bindEvents();
+    await this.loadServices();
+    this.checkUrlParams();
+    
+    console.log('[Services] Ready');
+  }
+
+  bindEvents() {
+    // Refresh button
+    document.getElementById('refresh-btn')?.addEventListener('click', () => {
+      this.loadServices();
+    });
+
+    // Symbol input
+    document.getElementById('symbol-input')?.addEventListener('change', (e) => {
+      this.currentSymbol = e.target.value.toUpperCase() || 'BTC';
+    });
+
+    // Timeframe select
+    document.getElementById('timeframe-select')?.addEventListener('change', (e) => {
+      this.currentTimeframe = e.target.value || '1h';
+    });
+
+    // Analyze all button
+    document.getElementById('analyze-all-btn')?.addEventListener('click', () => {
+      this.analyzeAll();
+    });
+
+    // Category buttons
+    document.querySelectorAll('.category-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+        e.target.classList.add('active');
+        this.currentCategory = e.target.dataset.category;
+        this.filterServices();
+      });
+    });
+  }
+
+  checkUrlParams() {
+    const params = new URLSearchParams(window.location.search);
+    const service = params.get('service');
+    
+    if (service) {
+      // Auto-analyze the specific service
+      setTimeout(() => {
+        this.analyzeService(service);
+      }, 500);
+    }
+  }
+
+  async loadServices() {
+    const grid = document.getElementById('services-grid');
+    if (!grid) return;
+
+    grid.innerHTML = `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <p>Loading indicator services...</p>
+      </div>
+    `;
+
+    try {
+      const response = await fetch('/api/indicators/services');
+      
+      if (response.ok) {
+        const data = await response.json();
+        this.services = data.services || [];
+        console.log('[Services] Loaded', this.services.length, 'services');
+      } else {
+        // Use fallback data
+        this.services = this.getFallbackServices();
+      }
+    } catch (error) {
+      console.error('[Services] Load error:', error);
+      this.services = this.getFallbackServices();
+    }
+
+    this.renderServices();
+    this.updateTimestamp();
+  }
+
+  getFallbackServices() {
+    return [
+      {
+        id: 'bollinger_bands',
+        name: 'Bollinger Bands',
+        description: 'Volatility bands placed above and below a moving average. Identifies overbought/oversold conditions and potential breakouts.',
+        endpoint: '/api/indicators/bollinger-bands',
+        parameters: ['symbol', 'timeframe', 'period', 'std_dev'],
+        icon: '📊',
+        category: 'volatility'
+      },
+      {
+        id: 'stoch_rsi',
+        name: 'Stochastic RSI',
+        description: 'Combines Stochastic oscillator with RSI for enhanced momentum detection. Great for identifying extreme conditions.',
+        endpoint: '/api/indicators/stoch-rsi',
+        parameters: ['symbol', 'timeframe', 'rsi_period', 'stoch_period'],
+        icon: '📈',
+        category: 'momentum'
+      },
+      {
+        id: 'atr',
+        name: 'Average True Range (ATR)',
+        description: 'Measures market volatility by analyzing the range of price movements. Useful for setting stop losses.',
+        endpoint: '/api/indicators/atr',
+        parameters: ['symbol', 'timeframe', 'period'],
+        icon: '📉',
+        category: 'volatility'
+      },
+      {
+        id: 'sma',
+        name: 'Simple Moving Average (SMA)',
+        description: 'Average price over specified periods (20, 50, 200). Identifies trend direction and support/resistance levels.',
+        endpoint: '/api/indicators/sma',
+        parameters: ['symbol', 'timeframe'],
+        icon: '〰️',
+        category: 'trend'
+      },
+      {
+        id: 'ema',
+        name: 'Exponential Moving Average (EMA)',
+        description: 'Weighted moving average giving more weight to recent prices. More responsive to current price action.',
+        endpoint: '/api/indicators/ema',
+        parameters: ['symbol', 'timeframe'],
+        icon: '📐',
+        category: 'trend'
+      },
+      {
+        id: 'macd',
+        name: 'MACD',
+        description: 'Moving Average Convergence Divergence. Trend-following momentum indicator showing relationship between EMAs.',
+        endpoint: '/api/indicators/macd',
+        parameters: ['symbol', 'timeframe', 'fast', 'slow', 'signal'],
+        icon: '🔀',
+        category: 'momentum'
+      },
+      {
+        id: 'rsi',
+        name: 'RSI',
+        description: 'Relative Strength Index. Momentum oscillator measuring speed and magnitude of price movements (0-100).',
+        endpoint: '/api/indicators/rsi',
+        parameters: ['symbol', 'timeframe', 'period'],
+        icon: '💪',
+        category: 'momentum'
+      },
+      {
+        id: 'comprehensive',
+        name: 'Comprehensive Analysis',
+        description: 'All indicators combined with trading signals. Get a complete market overview with actionable recommendations.',
+        endpoint: '/api/indicators/comprehensive',
+        parameters: ['symbol', 'timeframe'],
+        icon: '🎯',
+        category: 'analysis'
+      }
+    ];
+  }
+
+  filterServices() {
+    this.renderServices();
+  }
+
+  renderServices() {
+    const grid = document.getElementById('services-grid');
+    if (!grid) return;
+
+    const filteredServices = this.currentCategory === 'all'
+      ? this.services
+      : this.services.filter(s => s.category === this.currentCategory);
+
+    if (filteredServices.length === 0) {
+      grid.innerHTML = `
+        <div class="error-state">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="12"></line>
+            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+          </svg>
+          <h3>No services found</h3>
+          <p>No indicator services match the selected category.</p>
+        </div>
+      `;
+      return;
+    }
+
+    grid.innerHTML = filteredServices.map(service => `
+      <div class="service-card-large" data-service="${service.id}">
+        <div class="service-card-header">
+          <div class="service-card-icon">${service.icon}</div>
+          <div class="service-card-title">
+            <h3>${service.name}</h3>
+            <span class="category-tag">${service.category}</span>
+          </div>
+        </div>
+        <div class="service-card-body">
+          <p class="service-card-desc">${service.description}</p>
+          <div class="service-card-params">
+            ${service.parameters.map(p => `<span class="param-tag">${p}</span>`).join('')}
+          </div>
+        </div>
+        <div class="service-card-footer">
+          <div class="service-status">
+            <span class="status-dot"></span>
+            <span>Available</span>
+          </div>
+          <button class="btn btn-primary" onclick="servicesPage.analyzeService('${service.id}')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+            </svg>
+            Analyze
+          </button>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  async analyzeService(serviceId) {
+    const resultsSection = document.getElementById('results-section');
+    const resultsContainer = document.getElementById('results-container');
+    
+    if (!resultsSection || !resultsContainer) return;
+
+    // Get current values
+    const symbolInput = document.getElementById('symbol-input');
+    const timeframeSelect = document.getElementById('timeframe-select');
+    
+    this.currentSymbol = symbolInput?.value?.toUpperCase() || 'BTC';
+    this.currentTimeframe = timeframeSelect?.value || '1h';
+
+    // Show results section
+    resultsSection.style.display = 'block';
+    resultsContainer.innerHTML = `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <p>Analyzing ${this.currentSymbol} with ${serviceId}...</p>
+      </div>
+    `;
+
+    // Scroll to results
+    resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+    try {
+      const service = this.services.find(s => s.id === serviceId);
+      if (!service) throw new Error('Service not found');
+
+      const url = `${service.endpoint}?symbol=${encodeURIComponent(this.currentSymbol)}&timeframe=${encodeURIComponent(this.currentTimeframe)}`;
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const result = await response.json();
+      this.renderResult(service, result);
+    } catch (error) {
+      console.error('[Services] Analysis error:', error);
+      resultsContainer.innerHTML = `
+        <div class="error-state">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="15" y1="9" x2="9" y2="15"></line>
+            <line x1="9" y1="9" x2="15" y2="15"></line>
+          </svg>
+          <h3>Analysis Failed</h3>
+          <p>${error.message}</p>
+          <button class="btn btn-primary" onclick="servicesPage.analyzeService('${serviceId}')">Retry</button>
+        </div>
+      `;
+    }
+  }
+
+  async analyzeAll() {
+    const resultsSection = document.getElementById('results-section');
+    const resultsContainer = document.getElementById('results-container');
+    
+    if (!resultsSection || !resultsContainer) return;
+
+    // Get current values
+    const symbolInput = document.getElementById('symbol-input');
+    const timeframeSelect = document.getElementById('timeframe-select');
+    
+    this.currentSymbol = symbolInput?.value?.toUpperCase() || 'BTC';
+    this.currentTimeframe = timeframeSelect?.value || '1h';
+
+    // Show loading
+    resultsSection.style.display = 'block';
+    resultsContainer.innerHTML = `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <p>Running comprehensive analysis on ${this.currentSymbol}...</p>
+      </div>
+    `;
+
+    resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+    try {
+      const url = `/api/indicators/comprehensive?symbol=${encodeURIComponent(this.currentSymbol)}&timeframe=${encodeURIComponent(this.currentTimeframe)}`;
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const result = await response.json();
+      this.renderComprehensiveResult(result);
+    } catch (error) {
+      console.error('[Services] Comprehensive analysis error:', error);
+      resultsContainer.innerHTML = `
+        <div class="error-state">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="15" y1="9" x2="9" y2="15"></line>
+            <line x1="9" y1="9" x2="15" y2="15"></line>
+          </svg>
+          <h3>Analysis Failed</h3>
+          <p>${error.message}</p>
+          <button class="btn btn-primary" onclick="servicesPage.analyzeAll()">Retry</button>
+        </div>
+      `;
+    }
+  }
+
+  renderResult(service, result) {
+    const resultsContainer = document.getElementById('results-container');
+    if (!resultsContainer) return;
+
+    const signalClass = this.getSignalClass(result.signal);
+    const data = result.data || {};
+
+    let valuesHtml = '';
+    for (const [key, value] of Object.entries(data)) {
+      if (value !== null && value !== undefined) {
+        valuesHtml += `
+          <div class="result-value">
+            <span class="label">${this.formatLabel(key)}</span>
+            <span class="value">${this.formatValue(value)}</span>
+          </div>
+        `;
+      }
+    }
+
+    resultsContainer.innerHTML = `
+      <div class="result-card">
+        <div class="result-card-header">
+          <h4>
+            <span class="indicator-icon">${service.icon}</span>
+            ${service.name}
+          </h4>
+          <span class="signal-badge ${signalClass}">${result.signal || 'N/A'}</span>
+        </div>
+        <div class="result-card-body">
+          <div class="result-values">
+            ${valuesHtml}
+          </div>
+          <div class="result-description">
+            <p>${result.description || 'No description available'}</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderComprehensiveResult(result) {
+    const resultsContainer = document.getElementById('results-container');
+    if (!resultsContainer) return;
+
+    const indicators = result.indicators || {};
+    const signals = result.signals || {};
+
+    let cardsHtml = '';
+
+    // Overall signal card
+    const overallClass = this.getSignalClass(result.overall_signal?.toLowerCase());
+    cardsHtml += `
+      <div class="result-card" style="grid-column: 1 / -1;">
+        <div class="result-card-header" style="background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.15));">
+          <h4>
+            <span class="indicator-icon">🎯</span>
+            Overall Analysis - ${result.symbol || this.currentSymbol}
+          </h4>
+          <span class="signal-badge ${overallClass}">${result.overall_signal || 'N/A'}</span>
+        </div>
+        <div class="result-card-body">
+          <div class="result-values">
+            <div class="result-value">
+              <span class="label">Current Price</span>
+              <span class="value">${this.formatValue(result.current_price)}</span>
+            </div>
+            <div class="result-value">
+              <span class="label">Confidence</span>
+              <span class="value">${result.confidence || 0}%</span>
+            </div>
+          </div>
+          <div class="result-description">
+            <p><strong>Recommendation:</strong> ${result.recommendation || 'No recommendation available'}</p>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // Individual indicator cards
+    const indicatorMeta = {
+      bollinger_bands: { icon: '📊', name: 'Bollinger Bands' },
+      stoch_rsi: { icon: '📈', name: 'Stochastic RSI' },
+      atr: { icon: '📉', name: 'ATR' },
+      sma: { icon: '〰️', name: 'SMA' },
+      ema: { icon: '📐', name: 'EMA' },
+      macd: { icon: '🔀', name: 'MACD' },
+      rsi: { icon: '💪', name: 'RSI' }
+    };
+
+    for (const [key, data] of Object.entries(indicators)) {
+      const meta = indicatorMeta[key] || { icon: '📊', name: key };
+      const signal = signals[key] || 'neutral';
+      const signalClass = this.getSignalClass(signal);
+
+      let valuesHtml = '';
+      if (typeof data === 'object') {
+        for (const [k, v] of Object.entries(data)) {
+          if (v !== null && v !== undefined) {
+            valuesHtml += `
+              <div class="result-value">
+                <span class="label">${this.formatLabel(k)}</span>
+                <span class="value">${this.formatValue(v)}</span>
+              </div>
+            `;
+          }
+        }
+      }
+
+      cardsHtml += `
+        <div class="result-card">
+          <div class="result-card-header">
+            <h4>
+              <span class="indicator-icon">${meta.icon}</span>
+              ${meta.name}
+            </h4>
+            <span class="signal-badge ${signalClass}">${signal}</span>
+          </div>
+          <div class="result-card-body">
+            <div class="result-values">
+              ${valuesHtml || '<p style="grid-column: 1/-1; text-align: center; color: var(--text-muted);">No data</p>'}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    resultsContainer.innerHTML = cardsHtml;
+  }
+
+  getSignalClass(signal) {
+    if (!signal) return 'neutral';
+    const s = signal.toLowerCase();
+    
+    if (s.includes('buy') || s.includes('bullish') || s.includes('oversold') || s.includes('strong_buy')) {
+      return 'bullish';
+    }
+    if (s.includes('sell') || s.includes('bearish') || s.includes('overbought') || s.includes('strong_sell')) {
+      return 'bearish';
+    }
+    return 'neutral';
+  }
+
+  formatLabel(key) {
+    return key
+      .replace(/_/g, ' ')
+      .replace(/([A-Z])/g, ' $1')
+      .split(' ')
+      .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+      .join(' ');
+  }
+
+  formatValue(value) {
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'number') {
+      if (value > 1000000) return (value / 1000000).toFixed(2) + 'M';
+      if (value > 1000) return (value / 1000).toFixed(2) + 'K';
+      if (value < 0.0001 && value > 0) return value.toExponential(2);
+      if (Number.isInteger(value)) return value.toLocaleString();
+      return value.toFixed(value < 1 ? 4 : 2);
+    }
+    return String(value);
+  }
+
+  updateTimestamp() {
+    const el = document.getElementById('last-update');
+    if (el) {
+      el.textContent = `Updated: ${new Date().toLocaleTimeString()}`;
+    }
+  }
+
+  showToast(message, type = 'info') {
+    console.log(`[Toast ${type}]`, message);
+    // Implement toast if needed
+  }
+}
+
+// Initialize
+const servicesPage = new ServicesPage();
+servicesPage.init();
+
+// Expose globally
+window.servicesPage = servicesPage;
+
+export default servicesPage;

static/pages/technical-analysis/technical-analysis-professional.js

@@ -682,10 +682,107 @@ class TechnicalAnalysisProfessional {
 
         // Calculate EMA
         this.indicators.ema = this.calculateEMA(ohlcvData, 20);
+        
+        // Calculate Bollinger Bands
+        this.indicators.bollingerBands = this.calculateBollingerBands(ohlcvData);
+        
+        // Calculate SMA
+        this.indicators.sma20 = this.calculateSMA(ohlcvData, 20);
+        this.indicators.sma50 = this.calculateSMA(ohlcvData, 50);
+        
+        // Calculate Stochastic RSI
+        this.indicators.stochRsi = this.calculateStochRSI(ohlcvData);
+        
+        // Calculate ATR (Average True Range)
+        this.indicators.atr = this.calculateATR(ohlcvData);
 
         // Update indicator displays
         this.updateIndicatorDisplays();
     }
+    
+    /**
+     * Calculate Bollinger Bands
+     */
+    calculateBollingerBands(data, period = 20, stdDev = 2) {
+        if (data.length < period) return null;
+        
+        const closes = data.map(d => d.close);
+        const sma = this.calculateSMA(data, period);
+        
+        // Calculate standard deviation
+        const slice = closes.slice(-period);
+        const mean = slice.reduce((a, b) => a + b, 0) / period;
+        const variance = slice.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / period;
+        const std = Math.sqrt(variance);
+        
+        return {
+            upper: sma + (stdDev * std),
+            middle: sma,
+            lower: sma - (stdDev * std),
+            bandwidth: ((sma + (stdDev * std)) - (sma - (stdDev * std))) / sma * 100
+        };
+    }
+    
+    /**
+     * Calculate Simple Moving Average
+     */
+    calculateSMA(data, period) {
+        if (data.length < period) return null;
+        const closes = data.slice(-period).map(d => d.close);
+        return closes.reduce((a, b) => a + b, 0) / period;
+    }
+    
+    /**
+     * Calculate Stochastic RSI
+     */
+    calculateStochRSI(data, rsiPeriod = 14, stochPeriod = 14) {
+        if (data.length < rsiPeriod + stochPeriod) return null;
+        
+        // First calculate RSI values for last stochPeriod+1 candles
+        const rsiValues = [];
+        for (let i = data.length - stochPeriod - 1; i < data.length; i++) {
+            const slice = data.slice(Math.max(0, i - rsiPeriod), i + 1);
+            if (slice.length >= rsiPeriod) {
+                const rsi = this.calculateRSI(slice, rsiPeriod);
+                if (rsi !== null) rsiValues.push(rsi);
+            }
+        }
+        
+        if (rsiValues.length < 2) return null;
+        
+        const minRsi = Math.min(...rsiValues);
+        const maxRsi = Math.max(...rsiValues);
+        const currentRsi = rsiValues[rsiValues.length - 1];
+        
+        if (maxRsi === minRsi) return 50;
+        
+        return ((currentRsi - minRsi) / (maxRsi - minRsi)) * 100;
+    }
+    
+    /**
+     * Calculate Average True Range (ATR)
+     */
+    calculateATR(data, period = 14) {
+        if (data.length < period + 1) return null;
+        
+        const trueRanges = [];
+        for (let i = 1; i < data.length; i++) {
+            const high = data[i].high;
+            const low = data[i].low;
+            const prevClose = data[i - 1].close;
+            
+            const tr = Math.max(
+                high - low,
+                Math.abs(high - prevClose),
+                Math.abs(low - prevClose)
+            );
+            trueRanges.push(tr);
+        }
+        
+        // Calculate ATR as SMA of true ranges
+        const recentTR = trueRanges.slice(-period);
+        return recentTR.reduce((a, b) => a + b, 0) / period;
+    }
 
     /**
      * Calculate RSI (Relative Strength Index)
@@ -791,6 +888,129 @@ class TechnicalAnalysisProfessional {
         if (emaElement && this.indicators.ema !== null) {
             emaElement.textContent = safeFormatCurrency(this.indicators.ema);
         }
+        
+        // Create or update extended indicators panel
+        this.renderExtendedIndicators();
+    }
+    
+    /**
+     * Render extended indicators panel
+     */
+    renderExtendedIndicators() {
+        // Find or create extended indicators container
+        let container = document.getElementById('extended-indicators');
+        if (!container) {
+            const indicatorsSection = document.querySelector('.page-content');
+            if (indicatorsSection) {
+                const analysisResults = document.getElementById('analysis-results');
+                if (analysisResults) {
+                    container = document.createElement('div');
+                    container.id = 'extended-indicators';
+                    container.style.cssText = 'background: rgba(0,0,0,0.2); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem;';
+                    analysisResults.parentNode.insertBefore(container, analysisResults);
+                }
+            }
+        }
+        
+        if (!container) return;
+        
+        const bb = this.indicators.bollingerBands;
+        const stochRsi = this.indicators.stochRsi;
+        const atr = this.indicators.atr;
+        const sma20 = this.indicators.sma20;
+        const sma50 = this.indicators.sma50;
+        const latestPrice = this.ohlcvData.length > 0 ? this.ohlcvData[this.ohlcvData.length - 1].close : 0;
+        
+        // Determine BB position
+        let bbPosition = 'neutral';
+        let bbColor = '#fbbf24';
+        if (bb && latestPrice) {
+            if (latestPrice >= bb.upper) {
+                bbPosition = 'Upper Band';
+                bbColor = '#ef4444';
+            } else if (latestPrice <= bb.lower) {
+                bbPosition = 'Lower Band';
+                bbColor = '#22c55e';
+            } else {
+                const midDistance = (latestPrice - bb.lower) / (bb.upper - bb.lower);
+                if (midDistance > 0.7) {
+                    bbPosition = 'Near Upper';
+                    bbColor = '#f59e0b';
+                } else if (midDistance < 0.3) {
+                    bbPosition = 'Near Lower';
+                    bbColor = '#10b981';
+                } else {
+                    bbPosition = 'Middle Band';
+                    bbColor = '#3b82f6';
+                }
+            }
+        }
+        
+        // Determine trend from SMAs
+        let smaTrend = 'neutral';
+        let smaColor = '#fbbf24';
+        if (sma20 && sma50) {
+            if (sma20 > sma50) {
+                smaTrend = 'Bullish (20 > 50)';
+                smaColor = '#22c55e';
+            } else {
+                smaTrend = 'Bearish (20 < 50)';
+                smaColor = '#ef4444';
+            }
+        }
+        
+        container.innerHTML = `
+            <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; display: flex; align-items: center; gap: 0.5rem;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                </svg>
+                Advanced Indicators
+            </h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+                <!-- Bollinger Bands -->
+                <div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem; border-left: 4px solid ${bbColor};">
+                    <div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">Bollinger Bands (20,2)</div>
+                    <div style="font-size: 1.25rem; font-weight: 700; color: ${bbColor};">${bbPosition}</div>
+                    ${bb ? `
+                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
+                        Upper: ${safeFormatCurrency(bb.upper)}<br>
+                        Middle: ${safeFormatCurrency(bb.middle)}<br>
+                        Lower: ${safeFormatCurrency(bb.lower)}<br>
+                        Bandwidth: ${bb.bandwidth.toFixed(2)}%
+                    </div>` : ''}
+                </div>
+                
+                <!-- Stochastic RSI -->
+                <div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem; border-left: 4px solid ${stochRsi > 80 ? '#ef4444' : stochRsi < 20 ? '#22c55e' : '#fbbf24'};">
+                    <div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">Stochastic RSI</div>
+                    <div style="font-size: 1.5rem; font-weight: 700; color: ${stochRsi > 80 ? '#ef4444' : stochRsi < 20 ? '#22c55e' : '#fbbf24'};">
+                        ${stochRsi !== null ? stochRsi.toFixed(1) : '--'}
+                    </div>
+                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;">
+                        ${stochRsi > 80 ? 'Overbought' : stochRsi < 20 ? 'Oversold' : 'Neutral'}
+                    </div>
+                </div>
+                
+                <!-- ATR -->
+                <div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem; border-left: 4px solid #3b82f6;">
+                    <div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">ATR (14)</div>
+                    <div style="font-size: 1.5rem; font-weight: 700;">${atr !== null ? safeFormatCurrency(atr) : '--'}</div>
+                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;">
+                        Volatility: ${atr && latestPrice ? (atr / latestPrice * 100).toFixed(2) + '%' : '--'}
+                    </div>
+                </div>
+                
+                <!-- SMA Crossover -->
+                <div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem; border-left: 4px solid ${smaColor};">
+                    <div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">SMA Crossover</div>
+                    <div style="font-size: 1.25rem; font-weight: 700; color: ${smaColor};">${smaTrend}</div>
+                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
+                        SMA20: ${sma20 ? safeFormatCurrency(sma20) : '--'}<br>
+                        SMA50: ${sma50 ? safeFormatCurrency(sma50) : '--'}
+                    </div>
+                </div>
+            </div>
+        `;
     }
 
     /**
@@ -854,17 +1074,48 @@ class TechnicalAnalysisProfessional {
         const rsi = this.indicators.rsi;
         const macd = this.indicators.macd;
         const ema = this.indicators.ema;
+        const bb = this.indicators.bollingerBands;
+        const stochRsi = this.indicators.stochRsi;
+        const atr = this.indicators.atr;
+        const sma20 = this.indicators.sma20;
+        const sma50 = this.indicators.sma50;
 
-        // Determine trend
+        // Determine trend - use multiple indicators
         let trend = 'neutral';
         let trendDescription = 'Market is consolidating';
+        let trendSignals = { bullish: 0, bearish: 0 };
         
+        // EMA trend
         if (latestCandle.close > ema) {
-            trend = 'bullish';
-            trendDescription = 'Price is above EMA - Bullish trend';
+            trendSignals.bullish++;
         } else if (latestCandle.close < ema) {
+            trendSignals.bearish++;
+        }
+        
+        // SMA crossover trend
+        if (sma20 && sma50) {
+            if (sma20 > sma50) {
+                trendSignals.bullish++;
+            } else {
+                trendSignals.bearish++;
+            }
+        }
+        
+        // Bollinger Bands position
+        if (bb) {
+            if (latestCandle.close > bb.middle) {
+                trendSignals.bullish++;
+            } else {
+                trendSignals.bearish++;
+            }
+        }
+        
+        if (trendSignals.bullish > trendSignals.bearish) {
+            trend = 'bullish';
+            trendDescription = `Uptrend detected: Price above EMA${sma20 > sma50 ? ', SMA20 > SMA50' : ''}${bb && latestCandle.close > bb.middle ? ', Above BB middle' : ''}`;
+        } else if (trendSignals.bearish > trendSignals.bullish) {
             trend = 'bearish';
-            trendDescription = 'Price is below EMA - Bearish trend';
+            trendDescription = `Downtrend detected: Price below EMA${sma20 < sma50 ? ', SMA20 < SMA50' : ''}${bb && latestCandle.close < bb.middle ? ', Below BB middle' : ''}`;
         }
 
         // Generate indicator analysis
@@ -908,40 +1159,153 @@ class TechnicalAnalysisProfessional {
                 interpretation: emaStatus === 'bullish' ? 'Price above EMA' : 'Price below EMA'
             });
         }
+        
+        // Add Bollinger Bands analysis
+        if (bb) {
+            let bbStatus, bbInterpretation;
+            const bbPosition = (latestCandle.close - bb.lower) / (bb.upper - bb.lower);
+            
+            if (latestCandle.close >= bb.upper) {
+                bbStatus = 'overbought';
+                bbInterpretation = 'At upper band - possible reversal';
+            } else if (latestCandle.close <= bb.lower) {
+                bbStatus = 'oversold';
+                bbInterpretation = 'At lower band - possible bounce';
+            } else if (bbPosition > 0.7) {
+                bbStatus = 'bearish';
+                bbInterpretation = 'Near upper band - caution';
+            } else if (bbPosition < 0.3) {
+                bbStatus = 'bullish';
+                bbInterpretation = 'Near lower band - potential buy';
+            } else {
+                bbStatus = 'neutral';
+                bbInterpretation = 'Within bands - no signal';
+            }
+            
+            indicators.push({
+                name: 'Bollinger Bands',
+                value: `${(bbPosition * 100).toFixed(0)}%`,
+                status: bbStatus,
+                interpretation: bbInterpretation
+            });
+        }
+        
+        // Add Stochastic RSI
+        if (stochRsi !== null) {
+            let stochStatus, stochInterpretation;
+            if (stochRsi > 80) {
+                stochStatus = 'overbought';
+                stochInterpretation = 'Extreme overbought';
+            } else if (stochRsi < 20) {
+                stochStatus = 'oversold';
+                stochInterpretation = 'Extreme oversold';
+            } else {
+                stochStatus = 'neutral';
+                stochInterpretation = 'Normal range';
+            }
+            
+            indicators.push({
+                name: 'Stoch RSI',
+                value: stochRsi.toFixed(1),
+                status: stochStatus,
+                interpretation: stochInterpretation
+            });
+        }
+        
+        // Add SMA crossover
+        if (sma20 && sma50) {
+            const smaStatus = sma20 > sma50 ? 'bullish' : 'bearish';
+            indicators.push({
+                name: 'SMA Cross',
+                value: sma20 > sma50 ? 'Golden' : 'Death',
+                status: smaStatus,
+                interpretation: sma20 > sma50 ? 'Bullish crossover' : 'Bearish crossover'
+            });
+        }
+        
+        // Add ATR for volatility
+        if (atr !== null) {
+            const atrPercent = (atr / latestCandle.close) * 100;
+            let atrStatus, atrInterpretation;
+            
+            if (atrPercent > 5) {
+                atrStatus = 'high';
+                atrInterpretation = 'High volatility - increase stop loss';
+            } else if (atrPercent < 1) {
+                atrStatus = 'low';
+                atrInterpretation = 'Low volatility - breakout expected';
+            } else {
+                atrStatus = 'neutral';
+                atrInterpretation = 'Normal volatility';
+            }
+            
+            indicators.push({
+                name: 'ATR (14)',
+                value: `${atrPercent.toFixed(2)}%`,
+                status: atrStatus,
+                interpretation: atrInterpretation
+            });
+        }
 
-        // Generate signal
+        // Generate signal - count all indicator signals
         let signal = 'hold';
         let recommendation = 'Wait for clearer signals';
         
         const bullishSignals = indicators.filter(i => i.status === 'bullish' || i.status === 'oversold').length;
         const bearishSignals = indicators.filter(i => i.status === 'bearish' || i.status === 'overbought').length;
+        const totalSignals = indicators.length;
 
-        if (bullishSignals > bearishSignals && bullishSignals >= 2) {
+        if (bullishSignals >= totalSignals * 0.5 && bullishSignals > bearishSignals) {
             signal = 'buy';
-            recommendation = 'Strong buy signals detected. Consider entering a long position with proper risk management.';
-        } else if (bearishSignals > bullishSignals && bearishSignals >= 2) {
+            recommendation = `Strong buy signals detected (${bullishSignals}/${totalSignals} indicators bullish). Consider entering a long position with proper risk management. Use ATR for stop loss placement.`;
+        } else if (bearishSignals >= totalSignals * 0.5 && bearishSignals > bullishSignals) {
             signal = 'sell';
-            recommendation = 'Strong sell signals detected. Consider taking profits or shorting with proper risk management.';
+            recommendation = `Strong sell signals detected (${bearishSignals}/${totalSignals} indicators bearish). Consider taking profits or shorting with proper risk management.`;
+        } else {
+            recommendation = `Mixed signals (${bullishSignals} bullish, ${bearishSignals} bearish). Wait for clearer direction or trade cautiously.`;
         }
 
-        // Calculate risk
+        // Calculate risk based on all indicators
         let riskScore = 50;
         let risk = 'medium';
         
+        // RSI extreme adds risk
         if (rsi !== null) {
-            if (rsi > 70 || rsi < 30) riskScore += 20;
+            if (rsi > 80 || rsi < 20) riskScore += 15;
+            else if (rsi > 70 || rsi < 30) riskScore += 10;
+        }
+        
+        // Stoch RSI extreme adds risk
+        if (stochRsi !== null) {
+            if (stochRsi > 90 || stochRsi < 10) riskScore += 15;
+            else if (stochRsi > 80 || stochRsi < 20) riskScore += 10;
+        }
+        
+        // High volatility adds risk
+        if (atr !== null) {
+            const atrPercent = (atr / latestCandle.close) * 100;
+            if (atrPercent > 5) riskScore += 15;
+            else if (atrPercent > 3) riskScore += 10;
+        }
+        
+        // At Bollinger Band extremes adds risk
+        if (bb) {
+            if (latestCandle.close >= bb.upper || latestCandle.close <= bb.lower) {
+                riskScore += 10;
+            }
         }
         
+        // Aligned signals reduce risk
         if (trend === 'bullish' && signal === 'buy') {
-            riskScore -= 10;
+            riskScore -= 15;
         } else if (trend === 'bearish' && signal === 'sell') {
-            riskScore -= 10;
+            riskScore -= 15;
         }
 
         riskScore = Math.max(10, Math.min(90, riskScore));
 
-        if (riskScore < 40) risk = 'low';
-        else if (riskScore > 60) risk = 'high';
+        if (riskScore < 35) risk = 'low';
+        else if (riskScore > 65) risk = 'high';
 
         return {
             trend,

static/pages/technical-analysis/technical-analysis.js

@@ -944,6 +944,7 @@ class TechnicalAnalysisPage {
     } catch (error) {
       logger.warn('TechnicalAnalysis', 'Failed to draw support/resistance:', error);
     }
+  }
   
   renderAnalysis() {
     if (!this.analysisData) return;

static/shared/css/sidebar-enhanced.css

@@ -235,3 +235,286 @@
 [data-theme="dark"] .status-text {
   color: white;
 }
+
+/* ============================================================================
+   Services Menu (Dollar Sign Button)
+   ============================================================================ */
+
+.services-menu-container {
+  position: relative;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid rgba(20, 184, 166, 0.1);
+  margin-top: auto;
+}
+
+.services-toggle-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  background: linear-gradient(135deg, #14b8a6, #06b6d4);
+  border: none;
+  border-radius: 12px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
+}
+
+.services-toggle-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
+  background: linear-gradient(135deg, #0d9488, #0891b2);
+}
+
+.services-toggle-btn.active {
+  background: linear-gradient(135deg, #0d9488, #0891b2);
+  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.5);
+}
+
+.services-toggle-btn svg {
+  animation: dollarPulse 2s ease-in-out infinite;
+}
+
+@keyframes dollarPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* Services Popup */
+.services-popup {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 0.5rem;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(20, 184, 166, 0.1);
+  z-index: 1000;
+  overflow: hidden;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.services-popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(6, 182, 212, 0.05));
+  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
+}
+
+.services-popup-header h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary, #0f172a);
+}
+
+.services-popup-header svg {
+  color: #14b8a6;
+}
+
+.services-close-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.05);
+  border: none;
+  border-radius: 8px;
+  font-size: 1.25rem;
+  color: var(--text-secondary, #64748b);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.services-close-btn:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.services-popup-body {
+  padding: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+}
+
+.service-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(248, 250, 252, 0.8);
+  border: 1px solid rgba(20, 184, 166, 0.1);
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.service-card:hover {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(6, 182, 212, 0.05));
+  border-color: rgba(20, 184, 166, 0.3);
+  transform: translateX(4px);
+  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
+}
+
+.service-card.featured {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
+  border-color: rgba(20, 184, 166, 0.3);
+}
+
+.service-card.featured:hover {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.15));
+}
+
+.service-icon {
+  font-size: 1.5rem;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.service-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.service-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary, #0f172a);
+}
+
+.service-desc {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #64748b);
+}
+
+.service-badge {
+  font-size: 0.625rem;
+  font-weight: 700;
+  padding: 3px 8px;
+  background: linear-gradient(135deg, #14b8a6, #06b6d4);
+  color: white;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.services-popup-footer {
+  padding: 0.75rem 1rem;
+  background: rgba(248, 250, 252, 0.8);
+  border-top: 1px solid rgba(20, 184, 166, 0.1);
+}
+
+.view-all-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.625rem;
+  background: transparent;
+  border: 2px solid rgba(20, 184, 166, 0.3);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #14b8a6;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.view-all-btn:hover {
+  background: rgba(20, 184, 166, 0.1);
+  border-color: #14b8a6;
+}
+
+/* Dark Mode for Services Menu */
+[data-theme="dark"] .services-popup {
+  background: #1e293b;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .services-popup-header {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .services-popup-header h4 {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .services-close-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: #94a3b8;
+}
+
+[data-theme="dark"] .service-card {
+  background: rgba(30, 41, 59, 0.8);
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .service-card:hover {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.1));
+}
+
+[data-theme="dark"] .service-icon {
+  background: rgba(15, 23, 42, 0.8);
+}
+
+[data-theme="dark"] .service-name {
+  color: #f1f5f9;
+}
+
+[data-theme="dark"] .service-desc {
+  color: #94a3b8;
+}
+
+[data-theme="dark"] .services-popup-footer {
+  background: rgba(15, 23, 42, 0.8);
+  border-color: rgba(20, 184, 166, 0.2);
+}
+
+[data-theme="dark"] .view-all-btn {
+  color: #2dd4bf;
+  border-color: rgba(45, 212, 191, 0.3);
+}
+
+[data-theme="dark"] .view-all-btn:hover {
+  background: rgba(45, 212, 191, 0.1);
+  border-color: #2dd4bf;
+}

static/shared/layouts/sidebar.html

@@ -123,6 +123,20 @@
         </a>
       </li>
 
+      <!-- Indicator Services -->
+      <li class="nav-item">
+        <a href="/static/pages/services/index.html" class="nav-link" data-page="services">
+          <span class="nav-icon">
+            <svg width="15" height="15" 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>
+          <span class="nav-label">Services</span>
+          <span class="nav-badge" style="background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; font-size: 8px; padding: 2px 6px; border-radius: 8px; margin-left: auto;">NEW</span>
+        </a>
+      </li>
+
       <!-- Trading Assistant -->
       <li class="nav-item">
         <a href="/static/pages/trading-assistant/index.html" class="nav-link" data-page="trading-assistant">
@@ -212,6 +226,113 @@
     </ul>
   </nav>
 
+  <!-- Services Menu (Dollar Sign) -->
+  <div class="services-menu-container">
+    <button id="services-toggle" class="services-toggle-btn" title="Premium Services">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
+    </button>
+    
+    <!-- Services Popup Menu -->
+    <div id="services-popup" class="services-popup" style="display: none;">
+      <div class="services-popup-header">
+        <h4>
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+          </svg>
+          Indicator Services
+        </h4>
+        <button class="services-close-btn" id="services-close">×</button>
+      </div>
+      <div class="services-popup-body">
+        <div class="services-grid">
+          <!-- Bollinger Bands -->
+          <a href="/static/pages/services/index.html?service=bollinger_bands" class="service-card" data-service="bollinger_bands">
+            <span class="service-icon">📊</span>
+            <div class="service-info">
+              <span class="service-name">Bollinger Bands</span>
+              <span class="service-desc">Volatility bands analysis</span>
+            </div>
+          </a>
+          
+          <!-- Stochastic RSI -->
+          <a href="/static/pages/services/index.html?service=stoch_rsi" class="service-card" data-service="stoch_rsi">
+            <span class="service-icon">📈</span>
+            <div class="service-info">
+              <span class="service-name">Stochastic RSI</span>
+              <span class="service-desc">Momentum oscillator</span>
+            </div>
+          </a>
+          
+          <!-- ATR -->
+          <a href="/static/pages/services/index.html?service=atr" class="service-card" data-service="atr">
+            <span class="service-icon">📉</span>
+            <div class="service-info">
+              <span class="service-name">ATR</span>
+              <span class="service-desc">Average True Range</span>
+            </div>
+          </a>
+          
+          <!-- SMA -->
+          <a href="/static/pages/services/index.html?service=sma" class="service-card" data-service="sma">
+            <span class="service-icon">〰️</span>
+            <div class="service-info">
+              <span class="service-name">SMA</span>
+              <span class="service-desc">Simple Moving Average</span>
+            </div>
+          </a>
+          
+          <!-- EMA -->
+          <a href="/static/pages/services/index.html?service=ema" class="service-card" data-service="ema">
+            <span class="service-icon">📐</span>
+            <div class="service-info">
+              <span class="service-name">EMA</span>
+              <span class="service-desc">Exponential MA</span>
+            </div>
+          </a>
+          
+          <!-- MACD -->
+          <a href="/static/pages/services/index.html?service=macd" class="service-card" data-service="macd">
+            <span class="service-icon">🔀</span>
+            <div class="service-info">
+              <span class="service-name">MACD</span>
+              <span class="service-desc">Trend momentum</span>
+            </div>
+          </a>
+          
+          <!-- RSI -->
+          <a href="/static/pages/services/index.html?service=rsi" class="service-card" data-service="rsi">
+            <span class="service-icon">💪</span>
+            <div class="service-info">
+              <span class="service-name">RSI</span>
+              <span class="service-desc">Relative Strength</span>
+            </div>
+          </a>
+          
+          <!-- Comprehensive -->
+          <a href="/static/pages/services/index.html?service=comprehensive" class="service-card featured" data-service="comprehensive">
+            <span class="service-icon">🎯</span>
+            <div class="service-info">
+              <span class="service-name">Full Analysis</span>
+              <span class="service-desc">All indicators combined</span>
+            </div>
+            <span class="service-badge">PRO</span>
+          </a>
+        </div>
+      </div>
+      <div class="services-popup-footer">
+        <a href="/static/pages/services/index.html" class="view-all-btn">
+          View All Services
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
   <!-- Sidebar Footer -->
   <div class="sidebar-footer">
     <div class="sidebar-status">
@@ -220,3 +341,35 @@
     </div>
   </div>
 </aside>
+
+<script>
+  // Services Menu Toggle
+  document.addEventListener('DOMContentLoaded', function() {
+    const toggleBtn = document.getElementById('services-toggle');
+    const popup = document.getElementById('services-popup');
+    const closeBtn = document.getElementById('services-close');
+    
+    if (toggleBtn && popup) {
+      toggleBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        popup.style.display = popup.style.display === 'none' ? 'block' : 'none';
+        toggleBtn.classList.toggle('active');
+      });
+      
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function() {
+          popup.style.display = 'none';
+          toggleBtn.classList.remove('active');
+        });
+      }
+      
+      // Close on outside click
+      document.addEventListener('click', function(e) {
+        if (!popup.contains(e.target) && !toggleBtn.contains(e.target)) {
+          popup.style.display = 'none';
+          toggleBtn.classList.remove('active');
+        }
+      });
+    }
+  });
+</script>