DONE: enhance UI on login and register, add lucide icon
This commit is contained in:
ISMAIL MASSERAN
@@ -2,7 +2,6 @@
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lucide/vue": "^1.52.0",
|
||||
"@popperjs/core": "^2.11.5",
|
||||
"@vuelidate/core": "^2.0.0-alpha.41",
|
||||
"@vuelidate/validators": "^2.0.0-alpha.29",
|
||||
|
||||
Generated
+12
@@ -8,6 +8,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@lucide/vue':
|
||||
specifier: ^1.52.0
|
||||
version: 1.52.0(vue@3.5.43(typescript@5.6.2))
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.5
|
||||
version: 2.11.8
|
||||
@@ -678,6 +681,11 @@ packages:
|
||||
'@leichtgewicht/ip-codec@2.0.5':
|
||||
resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
|
||||
|
||||
'@lucide/vue@1.52.0':
|
||||
resolution: {integrity: sha512-Gwr6c14jhY6BscoFU+B9OKsr7lg8RTAKOLgW0e61kkFwkt9Q7CZmB9AyJcvhoqapEJgRg2bFoeAcO+cqpgKzEQ==}
|
||||
peerDependencies:
|
||||
vue: '>=3.0.1'
|
||||
|
||||
'@mazui/cli@3.50.1':
|
||||
resolution: {integrity: sha512-M8N/LdAJUfGt6eAGAJ8/VgA+yFSs+9IrLpDrt2oJfSVKseHRHT4C2t1A2KLlmt5EzeLQibX/eKj00TVNVavllA==}
|
||||
hasBin: true
|
||||
@@ -4883,6 +4891,10 @@ snapshots:
|
||||
|
||||
'@leichtgewicht/ip-codec@2.0.5': {}
|
||||
|
||||
'@lucide/vue@1.52.0(vue@3.5.43(typescript@5.6.2))':
|
||||
dependencies:
|
||||
vue: 3.5.43(typescript@5.6.2)
|
||||
|
||||
'@mazui/cli@3.50.1':
|
||||
dependencies:
|
||||
'@clack/prompts': 0.8.2
|
||||
|
||||
@@ -1,40 +1,42 @@
|
||||
<template>
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" class="text-white">
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" class="terms-link">
|
||||
Terma & Syarat
|
||||
</a>
|
||||
<div
|
||||
class="modal fade"
|
||||
id="exampleModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">
|
||||
Terma & Syarat
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<terms-and-conditions-details></terms-and-conditions-details>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<Button
|
||||
data-bs-dismiss="modal"
|
||||
class="p-button-sm"
|
||||
label="Kembali"
|
||||
></Button>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
class="modal fade terms-modal"
|
||||
id="exampleModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">
|
||||
Terma & Syarat
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<terms-and-conditions-details></terms-and-conditions-details>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<Button
|
||||
data-bs-dismiss="modal"
|
||||
class="p-button-sm"
|
||||
label="Kembali"
|
||||
></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -50,4 +52,17 @@ export default {
|
||||
.paragraph-align {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.terms-link {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Keep modal above login shell (backdrop-filter/transform create a stacking context). */
|
||||
.terms-modal {
|
||||
z-index: 2000;
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +1,91 @@
|
||||
<template>
|
||||
<Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
|
||||
<div class="flex main-container min-h-screen align-items-center justify-content-center">
|
||||
<div class="surface-card fadein p-4 shadow-8 border-round w-11 md:w-10 lg:w-8 xl:w-7">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-right: -65px">
|
||||
<img class="logo-img1" src="img/e-Rahn_Logo_FA-01.png" alt="erahn-logo" />
|
||||
</div>
|
||||
<!-- <div class="col-md-2 d-flex flex-column justify-content-center align-items-left">
|
||||
<img class="logo-img2" src="img/Logo KoPKB_Final.png" alt="erahn-logo" />
|
||||
</div> -->
|
||||
<div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-left: -65px">
|
||||
<div class="login-page">
|
||||
<div class="login-backdrop" aria-hidden="true"></div>
|
||||
|
||||
</div>
|
||||
<div class="login-shell">
|
||||
<section class="login-brand">
|
||||
<div class="brand-mark">
|
||||
<img src="img/e-Rahn_Logo_FA-01.png" alt="" class="brand-seal" />
|
||||
<img src="img/e-rahn-lelong.png" alt="E-Rahn Lelong" class="brand-wordmark" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mb-5">
|
||||
<!-- <img class="logo-img" src="img/bidder.png" alt="erahn-logo" /> -->
|
||||
<img class="logo-img3 mb-3" src="img/e-rahn-lelong.png" alt="erahn-logo">
|
||||
<div class="text-200 text-3xl font-semibold mb-3">Log Masuk</div>
|
||||
<span class="text-200 font-medium line-height-3">Belum punyai akaun?</span>
|
||||
<router-link v-bind:to="{ name: 'register' }" class="font-medium ml-2 text-blue cursor-pointer">Daftar sekarang!
|
||||
</router-link>
|
||||
</div>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="px-0 text-center md:px-8">
|
||||
<div class="field grid">
|
||||
<!-- <label for="firstname3" class="justify-content-end"
|
||||
style="width: 170px">Username</label> -->
|
||||
<div class="col">
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText class="mb-2" v-model="form.username" type="text" placeholder="ID Pengguna" required>
|
||||
</InputText>
|
||||
</span>
|
||||
<h1 class="brand-title">ArrahnBid</h1>
|
||||
<p class="brand-copy">
|
||||
Platform bidaan Ar-Rahn yang lebih pantas, jelas, dan selamat untuk anda.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="login-panel">
|
||||
<header class="panel-header">
|
||||
<h2>Log Masuk</h2>
|
||||
<p>
|
||||
Belum punya akaun?
|
||||
<router-link :to="{ name: 'register' }">Daftar sekarang</router-link>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form class="login-form" @submit.prevent="doLogin">
|
||||
<label class="field">
|
||||
<span class="field-label">ID Pengguna</span>
|
||||
<div class="field-control" :class="{ 'is-invalid': v$.form.username.$error }">
|
||||
<User class="field-icon" :size="18" :stroke-width="1.75" />
|
||||
<InputText
|
||||
v-model="form.username"
|
||||
type="text"
|
||||
placeholder="Masukkan ID pengguna"
|
||||
autocomplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<!-- <label for="firstname3"
|
||||
class="justify-content-end"
|
||||
style="width: 170px">Kata Laluan</label> -->
|
||||
<div class="col">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user" />
|
||||
<Password class="mb-2" v-model="form.password" placeholder="Katalaluan" toggleMask :feedback="false" />
|
||||
</span>
|
||||
<InlineMessage v-if="v$.form.username.$error" class="field-error">
|
||||
Username diperlukan
|
||||
</InlineMessage>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">Kata Laluan</span>
|
||||
<div class="field-control" :class="{ 'is-invalid': v$.form.password.$error }">
|
||||
<Lock class="field-icon" :size="18" :stroke-width="1.75" />
|
||||
<InputText
|
||||
v-model="form.password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="Masukkan kata laluan"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
class="reveal-btn"
|
||||
type="button"
|
||||
:aria-label="showPassword ? 'Sembunyikan kata laluan' : 'Tunjuk kata laluan'"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<EyeOff v-if="showPassword" :size="18" :stroke-width="1.75" />
|
||||
<Eye v-else :size="18" :stroke-width="1.75" />
|
||||
</button>
|
||||
</div>
|
||||
<InlineMessage class="flex-auto" v-if="v$.form.password.$error">Kata laluan diperlukan</InlineMessage>
|
||||
</div>
|
||||
<div class="">
|
||||
<Button @click="doLogin()" type="submit" class="p-button-sm" label="Log Masuk" icon="pi pi-sign-in"
|
||||
:loading="isLoading" iconPos="right"></Button>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<router-link v-bind:to="{ name: 'forgot-password' }">Lupa Katalaluan
|
||||
<InlineMessage v-if="v$.form.password.$error" class="field-error">
|
||||
Kata laluan diperlukan
|
||||
</InlineMessage>
|
||||
</label>
|
||||
|
||||
<div class="form-row">
|
||||
<router-link class="forgot-link" :to="{ name: 'forgot-password' }">
|
||||
Lupa kata laluan?
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex alin justify-content-center mt-4 text-hover">
|
||||
<div class="btn btn-warning btn-sm">
|
||||
<terms-and-conditions></terms-and-conditions>
|
||||
</div>
|
||||
<!-- <a class="btn btn-info btn-sm" href="https://lelong.arrahn.com.my"
|
||||
>Pautan Sistem Lelong</a
|
||||
> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<button class="submit-btn" type="submit" :disabled="isLoading">
|
||||
<span>{{ isLoading ? "Sedang log masuk..." : "Log Masuk" }}</span>
|
||||
<LoaderCircle v-if="isLoading" class="spin" :size="18" :stroke-width="2" />
|
||||
<ArrowRight v-else :size="18" :stroke-width="2" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<footer class="panel-footer">
|
||||
<FileText :size="16" :stroke-width="1.75" />
|
||||
<terms-and-conditions />
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -76,10 +94,20 @@
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required } from "@vuelidate/validators";
|
||||
import { useAuthenticationUserStore } from "@/store/modules/authentication"
|
||||
import { ArrowRight, Eye, EyeOff, FileText, LoaderCircle, Lock, User } from "@lucide/vue";
|
||||
import { useAuthenticationUserStore } from "@/store/modules/authentication";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
ArrowRight,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FileText,
|
||||
LoaderCircle,
|
||||
Lock,
|
||||
User,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
@@ -88,11 +116,12 @@ export default {
|
||||
password: "",
|
||||
},
|
||||
isLoading: false,
|
||||
showPassword: false,
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
const authenticationStore = useAuthenticationUserStore()
|
||||
return { authenticationStore }
|
||||
const authenticationStore = useAuthenticationUserStore();
|
||||
return { authenticationStore };
|
||||
},
|
||||
methods: {
|
||||
doLogin() {
|
||||
@@ -102,7 +131,6 @@ export default {
|
||||
axios
|
||||
.post("/user/login", this.form)
|
||||
.then((response) => {
|
||||
// console.log("doLogin", response);
|
||||
if (response.data.statusAkaun == 1) {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("id", response.data.user.id);
|
||||
@@ -122,7 +150,7 @@ export default {
|
||||
email: response.data.user.email,
|
||||
notelbimbit: response.data.user.notelbimbit,
|
||||
username: response.data.user.username,
|
||||
})
|
||||
});
|
||||
this.$router.push({ name: "home" });
|
||||
} else if (response.data.statusAkaun == 0) {
|
||||
this.$toast.add({
|
||||
@@ -174,7 +202,6 @@ export default {
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch((response) => {
|
||||
// alert(response.message);
|
||||
console.log(response);
|
||||
this.isLoading = false;
|
||||
});
|
||||
@@ -193,45 +220,326 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-container {
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
rgba(139, 198, 236, 0.3) 0%,
|
||||
#9599e2 100%
|
||||
),
|
||||
url("/src/assets/background_arrahn.jpg"); */
|
||||
background-image: url("/src/assets/background-lelong.png");
|
||||
background-color: #fec234;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap");
|
||||
|
||||
.login-page {
|
||||
--ink: #132a4f;
|
||||
--navy: #1e417b;
|
||||
--blue: #2f68c5;
|
||||
--gold: #fec234;
|
||||
--panel: rgba(255, 252, 247, 0.94);
|
||||
--line: rgba(19, 42, 79, 0.12);
|
||||
--muted: rgba(19, 42, 79, 0.68);
|
||||
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
overflow: hidden;
|
||||
font-family: "Manrope", sans-serif;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.content-bg {
|
||||
background: #fff9f9eb !important;
|
||||
.login-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(115deg, rgba(19, 42, 79, 0.78) 0%, rgba(30, 65, 123, 0.55) 42%, rgba(254, 194, 52, 0.35) 100%),
|
||||
url("/src/assets/background-lelong.png") center / cover no-repeat;
|
||||
transform: scale(1.04);
|
||||
animation: backdrop-drift 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
color: white;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
.login-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(980px, 100%);
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
gap: 0;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
animation: shell-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.logo-img1 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.login-brand {
|
||||
padding: 3rem 2.75rem;
|
||||
color: #fffdf8;
|
||||
background:
|
||||
linear-gradient(160deg, rgba(19, 42, 79, 0.28), rgba(47, 104, 197, 0.1)),
|
||||
radial-gradient(circle at top left, rgba(254, 194, 52, 0.35), transparent 55%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
.logo-img2 {
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
margin-bottom: auto;
|
||||
animation: rise 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.logo-img3 {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
.brand-seal {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
|
||||
}
|
||||
|
||||
/* .border-round{
|
||||
border-radius:50px;
|
||||
} */
|
||||
.brand-wordmark {
|
||||
width: min(180px, 50vw);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0 0 0.75rem;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: clamp(2.4rem, 4vw, 3.4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.05;
|
||||
animation: rise 0.8s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
margin: 0;
|
||||
max-width: 28ch;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 253, 248, 0.88);
|
||||
animation: rise 0.8s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
background: var(--panel);
|
||||
padding: 2.75rem 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
animation: rise 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
margin: 0 0 0.4rem;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 1.85rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 0 0 1.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.panel-header a,
|
||||
.forgot-link,
|
||||
.panel-footer :deep(.terms-link) {
|
||||
color: var(--blue);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.panel-header a:hover,
|
||||
.forgot-link:hover,
|
||||
.panel-footer :deep(.terms-link):hover {
|
||||
color: var(--navy);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.field-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-height: 3.15rem;
|
||||
padding: 0 0.95rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.field-control:focus-within {
|
||||
border-color: var(--blue);
|
||||
box-shadow: 0 0 0 3px rgba(47, 104, 197, 0.14);
|
||||
}
|
||||
|
||||
.field-control.is-invalid {
|
||||
border-color: #d14343;
|
||||
}
|
||||
|
||||
.field-icon {
|
||||
flex: 0 0 auto;
|
||||
color: var(--navy);
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.field-control :deep(.p-inputtext) {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0.85rem 0 !important;
|
||||
font-family: inherit;
|
||||
font-size: 0.98rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.reveal-btn {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0.2rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--navy);
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.reveal-btn:hover {
|
||||
opacity: 1;
|
||||
background: rgba(30, 65, 123, 0.06);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -0.15rem;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 0.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
width: 100%;
|
||||
min-height: 3.2rem;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
|
||||
color: #fff;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.8;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
margin-top: 1.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shell-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px) scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backdrop-drift {
|
||||
from {
|
||||
transform: scale(1.04) translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
min-height: auto;
|
||||
padding: 2rem 1.6rem 1.4rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 1.75rem 1.4rem 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -11,12 +11,7 @@
|
||||
<p>
|
||||
Berikut merupakan video panduan untuk penggunaan ArrahnBid. Sila
|
||||
tonton
|
||||
<a
|
||||
class="font-bold"
|
||||
target="_blank"
|
||||
href="https://youtu.be/lucYE9bM_PY"
|
||||
>video</a
|
||||
>
|
||||
<a class="font-bold" target="_blank" href="https://youtu.be/lucYE9bM_PY">video</a>
|
||||
ini untuk memahami cara penggunaan.
|
||||
</p>
|
||||
<div class="youtube-wrap flex justify-content-center overflow-x-auto">
|
||||
@@ -28,14 +23,12 @@
|
||||
</TabPanel>
|
||||
<TabPanel :header="'Hubungi Kami'">
|
||||
<div class="mt-5">
|
||||
<div
|
||||
class="
|
||||
<div class="
|
||||
grid
|
||||
col-11 col-offset-1
|
||||
lg:col-8 lg:col-offset-2
|
||||
justify-content-center
|
||||
"
|
||||
>
|
||||
">
|
||||
<div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-phone"></i> Hotline</div>
|
||||
<div class="col-12 lg:col-6 text-start value-form">1300-22-4343</div>
|
||||
<div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-pencil"></i> Emel</div>
|
||||
|
||||
+3
-1
@@ -4,13 +4,15 @@ import Master from './Master.vue'
|
||||
import router from './router'
|
||||
// import useVuelidate from '@vuelidate/core'
|
||||
import './interceptors/axios'
|
||||
import './styles/primevue-bootstrap.css'
|
||||
import "bootstrap/dist/css/bootstrap.css"
|
||||
import "bootstrap/dist/js/bootstrap.js"
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import VueSweetalert2 from 'vue-sweetalert2';
|
||||
import 'sweetalert2/dist/sweetalert2.min.css';
|
||||
import PrimeVue from 'primevue/config';
|
||||
|
||||
import '../public/themes/lara-light-blue/theme.css'
|
||||
import './styles/primevue-bootstrap.css'
|
||||
import 'primeicons/primeicons.css'
|
||||
import 'primeflex/primeflex.css'
|
||||
import ToastService from 'primevue/toastservice';
|
||||
|
||||
@@ -1,13 +1,49 @@
|
||||
/*
|
||||
PrimeVue 3.4x+ ships component structure CSS inside the theme under @layer primevue.
|
||||
Unlayered Bootstrap would otherwise override those rules (e.g. TabView becomes a bullet list).
|
||||
Keep the project's existing Bootstrap + public theme colors.
|
||||
Newer PrimeVue emptied primevue.min.css, so TabView layout rules are
|
||||
patched here instead of switching to the layered node_modules theme
|
||||
(which overrides login and brand colors).
|
||||
*/
|
||||
@layer bootstrap, primevue;
|
||||
|
||||
@import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
|
||||
@import "primevue/resources/themes/lara-light-blue/theme.css";
|
||||
|
||||
:root {
|
||||
--primary-color: #2f68c5;
|
||||
--primary-color-text: #ffffff;
|
||||
.p-tabview-nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.p-tabview-nav-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-nav {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-nav li {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-nav li .p-tabview-nav-link,
|
||||
.p-tabview .p-tabview-header-action {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-tabview .p-tabview-title {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user