Upload 28 files

core/misc/add_images.py

@@ -0,0 +1,31 @@
+import pandas as pd
+import requests
+
+# Load the movies dataset
+movies = pd.read_csv('processed_movies.csv')
+
+# TMDb API key and base URL
+api_key = '7283d6e4bfd781f23c42795dcfe9b378'
+base_url = 'https://api.themoviedb.org/3'
+poster_base_url = 'https://image.tmdb.org/t/p/w500'
+
+def fetch_poster_url(title):
+    search_url = f"{base_url}/search/movie?api_key={api_key}&query={title}"
+    response = requests.get(search_url).json()
+    results = response.get('results', [])
+    if results:
+        poster_path = results[0].get('poster_path')
+        if poster_path:
+            return poster_base_url + poster_path
+    return None
+
+# Fetch and add poster URLs
+poster_urls = []
+for title in movies['title']:
+    poster_url = fetch_poster_url(title)
+    poster_urls.append(poster_url)
+
+movies['poster_url'] = poster_urls
+
+# Save the updated dataset
+movies.to_csv('processed_movies_with_posters.csv', index=False)

core/misc/data_processing.py

@@ -0,0 +1,23 @@
+import pandas as pd
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.metrics.pairwise import linear_kernel
+import joblib
+
+# Load the dataset
+movies = pd.read_csv('movies.csv')
+
+# Convert the titles to lowercase
+movies['title'] = movies['title'].str.lower()
+
+# Preprocess the dataset
+movies['overview'] = movies['overview'].fillna('')
+tfidf = TfidfVectorizer(stop_words='english')
+tfidf_matrix = tfidf.fit_transform(movies['overview'])
+
+# Compute the cosine similarity matrix
+cosine_sim = linear_kernel(tfidf_matrix, tfidf_matrix)
+
+# Save the cosine similarity matrix and movies DataFrame
+joblib.dump(cosine_sim, 'cosine_sim.pkl')
+movies.to_csv('processed_movies.csv', index=False)
+

core/model/cosine_sim.pkl

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

docker/Dockerfile

@@ -0,0 +1,23 @@
+# Use the official Python image from Docker Hub as the base image
+FROM python:3.12-slim
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy all the contents from your local project directory to the container
+COPY . /app
+
+# Install the dependencies listed in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port Flask will run on (default: 5000)
+EXPOSE 7860
+
+# Set environment variable to load secrets from .env file
+ENV FLASK_APP=main.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=7860
+ENV FLASK_ENV=development
+
+# Run the Flask app
+CMD ["flask", "run"]

docker/deploy/Dockerfile

@@ -0,0 +1,18 @@
+
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY . /app
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV FLASK_APP=main.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=7860
+
+CMD ["gunicorn","-b", "0.0.0.0:7860", "main:app"] 
+
+
+
+

docker/docker-compose.yml

@@ -0,0 +1,16 @@
+version: '3.8'
+
+services:
+  flask-app:
+    build: .
+    ports:
+      - "7860:7860"
+    env_file:
+      - .env
+    volumes:
+      - .:/app
+    environment:
+      - FLASK_APP=main.py
+      - FLASK_RUN_HOST=0.0.0.0
+      - FLASK_RUN_PORT=7860
+      - FLASK_ENV=development

main.py

