Upload 3 files

app.py

@@ -0,0 +1,260 @@
+#!/usr/bin/env python3
+from flask import Flask, render_template, request, jsonify, send_file
+import json
+import requests
+import pandas as pd
+import numpy as np
+import io
+import base64
+from bs4 import BeautifulSoup
+import matplotlib
+
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+import seaborn as sns
+import plotly
+import plotly.express as px
+import plotly.graph_objects as go
+from datetime import datetime, timedelta
+import random
+
+app = Flask(__name__)
+
+
+def parse_company_essentials(html_text: str):
+    soup = BeautifulSoup(html_text, 'html.parser')
+    container = soup.find('div', id='companyessentials')
+    if not container:
+        return []
+    items = []
+    for block in container.select('#mainContent_updAddRatios .compess'):
+        small = block.find('small')
+        if not small:
+            continue
+        # extract label
+        label_text = ''
+        for elem in small.contents:
+            if elem.name == 'span' and 'infolink' in elem.get('class', []):
+                break
+            label_text += elem.get_text() if not isinstance(elem, str) else elem
+        label = label_text.strip()
+        # tooltip
+        info = small.find('span', class_='infolink')
+        tooltip = info.get('data-original-title', '').strip() if info else ''
+        # value
+        p = block.find('p')
+        value = ' '.join(p.stripped_strings) if p else ''
+        items.append({
+            "label": label,
+            "tooltip": tooltip,
+            "value": value
+        })
+    return items
+
+
+def get_company_name(html_text: str):
+    soup = BeautifulSoup(html_text, 'html.parser')
+    title_element = soup.find('h1')
+    if title_element:
+        return title_element.text.strip()
+    return "Unknown Company"
+
+
+def get_historical_data(ticker):
+    """
+    Generate sample historical data for stock prices.
+    In a production app, you would fetch real data from an API.
+    """
+    # Create a date range for the last 30 days
+    end_date = datetime.now()
+    start_date = end_date - timedelta(days=180)
+    date_range = pd.date_range(start=start_date, end=end_date, freq='B')  # 'B' for business days
+
+    # Generate sample prices with a general trend and some randomness
+    base_price = 100 + random.randint(-20, 20)  # Random starting point
+
+    # Create a trend component (upward, downward, or sideways)
+    trend_type = random.choice(['up', 'down', 'sideways'])
+    if trend_type == 'up':
+        trend = np.linspace(0, 15, len(date_range))
+    elif trend_type == 'down':
+        trend = np.linspace(15, 0, len(date_range))
+    else:
+        trend = np.linspace(0, 0, len(date_range))
+
+    # Add randomness
+    noise = np.random.normal(0, 2, len(date_range))
+
+    # Calculate prices
+    prices = base_price + trend + np.cumsum(noise) * 0.5
+
+    # Ensure no negative prices
+    prices = np.maximum(prices, 1)
+
+    # Create DataFrame
+    df = pd.DataFrame({
+        'Date': date_range,
+        'Close': prices,
+        'Volume': np.random.randint(100000, 1000000, len(date_range))
+    })
+
+    # Calculate moving averages
+    df['MA50'] = df['Close'].rolling(window=50).mean()
+    df['MA20'] = df['Close'].rolling(window=20).mean()
+
+    return df
+
+
+def generate_seaborn_price_chart(ticker):
+    """Generate a Seaborn price chart and return as base64 encoded image"""
+    df = get_historical_data(ticker)
+
+    # Create a Seaborn figure
+    plt.figure(figsize=(10, 6))
+    sns.set_style("darkgrid")
+
+    # Plot price and moving averages
+    ax = sns.lineplot(x='Date', y='Close', data=df, label='Price', linewidth=2)
+    sns.lineplot(x='Date', y='MA20', data=df, label='20-Day MA', linewidth=1.5)
+    sns.lineplot(x='Date', y='MA50', data=df, label='50-Day MA', linewidth=1.5)
+
+    # Set labels and title
+    plt.title(f'{ticker} - Price History (Last 6 Months)', fontsize=16)
+    plt.ylabel('Price (₹)', fontsize=12)
+    plt.xlabel('', fontsize=12)
+    plt.xticks(rotation=45)
+    plt.tight_layout()
+
+    # Save to bytes buffer
+    buffer = io.BytesIO()
+    plt.savefig(buffer, format='png', dpi=100)
+    buffer.seek(0)
+
+    # Encode as base64 string
+    image_base64 = base64.b64encode(buffer.getvalue()).decode('utf-8')
+    plt.close()
+
+    return image_base64
+
+
+def generate_plotly_charts(ticker):
+    """Generate Plotly charts and return as JSON"""
+    df = get_historical_data(ticker)
+
+    # Price chart with candlesticks
+    # For simplicity, we'll generate OHLC data from our close prices
+    df['Open'] = df['Close'].shift(1)
+    df['High'] = df['Close'] * (1 + np.random.uniform(0, 0.02, len(df)))
+    df['Low'] = df['Close'] * (1 - np.random.uniform(0, 0.02, len(df)))
+    df = df.dropna()
+
+    # Candlestick chart
+    candlestick = go.Figure(data=[go.Candlestick(
+        x=df['Date'],
+        open=df['Open'],
+        high=df['High'],
+        low=df['Low'],
+        close=df['Close'],
+        increasing_line_color='green',
+        decreasing_line_color='red'
+    )])
+    candlestick.update_layout(
+        title=f'{ticker} - OHLC Chart',
+        xaxis_title='Date',
+        yaxis_title='Price (₹)',
+        xaxis_rangeslider_visible=False,
+        height=500
+    )
+
+    # Volume chart
+    volume = px.bar(
+        df,
+        x='Date',
+        y='Volume',
+        title=f'{ticker} - Volume Chart'
+    )
+    volume.update_layout(
+        xaxis_title='Date',
+        yaxis_title='Volume',
+        height=300
+    )
+
+    # Price Histogram
+    histogram = px.histogram(
+        df,
+        x='Close',
+        nbins=20,
+        title=f'{ticker} - Price Distribution'
+    )
+    histogram.update_layout(
+        xaxis_title='Price (₹)',
+        yaxis_title='Frequency',
+        height=300
+    )
+
+    # Return JSON for each chart
+    return {
+        'candlestick': json.loads(candlestick.to_json()),
+        'volume': json.loads(volume.to_json()),
+        'histogram': json.loads(histogram.to_json())
+    }
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/search', methods=['POST'])
+def search():
+    ticker = request.form.get('ticker', '')
+    if not ticker:
+        return jsonify({'error': 'No ticker provided'})
+
+    url = f'https://ticker.finology.in/company/{ticker}'
+    headers = {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
+    }
+
+    try:
+        resp = requests.get(url, headers=headers, timeout=10)
+        resp.raise_for_status()
+        html = resp.text
+
+        company_name = get_company_name(html)
+        data = parse_company_essentials(html)
+
+        # Generate seaborn chart
+        seaborn_chart = generate_seaborn_price_chart(ticker)
+
+        # Generate plotly charts
+        plotly_charts = generate_plotly_charts(ticker)
+
+        # Sample 52-week high/low data
+        high_52w = round(random.uniform(110, 150), 2)
+        low_52w = round(random.uniform(70, 95), 2)
+        avg_vol = f"{random.randint(100, 999)},{random.randint(100, 999)}"
+
+        return jsonify({
+            'company_name': company_name,
+            'data': data,
+            'charts': {
+                'seaborn_base64': seaborn_chart,
+                'plotly': plotly_charts
+            },
+            'performance': {
+                'high_52week': f"₹{high_52w}",
+                'low_52week': f"₹{low_52w}",
+                'avg_volume': avg_vol
+            },
+            'success': True
+        })
+    except requests.exceptions.RequestException as e:
+        return jsonify({
+            'error': f'Error fetching data: {str(e)}',
+            'success': False
+        })
+
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5002)

