final project
This commit is contained in:
parent
adcf7be0f6
commit
a950c924be
|
@ -88,6 +88,7 @@ public function process(Request $request)
|
|||
'id_penyakit' => $terbesar['penyakit']->id,
|
||||
'nilai' => ($terbesar['nilai'] * 100) . '%',
|
||||
'tanggal' => now(),
|
||||
'hasil_diagnosa' => json_encode($hasil), // Store all results in JSON format
|
||||
]);
|
||||
|
||||
if (!$riwayat) {
|
||||
|
@ -100,6 +101,16 @@ public function process(Request $request)
|
|||
public function hasil($id)
|
||||
{
|
||||
$riwayat = RiwayatDiagnosa::with(['user', 'penyakit'])->findOrFail($id);
|
||||
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat'));
|
||||
|
||||
// Get alternative diagnoses from the JSON field
|
||||
$alternativeDiagnoses = [];
|
||||
if (isset($riwayat->hasil_diagnosa)) {
|
||||
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
|
||||
|
||||
// Skip the first item (primary diagnosis) and get up to 3 alternatives
|
||||
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
|
||||
}
|
||||
|
||||
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'alternativeDiagnoses'));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,25 +31,34 @@ public function index()
|
|||
public function detail($id)
|
||||
{
|
||||
$role = auth()->user()->role;
|
||||
// Ambil data RiwayatDiagnosa berdasarkan ID
|
||||
$riwayat = RiwayatDiagnosa::with('penyakit', 'user')->findOrFail($id);
|
||||
|
||||
// Mengecek apakah riwayat ditemukan
|
||||
if (!$riwayat) {
|
||||
abort(404, 'Riwayat tidak ditemukan');
|
||||
// Ambil alternative diagnoses dari JSON hasil diagnosa
|
||||
$alternativeDiagnoses = [];
|
||||
if (!empty($riwayat->hasil_diagnosa)) {
|
||||
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
|
||||
// Ambil selain utama (index 0), misal 3 alternatif
|
||||
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
|
||||
}
|
||||
|
||||
// Kirim data ke tampilan
|
||||
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'role'));
|
||||
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'role', 'alternativeDiagnoses'));
|
||||
}
|
||||
|
||||
|
||||
public function print($id)
|
||||
{
|
||||
$riwayat = \App\Models\RiwayatDiagnosa::with('penyakit', 'user')->findOrFail($id);
|
||||
|
||||
$role = auth()->user()->role;
|
||||
|
||||
// Kirim data riwayat dan role ke tampilan
|
||||
return view('layouts.diagnosa.print', compact('riwayat', 'role'));
|
||||
// Decode hasil_diagnosa untuk alternatif diagnosa
|
||||
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
|
||||
$alternativeDiagnoses = [];
|
||||
if ($hasilDiagnosa) {
|
||||
// Ambil alternatif setelah utama, maksimal 3
|
||||
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
|
||||
}
|
||||
|
||||
// Kirim data riwayat, role, dan alternativeDiagnoses ke view
|
||||
return view('layouts.diagnosa.print', compact('riwayat', 'role', 'alternativeDiagnoses'));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@ class RiwayatDiagnosa extends Model
|
|||
'id_user',
|
||||
'id_penyakit',
|
||||
'nilai',
|
||||
'hasil_diagnosa',
|
||||
'tanggal',
|
||||
];
|
||||
|
||||
|
|
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('riwayat', function (Blueprint $table) {
|
||||
//
|
||||
$table->longText('hasil_diagnosa')->nullable()->after('nilai');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('riwayat', function (Blueprint $table) {
|
||||
//
|
||||
$table->dropColumn('hasil_diagnosa');
|
||||
});
|
||||
}
|
||||
};
|
|
@ -67,10 +67,10 @@
|
|||
<td>{{ $user->role }}</td>
|
||||
<td>{{ $user->registered }}</td>
|
||||
<td>
|
||||
@if($user->role !== 'admin')
|
||||
<a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editUserModal{{ $user->id }}">
|
||||
Edit
|
||||
</a>
|
||||
@if($user->role !== 'admin')
|
||||
<form action="{{ route('user.destroy', $user->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Yakin ingin menghapus user ini?');">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
|
|
|
@ -151,10 +151,11 @@
|
|||
<div class="cf-info">
|
||||
<p><strong>Keterangan tingkat keyakinan:</strong></p>
|
||||
<ul>
|
||||
<li><strong>Pasti (100%)</strong>: Anda yakin 100% gejala ini terjadi</li>
|
||||
<!-- <li><strong>Pasti (100%)</strong>: Anda yakin 100% gejala ini terjadi</li> -->
|
||||
<li><strong>Hampir Pasti (80%)</strong>: Anda cukup yakin gejala ini terjadi</li>
|
||||
<li><strong>Kemungkinan Besar (60%)</strong>: Anda melihat gejala ini ada tapi tidak terlalu jelas</li>
|
||||
<li><strong>Mungkin (40%)</strong>: Anda tidak yakin tapi ada kemungkinan gejala ini terjadi</li>
|
||||
<li><strong>Tidak Yakin (20%)</strong>: Anda sama sekali tidak yakin/tidak tahu</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
@ -241,7 +242,7 @@ function updateDropdownOptions() {
|
|||
}].concat(
|
||||
gejalaList.map(g => ({
|
||||
value: g.id,
|
||||
label: g.nama_gejala,
|
||||
label: `${g.kode_gejala} - ${g.nama_gejala}`, // <- update label jadi kode - nama
|
||||
disabled: selectedValues.includes(String(g.id)) && String(g.id) !== currentValue,
|
||||
selected: String(g.id) === currentValue
|
||||
}))
|
||||
|
@ -260,10 +261,6 @@ function updateDropdownOptions() {
|
|||
value: '',
|
||||
label: 'Kondisi',
|
||||
selected: currentValue === ''
|
||||
}, {
|
||||
value: '1.0',
|
||||
label: 'Pasti (100%)',
|
||||
selected: currentValue === '1.0'
|
||||
}, {
|
||||
value: '0.8',
|
||||
label: 'Hampir Pasti (80%)',
|
||||
|
@ -276,6 +273,10 @@ function updateDropdownOptions() {
|
|||
value: '0.4',
|
||||
label: 'Mungkin (40%)',
|
||||
selected: currentValue === '0.4'
|
||||
}, {
|
||||
value: '0.2',
|
||||
label: 'Tidak Yakin (20%)',
|
||||
selected: currentValue === '0.2'
|
||||
}],
|
||||
'value',
|
||||
'label',
|
||||
|
@ -308,23 +309,20 @@ function updateDropdownOptions() {
|
|||
<div class="select-wrapper">
|
||||
<select name="gejala[]" class="form-control input-lg mt-2 gejala-select">
|
||||
<option value="">Pilih Gejala</option>
|
||||
@foreach($gejala_list as $gejala)
|
||||
<option value="{{ $gejala->id }}">{{ $gejala->nama_gejala }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="select-wrapper">
|
||||
<select name="cf_user[]" class="form-control input-lg mt-2 cf-select">
|
||||
<option value="">Kondisi</option>
|
||||
<option value="1.0">Pasti (100%)</option>
|
||||
<option value="0.8">Hampir Pasti (80%)</option>
|
||||
<option value="0.6">Kemungkinan Besar (60%)</option>
|
||||
<option value="0.4">Mungkin (40%)</option>
|
||||
<option value="0">Tidak Tahu (0%)</option>
|
||||
<option value="0.2">Tidak Yakin (20%)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
|
||||
$("#gejala-container").append(newDropdown);
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
@section('title', 'Hasil Diagnosa')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="main-banner wow fadeIn" id="diagnosa" data-wow-duration="1s" data-wow-delay="0.5s">
|
||||
<div class="banner-top"></div>
|
||||
<div class="banner-bottom"></div>
|
||||
|
@ -12,7 +13,6 @@
|
|||
// Bersihkan nilai agar hanya angka
|
||||
$nilai_angka = isset($riwayat->nilai) ? preg_replace('/[^0-9.]/', '', $riwayat->nilai) : null;
|
||||
@endphp
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<!-- Informasi Petani -->
|
||||
|
@ -44,7 +44,9 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th>Gambar Penyakit</th>
|
||||
<td><img src="{{ asset('assets/images/' . $riwayat->penyakit->gambar) }}" alt="Gambar Penyakit" style="width: 200px; height: auto;" /></td>
|
||||
<td>
|
||||
<img src="{{ asset('assets/images/' . $riwayat->penyakit->gambar) }}" alt="Gambar Penyakit" style="width: 200px; height: auto;" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Presentase Diagnosa -->
|
||||
|
@ -56,7 +58,21 @@
|
|||
<!-- Penanganan -->
|
||||
<tr>
|
||||
<th>Penanganan</th>
|
||||
<td>{{ $riwayat->penyakit->penanganan ?? '-' }}</td>
|
||||
<td>
|
||||
@if(!empty($riwayat->penyakit->penanganan))
|
||||
@php
|
||||
// Pisah penanganan berdasarkan baris baru (newline)
|
||||
$list_penanganan = preg_split('/\r\n|\r|\n/', $riwayat->penyakit->penanganan);
|
||||
@endphp
|
||||
<ul>
|
||||
@foreach($list_penanganan as $item)
|
||||
<li>{{ $item }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -64,9 +80,29 @@
|
|||
<div class="text-center mt-3">
|
||||
<a href="{{ route('history') }}" class="btn btn-secondary">Kembali ke Riwayat</a>
|
||||
<a href="{{ route('history.print', $riwayat->id_riwayat) }}" target="_blank" class="btn btn-primary">Cetak</a>
|
||||
<!-- <button class="btn btn-primary" onclick="window.print()">Cetak</button> -->
|
||||
</div>
|
||||
|
||||
{{-- Kemungkinan Penyakit Lainnya --}}
|
||||
@if(!empty($alternativeDiagnoses))
|
||||
<div class="container mt-5" style="max-width: 900px;">
|
||||
<div class="card">
|
||||
<div class="card-header bg-info text-white">
|
||||
Kemungkinan Penyakit Lainnya
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@foreach($alternativeDiagnoses as $diagnosa)
|
||||
<div class="border-bottom py-2 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<strong>{{ $diagnosa['penyakit']['nama_penyakit'] }}</strong>
|
||||
<div class="text-muted">Kemungkinan: {{ number_format($diagnosa['nilai'] * 100, 2) }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@endsection
|
|
@ -198,6 +198,18 @@
|
|||
animation: slideIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.popup-overlay .popup-box {
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
transition: width 0.3s ease, min-height 0.3s ease;
|
||||
/* style lain seperti sebelumnya */
|
||||
}
|
||||
|
||||
.popup-overlay .popup-box.password-tab {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
@ -374,6 +386,29 @@ function togglePopup() {
|
|||
}
|
||||
|
||||
// Tab switching functionality
|
||||
function openTab(tabId, btn) {
|
||||
// Hide semua tab-content
|
||||
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
|
||||
|
||||
// Hapus active dari semua tombol tab
|
||||
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
|
||||
|
||||
// Show tab yang diklik
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
|
||||
// Tambahkan active pada tombol yang diklik
|
||||
btn.classList.add('active');
|
||||
|
||||
// Ambil popup-box
|
||||
const popupBox = document.querySelector('.popup-overlay .popup-box');
|
||||
|
||||
if (tabId === 'passwordTab') {
|
||||
popupBox.classList.add('password-tab');
|
||||
} else {
|
||||
popupBox.classList.remove('password-tab');
|
||||
}
|
||||
}
|
||||
|
||||
function openTab(tabName, buttonElement) {
|
||||
// Hide all tab contents
|
||||
const tabContents = document.getElementsByClassName("tab-content");
|
||||
|
|
|
@ -85,10 +85,46 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th>Penanganan</th>
|
||||
<td>{{ $riwayat->penyakit->penanganan ?? '-' }}</td>
|
||||
<td>
|
||||
@if(!empty($riwayat->penyakit->penanganan))
|
||||
@php
|
||||
$list_penanganan = preg_split('/\r\n|\r|\n/', $riwayat->penyakit->penanganan);
|
||||
@endphp
|
||||
<ul>
|
||||
@foreach($list_penanganan as $item)
|
||||
<li>{{ $item }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
|
||||
{{-- Tambahkan section kemungkinan penyakit lainnya --}}
|
||||
@if(!empty($alternativeDiagnoses) && count($alternativeDiagnoses) > 0)
|
||||
<h5>Alternatif Kemungkinan Penyakit Lainnya</h5>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nama Penyakit</th>
|
||||
<th>Persentase</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($alternativeDiagnoses as $alt)
|
||||
<tr>
|
||||
<td>{{ $alt['penyakit']['nama_penyakit'] ?? '-' }}</td>
|
||||
<td>{{ number_format($alt['nilai'] * 100, 2) }}%</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="text-center mt-4 no-print">
|
||||
@if ($role === 'admin')
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
|
||||
<section class="section-container">
|
||||
<h2 class="section-title">Penanganan</h2>
|
||||
<h2 class="section-title">Pengendalian</h2>
|
||||
<ol class="section-text" style="font-weight: 600; font-size: 15px;">
|
||||
@foreach(explode("\n", $penyakit->penanganan) as $item)
|
||||
<li>{{ $item }}</li>
|
||||
|
|
|
@ -2,404 +2,442 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1">
|
||||
<title>@yield('title', 'Login System')</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1">
|
||||
<title>@yield('title', 'Login System')</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link rel="icon" href="{{ asset('bawang.ico') }}" type="image/x-icon">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link rel="icon" href="{{ asset('bawang.ico') }}" type="image/x-icon">
|
||||
|
||||
<!-- Additional CSS Files -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/fontawesome.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/templatemo-space-dynamic.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/animated.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/owl.css') }}">
|
||||
<!-- Additional CSS Files -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/fontawesome.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/templatemo-space-dynamic.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/animated.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/owl.css') }}">
|
||||
|
||||
<style>
|
||||
/* Overlay untuk popup */
|
||||
.overlay-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
<style>
|
||||
/* Overlay untuk popup */
|
||||
.overlay-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Popup aktif */
|
||||
.overlay-container.show {
|
||||
display: flex;
|
||||
}
|
||||
/* Popup aktif */
|
||||
.overlay-container.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Kotak popup */
|
||||
.popup-box {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 90%;
|
||||
position: relative;
|
||||
animation: fadeInUp 0.3s ease-out forwards;
|
||||
}
|
||||
/* Kotak popup */
|
||||
.popup-box {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 90%;
|
||||
position: relative;
|
||||
animation: fadeInUp 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Animasi untuk fade-in popup */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Animasi untuk fade-in popup */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.popup-box h2 {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: #fe3f40;
|
||||
text-align: center;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tab navigation styles */
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.popup-box h2 {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: #fe3f40;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
color: #555;
|
||||
}
|
||||
/* Tab navigation styles */
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: #fe3f40;
|
||||
color: white;
|
||||
}
|
||||
.tab-button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Tab content styles */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
.tab-button.active {
|
||||
background: #fe3f40;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
/* Tab content styles */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Form container */
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Form layout improvements */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
/* Form container */
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
/* Form layout improvements */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Label and input styling */
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
}
|
||||
.form-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
/* Label and input styling */
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #fe3f40;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(254, 63, 64, 0.1);
|
||||
}
|
||||
.form-input {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
.form-input:focus {
|
||||
border-color: #fe3f40;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(254, 63, 64, 0.1);
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.btn-submit, .btn-close-popup {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 5px;
|
||||
}
|
||||
textarea.form-input {
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #fe3f40;
|
||||
color: white;
|
||||
}
|
||||
/* Button styling */
|
||||
.btn-submit,
|
||||
.btn-close-popup {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background-color: #e53638;
|
||||
}
|
||||
.btn-submit {
|
||||
background-color: #fe3f40;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-close-popup {
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn-submit:hover {
|
||||
background-color: #e53638;
|
||||
}
|
||||
|
||||
.btn-close-popup:hover {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
.btn-close-popup {
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Success notification */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 10001;
|
||||
animation: slideIn 0.3s ease-out forwards;
|
||||
}
|
||||
.btn-close-popup:hover {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
/* Success notification */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 10001;
|
||||
animation: slideIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.popup-box {
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
transition: width 0.3s ease, min-height 0.3s ease;
|
||||
/* style lain seperti sebelumnya */
|
||||
}
|
||||
|
||||
.popup-box {
|
||||
width: 85%;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.popup-box.password-tab {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.popup-box {
|
||||
width: 85%;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav class="main-nav">
|
||||
<!-- ***** Logo Start ***** -->
|
||||
<a href="" class="logo">
|
||||
<h4>Shallot<span>Detect</span></h4>
|
||||
</a>
|
||||
<!-- ***** Logo End ***** -->
|
||||
<!-- ***** Menu Start ***** -->
|
||||
<ul class="nav">
|
||||
<li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
|
||||
<li class="scroll-to-section"><a href="#about">Basic Pengetahuan</a></li>
|
||||
<li class="scroll-to-section"><a href="#PP">Panduan Penggunaan</a></li>
|
||||
<li class="scroll-to-section"><a href="#tentang">Tentang Pakar</a></li>
|
||||
<li><a href="{{ route('diagnosa') }}">Diagnosa</a></li>
|
||||
<li class="d-flex align-items-center">
|
||||
@if(Auth::check())
|
||||
<a href="#" class="main-red-button" onclick="togglePopup()">Profil</a>
|
||||
<a href="#" class="main-red-button"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
||||
Logout
|
||||
</a>
|
||||
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
|
||||
@csrf
|
||||
</form>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="main-red-button">Login</a>
|
||||
@endif
|
||||
</li>
|
||||
</ul>
|
||||
<a class='menu-trigger'>
|
||||
<span>Menu</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav class="main-nav">
|
||||
<!-- ***** Logo Start ***** -->
|
||||
<a href="" class="logo">
|
||||
<h4>Shallot<span>Detect</span></h4>
|
||||
</a>
|
||||
<!-- ***** Logo End ***** -->
|
||||
<!-- ***** Menu Start ***** -->
|
||||
<ul class="nav">
|
||||
<li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
|
||||
<li class="scroll-to-section"><a href="#about">Basic Pengetahuan</a></li>
|
||||
<li class="scroll-to-section"><a href="#PP">Panduan Penggunaan</a></li>
|
||||
<li class="scroll-to-section"><a href="#tentang">Tentang Pakar</a></li>
|
||||
<li><a href="{{ route('diagnosa') }}">Diagnosa</a></li>
|
||||
<li class="d-flex align-items-center">
|
||||
@if(Auth::check())
|
||||
<a href="#" class="main-red-button" onclick="togglePopup()">Profil</a>
|
||||
<a href="#" class="main-red-button"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
||||
Logout
|
||||
</a>
|
||||
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
|
||||
@csrf
|
||||
</form>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="main-red-button">Login</a>
|
||||
@endif
|
||||
</li>
|
||||
</ul>
|
||||
<a class='menu-trigger'>
|
||||
<span>Menu</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@if(session('success'))
|
||||
<div id="flash-success" class="notification">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
const flash = document.getElementById('flash-success');
|
||||
if (flash) {
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateX(50px)';
|
||||
flash.style.transition = 'all 0.3s ease';
|
||||
setTimeout(() => flash.remove(), 300);
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
@endif
|
||||
@if(session('success'))
|
||||
<div id="flash-success" class="notification">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
const flash = document.getElementById('flash-success');
|
||||
if (flash) {
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateX(50px)';
|
||||
flash.style.transition = 'all 0.3s ease';
|
||||
setTimeout(() => flash.remove(), 300);
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
@endif
|
||||
|
||||
<!-- Popup Profil -->
|
||||
<div id="popupOverlay" class="overlay-container">
|
||||
<div class="popup-box">
|
||||
<h2>PROFIL</h2>
|
||||
<!-- Popup Profil -->
|
||||
<div id="popupOverlay" class="overlay-container">
|
||||
<div class="popup-box">
|
||||
<h2>PROFIL</h2>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-navigation">
|
||||
<button class="tab-button active" onclick="openTab('profileTab', this)">Profile</button>
|
||||
<button class="tab-button" onclick="openTab('passwordTab', this)">Password</button>
|
||||
</div>
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-navigation">
|
||||
<button class="tab-button active" onclick="openTab('profileTab', this)">Profile</button>
|
||||
<button class="tab-button" onclick="openTab('passwordTab', this)">Password</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile Tab Content -->
|
||||
<div id="profileTab" class="tab-content active">
|
||||
<form id="updateProfileForm" class="form-container" method="POST" action="{{ route('user.updateProfile') }}">
|
||||
@csrf
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<input class="form-input" type="text" id="username" name="username" value="{{ Auth::user()->username ?? 'Guest' }}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input class="form-input" type="email" id="email" name="email" value="{{ Auth::user()->email ?? 'Guest' }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Profile Tab Content -->
|
||||
<div id="profileTab" class="tab-content active">
|
||||
<form id="updateProfileForm" class="form-container" method="POST" action="{{ route('user.updateProfile') }}">
|
||||
@csrf
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<input class="form-input" type="text" id="username" name="username" value="{{ Auth::user()->username ?? 'Guest' }}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input class="form-input" type="email" id="email" name="email" value="{{ Auth::user()->email ?? 'Guest' }}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="umur">Umur</label>
|
||||
<input class="form-input" type="number" id="umur" name="umur" value="{{ Auth::user()->umur ?? '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="telp">Telp</label>
|
||||
<input class="form-input" type="text" id="telp" name="telp" value="{{ Auth::user()->telp ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="umur">Umur</label>
|
||||
<input class="form-input" type="number" id="umur" name="umur" value="{{ Auth::user()->umur ?? '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="telp">Telp</label>
|
||||
<input class="form-input" type="text" id="telp" name="telp" value="{{ Auth::user()->telp ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="alamat">Alamat</label>
|
||||
<textarea class="form-input" id="alamat" name="alamat" rows="2">{{ Auth::user()->alamat ?? '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="alamat">Alamat</label>
|
||||
<textarea class="form-input" id="alamat" name="alamat" rows="2">{{ Auth::user()->alamat ?? '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn-submit" type="submit">
|
||||
Update Profile
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button class="btn-submit" type="submit">
|
||||
Update Profile
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Password Tab Content -->
|
||||
<div id="passwordTab" class="tab-content">
|
||||
<form id="updatePasswordForm" class="form-container" method="POST" action="{{ route('user.updatePassword') }}">
|
||||
@csrf
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="passupdate">Password Baru</label>
|
||||
<input class="form-input" type="password" id="passupdate" name="passupdate" placeholder="Masukkan Password Baru" required>
|
||||
</div>
|
||||
<!-- Password Tab Content -->
|
||||
<div id="passwordTab" class="tab-content">
|
||||
<form id="updatePasswordForm" class="form-container" method="POST" action="{{ route('user.updatePassword') }}">
|
||||
@csrf
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="passupdate">Password Baru</label>
|
||||
<input class="form-input" type="password" id="passupdate" name="passupdate" placeholder="Masukkan Password Baru" required>
|
||||
</div>
|
||||
|
||||
<button class="btn-submit" type="submit">
|
||||
Update Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button class="btn-submit" type="submit">
|
||||
Update Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button class="btn-close-popup" onclick="togglePopup()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-close-popup" onclick="togglePopup()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
@yield('content')
|
||||
</div>
|
||||
<div class="content">
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.25s">
|
||||
<p>© Copyright 2024 by Ihya Ulumuddin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.25s">
|
||||
<p>© Copyright 2024 by Ihya Ulumuddin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/owl-carousel.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/animation.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/imagesloaded.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/templatemo-custom.js') }}"></script>
|
||||
<!-- Scripts -->
|
||||
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/owl-carousel.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/animation.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/imagesloaded.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/templatemo-custom.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// Toggle popup visibility
|
||||
function togglePopup() {
|
||||
const popup = document.getElementById('popupOverlay');
|
||||
popup.classList.toggle('show');
|
||||
}
|
||||
<script>
|
||||
// Toggle popup visibility
|
||||
function togglePopup() {
|
||||
const popup = document.getElementById('popupOverlay');
|
||||
popup.classList.toggle('show');
|
||||
}
|
||||
|
||||
// Tab switching functionality
|
||||
function openTab(tabName, buttonElement) {
|
||||
// Hide all tab contents
|
||||
const tabContents = document.getElementsByClassName("tab-content");
|
||||
for (let i = 0; i < tabContents.length; i++) {
|
||||
tabContents[i].classList.remove("active");
|
||||
}
|
||||
function openTab(tabId, btn) {
|
||||
// Hide semua tab-content
|
||||
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
|
||||
|
||||
// Remove active class from all tab buttons
|
||||
const tabButtons = document.getElementsByClassName("tab-button");
|
||||
for (let i = 0; i < tabButtons.length; i++) {
|
||||
tabButtons[i].classList.remove("active");
|
||||
}
|
||||
// Hapus active dari semua tombol tab
|
||||
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
|
||||
|
||||
// Show the selected tab content
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
|
||||
// Add active class to the clicked button
|
||||
buttonElement.classList.add("active");
|
||||
}
|
||||
</script>
|
||||
// Show tab yang diklik
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
|
||||
// Tambahkan active pada tombol yang diklik
|
||||
btn.classList.add('active');
|
||||
|
||||
// Ambil popup-box
|
||||
const popupBox = document.querySelector('.popup-overlay .popup-box');
|
||||
|
||||
if (tabId === 'passwordTab') {
|
||||
popupBox.classList.add('password-tab');
|
||||
} else {
|
||||
popupBox.classList.remove('password-tab');
|
||||
}
|
||||
}
|
||||
|
||||
// Tab switching functionality
|
||||
function openTab(tabName, buttonElement) {
|
||||
// Hide all tab contents
|
||||
const tabContents = document.getElementsByClassName("tab-content");
|
||||
for (let i = 0; i < tabContents.length; i++) {
|
||||
tabContents[i].classList.remove("active");
|
||||
}
|
||||
|
||||
// Remove active class from all tab buttons
|
||||
const tabButtons = document.getElementsByClassName("tab-button");
|
||||
for (let i = 0; i < tabButtons.length; i++) {
|
||||
tabButtons[i].classList.remove("active");
|
||||
}
|
||||
|
||||
// Show the selected tab content
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
|
||||
// Add active class to the clicked button
|
||||
buttonElement.classList.add("active");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -5,7 +5,7 @@
|
|||
@section('content')
|
||||
<div class="register">
|
||||
|
||||
<h1>Register dulu gan</h1>
|
||||
<h1>Register dulu </h1>
|
||||
|
||||
<form action="{{ route('register') }}" method="post" class="form register-form">
|
||||
|
||||
|
|
Loading…
Reference in New Issue