Skip to content

Commit

Permalink
feat: add shadow effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Dec 29, 2024
1 parent c362da3 commit fa61650
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 30 deletions.
40 changes: 20 additions & 20 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,20 +85,20 @@ <h4 class="m-0 p-0 flex-grow-1 fw-bold">Undangan<i class="fa-solid fa-fire text-
<div class="pe-3">
<ul class="nav flex-column w-100 nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button class="btn-theme-dark nav-link w-100 text-start fw-semibold mb-1 rounded-4 active" data-bs-toggle="pill" data-bs-target="#pills-home" id="button-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
<button class="btn-theme-dark nav-link w-100 text-start fw-semibold mb-1 rounded-4 shadow-sm active" data-bs-toggle="pill" data-bs-target="#pills-home" id="button-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
<i class="fa-solid fa-house ms-3 me-2"></i>Home
</button>
</li>
<li class="nav-item" role="presentation">
<button class="btn-theme-dark nav-link w-100 text-start fw-semibold my-1 rounded-4" data-bs-toggle="pill" data-bs-target="#pills-setting" id="button-setting" type="button" role="tab" aria-controls="pills-setting" aria-selected="false">
<button class="btn-theme-dark nav-link w-100 text-start fw-semibold my-1 rounded-4 shadow-sm" data-bs-toggle="pill" data-bs-target="#pills-setting" id="button-setting" type="button" role="tab" aria-controls="pills-setting" aria-selected="false">
<i class="fa-solid fa-gear ms-3 me-2"></i>Setting
</button>
</li>
<li class="nav-item" role="presentation">
<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="admin.logout()">
<button class="btn-theme-dark logout nav-link w-100 text-start fw-semibold mt-1 rounded-4 shadow-sm" onclick="admin.logout()">
<i class="fa-solid fa-right-from-bracket ms-3 me-2"></i>Logout
</button>
</li>
Expand All @@ -118,10 +118,10 @@ <h4 class="m-0 p-0 flex-grow-1 fw-bold">Undangan<i class="fa-solid fa-fire text-
<div class="d-flex justify-content-between">
<h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-solid fa-home mx-2"></i>Home</h6>
<div class="d-flex">
<button class="btn btn-success rounded-3 btn-sm my-0 ms-0 me-2 pb-0" onclick="admin.download(this)" data-offline-disabled>
<button class="btn btn-success rounded-3 btn-sm shadow-sm my-0 ms-0 me-2 pb-0" onclick="admin.download(this)" data-offline-disabled>
<i class="fa-solid fa-download"></i><span class="d-none d-sm-inline ms-2">Download</span>
</button>
<button class="btn btn-secondary rounded-3 btn-sm m-0 pb-0" onclick="theme.change()">
<button class="btn btn-secondary rounded-3 btn-sm shadow-sm m-0 pb-0" onclick="theme.change()">
<i class="fa-solid fa-circle-half-stroke"></i><span class="d-none d-sm-inline ms-2">Theme</span>
</button>
</div>
Expand Down Expand Up @@ -226,7 +226,7 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli
<textarea class="form-control shadow-sm mb-3 rounded-4" id="form-comment" name="form-comment" rows="3" placeholder="Type to comment" data-offline-disabled></textarea>

<div class="d-flex justify-content-end mb-0">
<button onclick="comment.send(this)" class="btn btn-primary btn-sm rounded-4" style="font-size: 0.8rem;" data-offline-disabled><i class="fa-solid fa-paper-plane me-1"></i>Send</button>
<button onclick="comment.send(this)" class="btn btn-primary btn-sm rounded-4 shadow-sm" style="font-size: 0.8rem;" data-offline-disabled><i class="fa-solid fa-paper-plane me-1"></i>Send</button>
</div>
</div>

Expand All @@ -235,7 +235,7 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli

<!-- Pagination -->
<nav class="d-flex d-none justify-content-center py-3 mb-4" id="pagination">
<ul class="pagination mb-0">
<ul class="pagination mb-2 shadow-sm rounded-4">
<li class="page-item disabled" id="previous">
<button class="page-link rounded-start-4" onclick="pagination.previous(this)" data-offline-disabled>
<i class="fa-solid fa-circle-left me-1"></i>Prev
Expand Down Expand Up @@ -272,12 +272,12 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-person me-1"></i>Name</p>
<form>
<div class="mb-3">
<input type="text" class="form-control form-control-sm rounded-4" id="form-name" name="form-name" oninput="admin.enableButtonName()" data-offline-disabled>
<input type="text" class="form-control form-control-sm rounded-4 shadow-sm" id="form-name" name="form-name" oninput="admin.enableButtonName()" data-offline-disabled>
</div>
</form>

<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary rounded-4" id="button-change-name" onclick="admin.changeName(this)" disabled data-offline-disabled>Change</button>
<button type="button" class="btn btn-sm btn-primary rounded-4 shadow-sm" id="button-change-name" onclick="admin.changeName(this)" disabled data-offline-disabled>Change</button>
</div>
</div>

Expand All @@ -286,12 +286,12 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-key me-1"></i>Access Key</p>

<div class="input-group input-group-sm rounded-4 mb-3">
<input type="text" class="form-control form-control-sm rounded-start-4" id="dashboard-accesskey" readonly>
<button class="btn btn-sm btn-outline-secondary rounded-end-4" type="button" data-copy="" onclick="util.copy(this)" id="button-copy-accesskey" data-offline-disabled><i class="fa-solid fa-copy"></i></button>
<input type="text" class="form-control form-control-sm rounded-start-4 shadow-sm" id="dashboard-accesskey" readonly>
<button class="btn btn-sm btn-outline-secondary rounded-end-4 shadow-sm" type="button" data-copy="" onclick="util.copy(this)" id="button-copy-accesskey" data-offline-disabled><i class="fa-solid fa-copy"></i></button>
</div>

