perbaikan
This commit is contained in:
parent
3fbc8fb111
commit
a5be9f79a1
|
@ -179,7 +179,7 @@ p {
|
|||
font-style: italic !important;
|
||||
}
|
||||
// Contextual colors
|
||||
|
||||
$text-gradient-bg-primary: linear-gradient(310deg, #cb0c9f, #a4087c);
|
||||
.text-gradient {
|
||||
background-clip: $text-gradient-bg-clip;
|
||||
-webkit-background-clip: $text-gradient-bg-clip;
|
||||
|
@ -187,6 +187,7 @@ p {
|
|||
position: $text-gradient-position;
|
||||
z-index: $text-gradient-zindex;
|
||||
|
||||
|
||||
&.text-primary {
|
||||
background-image: $text-gradient-bg-primary;
|
||||
}
|
||||
|
|
|
@ -43,21 +43,29 @@
|
|||
<!-- Baris kartu -->
|
||||
<div class="row gx-3">
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white" style="background-color: #b22fa4;">
|
||||
<div class="card-body d-flex justify-content-between align-items-center">
|
||||
<div class="card text-white shadow-lg border-radius-xl"
|
||||
style="background-color: #b22fa4; color: #fff; box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.1), 6px 6px 20px rgba(178, 47, 164, 0.5);">
|
||||
<div class="card-body d-flex justify-content-between align-items-center p-4">
|
||||
<div>
|
||||
<p class="mb-1 text-sm">Total Positif</p>
|
||||
<h4 id="positifCount" class="mb-0 text-white">
|
||||
<p class="mb-1 text-sm fw-bold opacity-85">Total Positif</p>
|
||||
<h4 id="positifCount" class="mb-0 text-white fw-bolder">
|
||||
{{ $cDana['positif'] + $cGoPay['positif'] + $cShopee['positif'] }}
|
||||
</h4>
|
||||
</div>
|
||||
<i class="fa-solid fa-face-smile fa-4x opacity-8"></i>
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle"
|
||||
style="width: 64px; height: 64px; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
|
||||
<i class="fa-solid fa-face-smile fa-2x opacity-9"
|
||||
style="transition: transform 0.3s ease, opacity 0.3s ease;"
|
||||
onmouseover="this.style.transform='scale(1.2)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.style.opacity='0.9';"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white" style="background-color: #a95b91;">
|
||||
<div class="card text-white"
|
||||
style="background-color: #a95b91; color: #fff; box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.1), 6px 6px 20px rgba(178, 47, 164, 0.5);">
|
||||
<div class="card-body d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<p class="mb-1 text-sm">Total Netral</p>
|
||||
|
@ -65,13 +73,20 @@
|
|||
{{ $cDana['netral'] + $cGoPay['netral'] + $cShopee['netral'] }}
|
||||
</h4>
|
||||
</div>
|
||||
<i class="fa-solid fa-face-meh fa-4x opacity-8"></i>
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle"
|
||||
style="width: 64px; height: 64px; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
|
||||
<i class="fa-solid fa-face-meh fa-2x opacity-9"
|
||||
style="transition: transform 0.3s ease, opacity 0.3s ease;"
|
||||
onmouseover="this.style.transform='scale(1.2)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.style.opacity='0.9';"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card text-white" style="background-color: #8b2f5e;">
|
||||
<div class="card text-white"
|
||||
style="background-color: #8b2f5e; color: #fff; box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.1), 6px 6px 20px rgba(178, 47, 164, 0.5);">
|
||||
<div class="card-body d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<p class="mb-1 text-sm">Total Negatif</p>
|
||||
|
@ -79,7 +94,13 @@
|
|||
{{ $cDana['negatif'] + $cGoPay['negatif'] + $cShopee['negatif'] }}
|
||||
</h4>
|
||||
</div>
|
||||
<i class="fa-solid fa-face-frown fa-4x opacity-8"></i>
|
||||
<div class="d-flex align-items-center justify-content-center rounded-circle"
|
||||
style="width: 64px; height: 64px; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
|
||||
<i class="fa-solid fa-face-frown fa-2x opacity-9"
|
||||
style="transition: transform 0.3s ease, opacity 0.3s ease;"
|
||||
onmouseover="this.style.transform='scale(1.2)'; this.style.opacity='1';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.style.opacity='0.9';"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -87,6 +108,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<!-- Bar Chart Card -->
|
||||
|
@ -117,7 +139,7 @@
|
|||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="chart">
|
||||
<canvas id="chart-line" class="chart-canvas" height="250" style="width:100%;"></canvas>
|
||||
<canvas id="chart-line" class="chart-canvas" height="318" style="width:100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -126,8 +148,8 @@
|
|||
|
||||
<div class="row mt-4">
|
||||
<!-- Pie Chart Card with filter -->
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="card z-index-2">
|
||||
<div class="col-lg-5 mb-lg-0 mb-4 d-flex">
|
||||
<div class="card z-index-2 flex-grow-1">
|
||||
<div class="card-header pb-0 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-1">Distribusi Persentase Sentimen</h6>
|
||||
|
@ -148,6 +170,72 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 d-flex">
|
||||
<div class="card z-index-2 flex-grow-1">
|
||||
<div class="card-header pb-0">
|
||||
<h6>Perbandingan Sentimen Antar Brand</h6>
|
||||
<p class="text-sm">Tabel ini menunjukkan jumlah dan proporsi sentimen untuk masing-masing e-wallet.</p>
|
||||
</div>
|
||||
<div class="card-body px-3 pt-0 pb-3">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
|
||||
style="background-color: #f8f9fa;">E-Wallet</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
style="background-color: #f8f9fa;">Positif</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
style="background-color: #f8f9fa;">Netral</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
style="background-color: #f8f9fa;">Negatif</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
style="background-color: #f8f9fa;">Net Score</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>DANA</strong></td>
|
||||
<td>{{ $cDana['positif'] }}</td>
|
||||
<td>{{ $cDana['netral'] }}</td>
|
||||
<td>{{ $cDana['negatif'] }}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge {{ $cDana['positif'] - $cDana['negatif'] > 0 ? 'bg-success' : 'bg-danger' }}">
|
||||
{{ number_format((($cDana['positif'] - $cDana['negatif']) / max(1, $cDana['positif'] + $cDana['netral'] + $cDana['negatif'])) * 100, 1) }}%
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>GoPay</strong></td>
|
||||
<td>{{ $cGoPay['positif'] }}</td>
|
||||
<td>{{ $cGoPay['netral'] }}</td>
|
||||
<td>{{ $cGoPay['negatif'] }}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge {{ $cGoPay['positif'] - $cGoPay['negatif'] > 0 ? 'bg-success' : 'bg-danger' }}">
|
||||
{{ number_format((($cGoPay['positif'] - $cGoPay['negatif']) / max(1, $cGoPay['positif'] + $cGoPay['netral'] + $cGoPay['negatif'])) * 100, 1) }}%
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>ShopeePay</strong></td>
|
||||
<td>{{ $cShopee['positif'] }}</td>
|
||||
<td>{{ $cShopee['netral'] }}</td>
|
||||
<td>{{ $cShopee['negatif'] }}</td>
|
||||
<td>
|
||||
<span
|
||||
class="badge {{ $cShopee['positif'] - $cShopee['negatif'] > 0 ? 'bg-success' : 'bg-danger' }}">
|
||||
{{ number_format((($cShopee['positif'] - $cShopee['negatif']) / max(1, $cShopee['positif'] + $cShopee['netral'] + $cShopee['negatif'])) * 100, 1) }}%
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
@ -313,6 +401,8 @@
|
|||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false, // Disable maintain aspect ratio
|
||||
aspectRatio: 2, // Aspect ratio of 1 will give a square chart, you can adjust to your needs
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
duration: 1000
|
||||
|
@ -381,5 +471,146 @@
|
|||
negatifEl.textContent = d.negatif;
|
||||
});
|
||||
});
|
||||
// Word Cloud
|
||||
// var danaData = [{{ $cDana['positif'] }}, {{ $cDana['netral'] }}, {{ $cDana['negatif'] }}];
|
||||
// var goPayData = [{{ $cGoPay['positif'] }}, {{ $cGoPay['netral'] }}, {{ $cGoPay['negatif'] }}];
|
||||
// var shopeeData = [{{ $cShopee['positif'] }}, {{ $cShopee['netral'] }}, {{ $cShopee['negatif'] }}];
|
||||
|
||||
// var danaData = [{{ $cDana['positif'] }}, {{ $cDana['netral'] }}, {{ $cDana['negatif'] }}];
|
||||
// var goPayData = [{{ $cGoPay['positif'] }}, {{ $cGoPay['netral'] }}, {{ $cGoPay['negatif'] }}];
|
||||
// var shopeeData = [{{ $cShopee['positif'] }}, {{ $cShopee['netral'] }}, {{ $cShopee['negatif'] }}];
|
||||
|
||||
// var wordData = [{
|
||||
// text: 'Positif Dana',
|
||||
// weight: danaData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral Dana',
|
||||
// weight: danaData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif Dana',
|
||||
// weight: danaData[2]
|
||||
// },
|
||||
// {
|
||||
// text: 'Positif GoPay',
|
||||
// weight: goPayData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral GoPay',
|
||||
// weight: goPayData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif GoPay',
|
||||
// weight: goPayData[2]
|
||||
// },
|
||||
// {
|
||||
// text: 'Positif Shopee',
|
||||
// weight: shopeeData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral Shopee',
|
||||
// weight: shopeeData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif Shopee',
|
||||
// weight: shopeeData[2]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// // Menggunakan WordCloud.js untuk membuat visualisasi
|
||||
// WordCloud(document.getElementById('wordCloud'), {
|
||||
// list: wordData.map(function(item) {
|
||||
// return [item.text, item.weight]; // Format: [kata, ukuran]
|
||||
// }),
|
||||
// gridSize: 10,
|
||||
// weightFactor: 10,
|
||||
// fontFamily: 'Arial',
|
||||
// color: 'random-light',
|
||||
// backgroundColor: '#f4f6f9',
|
||||
// rotateRatio: 0.5
|
||||
// });
|
||||
// var wordData = [{
|
||||
// text: 'Positif Dana',
|
||||
// weight: danaData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral Dana',
|
||||
// weight: danaData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif Dana',
|
||||
// weight: danaData[2]
|
||||
// },
|
||||
// {
|
||||
// text: 'Positif GoPay',
|
||||
// weight: goPayData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral GoPay',
|
||||
// weight: goPayData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif GoPay',
|
||||
// weight: goPayData[2]
|
||||
// },
|
||||
// {
|
||||
// text: 'Positif Shopee',
|
||||
// weight: shopeeData[0]
|
||||
// },
|
||||
// {
|
||||
// text: 'Netral Shopee',
|
||||
// weight: shopeeData[1]
|
||||
// },
|
||||
// {
|
||||
// text: 'Negatif Shopee',
|
||||
// weight: shopeeData[2]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// Pastikan canvas sudah siap
|
||||
// setTimeout(() => {
|
||||
// WordCloud(document.getElementById('wordCloud'), {
|
||||
// list: wordData.map(item => [item.text, item.weight]),
|
||||
// gridSize: 8,
|
||||
// weightFactor: 2,
|
||||
// fontFamily: 'Arial',
|
||||
// color: 'random-dark',
|
||||
// backgroundColor: '#f4f6f9',
|
||||
// rotateRatio: 0.5,
|
||||
// minSize: 12
|
||||
// });
|
||||
// }, 100);
|
||||
var danaTotal = {{ $cDana['positif'] + $cDana['netral'] + $cDana['negatif'] }};
|
||||
var goPayTotal = {{ $cGoPay['positif'] + $cGoPay['netral'] + $cGoPay['negatif'] }};
|
||||
var shopeeTotal = {{ $cShopee['positif'] + $cShopee['netral'] + $cShopee['negatif'] }};
|
||||
|
||||
var wordData = [{
|
||||
text: 'Dana',
|
||||
weight: danaTotal
|
||||
},
|
||||
{
|
||||
text: 'GoPay',
|
||||
weight: goPayTotal
|
||||
},
|
||||
{
|
||||
text: 'Shopee',
|
||||
weight: shopeeTotal
|
||||
}
|
||||
];
|
||||
|
||||
// Render Word Cloud
|
||||
setTimeout(() => {
|
||||
WordCloud(document.getElementById('wordCloud'), {
|
||||
list: wordData.map(item => [item.text, item.weight]),
|
||||
gridSize: 6,
|
||||
weightFactor: 4, // semakin besar, semakin beda ukurannya
|
||||
fontFamily: 'Arial',
|
||||
color: 'random-dark',
|
||||
backgroundColor: '#f4f6f9',
|
||||
rotateRatio: 0,
|
||||
minSize: 12
|
||||
});
|
||||
}, 100);
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
@ -46,6 +46,7 @@
|
|||
<link id="pagestyle" href="../assets/css/soft-ui-dashboard.css?v=1.0.3" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.2/wordcloud2.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body
|
||||
|
@ -58,10 +59,10 @@
|
|||
@endguest
|
||||
|
||||
@if (session()->has('success'))
|
||||
{{-- <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show"
|
||||
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show"
|
||||
class="position-fixed bg-success rounded right-3 text-sm py-2 px-4">
|
||||
<p class="m-0">{{ session('success') }}</p>
|
||||
</div> --}}
|
||||
</div>
|
||||
@endif
|
||||
<!-- Core JS Files -->
|
||||
<script src="../assets/js/core/popper.min.js"></script>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<footer class="footer pt-3 ">
|
||||
{{-- <div class="container-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
</div>
|
||||
</div> --}}
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
@ -4,6 +4,26 @@
|
|||
<div class="row">
|
||||
|
||||
@if (!auth()->user() || \Request::is('static-sign-up'))
|
||||
{{-- <div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="https://dribbble.com/creativetim" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="https://twitter.com/CreativeTim" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/creativetimofficial/" target="_blank"
|
||||
class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="https://ro.pinterest.com/thecreativetim/" target="_blank"
|
||||
class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="https://github.com/creativetimofficial" target="_blank"
|
||||
class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div> --}}
|
||||
@endif
|
||||
</div>
|
||||
@if (!auth()->user() || \Request::is('static-sign-up'))
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
|
||||
|
||||
</ol>
|
||||
<h6 class="font-weight-bolder mb-0 text-capitalize">{{ str_replace('-', ' ', Request::path()) }}</h6>
|
||||
<h3 class="font-weight-bolder mb-0 text-capitalize">{{ str_replace('-', ' ', Request::path()) }}</h3>
|
||||
</nav>
|
||||
<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4 d-flex justify-content-end" id="navbar">
|
||||
<div class="ms-md-3 pe-md-3 d-flex align-items-center">
|
||||
|
|
|
@ -34,7 +34,10 @@
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="nav-link-text ms-1">Dashboard</span>
|
||||
<span class="nav-link-text ms-1" style="color: {{ Request::is('dashboard') ? '#000' : '#fff' }};">
|
||||
Dashboard
|
||||
</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
|
@ -65,7 +68,12 @@
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="nav-link-text ms-1">Data Sentimen</span>
|
||||
<span class="nav-link-text ms-1"
|
||||
style="color: {{ Request::is('data-sentimen') ? '#000' : '#fff' }};">
|
||||
Data Sentimen
|
||||
</span>
|
||||
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -3,7 +3,11 @@
|
|||
class="navbar navbar-expand-lg position-absolute top-0 z-index-3 my-3 {{ Request::is('static-sign-up') ? 'w-100 shadow-none navbar-transparent mt-4' : 'blur blur-rounded shadow py-2 start-0 end-0 mx4' }}">
|
||||
<div class="container-fluid {{ Request::is('static-sign-up') ? 'container' : 'container-fluid' }}">
|
||||
<a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 {{ Request::is('static-sign-up') ? 'text-white' : '' }}"
|
||||
href="{{ url('dashboard') }}">
|
||||
href="{{ url('dashboard') }}"
|
||||
style="background-image: linear-gradient(310deg, #cb0c9f, #d94db6, #f199d9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;">
|
||||
TwiSense
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
|
||||
|
@ -34,13 +38,13 @@
|
|||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
<ul class="navbar-nav d-lg-block d-none">
|
||||
{{-- <ul class="navbar-nav d-lg-block d-none">
|
||||
<li class="nav-item">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-sm btn-round mb-0 me-1 bg-gradient-{{ Request::is('static-sign-up') ? 'light' : 'dark' }}">Sign
|
||||
In</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul> --}}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -9,9 +9,15 @@
|
|||
<div class="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
|
||||
<div class="card card-plain mt-8">
|
||||
<div class="card-header pb-0 text-left bg-transparent">
|
||||
<h3 class="font-weight-bolder text-info text-gradient">Welcome back</h3>
|
||||
<p class="mb-0">Create a new acount<br></p>
|
||||
<p class="mb-0">OR Sign in with these credentials:</p>
|
||||
<h3 class="font-weight-bolder"
|
||||
style="background-image: linear-gradient(310deg, #cb0c9f, #d94db6, #f199d9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;">
|
||||
Sign In
|
||||
</h3>
|
||||
{{-- <p class="mb-0">Create a new acount<br></p>
|
||||
<p class="mb-0">OR Sign in with these credentials:</p> --}}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" method="POST" action="/session">
|
||||
|
@ -27,19 +33,45 @@
|
|||
</div>
|
||||
<label>Password</label>
|
||||
<div class="mb-3">
|
||||
<input type="password" class="form-control" name="password" id="password"
|
||||
placeholder="Password" value="secret" aria-label="Password"
|
||||
aria-describedby="password-addon">
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" name="password" id="password"
|
||||
placeholder="Password" value="secret" aria-label="Password"
|
||||
aria-describedby="password-addon">
|
||||
<span class="input-group-text" id="password-addon" style="cursor: pointer;"
|
||||
onclick="togglePassword()">
|
||||
<i class="fa-solid fa-eye" id="eye-icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class="text-danger text-xs mt-2">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword() {
|
||||
var passwordField = document.getElementById("password");
|
||||
var eyeIcon = document.getElementById("eye-icon");
|
||||
|
||||
// Toggle password visibility
|
||||
if (passwordField.type === "password") {
|
||||
passwordField.type = "text";
|
||||
eyeIcon.classList.remove("fa-eye");
|
||||
eyeIcon.classList.add("fa-eye-slash");
|
||||
} else {
|
||||
passwordField.type = "password";
|
||||
eyeIcon.classList.remove("fa-eye-slash");
|
||||
eyeIcon.classList.add("fa-eye");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="rememberMe" checked="">
|
||||
<label class="form-check-label" for="rememberMe">Remember me</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn bg-gradient-info w-100 mt-4 mb-0">Sign
|
||||
<button type="submit" class="btn text-white w-100 mt-4 mb-0"
|
||||
style="background-image: linear-gradient(310deg, #cb0c9f, #d94db6, #f199d9);">Sign
|
||||
in</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
Loading…
Reference in New Issue