CHAPTER-I

INTRODUCTION AND ABOUT PROJECT DESCRIPTION

INTRODUCTION

The project titled E-commerce Website for Men’s Wear is developed to provide a
complete online shopping platform exclusively for men’s fashion. With the increasing
popularity of e-commerce, customers prefer the convenience of browsing, selecting, and
purchasing products online, and this website is designed to meet that demand. The system
offers features such as product browsing, shopping cart management, secure order placement,
and multiple payment options including UPI and Cash on Delivery. The frontend of the
website is designed using HTML, CSS, and JavaScript to ensure a user-friendly and
responsive interface, while the backend is developed with [Link] and [Link] to handle
server-side operations effectively. For data management, the project uses MongoDB as the
database, providing scalability and secure storage for user, product, and order details.
Overall, this platform aims to bridge the gap between customers and sellers in men’s fashion
by delivering a modern, convenient, and efficient online shopping experience.

ABOUT THE PROJECT

The project titled E-commerce Website for Men’s Wear is an online shopping
platform developed to provide a digital marketplace exclusively for men’s fashion. With the
rise of e-commerce, shopping has become more convenient and accessible, allowing
customers to browse and purchase products anytime and anywhere. This project aims to
address the growing demand for men’s fashion by offering a user-friendly website where
customers can explore a wide variety of clothing and accessories.

The frontend of the website is developed using HTML, CSS, and JavaScript,
ensuring a responsive design that works seamlessly across different devices. The interface is
designed to be attractive, simple, and interactive, allowing customers to easily navigate
through product categories, add items to their shopping cart, and proceed to checkout without
difficulty. This ensures a smooth shopping experience and encourages customers to engage
with the platform.

On the backend, the project utilizes [Link] with [Link] to handle all server-side
operations such as user authentication, order management, and payment processing. This

1
ensures that the website can manage multiple users simultaneously while maintaining speed
and reliability. The backend also acts as a bridge between the frontend and the database,
ensuring secure and efficient communication.

For data storage, the project uses MongoDB, a NoSQL database known for its
scalability and flexibility. MongoDB stores critical information such as user details, product
data, cart items, and order records securely. This allows the system to handle large amounts
of data while ensuring quick retrieval and reliable performance. Overall, the project delivers a
complete e-commerce solution tailored to men’s wear, providing customers with a secure,
convenient, and efficient shopping experience.

MODULE

User Registration Module

The User Registration Module allows new users to create an account on the website.
Users provide details such as name, email, phone number, and password, which are stored
securely in the MongoDB database. The system performs validation checks to prevent
duplicate accounts and ensure correct data entry. It also ensures that users agree to terms and
conditions before registering. This module forms the foundation for personalized services,
allowing the website to track orders and user preferences. A well-designed registration
process increases user trust and encourages more people to sign up.

User Login & Authentication Module

The User Login & Authentication Module is responsible for verifying existing users’
credentials and granting secure access to the platform. Passwords are encrypted to maintain
security, and session handling allows users to remain logged in while browsing. This module
protects sensitive data such as personal information, cart contents, and order history. Failed
login attempts are monitored to prevent unauthorized access. The module also allows
password recovery in case users forget their credentials. Overall, it ensures safe and smooth
access to the website’s features.

Product Browsing Module

The Product Browsing Module allows users to explore various categories of men’s
wear such as shirts, t-shirts, trousers, jeans, and accessories. Each product is displayed with
its image, description, size, and price. Users can scroll through products and make selections

2
easily. This module ensures that users have a smooth and interactive shopping experience.
The frontend design focuses on visual appeal and responsive layout. It makes product
discovery simple and convenient.

Product Details & Search Module

This module provides detailed information for each selected product. Customers can
check product specifications, available sizes, and price before adding it to the cart. The
module also includes a search and filter function to help users find products quickly. It
improves the overall shopping efficiency. The system retrieves product information from the
MongoDB database in real-time. It ensures users have all necessary details to make
informed choices.

Shopping Cart Module

The Shopping Cart Module allows users to add products they want to purchase into a
virtual cart. Users can update quantities, remove items, and view the total cost in real-time. It
provides flexibility and control, enabling customers to manage their purchases before
checkout. The module also calculates discounts or offers if applied, ensuring transparency in
pricing. Integration with the backend ensures that changes in the cart reflect immediately in
the database. This module is essential for streamlining the shopping experience and preparing
orders for final checkout.

Order Placement Module

The Order Placement Module manages the checkout process efficiently. Users
provide delivery details including name, phone number, address, and landmark. The system
validates the information to prevent errors during delivery. The module temporarily stores the
order in the database until payment is confirmed. It connects the shopping cart with the
payment module, ensuring that selected items are ready for purchase. Proper functioning of
this module ensures smooth processing of orders and reduces errors.

Payment Module

The Payment Module allows customers to complete their purchases through Cash on
Delivery or UPI payment. If UPI is selected, a QR code is generated for the exact payable
amount. Once the payment is confirmed, the order is stored permanently in the database. This

3
module ensures secure and smooth financial transactions. Users receive confirmation of their
orders instantly. It completes the shopping process and finalizes the transaction.

CHAPTER-II

SYSTEM CONFIGURATION

REQUIREMENT SPECIFICATION

HARDWARE REQUIREMENTS

Processor : Intel core i5

Ram : 16.00 GB

Hard Disk : 1TB

SOFTWARE REQUIREMENTS

Operating System : Window 10

Language Used : HTML

Scripting Language : Java Script

Animation Effects : CSS

Browser : Google

Database : MongoDB

ABOUT FRONT END

HTML

Frontend HTML is the backbone of web development, responsible for structuring the
content that users see in their web browsers. It stands for HyperText Markup Language and
provides a standardized way to create webpages, including text, images, links, and other
multimedia elements.

HTML uses a system of tags to define elements, making it easy for developers to
organize content logically and semantically. Along with CSS and JavaScript, HTML forms
the core of frontend development, allowing designers to create visually appealing and
interactive web interfaces.

4
 It ensures that web content is accessible across different devices and screen sizes by
supporting responsive design techniques. Modern HTML also includes advanced features like
forms, tables, and multimedia support, making it versatile for a wide range of web
applications. Overall, HTML is essential for building a strong foundation for any website or
web application.

CSS

CSS is vital for arranging content on a webpage in an organized and visually

appealing way. Using techniques like Flexbox and Grid, developers can create complex
layouts that adjust automatically to different screen sizes. CSS also controls spacing, margins,
padding, and alignment, ensuring that elements appear in the right place and maintain balance
across the page. By managing layout efficiently, CSS improves user experience and makes
websites easier to navigate.

Beyond layouts, CSS enables developers to add visual effects that make websites
more engaging. Animations, transitions, hover effects, and transformations can be applied to
elements without relying on JavaScript. CSS also supports themes and color schemes, helping
maintain brand identity and aesthetic consistency. These capabilities allow web developers to
create modern, professional, and interactive websites that attract and retain users.

Frontend JavaScript(CLIENT-SIDE)

