Yup this is it

TrendAnalysis.py

@@ -0,0 +1,1044 @@
+from motor.motor_asyncio import AsyncIOMotorClient
+import pandas as pd
+import numpy as np
+import re
+import json
+import umap
+import plotly.io as pio
+import hdbscan
+from bertopic import BERTopic
+from sklearn.feature_extraction.text import ENGLISH_STOP_WORDS
+from skopt import gp_minimize
+from sentence_transformers import SentenceTransformer
+import torch
+import random
+import multiprocessing
+from sklearn.feature_extraction.text import CountVectorizer
+from bertopic.vectorizers import ClassTfidfTransformer
+from bertopic.representation import KeyBERTInspired
+import optuna
+import pandas as pd
+import dash
+from dash import dcc, html, Input, Output, State
+import plotly.graph_objects as go
+import plotly.express as px
+import numpy as np
+import dash_bootstrap_components as dbc
+from fastapi import HTTPException, APIRouter, Request
+from pydantic import BaseModel
+import threading
+import time
+import webbrowser
+import asyncio
+
+
+# Set seed for reproducibility
+def set_seed(seed=42):
+    random.seed(seed)
+    np.random.seed(seed)
+    torch.manual_seed(seed)
+    torch.cuda.manual_seed_all(seed)
+    torch.backends.cudnn.deterministic = True
+    torch.backends.cudnn.benchmark = False
+
+
+if __name__ == "__main__":
+    set_seed(42)
+    multiprocessing.freeze_support()
+
+global TitleName
+TitleName = "Dashboard"
+router = APIRouter()
+
+
+class TrendAnalysisRequest(BaseModel):
+    userId: str
+    topic: str
+    year: str = None
+    page: int = 0
+
+
+async def fetch_papers_with_pagination(request: Request, userId: str, topic: str, year: str = None, page: int = 0):
+    # Build the query filter
+    query_filter = {"userId": userId, "topic": topic}
+    if year:
+        query_filter["year"] = year
+
+    # Count total matching documents
+    count_pipeline = [
+        {"$match": query_filter},
+        {"$unwind": "$papers"},
+        {"$count": "total_papers"}
+    ]
+    collection = request.app.state.collection
+    count_result = await collection.aggregate(count_pipeline).to_list(length=1)
+    total_papers = count_result[0]['total_papers'] if count_result else 0
+
+    print(f"Total papers matching criteria: {total_papers}")
+
+    # If no papers found, return empty result
+    if total_papers == 0:
+        return pd.DataFrame(), 0, 0, 0, 0
+
+    # Define pagination constants
+    papers_per_page = 200
+    min_papers_last_page = 50
+
+    # Calculate basic pagination
+    if total_papers <= papers_per_page:
+        # Simple case: all papers fit in one page
+        total_pages = 1
+    else:
+        # Multiple pages case
+        full_pages = total_papers // papers_per_page
+        remaining = total_papers % papers_per_page
+
+        if remaining >= min_papers_last_page:
+            # If remaining papers meet minimum threshold, create a separate page
+            total_pages = full_pages + 1
+        else:
+            # Otherwise, we'll have exactly 'full_pages' pages
+            # The remaining papers will be added to the last page
+            total_pages = full_pages
+
+    # Ensure page is within valid range
+    if page >= total_pages:
+        return pd.DataFrame(), 0, total_pages, 0, total_papers
+
+    # Calculate skip and limit based on page number
+    if total_pages == 1:
+        # Only one page - return all papers
+        skip = 0
+        limit = total_papers
+    elif page < total_pages - 1:
+        # Regular full page
+        skip = page * papers_per_page
+        limit = papers_per_page
+    else:
+        # Last page - might include remaining papers
+        remaining = total_papers % papers_per_page
+
+        if remaining >= min_papers_last_page or remaining == 0:
+            # Last page with either enough remaining papers or perfectly divided
+            skip = page * papers_per_page
+            limit = remaining if remaining > 0 else papers_per_page
+        else:
+            # Last page with remaining papers that don't meet minimum threshold
+            # We distribute by adding them to the last page
+            skip = (total_pages - 1) * papers_per_page
+            limit = papers_per_page + remaining
+
+    print(f"Pagination: Page {page + 1} of {total_pages}, Skip {skip}, Limit {limit}")
+
+    # MongoDB aggregation pipeline
+    pipeline = [
+        {"$match": query_filter},
+        {"$unwind": "$papers"},
+        {"$replaceRoot": {"newRoot": "$papers"}},
+        {"$project": {
+            "_id": 0,
+            "paperId": 1,
+            "url": 1,
+            "title": 1,
+            "abstract": 1,
+            "citationCount": 1,
+            "influentialCitationCount": 1,
+            "embedding": 1,
+            "publicationDate": 1,
+            "authors": 1
+        }},
+        {"$sort": {"publicationDate": 1}},
+        {"$skip": skip},
+        {"$limit": limit}
+    ]
+
+    # Execute the aggregation pipeline
+    cursor = collection.aggregate(pipeline)
+    papers = await cursor.to_list(None)
+
+    papers_count = len(papers)
+    print(f"Papers Retrieved: {papers_count}")
+
+    # Convert to DataFrame
+    df = pd.DataFrame(papers)
+    df = df.sort_values(by="publicationDate")
+    print(df[["paperId", "publicationDate"]].head(10))
+
+    return df, page, total_pages, papers_count, total_papers
+
+
+# Preprocessing function
+def clean_text(text):
+    text = str(text).lower()
+    text = re.sub(r"[^a-zA-Z0-9\s]", "", text)
+    return ' '.join([word for word in text.split() if word not in ENGLISH_STOP_WORDS])
+
+
+# Adaptive clustering and topic modeling
+def perform_trend_analysis(df):
+    # Convert embeddings
+    def convert_embedding(embedding):
+        return np.array(embedding["vector"], dtype=np.float64) if isinstance(embedding,
+                                                                             dict) and "vector" in embedding else None
+
+    df["embedding"] = df["embedding"].apply(convert_embedding)
+    df = df.dropna(subset=["embedding"])
+
+    if df.empty:
+        return df, {}
+
+    df["clean_text"] = (df["abstract"].fillna("")).apply(clean_text)
+
+    def objective(trial):
+        umap_n_components = trial.suggest_int("umap_n_components", 1, 12)
+        umap_min_dist = trial.suggest_float("umap_min_dist", 0.1, 0.8)
+        umap_n_neighbors = trial.suggest_int("umap_n_neighbors", 2, 12)
+        hdbscan_min_cluster_size = trial.suggest_int("hdbscan_min_cluster_size", 2, 10)
+        hdbscan_min_samples = trial.suggest_int("hdbscan_min_samples", 1, 10)
+        hdbscan_cluster_selection_epsilon = trial.suggest_float("hdbscan_cluster_selection_epsilon", 0.2, 0.8)
+        hdbscan_cluster_selection_method = trial.suggest_categorical("hdbscan_cluster_selection_method",
+                                                                     ["eom", "leaf"])
+
+        reducer_high_dim = umap.UMAP(
+            n_components=umap_n_components,
+            random_state=42,
+            min_dist=umap_min_dist,
+            n_neighbors=umap_n_neighbors,
+            metric="cosine"
+        )
+        reduced_embeddings_high_dim = reducer_high_dim.fit_transform(np.vstack(df["embedding"].values)).astype(
+            np.float64)
+
+        clusterer = hdbscan.HDBSCAN(
+            min_cluster_size=hdbscan_min_cluster_size,
+            min_samples=hdbscan_min_samples,
+            cluster_selection_epsilon=hdbscan_cluster_selection_epsilon,
+            cluster_selection_method=hdbscan_cluster_selection_method,
+            prediction_data=True,
+            core_dist_n_jobs=1
+        )
+        labels = clusterer.fit_predict(reduced_embeddings_high_dim)
+
+        if len(set(labels)) > 1:
+            dbcv_score = hdbscan.validity.validity_index(reduced_embeddings_high_dim, labels)
+        else:
+            dbcv_score = -np.inf
+
+        return dbcv_score
+
+    study = optuna.create_study(
+        direction="maximize",
+        sampler=optuna.samplers.TPESampler(seed=42))
+    study.optimize(objective, n_trials=100)
+
+    best_params = study.best_params
+    umap_model = umap.UMAP(
+        n_components=best_params["umap_n_components"],
+        random_state=42,
+        min_dist=best_params["umap_min_dist"],
+        n_neighbors=best_params["umap_n_neighbors"],
+        metric="cosine"
+    )
+    hdbscan_model = hdbscan.HDBSCAN(
+        min_cluster_size=best_params["hdbscan_min_cluster_size"],
+        min_samples=best_params["hdbscan_min_samples"],
+        cluster_selection_epsilon=best_params["hdbscan_cluster_selection_epsilon"],
+        cluster_selection_method=best_params["hdbscan_cluster_selection_method"],
+        prediction_data=True,
+        core_dist_n_jobs=1
+    )
+
+    vectorizer = CountVectorizer(
+        stop_words=list(ENGLISH_STOP_WORDS),
+        ngram_range=(2, 3)
+    )
+
+    representation_model = KeyBERTInspired()
+    embedding_model = SentenceTransformer("allenai/specter")
+    topic_model = BERTopic(
+        vectorizer_model=vectorizer,
+        umap_model=umap_model,
+        hdbscan_model=hdbscan_model,
+        embedding_model=embedding_model,
+        nr_topics='auto',
+        top_n_words=8,
+        representation_model=representation_model,
+        ctfidf_model=ClassTfidfTransformer(reduce_frequent_words=False, bm25_weighting=True)
+    )
+
+    topics, _ = topic_model.fit_transform(df["clean_text"], np.vstack(df["embedding"].values))
+    df["topic"] = topics
+    topic_labels = {t: " | ".join([word for word, _ in topic_model.get_topic(t)][:8]) for t in set(topics)}
+
+    reduced_embeddings_2d = umap.UMAP(n_components=2, random_state=42).fit_transform(
+        np.vstack(df["embedding"].values)).astype(np.float64)
+    df["x"] = reduced_embeddings_2d[:, 0]
+    df["y"] = reduced_embeddings_2d[:, 1]
+    df["topic_label"] = df["topic"].map(topic_labels)
+
+    return df, topic_labels
+
+
+def build_dashboard(df, titleNm, topic_year):
+    TitleName = titleNm + "_" + topic_year
+    color_palette = px.colors.qualitative.Vivid
+    unique_topics = sorted(df["topic"].unique())
+    color_map = {topic: color_palette[i % len(color_palette)] for i, topic in enumerate(unique_topics)}
+
+    # Map colors to topics
+    df["color"] = df["topic"].map(color_map)
+
+    # Calculate the number of papers in each cluster
+    cluster_sizes = df.groupby("topic").size().reset_index(name="paper_count")
+    df = df.merge(cluster_sizes, on="topic", how="left")
+
+    # Improved marker scaling with a better range
+    min_size = 50
+    max_size = 140
+    df["marker_size"] = ((df["paper_count"] - df["paper_count"].min()) /
+                         (df["paper_count"].max() - df["paper_count"].min())) * (max_size - min_size) + min_size
+
+    # Add log-transformed citation and influence columns
+    df["log_citation"] = np.log1p(df["citationCount"])
+    df["log_influence"] = np.log1p(df["influentialCitationCount"])
+
+    # Bayesian shrinkage for citations and influence
+    global_median_citation = df["log_citation"].median()
+    global_median_influence = df["log_influence"].median()
+    C = 10  # Shrinkage constant
+
+    def bayesian_shrinkage(group, global_median, C):
+        return (group.sum() + C * global_median) / (len(group) + C)
+
+    adjusted_citations = df.groupby("topic")["log_citation"].apply(
+        lambda x: bayesian_shrinkage(x, global_median_citation, C))
+    adjusted_influence = df.groupby("topic")["log_influence"].apply(
+        lambda x: bayesian_shrinkage(x, global_median_influence, C))
+
+    # Merge adjusted metrics back into the dataframe
+    df = df.merge(adjusted_citations.rename("adjusted_citation"), on="topic")
+    df = df.merge(adjusted_influence.rename("adjusted_influence"), on="topic")
+
+    # Calculate global percentiles for thresholds
+    citation_25th = df["adjusted_citation"].quantile(0.25)
+    citation_75th = df["adjusted_citation"].quantile(0.75)
+    influence_25th = df["adjusted_influence"].quantile(0.25)
+    influence_75th = df["adjusted_influence"].quantile(0.75)
+
+    # Enhanced theme classification with more distinct emojis
+    def classify_theme(row):
+        if row["adjusted_citation"] >= citation_75th and row["adjusted_influence"] >= influence_75th:
+            return "🔥 Hot Topic"
+        elif row["adjusted_citation"] <= citation_25th and row["adjusted_influence"] >= influence_75th:
+            return "💎 Gap Opportunity"
+        elif row["adjusted_citation"] >= citation_75th and row["adjusted_influence"] <= influence_25th:
+            return "⚠️ Risky Theme"
+        else:
+            return "🔄 Neutral"
+
+    df["theme"] = df.apply(classify_theme, axis=1)
+
+    # Initialize the Dash app with an improved Bootstrap theme
+    app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])  # DARKLY for a sleek dark theme
+
+    # Create a more visually appealing figure
+    fig = go.Figure()
+
+    # Add subtle grid lines for reference
+    fig.update_xaxes(
+        showgrid=True,
+        gridwidth=0.1,
+        gridcolor='rgba(255, 255, 255, 0.05)',
+        zeroline=False
+    )
+    fig.update_yaxes(
+        showgrid=True,
+        gridwidth=0.1,
+        gridcolor='rgba(255, 255, 255, 0.05)',
+        zeroline=False
+    )
+
+    for topic in unique_topics:
+        topic_data = df[df["topic"] == topic]
+
+        # Get cluster center
+        center_x = topic_data["x"].mean()
+        center_y = topic_data["y"].mean()
+
+        # Get label
+        full_topic_formatted = topic_data['topic_label'].iloc[
+            0] if 'topic_label' in topic_data.columns else f"Cluster {topic}"
+
+        # Add a subtle glow effect with a larger outer circle
+        fig.add_trace(
+            go.Scatter(
+                x=[center_x],
+                y=[center_y],
+                mode="markers",
+                marker=dict(
+                    color=color_map[topic],
+                    size=topic_data["marker_size"].iloc[0] * 1.2,  # Slightly larger for glow effect
+                    opacity=0.3,
+                    line=dict(width=0),
+                    symbol="circle",
+                ),
+                showlegend=False,
+                hoverinfo="none",
+            )
+        )
+
+        # Add main cluster circle with enhanced styling
+        fig.add_trace(
+            go.Scatter(
+                x=[center_x],
+                y=[center_y],
+                mode="markers+text",
+                marker=dict(
+                    color=color_map[topic],
+                    size=topic_data["marker_size"].iloc[0],
+                    opacity=0.85,
+                    line=dict(width=2, color="white"),
+                    symbol="circle",
+                ),
+                text=[f"{topic}"],
+                textposition="middle center",
+                textfont=dict(
+                    family="Arial Black",
+                    size=16,
+                    color="white"
+                ),
+                name=f"{topic}",
+                hovertemplate=(
+                        "<b>Cluster ID:</b> %{text}<br>" +
+                        "<b>Name:</b><br>" + full_topic_formatted + "<br>" +
+                        "<b>Papers:</b> " + str(topic_data["paper_count"].iloc[0]) + "<br>" +
+                        "<b>Popularity:</b> " + (
+                            "🔼 High" if topic_data["adjusted_citation"].iloc[0] >= citation_75th else "🔽 Low") +
+                        f" (Adjusted Citation: {topic_data['adjusted_citation'].iloc[0]:.2f})<br>" +
+                        "<b>Impactfulness:</b> " + (
+                            "🔼 High" if topic_data["adjusted_influence"].iloc[0] >= influence_75th else "🔽 Low") +
+                        f" (Adjusted Influence: {topic_data['adjusted_influence'].iloc[0]:.2f})<br>" +
+                        "<b>Theme:</b> " + topic_data["theme"].iloc[0] +
+                        "<extra></extra>"
+                ),
+                customdata=[[topic]],
+            )
+        )
+
+    # Add an aesthetic background with gradient
+    fig.update_layout(
+        shapes=[
+            # Improved gradient background
+            dict(
+                type="rect",
+                xref="paper",
+                yref="paper",
+                x0=0,
+                y0=0,
+                x1=1,
+                y1=1,
+                fillcolor="rgba(0, 0, 40, 0.95)",
+                line_width=0,
+                layer="below"
+            ),
+            # Add a subtle radial gradient effect
+            dict(
+                type="circle",
+                xref="paper",
+                yref="paper",
+                x0=0.3,
+                y0=0.3,
+                x1=0.7,
+                y1=0.7,
+                fillcolor="rgba(50, 50, 120, 0.2)",
+                line_width=0,
+                layer="below"
+            )
+        ],
+        template="plotly_dark",
+        title={
+            'text': f"<b>{TitleName.title()}</b>",
+            'y': 0.97,
+            'x': 0.5,
+            'xanchor': 'center',
+            'yanchor': 'top',
+            'font': dict(
+                family="Arial Black",
+                size=28,
+                color="white",
+            ),
+            'xref': 'paper',
+            'yref': 'paper',
+        },
+        margin=dict(l=40, r=40, b=150, t=100),
+        hovermode="closest",
+        xaxis=dict(showticklabels=False),
+        yaxis=dict(showticklabels=False),
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        dragmode="pan",
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=-0.15,
+            xanchor="center",
+            x=0.5,
+            bgcolor="rgba(30,30,60,0.5)",
+            bordercolor="rgba(255,255,255,0.2)",
+            borderwidth=1
+        ),
+    )
+
+    # Add subtle animation options
+    fig.update_layout(
+        updatemenus=[
+            dict(
+                type="buttons",
+                showactive=False,
+                buttons=[
+                    dict(
+                        label="Reset View",
+                        method="relayout",
+                        args=[{"xaxis.range": None, "yaxis.range": None}]
+                    ),
+                ],
+                x=0.05,
+                y=0.05,
+                xanchor="left",
+                yanchor="bottom",
+                bgcolor="rgba(50,50,80,0.7)",
+                bordercolor="rgba(255,255,255,0.2)",
+            )
+        ]
+    )
+
+    # Enhanced app layout with modern design elements
+    app.layout = dbc.Container(
+        fluid=True,
+        style={
+            "backgroundColor": "#111122",
+            "minHeight": "100vh",
+            "height": "100%",
+            "width": "100%",
+            "backgroundImage": "linear-gradient(135deg, #111122 0%, #15162c 100%)",
+            "padding": "20px"
+        },
+        children=[
+            dbc.Row([
+                dbc.Col(html.H1(
+                    "Trend Analysis Dashboard ",
+                    style={
+                        "textAlign": "center",
+                        "color": "white",
+                        "marginBottom": "5px",
+                        "fontFamily": "Arial Black",
+                        "textShadow": "2px 2px 8px rgba(0,0,0,0.7)",
+                        "letterSpacing": "2px",
+                        "fontSize": "42px",
+                        "background": "linear-gradient(135deg, #790091 0%, #565cd5 100%)",
+                        "WebkitBackgroundClip": "text",
+                        "WebkitTextFillColor": "transparent",
+                        "paddingTop": "10px"
+                    }
+                ), width=10),
+
+                dbc.Col([
+                    html.Button(
+                        [
+                            html.I(className="fas fa-download mr-2"),
+                            " Save Dashboard"
+                        ],
+                        id="download-button",
+                        className="btn btn-outline-light",
+                        style={
+                            "marginTop": "10px",
+                            "backgroundColor": "rgba(80, 80, 150, 0.4)",
+                            "border": "1px solid rgba(100, 100, 200, 0.5)",
+                            "borderRadius": "8px",
+                            "padding": "8px 15px",
+                            "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.3)",
+                            "transition": "all 0.3s ease",
+                            "fontSize": "14px",
+                            "fontWeight": "bold"
+                        }
+                    ),
+                    # Add the download component
+                    dcc.Download(id="download-dashboard")
+                ], width=2),
+
+                dbc.Col(html.P(
+                    "Interactive visualization of research topics and their relationships",
+                    style={
+                        "textAlign": "center",
+                        "color": "#aaddff",
+                        "marginBottom": "15px",
+                        "fontStyle": "italic",
+                        "fontSize": "16px",
+                        "fontWeight": "300",
+                        "letterSpacing": "0.5px",
+                        "textShadow": "1px 1px 3px rgba(0,0,0,0.5)",
+                    }
+                ), width=12),
+            ]),
+
+            dbc.Row([
+                dbc.Col(
+                    dbc.Card(
+                        dbc.CardBody([
+                            dcc.Graph(
+                                id="cluster-graph",
+                                figure=fig,
+                                config={
+                                    "scrollZoom": True,
+                                    "displayModeBar": True,
+                                    "modeBarButtonsToRemove": ["select2d", "lasso2d"]
+                                }, style={"height": "80vh", "min-height": "800px"}
+                            )
+                        ], style={"height": "80vh", "min-height": "800px"}),
+                        style={
+                            "backgroundColor": "rgba(20, 20, 40, 0.7)",
+                            "borderRadius": "15px",
+                            "boxShadow": "0px 10px 30px rgba(0, 0, 0, 0.5)",
+                            "border": "1px solid rgba(100, 100, 200, 0.3)",
+                            "height": "80vh",
+                            "min-height": "800px"  # Ensure minimum height
+                        }
+                    ),
+                    width=9
+                ),
+
+                dbc.Col(
+                    dbc.Card(
+                        dbc.CardBody([
+                            html.H3("Paper List", style={
+                                "textAlign": "center",
+                                "marginBottom": "15px",
+                                "color": "#ffffff",
+                                "fontFamily": "Arial",
+                                "fontWeight": "bold",
+                                "textShadow": "1px 1px 3px rgba(0,0,0,0.3)"
+                            }),
+                            html.Hr(style={"borderColor": "rgba(100, 100, 200, 0.3)", "margin": "10px 0 20px 0"}),
+                            html.Div(
+                                id="paper-list",
+                                style={
+                                    "overflowY": "auto",
+                                    "height": "700px",
+                                    "padding": "5px"
+                                },
+                                children=html.Div([
+                                    html.Div(
+                                        html.I(className="fas fa-mouse-pointer", style={"marginRight": "10px"}),
+                                        style={"textAlign": "center", "fontSize": "24px", "marginBottom": "10px",
+                                               "color": "#7f8fa6"}
+                                    ),
+                                    html.P("Click on a cluster to view its papers",
+                                           style={"textAlign": "center", "color": "#7f8fa6"})
+                                ])
+                            ),
+                        ],
+                            style={
+                                "backgroundColor": "rgba(30, 30, 50, 0.8)",
+                                "borderRadius": "15px",
+                                "padding": "20px",
+                                "height": "100%"
+                            }),
+                        style={
+                            "height": "800px",
+                            "boxShadow": "0px 10px 30px rgba(0, 0, 0, 0.5)",
+                            "border": "1px solid rgba(100, 100, 200, 0.3)",
+                            "borderRadius": "15px"
+                        }
+                    ),
+                    width=3
+                ),
+            ], style={"marginTop": "20px"}),
+
+            # Add a footer with theme legend
+            dbc.Row([
+                dbc.Col(
+                    dbc.Card(
+                        dbc.CardBody([
+                            html.H5("Theme Legend", style={"textAlign": "center", "marginBottom": "15px"}),
+                            dbc.Row([
+                                dbc.Col(html.Div([
+                                    html.Span("🔥", style={"fontSize": "20px", "marginRight": "10px"}),
+                                    "Hot Topic: High citations & high influence"
+                                ]), width=3),
+                                dbc.Col(html.Div([
+                                    html.Span("💎", style={"fontSize": "20px", "marginRight": "10px"}),
+                                    "Gap Opportunity: Low citations but high influence"
+                                ]), width=3),
+                                dbc.Col(html.Div([
+                                    html.Span("⚠️", style={"fontSize": "20px", "marginRight": "10px"}),
+                                    "Risky Theme: High citations but low influence"
+                                ]), width=3),
+                                dbc.Col(html.Div([
+                                    html.Span("🔄", style={"fontSize": "20px", "marginRight": "10px"}),
+                                    "Neutral: Average citations and influence"
+                                ]), width=3),
+                            ])
+                        ]),
+                        style={
+                            "backgroundColor": "rgba(30, 30, 50, 0.8)",
+                            "borderRadius": "15px",
+                            "marginTop": "20px",
+                            "boxShadow": "0px 5px 15px rgba(0, 0, 0, 0.3)",
+                            "border": "1px solid rgba(100, 100, 200, 0.3)"
+                        }
+                    ),
+                    width=12
+                ),
+
+            ]),
+
+            dcc.Store(id="stored-figure", data=fig)
+        ]
+
+    )
+
+    @app.callback(
+        Output("download-dashboard", "data"),
+        Input("download-button", "n_clicks"),
+        State("cluster-graph", "figure"),
+        prevent_initial_call=True
+    )
+    def download_dashboard(n_clicks, figure):
+        if n_clicks is None:
+            return None
+
+        # Save the figure as HTML with full plotly.js included
+        dashboard_html = pio.to_html(
+            figure,
+            full_html=True,
+            include_plotlyjs='cdn',
+            config={'responsive': True}
+        )
+
+        # Return the dashboard as an HTML file
+        return dict(
+            content=dashboard_html,
+            filename="research_dashboard.html",
+            type="text/html",
+        )
+
+    # Enhanced callback to update paper list with better styling
+    # Enhanced callback to update paper list with better styling
+    @app.callback(
+        Output("paper-list", "children"),
+        [Input("cluster-graph", "clickData")]
+    )
+    def update_paper_list(clickData):
+        if clickData is None:
+            return html.Div([
+                html.Div(
+                    html.I(className="fas fa-mouse-pointer", style={"marginRight": "10px"}),
+                    style={"textAlign": "center", "fontSize": "24px", "marginBottom": "10px", "color": "#7f8fa6"}
+                ),
+                html.P("Click on a cluster to view its papers",
+                       style={"textAlign": "center", "color": "#7f8fa6"})
+            ])
+
+        # Extract the clicked cluster ID
+        try:
+            clicked_topic = clickData["points"][0]["customdata"][0]
+
+            # Get the color for this topic for styling consistency
+            topic_color = color_map[clicked_topic]
+
+            # Get the theme for this topic
+            topic_theme = df[df["topic"] == clicked_topic]["theme"].iloc[0]
+
+        except (KeyError, IndexError):
+            return html.Div("Error retrieving cluster data.", style={"textAlign": "center", "marginTop": "20px"})
+
+        # Filter papers in the clicked cluster - UPDATED to include titles AND urls
+        papers_in_cluster = df[df["topic"] == clicked_topic][["title", "url", "paperId"]]
+
+        if papers_in_cluster.empty:
+            return html.Div(f"No papers found for Cluster {clicked_topic}.",
+                            style={"textAlign": "center", "marginTop": "20px"})
+
+        # Get topic label
+        topic_label = df[df["topic"] == clicked_topic]['topic_label'].iloc[
+            0] if 'topic_label' in df.columns else f"Cluster {clicked_topic}"
+
+        # Create an enhanced styled list of paper titles - UPDATED to make clickable
+        paper_list = []
+        for i, (_, paper) in enumerate(papers_in_cluster.iterrows()):
+            paper_url = paper["url"]
+            paper_title = paper["title"]
+
+            paper_list.append(
+                dbc.Card(
+                    dbc.CardBody([
+                        html.A(
+                            html.H6(
+                                f"{i + 1}. {paper_title}",
+                                className="card-title",
+                                style={
+                                    "fontSize": "14px",
+                                    "margin": "5px 0",
+                                    "fontWeight": "normal",
+                                    "lineHeight": "1.4",
+                                    "color": "#aaccff",  # Blue color to indicate clickable link
+                                    "cursor": "pointer"
+                                }
+                            ),
+                            href=paper_url,
+                            target="_blank",  # Open in new tab
+                            style={"textDecoration": "none"}
+                        ),
+                    ], style={"padding": "12px"}),
+                    style={
+                        "marginBottom": "10px",
+                        "backgroundColor": "rgba(40, 45, 60, 0.8)",
+                        "borderRadius": "8px",
+                        "borderLeft": f"4px solid {topic_color}",
+                        "boxShadow": "0px 3px 8px rgba(0, 0, 0, 0.2)",
+                        "transition": "transform 0.2s",
+                        ":hover": {
+                            "transform": "translateY(-2px)",
+                            "boxShadow": "0px 5px 10px rgba(0, 0, 0, 0.3)"
+                        }
+                    },
+                    className="paper-card"
+                )
+            )
+
+        return html.Div([
+            html.Div([
+                html.H4(
+                    f"Cluster {clicked_topic}",
+                    style={
+                        "textAlign": "center",
+                        "marginBottom": "5px",
+                        "color": topic_color,
+                        "fontWeight": "bold"
+                    }
+                ),
+                html.H5(
+                    topic_label,
+                    style={
+                        "textAlign": "center",
+                        "marginBottom": "5px",
+                        "color": "#aaaacc",
+                        "fontStyle": "italic",
+                        "fontWeight": "normal"
+                    }
+                ),
+                html.Div(
+                    topic_theme,
+                    style={
+                        "textAlign": "center",
+                        "marginBottom": "15px",
+                        "fontSize": "16px",
+                        "fontWeight": "bold"
+                    }
+                ),
+                html.Hr(style={"borderColor": "rgba(100, 100, 200, 0.3)", "margin": "10px 0 20px 0"}),
+                html.H5(
+                    f"Papers ({len(papers_in_cluster)})",
+                    style={
+                        "textAlign": "left",
+                        "marginBottom": "15px",
+                        "color": "#ffffff",
+                        "fontWeight": "bold"
+                    }
+                ),
+            ]),
+            html.Div(
+                paper_list,
+                style={"paddingRight": "10px"},
+            )
+        ])
+
+    # Add custom CSS for hover effects
+    app.index_string = '''
+<!DOCTYPE html>
+<html>
+    <head>
+        {%metas%}
+        <title>Trend Analysis Clusters Dashboard</title>
+        {%favicon%}
+        {%css%}
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+        <style>
+            .paper-card:hover {
+                transform: translateY(-2px);
+                box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+                background-color: rgba(50, 55, 70, 0.8) !important;
+            }
+            a h6:hover {
+                color: #ffffff !important;
+                text-decoration: underline;
+            }
+            /* Add subtle scroll bar styling */
+            ::-webkit-scrollbar {
+                width: 8px;
+            }
+            ::-webkit-scrollbar-track {
+                background: rgba(30, 30, 50, 0.3);
+                border-radius: 10px;
+            }
+            ::-webkit-scrollbar-thumb {
+                background: rgba(100, 100, 200, 0.5);
+                border-radius: 10px;
+            }
+            ::-webkit-scrollbar-thumb:hover {
+                background: rgba(120, 120, 220, 0.7);
+            }
+        </style>
+    </head>
+    <body>
+        {%app_entry%}
+        <footer>
+            {%config%}
+            {%scripts%}
+            {%renderer%}
+        </footer>
+    </body>
+</html>
+'''
+    return app
+
+
+# Global variables to track Dash app state
+dash_thread = None
+dash_app = None
+DASH_PORT = 7050
+
+
+# Simplified shutdown function that doesn't rely on request or psutil connections
+def shutdown_dash_app():
+    global dash_thread, dash_app
+
+    if dash_app is not None:
+        try:
+            print("Shutting down previous Dash app...")
+
+            # If we have a Dash app with a server
+            if hasattr(dash_app, 'server'):
+                # Set a shutdown flag
+                dash_app._shutdown = True
+
+            # Force the thread to terminate
+            if dash_thread and dash_thread.is_alive():
+                import ctypes
+                ctypes.pythonapi.PyThreadState_SetAsyncExc(
+                    ctypes.c_long(dash_thread.ident),
+                    ctypes.py_object(SystemExit)
+                )
+                dash_thread.join(timeout=2)
+
+            # Try to find and kill the process using the port
+            try:
+                import psutil
+                import os
+                import signal
+
+                for proc in psutil.process_iter(['pid']):
+                    try:
+                        for conn in proc.connections(kind='inet'):
+                            if conn.laddr.port == DASH_PORT:
+                                print(f"Killing process {proc.pid} using port {DASH_PORT}")
+                                os.kill(proc.pid, signal.SIGTERM)
+                    except:
+                        pass
+            except:
+                print("Could not find process using port")
+
+            # Clear references
+            dash_app = None
+            print("Previous Dash app successfully shut down")
+            return True
+
+        except Exception as e:
+            print(f"Error shutting down Dash app: {e}")
+            # Even if there were errors, reset the state
+            dash_app = None
+            return True
+
+    return True  # No app to shut down
+
+
+# Updated function to run Dash with error handling
+def run_dash(df, titleNm, Topic_year):
+    global dash_app
+
+    try:
+        # Build the dashboard
+        dash_app = build_dashboard(df, titleNm, Topic_year)
+
+        # Run the server
+        dash_app.run_server(debug=False, port=DASH_PORT, use_reloader=False)
+    except Exception as e:
+        print(f"Error running Dash app: {e}")
+        dash_app = None
+
+
+# Update your endpoint - removed request parameter from shutdown_dash_app
+@router.post("/analyze-trends/")
+async def analyze_trends(request: Request, data_request: TrendAnalysisRequest):
+    global dash_thread
+    TitleName = data_request.topic
+    Topic_year = data_request.year
+    # First, ensure any existing dashboard is properly shut down
+    shutdown_dash_app()
+
+    # Short delay to ensure port is freed
+    import time
+    time.sleep(1)
+
+    # Fetch and process data
+    df, current_page, total_pages, papers_count, total_papers = await fetch_papers_with_pagination(
+        request, data_request.userId, data_request.topic, data_request.year, data_request.page
+    )
+
+    if df.empty and total_papers > 0:
+        raise HTTPException(
+            status_code=404,
+            detail=f"No papers found for page {data_request.page + 1}. Valid pages are 1 to {total_pages}."
+        )
+    elif df.empty:
+        raise HTTPException(
+            status_code=404,
+            detail=f"No papers found for userId '{data_request.userId}', topic '{data_request.topic}'" +
+                   (f", and year '{data_request.year}'" if data_request.year else "")
+        )
+
+    # Perform the trend analysis
+    df, topic_labels = perform_trend_analysis(df)
+
+    if df.empty:
+        raise HTTPException(status_code=500, detail="Failed to process embeddings for trend analysis")
+
+    # Create cluster statistics
+    cluster_sizes = df.groupby("topic").size().to_dict()
+
+    # Create and start a new thread for the dashboard
+    dash_thread = threading.Thread(target=run_dash, args=(df, TitleName, Topic_year))
+    dash_thread.daemon = True
+    dash_thread.start()
+
+    # Open browser automatically
+    browser_thread = threading.Thread(target=open_browser)
+    browser_thread.daemon = True
+    browser_thread.start()
+
+    return {
+        "message": f"Trend analysis completed for papers (page {current_page + 1} of {total_pages})",
+        "current_page": current_page,
+        "total_pages": total_pages,
+        "papers_count": papers_count,
+        "total_papers": total_papers,
+        "cluster_sizes": cluster_sizes,
+        "cluster_titles": topic_labels,
+        "dashboard_url": f"http://localhost:{DASH_PORT}"
+    }
+
+
+# Function to open browser after a short delay
+def open_browser():
+    time.sleep(2)  # Wait for servers to start
+    webbrowser.open_new(f"http://localhost:{DASH_PORT}")

app.py

