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 Oct 27, 2024
1 parent 28147f0 commit 681c8d6
Show file tree
Hide file tree
Showing 20 changed files with 195 additions and 192 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@

## Demo

<https://ulems.my.id?to=Teman+teman+semua>
[https://ulems.my.id?to=Teman+teman+semua](https://ulems.my.id?to=Teman+teman+semua)


## Deployment API

Expand Down
21 changes: 7 additions & 14 deletions css/animation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@
.mouse-animation>.scroll-animation {
width: 0.25rem;
height: 0.625rem;
border-radius: 25%;
background-color: #808080;
animation-name: scroll;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background-color: rgb(192, 192, 192);
animation: scroll 3s linear infinite;
}

.mouse-animation {
height: 2rem;
box-sizing: content-box;
}

@keyframes spin-icon {
Expand All @@ -48,12 +49,4 @@

.animate-love {
animation: love 5s ease-in-out infinite;
}

.mouse-animation {
padding: 0.25rem 0.625rem;
height: 2rem;
border-radius: 1.4rem;
opacity: 0.75;
box-sizing: content-box;
}
24 changes: 5 additions & 19 deletions css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,21 @@
font-family: 'Noto Naskh Arabic', serif !important;
}

.img-crop {
.img-center-crop {
width: 15rem;
height: 15rem;
position: relative;
overflow: hidden;
border-radius: 50%;
}

.img-crop>img {
display: inline;
margin: 0 auto;
height: auto;
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.btn-music {
position: fixed;
bottom: 9vh !important;
right: 2vh !important;
z-index: 1055 !important;
}

.btn-theme {
position: fixed;
bottom: 15vh !important;
right: 2vh !important;
z-index: 1055 !important;
Expand Down Expand Up @@ -69,13 +60,8 @@
}

.bg-cover-home {
position: absolute;
opacity: 0.2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100vw;
width: 100%;
object-fit: cover;
mask-image: linear-gradient(to bottom, black, black, black, black, black, transparent);
}
4 changes: 0 additions & 4 deletions css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,4 @@ svg>path {

.bg-theme-dark {
background-color: var(--bs-gray-800);
}

.card-body {
overflow-wrap: break-word !important;
}
7 changes: 3 additions & 4 deletions css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,19 @@
}

::-webkit-scrollbar-thumb {
background-color: #d6dee1;
background-color: rgba(192, 192, 192, 0.8);
border-radius: 1rem;
border: 0.3rem solid transparent;
border: 0.25rem solid transparent;
background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
background-color: rgba(192, 192, 192, 1);
}

@media screen and (width <=767px) {
html {
scrollbar-width: none !important;
width: 100%;
}
}

Expand Down
18 changes: 9 additions & 9 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@
<nav class="navbar bg-light navbar-expand fixed-bottom rounded-top-4 border-top d-md-none d-lg-none d-xl-none p-0">
<ul class="navbar-nav nav-justified w-100 align-items-center">
<li class="nav-item">
<button class="nav-link text-center active" onclick="navbar.buttonNavHome(this)" id="button-mobile-home">
<button class="nav-link text-center active" onclick="admin.buttonNavHome(this)" id="button-mobile-home">
<i class="fa-solid fa-house"></i>
<span class="d-block" style="font-size: 0.7rem;">Home</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link text-center" onclick="navbar.buttonNavSetting(this)" id="button-mobile-setting">
<button class="nav-link text-center" onclick="admin.buttonNavSetting(this)" id="button-mobile-setting">
<i class="fa-solid fa-gear"></i>
<span class="d-block" style="font-size: 0.7rem;">Setting</span>
</button>
Expand Down Expand Up @@ -97,7 +97,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
<hr class="my-2">
</li>
<li class="nav-item" role="presentation">
<button class="btn-theme-dark logout nav-link w-100 text-start fw-semibold mt-1 rounded-4" onclick="session.logout()">
<button class="btn-theme-dark logout nav-link w-100 text-start fw-semibold mt-1 rounded-4" onclick="admin.logout()">
<i class="fa-solid fa-right-from-bracket ms-3 me-2"></i>Logout
</button>
</li>
Expand Down Expand Up @@ -125,7 +125,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
<!-- Stats -->
<div class="row">
<div class="col col-xl-3 col-6 mb-3">
<div class="card-body rounded-4 shadow p-3 border-0" style="background: #8D9EFF;">
<div class="rounded-4 shadow p-3 border-0" style="background: #8D9EFF;">
<div class="row align-items-center" style="color: var(--bs-gray-100);">
<div class="col-9">
<p class="fw-bold m-0 p-0">Comments</p>
Expand All @@ -147,7 +147,7 @@ <h6 class="fw-bold m-0 p-0" id="count-comment">
</div>
</div>
<div class="col col-xl-3 col-6 mb-3">
<div class="card-body rounded-4 shadow p-3 border-0" style="background: #8D72E1;">
<div class="rounded-4 shadow p-3 border-0" style="background: #8D72E1;">
<div class="row align-items-center" style="color: var(--bs-gray-100);">
<div class="col-9">
<p class="fw-bold m-0 p-0">Present</p>
Expand All @@ -169,7 +169,7 @@ <h6 class="fw-bold m-0 p-0" id="count-present">
</div>
</div>
<div class="col col-xl-3 col-6 mb-3">
<div class="card-body rounded-4 shadow p-3 border-0" style="background: #7766CF;">
<div class="rounded-4 shadow p-3 border-0" style="background: #7766CF;">
<div class="row align-items-center" style="color: var(--bs-gray-100);">
<div class="col-9">
<p class="fw-bold m-0 p-0">Absent</p>
Expand All @@ -191,7 +191,7 @@ <h6 class="fw-bold m-0 p-0" id="count-absent">
</div>
</div>
<div class="col col-xl-3 col-6 mb-3">
<div class="card-body rounded-4 shadow p-3 border-0" style="background: #6C4AB6;">
<div class="rounded-4 shadow p-3 border-0" style="background: #6C4AB6;">
<div class="row align-items-center" style="color: var(--bs-gray-100);">
<div class="col-9">
<p class="fw-bold m-0 p-0">Likes</p>
Expand Down Expand Up @@ -336,7 +336,7 @@ <h6 class="fw-bold m-0 p-0" id="count-like">
<!-- Logout -->
<div class="d-md-none d-lg-none d-xl-none">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<button type="button" class="btn btn-danger btn-sm w-100 text-center fw-semibold rounded-4" onclick="session.logout()">
<button type="button" class="btn btn-danger btn-sm w-100 text-center fw-semibold rounded-4" onclick="admin.logout()">
<i class="fa-solid fa-right-from-bracket me-2"></i>Logout
</button>
</div>
Expand Down Expand Up @@ -378,7 +378,7 @@ <h6 class="fw-bold m-0 p-0" id="count-like">
<input type="password" class="form-control rounded-4" id="loginPassword" autocomplete="current-password">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary rounded-4" onclick="session.login(this)"><i class="fa-solid fa-right-to-bracket me-1"></i>Login</button>
<button type="submit" class="btn btn-primary rounded-4" onclick="admin.login(this)"><i class="fa-solid fa-right-to-bracket me-1"></i>Login</button>
</div>
</form>
</div>
Expand Down
68 changes: 28 additions & 40 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,15 +113,12 @@

<!-- Home -->
<section id="home" class="position-relative overflow-hidden p-0 m-0">
<img src="./assets/images/bg.png" alt="bg" class="bg-cover-home">
<img src="./assets/images/bg.png" alt="bg" class="position-absolute opacity-25 top-50 start-50 translate-middle bg-cover-home">

<div class="position-relative text-center pt-4 pb-0 px-0 m-0">
<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">
<img src="./assets/images/bg.png" alt="bg" onclick="util.modal(this)">
</div>
</div>
<img src="./assets/images/bg.png" alt="bg" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">

<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<p class="mb-0" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
Expand All @@ -131,8 +128,8 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
</a>

<div class="d-flex justify-content-center align-items-center mt-4 mb-2">
<div class="mouse-animation border border-2">
<div class="scroll-animation"></div>
<div class="mouse-animation border border-2 rounded-5 px-2 py-1">
<div class="scroll-animation rounded-4"></div>
</div>
</div>

Expand Down Expand Up @@ -175,9 +172,7 @@ <h2 class="font-esthetic py-4 px-2" style="font-size: 2rem">Assalamualaikum Wara
<div class="overflow-x-hidden">

<div data-aos="fade-right" data-aos-duration="2000">
<div class="img-crop border border-3 border-light shadow my-4 mx-auto">
<img src="./assets/images/cowo.png" alt="cowo" onclick="util.modal(this)">
</div>
<img src="./assets/images/cowo.png" alt="cowo" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic" style="font-size: 2.5rem;">Wahyu Siapa</h2>
<p class="mt-3 mb-0" style="font-size: 1.25rem;">Putra</p>
<p class="mb-0">Bapak ... &amp; Ibu ...</p>
Expand All @@ -204,9 +199,7 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&</h2>
</div>

<div data-aos="fade-left" data-aos-duration="2000">
<div class="img-crop border border-3 border-light shadow my-4 mx-auto">
<img src="./assets/images/cewe.png" alt="cewe" onclick="util.modal(this)">
</div>
<img src="./assets/images/cewe.png" alt="cewe" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic" style="font-size: 2.5rem;">Riski Siapa</h2>
<p class="mt-3 mb-0" style="font-size: 1.25rem;">Putri</p>
<p class="mb-0">Bapak ... &amp; Ibu ...</p>
Expand Down Expand Up @@ -329,7 +322,7 @@ <h2 class="font-esthetic" style="font-size: 2rem;">Resepsi</h2>
<!-- Gallery -->
<section class="dark-section bg-black" id="gallery">
<div class="container pb-5 pt-4">
<div class="card-body border rounded-5 shadow p-3">
<div class="border rounded-5 shadow p-3">

<h2 class="font-esthetic text-center py-3" data-aos="fade-down" data-aos-duration="1500" style="font-size: 2.5rem;">Galeri</h2>

Expand Down Expand Up @@ -410,31 +403,28 @@ <h2 class="font-esthetic mt-0 mb-3" style="font-size: 2.5rem;">Love Gift</h2>
<p class="mb-3" style="font-size: 0.95rem;">Tanpa mengurangi rasa hormat, bagi Anda yang ingin memberikan tanda kasih untuk kami, dapat melalui:</p>

<div class="overflow-x-hidden">
<div class="row row-cols-2">
<div class="border rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-down" data-aos-duration="1500">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bca">

<div class="col card-body border rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-down" data-aos-duration="1500">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Bank_Central_Asia.svg/1598px-Bank_Central_Asia.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bca">

<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>

<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Wahyu Siapa</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>

<div class="col card-body border rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-down" data-aos-duration="1500">
<img src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bni">
<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Wahyu Siapa</p>
</div>

<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>
<div class="border rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-down" data-aos-duration="1500">
<img src="https://upload.wikimedia.org/wikipedia/id/thumb/5/55/BNI_logo.svg/1024px-BNI_logo.svg.png" class="img-fluid" style="max-width: 9vh;" alt="bni">

<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Riski Siapa</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<p class="m-0 p-0" style="font-size: 0.95rem;">---- ---- ---- 4567</p>
<!-- Ubah juga data-copy sesuai dengan no rekening -->
<button class="btn btn-outline-dark btn-sm rounded-4" style="font-size: 0.75rem;" data-copy="1234567891234567" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
</div>

<p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Riski Siapa</p>
</div>
</div>
</div>
Expand All @@ -445,7 +435,7 @@ <h2 class="font-esthetic mt-0 mb-3" style="font-size: 2.5rem;">Love Gift</h2>
<section class="m-0 px-0 pb-0 pt-2" id="comment">
<div class="container">

<div class="card-body border rounded-4 shadow p-3">
<div class="border rounded-4 shadow p-3">
<h2 class="font-esthetic text-center mb-3" style="font-size: 2.5rem;">Ucapan &amp; Doa</h2>

<div class="mb-3">
Expand Down Expand Up @@ -551,9 +541,7 @@ <h2 class="font-arabic pt-4 px-2" style="font-size: 2rem;">اَلْحَمْدُ
<div class="text-center">
<h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">The Wedding Of</h2>

<div class="img-crop border border-3 border-light shadow mb-4 mx-auto">
<img src="./assets/images/bg.png" alt="background">
</div>
<img src="./assets/images/bg.png" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">

<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<div id="guest-name" data-message="Kepada Yth Bapak/Ibu/Saudara/i"></div>
Expand All @@ -566,12 +554,12 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
</div>

<!-- Theme Button -->
<button type="button" id="button-theme" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-theme" onclick="theme.change()">
<button type="button" id="button-theme" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-theme position-fixed" onclick="theme.change()">
<i class="fa-solid fa-circle-half-stroke"></i>
</button>

<!-- Audio Button -->
<button type="button" id="button-music" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-music" onclick="audio.button(this)" data-url="./assets/music/sound.mp3">
<button type="button" id="button-music" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-music position-fixed" onclick="audio.button()" data-url="./assets/music/sound.mp3">
<i class="fa-solid fa-circle-pause spin-button"></i>
</button>

Expand Down
Loading

0 comments on commit 681c8d6

Please sign in to comment.