Frontend JavaScript runs directly in the user’s web browser and is used to make web
pages interactive and dynamic. It works alongside HTML and CSS to enhance the user
experience by adding features like clickable buttons, dropdown menus, image sliders, form
validation, popups, and animations. Frontend JS does not interact with the server directly for
data storage but can communicate with it using APIs or AJAX calls. Popular frontend
frameworks and libraries like React, Angular, and [Link] make it easier to build complex and
responsive user interfaces.

ABOUT BACK END

Backend JavaScript(SERVER SIDE)

Backend JavaScript runs on the server rather than the browser. Using environments
like [Link], developers can write server-side code in JavaScript to handle tasks such as
database operations, authentication, file handling, and API endpoints. Backend JS allows the

5
creation of full-stack applications using a single language for both frontend and backend.
Frameworks like [Link] simplify server-side development, making it scalable, efficient,
and fast. Backend JS is essential for managing data, processing requests, and ensuring smooth
communication between the client and server.

[Link]

[Link] is a runtime environment that allows JavaScript to run on the server side.
Unlike frontend JavaScript, which runs in the browser, [Link] executes code on the server,
enabling developers to build backend applications using JavaScript. It is built on the V8
JavaScript engine, which makes it fast and efficient. [Link] is particularly useful for
building scalable, real-time applications such as chat apps, APIs, and e-commerce platforms
because it uses non-blocking, event-driven architecture. This means it can handle multiple
requests simultaneously without slowing down, making it ideal for high-performance server-
side applications.

[Link]

[Link] is a web application framework built on top of [Link] that simplifies

backend development. It provides a set of tools and features to handle server tasks like
routing, middleware, and HTTP requests easily. With Express, developers can create
RESTful APIs, manage routes, handle forms, and connect to databases efficiently. It is
lightweight, flexible, and widely used in combination with [Link] to create full-stack web
applications. [Link] reduces the amount of code needed to build complex server logic and
allows developers to focus on building features rather than boilerplate setup.

MongoDB

MongoDB is a popular NoSQL database used to store and manage data in a flexible,
scalable way. Unlike traditional relational databases, which store data in tables and rows,
MongoDB stores data in JSON-like documents called BSON (Binary JSON). This structure
allows developers to handle complex and unstructured data easily, making it ideal for modern
web applications. MongoDB is highly scalable, supports high-performance queries, and can
handle large amounts of data efficiently. It also allows developers to quickly update the
database schema as the application grows, which is especially useful in dynamic projects.

MongoDB works very well with modern backend technologies like [Link] and
[Link]. It allows developers to perform CRUD operations (Create, Read, Update, Delete)

6
efficiently. The database’s flexible schema design makes it easy to adapt as the application
evolves, reducing downtime during updates.

CHAPTER-III

PROJECT DESIGN AND DEVELOPMENT

SOURCE CODE

Signup/Login Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SignIn&SignUp</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" type="text/css" href="/[Link]" />
<script src=[Link]
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<!-- ✅ SIGN IN FORM -->
<form action="/login" method="post" class="sign-in-form">
<h2 class="title">Sign In</h2>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" name="email" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" name="password" required />

7
 </div>
<input type="submit" value="Login" class="btn solid" />
</form>
<!-- ✅ SIGN UP FORM -->
<form action="/post" method="post" class="sign-up-form">
<h2 class="title">Sign Up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="name" required />
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" name="email" required />
</div>
<div class="input-field">
<i class="fas fa-phone"></i>
<input type="text" placeholder="Phone" name="phone" required />
</div>
<div class="input-field">
<i class="fas fa-home"></i>
<input type="text" placeholder="Address" name="address" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" name="password" required />
</div>
<input type="submit" value="Sign Up" class="btn solid" />
</form>
</div>
</div>
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>New here?</h3>
8
 <p>Create an Account for New user click here.</p>
<button class="btn transparent" id="sign-up-btn">Sign Up</button>
</div>
<img src="./[Link]" class="image" alt="">
</div>
<div class="panel right-panel">
<div class="content">
<h3>One of us?</h3>
<p>Already have an Account click here.</p>
<button class="btn transparent" id="sign-in-btn">Sign In</button>
</div>
<img src="./[Link]" class="image" alt="">
</div>
</div>
</div>
<script>
const sign_in_btn = [Link]("#sign-in-btn");
const sign_up_btn = [Link]("#sign-up-btn");
const container = [Link](".container");

