-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
558 lines (509 loc) · 23.7 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
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
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wedding Invitation</title>
<link rel="icon" href="https://www.svgrepo.com/show/214817/wedding-marry.svg" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
<!-- SimplyCountdown.js -->
<link rel="stylesheet" href="countdown/simplyCountdown.theme.default.css" />
<script src="countdown/simplyCountdown.min.js"></script>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<!-- CSS path -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id="hero" class="hero w-100 h-100 p-3 mx-auto text-center d-flex justify-content-center align-items-center text-white">
<main>
<h4>To <span> Father/Mother/Brother</span></h4>
<h1>Husband & Wife</h1>
<p>Will hold a wedding reception in:</p>
<!-- Letak sini sbb nk display countdown sini -->
<div class="simply-countdown"></div>
<a href="#home" class="btn btn-lg mt-4" onClick="enableScroll()">See Invitation</a>
</main>
</section>
<!-- OffCanvas NavBar-->
<nav class="navbar navbar-expand-md bg-transparent sticky-top mynavbar">
<div class="container">
<a class="navbar-brand" href="#">Zul</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Zul</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#home">Home</a>
<a class="nav-link" href="#info">Info</a>
<a class="nav-link" href="#story">Story</a>
<a class="nav-link" href="#gallery">Gallery</a>
<a class="nav-link" href="#rsvp">RSVP</a>
<a class="nav-link" href="#gifts">Gifts</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Home -->
<section id="home" class="home">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h2>Weddings</h2>
<h3>Held on November 20, 2023 at Kota Bharu Kelantan</h3>
<p>Therefore, with all due respect, we intend to invite you, brothers and sisters, to attend our wedding.</p>
</div>
</div>
<div class="row couple">
<div class="col-lg-6">
<div class="row">
<div class="col-8 text-end">
<h3>Husband</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis, incidunt soluta?</p>
<p>
Putra from father. Lorem <br />
& <br />
mother Ipsum
</p>
</div>
<div class="col-4">
<img src="img/husband.jpeg" alt="Husband" class="img-responsive rounded-circle" />
</div>
</div>
</div>
<!-- Icon heart letak sini -->
<span class="heart"><i class="bi bi-heart-fill"></i></span>
<div class="col-lg-6">
<div class="row">
<div class="col-4">
<img src="img/wife.png" alt="Wife" class="img-responsive rounded-circle" />
</div>
<div class="col-8">
<h3>Wife</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis, incidunt soluta?</p>
<p>
Putra from father. Ipsum <br />
& <br />
mather Lorem
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Info about perkahwinan -->
<section id="info" class="info">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-10 text-center">
<h2>Event Information</h2>
<p class="alamat">
Address: Grandara hall depan SK Pendek, PT 1047. <br />
PT 1047, Lorong Pengkalan Penambang, 15100 Kota Bharu, Kelantan.
</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15870.080961089143!2d102.2205594!3d6.060344!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31b6a5034cdf6dbd%3A0x7c1ff987016ac709!2sGrandara%20Hall%2C%20Kota%20Bharu!5e0!3m2!1sen!2smy!4v1716214390765!5m2!1sen!2smy"
width="100%"
height="250"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<a href="https://maps.app.goo.gl/EP3osshD7ytzMAux8" target="_blank" class="btn btn-light btn-sm my-3">Click to open the map</a>
<p class="description">
It is hoped that the address and date will not be mistaken. If you arrive at your destination but there are no signs of a wedding taking place, it could be that you have the wrong schedule or the wrong place.
</p>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-md-5 col-10">
<div class="card text-center text-bg-light mb-5">
<div class="card-header">Akad Nikah</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="col-md-6">
<i class="bi bi-clock d-block"></i>
<span>08.00 - 10.00</span>
</div>
<div class="col-md-6">
<i class="bi bi-calendar3 d-block"></i>
<span>Saturday, 20 November 2023</span>
</div>
</div>
</div>
<div class="card-footer">It is hoped that the ceremony will be conducive to maintaining the solemnity and solemnity of the entire procession.</div>
</div>
</div>
<div class="col-md-5 col-10">
<div class="card text-center text-bg-light">
<div class="card-header">RECEPTION</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="col-md-6">
<i class="bi bi-clock d-block"></i>
<span>11.00 - done</span>
</div>
<div class="col-md-6">
<i class="bi bi-calendar3 d-block"></i>
<span>Sunday, 20 November 2023</span>
</div>
</div>
</div>
<div class="card-footer">It is hoped that the ceremony will be conducive to maintaining the solemnity and solemnity of the entire procession.</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Info -->
<!-- Story section -->
<section id="story" class="story">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-10 text-center">
<span>How Our Love Bloomed</span>
<h2>Our Story</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, similique non soluta nulla asperiores voluptatem.</p>
</div>
</div>
<div class="row">
<div class="col">
<ul class="timeline">
<li>
<div class="timeline-image" style="background-image: url(https://picsum.photos/302/302)"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3>First meeting</h3>
<span>1 Juni 2000</span>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, modi autem? Commodi autem quo quia?</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image" style="background-image: url(https://picsum.photos/300/300)"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3>Get serious</h3>
<span>1 Januari 2005</span>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto enim eaque obcaecati odit itaque explicabo quisquam quos at.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image" style="background-image: url(https://picsum.photos/301/301)"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3>Fiance</h3>
<span>7 November 2009</span>
</div>
<div class="timeline-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, deleniti distinctio. Esse quas sit explicabo corporis magni qui expedita a.</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Story section End -->
<!-- Gallery Section -->
<section id="gallery" class="gallery">
<!-- Container to hold the gallery content -->
<div class="container">
<!-- Row for the gallery title and description, centered in the middle -->
<div class="row justify-content-center">
<div class="col-md-8 col-10 text-center">
<!-- Subtitle and heading for the gallery -->
<span>Our Memories</span>
<h2>Gallery</h2>
<!-- Description text under the heading -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, itaque?</p>
</div>
</div>
<!-- Row for the gallery images, with responsive column classes -->
<!-- The column classes control how many images are displayed per row based on screen size -->
<div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center">
<!-- Individual gallery item, repeated for each image -->
<div class="col mt-3">
<!-- Anchor tag for lightbox effect, linking to a larger version of the image -->
<a href="https://picsum.photos/id/300/1200/768" data-toggle="lightbox" data-caption="1" data-gallery="mygallery">
<!-- Image thumbnail, set to be fluid, full width, and rounded -->
<img src="https://picsum.photos/id/300/300/400" alt="1" class="img-fluid w-100 rounded" />
</a>
</div>
<!-- Repeat for each gallery item, changing the image source, caption, and lightbox attributes -->
<div class="col mt-3">
<a href="https://picsum.photos/id/300/1200/768" data-toggle="lightbox" data-caption="2" data-gallery="mygallery">
<img src="https://picsum.photos/id/300/300/400" alt="2" class="img-fluid w-100 rounded" />
</a>
</div>
<div class="col mt-3">
<a href="https://picsum.photos/id/301/1200/768" data-toggle="lightbox" data-caption="3" data-gallery="mygallery">
<img src="https://picsum.photos/id/301/300/400" alt="3" class="img-fluid w-100 rounded" />
</a>
</div>
<div class="col mt-3">
<a href="https://picsum.photos/id/302/1200/768" data-toggle="lightbox" data-caption="4" data-gallery="mygallery">
<img src="https://picsum.photos/id/302/300/400" alt="4" class="img-fluid w-100 rounded" />
</a>
</div>
<div class="col mt-3">
<a href="https://picsum.photos/id/304/1200/768" data-toggle="lightbox" data-caption="5" data-gallery="mygallery">
<img src="https://picsum.photos/id/304/300/400" alt="5" class="img-fluid w-100 rounded" />
</a>
</div>
<div class="col mt-3">
<a href="https://picsum.photos/id/305/1200/768" data-toggle="lightbox" data-caption="6" data-gallery="mygallery">
<img src="https://picsum.photos/id/305/300/400" alt="6" class="img-fluid w-100 rounded" />
</a>
</div>
</div>
</div>
</section>
<!-- Gallery Section End -->
<!-- Attendance form section -->
<section id="rsvp" class="rsvp">
<div class="container">
<div class="row justify-content-center">
<!-- Column for the title and description of the form -->
<div class="col-md-8 col-10 text-center">
<h2>Confirmation of Attendance</h2>
<p>Fill out the form below to confirm attendance.</p>
</div>
</div>
<!-- Form for attendance confirmation -->
<!-- The form uses POST method to send data to a Google Script URL -->
<form class="row row-cols-md-auto g-3 align-items-center justify-content-center" method="POST" action="https://script.google.com/macros/s/AKfycbxccgG4ZLJLrIbxq-0r62c_cWDBEIWxwRkNIO3DHLKWkvXyj9ms_ShaBV1cEnOkpZIE/exec" id="my-form">
<!-- Input field for Name -->
<div class="col-12">
<div class="mb-3">
<label for="nama" class="form-label">Name</label>
<input type="text" class="form-control" id="nama" name="nama" />
</div>
</div>
<!-- Input field for Total (number of attendees) -->
<div class="col-12">
<div class="mb-3">
<label for="jumlah" class="form-label">Total</label>
<input type="number" class="form-control" id="jumlah" name="jumlah" min="1" max="5" length="1" value="1" />
</div>
</div>
<!-- Dropdown for confirming attendance status -->
<div class="col-12">
<div class="mb-3">
<label for="status" class="form-label">Confirm</label>
<select name="status" id="status" class="form-select">
<option selected>Choose</option>
<option value="Hadir">Attend</option>
<option value="Tidak Hadir">Absent</option>
</select>
</div>
</div>
<!-- Submit button to send the form data -->
<div class="col-12" style="margin-top: 35px">
<button class="btn btn-primary">Send</button>
</div>
</form>
</div>
</section>
<!-- Attendance form end -->
<!-- Gift -->
<section id="gifts" class="gifts">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-10 text-center">
<span>EXPRESSION OF LOVE</span>
<h2>Send Gifts</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam iure perferendis provident ab aliquam nemo.</p>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="fw-bold">CIMB BANK</div>
1234567 - ZULHUSNI
</li>
<li class="list-group-item">
<div class="fw-bold">QR Code</div>
<img src="https://img.freepik.com/premium-vector/qr-code-cartoon-character-doing-wave-hand-gesture-cute-design_152558-13573.jpg" alt="QR" class="img-thumbnail" width="150" />
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Gift End -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col text-center">
<small class="block">© 2023 Zul Wedding. All Rights Reserved.</small>
<small class="block">Design by <a href="https://instagram.com/zlhsny._" target="_blank">@zulhusni</a>.</small>
<ul class="mt-3">
<li>
<a href="#"><i class="bi bi-instagram"></i></a>
</li>
<li>
<a href="#"><i class="bi bi-youtube"></i></a>
</li>
<li>
<a href="#"><i class="bi bi-twitter"></i></a>
</li>
<li>
<a href="#"><i class="bi bi-facebook"></i></a>
</li>
<li>
<a href="#"><i class="bi bi-tiktok"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<!-- Audio Section -->
<div id="audio-container">
<!-- Audio element that automatically plays and loops the specified audio file -->
<audio id="song" autoplay loop>
<source src="audio/be-mine.mp3" type="audio/mp3" />
</audio>
<!-- Wrapper for the audio icon, initially hidden (display: none) -->
<div class="audio-icon-wrapper" style="display: none">
<!-- Icon representing the audio status (initially a spinning disc icon) -->
<i class="bi bi-disc"></i>
</div>
</div>
<!-- Audio Section End -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- Lightbox Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script>
<!-- Countdown tu set random sahaja -->
<script>
simplyCountdown(".simply-countdown", {
year: 2024, // required
month: 9, // required
day: 25, // required
hours: 0, // Default is 0 [0-23] integer
words: {
//words displayed into the countdown
days: { singular: "day", plural: "days" },
hours: { singular: "hour", plural: "hours" },
minutes: { singular: "minute", plural: "minutes" },
seconds: { singular: "second", plural: "seconds" },
},
plural: true, //use plurals
});
</script>
<!-- Solve problem when the website change to mobile screen for NavBar -->
<script>
// Select elements with the class "sticky-top" and "offcanvas"
const stickyTop = document.querySelector(".sticky-top");
const offcanvas = document.querySelector(".offcanvas");
// Event listener for when the offcanvas is shown
offcanvas.addEventListener("show.bs.offcanvas", function () {
// Change the overflow style of the sticky-top element to 'visible'
// This allows the sticky-top content to be fully displayed without being clipped
stickyTop.style.overflow = "visible";
});
// Event listener for when the offcanvas is hidden
offcanvas.addEventListener("hidden.bs.offcanvas", function () {
// Change the overflow style of the sticky-top element to 'hidden'
// This prevents the content from overflowing when the offcanvas is hidden
stickyTop.style.overflow = "hidden";
});
</script>
<!-- JavaScript to control scroll behavior and audio playback -->
<script>
// Select the root element, the audio icon wrapper, the icon inside the wrapper, and the audio element
const rootElement = document.querySelector(":root");
const audioIconWrapper = document.querySelector(".audio-icon-wrapper");
const audioIcon = document.querySelector(".audio-icon-wrapper i");
const song = document.querySelector("#song");
let isPlaying = false; // Variable to track whether the audio is playing or not
// Function to disable scrolling
function disableScroll() {
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
// Prevent scrolling by locking the scroll position
window.onscroll = function () {
window.scrollTo(scrollTop, scrollLeft);
};
// Set the scroll behavior to 'auto' to prevent smooth scrolling during the lock
rootElement.style.scrollBehavior = "auto";
}
// Function to enable scrolling
function enableScroll() {
window.onscroll = function () {}; // Unlock scrolling
rootElement.style.scrollBehavior = "smooth"; // Re-enable smooth scrolling
playAudio(); // Start playing the audio when scrolling is enabled
}
// Function to play audio and display the audio icon
function playAudio() {
song.volume = 0.1; // Set the audio volume to 10%
audioIconWrapper.style.display = "flex"; // Show the audio icon wrapper
song.play(); // Start playing the audio
isPlaying = true; // Update the state to indicate audio is playing
}
// Toggle audio playback when the audio icon is clicked
audioIconWrapper.onclick = function () {
if (isPlaying) {
song.pause(); // Pause the audio if it is playing
audioIcon.classList.remove("bi-disc"); // Remove disc icon
audioIcon.classList.add("bi-pause-circle"); // Show pause icon
} else {
song.play(); // Play the audio if it is paused
audioIcon.classList.add("bi-disc"); // Show disc icon
audioIcon.classList.remove("bi-pause-circle"); // Remove pause icon
}
isPlaying = !isPlaying; // Toggle the playing state
};
// Uncomment the following lines if you want to disable scroll until the audio starts playing
// if (!localStorage.getItem('opened')) {
// disableScroll();
// }
disableScroll(); // Initially disable scrolling
</script>
<!-- The user isn't redirected to the webapp after submit form -->
<script>
// Wait until the entire page is fully loaded
window.addEventListener("load", function () {
// Select the form element with the ID "my-form"
const form = document.getElementById("my-form");
// Add an event listener for the form's submit event
form.addEventListener("submit", function (e) {
// Prevent the form from submitting the usual way and reloading the page
e.preventDefault();
// Collect all form data into a FormData object
const data = new FormData(form);
// Get the URL from the form's action attribute
const action = e.target.action;
// Send the form data to the server using the fetch API
fetch(action, {
method: "POST", // Use the POST method for the request
body: data, // Send the form data in the request body
}).then(() => {
// Show an alert to the user once the form is successfully submitted
alert("Confirmation was successfully sent!");
});
});
});
</script>
</body>
</html>