@@ -0,0 +1,77 @@
+from fastapi import FastAPI, HTTPException, APIRouter, Request
+from fastapi.responses import HTMLResponse
+import uvicorn
+from dataApi import router as dataAPI_router
+from TrendAnalysis import router as trend_analysis_process
+from datacite import router as citation_analysis_process
+from fastapi.middleware.cors import CORSMiddleware
+from dbconnect import db_Connect 
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from venuAnalysis import router as venue_analysis_process
+from venuedata import router as venuedata_router
+
+
+
+# Initialize FastAPI app
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+app.mount("/assets", StaticFiles(directory="assets"), name="assets")
+
+templates = Jinja2Templates(directory="templates")
+templates.env.auto_reload = True
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # For development - restrict this in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+
+
+# # Include routers
+app.include_router(dataAPI_router)
+app.include_router(trend_analysis_process)
+app.include_router(citation_analysis_process)
+app.include_router(venue_analysis_process)
+app.include_router(venuedata_router)
+
+
+collection,collection1,collection2 = db_Connect()
+app.state.collection =  collection
+app.state.collection1 =  collection1
+app.state.collection2 =  collection2
+
+
+
+
+# Root endpoint
+@app.get("/")
+async def root():
+    return {"message": "Welcome to the Science Mapping Tool!"}
+
+
+
+@app.get("/home", response_class=HTMLResponse)
+async def home(request: Request):
+    return templates.TemplateResponse("homepage.html", {"request": request})
+
+@app.get("/login", response_class=HTMLResponse)
+async def login(request: Request):
+    return templates.TemplateResponse("loginpage.html", {"request": request})
+
+@app.get("/contact", response_class=HTMLResponse)
+async def login(request: Request):
+    return templates.TemplateResponse("contactBoard.html", {"request": request})
+
+@app.get("/feedback", response_class=HTMLResponse)
+async def login(request: Request):
+    return templates.TemplateResponse("feedback.html", {"request": request})
+
+
+# uvicorn app:app --host 0.0.0.0 --port 3000 --reload
+

dataApi.py

@@ -0,0 +1,245 @@
+from fastapi import FastAPI, HTTPException, APIRouter, Request
+from motor.motor_asyncio import AsyncIOMotorClient
+from pydantic import BaseModel
+import requests
+import spacy
+import time
+import torch
+from transformers import AutoTokenizer
+from adapters import AutoAdapterModel
+from typing import Optional
+
+router = APIRouter()
+
+
+# Load spaCy model
+nlp = spacy.load("en_core_sci_sm")
+
+# Pydantic models for request/responsecl
+class ResearchQuery(BaseModel):
+    userId: str  # User ID
+    topic: str   # Research topic
+    year: str    # Year of publication
+
+
+class PaperMetadata(BaseModel):
+    paperId: str
+    title: str
+    abstract: str
+    citationCount: int
+    influentialCitationCount: int
+    publicationDate: str
+    url: str
+
+
+# Extract keywords from the research topic
+def extract_keywords(text):
+    doc = nlp(text.lower())  # Normalize to lowercase
+
+    # Step 1: Extract noun chunks (compound phrases)
+    noun_chunks = [chunk.text for chunk in doc.noun_chunks]
+
+    # Step 2: Extract individual tokens (nouns and verbs)
+    individual_tokens = [
+        token.text
+        for token in doc
+        if token.pos_ in ["NOUN", "VERB"] and not token.is_stop
+    ]
+
+    # Step 3: Combine noun chunks and individual tokens
+    keywords = set(noun_chunks + individual_tokens)
+    cleaned_keywords = set()
+    for keyword in keywords:
+        # Check if the keyword is part of any larger noun chunk
+        if not any(keyword in chunk for chunk in noun_chunks if keyword != chunk):
+            cleaned_keywords.add(keyword)
+
+    return sorted(list(cleaned_keywords))
+
+
+# Construct query based on keywords
+def construct_query(keywords):
+    query = " + ".join(keywords)
+    return query
+
+
+# Fetch Paper IDs using Semantic Scholar Bulk Search API
+def fetch_paper_ids(query, year):
+    search_url = "https://api.semanticscholar.org/graph/v1/paper/search/bulk"
+    search_params = {
+        "query": query,
+        "year": year,
+        "fields": "paperId",
+    }
+    response = requests.get(search_url, params=search_params)
+
+    if response.status_code == 200:
+        data = response.json()
+        papers = data.get("data", [])
+        paper_ids = [paper["paperId"] for paper in papers]
+        return paper_ids
+    else:
+        raise HTTPException(status_code=response.status_code, detail="Error fetching paper IDs")
+
+
+# Fetch metadata using Semantic Scholar Graph API
+def fetch_metadata(batch_ids):
+    graph_url = "https://api.semanticscholar.org/graph/v1/paper/batch"
+    metadata_params = {
+        "fields": "title,abstract,citationCount,influentialCitationCount,publicationDate,url"
+    }
+
+    attempt = 0
+    max_retries = 20
+
+    while attempt < max_retries:
+        response = requests.post(graph_url, json={"ids": batch_ids}, params=metadata_params)
+
+        if response.status_code == 200:
+            return response.json()
+
+        elif response.status_code == 429:
+            wait_time = 5
+            print(f"429 Too Many Requests. Retrying in {wait_time} seconds...")
+            time.sleep(wait_time)
+            attempt += 1
+
+        else:
+            raise HTTPException(status_code=response.status_code, detail="Error fetching metadata")
+
+    raise HTTPException(status_code=500, detail="Max retries reached while fetching metadata")
+
+
+# Clean and process metadata using SPECTER2 embeddings
+def clean_and_process_metadata(metadata_list):
+    # Load tokenizer and base model
+    tokenizer = AutoTokenizer.from_pretrained("allenai/specter2_base")
+    model = AutoAdapterModel.from_pretrained("allenai/specter2_base")
+
+    # Load and activate the proximity adapter
+    model.load_adapter("allenai/specter2", source="hf", load_as="proximity", set_active=True)
+
+    # Move model to GPU if available
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    model.to(device)
+
+    cleaned_metadata = []
+    invalid_papers = []
+
+    for paper in metadata_list:
+        paper_id = paper.get("paperId")
+        title = paper.get("title")
+        abstract = paper.get("abstract")
+
+        # Case 1: Paper lacks sufficient content (title + abstract or just abstract)
+        if not (title and abstract) and not abstract:
+            invalid_papers.append(paper_id)
+            continue
+
+        # Prepare text for embedding generation
+        text = title + tokenizer.sep_token + abstract if title and abstract else abstract
+
+        # Tokenize and encode
+        inputs = tokenizer(text, padding=True, truncation=True, return_tensors="pt", max_length=512)
+        inputs = {k: v.to(device) for k, v in inputs.items()}  # Move inputs to device
+
+        with torch.no_grad():
+            output = model(**inputs)
+            embedding = output.last_hidden_state[:, 0, :].cpu().numpy().tolist()
+
+        # Add embedding to the paper metadata
+        paper["embedding"] = {"model": "specter2_proximity", "vector": embedding}
+
+        # Add the cleaned paper to the list
+        cleaned_metadata.append(paper)
+
+    return cleaned_metadata, invalid_papers
+
+
+# Save metadata to MongoDB under username and topic
+async def save_to_mongodb(userId: str, topic: str, year:str , metadata_list, request:Request):
+    # Create or update the document for the user-topic combination
+    collection = request.app.state.collection
+    
+    await collection.update_one(
+        {"userId": userId, "topic": topic ,"year": year},  # Filter by user and topic
+        {"$set": {"papers": metadata_list}},  # Update the papers field
+        upsert=True  # Create the document if it doesn't exist
+    )
+
+    print(f"Saved {len(metadata_list)} papers for user '{userId}' and topic '{topic}'")
+
+
+@router.get("/test")
+def greet():
+    return {
+        "message":"helllo jessi"
+    }
+
+
+# Endpoint to process user input and fetch data
+@router.post("/analyze")
+async def analyze(query: ResearchQuery,requests:Request):
+    # Extract keywords and construct query
+    keywords = extract_keywords(query.topic)
+    refined_query = construct_query(keywords)
+
+    print(f"\n🔍 Refined Query: {refined_query}")
+
+    # Fetch paper IDs
+    paper_ids = fetch_paper_ids(refined_query, query.year)
+    print(f"\nFound {len(paper_ids)} papers for '{query.topic}' in {query.year}\n")
+
+    # Fetch metadata in batches
+    metadata_list = []
+    batch_size = 100
+
+    for i in range(0, len(paper_ids), batch_size):
+        batch_ids = paper_ids[i : i + batch_size]
+        metadata = fetch_metadata(batch_ids)
+        metadata_list.extend(metadata)
+        print(f"Retrieved {len(batch_ids)} papers' metadata...")
+
+    # Clean and process metadata
+    cleaned_metadata, invalid_papers = clean_and_process_metadata(metadata_list)
+
+    # Save cleaned metadata to MongoDB under the username and topic
+    await save_to_mongodb(query.userId, query.topic, query.year, cleaned_metadata,requests )
+
+    return {
+        "message": f"Processed {len(cleaned_metadata)} papers and cleaned data.",
+        "invalid_papers_removed": len(invalid_papers),
+    }
+
+
+
+# Pydantic model for request data
+class CheckDataRequest(BaseModel):
+    userId: str
+    topic: str
+    year: Optional[str] = None
+
+# Endpoint to check if the combination of userId, topic, and year exists
+
+@router.post("/check-data-exists/")
+async def check_data_exists(request_data: CheckDataRequest, request:Request):
+    # Create a query to check if the data exists
+    query = {
+        "userId": request_data.userId,
+        "topic": request_data.topic
+    }
+    
+    # Add year to query if it's provided
+    if request_data.year:
+        query["year"] = request_data.year
+    
+    collection = request.app.state.collection
+    # Check if a document matching the query exists
+    document = await collection.find_one(query)  # Await the async operation
+    
+    # Return result
+    return {
+        "exists": document is not None,
+        "message": "Data found" if document else "Data not found"
+    }
+    

datacite.py

@@ -0,0 +1,294 @@
+import spacy
+import requests
+from time import sleep
+from tqdm import tqdm
+from fastapi import HTTPException
+from pydantic import BaseModel
+from concurrent.futures import ThreadPoolExecutor
+from datetime import datetime
+from fastapi import APIRouter, Request
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse
+import json
+
+# Load spaCy model
+nlp = spacy.load("en_core_sci_sm")
+templates = Jinja2Templates(directory="templates")
+# Constants
+OPENALEX_API_URL = "https://api.openalex.org/works"
+PER_PAGE = 100
+REQUEST_DELAY = 0.5
+MAX_RESULTS = 1000
+
+router = APIRouter()
+
+
+# Pydantic Models
+class CitationAnalysisRequest(BaseModel):
+    userId: str
+    topic: str
+    year: int
+
+
+# 1. Keyword Extraction
+def extract_keywords(text):
+    doc = nlp(text.lower())
+    noun_chunks = [chunk.text for chunk in doc.noun_chunks]
+    individual_tokens = [token.text for token in doc if token.pos_ in ["NOUN", "VERB"] and not token.is_stop]
+    keywords = set(noun_chunks + individual_tokens)
+
+    cleaned_keywords = set()
+    for keyword in keywords:
+        if not any(keyword in chunk for chunk in noun_chunks if keyword != chunk):
+            cleaned_keywords.add(keyword)
+    return sorted(list(cleaned_keywords))
+
+
+# 2. Citation Batch Fetching
+def fetch_citing_papers_for_batch(paper_ids):
+    citing_map = {pid: [] for pid in paper_ids}
+    batch_size = 100
+
+    def fetch_batch(batch_ids):
+        filter_query = "|".join(batch_ids)
+        cursor = "*"
+        local_citing_map = {pid: [] for pid in batch_ids}
+
+        while True:
+            params = {
+                "filter": f"cites:{filter_query}",
+                "per_page": 200,
+                "cursor": cursor
+            }
+
+            try:
+                response = requests.get(OPENALEX_API_URL, params=params)
+                if response.status_code != 200:
+                    print(f"❌ Error while fetching citing papers: {response.status_code}")
+                    break
+
+                data = response.json()
+                for citing_work in data.get("results", []):
+                    refs = citing_work.get("referenced_works", [])
+                    for ref_id in refs:
+                        if ref_id in local_citing_map:
+                            local_citing_map[ref_id].append(citing_work["id"])
+
+                next_cursor = data.get("meta", {}).get("next_cursor")
+                if not next_cursor:
+                    break
+                cursor = next_cursor
+                sleep(REQUEST_DELAY)
+
+            except Exception as e:
+                print(f"❌ Exception: {e}")
+                break
+
+        return local_citing_map
+
+    print("\n🔗 Fetching citing papers for all topic papers...")
+    with ThreadPoolExecutor(max_workers=10) as executor:
+        futures = []
+        for i in range(0, len(paper_ids), batch_size):
+            batch_ids = paper_ids[i:i + batch_size]
+            futures.append(executor.submit(fetch_batch, batch_ids))
+
+        for future in tqdm(futures, desc="ParallelGroup"):
+            local_citing_map = future.result()
+            citing_map.update(local_citing_map)
+
+    return citing_map
+
+
+# 3. Fetch topic papers
+def fetch_papers_with_citations(keywords, year, concept_threshold=0.8, max_results=MAX_RESULTS):
+    query = " + ".join(keywords)
+    print(f"\n🔍 Final OpenAlex Query: {query}")
+    params = {
+        "filter": f"title_and_abstract.search:{query},publication_year:{year}",
+        "per_page": PER_PAGE,
+        "cursor": "*"
+    }
+
+    all_papers = []
+    paper_id_map = {}
+    print("\n🚀 Fetching topic papers from OpenAlex...")
+
+    while len(all_papers) < max_results:
+        response = requests.get(OPENALEX_API_URL, params=params)
+        if response.status_code != 200:
+            print(f"❌ Error: {response.status_code}")
+            break
+
+        data = response.json()
+        results = data.get("results", [])
+
+        for paper in tqdm(results, desc="📄 Collecting papers"):
+            paper_id = paper.get("id", "")
+            concepts = [
+                c["display_name"]
+                for c in paper.get("concepts", [])
+                if c.get("score", 0) >= concept_threshold
+            ]
+
+            paper_data = {
+                "id": paper_id,
+                "title": paper.get("title", "No title"),
+                "cited_by_count": paper.get("cited_by_count", 0),
+                "publication_date": paper.get("publication_date", ""),
+                "referenced_works": paper.get("referenced_works", []),
+                "concepts": concepts,
+                "cited_by_ids": []  # to be filled later
+            }
+            paper_id_map[paper_id] = paper_data
+            all_papers.append(paper_data)
+
+        next_cursor = data.get("meta", {}).get("next_cursor")
+        if not next_cursor:
+            break
+
+        params["cursor"] = next_cursor
+        sleep(REQUEST_DELAY)
+
+    all_ids = list(paper_id_map.keys())
+    citing_map = fetch_citing_papers_for_batch(all_ids)
+
+    for pid, citing_ids in citing_map.items():
+        paper_id_map[pid]["cited_by_ids"] = citing_ids
+
+    cleaned_papers = []
+    for paper in all_papers:
+        if paper.get("referenced_works") or paper.get("cited_by_ids"):
+            cleaned_papers.append(paper)
+
+    print(f"\n🧹 Removed {len(all_papers) - len(cleaned_papers)} papers without references or citations.")
+    return cleaned_papers[:max_results]
+
+
+# 4. Save to MongoDB
+async def save_to_mongodb(userId, topic, year, papers, request: Request):
+    metadata = {
+        "userId": userId,
+        "topic": topic,
+        "year": year,
+        "scraped_on": datetime.utcnow().isoformat() + "Z",
+        "papers": papers
+    }
+    collection = request.app.state.collection1
+    result = await collection.insert_one(metadata)
+    print(f"\n✅ Saved metadata to MongoDB with ID: {result.inserted_id}")
+    return str(result.inserted_id)
+
+
+# 5. FastAPI Endpoints
+@router.post("/save")
+async def save_data(data_request: CitationAnalysisRequest, saveRequest: Request):
+    userId = data_request.userId
+    topic = data_request.topic
+    year = data_request.year
+
+    keywords = extract_keywords(topic)
+    print("\n🔑 Extracted Keywords:")
+    print(keywords)
+
+    if not keywords:
+        raise HTTPException(status_code=400, detail="No keywords extracted. Please provide a valid topic.")
+
+    papers = fetch_papers_with_citations(keywords, year)
+    if not papers:
+        raise HTTPException(status_code=404, detail="No papers retrieved for the given topic and year.")
+
+    document_id = await save_to_mongodb(userId, topic, year, papers, saveRequest)
+    return {"message": "Data saved successfully!", "document_id": document_id}
+
+
+# NEW ENDPOINT: Get citation data from MongoDB
+# @router.post("/citation-data",response_class=HTMLResponse)
+# async def get_citation_data(data_request:CitationAnalysisRequest , saveRequest: Request):
+#     # Build the query based on provided parameters
+#     query = {"userId": data_request.userId}
+
+#     if data_request.topic:
+#         query["topic"] = data_request.topic
+
+#     if data_request.year:
+#         query["year"] = data_request.year
+
+#     collection = saveRequest.app.state.collection1
+#     result = await collection.find_one(
+#         query,
+#         sort=[("scraped_on", 1)]  # Sort by scraped_on in descending order to get the most recent
+#     )
+
+#     if not result:
+#         raise HTTPException(status_code=404, detail="No data found for the specified criteria")
+
+#     # Convert ObjectId to string for JSON serialization
+#     result["_id"] = str(result["_id"])
+
+#     data =  result["papers"]
+#     data_json = json.dumps(data)
+#     print(" i am here")
+#     return  templates.TemplateResponse("gra.html", {"request": saveRequest,"data":data_json})
+
+
+@router.get("/citation-data", response_class=HTMLResponse)
+async def get_citation_data(request: Request):
+    # Extract query parameters
+    user_id = request.query_params.get("userId")
+    topic = request.query_params.get("topic")
+    year = request.query_params.get("year")
+
+    if not user_id or not topic or not year:
+        raise HTTPException(status_code=400, detail="Missing required query parameters.")
+
+    # Build the query based on provided parameters
+    query = {"userId": user_id, "topic": topic, "year": int(year)}
+
+    collection = request.app.state.collection1
+    result = await collection.find_one(
+        query,
+        sort=[("scraped_on", -1)]  # Sort by scraped_on in descending order to get the most recent
+    )
+
+    if not result:
+        raise HTTPException(status_code=404, detail="No data found for the specified criteria")
+
+    # Convert ObjectId to string for JSON serialization
+    result["_id"] = str(result["_id"])
+
+    data = result["papers"]
+    if not data:
+        raise HTTPException(status_code=404, detail="No papers found in the database.")
+
+    data_json = json.dumps(data)
+
+    return templates.TemplateResponse("gra.html", {"request": request, "data": data_json})
+
+
+@router.post("/check-data-exists-citation/")
+async def check_data_exists(data_request: CitationAnalysisRequest, saveRequest: Request):
+    # Build the query based on provided parameters
+    query = {
+        "userId": data_request.userId,
+        "topic": data_request.topic,
+        "year": data_request.year
+    }
+
+    # Access the MongoDB collection from the app state
+    collection = saveRequest.app.state.collection1
+
+    # Check if a document matching the query exists
+    document = await collection.find_one(query)
+
+    # Return the result
+    if document:
+        return {
+            "exists": True,
+            "message": "Data found for the given userId, topic, and year."
+        }
+    else:
+        return {
+            "exists": False,
+            "message": "No data found for the given userId, topic, and year."
+        }

dbconnect.py

@@ -0,0 +1,23 @@
+from dotenv import load_dotenv
+import os
+from motor.motor_asyncio import AsyncIOMotorClient
+load_dotenv()
+
+
+def db_Connect():
+    MONGO_URI = os.getenv("MONGO_URI")
+    DATABASE_NAME = "PaperLens_Db"
+    COLLECTION_NAME = "Trend_Analysis_Data"
+    COLLECTION_NAME1 = "Citation_Analysis_Data"
+    COLLECTION_NAME2 = "Venue_Analysis_Data"
+    client = AsyncIOMotorClient(MONGO_URI)
+    db = client[DATABASE_NAME]
+    collection = db[COLLECTION_NAME]
+    collection1 = db[COLLECTION_NAME1]
+    collection2 = db[COLLECTION_NAME2]
+    return collection,collection1,collection2
+
+
+
+    
+    

static/css/gra.css

