497 lines
20 KiB
PHP
497 lines
20 KiB
PHP
@section('title', 'Beranda')
|
|
@extends('user.layouts.index')
|
|
@section('content')
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="hero-content">
|
|
|
|
<h1 data-aos="fade-right" data-aos-delay="300">
|
|
Anxiety Detection <span class="highlight">Support System</span> for Psychological Consultation
|
|
</h1>
|
|
|
|
<p class="hero-description" data-aos="fade-right" data-aos-delay="400">
|
|
Sistem berbasis web yang membantu proses asesmen kecemasan melalui analisis pergerakan pupil mata menggunakan teknologi eye-tracking dan machine learning.
|
|
</p>
|
|
|
|
<div class="hero-actions" data-aos="fade-right" data-aos-delay="600">
|
|
<a href="{{ route('beranda.about') }}" class="btn btn-primary">Learn About The System</a>
|
|
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="btn btn-outline glightbox">
|
|
<i class="bi bi-archive me-2"></i>
|
|
View Research
|
|
</a>
|
|
</div>
|
|
|
|
<div class="emergency-contact" data-aos="fade-right" data-aos-delay="700">
|
|
<div class="emergency-icon">
|
|
<i class="bi bi-telephone-fill"></i>
|
|
</div>
|
|
<div class="emergency-info">
|
|
<small>Hubungi Kami</small>
|
|
<strong>+62 8233-7341-446</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="hero-visual" data-aos="fade-left" data-aos-delay="400">
|
|
<div class="main-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/staff-10.webp') }}" alt="Modern Healthcare Facility" class="img-fluid">
|
|
<div class="floating-card appointment-card">
|
|
<div class="card-icon">
|
|
<i class="bi bi-calendar-check"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h6>Next Available</h6>
|
|
<p>Today 2:30 PM</p>
|
|
<small>Dr. Sarah Johnson</small>
|
|
</div>
|
|
</div>
|
|
<div class="floating-card rating-card">
|
|
<div class="card-content">
|
|
<div class="rating-stars">
|
|
<i class="bi bi-star-fill"></i>
|
|
<i class="bi bi-star-fill"></i>
|
|
<i class="bi bi-star-fill"></i>
|
|
<i class="bi bi-star-fill"></i>
|
|
<i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<h6>4.9/5</h6>
|
|
<small>1,234 Reviews</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="background-elements">
|
|
<div class="element element-1"></div>
|
|
<div class="element element-2"></div>
|
|
<div class="element element-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Home About Section -->
|
|
<section id="home-about" class="home-about section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right" data-aos-delay="200">
|
|
<div class="about-content">
|
|
<h2 class="section-heading">About the System</h2>
|
|
<p class="lead-text">Sistem ini dirancang untuk membantu mendeteksi tingkat kecemasan seseorang secara otomatis menggunakan analisis pergerakan pupil mata.
|
|
Sistem menggunakan kamera untuk menangkap pergerakan mata dan memprosesnya menggunakan algoritma machine learning.
|
|
</p>
|
|
<p>
|
|
Sistem ini dirancang sebagai alat bantu analisis dalam proses konsultasi dan bukan sebagai alat diagnosis mandiri. Interpretasi hasil tetap dilakukan oleh tenaga profesional.
|
|
</p>
|
|
|
|
<div class="cta-section">
|
|
<a href="about.html" class="btn-primary">Learn More About Us</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
|
|
<div class="about-visual">
|
|
<div class="main-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/facilities-9.webp') }}" alt="Modern medical facility" class="img-fluid">
|
|
</div>
|
|
{{-- <div class="floating-card">
|
|
<div class="card-content">
|
|
<div class="icon">
|
|
<i class="bi bi-heart-pulse"></i>
|
|
</div>
|
|
<div class="card-text">
|
|
<h4>Coba Kapan Saja</h4>
|
|
<p>Fitur kami tersedia 24/7</p>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
<div class="experience-badge">
|
|
<div class="badge-content">
|
|
<span class="years">50+</span>
|
|
<span class="text">Pengguna telah mencoba</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Home About Section -->
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services section">
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>How It Works</h2>
|
|
<p>How The System Works During Consultation</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="service-item">
|
|
<div class="service-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/cardiology-2.webp') }}" alt="Cardiology Services" class="img-fluid">
|
|
<div class="service-overlay">
|
|
<i class="fas fa-heartbeat"></i>
|
|
</div>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>Consultation Session Begins</h3>
|
|
<p>Pasien mengikuti sesi konsultasi dengan tenaga profesional.</p>
|
|
<div class="service-features">
|
|
<span class="feature-item"><i class="fas fa-check"></i> Wawancara</span>
|
|
<span class="feature-item"><i class="fas fa-check"></i> Menjawab soal tes</span>
|
|
</div>
|
|
<a href="service-details.html" class="service-btn">
|
|
<span>Learn More</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250">
|
|
<div class="service-item">
|
|
<div class="service-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/neurology-3.webp') }}" alt="Neurology Services" class="img-fluid">
|
|
<div class="service-overlay">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>Eye Movement Capture</h3>
|
|
<p>Kamera merekam pergerakan pupil selama proses asesmen.</p>
|
|
<div class="service-features">
|
|
<span class="feature-item"><i class="fas fa-check"></i> Alat Khusus</span>
|
|
<span class="feature-item"><i class="fas fa-check"></i> Durasi</span>
|
|
</div>
|
|
<a href="service-details.html" class="service-btn">
|
|
<span>Learn More</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="service-item">
|
|
<div class="service-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/orthopedics-1.webp') }}" alt="Orthopedics Services" class="img-fluid">
|
|
<div class="service-overlay">
|
|
<i class="fas fa-bone"></i>
|
|
</div>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>Feature Analysis</h3>
|
|
<p>Sistem menganalisis pola pergerakan mata.
|
|
</p>
|
|
<div class="service-features">
|
|
<span class="feature-item"><i class="fas fa-check"></i> Hasil Analisis</span>
|
|
<span class="feature-item"><i class="fas fa-check"></i> Grafik dan Chart</span>
|
|
</div>
|
|
<a href="service-details.html" class="service-btn">
|
|
<span>Learn More</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="350">
|
|
<div class="service-item">
|
|
<div class="service-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/pediatrics-4.webp') }}" alt="Pediatrics Services" class="img-fluid">
|
|
<div class="service-overlay">
|
|
<i class="fas fa-child"></i>
|
|
</div>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>Anxiety Level Estimation</h3>
|
|
<p>Model machine learning memprediksi tingkat kecemasan.</p>
|
|
<div class="service-features">
|
|
<span class="feature-item"><i class="fas fa-check"></i> Pre-trained Model</span>
|
|
<span class="feature-item"><i class="fas fa-check"></i> Diawasi Pakar</span>
|
|
</div>
|
|
<a href="service-details.html" class="service-btn">
|
|
<span>Learn More</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="service-item">
|
|
<div class="service-image">
|
|
<img src="{{ asset('assets/users/assets/img/health/emergency-2.webp') }}" alt="Emergency Services" class="img-fluid">
|
|
<div class="service-overlay">
|
|
<i class="fas fa-ambulance"></i>
|
|
</div>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>Result for Professional Review</h3>
|
|
<p>Hasil analisis digunakan sebagai bahan pertimbangan dalam konsultasi.</p>
|
|
<div class="service-features">
|
|
<span class="feature-item"><i class="fas fa-check"></i> Report</span>
|
|
{{-- <span class="feature-item"><i class="fas fa-check"></i> </span> --}}
|
|
</div>
|
|
<a href="service-details.html" class="service-btn">
|
|
<span>Learn More</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
</div>
|
|
</div>
|
|
</section><!-- /Services Section -->
|
|
|
|
<!-- Team Research Section -->
|
|
<section id="find-a-doctor" class="find-a-doctor section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title p-0" data-aos="fade-up">
|
|
<h2>Research Team</h2>
|
|
<p>Tim yang terlibat dalam penelitian ini</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="doctors-grid" data-aos="fade-up" data-aos-delay="300">
|
|
|
|
<div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
|
|
<div class="profile-header">
|
|
<div class="doctor-avatar">
|
|
<img src="{{ asset('assets/users/assets/img/person/mahayoga.jpg') }}" alt="Mahayoga Ksatria Hanafi Bahtiar" class="img-fluid">
|
|
</div>
|
|
<div class="doctor-details">
|
|
<h4>Mahayoga Ksatria Hanafi Bahtiar</h4>
|
|
<span class="specialty-tag">Mahasiswa</span>
|
|
<div class="experience-info">
|
|
<i class="bi bi-compass"></i>
|
|
<span>Politeknik Negeri Jember</span>
|
|
</div>
|
|
<div class="experience-info">
|
|
<i class="bi bi-envelope"></i>
|
|
<span>myoga.bahtiar@gmail.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Doctor Profile -->
|
|
|
|
<div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
|
|
<div class="profile-header">
|
|
<div class="doctor-avatar">
|
|
<img src="{{ asset('assets/users/assets/img/person/khafid.png') }}" alt="Khafidurrohman Agustianto, S.Pd, M.Eng" class="img-fluid">
|
|
</div>
|
|
<div class="doctor-details">
|
|
<h4>Khafidurrohman Agustianto, S.Pd, M.Eng</h4>
|
|
<span class="specialty-tag">Dosen Pembimbing</span>
|
|
<div class="experience-info">
|
|
<i class="bi bi-compass"></i>
|
|
<span>Politeknik Negeri Jember</span>
|
|
</div>
|
|
<div class="experience-info">
|
|
<i class="bi bi-envelope"></i>
|
|
<span>khafid@polije.ac.id</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Doctor Profile -->
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Team Research Section -->
|
|
|
|
<!-- Appointmnet Section -->
|
|
<section id="appointmnet" class="appointmnet section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title my-5 p-0" data-aos="fade-up">
|
|
<h1>Make an Appointment</h1>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-10 mx-auto">
|
|
<div class="booking-wrapper">
|
|
<div class="booking-header text-center" data-aos="fade-up" data-aos-delay="200">
|
|
<h2>Schedule Your Appointment</h2>
|
|
<p>Jika ingin mencoba sistem kami, jadwalkan periksa kamu dengan mengisi form dibawah ini yaa! Dan batalkan kapan saja!</p>
|
|
</div>
|
|
|
|
<div class="booking-steps" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="step">
|
|
<div class="step-icon">
|
|
<i class="bi bi-calendar-check"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<h4>Select Service</h4>
|
|
<p>Choose the medical service you need</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-icon">
|
|
<i class="bi bi-clock"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<h4>Pick Date & Time</h4>
|
|
<p>Select your preferred appointment slot</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-icon">
|
|
<i class="bi bi-person-check"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<h4>Confirm Details</h4>
|
|
<p>Provide your information and confirm</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="appointment-form" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="php-email-form">
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<input type="text" name="nama_lengkap" id="nama_lengkap" class="form-control" placeholder="Nama Lengkap" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="email" name="email" id="email" class="form-control" placeholder="Alamat Email Aktif" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="tel" name="phone" id="no_telp" class="form-control" placeholder="Nomor Telepon" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="text" name="date" id="tgl_book" class="form-control" required="" aria-describedby="dateHelp" placeholder="Pilih tanggal...">
|
|
<div id="dateHelp" class="form-text">Untuk detail jam, akan dikirim melalui email mu yaa.</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea name="message" class="form-control" rows="4" id="deskripsi"
|
|
placeholder="Tambahan deskripsi (optional)"></textarea>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="loading" id="loading_btn">Loading</div>
|
|
<div class="alert alert-danger" id="error_msg" role="alert" style="display: none"></div>
|
|
<div class="sent-message">Your appointment has been scheduled. Thank you!</div>
|
|
<button type="button" class="btn-book" onclick="sendAppointment()">Book Appointment Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="emergency-info" data-aos="fade-up" data-aos-delay="500">
|
|
<p><i class="bi bi-exclamation-triangle"></i> Untuk darurat, harap hubungi <strong>112</strong>
|
|
atau kunjungi rumah sakit terdekat.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Appointmnet Section -->
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
function sendAppointment() {
|
|
$('#error_msg').hide();
|
|
|
|
let name = $('#nama_lengkap').val();
|
|
let email = $('#email').val();
|
|
let no_telp = $('#no_telp').val();
|
|
let tgl_book = $('#tgl_book').val();
|
|
let deskripsi = $('#deskripsi').val();
|
|
|
|
if(!name) {
|
|
$('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nama lengkap kamu yaa!');
|
|
$('#error_msg').show();
|
|
}
|
|
if(!email) {
|
|
$('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi email kamu yaa!');
|
|
$('#error_msg').show();
|
|
}
|
|
if(!no_telp) {
|
|
$('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nomor telepon kamu kamu yaa!');
|
|
$('#error_msg').show();
|
|
}
|
|
if(!tgl_book) {
|
|
$('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi tanggal booking kamu yaa!');
|
|
$('#error_msg').show();
|
|
}
|
|
|
|
let xhttp = new XMLHttpRequest();
|
|
let formData = new FormData();
|
|
|
|
formData.append('nama_lengkap', name);
|
|
formData.append('email', email);
|
|
formData.append('no_telp', no_telp);
|
|
formData.append('tgl_booking', tgl_book);
|
|
if(!deskripsi) {
|
|
formData.append('deskripsi_tambahan', 'Tidak ada (tidak diisi)');
|
|
} else {
|
|
formData.append('deskripsi_tambahan', deskripsi);
|
|
}
|
|
formData.append('_token', document.getElementById('_token').getAttribute('value'));
|
|
|
|
xhttp.onreadystatechange = function() {
|
|
if(this.readyState == 4 && this.status == 200) {
|
|
let response = JSON.parse(this.responseText);
|
|
if(response.status) {
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Kamu berhasil daftar. Cek email kamu untuk lebih lanjut!",
|
|
icon: "success"
|
|
});
|
|
$('#nama_lengkap').val('');
|
|
$('#email').val('');
|
|
$('#no_telp').val('');
|
|
$('#tgl_book').val('');
|
|
$('#deskripsi').val('');
|
|
} else if(response.status == false) {
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Terjadi kesalahan, coba ulangi lagi yaa!",
|
|
icon: "warning"
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Terjadi kesalahan dari server, coba lagi nanti!",
|
|
icon: "danger"
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
xhttp.open('POST', '{{ route('booking.store') }}');
|
|
xhttp.send(formData);
|
|
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
flatpickr("#tgl_book", {
|
|
enableTime: false,
|
|
dateFormat: "Y-m-d",
|
|
minDate: 'today',
|
|
maxDate: new Date().fp_incr(7)
|
|
});
|
|
});
|
|
</script>
|
|
@endsection |