-
Notifications
You must be signed in to change notification settings - Fork 0
/
obituary.html
148 lines (138 loc) · 6.62 KB
/
obituary.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
<!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="obituary.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="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js" defer></script>
<script src="obituary.js" defer></script>
</head>
<body>
<!-- 背景音樂控件 -->
<audio id="background-music" loop>
<source src="終章.mp4" type="audio/mp3">
您的瀏覽器不支援音訊播放。
</audio>
<div class="music-controls">
<button onclick="document.getElementById('background-music').play()">🎵</button>
<button onclick="document.getElementById('background-music').pause()">🔇</button>
<input type="range" min="0" max="1" step="0.1" onchange="document.getElementById('background-music').volume = this.value">
</div>
<header>
<img src="image/logo.png" alt="Logo" class="logo">
<h1>蔡順先生 訃告</h1>
</header>
<main>
<section class="main-photo-section">
<img id="main-photo" src="IMG_7703.jpeg" alt="追思照片">
<p id="life-story">
我們敬愛的親人，蔡順先生，於113年08月16日，安詳離世，護喪妻 孝男 孝女 親視含殮，遵禮成服，設靈於 懷愛館（第二殯儀館）3F 蓮位堂［B1-02],設奠於 113年09月01日 舉行追思會儀式。 感謝親友們的致意與陪伴，給予我們的父親，最深的祝福，銘記在心，衷心感謝。
</p>
</section>
<div class="motto">永遠懷念，我們摯愛的親人</div>
<section class="paper-obituary-section">
<h2>訃告正本</h2>
<a href="IMG_7708.jpeg" data-lightbox="paper-obituary" data-title="訃聞紙本">
<img id="paper-obituary" src="IMG_7708.jpeg" alt="訃聞紙本">
</a>
</section>
<section id="timeline">
<h2>追思緬懷</h2>
<div class="VivaTimeline">
<dl>
<dt>113.08.16 - 113.09.01</dt>
<dd class="pos-right">
<div class="circ"></div>
<div class="time"></div>
<div class="event">
<div class="events-header"><strong>安靈期間</strong></div>
<div class="events-body">
<p>蔡順先生 設立牌位於 懷愛館 3F 蓮位堂 [B1-02]</p>
<p>此期間，親友可前往致意，與先生告別。</p>
</div>
</div>
</dd>
<dt>113.09.01</dt>
<dd class="pos-left">
<div class="circ"></div>
<div class="time"></div>
<div class="event">
<div class="events-header"><strong>告別奠禮</strong></div>
<div class="events-body">
<p>追思會：11：00</p>
<p>儀式結束後，發引火化，安奉於金寶山寶塔</p>
<p>出殯地點：懷愛館（第二殯儀館） 景行樓 3F [至仁四廳]</p>
</div>
</div>
</dd>
</dl>
</div>
</section>
<section id="comments-section">
<h2>追思留言區</h2>
<form id="comment-form">
<label for="comment-name">姓名：</label>
<input type="text" id="comment-name" placeholder="你的名字" required>
<label for="comment-message">留言內容:</label>
<textarea id="comment-message" rows="4" placeholder="你的留言" required></textarea>
<button type="submit">提交留言</button>
</form>
<div id="comments-container">
<!-- 留言區內容將動態插入 -->
</div>
</section>
<section id="donate-flower">
<h2>致贈花籃</h2>
<p>會場為求統一，一致性，致贈花籃，請點擊以下連結：</p>
<a href="javascript:void(0);" id="show-flower-baskets" class="btn">致贈花籃</a>
<div id="flower-basket-gallery">
<!-- 花籃選項 -->
<div class="flower-basket-item">
<img src="image/花籃A.JPG" alt="花籃A">
<p class="price">NT$2,500</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃B.JPG" alt="花籃B">
<p class="price">NT$3,000</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃C.JPG" alt="花籃C">
<p class="price">NT$3,500</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃D.JPG" alt="花籃D">
<p class="price">NT$4,000</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃E.JPG" alt="花籃E">
<p class="price">NT$5,000</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃F.JPG" alt="花籃F">
<p class="price">NT$5,500</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃G.JPG" alt="花籃G">
<p class="price">NT$6,000</p>
</div>
<div class="flower-basket-item">
<img src="image/花籃H.JPG" alt="花籃H">
<p class="price">NT$6,500</p>
</div>
</div>
<p><a href="https://line.me/ti/p/TuM5y_Of6I" target="_blank">送上一份最深切的祝福</a></p>
<p>為求會場一致，統一製作花籃<br>訂購花籃請點選我 <a href="https://line.me/ti/p/TuM5y_Of6I" target="_blank">這裡</a></p>
</section>
</main>
<footer>
<p>© 2024 祥安生命有限公司。 版權所有.</p>
<p>
承辦禮儀公司：祥安生命有限公司<br>
<a href="https://line.me/ti/p/TuM5y_Of6I" target="_blank">
<img src="image/行.png" alt="Line 聯絡我們" style="vertical-align: middle; width: 24px; height: 24px;">
<a href="tel:+886938179858">聯絡電話: 0938 179 858</a>
</p>
</footer>