Project Report:E-commerce

Website

Introduction
Github Link :
The e-commerce website project aims to
provide users with a platform to browse and https://github.com/Haider3966/Responsive_e-
purchase products online. It facilitates commarce-website2024/commits/main/
administrators in managing the system
efficiently and users in shopping conveniently
from various categories.
Admin Login
System Overview
• Secure login functionality for administrators to
• Purpose: The purpose of the project is to access the dashboard.
create a user-friendly and robust e-
commerce platform where users can view, Dashboard
search, and purchase products, while
administrators can manage products, • Overview of system statistics, orders, and other
orders, and users. relevant information for administrators.
• Scope: The system includes modules for
both administrators and users, covering
Message
features such as product management, user
authentication, order processing,
messaging, and more. • Communication module allowing users to send
messages to administrators.
Technologies Used
Placed Order
The project utilizes the following
• Management of orders placed by users,
technologies:
including order details and status tracking.
• Programming Languages: PHP, HTML,
CSS, JavaScript
Product
• Database: MySQL
• Frameworks/Libraries: None • CRUD operations for managing products,
• Development Tools: Text editors, including adding, editing, and deleting
phpMyAdmin products.
• Web Server: Apache
• Operating System: Any OS supporting Registered Admin
PHP, MySQL, and Apache (e.g.,
Windows, Linux) • Management of registered administrators,
including profile updates and password
Modules and Functionality changes.

Below are the modules and their respective Update Profile

functionalities within the e-commerce website:
• Functionality for users and administrators to
Admin Account update their profile information.

• Creation and management of admin Users Account

accounts for system administration.
 • Management of user accounts, including About PHP
registration, authentication, and password
management. • Information page about PHP for user reference.

Admin Header Cart

• Consistent header section for • Shopping cart functionality for users to add and
administrator-related pages. manage items for purchase.

Admin Logout Category

• Secure logout functionality for • Categorization of products for easy navigation.

administrators.
Checkout
Connection Handling
• Secure checkout process for completing orders.
• PHP script for handling database
connections securely. Contact
Footer • Contact form for users to reach out to
administrators.
• Footer section containing links, social
media icons, and copyright information. Home
User Header • Homepage of the e-commerce website
displaying featured products and promotions.
• Header section for user-related pages.
Orders
User Logout
• View and manage orders placed by users.
• Logout functionality for users.
Quick View
Wishlist Cart
• Quick preview functionality for products.
• Management of user wishlist and shopping
cart. Search Page
Admin Styles • Search functionality for users to find products
based on keywords.
• CSS styles specifically tailored for
administrator interface. Shop
Styles • Main shop page displaying all available
products.
• General CSS styles for consistent page layout
and design. Update User
Admin Scripts • Functionality for users to update their profile
information.
• JavaScript functions and scripts for
administrator functionality. User Login
 • Secure login functionality for users.

User Register

