update color css, fix profile ui
This commit is contained in:
Amir Hamzan
@@ -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">
|
||||
<a class="navbar-brand text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
|
||||
MOHAMAD HAFIZUDDIN BIN HANAFI
|
||||
</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 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>
|
||||
<!-- <div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent ">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-white " href="#home" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
|
||||
MOHAMAD HAFIZUDDIN BIN HANAFI
|
||||
</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="#tebus">
|
||||
<i class="fa fa-exchange me-1"></i>
|
||||
<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>
|
||||
</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="#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>
|
||||
<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 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>
|
||||
</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="#tebus">
|
||||
<i class="fa fa-exchange me-1"></i>
|
||||
<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>
|
||||
</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="#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>
|
||||
</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">
|
||||
<div class="page-header min-vh-75" style="background-image: url('assets/img/material-kit/internal/building.jpg');">
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
@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-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">
|
||||
@@ -10,72 +12,135 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="pb-3">
|
||||
For further questions, including partnership opportunities, please email hello@creative-tim.com
|
||||
or contact using our contact form.
|
||||
</p>
|
||||
<form id="contact-form" method="post" autocomplete="off">
|
||||
<div class="card-body p-0 my-3">
|
||||
<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="Full Name">
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<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">
|
||||
<i class="material-icons text-sm me-2">person</i> Maklumat Peribadi
|
||||
</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 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 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="Full Name">
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="maklumatperibadi">
|
||||
<form id="contact-form" method="#" autocomplete="off">
|
||||
<div class="card-body p-0 my-3 mt-5">
|
||||
<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 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="hello@creative-tim.com">
|
||||
</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="hello@creative-tim.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Send Message</button>
|
||||
<div class="tab-pane" id="katalaluan">
|
||||
<form id="contact-form" method="#" autocomplete="off">
|
||||
<div class="card-body p-0 my-3 mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 col-md-12">
|
||||
<div class="col-12">
|
||||
<div class="input-group input-group-static mb-4">
|
||||
<label>Current Password</label>
|
||||
<input type="password" class="form-control" placeholder="Kata laluan sekarang">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="input-group input-group-static mb-4">
|
||||
<label>New Passord</label>
|
||||
<input type="password" class="form-control" placeholder="Masukkan kata laluan baharu">
|
||||
</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>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user