sign_up_btn.addEventListener("click", () => {
[Link]("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
[Link]("sign-up-mode");
});
</script>
</body>
</html>
Home Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

9
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CA Student Project</title>
<linkrel="stylesheet"href="[Link]
[Link]">
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="" /></a>
<div>
<ul id="navbar">
<li><a class="active" href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a id="cartLink" href="[Link]"><i class="far fa-shopping-bag"></i></a></li>
<li><a id="profileLink" href="[Link]"><i class="fa-solid fa-user"></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super value deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & up to 70% off!</p>
<button onclick="[Link]='[Link]';">Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="/[Link]">
<h6>Free Shipping</h6>
</div>

10
 <div class="fe-box">
<img src="/[Link]">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>24/7 Support</h6>
</div>
</section>
<!-- Featured Products -->
<section id="product1" class="section-p1">
<h2>Featured products</h2>
<p>Summer collection New Modern design</p>
<div class="pro-container">
<div class="pro" onclick="[Link]='[Link]';">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>

11
 <i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 499</h4>
</div>
<a href="#"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 449</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 349</h4>
</div>

12
 <a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 399</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
</section>
<!-- Banner Section -->
<section id="banner" class="section-m1">
<h4>Exclusive offers</h4>
<h2>Up to <span>70% off</span> - All Shirts & Accessories</h2>
<button class="normal" onclick="[Link]='[Link]';">Explore
More</button>
</section>
<!-- New Arrivals -->
<section id="product1" class="section-p1">
<h2>New Arrivals</h2>
<p>Summer collection New Modern design</p>
<div class="pro-container">
<div class="pro" onclick="[Link]='[Link]';">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>

13
 <div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 499</h4>
</div>
<a href="#"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 449</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>

14
 </div>
<h4>INR. 349</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 399</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
</section>
<!-- Small Banner -->
<section id="sm-banner" class="section-p1">
<div class="banner-box">
<h4>crazy deals</h4>
<h2>buy 1 get 1 free</h2>
<span>The best classic dress is on sale at cara</span>
<button class="white">Learn More</button>
</div>
<div class="banner-box banner-box2">
<h4>fall/wintee</h4>
<h2>Upcoming season</h2>
<span>The best classic dress is on sale at cara</span>
<button class="white">Collection</button>
</div>

15
 </section>
<!-- Banner 3 -->
<section id="banner3">
<div class="banner-box">
<h2>SEASONAL SALE</h2>
<h3>Winter Collection -50% OFF</h3>
</div>
<div class="banner-box banner-box2">
<h2>NEW FOOTWEAR COLLECTION</h2>
<h3>Fall / Winter 2k25</h3>
</div>
<div class="banner-box banner-box3">
<h2>T-SHIRTS</h2>
<h3>New Trendy Prints</h3>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign up for Newletters</h4>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email address">
<button class="normal" onclick="[Link]='[Link]';">Sign Up</button>
</div>
</section>
<!-- Footer -->
<footer class="section-p1">
<div class="col">
<img class="logo" src="/[Link]" alt="" />
<h4>Contact</h4>
<p><strong>Address:</strong> Ayya Nadar Janaki Ammal College</p>
<p><strong>Phone:</strong> (+91) 9876543210</p>

16
 <p><strong>Hours:</strong> 10:00 - 18:00, Mon-Sat</p>
<div class="follow">
<h4>Follow us</h4>
<div class="icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign in</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="/[Link]" alt="" />
<img src="/[Link]" alt="" />

17
 </div>
<p>Secured Payment Gateways</p>
<img src="/[Link]" alt="" />
</div>
<div class="copyright">
<p>© 2025, Itachi - Uchiha Clan</p>
</div>
</footer>
<script src="[Link]"></script>
<!-- UserID Handling Script -->
<script>
const userID = [Link]('userID');
if (userID) {
// Update profile link
const profileLink = [Link]('profileLink');
[Link] = `[Link]?userID=${userID}`;
// Update cart link
const cartLink = [Link]('cartLink');
[Link] = `[Link]?userID=${userID}`;
}
</script>
</body>
</html>
Shop Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CA Student Project</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>

18
<body>
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="" /></a>
<div>
<ul id="navbar">
<li><a id="homeLink" href="#">Home</a></li>
<li><a id="shopLink" class="active" href="#">Shop</a></li>
<li><a id="aboutLink" href="#">About</a></li>
<li><a id="contactLink" href="#">Contact</a></li>
<li><a id="cartLink" href="#"><i class="far fa-shopping-bag"></i></a></li>
</ul>
</div>
</section>
<section id="page-header">
<h2>#HappySell</h2>
<p>Save more with coupons & up to 70% off!</p>
</section>
<section id="product1" class="section-p1">
<div class="pro-container">
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 499</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">

19
 <img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 449</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 349</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>

20
 <i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 399</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 499</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 449</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>

21
 </div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 349</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 399</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
</section>
<section id="pagination" class="section-p1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#"><i class="fal fa-long-arrow-alt-right"></i></a>

22
</section>
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign up for Newsletters</h4>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email address">
<button class="normal">Sign Up</button>
</div>
</section>
<footer class="section-p1">
<div class="col">
<img class="logo" src="/[Link]" alt="" />
<h4>Contact</h4>
<p><strong>Address:</strong> Ayya Nadar Janaki Ammal College</p>
<p><strong>Phone:</strong> (+91) 9876543210</p>
<p><strong>Hours:</strong> 10:00 - 18:00, Mon-Sat</p>
<div class="follow">
<h4>Follow us</h4>
<div class="icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>

23
 <a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign in</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="/[Link]" alt="" />
<img src="/[Link]" alt="" />
</div>
<p>Secured Payment Gateways</p>
<img src="/[Link]" alt="" />
</div>
<div class="copyright">
<p>© 2025, Itachi - Uchiha Clan</p>
</div>
</footer>
<script>
// Example: userId stored in localStorage after login
const userId = [Link]("userId") || "guest";
// Update navbar links with userId
[Link]("homeLink").href = `[Link]?userId=${userId}`;
[Link]("shopLink").href = `[Link]?userId=${userId}`;
[Link]("aboutLink").href = `[Link]?userId=${userId}`;
[Link]("contactLink").href = `[Link]?userId=${userId}`;
[Link]("cartLink").href = `[Link]?userId=${userId}`;

24
 // Function to go to product with userId
function goToProduct(page) {
[Link] = `${page}?userId=${userId}`;
}
// Function to handle Add to Cart click
function goToCart(event) {
[Link]();
[Link] = `[Link]?userId=${userId}`;
}
</script>
<script src="[Link]"></script>
</body>
</html>
Product Details page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - CA Student Project</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Cart Popup -->
<div id="cartPopup" style="
display: none;
position: fixed;
top: 20px;
right: 20px;
background-color: #4CAF50;
color: white;
padding: 15px 20px;

25
 border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
">
✅ Product added to cart
</div>
<!-- Header -->
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="Logo" /></a>
<div>
<ul id="navbar">
<li><a href="[Link]">Home</a></li>
<li><a class="active" href="[Link]">Shop</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]"><i class="far fa-shopping-bag"></i></a></li>
</ul>
</div>
</section>
<!-- Product Details -->
<section id="prodetails">
<div class="single-pro-image">
<img src="/[Link]" width="100%" id="MainImg" alt="Product Image" />
</div>

<div class="single-pro-details">
<h6>Home / Shirt</h6>
<h4 id="productName">Men's Fashion Shirt</h4>
<h2 id="productPrice">INR. 499</h2>
<select id="productSize">
<option>Select Size</option>
<option>XL</option>
<option>XXL</option>
<option>Small</option>
26
 <option>Large</option>
</select>
<input type="number" value="1" id="productQty" min="1">
<button class="normal" onclick="addToCart()">Add To Cart</button>
<h4>Product detail</h4>
<span>
The Gildan Ultra Shirt made from 100% cotton, preshrunk jersey knit provides
unmatched comfort.
Featuring a taped neck and shoulder, seamless double-needle collar, available in
multiple sizes.
</span>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured products</h2>
<p>Summer collection New Modern design</p>
<div class="pro-container">
<!-- Example Product -->
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 499</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">

27
 <div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 449</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>INR. 359</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
<div class="pro" onclick="goToProduct('[Link]')">
<img src="/[Link]">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Shirts</h5>
<div class="star">
<i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star"></i>

28
 <i class="fas fa-star"></i>
</div>
<h4>INR. 399</h4>
</div>
<a href="#" onclick="goToCart(event)"><i class="fal fa-shopping-cart cart"></i></a>
</div>
</div>
</section>
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign up for Newsletters</h4>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email address">
<button class="normal">Sign Up</button>
</div>
</section>
<!-- Footer -->
<footer class="section-p1">
<div class="col">
<img class="logo" src="/[Link]" alt="" />
<h4>Contact</h4>
<p><strong>Address:</strong> Ayya Nadar Janaki Ammal College</p>
<p><strong>Phone:</strong> (+91) 9876543210</p>
<p><strong>Hours:</strong> 10:00 - 18:00, Mon-Sat</p>
<div class="follow">
<h4>Follow us</h4>
<div class="icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>

29
 </div>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign in</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="/[Link]" alt="" />
<img src="/[Link]" alt="" />
</div>
<p>Secured Payment Gateways</p>
<img src="/[Link]" alt="" />
</div>
<div class="copyright">
<p>© 2025, Itachi - Uchiha Clan</p>
</div>
</footer>
<!-- JS -->

30
 <script>
