Code Implementation
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
}
h1 {
margin-bottom: 30px;
color: #333;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
width: 80%;
max-width: 600px;
}
.button-grid a {
display: block;
background-color: #333;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s;
font-size: 16px;
}
.button-grid a:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>Welcome to Our Store</h1>
<div class="button-grid">
<a href="registration.html">Registration</a>
<a href="search.html">Search Products</a>
<a href="order.html">Available Products</a>
<a href="payment.html">Payment</a>
<a href="update.html">Update Catalog</a>
<a href="help.html">Help</a>
</div>
</body>
</html>
Order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Available Products</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="search.html">Search Products</a></li>
<li><a href="order.html">Available Products</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="update.html">Update Catalog</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<h2>Available Products</h2>
<div class="product">
<h3>Product Name</h3>
<p>Description of the product.</p>
<p>Price: $10.00</p>
<button type="button">Add to Cart</button>
</div>
<div class="product">
<h3>Another Product</h3>
<p>Description of another product.</p>
<p>Price: $20.00</p>
<button type="button">Add to Cart</button>
</div>
</body>
</html>
Payment.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
form {
margin-top: 20px;
}
label {
display: inline-block;
width: 150px;
margin-bottom: 10px;
}
input, select {
padding: 6px;
width: 200px;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="search.html">Search Products</a></li>
<li><a href="order.html">Available Products</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="update.html">Update Catalog</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<h2>Payment Details</h2>
<form action="/process_payment" method="POST">
<label for="name">Cardholder Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" name="card-number" required><br><br>
<label for="expiry">Expiry Date:</label>
<input type="month" id="expiry" name="expiry" required><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv" maxlength="4" required><br><br>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount" step="0.01" required><br><br>
<button type="submit">Make Payment</button>
</form>
</body>
</html>
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="search.html">Search Products</a></li>
<li><a href="order.html">Available Products</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="update.html">Update Catalog</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<h2>New Customer Registration</h2>
<form action="/register" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
search.html
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="search.html">Search Products</a></li>
<li><a href="order.html">Available Products</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="update.html">Update Catalog</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<h2>Search Products</h2>
<form action="/search-products" method="GET">
<label for="search">Search Products:</label>
<input type="text" id="search" name="query" placeholder="Enter product name or category">
<button type="submit">Search</button>
</form>
<div id="product-list">
<div class="product-card">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>$10.00</p>
</div>
<div class="product-card">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>$20.00</p>
</div>
<div class="product-card">
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>$30.00</p>
</div>
</div>
</body>
</html>
update.html
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="search.html">Search Products</a></li>
<li><a href="order.html">Available Products</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="update.html">Update Catalog</a></li>
<li><a href="help.html">Help</a></li>
</ul>
</nav>
<h2>Update Product Catalog</h2>
<form action="/update-catalog" method="POST">
<label for="product-name">Product Name:</label>
<input type="text" id="product-name" name="product-name" required><br><br>
<label for="price">Price:</label>
<input type="number" id="price" name="price" required><br><br>
<label for="description">Description:</label>
<textarea id="description" name="description" required></textarea><br><br>
<button type="submit">Update Catalog</button>
</form>
</body>
