-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
333 lines (311 loc) · 16.5 KB
/
index.html
File metadata and controls
333 lines (311 loc) · 16.5 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
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="해인, 천산의 결혼식 모바일 청첩장입니다.">
<meta name="author" content="Esantomi">
<meta name="email" content="pilinnasa@gmail.com">
<meta property="og:url" content="https://Esantomi.github.io/wedding" />
<meta property="og:type" content="website" />
<meta property="og:title" content="해인❤️천산, 결혼합니다." />
<meta property="og:description" content="두 사람의 결혼을 축하해 주세요." />
<meta property="og:image" content="assets/img/couple.png" />
<meta property="og:site_name" content="해인❤️천산, 결혼합니다." />
<title>해인❤️천산, 결혼합니다.</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- emailjs 로드 및 sendMail() 설정 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sendMail() {
(function () {
// https://dashboard.emailjs.com/admin/account
emailjs.init("laZD2hrfI3vsCPBU3");
// emailjs.send(serviceID, templateID, templateParams, publicKey);
emailjs.send("wedding-mail", "gift_send", {
name: $("#sender-name").value,
gift: $("#gift-name").text(),
message: $("#sender-message").value
}).then(function (response) {
console.log("SUCCESS. status=%d, text=%s", response.status, response.text);
}, function (err) {
console.log("FAILED. error=", err);
});
})();
}
</script>
</head>
<body>
<!-- 낙화 효과 -->
<div class="sakura-falling"></div>
<!-- 최상단 좌우 장식 -->
<img src="assets/img/left.png" alt="image-top-left" class="top-left-decoration">
<img src="assets/img/right.png" alt="image-top-right" class="top-right-decoration">
<section id="media"></section>
<div class="wrap">
<div class="title">
<h1>이천산</h1>
<h2>♥</h2>
<h1>지해인</h1>
<p>2024. 2. 20</p>
<h3>결혼합니다.</h3>
</div>
</div>
<img class="couple-drawing" src="assets/img/couple.png" style="width:450px; margin: auto;" alt="아내가 직접 그린 웨딩 그림.">
<div class="body-texts">
<p>사랑하는 이들이 만나는 자리에서<br />
여로는 끝난다지요.<br />
그러나 여정은 결코 끝나지 않음을<br />
이제는 알겠습니다.<br />
정든 새로움을 맞이하는 기쁜 소식에<br />
마음으로 함께해 주세요.
</p>
</div>
<div class="dividing">
<img src="assets/img/kokam.png" style="width:50px" alt="구분선">
</div>
<p class="subtitle">사진첩</p><br />
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/img/1.jpg" alt="Image 1"></div>
<div class="swiper-slide"><img src="assets/img/2.jpg" alt="Image 2"></div>
<div class="swiper-slide"><img src="assets/img/3.jpg" alt="Image 3"></div>
<div class="swiper-slide"><img src="assets/img/4.jpg" alt="Image 4"></div>
<div class="swiper-slide"><img src="assets/img/5.jpg" alt="Image 5"></div>
<div class="swiper-slide"><img src="assets/img/6.jpg" alt="Image 6"></div>
<div class="swiper-slide"><img src="assets/img/7.jpg" alt="Image 7"></div>
<div class="swiper-slide"><img src="assets/img/8.jpg" alt="Image 8"></div>
<div class="swiper-slide"><img src="assets/img/9.jpg" alt="Image 9"></div>
<div class="swiper-slide"><img src="assets/img/10.jpg" alt="Image 10"></div>
</div>
<!-- Swiper 컴포넌트 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="dividing">
<img src="assets/img/kokam.png" style="width:50px" alt="구분선">
</div>
<p class="subtitle">함께 식사해요 :)</p>
<div class="body-texts">
<p>예식을 거행하지 않는 대신<br />
<strong>식사 대접</strong>을 하고자 합니다.<br />
따로 연락드리겠습니다.<br />
먼저 연락 주셔도 좋습니다.<br />
<strong>축의금은 정중히 사양</strong>하나<br />
부부를 위한 선물과 기부금은 받습니다.<br />
기부금은 어려운 이웃을 위해 사용합니다.<br />
물론 선물도 기부금도 주지 않으셔도 좋습니다.<br />
그저 함께 기뻐해 주세요.
</p>
</div>
<div class="dividing">
<img src="assets/img/kokam.png" style="width:50px" alt="구분선">
</div>
<p class="subtitle">선물하시고 싶다면 ⋯</p>
<div class="body-texts">
<p>먼저 <strong>선물 버튼을 눌러 메시지</strong>를 보내 주세요.<br />
아쉽지만 구매는 별도로 진행해 주셔야 해요.<br />
<strong>돋보기 버튼을 누르면 구매처에 연결</strong>됩니다.<br />
목록에 없는 선물을 해 주셔도 기쁘겠습니다.<br />
(얼마든 편하게 카톡, 문자 주세요)<br />
선물해 주신 귀한 분을 매번 생각하겠습니다.
</p>
</div>
<div class="ww-gift">
<div class="gift-columns d-flex">
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="로얄 알버트 찻잔" class="img-fluid gift-img gift-selected" src="assets/img/royal-albert.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('https://link.coupang.com/a/bp2dGT')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="쌍안경" class="img-fluid gift-img gift-selected" src="assets/img/binoculars.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('https://smartstore.naver.com/sanjuplus/products/3803579856')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="한국의 새" class="img-fluid gift-img gift-selected" src="assets/img/birds.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=258170132')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
</div>
<div class="gift-columns d-flex">
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="커피메이커" class="img-fluid gift-img gift-selected" src="assets/img/coffeemaker.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('https://link.coupang.com/a/bp2ehG')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="에어프라이어" class="img-fluid gift-img gift-selected" src="assets/img/air-fryer.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('https://link.coupang.com/a/bp145b')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
<div class="gift flex-grow-1">
<!-- 구매 후에는 gift-selected class 추가 -->
<img alt="손목시계" class="img-fluid gift-img gift-selected" src="assets/img/watch.jpg" />
<div class="btn-group gift-btn-group" role="group">
<button class="btn btn-default gift-btn"
onclick="window.open('http://s.godo.kr/25hn4')">
<i class="fa fa-search"></i></button>
<button class="btn btn-default gift-btn gift-send"
onclick="alert('다른 분께서 먼저 선택하신 선물입니다.');">
<i class="fa fa-gift"></i></button>
</div>
</div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="giftMailModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">선물하기 - <span id="gift-name"></span></h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">보내는 분 성함</span>
</div>
<input aria-describedby="basic-addon3" class="form-control" id="sender-name" type="text">
</div>
<div class="input-group">
<textarea aria-label="With textarea" class="form-control" id="sender-message"
placeholder="여기에 선물 구매 의향과 축하 메시지를 남겨 주세요." rows=4></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="reserveGiftButton" type="button">예약</button>
</div>
</div>
</div>
</div>
<div class="dividing">
<img src="assets/img/kokam.png" style="width:50px" alt="구분선">
</div>
<p class="subtitle">기부하시고 싶다면 ⋯</p>
<div class="body-texts">
<p>살며 온정 어린 도움을 과분히도 받았습니다.<br />
그에 부응하지 못함이 저희의 근심입니다.<br />
앎보다 행하는 것이 진실로 어렵다고 하였고<br />
행하지 못함은 용기가 없기 때문이라지요.<br />
저희는 축하해 주시는 여러분의 마음을 모아<br />
세상에 보은할 용기를 내고자 합니다.<br />
저희를 생각해 주시는 그 마음을<br />
삼가 받들어 그 뜻을 성실히 하겠습니다.<br />
아래 <strong>봉투의 기부금 전달 버튼</strong>을 누르셔서<br />
각자 원하는 만큼 자유롭게 보내 주세요.<br />
기부 내역은 추후 고지해 드리고자 합니다.
</p>
</div>
<br />
<div class="envelope" title="기부금">
<div class="back"></div>
<form class="letter">
<label>기부금 전달하기</label>
<div class="letter-texts">
<p>언제나 평안하세요.</p>
</div>
<div>
<a href="https://qr.kakaopay.com/FRUeBBQ41" class="btn donation-btn">
<i class="fas fa-heart" aria-hidden="true"></i>
<span style="font-family: Cafe24Oneprettynight;">카카오페이로 기부금 전달</span>
</a>
</div>
</form>
</div>
<div class="dividing">
<img src="assets/img/kokam.png" style="width:50px" alt="구분선">
</div>
<p class="footer">
그림은 신부의 작품으로 이용을 금합니다.<br />
코드는 자유롭게 활용하셔도 무방합니다.<br />
<span>©</span> 2024-02-20 Made by Haein (<a href="https://haein.info" target="_blank">@Esantomi</a>)
</p>
<div class="bottom_left">
<audio id="player" src="assets/inMyLife.mp3"></audio>
<div>
<i class="fa fa-music fa-2x" onclick="togglePlayPause()"></i>
</div>
</div>
<!-- Popper.js and Bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- jQuery-Sakura -->
<script src='https://cdn.jsdelivr.net/gh/timoschaefer/jQuery-Sakura/jquery-sakura.min.js'></script>
<!-- simpleParallax.js -->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>
<!-- Swiper -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
<script src="js/script.js"></script>
</body>
<!--
__ __ _ _ _ _
\ \ / /__( )_ __ ___ __ _ ___| |_| |_(_)_ __ __ _
\ \ /\ / / _ \/| '__/ _ \ / _` |/ _ \ __| __| | '_ \ / _` |
\ V V / __/ | | | __/ | (_| | __/ |_| |_| | | | | (_| |
\_/\_/ \___| |_| \___| \__, |\___|\__|\__|_|_| |_|\__, |
|___/ |___/
_ _
_ __ ___ __ _ _ __ _ __(_) ___ __| |
| '_ ` _ \ / _` | '__| '__| |/ _ \/ _` |
| | | | | | (_| | | | | | | __/ (_| |
|_| |_| |_|\__,_|_| |_| |_|\___|\__,_|
-->
</html>