-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (86 loc) · 4.79 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>祥安生命有限公司－訃聞資料提交</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">
<script src="index.js" defer></script>
</head>
<body>
<header>
<img src="image/logo.png" alt="祥安生命有限公司 Logo" class="logo">
</header>
<main>
<section id="info-form-section">
<h2>訃聞資料提交</h2>
<form id="info-form" action="invitation.html" method="post" enctype="multipart/form-data">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="photo">追思照片:</label>
<input type="file" id="photo" name="photo" accept="image/*" required>
<label for="additional-photos">其他照片（可選不限張數）:</label>
<input type="file" id="additional-photos" name="additional-photos[]" accept="image/*" multiple>
<label for="paper-obituary">訃聞紙本內容:</label>
<input type="file" id="paper-obituary" name="paper-obituary" accept="image/*">
<label for="birth-date">出生日期:</label>
<input type="date" id="birth-date" name="birth-date" required>
<label for="death-date">死亡日期:</label>
<input type="date" id="death-date" name="death-date" required>
<label for="funeral-space">牌位安置地點:</label>
<textarea id="funeral-space" name="funeral-space"></textarea>
<label for="funeral-date">出殯日期:</label>
<input type="date" id="funeral-date" name="funeral-date" required>
<label for="funeral-location">出殯地點:</label>
<select id="funeral-location" name="funeral-location" required>
<option value="第二殯儀館">第二殯儀館 禮廳</option>
<option value="板橋殯儀館">板橋殯儀館 禮廳</option>
<option value="其他">其他</option>
</select>
<input type="text" id="other-funeral-location" name="other-funeral-location" placeholder="若選擇其他，請填寫地點" style="display: none;">
<label for="family-service-time">家奠禮時間:</label>
<input type="time" id="family-service-time" name="family-service-time" required>
<label for="public-service-time">公奠禮時間:</label>
<input type="time" id="public-service-time" name="public-service-time" required>
<label for="life-story">生平介紹:</label>
<textarea id="life-story" name="life-story"></textarea>
<label for="music-choice">選擇背景音樂:</label>
<select id="music-choice" name="music-choice">
<option value="audio/music1.mp3">音樂1</option>
<option value="audio/music2.mp3">音樂2</option>
<option value="audio/music3.mp3">音樂3</option>
<option value="audio/music4.mp3">音樂4</option>
<option value="audio/music5.mp3">音樂5</option>
</select>
<label for="custom-music">或上傳自定義音樂:</label>
<input type="file" id="custom-music" name="custom-music" accept="audio/*">
<button type="submit">提交</button>
</form>
</section>
<section id="photo-carousel-section">
<h2>追思照片</h2>
<div id="photo-carousel" class="carousel">
<!-- 幻燈片內容由 JavaScript 動態加載 -->
</div>
</section>
</main>
<footer>
<p>© 2024 祥安生命有限公司. 版權所有.</p>
<p>
承辦禮儀公司：祥安生命有限公司<br>
<a href="https://line.me/ti/p/你的LineID" target="_blank">Line 聯絡我們</a><br>
<a href="tel:+886978583699">聯絡電話: +886 978 583 699</a>
</p>
</footer>
<audio id="background-music" loop>
<source src="audio/default-music.mp3" type="audio/mp3">
您的瀏覽器不支持音頻元素。
</audio>
<button id="play-music">🔊</button>
<button id="stop-music" style="display: none;">🔇</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script src="index.js" defer></script>
</body>
</html>