<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary rounded-4" onclick="admin.regenerate(this)" data-offline-disabled>Regenerate</button>
<button type="button" class="btn btn-sm btn-primary rounded-4 shadow-sm" onclick="admin.regenerate(this)" data-offline-disabled>Regenerate</button>
</div>
</div>

Expand All @@ -300,19 +300,19 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-sliders me-1"></i>Control</p>

<div class="form-check form-switch mb-1">
<input class="form-check-input" style="cursor:pointer;" type="checkbox" role="switch" id="filterBadWord" onchange="admin.changeFilterBadWord(this)" data-offline-disabled>
<input class="form-check-input shadow-sm" style="cursor:pointer;" type="checkbox" role="switch" id="filterBadWord" onchange="admin.changeFilterBadWord(this)" data-offline-disabled>
<label class="form-check-label" style="cursor:pointer;" for="filterBadWord">Filter Bad Word</label>
</div>
<div class="form-check form-switch mb-1">
<input class="form-check-input" style="cursor:pointer;" type="checkbox" role="switch" id="replyComment" onchange="admin.replyComment(this)" data-offline-disabled>
<input class="form-check-input shadow-sm" style="cursor:pointer;" type="checkbox" role="switch" id="replyComment" onchange="admin.replyComment(this)" data-offline-disabled>
<label class="form-check-label" style="cursor:pointer;" for="replyComment">Can Reply Comment</label>
</div>
<div class="form-check form-switch mb-1">
<input class="form-check-input" style="cursor:pointer;" type="checkbox" role="switch" id="editComment" onchange="admin.editComment(this)" data-offline-disabled>
<input class="form-check-input shadow-sm" style="cursor:pointer;" type="checkbox" role="switch" id="editComment" onchange="admin.editComment(this)" data-offline-disabled>
<label class="form-check-label" style="cursor:pointer;" for="editComment">Can Edit Comment</label>
</div>
<div class="form-check form-switch mb-1">
<input class="form-check-input" style="cursor:pointer;" type="checkbox" role="switch" id="deleteComment" onchange="admin.deleteComment(this)" data-offline-disabled>
<input class="form-check-input shadow-sm" style="cursor:pointer;" type="checkbox" role="switch" id="deleteComment" onchange="admin.deleteComment(this)" data-offline-disabled>
<label class="form-check-label" style="cursor:pointer;" for="deleteComment">Can Delete Comment</label>
</div>
</div>
Expand All @@ -323,22 +323,22 @@ <h6 class="fw-semibold m-1" style="color: var(--bs-gray-900);"><i class="fa-soli
<form>
<input hidden type="text" name="username" autocomplete="username" value="...">
<div class="my-2">
<input type="password" class="form-control form-control-sm rounded-4" id="old_password" name="old_password" placeholder="Old Password" autocomplete="current-password" data-offline-disabled>
<input type="password" class="form-control form-control-sm rounded-4 shadow-sm" id="old_password" name="old_password" placeholder="Old Password" autocomplete="current-password" data-offline-disabled>
</div>
<div class="mb-3">
<input type="password" class="form-control form-control-sm rounded-4" id="new_password" name="new_password" oninput="admin.enableButtonPassword()" placeholder="New Password" autocomplete="new-password" data-offline-disabled>
<input type="password" class="form-control form-control-sm rounded-4 shadow-sm" id="new_password" name="new_password" oninput="admin.enableButtonPassword()" placeholder="New Password" autocomplete="new-password" data-offline-disabled>
</div>
</form>

<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary rounded-4" id="button-change-password" onclick="admin.changePassword(this)" disabled data-offline-disabled>Change</button>
<button type="button" class="btn btn-sm btn-primary rounded-4 shadow-sm" id="button-change-password" onclick="admin.changePassword(this)" disabled data-offline-disabled>Change</button>
</div>
</div>

<!-- 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="admin.logout()" data-offline-disabled>
<button type="button" class="btn btn-danger btn-sm w-100 text-center fw-semibold rounded-4 shadow-sm" onclick="admin.logout()" data-offline-disabled>
<i class="fa-solid fa-right-from-bracket me-2"></i>Logout
</button>
</div>
Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ <h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
<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>
<button class="btn btn-outline-dark btn-sm shadow-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>
Expand All @@ -402,7 +402,7 @@ <h2 class="font-esthetic pt-2 mb-4" style="font-size: 2.5rem;">Love Gift</h2>
<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>
<button class="btn btn-outline-dark btn-sm shadow-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>
Expand Down Expand Up @@ -456,7 +456,7 @@ <h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.5rem;">Ucapa

<!-- Pagination -->
<nav class="d-flex d-none justify-content-center mt-1 mb-0" id="pagination">
<ul class="pagination mb-0">
<ul class="pagination mb-2 shadow-sm rounded-4">
<li class="page-item disabled" id="previous">
<button class="page-link rounded-start-4" onclick="pagination.previous(this)" data-offline-disabled>
<i class="fa-solid fa-circle-left me-1"></i>Prev
Expand Down Expand Up @@ -520,12 +520,12 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
</div>

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

<!-- Audio Button -->
<button type="button" id="button-music" style="bottom: 9vh;" class="btn bg-dark border btn-sm rounded-circle btn-float position-fixed" data-url="./assets/music/sound.mp3" data-offline-disabled>
<button type="button" id="button-music" style="bottom: 9vh;" class="btn bg-dark border btn-sm rounded-circle btn-float position-fixed shadow-sm" data-url="./assets/music/sound.mp3" data-offline-disabled>
<i class="fa-solid fa-circle-pause spin-button"></i>
</button>

Expand Down
Loading

0 comments on commit fa61650

Please sign in to comment.