@@ -0,0 +1,548 @@
+:root{
+    --secondary-color: #fcee0a;
+    --text-color: #333;
+    --bg:#4dd9ca;
+}
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color:var( --text-color);
+}
+.concept-label {
+    font-size: 14px;
+    color: #555;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+#container {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+svg {
+    width: 100%;
+    height: 100%;
+}
+
+.node {
+    cursor: pointer;
+}
+
+.link {
+    stroke-opacity: 0.6;
+}
+
+.tooltip {
+    position: absolute;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    pointer-events: none;
+    font-size: 14px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    line-height: 1.4;
+    z-index: 1000;
+}
+
+.tooltip strong {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 15px;
+    color: #333;
+}
+
+.tooltip em {
+    color: #4285f4;
+    font-style: italic;
+}
+
+#paperConcepts {
+    margin-top: 15px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.controls {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background-color: var(--bg);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 100;
+    max-height: 80vh;
+    overflow-y: auto;
+    border: 8px solid #000; /* Add this line for a black border */
+}
+
+.control-section {
+    border-top: 1px solid #eee;
+    padding-top: 10px;
+    margin-top: 10px;
+}
+
+.control-section h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: bolder;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.controls label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+    font-style: italic;
+    font-family:'Times New Roman', Times, serif;
+}
+
+.controls input {
+    width: 100px;
+}
+
+button {
+    margin-top: 10px;
+    padding: 8px 12px;
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #3b78e7;
+}
+
+/* Improved legend styling */
+.legend {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    background-color: var(--bg);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    max-width: 250px;
+    border: 8px solid #000; /* Add this line for a black border */
+}
+
+.legend h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    height: 24px; /* Standardize height for all items */
+    font-family: 'Times New Roman', Times, serif;
+}
+
+/* Standardize all legend indicators */
+.legend-indicator {
+    width: 32px; /* Increased from 24px */
+    height: 32px; /* Increased from 24px */
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* Specific styles for different shapes */
+.legend-circle {
+    border-radius: 50%;
+}
+
+.legend-circle.main {
+    width: 16px;
+    height: 16px;
+    background-color: #4285f4;
+}
+
+.legend-circle.referenced {
+    width: 12px;
+    height: 12px;
+    background-color: #34a853;
+}
+
+.legend-circle.citing {
+    width: 12px;
+    height: 12px;
+    background-color: #ea4335;
+}
+
+.legend-diamond {
+    width: 12px;
+    height: 12px;
+    background-color: #fbbc05;
+    transform: rotate(45deg);
+}
+
+.legend-star svg {
+    width: 20px;
+    height: 20px;
+}
+
+.legend-arrow {
+    width: 50px;
+    height: 20px;
+}
+
+.legend-info {
+    font-weight: bold;
+    color: #555;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #eee;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.legend-info p {
+    margin: 5px 0;
+}
+
+
+#loadingIndicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    display: none;
+}
+
+/* New styles for paper details panel */
+.paper-details-panel {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: white;
+    width: 350px;
+    max-height: 80vh;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 200;
+    display: none;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    background-color: #4285f4;
+    color: white;
+}
+
+.panel-header h3 {
+    margin: 0;
+    font-size: 16px;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+
+.panel-content {
+    padding: 15px;
+    overflow-y: auto;
+    max-height: calc(80vh - 50px);
+}
+
+#paperInfo {
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #eee;
+}
+
+#paperTitle {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #333;
+}
+
+#paperType, #paperCitations {
+    margin: 5px 0;
+    font-size: 14px;
+    color: #555;
+}
+
+#paperConcepts {
+    margin-top: 10px;
+}
+
+.concept-tag {
+    display: inline-block;
+    padding: 4px 8px;
+    margin: 3px;
+    background-color: #e8f0fe;
+    color: #4285f4;
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+.paper-link {
+    margin-top: 15px;
+}
+
+.paper-link a {
+    color: #4285f4;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.paper-link a:hover {
+    text-decoration: underline;
+}
+
+.paper-lists {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.paper-list h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #333;
+}
+
+.paper-list ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.paper-list li {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.paper-list li:last-child {
+    border-bottom: none;
+}
+
+.paper-list a {
+    color: #4285f4;
+    text-decoration: none;
+    font-size: 13px;
+    display: block;
+}
+
+.paper-list a:hover {
+    text-decoration: underline;
+}
+
+.paper-type-label {
+    display: inline-block;
+    padding: 2px 6px;
+    margin-right: 5px;
+    border-radius: 3px;
+    font-size: 11px;
+    color: white;
+}
+
+.paper-type-main {
+    background-color: #4285f4;
+}
+
+.paper-type-reference {
+    background-color: #34a853;
+}
+
+.paper-type-citation {
+    background-color: #ea4335;
+}
+
+.paper-type-bridge {
+    background-color: #fbbc05;
+}
+
+/* Make the legend move up when details panel is open */
+.paper-details-panel.active + .legend {
+    top: calc(80vh + 30px);
+}
+
+/* Selected node styling */
+.node.selected circle,
+.node.selected rect,
+.node.selected path {
+    stroke: #000;
+    stroke-width: 2px;
+}
+
+/* Responsive design for smaller screens */
+@media (max-width: 768px) {
+    .paper-details-panel {
+        width: 100%;
+        max-width: none;
+        top: auto;
+        bottom: 0;
+        right: 0;
+        max-height: 50vh;
+        border-radius: 5px 5px 0 0;
+        transform: translateY(100%);
+    }
+    
+    .paper-details-panel.active {
+        transform: translateY(0);
+    }
+    
+    .controls {
+        max-width: 250px;
+    }
+    
+    .legend {
+        max-width: 200px;
+    }
+}
+/* 
+/* Add to gra.css */
+/* .loading-section {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background-color: white;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    width: 300px;
+}  */
+
+#statusMessage {
+    margin-bottom: 10px;
+    font-weight: bold;
+}
+
+.progress-container {
+    width: 100%;
+    height: 10px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    width: 0%;
+    background-color: #4285f4;
+    transition: width 0.3s ease;
+}
+
+
+
+
+
+.time-navigation {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--bg);
+    padding: 12px 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    z-index: 100;
+    border: 8px solid #000; /* Add this line for a black border */
+}
+
+.time-navigation button {
+    margin: 0 10px;
+    padding: 8px 12px;
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.time-navigation button:disabled {
+    background-color: black;
+    cursor: not-allowed;
+}
+
+.time-indicator {
+    font-weight: bold;
+    margin: 0 15px;
+}
+
+.time-slider-container {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+}
+
+.time-slider {
+    width: 100%;
+    margin: 5px 0;
+}
+
+.time-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #666;
+}
+
+.time-loader {
+    height: 3px;
+    background-color: #4285f4;
+    width: 0%;
+    transition: width 0.3s;
+    margin-top: 5px;
+}
+
+/* Animation for transitions */
+.node.exiting {
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.node.entering {
+    opacity: 0;
+    animation: fadeIn 0.5s forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}

static/css/homestyle.css

@@ -0,0 +1,1967 @@
+@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
+:root {
+  --primary-color: #4a90e2;
+  --secondary-color: #fcee0a;
+  --third-color: #6f42c1;
+  --text-color: #333;
+  --bg-color: #f5f7fa;
+  --white: #ffffff;
+  --forth-color: #00BFFF;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  line-height: 1.6;
+  background: var(--secondary-color);
+  color: var(--text-color);
+}
+
+header {
+  color: var(--secondary-color);
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2%;
+  backdrop-filter: blur(10px); /* Optional: nice blur effect */
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  /* background-color: #fff; */
+  flex-wrap: wrap; /* Allow wrapping on smaller screens */
+
+}
+
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 30px;
+  background-color: rgb(7, 7, 7);
+  padding: 10px 30px;
+  width: fit-content;
+  position: relative;
+}
+
+.logo-container::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  left: 13px;
+  right: 13px;
+  bottom: 13px;
+  border-radius: 26px;
+  border: 8px solid #faf8f8;
+  pointer-events: none;
+}
+
+
+#appname {
+  display: flex;
+  align-items: center;
+  font-size: clamp(1.2rem, 3vw, 2rem); /* Responsive font size */
+  white-space: nowrap;
+  margin-right: auto; /* Push other elements to the right */
+  color: #00bcd4;
+  
+}
+
+/* Ensure header text remains visible */
+.header-content h1#appname {
+  position: relative;
+  z-index: 2;
+}
+
+nav {
+  display: flex;
+  gap: clamp(1rem, 3vw, 3rem); /* Wider gaps between items */
+  align-items: center;
+  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%); /* More dramatic angle */
+  background-color: #0b0b0b; /* Olive color like in Image 2 */
+  padding: 0.4rem 2rem; /* Balanced padding */
+  height: 38px; /* Slimmer height */
+  width: fit-content; /* Only as wide as needed */
+}
+
+
+nav a:hover {
+  color: rgba(255, 255, 255, 0.8);
+  transform: translateY(-2px);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  text-transform: uppercase; /* Match the all-caps style in Image 2 */
+  font-size: 0.85rem;
+  letter-spacing: 0.5px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+
+nav a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--white);
+  
+  transition: width 0.3s ease;
+}
+
+nav a:hover::after {
+  width: 100%;
+  background-color: #00bcd4;
+}
+
+
+.sign-in-btn {
+  background: rgb(35, 204, 216);
+  color: white; 
+  border: none;
+  padding: 0.2rem 1.5rem;
+  border-radius: 25px; 
+  cursor: pointer;
+  transition: all 0.3s ease; 
+  font-size: 0.95rem; 
+  letter-spacing: 0.5px; 
+  box-shadow: 0 4px 10px rgba(35, 204, 216, 0.3); 
+  position: relative;
+  overflow: hidden; 
+  text-transform: none; 
+  bottom: 5px;
+}
+
+.sign-in-btn:hover {
+  background: rgb(28, 175, 185); 
+  transform: translateY(-2px); 
+  box-shadow: 0 6px 12px rgba(174, 35, 216, 0.4);
+}
+
+/* Active/click effect */
+.sign-in-btn:active {
+  transform: translateY(1px); /* Push down slightly when clicked */
+  box-shadow: 0 2px 8px rgba(201, 35, 216, 0.4); /* Reduced shadow */
+}
+
+/* Optional: Add a subtle shine/gleam effect */
+.sign-in-btn::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: rotate(45deg);
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.sign-in-btn:hover::before {
+  opacity: 1;
+  animation: shine 1.5s ease-out;
+}
+
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+#signInBtn {
+  display: block;
+}
+
+
+
+
+/* Hero Section */
+.hero {
+  position: relative;
+  padding: 8rem 5% 4rem;
+  text-align: center;
+  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
+  color: var(--white);
+  overflow: hidden;
+}
+
+.hero h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  font-family: 'Bungee Shade', cursive;
+  font-weight: 700;
+ color: #0b0b0b;
+}
+
+ /* Lower text with paper effect */
+ .liquid-container {
+  position: relative;
+  height: 150px;
+  margin: 0 auto;
+  perspective: 1000px;
+}
+
+.liquid-word {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 0; /* Start with 0 size */
+  text-align: center;
+  transform-style: preserve-3d;
+  transition: opacity 0.5s ease;
+}
+
+.liquid-word.active {
+  opacity: 1;
+}
+
+.liquid-char {
+  display: inline-block;
+  font-size: 55px;
+  color: #00CED1; /* Base color */
+  -webkit-text-stroke: 4px #008B8B; /* Outline */
+  text-shadow: 
+      -2px -2px 0 #fff,
+      2px -2px 0 #fff,
+      -2px 2px 0 #fff,
+      2px 2px 0 #fff,
+      0px 4px 0 #006666, /* Inner shadow */
+      4px 4px 10px rgba(0,0,0,0.3); /* Outer shadow */
+  transform: translateY(100px) scale(0);
+  opacity: 0;
+  position: relative;
+}
+
+/* Paper pieces/confetti */
+.paper-piece {
+  position: absolute;
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  opacity: 0;
+  z-index: -1;
+  transform-origin: center;
+  transition: all 0.3s ease;
+}
+
+/* Paper drop effect (instead of drip) */
+.paper-drop {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  width: 15px;
+  height: 20px;
+  background: #fff;
+  transform: translateX(-50%) scale(0);
+  transform-origin: top center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
+}
+
+/* Paper splash container */
+.splash-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Animations */
+@keyframes paperDrop {
+  0% { transform: translateX(-50%) scale(0); }
+  40% { transform: translateX(-50%) scale(1.2); }
+  60% { transform: translateX(-50%) scale(0.8); }
+  80% { transform: translateX(-50%) scale(1.1); }
+  100% { transform: translateX(-50%) scale(1); }
+}
+
+@keyframes paperSplash {
+  0% { transform: scale(0) rotate(0deg); opacity: 0.9; }
+  50% { opacity: 0.7; }
+  100% { transform: scale(1.5) rotate(var(--rotation)); opacity: 0; }
+}
+
+@keyframes paperIn {
+  0% { transform: translateY(100px) scale(0) rotate(10deg); opacity: 0; }
+  40% { transform: translateY(-20px) scale(1.2) rotate(-5deg); opacity: 1; }
+  60% { transform: translateY(10px) scale(0.9) rotate(3deg); opacity: 1; }
+  80% { transform: translateY(-5px) scale(1.05) rotate(-2deg); opacity: 1; }
+  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
+}
+
+@keyframes paperOut {
+  0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
+  20% { transform: translateY(-10px) scale(1.1) rotate(-5deg); opacity: 0.8; }
+  100% { transform: translateY(-100px) scale(0) rotate(10deg); opacity: 0; }
+}
+
+@keyframes wobble {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-5px) rotate(-2deg); }
+  75% { transform: translateY(3px) rotate(2deg); }
+}
+
+.title-char {
+  display: inline-block;
+  animation: wobble 4s ease-in-out infinite;
+  animation-delay: calc(var(--i) * 0.1s);
+}
+
+/* Search Container */
+.search-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  width: fit-content;
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  background: var(--white);
+  padding: 0.5rem;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.search-container .searchBox {
+  margin: 0;
+}
+
+.searchBox {
+  position: relative;
+  display: flex;
+  background: var(--secondary-color);
+  height: 60px;
+  border-radius: 40px;
+  padding: 10px;
+  margin: 0 auto;
+  width: fit-content;
+  z-index: 10;
+}
+
+.searchBox:hover > .searchInput {
+  width: 290px;
+  padding: 0 6px;
+  color: #0b0b0b;
+ font-weight: bold;
+}
+
+.searchBox:hover > .searchButton {
+  background: white;
+  color: #2f3640;
+}
+
+#searchbtn {
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgb(13, 223, 220);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.4s;
+  cursor: pointer;
+  margin-top: -2px;
+  font-size: 14px;
+ 
+}
+
+.searchInput {
+  border: none;
+  background: none;
+  outline: none;
+  float: left;
+  padding: 0;
+  color: white;
+  font-size: 16px;
+  transition: 0.4s;
+  line-height: 40px;
+  width: 0px;
+}
+
+/* Year Filter Visibility */
+.filter-container {
+  display: none; /* Hidden by default */
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.searchBox:hover .filter-container {
+  display: flex; /* Visible on hover */
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Base Styling for Year Filter */
+.year-filter {
+  position: relative;
+  height: 40px;
+  padding: 0.6rem 1.5rem;
+  border: none;
+  background: #f5f5f5;
+  color: #333;
+  font-family: 'Poppins', sans-serif;
+  font-size: 14px;
+  border-radius: 40px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  appearance: none; /* Remove default arrow */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%234a4a4a" d="M0 0h12L6 6z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+}
+
+.year-filter:hover,
+.year-filter:focus {
+  background-color: #e0e0e0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+@media screen and (max-width: 620px) {
+  .searchBox:hover > .searchInput {
+    width: 150px;
+    padding: 0 6px;
+  }
+}
+/* Submit Button */
+.search-container button {
+  background: var(--secondary-color);
+  color: var(--white);
+  border: none;
+  padding: 0.8rem 2rem;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Hover effect for the submit button */
+.search-container button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  transition: left 0.4s ease;
+}
+
+.search-container button:hover::before {
+  left: 100%;
+}
+
+.search-container button:hover {
+  background: #5a37a8;
+  transform: scale(1.05);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .search-container {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .filter-container {
+    display: none; 
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  .year-filter {
+    width: 100%;
+  }
+
+  .search-container button {
+    width: 100%;
+  }
+}
+
+
+
+
+
+/* architecture Section
+.architecture {
+background: linear-gradient(135deg, var( --text-color), var( --text-color));
+color: var(--white);
+padding: 4rem 5%; 
+} */
+
+.architecture {
+  background: linear-gradient(135deg, var(--text-color), var(--text-color));
+  color: var(--white);
+  padding: 4rem 5%;
+  border: 8px solid black;
+  border-radius: 10px; /* Adding some border radius for a nicer look */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  position: relative;
+  top: 20px;
+  margin-left: 20px;
+  margin-right: 10px;
+  width: calc(100% - 40px); /* Accounting for the left and right margins */
+}
+
+
+
+
+
+#contacts {
+  padding-top: 40px;
+  margin-left: 20px;  
+  margin-right: 20px;
+  position: relative;
+  
+}
+#feedback {
+  margin-left: 20px;  
+  margin-right: 20px;
+  position: relative;
+  
+}
+/* Footer */
+footer {
+  background: #2c3e50;
+  color: var(--white);
+  text-align: center;
+  padding: 2rem;
+}
+
+
+/* /* Profile Styling */
+/* .profile-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  margin-left: auto;
+}  */
+
+.profile-pic {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-left: 10px;
+}
+
+.username {
+  color: white;
+  font-weight: bold;
+}
+
+
+.logout-btn {
+  background: red;
+  color: white;
+  padding: 5px 10px;
+  border: none;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+
+
+.orb {
+  position: absolute;
+  border-radius: 10px; /* Slightly rounded corners for a paper-like effect */
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Gradient using theme colors */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow for depth */
+  animation: floatOrb 10s ease-in-out infinite;
+  z-index: 0;
+  opacity: 0.3;
+}
+
+.orb:nth-child(1) {
+  width: 200px;
+  height: 200px;
+  top: 30%;
+  left: 10%;
+  animation-delay: 0s;
+  background: var(--forth-color); /* Gradient for a slight texture */
+}
+
+.orb:nth-child(2) {
+  width: 150px;
+  height: 150px;
+  top: 60%;
+  right: 15%;
+  animation-delay: -2s;
+  background: var(--third-color); /* Slightly different gradient */
+}
+
+.orb:nth-child(3) {
+  width: 100px;
+  height: 100px;
+  top: 30%;
+  right: 25%;
+  animation-delay: -4s;
+  background: var(--secondary-color); /* Another variation of theme texture */
+}
+
+
+/* Orb Styles for Features Section */
+.orb1 {
+  position: absolute;
+  border-radius: 10px; /* Slightly rounded corners for a paper-like effect */
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Gradient using theme colors */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow for depth */
+  animation: floatOrb 10s ease-in-out infinite;
+  z-index: 0; 
+  opacity: 0.3;
+}
+
+.orb1:nth-child(1) {
+  width: 150px;
+  height: 150px;
+  top: 10%;
+  left: 30%;
+  animation-delay: 0s;
+  background: var(--third-color); /* Gradient for a slight texture */
+}
+
+.orb1:nth-child(2) {
+  width: 100px;
+  height: 100px;
+  top: 60%;
+  right: 15%;
+  animation-delay: -2s;
+  background:  var(--forth-color); /* Slightly different gradient */
+}
+
+
+@keyframes floatOrb {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(-20px, -20px); }
+}
+
+@keyframes floatOrb {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(-20px, -20px); }
+}
+
+.hero-content {
+  position: relative; /* Ensure content is above orbs */
+  z-index: 1; /* Content should be above orbs */
+}
+
+
+.paper {
+  position: fixed;
+  pointer-events: none;
+  transform-origin: center center;
+  filter: blur(1px);
+  mix-blend-mode: screen;
+  background: white;
+  top: 0;
+  left: 0;
+}
+
+.glow-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.glow {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(90deg, 
+    var(--primary-color), var(--secondary-color), var(--third-color), var(--forth-color),
+    var(--primary-color), var(--secondary-color), var(--third-color));
+  border-radius: 0px; /* Make it square */
+  z-index: 0;
+  background-size: 400%;
+  animation: animate 20s linear infinite;
+}
+
+.glow::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background: #f0f0f0;
+  border-radius: 0px; /* Ensure it's square */
+  z-index: 1;
+  transition: background-color 0.3s ease;
+}
+
+
+
+/* .search-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  border: none;
+  padding: 0.8rem;
+  border-radius: 25px;
+  outline: none;
+  background: transparent;
+} */
+
+.glow-wrapper:focus-within .glow::before {
+  background: var(--white);
+}
+
+@keyframes animate {
+  0% { background-position: 0 0; }
+  50% { background-position: 400% 0; }
+  100% { background-position: 0 0; }
+}
+
+/* Remove the original box-shadow focus effect */
+.search-container input:focus {
+  box-shadow: none;
+}
+
+
+.beam-container {
+  position: relative;
+  display: flex;
+  height: 500px;
+  width: 90vw;
+  max-width: 800px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.content-wrapper {
+  display: flex;
+  width: 100%;
+  max-width: 32rem; /* equivalent to max-w-lg */
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2.5rem; /* equivalent to gap-10 */
+}
+
+.left-column, .middle-column, .right-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.left-column {
+  gap: 0.5rem; /* equivalent to gap-2 */
+}
+
+.circle {
+  z-index: 10;
+  display: flex;
+  width: 3rem; /* size-12 */
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px; 
+  border: 2px solid #e2e8f0; 
+  background-color: white;
+  padding: 0.75rem; 
+  box-shadow: 0 0 20px -12px rgba(0, 0, 0, 0.8);
+}
+
+.large-circle {
+  width: 4rem; /* size-16 */
+  height: 4rem;
+}
+
+.circle img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* SVG and beam styling */
+.beams-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.beam {
+  stroke: #e2e8f0;
+  stroke-width: 2;
+  stroke-dasharray: 3 3;
+  animation: dashOffset 5s linear infinite;
+  opacity: 0.7;
+}
+
+@keyframes dashOffset {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 100;
+  }
+}
+
+.beam-glow {
+  stroke: #60a5fa;
+  stroke-width: 4;
+  filter: blur(4px);
+  opacity: 0.5;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+
+.container {
+  position: relative;
+  width: 800px;
+  height: 400px;
+}
+
+
+.center-box {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  background: white; /* White background */
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.settings-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  animation: rotate 8s linear infinite;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.settings-icon-wrapper img {
+  width: 40px;
+  height: 40px;
+}
+
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.paper-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--white);
+  font-size: medium;
+  font-weight: bold;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.paper-icon {
+  width: 20px;
+  height: 24px;
+  position: relative;
+  background: white;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 9px;
+  font-weight: bold;
+  color: #555;
+}
+
+.paper-icon:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-width: 0 10px 10px 0;
+  border-style: solid;
+  border-color: #ddd #7f56d9;
+}
+
+.paths-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.6);
+  stroke-width: 1;
+  stroke-opacity: 0; /* Make lines invisible initially */
+  stroke-dasharray: 0, 1000; /* Hide stroke */
+  transition: stroke-opacity 0.3s ease-in-out;
+}
+
+
+.moving-paper {
+  position: absolute;
+  width: 20px;
+  height: 24px;
+  background: white;
+  border-radius: 2px;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 9px;
+  font-weight: bold;
+  color: #555;
+}
+
+.moving-paper:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-width: 0 10px 10px 0;
+  border-style: solid;
+  border-color: #ddd #7f56d9;
+}
+
+.moving-paper {
+  z-index: 1; 
+}
+
+.moving-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #4a90e2;
+  border-radius: 50%;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+}
+
+.output-box {
+  position: absolute;
+  width: 35px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 0.5px solid rgba(255, 255, 255, 0.1);
+  z-index: 2;
+  right: 80px;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.output-box.highlight {
+  box-shadow: 0 0 15px #4a90e2;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.output-logo {
+  border-radius: 8px;
+  width: 35px;
+  height: 35px;
+  object-fit: fill;
+}
+
+.box-title {
+  position: absolute;
+  bottom: -25px;
+  margin-left: -25px;
+  font-size: medium;
+  font-weight: bold;
+  color: var(--white);
+  white-space: nowrap;
+  text-align: center;
+  width: 100%;
+}
+
+.output-box {
+  display: none;
+}
+
+.center-box {
+transition: transform 0.3s ease-in-out;
+}
+
+.center-box.pulse {
+transform: translate(-50%, -50%) scale(1.1);
+}
+
+.edit-img {
+width: 20px; /* Adjust size */
+height: 20px;
+cursor: pointer;
+transition: transform 0.2s ease-in-out;
+}
+
+.edit-img:hover {
+transform: scale(1.1);
+}
+
+
+/* Add these styles to your CSS file */
+.filter-container {
+position: relative;
+margin: 0 0.5rem;
+}
+
+.year-filter {
+height: 100%;
+padding: 0.8rem;
+border: none;
+background: #f0f0f0;
+color: var(--text-color);
+font-family: 'Poppins', sans-serif;
+outline: none;
+cursor: pointer;
+transition: background-color 0.3s ease;
+appearance: none; /* Remove default arrow */
+-webkit-appearance: none;
+-moz-appearance: none;
+background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%234a4a4a" d="M0 0h12L6 6z"/></svg>');
+background-repeat: no-repeat;
+background-position: right 0.8rem center;
+padding-right: 2rem;
+min-width: 120px;
+}
+
+.year-filter:hover, .year-filter:focus {
+background-color: #e0e0e0;
+}
+
+/* Adjust search container for the new filter */
+.search-container {
+align-items: center;
+}
+
+/* Make the search container responsive */
+.logo-image {
+  height: auto;
+  max-height: 40px; /* Adjust based on your desired size */
+  width: auto;
+  margin-right: 1rem; /* Add space between logo and text */
+  transition: all 0.3s ease; /* Smooth scaling */
+}
+
+/* Make logo responsive */
+@media (max-width: 768px) {
+  .logo-image {
+    max-height: 30px; /* Smaller on mobile devices */
+  }
+}
+@media (max-width: 768px) {
+.search-container {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-container {
+  width: 100%;
+  margin: 0.5rem 0;
+}
+
+.year-filter {
+  width: 100%;
+}
+
+.search-container button {
+  width: 100%;
+}
+}
+
+/* Search Results Styling */
+.search-results {
+padding: 2rem 5%;
+background: var(--bg-color);
+min-height: 300px;
+}
+
+.search-results h2 {
+color: var(--secondary-color);
+margin-bottom: 1.5rem;
+text-align: center;
+}
+
+.paper-card {
+background: var(--white);
+border-radius: 10px;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+padding: 1.5rem;
+margin-bottom: 1.5rem;
+transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.paper-card:hover {
+transform: translateY(-5px);
+box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+.paper-card h3 {
+color: var(--primary-color);
+margin-bottom: 0.5rem;
+}
+
+.paper-authors {
+color: var(--text-color);
+font-style: italic;
+margin-bottom: 0.5rem;
+}
+
+.paper-year {
+display: inline-block;
+background: var(--secondary-color);
+color: white;
+padding: 0.2rem 0.5rem;
+border-radius: 4px;
+font-size: 0.9rem;
+margin-bottom: 1rem;
+}
+
+.paper-abstract {
+color: var(--text-color);
+margin-bottom: 1rem;
+line-height: 1.6;
+}
+
+.view-paper-btn {
+background: var(--primary-color);
+color: white;
+border: none;
+padding: 0.5rem 1rem;
+border-radius: 4px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+.view-paper-btn:hover {
+background: var(--secondary-color);
+}
+
+#input-paper {
+margin-bottom: 20px;
+}
+
+
+
+.container {
+position: relative;
+width: 800px;
+height: 400px;
+margin: 0 auto; /* Add this to center the container horizontally */
+display: flex;
+flex-direction: column;
+align-items: center; /* This will center child elements horizontally */
+}
+
+
+.architecture-description {
+  max-width: 800px;
+  margin: 0 auto 40px auto;
+  padding: 25px;
+  background: var(--text-color);
+  border-radius: 10px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.architecture-description h3 {
+  color: var(--secondary-color);
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+  text-shadow: 0 0 10px var(--third-color);
+  font-family: 'Bungee Shade', cursive;
+  text-align: center; /* Ensures the text inside the h3 is centered */
+}
+.architecture-description p {
+line-height: 1.7;
+margin-bottom: 15px;
+font-size: 1.05rem;
+text-transform: capitalize;
+font-style: italic;
+font-weight: 200;
+color:white;
+text-align: center;
+font-family: serif;
+}
+
+.architecture-features {
+display: flex;
+justify-content: space-between;
+margin-top: 25px;
+flex-wrap: wrap;
+gap: 20px;
+}
+
+.architecture-feature {
+flex: 1;
+min-width: 200px;
+background: rgba(111, 66, 193, 0.2);
+padding: 15px;
+border-radius: 8px;
+border-left: 3px solid var(--forth-color);
+}
+
+.architecture-feature h4 {
+color: white;
+font-size: 1.2rem;
+margin-bottom: 10px;
+}
+
+.architecture-feature p {
+color: rgba(255, 255, 255, 0.8);
+font-size: 0.95rem;
+}
+
+
+.feature-selection-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.feature-selection {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.feature-selection .glass {
+  position: relative;
+  width: 180px;
+  height: 200px;
+  background: linear-gradient(var(--text-color), var(--text-color));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.5s;
+  border-radius: 10px;
+  margin: 0 -45px;
+  backdrop-filter: blur(10px);
+  transform: rotate(calc(var(--r) * 1deg));
+}
+
+.feature-selection:hover .glass {
+  transform: rotate(0deg);
+  margin: 0 10px;
+}
+
+.feature-selection .glass::before {
+  content: attr(data-text);
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+}
+
+
+
+.feature-selection .glass svg {
+  font-size: 2.5em;
+  fill: #fff;
+}
+
+
+.selection-message {
+  text-align: center;
+  margin-top: 30px;
+  padding: 12px;
+  background: var(--text-color);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: var(--secondary-color);
+  font-weight: 500;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.4s ease;
+}
+
+.selection-message.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.glass.selected {
+  outline: 3px solid var(--secondary-color, #00bcd4);
+  box-shadow: 0 0 15px rgba(0, 188, 212, 0.6);
+}
+
+
+.glass-icon {
+  width: 60px;  /* or whatever size fits */
+  height: 60px;
+  object-fit: contain;
+}
+
+
+
+
+
+
+/* Add this to your existing CSS file or in a <style> tag in the <head> */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(8px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+
+.loading-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loading-container {
+  position: relative;
+  width: 300px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cyclone {
+  position: absolute;
+  width: 200px;
+  height: 400px;
+  top: 50px;
+}
+
+.paper {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ddd;
+  transform-origin: center;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.loading-text {
+  position: absolute;
+  bottom: 30px;
+  font-size: 24px;
+  color: #555;
+  font-weight: bold;
+}
+
+.ground {
+  position: absolute;
+  bottom: 70px;
+  width: 120px;
+  height: 10px;
+  background: radial-gradient(ellipse at center, #eee, transparent 70%);
+  border-radius: 50%;
+  opacity: 0.3;
+}
+
+
+.paper-alert {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), 
+              0 0 0 1px rgba(0,0,0,0.05);
+  min-width: 320px;
+  max-width: 400px;
+  position: fixed;
+  right: 16px;
+  top: 16px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10000;
+  transform-origin: top right;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Torn paper effect */
+.paper-alert::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 4px;
+  background-color: #fff;
+  background-image: 
+    radial-gradient(circle at 2px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+    radial-gradient(circle at 10px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+    radial-gradient(circle at 18px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+    radial-gradient(circle at 26px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+    radial-gradient(circle at 34px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+    radial-gradient(circle at 42px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px);
+  background-size: 50px 10px;
+  z-index: 2;
+}
+
+/* Paper texture */
+.paper-alert::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1;
+}
+
+.paper-alert.showAlert {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.paper-alert.show {
+  animation: paper_enter 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+}
+
+@keyframes paper_enter {
+  0% { transform: translateX(100%) rotate(5deg); }
+  50% { transform: translateX(-10%) rotate(-2deg); }
+  75% { transform: translateX(5%) rotate(1deg); }
+  100% { transform: translateX(0) rotate(0); }
+}
+
+.paper-alert.hide {
+  animation: paper_exit 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+}
+
+@keyframes paper_exit {
+  0% { transform: translateX(0) rotate(0); }
+  30% { transform: translateX(5%) rotate(1deg); }
+  100% { transform: translateX(110%) rotate(5deg); }
+}
+
+.paper-alert-content {
+  position: relative;
+  padding: 18px 15px;
+  z-index: 3;
+}
+
+.paper-pin {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #f44336;
+  border-radius: 50%;
+  top: 10px;
+  left: 20px;
+  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.paper-pin:after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: rgba(255,255,255,0.4);
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+}
+
+.paper-clip {
+  position: absolute;
+  top: -8px;
+  right: 30px;
+  width: 30px;
+  height: 30px;
+  border: 2px solid #5d9cec;
+  border-radius: 0 0 0 10px;
+  border-top: none;
+  border-right: none;
+  transform: rotate(45deg);
+  z-index: 10;
+}
+
+.paper-clip:before {
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 10px;
+  border: 2px solid #5d9cec;
+  border-radius: 0 5px 0 5px;
+  border-top: none;
+  border-right: none;
+  top: 0;
+  left: 0;
+  transform: rotate(0deg);
+}
+
+.alert-icon {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.alert-icon i {
+  font-size: 22px;
+  color: #f44336;
+  margin-right: 10px;
+}
+
+.alert-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #333;
+  margin: 0;
+}
+
+.paper-alert .msg {
+  margin-top: 6px;
+  margin-left: 32px;
+  font-size: 14px;
+  color: #555;
+  line-height: 1.4;
+}
+
+.paper-alert .close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: rgba(0,0,0,0.05);
+  border-radius: 50%;
+  color: #666;
+  transition: all 0.2s;
+  z-index: 5;
+}
+
+.paper-alert .close-btn:hover {
+  background: rgba(0,0,0,0.1);
+  color: #333;
+  transform: rotate(90deg);
+}
+
+.alert-btn {
+  position: fixed;
+  top: 7rem;
+  right: 2.5rem;
+  z-index: 1201;
+  font-size: 0.9rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 5px;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+  cursor: pointer;
+  font-family: 'Segoe UI', sans-serif;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition: all 0.3s;
+}
+
+.alert-btn:hover {
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
+}
+
+.paper-lines {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(to bottom, transparent 0%, transparent 98%, #e0e0e0 99%, transparent 100%);
+  background-size: 100% 24px;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.handwritten {
+  font-family: 'Segoe Script', 'Bradley Hand', cursive;
+  transform: rotate(-1deg);
+  color: #2c3e50;
+}
+
+
+#nextBtn {
+  background: var(--secondary-color);
+  color: var(--white);
+  border: none;
+  padding: 0.8rem 2rem;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  bottom: 7px;
+}
+
+#nextBtn:hover {
+  background: #5a37a8;
+}
+
+.header-title {
+  text-align: center;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  top: 50%;
+  font-family: 'Bungee Shade', cursive;
+  transform: translateY(35%);
+}
+
+.interactive-book {
+  max-height: fit-content;
+  margin: 0;
+  padding: 10px;
+  background: linear-gradient(90deg, var(--secondary-color), var(--secondary-color));
+  position: relative;
+}
+
+.interactive-book::after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  border: 8px solid black;
+  pointer-events: none;
+  border-radius: 12px;
+}
+
+.carousel-container {
+  position: relative;
+  margin-top: -2px;
+  width: 80%;
+  height: 55vh;
+  perspective: 1000px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 10%;
+  transform: scale(0.6);
+  
+  }
+  
+  .carousel {
+  margin-top: 60px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 1s ease;
+  }
+  
+  .slide {
+  position: absolute;
+  width: 60%;
+  height: 80%;
+  left: 20%;
+  top: 10%;
+  background: var(--text-color);
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  text-align: center;
+  backface-visibility: hidden;
+  transition: opacity 0.5s;
+  }
+  
+
+.slide video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 3px;
+}
+  
+  .slide h2 {
+  font-size: 24px;
+  margin-bottom: 15px;
+  color: #333;
+  }
+  
+  .slide p {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #666;
+  max-width: 80%;
+  }
+  
+  /* Refined Open Book Section */
+  .book-container {
+  position: relative;
+  width: 300px;
+  margin-top: 60px;
+  height: 150px;
+  margin-bottom: 30px;
+  margin-left: 40%;
+  }
+  
+  .book {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateX(20deg);
+  }
+  
+  .book-center {
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  background: #999;
+  left: 50%;
+  transform: translateX(20px) ;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  z-index: 1;
+  }
+  
+  .book-left, .book-right {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  top: 0;
+  box-sizing: border-box;
+  background: #fff;
+  border: 1px solid #ddd;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  overflow: hidden;
+  }
+  
+  .book-left {
+  left: 0;
+  border-radius: 5px 0 0 5px;
+  transform-origin: right center;
+  z-index: 1;
+  background: linear-gradient(to right, #f9f9f9, #fff);
+  }
+  
+  .book-right {
+  right: 0;
+  border-radius: 0 5px 5px 0;
+  transform-origin: left center;
+  z-index: 1;
+  background: linear-gradient(to left, #f9f9f9, #fff);
+  }
+  
+  .page {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background: #fff;
+  border-left: 1px solid #eee;
+  transform-origin: left center;
+  transition: transform 0.6s ease, z-index 0s 0.3s;
+  transform-style: preserve-3d;
+  z-index: 1;
+  border-radius: 0 5px 5px 0;
+  }
+  
+  .page-front, .page-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 10px;
+  background: linear-gradient(to left, #f9f9f9, #fff);
+  }
+  
+  .page-back {
+  transform: rotateY(180deg);
+  background: linear-gradient(to right, #f9f9f9, #fff);
+  border-radius: 5px 0 0 5px;
+  }
+  
+  .page-fold {
+  position: absolute;
+  width: 30px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0));
+  z-index: 2;
+  }
+  
+  .page-shadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0));
+  opacity: 0;
+  transition: opacity 0.6s;
+  pointer-events: none;
+  }
+  
+  .book-shadow {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  bottom: -20px;
+  left: 0;
+  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
+  transform: rotateX(90deg);
+  z-index: 0;
+  }
+  
+  .page-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+  
+  
+  .page-number {
+    position: absolute;
+    bottom: 10px;
+    font-size: 12px;
+    color: #999;
+  }
+  
+  .page-number-left {
+    left: 10px;
+  }
+  
+  .page-number-right {
+    right: 10px;
+  }
+  
+  .page-line {
+    width: 80%;
+    height: 1px;
+    background: #eee;
+    margin: 10px 0;
+  }
+  
+  .navigation {
+    display: flex;
+    gap: 8px;
+    margin-top: 20px;
+    justify-content: space-between;
+  }
+  
+  button {
+    padding: 10px 20px;
+    background: #3498db;
+    color: white;
+    border: none;
+    margin-top: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+    font-size: 14px;
+  }
+  
+  button:hover {
+    background: #2980b9;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 15px;
+  }
+  
+  .dot {
+    width: 10px;
+    height: 10px;
+    background: #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  
+  .dot.active {
+    background: #3498db;
+  }

static/css/loginstyle.css

@@ -0,0 +1,460 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --mainColor1: #4a90e2;
+    --mainColor2: #7f56d9;
+    --whiteColor: #ffffff;
+    --titleColor: #555555;
+    --labelColor: #333333;
+    --text-color: #333;
+    --secondary-color: #fcee0a;
+    --aqua: #47f5f2;
+}
+
+html {
+    font-size: 62.5%;
+    scroll-behavior: smooth;
+}
+
+body {
+    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
+    font-weight: 400;
+    min-height: 100vh;
+    display: grid;
+    place-content: center;
+    overflow: hidden;
+}
+
+
+.paper-fall {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.paper {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-color: #fff;
+    border-radius: 2px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    animation: fall linear infinite;
+}
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(100vh);
+        opacity: 0;
+    }
+}
+
+
+.wrapper {
+    position: relative;
+    width: 35rem;
+    height: 50rem;
+}
+
+@media(min-width: 540px) {
+    .wrapper {
+        width: 40rem;
+    }
+}
+
+.form-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--text-color);
+    border-radius: 0.5rem;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+}
+
+.form-container h2 {
+    font-size: 3rem;
+    text-align: center;
+    text-transform: capitalize;
+    color: var(--whiteColor);
+}
+
+.form-group {
+    position: relative;
+    width: 32rem;
+    margin: 3rem 0;
+}
+
+.form-group i,
+.form-group label {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.6rem;
+    color: var(--labelColor);
+    padding: 0 0.5rem;
+    transition: all 0.5s ease;
+    pointer-events: none;
+}
+
+.form-group i {
+    left: 0.5rem;
+}
+
+.form-group label {
+    left: 2.5rem;
+}
+
+.form-group input {
+    width: 100%;
+    height: 4rem;
+    padding: 0 1rem;
+    border-radius: 0.5rem;
+    border: 0.1rem solid var(--whiteColor);
+    font-size: 1.6rem;
+    color: var(--labelColor);
+    background: white;
+    outline: none;
+}
+
+.form-group input:focus ~ label,
+.form-group input:valid ~ label,
+.form-group input:focus ~ i,
+.form-group input:valid ~ i {
+    top: 0 !important;
+    font-size: 1.2rem !important;
+    background: var(--whiteColor);
+}
+
+.forgot-pass {
+    margin: -1.5rem 0 1.5rem;
+    text-align: center;
+}
+
+.forgot-pass a {
+    color: var(--whiteColor);
+    text-decoration: none;
+    font-size: 1.4rem;
+    transition: all 0.5s ease;
+}
+
+.forgot-pass a:hover {
+    color: var(--mainColor1);
+}
+
+
+.wrapper .form-container.forgot-password {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var (-text-color);
+    border-radius: .5rem;
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
+    transform: rotate(7deg);
+}
+
+/* Animation for Forgot Password */
+.wrapper.animated-forgot .form-container.forgot-password {
+    animation: forgot-flip 1s ease-in-out forwards;
+    z-index: 3;
+}
+
+@keyframes forgot-flip {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-50rem) scale(1.1);
+    }
+    100% {
+        transform: translateX(0) rotate(7deg) scale(1);
+    }
+}
+
+.wrapper.animated-forgot .form-container.sign-in,
+.wrapper.animated-forgot .form-container.sign-up {
+    animation: rotatecard 0.7s ease-in-out forwards;
+    animation-delay: 0.3s;
+}
+
+
+
+
+.btn {
+    background: linear-gradient(to right, var(--aqua), var(--aqua));
+    color: var(--whiteColor);
+    width: 100%;
+    height: 4rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.4);
+}
+
+.link {
+    text-align: center;
+    font-size: 1.4rem;
+    color: var(--labelColor);
+    margin: 2.5rem 0;
+}
+
+.link a {
+    color: var(--mainColor1);
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.5s ease;
+}
+
+.link a:hover {
+    color: #da4453;
+}
+
+.sign-up {
+    transform: rotate(7deg);
+}
+
+.animated-signin .sign-in {
+    animation: signin-flip 1s ease-in-out forwards;
+}
+
+@keyframes signin-flip {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-50rem) scale(1.1);
+    }
+    100% {
+        transform: translateX(0) rotate(7deg) scale(1);
+    }
+}
+
+.animated-signin .sign-up {
+    animation: rotatecard 0.7s ease-in-out forwards;
+}
+
+.animated-signup .sign-up {
+    animation: signup-flip 1s ease-in-out forwards;
+}
+
+@keyframes signup-flip {
+    0% {
+        transform: translateX(0);
+        z-index: 1;
+    }
+    50% {
+        transform: translateX(50rem) scale(1.1);
+    }
+    100% {
+        transform: translateX(0) rotate(7deg) scale(1);
+    }
+}
+
+.animated-signup .sign-in {
+    transform: rotate(7deg);
+    animation: rotatecard 0.7s ease-in-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes rotatecard {
+    0% {
+        transform: rotate(7deg);
+    }
+    100% {
+        transform: rotate(0);
+        z-index: 1;
+    }
+}
+
+/* 
+.success-animation {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    text-align: center;
+}
+
+.checkmark {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: #7f56d9;
+    margin: 0 auto;
+    position: relative;
+    animation: scaleIn 0.3s ease-out;
+}
+
+.checkmark::after {
+    content: '';
+    position: absolute;
+    left: 25px;
+    top: 40px;
+    width: 25px;
+    height: 5px;
+    background: #fff;
+    transform: rotate(45deg);
+    animation: checkmark 0.3s ease-out;
+}
+
+.checkmark::before {
+    content: '';
+    position: absolute;
+    left: 15px;
+    top: 30px;
+    width: 40px;
+    height: 5px;
+    background: #fff;
+    transform: rotate(-45deg);
+    animation: checkmark 0.4s ease-out;
+}
+
+.success-text {
+    color: #7f56d9;
+    font-size: 2.4rem;
+    margin-top: 20px;
+    opacity: 0;
+    animation: fadeInUp 0.5s ease-out 0.3s forwards;
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
+@keyframes checkmark {
+    from {
+        width: 0;
+        height: 0;
+    }
+    to {
+        width: 25px;
+        height: 5px;
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.success-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 999;
+}
+ */
+
+
+
+ /* Paper Animation Styles */
+
+.page {
+    position: absolute;
+    width: 70px;
+    height: 90px;
+    background-color: var(--mainColor1);
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    animation: scatter 3s ease-in-out forwards;
+    z-index: 1000;
+}
+
+.tear-left,
+.tear-right {
+    position: absolute;
+    width: 75px;
+    height: 200px;
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+.tear-left {
+    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
+    animation: tearLeft 2s ease-in-out forwards;
+}
+
+.tear-right {
+    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
+    animation: tearRight 2s ease-in-out forwards;
+}
+
+@keyframes scatter {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(var(--x), var(--y)) rotate(var(--rotate));
+        opacity: 0;
+    }
+}
+
+@keyframes tearLeft {
+    0% {
+        transform: translateX(0) rotate(0deg);
+    }
+    100% {
+        transform: translateX(-150px) rotate(-20deg);
+    }
+}
+
+@keyframes tearRight {
+    0% {
+        transform: translateX(0) rotate(0deg);
+    }
+    100% {
+        transform: translateX(150px) rotate(20deg);
+    }
+}
+
+.paper {
+    position: fixed;
+    pointer-events: none;
+    transform-origin: center center;
+    filter: blur(1px);
+    mix-blend-mode: screen;
+    background: white;
+    top: 0;
+    left: 0;
+}

static/css/profilepage.css

@@ -0,0 +1,654 @@
+:root {
+    --hprimary-color: #2c3e50;
+    --hsecondary-color: #1a2530;
+    --accent-color: #3498db;
+    --accent-hover: #2980b9;
+    --danger-color: #e74c3c;
+    --danger-hover: #c0392b;
+    --success-color: #2ecc71;
+    --warning-color: #f39c12;
+    --white: #ffffff;
+    --light-gray: #f5f5f5;
+    --gray: #95a5a6;
+    --yellow-color: #fcee0a;
+    --dark-gray: #7f8c8d;
+    --text-color: #2c3e50;
+    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    --transition-speed: 0.3s;
+}
+
+/* Profile Trigger */
+.profile-container {
+    position: relative;
+    margin-left: 20px;
+}
+
+.profile-trigger {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 50px;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-speed) ease;
+    color: var(--white);
+    text-decoration: none;
+}
+
+.profile-trigger:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.profile-trigger span {
+    margin-right: 8px;
+    font-weight: 500;
+}
+
+.profile-trigger i {
+    margin-left: 5px;
+    font-size: 12px;
+    transition: transform var(--transition-speed) ease;
+}
+
+.profile-trigger.active i {
+    transform: rotate(180deg);
+}
+
+.profile-pic {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--accent-color);
+    transition: all var(--transition-speed) ease;
+    margin-left: 8px;
+}
+
+.profile-pic:hover {
+    border-color: var(--accent-hover);
+    transform: scale(1.05);
+}
+
+/* Profile Dropdown */
+.profile-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(5px);
+    display: none;
+    z-index: 1000;
+    transition: opacity var(--transition-speed) ease;
+}
+
+/* Fix the transition variable */
+.profile-dropdown {
+    position: fixed; /* Change from relative to fixed */
+    top: 0;
+    right: -450px;
+    width: 450px;
+    height: 100vh; /* Use viewport height instead */
+    background: linear-gradient(145deg, var(--hprimary-color), var(--hsecondary-color));
+    color: var(--white);
+    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
+    transition: right var(--transition-speed) ease-in-out; /* Fix variable name */
+    z-index: 1001;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent-color) var(--hsecondary-color);
+}
+
+/* Prevent body scrolling when profile is open */
+body.profile-open {
+    overflow: hidden;
+}
+
+/* Show profile when active */
+.profile-dropdown.active {
+    right: 0;
+}
+
+.profile-overlay.active {
+    display: block;
+}
+
+/* Profile Header */
+.profile-header {
+    position: relative;
+    padding-bottom: 20px;
+    text-align: center;
+}
+
+.profile-cover-photo {
+    height: 120px;
+    background: linear-gradient(120deg,var(--yellow-color));
+    background-size: 300% 300%;
+    position: relative;
+}
+
+.profile-avatar-container {
+    position: relative;
+    margin-top: -50px;
+    display: inline-block;
+}
+
+#profileAvatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid var(--white);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    background: var(--white);
+    transition: all var(--transition-speed) ease;
+}
+
+.avatar-upload {
+    position: absolute;
+    bottom: 0;
+    right: 5px;
+    background: var(--accent-color);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+    transition: all var(--transition-speed) ease;
+}
+
+.avatar-upload:hover {
+    background: var(--accent-hover);
+    transform: scale(1.1);
+}
+
+.avatar-upload i {
+    color: var(--white);
+    font-size: 14px;
+}
+
+.avatar-upload input {
+    display: none;
+}
+
+#profileHeaderName {
+    margin: 15px 0 5px;
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.membership-status {
+    display: inline-block;
+    padding: 4px 12px;
+    background: rgba(243, 156, 18, 0.2);
+    border-radius: 20px;
+    font-size: 14px;
+    margin: 0;
+    color: var(--warning-color);
+}
+
+.membership-status i {
+    margin-right: 5px;
+}
+
+/* Tabs */
+.profile-tabs {
+    display: flex;
+    background: rgba(0, 0, 0, 0.2);
+    margin: 20px 0;
+    border-radius: 8px;
+    padding: 5px;
+}
+
+.tab-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 12px;
+    color: var(--white);
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: all var(--transition-speed) ease;
+}
+
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.tab-btn.active {
+    background: var(--accent-color);
+    color: var(--white);
+}
+
+.tab-content {
+    display: none;
+    padding: 0 20px;
+}
+
+.tab-content.active {
+    display: block;
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Profile Fields */
+.profile-field {
+    position: relative;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 15px 20px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    transition: all var(--transition-speed) ease;
+}
+
+.profile-field:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.profile-field.active {
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.profile-field label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--light-gray);
+}
+
+.profile-field label i {
+    margin-right: 8px;
+    color: var(--accent-color);
+}
+
+.profile-field input {
+    width: 100%;
+    padding: 12px 15px;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: var(--white);
+    font-size: 15px;
+    transition: all var(--transition-speed) ease;
+    font-family: inherit;
+}
+
+.profile-field input:focus {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: var(--accent-color);
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+}
+
+.profile-field input:disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+}
+
+.edit-icon {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+}
+
+.edit-icon:hover {
+    background: var(--accent-color);
+    transform: rotate(15deg);
+}
+
+.edit-icon i {
+    color: var(--white);
+    font-size: 12px;
+}
+
+.verification-badge {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    padding: 4px 10px;
+    background: rgba(46, 204, 113, 0.2);
+    color: var(--success-color);
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.verification-badge i {
+    margin-right: 4px;
+}
+
+/* Toggle Switches */
+.toggle-field {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    margin-bottom: 15px;
+    transition: all var(--transition-speed) ease;
+}
+
+.toggle-field:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.toggle-field span {
+    font-weight: 500;
+}
+
+.toggle-field span i {
+    margin-right: 8px;
+    color: var(--accent-color);
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 26px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: var(--accent-color);
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px var(--accent-color);
+}
+
+input:checked + .slider:before {
+    transform: translateX(24px);
+}
+
+/* Select Field */
+.select-field {
+    padding: 15px 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    margin-bottom: 15px;
+}
+
+.select-field label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+
+.select-field select {
+    width: 100%;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: var(--white);
+    appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px top 50%;
+}
+
+/* Activity Tab */
+.activity-summary {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+}
+
+.activity-stat {
+    flex: 1;
+    text-align: center;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    margin: 0 5px;
+    transition: all var(--transition-speed) ease;
+}
+
+.activity-stat:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-5px);
+}
+
+.activity-stat i {
+    font-size: 24px;
+    color: var(--accent-color);
+    margin-bottom: 8px;
+}
+
+.stat-value {
+    display: block;
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    display: block;
+    font-size: 12px;
+    color: var(--gray);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.section-title {
+    font-size: 18px;
+    margin: 20px 0 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Timeline */
+.timeline {
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 20px;
+}
+
+.timeline:before {
+    content: '';
+    position: absolute;
+    left: 7.5px;
+    top: 5px;
+    height: calc(100% - 10px);
+    width: 2px;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.timeline-item {
+    position: relative;
+    padding-bottom: 20px;
+}
+
+.timeline-dot {
+    position: absolute;
+    left: -30px;
+    top: 5px;
+    width: 15px;
+    height: 15px;
+    background: var(--accent-color);
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.timeline-content {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    transition: all var(--transition-speed) ease;
+}
+
+.timeline-content:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateX(5px);
+}
+
+.timeline-content h4 {
+    margin: 0 0 5px;
+    font-size: 16px;
+}
+
+.timeline-content p {
+    margin: 0 0 10px;
+    color: var(--light-gray);
+    font-size: 14px;
+}
+
+.timeline-date {
+    font-size: 12px;
+    color: var(--gray);
+}
+
+.timeline-date i {
+    margin-right: 5px;
+}
+
+/* Action Buttons */
+.action-buttons {
+    padding: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.save-btn, .logout-btn {
+    flex: 1;
+    padding: 14px;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.save-btn i, .logout-btn i {
+    margin-right: 8px;
+    font-size: 16px;
+}
+
+.save-btn {
+    background: var(--accent-color);
+    color: var(--white);
+}
+
+.save-btn:hover {
+    background: var(--accent-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.logout-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--danger-color);
+}
+
+.logout-btn:hover {
+    background: var(--danger-color);
+    color: var(--white);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom Scrollbar */
+.profile-dropdown::-webkit-scrollbar {
+    width: 6px;
+}
+
+.profile-dropdown::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.profile-dropdown::-webkit-scrollbar-thumb {
+    background: rgba(52, 152, 219, 0.5);
+    border-radius: 10px;
+}
+
+.profile-dropdown::-webkit-scrollbar-thumb:hover {
+    background: rgba(52, 152, 219, 0.8);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 600px) {
+    .profile-dropdown {
+        width: 100%;
+        right: -100%;
+    }
+    
+    .activity-summary {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .activity-stat {
+        margin: 0;
+    }
+}
+
+/* Animation for the dot pulse effect */
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.5; }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+.timeline-dot.pulse {
+    animation: pulse 2s infinite;
+}
+

static/js/.env

@@ -0,0 +1 @@
+MONGO_URL= "mongodb+srv://darahasviit:<IrYaA4lePAABb0e7>@paperlens.q42bk.mongodb.net/"

static/js/gra.js

@@ -0,0 +1,1080 @@
+// Initialization
+let svg = d3.select("#container").append("svg")
+    .attr("width", "100%")
+    .attr("height", "100%"),
+    width = window.innerWidth,
+    height = window.innerHeight,
+    mainGroup = svg.append("g").attr("class", "main-container"),
+    simulation = null,
+    linkDistance = 80,
+    chargeStrength = -120,
+    gravityStrength = 0.1;
+
+// Size scaling controls
+let mainNodeScale = 1.0;    // Scale factor for main paper nodes
+let bridgeNodeScale = 1.0;  // Scale factor for bridge paper nodes
+let normalNodeScale = 1.0;  // Scale factor for normal nodes (cited/referenced)
+
+// Keep track of the original data for reference
+let originalData = null;
+let selectedNode = null;
+let nodes = [], links = [];
+    
+// Define arrow markers for directed links
+svg.append("defs").append("marker")
+    .attr("id", "arrow")
+    .attr("viewBox", "0 -5 10 10")
+    .attr("refX", 20)
+    .attr("refY", 0)
+    .attr("markerWidth", 6)
+    .attr("markerHeight", 6)
+    .attr("orient", "auto")
+    .append("path")
+    .attr("d", "M0,-5L10,0L0,5")
+    .attr("fill", "#999");
+
+// Define star shape for main papers that are bridges
+svg.append("defs")
+    .append("path")
+    .attr("id", "star")
+    .attr("d", d3.symbol().type(d3.symbolStar).size(300)());
+
+// Performance optimization: Set up requestAnimationFrame for simulation updates
+let rafId = null;
+let isSimulationRunning = false;
+
+function startSimulationLoop() {
+    if (!isSimulationRunning && simulation) {
+        isSimulationRunning = true;
+        rafId = requestAnimationFrame(simulationTick);
+    }
+}
+
+function stopSimulationLoop() {
+    isSimulationRunning = false;
+    if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+    }
+}
+
+// Optimized tick function using requestAnimationFrame
+function simulationTick() {
+    if (isSimulationRunning && simulation && simulation.alpha() > 0.001) {
+        simulation.tick();
+        updateVisualElements();
+        rafId = requestAnimationFrame(simulationTick);
+    } else {
+        stopSimulationLoop();
+    }
+}
+
+// Update visual elements without recalculating forces
+function updateVisualElements() {
+    // Performance optimization: Use d3.select once and then update directly
+    const linkElements = mainGroup.selectAll(".link");
+    const nodeElements = mainGroup.selectAll(".node");
+    
+    // Update links - faster than using attr for each property separately
+    linkElements.each(function(d) {
+        d3.select(this)
+            .attr("x1", d.source.x)
+            .attr("y1", d.source.y)
+            .attr("x2", d.target.x)
+            .attr("y2", d.target.y);
+    });
+    
+    // Update nodes - faster transform operation
+    nodeElements.attr("transform", d => `translate(${d.x}, ${d.y})`);
+}
+
+// Debounce function to improve performance
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}
+
+// Cache for node radius calculations
+const nodeRadiusCache = new Map();
+
+// Event listeners for controls - optimized with debouncing
+d3.select("#linkDistanceSlider").on("input", debounce(function() {
+    linkDistance = +this.value;
+    d3.select("#linkDistanceValue").text(linkDistance);
+    if (simulation) {
+        simulation.force("link").distance(linkDistance);
+        simulation.alpha(0.3).restart();
+        startSimulationLoop();
+    }
+}, 50));
+
+d3.select("#chargeSlider").on("input", debounce(function() {
+    chargeStrength = +this.value;
+    d3.select("#chargeValue").text(chargeStrength);
+    if (simulation) {
+        simulation.force("charge").strength(chargeStrength);
+        simulation.alpha(0.3).restart();
+        startSimulationLoop();
+    }
+}, 50));
+
+d3.select("#gravitySlider").on("input", debounce(function() {
+    gravityStrength = +this.value;
+    d3.select("#gravityValue").text(gravityStrength);
+    if (simulation) {
+        simulation.force("gravity", d3.forceRadial(0, width / 2, height / 2).strength(gravityStrength));
+        simulation.alpha(0.3).restart();
+        startSimulationLoop();
+    }
+}, 50));
+
+// Paper details panel controls
+d3.select("#closePanelButton").on("click", function() {
+    closeDetailsPanel();
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Time period tracking
+let allPapers = []; // Store all papers from API
+let currentTimeIndex = 0;
+let timeChunks = []; // Will store our time chunks once we process the data
+let isLoadingTimeChunk = false;
+
+// New time navigation event listeners
+d3.select("#prevTimeButton").on("click", function() {
+    if (currentTimeIndex > 0 && !isLoadingTimeChunk) {
+        currentTimeIndex--;
+        loadTimeChunk(currentTimeIndex);
+        updateTimeControls();
+    }
+});
+
+d3.select("#nextTimeButton").on("click", function() {
+    if (currentTimeIndex < timeChunks.length - 1 && !isLoadingTimeChunk) {
+        currentTimeIndex++;
+        loadTimeChunk(currentTimeIndex);
+        updateTimeControls();
+    }
+});
+
+d3.select("#timeSlider").on("input", function() {
+    if (!isLoadingTimeChunk) {
+        currentTimeIndex = +this.value;
+        loadTimeChunk(currentTimeIndex);
+        updateTimeControls();
+    }
+});
+
+// Function to update time navigation controls
+function updateTimeControls() {
+    // Update button states
+    d3.select("#prevTimeButton").property("disabled", currentTimeIndex === 0);
+    d3.select("#nextTimeButton").property("disabled", currentTimeIndex === timeChunks.length - 1);
+    
+    // Update time slider
+    d3.select("#timeSlider")
+        .property("value", currentTimeIndex)
+        .property("max", timeChunks.length - 1);
+    
+    // Update time period indicator
+    if (timeChunks.length > 0) {
+        const currentChunk = timeChunks[currentTimeIndex];
+        d3.select("#currentTimePeriod")
+            .text(`${formatDate(currentChunk.startDate)} - ${formatDate(currentChunk.endDate)}`);
+        
+        // Update start and end labels for the entire range
+        if (timeChunks.length > 0) {
+            d3.select("#startTimeLabel").text(formatDate(timeChunks[0].startDate));
+            d3.select("#endTimeLabel").text(formatDate(timeChunks[timeChunks.length - 1].endDate));
+        }
+    }
+}
+
+
+
+// Function to close the details panel
+function closeDetailsPanel() {
+    d3.select("#paperDetailsPanel").style("display", "none");
+    
+    // Deselect any selected node
+    if (selectedNode) {
+        d3.selectAll(".node").classed("selected", false);
+        selectedNode = null;
+    }
+}
+
+// Function to update node sizes when scale sliders change - optimized
+function updateNodeSizes() {
+    if (!simulation) return;
+    
+    // Performance optimization: Batch DOM updates
+    // Create a temporary object to store updates
+    const updates = [];
+    
+    // Prepare all updates without touching the DOM
+    mainGroup.selectAll(".node").each(function(d) {
+        const element = d3.select(this);
+        const radius = getNodeRadius(d);
+        
+        updates.push({
+            element,
+            d,
+            radius
+        });
+    });
+    
+    // Now apply all updates in a batch
+    updates.forEach(update => {
+        const { element, d, radius } = update;
+        
+        if (d.type === 'main' && d.isBridge) {
+            // Main bridge papers are stars - scale the star symbol
+            const starSize = radius * radius * 3;
+            element.select("path")
+                .attr("d", d3.symbol().type(d3.symbolStar).size(starSize)());
+        } else if (d.isBridge) {
+            // Other bridge papers remain diamonds
+            element.select("rect")
+                .attr("width", radius * 2)
+                .attr("height", radius * 2)
+                .attr("transform", `rotate(45) translate(${-radius}, ${-radius})`);
+        } else {
+            // Regular papers stay as circles
+            element.select("circle")
+                .attr("r", radius);
+        }
+    });
+    
+    // Update the collision detection radius
+    simulation.force("collide").radius(d => getNodeRadius(d) * 1.5);
+    
+    // Use a lower alpha value to make the transition smoother
+    simulation.alpha(0.1).restart();
+    startSimulationLoop();
+}
+
+// Debounced version of updateNodeSizes for better performance
+const debouncedUpdateNodeSizes = debounce(updateNodeSizes, 200);
+
+// Add slider event listeners for node scaling with debouncing
+d3.select("#mainNodeScaleSlider").on("input", debounce(function() {
+    mainNodeScale = +this.value;
+    d3.select("#mainNodeScaleValue").text(mainNodeScale.toFixed(1));
+    nodeRadiusCache.clear(); // Clear cache when scale changes
+    debouncedUpdateNodeSizes();
+}, 100));
+
+d3.select("#bridgeNodeScaleSlider").on("input", debounce(function() {
+    bridgeNodeScale = +this.value;
+    d3.select("#bridgeNodeScaleValue").text(bridgeNodeScale.toFixed(1));
+    nodeRadiusCache.clear(); // Clear cache when scale changes
+    debouncedUpdateNodeSizes();
+}, 100));
+
+d3.select("#normalNodeScaleSlider").on("input", debounce(function() {
+    normalNodeScale = +this.value;
+    d3.select("#normalNodeScaleValue").text(normalNodeScale.toFixed(1));
+    nodeRadiusCache.clear(); // Clear cache when scale changes
+    debouncedUpdateNodeSizes();
+}, 100));
+
+d3.select("#resetButton").on("click", function() {
+    if (simulation) {
+        // Reset node positions to random positions near the center
+        simulation.nodes().forEach(node => {
+            node.x = width / 2 + (Math.random() - 0.5) * 100;
+            node.y = height / 2 + (Math.random() - 0.5) * 100;
+            node.vx = 0;
+            node.vy = 0;
+        });
+        simulation.alpha(1).restart();
+        startSimulationLoop();
+    }
+});
+
+// Create zoom behavior early to avoid recreating it
+const zoom = d3.zoom()
+    .scaleExtent([0.1, 8])
+    .on("zoom", (event) => {
+        // Performance optimization: Use transform attribute instead of attr
+        mainGroup.attr("transform", event.transform);
+    });
+
+svg.call(zoom);
+
+d3.select("#centerViewButton").on("click", function() {
+    // Reset zoom and center the view
+    svg.transition()
+       .duration(750)
+       .call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2).scale(1));
+});
+
+// Optimize resize handler with debounce
+const handleResize = debounce(function() {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    svg.attr("width", width).attr("height", height);
+    if (simulation) {
+        simulation.force("center", d3.forceCenter(width / 2, height / 2));
+        simulation.alpha(0.3).restart();
+        startSimulationLoop();
+    }
+}, 100);
+
+// Handle window resize
+window.addEventListener('resize', handleResize);
+
+// File input handling
+async function loadCitationData() {
+    const progressBar = d3.select("#loadingProgress");
+    const statusMessage = d3.select("#statusMessage");
+
+    try {
+        statusMessage.text("Fetching citation data...");
+        progressBar.style("width", "0%");
+
+        // Simulate progress updates
+        const interval = setInterval(() => {
+            const currentWidth = parseFloat(progressBar.style("width")) || 0;
+            if (currentWidth < 90) {
+                progressBar.style("width", `${currentWidth + 10}%`);
+            }
+        }, 200);
+
+        // // Fetch all data from the backend
+        // const response = await fetch('http://localhost:8000/citation-data?userId=abc123&topic=ai in phishing&year=2023');
+        // if (!response.ok) {
+        //     throw new Error(`Failed to load data: ${response.status}`);
+        // }
+
+        // const data = await response.json();
+        clearInterval(interval);
+        progressBar.style("width", "100%");
+        
+        statusMessage.text("Processing data...");
+
+        const dataFromBackend = window.__INITIAL_DATA__;
+       
+
+        console.log(dataFromBackend , " here data")
+        allPapers=dataFromBackend
+        
+        // Process papers into time chunks (3-month periods)
+        processTimeChunks(allPapers);
+        
+        // Load the first time chunk
+        if (timeChunks.length > 0) {
+            loadTimeChunk(0);
+            updateTimeControls();
+        }
+        
+        statusMessage.text("Citation network loaded successfully!");
+        setTimeout(() => {
+            progressBar.style("display", "none");
+            statusMessage.style("display", "none");
+            d3.select(".loading-section").style("display", "none");
+        }, 1000);
+        
+    } catch (error) {
+        console.error("Error loading citation data:", error);
+        statusMessage.text("Failed to load citation network.");
+        progressBar.style("width", "0%");
+    }
+}
+
+// Process papers into 3-month time chunks
+function processTimeChunks(papers) {
+    // Sort papers by publication date
+    papers.sort((a, b) => {
+        const dateA = a.publication_date ? new Date(a.publication_date) : new Date(0);
+        const dateB = b.publication_date ? new Date(b.publication_date) : new Date(0);
+        return dateA - dateB;
+    });
+    
+    // Find min and max dates
+    let minDate = new Date();
+    let maxDate = new Date(0);
+    
+    papers.forEach(paper => {
+        if (paper.publication_date) {
+            const date = new Date(paper.publication_date);
+            if (date < minDate) minDate = new Date(date);
+            if (date > maxDate) maxDate = new Date(date);
+        }
+    });
+    
+    // Create 3-month chunks
+    const chunks = [];
+    let currentStart = new Date(minDate);
+    
+    while (currentStart < maxDate) {
+        // Calculate end date (3 months later)
+        const endDate = new Date(currentStart);
+        endDate.setMonth(endDate.getMonth() + 3);
+        
+        // Create the chunk
+        chunks.push({
+            startDate: new Date(currentStart),
+            endDate: new Date(endDate),
+            papers: []
+        });
+        
+        // Move to next period
+        currentStart = new Date(endDate);
+    }
+    
+    // Assign papers to chunks
+    papers.forEach(paper => {
+        if (paper.publication_date) {
+            const pubDate = new Date(paper.publication_date);
+            
+            for (let i = 0; i < chunks.length; i++) {
+                const chunk = chunks[i];
+                if (pubDate >= chunk.startDate && pubDate < chunk.endDate) {
+                    chunk.papers.push(paper);
+                    break;
+                }
+            }
+        }
+    });
+    
+    // Remove empty chunks
+    timeChunks = chunks.filter(chunk => chunk.papers.length > 0);
+    
+    // Update the slider max value
+    d3.select("#timeSlider").property("max", timeChunks.length - 1);
+}
+
+// Load a specific time chunk
+function loadTimeChunk(index) {
+    if (isLoadingTimeChunk || index < 0 || index >= timeChunks.length) return;
+    
+    isLoadingTimeChunk = true;
+    
+    // Show loading indicator
+    d3.select("#timeLoader").style("width", "0%");
+    
+    // Animate loading
+    const loadingInterval = setInterval(() => {
+        const currentWidth = parseFloat(d3.select("#timeLoader").style("width")) || 0;
+        if (currentWidth < 90) {
+            d3.select("#timeLoader").style("width", `${currentWidth + 10}%`);
+        }
+    }, 50);
+    
+    // Use setTimeout to allow the UI to update before processing
+    setTimeout(() => {
+        // Process the current chunk
+        const chunkData = timeChunks[index].papers;
+        processData(chunkData);
+        
+        // Complete loading
+        clearInterval(loadingInterval);
+        d3.select("#timeLoader").style("width", "100%");
+        
+        // Hide loader after transition
+        setTimeout(() => {
+            d3.select("#timeLoader").style("width", "0%");
+            isLoadingTimeChunk = false;
+        }, 500);
+        
+    }, 100);
+}
+
+
+
+document.addEventListener("DOMContentLoaded", function() {
+    loadCitationData();
+});
+
+function processData(data) {
+    // Stop any running simulation
+    if (simulation) {
+        simulation.stop();
+        stopSimulationLoop();
+    }
+
+    // Reset the SVG content but keep the main structure
+    mainGroup.selectAll("*").remove();
+    svg.select("defs").remove();
+    
+    // Close any open panels
+    closeDetailsPanel();
+    
+    // Redefine markers and star shape
+    svg.append("defs").append("marker")
+        .attr("id", "arrow")
+        .attr("viewBox", "0 -5 10 10")
+        .attr("refX", 20)
+        .attr("refY", 0)
+        .attr("markerWidth", 6)
+        .attr("markerHeight", 6)
+        .attr("orient", "auto")
+        .append("path")
+        .attr("d", "M0,-5L10,0L0,5")
+        .attr("fill", "#999");
+    
+    svg.append("defs")
+        .append("path")
+        .attr("id", "star")
+        .attr("d", d3.symbol().type(d3.symbolStar).size(300)());
+    
+    // Clear cache when loading new data
+    nodeRadiusCache.clear();
+    
+    // Process the data to create nodes and links
+    nodes = [];
+    links = [];
+    const nodeMap = new Map();
+    
+    // Count occurrences of each paper ID to identify bridge papers
+    const paperOccurrences = new Map();
+    
+    // Performance optimization: Pre-allocate array size when possible
+    // First pass: Count occurrences of papers in references and citations
+    data.forEach(paper => {
+        // Count the main paper
+        incrementPaperCount(paperOccurrences, paper.id);
+        
+        // Count referenced papers
+        if (paper.referenced_works) {
+            paper.referenced_works.forEach(ref => {
+                incrementPaperCount(paperOccurrences, ref);
+            });
+        }
+        
+        // Count citing papers
+        if (paper.cited_by_ids) {
+            paper.cited_by_ids.forEach(cite => {
+                incrementPaperCount(paperOccurrences, cite);
+            });
+        }
+    });
+    
+    // Performance optimization: Estimate total node and link count
+    let estimatedNodeCount = data.length;
+    let estimatedLinkCount = 0;
+    
+    data.forEach(paper => {
+        if (paper.referenced_works) estimatedNodeCount += paper.referenced_works.length;
+        if (paper.cited_by_ids) estimatedNodeCount += paper.cited_by_ids.length;
+        
+        if (paper.referenced_works) estimatedLinkCount += paper.referenced_works.length;
+        if (paper.cited_by_ids) estimatedLinkCount += paper.cited_by_ids.length;
+    });
+    
+    // Pre-allocate arrays
+    nodes = new Array(estimatedNodeCount);
+    links = new Array(estimatedLinkCount);
+    let nodeIndex = 0;
+    let linkIndex = 0;
+    
+    // Second pass: Create nodes and links
+    data.forEach(paper => {
+        // Add main paper node if not already in the map
+        if (!nodeMap.has(paper.id)) {
+            const node = {
+                id: paper.id,
+                title: paper.title || "Unknown Title",
+                cited_by_count: paper.cited_by_count || 0,
+                concepts: paper.concepts || [],
+                publication_date: paper.publication_date || null,  // Add publication date
+                referenced_works: paper.referenced_works || [],
+                cited_by_ids: paper.cited_by_ids || [],
+                type: 'main',
+                isBridge: paperOccurrences.get(paper.id) > 1,
+                // Start main papers near the center
+                x: width / 2 + (Math.random() - 0.5) * 100,
+                y: height / 2 + (Math.random() - 0.5) * 100
+            };
+            nodes[nodeIndex++] = node;
+            nodeMap.set(paper.id, node);
+        }
+        
+        // Add referenced paper nodes and create links
+        if (paper.referenced_works) {
+            paper.referenced_works.forEach(ref => {
+                if (!nodeMap.has(ref)) {
+                    const node = {
+                        id: ref,
+                        title: "Referenced Paper",
+                        type: 'reference',
+                        isBridge: paperOccurrences.get(ref) > 1,
+                        // Start near their respective main paper
+                        x: nodeMap.get(paper.id).x + (Math.random() - 0.5) * 50,
+                        y: nodeMap.get(paper.id).y + (Math.random() - 0.5) * 50
+                    };
+                    nodes[nodeIndex++] = node;
+                    nodeMap.set(ref, node);
+                }
+                
+                links[linkIndex++] = {
+                    source: paper.id,
+                    target: ref,
+                    direction: 'outgoing'
+                };
+            });
+        }
+        
+        // Add citing paper nodes and create links
+        if (paper.cited_by_ids) {
+            paper.cited_by_ids.forEach(cite => {
+                if (!nodeMap.has(cite)) {
+                    const node = {
+                        id: cite,
+                        title: "Citing Paper",
+                        type: 'citation',
+                        isBridge: paperOccurrences.get(cite) > 1,
+                        // Start near their respective main paper
+                        x: nodeMap.get(paper.id).x + (Math.random() - 0.5) * 50,
+                        y: nodeMap.get(paper.id).y + (Math.random() - 0.5) * 50
+                    };
+                    nodes[nodeIndex++] = node;
+                    nodeMap.set(cite, node);
+                }
+                
+                links[linkIndex++] = {
+                    source: cite,
+                    target: paper.id,
+                    direction: 'incoming'
+                };
+            });
+        }
+    });
+    
+    // Trim arrays to actual size
+    nodes = nodes.slice(0, nodeIndex);
+    links = links.slice(0, linkIndex);
+    
+    createVisualization(nodes, links);
+}
+
+function incrementPaperCount(map, id) {
+    if (!map.has(id)) {
+        map.set(id, 1);
+    } else {
+        map.set(id, map.get(id) + 1);
+    }
+}
+
+function createVisualization(nodes, links) {
+    // Performance optimization: Use quadtree for faster force calculation
+    simulation = d3.forceSimulation(nodes)
+        .force("link", d3.forceLink(links).id(d => d.id).distance(linkDistance))
+        .force("charge", d3.forceManyBody().strength(chargeStrength).theta(0.8))  // Higher theta = better performance
+        .force("center", d3.forceCenter(width / 2, height / 2))
+        .force("gravity", d3.forceRadial(0, width / 2, height / 2).strength(gravityStrength))
+        // Add collision detection to prevent node overlap
+        .force("collide", d3.forceCollide().radius(d => getNodeRadius(d) * 1.5).strength(0.7));  // Reduced strength for better performance
+
+    // Performance: Lower alpha decay for smoother but faster convergence
+    simulation.alphaDecay(0.02);
+    
+    // Performance: Remove automatic ticking and handle it via requestAnimationFrame
+    simulation.on("tick", null);
+    
+    // Create link group first (rendered below nodes)
+    const linkGroup = mainGroup.append("g").attr("class", "links");
+    
+    // Performance optimization: Use object pooling for links
+    const link = linkGroup.selectAll("line")
+        .data(links)
+        .enter().append("line")
+        .attr("class", "link")
+        .attr("stroke", "#999")
+        .attr("stroke-width", 1)
+        .attr("marker-end", "url(#arrow)");
+    
+    // Create node group
+    const nodeGroup = mainGroup.append("g").attr("class", "nodes");
+    
+    // Create a more efficient node container
+    const node = nodeGroup.selectAll(".node")
+        .data(nodes)
+        .enter().append("g")
+        .attr("class", "node")
+        .call(d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended)
+        )
+        .on("click", nodeClicked);
+    
+    // Performance optimization: Batch DOM operations
+    // Add different shapes based on node type
+    node.each(function(d) {
+        const element = d3.select(this);
+        const radius = getNodeRadius(d);
+        
+        if (d.type === 'main' && d.isBridge) {
+            // Main bridge papers are stars
+            const starSize = radius * radius * 3;
+            element.append("path")
+                .attr("d", d3.symbol().type(d3.symbolStar).size(starSize)())
+                .attr("fill", "#4285f4");
+        } else if (d.isBridge) {
+            // Bridge papers are diamonds
+            element.append("rect")
+                .attr("width", radius * 2)
+                .attr("height", radius * 2)
+                .attr("transform", `rotate(45) translate(${-radius}, ${-radius})`)
+                .attr("fill", "#fbbc05");
+        } else if (d.type === 'main') {
+            // Main papers are blue circles
+            element.append("circle")
+                .attr("r", radius)
+                .attr("fill", "#4285f4");
+        } else if (d.type === 'reference') {
+            // Referenced papers are green circles
+            element.append("circle")
+                .attr("r", radius)
+                .attr("fill", "#34a853");
+        } else if (d.type === 'citation') {
+            // Citing papers are red circles
+            element.append("circle")
+                .attr("r", radius)
+                .attr("fill", "#ea4335");
+        } else {
+            // Default case - grey circles
+            element.append("circle")
+                .attr("r", radius)
+                .attr("fill", "#999");
+        }
+    });
+    
+    // Optimized tooltip handling
+    const tooltip = d3.select(".tooltip");
+    
+    // Performance optimization: Use event delegation
+  // Update inside the mouseoverEvent handler in the createVisualization function
+nodeGroup.on("mouseover", function(event) {
+    const target = event.target;
+    if (target.closest(".node")) {
+        const d = d3.select(target.closest(".node")).datum();
+        
+        // Prepare tooltip content
+        let tooltipContent = `<strong>${d.title}</strong>`;
+        
+        // Add publication date if available
+        if (d.publication_date) {
+            tooltipContent += `<br>Published: ${formatDate(d.publication_date)}`;
+        }
+        
+        // Add citation count if available
+        if (d.cited_by_count) {
+            tooltipContent += `<br>Citations: ${d.cited_by_count}`;
+        }
+        
+        // Add concepts if available
+        if (d.concepts && d.concepts.length > 0) {
+            tooltipContent += `<br>Concepts: ${formatConcepts(d.concepts)}`;
+        }
+        
+        // Add bridge paper info if applicable
+        if (d.isBridge) {
+            tooltipContent += "<br><em>Bridge Paper</em>";
+        }
+        
+        // Show tooltip with enhanced paper information
+        tooltip.style("display", "block")
+            .style("left", (event.pageX + 15) + "px")
+            .style("top", (event.pageY - 30) + "px")
+            .html(tooltipContent);
+    }
+})
+.on("mouseout", function(event) {
+        const target = event.target;
+        if (target.closest(".node")) {
+            tooltip.style("display", "none");
+        }
+    })
+    .on("mousemove", function(event) {
+        tooltip.style("left", (event.pageX + 15) + "px")
+            .style("top", (event.pageY - 30) + "px");
+    });
+    
+    // Start simulation loop using requestAnimationFrame
+    startSimulationLoop();
+}
+
+// Calculate node radius based on node type and importance
+function getNodeRadius(d) {
+    // Return from cache if already calculated
+    if (nodeRadiusCache.has(d.id)) {
+        return nodeRadiusCache.get(d.id);
+    }
+    
+    let radius;
+    
+    if (d.type === 'main') {
+        // Main papers: size based on citation count and scaled by mainNodeScale
+        const baseCitationSize = Math.max(5, Math.min(15, 5 + Math.log(d.cited_by_count + 1)));
+        radius = baseCitationSize * mainNodeScale;
+    } else if (d.isBridge) {
+        // Bridge papers: slightly larger than normal papers and scaled by bridgeNodeScale
+        radius = 6 * bridgeNodeScale;
+    } else {
+        // Referenced or citing papers: normal size and scaled by normalNodeScale
+        radius = 4 * normalNodeScale;
+    }
+    
+    // Cache the result
+    nodeRadiusCache.set(d.id, radius);
+    return radius;
+}
+
+// Drag functions for nodes - optimized
+function dragstarted(event, d) {
+    stopSimulationLoop(); // Stop animation loop during drag
+    if (!event.active) simulation.alphaTarget(0.3);
+    d.fx = d.x;
+    d.fy = d.y;
+}
+
+function dragged(event, d) {
+    d.fx = event.x;
+    d.fy = event.y;
+    
+    // Update position immediately for smoother dragging
+    d3.select(event.sourceEvent.target.closest(".node"))
+        .attr("transform", `translate(${d.fx}, ${d.fy})`);
+    
+    // Update connected links for immediate feedback
+    mainGroup.selectAll(".link").each(function(linkData) {
+        if (linkData.source === d || linkData.target === d) {
+            d3.select(this)
+                .attr("x1", linkData.source.x)
+                .attr("y1", linkData.source.y)
+                .attr("x2", linkData.target.x)
+                .attr("y2", linkData.target.y);
+        }
+    });
+}
+
+function dragended(event, d) {
+    if (!event.active) simulation.alphaTarget(0);
+    // Comment these out to keep the node fixed at the position where it was dragged
+    // d.fx = null;
+    // d.fy = null;
+    
+    // Restart simulation loop
+    startSimulationLoop();
+}
+
+// Helper function to format publication date
+function formatDate(dateString) {
+    if (!dateString) return "Unknown";
+    
+    try {
+        const date = new Date(dateString);
+        // Check if date is valid
+        if (isNaN(date.getTime())) return dateString;
+        
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    } catch (e) {
+        return dateString;
+    }
+}
+
+// Helper function to format concepts
+function formatConcepts(concepts) {
+    if (!concepts || concepts.length === 0) return "None";
+    
+    // Handle both string concepts and concept objects
+    const conceptNames = concepts.map(concept => {
+        if (typeof concept === 'string') return concept;
+        return concept.display_name || concept.name || "Unknown concept";
+    });
+    
+    // Return first 3 concepts to keep tooltip compact
+    if (conceptNames.length > 3) {
+        return conceptNames.slice(0, 3).join(", ") + ` +${conceptNames.length - 3} more`;
+    }
+    
+    return conceptNames.join(", ");
+}
+
+// Handle node click to show paper details - optimized
+// Update the nodeClicked function
+function nodeClicked(event, d) {
+    event.stopPropagation(); // Prevent bubbling to SVG
+    
+    // Set as selected node
+    selectedNode = d;
+    
+    // Update visual selection - optimized to only change classes for relevant nodes
+    d3.selectAll(".node.selected").classed("selected", false);
+    d3.select(this).classed("selected", true);
+    
+    // Get paper details from the original data if it's a main paper
+    let paperDetails = d;
+    if (d.type === 'main' && originalData) {
+        paperDetails = originalData.find(paper => paper.id === d.id) || d;
+    }
+    
+    // Update paper info panel - batch DOM updates
+    const paperInfoUpdates = {
+        "#paperTitle": paperDetails.title || "Unknown Title",
+        "#paperCitations": paperDetails.cited_by_count !== undefined ? `Citations: ${paperDetails.cited_by_count}` : ""
+    };
+    
+    // Add publication date if available
+    if (paperDetails.publication_date) {
+        paperInfoUpdates["#paperType"] = `${d.type === 'main' ? "Main Paper" : 
+            d.type === 'reference' ? "Referenced Paper" : 
+            d.type === 'citation' ? "Citing Paper" : "Paper"}${d.isBridge ? " (Bridge)" : ""} · Published: ${formatDate(paperDetails.publication_date)}`;
+    } else {
+        // Set paper type without date
+        let typeText = "";
+        if (d.type === 'main') typeText = "Main Paper";
+        else if (d.type === 'reference') typeText = "Referenced Paper";
+        else if (d.type === 'citation') typeText = "Citing Paper";
+        
+        if (d.isBridge) typeText += " (Bridge)";
+        paperInfoUpdates["#paperType"] = typeText;
+    }
+    
+    // Apply all text updates in one batch
+    Object.entries(paperInfoUpdates).forEach(([selector, text]) => {
+        d3.select(selector).text(text);
+    });
+    
+    // Set concepts if available - use document fragment for better performance
+    const conceptsDiv = d3.select("#paperConcepts");
+    conceptsDiv.html("");
+    
+    if (paperDetails.concepts && paperDetails.concepts.length > 0) {
+        // Performance: Create document fragment for batch append
+        const fragment = document.createDocumentFragment();
+        
+        // Add a small label for concepts
+        const conceptLabel = document.createElement("div");
+        conceptLabel.className = "concept-label";
+        conceptLabel.textContent = "Concepts:";
+        fragment.appendChild(conceptLabel);
+        
+        paperDetails.concepts.forEach(concept => {
+            const span = document.createElement("span");
+            span.className = "concept-tag";
+            span.textContent = typeof concept === 'string' ? concept : (concept.display_name || concept.name || "Unknown");
+            fragment.appendChild(span);
+        });
+        
+        conceptsDiv.node().appendChild(fragment);
+    }
+    
+    // Set OpenAlex link
+    d3.select("#openAlexLink")
+        .attr("href", `${d.id}`);
+    
+    // Performance optimization: Batch DOM operations for related papers lists
+    // Use setTimeout to defer heavy operations and keep UI responsive
+    setTimeout(() => {
+        populateRelatedPapersList(paperDetails, "citing");
+        populateRelatedPapersList(paperDetails, "referenced");
+        
+        // Show the panel
+        d3.select("#paperDetailsPanel").style("display", "block");
+    }, 0);
+}
+
+// Populate the lists of citing and referenced papers - optimized
+function populateRelatedPapersList(paperDetails, listType) {
+    const listElement = listType === "citing" ? 
+        d3.select("#citingPapersList") : 
+        d3.select("#referencedPapersList");
+    
+    listElement.html("");
+    
+    const paperIds = listType === "citing" ? 
+        paperDetails.cited_by_ids : 
+        paperDetails.referenced_works;
+    
+    if (!paperIds || paperIds.length === 0) {
+        listElement.append("li")
+            .text("No papers available");
+        return;
+    }
+    
+    // Performance optimization: Use document fragment for batch DOM operations
+    const fragment = document.createDocumentFragment();
+    
+    // Get paper details if available in original data
+    paperIds.forEach(id => {
+        const li = document.createElement("li");
+        
+        // Try to find paper details in original data
+        let paperInfo = null;
+        if (originalData) {
+            paperInfo = originalData.find(paper => paper.id === id);
+        }
+        
+        const a = document.createElement("a");
+        if (paperInfo) {
+            a.href = "#";
+            a.setAttribute("data-id", id);
+            a.textContent = paperInfo.title || id;
+            a.addEventListener("click", function(event) {
+                event.preventDefault();
+                const paperId = this.getAttribute("data-id");
+                const nodeElement = mainGroup.selectAll(".node").filter(d => d.id === paperId);
+                if (!nodeElement.empty()) {
+                    nodeClicked.call(nodeElement.node(), event, nodeElement.datum());
+                }
+            });
+        } else {
+            a.href = `${id}`;
+            a.target = "_blank";
+            a.textContent = id;
+        }
+        
+        li.appendChild(a);
+        fragment.appendChild(li);
+    });
+    
+    listElement.node().appendChild(fragment);
+}
+
+// Close details panel when clicking on the background
+svg.on("click", function() {
+    closeDetailsPanel();
+});
+
+// Clean up resources when window is closed or component is unmounted
+window.addEventListener('beforeunload', function() {
+    if (simulation) {
+        simulation.stop();
+    }
+    stopSimulationLoop();
+});
+
+// Load sample data or wait for user upload
+document.addEventListener("DOMContentLoaded", function() {
+    // Optional: Load sample data automatically
+    // fetch('sample_data.json')
+    //    .then(response => response.json())
+    //    .then(data => {
+    //        originalData = data;
+    //        processData(data);
+    //    })
+    //    .catch(error => console.error('Error loading sample data:', error));
+});

static/js/home.js

@@ -0,0 +1,1627 @@
+const getLocalUser = localStorage.getItem("username");
+if (getLocalUser) {
+  document.getElementById("userProfile").innerHTML = `${getLocalUser}`;
+} else {
+  document.getElementById("userProfile").innerHTML = "Hei";
+}
+
+function populateYearDropdown(startYear, endYear) {
+  const dropdown = document.getElementById('year-filter');
+
+  // Clear existing options (except the first default option)
+  while (dropdown.options.length > 1) {
+    dropdown.remove(1);
+  }
+
+  // Add years dynamically
+  for (let year = endYear; year >= startYear; year--) {
+    const option = document.createElement('option');
+    option.value = year;
+    option.textContent = year;
+    dropdown.appendChild(option);
+  }
+}
+
+// Populate the dropdown with years from 1900 to 2025
+populateYearDropdown(1900, 2025);
+
+const profileContainer = document.getElementById("profileContainer");
+const signInBtn = document.getElementById("signInBtn");
+const storedUsername = localStorage.getItem("username");
+const storedUserId = localStorage.getItem("userId")
+
+if (storedUsername) {
+  profileContainer.style.display = "flex";
+  signInBtn.style.display = "none";
+} else {
+  profileContainer.style.display = "none";
+  signInBtn.style.display = "block";
+}
+
+// Elements for profile dropdown and overlay
+const userProfile = document.getElementById("userProfile");
+const profileDropdown = document.getElementById("profileDropdown");
+const profileOverlay = document.getElementById("profileOverlay");
+const logoutBtn = document.getElementById("logoutBtn");
+
+// Toggle dropdown on clicking profile trigger
+userProfile.addEventListener("click", () => {
+  profileDropdown.classList.add("active");
+  profileOverlay.classList.add("active");
+});
+
+// Close dropdown when clicking outside
+profileOverlay.addEventListener("click", () => {
+  profileDropdown.classList.remove("active");
+  profileOverlay.classList.remove("active");
+});
+
+async function saveSearchToFirebase(query, year, feature) {
+  const auth = firebase.auth();
+  const db = firebase.firestore();
+  const user = auth.currentUser;
+  if (!user) {
+    console.log("User not logged in, cannot save search history");
+    return;
+  }
+  
+  try {
+    // Create search activity object
+    const searchData = {
+      type: "search",
+      query: query,
+      year: year || "All Years",
+      feature: feature,
+      timestamp: firebase.firestore.FieldValue.serverTimestamp()
+    };
+    
+    // Add to Firestore
+    await db.collection("users")
+      .doc(user.uid)
+      .collection("activities")
+      .add(searchData);
+      
+    console.log("Search activity saved successfully");
+  } catch (error) {
+    console.error("Error saving search activity:", error);
+  }
+}
+
+
+document.addEventListener("DOMContentLoaded", async () => {
+  // Input fields for personal info
+  const profileName = document.getElementById("profileName");
+  const profileEmail = document.getElementById("profileEmail");
+  const profilePhone = document.getElementById("profilePhone");
+  const profileAddress = document.getElementById("profileAddress");
+  const profileProfession = document.getElementById("profileProfession");
+  const profileHeaderName = document.getElementById("profileHeaderName");
+
+  // Firebase Auth & Firestore setup
+  const auth = firebase.auth();
+  const db = firebase.firestore();
+
+  auth.onAuthStateChanged(async (user) => {
+    if (user) {
+      const userId = user.uid;
+
+      // Load saved personal info from localStorage
+      profileName.value = localStorage.getItem("username") || "";
+      profilePhone.value = localStorage.getItem("phone") || "";
+      profileAddress.value = localStorage.getItem("address") || "";
+      profileProfession.value = localStorage.getItem("profession") || "";
+      profileHeaderName.innerHTML = `Welcome, ${storedUsername}`;
+
+
+
+      try {
+        // Fetch additional user details from Firestore
+        const userDoc = await db.collection("users").doc(userId).get();
+        if (userDoc.exists) {
+          const userData = userDoc.data();
+          if (!profileName.value) profileName.value = userData.name || "";
+          if (!profilePhone.value) profilePhone.value = userData.phone || "";
+          if (!profileAddress.value) profileAddress.value = userData.address || "";
+          if (!profileProfession.value) profileProfession.value = userData.profession || "";
+        }
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+      }
+    }
+  });
+
+  // Enable editing for profile fields
+  window.enableEdit = (fieldId) => {
+    const inputField = document.getElementById(fieldId);
+    inputField.removeAttribute("disabled");
+    inputField.focus();
+    inputField.addEventListener("blur", () => {
+      // When leaving, set back to readonly (or disabled if you prefer)
+      inputField.setAttribute("disabled", true);
+    });
+  };
+
+  // Tab switching for profile dropdown
+  const tabButtons = document.querySelectorAll(".tab-btn");
+  const tabContents = document.querySelectorAll(".tab-content");
+
+  tabButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const tab = btn.getAttribute("data-tab");
+      tabButtons.forEach((b) => b.classList.remove("active"));
+      tabContents.forEach((c) => c.classList.remove("active"));
+      btn.classList.add("active");
+      document.getElementById(`${tab}-tab`).classList.add("active");
+    });
+  });
+
+  // Avatar upload preview
+  const avatarUpload = document.getElementById("avatarUpload");
+  const profileAvatar = document.getElementById("profileAvatar");
+
+  if (avatarUpload) {
+    avatarUpload.addEventListener("change", (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          profileAvatar.src = event.target.result;
+          // (Optional) Save the avatar image to your storage if needed
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+  }
+
+  // Save profile details and preferences
+  const saveBtn = document.getElementById("saveBtn");
+  saveBtn.addEventListener("click", async () => {
+    const user = auth.currentUser;
+    if (!user) {
+      alert("No user logged in!");
+      return;
+    }
+    const userId = user.uid;
+
+    // Gather updated personal info
+    const updatedName = profileName.value.trim();
+    const updatedPhone = profilePhone.value.trim();
+    const updatedAddress = profileAddress.value.trim();
+    const updatedProfession = profileProfession.value.trim();
+
+    // Save personal info in localStorage
+    localStorage.setItem("username", updatedName);
+    localStorage.setItem("phone", updatedPhone);
+    localStorage.setItem("address", updatedAddress);
+    localStorage.setItem("profession", updatedProfession);
+
+    // Store personal info in Firestore
+    try {
+      await db.collection("users").doc(userId).set(
+        {
+          name: updatedName,
+          phone: updatedPhone,
+          address: updatedAddress,
+          profession: updatedProfession,
+          
+        },
+        { merge: true }
+      );
+      userProfile.textContent = updatedName; // Update navbar username
+      showPaperAlert(
+        "Successfully Updated!", 
+        "Profile Updation Status",
+        "fa-exclamation-circle", 
+        4000
+      );
+    } catch (error) {
+      console.error("Error updating profile:", error);
+      showPaperAlert(
+        "Error in Updation", 
+        "Profile Updation Status",
+        "fa-exclamation-circle", 
+        4000
+      );
+    }
+  });
+
+  // Logout functionality
+  logoutBtn.addEventListener("click", async () => {
+    try {
+      await auth.signOut();
+      localStorage.clear();
+      window.location.href = "/home";
+    } catch (error) {
+      console.error("Logout error:", error);
+    }
+  });
+});
+// Paper animation class
+class Paper {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.size = Math.random() * 15 + 5;
+    this.rotation = Math.random() * 360;
+    this.speedX = Math.random() * 3 - 1.5;
+    this.speedY = Math.random() * 3 - 1.5;
+    this.rotationSpeed = Math.random() * 2 - 1;
+    this.opacity = 1;
+    this.life = 100;
+    this.element = document.createElement('div');
+    this.element.className = 'paper';
+    this.element.style.width = `${this.size}px`;
+    this.element.style.height = `${this.size}px`;
+    this.element.style.left = `${this.x}px`;
+    this.element.style.top = `${this.y}px`;
+    this.element.style.transform = `rotate(${this.rotation}deg)`;
+    this.element.style.opacity = this.opacity;
+    document.body.appendChild(this.element);
+  }
+
+  update() {
+    this.life--;
+    this.x += this.speedX;
+    this.y += this.speedY;
+    this.rotation += this.rotationSpeed;
+    this.opacity = this.life / 100;
+    
+    this.element.style.left = `${this.x}px`;
+    this.element.style.top = `${this.y}px`;
+    this.element.style.transform = `rotate(${this.rotation}deg)`;
+    this.element.style.opacity = this.opacity;
+    
+    if (this.life <= 0) {
+      this.element.remove();
+      return false;
+    }
+    return true;
+  }
+}
+
+// Paper animation
+let papers = [];
+let frameCount = 0;
+
+document.addEventListener('mousemove', (e) => {
+  if (frameCount % 2 === 0) {
+    papers.push(new Paper(e.clientX, e.clientY));
+  }
+});
+
+function animate() {
+  frameCount++;
+  papers = papers.filter(paper => paper.update());
+  requestAnimationFrame(animate);
+}
+
+animate();
+
+// Beam connections animation
+document.addEventListener('DOMContentLoaded', () => {
+  // Get references to all circles
+  const container = document.getElementById('beam-container');
+  const circle1 = document.getElementById('circle1');
+  const circle2 = document.getElementById('circle2');
+  const circle3 = document.getElementById('circle3');
+  const circle4 = document.getElementById('circle4');
+  const circle5 = document.getElementById('circle5');
+  const circle6 = document.getElementById('circle6');
+  const circle7 = document.getElementById('circle7');
+  
+  // Get SVG container
+  const svgContainer = document.getElementById('beams-svg');
+  
+  // Create beam connections
+  createBeam(circle1, circle6);
+  createBeam(circle2, circle6);
+  createBeam(circle3, circle6);
+  createBeam(circle4, circle6);
+  createBeam(circle5, circle6);
+  createBeam(circle6, circle7);
+  
+  // Handle window resize
+  window.addEventListener('resize', () => {
+    // Clear existing beams
+    svgContainer.innerHTML = '';
+    
+    // Recreate beams
+    createBeam(circle1, circle6);
+    createBeam(circle2, circle6);
+    createBeam(circle3, circle6);
+    createBeam(circle4, circle6);
+    createBeam(circle5, circle6);
+    createBeam(circle6, circle7);
+  });
+  
+  // Function to create an animated beam between two elements
+  function createBeam(fromElement, toElement) {
+    // Get positions
+    const fromRect = fromElement.getBoundingClientRect();
+    const toRect = toElement.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    
+    // Calculate center points relative to the container
+    const fromX = fromRect.left + fromRect.width / 2 - containerRect.left;
+    const fromY = fromRect.top + fromRect.height / 2 - containerRect.top;
+    const toX = toRect.left + toRect.width / 2 - containerRect.left;
+    const toY = toRect.top + toRect.height / 2 - containerRect.top;
+    
+    // Create the base beam line
+    const beam = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    beam.setAttribute('x1', fromX);
+    beam.setAttribute('y1', fromY);
+    beam.setAttribute('x2', toX);
+    beam.setAttribute('y2', toY);
+    beam.classList.add('beam');
+    svgContainer.appendChild(beam);
+    
+    // Create the glowing beam
+    const beamGlow = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    beamGlow.setAttribute('x1', fromX);
+    beamGlow.setAttribute('y1', fromY);
+    beamGlow.setAttribute('x2', toX);
+    beamGlow.setAttribute('y2', toY);
+    beamGlow.classList.add('beam-glow');
+    svgContainer.appendChild(beamGlow);
+  }
+});
+
+// Data flow animation
+const inputFiles = [
+  { y: 120, ext: 'ieee' },
+  { y: 160, ext: 'arxiv' },
+  { y: 200, ext: 'PMC' },
+  { y: 240, ext: 'jstor' },
+  { y: 280, ext: 'plos' }
+];
+
+const outputFiles = [
+  { label: 'Trend Analysis', y: 100, logoSrc: '/assets/c1.png' }, 
+  { label: 'Citation Network', y: 180, logoSrc: '/assets/c2.png' },  
+  { label: 'Venue & Publisher', y: 260, logoSrc: '/assets/c3.png' },     
+];
+
+const svgContainer = document.querySelector('.paths-container');
+const centerBox = document.querySelector('.center-box');
+
+// Animation state
+let isAnimating = false;
+
+function createInputPath(startY) {
+    const startX = 100;
+    const endX = 400;
+    const endY = 200;
+    const controlX = (startX + endX) / 2;
+    return `M ${startX} ${startY} C ${controlX} ${startY}, ${controlX} ${endY}, ${endX} ${endY}`;
+}
+
+function createOutputPath(endY) {
+    const startX = 400;
+    const startY = 200;
+    const endX = 680;
+    const controlX = (startX + endX) / 2;
+    return `M ${startX} ${startY} C ${controlX} ${startY}, ${controlX} ${endY}, ${endX} ${endY}`;
+}
+
+function createInputPaper(data) {
+    const container = document.createElement('div');
+    container.className = 'paper-container';
+    
+    const paperIcon = document.createElement('div');
+    paperIcon.className = 'paper-icon';
+    paperIcon.textContent = data.ext;
+    
+    const label = document.createElement('span');
+    label.textContent = data.label || data.ext;
+    
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('class', 'path');
+    path.setAttribute('d', createInputPath(data.y));
+    svgContainer.appendChild(path);
+    
+    container.appendChild(paperIcon);
+    container.appendChild(label);
+    document.querySelector('.container').appendChild(container);
+    
+    container.style.left = '70px';
+    container.style.top = `${data.y}px`;
+
+    return { container, paperIcon, path, ext: data.ext };
+}
+
+function createOutputBox(data) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('class', 'path');
+    path.setAttribute('d', createOutputPath(data.y));
+    svgContainer.appendChild(path);
+    
+    // Create output box
+    const outputBox = document.createElement('div');
+    outputBox.className = 'output-box';
+    document.querySelector('.container').appendChild(outputBox);
+    outputBox.style.top = `${data.y}px`;
+    
+    // Create logo image element
+    const logo = document.createElement('img');
+    logo.className = 'output-logo';
+    logo.src = data.logoSrc;
+    logo.alt = data.label + ' logo';
+    outputBox.appendChild(logo);
+    
+    // Add title below the box
+    const title = document.createElement('div');
+    title.className = 'box-title';
+    title.textContent = data.label;
+    outputBox.appendChild(title);
+
+    return { path, outputBox };
+}
+
+function animatePaperAlongPath(path, ext, onComplete) {
+    const movingPaper = document.createElement('div');
+    movingPaper.className = 'moving-paper';
+    movingPaper.textContent = ext;
+    document.querySelector('.container').appendChild(movingPaper);
+
+    const length = path.getTotalLength();
+    let start = null;
+    const duration = 1200;
+
+    path.style.strokeOpacity = "1";  // Make line visible when animation starts
+    path.style.strokeDasharray = `${length}, ${length}`;
+    path.style.strokeDashoffset = length;
+
+    function animate(timestamp) {
+        if (!start) start = timestamp;
+        const progress = (timestamp - start) / duration;
+
+        if (progress <= 1) {
+            const point = path.getPointAtLength(length * progress);
+            movingPaper.style.left = `${point.x}px`;
+            movingPaper.style.top = `${point.y}px`;
+            
+            // Reveal only the traveled portion of the path
+            path.style.strokeDashoffset = length * (1 - progress);
+
+            requestAnimationFrame(animate);
+        } else {
+            movingPaper.remove();
+            path.style.strokeOpacity = "0";  // Hide line when animation completes
+            if (onComplete) onComplete();
+        }
+    }
+
+    requestAnimationFrame(animate);
+}
+
+
+function animateDotAlongPath(path, outputBox, onComplete) {
+    const movingDot = document.createElement('div');
+    movingDot.className = 'moving-dot';
+    document.querySelector('.container').appendChild(movingDot);
+
+    const length = path.getTotalLength();
+    let start = null;
+    const duration = 1000;
+
+    path.style.strokeOpacity = "1";  // Make line visible when animation starts
+    path.style.strokeDasharray = `${length}, ${length}`;
+    path.style.strokeDashoffset = length;
+
+    function animate(timestamp) {
+        if (!start) start = timestamp;
+        const progress = (timestamp - start) / duration;
+
+        if (progress <= 1) {
+            const point = path.getPointAtLength(length * progress);
+            movingDot.style.left = `${point.x}px`;
+            movingDot.style.top = `${point.y}px`;
+
+            // Reveal only the traveled portion of the path
+            path.style.strokeDashoffset = length * (1 - progress);
+
+            requestAnimationFrame(animate);
+        } else {
+            movingDot.remove();
+            path.style.strokeOpacity = "0";  // Hide line when animation completes
+
+            outputBox.style.display = 'flex';  // Show output box
+            outputBox.classList.add('highlight');
+            setTimeout(() => outputBox.classList.remove('highlight'), 500);
+
+            if (onComplete) onComplete();
+        }
+    }
+
+    requestAnimationFrame(animate);
+}
+
+const inputs = inputFiles.map(createInputPaper);
+const outputs = outputFiles.map(createOutputBox);
+
+function pulseBox() {
+    centerBox.classList.add('pulse');
+    setTimeout(() => centerBox.classList.remove('pulse'), 300);
+}
+
+async function animateInputs() {
+    // Hide output boxes when input animation starts
+    outputs.forEach(output => {
+        output.outputBox.style.opacity = '0';
+    });
+
+    // Animate all inputs (papers) to the center sequentially
+    for (let i = 0; i < inputs.length; i++) {
+        await new Promise(resolve => {
+            animatePaperAlongPath(inputs[i].path, inputs[i].ext, () => {
+                pulseBox();
+                resolve();
+            });
+        });
+        // Small delay between input animations
+        await new Promise(resolve => setTimeout(resolve, 200));
+    }
+
+    pulseBox(); // Final pulse after all inputs are processed
+    return true;
+}
+
+async function animateOutputs() {
+    // Animate all outputs sequentially
+    for (let i = 0; i < outputs.length; i++) {
+        await new Promise(resolve => {
+            animateDotAlongPath(outputs[i].path, outputs[i].outputBox, () => {
+                outputs[i].outputBox.style.opacity = '1'; // Show output box when dot reaches destination
+                resolve();
+            });
+        });
+    
+        // Wait a bit before starting the next output animation
+        await new Promise(resolve => setTimeout(resolve, 300));
+    }
+
+    // Keep outputs visible for a moment
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    // Before next cycle, fade out output boxes
+    outputs.forEach(output => {
+        output.outputBox.style.opacity = '0';
+    });
+
+    // Small pause before starting next cycle
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return true;
+}
+
+async function completeAnimationCycle() {
+    if (isAnimating) return;
+    isAnimating = true;
+
+    try {
+        await animateInputs();
+        await new Promise(resolve => setTimeout(resolve, 800));
+        await animateOutputs();
+        isAnimating = false;
+        setTimeout(completeAnimationCycle, 500);
+    } catch (error) {
+        console.error("Animation error:", error);
+        isAnimating = false;
+    }
+}
+
+setTimeout(completeAnimationCycle, 1000);
+
+function showPaperAlert(message, title = "Alert", icon = "fa-exclamation-circle", duration = 7000) {
+  const paperAlert = document.getElementById('paperAlert');
+  const alertMessage = document.getElementById('alertMessage');
+  const alertTitle = document.getElementById('alertTitle');
+  const alertIcon = document.getElementById('alertIcon');
+  
+  // Set custom message, title and icon
+  alertMessage.textContent = message;
+  alertTitle.textContent = title;
+  
+  // Update the icon class
+  alertIcon.className = ''; // Clear existing classes
+  alertIcon.classList.add('fas', icon);
+  
+  // Show the alert
+  paperAlert.classList.remove("hide");
+  paperAlert.classList.add("show", "showAlert");
+  
+  // Auto-hide after specified duration
+  setTimeout(() => {
+    hideAlert();
+  }, duration);
+}
+
+// Function to hide the alert with animation
+function hideAlert() {
+  const paperAlert = document.getElementById('paperAlert');
+  paperAlert.classList.remove("show");
+  paperAlert.classList.add("hide");
+  setTimeout(() => {
+    paperAlert.classList.remove("showAlert");
+  }, 500);
+}
+
+// Set up close button functionality
+document.querySelector('#paperAlert .close-btn').addEventListener('click', function() {
+  hideAlert();
+});
+
+const featureCards = document.querySelectorAll('.feature-selection .glass');
+  const selectionMessage = document.getElementById('selectionMessage');
+  const selectedFeatureText = document.getElementById('selectedFeature');
+  const selectedFeature = {"feature":null}
+
+  let isLoggedIn = localStorage.getItem("username"); // Replace with your actual login check
+  let selectedCard = null;
+
+  featureCards.forEach(card => {
+    card.addEventListener('click', () => {
+      if (!isLoggedIn) {
+       
+        showPaperAlert(
+          "You must be Logged In to continue!", 
+          "Authentication Required",
+          "fa-exclamation-circle", 
+          7000
+        );
+        return;
+      }
+      const isAlreadySelected = card === selectedCard;
+
+      if (isAlreadySelected) {
+        card.classList.remove('selected');
+        selectedCard = null;
+        selectionMessage.classList.remove('visible');
+      } else {
+        if (selectedCard) {
+          selectedCard.classList.remove('selected');
+        }
+
+        card.classList.add('selected');
+        selectedCard = card;
+
+        selectedFeature.feature = card.getAttribute('data-feature');
+  
+        selectedFeatureText.textContent = card.getAttribute('data-text');
+        selectionMessage.classList.add('visible');
+      }
+    });
+  });
+
+
+
+const searchBtn = document.getElementById("searchbtn");
+searchBtn.addEventListener("click", function () { 
+  console.log("Search button clicked");
+ 
+
+
+  const isLoggedIn = localStorage.getItem("username");
+  if (!isLoggedIn) {
+    alert("You must be signed in to perform a search.");
+    return;
+  }
+
+  const searchInput = document.querySelector('#searchy');
+  console.log("searchInput" , searchInput)
+  if (!searchInput) {
+    console.error("Search input element not found");
+    alert("Search input not found. Please check the page structure.");
+    return;
+  }
+
+  const searchTopic = searchInput.value.trim();
+  const yearFilter = document.getElementById('year-filter');
+  const searchYear = yearFilter ? yearFilter.value : "";
+  const userId = localStorage.getItem("userId");
+
+  saveSearchToFirebase(searchTopic, searchYear, selectedFeature )
+  // alert(" saved the activity")
+
+  // Validate inputs
+  if (!searchTopic) {
+    alert("Please enter a search topic");
+    return;
+  }
+
+  console.log(`Searching for: ${searchTopic}, Year: ${searchYear}, Feature: ${selectedFeature}`);
+  
+
+  let currentPage = 0;
+const nextBtn = document.getElementById("nextBtn");
+
+nextBtn.addEventListener("click", function () {
+  currentPage+=1
+  alert("just checking bro " +currentPage );
+  trendanalysis(currentPage);
+});
+
+
+
+function trendanalysis(pageNo){
+       const originalText = searchBtn.textContent;
+       searchBtn.textContent = "Processing...";
+       searchBtn.disabled = true;
+       nextBtn.style.display = "inline-block";
+      
+
+    fetch('/check-data-exists/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userId: userId,
+        topic: searchTopic,
+        year: searchYear
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.exists) {
+        console.log('Data exists, skipping analysis step');
+        showPaperAlert(
+          "Data exists", 
+          "Trend Analysis.......",
+          "fa-exclamation-circle", 
+          7000
+        );
+        return fetch('/analyze-trends/', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            userId: userId,
+            topic: searchTopic,
+            year: searchYear,
+            page: pageNo
+          })
+        });
+      } else {
+        console.log('Data does not exist, starting full analysis');
+        showPaperAlert(
+          "Starting full analysis", 
+          "ATrend Analysis.......",
+          "fa-exclamation-circle", 
+          7000
+        );
+        return fetch('/analyze/', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            userId: userId,
+            topic: searchTopic,
+            year: searchYear
+          })
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`Analysis failed: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(analysisData => {
+          console.log('Analysis complete:', analysisData);
+          // Now proceed to analyze-trends
+          showPaperAlert(
+            "Analysis complete", 
+            "Trend Analysis.......",
+            "fa-exclamation-circle", 
+            7000
+          );
+          return fetch('/analyze-trends/', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              userId: userId,
+              topic: searchTopic,
+              year: searchYear,
+              page: pageNo
+            })
+          });
+        });
+      }
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Trend analysis failed: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(trendData => {
+      console.log('Trend analysis complete:', trendData);
+      showPaperAlert(
+        "Analysis complete", 
+        "Trend Analysis.......",
+        "fa-exclamation-circle", 
+        7000
+      );
+      loadingOverlay.hide()
+      // Handle redirection to results page or display results
+    })
+    .catch(error => {
+      console.error('Error:', error);
+      alert("There was an error processing your request. Please try again: " + error.message);
+      showPaperAlert(
+       `There was an error processing your request. Please try again:`  + error.message, 
+        "Trend Analysis.......",
+        "fa-exclamation-circle", 
+        7000
+      );
+      loadingOverlay.hide()
+    })
+    .finally(() => {
+      // Always reset button state
+      searchBtn.textContent = originalText;
+      searchBtn.disabled = false;
+    });
+  }
+
+
+
+ if (selectedFeature.feature === 'trends') {
+  console.log("here here")
+  loadingOverlay.show("Loading Trend Analysis")
+       trendanalysis(0);
+  } 
+   else if (selectedFeature.feature === 'citations') {
+    loadingOverlay.show("Loading Citation Network Analysis")
+    nextBtn.style.display = "none";
+    currentPage = 0;
+    showPaperAlert(
+      "Analysis Started", 
+      "Citation Network Analysis.......",
+      "fa-exclamation-circle", 
+      7000
+    );
+
+    const originalText = this.textContent;
+    this.textContent = "Processing...";
+    this.disabled = true;
+
+    // First check if data exists in MongoDB
+    fetch('/check-data-exists-citation/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            userId: userId,
+            topic: searchTopic,
+            year: searchYear
+        })
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`Network response was not ok: ${response.status}`);
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.exists) {
+            console.log('Data exists, fetching citation data...');
+            loadingOverlay.hide()
+            window.open(`/citation-data?userId=${encodeURIComponent(userId)}&topic=${encodeURIComponent(searchTopic)}&year=${encodeURIComponent(searchYear)}`, '_blank');
+        } else {
+            console.log('Data does not exist, starting full analysis...');
+            showPaperAlert(
+              "Data Collecting....", 
+              "Citation Network Analysis.......",
+              "fa-exclamation-circle", 
+              7000
+            );
+            return fetch('/save', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    userId: userId,
+                    topic: searchTopic,
+                    year: searchYear
+                })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Save failed: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(saveData => {
+                console.log('Data saved successfully:', saveData);
+                loadingOverlay.hide()
+                window.open(`/citation-data?userId=${encodeURIComponent(userId)}&topic=${encodeURIComponent(searchTopic)}&year=${encodeURIComponent(searchYear)}`, '_blank');
+            });
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showPaperAlert(
+          "There was an error processing your request. Please try again: " + error.message, 
+          "Citation Network Analysis.......",
+          "fa-exclamation-circle", 
+          7000
+        );
+        loadingOverlay.hide()
+    })
+    .finally(() => {
+        // Always reset button state
+        this.textContent = originalText;
+        this.disabled = false;
+    });
+}
+  
+else if (selectedFeature.feature === 'venues') {
+  nextBtn.style.display = "none";
+  currentPage = 0;
+  const originalText = this.textContent;
+  this.textContent = "Processing...";
+  this.disabled = true;
+  console.log(" here here venue")
+  showPaperAlert(
+    "Analysis Started", 
+    "Venue/Publisher Analysis.......",
+    "fa-exclamation-circle", 
+    7000
+  );
+  loadingOverlay.show("Started Loading.....")
+  fetch('/check-data-exists-venue/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      userId: userId,
+      topic: searchTopic,
+      year: searchYear
+    })
+  })
+  .then(response => {
+    if (!response.ok) {
+    
+      throw new Error(`Network response was not ok: ${response.status}`);
+      
+    }
+   
+    return response.json();
+  })
+  .then(data => {
+    if (data.exists) {
+      console.log('Data exists, loading dashboard directly');
+      // If data exists, go directly to load_and_display_dashboard
+      
+      return fetch('/load_and_display_dashboard/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          userId: userId,
+          topic: searchTopic,
+          year: searchYear
+        })
+      });
+    } else {
+      console.log('Data does not exist, starting search process');
+      showPaperAlert(
+        "Data Collectiong....", 
+        "Venue/Publisher Analysis.......",
+        "fa-exclamation-circle", 
+        7000
+      );
+      return fetch('/search/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          userId: userId,
+          topic: searchTopic,
+          year: searchYear
+        })
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Search failed: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(searchData => {
+        console.log('Search complete:', searchData);
+       
+        return fetch('/load_and_display_dashboard/', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            userId: userId,
+            topic: searchTopic,
+            year: searchYear
+          })
+        });
+      });
+    }
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error(`Dashboard loading failed: ${response.status}`);
+    }
+    return response.json();
+  })
+  .then(dashboardData => {
+   
+    console.log('Dashboard loaded successfully:', dashboardData);
+    loadingOverlay.hide();
+    // 
+  })
+  .catch(error => {
+    console.error('Error:', error);
+    showPaperAlert(
+      "There was an error processing your request. Please try again: " + error.message, 
+      "Venue/Publisher Analysis.......",
+      "fa-exclamation-circle", 
+      7000
+    );
+  })
+  .finally(() => {
+    this.textContent = originalText;
+    this.disabled = false;
+  });
+
+} else {
+    alert("Invalid feature selected. Please choose a valid feature.");
+  }
+});
+
+
+const loadingOverlay = {
+  overlay: document.getElementById('loading-overlay'),
+  cyclone: null,
+  loadingText: null,
+  animationInterval: null,
+  paperInterval: null,
+  
+  initialize() {
+    this.cyclone = document.getElementById('cyclone');
+    this.loadingText = document.getElementById('loading-text');
+    this.setupAnimation();
+    
+    // Make the background whiter by changing the overlay background
+    this.overlay.style.backgroundColor = 'rgba(137, 138, 183, 0.9)'; // More white, slightly transparent
+  },
+  
+  setupAnimation() {
+    // Pre-setup animation elements so they're ready when needed
+    for (let i = 0; i < 10; i++) {
+      this.createPaper(i);
+    }
+  },
+  
+  show(message = 'Processing...') {
+    this.loadingText.textContent = message;
+    this.overlay.classList.add('active');
+    
+    // Start creating papers
+    this.paperInterval = setInterval(() => {
+      this.createPaper();
+    }, 120);
+    
+    // Animate loading text
+    let dots = 0;
+    this.animationInterval = setInterval(() => {
+      dots = (dots + 1) % 4;
+      this.loadingText.textContent = message + '.'.repeat(dots);
+    }, 500);
+  },
+  
+  hide() {
+    this.overlay.classList.remove('active');
+    
+    // Clear intervals
+    clearInterval(this.paperInterval);
+    clearInterval(this.animationInterval);
+    
+    // Clear all papers after animation ends
+    setTimeout(() => {
+      while (this.cyclone.firstChild) {
+        this.cyclone.removeChild(this.cyclone.firstChild);
+      }
+    }, 300);
+  },
+  
+  createPaper(index) {
+    const paper = document.createElement('div');
+    paper.className = 'paper';
+    
+    // Randomize paper appearance for more realistic effect
+    const size = 8 + Math.random() * 12;
+    paper.style.width = `${size}px`;
+    paper.style.height = `${size * 1.3}px`;
+    
+    // Change paper color to grayish (varying shades of gray)
+    const grayness = 65 + Math.random() * 20; // Range from 65-85% gray (darker)
+    paper.style.backgroundColor = `hsl(0, 0%, ${grayness}%)`;
+    
+    // Give it a slight skew to look more like paper
+    const skewX = Math.random() * 10 - 5;
+    const skewY = Math.random() * 10 - 5;
+    paper.style.transform = `skew(${skewX}deg, ${skewY}deg)`;
+    
+    // Start position - at the top of the cyclone
+    const startAngle = Math.random() * Math.PI * 2;
+    const startRadius = 60 + Math.random() * 20;
+    const startX = 100 + startRadius * Math.cos(startAngle);
+    const startY = -20; // Start above the visible area
+    
+    paper.style.left = `${startX}px`;
+    paper.style.top = `${startY}px`;
+    
+    this.cyclone.appendChild(paper);
+    
+    // Animate the paper with a specific starting point in the spiral
+    this.animatePaperInCyclone(paper, startAngle);
+  },
+  
+  animatePaperInCyclone(paper, initialAngle) {
+    // Animation duration
+    const duration = 6000 + Math.random() * 2000;
+    const startTime = Date.now();
+    
+    // Initial state
+    let angle = initialAngle || 0;
+    let height = -20; // Start above the visible area
+    const maxHeight = 350; // End height
+    const rotationSpeed = 1.0 + Math.random() * 0.5; // More consistent rotation speed
+    
+    const animateFrame = () => {
+      if (!this.overlay.classList.contains('active')) {
+        if (paper.parentNode === this.cyclone) {
+          this.cyclone.removeChild(paper);
+        }
+        return;
+      }
+      
+      const now = Date.now();
+      const elapsed = now - startTime;
+      const progress = elapsed / duration;
+      
+      if (progress < 1) {
+        // Calculate new height with a clear downward flow
+        // Move from top to bottom with easing
+        height = -20 + (maxHeight + 20) * Math.min(1, progress * 1.2);
+        
+        // Calculate spiral radius - wider at top, narrower at bottom
+        // Creates a funnel/cyclone shape
+        const heightProgress = height / maxHeight;
+        const currentRadius = Math.max(10, 80 - 60 * heightProgress);
+        
+        // Rotate faster as it gets closer to the bottom
+        const adjustedRotation = rotationSpeed * (1 + heightProgress * 0.5);
+        angle += adjustedRotation * 0.03;
+        
+        // Calculate position
+        const x = 100 + currentRadius * Math.cos(angle);
+        const y = height;
+        
+        // Apply position
+        paper.style.left = `${x}px`;
+        paper.style.top = `${y}px`;
+        
+        // Apply rotation and scaling
+        const rotation = angle * (180 / Math.PI);
+        // Increase fluttering effect as paper falls
+        const flutter = Math.sin(elapsed * 0.01) * (5 + heightProgress * 10);
+        paper.style.transform = `rotate(${rotation + flutter}deg) scale(${0.8 + Math.sin(progress * Math.PI * 4) * 0.1})`;
+        
+        // Adjust opacity near the end for a fading effect
+        if (progress > 0.8) {
+          paper.style.opacity = (1 - progress) * 5;
+        }
+        
+        requestAnimationFrame(animateFrame);
+      } else {
+        // Remove paper when animation completes
+        if (paper.parentNode === this.cyclone) {
+          this.cyclone.removeChild(paper);
+        }
+      }
+    };
+    
+    requestAnimationFrame(animateFrame);
+  }
+};
+// Initialize the loading overlay when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  loadingOverlay.initialize();
+});
+const words = document.querySelectorAll('.liquid-word');
+            const splashContainer = document.getElementById('splashContainer');
+            let currentIndex = 0;
+            
+            // Prepare each word with character spans and paper drops
+            words.forEach(word => {
+                const letters = word.textContent.split('');
+                word.innerHTML = '';
+                
+                letters.forEach(letter => {
+                    const charSpan = document.createElement('span');
+                    charSpan.className = 'liquid-char';
+                    charSpan.textContent = letter;
+                    word.appendChild(charSpan);
+                    
+                    // Add paper drop to each character
+                    const paperDrop = document.createElement('div');
+                    paperDrop.className = 'paper-drop';
+                    charSpan.appendChild(paperDrop);
+                    
+                    // Add paper background to each character
+                    for (let i = 0; i < 3; i++) {
+                        const paperBg = document.createElement('div');
+                        paperBg.className = 'paper-piece';
+                        paperBg.style.width = `${Math.random() * 20 + 20}px`;
+                        paperBg.style.height = `${Math.random() * 15 + 15}px`;
+                        paperBg.style.transform = `rotate(${Math.random() * 40 - 20}deg)`;
+                        
+                        // Random position around the character
+                        const offsetX = (Math.random() - 0.5) * 30;
+                        const offsetY = (Math.random() - 0.5) * 30;
+                        paperBg.style.left = `calc(50% + ${offsetX}px)`;
+                        paperBg.style.top = `calc(50% + ${offsetY}px)`;
+                        
+                        // Random colors (paper-like)
+                        const colors = ['#ffffff', '#f8f8f8', '#f0f0f0', '#fffafa', '#f5f5f5'];
+                        paperBg.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                        
+                        charSpan.appendChild(paperBg);
+                    }
+                });
+            });
+            
+            // Function to create paper splashes
+            function createPaperSplashes(centerX, centerY) {
+                for (let i = 0; i < 15; i++) {
+                    setTimeout(() => {
+                        const paper = document.createElement('div');
+                        paper.className = 'paper-piece';
+                        
+                        // Random size and shape
+                        const size = Math.random() * 20 + 10;
+                        paper.style.width = `${size}px`;
+                        paper.style.height = `${size * (Math.random() * 0.5 + 0.5)}px`;
+                        
+                        // Random rotation
+                        const rotation = Math.random() * 360;
+                        paper.style.setProperty('--rotation', `${rotation}deg`);
+                        
+                        // Random position around center
+                        const angle = Math.random() * Math.PI * 2;
+                        const distance = Math.random() * 100 + 20;
+                        const x = centerX + Math.cos(angle) * distance;
+                        const y = centerY + Math.sin(angle) * distance;
+                        
+                        paper.style.left = `${x}px`;
+                        paper.style.top = `${y}px`;
+                        
+                        // Random paper colors
+                        const colors = ['#ffffff', '#f8f8f8', '#f0f0f0', '#fffafa', '#f5f5f5'];
+                        paper.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                        
+                        // Add a slight border on some pieces
+                        if (Math.random() > 0.7) {
+                            paper.style.border = '1px solid rgba(0,0,0,0.05)';
+                        }
+                        
+                        // Animation
+                        paper.style.animation = `paperSplash ${Math.random() * 0.8 + 0.6}s forwards`;
+                        
+                        splashContainer.appendChild(paper);
+                        
+                        // Remove after animation
+                        setTimeout(() => paper.remove(), 1500);
+                    }, i * 40);
+                }
+            }
+            
+            // Function to animate letters in
+            function animateLettersIn(word) {
+                const chars = word.querySelectorAll('.liquid-char');
+                
+                chars.forEach((char, i) => {
+                    setTimeout(() => {
+                        // Animate the character
+                        char.style.animation = 'paperIn 0.7s forwards';
+                        char.style.opacity = '1';
+                        
+                        // Animate paper drop
+                        const paperDrop = char.querySelector('.paper-drop');
+                        setTimeout(() => {
+                            paperDrop.style.animation = 'paperDrop 0.5s forwards';
+                        }, 350);
+                        
+                        // Animate paper pieces
+                        const paperPieces = char.querySelectorAll('.paper-piece');
+                        paperPieces.forEach((piece, j) => {
+                            setTimeout(() => {
+                                piece.style.opacity = '1';
+                                piece.style.transform += ' scale(1)';
+                            }, j * 100 + 300);
+                        });
+                        
+                    }, i * 100);
+                });
+            }
+            
+            // Function to animate letters out
+            function animateLettersOut(word) {
+                const chars = word.querySelectorAll('.liquid-char');
+                
+                chars.forEach((char, i) => {
+                    setTimeout(() => {
+                        char.style.animation = 'paperOut 0.5s forwards';
+                        
+                        // Hide paper pieces
+                        const paperPieces = char.querySelectorAll('.paper-piece');
+                        paperPieces.forEach(piece => {
+                            piece.style.opacity = '0';
+                        });
+                    }, i * 60);
+                });
+            }
+            
+            // Function for word transition
+            function transitionWords() {
+                // Get current word and calculate center position
+                const currentWord = words[currentIndex];
+                const rect = currentWord.getBoundingClientRect();
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                
+                // Animate current word out
+                animateLettersOut(currentWord);
+                
+                setTimeout(() => {
+                    // Hide current word
+                    currentWord.classList.remove('active');
+                    
+                    // Go to next word
+                    currentIndex = (currentIndex + 1) % words.length;
+                    const nextWord = words[currentIndex];
+                    
+                    // Show next word
+                    nextWord.classList.add('active');
+                    
+                    // Create paper splash effect
+                    createPaperSplashes(centerX, centerY);
+                    
+                    // Animate next word in
+                    setTimeout(() => {
+                        animateLettersIn(nextWord);
+                    }, 200);
+                    
+                }, 500);
+            }
+            
+            // Initial animation
+            setTimeout(() => {
+                animateLettersIn(words[0]);
+            }, 500);
+            
+            // Start word transition cycle
+            setInterval(transitionWords, 3500);
+
+
+const carousel = document.getElementById('carousel');
+const pages = document.querySelectorAll('.page');
+const nextBtn2 = document.getElementById('nextBtn2');
+const prevBtn = document.getElementById('prevBtn');
+const dots = document.querySelectorAll('.dot');
+const pageShadows = document.querySelectorAll('.page-shadow');
+        
+let currentPage = 0;
+let totalSlides = 6; // Confirm we have 6 total slides
+        
+// Initialize pages
+pages.forEach((page, index) => {
+  page.style.transform = 'rotateY(0deg)';
+  page.style.zIndex = 6 - index;
+    });
+    
+    // Function to turn to next page and rotate carousel
+    function nextPage() {
+      if (currentPage < pages.length) {
+        // Apply shadow during turn
+        if (currentPage > 0) {
+          pageShadows[currentPage-1].style.opacity = '0';
+        }
+      
+        pages[currentPage].style.transform = 'rotateY(-180deg)';
+        pages[currentPage].style.zIndex = 10 + currentPage;
+                    
+        if (currentPage < pages.length - 1) {
+          pageShadows[currentPage].style.opacity = '1'; 
+        }
+                    
+        currentPage++;
+                    
+        // Rotate carousel - Fixed rotation calculation for 6 slides (360 degrees)
+        const newRotationDegree = (currentPage % totalSlides) * (360 / totalSlides);
+        carousel.style.transform = `rotateY(${-newRotationDegree}deg)`;
+                    
+        // Update pagination dots
+        updatePagination(currentPage % totalSlides);
+      }
+    }
+            
+    // Function to turn to previous page and rotate carousel
+    function prevPage() {
+      if (currentPage > 0) {
+        currentPage--;
+                    
+        // Apply shadow during turn
+        if (currentPage > 0) {
+          pageShadows[currentPage-1].style.opacity = '1';
+        }
+                    
+        pages[currentPage].style.transform = 'rotateY(0deg)';
+        setTimeout(() => {
+          pages[currentPage].style.zIndex = 10 - currentPage;
+        }, 300);
+                    
+        pageShadows[currentPage].style.opacity = '0';
+                    
+        // Rotate carousel - Fixed rotation calculation
+        const newRotationDegree = (currentPage % totalSlides) * (360 / totalSlides);
+        carousel.style.transform = `rotateY(${-newRotationDegree}deg)`;
+                    
+        // Update pagination dots
+        updatePagination(currentPage % totalSlides);
+      }
+    }
+            
+    // Function to reset book to beginning
+    function resetBook() {
+      pages.forEach((page, index) => {
+        page.style.transition = 'none';
+        page.style.transform = 'rotateY(0deg)';
+        setTimeout(() => {
+          page.style.zIndex = 5 - index;
+          page.style.transition = 'transform 0.6s ease, z-index 0s 0.3s';
+        }, 50);
+      });
+                
+      pageShadows.forEach(shadow => {
+        shadow.style.opacity = '0';
+      });
+                
+      currentPage = 0;
+                
+      // Reset carousel and pagination
+      carousel.style.transform = 'rotateY(0deg)';
+      updatePagination(0);
+    }
+            
+    // Function to update pagination dots
+    function updatePagination(index) {
+      dots.forEach((dot, i) => {
+        if (i === index) {
+          dot.classList.add('active');
+        } else {
+          dot.classList.remove('active');
+        }
+      });
+    }
+            
+    // Event listeners
+    nextBtn2.addEventListener('click', nextPage);
+    prevBtn.addEventListener('click', prevPage);
+            
+    // Make pagination dots clickable
+    dots.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        // Find the current actual position in the book
+        const currentInCycle = currentPage % totalSlides;
+                    
+        // Calculate how many pages to move
+        let pagesToMove;
+                    
+        if (index > currentInCycle) {
+          pagesToMove = index - currentInCycle;
+        } else if (index < currentInCycle) {
+          pagesToMove = totalSlides - currentInCycle + index;
+        } else {
+          return; // Already on this page
+        }
+                    
+        // Move the pages
+        for (let i = 0; i < pagesToMove; i++) {
+          setTimeout(() => nextPage(), i * 400);
+        }
+      });
+    });
+          
+    // Allow clicking on pages to turn them
+    pages.forEach((page, index) => {
+      page.addEventListener('click', () => {
+        if (index === currentPage - 1) {
+          prevPage();
+        } else if (index === currentPage) {
+          nextPage();
+        }
+      });
+    });    
+    
+    const canvas = document.getElementById('bgParticles');
+    if (canvas) {
+        const ctx = canvas.getContext('2d');
+        let particles = [];
+        const colors = ['#ff6ec4', '#7873f5', '#1fd1f9', '#43e97b'];
+        let width = window.innerWidth;
+        let height = window.innerHeight;
+        canvas.width = width;
+        canvas.height = height;
+    
+        function randomBetween(a, b) { return a + Math.random() * (b - a); }
+    
+        function createParticles(num) {
+            particles = [];
+            for (let i = 0; i < num; i++) {
+                particles.push({
+                    x: randomBetween(0, width),
+                    y: randomBetween(0, height),
+                    r: randomBetween(2, 5),
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    dx: randomBetween(-0.7, 0.7),
+                    dy: randomBetween(-0.7, 0.7),
+                    alpha: randomBetween(0.3, 0.8)
+                });
+            }
+        }
+    
+        function drawParticles() {
+            ctx.clearRect(0, 0, width, height);
+            for (let p of particles) {
+                ctx.save();
+                ctx.globalAlpha = p.alpha;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+                ctx.fillStyle = p.color;
+                ctx.shadowColor = p.color;
+                ctx.shadowBlur = 16;
+                ctx.fill();
+                ctx.restore();
+    
+                p.x += p.dx;
+                p.y += p.dy;
+                if (p.x < 0 || p.x > width) p.dx *= -1;
+                if (p.y < 0 || p.y > height) p.dy *= -1;
+            }
+            requestAnimationFrame(drawParticles);
+        }
+    
+        createParticles(48);
+        drawParticles();
+    
+        window.addEventListener('resize', () => {
+            width = window.innerWidth;
+            height = window.innerHeight;
+            canvas.width = width;
+            canvas.height = height;
+            createParticles(48);
+        });
+    }

static/js/login.js

@@ -0,0 +1,216 @@
+// Firebase configuration
+const firebaseConfig = {
+    apiKey: "AIzaSyA__OFybLoWSA6x_8lIyo0Z1Cb2ozhbHoA",
+    authDomain: "capstone-project-5f445.firebaseapp.com",
+    projectId: "capstone-project-5f445",
+    storageBucket: "capstone-project-5f445.firebasestorage.app",
+    messagingSenderId: "701976065811",
+    appId: "1:701976065811:web:494fa4ea19f04f1dd00ce6",
+    measurementId: "G-EVZTJ9X538"
+};
+
+// Initialize Firebase
+const app = firebase.initializeApp(firebaseConfig);
+const auth = firebase.auth();
+const db = firebase.firestore();
+
+// Form Elements
+const signUpForm = document.querySelector('.sign-up');
+const signInForm = document.querySelector('.sign-in');
+const forgotForm = document.querySelector('.forgot-password');
+
+// Sign Up Handler
+signUpForm.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    
+    const name = document.querySelector('.sign-up input[type="text"]').value;
+    const email = document.querySelector('.sign-up input[type="email"]').value;
+    const password = document.querySelectorAll('.sign-up input[type="password"]')[0].value;
+    const confirmPassword = document.querySelectorAll('.sign-up input[type="password"]')[1].value;
+
+    if (password !== confirmPassword) {
+        alert("Passwords don't match!");
+        return;
+    }
+
+    try {
+        const userCredential = await auth.createUserWithEmailAndPassword(email, password);
+        const user = userCredential.user;
+        
+        // Save to Firestore
+        await db.collection('users').doc(user.uid).set({
+            name: name,
+            email: email,
+            createdAt: firebase.firestore.FieldValue.serverTimestamp()
+        });
+
+        // Show success message and switch forms
+        alert('Account created successfully! Redirecting to login...');
+        
+        // Trigger sign-in form animation
+        wrapper.classList.add('animated-signup');
+        wrapper.classList.remove('animated-signin', 'animated-forgot');
+
+    } catch (error) {
+        alert(error.message);
+        console.error("Signup error:", error);
+    }
+});
+
+// Animation utility functions
+function scatterPapers() {
+    // Create paper particles
+    for (let i = 0; i < 10; i++) {
+        const page = document.createElement('div');
+        page.classList.add('page');
+        page.style.left = '50%';
+        page.style.top = '50%';
+        page.style.transform = 'translate(-50%, -50%)';
+        page.style.setProperty('--x', `${Math.random() * 800 - 400}px`);
+        page.style.setProperty('--y', `${Math.random() * -600}px`);
+        page.style.setProperty('--rotate', `${Math.random() * 720 - 360}deg`);
+        document.body.appendChild(page);
+
+        setTimeout(() => page.remove(), 3000);
+    }
+}
+
+function tearPaper() {
+    const leftPiece = document.createElement('div');
+    leftPiece.classList.add('tear-left');
+    leftPiece.style.left = 'calc(50% - 75px)';
+    leftPiece.style.top = '50%';
+    leftPiece.style.transform = 'translateY(-50%)';
+    document.body.appendChild(leftPiece);
+
+    const rightPiece = document.createElement('div');
+    rightPiece.classList.add('tear-right');
+    rightPiece.style.left = '50%';
+    rightPiece.style.top = '50%';
+    rightPiece.style.transform = 'translateY(-50%)';
+    document.body.appendChild(rightPiece);
+
+    setTimeout(() => {
+        leftPiece.remove();
+        rightPiece.remove();
+    }, 7000);
+}
+
+signInForm.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    
+    const email = document.querySelector('.sign-in input[type="email"]').value;
+    const password = document.querySelector('.sign-in input[type="password"]').value;
+
+    try {
+        const userCredential = await auth.signInWithEmailAndPassword(email, password);
+        const user = userCredential.user;
+
+        // Fetch username from Firestore
+        const userDoc = await db.collection('users').doc(user.uid).get();
+        let username = "User";
+        if (userDoc.exists) {
+            username = userDoc.data().name;
+        }
+
+        // Store username and userId in localStorage
+        localStorage.setItem("username", username);
+        localStorage.setItem("userId", user.uid);
+
+        // Trigger success animation
+        scatterPapers();
+
+        // Redirect to home page after animation
+        setTimeout(() => {
+            window.location.href = "/home";
+        }, 2000);
+
+    } catch (error) {
+        // Trigger failure animation
+        tearPaper();
+        console.error("Login error:", error);
+       
+    }
+});
+
+// Password Reset Handler
+forgotForm.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const email = document.querySelector('.forgot-password input[type="email"]').value;
+
+    try {
+        await auth.sendPasswordResetEmail(email);
+        alert('Password reset email sent! Check your inbox.');
+    } catch (error) {
+        alert(error.message);
+        console.error("Password reset error:", error);
+    }
+});
+
+// Form navigation handlers
+let wrapper = document.querySelector('.wrapper');
+const signUpLink = document.querySelector('.signup-link');
+const signInLink = document.querySelector('.signin-link');
+const forgotPassLink = document.querySelector('.forgot-pass a');
+const backToLoginLink = document.querySelector('.forget-link');
+
+// Set initial animation state
+wrapper.classList.add('animated-signup');
+
+// Form switching event listeners
+signUpLink.addEventListener('click', () => {
+    wrapper.classList.add('animated-signin');
+    wrapper.classList.remove('animated-signup', 'animated-forgot');
+});
+
+signInLink.addEventListener('click', () => {
+    wrapper.classList.add('animated-signup');
+    wrapper.classList.remove('animated-signin', 'animated-forgot');
+});
+
+forgotPassLink.addEventListener('click', () => {
+    wrapper.classList.add('animated-forgot');
+    wrapper.classList.remove('animated-signin', 'animated-signup');
+});
+
+backToLoginLink.addEventListener('click', () => {
+    wrapper.classList.add('animated-signup');
+    wrapper.classList.remove('animated-forgot');
+});
+
+// Paper falling animation
+document.addEventListener("DOMContentLoaded", () => {
+    const paperFallContainer = document.querySelector('.paper-fall');
+    function createPaper() {
+        const paper = document.createElement('div');
+        paper.classList.add('paper');
+
+        // Randomize the size of the paper
+        const size = Math.random() * 30 + 20; // Between 20px and 50px
+        paper.style.width = `${size}px`;
+        paper.style.height = `${size}px`;
+
+        // Randomize the position horizontally
+        const randomX = Math.random() * window.innerWidth;
+        paper.style.left = `${randomX}px`;
+
+        // Randomize the animation duration
+        const duration = Math.random() * 5 + 5; // Between 5s and 10s
+        paper.style.animationDuration = `${duration}s`;
+
+        // Randomize the rotation
+        const rotation = Math.random() * 360;
+        paper.style.transform = `rotate(${rotation}deg)`;
+
+        // Append the paper to the container
+        paperFallContainer.appendChild(paper);
+
+        // Remove the paper after it falls out of view
+        setTimeout(() => {
+            paper.remove();
+        }, duration * 1000);
+    }
+
+    // Create a new paper every 100ms
+    setInterval(createPaper, 100);
+});

static/js/useractivity.js

@@ -0,0 +1,251 @@
+document.addEventListener("DOMContentLoaded", async () => {
+  // Firebase Auth & Firestore setup - reference from existing code
+  const auth = firebase.auth();
+  const db = firebase.firestore();
+  
+  // Activity tab elements
+  const activityTab = document.getElementById("activity-tab");
+  const searchCountElement = activityTab.querySelector(".stat-value");
+  const timelineContainer = activityTab.querySelector(".timeline");
+  
+  // Function to format relative time (e.g., "2 days ago")
+  function getRelativeTimeString(timestamp) {
+    const now = new Date();
+    const searchTime = timestamp.toDate();
+    const diffInMs = now - searchTime;
+    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+    
+    if (diffInDays === 0) {
+      const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
+      if (diffInHours === 0) {
+        const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+        return diffInMinutes === 1 ? "1 minute ago" : `${diffInMinutes} minutes ago`;
+      }
+      return diffInHours === 1 ? "1 hour ago" : `${diffInHours} hours ago`;
+    } else if (diffInDays === 1) {
+      return "Yesterday";
+    } else if (diffInDays < 7) {
+      return `${diffInDays} days ago`;
+    } else if (diffInDays < 30) {
+      const diffInWeeks = Math.floor(diffInDays / 7);
+      return diffInWeeks === 1 ? "1 week ago" : `${diffInWeeks} weeks ago`;
+    } else {
+      return searchTime.toLocaleDateString();
+    }
+  }
+  
+  // Function to create a timeline item
+  function createTimelineItem(activity) {
+    const timelineItem = document.createElement("div");
+    timelineItem.className = "timeline-item";
+    
+    const timelineDot = document.createElement("div");
+    timelineDot.className = "timeline-dot";
+    
+    const timelineContent = document.createElement("div");
+    timelineContent.className = "timeline-content";
+    
+    const title = document.createElement("h4");
+    title.textContent = activity.type === "search" ? activity.query : activity.title;
+    
+    const description = document.createElement("p");
+    if (activity.type === "search") {
+      description.textContent = `You searched for "${activity.query}"`;
+    } else if (activity.type === "save") {
+      description.textContent = `You saved "${activity.title}"`;
+    } else if (activity.type === "profile") {
+      description.textContent = "You updated your profile information";
+    }
+    
+    const timelineDate = document.createElement("span");
+    timelineDate.className = "timeline-date";
+    
+    const clockIcon = document.createElement("i");
+    clockIcon.className = "fas fa-clock";
+    
+    timelineDate.appendChild(clockIcon);
+    timelineDate.append(` ${getRelativeTimeString(activity.timestamp)}`);
+    
+    timelineContent.appendChild(title);
+    timelineContent.appendChild(description);
+    timelineContent.appendChild(timelineDate);
+    
+    timelineItem.appendChild(timelineDot);
+    timelineItem.appendChild(timelineContent);
+    
+    return timelineItem;
+  }
+
+  // Function to load and display user activity
+  async function loadUserActivity() {
+    const user = auth.currentUser;
+    if (!user) return;
+    
+    try {
+      // Get user activity from Firestore
+      const activitiesSnapshot = await db.collection("users")
+        .doc(user.uid)
+        .collection("activities")
+        .orderBy("timestamp", "desc")
+        .limit(10)
+        .get();
+      
+      // Clear existing timeline content
+      timelineContainer.innerHTML = "";
+      
+      // Track search count
+      let searchCount = 0;
+      
+      if (!activitiesSnapshot.empty) {
+        activitiesSnapshot.forEach(doc => {
+          const activity = doc.data();
+          
+          // Count searches for the stat display
+          if (activity.type === "search") {
+            searchCount++;
+          }
+          
+          // Create and append timeline item
+          const timelineItem = createTimelineItem(activity);
+          timelineContainer.appendChild(timelineItem);
+        });
+        
+        // Update search count display
+        searchCountElement.textContent = searchCount;
+      } else {
+        // No activities found
+        searchCountElement.textContent = "0";
+        
+        // Display a message when no activities are found
+        const noActivitiesMessage = document.createElement("div");
+        noActivitiesMessage.className = "empty-state";
+        noActivitiesMessage.innerHTML = `
+          <i class="fas fa-history"></i>
+          <p>No activity history found. Your recent searches and actions will appear here.</p>
+        `;
+        timelineContainer.appendChild(noActivitiesMessage);
+      }
+    } catch (error) {
+      console.error("Error loading user activity:", error);
+      timelineContainer.innerHTML = `<div class="error-message">Failed to load activity history.</div>`;
+    }
+  }
+  
+  // Function to save search activity
+  window.saveSearchActivity = async (query) => {
+    const user = auth.currentUser;
+    if (!user || !query) return;
+    
+    try {
+      // Create activity object
+      const activity = {
+        type: "search",
+        query: query,
+        timestamp: firebase.firestore.FieldValue.serverTimestamp()
+      };
+      
+      // Save to Firestore
+      await db.collection("users")
+        .doc(user.uid)
+        .collection("activities")
+        .add(activity);
+        
+      console.log("Search activity saved successfully");
+    } catch (error) {
+      console.error("Error saving search activity:", error);
+    }
+  };
+  
+  // Function to save profile update activity
+  window.saveProfileUpdateActivity = async () => {
+    const user = auth.currentUser;
+    if (!user) return;
+    
+    try {
+      // Create activity object
+      const activity = {
+        type: "profile",
+        title: "Profile Updated",
+        timestamp: firebase.firestore.FieldValue.serverTimestamp()
+      };
+      
+      // Save to Firestore
+      await db.collection("users")
+        .doc(user.uid)
+        .collection("activities")
+        .add(activity);
+        
+      console.log("Profile update activity saved successfully");
+    } catch (error) {
+      console.error("Error saving profile update activity:", error);
+    }
+  };
+  
+  // Function to save article activity
+  window.saveArticleActivity = async (title, articleId) => {
+    const user = auth.currentUser;
+    if (!user || !title) return;
+    
+    try {
+      // Create activity object
+      const activity = {
+        type: "save",
+        title: title,
+        articleId: articleId || null,
+        timestamp: firebase.firestore.FieldValue.serverTimestamp()
+      };
+      
+      // Save to Firestore
+      await db.collection("users")
+        .doc(user.uid)
+        .collection("activities")
+        .add(activity);
+        
+      console.log("Article save activity recorded successfully");
+    } catch (error) {
+      console.error("Error saving article activity:", error);
+    }
+  };
+
+  // Load activity when tab is clicked
+  const activityTabBtn = document.querySelector('[data-tab="activity"]');
+  if (activityTabBtn) {
+    activityTabBtn.addEventListener("click", loadUserActivity);
+  }
+  
+  // Update the save profile button to also record the activity
+  const saveBtn = document.getElementById("saveBtn");
+  const originalClickHandler = saveBtn.onclick;
+  
+  saveBtn.addEventListener("click", async () => {
+    // Call the original handler first
+    if (typeof originalClickHandler === "function") {
+      originalClickHandler();
+    }
+    
+    // Add activity tracking
+    await saveProfileUpdateActivity();
+  });
+
+  // Hook this up to your search functionality
+  // Example: If you have a search form
+  const searchForm = document.getElementById("searchForm");
+  if (searchForm) {
+    searchForm.addEventListener("submit", (e) => {
+      const searchInput = searchForm.querySelector("input[type=search]");
+      if (searchInput && searchInput.value.trim()) {
+        saveSearchActivity(searchInput.value.trim());
+      }
+    });
+  }
+  
+  // Load activity data when the page loads if user is on activity tab
+  auth.onAuthStateChanged(user => {
+    if (user && activityTab.classList.contains("active")) {
+      loadUserActivity();
+    }
+  });
+});
+
+
+

templates/contactBoard.html

@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Team Member Contact </title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
+        :root {
+            --primary-color: #4a90e2;
+            --secondary-color: #fcee0a;
+            --third-color: #6f42c1;
+            --text-color: #333;
+            --bg-color: #f5f7fa;
+            --white: #ffffff;
+            --forth-color: #00BFFF;
+            --aqua:#28cbb0;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background-color: var(--secondary-color);
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            color: var(--text-color);
+            margin-bottom: 15px;
+            position: relative;
+            display: inline-block;   
+            font-family: 'Bungee Shade';
+        }
+
+        .header h1::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 4px;
+            background: var(--forth-color);
+            border-radius: 2px;
+        }
+
+        .header p {
+
+            font-size: 1.1rem;
+            max-width: 700px;
+            margin: 0 auto;
+            font-family: 'Bungee Shade';
+            color: black;
+        }
+
+        .cards-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 30px;
+        }
+
+        .card {
+            flex: 1;
+            min-width: 300px;
+            max-width: 350px;
+            background: var(--text-color);
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            position: relative;
+            padding-top: 40px;
+        }
+
+        .card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+        }
+
+        .card-number {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            width: 40px;
+            height: 40px;
+            background: var(--secondary-color);
+            color: var(--text-color);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
+            font-size: 1.2rem;
+            box-shadow: 0 5px 15px rgba(252, 238, 10, 0.3);
+            z-index: 2;
+        }
+
+        .card-title {
+            text-align: center;
+            padding: 0 20px;
+            margin-bottom: 20px;
+        }
+
+        .card-title h3 {
+            font-size: 1.5rem;
+            color: var(--text-color);
+            margin-bottom: 5px;
+        }
+
+        .card-title p {
+            font-size: 0.9rem;
+            color: #666;
+        }
+
+        .member-photo {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            border: 5px solid white;
+            object-fit: cover;
+            margin: 0 auto 20px;
+            display: block;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            background-color: #f0f0f0;
+        }
+
+        .card-body {
+            padding: 0 30px 30px;
+        }
+
+        .contact-info {
+            margin-bottom: 25px;
+        }
+
+        .contact-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .contact-icon {
+            width: 35px;
+            height: 35px;
+            background: var(--forth-color);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 15px;
+            color: white;
+            font-size: 16px;
+            flex-shrink: 0;
+        }
+
+        .contact-text {
+            font-size: 0.9rem;
+            color: var(--secondary-color);
+            font-weight: bolder;
+        }
+        
+
+        .contact-text strong {
+            color: var(--text-color);
+            display: block;
+            margin-bottom: 3px;
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 30px;
+        }
+
+        .social-link {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--white);
+            color: var(--forth-color);
+            font-size: 18px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .social-link:hover {
+            transform: translateY(-5px) rotate(15deg);
+            background: var(--forth-color);
+            color: var(--white);
+            box-shadow: 0 8px 20px rgba(0, 191, 255, 0.3);
+        }
+
+        @media (max-width: 768px) {
+            .cards-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .card {
+                max-width: 100%;
+            }
+        }
+        
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Our Team Members</h1>
+            <p>Get in touch with our dedicated team who will provide you with quality service</p>
+        </div>
+
+        <div class="cards-container">
+            <!-- Card 1 -->
+            <div class="card">
+                <div class="card-number">01</div>
+                <img src="/assets/dev1.png" alt="Member Photo" class="member-photo">
+                <div class="card-body">
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Name: </strong>
+                                <sub style="margin-left: 10px;">Javvadi Jaswant Sri Akhilesh</sub>
+                            
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Phone</strong>
+                                <sub style="margin-left: 10px;">+91-9632587415</sub>
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                                    <polyline points="22,6 12,13 2,6"></polyline>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Email</strong>
+                                <sub style="margin-left: 10px;">[email protected]</sub>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="social-links">
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                                <rect x="2" y="9" width="4" height="12"></rect>
+                                <circle cx="4" cy="4" r="2"></circle>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Card 2 -->
+            <div class="card">
+                <div class="card-number">02</div>
+                <img src="/assets/dev2.png" alt="Member Photo" class="member-photo">
+                <div class="card-body">
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Name: </strong>
+                                <sub style="margin-left: 10px;">Sai Darahas</sub>
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Phone</strong>
+                                <sub style="margin-left: 10px;">+91-852147963</sub>
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                                    <polyline points="22,6 12,13 2,6"></polyline>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Email</strong>
+                                <sub style="margin-left: 10px;">[email protected]</sub>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="social-links">
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                                <rect x="2" y="9" width="4" height="12"></rect>
+                                <circle cx="4" cy="4" r="2"></circle>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Card 3 -->
+            <div class="card">
+                <div class="card-number">03</div>
+                <img src="/assets/dev3.png" alt="Member Photo" class="member-photo">
+                <div class="card-body">
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                    <circle cx="12" cy="7" r="4"></circle>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Name: </strong>
+                                <sub style="margin-left: 10px;">Thota Abilash Reddy</sub>
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Phone</strong>
+                                <sub style="margin-left: 10px;">+91-7412589635</sub>
+                            </div>
+                        </div>
+                        <div class="contact-item">
+                            <div class="contact-icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                                    <polyline points="22,6 12,13 2,6"></polyline>
+                                </svg>
+                            </div>
+                            <div class="contact-text">
+                                <strong style="color: #fcee0a;">Email</strong>
+                                <sub style="margin-left: 10px;">[email protected]</sub>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="social-links">
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                                <rect x="2" y="9" width="4" height="12"></rect>
+                                <circle cx="4" cy="4" r="2"></circle>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

templates/feedback.html

@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback Form</title>
+    <!-- Added FontAwesome library for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
+        /* Global styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
+        }
+        
+        body {
+            background-color: #333333;
+            color: #ffffff;
+            padding: 20px;
+        }
+        
+        /* Header styles */
+        .header {
+            background-color: #ffed00;
+            padding: 30px 20px;
+            text-align: center;
+            color: #333333;
+            
+        }
+        
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            text-shadow: 3px 3px 0 #333333;
+            margin-bottom: 10px;
+            font-family: 'Bungee Shade';
+        }
+        
+        .header p {
+            font-size: 1rem;
+            margin-top: 15px;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-family:'Courier New', Courier, monospace;
+            font-weight: bolder;
+        }
+        
+        .header-underline {
+            width: 150px;
+            height: 5px;
+            background-color: #00b7ff;
+            margin: 5px auto 15px;
+            border-radius: 5px;
+        }
+        
+        /* Form styles */
+        .form-container {
+            padding: 30px;
+        }
+        
+        .form-group {
+            margin-bottom: 25px;
+        }
+        
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #ffed00;
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 12px 15px;
+            background-color: #3a3a3a;
+            border: 2px solid #ffed00;
+            border-radius: 8px;
+            color: #ffffff;
+            font-size: 16px;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #00b7ff;
+            box-shadow: 0 0 5px rgba(0, 183, 255, 0.5);
+        }
+        
+        textarea.form-control {
+            min-height: 120px;
+            resize: vertical;
+        }
+        
+        .rating {
+            display: flex;
+            gap: 5px;
+            margin-top: 10px;
+        }
+        
+        .rating input[type="radio"] {
+            display: none;
+        }
+        
+        .rating label {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            background-color: #3a3a3a;
+            border: 2px solid #ffed00;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #ffed00;
+            font-weight: bold;
+            transition: all 0.2s ease;
+        }
+        
+        .rating input[type="radio"]:checked + label {
+            background-color: #ffed00;
+            color: #333333;
+            transform: scale(1.1);
+        }
+        
+        .submit-btn {
+            display: block;
+            width: 100%;
+            padding: 15px;
+            background-color: #ffed00;
+            color: #333333;
+            border: none;
+            border-radius: 8px;
+            font-size: 18px;
+            font-weight: 700;
+            text-transform: uppercase;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 10px;
+        }
+        
+       
+        
+        .submit-btn:hover {
+            background-color: #00b7ff;
+            transform: translateY(-3px);
+        }
+        
+      
+        
+        .form-section-title {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .section-number {
+            width: 40px;
+            height: 40px;
+            background-color: #ffed00;
+            color: #333333;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 18px;
+            margin-right: 15px;
+        }
+
+        .section-title {
+            font-size: 1.3rem;
+            color: #ffed00;
+        }
+
+        
+        .paper-alert {
+            background: #fff;
+            border-radius: 2px;
+            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), 
+                        0 0 0 1px rgba(0,0,0,0.05);
+            min-width: 320px;
+            max-width: 400px;
+            position: fixed;
+            right: 16px;
+            top: 16px;
+            overflow: hidden;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 10000;
+            transform-origin: top right;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        /* Torn paper effect */
+        .paper-alert::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 4px;
+            background-color: #fff;
+            background-image: 
+            radial-gradient(circle at 2px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+            radial-gradient(circle at 10px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+            radial-gradient(circle at 18px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+            radial-gradient(circle at 26px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+            radial-gradient(circle at 34px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px),
+            radial-gradient(circle at 42px 3px, transparent 2px, #fff 2px, #fff 3px, transparent 3px);
+            background-size: 50px 10px;
+            z-index: 2;
+        }
+        
+        /* Paper texture */
+        .paper-alert::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
+            pointer-events: none;
+            z-index: 1;
+        }
+        
+        .paper-alert.showAlert {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        
+        .paper-alert.show {
+            animation: paper_enter 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+        }
+        
+        @keyframes paper_enter {
+            0% { transform: translateX(100%) rotate(5deg); }
+            50% { transform: translateX(-10%) rotate(-2deg); }
+            75% { transform: translateX(5%) rotate(1deg); }
+            100% { transform: translateX(0) rotate(0); }
+        }
+        
+        .paper-alert.hide {
+            animation: paper_exit 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+        }
+        
+        @keyframes paper_exit {
+            0% { transform: translateX(0) rotate(0); }
+            30% { transform: translateX(5%) rotate(1deg); }
+            100% { transform: translateX(110%) rotate(5deg); }
+        }
+        
+        .paper-alert-content {
+            position: relative;
+            padding: 18px 15px;
+            z-index: 3;
+        }
+        
+        .paper-pin {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: #f44336;
+            border-radius: 50%;
+            top: 10px;
+            left: 20px;
+            box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.2);
+        }
+        
+        .paper-pin:after {
+            content: '';
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background: rgba(255,255,255,0.4);
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+        }
+        
+        .paper-clip {
+            position: absolute;
+            top: -8px;
+            right: 30px;
+            width: 30px;
+            height: 30px;
+            border: 2px solid #5d9cec;
+            border-radius: 0 0 0 10px;
+            border-top: none;
+            border-right: none;
+            transform: rotate(45deg);
+            z-index: 10;
+        }
+        
+        .paper-clip:before {
+            content: '';
+            position: absolute;
+            width: 15px;
+            height: 10px;
+            border: 2px solid #5d9cec;
+            border-radius: 0 5px 0 5px;
+            border-top: none;
+            border-right: none;
+            top: 0;
+            left: 0;
+            transform: rotate(0deg);
+        }
+        
+        .alert-icon {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        
+        .alert-icon i {
+            font-size: 22px;
+            color: #f44336;
+            margin-right: 10px;
+        }
+        
+        .alert-title {
+            font-weight: 600;
+            font-size: 16px;
+            color: #333;
+            margin: 0;
+        }
+        
+        .paper-alert .msg {
+            margin-top: 6px;
+            margin-left: 32px;
+            font-size: 14px;
+            color: #555;
+            line-height: 1.4;
+        }
+        
+        .paper-alert .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: rgba(0,0,0,0.05);
+            border-radius: 50%;
+            color: #666;
+            transition: all 0.2s;
+            z-index: 5;
+        }
+        
+        .paper-alert .close-btn:hover {
+            background: rgba(0,0,0,0.1);
+            color: #333;
+            transform: rotate(90deg);
+        }
+        
+        .alert-btn {
+            position: fixed;
+            top: 7rem;
+            right: 2.5rem;
+            z-index: 1201;
+            font-size: 0.9rem;
+            padding: 0.7rem 1.5rem;
+            border-radius: 5px;
+            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
+            color: white;
+            border: none;
+            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+            cursor: pointer;
+            font-family: 'Segoe UI', sans-serif;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            transition: all 0.3s;
+        }
+        
+        .alert-btn:hover {
+            transform: translateY(-3px) scale(1.03);
+            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
+        }
+        
+        .paper-lines {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+            linear-gradient(to bottom, transparent 0%, transparent 98%, #e0e0e0 99%, transparent 100%);
+            background-size: 100% 24px;
+            z-index: 0;
+            pointer-events: none;
+        }
+        
+        .handwritten {
+            font-family: 'Segoe Script', 'Bradley Hand', cursive;
+            transform: rotate(-1deg);
+            color: #2c3e50;
+        }
+    </style>
+</head>
+<body>
+    <div class="paper-alert hide" id="paperAlert">
+        <div class="paper-pin"></div>
+        <div class="paper-clip"></div>
+        <div class="paper-lines"></div>
+        <div class="paper-alert-content">
+          <div class="alert-icon">
+            <i class="fas fa-exclamation-circle" id="alertIcon"></i>
+            <h4 class="alert-title" id="alertTitle">Authentication Required</h4>
+          </div>
+          <div class="msg handwritten" id="alertMessage">You must be Logged In to continue!</div>
+          <div class="close-btn">
+            <i class="fas fa-times"></i>
+          </div>
+        </div>
+    </div>
+    
+    <div class="header">
+        <h1>Customer Feedback</h1>
+        <div class="header-underline"></div>
+        <p>Help us improve our service by sharing your experience</p>
+    </div>
+    
+    <form class="form-container" id="feedbackForm">
+        <div class="form-section-title">
+            <div class="section-number">01</div>
+            <h2 class="section-title">Your Information</h2>
+        </div>
+        
+        <div class="form-group">
+            <label for="name">Full Name</label>
+            <input type="text" id="name" class="form-control" placeholder="Enter your name" required>
+        </div>
+        
+        <div class="form-group">
+            <label for="email">Email Address</label>
+            <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
+        </div>
+        
+        <div class="form-group">
+            <label for="phone">Phone Number</label>
+            <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number">
+        </div>
+        
+        <div class="form-section-title">
+            <div class="section-number">02</div>
+            <h2 class="section-title">Your Experience</h2>
+        </div>
+        
+        <div class="form-group">
+            <label>How would you rate your overall experience?</label>
+            <div class="rating">
+                <input type="radio" name="rating" id="star1" value="1">
+                <label for="star1">1</label>
+                
+                <input type="radio" name="rating" id="star2" value="2">
+                <label for="star2">2</label>
+                
+                <input type="radio" name="rating" id="star3" value="3">
+                <label for="star3">3</label>
+                
+                <input type="radio" name="rating" id="star4" value="4">
+                <label for="star4">4</label>
+                
+                <input type="radio" name="rating" id="star5" value="5">
+                <label for="star5">5</label>
+            </div>
+        </div>
+        
+        <div class="form-section-title">
+            <div class="section-number">03</div>
+            <h2 class="section-title">Your Feedback</h2>
+        </div>
+        
+        <div class="form-group">
+            <label for="comments">Please share your thoughts or suggestions</label>
+            <textarea id="comments" class="form-control" placeholder="Your feedback is valuable to us..." required></textarea>
+        </div>
+        
+        <div class="form-group">
+            <label for="improvements">How can we improve our service?</label>
+            <textarea id="improvements" class="form-control" placeholder="Any suggestions for improvement..."></textarea>
+        </div>
+        
+        <button type="submit" class="submit-btn" id="submitBtn">Submit Feedback</button>
+    </form>
+
+
+    <script>
+        // Wait for DOM to be fully loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log("DOM fully loaded");
+            
+            // Get the form element with ID
+            const form = document.getElementById('feedbackForm');
+            console.log("Form element:", form);
+            
+            // Function to show the paper alert
+            function showPaperAlert(message, title = "Alert", icon = "fa-exclamation-circle", duration = 7000) {
+                console.log("Showing alert:", message);
+                const paperAlert = document.getElementById('paperAlert');
+                const alertMessage = document.getElementById('alertMessage');
+                const alertTitle = document.getElementById('alertTitle');
+                const alertIcon = document.getElementById('alertIcon');
+                
+                // Set custom message, title and icon
+                alertMessage.textContent = message;
+                alertTitle.textContent = title;
+                
+                // Update the icon class
+                alertIcon.className = ''; // Clear existing classes
+                alertIcon.classList.add('fas', icon);
+                
+                // Show the alert
+                paperAlert.classList.remove("hide");
+                paperAlert.classList.add("show", "showAlert");
+                
+                // Auto-hide after specified duration
+                setTimeout(() => {
+                    hideAlert();
+                }, duration);
+            }
+              
+            // Function to hide the alert with animation
+            function hideAlert() {
+                console.log("Hiding alert");
+                const paperAlert = document.getElementById('paperAlert');
+                paperAlert.classList.remove("show");
+                paperAlert.classList.add("hide");
+                setTimeout(() => {
+                    paperAlert.classList.remove("showAlert");
+                }, 500);
+            }
+            
+            // Set up close button functionality
+            document.querySelector('#paperAlert .close-btn').addEventListener('click', function() {
+                hideAlert();
+            });
+            
+            
+            // Add event listener for form submission
+            if (form) {
+                form.addEventListener('submit', function(event) {
+                    event.preventDefault();
+                    console.log("Form submitted");
+                    showPaperAlert(
+                        "Thank you for your feedback!",
+                        "Submission Successful", 
+                        "fa-check-circle", 
+                        7000
+                    );
+                });
+            } else {
+                console.error("Form element not found!");
+            }
+        });
+    </script>
+</body>
+</html>

templates/gra.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>Interactive Citation Network</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <link rel="stylesheet" href="/static/css/gra.css">
+</head>
+<body>
+    <div id="container"></div>
+    
+   <!-- Replace the file-input div with this loading section -->
+<div class="loading-section">
+    <div id="statusMessage">Loading citation network...</div>
+    <div class="progress-container">
+        <div id="loadingProgress" class="progress-bar"></div>
+    </div>
+</div>
+
+<div class="time-navigation">
+    <button id="prevTimeButton" disabled>← Previous</button>
+    <div class="time-slider-container">
+        <input type="range" id="timeSlider" class="time-slider" min="0" max="0" value="0" step="1">
+        <div class="time-labels">
+            <span id="startTimeLabel">Start Date</span>
+            <span id="endTimeLabel">End Date</span>
+        </div>
+        <div id="timeLoader" class="time-loader"></div>
+    </div>
+    <div class="time-indicator" id="currentTimePeriod">Loading time range...</div>
+    <button id="nextTimeButton">Next →</button>
+</div>
+
+
+<div class="controls">
+        <div class="control-section">
+            <h4>Network Physics</h4>
+            <label>
+                Link Distance:
+                <input type="range" id="linkDistanceSlider" min="20" max="200" value="80">
+                <span id="linkDistanceValue">80</span>
+            </label>
+            <label>
+                Charge Strength:
+                <input type="range" id="chargeSlider" min="-500" max="-10" value="-120">
+                <span id="chargeValue">-120</span>
+            </label>
+            <label>
+                Network Compactness:
+                <input type="range" id="gravitySlider" min="0.01" max="0.5" step="0.01" value="0.1">
+                <span id="gravityValue">0.1</span>
+            </label>
+        </div>
+        
+        <div class="control-section">
+            <h4>Node Sizing</h4>
+            <label>
+                Main Papers:
+                <input type="range" id="mainNodeScaleSlider" min="0.5" max="3.0" step="0.1" value="1.0">
+                <span id="mainNodeScaleValue">1.0</span>
+            </label>
+            <label>
+                Bridge Papers:
+                <input type="range" id="bridgeNodeScaleSlider" min="0.5" max="3.0" step="0.1" value="1.0">
+                <span id="bridgeNodeScaleValue">1.0</span>
+            </label>
+            <label>
+                Normal Papers:
+                <input type="range" id="normalNodeScaleSlider" min="0.5" max="3.0" step="0.1" value="1.0">
+                <span id="normalNodeScaleValue">1.0</span>
+            </label>
+        </div>
+        
+        <div class="control-section">
+            <h4>View Controls</h4>
+            <button id="resetButton">Reset View</button>
+            <button id="centerViewButton">Center View</button>
+        </div>
+    </div>
+</div>
+
+    
+    <div class="legend">
+        <h3>Legend</h3>
+        <div class="legend-item">
+            <div class="legend-indicator">
+                <div class="legend-circle main"></div>
+            </div>
+            <span>Main Paper (Circle)</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-indicator legend-star">
+                <svg width="20" height="20" viewBox="0 0 24 24">
+                    <path d="M12,5 L13.25,9.25 L17.5,9.25 L14.12,11.75 L15.25,16 L12,13.5 L8.75,16 L9.88,11.75 L6.5,9.25 L10.75,9.25 Z" fill="#4285f4"></path>
+                </svg>
+            </div>
+            <span>Main Bridge Paper (Star)</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-indicator">
+                <div class="legend-circle referenced"></div>
+            </div>
+            <span>Referenced Paper (Circle)</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-indicator">
+                <div class="legend-circle citing"></div>
+            </div>
+            <span>Citing Paper (Circle)</span>
+        </div>
+        <div class="legend-item">
+            <div class="legend-indicator">
+                <div class="legend-diamond"></div>
+            </div>
+            <span>Bridge Paper (Diamond)</span>
+        </div>
+        <div class="legend-info">
+            <p>Node size also reflects importance:</p>
+            <p>• Main papers: Size may increase with citation count</p>
+            <p>• All node types can be scaled using the controls</p>
+        </div>
+        <div class="legend-item">
+            <div class="legend-indicator legend-arrow">
+                <svg width="50" height="20">
+                    <defs>
+                        <marker id="legend-arrow" viewBox="0 -5 10 10" refX="8" refY="0" 
+                                markerWidth="6" markerHeight="6" orient="auto">
+                            <path d="M0,-5L10,0L0,5" fill="#999"></path>
+                        </marker>
+                    </defs>
+                    <line x1="5" y1="10" x2="45" y2="10" stroke="#999" stroke-width="2" marker-end="url(#legend-arrow)"></line>
+                </svg>
+            </div>
+            <span>Citation Direction</span>
+        </div>
+    </div>
+    
+    <!-- New Paper Details Sidebar -->
+    <div id="paperDetailsPanel" class="paper-details-panel">
+        <div class="panel-header">
+            <h3>Paper Details</h3>
+            <button id="closePanelButton" class="close-button">×</button>
+        </div>
+        <div class="panel-content">
+            <div id="paperInfo">
+                <h4 id="paperTitle">Select a paper to view details</h4>
+                <p id="paperType"></p>
+                <p id="paperCitations"></p>
+                <div id="paperConcepts"></div>
+                <div class="paper-link">
+                    <a id="openAlexLink" href="#" target="_blank">View on OpenAlex</a>
+                </div>
+            </div>
+            
+            <div class="paper-lists">
+                <div class="paper-list">
+                    <h5>Citing Papers</h5>
+                    <ul id="citingPapersList"></ul>
+                </div>
+                <div class="paper-list">
+                    <h5>Referenced Papers</h5>
+                    <ul id="referencedPapersList"></ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- <div id="loadingIndicator">Loading data...</div> -->
+    
+    <div class="tooltip" style="display: none;"></div>
+
+    <script type="text/javascript">
+        window.__INITIAL_DATA__= JSON.parse(`{{ data | safe }}`);
+    </script>
+    <script src="/static/js/gra.js"></script>
+    
+</body>
+</html>

templates/homepage.html

@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PaperLens</title>
+    <link rel="stylesheet" href="/static/css/homestyle.css">
+    <link rel="stylesheet" href="/static/css/profilepage.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+   
+</head>
+<body>
+    <div id="loading-overlay" class="loading-overlay">
+      <div class="loading-container">
+        <div class="cyclone" id="cyclone"></div>
+        <div class="ground"></div>
+        <div class="loading-text" id="loading-text">Loading...</div>
+      </div>
+    </div>
+    <div class="paper-alert hide" id="paperAlert">
+        <div class="paper-pin"></div>
+        <div class="paper-clip"></div>
+        <div class="paper-lines"></div>
+        <div class="paper-alert-content">
+          <div class="alert-icon">
+            <i class="fas fa-exclamation-circle" id="alertIcon"></i>
+            <h4 class="alert-title" id="alertTitle">Authentication Required</h4>
+          </div>
+          <div class="msg handwritten" id="alertMessage">You must be Logged In to continue!</div>
+          <div class="close-btn">
+            <i class="fas fa-times"></i>
+          </div>
+        </div>
+      </div>
+    <header>
+        <div class="header-content">
+            <div class="logo-container">
+            <img src="/assets/logo.svg" style="height: 70px; width: auto;" alt="PaperLens Logo">
+            <h1 id="appname">PaperLens</h1>
+        </div>
+            <nav>
+                <a href="#interactive-book">Features</a>
+                <a href="#architecture ">Solutions</a>
+                <a href="#contacts">Contacts</a>
+                <a href="#feedback">Feedback</a>
+                <a href="/login"><button class="sign-in-btn" id="signInBtn">Sign In</button></a>
+                <a id="userProfile" class="profile-trigger">
+                    <span id="userName">dara</span>
+                    <img src="/assets/userPhoto.png" alt="Profile Picture" class="profile-pic" id="profile-pic">
+                    <i class="fas fa-chevron-down"></i>
+                </a>
+            </nav>
+        </div>
+    </header>
+
+    <div class="profile-container" id="profileContainer">  
+        <div class="profile-overlay" id="profileOverlay"></div>
+        <div class="profile-dropdown" id="profileDropdown">
+            <div class="profile-header">
+                <div class="profile-cover-photo"></div>
+                <div class="profile-avatar-container">
+                    <img src="/assets/default-user.jpg" alt="Profile Picture" id="profileAvatar">
+                </div>
+                <h2 id="profileHeaderName">Welcome, Dara</h2>
+            </div>
+
+            <div class="profile-tabs">
+                <button class="tab-btn active" data-tab="personal">Personal Info</button>
+                <button class="tab-btn" data-tab="activity">Activity</button>
+            </div>
+
+            <div class="tab-content active" id="personal-tab">
+                <div class="profile-field">
+                    <label><i class="fas fa-user"></i> Name</label>
+                    <input type="text" id="profileName" placeholder="Enter your name" disabled>
+                    <span class="edit-icon" onclick="enableEdit('profileName')" >
+                        <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
+                </div>
+                
+                <div class="profile-field">
+                    <label><i class="fas fa-envelope"></i> Email</label>
+                    <input type="email" id="profileEmail" disabled>
+                    <div class="verification-badge" id="emailVerified">
+                        <i class="fas fa-check-circle"></i> Verified
+                    </div>
+                </div>
+                
+                <div class="profile-field">
+                    <label><i class="fas fa-phone"></i> Phone No</label>
+                    <input type="text" id="profilePhone" placeholder="Enter phone number" disabled>
+                    <span class="edit-icon" onclick="enableEdit('profilePhone')">
+                        <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
+                </div>
+                
+                <div class="profile-field">
+                    <label><i class="fas fa-map-marker-alt"></i> Address</label>
+                    <input type="text" id="profileAddress" placeholder="Enter address" disabled>
+                    <span class="edit-icon" onclick="enableEdit('profileAddress')">
+                        <img src="/assets/editicon.png" alt="Edit" class="edit-img">
+                    </span>
+                </div>
+                
+                <div class="profile-field">
+                    <label><i class="fas fa-briefcase"></i> Profession</label>
+                    <input type="text" id="profileProfession" placeholder="Enter profession" disabled>
+                    <span class="edit-icon" onclick="enableEdit('profileProfession')">
+                        <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
+                </div>
+            </div>
+
+            
+
+            <div class="tab-content" id="activity-tab">
+                <div class="activity-summary">
+                    <div class="activity-stat">
+                        <i class="fas fa-search"></i>
+                        <span class="stat-value">32</span>
+                        <span class="stat-label">Searches</span>
+                    </div>
+                </div>
+
+                
+                
+                <h3 class="section-title">Recent Activity</h3>
+                <div class="timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-content">
+                            <h4>Research on Neural Networks</h4>
+                            <p>You searched for papers on neural networks in medicine</p>
+                            <span class="timeline-date"><i class="fas fa-clock"></i> 2 days ago</span>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-content">
+                            <h4>Saved Article</h4>
+                            <p>You saved "Emerging Trends in AI Ethics"</p>
+                            <span class="timeline-date"><i class="fas fa-clock"></i> 1 week ago</span>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-content">
+                            <h4>Profile Updated</h4>
+                            <p>You updated your professional information</p>
+                            <span class="timeline-date"><i class="fas fa-clock"></i> 2 weeks ago</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="action-buttons">
+                <button class="save-btn" id="saveBtn"><i class="fas fa-save"></i> Save Changes</button>
+                <button class="logout-btn" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</button>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <section class="hero">
+        <div class="orb"></div>
+        <div class="orb"></div>
+        <div class="orb"></div>
+        <h2> Charting Research Trajectories and 
+            Academic Linkages</h2>
+        <div class="liquid-container">
+            <div class="liquid-word active" id="word1">Innovative</div>
+            <div class="liquid-word" id="word2">Dynamic</div>
+            <div class="liquid-word" id="word3">Effortless</div>
+            <div class="splash-container" id="splashContainer"></div>
+        </div>
+        <div class="search-container">
+            <div class="searchBox">
+                <input id="searchy" class="searchInput"type="text" name="" placeholder="Search">
+                <div class="filter-container">
+                    <select id="year-filter" class="year-filter">
+                      <option value="">Year</option>
+                    </select>
+                </div>
+                <img id="searchbtn" src="/assets/searchy.png" >
+            </div>
+            
+            <!-- <button id="searchbtn">Search </button> -->
+            <button id="nextBtn" style="display: none;" >Next</button>
+        </div>
+        <div class="feature-selection-container">
+          <div class="feature-selection">
+              <div data-text="Trend Analysis" data-feature="trends" style="--r:-15;" class="glass">
+                  <img src="/assets/trenzkj.png" alt="Trend Analysis" class="glass-icon" />
+              </div>
+                
+                
+              <div data-text="Citation Network" data-feature="citations" style="--r:-15;" class="glass">
+                  <img src="/assets/icons8-hub-100.png" alt="Citation Network Analysis" class="glass-icon" />
+              </div>
+              <div data-text="Venue & Publisher Analysis" data-feature="venues" style="--r:-15;" class="glass">
+                  <img src="/assets/trenzkj.png" alt="Venue & Publisher Analysis" class="glass-icon" />
+              </div>
+          </div>
+          <div class="selection-message" id="selectionMessage">
+            You've selected <span id="selectedFeature">Trend Analysis</span>. Click Search to continue.
+          </div>
+        </div>
+    </section>
+
+<section id="interactive-book" class="interactive-book">
+        <h2 class="header-title">Features</h2>
+        <div class="carousel-container" id="carousel-container">
+            <!-- HTML Fix - Corrected slide 6 transform -->
+            <div class="carousel" id="carousel">
+                <div class="slide" style="transform: rotateY(0deg) translateZ(630px);">
+                    <h4 class="card-title" style="color: aqua;font-family: 'Bungee Shade';">What Is Trend Analysis?</h4>
+                    <p class="card-text" style="color:white; font:bolder">Trend Analysis via Topic Modeling in our project involves identifying and visualizing patterns in research papers for the given topic to uncover underlying themes and trends</p>
+                    <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
+                    <p style="color: white;">Underlying themes thorugh clusters and themes and the system categorizes these topics into three distant importance.
+                        - 🔥Hot topics ,🔄Neutraltopics ,💎Gap topics.
+                    </p>
+                </div>
+
+                <div class="slide" style="transform: rotateY(60deg) translateZ(630px);">
+                    <video src="/assets/d1.mp4" autoplay loop muted playsinline>
+                </div>
+
+                <div class="slide" style="transform: rotateY(120deg) translateZ(630px);">
+                    <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Citation Network</h4>
+                    <p style="color: white;">This network maps relationships between research papers based on citations, 
+                        revealing influential works, clusters of related studies, and knowledge flow within a field.<br></p>
+                    <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
+                    <ul style="color: white;">
+                        <li>Identify Main Papers</li>
+                        <li>Indentify Bridge Papers</li>
+                        <li>Filter Reference And Cited Papers</li>
+                      </ul>
+                </div>
+
+                <div class="slide" style="transform: rotateY(180deg) translateZ(630px);">
+                    <video src="/assets/d2.mp4" autoplay loop muted playsinline>
+                </div>
+
+                <div class="slide" style="transform: rotateY(240deg) translateZ(630px);">
+                    <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Host/Publisher Analysis</h4>
+                    <p style="color: white;">Venue and publisher analysis identifies key players in the research landscape, 
+                        such as institutions and journals, by visualizing clusters of host organizations or 
+                        publication venues based on their publication patterns and influence.
+                </p>
+                    <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
+                    <ul style="display: flex; gap: 20px; padding: 0; color:white;">
+                        <li>Status of Open To Access papers</li>
+                        <li>Types of papers</li>
+                        <li>Host and Publication Patterns</li>
+                      </ul>
+                </div>
+                
+
+                <div class="slide" style="transform: rotateY(300deg) translateZ(630px);">
+                    <video src="/assets/d3.mp4" autoplay loop muted playsinline>
+                </div>
+            </div>
+
+     
+            
+            <div class="pagination">
+                <div class="dot active" data-index="0"></div>
+                <div class="dot" data-index="1"></div>
+                <div class="dot" data-index="2"></div>
+                <div class="dot" data-index="3"></div>
+                <div class="dot" data-index="4"></div>
+                <div class="dot" data-index="5"></div>
+                <div class="dot" data-index="5"></div>
+            </div>
+        </div>
+        
+        <!-- Refined Open Book -->
+        <div class="book-container">
+            <div class="book">
+                <div class="book-left">
+                    <div class="page-content">
+                        <div class="page-line"></div>
+                        <div class="page-line"></div>
+                        <div class="page-line"></div>
+                    </div>
+                    <div class="page-fold"></div>
+                    <div class="page-number page-number-left">1</div>
+                </div>
+                
+                <div class="book-center"></div>
+                
+                <div class="page" id="page1">
+                    <div class="page-front">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-right">2</div>
+                    </div>
+                    <div class="page-back">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-left">3</div>
+                    </div>
+                    <div class="page-shadow"></div>
+                </div>
+                
+                <div class="page" id="page2">
+                    <div class="page-front">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-right">4</div>
+                    </div>
+                    <div class="page-back">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-left">5</div>
+                    </div>
+                    <div class="page-shadow"></div>
+                </div>
+                
+                <div class="page" id="page3">
+                    <div class="page-front">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-right">6</div>
+                    </div>
+                    <div class="page-back">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-left">7</div>
+                    </div>
+                    <div class="page-shadow"></div>
+                </div>
+                
+                <div class="page" id="page4">
+                    <div class="page-front">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-right">8</div>
+                    </div>
+                    <div class="page-back">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-left">9</div>
+                    </div>
+                    <div class="page-shadow"></div>
+                </div>
+                
+                <div class="page" id="page5">
+                    <div class="page-front">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-right">10</div>
+                    </div>
+                    <div class="page-back">
+                        <div class="page-content">
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                            <div class="page-line"></div>
+                        </div>
+                        <div class="page-fold"></div>
+                        <div class="page-number page-number-left">11</div>
+                    </div>
+                    <div class="page-shadow"></div>
+                </div>
+
+                
+                <div class="book-right">
+                    <div class="page-content">
+                        <div class="page-line"></div>
+                        <div class="page-line"></div>
+                        <div class="page-line"></div>
+                    </div>
+                    <div class="page-fold"></div>
+                    <div class="page-number page-number-right">12</div>
+                </div>
+
+                <div class="book-shadow"></div>
+            </div>
+            
+            <div class="navigation">
+                <button id="prevBtn">Previous</button>
+                <button id="nextBtn2">Next</button>
+            </div>
+        </div>
+    </section>
+
+    <section id="architecture" class="architecture">
+        <div class="architecture-description">
+            <h3>Our Innovative Research Architecture</h3>
+            <p>PaperLens architecture integrates data scraping from Semantic API and OpenAlex, followed by robust data cleaning, to enable three key features ,Trend Analysis, Citation Networks, and Host/venue insights through interactive, user-friendly dashboards.</p>
+            
+            <div class="architecture-features">
+              <div class="architecture-feature">
+                <h4 style="text-align: center;">Dynamic Data Collection</h4>
+                <p>Continuously harvests research papers from IEEE, ArXiv, PMC, JSTOR, and PLOS databases by using semantic scholar and openAlex api's to ensure comprehensive coverage across disciplines. Say no to  manual data loading.</p>
+              </div>
+              <div class="architecture-feature">
+                <h4 style="text-align: center;">Integrated Solution</h4>
+                <p>PaperLens integrates advanced science mapping features like trend analysis and citation networks into an intuitive platform, bridging gaps left by traditional tools that often require complex configurations or lack interactivity.</p>
+              </div>
+              <div class="architecture-feature">
+                <h4 style="text-align: center;">Ease Of Use </h4>
+                <p>Designed for simplicity, our tool allows users to type and search effortlessly, eliminating the need to learn heavy concepts, unlike many existing science mapping tools that demand extensive expertise for basic tasks.</p>
+              </div>
+            </div>
+        </div>
+      <div class="container">
+        <h2 style="margin-top: 30px;font-family: 'Bungee Shade', cursive;color:aqua">PaperLens</h2>
+        <svg class="paths-container">
+        </svg>
+        <div class="center-box">
+            <div class="settings-icon-wrapper">
+                <img src="/assets/setting.png" alt="Settings">
+            </div>
+        </div>
+      </div>
+    </section>
+    <section id="contacts" class="contacts">
+        <iframe src="/contact" frameborder="1" width="100%" height="800px" style="border: 8px solid #333; border-radius: 8px; margin: 20px 0;"></iframe>
+      </section>
+
+      <section id="feedback" class="feedback">
+        <iframe src="/feedback" frameborder="1" width="100%" height="1300px" style="border: 8px solid #333; border-radius: 8px; "></iframe>
+      </section>
+    
+    <footer>
+        <p>&copy; 2025 PaperLens. All rights reserved.</p>
+    </footer>
+    
+    
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
+    <script type="module" src="/static/js/home.js"></script>
+    <script type="module" src="/static/js/login.js"></script>
+    <script type="module" src="/static/js/useractivity.js"></script>
+</body>
+
+</html>

templates/loginpage.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login & Signup</title>
+    <link rel="stylesheet" href="/static/css/loginstyle.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+</head>
+<body>
+    <div class="paper-fall"></div>
+    <div class="wrapper">
+        <div class="form-container sign-up" id="seperate">
+            <form action="#">
+                <h2>sign up</h2>
+                <div class="form-group">
+                    <input type="text" required>
+                    <i class="fas fa-user"></i>
+                    <label for="">name</label>
+                </div>
+                <div class="form-group">
+                    <input type="email" required>
+                    <i class="fas fa-at"></i>
+                    <label for="">email</label>
+                </div>
+                <div class="form-group">
+                    <input type="password" required>
+                    <i class="fas fa-lock"></i>
+                    <label for="">password</label>
+                </div>
+                <div class="form-group">
+                    <input type="password" required>
+                    <i class="fas fa-lock"></i>
+                    <label for="">confirm password</label>
+                </div>
+                <button type="submit" class="btn">sign up</button>
+                <div class="link">
+                    <p style="color: white;">You already have an account?<a href="#" class="signin-link"> sign in</a></p>
+                </div>
+            </form>
+        </div>
+        <div class="form-container sign-in">
+            <form>
+                <h2>login</h2>
+                <div class="form-group">
+                    <input type="email" required>
+                    <i class="fas fa-at"></i>
+                    <label for="">email</label>
+                </div>
+                <div class="form-group">
+                    <input type="password" required>
+                    <i class="fas fa-lock"></i>
+                    <label for="">password</label>
+                </div>
+                <div class="forgot-pass">
+                    <a href="#">forgot password?</a>
+                </div>
+                <button type="submit" class="btn">login</button>
+                <div class="link">
+                    <p style="color: white;">Don't have an account?<a href="#" class="signup-link"> sign up</a></p>
+                </div>
+            </form>
+        </div>
+        <div class="form-container forgot-password">
+            <form action="#">
+                <h2>forgot password</h2>
+                <div class="form-group">
+                    <input type="email" required>
+                    <i class="fas fa-at"></i>
+                    <label for="">email</label>
+                </div>
+                <button type="submit" class="btn">submit</button>
+                <div class="link">
+                    <p style="color: white;">Go to Login Page ? <a href="#" class="forget-link">login</a></p>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <!-- Firebase Scripts -->
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
+    <script src="/static/js/login.js"></script>
+</body>
+</html>

venuAnalysis.py

@@ -0,0 +1,837 @@
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+from dash import Dash, dcc, html, Input, Output, State
+import numpy as np
+import random
+import math
+from collections import defaultdict
+import colorsys
+from fastapi import HTTPException
+from pydantic import BaseModel
+import threading
+import webbrowser
+import os
+import psutil
+import socket
+from fastapi import HTTPException, APIRouter, Request
+router = APIRouter()
+
+# Global variables to track dashboard state
+dashboard_port = 8050
+dashboard_process = None
+
+# MongoDB connection and data loader function
+async def load_data_from_mongodb(userId, topic, year, request:Request):
+    query = {
+        "userId": userId,
+        "topic": topic,
+        "year": year
+    }
+    collection = request.app.state.collection2
+    document = await collection.find_one(query)
+    if not document:
+        raise ValueError(f"No data found for userId={userId}, topic={topic}, year={year}")
+    # Extract metadata and convert to DataFrame
+    metadata = document.get("metadata", [])
+    df = pd.DataFrame(metadata)
+    df['publication_date'] = pd.to_datetime(df['publication_date'])
+    return df
+
+# Common functions (unchanged)
+def filter_by_date_range(dataframe, start_idx, end_idx):
+    start_date = date_range[start_idx]
+    end_date = date_range[end_idx]
+    return dataframe[(dataframe['publication_date'] >= start_date) & 
+                    (dataframe['publication_date'] <= end_date)]
+
+def generate_vibrant_colors(n):
+    base_colors = []
+    for i in range(n):
+        hue = (i / n) % 1.0
+        saturation = random.uniform(0.7, 0.9)
+        value = random.uniform(0.7, 0.9)
+        r, g, b = colorsys.hsv_to_rgb(hue, saturation, value)
+        vibrant_color = '#{:02x}{:02x}{:02x}'.format(
+            int(r * 255), 
+            int(g * 255), 
+            int(b * 255)
+        )
+        end_color_r = min(255, int(r * 255 * 1.1))
+        end_color_g = min(255, int(g * 255 * 1.1))
+        end_color_b = min(255, int(b * 255 * 1.1))
+        gradient_end = '#{:02x}{:02x}{:02x}'.format(end_color_r, end_color_g, end_color_b)
+        base_colors.append({
+            'start': vibrant_color,
+            'end': gradient_end
+        })
+    extended_colors = base_colors * math.ceil(n/10)
+    final_colors = []
+    for i in range(n):
+        color = extended_colors[i]
+        jitter = random.uniform(0.9, 1.1)
+        def jitter_color(hex_color):
+            r, g, b = [min(255, max(0, int(int(hex_color[j:j+2], 16) * jitter))) for j in (1, 3, 5)]
+            return f'rgba({r}, {g}, {b}, 0.9)'
+        final_colors.append({
+            'start': jitter_color(color['start']),
+            'end': jitter_color(color['end']).replace('0.9', '0.8')
+        })
+    return final_colors
+
+# Knowledge map creator function (unchanged)
+def create_knowledge_map(filtered_df, view_type='host'):
+    color_palette = {
+    'background': '#1E1E1E',        # Dark background (almost black)
+    'card_bg': '#1A2238',           # Bluish-black for cards (from your image)
+    'accent1': '#FF6A3D',           # Orange for headings (keeping from original)
+    'accent2': '#4ECCA3',           # Keeping teal for secondary elements
+    'accent3': '#9D84B7',           # Keeping lavender for tertiary elements
+    'text_light': '#FFFFFF',        # White text
+    'text_dark': '#E0E0E0',         # Light grey text for dark backgrounds
+}
+
+    if view_type == 'host':
+        group_col = 'host_organization_name'
+        id_col = 'host_organization_id'
+        title = "Host Organization Clusters"
+    else:
+        group_col = 'venue'
+        id_col = 'venue_id'
+        title = "Publication Venue Clusters"
+    summary = filtered_df.groupby(group_col).agg(
+        paper_count=('id', 'count'),
+        is_oa=('is_oa', 'mean'),
+        oa_status=('oa_status', lambda x: x.mode()[0] if not x.mode().empty else None),
+        entity_id=(id_col, 'first')
+    ).reset_index()
+    paper_count_groups = defaultdict(list)
+    for _, row in summary.iterrows():
+        paper_count_groups[row['paper_count']].append(row)
+    knowledge_map_fig = go.Figure()
+    sorted_counts = sorted(paper_count_groups.keys(), reverse=True)
+    vibrant_colors = generate_vibrant_colors(len(sorted_counts))
+    golden_angle = np.pi * (3 - np.sqrt(5))
+    spiral_coef = 150
+    cluster_metadata = {}
+    max_x, max_y = 500, 500
+    for i, count in enumerate(sorted_counts):
+        radius = np.sqrt(i) * spiral_coef
+        theta = golden_angle * i
+        cluster_x, cluster_y = radius * np.cos(theta), radius * np.sin(theta)
+        label_offset_angle = theta + np.pi/4
+        label_offset_distance = 80 + 4 * np.sqrt(len(paper_count_groups[count]))
+        label_x = cluster_x + label_offset_distance * np.cos(label_offset_angle)
+        label_y = cluster_y + label_offset_distance * np.sin(label_offset_angle)
+        cluster_metadata[count] = {
+            'center_x': cluster_x,
+            'center_y': cluster_y,
+            'entities': paper_count_groups[count],
+            'color': vibrant_colors[i]
+        }
+        entities = paper_count_groups[count]
+        num_entities = len(entities)
+        cluster_size = min(200, max(80, 40 + 8 * np.sqrt(num_entities)))
+        color = vibrant_colors[i]
+        knowledge_map_fig.add_shape(
+            type="circle",
+            x0=cluster_x - cluster_size/2, y0=cluster_y - cluster_size/2,
+            x1=cluster_x + cluster_size/2, y1=cluster_y + cluster_size/2,
+            fillcolor=color['end'].replace("0.8", "0.15"),
+            line=dict(color=color['start'], width=1.5),
+            opacity=0.7
+        )
+        knowledge_map_fig.add_trace(go.Scatter(
+            x=[cluster_x], y=[cluster_y],
+            mode='markers',
+            marker=dict(size=cluster_size, color=color['start'], opacity=0.3),
+            customdata=[[count, "cluster"]],
+            hoverinfo='skip'
+        ))
+        knowledge_map_fig.add_trace(go.Scatter(
+            x=[cluster_x, label_x], y=[cluster_y, label_y],
+            mode='lines',
+            line=dict(color=color['start'], width=1, dash='dot'),
+            hoverinfo='skip'
+        ))
+        knowledge_map_fig.add_annotation(
+            x=label_x, y=label_y,
+            text=f"{count} papers<br>{num_entities} {'orgs' if view_type == 'host' else 'venues'}",
+            showarrow=False,
+            font=dict(size=11, color='white'),
+            bgcolor=color['start'],
+            bordercolor='white',
+            borderwidth=1,
+            opacity=0.9
+        )
+        entities_sorted = sorted(entities, key=lambda x: x[group_col])
+        inner_spiral_coef = 0.4
+        for j, entity_data in enumerate(entities_sorted):
+            spiral_radius = np.sqrt(j) * cluster_size * inner_spiral_coef / np.sqrt(num_entities + 1)
+            spiral_angle = golden_angle * j
+            jitter_radius = random.uniform(0.9, 1.1) * spiral_radius
+            jitter_angle = spiral_angle + random.uniform(-0.1, 0.1)
+            entity_x = cluster_x + jitter_radius * np.cos(jitter_angle)
+            entity_y = cluster_y + jitter_radius * np.sin(jitter_angle)
+            node_size = min(18, max(8, np.sqrt(entity_data['paper_count']) * 1.5))
+            knowledge_map_fig.add_trace(go.Scatter(
+                x=[entity_x], y=[entity_y],
+                mode='markers',
+                marker=dict(
+                    size=node_size,
+                    color=color['start'],
+                    line=dict(color='rgba(255, 255, 255, 0.9)', width=1.5)
+                ),
+                customdata=[[
+                    entity_data[group_col],
+                    entity_data['paper_count'],
+                    entity_data['is_oa'],
+                    entity_data['entity_id'],
+                    count,
+                    "entity"
+                ]],
+                hovertemplate=(
+                    f"<b>{entity_data[group_col]}</b><br>"
+                    f"Papers: {entity_data['paper_count']}<br>"
+                    f"Open Access: {entity_data['is_oa']:.1%}<extra></extra>"
+                )
+            ))
+    max_x = max([abs(cluster['center_x']) for cluster in cluster_metadata.values()]) + 150 if cluster_metadata else 500
+    max_y = max([abs(cluster['center_y']) for cluster in cluster_metadata.values()]) + 150 if cluster_metadata else 500
+   # Update knowledge_map_fig layout
+    knowledge_map_fig.update_layout(
+    title=dict(
+        text=title, 
+        font=dict(size=22, family='"Poppins", sans-serif', color=color_palette['accent1'])  # Orange title
+    ),
+    plot_bgcolor='rgba(26, 34, 56, 1)',  # Bluish-black background
+    paper_bgcolor='rgba(26, 34, 56, 0.7)',
+    xaxis=dict(range=[-max(700, max_x), max(700, max_x)], showticklabels=False, showgrid=False),
+    yaxis=dict(range=[-max(500, max_y), max(500, max_y)], showticklabels=False, showgrid=False),
+    margin=dict(l=10, r=10, t=60, b=10),
+    height=700,
+    hovermode='closest',
+    showlegend=False,
+    font=dict(family='"Poppins", sans-serif', color=color_palette['text_light']),  # Light text
+)
+    return knowledge_map_fig, cluster_metadata
+
+# Other chart functions (unchanged)
+def create_oa_pie_fig(filtered_df):
+    color_palette = {
+        'background': '#1A2238',  # Dark blue background
+        'card_bg': '#1A2238',     # Changed to match the other chart
+        'accent1': '#FF6A3D',     # Vibrant orange for highlights
+        'accent2': '#4ECCA3',     # Teal for secondary elements
+        'accent3': '#9D84B7',     # Lavender for tertiary elements
+        'text_light': '#FFFFFF',  # White text
+        'text_dark': '#FFFFFF',   # Changed to white for better contrast
+    }
+    
+    fig = px.pie(
+        filtered_df, names='is_oa', title="Overall Open Access Status",
+        labels={True: "Open Access", False: "Not Open Access"},
+        color_discrete_sequence=[color_palette['accent2'], color_palette['accent1']]
+    )
+    
+    fig.update_traces(
+        textinfo='label+percent', 
+        textfont=dict(size=14, family='"Poppins", sans-serif'),
+        marker=dict(line=dict(color='#1A2238', width=2))  # Match background color
+    )
+    
+    fig.update_layout(
+        title=dict(
+            text="Overall Open Access Status", 
+            font=dict(size=18, family='"Poppins", sans-serif', color=color_palette['accent1'])  # Orange title
+        ),
+        font=dict(family='"Poppins", sans-serif', color=color_palette['text_light']),
+        paper_bgcolor=color_palette['background'],  # Dark background
+        plot_bgcolor=color_palette['background'],   # Dark background
+        margin=dict(t=50, b=20, l=20, r=20),
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=-0.2,
+            xanchor="center",
+            x=0.5,
+            font=dict(size=12, color=color_palette['text_light'])
+        )
+    )
+    
+    return fig
+def create_oa_status_pie_fig(filtered_df):
+    custom_colors = [
+       "#9D84B7", 
+        '#4DADFF', 
+        '#FFD166', 
+        '#06D6A0', 
+        '#EF476F'
+    ]
+    fig = px.pie(
+        filtered_df, 
+        names='oa_status', 
+        title="Open Access Status Distribution",
+        color_discrete_sequence=custom_colors
+    )
+    fig.update_traces(
+        textinfo='label+percent', 
+        insidetextorientation='radial',
+        textfont=dict(size=14, family='"Poppins", sans-serif'),
+        marker=dict(line=dict(color='#FFFFFF', width=2))
+    )
+    fig.update_layout(
+        title=dict(
+            text="Open Access Status Distribution", 
+            font=dict(size=18, family='"Poppins", sans-serif', color="#FF6A3D")
+        ),
+        font=dict(family='"Poppins", sans-serif', color='#FFFFFF'),
+        paper_bgcolor='#1A2238',  # Bluish-black background
+        plot_bgcolor='#1A2238',
+        margin=dict(t=50, b=20, l=20, r=20),
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=-0.2,
+            xanchor="center",
+            x=0.5,
+            font=dict(size=12, color='#FFFFFF')
+        )
+    )
+    return fig
+def create_type_bar_fig(filtered_df):
+    type_counts = filtered_df['type'].value_counts()
+    vibrant_colors = [
+        '#4361EE', '#3A0CA3', '#4CC9F0', 
+        '#F72585', '#7209B7', '#B5179E', 
+        '#480CA8', '#560BAD', '#F77F00'
+    ]
+    fig = px.bar(
+        type_counts, 
+        title="Publication Types",
+        labels={'value': 'Count', 'index': 'Type'},
+        color=type_counts.index,
+        color_discrete_sequence=vibrant_colors[:len(type_counts)]
+    )
+    fig.update_layout(
+        title=dict(
+            text="Publication Types", 
+            font=dict(size=20, family='"Poppins", sans-serif', color="#FF6A3D")  # Larger font size
+        ),
+        xaxis_title="Type", 
+        yaxis_title="Count",
+        font=dict(family='"Poppins", sans-serif', color="#FFFFFF", size=14),  # Increased font size
+        paper_bgcolor='#1A2238',  # Consistent dark background
+        plot_bgcolor='#1A2238',  # Consistent dark background
+        margin=dict(t=70, b=60, l=60, r=40),  # Increased margins
+        xaxis=dict(
+            tickfont=dict(size=14, color="#FFFFFF"),  # Increased tick font size
+            tickangle=-45,
+            gridcolor='rgba(255, 255, 255, 0.1)'  # Lighter grid lines
+        ),
+        yaxis=dict(
+            tickfont=dict(size=14, color="#FFFFFF"),  # Increased tick font size
+            gridcolor='rgba(255, 255, 255, 0.1)'  # Lighter grid lines
+        ),
+        bargap=0.3,  # Increased bar gap
+    )
+    fig.update_traces(
+        marker_line_width=1,
+        marker_line_color='rgba(0, 0, 0, 0.5)',
+        opacity=0.9,
+        hovertemplate='%{y} publications<extra></extra>',
+        texttemplate='%{y}',  # Add text labels
+        textposition='outside',  # Position labels outside bars
+        textfont=dict(size=14, color='white')  # Text label formatting
+    )
+    return fig
+
+# Function to check if port is in use
+def is_port_in_use(port):
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+        return s.connect_ex(('localhost', port)) == 0
+
+# Function to find a free port
+def find_free_port(start_port=8050):
+    port = start_port
+    while is_port_in_use(port):
+        port += 1
+    return port
+
+# Function to shutdown any existing dashboard
+def shutdown_existing_dashboard():
+    global dashboard_process
+    
+    # First, check if our port is in use
+    if is_port_in_use(dashboard_port):
+        try:
+            # Kill processes using the port
+            for proc in psutil.process_iter(['pid', 'name', 'connections']):
+                try:
+                    for conn in proc.connections():
+                        if conn.laddr.port == dashboard_port:
+                            print(f"Terminating process {proc.pid} using port {dashboard_port}")
+                            proc.terminate()
+                            proc.wait(timeout=3)
+                except (psutil.NoSuchProcess, psutil.AccessDenied, psutil.ZombieProcess):
+                    pass
+        except Exception as e:
+            print(f"Error freeing port {dashboard_port}: {e}")
+    
+    # If we're tracking a dashboard process, try to terminate it
+    if dashboard_process is not None:
+        try:
+            # Kill the process if it's still running
+            if dashboard_process.is_alive():
+                parent = psutil.Process(os.getpid())
+                children = parent.children(recursive=True)
+                for process in children:
+                    try:
+                        process.terminate()
+                    except:
+                        pass
+            dashboard_process = None
+        except Exception as e:
+            print(f"Error terminating dashboard process: {e}")
+            dashboard_process = None  # Reset the reference anyway
+
+# Pydantic model for request validation
+class DashboardRequest(BaseModel):
+    userId: str
+    topic: str
+    year: int
+
+@router.post("/load_and_display_dashboard/")
+async def load_and_display_dashboard(request: DashboardRequest, req:Request):
+    global dashboard_process, dashboard_port
+    
+    # Make sure any existing dashboard is shut down
+    shutdown_existing_dashboard()
+    
+    # Find a free port
+    dashboard_port = find_free_port()
+    
+    try:
+        # Load data from MongoDB
+        df = await load_data_from_mongodb(request.userId, request.topic, request.year, req)
+        
+        # Get date range for the slider
+        global min_date, max_date, date_range, date_marks
+        min_date = df['publication_date'].min()
+        max_date = df['publication_date'].max()
+        date_range = pd.date_range(start=min_date, end=max_date, freq='MS')
+        date_marks = {i: date.strftime('%b %Y') for i, date in enumerate(date_range)}
+        
+        # Function to create and run the dashboard
+        def create_and_run_dashboard():
+            # Create a new app instance
+            app = Dash(__name__, suppress_callback_exceptions=True)
+            app.cluster_metadata = {}
+            color_palette = {
+                    'background': '#1A2238',  # Dark blue background
+                    'card_bg': '#F8F8FF',      # Off-white for cards
+                    'accent1': '#FF6A3D',      # Vibrant orange for highlights
+                    'accent2': '#4ECCA3',      # Teal for secondary elements
+                    'accent3': '#9D84B7',      # Lavender for tertiary elements
+                    'text_light': '#FFFFFF',   # White text
+                    'text_dark': '#2D3748',    # Dark gray text
+                }
+
+                # Define modern styling for containers
+            container_style = {
+                    'padding': '5px', 
+                    'backgroundColor': color_palette['text_dark'], 
+                    'borderRadius': '12px', 
+                    'boxShadow': '0 4px 12px rgba(0, 0, 0, 0.15)', 
+                    'marginBottom': '25px',
+                    'border': f'1px solid rgba(255, 255, 255, 0.2)',
+                    
+                }
+
+            hidden_style = {**container_style, 'display': 'none'}
+            visible_style = {**container_style}
+
+            # Create a modern, attractive layout
+            app.layout = html.Div([
+                    # Header section with gradient background
+                    html.Div([
+                        html.H1(request.topic.capitalize() + " Analytics Dashboard", style={
+                            'textAlign': 'center', 
+                            'marginBottom': '10px',
+                            'color': color_palette['accent1'],
+                            'fontSize': '2.5rem',
+                            'fontWeight': '700',
+                            'letterSpacing': '0.5px',
+                        }),
+                        html.Div([
+                            html.P("Research Publication Analysis & Knowledge Mapping", style={
+                                'textAlign': 'center',
+                                'color': color_palette['text_light'],
+                                'opacity': '0.8',
+                                'fontSize': '1.2rem',
+                                'marginTop': '0',
+                            })
+                        ])
+                    ], style={
+                        'background': f'linear-gradient(135deg, {color_palette["background"]}, #364156)',
+                        'padding': '30px 20px',
+                        'borderRadius': '12px',
+                        'marginBottom': '25px',
+                        'boxShadow': '0 4px 20px rgba(0, 0, 0, 0.2)',
+                    }),
+                    
+                    # Controls section
+                    html.Div([
+                        html.Div([
+                            html.Button(
+                                id='view-toggle',
+                                children='Switch to Venue View',
+                                style={
+                                    'padding': '12px 20px',
+                                    'fontSize': '1rem',
+                                    'borderRadius': '8px',
+                                    'border': 'none',
+                                    'backgroundColor': color_palette['accent1'],
+                                    'color': 'white',
+                                    'cursor': 'pointer',
+                                    'boxShadow': '0 2px 5px rgba(0, 0, 0, 0.1)',
+                                    'transition': 'all 0.3s ease',
+                                    'marginRight': '20px',
+                                    'fontWeight': '500',
+                                }
+                            ),
+                            html.H3("Filter by Publication Date", style={
+                                'marginBottom': '15px',
+                                'color': color_palette['text_dark'],
+                                'fontSize': '1.3rem',
+                                'fontWeight': '600',
+                            }),
+                        ], style={'display': 'flex', 'alignItems': 'center', 'marginBottom': '15px'}),
+                        
+                        dcc.RangeSlider(
+                            id='date-slider',
+                            min=0,
+                            max=len(date_range) - 1,
+                            value=[0, len(date_range) - 1],
+                            marks=date_marks if len(date_marks) <= 12 else {
+                                i: date_marks[i] for i in range(0, len(date_range), max(1, len(date_range) // 12))
+                            },
+                            step=1,
+                            tooltip={"placement": "bottom", "always_visible": True},
+                            updatemode='mouseup'
+                        ),
+                        html.Div(id='date-range-display', style={
+                            'textAlign': 'center', 
+                            'marginTop': '12px', 
+                            'fontSize': '1.1rem',
+                            'fontWeight': '500',
+                            'color': color_palette['accent1'],
+                        })
+                    ], style={**container_style, 'marginBottom': '25px'}),
+                    
+                    # Knowledge map - main visualization
+                    html.Div([
+                        dcc.Graph(
+                            id='knowledge-map',
+                            style={'width': '100%', 'height': '700px'},
+                            config={'scrollZoom': True, 'displayModeBar': True, 'responsive': True}
+                        )
+                    ], style={
+                        **container_style, 
+                        'height': '750px', 
+                        'marginBottom': '25px',
+                        'background': f'linear-gradient(to bottom right, {color_palette["card_bg"]}, #F0F0F8)',
+                    }),
+                    
+                    # Details container - appears when clicking elements
+                    html.Div([
+                        html.H3(id='details-title', style={
+                            'marginBottom': '15px',
+                            'color': color_palette['accent1'],
+                            'fontSize': '1.4rem',
+                            'fontWeight': '600',
+                        }),
+                        html.Div(id='details-content', style={
+                            'maxHeight': '350px', 
+                            'overflowY': 'auto',
+                            'padding': '10px',
+                            'borderRadius': '8px',
+                            'backgroundColor': 'rgba(255, 255, 255, 0.7)',
+                        })
+                    ], id='details-container', style=hidden_style),
+                    
+                    # Charts in flex container
+                    html.Div([
+                        html.Div([
+                            dcc.Graph(
+                                id='oa-pie-chart', 
+                                style={'width': '100%', 'height': '350px'},
+                                config={'displayModeBar': False, 'responsive': True}
+                            )
+                        ], style={
+                            'flex': 1, 
+                            **container_style, 
+                            'margin': '0 10px', 
+                            'height': '400px',
+                            'transition': 'transform 0.3s ease',
+                            ':hover': {'transform': 'translateY(-5px)'},
+                        }),
+                        html.Div([
+                            dcc.Graph(
+                                id='oa-status-pie-chart', 
+                                style={'width': '100%', 'height': '350px'},
+                                config={'displayModeBar': False, 'responsive': True}
+                            )
+                        ], style={
+                            'flex': 1, 
+                            **container_style, 
+                            'margin': '0 10px', 
+                            'height': '400px',
+                            'transition': 'transform 0.3s ease',
+                            ':hover': {'transform': 'translateY(-5px)'},
+                        })
+                    ], style={'display': 'flex', 'marginBottom': '25px', 'height': '420px'}),
+                    
+                    # Bar chart container
+                  # Increase bar chart height and improve visibility
+                    html.Div([
+                            dcc.Graph(
+                                id='type-bar-chart', 
+                                style={'width': '100%', 'height': '50vh'},  # Reduced from 60vh
+                                config={'displayModeBar': False, 'responsive': True}
+                            )
+                        ], style={
+                            **container_style,
+                            'height': '500px',  # Decreased from 650px
+                            'background': 'rgba(26, 34, 56, 1)',
+                            'marginBottom': '10px',  # Added smaller bottom margin
+                        }), 
+                    # Store components for state
+                    dcc.Store(id='filtered-df-info'),
+                    dcc.Store(id='current-view', data='host'),
+                    html.Div(id='load-trigger', children='trigger-initial-load', style={'display': 'none'})
+                ], style={
+                    'fontFamily': '"Poppins", "Segoe UI", Arial, sans-serif',
+                    'backgroundColor': '#121212',  # Dark background
+                    'backgroundImage': 'none',     # Remove gradient
+                    'padding': '30px',
+                    'maxWidth': '1800px',
+                    'margin': '0 auto',
+                    'minHeight': '100vh',
+                    'color': color_palette['text_light'],
+                    'paddingBottom': '10px', 
+                })
+                            
+
+            
+            @app.callback(
+                [Output('current-view', 'data'),
+                 Output('view-toggle', 'children')],
+                [Input('view-toggle', 'n_clicks')],
+                [State('current-view', 'data')]
+            )
+            def toggle_view(n_clicks, current_view):
+                if not n_clicks:
+                    return current_view, 'Switch to Venue View' if current_view == 'host' else 'Switch to Host View'
+                new_view = 'venue' if current_view == 'host' else 'host'
+                new_button_text = 'Switch to Host View' if new_view == 'venue' else 'Switch to Venue View'
+                return new_view, new_button_text
+            
+            @app.callback(
+                Output('date-range-display', 'children'),
+                [Input('date-slider', 'value')]
+            )
+            def update_date_range_display(date_range_indices):
+                start_date = date_range[date_range_indices[0]]
+                end_date = date_range[date_range_indices[1]]
+                return f"Selected period: {start_date.strftime('%b %Y')} to {end_date.strftime('%b %Y')}"
+            
+            @app.callback(
+                [Output('knowledge-map', 'figure'),
+                 Output('oa-pie-chart', 'figure'),
+                 Output('oa-status-pie-chart', 'figure'),
+                 Output('type-bar-chart', 'figure'),
+                 Output('filtered-df-info', 'data'),
+                 Output('details-container', 'style')],
+                [Input('date-slider', 'value'),
+                 Input('current-view', 'data'),
+                 Input('load-trigger', 'children')]  # Added trigger
+            )
+            def update_visualizations(date_range_indices, current_view, _):
+                filtered_df = filter_by_date_range(df, date_range_indices[0], date_range_indices[1])
+                knowledge_map_fig, cluster_metadata = create_knowledge_map(filtered_df, current_view)
+                app.cluster_metadata = cluster_metadata
+                filtered_info = {
+                    'start_idx': date_range_indices[0],
+                    'end_idx': date_range_indices[1],
+                    'start_date': date_range[date_range_indices[0]].strftime('%Y-%m-%d'),
+                    'end_date': date_range[date_range_indices[1]].strftime('%Y-%m-%d'),
+                    'record_count': len(filtered_df),
+                    'view_type': current_view
+                }
+                return (
+                    knowledge_map_fig,
+                    create_oa_pie_fig(filtered_df),
+                    create_oa_status_pie_fig(filtered_df),
+                    create_type_bar_fig(filtered_df),
+                    filtered_info,
+                    hidden_style
+                )
+            
+            @app.callback(
+                [Output('details-container', 'style', allow_duplicate=True),
+                 Output('details-title', 'children'),
+                 Output('details-content', 'children')],
+                [Input('knowledge-map', 'clickData')],
+                [State('filtered-df-info', 'data')],
+                prevent_initial_call=True
+            )
+            def display_details(clickData, filtered_info):
+                if not clickData or not filtered_info:
+                    return hidden_style, "", []
+                customdata = clickData['points'][0]['customdata']
+                view_type = filtered_info['view_type']
+                entity_type = "Organization" if view_type == 'host' else "Venue"
+                if len(customdata) >= 2 and customdata[-1] == "cluster":
+                    count = customdata[0]
+                    if count not in app.cluster_metadata:
+                        return hidden_style, "", []
+                    entities = app.cluster_metadata[count]['entities']
+                    color = app.cluster_metadata[count]['color']['start']
+                    table_header = [
+                        html.Thead(html.Tr([
+                            html.Th(f"{entity_type} Name", style={'padding': '8px'}),
+                            html.Th(f"{entity_type} ID", style={'padding': '8px'}),
+                            html.Th("Papers", style={'padding': '8px', 'textAlign': 'center'}),
+                            html.Th("Open Access %", style={'padding': '8px', 'textAlign': 'center'})
+                        ], style={'backgroundColor': color_palette['accent1'], 'color': 'white'}))
+                    ]
+
+                    # Update row styles
+                    row_style = {'backgroundColor': '#232D42'} if i % 2 == 0 else {'backgroundColor': '#1A2238'}
+                    rows = []
+                    for i, entity in enumerate(sorted(entities, key=lambda x: x['paper_count'], reverse=True)):
+                        row_style = {'backgroundColor': '#f9f9f9'} if i % 2 == 0 else {'backgroundColor': 'white'}
+                        entity_name_link = html.A(
+                            entity[f"{view_type}_organization_name" if view_type == 'host' else "venue"],
+                            href=entity['entity_id'],
+                            target="_blank",
+                            style={'color': color, 'textDecoration': 'underline'}
+                        )
+                        entity_id_link = html.A(
+                            entity['entity_id'].split('/')[-1],
+                            href=entity['entity_id'],
+                            target="_blank",
+                            style={'color': color, 'textDecoration': 'underline'}
+                        )
+                        rows.append(html.Tr([
+                            html.Td(entity_name_link, style={'padding': '8px'}),
+                            html.Td(entity_id_link, style={'padding': '8px'}),
+                            html.Td(entity['paper_count'], style={'padding': '8px', 'textAlign': 'center'}),
+                            html.Td(f"{entity['is_oa']:.1%}", style={'padding': '8px', 'textAlign': 'center'})
+                        ], style=row_style))
+                    table = html.Table(table_header + [html.Tbody(rows)], style={
+                        'width': '100%',
+                        'borderCollapse': 'collapse',
+                        'boxShadow': '0 1px 3px rgba(0,0,0,0.1)'
+                    })
+                    return (
+                        visible_style,
+                        f"{entity_type}s with {count} papers",
+                        [html.P(f"Showing {len(entities)} {entity_type.lower()}s during selected period"), table]
+                    )
+                elif len(customdata) >= 6 and customdata[-1] == "entity":
+                    entity_name = customdata[0]
+                    entity_id = customdata[3]
+                    cluster_count = customdata[4]
+                    color = app.cluster_metadata[cluster_count]['color']['start']
+                    if view_type == 'host':
+                        entity_papers = df[df['host_organization_name'] == entity_name].copy()
+                    else:
+                        entity_papers = df[df['venue'] == entity_name].copy()
+                    entity_papers = entity_papers[
+                        (entity_papers['publication_date'] >= pd.to_datetime(filtered_info['start_date'])) & 
+                        (entity_papers['publication_date'] <= pd.to_datetime(filtered_info['end_date']))
+                    ]
+                    entity_name_link = html.A(
+                        entity_name,
+                        href=entity_id,
+                        target="_blank",
+                        style={'color': color, 'textDecoration': 'underline', 'fontSize': '1.2em'}
+                    )
+                    entity_id_link = html.A(
+                        entity_id.split('/')[-1],
+                        href=entity_id,
+                        target="_blank",
+                        style={'color': color, 'textDecoration': 'underline'}
+                    )
+                    header = [
+                        html.Div([
+                            html.Span("Name: ", style={'fontWeight': 'bold'}),
+                            entity_name_link
+                        ], style={'marginBottom': '10px'}),
+                        html.Div([
+                            html.Span("ID: ", style={'fontWeight': 'bold'}),
+                            entity_id_link
+                        ], style={'marginBottom': '10px'}),
+                        html.Div([
+                            html.Span(f"Papers: {len(entity_papers)}", style={'marginRight': '20px'}),
+                        ], style={'marginBottom': '20px'})
+                    ]
+                    table_header = [
+                        html.Thead(html.Tr([
+                            html.Th("Paper ID", style={'padding': '8px'}),
+                            html.Th("Type", style={'padding': '8px'}),
+                            html.Th("OA Status", style={'padding': '8px', 'textAlign': 'center'}),
+                            html.Th("Publication Date", style={'padding': '8px', 'textAlign': 'center'})
+                        ], style={'backgroundColor': color, 'color': 'white'}))
+                    ]
+                    rows = []
+                    for i, (_, paper) in enumerate(entity_papers.sort_values('publication_date', ascending=False).iterrows()):
+                        row_style = {'backgroundColor': '#232D42'} if i % 2 == 0 else {'backgroundColor': '#1A2238'}
+                        paper_link = html.A(
+                            paper['id'],
+                            href=paper['id'],
+                            target="_blank",
+                            style={'color': color, 'textDecoration': 'underline'}
+                        )
+                        rows.append(html.Tr([
+                            html.Td(paper_link, style={'padding': '8px'}),
+                            html.Td(paper['type'], style={'padding': '8px'}),
+                            html.Td(paper['oa_status'], style={'padding': '8px', 'textAlign': 'center'}),
+                            html.Td(paper['publication_date'].strftime('%Y-%m-%d'), style={'padding': '8px', 'textAlign': 'center'})
+                        ], style=row_style))
+                    table = html.Table(table_header + [html.Tbody(rows)], style={
+                        'width': '100%',
+                        'borderCollapse': 'collapse',
+                        'boxShadow': '0 1px 3px rgba(0,0,0,0.1)'
+                    })
+                    with open("dashboard.html", "w") as f:
+                        f.write(app.index())
+                    print("yup saved!!")    
+                    return visible_style, f"{entity_type} Papers", header + [table]
+                return hidden_style, "", []
+            
+            # Start the Dash app
+            app.run_server(debug=False, port=dashboard_port, use_reloader=False)
+        
+        # Run the dashboard in a separate process
+        dashboard_process = threading.Thread(target=create_and_run_dashboard)
+        dashboard_process.daemon = True
+        dashboard_process.start()
+        
+        # Open the browser after a delay
+        def open_browser():
+            try:
+                webbrowser.open_new(f"http://127.0.0.1:{dashboard_port}/")
+            except:
+                pass
+        
+        threading.Timer(1.5, open_browser).start()
+        
+        return {"status": "success", "message": f"Dashboard loaded successfully on port {dashboard_port}."}
+    
+    except Exception as e:
+        # Clean up in case of failure
+        shutdown_existing_dashboard()
+        raise HTTPException(status_code=400, detail=str(e))

venuedata.py

@@ -0,0 +1,211 @@
+from fastapi import HTTPException, APIRouter, Request
+from pydantic import BaseModel
+import requests
+from time import sleep
+import spacy
+from pymongo import MongoClient
+
+# Load SciSpacy model
+nlp = spacy.load("en_core_sci_sm")
+
+router = APIRouter()
+
+# Pydantic model for request body
+class SearchRequest(BaseModel):
+    topic: str
+    year: int
+    userId: str  # Add userId to the request body
+
+
+
+# Function to extract keywords from user topic
+def extract_keywords(text):
+    doc = nlp(text.lower())
+    noun_chunks = [chunk.text.strip() for chunk in doc.noun_chunks]
+    individual_tokens = [
+        token.text.strip() for token in doc 
+        if token.pos_ in ["NOUN", "VERB"] and not token.is_stop
+    ]
+    keywords = set(noun_chunks + individual_tokens)
+
+    cleaned_keywords = set()
+    for keyword in keywords:
+        if not any(keyword in chunk and keyword != chunk for chunk in noun_chunks):
+            cleaned_keywords.add(keyword)
+    return sorted(list(cleaned_keywords))
+
+# Fetch works from OpenAlex based on refined topic
+def fetch_works(refined_query, year, per_page=200):
+    OPENALEX_API_URL = f"https://api.openalex.org/works"
+    params = {
+        "filter": f"title_and_abstract.search:{refined_query},publication_year:{year}",
+        "per_page": per_page,
+        "cursor": "*"
+    }
+    all_results = []
+
+    while True:
+        response = requests.get(OPENALEX_API_URL, params=params)
+        if response.status_code != 200:
+            raise HTTPException(status_code=response.status_code, detail="Error fetching data from OpenAlex")
+        
+        data = response.json()
+        all_results.extend(data.get("results", []))
+
+        next_cursor = data.get("meta", {}).get("next_cursor")
+        if next_cursor:
+            params["cursor"] = next_cursor
+        else:
+            break
+
+        sleep(0.2)
+
+    return all_results
+
+# Batch fetch host organization details for sources
+def batch_fetch_host_org_details(source_ids):
+    host_org_map = {}
+    batch_size = 100
+    for i in range(0, len(source_ids), batch_size):
+        batch = source_ids[i:i + batch_size]
+        openalex_ids = [src_id.split("/")[-1] for src_id in batch]
+        filter_query = "|".join(openalex_ids)
+        url = f"https://api.openalex.org/sources?filter=openalex_id:{filter_query}"
+        response = requests.get(url)
+        if response.status_code == 200:
+            sources = response.json().get("results", [])
+            for source in sources:
+                source_id = source.get("id")
+                # Handle the case where host_organization is a string (URL)
+                host_org_id = source.get("host_organization", "unknown")
+                host_org_name = source.get("host_organization_name", "unknown")
+                
+                host_org_map[source_id] = {
+                    "host_organization_name": host_org_name,
+                    "host_organization_id": host_org_id
+                }
+            sleep(0.1)
+        else:
+            raise HTTPException(status_code=response.status_code, detail="Error fetching host organization details")
+    return host_org_map
+
+# Extract metadata from works
+def extract_metadata(works):
+    source_ids = list({
+        work["primary_location"]["source"]["id"]
+        for work in works 
+        if work.get("primary_location") and work["primary_location"].get("source")
+    })
+    
+    # Fetch host organization details (name and ID)
+    host_org_map = batch_fetch_host_org_details(source_ids)
+    
+    metadata = []
+    for work in works:
+        primary_location = work.get("primary_location", {}) or {}
+        source = primary_location.get("source", {}) or {}
+
+        source_id = source.get("id")
+        host_org_details = host_org_map.get(source_id, {"host_organization_name": "Unknown", "host_organization_id": "Unknown"})
+
+        # Extract type field
+        work_type = (
+            work.get("type") or  # Check the top-level "type" field
+            primary_location.get("type") or  # Check "type" in primary_location
+            source.get("type") or  # Check "type" in source
+            "unknown"  # Fallback value
+        )
+
+        metadata.append({
+            "id": work.get("id"),
+            "is_oa": work.get("open_access", {}).get("is_oa", False),
+            "oa_status": work.get("open_access", {}).get("oa_status", "unknown"),
+            "venue": source.get("display_name", "unknown"),
+            "venue_id": source_id or "unknown",
+            "host_organization_name": host_org_details["host_organization_name"],
+            "host_organization_id": host_org_details["host_organization_id"],
+            "type": work_type,
+            "publication_date": work.get("publication_date", "unknown"),
+        })
+    return metadata
+
+# Clean metadata by removing entries with unknown venue and host organization name
+def clean_metadata(metadata):
+    initial_count = len(metadata)
+    cleaned_metadata = [
+        entry for entry in metadata
+        if not (entry["venue"] == "unknown" and entry["host_organization_name"] == "Unknown")
+    ]
+    final_count = len(cleaned_metadata)
+    print(f"Total papers before cleaning: {initial_count}")
+    print(f"Total papers after cleaning: {final_count}")
+    return cleaned_metadata
+
+# Save metadata to MongoDB
+async def save_to_mongodb(userId, topic, year, metadata,request:Request):
+    document = {
+        "userId": userId,
+        "topic": topic,
+        "year": year,
+        "metadata": metadata
+    }
+    collection = request.app.state.collection2
+    await collection.update_one(
+        {"userId": userId, "topic": topic, "year": year},
+        {"$set": document},
+        upsert=True
+    )
+    print(f"Data saved to MongoDB for userId: {userId}, topic: {topic}, year: {year}")
+
+# FastAPI endpoint
+@router.post("/search/")
+async def search(data:SearchRequest,request: Request):
+    userId = data.userId
+    topic = data.topic
+    year = data.year
+
+    # Extract keywords and refine query
+    keywords = extract_keywords(topic)
+    refined_query = "+".join(keywords)
+    print(f"Using refined search query: {refined_query}")
+
+    # Fetch works from OpenAlex
+    works = fetch_works(refined_query, year)
+    if not works:
+        raise HTTPException(status_code=404, detail="No works found for the given query")
+
+    # Extract metadata
+    metadata = extract_metadata(works)
+
+    # Clean metadata
+    cleaned_metadata = clean_metadata(metadata)
+
+    # Save metadata to MongoDB
+    await save_to_mongodb(userId, topic, year, cleaned_metadata,request)
+
+    # Return metadata as JSON response
+    return {"message": f"Data saved to MongoDB for userId: {userId}, topic: {topic}, year: {year}", "metadata": cleaned_metadata}
+
+@router.post("/check-data-exists-venue/")
+async def check_data_exists(request_data: SearchRequest, request:Request):
+    # Create a query to check if the data exists
+    query = {
+        "userId": request_data.userId,
+        "topic": request_data.topic
+    }
+    
+    # Add year to query if it's provided
+    if request_data.year:
+        query["year"] = request_data.year
+    
+    collection = request.app.state.collection2
+    # Check if a document matching the query exists
+    document = await collection.find_one(query)  # Await the async operation
+    
+    # Return result
+    return {
+        "exists": document is not None,
+        "message": "Data found" if document else "Data not found"
+    }
+    
+