Front End Coding
Uploaded by
pickitoutofficialFront End Coding
Uploaded by
pickitoutofficialRAILWAY RESERVATION SYSTEM
PROJECT REPORT
FINAL REVIEW
WEB DEVELOPMENT – CSC4002
By
DHATCHAIYINI.R – (22BCS0003)
MOHAMED ASRAR.A - (22BCS0026)
GOPIKA.V - ( 22BCS0125)
SUSEENDARAM.S - (22BCS0185)
MADHAN KUMAR.R. J - (22BCS0191)
Under the guidance of
SUREKA S
SCORE
1
ABSTRACT
This project is about reserving ticket for railway
transportation. It will help the passengers to book the tickets for
their journey in online process. The users must fill the
registration to access the system. Each user has an account. And
then, this system allows to users to check train schedule, seat
availability and train details. They can access the cancellation
process and get refund amount. The refund amount may be half
of the amount which depends upon no of days to cancel their
process. The user can easily to access and check their status.
The purpose of Railway Reservation System is a website
which provides the train timing details, reservation, billing and
cancellation.
Using these systems Ticket Purchasing person can perform
operations like finding out the Source and Destination stations,
train timings and to know information about PNR status, seats
availability and costs of each ticket, etc..,
ii
Implementation
HOMEPAGE
<!DOCTYPEhtml>
<html>
<head><title>HomePage</title>
<linkrel="icon"href="1.png">
<style>b
ody
background-image:url("1.jpg");
background-size:cover;
h1
font-size:80px;
color:white;
font-family:"TimesNewRoman",Times,serif;
h2
font-size:40px;
iii
color:white;
font-family:"TimesNewRoman",Times,serif;
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
.headera{
iv
float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
v
float:none;
</style>
</head>
<body>
<divclass="header">
<ul>
<li><aclass="active"href="hp.html"><b>HomePage</b></a></li>
<li><ahref="login.html">Login</a></li>
<li><ahref="signup.html">SignUp</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><ahref="FAQs.html">FAQs</a></li>
<li><ahref="feed.html">FeedBack</a></li>
</ul>
</div>
<divstyle="padding-left:20px">
<br><br><br><br><br><br><br><br><br><br>
<h1align="center">INDIANRAILWAYS</h1>
<h2align="center">Safety|Security|Punctuality</h2>
</div>
</body>
</html>
vi
LOGINPAGE
<!DOCTYPEhtml>
<html>
<head><title>LogIn</title>
<linkrel="icon"href="1.jpg">
<style>b
ody
background-image:url("1.jpg");
background-size:cover;
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
vii
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
}
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
viii
}
.header a.logo
{ font-size: 25px;
font-weight:bold;
}
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
body
ix
{
font-family:Arial,Helvetica,sans-serif;
input[type=text],input[type=password]
width: 100%;
padding: 10px 20px;
margin: 8px 0;
display:inline-block;
border: 1px solid #ccc;
box-sizing:border-box;
button
background-color:blue;
color: white;
padding:14px20px;
margin: 8px 0;
border:none; cursor:
pointer; width:
100%;
}
x
.cancelbtn
{ width:aut
o;
padding: 10px 18px;
background-color:red;
}
.imgcontainer
{ text-
align:center;
margin:24px012px 0;
img.avatar {
width:13%;
border-radius:30%;
.container
{ padding:16px;
.psw {
float: right;
xi
padding-top:16px;
xii
}
.active
background-color:blue;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["uname"].value; if
(x == "")
alert("EnterUserName...!!!");
return false;
varx=document.forms["myForm"]["psw"].value; if
(x == "")
alert("EnterPassword...!!!");
return false;
xiii
}
</script>
</head>
<body>
<divclass="header">
<ul>
<li><ahref="hp.html">HomePage</a></li>
<li><aclass="active"href="login.html"><b>Login</b></a></li>
<li><ahref="signup.html">SignUp</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><ahref="FAQs.html">FAQs</a></li>
</ul>
</div>
<h1><fontcolor="white">Login</font></h1>
<hr>
<formname="myForm"action="menu.html"onsubmit="return
validateForm()" method="post">
<divclass="imgcontainer">
<imgsrc="log2.png"alt="Avatar"class="avatar">
</div>
<divclass="container">
xiv
<label for="uname"><b><font
color="white">Username</font></b></label>
<inputtype="text"placeholder="EnterUsername"name="uname"><br>
<labelfor="psw"align="center"><b><font
color="white">Password</font></b></label>
<inputtype="password"placeholder="EnterPassword"name="psw">
<buttontype="submit"><b>Login</b></button>
<label>
<input type="checkbox" checked="checked"
name="remember"><fontcolor="white">Rememberme</font>
</label>
</div>
<divclass="container">
<buttontype="button"class="cancelbtn"><font
color="white"><b>Cancel</b></font></button>
<spanclass="psw"><fontcolor="white">Forgot<ahref="#"><font
color="#4049ff">Password?</font></a></span>
</div>
</form>
</body>
</html>
xv
SIGNUPPAGE
<!DOCTYPEhtml>
<html>
<head><title>SignUp</title>
<linkrel="icon"href="22.png">
<style>
.active
background-color:white;
body
{background-image:url("22.jpeg");
background-size:cover;
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
xvi
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
xvii
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a.logo
{ font-size: 25px;
font-weight:bold;
.header a:hover
{ background-
color:#ddd;
xviii
color:black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
body
{font-family:Arial,Helvetica,sans-serif;}
{box-sizing:border-box;}
input[type=number],input[type=number]
{ width: 100%;
padding: 15px;
margin:5px022px0;
display: inline-block;
border: none;
xix
background:#f1f1f1;
input[type=text],input[type=password]{ width:
100%;
padding: 15px;
margin:5px022px0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=email],input[type=password]
{ width: 100%;
padding: 15px;
margin:5px022px0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus,input[type=password]:focus{
background-color: #ddd;
outline:none;
xx
button{
background-color:#4CAF50;
color: white;
padding:14px20px;
margin: 8px 0;
border:none; cursor:
pointer; width:
100%;
opacity:0.9;
button:hover{ opacity
:1;
.cancelbtn{
padding: 14px 20px;
background-color:#f44336;
xxi
.cancelbtn,.signupbtn{ flo
at: left;
width:50%;
.signupbtn
{ float: left;
width:50%;
background-color:blue;
.container
{ padding:0px;
.modal
{ display:
none;
position:fixed;
z-index: 1;
left:0;
top:0;
width:100%;
height:100%;
xxii
overflow:auto;
background-color:#474e5d;
padding-top: 50px;
.modal-content
{ background-color:
#fefefe;
margin:5%auto15%auto;
border: 1px solid #888;
width: 60%;
hr
border:1pxsolid#f1f1f1;
margin-bottom: 20px;
.close:hover,
.close:focus
{ color:#f44336;
cursor:pointer;
}
xxiii
.clearfix::after{
content: "";
clear: both;
display: table;
.active
background-color:dodgerblue;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["email"].value; if
(x == "")
alert("EnterTheEmailID...!!!");
return false;
varx=document.forms["myForm"]["number"].value;
if (x == "")
xxiv
alert("EnterTheMobileNumber...!!!"); return
false;
varx=document.forms["myForm"]["psw"].value; if
(x == "")
alert("EnterThePassword...!!!");
return false;
varx1=document.forms["myForm"]["psw-repeat"].value; if
(x1 == "")
alert("RepeatThePassword...!!!");
return false;
vara=document.myForm.number.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.number.focus();return
false;
}
xxv
if((a.length<10)||(a.length>10))
alert("YourMobileNumbermustbe10Digits"); document.myForm.number.select();
returnfalse;
if(x!=x1)
alert("\nPassworddidnotmatch...!!!");
return false;
else
alert("PasswordMatched...!!!");
return true;
xxvi
</script>
</head>
<body>
<ul>
<divclass="header">
<li><ahref="hp.html">HomePage</a></li>
<li><aclass="active"href="signup.html"><b>SignUp</b></a></li>
<li><ahref="login.html">Login</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><ahref="FAQs.html">FAQs</a></li>
</ul>
<formname="myForm"action="login.html"onsubmit="return
validateForm()" method="post">
<divclass="container">
<h1><fontcolor="white">SignUp</font></h1>
</div>
<hr>
<label for="email"><b><font
color="white">Email</b></font></label>
<inputtype="email"pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a- z]
{2,}$" placeholder="Enter Email" name="email"><br>
<labelfor="number"><b><fontcolor="white">Phone
Number</b></font></label>
xxvii
<inputtype="number"pattern="^\d{10}$"placeholder="EnterYour
Mobile Number" name="number">
<label for="psw"><b><font
color="white">Password</b></font></label>
<inputtype="password"placeholder="EnterPassword"name="psw">
<labelfor="psw-repeat"><b><fontcolor="white">Repeat
Password</font></b></label>
<inputtype="password"placeholder="RepeatPassword"name="psw-
repeat">
<label>
<input type="checkbox" checked="checked" name="remember"
style="margin-bottom:0px"><fontcolor="white">Rememberme</font>
</label>
<p><fontcolor="white">Bycreatinganaccountyouagreetoour
</font><ahref="#"style="color:dodgerblue">Terms&Privacy</a>.</p>
<divclass="clearfix">
<buttontype="button"class="cancelbtn">Cancel</button>
<buttontype="submit"onclick="myFunction()"
class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</body>
</html>
xxviii
MAINMENUPAGE
<!DOCTYPEhtml>
<html>
<head><title>MainMenu</title>
<linkrel="icon"href="1.jpg">
<style>b
ody
background-image:url("3.jpg");
background-size:cover;
h1
font-size: 80px;
color:dodgerblue;
font-family:"TimesNewRoman",Times,serif;
h2
font-size:40px;
color:white;
font-family:"TimesNewRoman",Times,serif;
xxix
}
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
xxx
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a:hover
{ background-
color:#ddd; color: black;
}
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
xxxi
{
float:none;
</style>
</head>
<body>
<divclass="header">
<ul>
<li><aclass="active"href="menu.html">MainMenu</a></li>
<li><ahref="booking.html">TicketBooking</a></li>
<li><ahref="cancel.html">TicketCancellation</a></li>
<li><ahref="pnr.html">PNRStatus</a></li>
<listyle="float:right"><aclass="active"href="login.html">LogOut</
a></li>
</ul>
</div>
<divstyle="padding-left:20px">
<br><br><br><br><br><br><br><br>
<h2align="center">Safety|Security|Punctuality</h2>
</div>
</body>
</html>
xxxii
TICKETBOOKINGPAGE
<!DOCTYPEhtml>
<html>
<head><title>Booking</title>
<linkrel="icon"href="1.png">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
xxxiii
{
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
}
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a.logo
{ font-
size:25px;
xxxiv
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
.active
background-color:dodgerblue;
xxxv
body
{box-sizing: border-box;}
body{background-image:url("1.jpg");
background-size:cover;
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
xxxvi
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
}
</style>
xxxvii
<script>
functionvalidateForm()
varx=document.forms["myForm"]["firstname"].value; if
(x == "")
alert("EnterTheSource...!!!");
return false;
varx=document.forms["myForm"]["lastname"].value; if
(x == "")
alert("EnterTheDestination...!!!");
return false;
varx=document.forms["myForm"]["date"].value; if
(x == "")
alert("ChooseTheDateOfTravel...!!!");
return false;
xxxviii
}
varx=document.forms["myForm"]["dropdown"].value; if
(x == "")
alert("SelecttheClass...!!!");
return false;
</script>
</head>
<body>
<divclass="header">
<ul>
<li><ahref="menu.html">MainMenu</a></li>
<li><aclass="active"href="booking.html"><b>Ticket
Booking</b></a></li>
<listyle="float:right"><aclass="active"href="login.html">LogOut</
a></li>
</ul>
</div>
xxxix
<h1><fontcolor="white">BookYourTicket</font></h1>
<hr>
<divclass="container">
<formname="myForm"action="trains.html"onsubmit="return
validateForm()" method="post">
<labelfor="fname">From</label>
<inputtype="text"name="firstname"placeholder="EnterSource
Station">
<labelfor="lname">To</label>
<inputtype="text"name="lastname"placeholder="EnterDestination
Station">
<labelfor="subject">DateOfJourney</label>
<inputtype="date"name="date"placeholder="dd-mm-yyyy">
<br>
</td><td>
<labelfor="drop">Class</label>
<selectname="dropdown">
<optionvalue="">AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
xl
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Find Trains">
</form>
</div>
</body>
</html>
xli
TICKETCANCELATIONPAGE
<!DOCTYPEhtml>
<html>
<head><title>CancelTicket</title>
<linkrel="icon"href="1.jpg">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
xlii
{
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
}
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a.logo
{ font-
size:25px;
xliii
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
.active
background-color:dodgerblue;
xliv
body
* {box-sizing: border-box;}
body{background-image:url("2.jpg");
background-size:cover;
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
xlv
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
}
</style>
xlvi
<script>
functionvalidateForm()
varx=document.forms["myForm"]["pnrnumber"].value; if
(x == "")
alert("EnterPNRNumber...!!!");
return false;
vara=document.myForm.pnrnumber.value;
if((a.length<10)||(a.length>10))
alert("YourPNRNumbermustbe10Integers");
document.myForm.pnrnumber.select();
returnfalse;
</script>
</head>
<body>
<divclass="header">
xlvii
<ul>
<li><ahref="menu.html">MainMenu</a></li>
<li><aclass="active"href="pnr.html"><b>Ticket
Cancellation</b></a></li>
<listyle="float:right"><aclass="active"href="login.html">LogOut</
a></li>
</ul>
</div>
<h1><fontcolor="white">CancelYourTicket</font></h1>
<hr>
<divclass="container">
<formname="myForm"action=".html"onsubmit="return
validateForm()" method="post">
<labelfor="fname"><b>PNRNumber</b></label>
<inputtype="text"id="fname"name="pnrnumber"
placeholder="Enter PNR Number">
<inputtype="submit"align="center"value="CancelTicket">
</form>
</div>
</body>
</html>
xlviii
PNRSTATUSPAGE
<!DOCTYPEhtml>
<html>
<head><title>PNRStatus</title>
<linkrel="icon"href="1.jpg">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
xlix
{
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
}
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a.logo
{ font-
size:25px;
l
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
.active
background-color:dodgerblue;
li
body
* {box-sizing: border-box;}
body{background-image:url("2.jpg");
background-size:cover;
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
lii
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
}
</style>
liii
<script>
functionvalidateForm()
varx=document.forms["myForm"]["pnrnumber"].value; if
(x == "")
alert("EnterPNRNumber...!!!");
return false;
vara=document.myForm.pnrnumber.value;
if((a.length<10)||(a.length>10))
alert("YourPNRNumbermustbe10Integers");
document.myForm.pnrnumber.select();
returnfalse;
</script>
</head>
<body>
<divclass="header">
liv
<ul>
<li><ahref="menu.html">MainMenu</a></li>
<li><aclass="active"href="pnr.html"><b>PNRStatus</b></a></li>
<listyle="float:right"><aclass="active"href="login.html">LogOut</
a></li>
</ul>
</div>
<h1><fontcolor="white">PNRStatus</font></h1>
<hr>
<divclass="container">
<formname="myForm"action=".html"onsubmit="return
validateForm()" method="post">
<labelfor="fname"><b>PNRNumber</b></label>
<inputtype="text"id="fname"name="pnrnumber"
placeholder="Enter PNR Number" max="10">
<inputtype="submit"align="center"value="CheckStatus">
</form>
</div>
</body>
</html>
lv
TRAINSPAGE
<!DOCTYPEhtml>
<html>
<head><title>Trains</title>
<linkrel="icon"href="1.jpg">
<link
rel="stylesheet"href="https://www
.w3schools.com
/w3css/4/w3.css">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
lvi
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:dodgerblue;
.header a
{ float: left;
color:black;
text-align:center;
padding: 11px;
text-decoration:none;
font-size: 15px;
line-height:30px;
lvii
border-radius: 4px;
margin-right:-105px;
padding-left:10px;
.header a.logo
{ font-size: 25px;
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
lviii
.header-right
float:none;
.active
background-color:doggerblue;
body
{box-sizing:border-box;}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
lix
resize:vertical;
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
lx
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
h2
font-size: 40px;
color:dodgerblue;
font-family:"TimesNewRoman",Times,serif;
</style>
</head>
<body>
<divclass="w3-container">
<h2><b>TrainsInThisRoute</b></h2>
lxi
<tableclass="w3-table-allw3-hoverable">
<thead>
<trclass="w3-doggerblue">
<th>TrainName&Number</th>
<th>Departs</th>
<th>Arrives</th>
<thclass="w3-center">Class</th>
<thclass="w3-center">Availability</th>
</tr>
</thead>
<tr>
<td>KERALAExpress(12625)</td>
<td>02:02</td>
<td>04:24</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
lxii
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref="check.html">Check
Availability</a></div></td>
</tr>
<tr>
<td>YPRHOWRAHExpress(12864)</td>
<td>03:15</td>
<td>07:36</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<tr>
<td>SABARIExpress(17229)</td>
lxiii
<td>03:32</td>
<td>07:56</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<tr>
<td>SESHADRIExpress(17209)</td>
<td>04:10</td>
<td>08:45</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
lxiv
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<tr>
<td>SANGHAMITRAExpress(12295)</td>
<td>12:30</td>
<td>17:15</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
lxv
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<tr>
<td>RAPTISAGARExpress(12512)</td>
<td>18:00</td>
<td>22:33</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<td>PDYHOWRAHExpress(12868)</td>
<td>21:35</td>
<td>01:20</td>
<td><selectname="dropdown">
lxvi
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
<td>DHANBADExpress(13352)</td>
<td>22:00</td>
<td>02:30</td>
<td><selectname="dropdown">
<optionvalue="AllClasses"selected>AllClasses</option>
<optionvalue="ACFirstClass(1A)">ACFirstClass(1A)</option>
<optionvalue="Exec.ChairCar(EC)">Exec.ChairCar(EC)</option>
<optionvalue="AC2Tier(2A)">AC2Tier(2A)</option>
<optionvalue="FirstClass(FC)">FirstClass(FC)</option>
<optionvalue="AC3Tier(3A)">AC3Tier(3A)</option>
<optionvalue="ACChaircar(CC)">ACChaircar(CC)</option>
<optionvalue="Sleeper(SL)">Sleeper(SL)</option>
lxvii
<optionvalue="SecondSitting(2S)">SecondSitting(2S)</option>
</select></td>
<td><divclass="header"><ahref=".html">Check
Availability</a></div></td>
</tr>
</table>
</div>
</body>
</html>
CHECKAVAILABILITYPAGE
<!DOCTYPEhtml>
<html>
<head><title>CheckAvailability</title>
<linkrel="icon"href="1.jpg">
<link
rel="stylesheet"href="https://www
.w3schools.com
/w3css/4/w3.css">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
lxviii
background-color:white;
lxix
}
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:dodgerblue;
lxx
.header a
{ float: left;
color:black;
text-align:center;
padding: 11px;
text-decoration:none;
font-size: 15px;
line-height: 30px;
border-radius: 4px;
margin-right:-100px;
padding-left:10px;
.header a.logo
{ font-size: 25px;
font-weight:bold;
.headera:hover{
background-color:dodgerblue;
color: black;
lxxi
}
.header a.active
{ background-
color:white; color:
white;
.header-right
float:none;
.active
background-color:doggerblue;
body
{box-sizing:border-box;}
lxxii
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
input[type=submit] {
background-color:blue;
lxxiii
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
h2
font-size: 40px;
color:dodgerblue;
lxxiv
font-family:"TimesNewRoman",Times,serif;
</style>
</head>
<body>
<divclass="w3-container">
<h2><b>Availability</b></h2>
<tableclass="w3-table-all">
<thead>
<trclass="w3-doggerblue">
<th>TrainName&Number</th>
<th>Departs</th>
<th>Arrives</th>
<th>Availability</th>
<th></th>
</tr>
</thead>
<tr>
<td>KERALAExpress(12625)</td>
<td>02:02</td>
<td>04:24</td>
lxxv
<td><fontcolor="green"><b>AVAILABLE-135</b></font></td>
<td><divclass="header"><ahref="details.html"><b>BookYour
Ticket</b></a></div></td>
</tr>
</table>
</div>
</body>
</html>
PASSENGERDETAILSPAGE
<!DOCTYPEhtml>
<html>
<head><title>PassengerDetails</title>
<linkrel="icon"href="img12.png">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
lxxvi
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
lxxvii
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
.header a.logo
{ font-size: 25px;
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
}
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
lxxviii
}
.active
background-color:dodgerblue;
body
{box-sizing: border-box;}
body{background-image:url("2.jpg");
background-size:cover;
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=number],select,textarea {
lxxix
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
lxxx
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
lxxxi
{
varx=document.forms["myForm"]["firstname"].value; if
(x == "")
alert("EnterThePassengerName...!!!");
return false;
varx=document.forms["myForm"]["lastname"].value; if
(x == "")
alert("EnterTheAge...!!!");
return false;
varx=document.forms["myForm"]["dropdown"].value; if
(x == "")
alert("SelecttheGender...!!!");
return false;
varx=document.forms["myForm"]["drop"].value; if
(x == "")
alert("SelecttheBerth...!!!");
lxxxii
returnfalse;
</script>
</head>
<body>
<h1><fontcolor="white">EnterPassengerDetails</font></h1>
<hr>
<divclass="container">
<formname="myForm"action="options.html"onsubmit="return
validateForm()" method="post">
<labelfor="fname">NAME</label>
<inputtype="text"name="firstname"placeholder="EnterPassenger
Name">
<labelfor="lname">Age</label>
<inputtype="number"name="lastname"placeholder="EnterThe Age">
<br>
</td><td>
<label>Gender</label>
<selectname="dropdown">
<optionvalue="">EnterTheGender</option>
<optionvalue="male">Male</option>
lxxxiii
<optionvalue="Female">Female</option>
<optionvalue="Transgender">Transgender</option>
</select>
<labelfor="drop">BerthPreference</label>
<selectname="drop">
<optionvalue="">BerthPreference</option>
<optionvalue="male">Lower</option>
<optionvalue="male">Middle</option>
<optionvalue="male">Upper</option>
<optionvalue="male">Side-Lower</option>
<optionvalue="male">Side-Upper</option>
</select>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Book Your Ticket">
</form>
</div>
</body>
</html>
lxxxiv
PAYMENTOPTIONSPAGE
<!DOCTYPEhtml>
<html>
<head><title>PaymentOptions</title>
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
lxxxv
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
lxxxvi
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
lxxxvii
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
lxxxviii
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
lxxxix
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
xc
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
</style>
<script>
functionvalidateForm()
xci
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
if (x== "")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
xcii
}
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
xciii
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</style>
</head>
<body>
<ul>
xciv
<li><aclass="active"href="options.html"><b>Payment
Options</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><ahref="upi.html">UPI</a></li>
<li><ahref="bhim.html">BHIM</a></li>
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
</ul>
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<h1>SelectTheModeOfPayment<h1>
</div>
</body>
</html>
xcv
DEBIT/CREDITCARDPAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="img12.png">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
xcvi
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
xcvii
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
xcviii
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
xcix
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
c
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
ci
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
</style>
<script>
functionvalidateForm()
cii
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
if (x== "")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
ciii
}
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
varb=document.myForm.rad.value; if
(b[0].checked == true)
alert("Yourgenderismale");
civ
else
//nochecked
varmsg='<spanstyle="color:red;">Youmustselectyour
gender!</span><br /><br />';
document.getElementById('msg').innerHTML=msg; return
false;
returntrue;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
cv
}
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</style>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><aclass="active"href="payment.html"><b>Debit/Credit
Card</b></a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><ahref="upi.html">UPI</a></li>
<li><ahref="bhim.html">BHIM</a></li>
cvi
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
</ul>
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
<divclass="row">
<divclass="col-75">
<divclass="container">
<formaction="invoice.html">
<divclass="row">
</div>
<divclass="col-50">
<h3>Payment</h3>
<hr>
<labelfor="cname">NameonCard</label>
<inputtype="text"id="cname"name="cardname"
placeholder="Name On Card">
<labelfor="ccnum">Creditcardnumber</label>
<inputtype="number"id="ccnum"name="cardnumber"p
laceholder="XXXX-XXXX-XXXX-XXXX">
<labelfor="expmonth">ExpMonth</label>
<inputtype="text"id="expmonth"name="expmonth"placeholder=
"Month">
<divclass="row">
<divclass="col-50">
cvii
<labelfor="expyear">ExpiryYear</label>
<inputtype="number"id="expyear"name="expyear"placeholder="Year">
</div>
<divclass="col-50">
<labelfor="cvv">CVV</label>
<inputtype="number"id="cvv"name="cvv"placeholder="XXX
">
</div>
</div>
</div>
<inputtype="checkbox"name=radselected>Ihavereadthe
<a>TermsAndConditions</a>andagreetothePrivacyPolicy</input>
</div>
<inputtype="submit"value="MakePayment"class="btn"">
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
cviii
NETBANKINGPAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="1.jpg">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
}
li a {
display:block;
cix
color: black;
padding:8px16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
cx
overflow:hidden;
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
cxi
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
cxii
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
cxiii
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover
background-color:dodgerblue;
color:#2196F3;
cxiv
hr
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
input[type=number],select,textarea{ widt
h: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
cxv
margin-bottom:16px;
resize: vertical;
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
cxvi
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
cxvii
varx=document.forms["myForm"]["ccnum"].value;
if (x== "")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
cxviii
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
cxix
}
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><aclass="active"href="netbanking.html"><b>Net
Banking</b></a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><ahref="upi.html">UPI</a></li>
<li><ahref="bhim.html">BHIM</a></li>
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
</ul>
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
cxx
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<divclass="container">
</select>
<labelfor="drop">ChooseaBank</label>
<selectname="drop">
<optionvalue="">SelectaBank</option>
<optionvalue="male">StateBankOfIndia</option>
<optionvalue="male">CanaraBank</option>
<optionvalue="male">AxisBank</option>
<optionvalue="male">IndianBank</option>
<optionvalue="male">HDFCbank</option>
<optionvalue="male">ICICbank</option>
</select>
<inputtype="radio">Ihavereadthe<a>TermsAndConditions</a>and
agree to the Privacy Policy</input>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Make Payment">
</div>
</div>
</form>
</body>
</html>
cxxi
PAYTMPAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="1.jpg">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
cxxii
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
cxxiii
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
cxxiv
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
cxxv
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
cxxvi
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
cxxvii
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
input[type=number],select,textarea{ widt
h: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
cxxviii
resize:vertical;
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
cxxix
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
cxxx
if (x=="")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
}
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
cxxxi
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
cxxxii
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</style>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><aclass="active"href="paytm.html"><b>Paytm</b></a></li>
<li><ahref="upi.html">UPI</a></li>
<li><ahref="bhim.html">BHIM</a></li>
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
</ul>
cxxxiii
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<divclass="container">
<labelfor="fname">EnterPaytmNumber</label>
<inputtype="Number"name="paytmnumber"placeholder="Enter
Paytm Number">
<inputtype="radio">Ihavereadthe<a>TermsAndConditions</a> and
agree to the Privacy Policy</input>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Make Payment">
</div>
</div>
</form>
</body>
</html>
cxxxiv
UPIPAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="1.jpg">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
cxxxv
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
cxxxvi
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
cxxxvii
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
cxxxvii
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
cxxxix
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
cxl
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
input[type=number],select,textarea{ widt
h: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
cxli
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
cxlii
}
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
cxliii
if (x=="")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
}
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
cxliv
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
cxlv
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><aclass="active"href="upi.html"><b>UPI</b></a></li>
<li><ahref="bhim.html">BHIM</a></li>
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
cxlvi
</ul>
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<divclass="container">
<labelfor="fname">EnterUPIID</label>
<inputtype="Number"name="paytmnumber"placeholder="Enter
UPI ID">
<inputtype="radio">Ihavereadthe<a>TermsAndConditions</a>and
agree to the Privacy Policy</input>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Make Payment">
</div>
</div>
</form>
</body>
</html>
cxlvii
BHIM PAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="1.jpg">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
cxlviii
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
cxlix
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
cl
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
cli
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
clii
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
cliii
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
input[type=number],select,textarea{ widt
h: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
cliv
resize:vertical;
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
clv
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
clvi
if (x=="")
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
}
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
clvii
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
clviii
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</style>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><ahref="upi.html">UPI</a></li>
<li><aclass="active"href="bhim.html"><b>BHIM</b></a></li>
<li><ahref="pay.html">PhonePe/GooglePay</a></li>
clix
</ul>
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<divclass="container">
<labelfor="fname">EnterBHIMID</label>
<inputtype="Number"name="paytmnumber"placeholder="Enter
BHIM ID">
<inputtype="radio">Ihavereadthe<a>TermsAndConditions</a>and
agree to the Privacy Policy</input>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Make Payment">
</div>
</div>
</form>
</body>
</html>
clx
PHONEPAYPAGE
<!DOCTYPEhtml>
<html>
<head><title>Payment</title>
<linkrel="icon"href="1.jpg">
<style>bod
{ margin:0;
ul{
list-style-type:none;
margin: 0;
padding:0;
width:25%;
background-color:#f1f1f1;
position: fixed;
height: 100%;
overflow:auto;
li a {
display:block;
color: black;
clxi
padding: 8px 16px;
text-decoration:none;
lia.active{
background-color:blue;
color: white;
li a:hover:not(.active)
{ background-
color:dodgerblue; color: black;
}
body
font-family:Arial;
font-size: 17px;
padding: 8px;
*{
box-sizing:border-box;
overflow: hidden;
clxii
}
.row
display:-ms-flexbox;
display: flex;
-ms-flex-wrap:wrap;
flex-wrap: wrap;
margin: 0 -16px;
.col-25
-ms-flex:25%;
flex:25%;
.col-50
-ms-flex:50%;
flex:50%;
clxiii
.col-75
-ms-flex:75%;
flex:75%;
.col-25,
.col-50,
.col-
75{padding:016
px;
.container
background-color: #f2f2f2;
padding:5px20px15px20px;
border: 1px solid lightgrey;
border-radius: 3px;
input[type=number]
width:100%;
margin-bottom:20px;
clxiv
padding:12px;
border:1pxsolid#ccc;
border-radius: 3px;
input[type=text]
width:100%;
margin-bottom:20px;
padding: 12px;
border:1pxsolid#ccc;
border-radius: 3px;
label{
margin-bottom:10px;
display: block;
.icon-container
margin-bottom:20px;
padding: 7px 0;
font-size:24px;
clxv
.btn
background-color:blue;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius:3px;
cursor: pointer;
font-size: 17px;
.btn:hover
background-color:dodgerblue;
color:#2196F3;
hr
clxvi
{
border:1pxsolidlightgrey;
span.price
float:right;
color:grey;
.col-25
margin-bottom:20px;
input[type=number],select,textarea{ widt
h: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
clxvii
}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
input[type=submit]:hover{
background-color:blue;
clxviii
}
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
</style>
<script>
functionvalidateForm()
varx=document.forms["myForm"]["cname"].value;
if (x == "")
alert("EnterTheCardHolder'sName...!!!");
return false;
varx=document.forms["myForm"]["ccnum"].value;
if (x== "")
clxix
{
alert("EnterThe16-digitCardNumber...!!!"); return
false;
varx=document.forms["myForm"]["expmonth"].value; if
(x == "")
alert("EnterTheExpiryMonth...!!!");
return false;
varx=document.forms["myForm"]["expyear"].value; if
(x == "")
alert("EnterTheExpiryYear...!!!");
return false;
varx=document.forms["myForm"]["cvv"].value; if
(x == "")
alert("EnterThe3-digitCVVNumber...!!!"); return
false;
clxx
vara=document.myForm.ccnum.value;
if(a=="")
alert("pleaseEntertheContactNumber");
document.myForm.ccnum.focus();
returnfalse;
if((a.length<16)||(a.length>16))
alert("YourCardNumbermustbe16Digits");
document.myForm.ccnum.select();
returnfalse;
vara=document.myForm.cvv.value;
if(a=="")
alert("pleaseEntertheContactNumber"); document.myForm.cvv.focus();
returnfalse;
clxxi
if((a.length<3)||(a.length>3))
alert("YourCVVNumbermustbe3Digits");
document.myForm.cvv.select();
returnfalse;
</script>
</head>
<body>
<ul>
<li><ahref="options.html"><b>PaymentOptions</b></a></li><hr>
<li><ahref="payment.html">Debit/CreditCard</a></li>
<li><ahref="netbanking.html">NetBanking</a></li>
<li><ahref="paytm.html">Paytm</a></li>
<li><ahref="upi.html">UPI</a></li>
<li><ahref="bhim.html">BHIM</a></li>
<li><aclass="active"href="pay.html"><b>PhonePe/Google
Pay</b></a></li>
</ul>
clxxii
<formname="myForm"action="invoice.html"onsubmit="return
validateForm()" method="post">
<divstyle="margin-left:25%;padding:1px16px;height:1000px;">
<divclass="container">
<labelfor="fname">EnterPhonePeNumberorID</label>
<inputtype="Number"name="paytmnumber"placeholder="Enter
PhonePe Number or ID">
<inputtype="radio">Ihavereadthe<a>TermsAndConditions</a>and
agree to the Privacy Policy</input>
<inputtype="submit"align="center"onsubmit="return
validateForm()" value="Make Payment">
</div>
</div>
</form>
</body>
</html>
clxxiii
INVOICEPAGE
<!DOCTYPEhtml>
<html>
<head><title>Invoice</title>
<linkrel="icon"href="1.jpg">
<link
rel="stylesheet"href="https://www
.w3schools.com
/w3css/4/w3.css">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
clxxiv
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:dodgerblue;
.header a
{ float: left;
color:black;
text-align:center;
padding: 11px;
text-decoration:none;
font-size: 15px;
line-height:30px;
clxxv
border-radius: 4px;
margin-right:-105px;
padding-left:10px;
.header a.logo
{ font-size: 25px;
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
clxxvi
.header-right
float:none;
.active
background-color:doggerblue;
body
{box-sizing:border-box;}
input[type=text],select,textarea{ w
idth: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
clxxvii
resize:vertical;
input[type=date],select,textarea{
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color:blue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
width: 100%;
clxxviii
input[type=submit]:hover{
background-color:blue;
.container{
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
h2
font-size: 50px;
color:dodgerblue;
font-family:"TimesNewRoman",Times,serif;
</style>
</head>
<body>
<divclass="w3-container">
<h2><b>TicketBookedSuccessfully.</b></h2>
clxxix
<tableclass="w3-table-allw3-hoverable">
<thead>
<trclass="w3-doggerblue">
<th>TicketDetails:</th>
<th></th>
<th></th>
</tr>
</thead>
<tr>
<td><b>PNRNUMBER:</b>454124568</td>
<td><b>Trainno&Number:</b>12625&KERALAEXPRESS</td>
<td><b>Quota:</b>General</td>
</tr>
<tr>
<td><b>TransactionID:</b>52356258393</td>
<td><b>DateOfBooking:</b>30-Oct-2019</td>
<td><b>ClassOfTravel:</b>AC1stClass</td>
</tr>
clxxx
<tr>
<td><b>From:</b>Nellore</td>
<td><b>To:</b>Katpadi</td>
<td><b>DateOfTravel:</b>1-Nov-2019</td>
</tr>
<tr>
<td><b>SheduledDeparture:</b>2:02</td>
<td><b>SheduledArrival:</b>4:24</td>
<td><b>Distance:</b>385KM</td>
</tr>
</tr>
<tr>
<td><b>PassengerMobileNumber:</b>8500941005</td>
<td><b></b></td>
<td><b></b></td>
</tr>
</table>
<p><b><u>PassengerDetails:</u></b></p>
<tableclass="w3-table-allw3-hoverable">
<thead>
<trclass="w3-doggerblue">
clxxxi
<th>Sno:</th>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>CoachNo&BearthNo:</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>DSMSankarshana</td>
<td>20</td>
<td>Male</td>
<td>HA104</td>
</table>
</div>
<p><b>Note:ThePassengerShouldCarryaVaildIDProofWith
Them.</b></p>
<inputtype="submit"value="Printe-Ticket"class="btn"">
</body>
</html>
clxxxii
FEEDBACKPAGE
<!DOCTYPEhtml>
<html>
<head><title>FeedBack</title>
<linkrel="icon"href="1.jpg">
<style>
box-sizing:border-box;
input[type=text],select,textarea
width: 100%;
padding:12px;
border:1pxsolid#ccc;
border-radius: 4px;
resize: vertical;
label{
padding:12px12px12px0;
display: inline-block;
clxxxiii
input[type=submit]
background-color:dodgerblue;
color: white;
padding:12px20px;
border: none;
border-radius:4px;
cursor: pointer;
float: middle;
}
input[type=submit]:hover
background-color:dodgerblue;
.container
border-radius: 5px;
background-color:#f2f2f2;
padding: 20px;
}
clxxxiv
.col-25
float:left;width:
25%; margin-
top:6px;
.col-75
float:left;width:
75%; margin-
top:6px;
}
.row:after
{ content: "";
display:table;
clear: both;
.center
{ margin:auto;
width: 5%;
clxxxv
padding:10px;
h1
color:dodgerblue;
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
clxxxvi
background-color:#f1f1f1;
padding: 3px 3px;
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
clxxxvi
color:white;
</style>
<script>
function myFunction()
{ alert("ThankYou...!!!");
</script>
</head>
<body>
<divclass="header">
<ul>
<li><ahref="hp.html">HomePage</a></li>
<li><ahref="login.html">Login</a></li>
<li><ahref="signup.html">SignUp</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><ahref="FAQs.html">FAQs</a></li>
<li><aclass="active"href="feed.html"><b>FeedBack</b></a></li>
</ul>
</div>
<h1>FeedBackForm</h1>
<hr>
clxxxvi
<divclass="container">
<formaction="hp.html">
<divclass="row">
<divclass="col-25">
<labelfor="fname"><b>FirstName</b></label>
</div>
<divclass="col-75">
<inputtype="text"id="fname"name="firstname" placeholder="Your
name..">
</div>
</div>
<divclass="row">
<divclass="col-25">
<labelfor="lname"><b>LastName</b></label>
</div>
<divclass="col-75">
<inputtype="text"id="lname"name="lastname"placeholder="Your last
name..">
</div>
</div>
<divclass="row">
<divclass="col-25">
<labelfor="subject"><b>Suggetions</b></label>
</div>
<divclass="col-75">
clxxxix
<textareaid="subject"name="subject"placeholder="We'llImprove Ourselves.."
style="height:100px"></textarea>
</div>
</div>
<labelfor="fname"><b>Rating</b></label>
<divclass="row">
<divclass="col-75">
<formaction="">
<inputtype="radio"name="gender"value="male">Excellent<br>
<inputtype="radio"name="gender"value="female">Good<br>
<inputtype="radio"name="gender"value="other">Average<br>
<inputtype="radio"name="gender"value="female">Bad<br>
<inputtype="radio"name="gender"value="other">VeryBad
</div>
</div>
<hr>
<divclass="center">
<divclass="row">
<inputtype="submit"onclick="myFunction()"value="Submit">
</div>
</div>
</form>
</div>
</body>
</html>
cxc
ABOUTUS PAGE
<html>
<head><title>AboutUs</title>
<linkrel="icon"href="1.jpg">
<style>
bodyul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {s
overflow:hidden;
background-color:#f1f1f1;
cxci
padding:3px3px;
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
.header a.logo
{ font-size: 25px;
font-weight:bold;
}
.header a:hover
{ background-
color:#ddd; color: black;
}
.headera.active{
background-color:dodgerblue;
cxcii
color:white;
.header-right
float:none;
body{background-color:powerblue;}
h1{color:blue;}
body{background-image:url("img7.jpg");
background-size:cover;
.active
background-color:blue;
</style>
<body>
<divclass="header">
<ul>
<li><ahref="hp.html">HomePage</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
cxciii
<li><aclass="active"href="abtus.html"><b>AboutUs</b></a></li>
<li><ahref="FAQs.html">FAQs</a></li>
</ul>
</div>
<h1align="center">AwardsAndAchievements
</h1>
<div>
<ultype="disc">
<li><b><u>LISTOFAWARDS:</u></b></li>
<ultype="circle">
<li>AwardedwithNationalTourismAwardofExcellencebyMinistryof
Tourism,
Govt.ofIndia.
</li>
<li>AwardedtheNationalAwardforE-Governance,2007-08jointlyby
Department
ofIT,Govt.ofIndiaandGovt.ofHaryana.</li>
<li>
AwardedtheGeniusoftheWebAward2007forBestE-GovPSUSiteby CNBC.
</li>
<li>
IRCTCTourismUnitofWestZonehasbeenawardedtheWinnerforthe
Category
BestValueLeisureProductinTravelandTourismFairofIndiai.e.TTF &
OTM
cxciv
2008heldinMumbaifrom9thto11thFebruary2008.
</li>
<li>
NationalawardforE-GovernanceBestCitizenCentricApplicationfor the
year
2007-08.</li>
<li>
IRCTCTourismUnithasbeenawardedtheWinnerfortheCategory Most
InnovativeProductinTravelandTourismFairofIndiai.e.TTF&OTM 2007
held
inMumbaifrom10thto12thFebruary2007.</li>
<li>CSI-NihilentE-GovernanceawardforBestE-GovernanceProjectin
2007.
</li>
<li>ICICIbankRetailExcellenceAwardin2005.
</li>
<li>PathBreakerAwardfromDataquestin2004.
</li>
<li>PathBreakerAwardfromDataquestin2003.
</li>
</ul>
</div>
</body>
</html>
cxcv
CONTACTUSPAGE
<html>
<head><title>ContactInformation</title>
<linkrel="icon"href="12.jpg">
<style>
body{background-image:url("img1.jpg");
background-size:cover;
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
cxcvi
}
margin:0;
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
}
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
.headera.logo{
cxcvii
font-size: 25px;
font-weight:bold;
.header a:hover
{ background-
color:#ddd; color: black;
.headera.active{
background-color:dodgerblue;
color: white;
}
.header-right
float:none;
.active
background-color:blue;
p{
cxcviii
color:white;
</style>
</head>
<body>
<divclass="header">
<ul>
<li><ahref="hp.html">HomePage</a></li>
<li><aclass="active"href="contactinfo.html"><b>Contact
Us</b></a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><ahref="FAQs.html">FAQs</a></li>
</ul>
</div>
<p><b><u>ContactCustomerCare:</u></b><br>
18001801800(Language:HindiandEnglish)</p>
<p><b><u>Email:</u></b><br>
<ahref=""><fontcolor="aqua">www.irctc.co.in</font></a></p>
<p><b><u>HeadOffice:</u></b><br>
IndianRailwayCateringandTourismCorporationLtd.,</br> B-
148, 11th Floor, Statesman House,</br>
BarakhambaRoad,NewDelhi110001.</br>
</p>
</body>
</html>
cxcix
FAQsPAGE
<html>
<head><title>FAQs</title>
<linkrel="icon"href="1.jpg">
<style>u
l{
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
body
ul
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color:white;
margin:0;
cc
font-family:Arial,Helvetica,sans-serif;
.header {
overflow:hidden;
background-color:#f1f1f1;
padding: 3px 3px;
.header a
{ float: left;
color:black;
text-align:center;
padding: 12px;
text-decoration:none;
font-size: 18px;
line-height: 25px;
border-radius:4px;
}
.header a:hover
{ background-
color:#ddd;
cci
color:black;
.headera.active{
background-color:dodgerblue;
color: white;
.header-right
float:none;
body{background-color:powerblue;}
h1{color:yellow;}
body{background-image:url("img5.jpg");
background-size:cover;
li
color:black;
.active
ccii
background-color:blue;
</style>
<body>
<divclass="header">
<ul>
<li><ahref="hp.html">HomePage</a></li>
<li><ahref="contactinfo.html">ContactUs</a></li>
<li><ahref="abtus.html">AboutUs</a></li>
<li><aclass="active"href="FAQs.html"><b>FAQs</b></a></li>
</ul>
</div>
<h1align="center">FrequentlyAskedQuestions
</h1>
<ultype="disc">
<li>General</li>
<ultype="circle">
<li>FeaturesofInternetTickets.</li>
</ul>
<li>E-Ticket</li>
<ultype="circle">
<li>FrequentlyAskedQuestions</li>
cciii
</ul>
<li>Tatkal</li>
<ultype="circle">
<li>TatkalbookingsareallowedinallclassesexceptFirstACand Executive
class. Ladies
andgeneralquotacannotbeoptedforalongwithTatkalquota.</li>
</ul>
</ul>
</body>
</html
cciv
Result:
ccv
ccvi
ccvii
ccviii
ccix
ccx
ccxi
ccxii
ccxiii
ccxiv
You might also like
- Lab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway ReservationNo ratings yetLab Fat: CSE3002 - IWP L43+L44 18BCE0820 Nishant Pantbalekundri 2. Railway Reservation66 pages
- Internet and Web Programming Lab Assessment - 2No ratings yetInternet and Web Programming Lab Assessment - 223 pages
- Updated Online Railway Reservation System DocumentationNo ratings yetUpdated Online Railway Reservation System Documentation2 pages
- Project Report: Online Restaurant Meal Reservation SystemNo ratings yetProject Report: Online Restaurant Meal Reservation System51 pages
- Formatted Railway Reservation Project ReportNo ratings yetFormatted Railway Reservation Project Report48 pages
- BCA Project-II Submitted By: Srijana Bhatta Aakriti Pokhrel Nirijan Ghatal Kantipur City College, Putalisadak KathmanduNo ratings yetBCA Project-II Submitted By: Srijana Bhatta Aakriti Pokhrel Nirijan Ghatal Kantipur City College, Putalisadak Kathmandu25 pages
- Abstarct: User Details Train Details E-Ticket Booking Generating ReportsNo ratings yetAbstarct: User Details Train Details E-Ticket Booking Generating Reports56 pages
- Railway Reservation System Project ReportNo ratings yetRailway Reservation System Project Report46 pages
- John Lewis Partnership Card Welcome BookletNo ratings yetJohn Lewis Partnership Card Welcome Booklet10 pages
- A Case Study (E-Commerce Project) ON Proposed System of E-WalletNo ratings yetA Case Study (E-Commerce Project) ON Proposed System of E-Wallet24 pages
- XXXXXXXXXXX0788-01-01-2022to31-07-2023 ASHUNo ratings yetXXXXXXXXXXX0788-01-01-2022to31-07-2023 ASHU3 pages
- Transaction History: Ref Date Debits Description Credits Account BalanceNo ratings yetTransaction History: Ref Date Debits Description Credits Account Balance4 pages
- Mpassbook SB-500101011533494 1734506307788No ratings yetMpassbook SB-500101011533494 17345063077885 pages
- All Roads in Fintech Lead To License Aggregation Part 4 1745134727No ratings yetAll Roads in Fintech Lead To License Aggregation Part 4 174513472711 pages
- Angular Shopping Store: From Scratch to Successful PaymentFrom EverandAngular Shopping Store: From Scratch to Successful PaymentNo ratings yet
