Lab 01 – Source Code Report
1. New Customer Registration (ncr.html)
<!DOCTYPE html>
<html>
<head>
<title>New Customer Registration</title>
<style>
body {
font-family: Arial;
background: #f5f1ea;
margin: 0;
}
.navbar {
background: #8b7d6b;
padding: 12px 0;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.nav-center {
width: 80%;
margin: auto;
}
.container {
width: 400px;
margin: 40px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
input, textarea {
width: 100%;
padding: 8px;
margin: 6px 0;
border: 1px solid #d6cfc4;
}
button {
width: 100%;
padding: 10px;
background: #8b7d6b;
color: white;
border: none;
}
h2 { text-align: center; }
</style>
</head>
<body>
<div class="navbar">
<div class="nav-center">
<a href="../index.html">Laiba</a>
<a href="ncr.html">Register</a>
<a href="sop.html">Search</a>
<a href="pcu.html">Product</a>
<a href="psop.html">Order</a>
<a href="pp.html">Payment</a>
</div>
</div>
<div class="container">
<h2>New Customer Registration</h2>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<input type="password" placeholder="Confirm password">
<p>Gender:
<input type="radio" name="g"> Male
<input type="radio" name="g"> Female
<input type="radio" name="g"> Others
</p>
<input type="text" placeholder="Contact number">
<textarea placeholder="Address"></textarea>
<input type="text" placeholder="City">
<input type="text" placeholder="State">
<button>Sign Up</button>
</div>
</body>
</html>
2. Search Products Page (sop.html)
<!DOCTYPE html>
<html>
<head>
<title>Search Products</title>
<style>
body {
font-family: Arial;
background: #f5f1ea;
margin: 0;
}
.navbar {
background: #8b7d6b;
padding: 12px 0;
}
.nav-center {
width: 80%;
margin: auto;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.box {
width: 40%;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 8px;
}
input, select {
padding: 6px;
width: 80%;
margin: 6px 0;
border: 1px solid #d6cfc4;
}
button {
padding: 6px 14px;
background: #8b7d6b;
color: white;
border: none;
}
.category span {
padding: 6px 12px;
background: #e7e1d8;
margin: 6px;
display: inline-block;
border-radius: 4px;
}
.options {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-center">
<a href="../index.html">Laiba</a>
<a href="ncr.html">Register</a>
<a href="sop.html">Search</a>
<a href="pcu.html">Product</a>
<a href="psop.html">Order</a>
<a href="pp.html">Payment</a>
</div>
</div>
<div class="box">
<h2>Welcome to PVFC</h2>
<input type="text" placeholder="Search products">
<button>Search</button>
<div class="category">
<span>Natural Ash</span>
<span>White Ash</span>
<span>Walnut</span>
<span>Cherry</span>
</div>
<div class="options">
<h4>Table</h4>
<select>
<option>Coffee Table</option>
<option>End Table</option>
<option>Writer's Table</option>
<option>Dining Table</option>
</select>
<h4>Desk</h4>
<select>
<option>Computer Desk</option>
<option>8-Drawer Desk</option>
<option>Writer's Desk</option>
</select>
</div>
</div>
</body>
</html>
3. Product Details Page (pcu.html)
<!DOCTYPE html>
<html>
<head>
<title>Product Details and Order</title>
<style>
body {
font-family: Arial;
background: #f5f1ea;
margin: 0;
}
.navbar {
background: #8b7d6b;
padding: 12px 0;
}
.nav-center {
width: 80%;
margin: auto;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.wrapper {
width: 90%;
margin: 30px auto;
display: flex;
gap: 20px;
}
.product-box {
flex: 2;
background: white;
padding: 20px;
border-radius: 8px;
}
.recommend-box {
flex: 1;
background: white;
padding: 15px;
border-radius: 8px;
}
.recommend-box h3 {
text-align: center;
}
img {
width: 180px;
height: 180px;
border: 1px solid #d6cfc4;
}
button {
padding: 10px 18px;
background: #8b7d6b;
color: white;
border: none;
margin-right: 10px;
}
select {
padding: 8px;
width: 200px;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-center">
<a href="../index.html">Laiba</a>
<a href="ncr.html">Register</a>
<a href="sop.html">Search</a>
<a href="pcu.html">Product</a>
<a href="psop.html">Order</a>
<a href="pp.html">Payment</a>
</div>
</div>
<div class="wrapper">
<div class="product-box">
<img src="#" alt="product image">
<p><b>Product Description</b><br>
High quality wooden furniture with premium finish and durability.</p>
<h4>Finish</h4>
<select>
<option>Natural Ash</option>
<option>Cherry</option>
<option>Walnut</option>
</select>
<h4>Dimensions</h4>
<select>
<option>30 x 30 x 30</option>
<option>40 x 40 x 30</option>
</select>
<br><br>
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
<div class="recommend-box">
<h3>Products you may like</h3>
<div>
<img src="#">
<p>Side Table</p>
</div>
<div>
<img src="#">
<p>Computer Desk</p>
</div>
</div>
</div>
</body>
</html>
4. Order Update Page (psop.html)
<!DOCTYPE html>
<html>
<head>
<title>Update Order</title>
<style>
body {
font-family: Arial;
background: #f5f1ea;
margin: 0;
}
.navbar {
background: #8b7d6b;
padding: 12px 0;
}
.nav-center {
width: 80%;
margin: auto;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.box {
width: 40%;
margin: 30px auto;
background: white;
padding: 20px;
border-radius: 8px;
}
.item {
border-bottom: 1px solid #ddd;
padding: 10px;
}
button {
padding: 8px 16px;
background: #8b7d6b;
color: white;
border: none;
margin: 5px;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-center">
<a href="../index.html">Laiba</a>
<a href="ncr.html">Register</a>
<a href="sop.html">Search</a>
<a href="pcu.html">Product</a>
<a href="psop.html">Order</a>
<a href="pp.html">Payment</a>
</div>
</div>
<div class="box">
<h2>Order Details</h2>
<div class="item">
Product Name
<input type="number" value="1">
</div>
<div class="item">
Product Name
<input type="number" value="2">
</div>
<div class="item">
Product Name
<input type="number" value="1">
</div>
<button>Confirm Order</button>
<button>Update Order</button>
</div>
</body>
</html>
5. Payment Page (pp.html)
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<style>
body {
font-family: Arial;
background: #f5f1ea;
margin: 0;
}
.navbar {
background: #8b7d6b;
padding: 12px 0;
}
.nav-center {
width: 80%;
margin: auto;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.pay {
width: 400px;
margin: 40px auto;
background: white;
padding: 20px;
border-radius: 8px;
}
input, select {
width: 380px;
padding: 8px;
margin: 6px 0;
}
button {
width: 100%;
padding: 10px;
background: #8b7d6b;
color: white;
border: none;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-center">
<a href="../index.html">Laiba</a>
<a href="ncr.html">Register</a>
<a href="sop.html">Search</a>
<a href="pcu.html">Product</a>
<a href="psop.html">Order</a>
<a href="pp.html">Payment</a>
</div>
</div>
<div class="pay">
<h2>Payment Provision</h2>
<select>
<option>Credit Card</option>
<option>Debit Card</option>
<option>Cash on Delivery</option>
</select>
<input type="text" placeholder="Visa / Master Card Number">
<input type="text" placeholder="MM / YY">
<input type="text" placeholder="CVV">
<button>Pay Now</button>
</div>
</body>
</html>