// Show popup
function showCartPopup(message) {
const popup = [Link]("cartPopup");
[Link] = "✅ " + message;
[Link] = "block";
setTimeout(() => {
[Link] = "none";
}, 3000);
}
// Add to cart
function addToCart() {
const productId = "1"; // Example product ID, replace with real from DB
const name = [Link]("productName").innerText;
const price =
parseInt([Link]("productPrice").[Link]("INR. ", ""));
const size = [Link]("productSize").value;
const quantity = parseInt([Link]("productQty").value);
const image = [Link]("MainImg").src;
if (size === "Select Size") {
alert("Please select a size");
return;
}
if (quantity < 1) {
alert("Quantity must be at least 1");
return;
}
fetch("[Link] {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include", // ✅ send session cookies
body: [Link]({ productId, name, price, size, quantity, image })
})
.then(res => {
31
 if (![Link]) {
throw new Error("Please login first");
}
return [Link]();
})
.then(data => {
showCartPopup([Link]);
})
.catch(err => {
showCartPopup("❌ " + [Link]);
});
}
</script>
</body>
</html>
About Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CA Student Priject</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="" /></a>
<div>
<ul id="navbar">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>

32
 <li><a href="[Link]" class="active">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]"><i class="far fa-shopping-bag"></i></a></li>
</ul>
</div>
</section>
<section id="page-header" class="about-header">
<h2>#KnowUs</h2>
<p>We are CA Students</p>
</section>
<section id="about-head" class="section-p1">
<img src="/[Link]" alt="" />
<div>
<h2>Who We Are</h2>
<p>We are a Commerce Students. Our final year project,Men's Wear, is a web-based
application designed to showcase and simplify the shopping experience for Men's
[Link] platform is built using <strong>HTML,CSS, and JavaScript, </strong>ensuring
a responsive amd user-friendly interface. It allows users to browse different categories of
men’s wear, view product details, and explore stylish collections in an organized way. The
project highlights our team’s ability to design alternative layouts, implement interactive
features, and apply core web technologies effectively. Through this project, we aimed to
combine creativity with functionality to deliver a Modern and engaging online shopping
experience.</p>
<abbr title="">This project gave us valuable experience in web development and
prepared us for real-world industry projects.</abbr>
<br><br /><marquee bgcolor="#ccc" loop="-1" scrollamount="5" width="100%">Our
project stands out with its clean design, responsive layout, and smooth navigation, giving
users a modern shopping experience.</marquee>
</div>
</section>
<section id="about-app" class="section-p1">
<h1>Download our <a href="#">App</a></h1>
<div class="video">
<video src="/1.mp4" autoplay muted loop></video>

33
</div>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="/[Link]">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="/[Link]">
<h6>F24/7 Support</h6>
</div>
</section>
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign up for Newletters</h4>
<p>Get E-mail updates about our latest shop and <span>specical offers.</span></p>
</div>
<div class="form">

34
 <input type="text" placeholder="Your email address">
<button class="normal">Sign Up</button>
</div>
</section>
<footer class="section-p1">
<div class="col">
<img class="logo" src="/[Link]" alt="" />
<h4>Contact</h4>
<p><strong>Address:</strong>Ayya Nadar Janaki Ammal College</p>
<p><strong>Phone:</strong>(+91) 9876543210</p>
<p><strong>Hours:</strong>10:00 - 18:00, Mon-Sat</p>
<div class="follow">
<h4>Follow us</h4>
<div class="icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Confitions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign in</a>
<a href="#">View Cart</a>

35
 <a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="/[Link]" alt="" />
<img src="/[Link]" alt="" />
</div>
<p>Secured Payment Gateways</p>
<img src="/[Link]" alt="" />
</div>
<div class="copyright">
<p>© 2025, Itachi - uchiha Clan</p>
</div>
</footer>
<script src="[Link]"></script>
</body>
</html>
Contact Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CA Student Priject</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>
<body>

36
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="" /></a>
<div>
<ul id="navbar">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]" class="active">Contact</a></li>
<li><a href="[Link]"><i class="far fa-shopping-bag"></i></a></li>
</ul>
</div>
</section>
<section id="page-header" class="about-header">
<h2>#let's talk</h2>
<p>LEAVE A MESSAGE, We love to hear from you</p>
</section>
<section id="contact_deatils" class="section-p1">
<div class="details">
<span>Get in Tough with Us</span>
<h2>Visit one of our agency locations or Cantact us Today</h2>
<h3>Head Office</h3>
<div>
<li>
<i class="fal fa-map"></i>
<p>Address: Ayya Nadar Janaki Ammal College,Sivakasi</p>
</li>
<li>
<i class="far fa-envelope"></i>
<p>Email: 23ukc131@[Link]</p>
</li>
<li>
<i class="fas fa-phone-alt"></i>
<p>Contact our team: +91 9876543210</p>
</li>

37
 <li>
<i class="far fa-clock"></i>
<p>Monday to Saturday: 9.00am to 4.00pm</p>
</li>
</div>
</div>
<div class="map">
<iframe src="[Link]
q=Ayya+Nadar+Janaki+Ammal+College,Sivakasi&output=embed"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</section>
<section id="form_detail">
<form>
<span>LEAVE A MESSAGE</span>
<h2>We love to hear from you</h2>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="E-Mail">
<input type="text" placeholder="Subject">
<textarea name="" id="" rows="10" cols="30" placeholder="Your Message"></textarea>
<button class="normal">Submit</button>
</form>
<div class="people">
<div>
<img src="/[Link]" alt="" />
<p><span>Madara Uchiha</span>Senior Marketing Manager <br /> Phone:
9876543210 <br /> E-Mail: Madara@[Link] </p>
</div>
<div>

38
 <img src="/[Link]" alt="" />
<p><span>Obito Uchiha</span>Senior Marketing Manager <br /> Phone: 9876543210
<br /> E-Mail: obito@[Link] </p>
</div>
<div>
<img src="/[Link]" alt="" />
<p><span>Itachi Uchiha</span>Senior Marketing Manager <br /> Phone: 9876543210
<br /> E-Mail: itachi@[Link] </p>
</div>
</div>
</section>
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign up for Newletters</h4>
<p>Get E-mail updates about our latest shop and <span>specical offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email address">
<button class="normal">Sign Up</button>
</div>
</section>
<footer class="section-p1">
<div class="col">
<img class="logo" src="/[Link]" alt="" />
<h4>Contact</h4>
<p><strong>Address:</strong>Ayya Nadar Janaki Ammal College</p>
<p><strong>Phone:
</strong>(+91) 9876543210</p>
<p><strong>Hours:</strong>10:00 - 18:00, Mon-Sat</p>
<div class="follow">
<h4>Follow us</h4>
<div class="icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>

39
 <i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>

<div class="col">
<h4>About</h4>
<a href="#">About us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Confitions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign in</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="/[Link]" alt="" />
<img src="/[Link]" alt="" />
</div>
<p>Secured Payment Gateways</p>
<img src="/[Link]" alt="" />
</div>
<div class="copyright">

