OneCompiler

Bill.html

1638
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bill</title> </head> <style> .main { border: 1px solid black; border-radius: 10px; margin: 5%; margin-left: 20%; margin-right: 20%; background-color: azure; }

.b {
background-color: aquamarine;
}

table {
border: 1px solid black;
margin: 2%;
width: 96%;
}

.one {
padding-top: 2%;
display: flex;
width: 98%;
margin-right: 1%;
margin-left: 2%;
}

.two {
font-family: 'Times New Roman';
font-size: 18px;
text-align: right;
}

th {
font-size: 20px;
margin-right: 2%;
margin-top: 3%;
}

button {
font-size: 15px;
background-color: rgb(159, 128, 189);
font-weight: bold;
}

h1 {
font-size: 25px;
margin-left: 5%;
margin-right: 4%;
border-radius: 3px;
background-color: rgb(182, 142, 170);
color:rgb(82, 55, 82);
}

.ls {
border: 1px solid black;
background-color: rgb(168, 142, 168);
font-size: 20px;
margin-bottom: 2%;
width: fit-content;
margin-left: 35%;
}

.bic {
margin-left: 5%;
}

.t1 {
width: 50%;
padding-left: 2%;
margin-left: 25%;
padding-right: 2%;
}

.mop {
margin-left: 10%;
}

.bt {
border: 0px;
margin-left: 10%;
}

.cc {
color: rgb(94, 20, 94);
font-size: 18px;
margin-left: 8%;
}

.tal {
border: 0px;
width: 100%;
margin-left: 6%;
margin-top: 2%;
}

</style> <body class="b"> <div class="main"> <h1>Quick Ebill</h1> <table> <tr class = "one"> <nav> <th style = "border: 2px;"><a href = "viewbill.html">Home</a></th> <th><a href = "Bill.html">Pay Bill</a></th> <th><a href = "Regcom.html">Register Complaint</a></th> <th><a href = "comstatus.html">Complaint Status</a></th> </nav> </tr> <tr class = "two"> <td></td> <td style="background-color: rgb(185, 172, 201); text-align: center;">Welcome <label><span id="ua"></span></label></td> <td><button onclick="logn()" style="margin-right: 15%;">Logout</button></td> </tr> </table> <form> <h1>Bill Payment</h1> <div class = "bic"> For Detailed Payment Instructions <button style="border: 0px;">Click Here</button> </div> 
<table style="padding-left: 10%;">
    <th>Bill Details</th>
    <tr>
        <td>
            Bill Amount
        </td>
        <td id="pm1"></td>
    </tr>
    <tr>
        <td>
            Total Payable Amount
        </td>
        <td id="pm2"></td>
    </tr>
    <tr>
        <td>
            PG Charge
        </td>
        <td>
            As Applicable
        </td>
    </tr>
</table>

<table class="t1">
    <tr style="background-color:rgb(185, 172, 201);  text-align: center;">
        <td>Consumer Number</td>
        <td>Bill Number</td>
        <td>Payable Amount</td>
    </tr>
    <tr style="text-align: center;">
        <td id="rdno"></td>
        <td id="rdbl">34523456</td>
        <td id="pm3"></td>
    </tr>
</table>

    <div class="mop">
        Kindly select your mode of payment
    </div>
    <div class="bt">
        <input type="radio" id="pn" name ="same">
        <label for="pn">Debit Card</label>
        <input type="radio" id="bth" name="same">
        <label for="bth">Credit Card</label>
    </div>

<table class = "ls">
    <tr>
        <td>
            <button onclick="amber()">Pay Now</button>
            <button onclick="hom()">Back to Home</button>
        </td>
    </tr>
</table>
</form>
</div>
</body> <script> function amber(){ window.open("PaymentGateway.html"); } function hom(){ window.open("viewbill.html"); } function logn(){ window.open("login.html"); } document.getElementById("ua").innerHTML=localStorage.getItem("u"); document.getElementById("rdno").innerHTML =Math.ceil(Math.random()*Math.pow(10,13)); document.getElementById("rdbl").innerHTML =Math.ceil(Math.random()*Math.pow(10,8)); ans=localStorage.getItem('total'); if(ans!=null){ document.getElementById("pm1").innerHTML=ans; document.getElementById("pm2").innerHTML=ans; document.getElementById("pm3").innerHTML=ans; } else{ document.getElementById("pm1").innerHTML=null; document.getElementById("pm2").innerHTML=null; document.getElementById("pm3").innerHTML=null; } </script> </html>