/
single-room.html
150 lines (150 loc) · 5.94 KB
/
single-room.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<title>Single Room | Stay.com</title>
</head>
<body>
<header>
<a href="/" class="logo">STAY.COM</a>
</header>
<section class="room-page">
<div class="col-left">
<div class="room-display">
<img id="display-img" src="/assets/room1.png" />
</div>
<div class="room-images">
<img class="room-image" src="assets/room1.png" />
<img class="room-image" src="assets/room1-1.png" />
<img class="room-image" src="assets/room1-2.png" />
</div>
<div class="detail">
<div class="title">詳細資訊</div>
<p><i class="fas fa-male"></i>人數：1 人</p>
<p><i class="fas fa-bed"></i>床型：單人床</p>
<p><i class="fas fa-bath"></i>浴室：1 間</p>
<p><i class="fas fa-home"></i>房間大小： 18 平方公尺</p>
<div class="facility">
<div class="item"><i class="fas fa-wifi"></i>Wifi</div>
<div class="item"><i class="fas fa-utensils"></i>早餐</div>
<div class="item item--invalid"><i class="fas fa-coffee"></i>吧台</div>
<div class="item"><i class="fas fa-phone-alt"></i>室內電話</div>
<div class="item"><i class="far fa-snowflake"></i>冷氣</div>
<div class="item"><i class="fas fa-temperature-low"></i>冰箱</div>
<div class="item item--invalid"><i class="fas fa-couch"></i>沙發</div>
<div class="item"><i class="fas fa-smoking-ban"></i>禁止吸煙</div>
<div class="item item--invalid"><i class="fas fa-futbol"></i>適合孩童</div>
<div class="item"><i class="fas fa-heart"></i>適合寵物</div>
</div>
</div>
</div>
<div class="col-right">
<div class="room-name">Single Room</div>
<div class="divider "></div>
<div class="room-intro">
Single Room is only reserved for one guest. There is a bedroom with a single size bed and a private bathroom. Everything you need prepared for you: sheets and blankets, towels, soap and shampoo, hairdryer are provided. In the room there is AC and of course WiFi.
</div>
<div class="room-price">
<p>平日價格 (From Mon to Thu)：NT$ 1,180</p>
<p>假日價格 (From Fri to Sun)：NT$ 1,300</p>
</div>
<div class="room-time">
<p>CheckIn 時間：15:00 ~ 21:00</p>
<p>CheckOut 時間：before 10:00</p>
</div>
<div class="reserve">
<button id="btn-reserve">預訂房間</button>
</div>
<div class="recommendation">其他推薦</div>
<div class="recommendation-list">
<a class="item" href="/single-deluxe-room.html">
<div class="item-img">
<img src="assets/room2.png" />
</div>
<div class="item-info">
<div class="name">Deluxe Single Room</div>
<div class="price">
<span class="text--hili">NT 1,380</span>
起/晚
</div>
</div>
</a>
<a class="item" href="/double-room.html">
<div class="item-img">
<img src="assets/room3.png" />
</div>
<div class="item-info">
<div class="name">Double Room</div>
<div class="price">
<span class="text--hili">NT 1,680</span>
起/晚
</div>
</div>
</a>
</div>
</div>
</section>
<section class="dialog-reserve">
<div class="content">
<div class="btn-close"><i class="fas fa-times"></i></div>
<div class="title">預訂房間</div>
<div class="item-title">預約日期</div>
<div class="item-input-date">
<div class="date">
<input type="text" placeholder="入住日期" id="date-check-in">
<i class="far fa-calendar-alt"></i>
</div>
<span>-</span>
<div class="date">
<input type="text" placeholder="退房日期" id="date-check-out">
<i class="far fa-calendar-alt"></i>
</div>
</div>
<div class="bill">
<span id="stayOfDay">0</span> 天, NT$ <span id="totalCharge">0</span></div>
<div class="item-title">姓名</div>
<div class="item-input">
<input type="text" placeholder="請輸入真實姓名" />
</div>
<div class="item-title">電話</div>
<div class="item-input">
<input type="text" placeholder="請輸入聯絡電話" />
</div>
<div class="item-title">電子信箱</div>
<div class="item-input">
<input type="text" placeholder="請輸入 Email" />
</div>
<div class="send-reservation">
<button id="btn-send">送出</button>
</div>
</div>
</section>
<section class="dialog-success">
<div class="content">
<img src="assets/room1.png" class="cover-img" />
<div class="reserve-success">
<i class="fas fa-check-circle"></i>
訂單已成立
</div>
<div class="welcome-text">
已為您預約
<span id="reserveDayFrom"></span> ~ <span id="reserveDayTo"></span>
Single Room
</div>
<div>期待您的蒞臨!!</div>
<button id="btn-back">返回</button>
</div>
</section>
<script type="module" src="index.js"></script>
</body>
</html>