Upload 39 files

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+data/Books.csv filter=lfs diff=lfs merge=lfs -text
+data/Ratings.csv filter=lfs diff=lfs merge=lfs -text
+data/Users.csv filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,27 @@
+# Use an official Python runtime as a parent image
+FROM python:3.8-slim
+
+# Set the working directory to /app
+WORKDIR /app
+
+# Copy only the requirements file
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the code into /app
+COPY . .
+
+# Change working directory to /app/src where app.py is located
+WORKDIR /app/src
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+
+# Expose port 5000
+EXPOSE 5000
+
+# Run the Flask app
+CMD ["flask", "run"]

README.md

@@ -0,0 +1,2 @@
+# Book-Recommendation-Site
+ 

app.log

@@ -0,0 +1,41 @@
+2024-11-17 03:19:42,479 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 03:19:45,800 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 03:34:04,612 - __main__ - INFO - Registration successful!
+2024-11-17 03:34:44,357 - __main__ - INFO - Logged in successfully!
+2024-11-17 03:35:02,638 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 03:39:15,842 - __main__ - INFO - You have been logged out.
+2024-11-17 12:23:11,937 - __main__ - INFO - Logged in successfully!
+2024-11-17 12:23:50,376 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 12:24:08,042 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:24:13,222 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:24:16,881 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:27:18,715 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 12:27:22,185 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:27:25,480 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:33:43,895 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:33:45,377 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:33:49,073 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 12:34:20,212 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 12:34:22,778 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 12:36:10,477 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 12:36:13,752 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 16:05:40,689 - __main__ - INFO - Logged in successfully!
+2024-11-17 16:06:15,027 - __main__ - INFO - Recommendations generated successfully!
+2024-11-17 16:06:21,275 - __main__ - INFO - Book details fetched successfully!
+2024-11-17 16:10:38,198 - __main__ - INFO - Book details fetched successfully!
+2024-11-18 23:04:01,575 - __main__ - INFO - Recommendations generated successfully!
+2024-11-18 23:04:04,536 - __main__ - INFO - Book details fetched successfully!
+2024-11-18 23:06:56,319 - __main__ - INFO - Book details fetched successfully!
+2024-11-18 23:07:29,479 - __main__ - INFO - Book details fetched successfully!
+2024-11-18 23:18:23,235 - __main__ - INFO - Logged in successfully!
+2024-11-18 23:23:18,931 - __main__ - INFO - You have been logged out.
+2024-11-18 23:23:25,279 - __main__ - INFO - Logged in successfully!
+2024-11-18 23:36:04,092 - __main__ - INFO - You have been logged out.
+2024-11-19 00:01:32,741 - __main__ - INFO - Logged in successfully!
+2024-11-19 00:02:07,922 - __main__ - INFO - You have been logged out.
+2024-11-19 00:02:17,037 - __main__ - INFO - Logged in successfully!
+2024-11-19 00:20:44,330 - __main__ - INFO - Recommendations generated successfully!
+2024-11-19 00:21:45,957 - __main__ - INFO - Book details fetched successfully!
+2024-11-19 00:34:43,886 - __main__ - INFO - Logged in successfully!
+2024-11-19 00:34:58,523 - __main__ - INFO - Recommendations generated successfully!
+2024-11-19 00:35:05,188 - __main__ - INFO - Book details fetched successfully!

config/heroku.yml

@@ -0,0 +1,5 @@
+build:
+  docker:
+    web: Dockerfile
+run:
+  web: python src/app.py

data/Books.csv

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

data/Ratings.csv

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

data/Users.csv

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

docker-compose.yml

@@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./src:/src/app
+    # env_file:
+    #   - .env
+    depends_on:
+      - mongo
+  mongo:
+    image: mongo:latest
+    restart: always
+    ports:
+      - "27017:27017"  # Correctly formatted as a list
+    volumes:
+      - mongo_data:/data/db
+
+volumes:
+  mongo_data:

model/book_model.joblib

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

model/book_model.pkl

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

requirements.txt

@@ -0,0 +1,11 @@
+Flask==3.0.3
+elasticsearch==7.10.0
+numpy==1.23.5
+pandas==1.3.3
+flask-login
+pymongo
+dnspython
+werkzeug
+joblib
+requests
+python-dotenv

src/app.py

