Skip to content

Commit

Permalink
feat: refactor code
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Aug 18, 2024
1 parent de3918c commit cf8cb14
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 33 deletions.
52 changes: 21 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@
<link rel="stylesheet" href="./css/app.css">
</head>

<!-- If not using comments, you can remove the data-key and data-url attributes -->
<body data-key="bfb9cfea33ab7ae21a315fbd6f065a815d3e20ff2f007aa2ca" data-url="https://api.ulems.my.id/" style="overflow-y: hidden;">
<!-- If not using comments, you can remove the data-key and data-url attributes -->

<!-- Navbar Bottom -->
<nav class="navbar bg-dark navbar-expand fixed-bottom rounded-top-4 p-0" id="navbar-menu">
Expand All @@ -80,13 +80,13 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mempelai">
<a class="nav-link" href="#bride">
<i class="fa-solid fa-user-group"></i>
<span class="d-block" style="font-size: 0.7rem;">Mempelai</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tanggal">
<a class="nav-link" href="#wedding-date">
<i class="fa-solid fa-calendar-check"></i>
<span class="d-block" style="font-size: 0.7rem;">Tanggal</span>
</a>
Expand All @@ -113,7 +113,7 @@
<section id="home" class="p-0 m-0" style="background-image: url('./assets/images/bg.png'); background-size: cover; background-position: center;">
<div class="text-center pt-4 pb-0 px-0 m-0 bg-cover-black">

<h2 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Pernikahan</h2>
<h1 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Pernikahan</h1>

<div class="py-4">
<div class="img-crop border border-3 border-light shadow mx-auto">
Expand Down Expand Up @@ -143,8 +143,8 @@ <h2 class="font-esthetic my-4" style="font-size: 3rem;">Wahyu &amp; Riski</h2>
<path fill="currentColor" fill-opacity="1" d="M0,160L48,144C96,128,192,96,288,106.7C384,117,480,171,576,165.3C672,160,768,96,864,96C960,96,1056,160,1152,154.7C1248,149,1344,75,1392,37.3L1440,0L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>

<!-- Mempelai -->
<section class="dark-section bg-black" id="mempelai">
<!-- Bride -->
<section class="dark-section bg-black" id="bride">

<div class="text-center">
<h2 class="font-arabic py-4 px-2" style="font-size: 2rem">بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</h2>
Expand All @@ -160,9 +160,7 @@ <h2 class="font-arabic py-4 px-2" style="font-size: 2rem">بِسْمِ اللّ

<h2 class="font-esthetic py-4 px-2" style="font-size: 2rem">Assalamualaikum Warahmatullahi Wabarakatuh</h2>

<p class="pb-3 px-3">
Tanpa mengurangi rasa hormat, kami mengundang Bapak/Ibu/Saudara/i serta kerabat sekalian untuk menghadiri acara pernikahan kami:
</p>
<p class="pb-3 px-3">Tanpa mengurangi rasa hormat, kami mengundang Bapak/Ibu/Saudara/i serta kerabat sekalian untuk menghadiri acara pernikahan kami:</p>

<!-- Love animation -->
<div class="position-relative">
Expand Down Expand Up @@ -235,9 +233,7 @@ <h2 class="font-esthetic" style="font-size: 3rem;">Riski Siapa</h2>
<div class="container">
<div class="text-center" data-aos="fade-up" data-aos-duration="2000">

<h1 class="font-esthetic mt-0 mb-3" style="font-size: 2rem">
Allah Subhanahu Wa Ta'ala berfirman
</h1>
<h2 class="font-esthetic mt-0 mb-3" style="font-size: 2rem">Allah Subhanahu Wa Ta'ala berfirman</h2>

<p style="font-size: 0.9rem;" class="px-2">
Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari
Expand All @@ -264,15 +260,15 @@ <h1 class="font-esthetic mt-0 mb-3" style="font-size: 2rem">
<path fill="currentColor" fill-opacity="1" d="M0,96L30,106.7C60,117,120,139,180,154.7C240,171,300,181,360,186.7C420,192,480,192,540,181.3C600,171,660,149,720,154.7C780,160,840,192,900,208C960,224,1020,224,1080,208C1140,192,1200,160,1260,138.7C1320,117,1380,107,1410,101.3L1440,96L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
</svg>

<!-- Tanggal -->
<section class="dark-section bg-black" id="tanggal">
<!-- Wedding Date -->
<section class="dark-section bg-black" id="wedding-date">

