<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumer Registration</title>
</head>
<body>
<h2 align="center">Consumer Registration</h2>
<form>
<!-- Consumer Details Section -->
<fieldset>
<legend>Consumer Details</legend>
<table align="center">
<tr>
<td align="right">
<label for="consumerId">Consumer Number:</label>
<input type="number" id="consumerId" name="consumerId" placeholder="13-digit number">
</td>
<td style="width: 30px;"></td> <!-- Adds space between the two fields -->
<td align="right">
<label for="billNumber">Bill Number:</label>
<input type="number" id="billNumber" name="billNumber" placeholder="Last 5 digits">
</td>
</tr>
</table>
</fieldset>
<br>
<!-- User Details Section -->
<fieldset>
<legend><strong>User Details</strong></legend>
<table align="center">
<tr>
<td align="right"><label for="title">Title:</label></td>
<td>
<select id="title" name="title">
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</td>
<td align="right"><label for="customerName">Name:</label></td>
<td><input type="text" id="customerName" name="customerName" maxlength="50"></td>
</tr>
<tr>
<td align="right"><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email"></td>
<td align="right"><label for="mobile">Mobile Number:</label></td>
<td>
<select id="countryCode" name="countryCode">
<option value="+91">+91</option>
<option value="+1">+1</option>
<option value="+44">+44</option>
</select>
<input type="tel" id="mobile" name="mobile" maxlength="10" placeholder="10-digit number">
</td>
</tr>
</table>
</fieldset>
<br>
<!-- Login Details Section -->
<fieldset>
<legend><strong>Login Details</strong></legend>
<table align="center">
<tr>
<td align="right"><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" maxlength="30"></td>
<td align="right"><label for="confirmPassword">Confirm Password:</label></td>
<td><input type="password" id="confirmPassword" name="confirmPassword" maxlength="30"></td>
</tr>
</table>
</fieldset>
<br>
<!-- Submit and Reset Buttons -->
<div align="center">
<button type="submit">Register</button>
<button type="reset">Reset</button>
</div>
</form>
</body>
</html>
2nd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div>Welcome <span id="username">User</span></div>
<button onclick="logout()">Logout</button>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Pay Bill</a>
<a href="#">Register Complaint</a>
<a href="#">Complaint Status</a>
</nav>
<div class="container">
<h2>Pay Your Bill</h2>
<form id="paymentForm">
<div class="form-group">
<label for="billAmount">Bill Amount:</label>
<input type="number" id="billAmount" value="1500" readonly>
</div>
<div class="form-group">
<label for="totalPayableAmount">Total Payable Amount:</label>
<input type="number" id="totalPayableAmount" value="1550" readonly>
</div>
<div class="form-group">
<label for="ipgCharge">IPG Charge:</label>
<input type="number" id="ipgCharge" value="50" readonly>
</div>
<div class="form-group">
<label for="paymentMode">Mode of Payment:</label>
<select id="paymentMode" required>
<option value="">Select</option>
<option value="debit">Debit Card</option>
<option value="credit">Credit Card</option>
</select>
</div>
<div class="form-actions">
<button type="button" class="submit-button" onclick="proceedToPayment()">Pay Now</button>
<button type="button" class="cancel-button" onclick="goHome()">Back to Home</button>
</div>
</form>
</div>
<div class="card-payment hidden" id="cardPaymentSection">
<h2>Enter Your Card Details</h2>
<form id="cardDetailsForm">
<div class="form-group">
<label for="cardNumber">Card Number:</label>
<input type="number" id="cardNumber" minlength="16" maxlength="16" required>
</div>
<div class="form-group">
<label for="cardHolderName">Card Holder Name:</label>
<input type="text" id="cardHolderName" minlength="10" required>
</div>
<div class="form-group">
<label for="expiryDate">Expiry Date (MM/YY):</label>
<input type="text" id="expiryDate" pattern="\d{2}/\d{2}" placeholder="MM/YY" required>
</div>
<div class="form-group">
<label for="cw">CW:</label>
<input type="number" id="cw" minlength="3" maxlength="3" required>
</div>
<div class="form-actions">
<button type="button" class="submit-button" onclick="makePayment()">Make Payment</button>
</div>
</form>
</div>
<div class="hidden" id="transactionDetails">
<h2>Transaction Successful</h2>
<p>Transaction ID: <span id="transactionId"></span></p>
<button onclick="downloadReceipt()">Download Receipt</button>
</div>
<script src="script.js"></script>
</body>
</html>
//css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
margin-right: 20px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.container, .card-payment, #transactionDetails {
padding: 20px;
}
.hidden {
display: none;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input, .form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-actions {
margin-top: 20px;
}
.form-actions button {
padding: 10px 20px;
margin-right: 10px;
border: none;
cursor: pointer;
font-size: 16px;
}
.submit-button {
background-color: #28a745;
color: white;
}
.cancel-button {
background-color: #dc3545;
color: white;
}
// js
// Logout functionality
function logout() {
alert("Logged out successfully!");
window.location.href = "login.html"; // Redirect to login page
}
// Redirect to home
function goHome() {
alert("Redirecting to Home Page...");
window.location.href = "home.html"; // Redirect to home page
}
// Proceed to payment card details
function proceedToPayment() {
const paymentMode = document.getElementById("paymentMode").value;
if (paymentMode) {
document.getElementById("paymentForm").classList.add("hidden");
document.getElementById("cardPaymentSection").classList.remove("hidden");
} else {
alert("Please select a payment mode.");
}
}
// Make payment and show transaction details
function makePayment() {
const cardNumber = document.getElementById("cardNumber").value;
const cardHolderName = document.getElementById("cardHolderName").value;
const expiryDate = document.getElementById("expiryDate").value;
const cw = document.getElementById("cw").value;
if (cardNumber && cardHolderName && expiryDate && cw) {
document.getElementById("cardPaymentSection").classList.add("hidden");
document.getElementById("transactionDetails").classList.remove("hidden");
// Generate a mock transaction ID
document.getElementById("transactionId").textContent =
"TXN" + Math.floor(100000 + Math.random() * 900000);
} else {
alert("Please fill in all card details correctly.");
}
}
// Download receipt
function downloadReceipt() {
const transactionId = document.getElementById("transactionId").textContent;
const content = `Transaction Receipt\n\nTransaction ID: ${transactionId}\nAmount Paid: ₹1550\nThank you for your payment!`;
const blob = new Blob([content], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "Transaction_Receipt.txt";
a.click();
URL.revokeObjectURL(url);
}
3rd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Complaint/Service</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div>Welcome <span id="username">User</span></div>
<button onclick="logout()">Logout</button>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Pay Bill</a>
<a href="#">Register Complaint</a>
</nav>
<div class="container">
<h2>Register Complaint/Service</h2>
<form id="complaintForm">
<div class="form-group">
<label for="complaintType">Complaint/Service Type</label>
<select id="complaintType" onchange="updateCategory()" required>
<option value="">Select</option>
<option value="billing">Billing Related</option>
<option value="voltage">Voltage Related</option>
<option value="disruption">Frequent Disruption</option>
<option value="streetLight">Street Light Related</option>
<option value="pole">Pole Related</option>
</select>
</div>
<div class="form-group">
<label for="category">Category</label>
<select id="category" required>
<option value="">Select a Complaint Type First</option>
</select>
</div>
<div class="form-group">
<label for="contactPerson">Contact Person</label>
<input type="text" id="contactPerson" required>
</div>
<div class="form-group">
<label for="landmark">Landmark</label>
<input type="text" id="landmark" required>
</div>
<div class="form-group">
<label for="consumerNo">Consumer No.</label>
<input type="text" id="consumerNo" maxlength="13" pattern="\d{13}" required>
</div>
<div class="form-group">
<label for="problemDescription">Problem Description</label>
<textarea id="problemDescription" required></textarea>
</div>
<div class="form-group">
<label for="mobileNumber">Mobile Number</label>
<input type="text" id="mobileNumber" maxlength="10" pattern="\d{10}" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea id="address" required></textarea>
</div>
<div class="form-actions">
<button type="button" class="submit-button" onclick="submitComplaint()">Submit Complaint</button>
<button type="reset" class="cancel-button">Cancel</button>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
// css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
margin-right: 20px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.container {
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-actions {
margin-top: 20px;
}
.form-actions button {
padding: 10px 20px;
margin-right: 10px;
border: none;
cursor: pointer;
font-size: 16px;
}
.submit-button {
background-color: #28a745;
color: white;
}
.cancel-button {
background-color: #dc3545;
color: white;
}
// js
// Populating category based on complaint type
function updateCategory() {
const complaintType = document.getElementById("complaintType").value;
const category = document.getElementById("category");
category.innerHTML = ""; // Clear existing options
const categories = {
billing: ["Incorrect Bill", "Late Payment", "Billing Query"],
voltage: ["Low Voltage", "High Voltage", "Voltage Fluctuation"],
disruption: ["Power Outage", "Frequent Interruptions"],
streetLight: ["Broken Street Light", "Non-functional Street Light"],
pole: ["Leaning Pole", "Damaged Pole"]
};
if (categories[complaintType]) {
categories[complaintType].forEach(cat => {
const option = document.createElement("option");
option.value = cat;
option.textContent = cat;
category.appendChild(option);
});
} else {
const option = document.createElement("option");
option.value = "";
option.textContent = "Select a Complaint Type First";
category.appendChild(option);
}
}
// Simulate complaint submission
function submitComplaint() {
const form = document.getElementById("complaintForm");
if (form.checkValidity()) {
alert("Complaint registered successfully with unique ID: " + generateComplaintId());
form.reset();
} else {
alert("Please fill out all required fields correctly.");
}
}
// Generate a unique complaint ID
function generateComplaintId() {
return "CID" + Math.floor(100000 + Math.random() * 900000);
}
// Logout functionality
function logout() {
alert("Logged out successfully!");
window.location.href = "login.html"; // Redirect to login page (if available)
}
4th
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Home Page</title>
</head>
<body>
<!-- Top Bar with Menu -->
<div style="border-bottom: 1px solid black; padding: 10px; text-align: center;">
<a href="#" onclick="alert('Already on Home Page')">Home</a> |
<a href="#payBill">Pay Bill</a> |
<a href="#registerComplaint">Register Complaint</a> |
<a href="#complaintStatus">Complaint Status</a>
</div>
<!-- Welcome Section -->
<div style="text-align: right; margin: 10px;">
<span>Welcome, <b>Username</b></span>
<button onclick="alert('Redirecting to Login Page')">Logout</button>
</div>
<!-- Pay Bill Section -->
<div id="payBill" style="margin: 20px;">
<h3>Pay Bill</h3>
<form id="billForm">
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>Select</th>
<th>Bill ID</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="billCheckbox" value="500" onclick="calculateTotal()"></td>
<td>101</td>
<td>Electricity Bill</td>
<td>500</td>
</tr>
<tr>
<td><input type="checkbox" class="billCheckbox" value="300" onclick="calculateTotal()"></td>
<td>102</td>
<td>Water Bill</td>
<td>300</td>
</tr>
<tr>
<td><input type="checkbox" class="billCheckbox" value="200" onclick="calculateTotal()"></td>
<td>103</td>
<td>Gas Bill</td>
<td>200</td>
</tr>
</tbody>
</table>
<br>
<label for="totalAmount"><b>Total Amount:</b></label>
<input type="text" id="totalAmount" readonly value="0">
<br><br>
<button type="button" onclick="proceedToPay()">Proceed to Pay</button>
</form>
</div>
<!-- Payment Section -->
<div id="paymentScreen" style="margin: 20px; display: none;">
<h3>Payment Screen</h3>
<p>Your payment is being processed...</p>
</div>
<script>
// Calculate the total bill amount
function calculateTotal() {
const checkboxes = document.querySelectorAll('.billCheckbox');
let total = 0;
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
total += parseInt(checkbox.value);
}
});
document.getElementById('totalAmount').value = total;
}
// Redirect to payment screen
function proceedToPay() {
const total = document.getElementById('totalAmount').value;
if (total > 0) {
alert('Redirecting to Payment Screen');
document.getElementById('payBill').style.display = 'none';
document.getElementById('paymentScreen').style.display = 'block';
} else {
alert('Please select at least one bill to pay.');
}
}
</script>
</body>
</html>
Blockquote