initial

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.glb filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,9 @@
+mongo_uri_secret
+firebase_api_key_secret
+firebase_api_key_secret
+firebase_auth_domain_secret
+firebase_project_secret
+firebase_storage_bucket_secret
+firebase_messaging_sender_id_secret
+firebase_app_id_secret
+firebase_measurement_id_secret

Dockerfile

@@ -0,0 +1,35 @@
+# Use official Python image
+FROM python:3.12-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# Set work directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Expose port (Flask default is 5000)
+EXPOSE 7860
+
+# Set environment variable for Flask
+ENV FLASK_APP=app.py
+ENV OMP_NUM_THREADS=1
+ENV TF_NUM_INTRAOP_THREADS=1
+ENV TF_NUM_INTEROP_THREADS=1
+ENV TF_ENABLE_ONEDNN_OPTS=0
+ENV GUNICORN_CMD_ARGS="--timeout 6000"
+# Run the app with Gunicorn for production
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,397 @@
+from flask import Flask, render_template, jsonify, request, redirect, url_for, session, send_from_directory
+import requests
+import os
+from functools import wraps
+import firebase_admin
+from firebase_admin import credentials, auth
+from flask import Flask, jsonify, render_template
+from pymongo import MongoClient
+import json
+from static.pipelines.lstm_pipeline import run_lstm_prediction 
+from static.pipelines.lstm_n_pipeline import run_lstm_sentiment_prediction
+import tensorflow as tf
+import yfinance as yf
+import requests
+from flask import Response
+import numpy as np
+import pandas as pd
+import traceback
+from dotenv import load_dotenv
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+load_dotenv()
+
+# Firebase configuration
+firebase_api_key = os.getenv("FIREBASE_API_KEY")
+firebase_auth_domain = os.getenv("FIREBASE_AUTH_DOMAIN")
+firebase_project = os.getenv("FIREBASE_PROJECT")
+firebase_storage_bucket = os.getenv("FIREBASE_STORAGE_BUCKET")
+firebase_messaging_sender_id = os.getenv("FIREBASE_MESSAGING_SENDER_ID")
+firebase_app_id = os.getenv("FIREBASE_APP_ID")
+firebase_measurement_id = os.getenv("FIREBASE_MEASUREMENT_ID")
+
+# Example usage
+# Use the MongoDB URI from the .env file
+mongo_uri = os.getenv("MONGO_URI")
+client = MongoClient(mongo_uri)
+db = client["stock_news"]
+companies_collection = db["nse50_companies"]
+news_collection = db["moneyworks_company_news"]
+
+# Firebase credentials
+firebase_credentials_json = os.getenv("FIREBASE_CREDENTIALS_JSON")
+if firebase_credentials_json:
+    firebase_credentials = json.loads(firebase_credentials_json)
+    cred = credentials.Certificate(firebase_credentials)
+    if not firebase_admin._apps:  # Check if no app is already initialized
+        firebase_admin.initialize_app(cred)
+
+
+def verify_firebase_token(token):
+    try:
+        decoded_token = auth.verify_id_token(token)
+        return decoded_token
+    except Exception as e:
+        return None
+
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        # Check if user is logged in (client-side auth check)
+        # For server-side verification, you would validate the Firebase token here
+        if 'user_logged_in' not in session:
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+@app.route('/')
+def home():
+    modelpath = url_for('static', filename='models/coins.glb')
+    return render_template("home.html", modelpath=modelpath)
+    
+
+@app.route('/login')
+def login():
+    return render_template("login.html")
+
+@app.route('/fundamentals')
+def fundamentals():
+    return render_template("fundamentals.html")
+
+@app.route('/movers')
+def movers():
+    return render_template("movers.html")
+
+@app.route('/news')
+def news():
+    return render_template("news.html")
+
+@app.route('/firebase-config')
+def firebase_config():
+    return jsonify({
+        "apiKey": firebase_api_key,
+        "authDomain": firebase_auth_domain,
+        "projectId": firebase_project,
+        "storageBucket": firebase_storage_bucket,
+        "messagingSenderId": firebase_messaging_sender_id,
+        "appId": firebase_app_id,
+        "measurementId": firebase_measurement_id
+    })
+
+
+@app.route("/get-companies")
+def get_companies():
+    filtered = list(companies_collection.find({}, {"_id": 0, "Company Name": 1, "Yahoo Finance Ticker": 1}))
+    # Remove companies with duplicate tickers or ticker in ["NIFTY", "SENSEX"]
+    seen = set()
+    companies = []
+    for c in filtered:
+        ticker = c.get("Yahoo Finance Ticker", "").upper()
+        if not ticker or ticker in seen or ticker in {"^NSEI", "^BSESN"}:
+            continue
+        seen.add(ticker)
+        companies.append(c)
+    return jsonify(companies)
+
+@app.route('/api/news-sentiment')
+def api_news_sentiment():
+    ticker = request.args.get('ticker')
+    if not ticker:
+        return jsonify({'error': 'No ticker provided'}), 400
+    try:
+        # Fetch the latest sentiment from your database or sentiment analysis pipeline
+        news = news_collection.find_one({"yahoo_ticker": ticker}, sort=[("date", -1)])
+        if news and "sentiment" in news:
+            return jsonify({'sentiment': news["sentiment"], 'score': news.get("score", "N/A")})
+        else:
+            return jsonify({'sentiment': 'Neutral', 'score': 'N/A'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/predict')
+def predict():
+    return render_template("predict.html")
+
+@app.route('/privacy')
+def privacy():
+    return render_template("privacy.html")
+
+@app.route('/terms')
+def terms():
+    return render_template("terms.html")
+
+@app.route('/disclaimer')
+def disclaimer():
+    return render_template("disclaimer.html")
+
+@app.route('/predict-result', methods=['POST'])
+def predict_result():
+    import tensorflow as tf
+    data = request.get_json()
+    prediction_type = data.get('type')
+    prediction_date = data.get('prediction_date')
+    epochs = int(data.get('epochs', 100))
+
+    try:
+        if prediction_type == 'historical-only' and prediction_date:
+            data['epochs'] = epochs
+            response = run_lstm_prediction(data)
+        elif prediction_type == 'news-sentiment' and prediction_date:
+            data['epochs'] = epochs
+            response = run_lstm_sentiment_prediction(data)
+        elif prediction_type == 'both' and prediction_date:
+            data['epochs'] = epochs
+            hist_result = run_lstm_prediction(data)
+            tf.keras.backend.clear_session()
+            sent_result = run_lstm_sentiment_prediction(data)
+            tf.keras.backend.clear_session()
+            if hasattr(hist_result, 'get_json'):
+                hist_result = hist_result.get_json()
+            if hasattr(sent_result, 'get_json'):
+                sent_result = sent_result.get_json()
+            return jsonify({
+                'historical': hist_result,
+                'sentiment': sent_result
+            })
+        else:
+            return jsonify({'error': 'Invalid prediction type'}), 400
+    except Exception as e:
+        print(traceback.format_exc())
+        return jsonify({'error': str(e)}), 500
+    finally:
+        tf.keras.backend.clear_session()
+    return response
+@app.route('/api/lookup-symbol')
+def lookup_symbol():
+    query = request.args.get('query', '').strip()
+    if not query:
+        return jsonify({'error': 'No query provided'}), 400
+    # Search by company name, symbol, company searched, or ticker (case-insensitive)
+    company = companies_collection.find_one({
+        "$or": [
+            {"Company Name": {"$regex": f"^{query}$", "$options": "i"}},
+            {"Yahoo Finance Ticker": {"$regex": f"^{query}$", "$options": "i"}},
+            {"Symbol": {"$regex": f"^{query}$", "$options": "i"}},
+            {"Company Searched": {"$regex": f"^{query}$", "$options": "i"}}
+        ]
+    }, {"_id": 0, "Yahoo Finance Ticker": 1})
+    if not company:
+        return jsonify({'error': 'Company not found'}), 404
+    return jsonify({'symbol': company["Yahoo Finance Ticker"]})
+
+@app.route('/api/historical')
+def api_historical():
+    symbol = request.args.get('symbol')
+    start = request.args.get('start')
+    end = request.args.get('end')
+    if not symbol:
+        return jsonify({'error': 'No symbol provided'}), 400
+    try:
+        ticker = yf.Ticker(symbol)
+        if start and end:
+            history = ticker.history(start=start, end=end)
+        else:
+            history = ticker.history(period="1y")
+        if history.empty:
+            return jsonify({'error': f'No data found for symbol: {symbol}'}), 404
+        data = {
+            'history': history.reset_index().to_dict(orient='records')
+        }
+        return jsonify(data)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+    
+@app.route('/api/fundamentals')
+def api_fundamentals():
+    symbol = request.args.get('symbol')
+    if not symbol:
+        return jsonify({'error': 'No symbol provided'}), 400
+    try:
+        ticker = yf.Ticker(symbol)
+        # Always fetch 1y for risk metrics
+        risk_history = ticker.history(period="1y")
+        # Always fetch max for chart/history
+        full_history = ticker.history(period="max")
+        info = ticker.info
+
+        # Risk metrics from 1y history
+        if not risk_history.empty:
+            risk_history['Return'] = risk_history['Close'].pct_change()
+            volatility = float(risk_history['Return'].std() * np.sqrt(252))
+            var_95 = float(np.percentile(risk_history['Return'].dropna(), 5))
+        else:
+            volatility = None
+            var_95 = None
+
+        beta = info.get('beta')
+
+        def pct(val):
+            return round(val * 100, 2) if val is not None else None
+
+        data = {
+            'pe': info.get('trailingPE'),
+            'pb': info.get('priceToBook'),
+            'ps': info.get('priceToSalesTrailing12Months'),
+            'divYield': pct(info.get('dividendYield')),
+            'roe': pct(info.get('returnOnEquity')),
+            'roa': pct(info.get('returnOnAssets')),
+            'grossMargin': pct(info.get('grossMargins')),
+            'opMargin': pct(info.get('operatingMargins')),
+            'currentRatio': info.get('currentRatio'),
+            'quickRatio': info.get('quickRatio'),
+            'debtEquity': info.get('debtToEquity'),
+            'ebitdaMargin': info.get('ebitdaMargins'),
+            'volatility': volatility,
+            'beta': beta,
+            'var95': var_95,
+        }
+        # Always include full history for charting
+        if not full_history.empty:
+            data['history'] = full_history.reset_index().to_dict(orient='records')
+        return jsonify(data)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+@app.route('/api/news')
+def api_news():
+    query = request.args.get('query', 'Indian stock market OR NSE OR Sensex OR Nifty')
+    rss_url = f"https://news.google.com/rss/search?q=Indian+finance+OR+economy+OR+RBI+OR+inflation+when:7d&hl=en-IN&gl=IN&ceid=IN:en"
+    r = requests.get(rss_url)
+    return Response(r.content, mimetype='application/xml')
+
+@app.route('/api/market-movers')
+def api_market_movers():
+    try:
+        # Get unique tickers from MongoDB
+        mongo_docs = list(companies_collection.find(
+            {"Yahoo Finance Ticker": {"$ne": None}},
+            {"Yahoo Finance Ticker": 1, "_id": 0}
+        ))
+        tickers = list({doc["Yahoo Finance Ticker"] for doc in mongo_docs if "Yahoo Finance Ticker" in doc})
+        if not tickers:
+            return jsonify({"gainers": [], "losers": [], "error": "No tickers found in DB"}), 200
+
+        # Download last 3 days to buffer for non-trading days
+        data = yf.download(tickers, period="3d", interval="1d", group_by='ticker', progress=False, threads=True)
+
+        results = []
+        for ticker in tickers:
+            try:
+                df = data[ticker].dropna()
+                if df.shape[0] < 2:
+                    continue
+                prev_close = df['Close'].iloc[-2]
+                last_close = df['Close'].iloc[-1]
+                pct_change = ((last_close - prev_close) / prev_close) * 100
+
+                # Only append if all values are valid numbers
+                if all(x is not None for x in [prev_close, last_close, pct_change]):
+                    results.append({
+                        'symbol': ticker,
+                        'prev_close': round(prev_close, 2),
+                        'last_close': round(last_close, 2),
+                        'pct_change': round(pct_change, 2)
+                    })
+            except Exception as e:
+                print(f"⚠️ Error processing {ticker}: {e}")
+
+        if not results:
+            return jsonify({"gainers": [], "losers": [], "error": "No price data available"}), 200
+
+        results_df = pd.DataFrame(results)
+        top_gainers = results_df.sort_values(by='pct_change', ascending=False).head(10).to_dict(orient='records')
+        top_losers = results_df.sort_values(by='pct_change', ascending=True).head(10).to_dict(orient='records')
+
+        return jsonify({"gainers": top_gainers, "losers": top_losers})
+    except Exception as e:
+        print("Market Movers API ERROR:", e)
+        return jsonify({"error": str(e)}), 500
+
+        results_df = pd.DataFrame(results)
+        top_gainers = results_df.sort_values(by='pct_change', ascending=False).head(5).to_dict(orient='records')
+        top_losers = results_df.sort_values(by='pct_change', ascending=True).head(5).to_dict(orient='records')
+
+        return jsonify({"gainers": top_gainers, "losers": top_losers})
+    except Exception as e:
+        print("Market Movers API ERROR:", e)
+        return jsonify({"error": str(e)}), 500
+    
+@app.route('/api/price')
+def get_price():
+    ticker = request.args.get('ticker')
+    if not ticker:
+        return jsonify({'error': 'No ticker provided'}), 400
+    try:
+        stock = yf.Ticker(ticker)
+        price = stock.history(period="1d")['Close'][-1]
+        return jsonify({'price': round(float(price), 2)})
+    except Exception as e:
+        return jsonify({'error': f'Could not fetch price for {ticker}'}), 500
+    
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('404.html'), 404
+
+
+@app.route('/api/auth/login', methods=['POST'])
+def auth_login():
+    data = request.get_json()
+    
+    # In a real app, you'd verify the Firebase token here
+    # token = data.get('token')
+    # user_data = verify_firebase_token(token)
+    # if not user_data:
+    #     return jsonify({'success': False, 'message': 'Invalid token'}), 401
+    
+    # Set session variable to mark user as logged in
+    session['user_logged_in'] = True
+    # You can store additional user info in session if needed
+    # session['user_id'] = data.get('uid')
+    # session['email'] = data.get('email')
+    
+    return jsonify({'success': True})
+
+# API route for logout
+@app.route('/api/auth/logout', methods=['POST'])
+def auth_logout():
+    # Clear session
+    session.pop('user_id', None)
+    session.clear()
+    redirect(url_for('home'))
+    return jsonify({'success': True})
+
+
+
+# Error handlers
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('404.html'), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    return render_template('500.html'), 500
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,13 @@
+Flask
+requests
+pymongo
+firebase-admin
+python-dotenv
+yfinance
+numpy
+pandas
+scikit-learn
+tensorflow
+gunicorn
+transformers
+torch

static/css/fundamentals.css

@@ -0,0 +1,1160 @@
+nav ul {
+    list-style: none;
+    display: flex;
+    background-color: #333;
+    padding: 0;
+  }
+  nav ul li {
+    margin: 0 10px;
+  }
+  nav ul li a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 15px;
+    display: block;
+  }
+  nav ul li a:hover {
+    background-color: #555;
+  }
+/* Example: Start of your CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+    color: #000;
+    transition: background-color 0.2s, color 0.2s;
+    opacity: 0;
+    transform: scale(1.05);
+    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+
+}
+body.loaded {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Transition Overlay (Expanding Circle Effect) */
+.transition-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #4a8fdf, #000); /* Green fading into black */
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.7s ease-in-out;
+    z-index: 9999;
+}
+
+/* Expand circle effect when navigating */
+.transition-overlay.active {
+    transform: translate(-50%, -50%) scale(30);
+}
+
+/* Smooth transition for links */
+a {
+    text-decoration: none;
+    color: #4a8fdf;
+    transition: color 0.3s ease-in-out;
+}
+
+a:hover {
+    color: #fff;
+}
+.dark-mode {
+    background-color: #131b2b;
+    color: #fff;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    background: #f4f2ec;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+.dark-mode .navbar {
+    background: #2c3e50;
+}
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.dark-mode .navbar a {
+    color: #fff;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+.dropdown-content a {
+    color: black;
+    padding: 10px 16px;
+    display: block;
+    text-decoration: none;
+}
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+.dark-mode .dropdown-content {
+    background-color: #2c3e50;
+}
+.dark-mode .dropdown-content a {
+    color: white;
+}
+.dark-mode .dropdown-content a:hover {
+    background-color: #374f66;
+}
+
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+    /* Use content swap via JS for moon icon */
+}
+
+/* Footer Styles */
+
+footer {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding: 40px 20px;
+    font-family: Arial, sans-serif;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-section {
+    flex: 1;
+    min-width: 200px;
+    margin-bottom: 20px;
+}
+
+.footer-section h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #4a8fdf;
+}
+
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-section ul li {
+    margin-bottom: 10px;
+}
+
+.footer-section ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: #4a8fdf;
+}
+
+.footer-section form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer-section input[type="email"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    width: 70%;
+}
+
+.footer-section button {
+    padding: 10px 20px;
+    background-color: #4a8fdf;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.footer-section button:hover {
+    background-color: #4a8fdf;
+}
+
+.footer-bottom {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #34495e;
+    font-size: 14px;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+.news-section {
+    padding: 60px 20px;
+    background-color: #fff;
+    margin: 40px auto;
+    max-width: 1200px;
+    border-radius: 15px;
+    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #f9f9f9, #ffffff);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    animation: glowing 1.5s infinite alternate;
+}
+
+.news-section h2 {
+    text-align: center;
+    margin-bottom: 40px;
+    font-size: 50px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    background: linear-gradient(90deg, #4a8fdf, #ff0000);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    font-family: 'Montserrat', sans-serif
+}
+
+.news-section h2::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 4px;
+    background-color: #ff0000;
+    border-radius: 2px;
+    animation: underline 2s infinite;
+}
+
+@keyframes underline {
+    0% {
+        width: 0;
+    }
+    50% {
+        width: 100px;
+    }
+    100% {
+        width: 0;
+    }
+}
+
+
+.news-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+}
+
+.news-article {
+    background-color: #fff;
+    padding: 25px;
+    border-radius: 15px;
+    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.news-article:hover {
+    transform: translateY(-10px);
+    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.15);
+}
+
+.news-article h3 {
+    margin: 0;
+    font-size: 22px;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.news-article p {
+    margin: 10px 0;
+    color: #666;
+    font-size: 15px;
+    line-height: 1.6;
+}
+
+.news-article a {
+    color: #4a8fdf;
+    text-decoration: none;
+    font-weight: bold;
+    display: inline-block;
+    margin-top: 15px;
+    transition: color 0.3s ease;
+}
+
+.news-article a:hover {
+    color: #4a8fdf;
+    text-decoration: underline;
+}
+
+/* Dark Mode Styles */
+.dark-mode .news-section {
+    background: linear-gradient(135deg, #2c3e50, #374d64);
+    border-color: rgba(44, 62, 80, 0.1);
+}
+
+.dark-mode .news-article {
+    background-color: #2c3e50;
+    border-color: rgba(255, 255, 255, 0.05);
+}
+
+.dark-mode .news-article h3 {
+    color: #ddd;
+}
+
+.dark-mode .news-article p {
+    color: #bbb;
+}
+
+.dark-mode .news-article a {
+    color: #4a8fdf;
+}
+
+.dark-mode .news-article a:hover {
+    color: #34495e;
+}
+
+@keyframes glowing {
+    0% {
+        box-shadow: 0 0 15px rgba(1, 90, 255,0.6);
+    }
+    100% {
+        box-shadow: 0 0 30px rgb(1, 90, 255), 0 0 50px rgba(74,143,223,0.8);
+    }
+}
+
+/* Loading Spinner */
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+}
+
+.loading-spinner::after {
+    content: "";
+    width: 40px;
+    height: 40px;
+    border: 4px solid #4a8fdf;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+    /* Container for the entire stock data section */
+.stock-data-container {
+width: 90%;
+max-width: 1200px;
+margin: 40px auto;
+padding: 20px;
+background-color: #fff;
+border-radius: 10px;
+box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+overflow: hidden;
+border: 2px solid #4a8fdf; /* Add a solid border */
+animation: glowBorder 2s infinite alternate; /* Apply glow animation */
+}
+
+/* Center the date range filter */
+.date-range-filter {
+display: flex;
+justify-content: center;
+align-items: center;
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.date-range-filter label {
+font-weight: bold;
+color: #333;
+}
+
+.date-range-filter input {
+padding: 8px;
+border: 1px solid #ddd;
+border-radius: 5px;
+}
+
+.date-range-filter button {
+padding: 8px 16px;
+background-color: #4a8fdf;
+color: white;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+.date-range-filter button:hover {
+background-color: #4a8fdf;
+}
+
+/* Search bar styling */
+#search-bar {
+padding: 8px;
+border: 1px solid #ddd;
+border-radius: 5px;
+width: 200px;
+}
+
+/* Animation for table */
+@keyframes slideInFromTop {
+0% {
+    transform: translateY(-100%);
+    opacity: 0;
+}
+100% {
+    transform: translateY(0);
+    opacity: 1;
+}
+}
+
+/* Table styling */
+table {
+width: 100%;
+border-collapse: collapse;
+margin-top: 20px;
+animation: slideInFromTop 0.8s ease-out forwards;
+}
+
+th, td {
+padding: 10px;
+text-align: center;
+border: 1px solid #ddd;
+}
+
+th {
+background-color: #4a8fdf;
+color: white;
+}
+
+tr:nth-child(even) {
+background-color: #f9f9f9;
+}
+
+tr:hover {
+background-color: #f1f1f1;
+}
+
+/* Dark mode adjustments */
+.dark-mode .stock-data-container {
+background-color: #131b2b;
+color: #fff;
+border-color: #4a8fdf; /* Keep the border color consistent */
+}
+
+.dark-mode .date-range-filter label {
+color: #ddd;
+}
+
+.dark-mode .date-range-filter input {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+
+.dark-mode .date-range-filter button {
+background-color: #4a8fdf;
+}
+
+.dark-mode .date-range-filter button:hover {
+background-color: #4a8fdf;
+}
+.date-range-filter input[type="date"] {
+    padding: 12px 15px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #f4f2ec;
+    color: #000;
+    width: 250px;
+    height: 44px; /* Optional: for consistent height with dropdown */
+    margin-right: 10px;
+    box-sizing: border-box;
+    transition: border 0.3s, background-color 0.3s;
+}
+
+.date-range-filter input[type="date"]:focus {
+    border-color: #4a8fdf;
+    outline: none;
+}
+
+.dark-mode .date-range-filter input[type="date"] {
+    background-color: #243342;
+    color: #fff;
+    border-color: #555;
+}
+.dark-mode #search-bar {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+
+.dark-mode table {
+border-color: #243342;
+}
+
+.dark-mode th {
+background-color: #2c3e50;
+}
+
+.dark-mode tr:nth-child(even) {
+background-color: #243342;
+}
+
+.dark-mode tr:hover {
+background-color: #243342;
+}
+
+/* Glow effect for the container */
+@keyframes glowBorder {
+0% {
+    box-shadow: 0 0 10px rgba(74,143,223,0.6);
+}
+50% {
+    box-shadow: 0 0 20px rgba(74,143,223,0.8), 0 0 30px rgba(74,143,223,0.6);
+}
+100% {
+    box-shadow: 0 0 10px rgba(74,143,223,0.6);
+}
+}
+
+.stock-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+h1 {
+    text-align: center;
+    color: #333;
+}
+.ticker-input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+.fetch-btn {
+    background-color: #4a8fdf;
+    color: rgb(0, 0, 0);
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+.fetch-btn:hover {
+    background-color: #4a8fdf;
+}
+.ratios-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+.ratios-table th, .ratios-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+.ratios-table th {
+    background-color: #000000;
+}
+.ratios-table tr:nth-child(even) {
+    background-color: #000000;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(76, 175, 80, 0.3);
+    border-radius: 50%;
+    border-top-color: #4a8fdf;
+    animation: spin 1s ease-in-out infinite;
+    margin-right: 10px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.ratios-table td {
+    vertical-align: middle;
+}
+
+.chart-container {
+    width: 100%;
+    height: 400px;
+    max-width: 100%;
+    min-width: 200px;
+    margin: 0 auto 30px auto;
+    padding: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+}
+#stockChart {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    margin: 0 auto;
+}
+.chart-title {
+text-align: center;
+margin: 20px 0;
+font-size: 1.5rem;
+color: #333;
+}
+
+.dark-mode .chart-title {
+color: #3a4b5c;
+}
+
+.tab-container {
+display: flex;
+margin-bottom: 20px;
+}
+
+.tab {
+padding: 10px 20px;
+cursor: pointer;
+background-color: #f1f1f1;
+border: none;
+margin-right: 5px;
+border-radius: 5px 5px 0 0;
+}
+
+.tab.active {
+background-color: #4a8fdf;
+color: white;
+}
+
+.dark-mode .tab {
+background-color: #2c3e50;
+color: #fff;
+}
+
+.dark-mode .tab.active {
+background-color: #4a8fdf;
+}
+
+/* Fundamentals Section Styles */
+.fundamentals-container {
+max-width: 1200px;
+margin: 40px auto;
+padding: 30px;
+background-color: #fff;
+border-radius: 15px;
+box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+border: 2px solid #4a8fdf;
+animation: glowBorder 2s infinite alternate;
+}
+
+.fundamentals-container h2 {
+text-align: center;
+margin-bottom: 30px;
+color: #333;
+font-size: 28px;
+}
+
+.fundamentals-tabs {
+display: flex;
+justify-content: center;
+margin-bottom: 30px;
+border-bottom: 1px solid #ddd;
+}
+
+.tab-button {
+padding: 12px 24px;
+background: none;
+border: none;
+cursor: pointer;
+font-size: 16px;
+font-weight: bold;
+color: #666;
+position: relative;
+transition: all 0.3s ease;
+}
+
+.tab-button.active {
+color: #4a8fdf;
+}@media (max-width: 700px) {
+    .chart-container {
+        height: 250px;
+    }
+}
+
+.tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: #4a8fdf;
+}
+
+.tab-content {
+display: none;
+}
+
+.fundamentals-grid {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+gap: 20px;
+}
+
+.fundamental-card {
+background-color: #f9f9f9;
+padding: 20px;
+border-radius: 10px;
+box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.fundamental-card h3 {
+margin-top: 0;
+margin-bottom: 15px;
+color: #333;
+font-size: 18px;
+border-bottom: 1px solid #ddd;
+padding-bottom: 10px;
+}
+
+.ratio-item {
+display: flex;
+justify-content: space-between;
+margin-bottom: 10px;
+padding: 8px 0;
+border-bottom: 1px dashed #eee;
+}
+
+.ratio-name {
+font-weight: 600;
+color: #555;
+}
+
+.ratio-value {
+font-weight: bold;
+color: #333;
+}
+
+.chart-container, .comparison-chart-container {
+height: 400px;
+margin-top: 20px;
+}
+
+.comparison-controls {
+display: flex;
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.comparison-controls input {
+padding: 8px 12px;
+border: 1px solid #ddd;
+border-radius: 4px;
+flex-grow: 1;
+}
+
+.comparison-controls button {
+padding: 8px 16px;
+background-color: #4a8fdf;
+color: white;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+}
+
+#peer-list {
+margin-bottom: 20px;
+}
+
+.peer-item {
+display: inline-block;
+background-color: #f0f0f0;
+padding: 5px 10px;
+margin-right: 10px;
+margin-bottom: 10px;
+border-radius: 4px;
+}
+
+/* Dark mode styles */
+.dark-mode .fundamentals-container {
+background-color: #131b2b;
+color: #fff;
+}
+
+.dark-mode .fundamentals-container h2 {
+color: #fff;
+}
+
+.dark-mode .fundamental-card {
+background-color: #243342;
+}
+
+.dark-mode .fundamental-card h3 {
+color: #fff;
+border-bottom-color: #2c3e50;
+}
+
+.dark-mode .ratio-name {
+color: #bbb;
+}
+
+.dark-mode .ratio-value {
+color: #fff;
+}
+
+.dark-mode .tab-button {
+color: #bbb;
+}
+
+.dark-mode .tab-button.active {
+color: #4a8fdf;
+}
+
+.dark-mode .comparison-controls input {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+
+/* White Glowing Curve Effect */
+.shiny-curve {
+position: fixed;
+bottom: 0;
+left: 0;
+width: 100%;
+height: 80px; /* Reduced height for subtlety */
+pointer-events: none;
+z-index: 100;
+display: none;
+overflow: hidden;
+}
+
+.dark-mode .shiny-curve {
+display: block;
+}
+
+.shiny-curve::before {
+content: '';
+position: absolute;
+bottom: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background: linear-gradient(to top, 
+    rgba(10, 10, 10, 0.7) 0%, 
+    rgba(255, 255, 255, 0.5) 50%, 
+    rgba(255, 255, 255, 0) 100%);
+-webkit-mask-image: radial-gradient(ellipse 80% 60px at 50% 100%, black 60%, transparent 65%);
+mask-image: radial-gradient(ellipse 80% 60px at 50% 100%, black 60%, transparent 65%);
+animation: white-glow 3s infinite alternate;
+}
+
+.shiny-curve::after {
+content: '';
+position: absolute;
+bottom: 15px;
+left: 0;
+width: 100%;
+height: 1px;
+background: rgba(255, 255, 255, 0.8);
+border-radius: 100%;
+filter: blur(15px);
+animation: white-line-glow 3s infinite alternate;
+}
+
+@keyframes white-glow {
+0% {
+    opacity: 0.7;
+    background: linear-gradient(to top, 
+        rgba(10, 10, 10, 0.7) 0%, 
+        rgba(255, 255, 255, 0.4) 50%, 
+        rgba(255, 255, 255, 0) 100%);
+}
+100% {
+    opacity: 1;
+    background: linear-gradient(to top, 
+        rgba(10, 10, 10, 0.7) 0%, 
+        rgba(255, 255, 255, 0.6) 60%, 
+        rgba(255, 255, 255, 0) 100%);
+}
+}
+
+@keyframes white-line-glow {
+0% {
+    opacity: 0.6;
+    filter: blur(12px);
+}
+100% {
+    opacity: 0.9;
+    filter: blur(18px);
+}
+}
+
+.fundamentals-search {
+display: flex;
+justify-content: center;
+gap: 10px;
+margin-bottom: 30px;
+}
+
+.fundamentals-search input {
+padding: 10px 15px;
+border: 1px solid #ddd;
+border-radius: 5px;
+width: 300px;
+font-size: 16px;
+}
+
+.fundamentals-search button {
+padding: 10px 20px;
+background-color: #4a8fdf;
+color: white;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+.fundamentals-search button:hover {
+background-color: #4a8fdf;
+}
+
+.dark-mode .fundamentals-search input {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+#fundamentals-symbol,
+#fundamentals-search-bar.styled-dropdown {
+    padding: 12px 15px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #fff;    /* <-- Make it pure white in light mode */
+    color: #000;
+    transition: border 0.3s, background-color 0.3s;
+    width: 250px;
+    margin-right: 10px;
+}
+
+#fundamentals-symbol,
+#fundamentals-search-bar.styled-dropdown:focus {
+    border-color: #4a8fdf;
+    outline: none;
+}
+
+.dark-mode #fundamentals-symbol,
+.dark-mode #fundamentals-search-bar.styled-dropdown {
+    background-color: #243342;
+    color: #fff;
+    border-color: #555;
+}
+#fetch {
+    padding: 10px 20px;
+    background-color: #4a8fdf;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+    margin-left: 10px; /* Optional: space between inputs and button */
+}
+
+#fetch:hover {
+    background-color: #357abd;
+}
+
+.dark-mode #fetch {
+    background-color: #4a8fdf;
+    color: #fff;
+    border-color: #555;
+}
+.chart-container > div,
+#stockChart,
+#fundamentals-chart,
+#risk-metrics-chart,
+#rolling-vol-chart,
+#beta-gauge-chart {
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 200px;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+@media (max-width: 700px) {
+    .chart-container {
+        height: 250px;
+    }
+}
+/* Make the stock data table scrollable after 400px */
+#stock-data-table {
+    max-height: 400px;
+    overflow-y: auto;
+    display: block;
+}
+/* Light mode scrollbar */
+#stock-data-table {
+    scrollbar-width: thin;
+    scrollbar-color: #4a8fdf #e0e7ef;
+}
+
+/* Chrome, Edge, Safari */
+#stock-data-table::-webkit-scrollbar {
+    width: 10px;
+    background: #e0e7ef;
+}
+#stock-data-table::-webkit-scrollbar-thumb {
+    background: #4a8fdf;
+    border-radius: 8px;
+}
+#stock-data-table::-webkit-scrollbar-thumb:hover {
+    background: #357abd;
+}
+
+/* Dark mode scrollbar */
+.dark-mode #stock-data-table {
+    scrollbar-color: #4a8fdf #243342;
+}
+.dark-mode #stock-data-table::-webkit-scrollbar {
+    background: #243342;
+}
+.dark-mode #stock-data-table::-webkit-scrollbar-thumb {
+    background: #4a8fdf;
+}
+.dark-mode #stock-data-table::-webkit-scrollbar-thumb:hover {
+    background: #357abd;
+}
+/* Light mode date input */
+input[type="date"] {
+    background-color: #fff;
+    color: #000;
+    border: 2px solid #4a8fdf;
+}
+
+/* Dark mode date input */
+.dark-mode input[type="date"] {
+    background-color: #243342;
+    color: #fff;
+    border: 2px solid #4a8fdf;
+}
+
+/* Calendar icon color for Chrome */
+input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: invert(36%) sepia(91%) saturate(749%) hue-rotate(183deg) brightness(95%) contrast(92%);
+    /* This makes the icon blue-ish to match #4a8fdf */
+}
+
+/* Calendar icon color for dark mode */
+.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: invert(70%) sepia(13%) saturate(749%) hue-rotate(183deg) brightness(95%) contrast(92%);
+}
+.custom-introjs-tooltip {
+  font-size: 1.05rem;
+  color: #222;
+}
+.introjs-tooltip {
+  z-index: 11000 !important;
+}