<div class="container">
<div class="text-center">

<h2 class="font-esthetic py-3" style="font-size: 2rem;">Waktu Menuju Acara</h2>
<div class="border rounded-pill shadow py-2 px-4 mx-2 mb-4">

<div class="border rounded-pill shadow py-2 px-4 mx-2 mb-4">
<!-- Ganti waktunya pada data-waktu (sesuai format tersebut) -->
<div class="row justify-content-center" data-time="2024-01-01 00:00:00" id="count-down">
<div class="col-3 p-1">
Expand All @@ -290,9 +286,7 @@ <h2 class="d-inline m-0 p-0" id="second">0</h2><small class="ms-1 me-0 my-0 p-0
</div>
</div>

<p style="font-size: 0.9rem;" class="mt-4 py-2">
Dengan memohon rahmat dan ridho Allah Subhanahu Wa Ta'ala, insyaAllah kami akan menyelenggarakan acara:
</p>
<p style="font-size: 0.9rem;" class="mt-4 py-2">Dengan memohon rahmat dan ridho Allah Subhanahu Wa Ta'ala, insyaAllah kami akan menyelenggarakan acara:</p>

<!-- Love animation -->
<div class="position-relative">
Expand All @@ -316,12 +310,8 @@ <h2 class="font-esthetic" style="font-size: 2rem;">Resepsi</h2>
</div>

<div class="py-2" data-aos="fade-up" data-aos-duration="1500">
<a href="https://goo.gl/maps/ALZR6FJZU3kxVwN86" target="_blank" class="btn btn-outline-light btn-sm rounded-pill shadow-sm mb-2 px-3">
<i class="fa-solid fa-map-location-dot me-2"></i>Lihat Google Maps
</a>
<p class="mb-0 mt-1 mx-1 pb-4" style="font-size: 0.9rem;">
RT 10 RW 02, Desa Pajerukan, Kec. Kalibagor, Kab. Banyumas, Jawa Tengah 53191
</p>
<a href="https://goo.gl/maps/ALZR6FJZU3kxVwN86" target="_blank" class="btn btn-outline-light btn-sm rounded-pill shadow-sm mb-2 px-3"><i class="fa-solid fa-map-location-dot me-2"></i>Lihat Google Maps</a>
<p class="mb-0 mt-1 mx-1 pb-4" style="font-size: 0.9rem;">RT 10 RW 02, Desa Pajerukan, Kec. Kalibagor, Kab. Banyumas, Jawa Tengah 53191</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -353,13 +343,13 @@ <h2 class="font-esthetic text-center py-3" data-aos="fade-down" data-aos-duratio

<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="https://picsum.photos/1280/720?random=1" alt="gambar 1" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=2" alt="gambar 2" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=3" alt="gambar 3" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="util.modal(this)">
</div>
</div>

Expand All @@ -383,13 +373,13 @@ <h2 class="font-esthetic text-center py-3" data-aos="fade-down" data-aos-duratio

<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="https://picsum.photos/1280/720?random=4" alt="gambar 4" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=5" alt="gambar 5" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=6" alt="gambar 6" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="util.modal(this)">
</div>
</div>

Expand Down Expand Up @@ -520,7 +510,7 @@ <h2 class="font-esthetic text-center mb-3" style="font-size: 3rem;">Ucapan &amp;
</svg>
</main>

<!-- Footer Undangan -->
<!-- Footer -->
<footer class="bg-black">
<div class="container">
<div class="text-center">
Expand Down
4 changes: 2 additions & 2 deletions js/pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const pagination = (() => {
const buttonAction = async (button, type) => {
let tmp = button.innerHTML;
button.disabled = true;
button.innerHTML = `${type == 'Next' ? type : ''}<span class="spinner-border spinner-border-sm mx-1"></span>${type == 'Previous' ? type : ''}`;
button.innerHTML = `${type == 'Next' ? type : ''}<span class="spinner-border spinner-border-sm mx-1"></span>${type == 'Prev' ? type : ''}`;

await comment.comment();
document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
Expand Down Expand Up @@ -65,7 +65,7 @@ export const pagination = (() => {
pageNow -= perPage;
disabledNext();

await buttonAction(button, 'Previous');
await buttonAction(button, 'Prev');
page.innerText = parseInt(page.innerText) - 1;
buttonNext.classList.remove('disabled');

Expand Down

0 comments on commit cf8cb14

Please sign in to comment.