update changes ui

2022-12-18 12:03:39 +08:00
parent 4dff85421d
commit 35941764e5
9 changed files with 783 additions and 311 deletions
@@ -12,8 +12,9 @@
    "@vuelidate/validators": "^2.0.0-alpha.29",
    "autoprefixer": "^10",
    "axios": "^0.26.1",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.8.1",
+    "bootstrap-vue": "^2.23.1",
    "core-js": "^3.8.3",
    "libphonenumber-js": "^1.10.14",
    "maz-ui": "^3.0.7",
@@ -21,7 +22,7 @@
    "primeflex": "^3.2.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.17.0",
-    "vue": "^3.2.13",
+    "vue": "^3.2.45",
    "vue-router": "^4.0.14",
    "vue-sidebar-menu-akahon": "^0.1.4",
    "vue-sweetalert2": "^5.0.5",
@@ -36,7 +36,7 @@
  --border-radius:6px;
  --surface-ground:#eff3f8;
  --surface-section:#ffffff;
-  --surface-card:#454444ce;
+  --surface-card:#3f4242ce;
  --surface-card2:#b9b4b4;
  --surface-overlay:#ffffff;
  --surface-border:#dfe7ef;
@@ -1,42 +1,16 @@
 <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 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 class="text-center mb-5">
-        <img class="logo-img" src="img/erahn-logo.png" alt="erahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3">
-          E-Rahn Lelong
-        
-        </div>
-        <span class="text-dark-300 font-medium line-height-3"
-          >Belum punyai akaun?</span
-        >
-        <router-link
-          v-bind:to="{ name: 'register' }"
-          class="font-medium no-underline ml-2 text-white cursor-pointer"
-          >Daftar sekarang!</router-link
-        >
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="erahn-logo" />
+          <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
+            <span class="text-dark-300 font-medium line-height-3">Belum punyai akaun?</span>
+              <router-link
+              v-bind:to="{ name: 'register' }"
+              class="font-medium no-underline ml-2 text-white cursor-pointer"
+              >Daftar sekarang!
+              </router-link>
      </div>
      <form @submit.prevent="submit">
        <div class="px-0 text-center md:px-8">
@@ -46,19 +20,10 @@
            <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="Username"
-                  required
-                  style="width: 360px"
-                ></InputText>
+                <InputText class="mb-2" v-model="form.username" type="text" placeholder="Username" required></InputText>
              </span>
            </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.username.$error"
-              >Username diperlukan</InlineMessage
-            >
+            <InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
          </div>
          <div class="field grid">
            <!-- <label for="firstname3"
@@ -67,18 +32,10 @@
            <div class="col">
              <span class="p-input-icon-left">
                <i class="pi pi-user" />
-                <Password
-                  class="mb-2"
-                  v-model="form.password"
-                  placeholder="Password"
-                  toggleMask
-                  :feedback="false"
-                />
+                <Password class="mb-2" v-model="form.password" placeholder="Password" toggleMask:feedback="false"/>
              </span>
            </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.password.$error"
-              >Kata laluan diperlukan</InlineMessage
-            >
+            <InlineMessage class="flex-auto" v-if="v$.form.password.$error">Kata laluan diperlukan</InlineMessage>
          </div>
          <div class="">
            <Button