static/css/legal.css

@@ -0,0 +1,140 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+    color: #222;
+    margin: 0;
+    transition: background 0.3s, color 0.3s;
+}
+.dark-mode {
+    background-color: #131b2b;
+    color: #fff;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    background: #f4f2ec;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    font-size: 18px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+.dark-mode .navbar {
+    background: #243342;
+}
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+.dark-mode .navbar a {
+    color: #fff;
+}
+.legal-container {
+    max-width: 800px;
+    margin: 60px auto 40px auto;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 0 20px #4a8fdf33;
+    padding: 40px 30px;
+    animation: fadeIn 1s;
+}
+.dark-mode .legal-container {
+    background: #1a2436;
+    color: #fff;
+    box-shadow: 0 0 30px #4a8fdf, 0 0 60px #4a8fdf33;
+}
+.legal-container h1 {
+    color: #4a8fdf;
+    margin-bottom: 20px;
+}
+.legal-container h2 {
+    color: #007bff;
+    margin-top: 30px;
+}
+.legal-container ul {
+    margin-left: 20px;
+    margin-bottom: 20px;
+}
+.legal-container a {
+    color: #4a8fdf;
+    text-decoration: underline;
+}
+.legal-container a:hover {
+    color: #007bff;
+}
+footer {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding: 30px 10px 10px 10px;
+    text-align: center;
+    font-size: 14px;
+    margin-top: 40px;
+}
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    margin-left: 20px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600;
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px);}
+    to { opacity: 1; transform: translateY(0);}
+}
+@media (max-width: 900px) {
+    .legal-container {
+        padding: 20px 5vw;
+    }
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

static/css/login.css

@@ -0,0 +1,322 @@
+/* Global Styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f2ec;
+    color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.dark-mode {
+    background-color: #1c2733;
+    color: #fff;
+}
+
+/* Container */
+.container {
+    display: flex;
+    width: 80%;
+    max-width: 1000px;
+    background: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .container {
+    background: #243342;
+}
+
+/* Left Section with Animation */
+.left-section {
+    width: 50%;
+    background: url('../images/bg.png') no-repeat center center/cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 40px;
+    text-align: center;
+    animation: dropDown 1s ease-out;
+}
+
+/* Drop Down Animation */
+@keyframes dropDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Right Section */
+.right-section {
+    width: 50%;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Title */
+.title {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #4a8fdf;
+}
+
+/* Subtitle */
+.subtitle a {
+    color: #4a8fdf;
+    text-decoration: none;
+}
+
+/* Form Styles */
+form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.name-fields {
+    display: flex;
+    gap: 10px;
+}
+
+/* Input Fields */
+input {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid #ddd;
+    background: #fff;
+    color: #000;
+    transition: border 0.3s, background 0.3s;
+}
+
+input:focus {
+    border-color: #4a8fdf;
+}
+
+.dark-mode input {
+    background: #2c3e50;
+    color: #fff;
+    border: 2px solid #4a8fdf;
+}
+
+.dark-mode input:focus {
+  background: #2c3e50; /* Keep dark background when focused in dark mode */
+}
+
+
+/* Submit Button */
+.submit-btn {
+    background: #4a8fdf;
+    color: #377ddf;
+    padding: 12px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.3s;
+}
+
+.submit-btn:hover {
+    background: #377ddf;
+}
+
+/* Separator */
+.separator {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+    width: 100%;
+}
+
+.separator .line {
+    flex: 1;
+    height: 1px;
+    background: #aaa;
+}
+
+.separator span {
+    padding: 0 10px;
+    color: #888;
+}
+
+/* Social Box */
+.social-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f0f0f0;
+    padding: 15px;
+    border-radius: 10px;
+    width: 100%;
+}
+
+.dark-mode .social-box {
+    background: #2c3e50;
+}
+
+/* Social Buttons */
+.social-buttons {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+}
+
+.social-buttons button {
+    background: transparent;
+    border: 1px solid #4a8fdf;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    color: #4a8fdf;
+    font-size: 14px;
+    flex: 1;
+    transition: background 0.3s;
+}
+
+.social-buttons button:hover {
+    background: rgba(74, 143, 223, 0.1);
+}
+
+.dark-mode .social-buttons button {
+    color: #fff;
+    border-color: #4a8fdf;
+}
+
+.dark-mode .social-buttons button:hover {
+    background: rgba(74, 143, 223, 0.2);
+}
+
+/* Message Styling */
+.error-message {
+    color: #e74c3c;
+    font-size: 14px;
+    margin-top: 10px;
+    text-align: center;
+}
+
+.success-message {
+    color: #0FFF50;
+    font-size: 14px;
+    margin-top: 10px;
+    text-align: center;
+}
+
+/* Toggle Link */
+.login-toggle {
+    margin-top: 20px;
+    color: #4a8fdf;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+/* Spinner */
+.spinner {
+    border: 3px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 3px solid #4a8fdf;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+    display: none;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+        width: 90%;
+    }
+    .left-section {
+        display: none;
+    }
+    .right-section {
+        width: 100%;
+    }
+}
+
+/* Toggle Switch */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+  }
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 25px;
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 4px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+  input:checked + .slider {
+    background-color: #4a8fdf;
+  }
+  input:checked + .slider:before {
+    transform: translateX(24px);
+  }
+  
+input:-webkit-autofill,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s;
+  color: inherit !important;
+}
+
+input:-webkit-autofill {
+  -webkit-text-fill-color: #000000 !important;
+  caret-color: #fff;
+  box-shadow: 0 0 0px 1000px #fcfeff inset !important;
+}
+.dark-mode input:-webkit-autofill {
+  -webkit-text-fill-color: #fff !important;
+  caret-color: #fff;
+  box-shadow: 0 0 0px 1000px #4c6c8b inset !important;
+}

static/css/movers.css

@@ -0,0 +1,964 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Montserrat:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+nav ul {
+    list-style: none;
+    display: flex;
+    background-color: #333;
+    padding: 0;
+  }
+  nav ul li {
+    margin: 0 10px;
+  }
+  nav ul li a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 15px;
+    display: block;
+  }
+  nav ul li a:hover {
+    background-color: #555;
+  }
+/* Example: Start of your CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+    color: #000;
+    transition: background-color 0.3s, color 0.3s;
+    opacity: 0;
+    transform: scale(1.05);
+    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+}
+body.loaded {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Transition Overlay (Expanding Circle Effect) */
+.transition-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #4a8fdf, #000); /* Green fading into black */
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.7s ease-in-out;
+    z-index: 9999;
+}
+
+/* Expand circle effect when navigating */
+.transition-overlay.active {
+    transform: translate(-50%, -50%) scale(30);
+}
+
+
+/* Smooth transition for links */
+a {
+    text-decoration: none;
+    color: #4a8fdf;
+    transition: color 0.3s ease-in-out;
+}
+
+a:hover {
+    color: #fff;
+}
+.dark-mode {
+    background-color: #131b2b;
+    color: #fff;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    background: #f4f2ec;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+.dark-mode .navbar {
+    background: #2c3e50;
+}
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.dark-mode .navbar a {
+    color: #fff;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+.dropdown-content a {
+    color: black;
+    padding: 10px 16px;
+    display: block;
+    text-decoration: none;
+}
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+.dark-mode .dropdown-content {
+    background-color: #2c3e50;
+}
+.dark-mode .dropdown-content a {
+    color: white;
+}
+.dark-mode .dropdown-content a:hover {
+    background-color: #374f66;
+}
+
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+    /* Use content swap via JS for moon icon */
+}
+
+.stock-ticker-indian {
+    background: #f8f9fa;
+    color: #222;
+    padding: 10px 0;
+    height: 45px;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 1.05rem;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+
+.ticker-content-indian {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    animation: scroll-left 25s linear infinite;
+}
+.ticker-label {
+    font-weight: bold;
+    margin-right: 8px;
+}
+.gainers-label { color: #22c55e; }
+.losers-label { color: #ef4444; }
+.ticker-item { margin-right: 18px; }
+.ticker-sep { color: #888; margin: 0 8px; }
+.up {
+    color: #22c55e !important;
+    font-weight: bold;
+    margin-left: 2px;
+}
+.gainer-price {
+    color: #22c55e !important;
+    font-weight: bold;
+    margin-left: 2px;
+}
+.down {
+    color: #ef4444 !important;
+    font-weight: bold;
+    margin-left: 2px;
+}
+.loser-price {
+    color: #ef4444 !important;
+    font-weight: bold;
+    margin-left: 2px;
+}
+/* Dark mode styles */
+body.dark-mode .stock-ticker-indian {
+    background: #2c3e50;
+    color: #e0e7ef;
+    border-top: 0.3px solid #5c7a99;
+    border-bottom: 0.3px solid #5c7a99;
+}
+body.dark-mode .ticker-content-indian span {
+    color: #e0e7ef;
+}
+body.dark-mode .ticker-label { color: #fff; }
+body.dark-mode .gainers-label { color: #22c55e; }
+body.dark-mode .losers-label { color: #ef4444; }
+body.dark-mode .ticker-sep { color: #aaa; }
+
+.gainers-label {
+    color: #22c55e !important;   /* Bright green */
+    font-weight: bold;
+}
+
+.losers-label {
+    color: #ef4444 !important;   /* Bright red */
+    font-weight: bold;
+}
+
+/* For dark mode, keep the same colors for labels */
+body.dark-mode .gainers-label {
+    color: #22c55e !important;
+}
+body.dark-mode .losers-label {
+    color: #ef4444 !important;
+}
+/* Smooth scrolling effect */
+@keyframes scroll-left {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+/* Main Content */
+.video-container {
+    position: relative;
+    width: 100%;
+    height: 50vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#bgVideo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+.content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 50px 20px;
+    color: #fff;
+    border-radius: 12px;
+    font-family: 'Poppins', sans-serif;
+    text-align: center;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+}
+
+/* Initially, set h1 position at the center */
+.content h1 {
+    font-size: 3em;
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
+    opacity: 0;
+    transform: translateY(0); /* Keep centered, no off-center movement */
+    animation: fadeInUp 1.5s ease-out forwards;
+}
+
+/* Smooth fade-in effect */
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: scale(0.8); /* Slightly smaller size */
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1); /* Normal size */
+    }
+}
+
+        
+/* Glowing effect for the heading */
+@keyframes glowText {
+    0% {
+        text-shadow: 0px 0px 10px rgba(74, 143, 223, 0.6);
+    }
+    100% {
+        text-shadow: 0px 0px 25px rgba(74, 143, 223, 1), 0px 0px 35px rgba(74, 143, 223, 0.8);
+    }
+}
+
+/* Fade-in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dark Mode */
+.dark-mode .content {
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
+    color: #ffffff;
+}
+
+/* Market Movers Section */
+.market-movers {
+    width: 80%;
+    margin: 50px auto;
+    text-align: center;
+    padding: 40px;
+    background: #fff;
+    border: 2px solid #4a8fdf; /* Add a solid border */
+    border-radius: 8px;
+    box-shadow: 0 0 15px rgba(74, 143, 223, 0.6); /* Green glow */
+    animation: glowBorder 1.5s infinite alternate;
+}
+
+.movers-container {
+    display: flex;
+    justify-content: space-around;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.movers-section {
+    width: 45%;
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.movers-section h3 {
+    font-size: 24px;
+    margin-bottom: 15px;
+    color: #4a8fdf;
+}
+
+.movers-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.movers-section ul li {
+    font-size: 16px;
+    padding: 8px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.movers-section ul li:last-child {
+    border-bottom: none;
+}
+
+.up {
+    color: #0FFF50;
+    font-weight: bold;
+}
+
+.down {
+    color: red;
+    font-weight: bold;
+}
+
+/* Dark Mode Adjustments */
+.dark-mode .market-movers {
+    background: #131b2b;
+    color: #fff;
+    box-shadow: 0 0 15px rgba(74, 143, 223, 0.6); /* Neon green glow */
+}
+
+.dark-mode .movers-section {
+    background: #2c3e50;
+    color: #fff;
+}
+
+.dark-mode .movers-section ul li {
+    border-bottom: 1px solid #555;
+}
+
+.dark-mode .stock-ticker-indian {
+    overflow: hidden;
+    white-space: nowrap;
+    background: #2c3e50;
+    padding: 10px 0;
+    position: relative;
+    width: 100%;
+    margin-top: 60px; /* Space below fixed navbar */
+    border-top: 0.3px solid #5c7a99;
+    border-bottom: 0.3px solid #5c7a99;
+}
+ 
+/* Footer Styles */
+footer {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding: 40px 20px;
+    font-family: Arial, sans-serif;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-section {
+    flex: 1;
+    min-width: 200px;
+    margin-bottom: 20px;
+}
+
+.footer-section h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #4a8fdf;
+}
+
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-section ul li {
+    margin-bottom: 10px;
+}
+
+.footer-section ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: #4a8fdf;
+}
+
+.footer-section form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer-section input[type="email"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    width: 70%;
+}
+
+.footer-section button {
+    padding: 10px 20px;
+    background-color: #4a8fdf;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.footer-section button:hover {
+    background-color: #4a8fdf;
+}
+
+.footer-bottom {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #34495e;
+    font-size: 14px;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+/* Container for the entire stock data section */
+.stock-data-container {
+width: 90%;
+max-width: 1200px;
+margin: 40px auto;
+padding: 20px;
+background-color: #fff;
+border-radius: 10px;
+box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+overflow: hidden;
+border: 2px solid #4a8fdf; /* Add a solid border */
+animation: glowBorder 2s infinite alternate; /* Apply glow animation */
+}
+
+/* Center the date range filter */
+.date-range-filter {
+display: flex;
+justify-content: center;
+align-items: center;
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.date-range-filter label {
+font-weight: bold;
+color: #333;
+}
+
+.date-range-filter input {
+padding: 8px;
+border: 1px solid #ddd;
+border-radius: 5px;
+}
+
+.date-range-filter button {
+padding: 8px 16px;
+background-color: #4a8fdf;
+color: white;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+.date-range-filter button:hover {
+background-color: #4a8fdf;
+}
+
+/* Search bar styling */
+#search-bar {
+padding: 8px;
+border: 1px solid #ddd;
+border-radius: 5px;
+width: 200px;
+}
+
+/* Animation for table */
+@keyframes slideInFromTop {
+0% {
+    transform: translateY(-100%);
+    opacity: 0;
+}
+100% {
+    transform: translateY(0);
+    opacity: 1;
+}
+}
+
+/* Table styling */
+table {
+width: 100%;
+border-collapse: collapse;
+margin-top: 20px;
+animation: slideInFromTop 0.8s ease-out forwards;
+}
+
+th, td {
+padding: 10px;
+text-align: center;
+border: 1px solid #ddd;
+}
+
+th {
+background-color: #4a8fdf;
+color: white;
+}
+
+tr:nth-child(even) {
+background-color: #f9f9f9;
+}
+
+tr:hover {
+background-color: #f1f1f1;
+}
+
+/* Dark mode adjustments */
+.dark-mode .stock-data-container {
+background-color: #131b2b;
+color: #fff;
+border-color: #4a8fdf; /* Keep the border color consistent */
+}
+
+.dark-mode .date-range-filter label {
+color: #ddd;
+}
+
+.dark-mode .date-range-filter input {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+
+.dark-mode .date-range-filter button {
+background-color: #4a8fdf;
+}
+
+.dark-mode .date-range-filter button:hover {
+background-color: #4a8fdf;
+}
+
+.dark-mode #search-bar {
+background-color: #243342;
+color: #fff;
+border-color: #555;
+}
+
+.dark-mode table {
+border-color: #555;
+}
+
+.dark-mode th {
+background-color: #243342;
+}
+
+.dark-mode tr:nth-child(even) {
+background-color: #243342;
+}
+
+.dark-mode tr:hover {
+background-color: #555;
+}
+
+/* Glow effect for the container */
+@keyframes glowBorder {
+0% {
+    box-shadow: 0 0 10px rgba(74, 143, 223, 0.6);
+}
+50% {
+    box-shadow: 0 0 20px rgba(74, 143, 223, 0.8), 0 0 30px rgba(74, 143, 223, 0.6);
+}
+100% {
+    box-shadow: 0 0 10px rgba(74, 143, 223, 0.6);
+}
+}
+/* Apply the same animation to both stock-data-container and market-movers */
+.stock-data-container,
+.market-movers {
+    animation: glowBorder 2s infinite alternate; /* Apply the same glow animation */
+}
+
+.indian-head {
+text-align: center;
+font-size: 28px;
+font-weight: 700;
+color: #4a8fdf;
+margin-bottom: 20px;
+text-transform: uppercase;
+letter-spacing: 2px;
+position: relative;
+}
+
+.indian-head::after {
+content: "";
+position: absolute;
+bottom: -10px;
+left: 50%;
+transform: translateX(-50%);
+width: 60px;
+height: 4px;
+background-color: #4a8fdf;
+border-radius: 2px;
+}
+
+/* Toggle Buttons */
+.toggle-buttons {
+display: flex;
+justify-content: center;
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.toggle-buttons button {
+padding: 10px 20px;
+font-size: 16px;
+border: none;
+border-radius: 5px;
+cursor: pointer;
+background-color: #4a8fdf;
+color: white;
+transition: background-color 0.3s ease;
+}
+
+.toggle-buttons button:hover {
+background-color: #4a8fdf;
+}
+
+.toggle-buttons button.active {
+background-color: #4a8fdf;
+}
+
+/* Container styling */
+.stock-data-container {
+    max-width: 700px;
+    margin: 40px auto;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+    padding: 32px 24px 24px 24px;
+}
+
+.stock-data-container h2 {
+    margin-bottom: 24px;
+    color: #1976d2;
+    font-weight: 600;
+    text-align: center;
+}
+
+.date-range-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 24px;
+    justify-content: center;
+}
+
+.date-range-filter label {
+    font-weight: 500;
+    color: #333;
+}
+
+.date-range-filter input[type="date"],
+.date-range-filter select {
+    padding: 6px 12px;
+    border: 1px solid #bdbdbd;
+    border-radius: 6px;
+    font-size: 1rem;
+    background: #fafafa;
+    color: #333;
+    min-width: 160px;
+    transition: border-color 0.2s;
+}
+
+.date-range-filter input[type="date"]:focus,
+.date-range-filter select:focus {
+    border-color: #1976d2;
+    outline: none;
+}
+
+.date-range-filter button {
+    padding: 8px 18px;
+    background: #1976d2;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.date-range-filter button:hover {
+    background: #1565c0;
+}
+
+#message-container {
+    margin: 16px 0;
+    font-size: 1rem;
+    text-align: center;
+    border-radius: 6px;
+    padding: 10px;
+    display: none;
+}
+
+.chart-container {
+    margin-top: 24px;
+    background: #f5f7fa;
+    border-radius: 10px;
+    padding: 18px;
+    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
+}
+
+@media (max-width: 600px) {
+    .stock-data-container {
+        padding: 16px 4px;
+    }
+    .date-range-filter {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .chart-container {
+        padding: 6px;
+    }
+}
+
+.favorites-container {
+    max-width: 700px;
+    margin: 40px auto;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+    animation: tableGlow 2s infinite alternate;
+    padding: 32px 24px 24px 24px;
+}
+.dark-mode .favorites-container {
+    background: #131b2b;
+    color: #fff;
+}
+#favorites-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+#favorites-table th, #favorites-table td {
+    padding: 10px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+#favorites-table th {
+    background-color: #4a8fdf;
+    color: white;
+}
+#favorites-table tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+.dark-mode #favorites-table th {
+    background-color: #243342;
+}
+.dark-mode #favorites-table tr:nth-child(even) {
+    background-color: #243342;
+}
+.bookmark-btn {
+    background: none;
+    border: none;
+    color: #fbbf24;
+    font-size: 1.3em;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+.bookmark-btn.bookmarked {
+    color: #f59e42;
+    font-weight: bold;
+}
+.bookmark-btn:hover {
+    color: #f59e42;
+}
+/* Glowing animation for the favorites table */
+@keyframes tableGlow {
+    0% {
+        box-shadow: 0 0 10px 0 #4a8fdf, 0 0 0px 0 #4a8fdf;
+    }
+    50% {
+        box-shadow: 0 0 24px 4px #4a8fdf, 0 0 12px 2px #1976d2;
+    }
+    100% {
+        box-shadow: 0 0 10px 0 #4a8fdf, 0 0 0px 0 #4a8fdf;
+    }
+}
+
+.favorites-table-wrapper {
+    max-height: 500px;
+    overflow-y: auto;
+    border-radius: 15px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+}
+
+/* Custom scrollbar for light mode */
+.favorites-table-wrapper::-webkit-scrollbar {
+    width: 10px;
+}
+.favorites-table-wrapper::-webkit-scrollbar-thumb {
+    background: #4a8fdf;
+    border-radius: 8px;
+}
+.favorites-table-wrapper::-webkit-scrollbar-track {
+    background: #e0e7ef;
+    border-radius: 8px;
+}
+
+/* Custom scrollbar for dark mode */
+body.dark-mode .favorites-table-wrapper::-webkit-scrollbar {
+    width: 10px;
+}
+body.dark-mode .favorites-table-wrapper::-webkit-scrollbar-thumb {
+    background: #243342;
+    border-radius: 8px;
+    box-shadow: 0 0 8px #4a8fdf;
+}
+body.dark-mode .favorites-table-wrapper::-webkit-scrollbar-track {
+    background: #1e2a38;
+    border-radius: 8px;
+}
+
+/* Optional: Firefox scrollbar styling */
+.favorites-table-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: #4a8fdf #e0e7ef;
+}
+body.dark-mode .favorites-table-wrapper {
+    scrollbar-color: #243342 #1e2a38;
+}
+.custom-introjs-tooltip {
+  font-size: 1.05rem;
+  color: #222;
+}
+.introjs-tooltip {
+  z-index: 11000 !important;
+}

static/css/news.css

@@ -0,0 +1,480 @@
+nav ul {
+    list-style: none;
+    display: flex;
+    background-color: #333;
+    padding: 0;
+  }
+  nav ul li {
+    margin: 0 10px;
+  }
+  nav ul li a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 15px;
+    display: block;
+  }
+  nav ul li a:hover {
+    background-color: #555;
+  }
+/* Example: Start of your CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+    color: #000;
+    transition: background-color 0.2s, color 0.2s;
+    opacity: 0;
+    transform: scale(1.05);
+    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+
+}
+body.loaded {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Transition Overlay (Expanding Circle Effect) */
+.transition-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #4a8fdf, #000); /* Green fading into black */
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.7s ease-in-out;
+    z-index: 9999;
+}
+
+/* Expand circle effect when navigating */
+.transition-overlay.active {
+    transform: translate(-50%, -50%) scale(30);
+}
+
+/* Smooth transition for links */
+a {
+    text-decoration: none;
+    color: #4a8fdf;
+    transition: color 0.3s ease-in-out;
+}
+
+a:hover {
+    color: #fff;
+}
+.dark-mode {
+    background-color: #131b2b;
+    color: #fff;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    background: #f4f2ec;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+.dark-mode .navbar {
+    background: #2c3e50;
+}
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.dark-mode .navbar a {
+    color: #fff;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+.dropdown-content a {
+    color: black;
+    padding: 10px 16px;
+    display: block;
+    text-decoration: none;
+}
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+.dark-mode .dropdown-content {
+    background-color: #2c3e50;
+}
+.dark-mode .dropdown-content a {
+    color: white;
+}
+.dark-mode .dropdown-content a:hover {
+    background-color: #374f66;
+}
+
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+    /* Use content swap via JS for moon icon */
+}
+
+/* Footer Styles */
+
+footer {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding: 40px 20px;
+    font-family: Arial, sans-serif;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-section {
+    flex: 1;
+    min-width: 200px;
+    margin-bottom: 20px;
+}
+
+.footer-section h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #4a8fdf;
+}
+
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-section ul li {
+    margin-bottom: 10px;
+}
+
+.footer-section ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: #4a8fdf;
+}
+
+.footer-section form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer-section input[type="email"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    width: 70%;
+}
+
+.footer-section button {
+    padding: 10px 20px;
+    background-color: #4a8fdf;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.footer-section button:hover {
+    background-color: #34495e;
+}
+
+.footer-bottom {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #34495e;
+    font-size: 14px;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+.news-section {
+    padding: 60px 20px;
+    background-color: #fff;
+    margin: 40px auto;
+    max-width: 1200px;
+    border-radius: 15px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Green glow */
+    background: linear-gradient(135deg, #f9f9f9, #ffffff);
+    overflow: hidden;
+    border: 2px solid #4a8fdf; /* Add a solid border */
+    animation: glowing 2s infinite alternate;
+}
+
+.news-section h2 {
+    text-align: center;
+    margin-bottom: 40px;
+    font-size: 50px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    background: linear-gradient(90deg, #4a8fdf, #ff0000);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    font-family: 'Montserrat', sans-serif
+}
+
+.news-section h2::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 4px;
+    background-color: #ff0000;
+    border-radius: 2px;
+    animation: underline 2s infinite;
+}
+
+@keyframes underline {
+    0% {
+        width: 0;
+    }
+    50% {
+        width: 100px;
+    }
+    100% {
+        width: 0;
+    }
+}
+
+
+.news-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+}
+#news-container {
+    max-height: 1500px;
+    overflow-y: auto;
+    padding-right: 8px; /* optional, for scrollbar space */
+}
+
+.news-article {
+    background-color: #fff;
+    padding: 25px;
+    border-radius: 15px;
+    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 2px solid #4a8fdf;
+}
+
+.news-article:hover {
+    transform: translateY(-10px);
+    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.15);
+}
+
+.news-article h3 {
+    margin: 0;
+    font-size: 22px;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.news-article p {
+    margin: 10px 0;
+    color: #666;
+    font-size: 15px;
+    line-height: 1.6;
+}
+
+.news-article a {
+    color: #4a8fdf;
+    text-decoration: none;
+    font-weight: bold;
+    display: inline-block;
+    margin-top: 15px;
+    transition: color 0.3s ease;
+    border-color: #4a8fdf;
+    border-radius: 2px;
+}
+
+.news-article a:hover {
+    color: #34495e;
+    text-decoration: underline;
+}
+
+/* Dark Mode Styles */
+.dark-mode .news-section {
+    background: linear-gradient(135deg, #233250, #131b2b);
+    border-color: #4a8fdf;
+}
+
+.dark-mode .news-article {
+    background-color: #131b2b;
+    border-color: #4a8fdf;
+}
+
+.dark-mode .news-article h3 {
+    color: #ddd;
+}
+
+.dark-mode .news-article p {
+    color: #bbb;
+}
+
+.dark-mode .news-article a {
+    color: #4a8fdf;
+}
+
+.dark-mode .news-article a:hover {
+    color: #34495e;
+}
+
+@keyframes glowing {
+    0% {
+        box-shadow: 0 0 15px rgba(74, 143, 223, 0.6);
+    }
+    100% {
+        box-shadow: 0 0 30px rgba(74, 143, 223, 1), 0 0 50px rgba(74,143,223,0.8);
+    }
+}
+
+/* Loading Spinner */
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+}
+
+.loading-spinner::after {
+    content: "";
+    width: 40px;
+    height: 40px;
+    border: 4px solid #4a8fdf;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+/* Light mode scrollbar for news container */
+#news-container {
+    scrollbar-width: thin;
+    scrollbar-color: #4a8fdf #e0e7ef;
+}
+#news-container::-webkit-scrollbar {
+    width: 10px;
+    background: #e0e7ef;
+}
+#news-container::-webkit-scrollbar-thumb {
+    background: #4a8fdf;
+    border-radius: 8px;
+}
+#news-container::-webkit-scrollbar-thumb:hover {
+    background: #357abd;
+}
+
+/* Dark mode scrollbar for news container */
+.dark-mode #news-container {
+    scrollbar-color: #4a8fdf #243342;
+}
+.dark-mode #news-container::-webkit-scrollbar {
+    background: #243342;
+}
+.dark-mode #news-container::-webkit-scrollbar-thumb {
+    background: #4a8fdf;
+}
+.dark-mode #news-container::-webkit-scrollbar-thumb:hover {
+    background: #357abd;
+}
+.custom-introjs-tooltip {
+  font-size: 1.05rem;
+  color: #222;
+}
+.introjs-tooltip {
+  z-index: 11000 !important;
+}

