-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
378 lines (342 loc) · 21.7 KB
/
Copy pathindex.html
File metadata and controls
378 lines (342 loc) · 21.7 KB
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>丫亮笑長練功坊預約助手 - 課程預約</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
// TODO: 請替換成您的 EmailJS Public Key
emailjs.init("nMrt-hOJO87o-gCRM");
})();
</script>
<script src="js/config.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="icon" href="images/Alianglogo.png" type="image/png">
<style>
/* Custom styles if needed */
</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
<nav class="bg-gray-900 text-white p-4 shadow-lg sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<img src="images/Alianglogo.png" alt="丫亮笑長"
class="h-10 w-10 p-1 rounded-lg bg-yellow-400 object-contain">
<div>
<h1 class="text-xl font-bold">丫亮笑長練功坊預約助手</h1>
<p class="text-xs text-gray-400">預約與課程管理系統</p>
</div>
</div>
<div class="flex items-center space-x-4">
<a href="about.html" class="text-sm hover:text-yellow-400 transition"><i
class="fa-solid fa-user-circle"></i> 關於講師</a>
<a href="portfolio.html" class="text-sm hover:text-yellow-400 transition"><i
class="fa-solid fa-briefcase"></i> ㄚ亮笑長作品集</a>
</div>
</div>
</nav>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Welcome Card -->
<div
class="bg-white rounded-3xl shadow-xl p-6 md:p-8 mb-10 text-center border-t-8 border-yellow-400 relative overflow-hidden">
<div class="absolute top-0 right-0 -mr-10 -mt-10 w-40 h-40 bg-yellow-100 rounded-full opacity-50 blur-3xl">
</div>
<div class="absolute bottom-0 left-0 -ml-10 -mb-10 w-40 h-40 bg-blue-100 rounded-full opacity-50 blur-3xl">
</div>
<div class="flex flex-col md:flex-row items-center justify-center relative z-10">
<img src="images/Aliang.png" alt="丫亮笑長"
class="w-32 h-32 md:w-40 md:h-40 object-contain mb-4 md:mb-0 md:mr-8 flex-shrink-0">
<div class="text-center md:text-left">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">歡迎來到丫亮笑長練功坊</h2>
<p class="text-lg text-gray-600 mb-0 leading-normal">
選擇你喜歡的課程，按下立即預約<br>系統將自動引導您完成所有步驟，讓我們開始吧！
</p>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4 md:gap-8 mt-8 relative z-10">
<div
class="flex items-center space-x-3 text-gray-700 font-bold bg-gray-50 border border-gray-100 px-4 py-2 rounded-full shadow-sm">
<div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center"><i
class="fa-solid fa-magnifying-glass-location"></i></div>
<span>線上即時查詢</span>
</div>
<div
class="flex items-center space-x-3 text-gray-700 font-bold bg-gray-50 border border-gray-100 px-4 py-2 rounded-full shadow-sm">
<div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center"><i
class="fa-regular fa-envelope"></i></div>
<span>自動通知信件</span>
</div>
<div
class="flex items-center space-x-3 text-gray-700 font-bold bg-gray-50 border border-gray-100 px-4 py-2 rounded-full shadow-sm">
<div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center"><i
class="fa-solid fa-user-check"></i></div>
<span>專人後續追蹤</span>
</div>
</div>
</div>
<div class="flex justify-center items-center mb-10" id="stepperContainer">
</div>
<div id="view-courses" class="space-y-6">
<h2 class="text-2xl font-bold text-center mb-6">請選擇您想預約的課程</h2>
<div id="course-list" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="col-span-full text-center py-10 text-gray-500">
<i class="fa-solid fa-spinner fa-spin text-3xl"></i><br>載入課程中...
</div>
</div>
</div>
<div id="view-schedule" class="hidden space-y-6">
<div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
<h3 class="text-xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 text-blue-600 py-1 px-3 rounded text-sm mr-2"
id="selected-course-name"></span>
選擇日期與時段
</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<label class="block text-gray-700 font-medium mb-2">1. 選擇日期</label>
<input type="date" id="booking-date"
class="w-full p-4 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-lg">
</div>
<div id="time-slots-container" class="opacity-50 pointer-events-none transition-opacity">
<label class="block text-gray-700 font-medium mb-2">2. 選擇時段</label>
<div class="space-y-3">
<button onclick="selectTime('09:00-12:00')" id="btn-am"
class="slot-btn w-full p-4 border rounded-lg hover:border-blue-500 hover:bg-blue-50 transition text-left flex justify-between items-center group">
<span><i class="fa-regular fa-sun mr-2"></i> 上午 (09:00-12:00)</span>
<span class="status-text text-sm font-bold text-green-600">有空</span>
</button>
<button onclick="selectTime('13:30-16:30')" id="btn-pm"
class="slot-btn w-full p-4 border rounded-lg hover:border-blue-500 hover:bg-blue-50 transition text-left flex justify-between items-center group">
<span><i class="fa-regular fa-moon mr-2"></i> 下午 (13:30-16:30)</span>
<span class="status-text text-sm font-bold text-green-600">有空</span>
</button>
<button onclick="selectTime('09:00-16:30')" id="btn-full"
class="slot-btn w-full p-4 border rounded-lg hover:border-blue-500 hover:bg-blue-50 transition text-left flex justify-between items-center group">
<span><i class="fa-solid fa-sun mr-2 text-yellow-500"></i> 全日 (09:00-16:30)</span>
<span class="status-text text-sm font-bold text-green-600">有空</span>
</button>
</div>
</div>
</div>
<div class="mt-6 bg-yellow-50 border border-yellow-200 p-4 rounded text-sm text-yellow-800">
<i class="fa-solid fa-clock"></i> 系統將自動顯示當天剩餘的「有空」時段。灰色代表該時段已被預約。
</div>
</div>
<div class="flex justify-between">
<button onclick="changeStep(1)" class="px-6 py-2 border rounded hover:bg-gray-100">重選課程</button>
</div>
</div>
<div id="view-form" class="hidden space-y-6">
<div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
<div class="mb-6 p-4 bg-blue-50 rounded-lg flex flex-wrap gap-4 text-sm text-blue-800">
<div><i class="fa-solid fa-calendar mr-1"></i> <span id="confirm-date"></span></div>
<div><i class="fa-solid fa-clock mr-1"></i> <span id="confirm-time"></span></div>
<div><i class="fa-solid fa-chalkboard-user mr-1"></i> <span id="confirm-course"></span></div>
</div>
<form id="bookingForm" class="grid gap-6">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold mb-1">邀請單位/學校名稱 *</label>
<input type="text" name="org" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="例如：台積電文教基金會">
</div>
<div>
<label class="block text-sm font-bold mb-1">聯絡人姓名 *</label>
<input type="text" name="name" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="王小明">
</div>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold mb-1">聯絡電話 *</label>
<input type="tel" name="phone" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="0912-345-678">
</div>
<div>
<label class="block text-sm font-bold mb-1">聯絡人 Email *</label>
<input type="email" name="email" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="example@email.com">
</div>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold mb-1">社群帳號 (Line/FB擇一) *</label>
<input type="text" name="social" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="Line ID 或 FB 連結">
</div>
<div>
<label class="block text-sm font-bold mb-1">邀請縣市 *</label>
<select name="city" required
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500 bg-white">
<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>
<option value="宜蘭縣">宜蘭縣</option>
<option value="花蓮縣">花蓮縣</option>
<option value="台東縣">台東縣</option>
<option value="澎湖縣">澎湖縣</option>
<option value="金門縣">金門縣</option>
<option value="連江縣">連江縣</option>
</select>
</div>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold mb-1">講師鐘點費/hr</label>
<select name="lecturerFee"
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500 bg-white">
<option value="1500">1500</option>
<option value="2000" selected>2000</option>
<option value="2500">2500</option>
<option value="3000">3000</option>
<option value="客製化">客製化 (請備註說明)</option>
</select>
</div>
<div>
<label class="block text-sm font-bold mb-1">車馬費提供</label>
<div class="flex items-center space-x-4">
<label class="flex items-center"><input type="radio" name="feeType" value="有" checked
class="mr-2"> 有提供實報實銷或定額</label>
<label class="flex items-center"><input type="radio" name="feeType" value="無"
class="mr-2"> 無</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-bold mb-1">備註需求</label>
<textarea name="notes" rows="3"
class="w-full p-3 border rounded focus:ring-blue-500 focus:border-blue-500"
placeholder="例如：需自備投影筆、停車位安排..."></textarea>
</div>
</form>
</div>
<div class="flex justify-between items-center">
<button onclick="changeStep(2)" class="text-gray-500 hover:text-gray-800"><i
class="fa-solid fa-arrow-left"></i> 重選時段</button>
<button onclick="submitBooking()"
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-lg transition transform hover:scale-105">確認並送出預約</button>
</div>
</div>
<div id="view-success" class="hidden text-center py-12">
<div
class="inline-flex items-center justify-center w-24 h-24 bg-green-100 text-green-500 rounded-full mb-6">
<i class="fa-solid fa-check text-4xl"></i>
</div>
<h2 class="text-3xl font-bold mb-2">預約申請已送出！</h2>
<p class="text-gray-600 mb-8">感謝您的填寫。我們已收到您的預約申請。</p>
<div class="bg-yellow-50 border border-yellow-100 p-6 rounded-xl max-w-lg mx-auto text-left mb-8">
<h4 class="font-bold text-yellow-800 mb-3"><i class="fa-regular fa-clock"></i> 後續流程說明：</h4>
<ul class="list-disc list-inside text-sm text-yellow-800 space-y-2">
<li>此階段僅為「預約申請」，尚未確認成立。</li>
<li>我們將於 3 個工作天內透過電話或 Email 與您聯繫。</li>
<li>確認合作細節與費用後，將發送正式確認信。</li>
</ul>
</div>
<button onclick="location.reload()"
class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">回到首頁</button>
</div>
</div>
<!-- Course Detail Modal -->
<div id="public-course-modal"
class="fixed inset-0 bg-black bg-opacity-60 hidden items-center justify-center z-50 p-4 backdrop-blur-sm transition-opacity">
<div
class="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto shadow-2xl relative animate-fade-in-up">
<!-- Close Button -->
<button onclick="closeCourseDetail()"
class="absolute top-4 right-4 bg-black bg-opacity-50 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-opacity-70 transition z-10">
<i class="fa-solid fa-times"></i>
</button>
<div class="flex flex-col">
<!-- Image Top (Strict 16:9) -->
<div class="relative w-full pb-[56.25%] bg-gray-200 shrink-0 group">
<img id="modal-course-img" src="" alt="Course Image"
class="absolute inset-0 w-full h-full object-cover">
<!-- Floating Action Button -->
<button id="modal-book-btn"
class="absolute bottom-6 left-1/2 transform -translate-x-1/2 bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition transform hover:scale-105 flex items-center justify-center z-20 whitespace-nowrap border-2 border-white">
<span>立即預約此課程</span>
<i class="fa-solid fa-arrow-right ml-2"></i>
</button>
</div>
<!-- Content Bottom -->
<div class="p-6 md:p-8">
<div class="mb-4">
<h3 class="text-2xl font-bold text-gray-900 leading-tight" id="modal-course-title"></h3>
</div>
<div class="flex flex-wrap gap-2 mb-6 text-sm items-center">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-medium"
id="modal-course-category"></span>
<div id="modal-course-tags" class="flex gap-2"></div>
<span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full"><i
class="fa-regular fa-clock mr-1"></i> <span id="modal-course-duration"></span></span>
</div>
<div class="prose prose-sm text-gray-600 mb-2 overflow-y-auto max-h-[40vh] custom-scrollbar">
<h4 class="font-bold text-gray-800 mb-2">課程介紹</h4>
<p id="modal-course-desc" class="whitespace-pre-line leading-relaxed mb-6"></p>
<!-- New Requirements Section -->
<div id="modal-req-section" class="hidden">
<h4 class="font-bold text-gray-800 mb-2">備註說明</h4>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r">
<p id="modal-course-req" class="whitespace-pre-line text-yellow-800"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<footer class="bg-gray-900 text-gray-400 py-8 mt-0">
<div class="container mx-auto px-4 text-center text-sm">
<div class="flex justify-center space-x-6 mb-4">
<a href="mailto:hsuliang@gmail.com"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="Email 聯絡">
<i class="fa-regular fa-envelope"></i>
</a>
<a href="https://bit.ly/Aliang" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="ㄚ亮笑長練功坊">
<i class="fa-solid fa-globe"></i>
</a>
<a href="admin.html"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="管理端後台">
<i class="fa-solid fa-user-gear"></i>
</a>
</div>
<p class="mb-2">
© 丙午．春分．20260331 ㄚ亮笑長. All Rights Reserved.
</p>
<p class="text-xs text-gray-500">
Powered by Firebase Firestore & EmailJS for seamless booking experience.
</p>
</div>
</footer>
</body>
</html>