requirements.txt

@@ -0,0 +1,9 @@
+flask
+gunicorn
+pandas
+numpy
+requests
+beautifulsoup4
+matplotlib
+seaborn
+plotly

templates/index.html

@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>📊 StockInsight Pro</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.26.0/plotly.min.js"></script>
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --success-color: #4cc9f0;
+            --danger-color: #f72585;
+            --light-bg: #f8f9fa;
+            --dark-bg: #212529;
+            --gold-color: #ffd700;
+        }
+
+        @font-face {
+            font-family: 'Font Awesome 5 Free';
+            font-style: normal;
+            font-weight: 900;
+            font-display: block;
+            src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
+        }
+
+        .fa-coin:before {
+            content: "\f51e"; /* using fa-coins icon code */
+            font-family: 'Font Awesome 5 Free';
+        }
+
+        body {
+            background-color: var(--light-bg);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            padding: 0;
+            min-height: 100vh;
+        }
+
+        .hero-section {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 30px 0;
+            margin-bottom: 30px;
+            border-bottom: 4px solid var(--accent-color);
+        }
+
+        .app-logo {
+            display: inline-block;
+            background-color: rgba(255, 255, 255, 0.15);
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            line-height: 80px;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+            }
+        }
+
+        .search-container {
+            max-width: 600px;
+            margin: 0 auto;
+            position: relative;
+            transform: translateY(50%);
+        }
+
+        .search-form {
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            border-radius: 30px;
+            overflow: hidden;
+        }
+
+        .search-input {
+            border: none;
+            box-shadow: none;
+            padding-left: 20px;
+            font-size: 1.1rem;
+            height: 55px;
+        }
+
+        .search-btn {
+            border-radius: 0 30px 30px 0;
+            padding: 0 25px;
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            transition: all 0.3s;
+        }
+
+        .search-btn:hover {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+
+        .recent-searches {
+            margin-top: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .recent-search-item {
+            background-color: rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            padding: 4px 12px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .recent-search-item:hover {
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        .content-section {
+            margin-top: 3rem;
+        }
+
+        .company-header {
+            background: linear-gradient(135deg, #3a0ca3 0%, #4361ee 100%);
+            color: white;
+            padding: 2rem;
+            border-radius: 10px;
+            margin-bottom: 2rem;
+            display: none;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .company-header::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 150px;
+            height: 100%;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" opacity="0.1"><path d="M3 3v18h18V3H3zm16 16H5V5h14v14zM7 7h2v2H7V7zm0 4h2v2H7v-2zm0 4h2v2H7v-2zm4-8h6v2h-6V7zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2z"/></svg>') repeat;
+            opacity: 0.05;
+        }
+
+        .stock-badges {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .badge {
+            font-weight: normal;
+            padding: 8px 12px;
+            border-radius: 20px;
+        }
+
+        .company-info {
+            display: flex;
+            align-items: center;
+        }
+
+        .company-logo {
+            width: 60px;
+            height: 60px;
+            background-color: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            font-size: 1.8rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .company-logo::after {
+            content: '';
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            width: 30px;
+            height: 30px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+        }
+
+        .company-details h2 {
+            margin-bottom: 5px;
+            font-weight: 600;
+        }
+
+        .company-sector {
+            font-size: 1rem;
+            opacity: 0.8;
+        }
+
+        .card {
+            border: none;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            border-radius: 10px;
+            transition: transform 0.3s, box-shadow 0.3s;
+            overflow: hidden;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .card-header {
+            background-color: rgba(67, 97, 238, 0.1);
+            font-weight: 600;
+            color: var(--primary-color);
+            border-bottom: none;
+            padding: 15px;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        .stock-card-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 0;
+        }
+
+        .card-indicator {
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .indicator-up {
+            color: #2ecc71;
+        }
+
+        .indicator-down {
+            color: #e74c3c;
+        }
+
+        .tooltip-icon {
+            cursor: help;
+            margin-left: 5px;
+            color: #6c757d;
+            transition: color 0.2s;
+        }
+
+        .tooltip-icon:hover {
+            color: var(--primary-color);
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px 0;
+        }
+
+        .spinner-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .spinner-border {
+            width: 3rem;
+            height: 3rem;
+        }
+
+        .error-message {
+            display: none;
+            color: #fff;
+            padding: 15px;
+            border-radius: 10px;
+            background-color: var(--danger-color);
+            margin: 20px 0;
+            box-shadow: 0 4px 12px rgba(247, 37, 133, 0.3);
+        }
+
+        #results-container {
+            display: none;
+        }
+
+        .info-tabs {
+            margin-bottom: 20px;
+        }
+
+        .nav-tabs {
+            border-bottom: none;
+            margin-bottom: 20px;
+        }
+
+        .nav-tabs .nav-link {
+            border: none;
+            border-radius: 20px;
+            padding: 8px 20px;
+            margin-right: 10px;
+            color: #495057;
+            font-weight: 500;
+            transition: all 0.3s;
+        }
+
+        .nav-tabs .nav-link:hover {
+            background-color: rgba(67, 97, 238, 0.1);
+        }
+
+        .nav-tabs .nav-link.active {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .info-section {
+            margin-bottom: 3rem;
+        }
+
+        .info-section-header {
+            margin-bottom: 1rem;
+            color: #333;
+            font-weight: 600;
+        }
+
+        .comparison-stats {
+            margin-top: 2rem;
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid #f1f1f1;
+        }
+
+        .stat-row:last-child {
+            border-bottom: none;
+        }
+
+        .stat-label {
+            font-weight: 500;
+            color: #555;
+        }
+
+        .stat-value {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .footer-note {
+            margin-top: 2rem;
+            padding: 1rem;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            font-size: 0.9rem;
+            color: #6c757d;
+        }
+
+        .chart-container {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .seaborn-chart {
+            width: 100%;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+
+        .plotly-chart {
+            width: 100%;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            min-height: 400px;
+        }
+
+        @media (max-width: 767px) {
+            .hero-section {
+                padding: 2rem 0;
+            }
+
+            .search-container {
+                transform: translateY(30%);
+            }
+
+            .company-logo {
+                width: 45px;
+                height: 45px;
+                font-size: 1.4rem;
+            }
+
+            .company-details h2 {
+                font-size: 1.5rem;
+            }
+
+            .nav-tabs .nav-link {
+                padding: 6px 12px;
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="hero-section">
+        <div class="container">
+            <div class="text-center mb-4">
+                <div class="app-logo mb-3">
+                    <i class="fas fa-chart-line fa-3x"></i>
+                </div>
+                <h1 class="display-4 fw-bold">StockInsight Pro</h1>
+                <p class="lead">Instantly access financial metrics for Indian stocks</p>
+            </div>
+
+            <div class="search-container">
+                <form id="search-form" class="search-form d-flex">
+                    <input type="text" id="ticker-input" class="form-control search-input"
+                        placeholder="Enter ticker (e.g., ITC, RELIANCE, TCS)" required autocomplete="off">
+                    <button type="submit" class="btn btn-primary search-btn">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </form>
+
+                <div class="recent-searches" id="recent-searches">
+                    <!-- Will be populated by JS -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container content-section">
+        <div id="loading" class="loading">
+            <div class="spinner-container">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="text-muted">Fetching latest stock data...</p>
+            </div>
+        </div>
+
+        <div id="error-message" class="error-message">
+            <i class="fas fa-exclamation-triangle me-2"></i>
+            <span id="error-text">Error message will appear here</span>
+        </div>
+
+        <div id="results-container">
+            <div id="company-header" class="company-header">
+                <div class="company-info">
+                    <div class="company-logo" id="company-logo-container">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <div class="company-details">
+                        <h2 id="company-name">Company Name</h2>
+                        <div class="company-sector" id="company-sector">
+                            <i class="fas fa-industry me-2"></i>
+                            <span id="sector-text">Industry / Sector</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="stock-badges mt-3">
+                    <span class="badge bg-light text-dark me-2">
+                        <i class="fas fa-globe me-1"></i> BSE/NSE
+                    </span>
+                    <span class="badge bg-light text-dark me-2">
+                        <i class="fas fa-clock me-1"></i> Updated <span id="last-updated">today</span>
+                    </span>
+                </div>
+            </div>
+
+            <div class="info-tabs">
+                <ul class="nav nav-tabs" id="stockInfoTabs" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link active" id="essentials-tab" data-bs-toggle="tab" data-bs-target="#essentials" type="button" role="tab" aria-controls="essentials" aria-selected="true">
+                            <i class="fas fa-star me-2"></i>Key Metrics
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="performance-tab" data-bs-toggle="tab" data-bs-target="#performance" type="button" role="tab" aria-controls="performance" aria-selected="false">
+                            <i class="fas fa-chart-line me-2"></i>Performance
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="charts-tab" data-bs-toggle="tab" data-bs-target="#charts" type="button" role="tab" aria-controls="charts" aria-selected="false">
+                            <i class="fas fa-chart-bar me-2"></i>Charts
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="news-tab" data-bs-toggle="tab" data-bs-target="#news" type="button" role="tab" aria-controls="news" aria-selected="false">
+                            <i class="fas fa-newspaper me-2"></i>News
+                        </button>
+                    </li>
+                </ul>
+
+                <div class="tab-content" id="stockInfoTabsContent">
+                    <div class="tab-pane fade show active" id="essentials" role="tabpanel" aria-labelledby="essentials-tab">
+                        <div class="info-section">
+                            <h3 class="info-section-header"><i class="fas fa-info-circle me-2"></i>Company Essentials</h3>
+                            <div id="essentials-container" class="row"></div>
+                        </div>
+                    </div>
+
+                    <div class="tab-pane fade" id="performance" role="tabpanel" aria-labelledby="performance-tab">
+                        <div class="info-section">
+                            <h3 class="info-section-header"><i class="fas fa-chart-bar me-2"></i>Performance Metrics</h3>
+
+                            <!-- Seaborn Static Chart -->
+                            <div class="chart-container mb-4">
+                                <h4 class="mb-3"><i class="fas fa-chart-line me-2"></i>Price History (Last 6 Months)</h4>
+                                <img id="seaborn-chart" class="seaborn-chart img-fluid" src="" alt="Price History Chart">
+                            </div>
+
+                            <div class="comparison-stats">
+                                <div class="stat-row">
+                                    <span class="stat-label"><i class="fas fa-arrow-up text-success me-2"></i>52-Week High</span>
+                                    <span class="stat-value" id="high-52week">--</span>
+                                </div>
+                                <div class="stat-row">
+                                    <span class="stat-label"><i class="fas fa-arrow-down text-danger me-2"></i>52-Week Low</span>
+                                    <span class="stat-value" id="low-52week">--</span>
+                                </div>
+                                <div class="stat-row">
+                                    <span class="stat-label"><i class="fas fa-exchange-alt me-2"></i>Volume (Avg)</span>
+                                    <span class="stat-value" id="avg-volume">--</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tab-pane fade" id="charts" role="tabpanel" aria-labelledby="charts-tab">
+                        <div class="info-section">
+                            <h3 class="info-section-header"><i class="fas fa-chart-bar me-2"></i>Interactive Charts</h3>
+
+                            <!-- Plotly Interactive Charts -->
+                            <div class="chart-container mb-4">
+                                <h4 class="mb-3"><i class="fas fa-chart-line me-2"></i>OHLC Price Chart</h4>
+                                <div id="candlestick-chart" class="plotly-chart"></div>
+                            </div>
+
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="chart-container">
+                                        <h4 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Volume Analysis</h4>
+                                        <div id="volume-chart" class="plotly-chart"></div>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="chart-container">
+                                        <h4 class="mb-3"><i class="fas fa-chart-area me-2"></i>Price Distribution</h4>
+                                        <div id="histogram-chart" class="plotly-chart"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tab-pane fade" id="news" role="tabpanel" aria-labelledby="news-tab">
+                        <div class="info-section">
+                            <h3 class="info-section-header"><i class="fas fa-newspaper me-2"></i>Latest News</h3>
+                            <div class="alert alert-info">
+                                <i class="fas fa-info-circle me-2"></i>
+                                The news section is not available in the current version. Check back soon for updates!
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="footer-note">
+                <p class="mb-0"><i class="fas fa-info-circle me-2"></i> Disclaimer: All information is for educational purposes only. Do not use this data for making investment decisions.</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const searchForm = document.getElementById('search-form');
+            const tickerInput = document.getElementById('ticker-input');
+            const loadingContainer = document.getElementById('loading');
+            const errorMessage = document.getElementById('error-message');
+            const errorText = document.getElementById('error-text');
+            const resultsContainer = document.getElementById('results-container');
+            const companyHeader = document.getElementById('company-header');
+            const companyName = document.getElementById('company-name');
+            const recentSearchesContainer = document.getElementById('recent-searches');
+
+            // Recent searches array from localStorage
+            let recentSearches = JSON.parse(localStorage.getItem('recentSearches')) || [];
+
+            // Display recent searches
+            function displayRecentSearches() {
+                recentSearchesContainer.innerHTML = '';
+
+                // Get latest 5 searches
+                const latestSearches = recentSearches.slice(0, 5);
+
+                latestSearches.forEach(ticker => {
+                    const searchItem = document.createElement('div');
+                    searchItem.className = 'recent-search-item';
+                    searchItem.textContent = ticker;
+                    searchItem.addEventListener('click', () => {
+                        tickerInput.value = ticker;
+                        searchForm.dispatchEvent(new Event('submit'));
+                    });
+                    recentSearchesContainer.appendChild(searchItem);
+                });
+            }
+
+            // Add ticker to recent searches
+            function addToRecentSearches(ticker) {
+                // Remove ticker if already exists
+                recentSearches = recentSearches.filter(item => item !== ticker);
+
+                // Add to beginning of array
+                recentSearches.unshift(ticker);
+
+                // Keep only latest 10 searches
+                recentSearches = recentSearches.slice(0, 10);
+
+                // Save to localStorage
+                localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
+
+                // Update displayed searches
+                displayRecentSearches();
+            }
+
+            // Display initial recent searches
+            displayRecentSearches();
+
+            // Handle form submission
+            searchForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+
+                const ticker = tickerInput.value.trim().toUpperCase();
+
+                if (!ticker) {
+                    return;
+                }
+
+                // Show loading
+                loadingContainer.style.display = 'block';
+                errorMessage.style.display = 'none';
+                resultsContainer.style.display = 'none';
+
+                // Make fetch request to the server
+                fetch('/search', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `ticker=${encodeURIComponent(ticker)}`
+                })
+                .then(response => response.json())
+                .then(data => {
+                    // Hide loading
+                    loadingContainer.style.display = 'none';
+
+                    if (data.success) {
+                        // Add to recent searches
+                        addToRecentSearches(ticker);
+
+                        // Display results
+                        displayResults(data, ticker);
+                    } else {
+                        // Show error
+                        errorText.textContent = data.error;
+                        errorMessage.style.display = 'block';
+                    }
+                })
+                .catch(error => {
+                    // Hide loading
+                    loadingContainer.style.display = 'none';
+
+                    // Show error
+                    errorText.textContent = `An error occurred: ${error.message}`;
+                    errorMessage.style.display = 'block';
+                });
+            });
+
+            // Display results
+            function displayResults(data, ticker) {
+                // Set company name
+                companyName.textContent = data.company_name || ticker;
+
+                // Set sector text (sample data)
+                document.getElementById('sector-text').textContent = 'Stock Analysis Data';
+
+                // Set last updated
+                document.getElementById('last-updated').textContent = new Date().toLocaleDateString();
+
+                // Display company header
+                companyHeader.style.display = 'block';
+
+                // Display company essentials
+                const essentialsContainer = document.getElementById('essentials-container');
+                essentialsContainer.innerHTML = '';
+
+                if (data.data && data.data.length > 0) {
+                    data.data.forEach(item => {
+                        const cardDiv = document.createElement('div');
+                        cardDiv.className = 'col-lg-3 col-md-4 col-sm-6 mb-4';
+
+                        let tooltipHtml = '';
+                        if (item.tooltip) {
+                            tooltipHtml = `<span class="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="${item.tooltip}">
+                                            <i class="fas fa-info-circle"></i>
+                                           </span>`;
+                        }
+
+                        cardDiv.innerHTML = `
+                            <div class="card h-100">
+                                <div class="card-header d-flex justify-content-between align-items-center">
+                                    ${item.label} ${tooltipHtml}
+                                </div>
+                                <div class="card-body d-flex flex-column justify-content-center">
+                                    <p class="stock-card-value">${item.value}</p>
+                                </div>
+                            </div>
+                        `;
+
+                        essentialsContainer.appendChild(cardDiv);
+                    });
+
+                    // Initialize tooltips
+                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+                    tooltipTriggerList.map(function (tooltipTriggerEl) {
+                        return new bootstrap.Tooltip(tooltipTriggerEl);
+                    });
+                }
+
+                // Set performance metrics
+                if (data.performance) {
+                    document.getElementById('high-52week').textContent = data.performance.high_52week;
+                    document.getElementById('low-52week').textContent = data.performance.low_52week;
+                    document.getElementById('avg-volume').textContent = data.performance.avg_volume;
+                }
+
+                // Display Seaborn chart
+                if (data.charts && data.charts.seaborn_base64) {
+                    document.getElementById('seaborn-chart').src = `data:image/png;base64,${data.charts.seaborn_base64}`;
+                }
+
+                // Display Plotly charts
+                if (data.charts && data.charts.plotly) {
+                    // Candlestick chart
+                    if (data.charts.plotly.candlestick) {
+                        Plotly.newPlot('candlestick-chart', data.charts.plotly.candlestick.data, data.charts.plotly.candlestick.layout);
+                    }
+
+                    // Volume chart
+                    if (data.charts.plotly.volume) {
+                        Plotly.newPlot('volume-chart', data.charts.plotly.volume.data, data.charts.plotly.volume.layout);
+                    }
+
+                    // Histogram chart
+                    if (data.charts.plotly.histogram) {
+                        Plotly.newPlot('histogram-chart', data.charts.plotly.histogram.data, data.charts.plotly.histogram.layout);
+                    }
+                }
+
+                // Show results container
+                resultsContainer.style.display = 'block';
+
+                // Reset zoom on charts when switching tabs
+                const chartTab = document.getElementById('charts-tab');
+                chartTab.addEventListener('shown.bs.tab', function (e) {
+                    if (data.charts && data.charts.plotly) {
+                        if (data.charts.plotly.candlestick) {
+                            Plotly.relayout('candlestick-chart', {});
+                        }
+                        if (data.charts.plotly.volume) {
+                            Plotly.relayout('volume-chart', {});
+                        }
+                        if (data.charts.plotly.histogram) {
+                            Plotly.relayout('histogram-chart', {});
+                        }
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>