static/css/predict.css

@@ -0,0 +1,466 @@
+.predictor-container {
+  width: 90%;
+  max-width: 1100px;
+  margin: 40px auto 0 auto;
+  padding: 24px 24px 40px 24px;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 4px 32px rgba(74,143,223,0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: 300px;
+  transition: min-height 0.3s, height 0.3s;
+}
+
+.dark-mode .predictor-container {
+  background-color: #131b2b;
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
+}
+
+.predictor-container h1 {
+  font-size: 2.2rem;
+  text-align: center;
+  color: #4a8fdf;
+  margin-bottom: 30px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.predictor-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #131b2b;
+}
+
+.dark-mode .form-group label {
+  color: #ddd;
+}
+
+.predictor-form select,
+.predictor-form input[type="date"] {
+  padding: 12px 15px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  background-color: #f4f2ec;
+  color: #000;
+  transition: border 0.3s, background-color 0.3s;
+}
+
+.predictor-form select:focus,
+.predictor-form input[type="date"]:focus {
+  border-color: #4a8fdf;
+  outline: none;
+}
+
+.dark-mode .predictor-form select,
+.dark-mode .predictor-form input[type="date"] {
+  background-color: #18233a;
+  color: #fff;
+  border-color: #555;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 10px;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+}
+
+.radio-option input {
+  margin: 0;
+}
+
+.predict-btn {
+  width: 100%;
+  padding: 14px 0;
+  background-color: #4a8fdf;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  box-shadow: 0 4px 10px rgba(74, 143, 223, 0.3);
+}
+
+.predict-btn:hover {
+  background-color: #377ddf;
+}
+
+.result-section {
+  margin-top: 50px;
+  animation: fadeIn 0.6s ease-in-out;
+}
+
+.result-section {
+  margin-top: 32px;
+  background: #4a8fdf;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 16px rgba(74,143,223,0.06);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  transition: min-height 0.3s, height 0.3s;
+}
+
+.prediction-result {
+  background-color: #f8f9fa;
+  border-left: 5px solid #4a8fdf;
+  padding: 20px 30px;
+  border-radius: 10px;
+  color: #2c3e50;
+  font-size: 16px;
+  margin-top: 20px;
+}
+.predictor-container,
+.result-section {
+  overflow: hidden;
+  position: relative;
+  /* margin-bottom already present for footer gap */
+}
+.dark-mode .prediction-result {
+  background-color: #2c3e50;
+  color: #fff;
+}
+
+.prediction-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #4a8fdf;
+  margin: 10px 0;
+}
+
+.confidence {
+  color: #666;
+  font-style: italic;
+}
+
+.dark-mode .confidence {
+  color: #bbb;
+}
+
+.chart-container {
+  width: 100%;
+  max-width: 100%;
+  min-height: 450px;
+  position: relative;
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  background-color: #fff;
+  box-sizing: border-box;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
+  overflow-x: visible; /* Remove horizontal scroll */
+}
+/* Each graph will expand as needed */
+#prediction-chart,
+.extra-graph,
+#prediction-chart-historical,
+#prediction-chart-sentiment {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+  min-height: 400px;
+  height: auto !important;
+  margin-bottom: 0;
+  display: block;
+}
+
+.dark-mode .chart-container {
+  background-color: #1e2a38;
+  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .predictor-container {
+    padding: 20px;
+  }
+
+  .radio-group {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .prediction-result,
+  .chart-container {
+    padding: 15px;
+  }
+}
+
+/* Glowing effect */
+@keyframes glowBorder {
+0% {
+    box-shadow: 0 0 10px rgba(74,143,223,0.6);
+}
+50% {
+    box-shadow: 0 0 20px rgba(74,143,223,0.8), 0 0 30px rgba(74,143,223,0.6);
+}
+100% {
+    box-shadow: 0 0 10px rgba(74,143,223,0.6);
+}
+}
+/* Apply glow to predictor container */
+.predictor-container {
+  animation: glowBorder 2.5s infinite alternate;
+}
+
+.dark-mode .predictor-container {
+  animation: glowBorder 2s infinite alternate;
+}
+/* Style for the epochs dropdown and custom input */
+#epochs, #custom-epochs {
+  padding: 12px 15px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  background-color: #f4f2ec;
+  color: #000;
+  margin-top: 8px;
+  transition: border 0.3s, background-color 0.3s;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#epochs:focus, #custom-epochs:focus {
+  border-color: #4a8fdf;
+  outline: none;
+}
+
+.dark-mode #epochs,
+.dark-mode #custom-epochs {
+  background-color: #18233a;
+  color: #fff;
+  border-color: #555;
+}
+
+/* Optional: Add spacing below the custom input */
+#custom-epochs {
+  margin-bottom: 8px;
+}
+#loading-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(255,255,255,0.1);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#message-box {
+  z-index: 9999;
+}
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.spinner {
+  border: 6px solid #e0e0e0;
+  border-top: 6px solid #0077ff;
+  border-radius: 50%;
+  width: 54px;
+  height: 54px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 18px;
+  box-shadow: 0 0 0 2px #fff; /* White border around the spinner */
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+}
+
+/* Add a white border to the loading text */
+#progress-text {
+  font-size: 18px;
+  color: #0077ff;
+  font-weight: bold;
+  text-shadow: 0 0 2px #fff; /* White border effect for text */
+  padding: 5px;
+  background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a semi-transparent background */
+  border-radius: 5px; /* Rounded corners for the text background */
+  display: inline-block; /* Ensure the background wraps around the text */
+}
+.graph-area {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 12px rgba(74,143,223,0.07);
+  padding: 18px 12px 12px 12px;
+  margin-bottom: 24px;
+}
+
+.dark-mode .graph-area {
+  background: #1e2a38;
+  box-shadow: 0 2px 12px rgba(255,255,255,0.04);
+}
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+}
+/* Disclaimer Overlay Styles */
+#disclaimer-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(30, 42, 56, 0.85);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.disclaimer-box {
+  background: #fff;
+  color: #222;
+  max-width: 420px;
+  width: 90vw;
+  padding: 32px 28px 24px 28px;
+  border-radius: 14px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+  text-align: left;
+  position: relative;
+  font-size: 1rem;
+  line-height: 1.6;
+  animation: fadeIn 0.5s;
+}
+.disclaimer-box h2 {
+  margin-top: 0;
+  color: #4a8fdf;
+  font-size: 1.3rem;
+}
+.disclaimer-box ul {
+  padding-left: 18px;
+  margin-bottom: 18px;
+}
+.disclaimer-risk {
+  font-size: 0.98rem;
+  color: #c62828;
+}
+#close-disclaimer {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  background: #4a8fdf;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 1.1rem;
+  padding: 2px 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+#close-disclaimer:hover {
+  background: #357abd;
+}
+@media (max-width: 600px) {
+  .disclaimer-box {
+    padding: 18px 8px 16px 8px;
+    font-size: 0.98rem;
+  }
+}
+.custom-introjs-tooltip {
+  font-size: 1.05rem;
+  color: #222;
+}
+.introjs-tooltip {
+  z-index: 11000 !important;
+}
+.news-sentiment {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-left: 5px solid #4a8fdf;
+  border-radius: 10px;
+  color: #2c3e50;
+}
+
+.dark-mode .news-sentiment {
+  background-color: #2c3e50;
+  color: #fff;
+}
+
+.news-sentiment h3 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+  color: #4a8fdf;
+}

static/css/styles.css

@@ -0,0 +1,652 @@
+nav ul {
+    list-style: none;
+    display: flex;
+    background-color: #333;
+    padding: 0;
+  }
+  nav ul li {
+    margin: 0 10px;
+  }
+  nav ul li a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 15px;
+    display: block;
+  }
+  nav ul li a:hover {
+    background-color: #555;
+  }
+  
+/* Example: Start of your CSS */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f4f2ec;
+    color: #000;
+    transition: background-color 0.3s, color 0.3s;
+    opacity: 0;
+    transform: scale(1.05);
+    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+}
+body.loaded {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Transition Overlay (Expanding Circle Effect) */
+.transition-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #4a8fdf, #000); /* Green fading into black */
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.9s ease-in-out;
+    z-index: 9999;
+}
+
+/* Expand circle effect when navigating */
+/* Expand */
+.transition-overlay.expand {
+    transform: translate(-50%, -50%) scale(30);
+}
+/* Contract */
+.transition-overlay.contract {
+    transform: translate(-50%, -50%) scale(0);
+}
+/* Smooth transition for links */
+a {
+    text-decoration: none;
+    color: #4a8fdf;
+    transition: color 0.3s ease-in-out;
+}
+
+a:hover {
+    color: #fff;
+}
+
+.dark-mode {
+    background-color: #131b2b;
+    color: #fff;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    background: #f4f2ec;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+.dark-mode .navbar {
+    background: #243342;
+}
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
+.dark-mode .navbar a {
+    color: #fff;
+}
+/* Highlighted Section */
+.highlight-container {
+    position: relative; /* Changed from absolute */
+    text-align: center;
+    padding: 50px;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 0px 30px rgba(74,143,223, 0.7);
+    border-radius: 15px;
+    animation: fadeIn 1s ease-in-out;
+    margin: 100px auto; /* Center and add margin */
+    max-width: 800px; /* Limit width for better readability */
+}
+
+.dark-mode .highlight-container {
+    background: #131b2b;
+    box-shadow: 0px 0px 30px rgba(74,143,223, 0.7);
+}
+/* Animated Glow Effect */
+@keyframes glow {
+    0% { box-shadow: 0px 0px 10px rgba(74,143,223, 0.5); }
+    50% { box-shadow: 0px 0px 20px rgba(74,143,223, 1); }
+    100% { box-shadow: 0px 0px 10px rgba(74,143,223, 0.5); }
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0px); }
+}
+@keyframes fadeBounce {
+    0% { opacity: 0; transform: translateY(-30px); }
+    50% { opacity: 1; transform: translateY(5px); }
+    100% { transform: translateY(0); }
+}
+.animated-title {
+    font-size: 48px;
+    font-weight: bold;
+    color: #4a8fdf;
+    text-align: center;
+    margin-bottom: 20px;
+    animation: fadeBounce 1.5s ease-in-out;
+}
+.dark-mode .animated-title {
+    color: #4a8fdf;
+}
+.description {
+    font-size: 26px;
+    font-weight: bold;
+    color: #4a8fdf;
+    margin-bottom: 20px;
+    animation: glow 1.5s infinite alternate;
+}
+.dark-mode .description {
+    color: #4a8fdf;
+}
+/* Centered Search Bar */
+.search-container {
+    width: 400px;
+    position: relative;
+    margin: 0 auto;
+}
+.search-box {
+    width: 100%;
+    padding: 14px 50px 14px 16px;
+    font-size: 18px;
+    border: 3px solid #4a8fdf;
+    border-radius: 30px;
+    outline: none;
+    transition: 0.3s;
+    animation: glow 1.5s infinite alternate;
+}
+.search-box:focus {
+    border-color: #ff9800;
+    box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
+}
+.search-container i {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 20px;
+    color: #777;
+    cursor: pointer;
+}
+.stock-suggestions {
+    margin-top: 15px;
+    font-size: 16px;
+    color: #333;
+}
+.dark-mode .stock-suggestions {
+    color: #ddd;
+}
+.suggestions-list {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.suggestion {
+    background-color: #f0f0f0;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+.suggestion:hover {
+    background-color: #4a8fdf;
+    color: white;
+}
+.dark-mode .suggestion {
+    background-color: #243342;
+    color: white;
+}
+.dark-mode .suggestion:hover {
+    background-color: #4a8fdf;
+}        
+.dark-mode .search-box {
+    background-color: #131b2b;
+    color: white;
+    border-color: #4a8fdf;
+}
+.dark-mode .search-box:focus {
+    border-color: #ff9800;
+}
+.dark-mode .search-container i {
+    color: #aaa;
+}    
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+.dropdown-content a {
+    color: black;
+    padding: 10px 16px;
+    display: block;
+    text-decoration: none;
+}
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+.dark-mode .dropdown-content {
+    background-color: #243342;
+}
+.dark-mode .dropdown-content a {
+    color: white;
+}
+.dark-mode .dropdown-content a:hover {
+    background-color: #374f66;
+}
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+    /* Use content swap via JS for moon icon */
+}
+.about-us {
+    text-align: center;
+    padding: 40px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    margin: 40px auto; /* Center and add margin */
+    margin-top: 200px; /* Add space between search bar and about-us */
+}
+
+.dark-mode .about-us {
+    background-color: #131b2b;
+    color: #ddd;
+}        
+#three-container {
+    width: 100%;
+    height: 400px;
+    position: relative;
+    margin: 40px auto; /* Add margin */
+    background-color: #000;
+}
+
+.container {
+    position: relative;
+    font-size: 7vw;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: transparent;
+    -webkit-text-stroke: 2px #4a8fdf;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10%;
+}
+
+.glow::before {
+    content: attr(data-text);
+    position: absolute;
+    color: #4a8fdf;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    animation: revealText 4s ease-in-out infinite alternate;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes revealText {
+    0% {
+        width: 0;
+        filter: blur(5px);
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+        filter: blur(3px);
+    }
+    50% {
+        width: 100%;
+        filter: blur(0px);
+    }
+    70% {
+        width: 100%;
+    }
+    100% {
+        width: 0;
+        filter: blur(5px);
+        opacity: 0;
+    }
+}
+.cards-container {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    align-items: stretch;
+    align-items: center;/    
+}
+
+.card {
+    background: #fff;
+    padding: 40px;
+    width: 220px;
+    height: 550px;
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    margin-top: 200px;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card h3 {
+    margin: 0;
+    padding: 10px;
+    background: #007bff;
+    color: white;
+    border-radius: 5px;
+}
+
+.card p {
+    margin-top: 15px;
+    color: #333;
+    font-size: 14px;
+}
+
+/* Footer Styles */
+footer {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    padding: 40px 20px;
+    font-family: Arial, sans-serif;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-section {
+    flex: 1;
+    min-width: 200px;
+    margin-bottom: 20px;
+}
+
+.footer-section h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #4a8fdf;
+}
+
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-section ul li {
+    margin-bottom: 10px;
+}
+
+.footer-section ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: #4a8fdf;
+}
+
+.footer-section form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer-section input[type="email"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    width: 70%;
+}
+
+.footer-section button {
+    padding: 10px 20px;
+    background-color: #4a8fdf;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.footer-section button:hover {
+    background-color: #4a8fdf;
+}
+
+.footer-bottom {
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #34495e;
+    font-size: 14px;
+}
+html {
+    scroll-behavior: smooth;
+}
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+        /* Cards Container */
+.cards-container {
+    display: flex;
+    gap: 30px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 20px;
+    margin-top: 150px;
+}
+
+/* Card Styling */
+.card {
+    background: #fff;
+    padding: 30px;
+    width: 280px;
+    text-align: center;
+    border-radius: 15px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, #4a8fdf, #007bff);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 1;
+}
+
+.card:hover::before {
+    opacity: 0.1;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
+}
+
+.card h3 {
+    margin: 0;
+    padding: 15px;
+    background: linear-gradient(45deg, #4a8fdf, #007bff);
+    color: white;
+    border-radius: 10px;
+    font-size: 20px;
+    position: relative;
+    z-index: 2;
+}
+
+.card p {
+    margin-top: 20px;
+    color: #555;
+    font-size: 15px;
+    line-height: 1.6;
+    position: relative;
+    z-index: 2;
+}
+.dark-mode .card {
+    background-color: #131b2b;
+    color: #ddd;
+    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.05);
+}
+
+.dark-mode .card p {
+    margin-top: 20px;
+    color: #c9d1dd;
+    font-size: 15px;
+    line-height: 1.6;
+    position: relative;
+    z-index: 2;
+  }
+
+/* Fade-in Animation */
+.fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .cards-container {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .card {
+        width: 90%;
+    }
+}
+/* Include the rest from the style block */
+/* Glow effect for card and about-us containers */
+.card, .about-us {
+    animation: glow 2s infinite alternate;
+    box-shadow: 0 0 20px #4a8fdf, 0 0 40px #4a8fdf33;
+}
+
+.dark-mode .card, .dark-mode .about-us {
+    animation: glow 2s infinite alternate;
+    box-shadow: 0 0 30px #4a8fdf, 0 0 60px #4a8fdf33;
+}
+.custom-introjs-tooltip {
+  font-size: 1.05rem;
+  color: #222;
+}
+.introjs-tooltip {
+  z-index: 11000 !important;
+}

static/js/auth.js

@@ -0,0 +1,44 @@
+import { initializeFirebase, auth } from './firebase-config.js';
+import {
+  onAuthStateChanged,
+  signOut
+} from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js";
+
+document.addEventListener("DOMContentLoaded", async () => {
+  // Initialize Firebase
+  await initializeFirebase();
+
+  const logoutLink = document.getElementById("logout");
+
+  // Monitor auth state
+  onAuthStateChanged(auth, (user) => {
+    if (user) {
+      logoutLink.textContent = "Logout";
+      logoutLink.href = ""; // Prevent navigation
+      logoutLink.addEventListener("click", handleLogout);
+    } else {
+      logoutLink.textContent = "Login";
+      logoutLink.href = "/login"; // Use your actual login route
+      logoutLink.removeEventListener("click", handleLogout);
+    }
+  });
+
+  function handleLogout(e) {
+    e.preventDefault();
+    signOut(auth).then(() => {
+      window.location.href = "/"; // Redirect after logout
+    }).catch((error) => {
+      console.error("Logout Error:", error);
+    });
+  }
+});
+
+// ✅ Function to protect page access
+export async function requireLogin() {
+  await initializeFirebase();
+  onAuthStateChanged(auth, (user) => {
+    if (!user) {
+      window.location.href = "/login"; // 🔒 Redirect if not logged in
+    }
+  });
+}

static/js/firebase-config.js

@@ -0,0 +1,92 @@
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js';
+import { getFirestore, collection } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js';
+import {
+    getAuth,
+    createUserWithEmailAndPassword,
+    signInWithEmailAndPassword,
+    signInWithPopup,
+    GoogleAuthProvider,
+    OAuthProvider,
+    onAuthStateChanged,
+    signOut
+} from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js';
+
+// Fetch Firebase configuration from the backend
+export async function getFirebaseConfig() {
+    try {
+        const res = await fetch('/firebase-config');
+        if (!res.ok) {
+            throw new Error(`Failed to fetch Firebase config: ${res.statusText}`);
+        }
+        return await res.json();
+    } catch (error) {
+        console.error("Error fetching Firebase configuration:", error);
+        throw error;
+    }
+}
+
+// Initialize Firebase app, auth, and Firestore
+let app, auth, db;
+
+export async function initializeFirebase() {
+    try {
+        const res = await fetch('/firebase-config');
+        const firebaseConfig = await res.json();
+        if (!firebaseConfig.apiKey) {
+            throw new Error("Invalid Firebase configuration: Missing API key.");
+        }
+        app = initializeApp(firebaseConfig);
+        auth = getAuth(app);
+        db = getFirestore(app);
+        console.log("Firebase initialized successfully.");
+    } catch (error) {
+        console.error("Error initializing Firebase:", error);
+        throw error;
+    }
+}
+
+// Firebase authentication helper functions
+const firebaseAuth = {
+    signUp: (email, password) =>
+        createUserWithEmailAndPassword(auth, email, password),
+
+    signIn: (email, password) =>
+        signInWithEmailAndPassword(auth, email, password),
+
+    signInWithGoogle: () => {
+        const provider = new GoogleAuthProvider();
+        return signInWithPopup(auth, provider);
+    },
+
+    signInWithApple: () => {
+        const provider = new OAuthProvider('apple.com');
+        return signInWithPopup(auth, provider);
+    },
+
+    signOut: () =>
+        signOut(auth),
+
+    onAuthStateChanged: (callback) =>
+        onAuthStateChanged(auth, callback),
+};
+
+// Helper function to get the user ID (or generate a guest ID)
+export function getUserIdAsync() {
+    return new Promise((resolve) => {
+        onAuthStateChanged(auth, (user) => {
+            if (user) {
+                resolve(user.uid);
+            } else {
+                let guestId = localStorage.getItem('guestUserId');
+                if (!guestId) {
+                    guestId = 'guest_' + Math.random().toString(36).substr(2, 9);
+                    localStorage.setItem('guestUserId', guestId);
+                }
+                resolve(guestId);
+            }
+        });
+    });
+}
+
+// Export initialized Firebase services and helper functions
+export { auth, db, collection, firebaseAuth };

static/js/fundamentals.js