40
 <p>© 2025, Itachi - uchiha Clan</p>
</div>
</footer>
<script src="[Link]"></script>
</body>
</html>
Cart Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CA Student Project - Cart</title>
<link rel="stylesheet" href="[Link] />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Popup Message -->
<div id="popupMessage" style="
display:none;
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
background:#28a745;
color:white;
padding:15px 25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
z-index:1000;
font-weight:bold;">
</div>

41
<!-- Header -->
<section id="header">
<a href="#"><img src="/[Link]" class="logo" alt="" /></a>
<div>
<ul id="navbar">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]" class="active"><i class="far fa-shopping-bag"></i></a></li>
</ul>
</div>
</section>
<!-- Page Header -->
<section id="page-header" class="about-header">
<h2>#Cart</h2>
<p>Apply your Coupon code & SAVE up to 70%</p>
</section>
<!-- Cart Section -->
<section id="cart" class="section-p1">
<table width="100%">
<thead>
<tr>
<td>Remove</td>
<td>Image</td>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Subtotal</td>
</tr>
</thead>
<tbody></tbody>
</table>
</section>

42
<!-- Coupon & Subtotal -->
<section id="cart_add" class="section-p1">
<div id="coupon">
<h3>Apply Coupon</h3>
<div>
<input type="text" placeholder="Enter Your Coupon">
<button class="normal">Apply</button>
</div>
</div>
<div id="subtotal">
<h3>Cart Totals</h3>
<table>
<tr><td>Cart Subtotal</td><td>INR. 0</td></tr>
<tr><td>Shipping</td><td>Free</td></tr>
<tr><td>Total</td><td>INR. 0</td></tr>
</table>
<button class="normal" onclick="[Link]='[Link]';">Proceed to
checkout</button>
</div>
</section>
<!-- Script -->
<script>
// Popup
function showPopup(message, color) {
const popup = [Link]("popupMessage");
[Link] = message;
[Link] = color;
[Link] = "block";
setTimeout(() => [Link] = "none", 10000);
}
// Load Cart
async function loadCart() {
try {
const res = await fetch("/cart");

43
 if (![Link]) throw new Error("Login required");
const cart = await [Link]();
const tbody = [Link]("#cart tbody");
[Link] = "";
let subtotal = 0;
if ([Link] === 0) {
[Link] = `<tr><td colspan="6" style="text-align:center;">🛒 Cart is
empty</td></tr>`;
} else {
[Link](item => {
const itemTotal = [Link] * [Link];
subtotal += itemTotal;
const row = `
<tr>
<td><button onclick="removeFromCart('${item._id}')">❌</button></td>
<td><img src="${[Link]}" width="80"></td>
<td>${[Link]} (${[Link]})</td>
<td>INR. ${[Link]}</td>
<td>
<input type="number" min="1" value="${[Link]}" onchange="updateQty('$
{item._id}', [Link])">
</td>
<td>INR. ${itemTotal}</td>
</tr>`;
[Link] += row;
});
}
// Update subtotal
[Link]("#subtotal table").innerHTML = `
<tr><td>Cart Subtotal</td><td>INR. ${subtotal}</td></tr>
<tr><td>Shipping</td><td>Free</td></tr>
<tr><td>Total</td><td>INR. ${subtotal}</td></tr>`;
} catch (err) {
[Link](err);
44
 showPopup("⚠️Unable to load cart. Make sure you are logged in.", "#dc3545");
}
}
// Remove item
async function removeFromCart(id) {
try {
const res = await fetch(`/cart/${id}`, { method: "DELETE" });
if ([Link]) loadCart();
else showPopup("⚠️Failed to remove item", "#dc3545");
} catch (err) {
[Link](err);
showPopup("⚠️Error removing item", "#dc3545");
}
}
// Update quantity using input
async function updateQty(id, qty) {
qty = parseInt(qty);
if (qty < 1) qty = 1;
try {
const res = await fetch("/cart");
if (![Link]) throw new Error("Failed to fetch cart");
const cart = await [Link]();
const item = [Link](c => c._id === id);
if (!item) throw new Error("Item not found");
const diff = qty - [Link];
if (diff === 0) return;
const route = diff > 0 ? `/cart/increase/${id}` : `/cart/decrease/${id}`;
for (let i = 0; i < [Link](diff); i++) {
const r = await fetch(route, { method: "POST" });
if (![Link]) throw new Error("Failed to update quantity");
}
loadCart();
} catch (err) {

45
 [Link](err);
showPopup("⚠️Error updating quantity", "#dc3545");
}
}
// URL messages
function checkUrlMessages() {
const urlParams = new URLSearchParams([Link]);
if ([Link]("success") === "1") showPopup("✅ Order placed successfully!",
"#28a745");
if ([Link]("cancelled") === "true") showPopup("❌ Your order has been cancelled",
"#dc3545");
if ([Link]("failed") === "1") showPopup("⚠️ Failed to place order. Try again!",
"#ffc107");
[Link]({}, [Link], [Link]);
}
[Link]("DOMContentLoaded", () => {
loadCart();
checkUrlMessages();
});
</script>
</body>
</html>
Order page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Place Order</title>
<link rel="stylesheet" href="[Link]">
<style>
body { font-family: Arial, sans-serif; background: #f5f5f5; padding: 20px; }

46
.container { max-width: 500px; margin: auto; background: #fff; padding: 25px; border-
radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
h2 { text-align: center; margin-bottom: 20px; }
input, select, button { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px;
border: 1px solid #ccc; box-sizing: border-box; }
button { background: #28a745; color: #fff; border: none; font-weight: bold; cursor: pointer; }
button:hover { background: #218838; }
#qrCode { display: none; text-align: center; margin: 20px 0; }
#message { text-align: center; font-weight: bold; color: green; margin-top: 15px; }
#cancelBtn { background: #dc3545; }
#cancelBtn:hover { background: #c82333; }
</style>
</head>
<body>
<div class="container">
<h2>Place Your Order</h2>
<input type="text" id="name" placeholder="Name">
<input type="text" id="phone" placeholder="Phone">
<input type="text" id="address" placeholder="Address">
<input type="text" id="landmark" placeholder="Landmark (optional)">
<input type="number" id="cartAmount" placeholder="Cart Amount" readonly>
<select id="paymentMethod">
<option value="">-- Select a Payment Method --</option>
<option value="COD">Cash on Delivery</option>
<option value="UPI">UPI</option>
</select>
<button onclick="placeOrder()">Order Now</button>
<button id="cancelBtn">Cancel Order</button>
<div id="qrCode">
<img src="[Link]
payment" alt="UPI QR">
<p>Scan QR code to pay</p>
</div>
<div id="message"></div>

47
</div>
<script>
async function loadUserInfo() {
try {
const res = await fetch("/order/user");
if(![Link]) throw new Error("Failed to fetch user info");
const user = await [Link]();
[Link]("name").value = [Link];
[Link]("phone").value = [Link];
[Link]("address").value = [Link];
} catch (err) {
[Link]("❌ Error fetching user info:", err);
}
}
async function loadCartTotal() {
try {
const res = await fetch("/cart");
if(![Link]) throw new Error("Failed to fetch cart");
const cartItems = await [Link]();
let total = 0;
[Link](item => total += [Link] * [Link]);
[Link]("cartAmount").value = total;
} catch (err) {
[Link]("❌ Error fetching cart:", err);
[Link]("cartAmount").value = 0;
}
}
async function placeOrder() {
const name = [Link]("name").value;
const phone = [Link]("phone").value;
const address = [Link]("address").value;
const landmark = [Link]("landmark").value;
const cartAmount = [Link]("cartAmount").value;
const paymentMethod = [Link]("paymentMethod").value;
48
 if (!name || !phone || !address || !cartAmount || cartAmount <= 0) {
alert("Please fill all required fields and ensure cart is not empty!");
return;
}
if (!paymentMethod) {
alert("⚠️Please select a payment method!");
return;
}

const orderData = { name, phone, address, landmark, cartAmount, paymentMethod };

if (paymentMethod === "COD") {

try {
const res = await fetch("/order", { method: "POST", headers: { "Content-Type":
"application/json" }, body: [Link](orderData) });
if([Link]) {
await fetch("/cart/clear", { method: "DELETE" });
[Link] = "/[Link]?success=1";
} else [Link] = "/[Link]?failed=1";
} catch(err) {
[Link]("Error:", err);
[Link] = "/[Link]?failed=1";
}
} else if(paymentMethod === "UPI") {
[Link]("qrCode").[Link] = "block";
setTimeout(async () => {
try {
const res = await fetch("/order", { method: "POST", headers: { "Content-Type":
"application/json" }, body: [Link](orderData) });
[Link]("qrCode").[Link] = "none";
if([Link]) {
await fetch("/cart/clear", { method: "DELETE" });
[Link] = "/[Link]?success=1";
49
 } else [Link] = "/[Link]?failed=1";
} catch(err) {
[Link]("Error:", err);
[Link] = "/[Link]?failed=1";
}
}, 30000); // simulate 30 sec payment
}
}
// Cancel order
[Link]("cancelBtn").addEventListener("click", function () {
[Link] = "/[Link]?cancelled=true";
});

// Load user info and cart total on page load

[Link] = () => {
loadUserInfo();
loadCartTotal();
}
</script>
</body>
</html>
[Link]

const express = require("express");

const mongoose = require("mongoose");
const path = require("path");
const bcrypt = require("bcrypt");
const multer = require("multer");
const session = require("express-session");
const app = express();
const PORT = 2000;

[Link]([Link]({ extended: true }));

[Link]([Link]());

50
[Link]([Link](__dirname));
[Link](
session({
secret: "mysecretkey",
resave: false,
saveUninitialized: false,
})
);
const MONGO_URL =
"mongodb+srv://mensuser:mypass@[Link]/userdb";
mongoose
.connect(MONGO_URL)
.then(() => [Link]("✅ MongoDB Connected"))
.catch((err) => [Link]("❌ MongoDB Error:", err));
const userSchema = new [Link]({
userId: { type: String, unique: true },
name: String,
email: { type: String, unique: true },
phone: String,
address: String,
password: String,
photo: String, // <--- Added for profile photo
});
const User = [Link]("User", userSchema);
const productSchema = new [Link]({
name: String,
description: String,
price: Number,
image: String,
brand: String,
rating: Number,
});
const Product = [Link]("Product", productSchema);
const cartSchema = new [Link]({
51
 userId: { type: String, required: true },
productId: String,
name: String,
price: Number,
size: String,
quantity: Number,
image: String,
});
const Cart = [Link]("Cart", cartSchema);
const orderSchema = new [Link]({
userId: { type: String, required: true },
name: String,
phone: String,
address: String,
landmark: String,
cartAmount: Number,
paymentMethod: String,
status: String,
products: [
{
productId: String,
name: String,
price: Number,
size: String,
quantity: Number,
image: String,
}
],
createdAt: { type: Date, default: [Link] },
});
const Order = [Link]("Order", orderSchema);
const storage = [Link]();
const upload = multer({ storage });
async function generateUserId() {

52
 let id;
let exists = true;
while (exists) {
id = "USER" + [Link](1000 + [Link]() * 9000);
exists = await [Link]({ userId: id });
}
return id;
}
function isLoggedIn(req, res, next) {
if (![Link]) return [Link]("/");
next();
}
[Link]("/", (req, res) => [Link]([Link](__dirname, "[Link]")));
[Link]("/home", isLoggedIn, (req, res) => [Link]([Link](__dirname, "[Link]")));
[Link]("/post", async (req, res) => {
try {
const { name, email, phone, address, password } = [Link];
const emailTrimmed = [Link]();
const existingUser = await [Link]({ email: emailTrimmed });
if (existingUser) return [Link](400).send("User already exists. Please sign in.");
const hashedPassword = await [Link]([Link](), 10);
const userId = await generateUserId();
const user = new User({
userId,
name: [Link](),
email: emailTrimmed,
phone: [Link](),
address: [Link](),
password: hashedPassword,
});
await [Link]();
[Link]("User registered successfully! Now <a href='/'>sign in</a>");
} catch (err) {
[Link]("❌ Error saving user:", err);

53
 [Link](500).send("Error registering user");
}
});
[Link]("/login", async (req, res) => {
try {
const email = [Link]();
const password = [Link]();
const user = await [Link]({ email });
if (!user) return [Link](400).send("❌ Invalid email or password");
const isMatch = await [Link](password, [Link]);
if (!isMatch) return [Link](400).send("❌ Invalid email or password");
[Link] = [Link];
[Link]("/home");
} catch (err) {
[Link]("❌ Error logging in:", err);
[Link](500).send("Error logging in");
}
});
[Link]("/logout", (req, res) => {
[Link](err => {
if (err) return [Link](500).send("Logout failed");
[Link]("[Link]");
// Redirect to login with query param
[Link]("/?loggedout=true");
});
});
[Link]("/profile", isLoggedIn, async (req, res) => {
try {
const userId = [Link];
const user = await [Link]({ userId }).lean();
if (!user) return [Link](404).send("User not found");
const cart = await [Link]({ userId }).lean();
const orders = await [Link]({ userId }).lean();

54
 [Link]({ user, cart, orders });
} catch (err) {
[Link]("❌ Error loading profile:", err);
[Link](500).json({ message: "Error loading profile" });
}
});
[Link]("/profile/update", isLoggedIn, async (req, res) => {
try {
const { name, phone, address } = [Link];
const userId = [Link];
await [Link]({ userId }, { $set: { name, phone, address } });
[Link]({ message: "✅ Profile updated successfully!" });
} catch (err) {
[Link]("❌ Error updating profile:", err);
[Link](500).json({ message: "Error updating profile" });
}
});
[Link]("/profile/photo", isLoggedIn, [Link]("photo"), async (req, res) => {
try {
const userId = [Link];
const imageBase64 = [Link]("base64");
await [Link]({ userId }, { $set: { photo: imageBase64 } });
[Link]({ message: "✅ Photo updated successfully!", photo: imageBase64 });
} catch (err) {
[Link]("❌ Error uploading photo:", err);
[Link](500).json({ message: "Error uploading photo" });
}
});
[Link]("/admin/add-product", [Link]("image"), async (req, res) => {
try {
const { name, description, price } = [Link];
const imageBase64 = [Link]("base64");
const product = new Product({

55
 name: [Link](),
description: [Link](),
price: Number(price),
image: imageBase64,
});
await [Link]();
[Link]("✅ Product added successfully! <a href='/products'>View Products</a>");
} catch (err) {
[Link]("❌ Error adding product:", err);
[Link](500).send("Error adding product");
}
});
[Link]("/products", async (req, res) => {
try {
const products = await [Link]();
const productList = [Link](p => ({
productId: p._id,
name: [Link],
description: [Link],
price: [Link],
brand: [Link] || "Default Brand",
rating: [Link] || 4,
image: `data:image/png;base64,${[Link]}`,
}));
[Link](productList);
} catch (err) {
[Link]("❌ Error fetching products:", err);
[Link](500).json({ message: "Error fetching products" });
}
});
[Link]("/cart/add", isLoggedIn, async (req, res) => {
try {
const { productId, name, price, size, quantity, image } = [Link];

56
 const cartItem = await [Link]({ userId: [Link], productId, size });
if (cartItem) {
[Link] += parseInt(quantity);
await [Link]();
} else {
const newCartItem = new Cart({
userId: [Link],
productId,
name,
price,
size,
quantity: parseInt(quantity),
image
});
await [Link]();
}
[Link]({ message: "✅ Product added to cart" });
} catch (err) {
[Link]("❌ Error adding to cart:", err);
[Link](500).json({ message: "Error adding to cart" });
}
});
[Link]("/cart", isLoggedIn, async (req, res) => {
try {
const cartItems = await [Link]({ userId: [Link] });
[Link](cartItems);
} catch (err) {
[Link]("❌ Error fetching cart:", err);
[Link](500).json({ message: "Error fetching cart" });
}
});
[Link]("/cart/:id", isLoggedIn, async (req, res) => {
try {

57
 await [Link]({ _id: [Link], userId: [Link] });
[Link]({ message: " Item removed from cart" });
} catch (err) {
[Link]("❌ Error removing item:", err);
[Link](500).json({ message: "Error removing item" });
}
});
[Link]("/cart/increase/:id", isLoggedIn, async (req, res) => {
try {
const cartItem = await [Link]({ _id: [Link], userId: [Link] });
if (!cartItem) return [Link](404).json({ message: "Item not found" });
[Link] += 1;
await [Link]();
[Link]({ message: "✅ Quantity increased", quantity: [Link] });
} catch (err) {
[Link]("❌ Error increasing quantity:", err);
[Link](500).json({ message: "Error increasing quantity" });
}
});
[Link]("/cart/decrease/:id", isLoggedIn, async (req, res) => {
try {
const cartItem = await [Link]({ _id: [Link], userId: [Link] });
if (!cartItem) return [Link](404).json({ message: "Item not found" });
[Link] = [Link]([Link] - 1, 1);
await [Link]();
[Link]({ message: "✅ Quantity decreased", quantity: [Link] });
} catch (err) {
[Link]("❌ Error decreasing quantity:", err);
[Link](500).json({ message: "Error decreasing quantity" });
}
});
[Link]("/order", isLoggedIn, async (req, res) => {
try {

58
 const { landmark, cartAmount, paymentMethod } = [Link];
const user = await [Link]({ userId: [Link] });
const cartItems = await [Link]({ userId: [Link] });
const order = new Order({
userId: [Link],
name: [Link],
phone: [Link],
address: [Link],
landmark,
cartAmount,
paymentMethod,
status: "Success",
products: [Link](item => ({
productId: [Link],
name: [Link],
price: [Link],
size: [Link],
quantity: [Link],
image: [Link]
}))
});
await [Link]();
await [Link]({ userId: [Link] });
[Link]({ message: "✅ Order placed successfully!" });
} catch (err) {
[Link]("❌ Error placing order:", err);
[Link](500).json({ message: "Error placing order" });
}
});
[Link]("/order/user", isLoggedIn, async (req, res) => {
try {
const user = await [Link]({ userId: [Link] }).lean();
if (!user) return [Link](404).json({ message: "User not found" });
[Link]({ name: [Link], phone: [Link], address: [Link] });
59
 } catch (err) {
[Link]("❌ Error fetching user info:", err);
[Link](500).json({ message: "Error fetching user info" });
}
});
[Link]("/[Link]", isLoggedIn, (req, res) => [Link]([Link](__dirname,
"[Link]")));
[Link]("/[Link]", isLoggedIn, (req, res) => [Link]([Link](__dirname,
"[Link]")));
[Link]("/[Link]", isLoggedIn, (req, res) => [Link]([Link](__dirname,
"[Link]")));
[Link](PORT, () => [Link](`🚀 Server running at [Link]
[Link]

@import url("[Link]
family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
width: 100%;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2 {

60
 font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p{
font-size: 16px;
color: #465b52;
margin: 15px 0 20px;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
[Link] {
font-size: 14px;
font-weight: 600;
padding: 15px 30px;
color: #000;
background: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: 0.2s;

61
}
[Link] {
font-size: 13px;
font-weight: 600;
padding: 11px 18px;
color: #fff;
background: transparent;
border: 1px solid #fff;
cursor: pointer;
outline: none;
transition: 0.2s;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background: #e3e6f3;
box-shadow: 0 5px 15px rgba(0,0,0,0.06);
position: sticky;
top: 0;
left: 0;
z-index: 999;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}

62
#navbar li a {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
text-decoration: none;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li [Link] {
color: #088178;
}
#navbar li [Link]::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}

#hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 90vh;
width: 100%;
padding: 0 80px;
background: url("/[Link]") top 25% right 0/cover no-repeat;
}
#hero h4 {
padding-bottom: 15px;

63
}
#hero h1 {
color: #088178;
}
#hero button {
padding: 14px 80px 14px 65px;
font-size: 15px;
font-weight: 700;
color: #088178;
background: transparent url("/[Link]") no-repeat;
border: 0;
cursor: pointer;
}

#feature {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
#feature .fe-box {
width: 180px;
margin: 15px 0;
padding: 25px 15px;
text-align: center;
border: 1px solid #cce7d0;
border-radius: 4px;
box-shadow: 20px 20px 34px rgba(0,0,0,0.03);
transition: 0.3s;
}
#feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70,62,221,0.1);
}
#feature .fe-box img {

64
 width: 100%;
margin-bottom: 10px;
}
#feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px;
line-height: 1;
border-radius: 4px;
color: #088178;
background: #fddde4;
}
#feature .fe-box:nth-child(2) h6 {
background: #cce7d0;
}
#feature .fe-box:nth-child(3) h6 {
background: #d1e8f2;
}
#feature .fe-box:nth-child(4) h6 {
background: #cdd4f8;
}
#feature .fe-box:nth-child(5) h6 {
background: #f6dbf6;
}
#feature .fe-box:nth-child(6) h6 {
background: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container {
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;

65
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0,0,0,0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0,0,0,0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}

#product1 .pro .des h5 {

padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}

66
#product1 .pro .des i {
font-size: 12px;
color: rgba(243,181,25);
}

#product1 .pro .des h4 {

padding: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}

#product1 .pro .cart {

width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background: #e8f6ea;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
Profile Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="[Link]">

67
 <link href="[Link]
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #74ebd5, #acb6e5);
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 40px auto;
background: #fff;
border-radius: 15px;
padding: 30px;
box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
h2 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
}
.profile-section, .cart-section, .orders-section {
margin-bottom: 40px;
}
.profile-card {
display: flex;
align-items: center;
gap: 30px;
padding: 20px;
background: #f7f9fc;
border-radius: 15px;

68
 box-shadow: 0px 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.profile-card:hover {
transform: translateY(-5px);
}
.profile-photo {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #3498db;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
.profile-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-info p {
font-size: 16px;
color: #34495e;
}
.profile-info button {
width: 150px;
padding: 10px;
margin-top: 10px;
background: #3498db;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;

69
 transition: background 0.3s ease;
}
.profile-info button:hover {
background: #2980b9;
}
.edit-form {
display: none;
flex-direction: column;
gap: 15px;
margin-top: 20px;
padding: 20px;
background: #f0f4f8;
border-radius: 15px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.05);
}
.edit-form input[type="text"],
.edit-form input[type="tel"],
.edit-form input[type="file"] {
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 14px;
}
.edit-form button {
width: 150px;
background: #27ae60;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease;
}

70
.edit-form button:hover {
background: #219150;
}
.cart-orders {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.cart-item, .order-item {
background: #fff;
border-radius: 15px;
padding: 15px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cart-item:hover, .order-item:hover {
transform: translateY(-5px);
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.cart-item img, .order-item img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 10px;
}
.cart-item div, .order-item div {
display: flex;
flex-direction: column;
gap: 5px;
}
.flex-between {

71
 display: flex;
justify-content: space-between;
align-items: center;
}
.section-title {
margin-bottom: 15px;
font-weight: 600;
color: #34495e;
border-bottom: 2px solid #3498db;
display: inline-block;
padding-bottom: 5px;
}
@media (max-width: 768px){
.profile-card {
flex-direction: column;
text-align: center;
}
.profile-info button {
margin: 10px auto 0;
}
}
</style>
</head>
<body>
<div class="container">
<h2>User Profile</h2>
<!-- Profile Section -->
<div class="profile-section">
<div class="profile-card">
<img src="" alt="Profile Photo" class="profile-photo" id="profilePhoto">
<div class="profile-info">
<p><strong>Name:</strong> <span id="userName"></span></p>
<p><strong>Email:</strong> <span id="userEmail"></span></p>
<p><strong>Phone:</strong> <span id="userPhone"></span></p>

72
 <p><strong>Address:</strong> <span id="userAddress"></span></p>
<button id="editBtn"><i class="fa-solid fa-pen"></i> Edit Profile</button>
<button id="logoutBtn" style="background:#e74c3c; margin-top:10px;"><i class="fa-
solid fa-right-from-bracket"></i> Logout </button>
</div>
</div>
<form class="edit-form" id="editForm">
<input type="text" id="editName" placeholder="Name" required>
<input type="tel" id="editPhone" placeholder="Phone" required>
<input type="text" id="editAddress" placeholder="Address" required>
<input type="file" id="editPhoto" accept="image/*">
<button type="submit"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button>
</form>
</div>
<!-- Cart Section -->
<h3 class="section-title">Cart</h3>
<div class="cart-orders" id="cartSection"></div>
</div>
<script>
const userName = [Link]("userName");
const userEmail = [Link]("userEmail");
const userPhone = [Link]("userPhone");
const userAddress = [Link]("userAddress");
const profilePhoto = [Link]("profilePhoto");

const editBtn = [Link]("editBtn");

const editForm = [Link]("editForm");
const editName = [Link]("editName");
const editPhone = [Link]("editPhone");
const editAddress = [Link]("editAddress");
const editPhoto = [Link]("editPhoto");
const cartSection = [Link]("cartSection");
const logoutBtn = [Link]("logoutBtn");

73
 async function loadProfile() {
const res = await fetch("/profile");
const data = await [Link]();
const user = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link] ? `data:image/png;base64,${[Link]}` :
"[Link]

// Cart
[Link] = "";
[Link](item => {
const div = [Link]("div");
[Link] = "cart-item";
[Link] = `
<img src="${[Link]}" alt="${[Link]}">
<div>
<p><strong>${[Link]}</strong></p>
<p>Size: ${[Link]}</p>
<p>Qty: ${[Link]}</p>
<p>₹${[Link]}</p>
</div>
[Link](div);
});
}
loadProfile();
// Edit Profile
[Link]("click", () => {
[Link] = "flex";
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];

74
 });
[Link]("submit", async (e) => {
[Link]();
await fetch("/profile/update", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({
name: [Link],
phone: [Link],
address: [Link]
})
});
if([Link][0]){
const photoData = new FormData();
[Link]("photo", [Link][0]);
await fetch("/profile/photo", { method: "POST", body: photoData });
}
loadProfile();
[Link] = "none";
alert("✅ Profile updated successfully!");
});
// Logout
[Link]("click", async () => {
await fetch("/logout");
[Link] = "/";
});
</script>
</body>
</html>
CHAPTER-IV

REPROT GENERATION

LOGIN

75
SIGNUP

HOME

76
SHOP

PRODUCT DETALIS

77
ABOUT

CONTACT

78
CART

ORDER

79
USER DATABASE

CART DATABASE

80
ORDERS DATABASE

CHAPTER-V

CONCLUSION

81
 In conclusion, our project demonstrates the successful creation of a complete e-
commerce system designed to meet modern online shopping requirements. The integration of
multiple modules such as product management, user profiles, cart, and order processing
ensures a smooth and interactive user experience. By implementing [Link] and MongoDB
on the backend, the system achieves scalability, secure data storage, and efficient
management of user and product information. The frontend is developed with a clean and
responsive design, making navigation easy and visually appealing for users. Features like
secure login, profile management, and flexible payment options including UPI and cash on
delivery enhance both convenience and reliability. The modular structure allows future
upgrades and the addition of new features without affecting the existing system. This project
also highlights the importance of combining technical knowledge with practical
implementation to solve real-world challenges. It emphasizes teamwork, problem-solving,
and systematic development processes. Overall, the project not only delivers a functional
shopping platform but also serves as a valuable learning experience in web development.

82