-
Notifications
You must be signed in to change notification settings - Fork 0
/
reservation.html
113 lines (113 loc) · 5.34 KB
/
reservation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<title>RESERVATION | Mad for Garlic</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/garlic_favicon.ico" type="image/x-icon">
<link rel="icon" href="./images/garlic_favicon.ico" type="image/x-icon">
<!-- style -->
<link rel="stylesheet" href="./styles/reset.css">
<link rel="stylesheet" href="./styles/common.css">
<link rel="stylesheet" href="./styles/reservation.css">
</head>
<body>
<!-- header -->
<?php include('./header.php') ?>
<!-- main -->
<main>
<section class="middle_title_bg">
<div class="middle_title">
<h2>RESERVATION</h2>
</div>
</section>
<!-- reservation -->
<section class="reservation_bg">
<div class="reservation">
<form action="#" method="post" id="reservation_frm">
<fieldset>
<legend class="skip">예약양식</legend>
<h2>RESERVATION</h2>
<ul>
<li class="day">
<div id="date_btn">
<img src="./images/main/date.png" alt="">
<select>
<option>예약 날짜</option>
<option>2023-09-01</option>
<option>2023-09-02</option>
<option>2023-09-03</option>
<option>2023-09-04</option>
<option>2023-09-05</option>
</select>
</div>
<div id="time_btn">
<img src="./images/main/time.png" alt="">
<select>
<option>예약 시간</option>
<option>오후 12:00</option>
<option>오후 12:30</option>
<option>오후 1:00</option>
<option>오후 1:30</option>
<option>오후 2:00</option>
<option>오후 2:30</option>
</select>
</div>
</li>
<li class="area">
<div id="area_btn">
<img src="./images/main/area.png" alt="">
<select>
<option>지역</option>
<option>경남</option>
<option>광주</option>
<option>대구</option>
<option>대전</option>
<option>부산</option>
<option>서울</option>
<option>인천</option>
<option>전북</option>
<option>제주</option>
<option>충남</option>
</select>
</div>
</li>
<li class="line">
<span></span>
</li>
<li class="personnel_input">
<img src="./images/main/personnel.png" alt="">
<input type="text" placeholder="인원수" name="user" id="personnel">
</li>
<li class="name_input">
<img src="./images/main/name.png" alt="">
<input type="text" placeholder="성함" name="user" id="name">
</li>
<li class="call_input">
<img src="./images/main/call.png" alt="">
<input type="text" placeholder="전화번호" name="user" id="call">
</li>
<li class="reservation_button">
<button id="reservation_btn" type="button">예약하기</button>
</li>
</ul>
</fieldset>
</form>
</div>
</section>
</main>
<!-- footer -->
<?php include("./footer.php") ?>
<script>
const reservation_btn = document.querySelector('#reservation_btn')
console.log(date_btn, time_btn, area_btn, reservation_btn)
//예약하기 버튼 눌렀을때 팝업창뜨기
reservation_btn.addEventListener('click',function(){
window.alert('예약이 완료되었습니다😊')
});
</script>
</body>
</html>