@@ -0,0 +1,695 @@
+import { initializeNewsletterForm } from './newsletter.js';
+// --- Variables ---
+let comparisonChart = null;
+const peers = [];
+let currentView = 'table';
+
+// --- Page transition and dark mode ---
+document.addEventListener("DOMContentLoaded", async function () {
+    document.body.classList.add("loaded");
+
+    // Dark mode toggle with sun/moon icon in toggle circle
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkModeToggle && toggleIcon) {
+            if (darkModeToggle.checked) {
+                toggleIcon.innerHTML = '☾'; // Moon
+                toggleIcon.style.color = "#4a8fdf";
+            } else {
+                toggleIcon.innerHTML = '☀'; // Sun
+                toggleIcon.style.color = "#FFD600";
+            }
+        }
+    }
+
+    if (darkModeToggle) {
+        // Set the toggle to checked (on) by default
+        darkModeToggle.checked = true;
+        // Apply dark mode on page load
+        document.body.classList.add("dark-mode");
+        // Initial icon state
+        updateToggleIcon();
+
+        darkModeToggle.addEventListener("change", function () {
+            document.body.classList.toggle("dark-mode");
+            updateToggleIcon();
+            updateAllPlotlyChartColors();
+            if (window.lastChartData) showChart(window.lastChartData.history, window.lastChartData.symbol);
+            if (window.lastFundamentalsHistory) updateFundamentalsHistoryChart(window.lastFundamentalsHistory.history, window.lastFundamentalsHistory.symbol);
+            if (typeof updateComparisonChart === "function") updateComparisonChart();
+        });
+    }
+
+    // Page transition for links
+    document.querySelectorAll("a").forEach(link => {
+        link.addEventListener("click", function (event) {
+            if (this.getAttribute("target") === "_blank") return;
+            event.preventDefault();
+            let href = this.href;
+            let overlay = document.createElement("div");
+            overlay.classList.add("transition-overlay");
+            document.body.appendChild(overlay);
+            setTimeout(() => { overlay.classList.add("expand"); }, 90);
+            setTimeout(() => { overlay.remove(); }, 1000);
+            setTimeout(() => { window.location.href = href; }, 890);
+        });
+    });
+
+    // Populate dropdown
+    fetch("/get-companies")
+        .then(res => res.json())
+        .then(companies => {
+            const selects = [
+                document.getElementById("fundamentals-symbol"),
+                document.getElementById("fundamentals-search-bar")
+            ];
+            selects.forEach(select => {
+                if (!select) return;
+                select.innerHTML = '<option value="">Select a company...</option>';
+                companies.forEach(company => {
+                    const option = document.createElement("option");
+                    option.value = company["Yahoo Finance Ticker"];
+                    option.textContent = `${company["Company Name"]} (${company["Yahoo Finance Ticker"]})`;
+                    select.appendChild(option);
+                });
+            });
+
+            // Pre-select if a company was chosen on home
+            const selectedCompany = localStorage.getItem('selectedCompany');
+            if (selectedCompany) {
+                companies.forEach(company => {
+                    const displayName = company.name || company["Company Name"] || company.ticker || company["Yahoo Finance Ticker"];
+                    if (
+                        displayName === selectedCompany ||
+                        `${company["Company Name"]} (${company["Yahoo Finance Ticker"]})` === selectedCompany
+                    ) {
+                        selects.forEach(select => {
+                            if (select) select.value = company["Yahoo Finance Ticker"];
+                        });
+                    }
+                });
+                // Optionally clear the selection after use
+                // localStorage.removeItem('selectedCompany');
+            }
+        });
+
+    // Load default stock if present
+    const params = new URLSearchParams(window.location.search);
+    const userInput = params.get("symbol");
+    const searchBar = document.getElementById("fundamentals-search-bar");
+    if (searchBar && userInput) searchBar.value = userInput;
+    if (userInput) {
+        try {
+            const res = await fetch(`/api/lookup-symbol?query=${encodeURIComponent(userInput)}`);
+            const data = await res.json();
+            if (data.symbol) fetchFundamentals(data.symbol);
+            else showMessage("Company not found", true);
+        } catch {
+            showMessage("Error looking up symbol", true);
+        }
+    }
+
+    // Attach fetch button event for historical data (if present)
+    const fetchBtn = document.getElementById('fetch');
+    const symbolSelect = document.getElementById('fundamentals-symbol');
+    const startInput = document.getElementById('start-date');
+    const endInput = document.getElementById('end-date');
+    if (fetchBtn && symbolSelect && startInput && endInput) {
+        fetchBtn.addEventListener('click', async function () {
+            const symbol = symbolSelect.value;
+            const start = startInput.value;
+            const end = endInput.value;
+            if (!symbol) {
+                showMessage("Please select a company from the dropdown.", true);
+                return;
+            }
+            let url = `/api/historical?symbol=${encodeURIComponent(symbol)}`;
+            if (start && end) url += `&start=${start}&end=${end}`;
+            try {
+                const res = await fetch(url);
+                const data = await res.json();
+                if (data.error) {
+                    showMessage(data.error, true);
+                    return;
+                }
+                showTable(data.history);
+                showChart(data.history, symbol);
+                showView(currentView);
+            } catch (e) {
+                showMessage("Failed to fetch stock data.", true);
+            }
+        });
+    }
+});
+document.addEventListener("DOMContentLoaded", function () {
+    document.body.classList.add("loaded"); // Fade-in page on load
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    fetch("/get-companies")
+        .then(res => res.json())
+        .then(companies => {
+            const selects = [
+                document.getElementById("fundamentals-symbol"),
+                document.getElementById("fundamentals-search-bar")
+            ];
+            selects.forEach(select => {
+                if (!select) return;
+                select.innerHTML = '<option value="">Select a company...</option>';
+                companies.forEach(company => {
+                    const option = document.createElement("option");
+                    option.value = company["Yahoo Finance Ticker"];
+                    option.textContent = `${company["Company Name"]} (${company["Yahoo Finance Ticker"]})`;
+                    select.appendChild(option);
+                });
+            });
+
+            // Pre-select if a company was chosen on home
+            const selectedCompany = localStorage.getItem('selectedCompany');
+            if (selectedCompany) {
+                companies.forEach(company => {
+                    const displayName = company.name || company["Company Name"] || company.ticker || company["Yahoo Finance Ticker"];
+                    if (
+                        displayName === selectedCompany ||
+                        `${company["Company Name"]} (${company["Yahoo Finance Ticker"]})` === selectedCompany
+                    ) {
+                        selects.forEach(select => {
+                            if (select) select.value = company["Yahoo Finance Ticker"];
+                        });
+                    }
+                });
+                // Optionally clear the selection after use
+                // localStorage.removeItem('selectedCompany');
+            }
+        });
+});
+
+// --- Show messages ---
+function showMessage(message, isError = false) {
+    const messageContainer = document.getElementById("message-container");
+    if (!messageContainer) return;
+    messageContainer.textContent = message;
+    messageContainer.style.display = "block";
+    messageContainer.style.backgroundColor = isError ? "#ffebee" : "#e8f5e9";
+    messageContainer.style.color = isError ? "#c62828" : "#2e7d32";
+    messageContainer.style.border = isError ? "1px solid #c62828" : "1px solid #2e7d32";
+    setTimeout(() => { messageContainer.style.display = "none"; }, 5000);
+}
+
+// --- Fetch and display fundamentals ---
+async function fetchFundamentals(symbol) {
+    if (!symbol || symbol.trim() === '') {
+        showMessage("Please select a stock symbol", true);
+        return;
+    }
+    try {
+        document.querySelectorAll('.ratio-value').forEach(el => {
+            el.textContent = '...';
+            el.classList.add('loading');
+        });
+        const response = await fetch(`/api/fundamentals?symbol=${encodeURIComponent(symbol)}`);
+        const data = await response.json();
+        if (data.error) {
+            showMessage(data.error, true);
+            return;
+        }
+        updateFundamentalsUI(data);
+        showRiskMetricsChart(data);
+        showBetaGauge(data.beta);
+        if (data.history) {
+            updateFundamentalsHistoryChart(data.history, symbol);
+            showRollingVolatilityChart(data.history);
+        } else {
+            Plotly.purge('fundamentals-chart');
+        }
+    } catch (error) {
+        showMessage("Failed to fetch fundamentals data.", true);
+    }
+}window.fetchFundamentals = fetchFundamentals; // Expose function globally
+
+// --- Update UI with ratios and risk metrics ---
+function updateFundamentalsUI(data) {
+    document.getElementById('pe-ratio').textContent = data.pe ? data.pe.toFixed(2) : 'N/A';
+    document.getElementById('pb-ratio').textContent = data.pb ? data.pb.toFixed(2) : 'N/A';
+    document.getElementById('ps-ratio').textContent = data.ps ? data.ps.toFixed(2) : 'N/A';
+    document.getElementById('div-yield').textContent = data.divYield ? (data.divYield.toFixed(2) + '%') : 'N/A';
+    document.getElementById('roe').textContent = data.roe ? (data.roe.toFixed(2) + '%') : 'N/A';
+    document.getElementById('roa').textContent = data.roa ? (data.roa.toFixed(2) + '%') : 'N/A';
+    document.getElementById('gross-margin').textContent = data.grossMargin ? (data.grossMargin.toFixed(2) + '%') : 'N/A';
+    document.getElementById('op-margin').textContent = data.opMargin ? (data.opMargin.toFixed(2) + '%') : 'N/A';
+    document.getElementById('current-ratio').textContent = data.currentRatio ? data.currentRatio.toFixed(2) : 'N/A';
+    document.getElementById('quick-ratio').textContent = data.quickRatio ? data.quickRatio.toFixed(2) : 'N/A';
+    document.getElementById('debt-equity').textContent = data.debtEquity ? data.debtEquity.toFixed(2) : 'N/A';
+    document.getElementById('ebitda-margin').textContent = data.ebitdaMargin ? (data.ebitdaMargin.toFixed(2) + '%') : 'N/A';
+    document.getElementById('volatility').textContent =
+        data.volatility !== null && data.volatility !== undefined ? (data.volatility * 100).toFixed(2) + '%' : 'N/A';
+    document.getElementById('beta').textContent =
+        data.beta !== null && data.beta !== undefined ? data.beta.toFixed(2) : 'N/A';
+    document.getElementById('var95').textContent =
+        data.var95 !== null && data.var95 !== undefined ? (data.var95 * 100).toFixed(2) + '%' : 'N/A';
+    document.querySelectorAll('.ratio-value').forEach(el => el.classList.remove('loading'));
+}
+
+// --- Plotly chart for price/volume history ---
+function updateFundamentalsHistoryChart(history, symbol) {
+    window.lastFundamentalsHistory = { history, symbol };
+    const chartDiv = document.getElementById('fundamentals-chart');
+    if (!history || !history.length) {
+        Plotly.purge(chartDiv);
+        return;
+    }
+    const { years, avgCloses, totalVolumes } = groupByYear(history);
+    const plotBg = getBgColor();
+    const paperBg = getBgColor();
+    const gridColor = getGridColor();
+    const fontColor = getTextColor();
+    // Calculate 3-year and 5-year moving averages for yearly data
+    const dma3 = movingAverage(avgCloses, 3);
+    const dma5 = movingAverage(avgCloses, 5);
+    const priceTrace = {
+        x: years,
+        y: avgCloses,
+        type: 'scatter',
+        mode: 'lines+markers',
+        name: 'Avg Closing Price (₹)',
+        line: { color: '#2196F3' },
+        yaxis: 'y1',
+        fill: 'tozeroy',
+        fillcolor: 'rgba(33,150,243,0.15)'
+    };
+    const volumeTrace = {
+        x: years,
+        y: totalVolumes,
+        type: 'bar',
+        name: 'Total Volume',
+        marker: { color: '#4caf50', opacity: 0.4 },
+        yaxis: 'y2'
+    };
+    const dma3Trace = {
+        x: years,
+        y: dma3,
+        type: 'scatter',
+        mode: 'lines',
+        name: '3-Year MA',
+        line: { color: '#ff9800', width: 2, dash: 'dot' },
+        yaxis: 'y1'
+    };
+    const dma5Trace = {
+        x: years,
+        y: dma5,
+        type: 'scatter',
+        mode: 'lines',
+        name: '5-Year MA',
+        line: { color: '#FF00FF', width: 2, dash: 'dash' },
+        yaxis: 'y1'
+    };
+    const layout = {
+        title: `${symbol} Yearly Stock Performance`,
+        xaxis: { title: 'Year', gridcolor: gridColor },
+        yaxis: { title: 'Avg Price (₹)', side: 'left', gridcolor: gridColor },
+        yaxis2: {
+            title: 'Total Volume',
+            overlaying: 'y',
+            side: 'right',
+            showgrid: false
+        },
+        legend: { x: 0, y: 1.1, orientation: 'h' },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: plotBg,
+        paper_bgcolor: paperBg,
+        font: { color: fontColor }
+    };
+    Plotly.newPlot(chartDiv, [priceTrace, dma3Trace, dma5Trace, volumeTrace], layout, {responsive: true});
+}
+
+// --- Risk Metrics Bar Chart ---
+function showRiskMetricsChart(data) {
+    window.lastRiskMetricsData = data;
+    const chartDiv = document.getElementById('risk-metrics-chart');
+    if (!chartDiv) return;
+    const plotBg = getBgColor();
+    const paperBg = getBgColor();
+    const gridColor = getGridColor();
+    const fontColor = getTextColor();
+    const labels = ['Volatility (%)', 'Beta', 'VaR 95% (%)'];
+    const values = [
+        data.volatility !== null && data.volatility !== undefined ? data.volatility * 100 : null,
+        data.beta !== null && data.beta !== undefined ? data.beta : null,
+        data.var95 !== null && data.var95 !== undefined ? data.var95 * 100 : null
+    ];
+    const trace = {
+        x: labels,
+        y: values,
+        type: 'bar',
+        marker: {
+            color: ['rgba(54,162,235,0.6)', 'rgba(255,99,132,0.6)', 'rgba(255,167,38,0.6)'], // semi-transparent fill
+            line: {
+                color: ['#36a2eb', '#ff6384', '#ffa726'], // opaque border
+                width: 2
+            }
+        }
+    };
+    const layout = {
+        title: 'Risk Metrics',
+        xaxis: { title: '', gridcolor: gridColor },
+        yaxis: { title: '', rangemode: 'tozero', gridcolor: gridColor },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: plotBg,
+        paper_bgcolor: paperBg,
+        font: { color: fontColor }
+    };
+    Plotly.newPlot(chartDiv, [trace], layout, {responsive: true});
+}
+
+// --- Utility functions ---
+function groupByYear(history) {
+    const yearly = {};
+    history.forEach(d => {
+        const dateStr = d.Date || d.date;
+        const year = new Date(dateStr).getFullYear();
+        if (!yearly[year]) yearly[year] = { closeSum: 0, volumeSum: 0, count: 0 };
+        yearly[year].closeSum += Number(d.Close ?? d.close);
+        yearly[year].volumeSum += Number(d.Volume ?? d.volume);
+        yearly[year].count += 1;
+    });
+    const years = Object.keys(yearly).sort();
+    const avgCloses = years.map(y => yearly[y].closeSum / yearly[y].count);
+    const totalVolumes = years.map(y => yearly[y].volumeSum);
+    return { years, avgCloses, totalVolumes };
+}
+
+function getGridColor() {
+    return document.body.classList.contains("dark-mode") ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)';
+}
+function getBgColor() {
+    return document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff';
+}
+function getTextColor() {
+    return document.body.classList.contains("dark-mode") ? "#fff" : "#333";
+}
+
+function updateAllPlotlyChartColors() {
+    const layoutUpdate = {
+        paper_bgcolor: getBgColor(),
+        plot_bgcolor: getBgColor(),
+        font: { color: getTextColor() },
+        xaxis: { color: getTextColor(), gridcolor: getGridColor() },
+        yaxis: { color: getTextColor(), gridcolor: getGridColor() }
+    };
+    [
+        'stockChart',
+        'fundamentals-chart',
+        'comparison-chart',
+        'prediction-chart',
+        'beta-gauge-chart'
+    ].forEach(id => {
+        const chartDiv = document.getElementById(id);
+        if (chartDiv && chartDiv.data) {
+            Plotly.relayout(chartDiv, layoutUpdate);
+        }
+        // For risk-metrics and rolling-vol, redraw with latest data
+    if (window.lastRiskMetricsData) showRiskMetricsChart(window.lastRiskMetricsData);
+    if (window.lastFundamentalsHistory) showRollingVolatilityChart(window.lastFundamentalsHistory.history);
+    });
+}
+
+// --- Tab switching ---
+function openTab(tabName) {
+    // Hide all tab contents
+    document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');
+    // Remove 'active' from all tab buttons
+    document.querySelectorAll('.fundamentals-tabs .tab-button').forEach(btn => btn.classList.remove('active'));
+    // Show the selected tab content
+    document.getElementById(tabName).style.display = 'block';
+    // Add 'active' to the clicked tab button
+    document.querySelectorAll('.fundamentals-tabs .tab-button').forEach(btn => {
+        if (btn.getAttribute('onclick') === `openTab('${tabName}')`) {
+            btn.classList.add('active');
+        }
+    });
+    
+
+    // --- Force Plotly to resize charts in the now-visible tab ---
+    setTimeout(() => {
+        if (tabName === 'chart') {
+            const chartDiv = document.getElementById('fundamentals-chart');
+            if (chartDiv) Plotly.Plots.resize(chartDiv);
+        }
+        if (tabName === 'compare') {
+            ['risk-metrics-chart', 'rolling-vol-chart', 'beta-gauge-chart'].forEach(id => {
+                const chartDiv = document.getElementById(id);
+                if (chartDiv) Plotly.Plots.resize(chartDiv);
+            });
+        }
+    }, 100); // Delay ensures the tab is visible before resizing
+}
+
+window.openTab = openTab; 
+function showRollingVolatilityChart(history) {
+    if (!history || !history.length) return;
+    const plotBg = getBgColor();
+    const paperBg = getBgColor();
+    const gridColor = getGridColor();
+    const fontColor = getTextColor();
+    const returns = history.map((d, i, arr) => i > 0 ? (d.Close - arr[i-1].Close) / arr[i-1].Close : null).slice(1);
+    const windowSize = 30;
+    const rollingVol = [];
+    for (let i = windowSize; i < returns.length; i++) {
+        const window = returns.slice(i - windowSize, i);
+        const std = Math.sqrt(window.reduce((sum, r) => sum + Math.pow(r - (window.reduce((a, b) => a + b, 0) / window.length), 2), 0) / window.length);
+        rollingVol.push(std * Math.sqrt(252) * 100); // annualized %
+    }
+    const dates = history.slice(windowSize + 1).map(d => d.Date || d.date);
+    const trace = {
+        x: dates,
+        y: rollingVol,
+        type: 'scatter',
+        mode: 'lines',
+        name: '30-day Rolling Volatility (%)',
+        fill: 'tozeroy',
+        line: { color: '#36a2eb' }
+    };
+    const layout = {
+        title: 'Rolling Volatility (30-day, Annualized)',
+        xaxis: { title: 'Date', gridcolor: gridColor },
+        yaxis: { title: 'Volatility (%)', rangemode: 'tozero', gridcolor: gridColor },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: plotBg,
+        paper_bgcolor: paperBg,
+        font: { color: fontColor }
+    };
+    Plotly.newPlot('rolling-vol-chart', [trace], layout, {responsive: true});
+}
+// --- Beta Gauge Chart ---
+function showBetaGauge(beta) {
+    window.lastBeta = beta; // <-- Add this line
+    const chartDiv = document.getElementById('beta-gauge-chart');
+    if (!chartDiv || beta === null || beta === undefined) return;
+    const plotBg = getBgColor();
+    const paperBg = getBgColor();
+    const fontColor = getTextColor();
+    // Get the actual width of the container
+    const containerWidth = chartDiv.parentElement ? chartDiv.parentElement.offsetWidth : 400;
+    Plotly.newPlot(chartDiv, [{
+        type: "indicator",
+        mode: "gauge+number",
+        value: beta,
+        title: { text: "Beta", font: { color: fontColor } },
+        gauge: {
+            axis: { 
+                range: [0, 2], 
+                tickcolor: fontColor,
+                linecolor: "#ff6384", // Opaque axis line
+                linewidth: 3
+            },
+            bar: { 
+                color: "rgba(255,99,132,0.6)", // semi-transparent fill
+                line: { color: "#ff6384", width: 3 } // opaque border
+            },
+            steps: [
+                { range: [0, 1], color: "rgba(174,229,113,0.5)", line: {color: "rgba(175, 229, 113,1)", width: 4} },   // semi-transparent green with opaque edge
+                { range: [1, 2], color: "rgba(255,224,130,0.5)", line: {color: "rgba(255, 224, 130,1)", width: 4} }    // semi-transparent yellow with opaque edge
+            ],
+            bgcolor: plotBg,
+            bordercolor: paperBg
+        }
+    }], {
+        width: containerWidth, // <-- Force width to match container
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        paper_bgcolor: paperBg,
+        plot_bgcolor: plotBg,
+        font: { color: fontColor }
+    });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    const fetchBtn = document.getElementById('fetch');
+    const symbolSelect = document.getElementById('fundamentals-symbol');
+    const startInput = document.getElementById('start-date');
+    const endInput = document.getElementById('end-date');
+
+    fetchBtn.addEventListener('click', async function () {
+        const symbol = symbolSelect.value;
+        const start = startInput.value;
+        const end = endInput.value;
+        if (!symbol) {
+            showMessage("Please select a company from the dropdown.", true);
+            return;
+        }
+        let url = `/api/historical?symbol=${encodeURIComponent(symbol)}`;
+        if (start && end) url += `&start=${start}&end=${end}`;
+        try {
+            const res = await fetch(url);
+            const data = await res.json();
+            if (data.error) {
+                showMessage(data.error, true);
+                return;
+            }
+            // You need to implement showTable and showChart functions for your table/chart
+            showTable(data.history);
+            showChart(data.history, symbol);
+            showView(currentView); // If you have tab switching for table/chart/both
+        } catch (e) {
+            showMessage("Failed to fetch stock data.", true);
+        }
+    });
+});
+
+function showTable(history) {
+    // Simple table rendering for demonstration
+    const tableDiv = document.getElementById('stock-data-table');
+    if (!history || !history.length) {
+        tableDiv.innerHTML = "<p>No data available.</p>";
+        return;
+    }
+    let html = "<table><thead><tr>";
+    Object.keys(history[0]).forEach(key => {
+        html += `<th>${key}</th>`;
+    });
+    html += "</tr></thead><tbody>";
+    history.forEach(row => {
+        html += "<tr>";
+        Object.values(row).forEach(val => {
+            html += `<td>${val !== undefined ? val : ''}</td>`;
+        });
+        html += "</tr>";
+    });
+    html += "</tbody></table>";
+    tableDiv.innerHTML = html;
+}
+
+// --- Stock Price Chart for /api/historical ---
+function showChart(history, symbol) {
+    const chartDiv = document.getElementById('stockChart');
+    if (!history || !history.length) {
+        Plotly.purge(chartDiv);
+        return;
+    }
+    const plotBg = getBgColor();
+    const paperBg = getBgColor();
+    const gridColor = getGridColor();
+    const fontColor = getTextColor();
+    const dates = history.map(d => d.Date || d.date);
+    const closes = history.map(d => d.Close ?? d.close);
+    const trace = {
+        x: dates,
+        y: closes,
+        type: 'scatter',
+        mode: 'lines+markers',
+        name: 'Close Price',
+        fill: 'tozeroy',
+        line: { color: '#2196F3' }
+    };
+    const layout = {
+        title: `${symbol} Price Chart`,
+        xaxis: { title: 'Date', gridcolor: gridColor },
+        yaxis: { title: 'Close Price', gridcolor: gridColor },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: plotBg,
+        paper_bgcolor: paperBg,
+        font: { color: fontColor }
+    };
+    Plotly.newPlot(chartDiv, [trace], layout, {responsive: true});
+}
+
+function showView(view) {
+    // Remove 'active' from all tab buttons
+    document.querySelectorAll('.tab-container .tab-button').forEach(btn => btn.classList.remove('active'));
+    // Add 'active' to the clicked tab button
+    document.querySelectorAll('.tab-container .tab-button').forEach(btn => {
+        if (btn.getAttribute('onclick') === `showView('${view}')`) {
+            btn.classList.add('active');
+        }
+    });
+    window.showView = showView; 
+    // Show/hide table/chart views as needed
+    document.getElementById('stock-data-table').style.display = (view === 'table' || view === 'both') ? 'block' : 'none';
+    document.getElementById('chart-view').style.display = (view === 'chart' || view === 'both') ? 'block' : 'none';
+
+    // Force Plotly to resize if chart is shown
+    if (view === 'chart' || view === 'both') {
+        setTimeout(() => {
+            const chartDiv = document.getElementById('stockChart');
+            if (chartDiv) Plotly.Plots.resize(chartDiv);
+        }, 100);
+    }
+}
+window.addEventListener('resize', () => {
+    if (window.lastBeta !== undefined) {
+        showBetaGauge(window.lastBeta);
+    }
+});
+document.querySelectorAll("a").forEach(link => {
+    link.addEventListener("click", function (event) {
+        if (this.getAttribute("target") === "_blank") return;
+        event.preventDefault();
+        let href = this.href;
+        let overlay = document.createElement("div");
+        overlay.classList.add("transition-overlay");
+        document.body.appendChild(overlay);
+        setTimeout(() => { overlay.classList.add("active"); }, 90);
+        setTimeout(() => { overlay.remove(); }, 1000);
+        setTimeout(() => { window.location.href = href; }, 890);
+    });
+});
+
+function movingAverage(arr, windowSize) {
+    let result = [];
+    for (let i = 0; i < arr.length; i++) {
+        if (i < windowSize - 1) {
+            result.push(null);
+        } else {
+            let sum = 0;
+            for (let j = i - windowSize + 1; j <= i; j++) {
+                sum += arr[j];
+            }
+            result.push(sum / windowSize);
+        }
+    }
+    return result;
+}
+document.addEventListener("DOMContentLoaded", function() {
+    if (!localStorage.getItem('fundamentals_tutorial_shown')) {
+        introJs().setOptions({
+            nextLabel: 'Next',
+            prevLabel: 'Back',
+            doneLabel: 'Done',
+            skipLabel: 'Skip',
+            showProgress: true,
+            showBullets: false,
+            exitOnOverlayClick: false,
+            tooltipClass: 'custom-introjs-tooltip',
+        }).oncomplete(function() {
+            localStorage.setItem('fundamentals_tutorial_shown', 'yes');
+        }).onexit(function() {
+            localStorage.setItem('fundamentals_tutorial_shown', 'yes');
+        }).start();
+    }
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    initializeNewsletterForm();
+    // Other page-specific code...
+});

static/js/home.js

@@ -0,0 +1,235 @@
+import { initializeNewsletterForm } from './newsletter.js';
+// Dark Mode Toggle
+// Update dark mode toggle to be on by default
+document.addEventListener("DOMContentLoaded", function() {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkModeToggle.checked) {
+            toggleIcon.innerHTML = '☾'; // Moon
+        } else {
+            toggleIcon.innerHTML = '☀'; // Sun
+        }
+    }
+
+    // Initial state
+    
+
+    // Set the toggle to checked (on) by default
+    darkModeToggle.checked = true;
+    updateToggleIcon();
+    // Apply dark mode on page load
+    document.body.classList.add("dark-mode");
+
+    darkModeToggle.addEventListener("change", function() {
+      document.body.classList.toggle("dark-mode");
+      if (typeof updateChartColors === "function") updateChartColors(this.checked);
+      updateToggleIcon();
+    });
+});
+
+// Logout Functionality
+document.getElementById("logout").addEventListener("click", function(event) {
+    event.preventDefault(); // Prevent default link behavior
+    // Clear session storage or local storage if needed
+    sessionStorage.clear();
+    localStorage.clear();
+    // Redirect to login page
+    window.location.href = "login";
+});
+
+
+// Ensure Three.js scene initializes properly
+const container = document.getElementById("three-container");
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+
+// Zoom in slightly by moving camera closer
+camera.position.z = 3;  // default is usually 5
+
+const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+renderer.setSize(container.clientWidth, container.clientHeight);
+renderer.outputEncoding = THREE.sRGBEncoding;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 0.5; // lower exposure for less brightness
+container.appendChild(renderer.domElement);
+
+// Add Ambient & Directional Lighting (low intensity)
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
+directionalLight.position.set(2, 2, 5);
+scene.add(directionalLight);
+
+// Load GLTF Model
+const loader = new THREE.GLTFLoader();
+loader.load(modelpath, function(gltf) {
+    const model = gltf.scene;
+    model.position.set(0, -1, 0);
+    model.scale.set(1.9, 1.5, 0.8);
+    scene.add(model);
+}, undefined, function(error) {
+    console.error('Error loading model:', error);
+});
+
+// Set Camera Position
+camera.position.set(0, 4.2, 4.9);
+camera.lookAt(0, 0, 0); 
+
+// Animation Loop
+function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+}
+animate();
+
+// Resize Event Listener
+window.addEventListener('resize', () => {
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+});
+
+// Page Transition
+document.addEventListener("DOMContentLoaded", function () {
+    document.body.classList.add("loaded"); // Fade-in page on load
+});
+
+// Handle link clicks for page transitions
+document.querySelectorAll("a").forEach(link => {
+    link.addEventListener("click", function (event) {
+        if (this.getAttribute("target") === "_blank") return;
+
+        event.preventDefault(); // Stop instant navigation
+        let href = this.href;
+
+        // Create transition element
+        let overlay = document.createElement("div");
+        overlay.classList.add("transition-overlay");
+        document.body.appendChild(overlay);
+
+        // Trigger expanding circle effect
+        setTimeout(() => {
+            overlay.classList.add("expand");
+        }, 90);
+        // Optional: Clean up the overlay after the animation duration
+        setTimeout(() => {
+            overlay.remove();
+        }, 1000);
+
+        // Navigate after transition
+        setTimeout(() => {
+            window.location.href = href;
+        }, 890);
+    });
+});
+
+
+
+// Fade-In Animation on Scroll
+document.addEventListener("DOMContentLoaded", function () {
+    const fadeElements = document.querySelectorAll(".fade-in");
+
+    const checkVisibility = () => {
+        fadeElements.forEach((element) => {
+            const elementTop = element.getBoundingClientRect().top;
+            const elementBottom = element.getBoundingClientRect().bottom;
+            const isVisible = elementTop < window.innerHeight && elementBottom >= 0;
+
+            if (isVisible) {
+                element.classList.add("visible");
+            }
+        });
+    };
+
+    window.addEventListener("scroll", checkVisibility);
+    checkVisibility(); // Check on page load
+});
+document.addEventListener("DOMContentLoaded", function() {
+    let companies = [];
+    // Fetch company list for autocomplete and suggestions
+    fetch("/get-companies")
+      .then(res => res.json())
+      .then(data => {
+        companies = data;
+
+        // Show 8 random suggestions from the company list
+        const suggestionsDiv = document.querySelector('.suggestions-list');
+        if (suggestionsDiv) {
+            suggestionsDiv.innerHTML = '';
+            const shuffled = companies.sort(() => 0.5 - Math.random());
+            const randomSuggestions = shuffled.slice(0, 8);
+            randomSuggestions.forEach(company => {
+                const span = document.createElement('span');
+                span.className = 'suggestion';
+                // Use company name or ticker as needed
+                span.textContent = company.name || company["Company Name"] || company.ticker || company["Yahoo Finance Ticker"];
+                span.addEventListener('click', function() {
+                    const searchBox = document.getElementById("home-search-box");
+                    if (searchBox) {
+                        searchBox.value = this.textContent;
+                        searchBox.focus();
+                    }
+                });
+                suggestionsDiv.appendChild(span);
+            });
+        }
+      });
+
+    const searchBox = document.getElementById("home-search-box");
+    if (searchBox) {
+        searchBox.addEventListener("keydown", async function(e) {
+            if (e.key === "Enter") {
+                const query = searchBox.value.trim();
+                localStorage.setItem('selectedCompany', query);
+                try {
+                    const res = await fetch(`/api/lookup-symbol?query=${encodeURIComponent(query)}`);
+                    const data = await res.json();
+                    if (data.symbol) {
+                        window.location.href = `/fundamentals?symbol=${encodeURIComponent(data.symbol)}`;
+                    } else {
+                        showMessage("Company not found", true);
+                    }
+                } catch {
+                    showMessage("Error looking up symbol", true);
+                }
+            }
+        });
+    }
+});
+document.addEventListener("DOMContentLoaded", function() {
+    if (!localStorage.getItem('marketmind_tutorial_shown')) {
+        introJs().setOptions({
+            nextLabel: 'Next',
+            prevLabel: 'Back',
+            doneLabel: 'Done',
+            skipLabel: 'Skip',
+            showProgress: true,
+            showBullets: false,
+            exitOnOverlayClick: false,
+            tooltipClass: 'custom-introjs-tooltip',
+        }).oncomplete(function() {
+            localStorage.setItem('marketmind_tutorial_shown', 'yes');
+        }).onexit(function() {
+            localStorage.setItem('marketmind_tutorial_shown', 'yes');
+        }).start();
+    }
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    initializeNewsletterForm();
+    // Other page-specific code...
+});
+span.addEventListener('click', function() {
+    const searchBox = document.getElementById("home-search-box");
+    if (searchBox) {
+        searchBox.value = this.textContent;
+        searchBox.focus();
+        // Store the selected company in localStorage
+        localStorage.setItem('selectedCompany', this.textContent);
+    }
+});

static/js/legal.js

@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    // Set dark mode on by default
+    darkModeToggle.checked = true;
+    document.body.classList.add("dark-mode");
+    updateToggleIcon();
+
+    function updateToggleIcon() {
+        if (darkModeToggle.checked) {
+            toggleIcon.innerHTML = '☾'; // Moon
+        } else {
+            toggleIcon.innerHTML = '☀'; // Sun
+        }
+    }
+
+    darkModeToggle.addEventListener("change", function() {
+        document.body.classList.toggle("dark-mode");
+        updateToggleIcon();
+    });
+});

static/js/login.js

