online cinema booking project
using only html & java script
main.html
<html>
<frameset rows="45%,15%,40%" frameborder="no">
<frame name="f1" src="mainpage.html">
<frame name="f2" src="select.html">
<frame name="f3" src="default.html">
</frameset>
</html>
<frameset rows="45%,15%,40%" frameborder="no">
<frame name="f1" src="mainpage.html">
<frame name="f2" src="select.html">
<frame name="f3" src="default.html">
</frameset>
</html>
mainpage.html
<html>
<head>
<title>
</title>
<script>
function bigImg(x)
{
x.style.height="164px";
x.style.width="164px";
}
function normalImg(x)
{
x.style.height="152px";
x.style.width="152px";
}
</script>
</head>
<body background="1234.jpg">
<center>
<div>
<div id ="header" style="background-color:yellow;width:800px">
<h1 style="margin-bottom:0">Book My Show</h1>
</div>
<div id ="cointainer" style="width:800;height:170">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="2" src="img1.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="1" src="images.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="3" src="prabhas.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="ram.jpg" alt="Smiley" width="152" height="152">
</div>
</div>
</div>
</center>
</body>
</html>
<head>
<title>
</title>
<script>
function bigImg(x)
{
x.style.height="164px";
x.style.width="164px";
}
function normalImg(x)
{
x.style.height="152px";
x.style.width="152px";
}
</script>
</head>
<body background="1234.jpg">
<center>
<div>
<div id ="header" style="background-color:yellow;width:800px">
<h1 style="margin-bottom:0">Book My Show</h1>
</div>
<div id ="cointainer" style="width:800;height:170">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="2" src="img1.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="1" src="images.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="3" src="prabhas.jpg" alt="Smiley" width="152" height="152">
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="ram.jpg" alt="Smiley" width="152" height="152">
</div>
</div>
</div>
</center>
</body>
</html>
select.html
<html>
<head>
<title>Select</title>
</head>
<body background="1234.jpg">
<center>
<div>
<form action="showtimes.html" method="post" target="f3">
<div id="header1" style="background-color:yellow;width:800px;height:40px">
<select name="malls" autofocus required style="width:200px;height:40px">
<option value="inox">Inox Patamata vijayawada</option>
<option value="icon">Icon Gandhinagar vijayawada </option>
<option value="lepl">Lepl Benz circle Vijayawada</option>
<option value="miraj">Miraj Gandhinagar vijayawada</option>
</select>
<input type="submit" value="submit">
<a href="login.html" target="f3" >Login</a>
<a href="register.html" target="f3" >Signup</a>
</form>
</div>
</center>
</body>
</html>
<head>
<title>Select</title>
</head>
<body background="1234.jpg">
<center>
<div>
<form action="showtimes.html" method="post" target="f3">
<div id="header1" style="background-color:yellow;width:800px;height:40px">
<select name="malls" autofocus required style="width:200px;height:40px">
<option value="inox">Inox Patamata vijayawada</option>
<option value="icon">Icon Gandhinagar vijayawada </option>
<option value="lepl">Lepl Benz circle Vijayawada</option>
<option value="miraj">Miraj Gandhinagar vijayawada</option>
</select>
<input type="submit" value="submit">
<a href="login.html" target="f3" >Login</a>
<a href="register.html" target="f3" >Signup</a>
</form>
</div>
</center>
</body>
</html>
default.html
<html>
<head>
<title>default
</title>
</head>
<body background="1234.jpg">
<center>
<video align="center" width="420" height="140" controls>
<source src="Dhoom.mp4" type="video/mp4">
<source src="Dhoom.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<img src="07212014_132003_m_kick_flash.jpg" alt="sss" width="280" height="200" >
</center>
</body>
</html>
<head>
<title>default
</title>
</head>
<body background="1234.jpg">
<center>
<video align="center" width="420" height="140" controls>
<source src="Dhoom.mp4" type="video/mp4">
<source src="Dhoom.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<img src="07212014_132003_m_kick_flash.jpg" alt="sss" width="280" height="200" >
</center>
</body>
</html>
login.html
<html>
<head>
<title>Register
</title>
</head>
<body background="1234.jpg">
<center>
<form action="login.html" method="post" >
<table>
<tr>
<td>name</td>
<td><input type="text" name="uname" >
</tr>
<tr>
<td>username</td>
<td><input type="text" name="uname" >
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password" >
</tr>
<tr>
<td> Conform password</td>
<td><input type="password" name="password" >
</tr>
<tr>
<td>gender</td>
<td> male<input type="radio" name="gender" value="m" <br>
female<input type="radio" name="gender" value="f" >
</tr>
<tr>
<td> email</td>
<td><input type="text" name="email" >
</tr>
<tr>
<td> mobile</td>
<td><input type="text" name="mno" >
</tr>
<tr>
<td><input type="submit" value="submit" ></td>
</tr>
</table>
</center>
</body>
</html>
<head>
<title>Register
</title>
</head>
<body background="1234.jpg">
<center>
<form action="login.html" method="post" >
<table>
<tr>
<td>name</td>
<td><input type="text" name="uname" >
</tr>
<tr>
<td>username</td>
<td><input type="text" name="uname" >
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password" >
</tr>
<tr>
<td> Conform password</td>
<td><input type="password" name="password" >
</tr>
<tr>
<td>gender</td>
<td> male<input type="radio" name="gender" value="m" <br>
female<input type="radio" name="gender" value="f" >
</tr>
<tr>
<td> email</td>
<td><input type="text" name="email" >
</tr>
<tr>
<td> mobile</td>
<td><input type="text" name="mno" >
</tr>
<tr>
<td><input type="submit" value="submit" ></td>
</tr>
</table>
</center>
</body>
</html>
LOGIN.HTML
<html>
<head>
<title>
login
</title>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body background="1234.jpg">
<center>
<form name="myForm" onsubmit="return validateForm()" action="test1.html" method="post">
<table width="300px">
<tr>
<td>username</td>
<td><input type="text" name="fname">
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password">
</tr>
<tr>
<td><input type="submit" value="submit"></td>
<td><input type="reset" name="reset">
</tr>
<tr>
<td>Forget Password</td>
<td><a href="register.html">Not Yet Register</td>
</tr>
</table>
</center>
</body>
</html>
<head>
<title>
login
</title>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body background="1234.jpg">
<center>
<form name="myForm" onsubmit="return validateForm()" action="test1.html" method="post">
<table width="300px">
<tr>
<td>username</td>
<td><input type="text" name="fname">
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password">
</tr>
<tr>
<td><input type="submit" value="submit"></td>
<td><input type="reset" name="reset">
</tr>
<tr>
<td>Forget Password</td>
<td><a href="register.html">Not Yet Register</td>
</tr>
</table>
</center>
</body>
</html>
SHOWTIMES.HTML
<html>
<head>
<title>
</title>
</head>
<body background="1234.jpg">
<center>
<table style="width:500px"border="0px" >
<tr>
<td>Alludu Seenu </td>
<td> <a href="login.html">10.00am</a>   <a href="login.html">10.41am</a> <a href="login.html">12.00pm</a> <a href="login.html">01.20am</a>
<a href="login.html">10.00pm</a></td>
</tr>
<tr>
<td>Kick </td>
<td> <a href="login.html">10.00am</a>   <a href="login.html">10.41am</a> <a href="login.html">12.00pm</a> <a href="login.html">01.20am</a>
<a href="login.html">10.00pm</a></td>
</tr>
</table>
</center>
</body>
</html>
<head>
<title>
</title>
</head>
<body background="1234.jpg">
<center>
<table style="width:500px"border="0px" >
<tr>
<td>Alludu Seenu </td>
<td> <a href="login.html">10.00am</a>   <a href="login.html">10.41am</a> <a href="login.html">12.00pm</a> <a href="login.html">01.20am</a>
<a href="login.html">10.00pm</a></td>
</tr>
<tr>
<td>Kick </td>
<td> <a href="login.html">10.00am</a>   <a href="login.html">10.41am</a> <a href="login.html">12.00pm</a> <a href="login.html">01.20am</a>
<a href="login.html">10.00pm</a></td>
</tr>
</table>
</center>
</body>
</html>
SEATSELECTION.HTML
<html>
<head>
<script>
function changeColor(col)
{
document.getElementById(col).style.backgroundColor = "red";
document.getElementById(col).disabled=true;
}
</script>
</head>
<body background="1234.jpg">
<center>
<p>Row1
<input type = "button" id = "seat1" value="1" style="background-color:green;width:40px" onClick="changeColor('seat1')">
<input type = "button" id = "seat2" value="2" style="background-color:green;width:40px" onClick="changeColor('seat2')">
<input type = "button" id = "seat3" value="3" style="background-color:green;width:40px" onClick="changeColor('seat3')">
<input type = "button" id = "seat4" value="4" style="background-color:green;width:40px" onClick="changeColor('seat4')">
<input type = "button" id = "seat5" value="5" style="background-color:green;width:40px" onClick="changeColor('seat5')">
<input type = "button" id = "seat6" value="6" style="background-color:green;width:40px" onClick="changeColor('seat6')">
<input type = "button" id = "seat7" value="7" style="background-color:green;width:40px" onClick="changeColor('seat7')">
<input type = "button" id = "seat8" value="8" style="background-color:green;width:40px" onClick="changeColor('seat8')">
<input type = "button" id = "seat9" value="9" style="background-color:green;width:40px" onClick="changeColor('seat9')">
<input type = "button" id = "seat10" value="10" style="background-color:green;width:40px" onClick="changeColor('seat10')">
<input type = "button" style="background-color:green;width:40px" disabled="true">Avaliable
</p>
<p>Row2
<input type = "button" id = "seat11" value="11" style="background-color:green;width:40px" onClick="changeColor('seat11')">
<input type = "button" id = "seat12" value="12" style="background-color:green;width:40px" onClick="changeColor('seat12')">
<input type = "button" id = "seat13" value="13" style="background-color:green;width:40px" onClick="changeColor('seat13')">
<input type = "button" id = "seat14" value="14" style="background-color:green;width:40px" onClick="changeColor('seat14')">
<input type = "button" id = "seat15" value="15" style="background-color:green;width:40px" onClick="changeColor('seat15')">
<input type = "button" id = "seat16" value="16" style="background-color:green;width:40px" onClick="changeColor('seat16')">
<input type = "button" id = "seat17" value="17" style="background-color:green;width:40px" onClick="changeColor('seat17')">
<input type = "button" id = "seat18" value="18" style="background-color:green;width:40px" onClick="changeColor('seat18')">
<input type = "button" id = "seat19" value="19" style="background-color:green;width:40px" onClick="changeColor('seat19')">
<input type = "button" id = "seat20" value="20" style="background-color:green;width:40px" onClick="changeColor('seat20')">
<input type = "button" style="background-color:red;width:40px" disabled="true">Booked
</p>
<form action="payment.html" method="post">
<input type="submit" value="proceed" >
</form>
</center>
</body>
</html>
PAYMENT.HTML
<html>
<head>
<title>payment Screen
</title>
</head>
<body background="1234.jpg">
<center>
<h1>Payment Screen</h1>
<form action="success.html" method="post">
<table width="500px">
<tr>
<td>Card Owner</td>
<td><input type="text" name="cid"></td>
</tr>
<tr>
<td>Card Type</td>
<td><select autofocus> <option value="credit">Credit Card</option>
<option value="Debit">Debit Card</option>
</select></td>
</tr>
<tr>
<td>Card Number</td>
<td><input type="text" name="cid"></td>
</tr>
<tr>
<td>Expiary Date</td>
<td><select autofocus>
<option value="jan">january</option>
<option value="feb">february</option>
<option value="mar">march</option>
<option value="apr">april</option>
<option value="may">may</option>
<option value="june">june</option>
<option value="july">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">October</option>
<option value="nov">Novemder</option>
<option value="dec">December</option>
</select>
<select autofocus>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</td>
</tr>
<tr>
<td>Card Verification</td>
<td><input type="text" name="cid"></td>
</tr>
<tr>
<td>
<input type="submit" value="submit" onClick="myFunction()">
<script>
function myFunction() {
alert("Hot! Payment Successful");
}
</script>
</td>
</form>
</table>
</center>
</body>
</html>
SUCCESS.HTML
<html>
<head>
<title>Success</title>
</head>
<body background="1234.jpg">
<center>
<h1> Payment Successful </h1>
<h3> Conformation message will be sent to your mobile</h3>
<form action="default.html" method="post" >
<input type="submit" value="home page">
</form>
</center>
</body>
</html>
<head>
<title>Success</title>
</head>
<body background="1234.jpg">
<center>
<h1> Payment Successful </h1>
<h3> Conformation message will be sent to your mobile</h3>
<form action="default.html" method="post" >
<input type="submit" value="home page">
</form>
</center>
</body>
</html>
RUN MAIN.HTML FIRST
No comments:
Post a Comment