@@ -0,0 +1,353 @@
+from flask import Flask, render_template, request, redirect, url_for, flash
+from flask_login import (
+    LoginManager,
+    login_user,
+    login_required,
+    logout_user,
+    current_user,
+    UserMixin
+)
+from werkzeug.security import generate_password_hash, check_password_hash
+from datetime import datetime
+from pymongo import MongoClient
+from recommend import find_top_common_books
+from urllib.parse import quote_plus, unquote_plus
+from bson.objectid import ObjectId
+import requests
+import logging
+import os
+
+app = Flask(__name__, template_folder='../templates', static_folder='../static')
+app.secret_key = os.environ.get('SECRET_KEY', 'your_default_secret_key')  # Replace with a secure key
+
+# Initialize Flask-Login
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'  # Redirect to 'login' view if unauthorized
+
+# Google Books API Key from environment variable
+GOOGLE_BOOKS_API_KEY = 'AIzaSyBqTms_1DSR3xcxCapdmizZiZUMaswaI9M'  # Set this in your environment
+
+# Initialize MongoDB client
+client = MongoClient("mongodb+srv://Atharva:whatismongodb@book.xx2jw.mongodb.net/book_dataset?retryWrites=true&w=majority")
+db = client['book_dataset']
+books_collection = db['BOOK']
+reviews_collection = db['reviews']  # New Collection for Reviews
+users_collection = db['users']      # New Collection for Users
+
+# Simple in-memory cache for book details
+book_details_cache = {}
+
+def fetch_book_details(title, api_key=None):
+    """Fetch book details from Google Books API based on the book title."""
+    if title in book_details_cache:
+        return book_details_cache[title]
+    
+    base_url = "https://www.googleapis.com/books/v1/volumes/"
+    params = {
+        'q': title,
+        'maxResults': 1
+    }
+    if api_key:
+        params['key'] = api_key
+    
+    try:
+        response = requests.get(base_url, params=params)
+        response.raise_for_status()
+        data = response.json()
+        
+        if 'items' in data and len(data['items']) > 0:
+            volume_info = data['items'][0].get('volumeInfo', {})
+            book_details = {
+                'authors': volume_info.get('authors', ["Unknown Author"]),
+                'description': volume_info.get('description', "No description available."),
+                'averageRating': volume_info.get('averageRating', "N/A"),
+                'ratingsCount': volume_info.get('ratingsCount', "N/A"),
+                'publishedDate': volume_info.get('publishedDate', "N/A"),
+                'pageCount': volume_info.get('pageCount', "N/A"),
+                'language': volume_info.get('language', "N/A"),
+                'publisher': volume_info.get('publisher', "N/A")
+            }
+            book_details_cache[title] = book_details
+            return book_details
+        else:
+            book_details = {
+                'authors': ["Unknown Author"],
+                'description': "No description available.",
+                'averageRating': "N/A",
+                'ratingsCount': "N/A",
+                'publishedDate': "N/A",
+                'pageCount': "N/A",
+                'language': "N/A",
+                'publisher': "N/A"
+            }
+            book_details_cache[title] = book_details
+            return book_details
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching details for '{title}': {e}")
+        book_details = {
+            'authors': ["Unknown Author"],
+            'description': "No description available.",
+            'averageRating': "N/A",
+            'ratingsCount': "N/A",
+            'publishedDate': "N/A",
+            'pageCount': "N/A",
+            'language': "N/A",
+            'publisher': "N/A"
+        }
+        book_details_cache[title] = book_details
+        return book_details
+
+# User Model
+class User(UserMixin):
+    def __init__(self, user_data):
+        self.id = str(user_data['_id'])
+        self.username = user_data['username']
+        self.email = user_data['email']
+
+    @staticmethod
+    def get(user_id):
+        user_data = users_collection.find_one({'_id': ObjectId(user_id)})
+        if user_data:
+            return User(user_data)
+        return None
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.get(user_id)
+
+# Logging Configuration
+logger = logging.getLogger(__name__)
+logger.setLevel(logging.DEBUG)
+
+# Create handlers
+file_handler = logging.FileHandler('app.log')
+stream_handler = logging.StreamHandler()
+
+# Create formatters and add to handlers
+formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+file_handler.setFormatter(formatter)
+stream_handler.setFormatter(formatter)
+
+# Add handlers to the logger
+logger.addHandler(file_handler)
+logger.addHandler(stream_handler)
+
+# Registration Route
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        # Get form data
+        username = request.form.get('username')
+        email = request.form.get('email')
+        password = request.form.get('password')
+        confirm_password = request.form.get('confirm_password')
+
+        # Validate form inputs
+        if not all([username, email, password, confirm_password]):
+            logger.warning('Please fill out all fields.')
+            flash('Please fill out all fields.', 'danger')
+            return redirect(url_for('register'))
+
+        if password != confirm_password:
+            logger.warning('Passwords do not match.')
+            flash('Passwords do not match.', 'danger')
+            return redirect(url_for('register'))
+
+        # Check if user already exists
+        existing_user = users_collection.find_one({'email': email})
+        if existing_user:
+            logger.warning('Email already registered.')
+            flash('Email already registered.', 'danger')
+            return redirect(url_for('register'))
+
+        # Hash the password
+        password_hash = generate_password_hash(password)
+
+        # Create new user document
+        new_user = {
+            'username': username,
+            'email': email,
+            'password': password_hash,
+            'created_at': datetime.utcnow()
+        }
+
+        # Insert the new user into the database
+        users_collection.insert_one(new_user)
+
+        logger.info('Registration successful!')
+        flash('Registration successful! Please log in.', 'success')
+        return redirect(url_for('login'))
+
+    return render_template('register.html')
+
+# Login Route
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        # Get form data
+        email = request.form.get('email')
+        password = request.form.get('password')
+
+        # Find user by email
+        user_data = users_collection.find_one({'email': email})
+        if user_data and check_password_hash(user_data['password'], password):
+            user = User(user_data)
+            login_user(user)
+            logger.info('Logged in successfully!')
+            flash('Logged in successfully!', 'success')
+            next_page = request.args.get('next')
+            return redirect(next_page or url_for('homepage'))
+        else:
+            logger.warning('Invalid email or password.')
+            flash('Invalid email or password.', 'danger')
+            return redirect(url_for('login'))
+
+    return render_template('login.html')
+
+# Logout Route
+@app.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    logger.info('You have been logged out.')
+    flash('You have been logged out.', 'success')
+    return redirect(url_for('homepage'))
+
+# Contact Route
+@app.route('/contact', methods=['GET', 'POST'])
+def contact():
+    if request.method == 'POST':
+        # Retrieve form data
+        name = request.form.get('name')
+        email = request.form.get('email')
+        review = request.form.get('review')
+        rating = request.form.get('rating')
+        
+        # Input Validation (Basic Example)
+        if not all([name, email, review, rating]):
+            logger.warning("All fields are required!")
+            flash("All fields are required!", "danger")
+            return redirect(url_for('contact'))
+        
+        try:
+            # Convert rating to integer
+            rating = int(rating)
+            if rating < 1 or rating > 5:
+                raise ValueError("Rating must be between 1 and 5.")
+        except ValueError as ve:
+            logger.warning(str(ve))
+            flash(str(ve), "danger")
+            return redirect(url_for('contact'))
+        
+        # Create a review document
+        review_document = {
+            "name": name,
+            "email": email,
+            "review": review,
+            "rating": rating,
+            "timestamp": datetime.utcnow()  # Optional: Add timestamp
+        }
+        
+        # Insert the review into the 'reviews' collection
+        reviews_collection.insert_one(review_document)
+        
+        logger.info("Thank you for your feedback!")
+        flash("Thank you for your feedback!", "success")
+        return redirect(url_for('homepage'))
+    
+    return render_template('contact.html')
+
+# Homepage Route
+@app.route('/')
+def homepage():
+    return render_template('homepage.html')
+
+# Recommendations Route
+@app.route('/recommendations', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        book1 = request.form.get('book1')
+        book2 = request.form.get('book2')
+        book3 = request.form.get('book3')
+
+        input_books = []
+        for book in [book1, book2, book3]:
+            if book:
+                matched_books = search_books(book)
+                if matched_books:
+                    input_books.append(matched_books[0]['title'])
+
+        if not input_books:
+            flash("Please enter at least one valid book.", "danger")
+            return redirect(url_for('index'))
+
+        recommendations = find_top_common_books(input_books)
+        logger.info('Recommendations generated successfully!')
+
+        # Flatten the recommendations list
+        flattened_recommendations = [
+            book for sublist in recommendations for book in sublist
+        ]
+
+        # Pass the flattened list to the template with minimal information
+        return render_template(
+            'index.html',
+            recommendations=flattened_recommendations
+        )
+
+    return render_template('index.html')
+
+# Book Detail Route
+@app.route('/book/<title>')
+def book_detail(title):
+    # Decode the title from URL
+    decoded_title = unquote_plus(title)
+
+    # Fetch book details (from cache or API)
+    details = fetch_book_details(decoded_title, GOOGLE_BOOKS_API_KEY)
+
+    # Fetch image_url from MongoDB if needed
+    book_in_db = books_collection.find_one({"Book-Title": decoded_title}, {"Image-URL-M": 1})
+    image_url = book_in_db["Image-URL-M"] if book_in_db else "/static/default.jpg"
+
+    enriched_book = {
+        'title': decoded_title,
+        'image_url': image_url,
+        'authors': details['authors'],
+        'description': details['description'],
+        'averageRating': details['averageRating'],
+        'ratingsCount': details['ratingsCount'],
+        'publishedDate': details['publishedDate'],
+        'pageCount': details['pageCount'],
+        'language': details['language'],
+        'publisher': details['publisher']
+    }
+
+    logger.info('Book details fetched successfully!')
+    return render_template('book_detail.html', book=enriched_book)
+
+# Profile Route
+@app.route('/profile')
+@login_required
+def profile():
+    return render_template('profile.html', user=current_user)
+
+# Search Books Function
+def search_books(title):
+    """Search for book titles in MongoDB similar to the given title."""
+    query = {"Book-Title": {"$regex": str(title), "$options": "i"}}
+    matched_books = books_collection.find(query, {"Book-Title": 1, "Image-URL-M": 1}).limit(2)
+    return [{"title": book["Book-Title"], "image_url": book["Image-URL-M"]} for book in matched_books]
+
+# Template Filters
+@app.template_filter('url_encode')
+def url_encode_filter(s):
+    return quote_plus(s)
+
+@app.template_filter('url_decode')
+def url_decode_filter(s):
+    return unquote_plus(s)
+
+if __name__ == '__main__':
+    app.run(debug=True)

src/index_books.py

@@ -0,0 +1,34 @@
+from elasticsearch import Elasticsearch, helpers
+import pandas as pd
+
+# Load books data
+books_df = pd.read_csv('data/Books.csv', dtype={'Year-Of-Publication': 'str'}, low_memory=False)
+
+# Elasticsearch setup
+es = Elasticsearch("http://localhost:9202")
+
+# Create an index for books (skip if already exists)
+index_name = 'books'
+if not es.indices.exists(index=index_name):
+    es.indices.create(index=index_name)
+
+# Bulk indexing books data
+actions = [
+    {
+        "_index": index_name,
+        "_id": row['ISBN'],
+        "_source": {
+            "Book-Title": row['Book-Title'],
+            "Book-Author": row['Book-Author'],
+            "Year-Of-Publication": row['Year-Of-Publication'],
+            "Publisher": row['Publisher'],
+            "Image-URL-S": row['Image-URL-S'],
+            "Image-URL-M": row['Image-URL-M'],
+            "Image-URL-L": row['Image-URL-L']
+        }
+    }
+    for _, row in books_df.iterrows()
+]
+
+# Indexing
+helpers.bulk(es, actions)

src/recommend.py

@@ -0,0 +1,68 @@
+import joblib
+from pymongo import MongoClient
+from collections import Counter
+import pandas as pd
+from urllib.parse import quote_plus
+# Load the pre-trained KNN model
+model_path = 'model/book_model.joblib'
+model = joblib.load(model_path)
+
+# # # MongoDB client setup
+client = MongoClient("mongodb+srv://Atharva:whatismongodb@book.xx2jw.mongodb.net/")
+db = client['book_dataset']
+# books_collection = db['BOOK']
+# Updated MongoClient initialization
+# Encode credentials
+# username = 'debook'
+# password = 'debook?'  # Replace with your actual password
+
+# encoded_username = quote_plus(username)
+# encoded_password = quote_plus(password)
+
+# # Create the connection string
+# connection_string = f"mongodb+srv://{encoded_username}:{encoded_password}@cluster0.chkfn.mongodb.net/book_dataset?retryWrites=true&w=majority"
+
+# # Initialize MongoDB client
+# client = MongoClient(connection_string)
+# db = client['book_dataset']
+
+books_collection = db['BOOK']
+df = pd.read_csv('data/vectors1.csv', index_col='Book-Title')
+
+def search_books(title):
+    """Search for book titles in MongoDB similar to the given title."""
+    query = {"Book-Title": {"$regex": str(title), "$options": "i"}}
+    matched_books = books_collection.find(query, {"Book-Title": 1, "Image-URL-M": 1}).limit(2)
+    return [{"title": book["Book-Title"], "image_url": book["Image-URL-M"]} for book in matched_books]
+
+def find_top_common_books(titles):
+    book_counter = Counter()
+    recommended_books = []
+
+    for title in titles:
+        try:
+            book = df.loc[title]
+        except KeyError as e:
+            print('The given book', e, 'does not exist')
+            continue  # Skip to the next title if the book is not found
+
+        # Find nearest neighbors
+        distance, indice = model.kneighbors([book.values], n_neighbors=30)
+
+        # Get top 5 recommended books for this title
+        recommended_books = pd.DataFrame({
+            'title': df.iloc[indice[0]].index.values,
+            'distance': distance[0]
+        }).sort_values(by='distance', ascending=True).head(5)['title'].values
+
+        # Update the counter with the recommended books
+        book_counter.update(recommended_books)
+    
+    # Get the top common books
+    top_common_books = [book for book, _ in book_counter.most_common(7)]
+    final_recommendations=[]
+    for b in top_common_books:
+        final_recommendations.append(search_books(b))
+    
+    
+    return final_recommendations

static/styles.css

@@ -0,0 +1,1027 @@
+/* Reset default browser styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Reset some basic elements */
+body, h1, h2, h3, p, ul, li, form, input, textarea, button {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* General Styles */
+body {
+    font-family: 'Lato', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+    color: #333;
+}
+
+/* Navigation Bar */
+nav {
+    background-color: #4CAF50;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+nav .logo {
+    float: left;
+    padding: 15px 20px;
+    font-size: 1.5em;
+    font-weight: 700;
+}
+
+nav .logo a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1.5em;
+    margin-left: 20px;
+    font-weight: bold;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+}
+
+nav .nav-links {
+    float: right;
+    margin-right: 20px;
+}
+
+nav .nav-links li {
+    display: inline-block;
+    line-height: 60px;
+    margin-left: 20px;
+}
+
+nav .nav-links li a {
+    display: block;
+    padding: 0 20px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 1.1em;
+    font-weight: 500;
+}
+
+.nav-links li a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+    padding: 8px 12px;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+}
+
+nav .nav-links li a:hover {
+    text-decoration: underline;
+}
+
+.nav-links li a:hover {
+    background-color: #45a049;
+}
+
+/* Hero Section (homepage.html) */
+.hero {
+    position: relative;
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/library.jpg') no-repeat center center/cover;
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    text-align: center;
+    overflow: hidden;
+    background-image: url('{{ url_for('static', filename='images/hero-background.jpg') }}');
+    background-size: cover;
+    background-position: center;
+}
+
+.hero::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    animation: fadeInUp 1s ease-out forwards;
+    text-align: center;
+    max-width: 600px;
+    padding: 20px;
+}
+
+.hero-content h1 {
+    font-size: 4em;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
+    font-size: 3em;
+}
+
+
+.hero-content p {
+    font-size: 1.5em;
+    margin-bottom: 30px;
+    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
+    font-size: 1.2em;
+}
+
+.cta-button {
+    background: linear-gradient(45deg, #ff6347, #ff4c29);
+    color: #fff;
+    padding: 15px 40px;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.3em;
+    cursor: pointer;
+    text-decoration: none;
+    transition: transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    background-color: #4CAF50;
+    padding: 15px 30px;
+    border-radius: 5px;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+}
+
+.cta-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+    background-color: #45a049;
+}
+
+/* About Section (homepage.html) */
+.about {
+    padding: 80px 20px;
+    background-color: #fff;
+    text-align: center;
+    animation: fadeIn 1s ease-out forwards;
+}
+
+.about h2 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.about p {
+    font-size: 1.2em;
+    color: #555;
+    margin-bottom: 20px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+    transition: color 0.3s;
+}
+
+.about p:hover {
+    color: #ff6347;
+}
+
+/* Features Section (homepage.html) */
+.features {
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/images/hihi.jpg') no-repeat center center/cover;
+    
+    padding: 80px 20px;
+    background-color: #f0f8ff;
+    text-align: center;
+    padding: 60px 0;
+    background-color: #f1f1f1;
+}
+
+.features h2 {
+    font-size: 2.5em;
+    margin-bottom: 40px;
+    color: #333;
+    position: relative;
+    text-align: center;
+    margin-bottom: 40px;
+    color: #222;
+}
+
+.features h2::after {
+    content: '';
+    width: 60px;
+    height: 4px;
+    background: #ff6347;
+    display: block;
+    margin: 10px auto 0;
+    border-radius: 2px;
+}
+
+.feature-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.features-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+}
+
+.feature-item {
+    width: 280px;
+    margin: 15px;
+    padding: 30px 20px;
+    background-color: #fff;
+    border-radius: 15px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    flex: 1 1 250px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.feature-item:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
+}
+
+.feature-item h3 {
+    font-size: 1.8em;
+    margin-bottom: 15px;
+    color: #333;
+    margin-bottom: 15px;
+    color: #4CAF50;
+}
+
+.feature-item p {
+    font-size: 1em;
+    color: #666;
+    line-height: 1.5;
+    color: #555;
+    line-height: 1.6;
+}
+
+/* Call to Action Section (homepage.html) */
+.cta {
+    padding: 80px 20px;
+    text-align: center;
+    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    color: #fff;
+    animation: slideIn 1s ease-out forwards;
+}
+
+.cta h2 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+}
+
+.cta .cta-button {
+    background: #fff;
+    color: #ff6347;
+    padding: 15px 40px;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.3em;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.cta .cta-button:hover {
+    background-color: #ff4c29;
+    color: #fff;
+}
+
+/* Main Container */
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    animation: fadeIn 1s ease-out forwards;
+}
+
+/* Homepage Headings and Text */
+.container h1 {
+    font-size: 3.5em;
+    margin-bottom: 15px;
+    color: #333;
+    text-align: center;
+    text-shadow: 1px 1px 5px rgba(0,0,0,0.1);
+}
+
+.container p {
+    font-size: 1.3em;
+    color: #555;
+    margin-bottom: 50px;
+    text-align: center;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* styles.css */
+
+/* ... Existing Styles ... */
+
+/* Contact Section */
+.contact {
+    padding: 80px 20px;
+    background-color: #fff;
+    text-align: center;
+    animation: fadeIn 1s ease-out forwards;
+}
+
+.contact h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.contact p {
+    font-size: 1.2em;
+    color: #555;
+    margin-bottom: 40px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+}
+
+.contact-form {
+    max-width: 600px;
+    margin: auto;
+    text-align: left;
+    background-color: #f9f9f9;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s;
+}
+
+.contact-form:hover {
+    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
+}
+
+.contact-form .form-group {
+    margin-bottom: 25px;
+}
+
+.contact-form label {
+    display: block;
+    font-size: 1.1em;
+    color: #333;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea,
+.contact-form select {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1em;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.contact-form input[type="text"]:focus,
+.contact-form input[type="email"]:focus,
+.contact-form textarea:focus,
+.contact-form select:focus {
+    border-color: #ff6347;
+    box-shadow: 0 0 5px rgba(255, 99, 71, 0.5);
+    outline: none;
+}
+
+.contact-form button {
+    background-color: #ff6347;
+    color: #fff;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+    display: block;
+    margin: auto;
+}
+
+.contact-form button:hover {
+    background-color: #ff4c29;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .contact-form {
+        padding: 20px;
+    }
+
+    .contact-form button {
+        width: 100%;
+    }
+}
+
+/* Form Styles (recommendations) */
+form {
+    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 50px;
+}
+
+.form-group {
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 500px;
+}
+
+label {
+    display: block;
+    font-size: 1em;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1em;
+}
+
+button {
+    background-color: #ff6347;
+    color: #fff;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 20px;
+}
+
+button:hover {
+    background-color: #ff4c29;
+}
+
+/* Recommendations/Book Cards */
+.recommendations {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 40px;
+    gap: 20px;
+}
+
+.book-card {
+    background-color: #fafafa;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    margin: 15px;
+    padding: 20px;
+    width: 220px;
+    text-align: center;
+    transition: box-shadow 0.3s;
+    width: 200px;
+    padding: 10px;
+}
+
+.book-card:hover {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.book-card img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 15px;
+    border-radius: 5px;
+}
+
+.book-card img.book-image {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+}
+
+.book-card h3 {
+    font-size: 1.1em;
+    color: #333;
+    margin-bottom: 10px;
+    margin: 10px 0;
+}
+
+.book-card p {
+    font-size: 1em;
+    color: #666;
+    line-height: 1.5;
+    font-size: 0.9em;
+    color: #555;
+}
+
+.book-card .btn {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 8px 12px;
+    background-color: #333;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 3px;
+}
+
+.book-card .btn:hover {
+    background-color: #555;
+}
+
+/* Book Detail Page */
+.book-detail {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 40px;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.book-detail img.book-image-detail {
+    width: 300px;
+    height: 450px;
+    object-fit: cover;
+    float: left;
+    margin-right: 20px;
+}
+
+.book-detail-image {
+    max-width: 300px;
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin-right: 30px;
+}
+
+.book-detail-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+}
+
+@media (min-width: 768px) {
+    .book-detail-content {
+        grid-template-columns: 1fr 2fr;
+    }
+}
+
+.book-image-detail {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.book-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex: 1;
+    min-width: 250px;
+}
+
+.book-info h1 {
+    font-size: 2em;
+    margin-bottom: 10px;
+    color: #222;
+    margin-top: 0;
+}
+
+.book-info p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.book-info strong {
+    color: #555;
+}
+
+.book-detail-info h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.book-detail-info p {
+    font-size: 1em;
+    color: #555;
+    margin-bottom: 10px;
+}
+
+.book-detail-info h2 {
+    font-size: 1.8em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.back-button {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #ff6347;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.back-button:hover {
+    background-color: #ff4c29;
+}
+
+/* Contact Section */
+.contact {
+    padding: 60px 20px;
+    background-color: #fff;
+    text-align: center;
+}
+
+.contact h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.contact p {
+    font-size: 1.1em;
+    color: #666;
+    margin-bottom: 40px;
+}
+
+.contact-form {
+    max-width: 600px;
+    margin: auto;
+    text-align: left;
+}
+
+.contact-form .form-group {
+    margin-bottom: 20px;
+}
+
+.contact-form label {
+    display: block;
+    font-size: 1em;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1em;
+}
+
+/* Flash Messages */
+.flash-messages {
+    width: 90%;
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 10px;
+    width: 80%;
+    margin: 20px auto;
+}
+
+.alert {
+    padding: 15px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    font-size: 1em;
+    text-align: center;
+    margin-bottom: 10px;
+    border-radius: 4px;
+}
+
+.alert-success {
+    background-color: #d4edda;
+    color: #155724;
+    background-color: #4CAF50;
+}
+
+.alert-danger {
+    background-color: #f8d7da;
+    color: #721c24;
+    background-color: #f44336;
+}
+
+.alert-error {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #f1f1f1;
+    margin-top: 40px;
+    font-size: 0.9em;
+    color: #555;
+    background-color: #333;
+    color: #fff;
+    padding: 20px 0;
+    text-align: center;
+    margin-top: 60px;
+    padding: 15px 0;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    nav .nav-links {
+        float: none;
+        text-align: center;
+    }
+    nav .nav-links li {
+        display: block;
+        line-height: 30px;
+        margin: 10px 0;
+    }
+    .container h1,
+    .contact h1,
+    .about h2,
+    .features h2 {
+        font-size: 2em;
+    }
+    input[type="text"],
+    input[type="email"],
+    textarea {
+        max-width: 100%;
+    }
+    .book-card {
+        width: 45%;
+    }
+    .book-detail {
+        flex-direction: column;
+        align-items: center;
+    }
+    .book-detail-image {
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+    .feature-list {
+        flex-direction: column;
+        align-items: center;
+    }
+    .feature-item {
+        width: 80%;
+    }
+    footer {
+        position: relative;
+    }
+    .recommendations {
+        flex-direction: column;
+        align-items: center;
+    }
+    .book-detail img.book-image-detail {
+        float: none;
+        display: block;
+        margin: 0 auto 20px auto;
+    }
+    .hero-content h1 {
+        font-size: 2.5em;
+    }
+
+    .hero-content p {
+        font-size: 1em;
+    }
+
+    .cta-button {
+        padding: 10px 20px;
+        font-size: 0.9em;
+    }
+
+    .nav-links {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .features-grid {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .links-grid {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .book-card {
+        width: 100%;
+    }
+    .hero-content h1 {
+        font-size: 2em;
+    }
+    .hero-content p {
+        font-size: 1em;
+    }
+    .cta h2 {
+        font-size: 1.5em;
+    }
+}
+
+/* Authentication Forms */
+.auth-form {
+    max-width: 400px;
+    margin: 40px auto;
+    padding: 30px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.auth-form label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.auth-form input[type="text"],
+.auth-form input[type="email"],
+.auth-form input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.auth-form button {
+    width: 100%;
+    padding: 15px;
+    background-color: #ff6347;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    padding: 10px;
+    background-color: #333;
+    border-radius: 3px;
+}
+
+.auth-form button:hover {
+    background-color: #ff4c29;
+    background-color: #555;
+}
+
+/* Book Detail Styling */
+.book-detail {
+    padding: 20px;
+}
+
+.book-detail-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.book-image-detail {
+    max-width: 300px;
+    width: 100%;
+    height: auto;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.book-info {
+    flex: 1;
+    min-width: 250px;
+}
+
+.book-info h1 {
+    margin-top: 0;
+}
+
+.book-info p {
+    line-height: 1.6;
+}
+
+/* Links Section */
+.links {
+    padding: 60px 0;
+}
+
+.links h2 {
+    text-align: center;
+    margin-bottom: 40px;
+    color: #222;
+}
+
+.links-grid {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.link-item {
+    background-color: #4CAF50;
+    color: #fff;
+    padding: 15px 25px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+    font-weight: 500;
+}
+
+.link-item:hover {
+    background-color: #45a049;
+}
+
+/* Background Image for Index Page */
+.index-page {
+    /* background-image: url('../images/background.jpg'); */
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/library.jpg') no-repeat center center/cover;
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    min-height: 100vh;
+}
+

templates/base.html

@@ -0,0 +1,33 @@
+<!-- templates/base.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}BookNest{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <!-- Include any other head elements or meta tags here -->
+</head>
+<body>
+    <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Main Content -->
+    {% block content %}
+    <!-- Default content can go here -->
+    {% endblock %}
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/book_detail.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ book.title }} - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Book Details -->
+    <div class="container book-detail">
+        <div class="book-detail-content">
+            <img src="{{ book.image_url }}" alt="{{ book.title }}" class="book-image-detail">
+            <div class="book-info">
+                <h1>{{ book.title }}</h1>
+                <p><strong>Authors:</strong> {{ book.authors | join(', ') }}</p>
+                <p><strong>Average Rating:</strong> {{ book.averageRating }}</p>
+                <p><strong>Ratings Count:</strong> {{ book.ratingsCount }}</p>
+                <p><strong>Published Date:</strong> {{ book.publishedDate }}</p>
+                <p><strong>Page Count:</strong> {{ book.pageCount }}</p>
+                <p><strong>Language:</strong> {{ book.language }}</p>
+                
+                <p><strong>Publisher:</strong> {{ book.publisher }}</p>
+                <p><strong>Description:</strong> {{ book.description }}</p>
+
+              </div>
+        </div>
+    </div>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/contact.html

@@ -0,0 +1,47 @@
+<!-- templates/contact.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Contact - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body class="index-page">
+  <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Contact Form -->
+    <div class="container">
+        <h1>Contact Us</h1>
+        <form action="{{ url_for('contact') }}" method="POST" class="auth-form">
+            <label for="name">Name:</label>
+            <input type="text" name="name" id="name" required>
+
+            <label for="email">Email:</label>
+            <input type="email" name="email" id="email" required>
+
+            <label for="review">Review:</label>
+            <textarea name="review" id="review" rows="5" required></textarea>
+
+            <label for="rating">Rating (1-5):</label>
+            <input type="number" name="rating" id="rating" min="1" max="5" required>
+
+            <button type="submit">Submit</button>
+        </form>
+    </div>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/footer.html

@@ -0,0 +1,5 @@
+<!-- templates/footer.html -->
+<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+<footer>
+    <p>&copy; Done by students of B-Tech AI IIT J</p>
+</footer>

templates/homepage.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Welcome to BookNest</h1>
+            <p>Your ultimate destination for book recommendations and reviews.</p>
+            <a href="{{ url_for('index') }}" class="cta-button">Get Started</a>
+            
+            <a href="{{ url_for('login') }}" class="cta-button">Login</a>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features">
+        <div class="container">
+            <h2>Why Choose BookNest?</h2>
+            <div class="features-grid">
+                <div class="feature-item">
+                    <img src="{{ url_for('static', filename='images/personalized.png') }}" alt="Personalized Recommendations" class="feature-image">
+                    <h3>Personalized Recommendations</h3>
+                    <p>Get book suggestions tailored to your reading preferences.</p>
+                </div>
+                <div class="feature-item">
+                    <img src="{{ url_for('static', filename='images/community.png') }}" alt="Community Reviews" class="feature-image">
+                    <h3>Community Reviews</h3>
+                    <p>Read and write reviews from a community of book enthusiasts.</p>
+                </div>
+                <div class="feature-item">
+                    <img src="{{ url_for('static', filename='images/track.png') }}" alt="Track Your Reading" class="feature-image">
+                    <h3>Track Your Reading</h3>
+                    <p>Keep track of the books you've read and want to read.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Links Section -->
+    <section class="links">
+        <div class="container">
+            <h2>Connect with Us</h2>
+            <div class="links-grid">
+                <a href="https://github.com/anwesh2410/Book-Recommendation-Site" target="_blank" class="link-item">
+                    <img src="{{ url_for('static', filename='images/github.jpeg') }}" alt="GitHub" class="link-icon"> GitHub
+                </a>
+                
+            </div>
+        </div>
+    </section>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recommendations - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <!-- Link to Google Fonts for better typography -->
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body class="index-page">
+    <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Recommendations Form -->
+    <div class="container">
+        <h1>Get Book Recommendations</h1>
+        <form action="{{ url_for('index') }}" method="POST" class="auth-form">
+            <label for="book1">Book 1:</label>
+            <input type="text" name="book1" id="book1" placeholder="Enter book title" required>
+
+            <label for="book2">Book 2:</label>
+            <input type="text" name="book2" id="book2" placeholder="Enter book title">
+
+            <label for="book3">Book 3:</label>
+            <input type="text" name="book3" id="book3" placeholder="Enter book title">
+
+            <button type="submit">Get Recommendations</button>
+        </form>
+    </div>
+
+    <!-- Recommendations Results -->
+    {% if recommendations %}
+    <div class="container">
+        <h2>Recommended Books:</h2>
+        <div class="recommendations">
+            {% for book in recommendations %}
+                <div class="book-card">
+                    <img src="{{ book.image_url }}" alt="{{ book.title }}" class="book-image">
+                    <h3>{{ book.title }}</h3>
+                    <p><strong>Authors:</strong> {{ book.authors | join(', ') }}</p>
+                    <a href="{{ url_for('book_detail', title=book.title|url_encode) }}" class="btn">View Details</a>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/login.html

@@ -0,0 +1,42 @@
+<!-- templates/login.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body class="index-page">
+  <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Login Form -->
+    <div class="container">
+        <h1>Login</h1>
+        <form action="{{ url_for('login') }}" method="POST" class="auth-form">
+            <label for="email">Email:</label>
+            <input type="email" name="email" required>
+
+            <label for="password">Password:</label>
+            <input type="password" name="password" required>
+
+            <button type="submit">Login</button>
+        </form>
+        <p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a>.</p>
+    </div>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/navbar.html

@@ -0,0 +1,19 @@
+<!-- templates/navbar.html -->
+<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+<nav>
+    <div class="logo">
+        <a href="{{ url_for('homepage') }}">BookNest</a>
+    </div>
+    <ul class="nav-links">
+        <li><a href="{{ url_for('homepage') }}">Home</a></li>
+        <li><a href="{{ url_for('index') }}">Recommendations</a></li>
+        <li><a href="{{ url_for('contact') }}">Contact</a></li>
+        {% if current_user.is_authenticated %}
+            <li><a href="{{ url_for('profile') }}">Profile</a></li>
+            <li><a href="{{ url_for('logout') }}">Logout</a></li>
+        {% else %}
+            <li><a href="{{ url_for('login') }}">Login</a></li>
+            <li><a href="{{ url_for('register') }}">Register</a></li>
+        {% endif %}
+    </ul>
+</nav>

templates/profile.html

@@ -0,0 +1,34 @@
+<!-- templates/profile.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{ current_user.username }}'s Profile - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body class="index-page">
+  <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Profile Content -->
+    <div class="container">
+        <h1>Welcome, {{ current_user.username }}!</h1>
+        <p><strong>Email:</strong> {{ current_user.email }}</p>
+        <!-- Add more user-specific information here if needed -->
+    </div>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>

templates/register.html

@@ -0,0 +1,48 @@
+<!-- templates/register.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Register - BookNest</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body class="index-page">
+  <!-- Include Navigation Bar -->
+    {% include 'navbar.html' %}
+
+    <!-- Flash Messages -->
+    {% 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 %}
+
+    <!-- Registration Form -->
+    <div class="container">
+        <h1>Register</h1>
+        <form action="{{ url_for('register') }}" method="POST" class="auth-form">
+            <label for="username">Username:</label>
+            <input type="text" name="username" required>
+
+            <label for="email">Email:</label>
+            <input type="email" name="email" required>
+
+            <label for="password">Password:</label>
+            <input type="password" name="password" required>
+
+            <label for="confirm_password">Confirm Password:</label>
+            <input type="password" name="confirm_password" required>
+
+            <button type="submit">Register</button>
+        </form>
+        <p>Already have an account? <a href="{{ url_for('login') }}">Log in here</a>.</p>
+    </div>
+
+    <!-- Include Footer -->
+    {% include 'footer.html' %}
+</body>
+</html>