• Registration form for new users. if(isset($_GET['delete'])){

Wishlist
$delete_id = $_GET['delete'];
• Management of user wishlist.
$delete_admins = $conn-
Applications HTML

• HTML page containing information about >prepare("DELETE FROM `admins` WHERE id

applications available in the system.

Code of Admin panel = ?");

admin_accounts.php : $delete_admins-

>execute([$delete_id]);
<?php

header('location:admin_accounts.php');
include '../components/connect.php';

session_start();

?>

$admin_id = $_SESSION['admin_id'];

<!DOCTYPE html>

<html lang="en">
if(!isset($admin_id)){

<head>

<meta charset="UTF-8">
header('location:admin_login.php');

<meta http-equiv="X-UA-Compatible"
}

content="IE=edge">
 <meta name="viewport"

content="width=device-width, initial- <h1 class="heading">Admin

scale=1.0"> Accounts</h1>

<title>Admin Accounts</title>

<div class="box-container">

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/aj <div class="box">

ax/libs/font- <p>Add New Admin</p>

awesome/6.1.1/css/all.min.css"> <a href="register_admin.php"

class="option-btn">Register Admin</a>

<link rel="stylesheet" </div>

href="../css/admin_style.css">

<?php

</head> $select_accounts = $conn-

<body> >prepare("SELECT * FROM `admins`");

$select_accounts->execute();

<?php include if($select_accounts->rowCount() >

'../components/admin_header.php'; ?> 0){

<section class="accounts">
 while($fetch_accounts = echo '<a

$select_accounts- href="update_profile.php" class="option-

>fetch(PDO::FETCH_ASSOC)){ btn">update</a>';

?> }

<div class="box"> ?>

<p> Admin Id : <span><?= </div>

$fetch_accounts['id']; ?></span> </p> </div>

<p> Admin name : <span><?= <?php

$fetch_accounts['name']; ?></span> }

</p> }else{

<div class="flex-btn"> echo '<p class="empty">no

<a accounts available!</p>';

href="admin_accounts.php?delete=<?= }

$fetch_accounts['id']; ?>" ?>

onclick="return confirm('delete this

account?')" class="delete- </div>

btn">delete</a>

<?php </section>

if($fetch_accounts['id']

== $admin_id){
 session_start();

if(isset($_POST['submit'])){

$name = $_POST['name'];

$name = filter_var($name,

FILTER_SANITIZE_STRING);

$pass = sha1($_POST['pass']);

$pass = filter_var($pass,

<script
FILTER_SANITIZE_STRING);

src="../js/admin_script.js"></script>

$select_admin = $conn-

</body>
>prepare("SELECT * FROM `admins` WHERE

</html>
name = ? AND password = ?");

$select_admin->execute([$name,
admin_login.php :

$pass]);

<?php
$row = $select_admin-

>fetch(PDO::FETCH_ASSOC);

include '../components/connect.php';
 if($select_admin->rowCount() > 0){ <meta name="viewport"

$_SESSION['admin_id'] = content="width=device-width, initial-

$row['id']; scale=1.0">

<title>Login</title>

header('location:dashboard.php');

}else{ <link rel="stylesheet"

$message[] = 'incorrect href="https://cdnjs.cloudflare.com/ajax/

username or password!'; libs/font-

} awesome/6.1.1/css/all.min.css">

} <link rel="stylesheet"

href="../css/admin_style.css">

?>

</head>

<!DOCTYPE html> <body>

<html lang="en">

<head> <?php

<meta charset="UTF-8"> if(isset($message)){

<meta http-equiv="X-UA-Compatible" foreach($message as $message){

content="IE=edge"> echo '

 <div class="message"> username" maxlength="20" class="box"

<span>'.$message.'</span> oninput="this.value =

<i class="fas fa-times" this.value.replace(/\s/g, '')">

onclick="this.parentElement.remove(); <input type="password" name="pass"

"></i> required placeholder="enter your

</div> password" maxlength="20" class="box"

'; oninput="this.value =

} this.value.replace(/\s/g, '')">

} <input type="submit" value="login

?> now" class="btn" name="submit">

</form>

<section class="form-container">

</section>

<form action="" method="post">

<h3>Login now</h3> </body>

<p>Default username = </html>

dashboard.php :
<span>admin</span> & password =

<span>111</span></p> <?php

<input type="text" name="name"

required placeholder="enter your

include '../components/connect.php'; <meta name="viewport"

content="width=device-width, initial-

session_start(); scale=1.0">

<title>Dashboard</title>

$admin_id = $_SESSION['admin_id'];

<link rel="stylesheet"

if(!isset($admin_id)){ href="https://cdnjs.cloudflare.com/ajax/

libs/font-

header('location:admin_login.php'); awesome/6.1.1/css/all.min.css">

<link rel="stylesheet"

?> href="../css/admin_style.css">

<!DOCTYPE html> </head>

<html lang="en"> <body>

<head>

<meta charset="UTF-8"> <?php include

<meta http-equiv="X-UA-Compatible" '../components/admin_header.php'; ?>

content="IE=edge">

<section class="dashboard">
 $select_pendings-

<h1 class="heading">Dashboard</h1> >execute(['pending']);

if($select_pendings-

<div class="box-container"> >rowCount() > 0){

while($fetch_pendings =

<div class="box"> $select_pendings-

<h3>Welcome!</h3> >fetch(PDO::FETCH_ASSOC)){

<p><?= $total_pendings +=

$fetch_profile['name']; ?></p> $fetch_pendings['total_price'];

<a href="update_profile.php" }

class="btn">Update Profile</a> }

</div> ?>

<h3><span>Nrs.</span><?=

<div class="box"> $total_pendings; ?><span>/-</span></h3>

<?php <p>Total pendings</p>

$total_pendings = 0; <a href="placed_orders.php"

$select_pendings = $conn- class="btn">See Orders.</a>

>prepare("SELECT * FROM `orders` </div>

WHERE payment_status = ?");

<div class="box">
 <?php <p>Completed orders</p>

$total_completes = 0; <a href="placed_orders.php"

$select_completes = class="btn">See orders</a>

$conn->prepare("SELECT * FROM </div>

`orders` WHERE payment_status = ?");

$select_completes- <div class="box">

>execute(['completed']); <?php

if($select_completes- $select_orders = $conn-

>rowCount() > 0){ >prepare("SELECT * FROM `orders`");

while($fetch_completes $select_orders->execute();

= $select_completes- $number_of_orders =

>fetch(PDO::FETCH_ASSOC)){ $select_orders->rowCount()

$total_completes += ?>

$fetch_completes['total_price']; <h3><?= $number_of_orders;

} ?></h3>

} <p>Orders Placed.</p>

?> <a href="placed_orders.php"

<h3><span>Nrs.</span><?= class="btn">See orders.</a>

$total_completes; ?><span>/- </div>

</span></h3>
 <div class="box"> $select_users->execute();

<?php $number_of_users =

$select_products = $conn- $select_users->rowCount()

>prepare("SELECT * FROM `products`"); ?>

$select_products- <h3><?= $number_of_users;

>execute(); ?></h3>

$number_of_products = <p>Normal users</p>

$select_products->rowCount() <a href="users_accounts.php"

?> class="btn">See Users</a>

<h3><?= $number_of_products; </div>

?></h3>

<p>Products added</p> <div class="box">

<a href="products.php" <?php

class="btn">See products</a> $select_admins = $conn-

</div> >prepare("SELECT * FROM `admins`");

$select_admins->execute();

<div class="box"> $number_of_admins =

<?php $select_admins->rowCount()

$select_users = $conn- ?>

>prepare("SELECT * FROM `users`");

 <h3><?= $number_of_admins; <a href="messages.php"

?></h3> class="btn">See messages</a>

<p>Admin users</p> </div>

<a href="admin_accounts.php"

class="btn">See admins</a> </div>

</div>

</section>

<div class="box">

<?php

$select_messages = $conn-

>prepare("SELECT * FROM `messages`");

$select_messages-

>execute();

$number_of_messages =

$select_messages->rowCount()

?>

<h3><?= $number_of_messages;

?></h3>

<p>New messages</p>
<script if(isset($_GET['delete'])){

src="../js/admin_script.js"></script> $delete_id = $_GET['delete'];

$delete_message = $conn-

</body> >prepare("DELETE FROM `messages` WHERE

</html> id = ?");

messages.php:
$delete_message-

<?php >execute([$delete_id]);

header('location:messages.php');

include '../components/connect.php'; }

session_start(); ?>

$admin_id = $_SESSION['admin_id']; <!DOCTYPE html>

<html lang="en">

if(!isset($admin_id)){ <head>

<meta charset="UTF-8">

header('location:admin_login.php'); <meta http-equiv="X-UA-Compatible"

}; content="IE=edge">
 <meta name="viewport"

content="width=device-width, initial- <h1 class="heading">Messages</h1>

scale=1.0">

<title>Messages</title> <div class="box-container">

<link rel="stylesheet" <?php

href="https://cdnjs.cloudflare.com/aj $select_messages = $conn-

ax/libs/font- >prepare("SELECT * FROM `messages`");

awesome/6.1.1/css/all.min.css"> $select_messages->execute();

if($select_messages->rowCount() >

<link rel="stylesheet" 0){

href="../css/admin_style.css"> while($fetch_message =

$select_messages-

</head> >fetch(PDO::FETCH_ASSOC)){

<body> ?>

<div class="box">

<?php include <p> User id : <span><?=

'../components/admin_header.php'; ?> $fetch_message['user_id']; ?></span></p>

<p> Name : <span><?=

<section class="contacts"> $fetch_message['name']; ?></span></p>

 <p> Email : <span><?= }

$fetch_message['email']; ?>

?></span></p>

<p> Number : <span><?= </div>

$fetch_message['number'];

?></span></p> </section>

<p> Message : <span><?=

$fetch_message['message'];

?></span></p>

<a href="messages.php??delete=<?=

$fetch_message['id']; ?>"

onclick="return confirm('delete this

message?');" class="delete-

btn">Delete</a>

</div>

<?php

}else{

<script
echo '<p class="empty">you

src="../js/admin_script.js"></script>
have no messages</p>';
 <header class="header">

</body>

</html > <section class="flex">

Code of Components

admin_header.php
<a href="../admin/dashboard.php"

<?php class="logo">Admin<span>Panel</span></a>

if(isset($message)){

foreach($message as $message){ <nav class="navbar">

echo ' <a

<div class="message"> href="../admin/dashboard.php">Home</a>

<span>'.$message.'</span> <a

<i class="fas fa-times" href="../admin/products.php">Products</a

onclick="this.parentElement.remove(); >

"></i> <a

</div> href="../admin/placed_orders.php">Orders

'; </a>

} <a

} href="../admin/admin_accounts.php">Admin

?> s</a>
 <a $select_profile-

href="../admin/users_accounts.php">Us >execute([$admin_id]);

ers</a> $fetch_profile =

<a $select_profile-

href="../admin/messages.php">Messages >fetch(PDO::FETCH_ASSOC);

</a> ?>

</nav> <p><?= $fetch_profile['name'];

?></p>

<div class="icons"> <a

<div id="menu-btn" href="../admin/update_profile.php"

class="fas fa-bars"></div> class="btn">Update Profile</a>

<div id="user-btn" <div class="flex-btn">

class="fas fa-user"></div> <a

</div> href="../admin/register_admin.php"

class="option-btn">Register</a>

<div class="profile"> <a

<?php href="../admin/admin_login.php"

$select_profile = $conn- class="option-btn">Login</a>

>prepare("SELECT * FROM `admins` </div>

WHERE id = ?");
 <a header('location:../admin/admin_login.ph

href="../components/admin_logout.php" p');

class="delete-btn" onclick="return

confirm('logout from the ?>

connect.php:
website?');">logout</a>

</div>
<?php

</section>
$db_name =

'mysql:host=localhost;dbname=shop_db';

</header>
$user_name = 'root';
admin_logout.php:
$user_password = '';

<?php

$conn = new PDO($db_name, $user_name,

include 'connect.php'; $user_password);

session_start(); ?>

Code of CSS
session_unset();
admin_style.css
session_destroy();

@import
url('https://fonts.googleapis.com/css box-sizing: border-box;

2?family=Nunito:wght@200;300;400;500; outline: none; border:none;

600;700&display=swap'); text-decoration: none;

:root{

--main-color:#2980b9; *::selection{

--orange:#f39c12; background-color: var(--main-color);

--red:#e74c3c; color:var(--white);

--black:#444; }

--white:#fff;

--light-color:#777; ::-webkit-scrollbar{

--light-bg:#f5f5f5; height: .5rem;

--border:.2rem solid var(--black); width: 1rem;

--box-shadow:0 .5rem 1rem }

rgba(0,0,0,.1);

} ::-webkit-scrollbar-track{

background-color: transparent;

*{ }

font-family: 'Nunito', sans-serif;

margin:0; padding:0; ::-webkit-scrollbar-thumb{

 background-color: var(--main- .heading{

color); font-size: 4rem;

} color:var(--black);

margin-bottom: 2rem;

html{ text-align: center;

font-size: 62.5%; text-transform: uppercase;

overflow-x: hidden; }

.btn,

body{ .delete-btn,

background-color: var(--light-bg); .option-btn{

/* padding-bottom: 10rem; */ display: block;

} width: 100%;

margin-top: 1rem;

section{ border-radius: .5rem;

padding:2rem; padding:1rem 3rem;

max-width: 1200px; font-size: 1.7rem;

margin:0 auto; text-transform: capitalize;

} color:var(--white);

cursor: pointer;
 text-align: center; }

.flex-btn{

.btn:hover, display: flex;

.delete-btn:hover, gap:1rem;

.option-btn:hover{ }

background-color: var(--black);

} .message{

position: sticky;

.btn{ top:0;

background-color: var(--main- max-width: 1200px;

color); margin:0 auto;

} background-color: var(--light-bg);

padding:2rem;

.option-btn{ display: flex;

background-color: var(--orange); align-items: center;

} justify-content: space-between;

gap:1.5rem;

.delete-btn{ z-index: 1100;

background-color: var(--red); }
 box-shadow: var(--box-shadow);

.message span{ text-align: center;

font-size: 2rem; color:var(--red);

color:var(--black); border-radius: .5rem;

} font-size: 2rem;

text-transform: capitalize;

.message i{ }

cursor: pointer;

color:var(--red); @keyframes fadeIn{

font-size: 2.5rem; 0%{

} transform: translateY(1rem);

.message i:hover{ }

color:var(--black);

} .form-container{

min-height: 100vh;

.empty{ display: flex;

padding:1.5rem; align-items: center;

background-color: var(--white); justify-content: center;

border: var(--border); }
 color:var(--light-color);

.form-container form{ margin-bottom: 1rem;

padding:2rem; border-radius: .5rem;

text-align: center; }

box-shadow: var(--box-shadow);

background-color: var(--white); .form-container form p span{

border-radius: .5rem; color:var(--orange);

width: 50rem; }

border:var(--border);

} .form-container form .box{

width: 100%;

.form-container form h3{ margin:1rem 0;

text-transform: uppercase; border-radius: .5rem;

color:var(--black); background-color: var(--light-bg);

margin-bottom: 1rem; padding:1.4rem;

font-size: 2.5rem; font-size: 1.8rem;

} color:var(--black);

.form-container form p{

font-size: 1.8rem; .header{

 position: sticky; color:var(--main-color);

top:0; left:0; right:0; }

background-color: var(--white);

box-shadow: var(--box-shadow); .header .flex .navbar a{

z-index: 1000; margin:0 1rem;

} font-size: 2rem;

color:var(--black);

.header .flex{ }

display: flex;

align-items: center; .header .flex .navbar a:hover{

justify-content: space-between; color:var(--main-color);

position: relative; text-decoration: underline;

} }

.header .flex .logo{ .header .flex .icons div{

font-size: 2.5rem; margin-left: 1.7rem;

color:var(--black); font-size: 2.5rem;

} cursor: pointer;

color:var(--black);

.header .flex .logo span{ }

 display: inline-block;

.header .flex .icons div:hover{ }

color:var(--main-color);

} .header .flex .profile p{

text-align: center;

.header .flex .profile{ color:var(--black);

position: absolute; font-size: 2rem;

top:120%; right:2rem; margin-bottom: 1rem;

background-color: var(--white); }

border-radius: .5rem;

box-shadow: var(--box-shadow); #menu-btn{

border:var(--border); display: none;

padding:2rem; }

width: 30rem;

padding-top: 1.2rem; .dashboard .box-container{

display: none; display: grid;

animation:fadeIn .2s linear; grid-template-columns: repeat(auto-

} fit, minmax(27rem, 1fr));

gap:1.5rem;

.header .flex .profile.active{ justify-content: center;

 align-items: flex-start; }

.dashboard .box-container .box p{

.dashboard .box-container .box{ padding:1.3rem;

padding:2rem; border-radius: .5rem;

text-align: center; background-color: var(--light-bg);

border:var(--border); font-size: 1.7rem;

box-shadow: var(--box-shadow); color:var(--light-color);

border-radius: .5rem; margin:1rem 0;

background-color: var(--white); }

.add-products form{

.dashboard .box-container .box h3{ max-width: 70rem;

font-size: 2.7rem; margin: 0 auto;

color:var(--black); background-color: var(--white);

} box-shadow: var(--box-shadow);

border:var(--border);

.dashboard .box-container .box h3 border-radius: .5rem;

span{ padding:2rem;

font-size: 2rem; }
 padding:1.4rem;

.add-products form .flex{ width: 100%;

display: flex; margin-top: 1.5rem;

gap:1.5rem; }

flex-wrap: wrap;

} .add-products form textarea{

height: 5.4rem;

.add-products form .flex .inputBox{ resize: none;

flex:1 1 25rem; }

.show-products .box-container{

.add-products form span{ display: grid;

font-size:1.7rem; grid-template-columns: repeat(auto-

color:var(--light-color); fit, 33rem);

} gap:1.5rem;

justify-content: center;

.add-products form .box{ align-items: flex-start;

font-size: 1.8rem; }

background-color: var(--light-bg);

border-radius: .5rem; .show-products .box-container .box{

 background-color: var(--white);

box-shadow: var(--box-shadow); .show-products .box-container .box

border-radius: .5rem; .price{

border:var(--border); font-size: 2rem;

padding:2rem; color:var(--main-color);

} margin:.5rem 0;

.show-products .box-container .box

img{ .show-products .box-container .box

width: 100%; .details{

height: 20rem; font-size: 1.5rem;

object-fit: contain; color:var(--light-color);

margin-bottom: 1.5rem; line-height: 2;

} }

.show-products .box-container .box .update-product form{

.name{ background-color: var(--white);

font-size: 2rem; box-shadow: var(--box-shadow);

color:var(--black); border-radius: .5rem;

} border:var(--border);
 padding:2rem; gap:1rem;

max-width: 50rem; justify-content: center;

margin:0 auto; margin:1rem 0;

} }

.update-product form .image- .update-product form .image-container

container{ .sub-image img{

margin-bottom: 2rem; height: 5rem;

} width: 7rem;

object-fit: contain;

.update-product form .image-container padding:.5rem;

.main-image img{ border:var(--border);

height: 20rem; cursor: pointer;

width: 100%; transition: .2s linear;

object-fit: contain; }

.update-product form .image-container

.update-product form .image-container .sub-image img:hover{

.sub-image{ transform: scale(1.1);

display: flex; }
.update-product form .box{ .orders .box-container{

width: 100%; display: grid;

border-radius: .5rem; grid-template-columns: repeat(auto-

padding:1.4rem; fit, 33rem);

font-size: 1.8rem; gap:1.5rem;

color:var(--black); align-items: flex-start;

background-color: var(--light-bg); justify-content: center;

margin:1rem 0; }

.orders .box-container .box{

.update-product form span{ padding:2rem;

font-size: 1.7rem; padding-top: 1rem;

color:var(--light-color); border-radius: .5rem;

} border:var(--border);

background-color: var(--white);

.update-product form textarea{ box-shadow: var(--box-shadow);

height: 15rem; }

resize: none;

} .orders .box-container .box p{

 line-height: 1.5;

font-size: 2rem; .accounts .box-container{

color:var(--light-color); display: grid;

margin:1rem 0; grid-template-columns: repeat(auto-

} fit, 33rem);

gap:1.5rem;

.orders .box-container .box p span{ align-items: flex-start;

color:var(--main-color); justify-content: center;

} }

.orders .box-container .select{ .accounts .box-container .box{

margin-bottom: .5rem; padding:2rem;

width: 100%; padding-top: .5rem;

background-color: var(--light-bg); border-radius: .5rem;

padding:1rem; text-align: center;

font-size: 1.8rem; border:var(--border);

color:var(--black); background-color: var(--white);

border-radius: .5rem; box-shadow: var(--box-shadow);

border:var(--border); }

}
.accounts .box-container .box p{ padding:2rem;

font-size: 2rem; padding-top: 1rem;

color:var(--light-color); border-radius: .5rem;

margin: 1rem 0; border:var(--border);

} background-color: var(--white);

box-shadow: var(--box-shadow);

.accounts .box-container .box p span{ }

color:var(--main-color);

} .contacts .box-container .box p{

line-height: 1.5;

.contacts .box-container{ font-size: 2rem;

display: grid; color:var(--light-color);

grid-template-columns: margin:1rem 0;

repeat(auto-fit, 33rem); }

gap:1.5rem;

align-items: flex-start; .contacts .box-container .box p span{

justify-content: center; color:var(--main-color);

} }

.contacts .box-container .box{

 }

@media (max-width:768px){

#menu-btn{

display: inline-block;

.header .flex .navbar{

position: absolute;

top:99%; left:0; right:0;

border-top: var(--border);

border-bottom: var(--border);

background-color: var(--white);

@media (max-width:991px){
transition: .2s linear;

clip-path: polygon(0 0, 100% 0,

html{
100% 0, 0 0);

font-size: 55%;
}
 font-size: 3.5rem;

.header .flex .navbar.active{ }

clip-path: polygon(0 0, 100% 0,

100% 100%, 0% 100%); .flex-btn{

} flex-flow: column;

gap:0;

.header .flex .navbar a{ }

display: block;

margin:2rem; .add-products form textarea{

} height:15rem;

.show-products .box-container{

@media (max-width:450px){ grid-template-columns: 1fr;

html{

font-size: 50%; .orders .box-container{

} grid-template-columns: 1fr;

.heading{
 .accounts .box-container{ navbar.classList.toggle('active');

grid-template-columns: 1fr; profile.classList.remove('active');

} }

.contacts .box-container{ document.querySelector('#user-

grid-template-columns: 1fr; btn').onclick = () =>{

} profile.classList.toggle('active');

navbar.classList.remove('active');

} }

Code of JS

admin_script.js:
window.onscroll = () =>{

let navbar = navbar.classList.remove('active');

document.querySelector('.header .flex profile.classList.remove('active');

.navbar'); }

let profile =

document.querySelector('.header .flex let mainImage =

.profile'); document.querySelector('.update-product

.image-container .main-image img');

document.querySelector('#menu- let subImages =

btn').onclick = () =>{ document.querySelectorAll('.update-

product .image-container .sub-image

img');

subImages.forEach(images =>{

images.onclick = () =>{

src =

images.getAttribute('src');

mainImage.src = src;

});

Project View
References

• PHP Manual:
https://www.php.net/manual/en/
• MySQL Documentation:
https://dev.mysql.com/doc/
• W3Schools: https://www.w3schools.com/
• MDN Web Docs:
https://developer.mozilla.org/en-US/
End