433 lines
18 KiB
PHP
433 lines
18 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>Book your medical appointment in just a few simple steps. Our experienced healthcare professionals
|
|
are ready to provide you with the best care possible.</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">
|
|
<form action="forms/book-appointment.php" method="post" class="php-email-form">
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<input type="text" name="name" class="form-control" placeholder="Full Name" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="email" name="email" class="form-control" placeholder="Email Address" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<select name="department" class="form-select" required="">
|
|
<option value="">Select Department</option>
|
|
<option value="general">General Consultation</option>
|
|
<option value="cardiology">Cardiology</option>
|
|
<option value="neurology">Neurology</option>
|
|
<option value="orthopedics">Orthopedics</option>
|
|
<option value="pediatrics">Pediatrics</option>
|
|
<option value="dermatology">Dermatology</option>
|
|
<option value="oncology">Oncology</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="date" name="date" class="form-control" required="">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<select name="doctor" class="form-select" required="">
|
|
<option value="">Select Doctor</option>
|
|
<option value="dr-sarah-johnson">Dr. Sarah Johnson</option>
|
|
<option value="dr-michael-chen">Dr. Michael Chen</option>
|
|
<option value="dr-emily-davis">Dr. Emily Davis</option>
|
|
<option value="dr-robert-smith">Dr. Robert Smith</option>
|
|
<option value="dr-lisa-brown">Dr. Lisa Brown</option>
|
|
<option value="dr-david-wilson">Dr. David Wilson</option>
|
|
<option value="dr-maria-rodriguez">Dr. Maria Rodriguez</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea name="message" class="form-control" rows="4"
|
|
placeholder="Additional notes or symptoms (optional)"></textarea>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="loading">Loading</div>
|
|
<div class="error-message"></div>
|
|
<div class="sent-message">Your appointment has been scheduled. Thank you!</div>
|
|
<button type="submit" class="btn-book">Book Appointment Now</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="emergency-info" data-aos="fade-up" data-aos-delay="500">
|
|
<p><i class="bi bi-exclamation-triangle"></i> For medical emergencies, please call <strong>911</strong>
|
|
or go to the nearest emergency room.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Appointmnet Section -->
|
|
@endsection |