@@ -0,0 +1,167 @@
+from flask import Flask, render_template, request, redirect, url_for, session, flash
+import pandas as pd
+import joblib
+from fuzzywuzzy import process
+from flask_bcrypt import Bcrypt
+from functools import wraps
+import os
+from supabase import create_client, Client
+from dotenv import load_dotenv
+
+
+load_dotenv()
+
+app = Flask(__name__)
+app.secret_key = os.getenv("SECRET_KEY")
+bcrypt = Bcrypt(app)
+
+SUPABASE_URL = os.getenv("URL")
+SUPABASE_KEY = os.getenv("KEY")
+
+supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+
+movies = pd.read_csv('core/data/processed_movies_with_posters.csv')
+cosine_sim = joblib.load('core/model/cosine_sim.pkl')
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'logged_in' not in session:
+            flash('Please log in to access this page.', 'warning')
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+
+        response = supabase.table('users').select('*').eq('username', username).execute()
+        if response.data:
+            user = response.data[0]
+            if bcrypt.check_password_hash(user['password'], password):
+                session['logged_in'] = True
+                session['username'] = username
+                return redirect(url_for('home'))
+        
+        flash('Invalid username or password.', 'warning')
+
+    return render_template('login.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form['username']
+        password = bcrypt.generate_password_hash(request.form['password']).decode('utf-8')
+
+        try:
+            response = supabase.table('users').insert({"username": username, "password": password}).execute()
+            if not response.data:
+                flash('Username already exists. Please choose a different one.', 'warning')
+            else:
+                flash('Registration successful! You can now log in.', 'success')
+                return redirect(url_for('login'))
+        except Exception as e:
+            if "duplicate key value violates unique constraint" in str(e):
+                flash(f"Username already exits", 'warning')
+            else:
+                flash(f"An error occurred: {str(e)}", 'warning')
+
+    return render_template('register.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    session.clear()
+    flash('You have been logged out.', 'info')
+    return redirect(url_for('login'))
+
+
+def get_recommendations(title, cosine_sim=cosine_sim):
+    title = title.lower()
+    if title not in movies['title'].str.lower().values:
+        close_matches = process.extract(title, movies['title'].str.lower().values, limit=5)
+        return None, [movies[movies['title'].str.lower() == match[0]].iloc[0] for match in close_matches]
+    idx = movies[movies['title'].str.lower() == title].index[0]
+    sim_scores = list(enumerate(cosine_sim[idx]))
+    sim_scores = sorted(sim_scores, key=lambda x: x[1], reverse=True)
+    sim_scores = sim_scores[1:11]
+    movie_indices = [i[0] for i in sim_scores]
+    return movies.iloc[movie_indices], None
+
+def get_recommendations_by_id(movie_id, cosine_sim=cosine_sim):
+    idx = movies[movies['id'] == movie_id].index[0]
+    sim_scores = list(enumerate(cosine_sim[idx]))
+    sim_scores = sorted(sim_scores, key=lambda x: x[1], reverse=True)
+    sim_scores = sim_scores[1:6]
+    movie_indices = [i[0] for i in sim_scores]
+    return movies.iloc[movie_indices]
+
+@app.route('/')
+@login_required
+def home():
+    return render_template('recommendation.html', movies=movies.sample(20).to_dict(orient='records'))
+
+@app.route('/movie/<int:id>')
+@login_required
+def movie_details(id):
+    movie = movies[movies['id'] == id].iloc[0]
+    recommendations = get_recommendations_by_id(id).to_dict(orient='records')
+    return render_template('movie_details.html', movie=movie, recommendations=recommendations)
+
+@app.route('/recommend', methods=['POST'])
+@login_required
+def recommend():
+    title = request.form['title']
+    recommendations, close_matches = get_recommendations(title)
+    if recommendations is None:
+        flash("Movie title not found. Did you mean one of these?", 'warning')
+        return render_template('recommendation.html', movies=[match.to_dict() for match in close_matches])
+    return render_template('recommendation.html', movies=recommendations.to_dict(orient='records'))
+
+@app.route('/search', methods=['GET', 'POST'])
+@login_required
+def search():
+    if request.method == 'POST':
+        query = request.form['query']
+        results = movies[movies['title'].str.contains(query, case=False, na=False)]
+        return render_template('search.html', movies=results.to_dict(orient='records'))
+    return render_template('search.html', movies=None)
+
+@app.route('/filter', methods=['GET', 'POST'])
+@login_required
+def filter():
+    genres = sorted(movies['genre'].str.split(',', expand=True).stack().dropna().unique())
+    languages = sorted(movies['original_language'].dropna().unique())
+
+    if request.method == 'POST':
+        selected_genre = request.form.get('genre')
+        selected_language = request.form.get('language')
+
+        if not selected_genre and not selected_language:
+            return render_template('filter.html', movies=None, genres=genres, languages=languages,
+                                   error_message="No movies found. Please adjust your filters.")
+
+        filtered_movies = movies.copy()
+
+        if selected_genre:
+            filtered_movies = filtered_movies[filtered_movies['genre'].str.contains(selected_genre, na=False)]
+
+        if selected_language:
+            filtered_movies = filtered_movies[filtered_movies['original_language'] == selected_language]
+
+        filtered_movies['genre'] = filtered_movies['genre'].fillna('').astype(str)
+
+        sample_size = min(50, len(filtered_movies))
+
+        filtered_movies = filtered_movies.sample(sample_size).to_dict(orient='records')
+
+        return render_template('filter.html', movies=filtered_movies, genres=genres, languages=languages,
+                               error_message=None)
+
+    return render_template('filter.html', movies=None, genres=genres, languages=languages, error_message=None)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,32 @@
+bcrypt==4.2.0
+blinker==1.8.2
+certifi==2024.7.4
+charset-normalizer==3.3.2
+click==8.1.7
+Flask==3.0.3
+Flask==3.0.3
+Flask-Bcrypt==1.0.1
+gunicorn
+fuzzywuzzy==0.18.0
+idna==3.7
+itsdangerous==2.2.0
+Jinja2==3.1.4
+joblib==1.4.2
+Levenshtein==0.25.1
+MarkupSafe==2.1.5
+numpy==2.0.1
+pandas==2.2.2
+python-dateutil==2.9.0.post0
+python-Levenshtein==0.25.1
+pytz==2024.1
+rapidfuzz==3.9.4
+requests==2.32.3
+scikit-learn==1.5.1
+scipy==1.14.0
+six==1.16.0
+threadpoolctl==3.5.0
+tzdata==2024.1
+urllib3==2.2.2
+Werkzeug==3.0.3
+supabase==2.10.0
+python-dotenv==1.0.1

static/css/bottom_nav.css

@@ -0,0 +1,46 @@
+/* Bottom Navigation Bar */
+.bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    background-color: #1e1e1e;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px 0;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.bottom-nav-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: #e50914;
+    font-family: 'Bebas Neue', sans-serif;
+    transition: color 0.3s;
+}
+
+.bottom-nav-link:hover {
+    color: #b20710;
+}
+
+.nav-icon {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 5px;
+    fill: currentColor;
+}
+
+.bottom-nav-link span {
+    font-size: 12px;
+}
+
+
+@media (min-width: 768px) {
+    .bottom-nav {
+        display: none;
+    }
+}

static/css/card.css

@@ -0,0 +1,54 @@
+.c-con {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+}
+
+.card-container {
+    justify-content: space-around;
+    margin-top: 20px;
+    display: none;
+}
+
+.card {
+    background-color: #1e1e1e;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 10px;
+    width: 250px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s;
+    cursor: pointer;
+}
+
+.card:hover {
+    transform: scale(1.05);
+}
+
+.card h2 {
+    font-family: 'Bebas Neue', sans-serif;
+    color: #e50914;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.card p {
+    font-size: 16px;
+    color: #b3b3b3;
+}
+
+@media (max-width: 768px) {
+    .card-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20px;
+    }
+
+    .card {
+        width: 90%;
+        max-width: 350px;
+    }
+
+}