@@ -0,0 +1,295 @@
+import { firebaseAuth , initializeFirebase } from './firebase-config.js';
+import { onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js";
+
+document.addEventListener("DOMContentLoaded", async function () {
+    // Always initialize Firebase first!
+    await initializeFirebase();
+    const emailInput = document.getElementById("email");
+    const passwordInput = document.getElementById("password");
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    // Create feedback containers
+    const emailFeedback = document.createElement("div");
+    const passwordFeedback = document.createElement("div");
+    emailFeedback.style.color = "red";
+    passwordFeedback.style.color = "red";
+    emailInput.insertAdjacentElement("afterend", emailFeedback);
+    passwordInput.insertAdjacentElement("afterend", passwordFeedback);
+
+    // Email validation
+    emailInput.addEventListener("input", () => {
+        const emailValue = emailInput.value;
+        if (!emailRegex.test(emailValue)) {
+            emailFeedback.textContent = "Invalid email format";
+            emailInput.style.border = "2px solid red";
+        } else if (emailValue.length < 5 || emailValue.length > 50) {
+            emailFeedback.textContent = "Email must be between 5 and 50 characters";
+            emailInput.style.border = "2px solid orange";
+        } else {
+            emailFeedback.textContent = "";
+            emailInput.style.border = "2px solid #0FFF50";
+        }
+    });
+
+    // Password strength checker
+    passwordInput.addEventListener("input", () => {
+        const pwd = passwordInput.value;
+        let strength = 0;
+        if (pwd.length >= 8) strength++;
+        if (/[A-Z]/.test(pwd)) strength++;
+        if (/[a-z]/.test(pwd)) strength++;
+        if (/\d/.test(pwd)) strength++;
+        if (/[@$!%*?&]/.test(pwd)) strength++;
+
+        if (pwd.length < 8 || pwd.length > 20) {
+            passwordFeedback.textContent = "Password must be 8–20 characters";
+            passwordInput.style.border = "2px solid red";
+            passwordFeedback.style.color = "red";
+        } else if (strength <= 2) {
+            passwordFeedback.textContent = "Weak password";
+            passwordInput.style.border = "2px solid red";
+            passwordFeedback.style.color = "red";
+        } else if (strength === 3 || strength === 4) {
+            passwordFeedback.textContent = "Moderate password";
+            passwordInput.style.border = "2px solid orange";
+            passwordFeedback.style.color = "orange";
+        } else {
+            passwordFeedback.textContent = "Strong password";
+            passwordInput.style.border = "2px solid #0FFF50";
+            passwordFeedback.style.color = "#0FFF50";
+        }
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    const darkModeToggle = document.getElementById("theme-toggle-checkbox");
+
+    // Set the toggle to checked (on) by default
+    darkModeToggle.checked = true;
+
+    // Apply dark mode on page load
+    document.body.classList.add("dark-mode");
+
+    // Add the existing event listener for toggling
+    darkModeToggle.addEventListener("change", function () {
+        document.body.classList.toggle("dark-mode");
+
+        // Update chart colors if charts exist
+        updateChartColors(this.checked);
+    });
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+    // DOM Elements
+    const authForm = document.getElementById('auth-form');
+    const nameFields = document.getElementById('name-fields');
+    const firstNameInput = document.getElementById('first-name');
+    const lastNameInput = document.getElementById('last-name');
+    const emailInput = document.getElementById('email');
+    const passwordInput = document.getElementById('password');
+    const submitBtn = document.getElementById('submit-btn');
+    const messageDiv = document.getElementById('message');
+    const formTitle = document.getElementById('form-title');
+    const formSubtitle = document.getElementById('form-subtitle');
+    const toggleFormLink = document.getElementById('toggle-form');
+    const separatorText = document.getElementById('separator-text');
+    // const googleBtn = document.getElementById('google-btn');
+    // const appleBtn = document.getElementById('apple-btn');
+    const loadingSpinner = document.getElementById('loading-spinner');
+
+    // Flag to track current form mode (signup or login)
+    let isSignupMode = true;
+
+    // Toggle between signup and login forms
+    function toggleForm(e) {
+        if (e) e.preventDefault();
+        isSignupMode = !isSignupMode;
+
+        if (isSignupMode) {
+            formTitle.textContent = 'Create an account';
+            formSubtitle.innerHTML = 'Already have an account? <a href="#" id="toggle-form">Log in</a>';
+            submitBtn.textContent = 'Create account';
+            nameFields.style.display = 'flex';
+            separatorText.textContent = 'Or Register With';
+        } else {
+            formTitle.textContent = 'Welcome back';
+            formSubtitle.innerHTML = 'New user? <a href="#" id="toggle-form">Sign up</a>';
+            submitBtn.textContent = 'Login';
+            nameFields.style.display = 'none';
+            separatorText.textContent = 'Or Login With';
+        }
+
+        // Reattach event listener to the new toggle link
+        document.getElementById('toggle-form').addEventListener('click', toggleForm);
+
+        // Clear form and messages
+        authForm.reset();
+        messageDiv.textContent = '';
+        messageDiv.className = 'error-message';
+    }
+
+    // Initial toggle link setup
+    toggleFormLink.addEventListener('click', toggleForm);
+
+    // Show loading spinner
+    function showLoading() {
+        loadingSpinner.style.display = 'inline-block';
+        submitBtn.disabled = true;
+    }
+
+    // Hide loading spinner
+    function hideLoading() {
+        loadingSpinner.style.display = 'none';
+        submitBtn.disabled = false;
+    }
+
+    // Display error message
+    function showError(message) {
+        messageDiv.textContent = message;
+        messageDiv.className = 'error-message';
+    }
+
+    // Display success message
+    function showSuccess(message) {
+        messageDiv.textContent = message;
+        messageDiv.className = 'success-message';
+    }
+
+    // Handle redirection after successful authentication
+    function handleSuccessfulAuth() {
+        showSuccess('Authentication successful! Redirecting...');
+        setTimeout(() => {
+            // Redirect to home page
+            window.location.href = '/';
+        }, 2000);
+    }
+
+    // Form submission handler
+    authForm.addEventListener('submit', function (e) {
+        e.preventDefault();
+
+        const email = emailInput.value.trim();
+        const password = passwordInput.value.trim();
+
+        // Validate form
+        if (!email || !password) {
+            showError('Please fill in all required fields');
+            return;
+        }
+
+        if (isSignupMode && (!firstNameInput.value.trim() || !lastNameInput.value.trim())) {
+            showError('Please provide both first and last name');
+            return;
+        }
+
+        showLoading();
+
+        if (isSignupMode) {
+            // Signup with email and password
+            const firstName = firstNameInput.value.trim();
+            const lastName = lastNameInput.value.trim();
+
+            firebaseAuth.signUp(email, password, firstName, lastName)
+                .then(() => {
+                    hideLoading();
+                    handleSuccessfulAuth();
+                })
+                .catch((error) => {
+                    hideLoading();
+
+                    switch (error.code) {
+                        case 'auth/email-already-in-use':
+                            showError('Email is already in use. Try logging in instead.');
+                            break;
+                        case 'auth/invalid-email':
+                            showError('Please enter a valid email address.');
+                            break;
+                        case 'auth/weak-password':
+                            showError('Password is too weak. Use at least 6 characters.');
+                            break;
+                        default:
+                            showError('An error occurred during signup. Please try again.');
+                    }
+                });
+        } else {
+            // Login with email and password
+            firebaseAuth.signIn(email, password)
+                .then(() => {
+                    hideLoading();
+                    handleSuccessfulAuth();
+                })
+                .catch((error) => {
+                    hideLoading();
+
+                    switch (error.code) {
+                        case 'auth/user-not-found':
+                        case 'auth/wrong-password':
+                            showError('Invalid email or password.');
+                            break;
+                        case 'auth/too-many-requests':
+                            showError('Too many failed login attempts. Try again later.');
+                            break;
+                        default:
+                            showError('Login failed. Please try again.');
+                    }
+                });
+        }
+    });
+
+//     // Google Sign-In
+//     googleBtn.addEventListener('click', function () {
+//     showLoading();
+
+//     firebaseAuth.signInWithGoogle()
+//         .then(() => {
+//             hideLoading();
+//             handleSuccessfulAuth();
+//         })
+//         .catch((error) => {
+//             hideLoading();
+
+//             if (error.code === 'auth/popup-closed-by-user') {
+//                 showError('Sign-in popup was closed. Please try again.');
+//             } else if (error.code === 'auth/account-exists-with-different-credential') {
+//                 showError('An account already exists with the same email address but different sign-in credentials.');
+//             } else if (error.code === 'auth/unauthorized-domain') {
+//                 showError('Unauthorized domain. Please check your Firebase redirect URI settings.');
+//             } else {
+//                 showError('An error occurred during Google sign-in. Please try again.');
+//             }
+//         });
+// });
+
+//     // Apple Sign-In
+//     appleBtn.addEventListener('click', function () {
+//         showLoading();
+
+//         firebaseAuth.signInWithApple()
+//             .then(() => {
+//                 hideLoading();
+//                 handleSuccessfulAuth();
+//             })
+//             .catch((error) => {
+//                 hideLoading();
+
+//                 if (error.code === 'auth/popup-closed-by-user') {
+//                     showError('Sign-in popup was closed. Please try again.');
+//                 } else {
+//                     showError('An error occurred during Apple sign-in. Please try again.');
+//                 }
+//             });
+//     });
+
+    // Monitor auth state
+    onAuthStateChanged(firebaseAuth.auth, (user) => {
+        const messageDiv = document.getElementById('loginMessage');
+        if (user) {
+            if (window.location.pathname === '/login') {
+                messageDiv.textContent = 'You are already logged in. Please return to the home page.';
+            }
+        } else {
+            messageDiv.textContent = '';
+        }
+    });
+});

static/js/movers.js

@@ -0,0 +1,477 @@
+import { doc, getDoc, setDoc, collection } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js";
+import { db, getUserIdAsync, initializeFirebase } from './firebase-config.js';
+
+// To get a collection reference:
+let favoritesCollection;
+document.addEventListener("DOMContentLoaded", async function() {
+    await initializeFirebase(); // Ensure Firebase is initialized
+    favoritesCollection = collection(db, "Bookmarks"); // Now db is valid
+
+});
+document.addEventListener("DOMContentLoaded", function() {
+    // Dark mode toggle
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkModeToggle.checked) {
+            toggleIcon.innerHTML = '☾'; // Moon
+        } else {
+            toggleIcon.innerHTML = '☀'; // Sun
+        }
+    }
+    // Initial state
+    
+
+    // Set the toggle to checked (on) by default
+    darkModeToggle.checked = true;
+    updateToggleIcon();
+    // Apply dark mode on page load
+    document.body.classList.add("dark-mode");
+
+    darkModeToggle.addEventListener("change", function() {
+      document.body.classList.toggle("dark-mode");
+      if (typeof updateChartColors === "function") updateChartColors(this.checked);
+      updateToggleIcon();
+    });
+
+    // Populate the dropdown with company options
+    fetch("/get-companies")
+        .then(res => res.json())
+        .then(companies => {
+            const select = document.getElementById("fundamentals-symbol");
+            if (!select) return;
+            companies.forEach(company => {
+                const option = document.createElement("option");
+                option.value = company["Yahoo Finance Ticker"];
+                option.textContent = `${company["Company Name"]} (${company["Yahoo Finance Ticker"]})`;
+                select.appendChild(option);
+            });
+        });
+
+    // Fade-in pge on load
+    document.body.classList.add("loaded");
+});
+
+// Smooth page transitions for internal links
+document.querySelectorAll("a").forEach(link => {
+    link.addEventListener("click", function (event) {
+        if (this.getAttribute("target") === "_blank") return;
+        event.preventDefault();
+        let href = this.href;
+        let overlay = document.createElement("div");
+        overlay.classList.add("transition-overlay");
+        document.body.appendChild(overlay);
+        setTimeout(() => { overlay.classList.add("active"); }, 90);
+        setTimeout(() => { overlay.remove(); }, 1000);
+        setTimeout(() => { window.location.href = href; }, 890);
+    });
+});
+
+// --- GRAPH MODE ONLY ---
+
+document.addEventListener("DOMContentLoaded", function () {
+    const fetchBtn = document.getElementById('fetch');
+    const symbolSelect = document.getElementById('fundamentals-symbol');
+    const startInput = document.getElementById('start-date');
+    const endInput = document.getElementById('end-date');
+    const chartDiv = document.getElementById('stockChart');
+    const messageContainer = document.getElementById('message-container');
+
+    if (fetchBtn) {
+        fetchBtn.addEventListener('click', async function () {
+            const symbol = symbolSelect.value;
+            const start = startInput.value;
+            const end = endInput.value;
+            if (!symbol) {
+                showMessage("Please select a company from the dropdown.", true);
+                return;
+            }
+            if (!start || !end) {
+                showMessage("Please select both start and end dates.", true);
+                return;
+            }
+            messageContainer.style.display = "none";
+            if (chartDiv) chartDiv.innerHTML = "<div class='loading-spinner'></div>";
+
+            let url = `/api/historical?symbol=${encodeURIComponent(symbol)}`;
+            if (start && end) url += `&start=${start}&end=${end}`;
+            try {
+                const res = await fetch(url);
+                const data = await res.json();
+                if (data.error) {
+                    showMessage(data.error, true);
+                    return;
+                }
+                if (!data.history || !Array.isArray(data.history) || !data.history.length) {
+                    if (chartDiv) chartDiv.innerHTML = "<p>No data available for the selected range.</p>";
+                    return;
+                }
+                renderStockChart(data.history, symbol);
+                renderStockChart(currentView);
+            } catch (e) {
+                showMessage("Failed to fetch stock data.", true);
+            }
+        });
+    }
+    fetch('/api/market-movers')
+    .then(res => res.json())
+    .then(data => {
+        if (data.error) {
+            document.getElementById('top-gainers').innerHTML = "<li>Error loading gainers</li>";
+            document.getElementById('top-losers').innerHTML = "<li>Error loading losers</li>";
+            return;
+        }
+        // Gainers
+        const gainersList = document.getElementById('top-gainers');
+        gainersList.innerHTML = "";
+        data.gainers.forEach(g => {
+            const pct = (g.pct_change !== undefined && g.pct_change !== null) ? g.pct_change + "%" : "N/A";
+            const price = (g.last_close !== undefined && g.last_close !== null) ? "₹" + g.last_close : "N/A";
+            gainersList.innerHTML += `<li>
+                <span>${g.symbol}</span>
+                <span class="up">▲ ${pct}</span>
+                <span>${price}</span>
+            </li>`;
+        });
+        // Losers
+        const losersList = document.getElementById('top-losers');
+        losersList.innerHTML = "";
+        data.losers.forEach(l => {
+            const pct = (l.pct_change !== undefined && l.pct_change !== null) ? l.pct_change + "%" : "N/A";
+            const price = (l.last_close !== undefined && l.last_close !== null) ? "₹" + l.last_close : "N/A";
+            losersList.innerHTML += `<li>
+                <span>${l.symbol}</span> 
+                <span class="down">▼ ${pct}</span> 
+                <span>${price}</span>
+            </li>`;
+        });
+    })
+    .catch(() => {
+        document.getElementById('top-gainers').innerHTML = "<li>Error loading gainers</li>";
+        document.getElementById('top-losers').innerHTML = "<li>Error loading losers</li>";
+    });
+});
+
+function renderStockChart(history, symbol) {
+    const chartDiv = document.getElementById('stockChart');
+    if (!chartDiv || !Array.isArray(history) || !history.length) return;
+    const plotBg = document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff';
+    const paperBg = plotBg;
+    const gridColor = document.body.classList.contains("dark-mode") ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)';
+    const fontColor = document.body.classList.contains("dark-mode") ? "#fff" : "#333";
+    const dates = history.map(d => d.Date || d.date);
+    const closes = history.map(d => d.Close ?? d.close);
+    const trace = {
+        x: dates,
+        y: closes,
+        type: 'scatter',
+        mode: 'lines+markers',
+        name: 'Close Price',
+        fill: 'tozeroy',
+        line: { color: '#2196F3' }
+    };
+    const layout = {
+        title: `${symbol} Price Chart`,
+        xaxis: { title: 'Date', gridcolor: gridColor },
+        yaxis: { title: 'Close Price', gridcolor: gridColor },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: plotBg,
+        paper_bgcolor: paperBg,
+        font: { color: fontColor }
+    };
+    Plotly.newPlot(chartDiv, [trace], layout, {responsive: true});
+}
+
+
+function showMessage(message, isError = false) {
+    const messageContainer = document.getElementById("message-container");
+    if (!messageContainer) return;
+    messageContainer.textContent = message;
+    messageContainer.style.display = "block";
+    messageContainer.style.backgroundColor = isError ? "#ffebee" : "#e8f5e9";
+    messageContainer.style.color = isError ? "#c62828" : "#2e7d32";
+    messageContainer.style.border = isError ? "1px solid #c62828" : "1px solid #2e7d32";
+    setTimeout(() => {
+        messageContainer.style.display = "none";
+    }, 5000);
+}
+let gainersChart, losersChart;
+
+function showGainersPlotly(gainers) {
+    const symbols = gainers.map(g => g.symbol);
+    const changes = gainers.map(g => g.pct_change);
+    const trace = {
+        x: symbols,
+        y: changes,
+        type: 'bar',
+        marker: { color: 'rgba(34,197,94,0.7)' }
+    };
+    const layout = {
+        title: 'Top Gainers (% Change)',
+        xaxis: { title: 'Symbol' },
+        yaxis: { title: '% Change' },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff',
+        paper_bgcolor: document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff',
+        font: { color: document.body.classList.contains("dark-mode") ? "#fff" : "#333" }
+    };
+    Plotly.newPlot('gainers-plotly', [trace], layout, {responsive: true});
+}
+window.showGainersPlotly = showGainersPlotly; 
+function showLosersPlotly(losers) {
+    const symbols = losers.map(l => l.symbol);
+    const changes = losers.map(l => l.pct_change);
+
+    const trace = {
+        x: symbols,
+        y: changes,
+        type: 'bar',
+        marker: { color: 'rgba(239,68,68,0.7)' }
+    };
+    const layout = {
+        title: 'Top Losers (% Change)',
+        xaxis: { title: 'Symbol' },
+        yaxis: { title: '% Change' },
+        margin: { t: 40, l: 40, r: 40, b: 40 },
+        plot_bgcolor: document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff',
+        paper_bgcolor: document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff',
+        font: { color: document.body.classList.contains("dark-mode") ? "#fff" : "#333" }
+    };
+    Plotly.newPlot('losers-plotly', [trace], layout, {responsive: true});
+}
+window.showLosersPlotly = showLosersPlotly; 
+
+// Toggle logic for list/graph view
+document.getElementById('list-view-btn').addEventListener('click', function() {
+    document.getElementById('top-gainers').style.display = '';
+    document.getElementById('top-losers').style.display = '';
+    document.getElementById('gainers-plotly').style.display = 'none';
+    document.getElementById('losers-plotly').style.display = 'none';
+    this.classList.add('active');
+    document.getElementById('graph-view-btn').classList.remove('active');
+});
+document.getElementById('graph-view-btn').addEventListener('click', function() {
+    document.getElementById('top-gainers').style.display = 'none';
+    document.getElementById('top-losers').style.display = 'none';
+    document.getElementById('gainers-plotly').style.display = '';
+    document.getElementById('losers-plotly').style.display = '';
+    this.classList.add('active');
+    document.getElementById('list-view-btn').classList.remove('active');
+    // Draw charts with latest data
+    if (window.latestGainers && window.latestLosers) {
+        showGainersPlotly(window.latestGainers);
+        showLosersPlotly(window.latestLosers);
+    }
+});
+
+// After fetching market movers, store for chart use
+fetch('/api/market-movers')
+    .then(res => res.json())
+    .then(data => {
+        if (data.error) {
+            document.getElementById('top-gainers').innerHTML = "<li>Error loading gainers</li>";
+            document.getElementById('top-losers').innerHTML = "<li>Error loading losers</li>";
+            return;
+        }
+        window.latestGainers = data.gainers;
+        window.latestLosers = data.losers;
+        // ...existing list rendering code...
+        const gainersList = document.getElementById('top-gainers');
+        gainersList.innerHTML = "";
+        data.gainers.forEach(g => {
+            const pct = (g.pct_change !== undefined && g.pct_change !== null) ? g.pct_change + "%" : "N/A";
+            const price = (g.last_close !== undefined && g.last_close !== null) ? "₹" + g.last_close : "N/A";
+            gainersList.innerHTML += `<li>
+                <span>${g.symbol}</span>
+                <span class="up">▲ ${pct}</span>
+                <span>${price}</span>
+            </li>`;
+        });
+        const losersList = document.getElementById('top-losers');
+        losersList.innerHTML = "";
+        data.losers.forEach(l => {
+            const pct = (l.pct_change !== undefined && l.pct_change !== null) ? l.pct_change + "%" : "N/A";
+            const price = (l.last_close !== undefined && l.last_close !== null) ? "₹" + l.last_close : "N/A";
+            losersList.innerHTML += `<li>
+                <span>${l.symbol}</span> 
+                <span class="down">▼ ${pct}</span> 
+                <span>${price}</span>
+            </li>`;
+        });
+    })
+    .catch(() => {
+        document.getElementById('top-gainers').innerHTML = "<li>Error loading gainers</li>";
+        document.getElementById('top-losers').innerHTML = "<li>Error loading losers</li>";
+    });
+document.addEventListener("DOMContentLoaded", function () {
+    fetch('/api/market-movers')
+        .then(res => res.json())
+        .then(data => {
+            const tickerDiv = document.getElementById('ticker-content-indian');
+            if (!tickerDiv) return;
+            let tickerHTML = '';
+
+            if (data.gainers && data.gainers.length) {
+                tickerHTML += `<span class="ticker-label gainers-label">Top Gainers:</span> `;
+                tickerHTML += data.gainers.map(g =>
+                    `<span class="ticker-item">
+                        ${g.symbol} 
+                        <span class="up">▲${g.pct_change}%</span> 
+                        <span class="gainer-price">₹${g.last_close}</span>
+                    </span>`
+                ).join(' <span class="ticker-sep">|</span>');
+                tickerHTML += ' &nbsp; ';
+            }
+
+            if (data.losers && data.losers.length) {
+                tickerHTML += `<span class="ticker-label losers-label">Top Losers:</span> `;
+                tickerHTML += data.losers.map(l =>
+                    `<span class="ticker-item">
+                        ${l.symbol} 
+                        <span class="down">▼${l.pct_change}%</span> 
+                        <span class="loser-price">₹${l.last_close}</span>
+                    </span>`
+                ).join(' <span class="ticker-sep">|</span> ');
+            }
+
+            tickerDiv.innerHTML = tickerHTML;
+        })
+        .catch(() => {
+            const tickerDiv = document.getElementById('ticker-content-indian');
+            if (tickerDiv) tickerDiv.textContent = "Unable to load market movers.";
+        });
+});
+
+document.addEventListener("DOMContentLoaded", async function () {
+    const tableBody = document.getElementById('favorites-tbody');
+    let bookmarks = [];
+    await initializeFirebase(); 
+    // Get user ID
+    const userId = await getUserIdAsync();
+
+    // Fetch bookmarks from Firebase
+    async function fetchBookmarks() {
+        const docRef = doc(db, "Bookmarks", userId);
+        const docSnap = await getDoc(docRef);
+        if (docSnap.exists()) {
+            bookmarks = docSnap.data().symbols || [];
+        } else {
+            bookmarks = [];
+        }
+    }
+
+    // Save bookmarks to Firebase
+    async function saveBookmarks() {
+        const docRef = doc(db, "Bookmarks", userId);
+        await setDoc(docRef, { symbols: bookmarks }, { merge: true });
+    }
+
+    // Fetch companies from MongoDB
+    async function fetchCompanies() {
+        const res = await fetch("/get-companies");
+        return await res.json();
+    }
+
+    // Fetch current price for a ticker (implement this endpoint in your backend)
+    async function fetchCurrentPrice(ticker) {
+        try {
+            const res = await fetch(`/api/price?ticker=${encodeURIComponent(ticker)}`);
+            const data = await res.json();
+            return data.price ?? "N/A";
+        } catch {
+            return "N/A";
+        }
+    }
+
+    // Render the table
+async function renderTable() {
+    console.log("renderTable called");
+    tableBody.innerHTML = '<tr><td colspan="4">Loading...</td></tr>';
+    const companies = await fetchCompanies();
+
+    console.log("Companies fetched:", companies);
+    if (!companies || !companies.length) {
+        tableBody.innerHTML = '<tr><td colspan="4">No companies found.</td></tr>';
+        return;
+    }
+    // Fetch all prices in parallel
+    const prices = await Promise.all(companies.map(c =>
+        fetchCurrentPrice(c["Yahoo Finance Ticker"])
+    ));
+    await fetchBookmarks();
+    console.log("Prices fetched:", prices);
+
+    // Combine companies and prices for easier sorting
+    const companiesWithPrices = companies.map((company, idx) => ({
+        ...company,
+        price: prices[idx],
+        isBookmarked: bookmarks.includes(company["Yahoo Finance Ticker"])
+    }));
+
+    // Sort: bookmarked first, then others
+    companiesWithPrices.sort((a, b) => {
+        if (a.isBookmarked === b.isBookmarked) return 0;
+        return a.isBookmarked ? -1 : 1;
+    });
+
+    tableBody.innerHTML = '';
+    companiesWithPrices.forEach((company) => {
+        const ticker = company["Yahoo Finance Ticker"];
+        const isBookmarked = company.isBookmarked;
+        const price = company.price;
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>
+                <button class="bookmark-btn${isBookmarked ? ' bookmarked' : ''}" data-ticker="${ticker}" title="Bookmark">
+                    ${isBookmarked ? '★' : '☆'}
+                </button>
+            </td>
+            <td>${company["Company Name"]}</td>
+            <td>${ticker}</td>
+            <td>${price !== undefined ? '₹' + price : 'N/A'}</td>
+        `;
+        tableBody.appendChild(row);
+    });
+} window.renderTable = renderTable; 
+
+    // Handle bookmark click
+    tableBody.addEventListener('click', async function (e) {
+        if (e.target.classList.contains('bookmark-btn')) {
+            const ticker = e.target.getAttribute('data-ticker');
+            if (bookmarks.includes(ticker)) {
+                bookmarks = bookmarks.filter(t => t !== ticker);
+            } else {
+                bookmarks.push(ticker);
+            }
+            await saveBookmarks();
+            renderTable();
+        }
+    });
+
+    renderTable();
+});
+document.addEventListener("DOMContentLoaded", function() {
+    if (!localStorage.getItem('movers_tutorial_shown')) {
+        introJs().setOptions({
+            nextLabel: 'Next',
+            prevLabel: 'Back',
+            doneLabel: 'Done',
+            skipLabel: 'Skip',
+            showProgress: true,
+            showBullets: false,
+            exitOnOverlayClick: false,
+            tooltipClass: 'custom-introjs-tooltip',
+        }).oncomplete(function() {
+            localStorage.setItem('movers_tutorial_shown', 'yes');
+        }).onexit(function() {
+            localStorage.setItem('movers_tutorial_shown', 'yes');
+        }).start();
+    }
+});
+
+import { initializeNewsletterForm } from './newsletter.js';
+document.addEventListener("DOMContentLoaded", function () {
+    initializeNewsletterForm();
+    // Other page-specific code...
+});

static/js/news.js

@@ -0,0 +1,139 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkModeToggle.checked) {
+            toggleIcon.innerHTML = '☾'; // Moon
+        } else {
+            toggleIcon.innerHTML = '☀'; // Sun
+        }
+    }
+
+    // Initial state
+    
+
+    // Set the toggle to checked (on) by default
+    darkModeToggle.checked = true;
+    updateToggleIcon();
+    // Apply dark mode on page load
+    document.body.classList.add("dark-mode");
+
+    darkModeToggle.addEventListener("change", function() {
+      document.body.classList.toggle("dark-mode");
+      if (typeof updateChartColors === "function") updateChartColors(this.checked);
+      updateToggleIcon();
+    });
+});      
+// Page transition 
+document.addEventListener("DOMContentLoaded", function () {
+document.body.classList.add("loaded"); // Fade-in page on load
+});
+
+document.querySelectorAll("a").forEach(link => {
+    link.addEventListener("click", function (event) {
+        if (this.getAttribute("target") === "_blank") return;
+
+        event.preventDefault(); // Stop instant navigation
+        let href = this.href; 
+
+        // Create transition element
+        let overlay = document.createElement("div");
+        overlay.classList.add("transition-overlay");
+        document.body.appendChild(overlay);
+
+        // Trigger expanding circle effect
+        setTimeout(() => {
+            overlay.classList.add("active");
+        }, 90);
+        setTimeout(() => {
+            overlay.remove();
+        }, 1000);    
+
+        // Navigate after transition
+        setTimeout(() => {
+            window.location.href = href;
+        }, 890);
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    const apiUrl = `/api/news?query`;
+    const newsContainer = document.getElementById("news-container");
+    const refreshBtn = document.getElementById("refresh-news-btn");
+
+    function loadNews() {
+        // Clear previous news
+        newsContainer.innerHTML = "";
+        // Add loading spinner
+        const loadingSpinner = document.createElement("div");
+        loadingSpinner.classList.add("loading-spinner");
+        newsContainer.appendChild(loadingSpinner);
+
+        fetch(apiUrl)
+            .then(response => response.text())
+            .then(str => {
+                newsContainer.removeChild(loadingSpinner);
+                const parser = new window.DOMParser();
+                const xml = parser.parseFromString(str, "text/xml");
+                const items = xml.querySelectorAll("item");
+                if (items.length === 0) {
+                    newsContainer.innerHTML = "<p>No news found for this query.</p>";
+                    return;
+                }
+                items.forEach(item => {
+                    const title = item.querySelector("title")?.textContent || "No title";
+                    const link = item.querySelector("link")?.textContent || "#";
+                    const description = item.querySelector("description")?.textContent || "No description available.";
+                    const pubDate = item.querySelector("pubDate")?.textContent || "";
+
+                    const newsArticle = document.createElement("div");
+                    newsArticle.classList.add("news-article");
+                    newsArticle.innerHTML = `
+                        <h3>${title}</h3>
+                        <p>${description}</p>
+                        <small>${pubDate}</small><br>
+                        <a href="${link}" target="_blank">Read more</a>
+                    `;
+                    newsContainer.appendChild(newsArticle);
+                });
+            })
+            .catch((error) => {
+                console.error("Error fetching news:", error);
+                newsContainer.innerHTML = "<p>Failed to load news. Please try again later.</p>";
+            });
+    }
+
+    // Initial load
+    loadNews();
+
+    // Refresh button handler
+    if (refreshBtn) {
+        refreshBtn.addEventListener("click", function () {
+            loadNews();
+        });
+    }
+});
+document.addEventListener("DOMContentLoaded", function() {
+    if (!localStorage.getItem('news_tutorial_shown')) {
+        introJs().setOptions({
+            nextLabel: 'Next',
+            prevLabel: 'Back',
+            doneLabel: 'Done',
+            skipLabel: 'Skip',
+            showProgress: true,
+            showBullets: false,
+            exitOnOverlayClick: false,
+            tooltipClass: 'custom-introjs-tooltip'
+        }).oncomplete(function() {
+            localStorage.setItem('news_tutorial_shown', 'yes');
+        }).onexit(function() {
+            localStorage.setItem('news_tutorial_shown', 'yes');
+        }).start();
+    }
+});
+import { initializeNewsletterForm } from './newsletter.js';
+document.addEventListener("DOMContentLoaded", function () {
+    initializeNewsletterForm();
+    // Other page-specific code...
+});

static/js/newsletter.js

@@ -0,0 +1,34 @@
+import { doc, setDoc } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js";
+import { db, getUserIdAsync } from './firebase-config.js';
+
+export function initializeNewsletterForm() {
+    const newsletterForm = document.getElementById("newsletter-form");
+    const newsletterEmail = document.getElementById("newsletter-email");
+
+    if (newsletterForm) {
+        newsletterForm.addEventListener("submit", async function (e) {
+            e.preventDefault(); // Prevent form from refreshing the page
+
+            const email = newsletterEmail.value.trim();
+            if (!email) {
+                alert("Please enter a valid email address.");
+                return;
+            }
+
+            try {
+                // Get the user ID
+                const userId = await getUserIdAsync();
+
+                // Save the email to Firebase under the user's document
+                const docRef = doc(db, "NewsletterSubscriptions", userId);
+                await setDoc(docRef, { email: email }, { merge: true });
+
+                alert("Thank you for subscribing to our newsletter!");
+                newsletterEmail.value = ""; // Clear the input field
+            } catch (error) {
+                console.error("Error saving email to Firebase:", error);
+                alert("Failed to subscribe. Please try again later.");
+            }
+        });
+    }
+}

static/js/predict.js

@@ -0,0 +1,574 @@
+// Page Transition
+document.addEventListener("DOMContentLoaded", function () {
+    document.body.classList.add("loaded"); // Fade-in page on load
+});
+
+// Handle link clicks for page transitions
+document.querySelectorAll("a").forEach(link => {
+    link.addEventListener("click", function (event) {
+        if (this.getAttribute("target") === "_blank") return;
+
+        event.preventDefault(); // Stop instant navigation
+        let href = this.href;
+
+        // Create transition element
+        let overlay = document.createElement("div");
+        overlay.classList.add("transition-overlay");
+        document.body.appendChild(overlay);
+
+        // Trigger expanding circle effect
+        setTimeout(() => {
+            overlay.classList.add("expand");
+        }, 90);
+        // Optional: Clean up the overlay after the animation duration
+        setTimeout(() => {
+            overlay.remove();
+        }, 1000);
+
+        // Navigate after transition
+        setTimeout(() => {
+            window.location.href = href;
+        }, 890);
+    });
+});
+
+// Fade-In Animation on Scroll
+document.addEventListener("DOMContentLoaded", function () {
+    const fadeElements = document.querySelectorAll(".fade-in");
+
+    const checkVisibility = () => {
+        fadeElements.forEach((element) => {
+            const elementTop = element.getBoundingClientRect().top;
+            const elementBottom = element.getBoundingClientRect().bottom;
+            const isVisible = elementTop < window.innerHeight && elementBottom >= 0;
+
+            if (isVisible) {
+                element.classList.add("visible");
+            }
+        });
+    };
+
+    window.addEventListener("scroll", checkVisibility);
+    checkVisibility(); // Check on page load
+});
+
+
+// Page transition & dark mode toggle
+document.addEventListener("DOMContentLoaded", function () {
+    document.body.classList.add("loaded");
+
+    const darkToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkToggle && toggleIcon) {
+            if (darkToggle.checked) {
+                toggleIcon.innerHTML = '&#9790;'; // Moon
+                toggleIcon.style.color = "#4a8fdf";
+            } else {
+                toggleIcon.innerHTML = '&#9728;'; // Sun
+                toggleIcon.style.color = "#FFD600";
+            }
+        }
+    }
+
+    if (darkToggle) {
+        darkToggle.checked = true;
+        document.body.classList.add("dark-mode");
+        updateToggleIcon();
+
+        darkToggle.addEventListener("change", () => {
+            document.body.classList.toggle("dark-mode");
+            updateToggleIcon();
+            updatePredictionChartColors();
+            
+        });
+    }
+
+    document.querySelectorAll("a").forEach(link => {
+        if (link.getAttribute("target") === "_blank") return;
+
+        link.addEventListener("click", function (event) {
+            event.preventDefault();
+            const overlay = document.createElement("div");
+            overlay.classList.add("transition-overlay");
+            document.body.appendChild(overlay);
+
+            setTimeout(() => overlay.classList.add("active"), 90);
+            setTimeout(() => overlay.remove(), 1000);
+            setTimeout(() => window.location.href = this.href, 890);
+        });
+    });
+    // Set min date for prediction input
+    const today = new Date();
+    const minDate = new Date(today);
+    minDate.setDate(today.getDate() + 6);
+    const maxDate = new Date(today);
+    maxDate.setMonth(today.getMonth() + 1);
+
+    function formatDate(d) {
+        const yyyy = d.getFullYear();
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return `${yyyy}-${mm}-${dd}`;
+    }
+
+    const predictionDateInput = document.getElementById('prediction-date');
+    predictionDateInput.min = formatDate(minDate);
+    predictionDateInput.max = formatDate(maxDate);
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    fetch("/get-companies")
+      .then(response => response.json())
+      .then(data => {
+        const select = document.getElementById("stock-select");
+        const seen = new Set(); // Track unique tickers
+        data.forEach(company => {
+          const ticker = company["Yahoo Finance Ticker"];
+          const name = company["Company Name"];
+          // Exclude NIFTY and SENSEX tickers and duplicates
+          if (ticker !== "^NSEI" && ticker !== "^BSESN" && !seen.has(ticker)) {
+            const option = document.createElement("option");
+            option.value = ticker;
+            option.textContent = name;
+            select.appendChild(option);
+            seen.add(ticker);
+          }
+        });
+      })
+      .catch(error => console.error("Error fetching companies:", error));
+});
+
+let predictionChart = null;
+function handleEpochsChange(select) {
+  const customInput = document.getElementById('custom-epochs');
+  if (select.value === 'custom') {
+    customInput.style.display = 'block';
+    customInput.focus();
+  } else {
+    customInput.style.display = 'none';
+  }
+}window.handleEpochsChange = handleEpochsChange;
+
+// Listen for the "Predict" button click and route prediction request based on radio button
+document.getElementById('predict-btn').addEventListener('click', async function (e) {
+    e.preventDefault();
+    const stockSymbol = document.getElementById('stock-select').value;
+    const predictionType = document.querySelector('input[name="data-source"]:checked').value;
+    const predictionDate = document.getElementById('prediction-date').value;
+
+    if (!stockSymbol) {
+        showMessage("Please select a stock", true);
+        return;
+    }
+
+    if (!predictionDate) {
+        showMessage("Please select a prediction date", true);
+        return;
+    }
+    // Date validation
+    const selected = new Date(predictionDate);
+    const today = new Date();
+    const min = new Date(today);
+    min.setDate(today.getDate() + 6); // 6 days minimum
+    const max = new Date(today);
+    max.setMonth(today.getMonth() + 1);
+
+    selected.setHours(0,0,0,0);
+    min.setHours(0,0,0,0);
+    max.setHours(0,0,0,0);
+
+    if (selected < min || selected > max) {
+        showMessage("Prediction date must be at least 6 days from today and at most 1 month from today.", true);
+        return;
+    }
+    let epochs;
+    const epochsSelect = document.getElementById('epochs');
+    if (epochsSelect.value === 'custom') {
+        epochs = document.getElementById('custom-epochs').value || 100;
+    } else {
+        epochs = epochsSelect.value;
+    }
+
+    // Show loading overlay and start progress
+    document.getElementById('loading-overlay').style.display = "flex";
+    updateProgress(0);
+
+    this.disabled = true;
+    this.textContent = "Predicting...";
+
+    let payload = {
+        ticker: stockSymbol,
+        type: predictionType,
+        prediction_date: predictionDate,
+        epochs: epochs
+    };
+
+    // Set progress duration based on prediction type
+    let progress = 0;
+    let intervalMs;
+    let maxProgress = 95;
+    if (predictionType === "both") {
+        // Double the time for both pipelines (~130 seconds)
+        intervalMs = 51000; // 100% / 130s = ~1% per 1.3s
+    } else if (predictionType === "news-sentiment") {
+        // About 79 seconds for sentiment pipeline
+        intervalMs = 27000; // 100% / 79s = ~1% per 0.79s
+    } else {
+        intervalMs = 18000; // ~65 seconds for single pipeline
+    }
+    let progressInterval = setInterval(() => {
+        if (progress < maxProgress) {
+            progress += 1;
+            updateProgress(progress);
+        }
+    }, intervalMs);
+
+    try {
+        const response = await fetch('/predict-result', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        clearInterval(progressInterval);
+        updateProgress(100);
+
+        const result = await response.json();
+
+        setTimeout(() => {
+            document.getElementById('loading-overlay').style.display = "none";
+        }, 400);
+
+        if (response.ok) {
+            displayPredictionResults(result);
+        } else {
+            showMessage(result.error || "Prediction failed", true);
+        }
+    } catch (error) {
+        clearInterval(progressInterval);
+        document.getElementById('loading-overlay').style.display = "none";
+        showMessage("An error occurred", true);
+    }
+
+    this.disabled = false;
+    this.textContent = "Predict Stock Price";
+});
+
+function updateProgress(percent) {
+    document.getElementById('progress-text').textContent = `Loading... ${percent}%`;
+}
+function displayPredictionResults(prediction) {
+    // If both, render two graphs in separate areas with space
+    if (prediction.historical && prediction.sentiment) {
+        document.getElementById('result-section').style.display = "block";
+        document.getElementById('result-stock-name').textContent = prediction.historical.stock;
+        document.getElementById('predicted-price').textContent = prediction.historical.predictedPrice;
+
+        // Clear and create two separate chart areas with spacing
+        const chartContainer = document.querySelector('.chart-container');
+        chartContainer.innerHTML = `
+            <div class="graph-area" id="graph-area-historical">
+                <h4 style="margin-bottom:12px;">Historical Only</h4>
+                <div id="prediction-chart-historical" style="height: 450px;"></div>
+            </div>
+            <div class="graph-area" id="graph-area-sentiment">
+                <h4 style="margin-bottom:12px;">With Sentiment</h4>
+                <div id="prediction-chart-sentiment" style="height: 450px;"></div>
+            </div>
+        `;
+
+        renderPredictionChart(prediction.historical, 'prediction-chart-historical', 'Historical Only');
+        renderPredictionChart(prediction.sentiment, 'prediction-chart-sentiment', 'With Sentiment');
+    } else {
+        // Single pipeline as before
+        document.getElementById('result-stock-name').textContent = prediction.stock;
+        document.getElementById('predicted-price').textContent = prediction.predictedPrice;
+        document.getElementById('result-section').style.display = "block";
+        renderPredictionChart(prediction, 'prediction-chart');
+    }
+}
+
+function renderPredictionChart(prediction, chartId = 'prediction-chart', customTitle = null) {
+    const data = [];
+
+    // Train data (from historicalData)
+    const trainLabels = prediction.historicalData.map(d => d.date);
+    const trainValues = prediction.historicalData.map(d => d.price);
+    data.push({
+        x: trainLabels,
+        y: trainValues,
+        mode: 'lines',
+        name: 'Train Data',
+        fill: 'tozeroy',
+        line: { color: 'rgba(74,143,223,1)' }
+    });
+
+    // Actual price (validation/test) from actualVsPredicted
+    const validLabels = prediction.actualVsPredicted.map(d => d.date);
+    const actualValues = prediction.actualVsPredicted.map(d => d.actual);
+    data.push({
+        x: validLabels,
+        y: actualValues,
+        mode: 'lines',
+        name: 'Actual Price',
+        fill: 'tozeroy',
+        line: { color: 'green', width: 2 }
+    });
+
+    // Predicted price (validation/test) from actualVsPredicted
+    const predictedValues = prediction.actualVsPredicted.map(d => d.predicted);
+    data.push({
+        x: validLabels,
+        y: predictedValues,
+        mode: 'lines',
+        name: 'Predicted Price',
+        fill: 'tozeroy',
+        line: { color: 'red', width: 3, dash: 'dot' }
+    });
+
+    // Future predictions
+    if (prediction.futureDates && prediction.futurePrices) {
+        data.push({
+            x: prediction.futureDates,
+            y: prediction.futurePrices,
+            mode: 'lines+markers',
+            name: 'Future Predictions',
+            fill: 'tozeroy',
+            line: { color: 'orange', width: 2, dash: 'dash' },
+            marker: { size: 8, color: 'orange' }
+        });
+    }
+
+    // Buy signals
+    if (prediction.buySignals && prediction.buySignals.points) {
+        const buyPoints = prediction.buySignals.points;
+        const buyReasons = prediction.buySignals.reasons || [];
+        const buyIndices = prediction.buyIndices || Array.from({length: buyPoints.length}, (_, i) => i);
+        const buyDates = buyIndices.map(idx => prediction.futureDates[idx] || '');
+
+        data.push({
+            x: buyDates,
+            y: buyPoints,
+            mode: 'markers',
+            name: 'Buy Signals',
+            marker: {
+                color: 'cyan',
+                size: 12,
+                symbol: 'star',
+                line: { width: 2, color: 'black' }
+            },
+            text: buyReasons,
+            hovertemplate: '<b>Buy Signal</b><br>Date: %{x}<br>Price: ₹%{y:,.2f}<br>Reason: %{text}<extra></extra>'
+        });
+    }
+
+    // Layout (unchanged)
+    const getTextColor = () => '#A0AEC0';
+    const getGridColor = () => 'rgba(105,123,147,0.4)';
+    const getBgColor = () => 'rgba(19,27,43,0.0)';
+    const layout = {
+        title: customTitle || 'Stock Price Prediction with Future Forecast & Buy Signals',
+        xaxis: {
+            title: 'Date',
+            color: getTextColor(),
+            gridcolor: getGridColor(),
+            spikecolor: "rgba(105,123,147,255)",
+            spikedash: "solid",
+            spikethickness: -2
+        },
+        yaxis: {
+            title: 'Stock Price',
+            color: getTextColor(),
+            gridcolor: getGridColor(),
+            tickprefix: '₹',
+            tickformat: ',',
+            spikecolor: "rgba(105,123,149,255)",
+            spikedash: "solid",
+            spikethickness: -2,
+            zeroline: false
+        },
+        paper_bgcolor: getBgColor(),
+        plot_bgcolor: getBgColor(),
+        font: { color: getTextColor() },
+        margin: { t: 50, b: 50, l: 50, r: 20 },
+        legend: { x: 0, y: 1 },
+        hovermode: "closest"
+    };
+    
+
+    Plotly.newPlot(chartId, data, layout, { responsive: true });
+}
+window.renderPredictionChart = renderPredictionChart; 
+function updatePredictionChartColors() {
+    const layoutUpdate = {
+        paper_bgcolor: getBgColor(),
+        plot_bgcolor: getBgColor(),
+        font: { color: getTextColor() },
+        xaxis: { color: getTextColor(), gridcolor: getGridColor() },
+        yaxis: { color: getTextColor(), gridcolor: getGridColor() }
+    };
+    Plotly.relayout('prediction-chart', layoutUpdate);
+}
+function getTextColor() {
+    return document.body.classList.contains("dark-mode") ? '#fff' : '#333';
+}
+
+function getGridColor() {
+    return document.body.classList.contains("dark-mode") ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)';
+}
+
+function getBgColor() {
+    return document.body.classList.contains("dark-mode") ? '#1e2a38' : '#fff';
+}
+
+function showMessage(message, isError = false) {
+    let box = document.getElementById("message-box");
+    if (!box) {
+        box = document.createElement("div");
+        box.id = "message-box";
+        // Place above the Predict button
+        const btn = document.getElementById('predict-btn');
+        btn.parentNode.insertBefore(box, btn);
+    }
+    box.style.position = "static";
+    box.style.marginBottom = "16px";
+    box.style.padding = "10px 18px";
+    box.style.borderRadius = "6px";
+    box.style.zIndex = "1";
+    box.style.fontSize = "15px";
+    box.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)";
+    box.style.backgroundColor = isError ? "#ffe6e6" : "#e0f7fa";
+    box.style.color = isError ? "#c62828" : "#00796b";
+    box.style.border = `1px solid ${isError ? "#c62828" : "#00796b"}`;
+    box.style.display = "inline-block";
+    box.style.maxWidth = "320px";
+    box.style.textAlign = "center";
+    box.style.whiteSpace = "normal";
+    box.style.wordBreak = "break-word";
+    box.style.marginLeft = "auto";
+    box.style.marginRight = "auto";
+    box.textContent = message;
+
+    setTimeout(() => { box.style.display = "none"; }, 4000);
+}
+
+
+// Disclaimer close logic
+document.addEventListener("DOMContentLoaded", function() {
+  const closeBtn = document.getElementById("close-disclaimer");
+  if (closeBtn) {
+    closeBtn.onclick = function() {
+      document.getElementById("disclaimer-overlay").style.display = "none";
+    };
+  }
+});
+document.addEventListener("DOMContentLoaded", function () {
+    // Hide disclaimer by default
+    document.getElementById("disclaimer-overlay").style.display = "none";
+
+    function showDisclaimer() {
+        document.getElementById("disclaimer-overlay").style.display = "flex";
+    }
+
+    // Only show tutorial if not seen before
+    if (!localStorage.getItem("predictorTutorialSeen")) {
+        setTimeout(() => {
+            introJs().setOptions({
+                nextLabel: 'Next',
+                prevLabel: 'Back',
+                skipLabel: 'Skip',
+                doneLabel: 'Done',
+                overlayOpacity: 0.7,
+                showProgress: true,
+                tooltipClass: 'custom-introjs-tooltip'
+            }).oncomplete(function() {
+                localStorage.setItem("predictorTutorialSeen", "yes");
+                showDisclaimer();
+            }).onexit(function() {
+                localStorage.setItem("predictorTutorialSeen", "yes");
+                showDisclaimer();
+            }).start();
+        }, 600); // Wait for page to load
+    } else {
+        // If tutorial already seen, show disclaimer immediately
+        showDisclaimer();
+    }
+
+    // Disclaimer close logic
+    const closeBtn = document.getElementById("close-disclaimer");
+    if (closeBtn) {
+        closeBtn.onclick = function() {
+            document.getElementById("disclaimer-overlay").style.display = "none";
+        };
+    }
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+    const sentimentContainer = document.getElementById('news-sentiment');
+    const sentimentText = document.getElementById('sentiment-text');
+    const radioButtons = document.querySelectorAll('input[name="data-source"]');
+
+    // Function to map sentiment values to text
+    function mapSentimentValueToText(value) {
+        switch (value) {
+            case 0:
+                return "Negative";
+            case 1:
+                return "Neutral";
+            case 2:
+                return "Positive";
+            default:
+                return "Unknown";
+        }
+    }
+
+    // Function to fetch and display news sentiment
+    async function fetchNewsSentiment(stockSymbol) {
+        try {
+            const response = await fetch(`/api/news-sentiment?ticker=${stockSymbol}`);
+            const data = await response.json();
+            if (response.ok && data.sentiment !== undefined) {
+                const sentimentTextValue = mapSentimentValueToText(data.sentiment);
+                sentimentText.textContent = `Sentiment: ${sentimentTextValue}`;
+            } else {
+                sentimentText.textContent = 'No sentiment data available.';
+            }
+        } catch (error) {
+            sentimentText.textContent = 'Error fetching sentiment data.';
+            console.error('Error fetching sentiment:', error);
+        }
+    }
+
+    // Event listener for radio button changes
+    radioButtons.forEach(radio => {
+        radio.addEventListener('change', function () {
+            const stockSymbol = document.getElementById('stock-select').value;
+            if ((this.value === 'news-sentiment' || this.value === 'both') && stockSymbol) {
+                sentimentContainer.style.display = 'block';
+                fetchNewsSentiment(stockSymbol);
+            } else {
+                sentimentContainer.style.display = 'none';
+            }
+        });
+    });
+
+    // Trigger sentiment fetch after prediction
+    document.getElementById('predict-btn').addEventListener('click', function () {
+        const selectedRadio = document.querySelector('input[name="data-source"]:checked');
+        const stockSymbol = document.getElementById('stock-select').value;
+        if (selectedRadio && (selectedRadio.value === 'news-sentiment' || selectedRadio.value === 'both')) {
+            sentimentContainer.style.display = 'block';
+            fetchNewsSentiment(stockSymbol);
+        } else {
+            sentimentContainer.style.display = 'none';
+        }
+    });
+});
+
+import { initializeNewsletterForm } from './newsletter.js';
+document.addEventListener("DOMContentLoaded", function () {
+    initializeNewsletterForm();
+    // Other page-specific code...
+});

static/models/coins.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec40d873933a5e1c7b644f37f0a1fba0003727a3f2fcb8c1c3ef48d6b2290c68
+size 13616660

static/models/finbert_sentiment089/config.json

@@ -0,0 +1,35 @@
+{
+  "architectures": [
+    "BertForSequenceClassification"
+  ],
+  "attention_probs_dropout_prob": 0.1,
+  "classifier_dropout": null,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "negative",
+    "1": "neutral",
+    "2": "positive"
+  },
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "label2id": {
+    "negative": 0,
+    "neutral": 1,
+    "positive": 2
+  },
+  "layer_norm_eps": 1e-12,
+  "max_position_embeddings": 512,
+  "model_type": "bert",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "pad_token_id": 0,
+  "position_embedding_type": "absolute",
+  "problem_type": "single_label_classification",
+  "torch_dtype": "float32",
+  "transformers_version": "4.51.3",
+  "type_vocab_size": 2,
+  "use_cache": true,
+  "vocab_size": 30873
+}

static/models/finbert_sentiment089/model.safetensors

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc3cc6e3e3b049d7d0a532b03afd27206f09d30f7175dc9ef61d0b742859abad
+size 439039996

static/models/finbert_sentiment089/special_tokens_map.json

@@ -0,0 +1,37 @@
+{
+  "cls_token": {
+    "content": "[CLS]",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "mask_token": {
+    "content": "[MASK]",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "pad_token": {
+    "content": "[PAD]",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "sep_token": {
+    "content": "[SEP]",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "unk_token": {
+    "content": "[UNK]",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  }
+}

static/models/finbert_sentiment089/tokenizer_config.json

@@ -0,0 +1,59 @@
+{
+  "added_tokens_decoder": {
+    "0": {
+      "content": "[PAD]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "2": {
+      "content": "[UNK]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "3": {
+      "content": "[CLS]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "4": {
+      "content": "[SEP]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "5": {
+      "content": "[MASK]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    }
+  },
+  "clean_up_tokenization_spaces": true,
+  "cls_token": "[CLS]",
+  "do_basic_tokenize": true,
+  "do_lower_case": false,
+  "extra_special_tokens": {},
+  "mask_token": "[MASK]",
+  "max_len": 512,
+  "model_max_length": 512,
+  "never_split": null,
+  "pad_token": "[PAD]",
+  "sep_token": "[SEP]",
+  "strip_accents": null,
+  "tokenize_chinese_chars": true,
+  "tokenizer_class": "BertTokenizer",
+  "unk_token": "[UNK]"
+}

static/pipelines/lstm_n_pipeline.py

@@ -0,0 +1,239 @@
+import numpy as np
+import pandas as pd
+import yfinance as yf
+from datetime import datetime, timedelta
+from sklearn.preprocessing import MinMaxScaler
+from tensorflow.keras.models import Sequential
+from tensorflow.keras.layers import LSTM, Dense, BatchNormalization
+from flask import jsonify
+from tensorflow.keras import regularizers
+from sklearn.metrics import mean_absolute_error, mean_squared_error, r2_score
+from sklearn.model_selection import train_test_split
+import pymongo
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+import torch
+import os
+from dotenv import load_dotenv
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+model_path = os.path.abspath(os.path.join(BASE_DIR, "..", "models", "finbert_sentiment089"))
+
+def get_sentiment_model(model_path=model_path):
+    tokenizer = AutoTokenizer.from_pretrained(model_path)
+    sentiment_model = AutoModelForSequenceClassification.from_pretrained(model_path)
+    return tokenizer, sentiment_model
+
+def get_sentiment(text, tokenizer, sentiment_model):
+    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+    with torch.no_grad():
+        outputs = sentiment_model(**inputs)
+        scores = torch.softmax(outputs.logits, dim=1).cpu().numpy()[0]
+        sentiment = int(scores.argmax())
+    return sentiment  # 0=negative, 1=neutral, 2=positive
+
+def fetch_and_merge_sentiment(df, ticker, start_date, end_date, tokenizer, sentiment_model):
+    if isinstance(df.columns, pd.MultiIndex):
+        df.columns = ['_'.join([str(i) for i in col if i]) for col in df.columns.values]
+    load_dotenv()
+    mongo_uri = os.getenv("MONGO_URI")
+    client = pymongo.MongoClient(mongo_uri)
+    db = client["stock_news"]
+    collection = db["moneyworks_company_news"]
+    tickers_to_fetch = [ticker, "^NSEI", "^BSESN"]
+    news_sentiment_daily_dict = {}
+    for tkr in tickers_to_fetch:
+        news_cursor = collection.find({"yahoo_ticker": tkr})
+        for doc in news_cursor:
+            if "sentiment" not in doc or doc["sentiment"] in ("", None):
+                title = doc.get("title", "")
+                if title:
+                    sentiment = get_sentiment(title, tokenizer, sentiment_model)
+                    collection.update_one({"_id": doc["_id"]}, {"$set": {"sentiment": sentiment}})
+        news_cursor = collection.find({"yahoo_ticker": tkr, "sentiment": {"$exists": True}})
+        news_df = pd.DataFrame(list(news_cursor))
+        if not news_df.empty:
+            news_df["date"] = pd.to_datetime(news_df["date"]).dt.date
+            news_sentiment_daily = news_df.groupby("date")["sentiment"].mean()
+        else:
+            news_sentiment_daily = pd.Series(dtype=float)
+        news_sentiment_daily_dict[tkr] = news_sentiment_daily
+    df["date"] = df.index.date
+    df = df.merge(news_sentiment_daily_dict.get(ticker, pd.Series(dtype=float)).rename("news_sentiment_company"), left_on="date", right_index=True, how="left")
+    df = df.merge(news_sentiment_daily_dict.get("^NSEI", pd.Series(dtype=float)).rename("news_sentiment_nifty"), left_on="date", right_index=True, how="left")
+    df = df.merge(news_sentiment_daily_dict.get("^BSESN", pd.Series(dtype=float)).rename("news_sentiment_sensex"), left_on="date", right_index=True, how="left")
+    df["news_sentiment_company"] = df["news_sentiment_company"].fillna(0)
+    df["news_sentiment_nifty"] = df["news_sentiment_nifty"].fillna(0)
+    df["news_sentiment_sensex"] = df["news_sentiment_sensex"].fillna(0)
+    # After merging sentiment columns, check if news_df is empty for each ticker
+    for tkr in tickers_to_fetch:
+        news_cursor = collection.find({"yahoo_ticker": tkr, "sentiment": {"$exists": True}})
+        news_df = pd.DataFrame(list(news_cursor))
+        if news_df.empty:
+            print(f"Warning: No sentiment data found for {tkr}. All sentiment values will be zero.")
+        else:
+            print(f"Sentiment data found for {tkr}: {news_df.shape[0]} records.")
+
+    # Rename columns and drop 'date' column
+    df = df.rename(columns={
+        f'Close_{ticker}': 'Close',
+        f'Open_{ticker}': 'Open',
+        f'High_{ticker}': 'High',
+        f'Low_{ticker}': 'Low',
+        f'Volume_{ticker}': 'Volume',
+        'NIFTY_Close_^NSEI': 'NIFTY_Close',
+        'SENSEX_Close_^BSESN': 'SENSEX_Close'
+    })
+    if 'date' in df.columns:
+        df = df.drop(columns=['date'])
+    return df
+
+def create_sequences(data, seq_length=20):
+    sequences = []
+    for i in range(len(data) - seq_length):
+        sequences.append(data[i: i + seq_length])
+    return np.array(sequences)
+
+def split_data(sequence):
+    train_data, test_data = train_test_split(sequence, test_size=0.3, shuffle=False)
+    val_data, test_data = train_test_split(test_data, test_size=0.5, shuffle=False)
+    return train_data, val_data, test_data
+
+def predict_future(model, last_sequence, scaler, n_steps=1, n_features=10):
+    last_sequence_reshaped = last_sequence.reshape((1, last_sequence.shape[0], last_sequence.shape[1]))
+    future_predictions = []
+    current_input = last_sequence_reshaped
+    for _ in range(n_steps):
+        predicted_price = model.predict(current_input)[0, 0]
+        future_predictions.append(predicted_price)
+        current_input = np.roll(current_input, -1, axis=1)
+        current_input[0, -1, 0] = predicted_price
+        if current_input.shape[2] > 1:
+            current_input[0, -1, 1:] = current_input[0, -2, 1:]
+    future_predictions = scaler.inverse_transform(
+        np.hstack((np.array(future_predictions).reshape(-1, 1), np.zeros((len(future_predictions), n_features - 1))))
+    )[:, 0]
+    return future_predictions
+
+def find_optimal_buy_points(prices, window=3, threshold=0.01):
+    buy_indices = []
+    buy_signals = {"points": [], "reasons": []}
+    if len(prices) < 2 * window + 1:
+        return buy_indices, buy_signals
+    for i in range(window, len(prices) - window):
+        window_slice = prices[i - window:i + window + 1]
+        if prices[i] == min(window_slice):
+            before_diff = prices[i] - min(prices[i - window:i])
+            after_diff = prices[i] - min(prices[i + 1:i + window + 1])
+            if before_diff > threshold and after_diff > threshold:
+                buy_indices.append(i)
+                buy_signals["points"].append(prices[i])
+                buy_signals["reasons"].append("Local minimum with significant change before and after")
+    if not buy_indices and len(prices) > 0:
+        min_idx = np.argmin(prices)
+        buy_indices.append(min_idx)
+        buy_signals["points"].append(prices[min_idx])
+        buy_signals["reasons"].append("Lowest price point")
+    return buy_indices, buy_signals
+
+def run_lstm_sentiment_prediction(data):
+    ticker = data['ticker']
+    prediction_date = data['prediction_date']
+    epochs = int(data.get('epochs', 100))
+    start_date = '2019-01-01'
+    end_date = datetime.today().strftime('%Y-%m-%d')
+    df = yf.download(ticker, start=start_date, end=end_date)
+    if df.empty:
+        return jsonify({'error': 'Failed to fetch stock data.'}), 400
+    nifty = yf.download("^NSEI", start=start_date, end=end_date)[['Close']].rename(columns={'Close': 'NIFTY_Close'})
+    sensex = yf.download("^BSESN", start=start_date, end=end_date)[['Close']].rename(columns={'Close': 'SENSEX_Close'})
+    df = df.merge(nifty, left_index=True, right_index=True, how='inner')
+    df = df.merge(sensex, left_index=True, right_index=True, how='inner')
+    # Sentiment
+    tokenizer, sentiment_model = get_sentiment_model()
+    df = fetch_and_merge_sentiment(df, ticker, start_date, end_date, tokenizer, sentiment_model)
+    df = df[['Close', 'Open', 'High', 'Low', 'Volume', 'NIFTY_Close', 'SENSEX_Close',
+             'news_sentiment_company', 'news_sentiment_nifty', 'news_sentiment_sensex']]
+    scaler = MinMaxScaler(feature_range=(-1, 1))
+    df_scaled = scaler.fit_transform(df)
+    df_array = df_scaled.astype(np.float32)
+    seq_length = 30
+    sequences = create_sequences(df_array, seq_length + 1)
+    train_data, val_data, test_data = split_data(sequences)
+    X_train, y_train = train_data[:, :-1, :], train_data[:, -1, 0]
+    X_valid, y_valid = val_data[:, :-1, :], val_data[:, -1, 0]
+    X_test, y_test = test_data[:, :-1, :], test_data[:, -1, 0]
+    model = Sequential()
+    model.add(LSTM(130, return_sequences=True, activation='relu', input_shape=(X_train.shape[1], X_train.shape[2])))
+    model.add(LSTM(69, return_sequences=False, activation='relu',kernel_regularizer=regularizers.l1(0.000001)))
+    model.add(Dense(63, activation='relu'))
+    model.add(BatchNormalization())
+    model.add(Dense(1))
+    model.compile(optimizer='adam', loss='mse', metrics=['mean_squared_error'])
+    model.fit(X_train, y_train, epochs=epochs, batch_size=32, verbose=1, shuffle=False, validation_data=(X_valid, y_valid))
+    predictions = model.predict(X_test)
+    predictions = predictions.reshape(-1, 1)
+    predictions = scaler.inverse_transform(np.hstack((predictions, np.zeros((len(predictions), df.shape[1] - 1)))))[:, 0]
+    y_test_unscaled = scaler.inverse_transform(np.hstack((y_test.reshape(-1, 1), np.zeros((len(y_test), df.shape[1] - 1)))))[:, 0]
+    predictions = predictions[-len(y_test_unscaled):]
+    rmse = np.sqrt(np.mean((predictions - y_test_unscaled) ** 2))
+    mae = mean_absolute_error(y_test_unscaled, predictions)
+    mse = mean_squared_error(y_test_unscaled, predictions)
+    r2 = r2_score(y_test_unscaled, predictions)
+    print(f"Test RMSE: {rmse}")
+    print(f"Test MAE: {mae}")
+    print(f"Test MSE: {mse}")
+    print(f"Test R2: {r2}")
+    # Prepare train and valid DataFrames for plotting
+    train_size = int(len(df) * 0.9)
+    train = df.iloc[:train_size].copy()
+    valid = df.iloc[train_size:].copy()
+
+    # Ensure predictions and valid have the same length
+    if len(predictions) > len(valid):
+        predictions = predictions[-len(valid):]
+    elif len(predictions) < len(valid):
+        valid = valid.iloc[-len(predictions):].copy()
+
+    valid['Predictions'] = predictions
+    valid.index = df.index[train_size:][-len(valid):]
+    train.index = df.index[:train_size]
+    valid['Predictions'] = valid['Predictions'].interpolate()  # Smooth transition
+    train.index = df.index[:train_size]
+    historical_data = [
+        {
+            'date': str(train.index[i].date()) if hasattr(train.index[i], 'date') else str(train.index[i]),
+            'price': float(train['Close'].iloc[i])
+        }
+        for i in range(len(train))
+    ]
+    last_sequence = X_test[-1]
+    last_date = df.index[-1]
+    future_start_date = datetime.strptime(prediction_date, '%Y-%m-%d')
+    future_days = (future_start_date - last_date).days
+    if future_days <= 0:
+        return jsonify({'error': 'Prediction date must be in the future.'}), 400
+    future_prices = predict_future(model, last_sequence, scaler, n_steps=future_days, n_features=df.shape[1])
+    future_dates = pd.date_range(start=last_date + timedelta(days=1), periods=future_days, freq='B')
+    buy_indices, buy_signals = find_optimal_buy_points(future_prices)
+    actual_vs_predicted = [
+        {
+            'date': str(valid.index[i].date()),
+            'actual': float(valid['Close'].iloc[i]),
+            'predicted': float(valid['Predictions'].iloc[i])
+        }
+        for i in range(len(valid))
+    ]
+    result = {
+        'stock': str(ticker),
+        'predictedPrice': float(round(predictions[-1], 2)),
+        'historicalData': historical_data,
+        'futurePrices': [float(x) for x in future_prices.tolist()],
+        'futureDates': [str(x) for x in future_dates.strftime('%Y-%m-%d').tolist()],
+        'buySignals': {
+            "points": [float(x) for x in buy_signals["points"]],
+            "reasons": [str(r) for r in buy_signals["reasons"]]
+        },
+        'buyIndices': [int(x) for x in buy_indices],
+        'actualVsPredicted': actual_vs_predicted
+    }
+    return jsonify(result)

static/pipelines/lstm_pipeline.py

@@ -0,0 +1,219 @@
+import numpy as np
+import pandas as pd
+import yfinance as yf
+from datetime import datetime, timedelta
+from sklearn.preprocessing import MinMaxScaler
+from tensorflow.keras.models import Sequential
+from tensorflow.keras.layers import LSTM, Dense, BatchNormalization
+from tensorflow.keras.optimizers import Adam
+from tensorflow.keras.losses import Huber
+from flask import jsonify
+from sklearn.metrics import mean_absolute_error, mean_squared_error, r2_score
+from sklearn.model_selection import train_test_split
+
+
+# Function to predict future stock prices
+def predict_future(model, last_sequence, scaler, n_steps=1):
+    last_sequence_reshaped = last_sequence.reshape((1, last_sequence.shape[0], last_sequence.shape[1]))
+    future_predictions = []
+    current_input = last_sequence_reshaped
+
+    for _ in range(n_steps):
+        predicted_price = model.predict(current_input)[0, 0]
+        future_predictions.append(predicted_price)
+        current_input = np.roll(current_input, -1, axis=1)
+        current_input[0, -1, 0] = predicted_price
+
+    future_predictions = scaler.inverse_transform(
+        np.hstack((np.array(future_predictions).reshape(-1, 1), np.zeros((len(future_predictions), 6))))
+    )[:, 0]
+
+    return future_predictions
+
+# Function to find optimal buy points
+def find_optimal_buy_points(prices, window=3, threshold=0.01):
+    buy_indices = []
+    buy_signals = {"points": [], "reasons": []}
+
+    if len(prices) < 2 * window + 1:
+        return buy_indices, buy_signals
+
+    for i in range(window, len(prices) - window):
+        window_slice = prices[i - window:i + window + 1]
+        if prices[i] == min(window_slice):
+            before_diff = prices[i] - min(prices[i - window:i])
+            after_diff = prices[i] - min(prices[i + 1:i + window + 1])
+            if before_diff > threshold and after_diff > threshold:
+                buy_indices.append(i)
+                buy_signals["points"].append(prices[i])
+                buy_signals["reasons"].append("Local minimum with significant change before and after")
+
+    if not buy_indices and len(prices) > 0:
+        min_idx = np.argmin(prices)
+        buy_indices.append(min_idx)
+        buy_signals["points"].append(prices[min_idx])
+        buy_signals["reasons"].append("Lowest price point")
+
+    return buy_indices, buy_signals
+
+# 6. Create Sequences for Time Series Forecasting
+def create_sequences(data, seq_length=20):
+    sequences = []
+    for i in range(len(data) - seq_length):
+        sequences.append(data[i: i + seq_length])
+    return np.array(sequences)
+
+# Main pipeline function to train LSTM model and return predictions
+def run_lstm_prediction(data):
+    ticker = data['ticker']
+    prediction_date = data['prediction_date']
+    epochs = int(data.get('epochs', 100))  # default to 100 if not provided
+
+    # Download stock data
+    df = yf.download(ticker, start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))
+    if df.empty:
+        return jsonify({'error': 'Failed to fetch stock data.'}), 400
+
+    # Download market indices
+    nifty = yf.download("^NSEI", start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))[['Close']].rename(columns={'Close': 'NIFTY_Close'})
+    sensex = yf.download("^BSESN", start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))[['Close']].rename(columns={'Close': 'SENSEX_Close'})
+
+    # Merge indices with stock data
+    df = df.merge(nifty, left_index=True, right_index=True)
+    df = df.merge(sensex, left_index=True, right_index=True)
+
+    df = df[['Close', 'Open', 'High', 'Low', 'Volume', 'NIFTY_Close', 'SENSEX_Close']]
+
+    # Scaling
+    scaler = MinMaxScaler(feature_range=(-1, 1))
+    df_scaled = scaler.fit_transform(df)
+    # 5. Convert to NumPy Array
+    df_array = df_scaled.astype(np.float32)
+
+    seq_length = 20  # Use past 20 days to predict next day
+    sequences = create_sequences(df_array, seq_length+1)
+
+    # 7. Split Data into Train (80%), Validation (10%), Test (10%)
+    def split_data(sequence):
+        train_data, test_data = train_test_split(sequence, test_size=0.2, shuffle=False)
+        val_data, test_data = train_test_split(test_data, test_size=0.5, shuffle=False)
+        return train_data, val_data, test_data
+
+    train_data, val_data, test_data = split_data(sequences)
+
+    # 8. Separate Features (X) and Target (y)
+    X_train, y_train = train_data[:, :-1, :], train_data[:, -1, 0]
+    X_valid, y_valid = val_data[:, :-1, :], val_data[:, -1, 0]
+    X_test, y_test = test_data[:, :-1, :], test_data[:, -1, 0]
+
+    print(f"x_train shape: {X_train.shape}, y_train shape: {y_train.shape}")
+    print(f"x_valid shape: {X_valid.shape}, y_valid shape: {y_valid.shape}")
+    print(f"x_test shape: {X_test.shape}, y_test shape: {y_test.shape}")
+
+    # Build LSTM model
+    model = Sequential()
+    model.add(LSTM(128, return_sequences=True, activation='relu', input_shape=(X_test.shape[1], X_test.shape[2])))
+    model.add(LSTM(64, return_sequences=False,activation='relu'))
+    model.add(Dense(39, activation='relu'))
+    model.add(BatchNormalization())
+    model.add(Dense(1))
+    model.compile(optimizer='adam', loss='mse',metrics=['mean_squared_error'])
+    model.fit(X_train, y_train, epochs=epochs, batch_size=32, verbose=1,shuffle=False,validation_data=(X_valid,y_valid))
+
+    # Predict and Reshape Results
+    predictions = model.predict(X_test)
+    predictions = predictions.reshape(-1, 1)
+
+    # Inverse Transform Predictions (Only Close Price)
+    predictions = scaler.inverse_transform(np.hstack((predictions, np.zeros((len(predictions), 6)))))[:, 0]
+
+    # Inverse Transform y_test (Only Close Price)
+    y_test_unscaled = scaler.inverse_transform(np.hstack((y_test.reshape(-1, 1), np.zeros((len(y_test), 6)))))[:, 0]
+
+    # Align predictions and actuals
+    predictions = predictions[-len(y_test_unscaled):]
+    rmse= np.sqrt(np.mean((predictions-y_test_unscaled)**2))
+    mae = mean_absolute_error(y_test_unscaled, predictions)
+    mse= mean_squared_error(y_test_unscaled, predictions)
+    r2= r2_score(y_test_unscaled, predictions)
+    print(f"Test RMSE: {rmse}")
+    print(f"Test MAE: {mae}")
+    print(f"Test MSE: {mse}")
+    print(f"Test R2: {r2}")
+
+    # Split into Train and Validation/Test Data
+    train_size = int(len(df) * 0.9)
+    train = df.iloc[:train_size].copy()
+    valid = df.iloc[train_size:].copy()
+
+    # Ensure valid has the same length as predictions
+    valid = valid.iloc[-len(predictions):].copy()
+    valid['Predictions'] = predictions
+    valid.index = df.index[train_size:][-len(valid):]  # Align timestamps
+
+    # Optional: Fill missing data (if any)
+    valid['Predictions'] = valid['Predictions'].interpolate()
+
+    # Fix Training Data Index (if needed)
+    train.index = df.index[:train_size]
+
+    # Historical data for response
+    #test_indices = df.index[-len(X_test):]
+
+# Historical data for response (use test_indices)
+    historical_data = [
+    {
+        'date': str(train.index[i].date()) if hasattr(train.index[i], 'date') else str(train.index[i]),
+        'price': float(train['Close'].iloc[i])
+    }
+    for i in range(len(train))
+]
+
+    # Future prediction logic
+    last_sequence = X_test[-1]
+    last_date = df.index[-1]
+    future_start_date = datetime.strptime(prediction_date, '%Y-%m-%d')
+    future_days = (future_start_date - last_date).days
+
+    if future_days <= 0:
+        return jsonify({'error': 'Prediction date must be in the future.'}), 400
+
+    # Predict future prices
+    future_prices = predict_future(model, last_sequence, scaler, n_steps=future_days)
+    future_dates = pd.date_range(start=last_date + timedelta(days=1), periods=future_days, freq='B')
+
+    # Find buy points
+    buy_indices, buy_signals = find_optimal_buy_points(future_prices)
+
+    # # Validation DataFrame for actual vs predicted
+    # valid = pd.DataFrame({
+    #     'Close': y_test_unscaled,
+    #     'Predictions': predictions
+    # }, index=test_indices)
+
+    # Prepare actual vs predicted for validation/test period
+    actual_vs_predicted = [
+        {
+            'date': str(valid.index[i].date()),
+            'actual': float(valid['Close'].iloc[i]),
+            'predicted': float(valid['Predictions'].iloc[i])
+        }
+        for i in range(len(valid))
+    ]
+
+    # Final result JSON
+    result = {
+        'stock': str(ticker),
+        'predictedPrice': float(round(predictions[-1], 2)),
+        'historicalData': historical_data,
+        'futurePrices': [float(x) for x in future_prices.tolist()],
+        'futureDates': [str(x) for x in future_dates.strftime('%Y-%m-%d').tolist()],
+        'buySignals': {
+            "points": [float(x) for x in buy_signals["points"]],
+            "reasons": [str(r) for r in buy_signals["reasons"]]
+        },
+        'buyIndices': [int(x) for x in buy_indices],
+        'actualVsPredicted': actual_vs_predicted
+    }
+
+    return jsonify(result)

static/video/bg video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f7655d1b3e395206b7bad9777d18bb0d201c88482eca8fa30001cefd8cc8e143
+size 4454739

t.txt

@@ -0,0 +1,242 @@
+@app.route("/predict-stock", methods=['POST'])
+def predict_stock():
+    data = request.get_json()
+    ticker = data['ticker']
+
+    df = yf.download(ticker, start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))
+    if df.empty:
+        return jsonify({'error': 'Failed to fetch stock data.'}), 400
+
+    nifty = yf.download("^NSEI", start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))[['Close']].rename(columns={'Close': 'NIFTY_Close'})
+    sensex = yf.download("^BSESN", start='2019-01-01', end=datetime.today().strftime('%Y-%m-%d'))[['Close']].rename(columns={'Close': 'SENSEX_Close'})
+
+    df = df.merge(nifty, left_index=True, right_index=True)
+    df = df.merge(sensex, left_index=True, right_index=True)
+
+    df = df[['Close', 'Open', 'High', 'Low', 'Volume', 'NIFTY_Close', 'SENSEX_Close']]
+
+    scaler = MinMaxScaler(feature_range=(-1, 1))
+    df_scaled = scaler.fit_transform(df)
+
+    def create_sequences(data, seq_length=20):
+        sequences = []
+        for i in range(len(data) - seq_length):
+            sequences.append(data[i: i + seq_length + 1])
+        return np.array(sequences)
+
+    sequences = create_sequences(df_scaled, 20)
+
+    X_test = sequences[:, :-1, :]
+    y_test = sequences[:, -1, 0]
+
+    model = Sequential()
+    model.add(LSTM(128, return_sequences=True, activation='relu', input_shape=(X_test.shape[1], X_test.shape[2])))
+    model.add(LSTM(64, activation='relu'))
+    model.add(Dense(39, activation='relu'))
+    model.add(BatchNormalization())
+    model.add(Dense(1))
+
+    model.compile(optimizer=Adam(1e-6), loss=Huber(), metrics=['mse'])
+
+    model.fit(X_test, y_test, epochs=5, batch_size=32, verbose=0)
+
+    predictions = model.predict(X_test).reshape(-1, 1)
+    predictions_unscaled = scaler.inverse_transform(np.hstack((predictions, np.zeros((len(predictions), 6)))))[:, 0]
+
+    historical_data = [{
+        'date': str(df.index[-len(predictions_unscaled)+i].date()),
+        'price': float(pred)
+    } for i, pred in enumerate(predictions_unscaled)]
+
+    result = {
+        'stock': ticker,
+        'predictedPrice': round(predictions_unscaled[-1], 2),
+        'historicalData': historical_data
+    }
+
+    return jsonify(result)
+
+1. Update your API response in run_lstm_prediction
+Add these lines after you compute valid['Predictions'] and before returning the result:
+
+# ...existing code...
+
+    # Prepare actual vs predicted for validation/test period
+    actual_vs_predicted = [
+        {
+            'date': str(valid.index[i].date()),
+            'actual': float(valid['Close'].iloc[i]),
+            'predicted': float(valid['Predictions'].iloc[i])
+        }
+        for i in range(len(valid))
+    ]
+
+    # Final result JSON
+    result = {
+        'stock': str(ticker),
+        'predictedPrice': float(round(predictions_unscaled[-1], 2)),
+        'historicalData': [
+            {
+                'date': str(df.index[-len(predictions_unscaled) + i].date()),
+                'price': float(pred)
+            } for i, pred in enumerate(predictions_unscaled)
+        ],
+        'futurePrices': [float(x) for x in future_prices.tolist()],
+        'futureDates': [str(x) for x in future_dates.strftime('%Y-%m-%d').tolist()],
+        'buySignals': {
+            "points": [float(x) for x in buy_signals["points"]],
+            "reasons": [str(r) for r in buy_signals["reasons"]]
+        },
+        'buyIndices': [int(x) for x in buy_indices],
+        'actualVsPredicted': actual_vs_predicted  # <-- add this line
+    }
+
+    return jsonify(result)
+# ...existing code...
+
+2. Update your frontend (JS) to plot both lines
+In your predict.js, update the chart rendering logic to use the new actualVsPredicted array:
+function renderPredictionChart(prediction) {
+    // ...existing code...
+
+    // Plot actual vs predicted for validation/test period
+    if (prediction.actualVsPredicted && Array.isArray(prediction.actualVsPredicted)) {
+        const validDates = prediction.actualVsPredicted.map(d => d.date);
+        const actualVals = prediction.actualVsPredicted.map(d => d.actual);
+        const predictedVals = prediction.actualVsPredicted.map(d => d.predicted);
+
+        const traceActual = {
+            x: validDates,
+            y: actualVals,
+            mode: 'lines',
+            name: 'Actual Price',
+            line: { color: 'green', width: 2 }
+        };
+
+        const tracePredicted = {
+            x: validDates,
+            y: predictedVals,
+            mode: 'lines',
+            name: 'Predicted Price',
+            line: { color: 'red', width: 2, dash: 'dot' }
+        };
+
+        // Add these traces to your Plotly data array
+        data.push(traceActual, tracePredicted);
+    }
+
+    // ...existing code...
+}
+
+
+@app.route('/api/fundamentals')
+def api_fundamentals():
+    symbol = request.args.get('symbol')
+    if not symbol:
+        return jsonify({'error': 'No symbol provided'}), 400
+    try:
+        ticker = yf.Ticker(symbol)
+        info = ticker.info
+        history = ticker.history(period="1y")
+        if history.empty:
+            return jsonify({'error': f'No data found for symbol: {symbol}'}), 404
+        # ... rest of your code ...
+        # You can adjust which fields you want to send
+        data = {
+            'pe': info.get('trailingPE'),
+            'pb': info.get('priceToBook'),
+            'ps': info.get('priceToSalesTrailing12Months'),
+            'divYield': (info.get('dividendYield') or 0) * 100,
+            'roe': info.get('returnOnEquity') * 100 if info.get('returnOnEquity') is not None else None,
+            'roa': info.get('returnOnAssets') * 100 if info.get('returnOnAssets') is not None else None,
+            'grossMargin': info.get('grossMargins') * 100 if info.get('grossMargins') is not None else None,
+            'opMargin': info.get('operatingMargins') * 100 if info.get('operatingMargins') is not None else None,
+            'currentRatio': info.get('currentRatio'),
+            'quickRatio': info.get('quickRatio'),
+            'debtEquity': info.get('debtToEquity'),
+            'intCoverage': info.get('ebitda') / info.get('interestExpense') if info.get('ebitda') and info.get('interestExpense') else None,
+            'history': ticker.history(period="1y").reset_index().to_dict(orient='records')
+        }
+        return jsonify(data)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+
+
+  document.addEventListener("DOMContentLoaded", function() {
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const toggleIcon = document.querySelector('.toggle-circle .toggle-icon');
+
+    function updateToggleIcon() {
+        if (darkModeToggle.checked) {
+            toggleIcon.innerHTML = '&#9790;'; // Moon
+        } else {
+            toggleIcon.innerHTML = '&#9728;'; // Sun
+        }
+    }
+
+    // Initial state
+    
+
+    // Set the toggle to checked (on) by default
+    darkModeToggle.checked = true;
+    updateToggleIcon();
+    // Apply dark mode on page load
+    document.body.classList.add("dark-mode");
+
+    darkModeToggle.addEventListener("change", function() {
+      document.body.classList.toggle("dark-mode");
+      if (typeof updateChartColors === "function") updateChartColors(this.checked);
+      updateToggleIcon();
+    });
+});      
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+}
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 25px;
+}
+.toggle-circle {
+    position: absolute;
+    left: 4px;
+    bottom: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s;
+    z-index: 2;
+    font-size: 14px;
+}
+.toggle-icon {
+    transition: color 0.4s, content 0.4s;
+    color: #FFD600; /* Sun color */
+}
+input:checked + .slider {
+    background-color: #4a8fdf;
+}
+input:checked + .slider .toggle-circle {
+    transform: translateX(24px);
+}
+input:checked + .slider .toggle-icon {
+    color: #4a8fdf; /* Moon color */
+    /* Use content swap via JS for moon icon */
+}

templates/404.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Not Found</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <style>
+    :root {
+      --light-bg: #f4f2ec;
+      --light-text: #000;
+      --dark-bg: #1c2733;
+      --dark-text: #fff;
+      --primary-color: #4a8fdf;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: Arial, sans-serif;
+      background-color: var(--light-bg);
+      color: var(--light-text);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      transition: background-color 0.3s, color 0.3s;
+      text-align: center;
+    }
+
+    body.dark-mode {
+      background-color: var(--dark-bg);
+      color: var(--dark-text);
+    }
+
+    h1 {
+      font-size: 3rem;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 1.2rem;
+      margin-bottom: 30px;
+    }
+
+    a {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: var(--primary-color);
+      color: #fff;
+      text-decoration: none;
+      border-radius: 5px;
+      transition: background 0.3s;
+    }
+
+    a:hover {
+      background-color: #377ddf;
+    }
+
+    /* Toggle Switch */
+    .theme-toggle {
+      position: absolute;
+      top: 20px;
+      right: 30px;
+    }
+
+    .toggle-switch {
+      position: relative;
+      display: inline-block;
+      width: 50px;
+      height: 25px;
+    }
+
+    .toggle-switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition: 0.4s;
+      border-radius: 25px;
+    }
+
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 18px;
+      width: 18px;
+      left: 4px;
+      bottom: 3px;
+      background-color: white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+
+    input:checked + .slider {
+      background-color: var(--primary-color);
+    }
+
+    input:checked + .slider:before {
+      transform: translateX(24px);
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Toggle -->
+  <div class="theme-toggle">
+    <label class="toggle-switch">
+      <input type="checkbox" id="theme-toggle-checkbox">
+      <span class="slider"></span>
+    </label>
+  </div>
+
+  <h1>404 - Page Not Found</h1>
+  <p>Sorry, the page you’re looking for doesn’t exist.</p>
+  <a href="/">Go to Homepage</a>
+
+  <script>
+    // Theme toggle logic
+    document.addEventListener('DOMContentLoaded', () => {
+      const toggle = document.getElementById('theme-toggle-checkbox');
+      const currentTheme = localStorage.getItem('theme');
+
+      if (currentTheme === 'dark') {
+        document.body.classList.add('dark-mode');
+        toggle.checked = true;
+      }
+
+      toggle.addEventListener('change', () => {
+        document.body.classList.toggle('dark-mode');
+        if (document.body.classList.contains('dark-mode')) {
+          localStorage.setItem('theme', 'dark');
+        } else {
+          localStorage.setItem('theme', 'light');
+        }
+      });
+    });
+  </script>
+</body>
+</html>

templates/base.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>{% block title %}Stock APP AR - MarketMind{% endblock %}</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+  <nav>
+    <ul>
+      <li><a href="{{ url_for('home') }}">Home</a></li>
+      <li><a href="{{ url_for('login') }}">Login</a></li>
+      <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+      <li><a href="{{ url_for('movers') }}">Market Movers</a></li>
+      <li><a href="{{ url_for('news') }}">News</a></li>
+      <li><a href="{{ url_for('predict') }}">Predict</a></li>
+    </ul>
+  </nav>
+
+  {% block content %}{% endblock %}
+
+</body>
+</html>

templates/disclaimer.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Disclaimer - MarketMind</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+</head>
+<body>
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+            <a href="{{ url_for('movers') }}">Market Movers</a>
+            <a href="{{ url_for('news') }}">News</a>
+            <a href="{{ url_for('predict') }}">Predictor</a>
+            <label class="toggle-switch">
+                <input type="checkbox" id="darkModeToggle">
+                <span class="slider">
+                    <span class="toggle-circle">
+                        <span class="toggle-icon">&#9790;</span>
+                    </span>
+                </span>
+            </label>
+        </div>
+    </nav>
+    <main class="legal-container">
+        <h1>Disclaimer</h1>
+        <p>
+            All information provided by MarketMind is for informational and educational purposes only. We do not guarantee the accuracy, completeness, or timeliness of the data. MarketMind does not provide investment advice, and users should consult a qualified financial advisor before making investment decisions.
+        </p>
+        <p>
+            MarketMind is not responsible for any losses or damages resulting from the use of this site.
+        </p>
+    </main>
+    <footer>
+        <div class="footer-bottom">
+            <p>© 2025 MarketMind. All rights reserved.</p>
+        </div>
+    </footer>
+    <script type="module" src="{{ url_for('static', filename='js/legal.js') }}"></script>
+</body>
+</html>

templates/fundamentals.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
+    <script type="module" src="{{ url_for('static', filename='js/firebase-config.js') }}"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/fundamentals.css') }}">
+    <!-- Intro.js CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
+    <!-- Intro.js JS -->
+    <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
+    <script type="module"> import { requireLogin } from "{{ url_for('static', filename='js/auth.js') }}"; requireLogin(); </script>
+    <!-- Add this to your head section -->
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <title>MarketMind - Fundamentals</title>
+    
+</head>
+<body>
+    <div class="transition-overlay"></div>
+
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <div class="dropdown">
+                <h4>Services</h4>
+                <div class="dropdown-content">
+                    <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+                    <a href="{{ url_for('movers') }}">Market Movers</a>
+                    <a href="{{ url_for('news') }}">News</a>
+                    <a href="{{url_for('predict')}}">Predictor</a>
+                </div>
+            </div>
+            <a href="{{ url_for('login') }}" id="logout">Login</a>
+            <label class="toggle-switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider">
+                <span class="toggle-circle">
+                <span class="toggle-icon">&#9790;</span> <!-- Sun by default -->
+                </span>
+            </span>
+            </label>
+        </div>
+    </nav>
+
+    <div class="stock-data-container" data-intro="Here you can view and filter historical stock data for Indian companies." data-step="1">
+        <h2>Indian Stock Market Data</h2>
+        <div class="date-range-filter">
+            <label for="start-date">Start Date:</label>
+            <input type="date" id="start-date" name="start-date">
+    
+            <label for="end-date">End Date:</label>
+            <input type="date" id="end-date" name="end-date">
+    
+            <select id="fundamentals-symbol" style="width: 250px;">
+                <option value="">Select a company...</option>
+            </select>
+
+            <button id="fetch">Fetch Data</button>
+        </div>
+    
+        <div id="message-container" style="display: none; padding: 10px; margin: 10px 0; border-radius: 5px;"></div>
+    
+        <!-- Add tabs for different views -->
+        <div class="tab-container" data-intro="Switch between Table, Chart, or Both views for your selected stock data." data-step="2">
+            <button class="tab-button active" onclick="showView('table')">Table View</button>
+            <button class="tab-button" onclick="showView('chart')">Chart View</button>
+            <button class="tab-button" onclick="showView('both')">Both</button>
+        </div>
+        
+        <div id="stock-data-table"></div>
+        
+        <!-- Add chart container -->
+        <div id="chart-view" style="display: none;">
+            <h3 class="chart-title">Price Movement</h3>
+            <div class="chart-container">
+                <div id="stockChart"></div>
+            </div>
+        </div>
+    </div>
+    </div>
+
+<!-- Add this section after your stock data container -->
+<div class="fundamentals-container">
+    <h2>Stock Fundamentals Analysis</h2>
+    
+    <div class="fundamentals-search" data-intro="Analyze key fundamentals, ratios, and risk metrics for any company here." data-step="3">
+        <select id="fundamentals-search-bar" class="styled-dropdown">
+            <option value="">Select a company...</option>
+            <!-- Options will be populated by JS -->
+        </select>
+       <button onclick="fetchFundamentals(document.getElementById('fundamentals-search-bar').value)">Analyze</button>
+    </div>
+    
+    <div class="fundamentals-tabs">
+        <button class="tab-button active" onclick="openTab('ratios')">Key Ratios</button>
+        <button class="tab-button" onclick="openTab('chart')">Historical Trends</button>
+        <button class="tab-button" onclick="openTab('compare')">Risk Metrics</button>
+    </div>
+    
+    <div id="ratios" class="tab-content" style="display: block;">
+        <div class="fundamentals-grid">
+            <div class="fundamental-card">
+                <h3>Valuation Ratios</h3>
+                <div class="ratio-item">
+                    <span class="ratio-name">P/E Ratio</span>
+                    <span class="ratio-value" id="pe-ratio">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">P/B Ratio</span>
+                    <span class="ratio-value" id="pb-ratio">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">P/S Ratio</span>
+                    <span class="ratio-value" id="ps-ratio">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">Dividend Yield</span>
+                    <span class="ratio-value" id="div-yield">-</span>
+                </div>
+            </div>
+            
+            <div class="fundamental-card">
+                <h3>Profitability Ratios</h3>
+                <div class="ratio-item">
+                    <span class="ratio-name">ROE</span>
+                    <span class="ratio-value" id="roe">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">ROA</span>
+                    <span class="ratio-value" id="roa">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">Gross Margin</span>
+                    <span class="ratio-value" id="gross-margin">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">Operating Margin</span>
+                    <span class="ratio-value" id="op-margin">-</span>
+                </div>
+            </div>
+            
+            <div class="fundamental-card">
+                <h3>Liquidity Ratios</h3>
+                <div class="ratio-item">
+                    <span class="ratio-name">Current Ratio</span>
+                    <span class="ratio-value" id="current-ratio">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">Quick Ratio</span>
+                    <span class="ratio-value" id="quick-ratio">-</span>
+                </div>
+            </div>
+            
+            <div class="fundamental-card">
+                <h3>Leverage Ratios</h3>
+                <div class="ratio-item">
+                    <span class="ratio-name">Debt/Equity</span>
+                    <span class="ratio-value" id="debt-equity">-</span>
+                </div>
+                <div class="ratio-item">
+                    <span class="ratio-name">EBITDA Margin</span>
+                    <span class="ratio-value" id="ebitda-margin">-</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+        <!-- Inside the fundamentals-container, in the chart tab -->
+    <div id="chart" class="tab-content" style="display: none;">
+        <div class="chart-container">
+        <div id="fundamentals-chart"></div>
+        </div>
+    </div>
+    
+    <div id="compare" class="tab-content">
+        <div class="fundamental-card">
+        <h3>Risk Metrics</h3>
+            <div class="ratio-item">
+                <span class="ratio-name">Volatility (Annualized)</span>
+                <span class="ratio-value" id="volatility">-</span>
+            </div>
+            <div class="ratio-item">
+                <span class="ratio-name">Beta</span>
+                <span class="ratio-value" id="beta">-</span>
+            </div>
+            <div class="ratio-item">
+                <span class="ratio-name">VaR (95%)</span>
+                <span class="ratio-value" id="var95">-</span>
+            </div>
+            <div class="chart-container">
+                <div id="risk-metrics-chart"></div>
+            </div>
+            <div class="chart-container">
+                <div id="rolling-vol-chart"></div>
+            </div>
+            <div class="chart-container" style="height:450px;">
+                <div id="beta-gauge-chart"></div>
+            </div>
+</div>
+    </div>
+</div>
+    <script type="module" src="{{ url_for('static', filename='js/fundamentals.js') }}"></script>
+    <script type="module" src="{{ url_for('static', filename='js/auth.js') }}"></script>
+         <div class="shiny-curve"></div>   
+        <div style="margin-top:500px"></div>
+
+        <footer>
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+                        <li><a href="{{ url_for('movers') }}">Market Movers</a></li>
+                        <li><a href="{{ url_for('news') }}">News</a></li>
+                        <li><a href="{{ url_for('login') }}">Login</a></li>
+                        <li><a href="{{url_for('predict')}}">Predictor</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Legal</h3>
+                    <ul>
+                        <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                        <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                        <li><a href="{{ url_for('disclaimer') }}">Disclaimer</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Contact</h3>
+                    <ul>
+                        <li><a href="mailto:support@stockai.com">support@stockai.com</a></li>
+                        <li><a href="tel:+15551234567">+1 (555) 123-4567</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Newsletter</h3>
+                <form id="newsletter-form">
+                    <input type="email" id="newsletter-email" placeholder="Enter your email" required>
+                    <button type="submit">Subscribe</button>
+                </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 MarketMind. All rights reserved.</p>
+            </div>
+        </footer>
+</body>
+</html>

templates/home.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stocker - Homepage</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <script> const modelpath = "{{ modelpath }}"; </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
+    <!-- Intro.js CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
+    <!-- Intro.js JS -->
+    <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
+</head>
+<body>
+    
+    <div class="transition-overlay"></div>
+
+    <nav class="navbar" data-intro="This is the main navigation bar. Use it to access all features!" data-step="2">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="#">Home</a>
+            <div class="dropdown">
+                <h4>Services</h4>
+                <div class="dropdown-content">
+                    <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+                    <a href="{{ url_for('movers') }}">Market Movers</a>
+                    <a href="{{ url_for('news') }}">News</a>
+                    <a href="{{url_for('predict')}}">Predictor</a>
+                </div>
+            </div>
+            <a href="{{ url_for('login') }}" id="logout">Login</a>
+            <label class="toggle-switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider">
+                <span class="toggle-circle">
+                <span class="toggle-icon">&#9790;</span> <!-- Sun by default -->
+                </span>
+            </span>
+            </label>
+        </div>
+    </nav>
+
+    <div class="container glow" data-text="MarketMind" data-intro="Welcome to MarketMind! This is your dashboard." data-step="1">MarketMind</div>
+
+    <!-- Highlighted Search Section -->
+    <div class="highlight-container fade-in" data-intro="Use the search bar to find companies and get instant suggestions." data-step="3">
+        <div class="description">
+            Stock analysis and screening tool for investors in India.
+        </div>
+        <div class="search-container">
+            <input type="text" class="search-box" id="home-search-box" placeholder="Search for a company">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="stock-suggestions">
+            <p>Trending Stocks:</p>
+            <div class="suggestions-list">
+                <span class="suggestion">Reliance Industries</span>
+                <span class="suggestion">Tata Consultancy Services (TCS)</span>
+                <span class="suggestion">HDFC Bank</span>
+                <span class="suggestion">Infosys</span>
+                <span class="suggestion">ICICI Bank</span>
+            </div>
+        </div>
+    </div>
+    <!-- About Us Section -->
+    <div class="about-us fade-in">
+        <h2>About Us</h2>
+        <p>The stock market has a rich history, evolving from small trading groups to global financial powerhouses. Today, major players such as Reliance Industries, Tata Consultancy Services, and HDFC Bank dominate the Indian stock market. With technological advancements, stock analysis and prediction have become crucial tools for investors, helping them navigate the ever-changing market trends.</p>
+        <div id="three-container"></div>
+    </div>
+
+    <div class="cards-container fade-in" data-intro="Explore our services: Market Movers, Fundamentals, News, and Predictor." data-step="4">
+        <div class="card">
+            <h3>movers</h3>
+            <p>Explore real-time insights into the National Stock Exchange (NSE) with our interactive dashboard. 
+                Track top gainers and losers, switch between list and graph views, 
+                nd fetch historical stock data by selecting dates and searching for specific stocks. Stay informed and make data-driven decisions with ease.</p>
+        </div>
+        <div class="card">
+            <h3>Fundamentals</h3>
+            <p>The MarketMind's Fundamental page analyzes Indian Stock Market Data with options to input dates, search stocks, and view data in Table, Chart, or Both formats.
+                 It features a Stock Fundamentals Analysis section with Key Ratios, Historical Trends, and Peer Comparison, displaying Valuation, Profitability, Liquidity, and Leverage ratios.
+                 The page includes navigation links for Home, Services, Logout, and a theme toggle.</p>
+        </div>
+        <div class="card">
+            <h3>News</h3>
+            <p>Latest News on Indian Markets:
+                Stay updated with the most recent developments in the Indian stock market. 
+                Our news section provides insights on market trends, banking performance, policy updates, and sector-specific movements. 
+                From rising indices to regulatory meetings and emerging investment opportunities, explore key stories shaping the financial landscape.</p>
+        </div>
+        <div class="card">
+            <h3>Predictor</h3>
+            <p>Leverage the power of AI and machine learning to forecast stock price movements with our Predictor tool. 
+                Input a stock and receive short-term price predictions based on historical trends, technical indicators, and sentiment analysis. 
+                Designed for educational and research purposes, this tool aids in understanding market behavior. 
+                Please note: predictions may vary significantly and should not be considered financial advice. 
+                Use it to enhance your market intuition and strategy planning.
+                More features coming soon!</p>
+        </div>
+    </div>
+    
+    <!-- Include Firebase and other necessary JS files -->
+    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>
+    <script type="module" src="{{ url_for('static', filename='js/home.js') }}"></script>
+    <script type="module" src="{{ url_for('static', filename='js/auth.js') }}"></script>
+
+    <div style="margin-top:500px"></div>
+
+    <footer>
+        <div class="footer-content" data-intro="Find quick links, legal info, and contact details here." data-step="5">
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+                    <li><a href="{{ url_for('movers') }}">movers</a></li>
+                    <li><a href="{{ url_for('news') }}">News</a></li>
+                    <li><a href="{{ url_for('login') }}">Login</a></li>
+                    <li><a href="{{url_for('predict')}}">Predictor</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Legal</h3>
+                <ul>
+                    <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                    <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                    <li><a href="{{ url_for('disclaimer') }}">Disclaimer</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Contact</h3>
+                <ul>
+                    <li><a href="mailto:support@stockai.com">support@stockai.com</a></li>
+                    <li><a href="tel:+15551234567">+1 (555) 123-4567</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Newsletter</h3>
+                <form id="newsletter-form">
+                    <input type="email" id="newsletter-email" placeholder="Enter your email" required>
+                    <button type="submit">Subscribe</button>
+                </form>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>© 2025 MarketMind. All rights reserved.</p>
+        </div>
+    </footer>
+
+</body>
+</html>

templates/login.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
+</head>
+<body>
+    <!-- Theme Toggle Switch -->
+    <div class="theme-toggle" style="position: absolute; top: 20px; right: 30px;">
+        <label class="toggle-switch">
+        <input type="checkbox" id="theme-toggle-checkbox">
+        <span class="slider"></span>
+        </label>
+    </div>
+    <div class="container">
+        <!-- Left Section -->
+        <div class="left-section"></div>
+
+        <!-- Right Section -->
+        <div class="right-section">
+            <h1 class="title" id="form-title">Create an account</h1>
+            <p class="subtitle" id="form-subtitle">Already have an account? <a href="#" id="toggle-form">Log in</a></p>
+
+            <form id="auth-form">
+                <div class="name-fields" id="name-fields">
+                    <input type="text" id="first-name" placeholder="First Name">
+                    <input type="text" id="last-name" placeholder="Last Name">
+                </div>
+                <input type="email" id="email" placeholder="Email" required
+                pattern="^[a-zA-Z0-9._%+-]{2,}@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$"
+                minlength="6" 
+                maxlength="40" 
+                title="Enter a valid email (e.g., name@example.com)" >
+                <input type="password" 
+                id="password" 
+                placeholder="Enter your password" 
+                required 
+                minlength="8" 
+                maxlength="20"
+                pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,20}$"
+                title="Password must be 8-20 characters and include uppercase, lowercase, number, and special character">
+                <button type="submit" class="submit-btn" id="submit-btn">
+                    Create account
+                    <span class="spinner" id="loading-spinner"></span>
+                </button>
+            </form>
+
+            <div id="message" class="error-message"></div>
+
+            <div class="separator">
+                <div class="line"></div>
+                <span id="separator-text">Or Register With</span>
+                <div class="line"></div>
+            </div>
+
+            <!-- <div class="social-box">
+                <div class="social-buttons">
+                    <button type="button" id="google-btn" class="google-btn"><i class="fab fa-google"></i> Google</button>
+                    <button type="button" id="apple-btn" class="apple-btn"><i class="fab fa-apple"></i> Apple</button>
+                </div>
+            </div> -->
+        </div>
+    </div>
+
+    <!-- Firebase App (the core Firebase SDK) -->
+    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
+    <!-- Firebase Auth SDK -->
+    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
+    
+    <!-- Firebase Configuration -->
+    <script type="module" src="{{ url_for('static', filename='js/firebase-config.js') }}"></script>
+    
+    <!-- Login Page JavaScript -->
+    <script type="module" src="{{ url_for('static', filename='js/login.js') }}"></script>
+</body>
+</html>

templates/movers.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
+    <!-- Intro.js CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
+    <!-- Intro.js JS -->
+    <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
+    <script type="module"> import { requireLogin } from "{{ url_for('static', filename='js/auth.js') }}"; requireLogin(); </script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <title>MarketMind - movers-Page</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/movers.css') }}">
+</head>
+<body>
+    <div class="transition-overlay"></div>
+
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <div class="dropdown">
+                <h4>Services</h4>
+                <div class="dropdown-content">
+                    <a href="{{ url_for('movers') }}">market Movers</a>
+                    <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+                    <a href="{{ url_for('news') }}">News</a>
+                    <a href="{{url_for('predict')}}">Predictor</a>
+                </div>
+            </div>
+            <a href="{{ url_for('login') }}" id="logout">Logout</a>
+            <label class="toggle-switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider">
+                <span class="toggle-circle">
+                <span class="toggle-icon">&#9790;</span> <!-- Sun by default -->
+                </span>
+            </span>
+            </label>
+        </div>
+    </nav>
+
+    <!-- Rotating Stock Ticker -->
+    <div class="stock-ticker-indian">
+        <div class="ticker-content-indian" id="ticker-content-indian">
+            <!-- Stock data will be dynamically inserted here -->
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="video-container ">
+        <video autoplay muted loop id="bgVideo">
+            <source src="{{ url_for('static', filename='video/bg video.mp4') }}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="content ">
+            <h1>Welcome to NSE Market Dashboard</h1>
+        </div>
+    </div>    
+
+    <!-- Market Movers Section -->
+    <div class="market-movers" data-intro="See the top gainers and losers in the market. Switch between list and graph view." data-step="1">
+        <h2 class="indian-head">Market Movers</h2>
+        <!-- Toggle Buttons -->
+        <div class="toggle-buttons">
+            <button id="list-view-btn" class="active">List View</button>
+            <button id="graph-view-btn">Graph View</button>
+        </div>
+        <div class="movers-container">
+            <!-- Top Gainers -->
+            <div class="movers-section">
+                <h3>Top Gainers</h3>
+                <ul id="top-gainers"></ul>
+                <div id="gainers-plotly" style="display: none; height:350px;"></div>
+            </div>
+            <!-- Top Losers -->
+            <div class="movers-section">
+                <h3>Top Losers</h3>
+                <ul id="top-losers"></ul>
+                <div id="losers-plotly" style="display: none; height:350px;"></div>
+            </div>
+        </div>
+    </div>
+    
+    
+    <div class="favorites-container" data-intro="Bookmark your favorite companies and track their prices here." data-step="2">
+    <h2>My Favorite Companies</h2>
+    <div id="favorites-message" style="display:none; margin-bottom:10px;"></div>
+    <div class="favorites-table-wrapper">
+        <table id="favorites-table">
+            <thead>
+                <tr>
+                    <th>Bookmark</th>
+                    <th>Company</th>
+                    <th>Ticker</th>
+                    <th>Current Price</th>
+                </tr>
+            </thead>
+            <tbody id="favorites-tbody">
+                <!-- Rows will be inserted here -->
+            </tbody>
+        </table>
+    </div>
+</div>
+
+    <div id="message-container" style="display: none; padding: 10px; margin: 10px 0; border-radius: 5px;"></div>
+
+</div>
+
+    <script type="module" src="{{ url_for('static', filename='js/movers.js') }}"></script>
+    <script type="module" src="{{ url_for('static', filename='js/auth.js') }}"></script>
+
+
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+                    <li><a href="{{ url_for('movers') }}">Market Movers</a></li>
+                    <li><a href="{{ url_for('news') }}">News</a></li>
+                    <li><a href="{{ url_for('login') }}">Login</a></li>
+                    <li><a href="{{url_for('predict')}}">Predictor</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Legal</h3>
+                <ul>
+                    <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                    <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                    <li><a href="{{ url_for('disclaimer') }}">Disclaimer</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Contact</h3>
+                <ul>
+                    <li><a href="mailto:support@stockai.com">support@stockai.com</a></li>
+                    <li><a href="tel:+15551234567">+1 (555) 123-4567</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Newsletter</h3>
+                <form id="newsletter-form">
+                    <input type="email" id="newsletter-email" placeholder="Enter your email" required>
+                    <button type="submit">Subscribe</button>
+                </form>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>© 2025 MarketMind. All rights reserved.</p>
+        </div>
+    </footer>
+
+</body>
+</html>

templates/news.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/news.css') }}">
+    <!-- Intro.js CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
+    <!-- Intro.js JS -->
+    <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
+    <script type="module"> import { requireLogin } from "{{ url_for('static', filename='js/auth.js') }}"; requireLogin(); </script>
+    <title>MarketMind - Fundamentals</title>
+</head>
+<body>
+    <div class="transition-overlay"></div>
+
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <div class="dropdown">
+                <h4>Services</h4>
+                <div class="dropdown-content">
+                    <a href="{{ url_for('news') }}">News</a>
+                    <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+                    <a href="{{ url_for('movers') }}">Market Movers</a>
+                    <a href="{{url_for('predict')}}">Predictor</a>
+                </div>
+            </div>
+            <a href="{{ url_for('login') }}" id="logout">Logout</a>
+            <label class="toggle-switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider">
+                <span class="toggle-circle">
+                <span class="toggle-icon">&#9790;</span> <!-- Sun by default -->
+                </span>
+            </span>
+            </label>
+        </div>
+    </nav>
+    <!-- News Section -->
+    <section class="news-section" data-intro="This section displays the latest news on Indian markets." data-step="1">
+        <h2>Latest News on Indian Markets</h2>
+        <div style="text-align: center; margin-bottom: 20px;" data-intro="Click this button to refresh the news feed." 
+         data-step="2">
+            <button id="refresh-news-btn" style="padding: 8px 18px; background: #4a8fdf; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
+                &#x21bb; Refresh News
+            </button>
+        </div>
+        <div class="news-container" id="news-container" data-intro="Here you can view the latest news articles. Scroll to explore more." 
+         data-step="3">
+            <!-- News articles will be dynamically inserted here -->
+        </div>
+    </section>
+
+    <script type="module" src="{{ url_for('static', filename='js/news.js') }}"></script>
+    <script type="module" src="{{ url_for('static', filename='js/auth.js') }}"></script>
+
+        <div style="margin-top:100px"></div>
+
+        <footer>
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+                        <li><a href="{{ url_for('movers') }}">Market Movers</a></li>
+                        <li><a href="{{ url_for('news') }}">News</a></li>
+                        <li><a href="{{ url_for('login') }}">Login</a></li>
+                        <li><a href="{{url_for('predict')}}">Predictor</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Legal</h3>
+                    <ul>
+                        <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                        <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                        <li><a href="{{ url_for('disclaimer') }}">Disclaimer</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Contact</h3>
+                    <ul>
+                        <li><a href="mailto:support@stockai.com">support@stockai.com</a></li>
+                        <li><a href="tel:+15551234567">+1 (555) 123-4567</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Newsletter</h3>
+                    <form id="newsletter-form">
+                        <input type="email" id="newsletter-email" placeholder="Enter your email" required>
+                        <button type="submit">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 MarketMind. All rights reserved.</p>
+            </div>
+        </footer>
+
+</body>
+</html>

templates/predict.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MarketMind - Stock Predictor</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/predict.css') }}">
+  <script type="module"> import { requireLogin } from "{{ url_for('static', filename='js/auth.js') }}"; requireLogin(); </script>
+  <!-- Intro.js CSS & JS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body>
+  <div class="transition-overlay"></div>
+  <!-- Disclaimer Overlay -->
+  <div id="disclaimer-overlay" style="display:none;">
+    <div class="disclaimer-box">
+      <button id="close-disclaimer" aria-label="Close disclaimer">&times;</button>
+      <h2>Disclaimer</h2>
+      <ul>
+        <li>Stock market predictions shown here are based on historical data and statistical models.</li>
+        <li>They do not guarantee future results and should not be treated as financial advice.</li>
+        <li>Price differences between 100 to 600 points may occur due to market volatility.</li>
+        <li>Always consult a certified financial advisor before making investment decisions.</li>
+      </ul>
+      <div class="disclaimer-risk">
+        By using this app, you acknowledge and accept these risks.
+      </div>
+    </div>
+  </div>
+
+  <!-- Navbar -->
+  <nav class="navbar">
+    <div><strong>MarketMind</strong></div>
+    <div>
+      <a href="{{ url_for('home') }}">Home</a>
+      <div class="dropdown">
+        <h4>Services</h4>
+        <div class="dropdown-content">
+          <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+          <a href="{{ url_for('movers') }}">Market Movers</a>
+          <a href="{{ url_for('news') }}">News</a>
+          <a href="{{ url_for('predict') }}">Predictor</a>
+        </div>
+      </div>
+      <a href="{{ url_for('login') }}" id="logout">Logout</a>
+      <label class="toggle-switch">
+        <input type="checkbox" id="darkModeToggle">
+        <span class="slider">
+          <span class="toggle-circle">
+            <span class="toggle-icon">&#9728;</span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </nav>
+  
+  <!-- Main Container -->
+  <div class="predictor-container">
+    <h1>Stock Market Predictor</h1>
+    <form class="predictor-form">
+      <div class="form-group">
+        <label for="stock-select">Choose Stock</label>
+        <select id="stock-select" data-intro="Select the stock you want to predict." data-step="1">
+          <option value="">-- Select a stock --</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="prediction-date">Prediction Date</label>
+        <input type="date" id="prediction-date" name="predictionDate" min="" data-intro="Pick a prediction date (6 days to 1 month from today)." data-step="2"/>
+      </div>
+      <!-- Epochs selection (dropdown with custom input) -->
+          <div class="form-group">
+            <label for="epochs">Epochs</label>
+            <select id="epochs" name="epochs" onchange="handleEpochsChange(this)" data-intro="Choose the number of training epochs (higher = more accurate, but slower)." data-step="3">
+              <option value="100" selected>100 (default)</option>
+              <option value="120">120</option>
+              <option value="150">150</option>
+              <option value="custom">Custom...</option>
+            </select>
+            <input type="number" id="custom-epochs" min="1" max="500" style="display:none; margin-top:8px;" placeholder="Enter epochs" />
+          </div>
+
+      <div class="form-group">
+        <label>Data Source</label>
+        <div class="radio-group" data-intro="Choose the data source for prediction." data-step="4">
+          <div class="radio-option">
+            <input type="radio" id="historical-only" name="data-source" value="historical-only" checked/>
+            <label for="historical-only">Historical Data Only</label>
+          </div>
+    
+          <div class="radio-option">
+            <input type="radio" id="sentiment-only" name="data-source" value="news-sentiment" />
+            <label for="sentiment-only">Sentiment Analysis Only</label>
+          </div>
+          <div class="radio-option">
+            <input type="radio" id="both" name="data-source" value="both" />
+            <label for="both">Both Historical and Sentiment</label>
+          </div>
+        </div>
+      </div>
+      <div id="message-box" style="display:none;"></div>
+      <button type="button" id="predict-btn" class="predict-btn" data-intro="Click here to predict the stock price!" data-step="5">Predict Stock Price</button>
+    </form>
+
+    <div class="result-section" id="result-section" style="display: none;">
+      <h2>Prediction Results</h2>
+      <div class="prediction-result">
+        <h3>Predicted Price for <span id="result-stock-name"></span></h3>
+        <div class="prediction-value">₹<span id="predicted-price"></span></div>
+        <div class="news-sentiment" id="news-sentiment" style="display: none;">
+          <h3>Latest News Sentiment</h3>
+          <p id="sentiment-text">Fetching sentiment...</p>
+        </div>
+        <div class="prediction-date" id="prediction-date-display"></div>
+      </div>
+      <div class="chart-container" id="chart-container">
+        <div id="prediction-chart" style="height: 450px;"></div>
+      </div>
+    </div>
+  </div>
+  <div style="height: 50px;"></div>
+  <div id="loading-overlay" style="display:none;">
+  <div class="loader-container">
+    <div class="spinner"></div>
+    <div id="progress-text">Loading... 0%</div>
+  </div>
+</div>
+  <script type="module" src="{{ url_for('static', filename='js/predict.js') }}"></script>
+  <script type="module" src="{{ url_for('static', filename='js/auth.js') }}"></script>
+  <!-- Footer -->
+  <footer>
+    <div class="footer-content">
+      <div class="footer-section">
+        <h3>Quick Links</h3>
+        <ul>
+          <li><a href="{{ url_for('home') }}">Home</a></li>
+          <li><a href="{{ url_for('fundamentals') }}">Fundamentals</a></li>
+          <li><a href="{{ url_for('movers') }}">Market Movers</a></li>
+          <li><a href="{{ url_for('news') }}">News</a></li>
+          <li><a href="{{ url_for('login') }}">Login</a></li>
+          <li><a href="{{ url_for('predict') }}">Predictor</a></li>
+        </ul>
+      </div>
+      <div class="footer-section">
+        <h3>Legal</h3>
+        <ul>
+            <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+            <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+            <li><a href="{{ url_for('disclaimer') }}">Disclaimer</a></li>
+        </ul>
+      </div>
+      <div class="footer-section">
+        <h3>Contact</h3>
+        <ul>
+          <li><a href="mailto:support@stockai.com">support@stockai.com</a></li>
+          <li><a href="tel:+15551234567">+1 (555) 123-4567</a></li>
+        </ul>
+      </div>
+      <div class="footer-section">
+        <h3>Newsletter</h3>
+        <form id="newsletter-form">
+                    <input type="email" id="newsletter-email" placeholder="Enter your email" required>
+                    <button type="submit">Subscribe</button>
+                </form>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>© 2025 MarketMind. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Scripts -->
+
+</body>
+</html>

templates/privacy.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Privacy Policy - MarketMind</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+</head>
+<body>
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+            <a href="{{ url_for('movers') }}">Market Movers</a>
+            <a href="{{ url_for('news') }}">News</a>
+            <a href="{{ url_for('predict') }}">Predictor</a>
+            <label class="toggle-switch">
+                <input type="checkbox" id="darkModeToggle">
+                <span class="slider">
+                    <span class="toggle-circle">
+                        <span class="toggle-icon">&#9790;</span>
+                    </span>
+                </span>
+            </label>
+        </div>
+    </nav>
+    <main class="legal-container">
+        <h1>Privacy Policy</h1>
+        <p>
+            At MarketMind, your privacy is important to us. We collect only the information necessary to provide our services, such as your email for newsletter subscriptions and bookmarks for your personalized experience. We do not sell or share your data with third parties except as required by law.
+        </p>
+        <h2>Information We Collect</h2>
+        <ul>
+            <li>Email address (for newsletter and authentication)</li>
+            <li>Bookmarks and preferences</li>
+            <li>Usage analytics (anonymized)</li>
+        </ul>
+        <h2>How We Use Information</h2>
+        <ul>
+            <li>To provide and improve our services</li>
+            <li>To send newsletters if you subscribe</li>
+            <li>To personalize your experience</li>
+        </ul>
+        <h2>Your Rights</h2>
+        <p>
+            You can request deletion of your data at any time by contacting us at <a href="mailto:support@stockai.com">support@stockai.com</a>.
+        </p>
+        <p>
+            For more details, please contact us.
+        </p>
+    </main>
+    <footer>
+        <div class="footer-bottom">
+            <p>© 2025 MarketMind. All rights reserved.</p>
+        </div>
+    </footer>
+    <script type="module" src="{{ url_for('static', filename='js/legal.js') }}"></script>
+</body>
+</html>

templates/terms.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Terms of Service - MarketMind</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/legal.css') }}">
+</head>
+<body>
+    <nav class="navbar">
+        <div><strong>MarketMind</strong></div>
+        <div>
+            <a href="{{ url_for('home') }}">Home</a>
+            <a href="{{ url_for('fundamentals') }}">Fundamentals</a>
+            <a href="{{ url_for('movers') }}">Market Movers</a>
+            <a href="{{ url_for('news') }}">News</a>
+            <a href="{{ url_for('predict') }}">Predictor</a>
+            <label class="toggle-switch">
+                <input type="checkbox" id="darkModeToggle">
+                <span class="slider">
+                    <span class="toggle-circle">
+                        <span class="toggle-icon">&#9790;</span>
+                    </span>
+                </span>
+            </label>
+        </div>
+    </nav>
+    <main class="legal-container">
+        <h1>Terms of Service</h1>
+        <p>
+            By using MarketMind, you agree to these terms. Our services are for informational and educational purposes only and do not constitute financial advice. You are responsible for your investment decisions.
+        </p>
+        <h2>Use of Service</h2>
+        <ul>
+            <li>Do not misuse or attempt to disrupt our services.</li>
+            <li>Do not use our content for unlawful purposes.</li>
+        </ul>
+        <h2>Limitation of Liability</h2>
+        <p>
+            MarketMind is not liable for any losses or damages arising from the use of our platform.
+        </p>
+        <h2>Changes to Terms</h2>
+        <p>
+            We may update these terms from time to time. Continued use of the service constitutes acceptance of the new terms.
+        </p>
+    </main>
+    <footer>
+        <div class="footer-bottom">
+            <p>© 2025 MarketMind. All rights reserved.</p>
+        </div>
+    </footer>
+    <script type="module" src="{{ url_for('static', filename='js/legal.js') }}"></script>
+</body>
+</html>