정지윤 / project_opensource

Go to a project
Toggle navigation Toggle navigation pinning
정지윤
c57f84c7 1 parent 51a00ddc

메뉴 화면 추가

Inline Side-by-side
Showing 3 changed files with 16 additions and 318 deletions
......@@ -27,329 +27,27 @@
<style type="text/css">
.reservationTheme{
background:url('/img/res2.jpg') no-repeat;
background:url('/img/s.jpg') no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<section id="about" class="reservationTheme content-section ">
<div class="container">
<br><br>
<h2>Reservation <br>예약하기</h2>
<br><br>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<form method="POST" action="/reservation">
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer ">
<div class="input-group">
<label class="col-md-4 control-label ">이름</label>
<i class="glyphicon glyphicon-envelope"></i>
<input name="creater_id" placeholder="홍길동" class="form-control" type="text">
</div>
</div>
</div>
<!-- 휴대전화-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="col-md-4 control-label">휴대전화</label>
<i class="glyphicon glyphicon-earphone"></i>
<input name="phone" placeholder="0101234567" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="col-md-4 control-label">이메일주소</label>
<i class="glyphicon glyphicon-envelope"></i>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!--인원수-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">인원 수</label>
<i class="glyphicon glyphicon-list"></i>
<select name="num" class="form-control selectpicker" >
<option>1~4명</option>
<option>5~10명</option>
<option >10명~15명</option>
<option >15명~20명</option>
<option >20명 이상</option>
</select>
</div>
</div>
</div>
<!--예약시간-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 시간</label>
<i class="glyphicon glyphicon-list"></i>
<select name="restime" class="form-control selectpicker" >
<option value=" " >시간</option>
<option>10시</option>
<option>11시</option>
<option>12시</option>
<option>13시</option>
<option>14시</option>
<option>15시</option>
<option>16시</option>
<option>17시</option>
<option>18시</option>
<option>19시</option>
<option>20시</option>
</select>
&nbsp;
<select name="resmin" class="form-control selectpicker" >
<option value=" " >분</option>
<option>00분</option>
<option>15분</option>
<option>30분</option>
<option>45분</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 날짜</label>
<div class="input-group input-append date" id="dateRangePicker"> </div>
<script>
$('#dateRangePicker').datepicker({
format: "yyyy-mm-dd",
language: "kr"
});
</script>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label"></label>
<i class="glyphicon glyphicon-list"></i>
<select name="date" class="form-control selectpicker" >
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( ) , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+1 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+2 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+3 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+4 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+5 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+6 , "일")
</script> </option>
<option><script language="JavaScript">
var today = new Date( )
document.write(today.getMonth( )+1 , "월 " , today.getDate( )+7 , "일 (예약은 1주일까지만 가능합니다)")
</script> </option>
</select>
</div>
</div>
</div>
<!-- radio checks-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">메뉴</label>
<div class="checkbox">
<label>
<image src = "/img/pizza.jpg" width=100 height=100>
<br><input type="checkbox" name="food" value="pizza" /> 피자
</label>
</div>
&nbsp;
&nbsp;
&nbsp;
<div class="checkbox">
<label>
<image src = "/img/파스타.jpg" width=100 height=100>
<br><input type="checkbox" name="food" value="pasta" /> 파스타
</label>
</div>
&nbsp;
&nbsp;
&nbsp;
<div class="checkbox">
<label>
<image src = "/img/와인.jpg" width=100 height=100>
<br><input type="checkbox" name="food" value="wine" /> 와인
</label>
</div>
</div>
</div>
</div>
<br>
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">요청 사항</label>
<i class="glyphicon glyphicon-pencil"></i>
<textarea class="form-control" name="content" placeholder="요청 사항을 적어주세요." style="width:310px; height:100px;"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
잠깐! No Show 문제를 방지하기 위해 예약 전, 선금 2000원을 입금해야 합니다!
<a href="/pay" class="btn btn-default btn-lg">입금하기</a>
<a href="/first" class="btn btn-default btn-lg">돌아가기</a>
</div>
</div>
</form>
</fieldset>
</form>
</div>
</div>
</script>
<script>
function onWriteSubmit()
{
if ( $("#creater_id").val().trim() == "" )
{
var message = "아이디를 입력해주세요";
$("#creater_id").val("");
$("#creater_id").focus();
alert(message);
return false;
.container{
text-align: center;
}
if ( $("#phone").val().trim() == "" )
{
var message = "폰번호를 입력해주세요";
$("#phone").val("");
$("#phone").focus();
alert(message);
return false;
.form-group{
vertical-align: center;
}
if ( $("#email").val().trim() == "" )
{
var message = "이메일 주소를 입력해주세요";
$("#email").val("");
$("#email").focus();
alert(message);
return false;
}if ( $("#num").val().trim() == "" )
{
var message = "인원수를 입력해주세요";
$("#num").val("");
$("#num").focus();
alert(message);
return false;
}if ( $("#restime").val().trim() == "" )
{
var message = "예약시간을 입력해주세요";
$("#restime").val("");
$("#restime").focus();
alert(message);
return false;
}
if ( $("#resmin").val().trim() == "" )
{
var message = "예약 분을 입력해주세요";
$("#resmin").val("");
$("#resmin").focus();
alert(message);
return false;
}
if ( $("#date").val().trim() == "" )
{
var message = "예약 날짜를 입력해주세요";
$("#date").val("");
$("#date").focus();
alert(message);
return false;
}
if ( $("#food").val().trim() == "" )
{
var message = "예약 메뉴를 입력해주세요";
$("#food").val("");
$("#food").focus();
alert(message);
return false;
}
if ( $("#content").val().trim() == "" )
{
var message = "비고사항을 입력해주세요";
$("#content").val("");
$("#content").focus();
alert(message);
return false;
}
}
</script>
</style>
<section id="about" class="reservationTheme content-section">
<div class="container "text-align=" center">
<br><br><br><br>
<h1>MENU</h1>
<a href="/first" class="btn btn-default btn-lg">홈으로</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</div>
</head>
</html>
......