-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (236 loc) · 10.5 KB
/
index.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!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://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css"
/>
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="./icon/travel.png" />
<link rel="stylesheet" href="scss/all.css" />
<title>馬上訂立刻玩</title>
</head>
<body>
<div class="container">
<div class="d-flex gap-30 justify-content-center flex-md-column">
<section class="col-6 col-md-12">
<div class="ticket-pannel box-shadow-12">
<div class="ticket-img">
<img
src="https://storage.googleapis.com/vue-course-api.appspot.com/greensheep/1710828391728.png?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&Expires=1742169600&Signature=ZWY0%2BaqGulawxuumLhnkzn3We4pe4J2AuMvQ5rObepGYIqjf6%2FmqHyAu%2FM91mxXTVOuVTyE3MW3i7sxBMTXajr0h0R1tBbCxEF4MTHuJ7geKaoVvzSIYlsoNQ2kNUhB5yxCI3Xr7FxOzAdzM0LjrnT1Da5pIm3FBamsC0yvm2guG2hc3k0XXWlG7qYlbjrhk%2BDPDZbI%2BM%2Fd6wOUbEH9NMqO0irUGecdOh3vkWNkM80pNOmb2CdLcvM74ZdJpaBt3USlbGeF8LydtF0jC%2BRlsJ4xbhc80uFSYfOlTvYMe%2Bkqye4GrPMo6jTIcFCaclCqzaRY6xnYJ4kqWHoFQ8vZE9Q%3D%3D"
alt="banner-img"
/>
<img
src="https://storage.googleapis.com/vue-course-api.appspot.com/greensheep/1710828252361.png?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&Expires=1742169600&Signature=bv5z%2F88IUr3l7SjykdxJ4SHxTeG81Nc4MTJrWM%2FpVMbaP2QlkkCTwbw6qOwdvf2LBd0t2h13pcqaYszBvfxDmKMdVtzEJ1pwq5FEX%2FyRaTtunpQvp3d0BHjLbBXTmt%2Br7wHyWMvTthaFthr%2FcKdk23nYkzi7kgbDufrLclmWuse%2FSNeDtMo%2BiMxTz%2BgYS3%2BAOFxGwQR6Iy6FInKUDXc8JIRdOzZqEo%2BbLVMzCFgjFXsSHw6FdG9Ux%2BHDMAht6EV74%2BMBuE2BfRPO07TLacxmCa5YKtOIdinsbM2meVe7ufs8ogUAanQV%2B8SIBkC8h94g8HDYaUqwh6ugfzvXULjrPw%3D%3D"
alt="logo-image"
class="d-md-none"
/>
</div>
<form class="add-Ticket-form">
<h1 class="fz-24 fw-medium text-primary border-bottom-3 mb-8">
<span class="material-icons-outlined text-primary fz-20 me-6px">
add_circle_outline </span
>新增旅遊套票
</h1>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketName"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>套票名稱</label
>
<input
type="text"
name="套票名稱"
id="ticketName"
placeholder="請填寫套票名稱"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1 text-grey"
/>
<!-- <p id="ticketName-message" data-message="套票名稱">
<i class="fas fa-exclamation-circle"></i>
<span>必填!</span>
</p> -->
</div>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketUrl"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>圖片網址</label
>
<input
type="text"
name="圖片網址"
id="ticketUrl"
placeholder="請填寫圖片網址"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1"
/>
</div>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketArea"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>景點地區</label
>
<select
name="景點地區"
id="ticketArea"
class="form-input col-9 bg-greyinput text-grey fz-16 py-3 px-2 border-bottom-1"
>
<option value="" disabled selected hidden>
請選擇景點地區
</option>
<option value="台北">台北</option>
<option value="桃園">桃園</option>
<option value="新竹">新竹</option>
<option value="苗栗">苗栗</option>
<option value="台中">台中</option>
<option value="彰化">彰化</option>
<option value="雲林">雲林</option>
<option value="嘉義">嘉義</option>
<option value="台南">台南</option>
<option value="高雄">高雄</option>
<option value="屏東">屏東</option>
<option value="宜蘭">宜蘭</option>
<option value="花蓮">花蓮</option>
<option value="台東">台東</option>
<option value="離島">離島</option>
</select>
</div>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketPrice"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>套票金額</label
>
<input
type="number"
name="套票金額"
id="ticketPrice"
placeholder="請填寫套票金額"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1"
/>
</div>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketNum"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>套票組數</label
>
<input
type="number"
name="套票組數"
id="ticketNum"
placeholder="請填寫套票組數"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1"
/>
</div>
<div
class="form-group d-flex justify-content-between align-item-center mb-4"
>
<label
for="ticketRate"
class="col-1 text-primary fw-medium fz-16 border-bottom-t"
>套票星級</label
>
<input
type="number"
name="套票星級"
id="ticketRate"
placeholder="請填寫套票星級"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1"
/>
</div>
<div
class="form-group d-flex justify-content-between align-item-start mb-4"
>
<label
for="ticketDescription"
class="col-1 text-primary fw-medium fz-16 border-bottom-t py-2"
>套票描述</label
>
<textarea
name="套票描述"
class="form-input col-9 bg-greyinput fz-16 py-3 px-2 border-bottom-1 no-resize"
placeholder="請填寫套票描述(限100字)"
id="ticketDescription"
cols="5"
rows="5"
></textarea>
</div>
<input
type="button"
value="新增套票"
id="addTicketBtn"
class="d-block add-ticket-btn bg-primary text-white fz-20 ms-auto border-radius-48 py-3 px-10"
/>
</form>
</div>
</section>
<div class="col-6 col-md-12">
<main class="bg-grey pt-12 pb-30">
<div>
<div
class="d-flex flex-md-column justify-content-md-center areaSearch mb-8"
>
<div
class="d-flex fw-wrap align-item-center gap-30 justify-content-md-center col-12"
>
<select
name="地區搜尋"
id="areaSearch"
class="bg-white col-4 col-md-12 py-2 px-3 text-grey"
>
<option value="地區搜尋" disabled selected hidden>
地區搜尋
</option>
<option value="">全部地區</option>
<option value="台北">台北</option>
<option value="桃園">桃園</option>
<option value="新竹">新竹</option>
<option value="苗栗">苗栗</option>
<option value="台中">台中</option>
<option value="彰化">彰化</option>
<option value="雲林">雲林</option>
<option value="嘉義">嘉義</option>
<option value="嘉義">嘉義</option>
<option value="台南">台南</option>
<option value="高雄">高雄</option>
<option value="屏東">屏東</option>
<option value="宜蘭">宜蘭</option>
<option value="花蓮">花蓮</option>
<option value="台東">台東</option>
<option value="離島">離島</option>
</select>
<p class="searchResult fz-16 text-grey">
本次搜尋共 6 筆資料
</p>
</div>
<div id="chart" class="chart ms-auto me-auto"></div>
</div>
<ul class="tour-card d-flex fw-wrap"></ul>
</div>
</main>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script src="all.js"></script>
</body>
</html>