KoPKB/erahn-click
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update color css, fix profile ui

Browse Source
This commit is contained in:
Amir Hamzan
2021-11-18 12:14:00 +08:00
parent 50bf544e2d
commit cc93517b9c
3 changed files with 335 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/material-kit.css
Vendored
+100 -100
View File
@@ -27,7 +27,7 @@
--bs-gray-700: #495057; --bs-gray-700: #495057;
--bs-gray-800: #343a40; --bs-gray-800: #343a40;
--bs-gray-900: #212529; --bs-gray-900: #212529;
--bs-primary: #e91e63; --bs-primary: #005CA7;
--bs-secondary: #7b809a; --bs-secondary: #7b809a;
--bs-success: #4CAF50; --bs-success: #4CAF50;
--bs-info: #1A73E8; --bs-info: #1A73E8;
@@ -36,7 +36,7 @@
--bs-light: #f0f2f5; --bs-light: #f0f2f5;
--bs-dark: #344767; --bs-dark: #344767;
--bs-white: #fff; --bs-white: #fff;
--bs-primary-rgb: 233, 30, 99; --bs-primary-rgb: 0, 92, 167;
--bs-secondary-rgb: , 128, 154; --bs-secondary-rgb: , 128, 154;
--bs-success-rgb: 76, 175, 80; --bs-success-rgb: 76, 175, 80;
--bs-info-rgb: 26, 115, 232; --bs-info-rgb: 26, 115, 232;
@@ -261,12 +261,12 @@ sup {
} }
a { a {
color: #e91e63; color: #005CA7;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #e91e63; color: #005CA7;
text-decoration: none; text-decoration: none;
} }
@@ -3001,16 +3001,16 @@ textarea.form-control-lg {
} }
.form-check-input:checked[type="checkbox"] { .form-check-input:checked[type="checkbox"] {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
} }
.form-check-input:checked[type="radio"] { .form-check-input:checked[type="radio"] {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
} }
.form-check-input[type="checkbox"]:indeterminate { .form-check-input[type="checkbox"]:indeterminate {
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
} }
@@ -3099,7 +3099,7 @@ textarea.form-control-lg {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: -0.25rem; margin-top: -0.25rem;
background-color: #e91e63; background-color: #005CA7;
border: 0; border: 0;
border-radius: 1rem; border-radius: 1rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3129,7 +3129,7 @@ textarea.form-control-lg {
.form-range::-moz-range-thumb { .form-range::-moz-range-thumb {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
background-color: #e91e63; background-color: #005CA7;
border: 0; border: 0;
border-radius: 1rem; border-radius: 1rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3580,21 +3580,21 @@ fieldset:disabled .btn {
.btn-primary { .btn-primary {
color: #000; color: #000;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.btn-primary:hover { .btn-primary:hover {
color: #000; color: #000;
background-color: #ec407a; background-color: #0062B3;
border-color: #eb3573; border-color: #004D8C;
} }
.btn-check:focus+.btn-primary, .btn-check:focus+.btn-primary,
.btn-primary:focus { .btn-primary:focus {
color: #000; color: #000;
background-color: #ec407a; background-color: #0062B3;
border-color: #eb3573; border-color: #004D8C;
box-shadow: 0 0 0 0.2rem rgba(198, 26, 84, 0.5); box-shadow: 0 0 0 0.2rem rgba(198, 26, 84, 0.5);
} }
@@ -3604,8 +3604,8 @@ fieldset:disabled .btn {
.btn-primary.active, .btn-primary.active,
.show>.btn-primary.dropdown-toggle { .show>.btn-primary.dropdown-toggle {
color: #000; color: #000;
background-color: #ed4b82; background-color: #0085F2;
border-color: #eb3573; border-color: #004D8C;
} }
.btn-check:checked+.btn-primary:focus, .btn-check:checked+.btn-primary:focus,
@@ -3619,8 +3619,8 @@ fieldset:disabled .btn {
.btn-primary:disabled, .btn-primary:disabled,
.btn-primary.disabled { .btn-primary.disabled {
color: #000; color: #000;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.btn-secondary { .btn-secondary {
@@ -3984,19 +3984,19 @@ fieldset:disabled .btn {
} }
.btn-outline-primary { .btn-outline-primary {
color: #e91e63; color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.btn-outline-primary:hover { .btn-outline-primary:hover {
color: #000; color: #000;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.btn-check:focus+.btn-outline-primary, .btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus { .btn-outline-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5); box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.5);
} }
.btn-check:checked+.btn-outline-primary, .btn-check:checked+.btn-outline-primary,
@@ -4005,8 +4005,8 @@ fieldset:disabled .btn {
.btn-outline-primary.active, .btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show { .btn-outline-primary.dropdown-toggle.show {
color: #000; color: #000;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.btn-check:checked+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus,
@@ -4014,12 +4014,12 @@ fieldset:disabled .btn {
.btn-outline-primary:active:focus, .btn-outline-primary:active:focus,
.btn-outline-primary.active:focus, .btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus { .btn-outline-primary.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5); box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.5);
} }
.btn-outline-primary:disabled, .btn-outline-primary:disabled,
.btn-outline-primary.disabled { .btn-outline-primary.disabled {
color: #e91e63; color: #005CA7;
background-color: transparent; background-color: transparent;
} }
@@ -4345,12 +4345,12 @@ fieldset:disabled .btn {
.btn-link { .btn-link {
font-weight: 400; font-weight: 400;
color: #e91e63; color: #005CA7;
text-decoration: none; text-decoration: none;
} }
.btn-link:hover { .btn-link:hover {
color: #e91e63; color: #005CA7;
text-decoration: none; text-decoration: none;
} }
@@ -4892,7 +4892,7 @@ fieldset:disabled .btn {
.nav-link { .nav-link {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: #e91e63; color: #005CA7;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
} }
@@ -4904,7 +4904,7 @@ fieldset:disabled .btn {
.nav-link:hover, .nav-link:hover,
.nav-link:focus { .nav-link:focus {
color: #e91e63; color: #005CA7;
} }
.nav-link.disabled { .nav-link.disabled {
@@ -5899,7 +5899,7 @@ fieldset:disabled .btn {
.page-link { .page-link {
position: relative; position: relative;
display: block; display: block;
color: #e91e63; color: #005CA7;
background-color: #fff; background-color: #fff;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -5913,17 +5913,17 @@ fieldset:disabled .btn {
.page-link:hover { .page-link:hover {
z-index: 2; z-index: 2;
color: #e91e63; color: #005CA7;
background-color: #f0f2f5; background-color: #f0f2f5;
border-color: #dee2e6; border-color: #dee2e6;
} }
.page-link:focus { .page-link:focus {
z-index: 3; z-index: 3;
color: #e91e63; color: #005CA7;
background-color: #f0f2f5; background-color: #f0f2f5;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.25);
} }
.page-item:not(:first-child) .page-link { .page-item:not(:first-child) .page-link {
@@ -5933,8 +5933,8 @@ fieldset:disabled .btn {
.page-item.active .page-link { .page-item.active .page-link {
z-index: 3; z-index: 3;
color: #fff; color: #fff;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
@@ -6151,7 +6151,7 @@ fieldset:disabled .btn {
color: #fff; color: #fff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: #e91e63; background-color: #005CA7;
transition: width 0.6s ease; transition: width 0.6s ease;
} }
@@ -6242,8 +6242,8 @@ fieldset:disabled .btn {
.list-group-item.active { .list-group-item.active {
z-index: 2; z-index: 2;
color: #fff; color: #fff;
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
} }
.list-group-item+.list-group-item { .list-group-item+.list-group-item {
@@ -6618,7 +6618,7 @@ fieldset:disabled .btn {
.btn-close:focus { .btn-close:focus {
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 92, 167, 0.25);
opacity: 1; opacity: 1;
} }
@@ -7730,12 +7730,12 @@ fieldset:disabled .btn {
} }
.link-primary { .link-primary {
color: #e91e63; color: #005CA7;
} }
.link-primary:hover, .link-primary:hover,
.link-primary:focus { .link-primary:focus {
color: #ed4b82; color: #0085F2;
} }
.link-secondary { .link-secondary {
@@ -8396,7 +8396,7 @@ fieldset:disabled .btn {
} }
.border-primary { .border-primary {
border-color: #e91e63 !important; border-color: #005CA7 !important;
} }
.border-secondary { .border-secondary {
@@ -10185,7 +10185,7 @@ fieldset:disabled .btn {
/* rtl:end:remove */ /* rtl:end:remove */
.text-primary { .text-primary {
color: #e91e63 !important; color: #005CA7 !important;
} }
.text-new { .text-new {
@@ -10229,7 +10229,7 @@ fieldset:disabled .btn {
} }
.text-rose { .text-rose {
color: #e91e63 !important; color: #005CA7 !important;
} }
.text-muted { .text-muted {
@@ -10265,7 +10265,7 @@ fieldset:disabled .btn {
} }
.bg-primary { .bg-primary {
background-color: #e91e63 !important; background-color: #005CA7 !important;
} }
.bg-secondary { .bg-secondary {
@@ -10478,7 +10478,7 @@ fieldset:disabled .btn {
} }
.shadow-primary { .shadow-primary {
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 92, 167, 0.4) !important;
} }
.shadow-secondary { .shadow-secondary {
@@ -10506,7 +10506,7 @@ fieldset:disabled .btn {
} }
.shadow-light { .shadow-light {
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 92, 167, 0.4) !important;
} }
.transform-scale-5 { .transform-scale-5 {
@@ -19847,7 +19847,7 @@ fieldset:disabled .btn {
*/ */
.alert-primary { .alert-primary {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
} }
.alert-secondary { .alert-secondary {
@@ -19982,7 +19982,7 @@ fieldset:disabled .btn {
} }
.badge.bg-primary { .badge.bg-primary {
background: #e91e63; background: #005CA7;
} }
.badge.bg-secondary { .badge.bg-secondary {
@@ -20134,19 +20134,19 @@ fieldset:disabled .btn {
.btn-primary, .btn-primary,
.btn.bg-gradient-primary { .btn.bg-gradient-primary {
box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15); box-shadow: 0 3px 3px 0 rgba(0, 92, 167, 0.15), 0 3px 1px -2px rgba(0, 92, 167, 0.2), 0 1px 5px 0 rgba(0, 92, 167, 0.15);
} }
.btn-primary:hover, .btn-primary:hover,
.btn.bg-gradient-primary:hover { .btn.bg-gradient-primary:hover {
background-color: #e91e63; background-color: #005CA7;
border-color: #e91e63; border-color: #005CA7;
box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.4), 0 4px 23px 0 rgba(233, 30, 99, 0.15), 0 8px 10px -5px rgba(233, 30, 99, 0.2); box-shadow: 0 14px 26px -12px rgba(0, 92, 167, 0.4), 0 4px 23px 0 rgba(0, 92, 167, 0.15), 0 8px 10px -5px rgba(0, 92, 167, 0.2);
} }
.btn-primary .btn.bg-outline-primary, .btn-primary .btn.bg-outline-primary,
.btn.bg-gradient-primary .btn.bg-outline-primary { .btn.bg-gradient-primary .btn.bg-outline-primary {
border: 1px solid #e91e63; border: 1px solid #005CA7;
} }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled).active,
@@ -20155,8 +20155,8 @@ fieldset:disabled .btn {
.btn.bg-gradient-primary:not(:disabled):not(.disabled).active, .btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
.btn.bg-gradient-primary:not(:disabled):not(.disabled):active, .btn.bg-gradient-primary:not(:disabled):not(.disabled):active,
.show>.btn.bg-gradient-primary.dropdown-toggle { .show>.btn.bg-gradient-primary.dropdown-toggle {
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
background-color: #e91e63; background-color: #005CA7;
} }
.btn-primary.focus, .btn-primary.focus,
@@ -20174,7 +20174,7 @@ fieldset:disabled .btn {
background-color: transparent; background-color: transparent;
opacity: .75; opacity: .75;
box-shadow: none; box-shadow: none;
color: #e91e63; color: #005CA7;
} }
.btn-secondary, .btn-secondary,
@@ -20766,7 +20766,7 @@ fieldset:disabled .btn {
} }
.card.card-background.card-background-mask-primary:after { .card.card-background.card-background-mask-primary:after {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
opacity: .85; opacity: .85;
} }
@@ -20925,7 +20925,7 @@ fieldset:disabled .btn {
top: 0; top: 0;
content: ""; content: "";
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: linear-gradient(195deg, #EC407A, #D81B60); background-image: linear-gradient(195deg, #0062B3, #003866);
opacity: .85; opacity: .85;
} }
@@ -21118,7 +21118,7 @@ fieldset:disabled .btn {
.dark-version .input-group.input-group-dynamic .form-control, .dark-version .input-group.input-group-dynamic .form-control,
.dark-version .input-group.input-group-static .form-control { .dark-version .input-group.input-group-static .form-control {
background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, 0.6) 1px, rgba(209, 209, 209, 0) 0) !important; background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, 0.6) 1px, rgba(209, 209, 209, 0) 0) !important;
background-size: 0 100%, 100% 100%; background-size: 0 100%, 100% 100%;
} }
@@ -21688,7 +21688,7 @@ body.dark-version {
.input-group.input-group-dynamic .form-control:focus, .input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-static .form-control, .input-group.input-group-static .form-control,
.input-group.input-group-static .form-control:focus { .input-group.input-group-static .form-control:focus {
background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0); background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
border-radius: 0 !important; border-radius: 0 !important;
} }
@@ -21700,7 +21700,7 @@ body.dark-version {
.input-group.input-group-dynamic .form-control[disabled], .input-group.input-group-dynamic .form-control[disabled],
.input-group.input-group-static .form-control[disabled] { .input-group.input-group-static .form-control[disabled] {
cursor: not-allowed; cursor: not-allowed;
background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #f0f2f5 1px, rgba(209, 209, 209, 0) 0) !important; background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #f0f2f5 1px, rgba(209, 209, 209, 0) 0) !important;
} }
.input-group.input-group-dynamic .input-group-text, .input-group.input-group-dynamic .input-group-text,
@@ -21722,7 +21722,7 @@ body.dark-version {
.input-group.input-group-dynamic.is-focused label, .input-group.input-group-dynamic.is-focused label,
.input-group.input-group-static.is-focused label { .input-group.input-group-static.is-focused label {
color: #e91e63; color: #005CA7;
} }
.input-group.input-group-dynamic.is-focused.is-valid label, .input-group.input-group-dynamic.is-focused.is-valid label,
@@ -21836,9 +21836,9 @@ body.dark-version {
.input-group.input-group-outline.is-focused .form-label+.form-control, .input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+.form-control { .input-group.input-group-outline.is-filled .form-label+.form-control {
border-color: #e91e63 !important; border-color: #005CA7 !important;
border-top-color: transparent !important; border-top-color: transparent !important;
box-shadow: inset 1px 0 #e91e63, inset -1px 0 #e91e63, inset 0 -1px #e91e63; box-shadow: inset 1px 0 #005CA7, inset -1px 0 #005CA7, inset 0 -1px #005CA7;
} }
.input-group.input-group-outline.is-focused .form-label, .input-group.input-group-outline.is-focused .form-label,
@@ -21846,7 +21846,7 @@ body.dark-version {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0.6875rem !important; font-size: 0.6875rem !important;
color: #e91e63; color: #005CA7;
display: flex; display: flex;
line-height: 1.25 !important; line-height: 1.25 !important;
} }
@@ -21862,8 +21862,8 @@ body.dark-version {
.input-group.input-group-outline.is-focused .form-label:after, .input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before, .input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after { .input-group.input-group-outline.is-filled .form-label:after {
border-top-color: #e91e63; border-top-color: #005CA7;
box-shadow: inset 0 1px #e91e63; box-shadow: inset 0 1px #005CA7;
} }
.input-group.input-group-outline.is-valid .form-control { .input-group.input-group-outline.is-valid .form-control {
@@ -21961,7 +21961,7 @@ body.dark-version {
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked, .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked,
.form-check:not(.form-switch) .form-check-input[type="radio"]:checked { .form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
border-color: #e91e63; border-color: #005CA7;
} }
.form-check:not(.form-switch) .form-check-input[type="checkbox"] { .form-check:not(.form-switch) .form-check-input[type="checkbox"] {
@@ -21984,7 +21984,7 @@ body.dark-version {
} }
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked { .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
background: #e91e63; background: #005CA7;
} }
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:after { .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:after {
@@ -22003,7 +22003,7 @@ body.dark-version {
width: 0.8375rem; width: 0.8375rem;
height: 0.8375rem; height: 0.8375rem;
border-radius: 50%; border-radius: 50%;
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%), var(--bs-gradient); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%), var(--bs-gradient);
opacity: 0; opacity: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -22164,7 +22164,7 @@ label,
} }
.bg-gradient-primary { .bg-gradient-primary {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
} }
.bg-gradient-secondary { .bg-gradient-secondary {
@@ -22196,7 +22196,7 @@ label,
} }
.bg-gradient-faded-primary { .bg-gradient-faded-primary {
background-image: radial-gradient(370px circle at 80% 50%, rgba(233, 30, 99, 0.6) 0, #c1134e 100%); background-image: radial-gradient(370px circle at 80% 50%, rgba(0, 92, 167, 0.6) 0, #c1134e 100%);
} }
.bg-gradient-faded-secondary { .bg-gradient-faded-secondary {
@@ -22232,7 +22232,7 @@ label,
} }
.bg-gradient-faded-primary-vertical { .bg-gradient-faded-primary-vertical {
background-image: radial-gradient(200px circle at 50% 70%, rgba(233, 30, 99, 0.3) 0, #e91e63 100%); background-image: radial-gradient(200px circle at 50% 70%, rgba(0, 92, 167, 0.3) 0, #005CA7 100%);
} }
.bg-gradient-faded-secondary-vertical { .bg-gradient-faded-secondary-vertical {
@@ -22417,11 +22417,11 @@ label,
} }
svg.text-primary .color-foreground { svg.text-primary .color-foreground {
fill: #EC407A; fill: #0062B3;
} }
svg.text-primary .color-background { svg.text-primary .color-background {
fill: #D81B60; fill: #003866;
} }
svg.text-secondary .color-foreground { svg.text-secondary .color-foreground {
@@ -22539,7 +22539,7 @@ svg.text-dark .color-background {
} }
*.gradient-animation { *.gradient-animation {
background: linear-gradient(-45deg, #49a3f1, #F44335, #fb8c00, #EC407A, #344767); background: linear-gradient(-45deg, #49a3f1, #F44335, #fb8c00, #0062B3, #344767);
background-size: 400% 400% !important; background-size: 400% 400% !important;
animation: gradient 10s ease infinite; animation: gradient 10s ease infinite;
} }
@@ -22785,7 +22785,7 @@ hr.horizontal.gray-light {
.choices .choices__list.choices__list--single, .choices .choices__list.choices__list--single,
.choices .choices__list.choices__list--single:focus { .choices .choices__list.choices__list--single:focus {
background-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0); background-image: linear-gradient(0deg, #005CA7 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
} }
.choices .choices__list.choices__list--dropdown { .choices .choices__list.choices__list--dropdown {
@@ -23112,7 +23112,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-xs .lavalamp-object { .navbar-vertical.navbar-expand-xs .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23209,7 +23209,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-sm .lavalamp-object { .navbar-vertical.navbar-expand-sm .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23307,7 +23307,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-md .lavalamp-object { .navbar-vertical.navbar-expand-md .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23405,7 +23405,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-lg .lavalamp-object { .navbar-vertical.navbar-expand-lg .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23503,7 +23503,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-xl .lavalamp-object { .navbar-vertical.navbar-expand-xl .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23601,7 +23601,7 @@ hr.horizontal.gray-light {
.navbar-vertical.navbar-expand-xxl .lavalamp-object { .navbar-vertical.navbar-expand-xxl .lavalamp-object {
width: calc(100% - 1rem) !important; width: calc(100% - 1rem) !important;
background: theme-color("primary"); background: theme-color("primary");
color: color-yiq(#e91e63); color: color-yiq(#005CA7);
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@@ -23627,7 +23627,7 @@ hr.horizontal.gray-light {
.sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active, .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
.sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active { .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active {
background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%); background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
} }
.sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active, .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
@@ -23637,7 +23637,7 @@ hr.horizontal.gray-light {
.sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active, .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
.sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active { .sidenav[data-color="primary"] .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%); background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
} }
.sidenav[data-color="secondary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active, .sidenav[data-color="secondary"] .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
@@ -23880,7 +23880,7 @@ hr.horizontal.gray-light {
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active, .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active,
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active { .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item.active .nav-link.active {
background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%); background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
} }
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active span, .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item.active .nav-link.active span,
@@ -23895,7 +23895,7 @@ hr.horizontal.gray-light {
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active, .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
.navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active { .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
background-image: linear-gradient(195deg, #e91e63 0%, #e91e63 100%); background-image: linear-gradient(195deg, #005CA7 0%, #005CA7 100%);
} }
.navbar-main { .navbar-main {
@@ -24206,8 +24206,8 @@ hr.horizontal.gray-light {
} }
.nav.nav-pills.nav-pills-primary .moving-tab .nav-link.active { .nav.nav-pills.nav-pills-primary .moving-tab .nav-link.active {
background: #EC407A; background: #0062B3;
color: #EC407A; color: #0062B3;
} }
.nav.nav-pills.nav-pills-info { .nav.nav-pills.nav-pills-info {
@@ -24327,7 +24327,7 @@ hr.horizontal.gray-light {
.pagination.pagination-primary .page-item.active>.page-link, .pagination.pagination-primary .page-item.active>.page-link,
.pagination.pagination-primary .page-item.active>.page-link:focus, .pagination.pagination-primary .page-item.active>.page-link:focus,
.pagination.pagination-primary .page-item.active>.page-link:hover { .pagination.pagination-primary .page-item.active>.page-link:hover {
background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); background-image: linear-gradient(195deg, #0062B3 0%, #003866 100%);
border: none; border: none;
} }
@@ -25530,7 +25530,7 @@ p {
} }
.text-gradient.text-primary { .text-gradient.text-primary {
background-image: linear-gradient(195deg, #EC407A, #D81B60); background-image: linear-gradient(195deg, #0062B3, #003866);
} }
.text-gradient.text-info { .text-gradient.text-info {
@@ -26587,7 +26587,7 @@ span.flatpickr-weekday {
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange { .flatpickr-calendar .flatpickr-day.endRange {
background: #e91e63 !important; background: #005CA7 !important;
color: #fff; color: #fff;
border: none; border: none;
} }
@@ -26619,7 +26619,7 @@ span.flatpickr-weekday {
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) { .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
box-shadow: -10px 0 0 #e91e63; box-shadow: -10px 0 0 #005CA7;
} }
/*! nouislider - 14.6.3 - 11/19/2020 */ /*! nouislider - 14.6.3 - 11/19/2020 */
@@ -26772,7 +26772,7 @@ span.flatpickr-weekday {
} }
.noUi-connect { .noUi-connect {
background: #e91e63; background: #005CA7;
} }
/* Handles and cursors; /* Handles and cursors;
@@ -26786,7 +26786,7 @@ span.flatpickr-weekday {
} }
.noUi-handle { .noUi-handle {
border: 1px solid #e91e63; border: 1px solid #005CA7;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
cursor: default; cursor: default;
resources/views/includes/main/header.blade.php
+112 -54
View File
@@ -1,60 +1,118 @@
<nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent "> <!-- <div class="container position-sticky z-index-sticky top-0">
<div class="container"> <div class="row">
<a class="navbar-brand text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom"> <div class="col-12">
MOHAMAD HAFIZUDDIN BIN HANAFI <nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent ">
</a> <div class="container">
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
<span class="navbar-toggler-icon mt-2"> MOHAMAD HAFIZUDDIN BIN HANAFI
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
<ul class="navbar-nav navbar-nav-hover ms-auto">
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
<i class="fa fa-list-alt me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
</a> </a>
</li> <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<li class="nav-item ms-lg-auto"> <span class="navbar-toggler-icon mt-2">
<a class="nav-link nav-link-icon me-2" href="#pemabayaran"> <span class="navbar-toggler-bar bar1"></span>
<i class="fa fa-money me-1"></i> <span class="navbar-toggler-bar bar2"></span>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p> <span class="navbar-toggler-bar bar3"></span>
</a> </span>
</li> </button>
<li class="nav-item ms-lg-auto"> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
<a class="nav-link nav-link-icon me-2" href="#tebus"> <ul class="navbar-nav navbar-nav-hover ms-auto">
<i class="fa fa-exchange me-1"></i> <li class="nav-item ms-lg-auto">
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tebus Marhun">Tebus</p> <a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
</a> <i class="fa fa-list-alt me-1"></i>
</li> <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
<li class="nav-item ms-lg-auto"> </a>
<a class="nav-link nav-link-icon me-2" href="#analisa"> </li>
<i class="fa fa-line-chart me-1"></i> <li class="nav-item ms-lg-auto">
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p> <a class="nav-link nav-link-icon me-2" href="#pemabayaran">
</a> <i class="fa fa-money me-1"></i>
</li> <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p>
<li class="nav-item ms-lg-auto"> </a>
<a class="nav-link nav-link-icon me-2" href="#analisa"> </li>
<i class="fa fa-microchip me-1"></i> <li class="nav-item ms-lg-auto">
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Function Seterusnya">Next</p> <a class="nav-link nav-link-icon me-2" href="#tebus">
</a> <i class="fa fa-exchange me-1"></i>
</li> <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tebus Marhun">Tebus</p>
<li class="nav-item ms-lg-auto"> </a>
<a class="nav-link nav-link-icon me-2" href="portalprofile"> </li>
<i class="fa fa-user me-1"></i> <li class="nav-item ms-lg-auto">
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Profil</p> <a class="nav-link nav-link-icon me-2" href="#analisa">
</a> <i class="fa fa-line-chart me-1"></i>
</li> <p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p>
<li class="nav-item my-auto ms-3 ms-lg-0"> </a>
<a href="loginportal" class="btn btn-sm bg-white mb-0 me-1 mt-2 mt-md-0">Log out</a> </li>
</li> <li class="nav-item ms-lg-auto">
</ul> <a class="nav-link nav-link-icon me-2" href="#analisa">
<i class="fa fa-microchip me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Function Seterusnya">Next</p>
</a>
</li>
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="portalprofile">
<i class="fa fa-user me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Profil</p>
</a>
</li>
<li class="nav-item my-auto ms-3 ms-lg-0">
<a href="loginportal" class="btn btn-sm bg-white mb-0 me-1 mt-2 mt-md-0">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
</div> </div>
</div> </div>
</nav> </div> -->
<div class="container position-sticky z-index-sticky top-0">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg blur border-radius-xl top-0 z-index-fixed shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
<div class="container-fluid px-0">
<a class="navbar-brand font-weight-bolder ms-sm-3" href="portalhome" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
CUSTOMER PORTAL
</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse pt-3 pb-2 py-lg-0 w-100" id="navigation">
<ul class="navbar-nav navbar-nav-hover ms-auto">
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="#rekodpembelian">
<i class="fa fa-list-alt me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Senarai Rekod Gadaian & Tebusan">Rekod Pembelian</p>
</a>
</li>
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="#pemabayaran">
<i class="fa fa-money me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transaksi Pembayaran Upah">Pembayaran</p>
</a>
</li>
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="#analisa">
<i class="fa fa-line-chart me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Analisa Marhun">Analisa</p>
</a>
</li>
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="portalprofile">
<i class="fa fa-user me-1"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tetapan Profile">Mohamad Hafizuddin Hanafi Bin Hanafi</p>
</a>
</li>
<li class="nav-item my-auto ms-3 ms-lg-0">
<a href="loginportal" class="btn btn-sm bg-white mb-0 me-1 mt-2 mt-md-0">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
</div>
</div>
</div>
<header class="bg-gradient-dark"> <header class="bg-gradient-dark">
<div class="page-header min-vh-75" style="background-image: url('assets/img/material-kit/internal/building.jpg');"> <div class="page-header min-vh-75" style="background-image: url('assets/img/material-kit/internal/building.jpg');">
resources/views/includes/profile.blade.php
+123 -58
View File
@@ -2,7 +2,9 @@
@section('content') @section('content')
<div class="col-xl-5 col-lg-6 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5"> <title>Profil | Customer Portal</title>
<div class="col-xl-12">
<div class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5"> <div class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5">
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent"> <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
<div class="bg-gradient-primary shadow-primary border-radius-lg p-3"> <div class="bg-gradient-primary shadow-primary border-radius-lg p-3">
@@ -10,72 +12,135 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<p class="pb-3">
For further questions, including partnership opportunities, please email hello@creative-tim.com <section>
or contact using our contact form. <div class="container">
</p> <div class="row justify-space-between py-2">
<form id="contact-form" method="post" autocomplete="off"> <div class="col-lg-6 mx-auto">
<div class="card-body p-0 my-3"> <div class="nav-wrapper position-relative end-0">
<div class="row"> <ul class="nav nav-pills nav-fill p-1" role="tablist">
<div class="col-md-6"> <li class="nav-item">
<div class="input-group input-group-static mb-4"> <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center active" data-bs-toggle="tab" href="#maklumatperibadi" role="tab" aria-controls="preview" aria-selected="true">
<label>Nama</label> <i class="material-icons text-sm me-2">person</i> Maklumat Peribadi
<input type="email" class="form-control" placeholder="Full Name"> </a>
</li>
<li class="nav-item">
<a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#katalaluan" role="tab" aria-controls="code" aria-selected="false">
<i class="material-icons text-sm me-2">dashboard</i> Kata Laluan
</a>
</li>
</ul>
</div> </div>
</div> </div>
<div class="col-md-6 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>Email</label>
<input type="email" class="form-control" placeholder="hello@creative-tim.com">
</div>
</div>
<div class="col-md-6">
<div class="input-group input-group-static mb-4">
<label>IC</label>
<input type="email" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="col-md-6 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>No Telefon</label>
<input type="email" class="form-control" placeholder="hello@creative-tim.com">
</div>
</div>
</div>
<div class="form-group mb-0 mt-md-0 mt-4">
<div class="input-group input-group-static mb-4">
<label>Alamat</label>
<textarea name="message" class="form-control" id="message" rows="6" placeholder="Describe your problem in at least 250 characters"></textarea>
</div>
</div> </div>
<div class="row"> <div class="tab-content tab-space">
<div class="col-md-4"> <div class="tab-pane active" id="maklumatperibadi">
<div class="input-group input-group-static mb-4"> <form id="contact-form" method="#" autocomplete="off">
<label>Poskod</label> <div class="card-body p-0 my-3 mt-5">
<input type="email" class="form-control" placeholder="Full Name"> <div class="row">
<div class="col-md-6">
<div class="input-group input-group-static mb-4">
<label>Nama</label>
<input type="email" class="form-control" placeholder="Mohamad Hafizuddin Hanafi Bin Hanafi" readonly>
</div>
</div>
<div class="col-md-6 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>Email</label>
<input type="email" class="form-control" placeholder="hafizudiin@google.com" readonly>
</div>
</div>
<div class="col-md-6">
<div class="input-group input-group-static mb-4">
<label>IC</label>
<input type="email" class="form-control" placeholder="901203035858" readonly>
</div>
</div>
<div class="col-md-6 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>No Telefon</label>
<input type="email" class="form-control" placeholder="0168989052" readonly>
</div>
</div>
</div>
<div class="form-group mb-0 mt-md-0 mt-4">
<div class="input-group input-group-static mb-4">
<label>Alamat</label>
<input type="email" class="form-control" placeholder="Lot 1934, Seksyen 47, Jalan Bunut Payong" readonly>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group input-group-static mb-4">
<label>Poskod</label>
<input type="email" class="form-control" placeholder="15200" readonly>
</div>
</div>
<div class="col-md-4 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>Daerah</label>
<input type="email" class="form-control" placeholder="Kota Bharu" readonly>
</div>
</div>
<div class="col-md-4 ps-md-2">
<div class="input-group input-group-static mb-4">
<label>Negeri</label>
<input type="email" class="form-control" placeholder="Kelantan" readonly>
</div>
</div>
</div>
</div>
</form>
<div class="row justify-space-between py-2">
<p class="text-xs">Maklumat ini telah disahkan oleh pelanggan semasa membuat gadaian dicawangan. Sila hubungi cawangan jika terdapat perubahan.</p>
</div> </div>
</div> </div>
<div class="col-md-4 ps-md-2"> <div class="tab-pane" id="katalaluan">
<div class="input-group input-group-static mb-4"> <form id="contact-form" method="#" autocomplete="off">
<label>Daerah</label> <div class="card-body p-0 my-3 mt-5">
<input type="email" class="form-control" placeholder="hello@creative-tim.com"> <div class="row justify-content-center">
</div> <div class="col-lg-8 col-md-12">
</div> <div class="col-12">
<div class="col-md-4 ps-md-2"> <div class="input-group input-group-static mb-4">
<div class="input-group input-group-static mb-4"> <label>Current Password</label>
<label>Negeri</label> <input type="password" class="form-control" placeholder="Kata laluan sekarang">
<input type="email" class="form-control" placeholder="hello@creative-tim.com"> </div>
</div> </div>
</div> <div class="col-12">
</div> <div class="input-group input-group-static mb-4">
<div class="row"> <label>New Passord</label>
<div class="col-md-12 text-center"> <input type="password" class="form-control" placeholder="Masukkan kata laluan baharu">
<button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Send Message</button> </div>
</div>
<div class="col-12">
<div class="input-group input-group-static mb-4">
<label>Confirm New Passord</label>
<input type="password" class="form-control" placeholder="Mengesahkan kata laluan baharu">
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Simpan</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
</form> </section>
</div> </div>
</div> </div>
</div> </div>