@@ -216,7 +173,7 @@ export default {
 }

 .logo-img {
-  width: 70px;
+  width: 350px;
  height: 60px;
 }

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" style="width:100%;height:100%;">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Ar-Rahn | Admin Page</title>
+
+    <link rel="icon" type="image/x-icon" href="{{ asset('img/icon_pkb.png') }}" />
+
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    {{-- <!-- Styles -->
+        <style>
+            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
+        </style> --}}
+
+    <style>
+        body {
+            font-family: 'Nunito', sans-serif;
+            background-color: #0B4A5F;
+        }
+
+        .waves {
+            /* background-color:#ecf0f1; */
+            width: 100%;
+            height: 100%;
+        }
+
+        .waves .logo {
+            z-index: 1;
+            position: absolute;
+            top: 25%;
+            left: 5%;
+            /* margin-top:-75%; */
+        }
+
+        .loginform {
+            position: absolute;
+            top: 30%;
+            right: 20%;
+        }
+
+        @media screen and (max-width: 1440px) {
+            .loginform {
+                position: absolute;
+                top: 30%;
+                right: 20%;
+            }
+        }
+
+        @media screen and (max-width: 1024px) {
+            .loginform {
+                position: absolute;
+                top: 30%;
+                right: 10%;
+            }
+        }
+
+        .login-page {
+            width: 360px;
+            padding: 8% 0 0;
+            margin: auto;
+        }
+
+        /* .form {
+            position: relative;
+            z-index: 1;
+            background: #EE7441;
+            max-width: 360px;
+            border: 2px solid gray;
+            border-radius: 8px;
+            padding: 5px;
+            margin: 0 auto 100px;
+            padding: 45px;
+            text-align: center;
+            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+        } */
+
+        .form input {
+            font-family: "Roboto", sans-serif;
+            outline: 0;
+            background: #dadada;
+            border: 2px solid gray;
+            border-radius: 16px;
+            opacity: 0.5;
+            width: 100%;
+            border: 30px;
+            margin: 0 0 15px;
+            padding: 15px;
+            box-sizing: border-box;
+            font-size: 14px;
+        }
+
+        .form button {
+            font-family: "Roboto", sans-serif;
+            text-transform: uppercase;
+            outline: 0;
+            background: #3A5C68;
+            border: 2px solid gray;
+            border-radius: 16px;
+            opacity: 0.5;
+            width: 100%;
+            padding: 12px;
+            color: #FFFFFF;
+            font-size: 14px;
+            -webkit-transition: all 0.3 ease;
+            transition: all 0.3 ease;
+            cursor: pointer;
+        }
+
+        .form button:hover,
+        .form button:active,
+        .form button:focus {
+            background: #132e15;
+        }
+
+        .form .message {
+            margin: 15px 0 0;
+            color: #b3b3b3;
+            font-size: 12px;
+        }
+
+        .form .message a {
+            color: #4CAF50;
+            text-decoration: none;
+        }
+
+        .form .register-form {
+            display: none;
+        }
+
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 300px;
+            margin: 0 auto;
+        }
+
+        .container:before,
+        .container:after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+
+        .container .info {
+            margin: 50px auto;
+            text-align: center;
+        }
+
+        .container .info h1 {
+            margin: 0 0 15px;
+            padding: 0;
+            font-size: 36px;
+            font-weight: 300;
+            color: #1a1a1a;
+        }
+
+        .container .info span {
+            color: #4d4d4d;
+            font-size: 12px;
+        }
+
+        .container .info span a {
+            color: #000000;
+            text-decoration: none;
+        }
+
+        .container .info span .fa {
+            color: #EF3B3A;
+        }
+
+        /* .login__field {
+            padding: 20px 0px;
+            position: relative;
+        }
+
+        .login__icon {
+            position: absolute;
+            top: 30px;
+            color: #7875B5;
+        } */
+
+        .input-icons i {
+            position: absolute;
+        }
+
+        .input-icons {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .icon {
+            padding: 10px;
+            color: rgb(255, 255, 255);
+            min-width: 50px;
+            text-align: left;
+        }
+
+        .input-field {
+            width: 100%;
+            padding: 30px;
+            padding-right: 30px;
+            color: rgb(255, 255, 255);
+            text-align: center;
+        }
+
+        h1 {
+            color: rgb(255, 255, 255);
+            text-align: center;
+        }
+    </style>
+</head>
@@ -3,16 +3,16 @@
  <div class="flex main-container min-h-screen align-items-center justify-content-center m-5">
    <div class= "surface-card fadein p-4 shadow-2 border-round w-11 md:w-10 lg:w-10 xl:w-8">
      <div class="text-center mb-5">
-        <img class="logo-img" src="img/erahn-logo.png" alt="arrahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3">E-Rahn Lelong</div>
-        <span class="text-600 font-medium line-height-3">Sudah punyai akaun?</span>
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
+        <span class="text-800 font-medium line-height-3">Sudah punyai akaun?</span>
        <router-link
          v-bind:to="{ name: 'login' }"
-          class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+          class="font-medium no-underline ml-2 text-gray-700 cursor-pointer"
          >Log masuk sekarang!
        </router-link>
      </div>
-      <h5 class="text-200">Daftar Akaun</h5>
+      <!-- <h5 class="text-200">Daftar Akaun</h5> -->
      <div class="grid">
        <div class="col-12 lg:col-6">
          <div class="field text-200">
@@ -40,15 +40,16 @@
          </div>
        </div>
        <div class="col-12 lg:col-6">
-          <div class="field">
-            <!-- <label for="nokp">No Kad Pengenalan</label> -->
-            <select
+          <div class="field text-200">
+            <label for="nokp">No Kad Pengenalan</label>
+            <!-- <select
              class="p-0 mb-2 form-select"
              style="width: 190px; border: none"
            >
              <option selected value="nokp">No Kad Pengenalan</option>
              <option value="passpor">No Passport</option>
-            </select>
+            </select> -->
+          
            <InputText
              id="nokp"
              type="text"
@@ -232,9 +233,9 @@
            >
          </div>
        </div> -->
-        <div class="col-12">
+        <!-- <div class="col-12">
          <div class="field text-200">
-            <label for="frontic">Kad Pengenalan Hadapan</label>
+            <label for="frontic">Kad Pengenalan Hadapan</label> -->
            <!-- <FileUpload
              name="demo[]"
              url="./upload"
@@ -245,29 +246,29 @@
              :showCancelButton="false"
              v-model="form.images.file1"
            /> -->
-            <input
+            <!-- <input
              class="form-control"
              type="file"
              id="formFile"
              ref="formFileRef"
              @change="readImage()"
-            />
+            /> -->
            <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
              >Kad pengenalan hadapan diperlukan</InlineMessage
            > -->
-          </div>
+          <!-- </div>
        </div>
        <div class="col-12">
          <div class="field text-200">
            <label for="backic">Kad Pengenalan Belakang</label>
-            <input class="form-control" type="file" />
+            <input class="form-control" type="file" /> -->
            <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
              >Kad pengenalan belakang diperlukan</InlineMessage
            > -->
-          </div>
-        </div>
+          <!-- </div>
+        </div> -->
        <div class="col-12">
-          <div class="mt-3 mb-1 text-500">
+          <div class="mt-3 mb-1 text-800">
            <label>
              <input type="checkbox" v-model="form.register_agree" />
              Setuju Dengan <terms-and-conditions></terms-and-conditions>
@@ -518,8 +519,22 @@ export default {

 <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;
+}
+
+
 .logo-img {
-  width: 70px;
+  width: 250px;
  height: 60px;
 }

@@ -90,6 +90,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
+  color: white;
 }
 /* .layout-footer-right {
  font-size: 1.5rem;
@@ -15,8 +15,8 @@
    >
      <div class="flex align-items-center justify-content-center">
        <div class="company-title" type="button" v-on:click="toHome()">
-          <img class="logo-img mr-2" src="img/erahn-logo.png" alt="arrahn-logo" />
-          <div class="logo-title">E-Rahn Lelong</div>  
+          <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+          <!-- <div class="logo-title">E-Rahn Lelong</div>   -->
        </div>
      </div>
      <div class="flex align-items-center justify-content-center">
@@ -93,7 +93,7 @@
    >
      <div class="flex align-items-center justify-content-center">
        <div class="company-title" type="button" v-on:click="toHome()">
-          <div class="logo-title">ArrahnBid</div>
+          <div class="logo-title">E-Rahn Lelong</div>
          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
        </div>
      </div>
@@ -281,7 +281,7 @@ router-link:hover {
 } */

 .main-color {
-  background-color: #eeeeee;
+  background-color: #333333;
 }

 .border-none {
@@ -307,7 +307,7 @@ router-link:hover {
  justify-content: center;
  align-items: center;
  color: #212223;
-  font-size: 1rem;
+  font-size: 3rem;
  font-weight: 500;
 }

@@ -334,7 +334,7 @@ router-link:hover {
  align-items: center;
  justify-content: center;
  height: 2.4rem;
-  color: #000000;
+  color: #eaf0f9;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s;
@@ -351,11 +351,11 @@ router-link:hover {
 .nav-button {
  text-decoration: none;
  margin: 0 1.5rem;
-  color: #000000;
+  color: #eaf0f9;
 }

 .nav-button:hover {
-  color: #000000;
+  color: #eaf0f9;
 }

 a.router-link-exact-active {
@@ -366,7 +366,7 @@ a.router-link-exact-active {
 }

 a.router-link-exact-active:hover {
-  color: #132a4f;
+  color: #000000;
 }

 .profile-title {