static/css/flash_message.css

@@ -0,0 +1,40 @@
+/* Style for the flash messages container */
+.flash-messages {
+    margin: 20px 0;
+}
+
+/* General style for flash messages */
+.flash-messages .alert {
+    padding: 15px;
+    margin-bottom: 10px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+/* Success message */
+.flash-messages .alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+
+/* Error message */
+.flash-messages .alert-error {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+
+/* Warning message */
+.flash-messages .alert-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba;
+}
+
+/* Info message */
+.flash-messages .alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}

static/css/form.css

@@ -0,0 +1,79 @@
+form {
+    display: flex;
+    flex-direction:column;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.form-group {
+    flex: 1;
+    min-width: 100px;
+}
+form label {
+    margin-bottom: 10px;
+}
+
+form input {
+    padding: 10px;
+    margin: 10px;
+    width: 100%;
+    max-width: 300px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    background-color: #333;
+    color: #fff;
+}
+
+form select {
+    margin: 10px;
+    width: 100%;
+    max-width: 100px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    background-color: #333;
+    color: #fff;
+}
+
+form button {
+    padding: 10px 20px 10px 20px;
+    background-color: #e50914;
+    border: none;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin: 10px
+}
+
+form button:hover {
+    background-color: #b20710;
+}
+
+
+
+.search-container,.recommendation-container {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.dark-theme-dropdown {
+    background-color: #333;
+    color: #fff;
+    border: 1px solid #444;
+    border-radius: 5px;
+    padding: 10px;
+    width: 100%;
+    max-width: 100px;
+    appearance: none;
+}
+
+.dark-theme-dropdown option {
+    background-color: #333;
+    color: #fff;
+}

static/css/gototop.css

@@ -0,0 +1,36 @@
+.go-to-top {
+    position: fixed;
+    bottom: 70px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border: none;
+    background-color: #333;
+    color: #fff;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.go-to-top svg {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+}
+
+.go-to-top:hover {
+    background-color: #555;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+}
+
+
+
+.go-to-top.show {
+    display: flex;
+    opacity: 1;
+    transform: translateY(0);
+}

static/css/navbar.css

@@ -0,0 +1,104 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #333;
+    color: #fff;
+}
+
+.navbar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: #e50914;
+    font-size: 24px;
+    cursor: pointer;
+    margin: 5px 10px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.navbar-nav {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.navbar-nav li {
+    margin: 0 10px;
+}
+
+.navbar-nav a {
+    color: #e50914;
+    text-decoration: none;
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 18px;
+    transition: color 0.3s;
+}
+
+.navbar-nav a:hover {
+    color: #b20710;
+}
+
+
+
+.navbar-logo {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #e50914;
+    display: none;
+}
+
+
+
+.logout {
+    margin-left: auto;
+}
+
+.logout a {
+    color: #fff;
+    text-decoration: none;
+}
+
+
+@media (max-width: 768px) {
+
+    .navbar-logo {
+        display: block;
+    }
+
+
+    .navbar {
+        padding:20px;
+        display: none;
+    }
+    .navbar-nav {
+        display: none;
+        width: 100%;
+        text-align: center;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .navbar-nav.show {
+        display: flex;
+    }
+
+    .navbar-toggle {
+        display: block;
+    }
+
+    .navbar-nav li {
+        margin: 5px 0;
+    }
+
+    .navbar-nav a {
+        font-size: 16px;
+    }
+}

static/css/style.css

@@ -0,0 +1,194 @@
+html, body {
+    height: 100%;
+    font-family: 'Arial', sans-serif;
+    background-color: #121212;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+::-webkit-scrollbar {
+    width: 1px;  
+    height: 1px; 
+}
+  
+::-webkit-scrollbar-track {
+    background-color: #121212; 
+}
+  
+::-webkit-scrollbar-thumb {
+    background-color: #121212; 
+    border-radius: 10px;  
+}
+  
+::-webkit-scrollbar-thumb:hover {
+    background-color: #121212; 
+}
+  
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h1, h2, h3 {
+    font-family: 'Bebas Neue', sans-serif;
+    color: #e50914;
+}
+
+h1 {
+    text-align: center;
+}
+
+
+.movies {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.movie {
+    background-color: #1e1e1e;
+    border-radius: 25px;
+    padding: 10px;
+    margin: 10px;
+    width: 200px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s;
+    text-align: center;
+}
+
+.movie:hover {
+    transform: scale(1.05);
+}
+
+.movie h2, .movie h3 {
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+.movie p {
+    font-size: 14px;
+    color: #b3b3b3;
+}
+
+.poster {
+    width: 100%;
+    height: auto;
+    border-radius: 25px;
+    margin-bottom: 10px;
+}
+
+.poster-container {
+    flex: 1;
+    margin-right: 20px;
+    padding: 10px;
+}
+
+.details-container {
+    flex: 2;
+}
+
+.movie-detail {
+    display: flex;
+    align-items: flex-start;
+}
+
+.related-movies {
+    margin-top: 40px;
+}
+
+.related-movies h2 {
+    text-align: center;
+}
+
+.genre {
+    margin-right: 5px;
+}
+
+a {
+    color: #e50914;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+
+
+.home-button-container {
+    text-align: center;
+    margin-top: 40px;
+}
+
+.home-button {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #e50914;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 16px;
+    transition: background-color 0.2s;
+}
+
+.home-button:hover {
+    background-color: #b20710;
+}
+
+.error-message {
+    color: #e50914;
+    font-size: 10px;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 20px;
+}
+.container h1 {
+    margin-top: 20px;
+    visibility: visible;
+}
+
+
+
+@media (max-width: 768px) {
+    .movies {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 30px;
+        justify-items: center;
+    }
+
+    .movie {
+        width: 100%;
+    }
+
+    .movie-detail {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .poster-container {
+        margin: 50px;
+    }
+
+    .details-container {
+        text-align: center;
+    }
+}
+
+.bottom-gap {
+    margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+
+    .bottom-gap {
+        margin-bottom: 60px;
+    }
+
+}
+

static/js/base2.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Existing functionality: Redirect to movie details page when clicked
+
+    const movies = document.querySelectorAll('.movie');
+
+    movies.forEach(movie => {
+        movie.addEventListener('click', () => {
+            // Redirect to movie details page when clicked
+            const link = movie.querySelector('a');
+            if (link) {
+                window.location.href = link.href;
+            }
+        });
+    });
+});
+
+// Get all elements with the class "option"
+const options = document.querySelectorAll('.option');
+
+// Attach a click event listener to each option element
+options.forEach(option => {
+  option.addEventListener('click', function() {
+    // Remove the "active" class from all option elements
+    options.forEach(el => el.classList.remove('active'));
+
+    // Add the "active" class to the clicked option element
+    this.classList.add('active');
+  });
+});
+
+
+

static/js/main.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Existing functionality: Redirect to movie details page when clicked
+
+    const movies = document.querySelectorAll('.movie');
+
+    movies.forEach(movie => {
+        movie.addEventListener('click', () => {
+            // Redirect to movie details page when clicked
+            const link = movie.querySelector('a');
+            if (link) {
+                window.location.href = link.href;
+            }
+        });
+    });
+
+
+    // New functionality: Create and handle "Go to Top" button
+    const goToTopButton = document.createElement('button');
+    goToTopButton.classList.add('go-to-top');
+    goToTopButton.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 5.293l-6.293 6.293 1.414 1.414L12 8.121l4.879 4.879 1.414-1.414L12 5.293z"/>
+        </svg>
+    `;
+    document.body.appendChild(goToTopButton);
+
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 200) {
+            goToTopButton.style.display = 'block';
+        } else {
+            goToTopButton.style.display = 'none';
+        }
+    });
+
+    goToTopButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+});
+
+// Get all elements with the class "option"
+const options = document.querySelectorAll('.option');
+
+// Attach a click event listener to each option element
+options.forEach(option => {
+  option.addEventListener('click', function() {
+    // Remove the "active" class from all option elements
+    options.forEach(el => el.classList.remove('active'));
+
+    // Add the "active" class to the clicked option element
+    this.classList.add('active');
+  });
+});
+
+

templates/base.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bottom_nav.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/card.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/form.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/gototop.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</head>
+<body>
+    <script type="module">
+        import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed@1.3.14/dist/web.js"
+        Chatbot.init({
+            chatflowid: "d22a7084-54e8-4caf-8182-7f33b86265b3",
+            apiHost: "https://crw-dev-flxoxwxixsxex.hf.space",
+            chatflowConfig: {
+                // topK: 2
+            },
+            theme: {
+                button: {
+                    backgroundColor: "#303235",
+                    right: 20,
+                    bottom: 10,
+                    size: 'medium', // small | medium | large | number
+                    dragAndDrop: true,
+                    customIconSrc: "https://i.ibb.co/ZN6GSWv/logo.png",
+                },
+                chatWindow: {
+                    showTitle: true,
+                    title: 'CRW AI',
+                    titleAvatarSrc: 'https://i.ibb.co/ZN6GSWv/logo.png',
+                    showAgentMessages: true,
+                    welcomeMessage: 'Hello! Everyone, I am CRW AI. I can help you with your movie related queries.',
+                    errorMessage: 'sorry, something went wrong. Please try again',
+                    backgroundColor: "#1e1e1e",
+                    height: 700,
+                    width: 400,
+                    fontSize: 16,
+                    poweredByTextColor: "#303235",
+                    botMessage: {
+                        backgroundColor: "#121212",
+                        textColor: "#ffffff",
+                        showAvatar: true,
+                        avatarSrc: "https://img.icons8.com/papercut/60/bot.png",
+                    },
+                    userMessage: {
+                        backgroundColor: "#e50914",
+                        textColor: "#ffffff",
+                        showAvatar: true,
+                        avatarSrc: "https://img.icons8.com/isometric/50/person-female.png",
+                    },
+                    textInput: {
+                        placeholder: 'Type your question',
+                        backgroundColor: '#121212',
+                        textColor: '#ffffff',
+                        sendButtonColor: '#e50914',
+                        maxChars: 50,
+                        maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
+                        autoFocus: true, // If not used, autofocus is disabled on mobile and enabled on desktop. true enables it on both, false disables it on both.
+                        sendMessageSound: true,
+                        // sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
+                        receiveMessageSound: true,
+                        // receiveSoundLocation: "receive_message.mp3", // If this is not used, the default sound effect will be played if receiveSoundMessage is true.
+                    },
+                    feedback: {
+                        color: '#303235',
+                    },
+                    footer: {
+                        textColor: '#e50914',
+                        text: 'Powered by',
+                        company: 'CRW',
+                        companyLink: 'https://crw07.dev',
+                    }
+                }
+            }
+        })
+    </script>
+    <nav class="navbar">
+        <button class="go-to-top" aria-label="Go to top">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 5.293l-6.293 6.293 1.414 1.414L12 8.121l4.879 4.879 1.414-1.414L12 5.293z"/>
+            </svg>
+        </button>
+        <ul class="navbar-nav">
+            <li><a href="{{ url_for('home') }}">Home</a></li>
+            <li><a href="{{ url_for('search') }}">Search</a></li>
+            <li><a href="{{ url_for('filter') }}">Filter</a></li>
+        </ul>
+        <div class="logout">
+            <ul class="navbar-nav">
+                {% if 'logged_in' in session %}
+                    <li>{{ session['username'] }}</li>
+                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
+                {% endif %}
+            </ul>
+        </div>
+    </nav>
+    {% block content %}{% endblock %}
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <!-- Add this at the end of base.html, just before the closing </body> tag -->
+    <div class="bottom-nav">
+        <a href="{{ url_for('home') }}" class="bottom-nav-link">
+            <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+            </svg>
+            <span>Home</span>
+        </a>
+        <a href="{{ url_for('search') }}" class="bottom-nav-link">
+            <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
+            </svg>
+            <span>Search</span>
+        </a>
+
+    <a href="{{ url_for('filter') }}" class="bottom-nav-link">
+        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 18h6v2H3v-2zm0-5h12v2H3v-2zm0-5h18v2H3V8zm0-5h6v2H3V3zm0 10h12v2H3v-2zm0-5h18v2H3V8z"/>
+        </svg>
+        <span>Filter</span>
+    </a>
+    <a class="bottom-nav-link" aria-label="Menu">
+        <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <circle cx="12" cy="12" r="10"/>
+        </svg>
+    </a>
+
+    </div>
+
+</body>
+</html>

templates/base2.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bottom_nav.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/card.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/form.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/gototop.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/flash_message.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <script src="{{ url_for('static', filename='js/base2.js') }}"></script>
+
+
+</head>
+<body>
+    <nav class="navbar">
+        <ul class="navbar-nav">
+            <li><a href="{{ url_for('home') }}">Home</a></li>
+            <li><a href="{{ url_for('search') }}">Search</a></li>
+            <li><a href="{{ url_for('filter') }}">Filter</a></li>
+        </ul>
+        <div class="logout">
+            <ul class="navbar-nav">
+                {% if 'logged_in' in session %}
+                    <li>{{ session['username'] }}</li>
+                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
+                {% endif %}
+            </ul>
+        </div>
+    </nav>
+    {% block content %}{% endblock %}
+    <div class="bottom-nav">
+        <a href="{{ url_for('home') }}" class="bottom-nav-link">
+            <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+            </svg>
+            <span>Home</span>
+        </a>
+        <a href="{{ url_for('search') }}" class="bottom-nav-link">
+            <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
+            </svg>
+            <span>Search</span>
+        </a>
+
+        <a href="{{ url_for('filter') }}" class="bottom-nav-link">
+            <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M3 18h6v2H3v-2zm0-5h12v2H3v-2zm0-5h18v2H3V8zm0-5h6v2H3V3zm0 10h12v2H3v-2zm0-5h18v2H3V8z"/>
+            </svg>
+            <span>Filter</span>
+        </a>
+    </div>
+
+</body>
+</html>

templates/filter.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% block title %}Filter Movies{% endblock %}
+{% block content %}
+<div class="container">
+    <form method="POST" action="{{ url_for('filter') }}">
+        <div class="form-row">
+            <div class="form-group">
+                <select name="genre" id="genre" class="dark-theme-dropdown">
+                    <option value="">All Genres</option>
+                    {% for genre in genres %}
+                        <option value="{{ genre }}">{{ genre }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="form-group">
+                <select name="language" id="language" class="dark-theme-dropdown">
+                    <option value="">All Languages</option>
+                    {% for language in languages %}
+                        <option value="{{ language }}">{{ language }}</option>
+                    {% endfor %}
+                </select> 
+            </div>
+            <button type="submit">Filter</button>
+        </div>
+        
+    </form>
+    {% if error_message %}
+        <p class="error-message">{{ error_message }}</p>
+    {% endif %}
+    <div class="movies">
+        {% if movies %}
+            {% for movie in movies %}
+                <div class="movie">
+                    <img src="{{ movie.poster_url or 'path/to/placeholder.jpg' }}" alt="{{ movie.title }} poster" class="poster">
+                    <h3><a href="{{ url_for('movie_details', id=movie.id) }}">{{ movie.title }}</a></h3>
+                    <p>Genres:
+                        {% for genre in movie.genre.split(',') %}
+                            <span class="genre">{{ genre }}</span>{% if not loop.last %},{% endif %}
+                        {% endfor %}
+                    </p>
+                    <p>Rating: {{ movie.vote_average }}</p>
+                </div>
+            {% endfor %}
+        {% else %}
+        {% endif %}
+    </div>
+    <div class="bottom-gap"></div>
+</div>
+{% endblock %}

templates/login.html

@@ -0,0 +1,32 @@
+{% extends "base2.html" %}
+{% block title %}Login{% endblock %}
+{% block content %}
+<div class="container">
+    <h1>Login</h1>
+
+
+
+    <!-- Login Form -->
+    <form method="POST">
+        <input type="text" placeholder="Username" id="username" name="username" required>
+        <input type="password" placeholder="Password" id="password" name="password" required>
+        <button type="submit">Login</button>
+    </form>
+
+    <a href="{{ url_for('register') }}">Don't have an account? Register here</a>
+
+        <!-- Flash Messages Section -->
+    {% with messages = get_flashed_messages(with_categories=True) %}
+        {% if messages %}
+            <div class="flash-messages">
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+    {% endwith %}
+
+</div>
+{% endblock %}

templates/movie_details.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% block title %}{{ movie.title }}{% endblock %}
+{% block content %}
+<div class="container">
+    <div class="movie-detail">
+        <div class="poster-container">
+            <img src="{{ movie.poster_url or 'path/to/placeholder.jpg' }}" alt="{{ movie.title }} poster" class="poster">
+        </div>
+        <div class="details-container">
+            <h1>{{ movie.title }}</h1>
+            <p><strong>Original Language:</strong> {{ movie.original_language }}</p>
+            <p><strong>Overview:</strong> {{ movie.overview }}</p>
+            <p><strong>Genres:</strong>
+                {% for genre in movie.genre.split(',') %}
+                    <span class="genre">{{ genre }}</span>{% if not loop.last %},{% endif %}
+                {% endfor %}
+            </p>
+            <p><strong>Release Date:</strong> {{ movie.release_date }}</p>
+            <p><strong>Rating:</strong> {{ movie.vote_average }}</p>
+            <p><strong>Votes:</strong> {{ movie.vote_count }}</p>
+        </div>
+    </div>
+    <div class="related-movies">
+        <h2>Related Movies</h2>
+        <div class="movies">
+            {% for related_movie in recommendations %}
+            <div class="movie">
+                <img src="{{ related_movie.poster_url or 'path/to/placeholder.jpg' }}" alt="{{ related_movie.title }} poster" class="poster">
+                <h3><a href="{{ url_for('movie_details', id=related_movie.id) }}">{{ related_movie.title }}</a></h3>
+                <p>Genres:
+                    {% for genre in related_movie.genre.split(',') %}
+                        <span class="genre">{{ genre }}</span>{% if not loop.last %},{% endif %}
+                    {% endfor %}
+                </p>
+                <p>Rating: {{ related_movie.vote_average }}</p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <!-- Red Button for Home Page -->
+    <div class="home-button-container">
+        <a href="{{ url_for('home') }}" class="home-button">Back to Home</a>
+    </div>
+</div>
+{% endblock %}

templates/recommendation.html

@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block title %}Home{% endblock %}
+{% block content %}
+<div class="container">
+    <form method="POST" action="{{ url_for('recommend') }}">
+        <div class="recommendation-container">
+            <input type="text" name="title" placeholder="Enter a movie title" required>
+            <button type="submit">Recommend</button>
+        </div>    
+    </form>
+
+            <!-- Flash Messages Section -->
+    {% with messages = get_flashed_messages(with_categories=True) %}
+        {% if messages %}
+            <div class="flash-messages">
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+    {% endwith %}
+
+    <div class="movies">
+        {% for movie in movies %}
+        <div class="movie">
+            <img src="{{ movie.poster_url }}" alt="{{ movie.title }} poster" class="poster">
+            <h2><a href="{{ url_for('movie_details', id=movie.id) }}">{{ movie.title }}</a></h2>
+            <p>Genres:
+                {% for genre in movie.genre.split(',') %}
+                    <span class="genre">{{ genre }}</span>{% if not loop.last %},{% endif %}
+                {% endfor %}
+            </p>
+            <p>Rating: {{ movie.vote_average }}</p>
+        </div>
+        {% endfor %}
+    </div>
+    <div class="bottom-gap"></div>
+</div>
+{% endblock %}

templates/register.html

@@ -0,0 +1,32 @@
+{% extends "base2.html" %}
+{% block title %}Register{% endblock %}
+{% block content %}
+<div class="container">
+    <h1>Register</h1>
+
+
+
+    <!-- Registration Form -->
+    <form method="POST">
+        <input type="text" placeholder="Username" id="username" name="username" required>
+        <input type="password" placeholder="Password" id="password" name="password" required>
+        <button type="submit">Sign Up</button>
+    </form>
+
+    <a href="{{ url_for('login') }}">Already have an account? Login here</a>
+
+        <!-- Flash Messages Section -->
+    {% with messages = get_flashed_messages(with_categories=True) %}
+        {% if messages %}
+            <div class="flash-messages">
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+    {% endwith %}
+
+</div>
+{% endblock %}

templates/search.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% block title %}Search Movies{% endblock %}
+{% block content %}
+<div class="container">
+    <form method="POST" action="{{ url_for('search') }}" class="search-form">
+        <div class="search-container">
+            <input type="text" name="query" placeholder="Enter movie name" required class="search-input">
+            <button type="submit" class="search-button">Search</button>
+        </div>
+    </form>
+    <div class="movies">
+        {% if movies %}
+            {% for movie in movies %}
+            <div class="movie">
+                <img src="{{ movie.poster_url }}" alt="{{ movie.title }} poster" class="poster">
+                <h2><a href="{{ url_for('movie_details', id=movie.id) }}">{{ movie.title }}</a></h2>
+                <p>Genres:
+                    {% if movie.genre %}
+                        {% set genres = movie.genre.split(',') if movie.genre is string else [] %}
+                        {% for genre in genres %}
+                            <span class="genre">{{ genre }}</span>{% if not loop.last %},{% endif %}
+                        {% endfor %}
+                    {% else %}
+                        <span class="genre">Unknown</span>
+                    {% endif %}
+                </p>
+                <p>Rating: {{ movie.vote_average }}</p>
+            </div>
+            {% endfor %}
+        {% else %}
+        {% endif %}
+    </div>
+    <div class="bottom-gap"></div>
+</div>
+{% endblock %}
+