My Work

                Never    
HTML
        
Download Raw Clone Report Copy 
<!DOCTYPE html>
<html>
  <head>
    <title>Quick E-Bill</title>
    <style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,body {
  background-color: #c8d5b9;
  font-family: "Roboto", sans-serif;
  width: 100%;
  height:100%;
}
nav {
  display: flex;
  justify-content:space-between;
  align-items: center;
}
ul li {
  list-style: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.7vw;
}
nav {
  background-color: #d4a373;
  padding: 2vw;
}
nav ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2vw;
  
}
#complaintForm {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 5vw;
}
#complaintResult,#statusResult {
  margin-top: 20px;
  color: green;
}
.leftSide, .rightSide {
  background-color: #fff;
  padding: 2vw;
  border-radius: 10px;
  
}
#mobile::before, #problemDesc::before {
  content:"*";
  color: red;
}
label {
  font-weight: 600;
  text-transform: capitalize;
}
.leftSide > * {
  margin-bottom: 2vw;
}
.rightSide > * {
  margin-bottom: 2vw;
}
.logout{
  padding: 1vw;
  border-radius: 10px;
  background-color: #e26d5c;
  outline: none;
  border: none;
}
#complaintStatus {
  justify-content: center;
  align-items: center;
  height: 50vh;
  flex-direction: column;
  margin: 5px;
}
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

</style>
  </head>
   <body>
    <div style="background-color: #d4a373">
      <h2 style="text-transform: uppercase; text-align: center; padding: 2vw; border-bottom: 1px solid #000">Quick E-Bill</h2>
    </div>
      
      <nav>
        <ul>
          <li>Home</li>
          <li>Pay Bill</li>
          <li>Register Complaint</li>
          <li>Complaint Status</li>
        </ul>
        <ul>
          <li>Welcome XXX</li>
          <button class="logout">Log Out</button>
        </ul>
      </nav>
    <div class="container" id="complaintRegistration">
      <div style="background-color: #e26d5c">
        <h2 style="padding: 2vw; text-transform: capitalize">File New Complaint</h2>
      </div>
      
      <form id="complaintForm">
        <div class="leftSide">
         
          <label for="FirstSelect">Complaint/Service type:</label>
          <select name="complaintServices" id="firstSelect" onChange="updateSecondSelect()">
            <option value="streetLight">STREET LIGHT RELATE</option>
            <option value="water">WATER RELATED</option>
            <option value="connectionIssue">CONNECTION RELATED</option>
<option value="serviceIssue">SERVICE RELATED</option>
         </select>
        <br>
        <label for="secondSelect" style="margin-bottom: 2vw">Category<label>
          <select name="complaint" id="secondSelect">
<option value="electricity issue">Not enough power</option>

         </select>
        <br>
    <label for="lname" >Contact Person:</label>
    <input type="text" id="contact" name="contact" placeholder="Contact Person" value=""><br><br>
          <label for="phone" id="mobile">Mobile Number:</label>
          <input type="tel" pattern="[0-9]{10}" maxlength="10" placeholder="Mobile Number" required>
        </div>
        <div class="rightSide">
          <label for="landmark"> Landmark </label>
           <input type="text" id="landmark" name="landmark" value=""><br>
          <label for="consumer number"> Consumer Number:</label>
          <input type="text" name="Consumer Number" value="" maxlength="13"><br>
          <label for="complaintDescription" id="problemDesc"> Problem Description </label>
          <textarea id="complaintDescription" rows="4" required></textarea> <br>
          <label for="address"> Address </label>
            <textarea id="address" rows="4" required></textarea>
        <br>
            
        </div>
         
      </form>
          <div class="buttons">
            <input type="reset" value="Cancel"></input>
           <button type="button" onClick="submitComplaint()">Submit</button>
          </div>
          
        <div id="complaintResult"></div>
     </div>
     <div class="container" id="complaintStatus" style="display:none">
       <h2 style="margin-bottom: 10px">Check Complaint Status</h2>
         <form id="statusForm">
           <label for="complaintNumber">Complaint Number</label>
           <input type="text" id="complaintNumber" required />
           <button type="button" onClick="checkComplaintStatus()">Check Status</button>
         </form>
         <div id="statusResult"></div>
      </div>


	<script>

function updateSecondSelect(){
	var firstSelect = document.getElementById('firstSelect');
	var secondSelect = document.getElementById('secondSelect');
secondSelect.innerHTML = ' ';
if (firstSelect.value === 'streetLight') {
	var option = document.createElement('option');

option.value = 'electricity issue';
option.text = 'Not enough power';
secondSelect.add(option);
}else if (firstSelect.value === 'water') {
	var option = document.createElement('option');
option.value = 'water issue';
option.text = 'Not enough water';
secondSelect.add(option);
}else if (firstSelect.value === 'connectionIssue') {
		var option = document.createElement('option');
option.value = 'serverFail';
option.text = 'Server Failed';
secondSelect.add(option);
}else if (firstSelect.value === 'serviceIssue') {
		var option = document.createElement('option');
option.value = 'portalUnresponsive';
option.text = 'Portal Not Opening';
secondSelect.add(option);
}
}

function generateComplaintNumber() {
  return ""+Math.floor(Math.random()*100000);
}

function saveComplaint(complaintNumber, description) {
  const existingComplaints = JSON.parse(localStorage.getItem("complaints")) || [];
  existingComplaints.push({complaintNumber,description});
  localStorage.setItem("complaints",JSON.stringify(existingComplaints));
}

function submitComplaint() {
  const complaintDescription = document.getElementById("complaintDescription").value;
  if(complaintDescription) {
    const complaintNumber = generateComplaintNumber();
    saveComplaint(complaintNumber, complaintDescription);
    document.getElementById("complaintResult").innerHTML = 
      `
      <p>Complaint Submitted successfully!</p>
    <p>Your complaint Number: ${complaintNumber}</p>`;
    document.getElementById("complaintStatus").style.display = "block";
  }else {
    alert("Please enter a complaint description");
  }
}

function checkComplaintStatus() {
  const complaintNumber = document.getElementById("complaintNumber").value;
  if (complaintNumber) {
    const existingComplaints = JSON.parse(localStorage.getItem("complaints")) || [];
    const selectedComplaint = existingComplaints.find((complaint) => complaint.complaintNumber === complaintNumber);
    if (selectedComplaint) {
      document.getElementById("statusResult").innerHTML = 
        `
        <p>Complaint Status:</p>
        <p>Complaint Number: ${selectedComplaint.complaintNumber}</p>
        <p>Description: ${selectedComplaint.description}</p>
        `;
    }else {
      document.getElementById("statusResult").innerHTML = "<p>No such complaint found</p>";
    }
  }else {
    alert("Please enter a complaint number");
  }
}


	</script>
   </body>
</html>

Raw Text

Recent Public Pastes