alyaaghania
/
MIF_E31230266
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update sistem

This commit is contained in:
alyaaghania 2026-04-15 20:35:00 +07:00
parent ba11f7f3b0
commit 7f316d73ed
84 changed files with 15602 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.editorconfig Normal file
View File

@ -0,0 +1,18 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{yml,yaml}]
indent_size = 2
[compose.yaml]
indent_size = 4

65
.env.example Normal file
View File

@ -0,0 +1,65 @@
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
APP_MAINTENANCE_DRIVER=file
# APP_MAINTENANCE_STORE=database
# PHP_CLI_SERVER_WORKERS=4
BCRYPT_ROUNDS=12
LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=
SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null
BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
CACHE_STORE=database
# CACHE_PREFIX=
MEMCACHED_HOST=127.0.0.1
REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=log
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
VITE_APP_NAME="${APP_NAME}"

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
*.log
.DS_Store
.env
.env.backup
.env.production
.phpactor.json
.phpunit.result.cache
/.fleet
/.idea
/.nova
/.phpunit.cache
/.vscode
/.zed
/auth.json
/node_modules
/public/build
/public/hot
/public/storage
/storage/*.key
/storage/pail
/vendor
Homestead.json
Homestead.yaml
Thumbs.db

59
README.md Normal file
View File

@ -0,0 +1,59 @@
<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
<p align="center">
<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
</p>
## About Laravel
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
- [Simple, fast routing engine](https://laravel.com/docs/routing).
- [Powerful dependency injection container](https://laravel.com/docs/container).
- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
- [Robust background job processing](https://laravel.com/docs/queues).
- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
Laravel is accessible, powerful, and provides tools required for large, robust applications.
## Learning Laravel
Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework. You can also check out [Laravel Learn](https://laravel.com/learn), where you will be guided through building a modern Laravel application.
If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
## Laravel Sponsors
We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
### Premium Partners
- **[Vehikl](https://vehikl.com)**
- **[Tighten Co.](https://tighten.co)**
- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
- **[64 Robots](https://64robots.com)**
- **[Curotec](https://www.curotec.com/services/technologies/laravel)**
- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
- **[Redberry](https://redberry.international/laravel-development)**
- **[Active Logic](https://activelogic.com)**
## Contributing
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
## Code of Conduct
In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
## Security Vulnerabilities
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
## License
The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

102
app/Http/Controllers/AuthController.php Normal file
View File

@ -0,0 +1,102 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Password;
use App\Models\User;
class AuthController extends Controller
{
// ── LOGIN ─────────────────────────────────────────
public function showLogin()
{
return view('login.welcome');
}
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => 'required',
]);
$credentials = $request->only('email', 'password');
$remember = $request->boolean('remember');
if (Auth::attempt($credentials, $remember)) {
$request->session()->regenerate();
return redirect()->intended(route('halaman.prediksi'));
}
return back()
->withInput($request->only('email'))
->with('error', 'Email atau password salah.');
}
// ── REGISTER ──────────────────────────────────────
public function showRegister()
{
return view('login.register');
}
public function register(Request $request)
{
$request->validate([
'email' => 'required|email|unique:users,email',
'password' => 'required|min:8|confirmed', // confirmed = butuh field password_confirmation
], [
'email.unique' => 'Email ini sudah terdaftar.',
'password.min' => 'Password minimal 8 karakter.',
'password.confirmed' => 'Konfirmasi password tidak cocok.',
]);
// Ambil nama dari bagian sebelum @ di email
$name = explode('@', $request->email)[0];
$user = User::create([
'name' => $name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
Auth::login($user);
return redirect()->route('halaman.prediksi');
}
// ── LUPA PASSWORD ─────────────────────────────────
public function showLupaPassword()
{
return view('login.lupa-password');
}
public function resetPassword(Request $request)
{
$request->validate([
'email' => 'required|email|exists:users,email',
'password' => 'required|min:8|confirmed',
], [
'email.exists' => 'Email tidak ditemukan.',
'password.min' => 'Password minimal 8 karakter.',
'password.confirmed' => 'Konfirmasi password tidak cocok.',
]);
User::where('email', $request->email)->update([
'password' => Hash::make($request->password),
]);
return redirect()->route('login')->with('success', 'Password berhasil diubah. Silakan masuk.');
}
// ── LOGOUT ────────────────────────────────────────
public function logout(Request $request)
{
Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return redirect('/');
}
}

8
app/Http/Controllers/Controller.php Normal file
View File

@ -0,0 +1,8 @@
<?php
namespace App\Http\Controllers;
abstract class Controller
{
//
}

49
app/Http/Controllers/GoogleAuthController.php Normal file
View File

@ -0,0 +1,49 @@
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
class GoogleAuthController extends Controller
{
// Redirect ke halaman login Google
public function redirect()
{
return Socialite::driver('google')
->with(['prompt' => 'select_account'])
->redirect();
}
// Callback setelah login Google berhasil
public function callback()
{
try {
$googleUser = Socialite::driver('google')->user();
$user = User::where('email', $googleUser->getEmail())->first();
if ($user) {
// Email sudah ada, update google_id saja
$user->update(['google_id' => $googleUser->getId()]);
} else {
// Email baru, buat akun baru
$user = User::create([
'name' => $googleUser->getName(),
'email' => $googleUser->getEmail(),
'google_id' => $googleUser->getId(),
'password' => null,
]);
}
Auth::login($user);
return redirect()->route('halaman.prediksi');
} catch (\Exception $e) {
return redirect()->route('login')
->with('error', $e->getMessage());
}
}
}

82
app/Http/Controllers/PrediksiController.php Normal file
View File

@ -0,0 +1,82 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Auth;
use App\Models\RiwayatPrediksi;
class PrediksiController extends Controller
{
// menampilkan halaman utama
public function index()
{
return view('tampilanutama.utama');
}
// proses prediksi ke Flask
public function proses(Request $request)
{
$data = $request->all();
$gejala = $request->gejala ?? [];
if (count($gejala) < 2) {
return redirect()->back()->with('error', 'Gejala yang dimasukkan belum cukup untuk melakukan prediksi penyakit.');
}
$response = Http::post('https://alyaghania.pythonanywhere.com/predict', [
"Smoking_Status" => $request->merokok == "ya" ? 1 : 0,
"Alcohol_Use" => $request->alkohol == "ya" ? 1 : 0,
"Stress_Level" => $request->stres == "ya" ? 1 : 0,
"Abdominal_Pain" => in_array("g1", $gejala) ? 1 : 0,
"Bloating" => in_array("g2", $gejala) ? 1 : 0,
"Heartburn" => in_array("g3", $gejala) ? 1 : 0,
"Rectal_Bleeding"=> in_array("g4", $gejala) ? 1 : 0,
"Appetite_Loss" => in_array("g5", $gejala) ? 1 : 0,
"Weight_Loss" => in_array("g6", $gejala) ? 1 : 0,
"NSAID_Use" => $request->obat == "ya" ? 1 : 0,
]);
$hasil = $response->json()['hasil_prediksi'] ?? "Tidak ada hasil";
$indikasi = $response->json()['indikasi_lain'] ?? [];
$mapping = [
'GASTRITIS' => 'Gastritis',
'GERD' => 'Gerd',
'DISPEPSIA' => 'Dispepsia',
];
$hasil = $mapping[$hasil] ?? $hasil;
// Simpan ke database
if ($hasil != "Tidak ada hasil" && Auth::check()) {
RiwayatPrediksi::create([
'user_id' => Auth::id(),
'nama' => Auth::user()->name, // ambil dari akun
'jenis_kelamin' => null,
'umur' => null,
'gejala' => $gejala,
'stres' => $request->stres,
'merokok' => $request->merokok,
'alkohol' => $request->alkohol,
'obat' => $request->obat,
'hasil' => $hasil,
'indikasi' => $indikasi
]);
}
return view('tampilanutama.prediksi', compact('hasil', 'data', 'indikasi'));
}
// riwayat prediksi
public function riwayat()
{
$riwayat = RiwayatPrediksi::where('user_id', Auth::id())
->orderBy('created_at', 'desc')
->get();
return view('tampilanutama.riwayat', compact('riwayat'));
}
}

34
app/Models/RiwayatPrediksi.php Normal file
View File

@ -0,0 +1,34 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class RiwayatPrediksi extends Model
{
protected $table = 'riwayat_prediksi';
protected $fillable = [
'user_id',
'nama',
'jenis_kelamin',
'umur',
'gejala',
'stres',
'merokok',
'alkohol',
'obat',
'hasil',
'indikasi',
];
protected $casts = [
'gejala' => 'array',
'indikasi' => 'array', // otomatis convert JSON ke array
];
public function user()
{
return $this->belongsTo(User::class);
}
}

48
app/Models/User.php Normal file
View File

@ -0,0 +1,48 @@
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
/** @use HasFactory<\Database\Factories\UserFactory> */
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var list<string>
*/
protected $fillable = [
'name',
'email',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var list<string>
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array<string, string>
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}

24
app/Providers/AppServiceProvider.php Normal file
View File

@ -0,0 +1,24 @@
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*/
public function register(): void
{
//
}
/**
* Bootstrap any application services.
*/
public function boot(): void
{
//
}
}

18
artisan Normal file
View File

@ -0,0 +1,18 @@
#!/usr/bin/env php
<?php
use Illuminate\Foundation\Application;
use Symfony\Component\Console\Input\ArgvInput;
define('LARAVEL_START', microtime(true));
// Register the Composer autoloader...
require __DIR__.'/vendor/autoload.php';
// Bootstrap Laravel and handle the command...
/** @var Application $app */
$app = require_once __DIR__.'/bootstrap/app.php';
$status = $app->handleCommand(new ArgvInput);
exit($status);

18
bootstrap/app.php Normal file
View File

@ -0,0 +1,18 @@
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware): void {
//
})
->withExceptions(function (Exceptions $exceptions): void {
//
})->create();

2
bootstrap/cache/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

5
bootstrap/providers.php Normal file
View File

@ -0,0 +1,5 @@
<?php
return [
App\Providers\AppServiceProvider::class,
];

87
composer.json Normal file
View File

@ -0,0 +1,87 @@
{
"$schema": "https://getcomposer.org/schema.json",
"name": "laravel/laravel",
"type": "project",
"description": "The skeleton application for the Laravel framework.",
"keywords": ["laravel", "framework"],
"license": "MIT",
"require": {
"php": "^8.2",
"laravel/framework": "^12.0",
"laravel/socialite": "^5.26",
"laravel/tinker": "^2.10.1"
},
"require-dev": {
"fakerphp/faker": "^1.23",
"laravel/pail": "^1.2.2",
"laravel/pint": "^1.24",
"laravel/sail": "^1.41",
"mockery/mockery": "^1.6",
"nunomaduro/collision": "^8.6",
"phpunit/phpunit": "^11.5.3"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"setup": [
"composer install",
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
"@php artisan key:generate",
"@php artisan migrate --force",
"npm install",
"npm run build"
],
"dev": [
"Composer\\Config::disableProcessTimeout",
"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
],
"test": [
"@php artisan config:clear --ansi",
"@php artisan test"
],
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi",
"@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
"@php artisan migrate --graceful --ansi"
],
"pre-package-uninstall": [
"Illuminate\\Foundation\\ComposerScripts::prePackageUninstall"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true,
"allow-plugins": {
"pestphp/pest-plugin": true,
"php-http/discovery": true
}
},
"minimum-stability": "stable",
"prefer-stable": true
}

8837
composer.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

126
config/app.php Normal file
View File

@ -0,0 +1,126 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Application Name
|--------------------------------------------------------------------------
|
| This value is the name of your application, which will be used when the
| framework needs to place the application's name in a notification or
| other UI elements where an application name needs to be displayed.
|
*/
'name' => env('APP_NAME', 'Laravel'),
/*
|--------------------------------------------------------------------------
| Application Environment
|--------------------------------------------------------------------------
|
| This value determines the "environment" your application is currently
| running in. This may determine how you prefer to configure various
| services the application utilizes. Set this in your ".env" file.
|
*/
'env' => env('APP_ENV', 'production'),
/*
|--------------------------------------------------------------------------
| Application Debug Mode
|--------------------------------------------------------------------------
|
| When your application is in debug mode, detailed error messages with
| stack traces will be shown on every error that occurs within your
| application. If disabled, a simple generic error page is shown.
|
*/
'debug' => (bool) env('APP_DEBUG', false),
/*
|--------------------------------------------------------------------------
| Application URL
|--------------------------------------------------------------------------
|
| This URL is used by the console to properly generate URLs when using
| the Artisan command line tool. You should set this to the root of
| the application so that it's available within Artisan commands.
|
*/
'url' => env('APP_URL', 'http://localhost'),
/*
|--------------------------------------------------------------------------
| Application Timezone
|--------------------------------------------------------------------------
|
| Here you may specify the default timezone for your application, which
| will be used by the PHP date and date-time functions. The timezone
| is set to "UTC" by default as it is suitable for most use cases.
|
*/
'timezone' => 'Asia/Jakarta',
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by Laravel's translation / localization methods. This option can be
| set to any locale for which you plan to have translation strings.
|
*/
'locale' => env('APP_LOCALE', 'en'),
'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
/*
|--------------------------------------------------------------------------
| Encryption Key
|--------------------------------------------------------------------------
|
| This key is utilized by Laravel's encryption services and should be set
| to a random, 32 character string to ensure that all encrypted values
| are secure. You should do this prior to deploying the application.
|
*/
'cipher' => 'AES-256-CBC',
'key' => env('APP_KEY'),
'previous_keys' => [
...array_filter(
explode(',', (string) env('APP_PREVIOUS_KEYS', ''))
),
],
/*
|--------------------------------------------------------------------------
| Maintenance Mode Driver
|--------------------------------------------------------------------------
|
| These configuration options determine the driver used to determine and
| manage Laravel's "maintenance mode" status. The "cache" driver will
| allow maintenance mode to be controlled across multiple machines.
|
| Supported drivers: "file", "cache"
|
*/
'maintenance' => [
'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
'store' => env('APP_MAINTENANCE_STORE', 'database'),
],
];

115
config/auth.php Normal file
View File

@ -0,0 +1,115 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Defaults
|--------------------------------------------------------------------------
|
| This option defines the default authentication "guard" and password
| reset "broker" for your application. You may change these values
| as required, but they're a perfect start for most applications.
|
*/
'defaults' => [
'guard' => env('AUTH_GUARD', 'web'),
'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
],
/*
|--------------------------------------------------------------------------
| Authentication Guards
|--------------------------------------------------------------------------
|
| Next, you may define every authentication guard for your application.
| Of course, a great default configuration has been defined for you
| which utilizes session storage plus the Eloquent user provider.
|
| All authentication guards have a user provider, which defines how the
| users are actually retrieved out of your database or other storage
| system used by the application. Typically, Eloquent is utilized.
|
| Supported: "session"
|
*/
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
],
/*
|--------------------------------------------------------------------------
| User Providers
|--------------------------------------------------------------------------
|
| All authentication guards have a user provider, which defines how the
| users are actually retrieved out of your database or other storage
| system used by the application. Typically, Eloquent is utilized.
|
| If you have multiple user tables or models you may configure multiple
| providers to represent the model / table. These providers may then
| be assigned to any extra authentication guards you have defined.
|
| Supported: "database", "eloquent"
|
*/
'providers' => [
'users' => [
'driver' => 'eloquent',
'model' => env('AUTH_MODEL', App\Models\User::class),
],
// 'users' => [
// 'driver' => 'database',
// 'table' => 'users',
// ],
],
/*
|--------------------------------------------------------------------------
| Resetting Passwords
|--------------------------------------------------------------------------
|
| These configuration options specify the behavior of Laravel's password
| reset functionality, including the table utilized for token storage
| and the user provider that is invoked to actually retrieve users.
|
| The expiry time is the number of minutes that each reset token will be
| considered valid. This security feature keeps tokens short-lived so
| they have less time to be guessed. You may change this as needed.
|
| The throttle setting is the number of seconds a user must wait before
| generating more password reset tokens. This prevents the user from
| quickly generating a very large amount of password reset tokens.
|
*/
'passwords' => [
'users' => [
'provider' => 'users',
'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
'expire' => 60,
'throttle' => 60,
],
],
/*
|--------------------------------------------------------------------------
| Password Confirmation Timeout
|--------------------------------------------------------------------------
|
| Here you may define the number of seconds before a password confirmation
| window expires and users are asked to re-enter their password via the
| confirmation screen. By default, the timeout lasts for three hours.
|
*/
'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),
];

117
config/cache.php Normal file
View File

@ -0,0 +1,117 @@
<?php
use Illuminate\Support\Str;
return [
/*
|--------------------------------------------------------------------------
| Default Cache Store
|--------------------------------------------------------------------------
|
| This option controls the default cache store that will be used by the
| framework. This connection is utilized if another isn't explicitly
| specified when running a cache operation inside the application.
|
*/
'default' => env('CACHE_STORE', 'database'),
/*
|--------------------------------------------------------------------------
| Cache Stores
|--------------------------------------------------------------------------
|
| Here you may define all of the cache "stores" for your application as
| well as their drivers. You may even define multiple stores for the
| same cache driver to group types of items stored in your caches.
|
| Supported drivers: "array", "database", "file", "memcached",
| "redis", "dynamodb", "octane",
| "failover", "null"
|
*/
'stores' => [
'array' => [
'driver' => 'array',
'serialize' => false,
],
'database' => [
'driver' => 'database',
'connection' => env('DB_CACHE_CONNECTION'),
'table' => env('DB_CACHE_TABLE', 'cache'),
'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
'lock_table' => env('DB_CACHE_LOCK_TABLE'),
],
'file' => [
'driver' => 'file',
'path' => storage_path('framework/cache/data'),
'lock_path' => storage_path('framework/cache/data'),
],
'memcached' => [
'driver' => 'memcached',
'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
'sasl' => [
env('MEMCACHED_USERNAME'),
env('MEMCACHED_PASSWORD'),
],
'options' => [
// Memcached::OPT_CONNECT_TIMEOUT => 2000,
],
'servers' => [
[
'host' => env('MEMCACHED_HOST', '127.0.0.1'),
'port' => env('MEMCACHED_PORT', 11211),
'weight' => 100,
],
],
],
'redis' => [
'driver' => 'redis',
'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
],
'dynamodb' => [
'driver' => 'dynamodb',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
'endpoint' => env('DYNAMODB_ENDPOINT'),
],
'octane' => [
'driver' => 'octane',
],
'failover' => [
'driver' => 'failover',
'stores' => [
'database',
'array',
],
],
],
/*
|--------------------------------------------------------------------------
| Cache Key Prefix
|--------------------------------------------------------------------------
|
| When utilizing the APC, database, memcached, Redis, and DynamoDB cache
| stores, there might be other applications using the same cache. For
| that reason, you may prefix every cache key to avoid collisions.
|
*/
'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),
];

183
config/database.php Normal file
View File

@ -0,0 +1,183 @@
<?php
use Illuminate\Support\Str;
return [
/*
|--------------------------------------------------------------------------
| Default Database Connection Name
|--------------------------------------------------------------------------
|
| Here you may specify which of the database connections below you wish
| to use as your default connection for database operations. This is
| the connection which will be utilized unless another connection
| is explicitly specified when you execute a query / statement.
|
*/
'default' => env('DB_CONNECTION', 'sqlite'),
/*
|--------------------------------------------------------------------------
| Database Connections
|--------------------------------------------------------------------------
|
| Below are all of the database connections defined for your application.
| An example configuration is provided for each database system which
| is supported by Laravel. You're free to add / remove connections.
|
*/
'connections' => [
'sqlite' => [
'driver' => 'sqlite',
'url' => env('DB_URL'),
'database' => env('DB_DATABASE', database_path('database.sqlite')),
'prefix' => '',
'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
'busy_timeout' => null,
'journal_mode' => null,
'synchronous' => null,
'transaction_mode' => 'DEFERRED',
],
'mysql' => [
'driver' => 'mysql',
'url' => env('DB_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'laravel'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => env('DB_CHARSET', 'utf8mb4'),
'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
(PHP_VERSION_ID >= 80500 ? \Pdo\Mysql::ATTR_SSL_CA : \PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
'mariadb' => [
'driver' => 'mariadb',
'url' => env('DB_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'laravel'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => env('DB_CHARSET', 'utf8mb4'),
'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
(PHP_VERSION_ID >= 80500 ? \Pdo\Mysql::ATTR_SSL_CA : \PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
'pgsql' => [
'driver' => 'pgsql',
'url' => env('DB_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '5432'),
'database' => env('DB_DATABASE', 'laravel'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'charset' => env('DB_CHARSET', 'utf8'),
'prefix' => '',
'prefix_indexes' => true,
'search_path' => 'public',
'sslmode' => env('DB_SSLMODE', 'prefer'),
],
'sqlsrv' => [
'driver' => 'sqlsrv',
'url' => env('DB_URL'),
'host' => env('DB_HOST', 'localhost'),
'port' => env('DB_PORT', '1433'),
'database' => env('DB_DATABASE', 'laravel'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'charset' => env('DB_CHARSET', 'utf8'),
'prefix' => '',
'prefix_indexes' => true,
// 'encrypt' => env('DB_ENCRYPT', 'yes'),
// 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
],
],
/*
|--------------------------------------------------------------------------
| Migration Repository Table
|--------------------------------------------------------------------------
|
| This table keeps track of all the migrations that have already run for
| your application. Using this information, we can determine which of
| the migrations on disk haven't actually been run on the database.
|
*/
'migrations' => [
'table' => 'migrations',
'update_date_on_publish' => true,
],
/*
|--------------------------------------------------------------------------
| Redis Databases
|--------------------------------------------------------------------------
|
| Redis is an open source, fast, and advanced key-value store that also
| provides a richer body of commands than a typical key-value system
| such as Memcached. You may define your connection settings here.
|
*/
'redis' => [
'client' => env('REDIS_CLIENT', 'phpredis'),
'options' => [
'cluster' => env('REDIS_CLUSTER', 'redis'),
'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
'persistent' => env('REDIS_PERSISTENT', false),
],
'default' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'username' => env('REDIS_USERNAME'),
'password' => env('REDIS_PASSWORD'),
'port' => env('REDIS_PORT', '6379'),
'database' => env('REDIS_DB', '0'),
'max_retries' => env('REDIS_MAX_RETRIES', 3),
'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
],
'cache' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'username' => env('REDIS_USERNAME'),
'password' => env('REDIS_PASSWORD'),
'port' => env('REDIS_PORT', '6379'),
'database' => env('REDIS_CACHE_DB', '1'),
'max_retries' => env('REDIS_MAX_RETRIES', 3),
'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
],
],
];

80
config/filesystems.php Normal file
View File

@ -0,0 +1,80 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application for file storage.
|
*/
'default' => env('FILESYSTEM_DISK', 'local'),
/*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Below you may configure as many filesystem disks as necessary, and you
| may even configure multiple disks for the same driver. Examples for
| most supported storage drivers are configured here for reference.
|
| Supported drivers: "local", "ftp", "sftp", "s3"
|
*/
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app/private'),
'serve' => true,
'throw' => false,
'report' => false,
],
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => rtrim(env('APP_URL', 'http://localhost'), '/').'/storage',
'visibility' => 'public',
'throw' => false,
'report' => false,
],
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
'throw' => false,
'report' => false,
],
],
/*
|--------------------------------------------------------------------------
| Symbolic Links
|--------------------------------------------------------------------------
|
| Here you may configure the symbolic links that will be created when the
| `storage:link` Artisan command is executed. The array keys should be
| the locations of the links and the values should be their targets.
|
*/
'links' => [
public_path('storage') => storage_path('app/public'),
],
];

132
config/logging.php Normal file
View File

@ -0,0 +1,132 @@
<?php
use Monolog\Handler\NullHandler;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;
use Monolog\Processor\PsrLogMessageProcessor;
return [
/*
|--------------------------------------------------------------------------
| Default Log Channel
|--------------------------------------------------------------------------
|
| This option defines the default log channel that is utilized to write
| messages to your logs. The value provided here should match one of
| the channels present in the list of "channels" configured below.
|
*/
'default' => env('LOG_CHANNEL', 'stack'),
/*
|--------------------------------------------------------------------------
| Deprecations Log Channel
|--------------------------------------------------------------------------
|
| This option controls the log channel that should be used to log warnings
| regarding deprecated PHP and library features. This allows you to get
| your application ready for upcoming major versions of dependencies.
|
*/
'deprecations' => [
'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
'trace' => env('LOG_DEPRECATIONS_TRACE', false),
],
/*
|--------------------------------------------------------------------------
| Log Channels
|--------------------------------------------------------------------------
|
| Here you may configure the log channels for your application. Laravel
| utilizes the Monolog PHP logging library, which includes a variety
| of powerful log handlers and formatters that you're free to use.
|
| Available drivers: "single", "daily", "slack", "syslog",
| "errorlog", "monolog", "custom", "stack"
|
*/
'channels' => [
'stack' => [
'driver' => 'stack',
'channels' => explode(',', (string) env('LOG_STACK', 'single')),
'ignore_exceptions' => false,
],
'single' => [
'driver' => 'single',
'path' => storage_path('logs/laravel.log'),
'level' => env('LOG_LEVEL', 'debug'),
'replace_placeholders' => true,
],
'daily' => [
'driver' => 'daily',
'path' => storage_path('logs/laravel.log'),
'level' => env('LOG_LEVEL', 'debug'),
'days' => env('LOG_DAILY_DAYS', 14),
'replace_placeholders' => true,
],
'slack' => [
'driver' => 'slack',
'url' => env('LOG_SLACK_WEBHOOK_URL'),
'username' => env('LOG_SLACK_USERNAME', 'Laravel Log'),
'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
'level' => env('LOG_LEVEL', 'critical'),
'replace_placeholders' => true,
],
'papertrail' => [
'driver' => 'monolog',
'level' => env('LOG_LEVEL', 'debug'),
'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
'handler_with' => [
'host' => env('PAPERTRAIL_URL'),
'port' => env('PAPERTRAIL_PORT'),
'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
],
'processors' => [PsrLogMessageProcessor::class],
],
'stderr' => [
'driver' => 'monolog',
'level' => env('LOG_LEVEL', 'debug'),
'handler' => StreamHandler::class,
'handler_with' => [
'stream' => 'php://stderr',
],
'formatter' => env('LOG_STDERR_FORMATTER'),
'processors' => [PsrLogMessageProcessor::class],
],
'syslog' => [
'driver' => 'syslog',
'level' => env('LOG_LEVEL', 'debug'),
'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
'replace_placeholders' => true,
],
'errorlog' => [
'driver' => 'errorlog',
'level' => env('LOG_LEVEL', 'debug'),
'replace_placeholders' => true,
],
'null' => [
'driver' => 'monolog',
'handler' => NullHandler::class,
],
'emergency' => [
'path' => storage_path('logs/laravel.log'),
],
],
];

118
config/mail.php Normal file
View File

@ -0,0 +1,118 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Default Mailer
|--------------------------------------------------------------------------
|
| This option controls the default mailer that is used to send all email
| messages unless another mailer is explicitly specified when sending
| the message. All additional mailers can be configured within the
| "mailers" array. Examples of each type of mailer are provided.
|
*/
'default' => env('MAIL_MAILER', 'log'),
/*
|--------------------------------------------------------------------------
| Mailer Configurations
|--------------------------------------------------------------------------
|
| Here you may configure all of the mailers used by your application plus
| their respective settings. Several examples have been configured for
| you and you are free to add your own as your application requires.
|
| Laravel supports a variety of mail "transport" drivers that can be used
| when delivering an email. You may specify which one you're using for
| your mailers below. You may also add additional mailers if needed.
|
| Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
| "postmark", "resend", "log", "array",
| "failover", "roundrobin"
|
*/
'mailers' => [
'smtp' => [
'transport' => 'smtp',
'scheme' => env('MAIL_SCHEME'),
'url' => env('MAIL_URL'),
'host' => env('MAIL_HOST', '127.0.0.1'),
'port' => env('MAIL_PORT', 2525),
'username' => env('MAIL_USERNAME'),
'password' => env('MAIL_PASSWORD'),
'timeout' => null,
'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
],
'ses' => [
'transport' => 'ses',
],
'postmark' => [
'transport' => 'postmark',
// 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
// 'client' => [
// 'timeout' => 5,
// ],
],
'resend' => [
'transport' => 'resend',
],
'sendmail' => [
'transport' => 'sendmail',
'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
],
'log' => [
'transport' => 'log',
'channel' => env('MAIL_LOG_CHANNEL'),
],
'array' => [
'transport' => 'array',
],
'failover' => [
'transport' => 'failover',
'mailers' => [
'smtp',
'log',
],
'retry_after' => 60,
],
'roundrobin' => [
'transport' => 'roundrobin',
'mailers' => [
'ses',
'postmark',
],
'retry_after' => 60,
],
],
/*
|--------------------------------------------------------------------------
| Global "From" Address
|--------------------------------------------------------------------------
|
| You may wish for all emails sent by your application to be sent from
| the same address. Here you may specify a name and address that is
| used globally for all emails that are sent by your application.
|
*/
'from' => [
'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
'name' => env('MAIL_FROM_NAME', 'Example'),
],
];

129
config/queue.php Normal file
View File

@ -0,0 +1,129 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Default Queue Connection Name
|--------------------------------------------------------------------------
|
| Laravel's queue supports a variety of backends via a single, unified
| API, giving you convenient access to each backend using identical
| syntax for each. The default queue connection is defined below.
|
*/
'default' => env('QUEUE_CONNECTION', 'database'),
/*
|--------------------------------------------------------------------------
| Queue Connections
|--------------------------------------------------------------------------
|
| Here you may configure the connection options for every queue backend
| used by your application. An example configuration is provided for
| each backend supported by Laravel. You're also free to add more.
|
| Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
| "deferred", "background", "failover", "null"
|
*/
'connections' => [
'sync' => [
'driver' => 'sync',
],
'database' => [
'driver' => 'database',
'connection' => env('DB_QUEUE_CONNECTION'),
'table' => env('DB_QUEUE_TABLE', 'jobs'),
'queue' => env('DB_QUEUE', 'default'),
'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
'after_commit' => false,
],
'beanstalkd' => [
'driver' => 'beanstalkd',
'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
'queue' => env('BEANSTALKD_QUEUE', 'default'),
'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
'block_for' => 0,
'after_commit' => false,
],
'sqs' => [
'driver' => 'sqs',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
'queue' => env('SQS_QUEUE', 'default'),
'suffix' => env('SQS_SUFFIX'),
'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
'after_commit' => false,
],
'redis' => [
'driver' => 'redis',
'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
'queue' => env('REDIS_QUEUE', 'default'),
'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
'block_for' => null,
'after_commit' => false,
],
'deferred' => [
'driver' => 'deferred',
],
'background' => [
'driver' => 'background',
],
'failover' => [
'driver' => 'failover',
'connections' => [
'database',
'deferred',
],
],
],
/*
|--------------------------------------------------------------------------
| Job Batching
|--------------------------------------------------------------------------
|
| The following options configure the database and table that store job
| batching information. These options can be updated to any database
| connection and table which has been defined by your application.
|
*/
'batching' => [
'database' => env('DB_CONNECTION', 'sqlite'),
'table' => 'job_batches',
],
/*
|--------------------------------------------------------------------------
| Failed Queue Jobs
|--------------------------------------------------------------------------
|
| These options configure the behavior of failed queue job logging so you
| can control how and where failed jobs are stored. Laravel ships with
| support for storing failed jobs in a simple file or in a database.
|
| Supported drivers: "database-uuids", "dynamodb", "file", "null"
|
*/
'failed' => [
'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
'database' => env('DB_CONNECTION', 'sqlite'),
'table' => 'failed_jobs',
],
];

44
config/services.php Normal file
View File

@ -0,0 +1,44 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Third Party Services
|--------------------------------------------------------------------------
|
| This file is for storing the credentials for third party services such
| as Mailgun, Postmark, AWS and more. This file provides the de facto
| location for this type of information, allowing packages to have
| a conventional file to locate the various service credentials.
|
*/
'postmark' => [
'key' => env('POSTMARK_API_KEY'),
],
'resend' => [
'key' => env('RESEND_API_KEY'),
],
'ses' => [
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
],
'slack' => [
'notifications' => [
'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
],
],
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT_URI'),
],
];

217
config/session.php Normal file
View File

@ -0,0 +1,217 @@
<?php
use Illuminate\Support\Str;
return [
/*
|--------------------------------------------------------------------------
| Default Session Driver
|--------------------------------------------------------------------------
|
| This option determines the default session driver that is utilized for
| incoming requests. Laravel supports a variety of storage options to
| persist session data. Database storage is a great default choice.
|
| Supported: "file", "cookie", "database", "memcached",
| "redis", "dynamodb", "array"
|
*/
'driver' => env('SESSION_DRIVER', 'database'),
/*
|--------------------------------------------------------------------------
| Session Lifetime
|--------------------------------------------------------------------------
|
| Here you may specify the number of minutes that you wish the session
| to be allowed to remain idle before it expires. If you want them
| to expire immediately when the browser is closed then you may
| indicate that via the expire_on_close configuration option.
|
*/
'lifetime' => (int) env('SESSION_LIFETIME', 120),
'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),
/*
|--------------------------------------------------------------------------
| Session Encryption
|--------------------------------------------------------------------------
|
| This option allows you to easily specify that all of your session data
| should be encrypted before it's stored. All encryption is performed
| automatically by Laravel and you may use the session like normal.
|
*/
'encrypt' => env('SESSION_ENCRYPT', false),
/*
|--------------------------------------------------------------------------
| Session File Location
|--------------------------------------------------------------------------
|
| When utilizing the "file" session driver, the session files are placed
| on disk. The default storage location is defined here; however, you
| are free to provide another location where they should be stored.
|
*/
'files' => storage_path('framework/sessions'),
/*
|--------------------------------------------------------------------------
| Session Database Connection
|--------------------------------------------------------------------------
|
| When using the "database" or "redis" session drivers, you may specify a
| connection that should be used to manage these sessions. This should
| correspond to a connection in your database configuration options.
|
*/
'connection' => env('SESSION_CONNECTION'),
/*
|--------------------------------------------------------------------------
| Session Database Table
|--------------------------------------------------------------------------
|
| When using the "database" session driver, you may specify the table to
| be used to store sessions. Of course, a sensible default is defined
| for you; however, you're welcome to change this to another table.
|
*/
'table' => env('SESSION_TABLE', 'sessions'),
/*
|--------------------------------------------------------------------------
| Session Cache Store
|--------------------------------------------------------------------------
|
| When using one of the framework's cache driven session backends, you may
| define the cache store which should be used to store the session data
| between requests. This must match one of your defined cache stores.
|
| Affects: "dynamodb", "memcached", "redis"
|
*/
'store' => env('SESSION_STORE'),
/*
|--------------------------------------------------------------------------
| Session Sweeping Lottery
|--------------------------------------------------------------------------
|
| Some session drivers must manually sweep their storage location to get
| rid of old sessions from storage. Here are the chances that it will
| happen on a given request. By default, the odds are 2 out of 100.
|
*/
'lottery' => [2, 100],
/*
|--------------------------------------------------------------------------
| Session Cookie Name
|--------------------------------------------------------------------------
|
| Here you may change the name of the session cookie that is created by
| the framework. Typically, you should not need to change this value
| since doing so does not grant a meaningful security improvement.
|
*/
'cookie' => env(
'SESSION_COOKIE',
Str::slug((string) env('APP_NAME', 'laravel')).'-session'
),
/*
|--------------------------------------------------------------------------
| Session Cookie Path
|--------------------------------------------------------------------------
|
| The session cookie path determines the path for which the cookie will
| be regarded as available. Typically, this will be the root path of
| your application, but you're free to change this when necessary.
|
*/
'path' => env('SESSION_PATH', '/'),
/*
|--------------------------------------------------------------------------
| Session Cookie Domain
|--------------------------------------------------------------------------
|
| This value determines the domain and subdomains the session cookie is
| available to. By default, the cookie will be available to the root
| domain without subdomains. Typically, this shouldn't be changed.
|
*/
'domain' => env('SESSION_DOMAIN'),
/*
|--------------------------------------------------------------------------
| HTTPS Only Cookies
|--------------------------------------------------------------------------
|
| By setting this option to true, session cookies will only be sent back
| to the server if the browser has a HTTPS connection. This will keep
| the cookie from being sent to you when it can't be done securely.
|
*/
'secure' => env('SESSION_SECURE_COOKIE'),
/*
|--------------------------------------------------------------------------
| HTTP Access Only
|--------------------------------------------------------------------------
|
| Setting this value to true will prevent JavaScript from accessing the
| value of the cookie and the cookie will only be accessible through
| the HTTP protocol. It's unlikely you should disable this option.
|
*/
'http_only' => env('SESSION_HTTP_ONLY', true),
/*
|--------------------------------------------------------------------------
| Same-Site Cookies
|--------------------------------------------------------------------------
|
| This option determines how your cookies behave when cross-site requests
| take place, and can be used to mitigate CSRF attacks. By default, we
| will set this value to "lax" to permit secure cross-site requests.
|
| See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
|
| Supported: "lax", "strict", "none", null
|
*/
'same_site' => env('SESSION_SAME_SITE', 'lax'),
/*
|--------------------------------------------------------------------------
| Partitioned Cookies
|--------------------------------------------------------------------------
|
| Setting this value to true will tie the cookie to the top-level site for
| a cross-site context. Partitioned cookies are accepted by the browser
| when flagged "secure" and the Same-Site attribute is set to "none".
|
*/
'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),
];

1
database/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
*.sqlite*

44
database/factories/UserFactory.php Normal file
View File

@ -0,0 +1,44 @@
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
/**
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
*/
class UserFactory extends Factory
{
/**
* The current password being used by the factory.
*/
protected static ?string $password;
/**
* Define the model's default state.
*
* @return array<string, mixed>
*/
public function definition(): array
{
return [
'name' => fake()->name(),
'email' => fake()->unique()->safeEmail(),
'email_verified_at' => now(),
'password' => static::$password ??= Hash::make('password'),
'remember_token' => Str::random(10),
];
}
/**
* Indicate that the model's email address should be unverified.
*/
public function unverified(): static
{
return $this->state(fn (array $attributes) => [
'email_verified_at' => null,
]);
}
}

44
database/migrations/0001_01_01_000000_create_users_table.php Normal file
View File

@ -0,0 +1,44 @@
<?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::create('users', function (Blueprint $table) {
$table->id();
$table->string('name'); // nama user
$table->string('email')->unique(); // email login
$table->timestamp('email_verified_at')->nullable();
$table->string('password')->nullable();
// nullable supaya bisa dipakai login Google nanti
$table->string('google_id')->nullable();
// untuk login Google
$table->string('avatar')->nullable();
// foto profil dari Google
$table->rememberToken();
// untuk fitur "ingat saya"
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('users');
}
};

35
database/migrations/0001_01_01_000001_create_cache_table.php Normal file
View File

@ -0,0 +1,35 @@
<?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::create('cache', function (Blueprint $table) {
$table->string('key')->primary();
$table->mediumText('value');
$table->integer('expiration')->index();
});
Schema::create('cache_locks', function (Blueprint $table) {
$table->string('key')->primary();
$table->string('owner');
$table->integer('expiration')->index();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('cache');
Schema::dropIfExists('cache_locks');
}
};

57
database/migrations/0001_01_01_000002_create_jobs_table.php Normal file
View File

@ -0,0 +1,57 @@
<?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::create('jobs', function (Blueprint $table) {
$table->id();
$table->string('queue')->index();
$table->longText('payload');
$table->unsignedTinyInteger('attempts');
$table->unsignedInteger('reserved_at')->nullable();
$table->unsignedInteger('available_at');
$table->unsignedInteger('created_at');
});
Schema::create('job_batches', function (Blueprint $table) {
$table->string('id')->primary();
$table->string('name');
$table->integer('total_jobs');
$table->integer('pending_jobs');
$table->integer('failed_jobs');
$table->longText('failed_job_ids');
$table->mediumText('options')->nullable();
$table->integer('cancelled_at')->nullable();
$table->integer('created_at');
$table->integer('finished_at')->nullable();
});
Schema::create('failed_jobs', function (Blueprint $table) {
$table->id();
$table->string('uuid')->unique();
$table->text('connection');
$table->text('queue');
$table->longText('payload');
$table->longText('exception');
$table->timestamp('failed_at')->useCurrent();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('jobs');
Schema::dropIfExists('job_batches');
Schema::dropIfExists('failed_jobs');
}
};

40
database/migrations/2026_03_19_143648_create_riwayat_prediksi_table.php Normal file
View File

@ -0,0 +1,40 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('riwayat_prediksi', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained('users')->onDelete('cascade');
// Data diri
$table->string('nama');
$table->enum('jenis_kelamin', ['L', 'P']);
$table->integer('umur');
// Gejala (disimpan sebagai JSON)
$table->json('gejala');
// Gaya hidup
$table->enum('stres', ['ya', 'tidak']);
$table->enum('merokok', ['ya', 'tidak']);
$table->enum('alkohol', ['ya', 'tidak']);
$table->enum('obat', ['ya', 'tidak']);
// Hasil
$table->string('hasil');
$table->timestamps(); // created_at = waktu prediksi
});
}
public function down(): void
{
Schema::dropIfExists('riwayat_prediksi');
}
};

28
database/migrations/2026_03_30_105535_add_indikasi_to_riwayat_prediksi_table.php Normal file
View File

@ -0,0 +1,28 @@
<?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_prediksi', function (Blueprint $table) {
//
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
//
});
}
};

22
database/migrations/2026_04_04_165333_add_indikasi_fix.php Normal file
View File

@ -0,0 +1,22 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
$table->text('indikasi')->nullable();
});
}
public function down(): void
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
$table->dropColumn('indikasi');
});
}
};

25
database/migrations/2026_04_04_171541_change_indikasi_to_json.php Normal file
View File

@ -0,0 +1,25 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
$table->json('indikasi')->nullable()->change();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('json', function (Blueprint $table) {
//
});
}
};

24
database/migrations/2026_04_06_171315_modify_riwayat_prediksi_nullable.php Normal file
View File

@ -0,0 +1,24 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
$table->enum('jenis_kelamin', ['L', 'P'])->nullable()->change();
$table->integer('umur')->nullable()->change();
});
}
public function down()
{
Schema::table('riwayat_prediksi', function (Blueprint $table) {
$table->enum('jenis_kelamin', ['L', 'P'])->change();
$table->integer('umur')->change();
});
}
};

24
database/migrations/2026_04_10_162926_add_google_id_to_users_table.php Normal file
View File

@ -0,0 +1,24 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('google_id')->nullable()->after('email');
$table->string('password')->nullable()->change();
});
}
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('google_id');
$table->string('password')->nullable(false)->change();
});
}
};

25
database/seeders/DatabaseSeeder.php Normal file
View File

@ -0,0 +1,25 @@
<?php
namespace Database\Seeders;
use App\Models\User;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
use WithoutModelEvents;
/**
* Seed the application's database.
*/
public function run(): void
{
// User::factory(10)->create();
User::factory()->create([
'name' => 'Test User',
'email' => 'test@example.com',
]);
}
}

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"$schema": "https://www.schemastore.org/package.json",
"private": true,
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite"
},
"devDependencies": {
"@tailwindcss/vite": "^4.0.0",
"axios": "^1.11.0",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^2.0.0",
"tailwindcss": "^4.0.0",
"vite": "^7.0.7"
}
}

35
phpunit.xml Normal file
View File

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
bootstrap="vendor/autoload.php"
colors="true"
>
<testsuites>
<testsuite name="Unit">
<directory>tests/Unit</directory>
</testsuite>
<testsuite name="Feature">
<directory>tests/Feature</directory>
</testsuite>
</testsuites>
<source>
<include>
<directory>app</directory>
</include>
</source>
<php>
<env name="APP_ENV" value="testing"/>
<env name="APP_MAINTENANCE_DRIVER" value="file"/>
<env name="BCRYPT_ROUNDS" value="4"/>
<env name="BROADCAST_CONNECTION" value="null"/>
<env name="CACHE_STORE" value="array"/>
<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>
<env name="MAIL_MAILER" value="array"/>
<env name="QUEUE_CONNECTION" value="sync"/>
<env name="SESSION_DRIVER" value="array"/>
<env name="PULSE_ENABLED" value="false"/>
<env name="TELESCOPE_ENABLED" value="false"/>
<env name="NIGHTWATCH_ENABLED" value="false"/>
</php>
</phpunit>

25
public/.htaccess Normal file
View File

@ -0,0 +1,25 @@
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Handle X-XSRF-Token Header
RewriteCond %{HTTP:x-xsrf-token} .
RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Send Requests To Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

257
public/animation/sehati-animation.html Normal file
View File

File diff suppressed because one or more lines are too long

267
public/css/layout.css Normal file
View File

@ -0,0 +1,267 @@
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ─── Global ─── */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
color: #1a2e1f;
overflow-x: hidden;
background-color: #ffffff;
padding-top: 70px;
}
/* ════════════════════════════════
NAVBAR
════════════════════════════════ */
.navbar {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
height: 70px;
}
.navbar-brand {
color: #4F7C59;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
text-decoration: none;
display: flex;
align-items: center;
gap: 1px;
}
.navbar-brand:hover {
color: #2D5A3D;
}
.navbar-logo {
height: 100px;
width: auto;
margin: -20px 2px -20px 0;
filter: contrast(1.2) saturate(1.3);
position: relative;
z-index: 10;
}
.navbar .nav-link {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 14px;
color: #5a6b5e !important;
position: relative;
padding: 6px 4px !important;
transition: color 0.25s ease, transform 0.25s ease;
}
.navbar .nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: #4F7C59;
transition: all 0.3s ease;
transform: translateX(-50%);
border-radius: 2px;
}
.navbar .nav-link:hover {
color: #4F7C59 !important;
transform: translateY(-1px);
}
.navbar .nav-link:hover::after {
width: 80%;
}
/* Login button */
.navbar .nav-link.nav-btn-login {
background-color: #4F7C59;
color: #ffffff !important;
border-radius: 50px;
padding: 8px 22px !important;
font-weight: 600;
border: 2px solid #4F7C59;
transition: all 0.25s ease;
}
.navbar .nav-link.nav-btn-login::after {
display: none;
}
.navbar .nav-link.nav-btn-login:hover {
background-color: transparent;
color: #4F7C59 !important;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(79,124,89,0.2);
}
/* ════════════════════════════════
HAMBURGER
════════════════════════════════ */
.navbar-toggler {
border: none;
background: transparent;
padding: 4px 6px;
box-shadow: none !important;
outline: none !important;
}
.hamburger-icon {
display: flex;
flex-direction: column;
gap: 5px;
width: 24px;
}
.hamburger-icon span {
display: block;
height: 2px;
width: 100%;
background-color: #4F7C59;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Animasi X saat menu terbuka */
.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Dropdown mobile */
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
border-radius: 0 0 16px 16px;
padding: 0;
margin-top: 0;
}
@media (max-width: 991px) {
.navbar {
height: auto;
min-height: 70px;
}
.navbar-collapse {
padding: 12px 8px 16px;
border-top: 1px solid rgba(0,0,0,0.05);
margin-top: 8px;
}
.navbar .nav-link {
padding: 10px 12px !important;
border-radius: 8px;
}
.navbar .nav-link:hover {
background-color: rgba(79, 124, 89, 0.06);
transform: none;
}
.navbar .nav-link::after {
display: none;
}
.navbar .nav-link.nav-btn-login {
display: inline-block;
margin-top: 4px;
text-align: center;
}
}
/* ════════════════════════════════
FOOTER
════════════════════════════════ */
footer {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
color: #6b7c6e;
border-top: 1px solid #e8f0e5;
padding: 20px 0;
text-align: center;
}
/* ─── Profil Dropdown ─── */
.nav-profil-btn {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1.5px solid #D8E8D2;
border-radius: 50px;
padding: 5px 12px 5px 5px;
cursor: pointer;
transition: all 0.2s;
}
.nav-profil-btn:hover {
border-color: #7DAA6E;
background: #F4FAF1;
}
.nav-profil-btn::after {
color: #4F7C59;
}
.nav-profil-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #4F7C59, #2D5A3D);
color: white;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nav-profil-name {
font-size: 13px;
font-weight: 600;
color: #2D5A3D;
}
.nav-dropdown {
border: 1.5px solid #D8E8D2;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(45,90,61,0.12);
padding: 6px;
min-width: 180px;
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
color: #2D5A3D;
border-radius: 8px;
padding: 9px 12px;
transition: background 0.15s;
}
.nav-dropdown-item:hover {
background: #F4FAF1;
color: #2D5A3D;
}
.nav-dropdown-item i {
width: 14px;
color: #7DAA6E;
font-size: 13px;
}
.nav-dropdown-divider {
border-color: #D8E8D2;
margin: 4px 0;
}
.nav-dropdown-logout {
color: #c0392b !important;
width: 100%;
background: transparent;
border: none;
text-align: left;
}
.nav-dropdown-logout:hover {
background: #fff5f5 !important;
}
.nav-dropdown-logout i {
color: #c0392b !important;
}

256
public/css/login.css Normal file
View File

@ -0,0 +1,256 @@
/* ════════════════════════════════
LOGIN PAGE
════════════════════════════════ */
.login-section {
min-height: calc(100vh - 70px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
background: radial-gradient(circle at 20% 80%, #e7f1e4 0%, #ffffff 60%);
position: relative;
overflow: hidden;
}
.login-section::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(125,170,110,0.12) 0%, transparent 70%);
top: -80px; right: -80px;
pointer-events: none;
}
/* ─── Card ─── */
.login-card {
background: #ffffff;
border: 1px solid #D8E8D2;
border-radius: 24px;
box-shadow: 0 8px 40px rgba(45,90,61,0.1);
padding: 48px 44px;
width: 100%;
max-width: 440px;
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #7DAA6E, #2D5A3D);
}
/* ─── Header ─── */
.login-header {
text-align: center;
margin-bottom: 28px;
}
.login-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.login-logo-box {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.login-logo {
width: 250%;
height: 250%;
object-fit: contain;
filter: contrast(1.2) saturate(1.3);
}
.login-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 2rem;
color: #4F7C59;
line-height: 1;
}
.login-subtitle {
font-size: 13px;
color: #6B7F70;
margin: 0;
}
/* ─── Form Labels ─── */
.login-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #2D5A3D;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-bottom: 7px;
}
/* ─── Input Group ─── */
.login-input-wrap {
position: relative;
margin-bottom: 18px;
}
.login-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #7DAA6E;
font-size: 14px;
pointer-events: none;
}
.login-input {
width: 100%;
padding: 12px 16px 12px 40px;
border: 1.5px solid #D8E8D2;
border-radius: 12px;
background: #F4FAF1;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #1C2B22;
outline: none;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.login-input:focus {
border-color: #7DAA6E;
box-shadow: 0 0 0 3px rgba(125,170,110,0.15);
background: #ffffff;
}
.login-input::placeholder {
color: #a0b5a5;
}
/* ─── Remember & Forgot ─── */
.login-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.login-remember {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: #6B7F70;
cursor: pointer;
}
.login-remember input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: #4F7C59;
cursor: pointer;
}
.login-forgot {
font-size: 13px;
font-weight: 600;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-forgot:hover {
color: #2D5A3D;
}
/* ─── Submit Button ─── */
.btn-login {
width: 100%;
padding: 13px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #4F7C59, #2D5A3D);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: white;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(45,90,61,0.25);
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45,90,61,0.35);
}
.btn-login:active {
transform: scale(0.98);
}
/* ─── Divider ─── */
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 16px;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: #D8E8D2;
}
.login-divider span {
font-size: 12px;
color: #a0b5a5;
white-space: nowrap;
}
/* ─── Social Button ─── */
.btn-social {
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid #D8E8D2;
background: #ffffff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-social:hover {
border-color: #7DAA6E;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ─── Register Link ─── */
.login-register {
text-align: center;
margin-top: 24px;
font-size: 13px;
color: #6B7F70;
}
.login-register a {
font-weight: 700;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-register a:hover {
color: #2D5A3D;
}
/* ─── Alert ─── */
.alert {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 20px;
border: none;
}
.alert-danger {
background: #fff0f0;
color: #c0392b;
border-left: 4px solid #e74c3c;
}
.alert-success {
background: #f0faf3;
color: #2d6a2f;
border-left: 4px solid #4F7C59;
}

235
public/css/lupa-password.css Normal file
View File

@ -0,0 +1,235 @@
/* ════════════════════════════════
LOGIN PAGE
════════════════════════════════ */
.login-section {
min-height: calc(100vh - 70px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
background: radial-gradient(circle at 20% 80%, #e7f1e4 0%, #ffffff 60%);
position: relative;
overflow: hidden;
}
.login-section::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(125,170,110,0.12) 0%, transparent 70%);
top: -80px; right: -80px;
pointer-events: none;
}
/* ─── Card ─── */
.login-card {
background: #ffffff;
border: 1px solid #D8E8D2;
border-radius: 24px;
box-shadow: 0 8px 40px rgba(45,90,61,0.1);
padding: 48px 44px;
width: 100%;
max-width: 440px;
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #7DAA6E, #2D5A3D);
}
/* ─── Header ─── */
.login-header {
text-align: center;
margin-bottom: 28px;
}
.login-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.login-logo-box {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.login-logo {
width: 250%;
height: 250%;
object-fit: contain;
filter: contrast(1.2) saturate(1.3);
}
.login-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 2rem;
color: #4F7C59;
line-height: 1;
}
.login-subtitle {
font-size: 13px;
color: #6B7F70;
margin: 0;
}
/* ─── Form Labels ─── */
.login-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #2D5A3D;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-bottom: 7px;
}
/* ─── Input Group ─── */
.login-input-wrap {
position: relative;
margin-bottom: 18px;
}
.login-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #7DAA6E;
font-size: 14px;
pointer-events: none;
}
.login-input {
width: 100%;
padding: 12px 16px 12px 40px;
border: 1.5px solid #D8E8D2;
border-radius: 12px;
background: #F4FAF1;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #1C2B22;
outline: none;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.login-input:focus {
border-color: #7DAA6E;
box-shadow: 0 0 0 3px rgba(125,170,110,0.15);
background: #ffffff;
}
.login-input::placeholder {
color: #a0b5a5;
}
/* ─── Remember & Forgot ─── */
.login-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.login-remember {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: #6B7F70;
cursor: pointer;
}
.login-remember input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: #4F7C59;
cursor: pointer;
}
.login-forgot {
font-size: 13px;
font-weight: 600;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-forgot:hover {
color: #2D5A3D;
}
/* ─── Submit Button ─── */
.btn-login {
width: 100%;
padding: 13px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #4F7C59, #2D5A3D);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: white;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(45,90,61,0.25);
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45,90,61,0.35);
}
.btn-login:active {
transform: scale(0.98);
}
/* ─── Divider ─── */
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 16px;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: #D8E8D2;
}
.login-divider span {
font-size: 12px;
color: #a0b5a5;
white-space: nowrap;
}
/* ─── Social Button ─── */
.btn-social {
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid #D8E8D2;
background: #ffffff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-social:hover {
border-color: #7DAA6E;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ─── Register Link ─── */
.login-register {
text-align: center;
margin-top: 24px;
font-size: 13px;
color: #6B7F70;
}
.login-register a {
font-weight: 700;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-register a:hover {
color: #2D5A3D;
}

628
public/css/prediksi.css Normal file
View File

@ -0,0 +1,628 @@
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root {
--green-deep: #2D5A3D;
--green-mid: #4F7C59;
--green-soft: #7DAA6E;
--green-pale: #EAF3E6;
--green-mist: #F4FAF1;
--cream: #FAFAF8;
--text-dark: #1C2B22;
--text-muted: #6B7F70;
--border: #D8E8D2;
--white: #FFFFFF;
--shadow-sm: 0 2px 12px rgba(45,90,61,0.08);
--shadow-md: 0 8px 32px rgba(45,90,61,0.12);
--radius-lg: 20px;
--radius-md: 12px;
--radius-sm: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
/* Hanya override body khusus halaman prediksi lewat class wrapper,
bukan di level html/body global agar tidak bentrok dengan app.blade.php */
/* ─── Background Blob ─── */
.bg-blob {
position: fixed;
pointer-events: none;
z-index: 0;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.bg-blob-1 {
width: 500px; height: 500px;
background: radial-gradient(circle, #b8dba8 0%, transparent 70%);
top: -120px; right: -80px;
}
.bg-blob-2 {
width: 350px; height: 350px;
background: radial-gradient(circle, #d4eecc 0%, transparent 70%);
bottom: -80px; left: -60px;
}
/* ─── Layout ─── */
.page-wrap {
position: relative;
z-index: 1;
min-height: calc(100vh - 70px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: var(--cream);
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text-dark);
overflow: hidden;
}
/* ─── Header ─── */
.form-header {
text-align: center;
margin-bottom: 32px;
}
.form-header .eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--green-soft);
margin-bottom: 8px;
}
.form-header h2,
.form-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--green-deep);
line-height: 1.2;
}
/* ─── Step Progress ─── */
.step-progress {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
}
.step-dot {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 60px;
}
.step-dot .dot {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
transition: all 0.35s ease;
position: relative;
z-index: 1;
}
.step-dot .dot-label {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
transition: color 0.3s;
text-align: center;
}
.step-dot.active .dot {
background: var(--green-mid);
border-color: var(--green-mid);
color: white;
box-shadow: 0 0 0 4px rgba(79,124,89,0.18);
}
.step-dot.active .dot-label { color: var(--green-mid); font-weight: 600; }
.step-dot.done .dot {
background: var(--green-soft);
border-color: var(--green-soft);
color: white;
}
.step-dot.done .dot-label { color: var(--green-soft); }
.step-line {
width: 60px;
height: 2px;
background: var(--border);
margin-top: 15px;
margin-bottom: 0;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.step-line::after {
content: '';
position: absolute;
left: 0; top: 0;
height: 100%;
width: 0%;
background: var(--green-soft);
transition: width 0.5s ease;
}
.step-line.filled::after { width: 100%; }
/* ─── Card ─── */
.form-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
width: 100%;
max-width: 480px;
padding: 36px 40px;
position: relative;
overflow: hidden;
}
.form-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-soft), var(--green-deep));
}
/* ─── Slides ─── */
.slide-container {
position: relative;
min-height: 260px;
}
.prediction-slide {
position: absolute;
top: 0; left: 0; right: 0;
opacity: 0;
pointer-events: none;
transform: translateX(30px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.prediction-slide.active {
opacity: 1;
pointer-events: all;
transform: translateX(0);
position: relative;
}
.prediction-slide.exit-left {
opacity: 0;
transform: translateX(-30px);
}
/* ─── Slide Title ─── */
.slide-title {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.5px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.slide-title .icon {
width: 28px; height: 28px;
background: var(--green-pale);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
/* ─── Form Fields ─── */
.field-group { margin-bottom: 18px; }
.field-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--green-deep);
letter-spacing: 0.4px;
margin-bottom: 7px;
text-transform: uppercase;
}
.field-group input,
.field-group select {
width: 100%;
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--green-mist);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: var(--text-dark);
outline: none;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
appearance: none;
-webkit-appearance: none;
}
.field-group input:focus,
.field-group select:focus {
border-color: var(--green-soft);
box-shadow: 0 0 0 3px rgba(125,170,110,0.15);
background: var(--white);
}
.field-group input.error,
.field-group select.error {
border-color: #e07070;
box-shadow: 0 0 0 3px rgba(224,112,112,0.12);
}
.field-group .select-wrap { position: relative; }
.field-group .select-wrap::after {
content: '';
position: absolute;
right: 14px; top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--green-soft);
pointer-events: none;
}
.field-error {
font-size: 11px;
color: #c0504e;
margin-top: 5px;
display: none;
font-weight: 500;
}
.field-error.show { display: block; }
.field-hint {
display: block;
font-size: 11px;
color: var(--text-muted);
margin-top: -4px;
margin-bottom: 6px;
line-height: 1.4;
}
.slide-hint {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: -8px;
margin-bottom: 16px;
line-height: 1.5;
}
/* ─── Radio Group ─── */
.radio-group { display: flex; gap: 10px; }
.radio-option { flex: 1; position: relative; }
.radio-option input[type="radio"] { position: absolute; opacity: 0; width: 0; }
.radio-option label {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--green-mist);
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
transition: all 0.2s;
}
.radio-option input[type="radio"]:checked + label {
border-color: var(--green-mid);
background: var(--green-pale);
color: var(--green-deep);
font-weight: 600;
box-shadow: 0 0 0 3px rgba(79,124,89,0.12);
}
.radio-option label:hover {
border-color: var(--green-soft);
background: var(--white);
}
/* ─── Navigation Buttons ─── */
.form-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.btn-prev {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border: 1.5px solid var(--border);
border-radius: 50px;
background: transparent;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.25s;
}
.btn-prev:hover:not(:disabled) {
border-color: var(--green-soft);
color: var(--green-mid);
transform: translateX(-2px);
}
.btn-prev:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-next {
display: flex;
align-items: center;
gap: 6px;
padding: 11px 24px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 4px 14px rgba(45,90,61,0.25);
}
.btn-next:hover {
transform: translateX(2px);
box-shadow: 0 6px 20px rgba(45,90,61,0.35);
}
.btn-next:active { transform: scale(0.97); }
/* ─── Symptom Checkboxes ─── */
.symptom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.symptom-item { position: relative; }
.symptom-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; }
.symptom-item label {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--green-mist);
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
transition: all 0.2s;
min-height: 48px;
line-height: 1.4;
}
.symptom-item input:checked + label {
border-color: var(--green-mid);
background: var(--green-pale);
color: var(--green-deep);
font-weight: 600;
}
.symptom-item label .check-box {
width: 16px; height: 16px;
border: 2px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
margin-top: 1px;
transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
}
.symptom-item input:checked + label .check-box {
background: var(--green-mid);
border-color: var(--green-mid);
}
.symptom-item input:checked + label .check-box::after {
content: '✓';
color: white;
font-size: 10px;
font-weight: 700;
}
/* ─── Result Placeholder ─── */
.result-placeholder {
text-align: center;
padding: 12px 0 4px;
}
.result-placeholder .result-icon {
width: 64px; height: 64px;
background: var(--green-pale);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.result-placeholder p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
/* ─── Result Prediction ─── */
.result-box {
padding: 22px;
border-radius: 16px;
border: 1.5px solid var(--border);
background: #fffdf4;
}
.result-box.risk {
background: linear-gradient(160deg, #fffbee 0%, #fff8e0 100%);
border-color: #f5d97a;
}
.result-box.safe {
background: linear-gradient(160deg, #f2fbf4 0%, #e6f7ea 100%);
border-color: var(--green-soft);
}
.result-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff3cd;
border: 1px solid #f5d97a;
color: #9a6c00;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 16px;
}
.disease-name {
font-size: 24px;
font-weight: 800;
color: var(--green-deep);
letter-spacing: -0.3px;
line-height: 1.2;
margin-bottom: 18px;
}
.result-divider {
height: 1px;
background: linear-gradient(90deg, #f5d97a, transparent);
margin-bottom: 16px;
opacity: 0.6;
}
.result-desc {
font-size: 13px;
color: var(--text-dark);
line-height: 1.65;
margin-bottom: 16px;
}
.result-tips {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(245, 217, 122, 0.5);
border-left: 3px solid #e6a800;
border-radius: 10px;
padding: 13px 15px;
margin-bottom: 16px;
}
.tips-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #9a6c00;
margin-bottom: 6px;
}
.tips-text {
font-size: 12.5px;
color: var(--text-dark);
line-height: 1.6;
margin: 0;
}
.disclaimer-line {
height: 1px;
background: linear-gradient(90deg, #f5d97a, transparent);
margin-bottom: 14px;
opacity: 0.6;
}
.result-disclaimer {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.55;
}
.result-disclaimer p {
margin: 0;
flex: 1;
}
.disclaimer-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
/* ─── Custom Alert Modal ─── */
.custom-alert-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(28, 43, 34, 0.5);
align-items: center;
justify-content: center;
backdrop-filter: blur(3px);
}
.custom-alert-overlay.show {
display: flex;
}
.custom-alert-box {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
padding: 2rem 1.75rem;
max-width: 360px;
width: 90%;
text-align: center;
position: relative;
animation: alertPop 0.25s ease;
}
@keyframes alertPop {
from { opacity: 0; transform: scale(0.92) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.custom-alert-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff8e6;
border: 2px solid #f5c842;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.custom-alert-box h3 {
font-size: 16px;
font-weight: 700;
color: var(--green-deep);
margin-bottom: 0.5rem;
}
.custom-alert-box p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 1.5rem;
}
.custom-alert-btn {
width: 100%;
padding: 11px 0;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
color: white;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(45,90,61,0.25);
transition: all 0.2s;
}
.custom-alert-btn:hover {
box-shadow: 0 6px 20px rgba(45,90,61,0.35);
transform: translateY(-1px);
}

235
public/css/register.css Normal file
View File

@ -0,0 +1,235 @@
/* ════════════════════════════════
LOGIN PAGE
════════════════════════════════ */
.login-section {
min-height: calc(100vh - 70px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
background: radial-gradient(circle at 20% 80%, #e7f1e4 0%, #ffffff 60%);
position: relative;
overflow: hidden;
}
.login-section::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(125,170,110,0.12) 0%, transparent 70%);
top: -80px; right: -80px;
pointer-events: none;
}
/* ─── Card ─── */
.login-card {
background: #ffffff;
border: 1px solid #D8E8D2;
border-radius: 24px;
box-shadow: 0 8px 40px rgba(45,90,61,0.1);
padding: 48px 44px;
width: 100%;
max-width: 440px;
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #7DAA6E, #2D5A3D);
}
/* ─── Header ─── */
.login-header {
text-align: center;
margin-bottom: 28px;
}
.login-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.login-logo-box {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.login-logo {
width: 250%;
height: 250%;
object-fit: contain;
filter: contrast(1.2) saturate(1.3);
}
.login-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 2rem;
color: #4F7C59;
line-height: 1;
}
.login-subtitle {
font-size: 13px;
color: #6B7F70;
margin: 0;
}
/* ─── Form Labels ─── */
.login-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #2D5A3D;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-bottom: 7px;
}
/* ─── Input Group ─── */
.login-input-wrap {
position: relative;
margin-bottom: 18px;
}
.login-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #7DAA6E;
font-size: 14px;
pointer-events: none;
}
.login-input {
width: 100%;
padding: 12px 16px 12px 40px;
border: 1.5px solid #D8E8D2;
border-radius: 12px;
background: #F4FAF1;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #1C2B22;
outline: none;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.login-input:focus {
border-color: #7DAA6E;
box-shadow: 0 0 0 3px rgba(125,170,110,0.15);
background: #ffffff;
}
.login-input::placeholder {
color: #a0b5a5;
}
/* ─── Remember & Forgot ─── */
.login-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.login-remember {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: #6B7F70;
cursor: pointer;
}
.login-remember input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: #4F7C59;
cursor: pointer;
}
.login-forgot {
font-size: 13px;
font-weight: 600;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-forgot:hover {
color: #2D5A3D;
}
/* ─── Submit Button ─── */
.btn-login {
width: 100%;
padding: 13px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #4F7C59, #2D5A3D);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: white;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(45,90,61,0.25);
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45,90,61,0.35);
}
.btn-login:active {
transform: scale(0.98);
}
/* ─── Divider ─── */
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 16px;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: #D8E8D2;
}
.login-divider span {
font-size: 12px;
color: #a0b5a5;
white-space: nowrap;
}
/* ─── Social Button ─── */
.btn-social {
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid #D8E8D2;
background: #ffffff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-social:hover {
border-color: #7DAA6E;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ─── Register Link ─── */
.login-register {
text-align: center;
margin-top: 24px;
font-size: 13px;
color: #6B7F70;
}
.login-register a {
font-weight: 700;
color: #4F7C59;
text-decoration: none;
transition: color 0.2s;
}
.login-register a:hover {
color: #2D5A3D;
}

206
public/css/riwayat.css Normal file
View File

@ -0,0 +1,206 @@
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
.riwayat-wrap {
max-width: 720px;
margin: 0 auto;
padding: 40px 16px;
}
.riwayat-header {
text-align: center;
margin-bottom: 32px;
}
.riwayat-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 24px;
font-weight: 800;
color: #2D5A3D;
margin-bottom: 6px;
}
.riwayat-subtitle {
font-size: 13px;
color: #6B7F70;
}
/* ─── Empty ─── */
.riwayat-empty {
text-align: center;
padding: 60px 20px;
color: #6B7F70;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
.btn-cek {
display: inline-block;
margin-top: 16px;
padding: 10px 24px;
background: linear-gradient(135deg, #4F7C59, #2D5A3D);
color: white;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.btn-cek:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(45,90,61,0.25);
color: white;
}
/* ─── Card ─── */
.riwayat-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.riwayat-card {
background: #ffffff;
border: 1px solid #D8E8D2;
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 4px 16px rgba(45,90,61,0.07);
}
.riwayat-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.riwayat-hasil-badge {
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 50px;
}
.riwayat-hasil-badge.gastritis {
background: #fff3e0;
color: #e65100;
}
.riwayat-hasil-badge.gerd {
background: #fce4ec;
color: #c62828;
}
.riwayat-hasil-badge.dispepsia {
background: #e8f5e9;
color: #2e7d32;
}
.riwayat-tanggal {
font-size: 12px;
color: #6B7F70;
display: flex;
align-items: center;
gap: 5px;
}
/* ─── Section ─── */
.riwayat-section {
border-top: 1px solid #E8F0E5;
padding-top: 12px;
margin-top: 12px;
}
.riwayat-section-label {
font-size: 11px;
font-weight: 700;
color: #7DAA6E;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.riwayat-row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 3px 0;
}
.riwayat-key {
color: #6B7F70;
}
.riwayat-val {
font-weight: 600;
color: #1C2B22;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
/* ─── Gejala Tags ─── */
.riwayat-gejala-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.gejala-tag {
background: #F4FAF1;
border: 1px solid #D8E8D2;
color: #2D5A3D;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 50px;
}
/* ─── Gaya Hidup Tags ─── */
.riwayat-gayahidup-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.gayahidup-tag {
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 50px;
}
.gayahidup-tag.aktif {
background: #fff0f0;
color: #c0392b;
border: 1px solid #f5c6cb;
}
.gayahidup-tag.tidak {
background: #F4FAF1;
color: #2D5A3D;
border: 1px solid #D8E8D2;
}
/* ─── Indikasi Lain Tags ─── */
.riwayat-indikasi-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.indikasi-tag {
background: #fff8e1;
border: 1px solid #ffe082;
color: #f57f17;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 50px;
}

683
public/css/utama.css Normal file
View File

@ -0,0 +1,683 @@
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');
/* ─── Variables ─── */
:root {
--green-deep: #2D5A3D;
--green-mid: #4F7C59;
--green-soft: #7DAA6E;
--green-pale: #e7f1e4;
--green-mist: #f7faf8;
--text-dark: #1a2e1f;
--text-muted: #6b7c6e;
--white: #ffffff;
--radius-xl: 40px;
--radius-lg: 24px;
--radius-md: 12px;
--shadow-card: 0 2px 20px rgba(45,90,61,0.08);
--shadow-lg: 0 12px 48px rgba(45,90,61,0.15);
}
/* ─── Global ─── */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text-dark);
}
/* ════════════════════════════════
HERO SECTION
════════════════════════════════ */
.hero-section {
padding: 100px 0 80px;
background: radial-gradient(circle at 80% 20%, #f0f7ed 0%, #ffffff 70%);
overflow: hidden;
position: relative;
}
.hero-section::before {
content: '';
position: absolute;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(125,170,110,0.12) 0%, transparent 70%);
top: -100px; right: -100px;
pointer-events: none;
}
.hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
line-height: 1.2;
color: var(--text-dark);
margin-bottom: 20px;
}
.hero-title span {
color: var(--green-mid);
font-weight: 800;
}
.hero-desc {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 500px;
margin-bottom: 40px;
}
/* Hero Buttons */
.btn-hero-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--green-soft), var(--green-mid));
color: white;
padding: 14px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
border: none;
box-shadow: 0 6px 24px rgba(79,124,89,0.3);
transition: all 0.3s ease;
}
.btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 32px rgba(79,124,89,0.4);
color: white;
}
.btn-hero-outline {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--green-mid);
padding: 13px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
border: 2px solid var(--green-soft);
transition: all 0.3s ease;
}
.btn-hero-outline:hover {
background: var(--green-soft);
color: white;
transform: translateY(-3px);
}
/* Hero Image */
.hero-img-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-img-wrap::before {
content: '';
position: absolute;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(125,170,110,0.18) 0%, transparent 70%);
border-radius: 50%;
}
.hero-img {
width: 100%;
max-width: 520px;
max-height: 420px;
height: auto;
object-fit: contain;
border-radius: 50px;
position: relative;
z-index: 1;
animation: floating 4s ease-in-out infinite;
filter: drop-shadow(0 20px 40px rgba(79,124,89,0.2));
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-14px); }
100% { transform: translateY(0px); }
}
/* ════════════════════════════════
FEATURE CARDS
════════════════════════════════ */
.features-section {
padding: 20px 0 60px;
background: var(--white);
}
.feature-card {
background: var(--white);
border: 1px solid rgba(0,0,0,0.05);
border-radius: var(--radius-lg);
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-soft), var(--green-deep));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
width: 56px; height: 56px;
background: var(--green-pale);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
color: var(--green-mid);
margin-bottom: 20px;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
background: var(--green-mid);
color: white;
transform: scale(1.08);
}
.feature-card h4 {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 10px;
color: var(--text-dark);
}
.feature-card p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
}
/* ════════════════════════════════
TENTANG SECTION
════════════════════════════════ */
.tentang-section {
background-color: var(--green-pale);
border-radius: 60px 60px 0 0;
padding: 80px 0 100px;
}
/* ── Header ── */
.st-header {
text-align: center;
margin-bottom: 4rem;
}
.st-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--green-deep);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.st-subtitle {
font-size: 14px;
color: var(--text-muted);
max-width: 480px;
margin: 0 auto;
line-height: 1.7;
}
/* ── Steps wrapper ── */
.st-steps {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 3rem;
position: relative;
}
/* ── Satu baris step (3 kolom: kiri | center | kanan) ── */
.st-step {
display: grid;
grid-template-columns: 1fr 56px 1fr;
align-items: stretch;
min-height: 160px;
}
.st-step-left {
padding: 2rem 2rem 2rem 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.st-step-right {
padding: 2rem 0 2rem 2rem;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Step genap: flip kiri-kanan */
.st-step:nth-child(even) .st-step-left {
order: 3;
padding: 2rem 0 2rem 2rem;
justify-content: flex-start;
}
.st-step:nth-child(even) .st-step-center {
order: 2;
}
.st-step:nth-child(even) .st-step-right {
order: 1;
padding: 2rem 2rem 2rem 0;
justify-content: flex-end;
}
/* ── Node tengah ── */
.st-step-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.st-node {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--green-soft);
background: var(--green-pale);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.st-step:hover .st-node {
border-color: var(--green-mid);
background: #fff;
}
.st-node.st-active {
border-color: var(--green-deep);
background: var(--white);
transform: scale(1.12);
}
.st-node-inner {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(125, 170, 110, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
/* ── Card konten ── */
.st-card {
background: var(--white);
border: 1px solid rgba(125, 170, 110, 0.2);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
max-width: 300px;
width: 100%;
box-shadow: var(--shadow-card);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.st-card:hover {
border-color: var(--green-soft);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.st-card.st-active {
border-color: var(--green-soft);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.st-card-num {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--green-mid);
margin: 0 0 8px;
}
.st-card-title {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 6px;
line-height: 1.3;
}
.st-card-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* ── Ilustrasi SVG ── */
.st-illus {
max-width: 240px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.st-illus svg {
width: 100%;
height: auto;
filter: drop-shadow(0 4px 12px rgba(45, 90, 61, 0.1));
}
/* ── Disclaimer ── */
.st-disclaimer {
display: flex;
gap: 12px;
align-items: flex-start;
background: #FFF8EC;
border: 1px solid rgba(239, 159, 39, 0.4);
border-radius: var(--radius-md);
padding: 14px 18px;
max-width: 640px;
margin: 0 auto;
}
.st-disclaimer-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: #EF9F27;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.st-disclaimer-icon svg {
width: 10px;
height: 10px;
}
.st-disclaimer-text {
font-size: 12.5px;
color: #633806;
line-height: 1.6;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.tentang-section {
border-radius: 40px 40px 0 0;
padding: 60px 0 80px;
}
.st-step {
grid-template-columns: 56px 1fr;
min-height: auto;
}
/* sembunyikan kolom kiri (ilustrasi), tampilkan kolom kanan (card) */
.st-step-left { display: none !important; }
.st-step-center { order: 1 !important; justify-content: center; }
.st-step-right {
order: 2 !important;
display: flex !important;
padding: 1.25rem 0 1.25rem 1rem !important;
justify-content: flex-start !important;
}
/* reset nth-child(even) flip di mobile */
.st-step:nth-child(even) .st-step-left { display: none !important; }
.st-step:nth-child(even) .st-step-center { order: 1 !important; }
.st-step:nth-child(even) .st-step-right {
order: 2 !important;
padding: 1.25rem 0 1.25rem 1rem !important;
justify-content: flex-start !important;
}
/* sembunyikan ilustrasi di dalam st-step-right kalau ada */
.st-step-right .st-illus { display: none !important; }
.st-card { max-width: 100%; }
.st-header { margin-bottom: 2.5rem; }
#timelineSvg { display: none; }
}
/* ════════════════════════════════
GEJALA SECTION
════════════════════════════════ */
.gejala-section {
background: var(--white);
padding: 80px 0;
}
.section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.2rem);
color: var(--text-dark);
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.section-divider {
width: 48px; height: 3px;
background: linear-gradient(90deg, var(--green-soft), var(--green-deep));
border-radius: 2px;
margin: 0 auto 48px;
}
.gejala-img {
max-height: 380px;
mix-blend-mode: multiply;
border-radius: 40px;
filter: drop-shadow(0 15px 30px rgba(200, 240, 200, 0.8));
}
.gejala-card {
padding: 20px;
border-radius: var(--radius-md);
background: var(--green-mist);
border: 1px solid transparent;
transition: all 0.3s ease;
height: 100%;
}
.gejala-card:hover {
background: var(--white);
border-color: rgba(125,170,110,0.3);
box-shadow: var(--shadow-card);
transform: translateY(-3px);
}
.gejala-number {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 2.2rem;
color: var(--green-soft);
opacity: 0.7;
line-height: 1;
margin-bottom: 10px;
}
.gejala-card h6 {
font-weight: 700;
font-size: 0.9rem;
color: var(--text-dark);
margin-bottom: 6px;
}
.gejala-card p {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* ════════════════════════════════
CTA SECTION
════════════════════════════════ */
.cta-section {
padding: 60px 0 80px;
background: var(--white);
}
.cta-box {
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-soft) 100%);
color: white;
padding: 64px 60px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
text-align: center;
}
.cta-box::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
top: -150px; right: -100px;
pointer-events: none;
}
.cta-box::after {
content: '';
position: absolute;
width: 250px; height: 250px;
background: rgba(255,255,255,0.04);
border-radius: 50%;
bottom: -80px; left: -60px;
pointer-events: none;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.92);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 6px 14px;
border-radius: 50px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.cta-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
margin-bottom: 14px;
line-height: 1.25;
position: relative;
z-index: 1;
}
.cta-trust {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 24px;
margin-bottom: 36px;
position: relative;
z-index: 1;
}
.cta-trust-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.88);
}
.cta-trust-item i {
color: #a8e6a3;
font-size: 14px;
}
.cta-actions {
position: relative;
z-index: 1;
margin-bottom: 20px;
}
.btn-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: var(--green-deep);
padding: 14px 40px;
border-radius: 50px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.btn-cta:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
color: var(--green-deep);
}
.cta-note {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin: 0;
position: relative;
z-index: 1;
}
.cta-note a {
color: rgba(255,255,255,0.9);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.cta-note a:hover {
color: white;
}
@media (max-width: 768px) {
.cta-box {
padding: 48px 24px;
}
.cta-trust {
gap: 8px 16px;
}
.cta-title br { display: none; }
.hero-img-wrap {
display: none;
}
.gejala-img {
display: none;
}
}

0
public/favicon.ico Normal file
View File

BIN
public/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/img/kartun-sakit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
public/img/lambung2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
public/img/sehati-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
public/img/sehati2-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 KiB

20
public/index.php Normal file
View File

@ -0,0 +1,20 @@
<?php
use Illuminate\Foundation\Application;
use Illuminate\Http\Request;
define('LARAVEL_START', microtime(true));
// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
require $maintenance;
}
// Register the Composer autoloader...
require __DIR__.'/../vendor/autoload.php';
// Bootstrap Laravel and handle the request...
/** @var Application $app */
$app = require_once __DIR__.'/../bootstrap/app.php';
$app->handleRequest(Request::capture());

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow:

11
resources/css/app.css Normal file
View File

@ -0,0 +1,11 @@
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}

1
resources/js/app.js Normal file
View File

@ -0,0 +1 @@
import './bootstrap';

4
resources/js/bootstrap.js vendored Normal file
View File

@ -0,0 +1,4 @@
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

89
resources/views/layouts/app.blade.php Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>SEHATI</title>
<link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.ico') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="{{ asset('css/layout.css') }}">
@stack('styles')
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container py-2">
<a class="navbar-brand" href="/">
<img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="navbar-logo">
SEHATI
</a>
<!-- Hamburger -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarMenu"
aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
<li class="nav-item"><a class="nav-link mx-1" href="/#home">Home</a></li>
<li class="nav-item"><a class="nav-link mx-1" href="/#tentang">Tentang</a></li>
<li class="nav-item"><a class="nav-link mx-1" href="/#gejala">Gejala</a></li>
<li class="nav-item mt-2 mt-lg-0 ms-lg-2">
@auth
<div class="dropdown">
<button class="nav-profil-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<div class="nav-profil-avatar">
{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
</div>
<span class="nav-profil-name d-none d-lg-inline">{{ Str::limit(Auth::user()->name, 8) }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end nav-dropdown">
<li>
<a class="dropdown-item nav-dropdown-item" href="{{ route('riwayat.prediksi') }}">
<i class="fa-solid fa-clock-rotate-left"></i>
Riwayat Prediksi
</a>
</li>
<li><hr class="dropdown-divider nav-dropdown-divider"></li>
<li>
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="dropdown-item nav-dropdown-item nav-dropdown-logout">
<i class="fa-solid fa-right-from-bracket"></i>
Logout
</button>
</form>
</li>
</ul>
</div>
@endauth
@guest
<a class="nav-link nav-btn-login" href="{{ route('login') }}">Login</a>
@endguest
</li>
</ul>
</div>
</div>
</nav>
@yield('content')
<footer>
<small>&copy; 2026 SEHATI &mdash; Sistem Prediksi</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')
</body>
</html>

124
resources/views/login/lupa-password.blade.php Normal file
View File

@ -0,0 +1,124 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/lupa-password.css') }}">
@endpush
@section('content')
<section class="login-section">
<div class="login-card">
{{-- Header --}}
<div class="login-header">
<div class="login-logo-wrap">
<div class="login-logo-box">
<img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
</div>
<span class="login-brand">SEHATI</span>
</div>
<p class="login-subtitle">Reset password akun Anda</p>
</div>
{{-- Notifikasi error --}}
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
<form action="{{ route('password.update') }}" method="POST">
@csrf
{{-- Email --}}
<div>
<label class="login-label" for="email">Email</label>
<div class="login-input-wrap">
<i class="fa-solid fa-envelope login-input-icon"></i>
<input
type="email"
id="email"
name="email"
class="login-input"
placeholder="email@example.com"
value="{{ old('email') }}"
autocomplete="email"
>
</div>
@error('email')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
{{-- Password Baru --}}
<div>
<label class="login-label" for="password">Password Baru</label>
<div class="login-input-wrap">
<i class="fa-solid fa-lock login-input-icon"></i>
<input
type="password"
id="password"
name="password"
class="login-input"
placeholder="Minimal 8 karakter"
>
</div>
@error('password')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
{{-- Konfirmasi Password --}}
<div>
<label class="login-label" for="password_confirmation">Konfirmasi Password</label>
<div class="login-input-wrap">
<i class="fa-solid fa-lock login-input-icon"></i>
<input
type="password"
id="password_confirmation"
name="password_confirmation"
class="login-input"
placeholder="Ulangi password baru"
>
</div>
<small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
</div>
<button type="submit" class="btn-login">Simpan Password Baru</button>
</form>
</div>
</section>
@endsection
@push('scripts')
<script>
const password = document.getElementById('password');
const konfirmasi = document.getElementById('password_confirmation');
const btnSubmit = document.querySelector('.btn-login');
function cekPassword() {
const val = konfirmasi.value;
// Kalau konfirmasi belum diisi, reset saja
if (val === '') {
konfirmasi.style.borderColor = '';
document.getElementById('pesan-konfirmasi').textContent = '';
btnSubmit.disabled = false;
return;
}
if (password.value === val) {
konfirmasi.style.borderColor = '#2d6a2f';
document.getElementById('pesan-konfirmasi').textContent = '✓ Password sesuai';
document.getElementById('pesan-konfirmasi').style.color = '#2d6a2f';
btnSubmit.disabled = false;
} else {
konfirmasi.style.borderColor = '#e53935';
document.getElementById('pesan-konfirmasi').textContent = '⚠ Password tidak sesuai';
document.getElementById('pesan-konfirmasi').style.color = '#e53935';
btnSubmit.disabled = true;
}
}
konfirmasi.addEventListener('input', cekPassword);
password.addEventListener('input', cekPassword); // re-cek kalau password utama diubah
</script>
@endpush

145
resources/views/login/register.blade.php Normal file
View File

@ -0,0 +1,145 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/register.css') }}">
@endpush
@section('content')
<section class="login-section">
<div class="login-card">
{{-- Header --}}
<div class="login-header">
<div class="login-logo-wrap">
<div class="login-logo-box">
<img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
</div>
<span class="login-brand">SEHATI</span>
</div>
<p class="login-subtitle">Buat akun baru Anda</p>
</div>
{{-- Error / success --}}
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
{{-- Form --}}
<form action="{{ route('register.store') }}" method="POST">
@csrf
{{-- Email --}}
<div>
<label class="login-label" for="email">Email</label>
<div class="login-input-wrap">
<i class="fa-solid fa-envelope login-input-icon"></i>
<input
type="email"
id="email"
name="email"
class="login-input"
placeholder="email@example.com"
value="{{ old('email') }}"
autocomplete="email"
>
</div>
@error('email')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
{{-- Password --}}
<div>
<label class="login-label" for="password">Password</label>
<div class="login-input-wrap">
<i class="fa-solid fa-lock login-input-icon"></i>
<input
type="password"
id="password"
name="password"
class="login-input"
placeholder="Minimal 8 karakter"
autocomplete="new-password"
>
</div>
@error('password')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
{{-- Konfirmasi Password --}}
<div>
<label class="login-label" for="password_confirmation">Konfirmasi Password</label>
<div class="login-input-wrap">
<i class="fa-solid fa-lock login-input-icon"></i>
<input
type="password"
id="password_confirmation"
name="password_confirmation"
class="login-input"
placeholder="Ulangi password"
autocomplete="new-password"
>
</div>
<small id="pesan-konfirmasi" style="font-size:12px; margin-top:-10px; display:block;"></small>
</div>
{{-- Submit --}}
<button type="submit" class="btn-login">Daftar Sekarang</button>
{{-- Divider --}}
<div class="login-divider">
<span>Atau daftar dengan</span>
</div>
{{-- Social --}}
<div class="d-flex justify-content-center">
<a href="{{ route('auth.google') }}" class="btn-social">
<img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" width="20" alt="Google">
</a>
</div>
</form>
{{-- Login link --}}
<div class="login-register">
Sudah punya akun?
<a href="{{ route('login') }}">Masuk di sini</a>
</div>
</div>
</section>
@endsection
@push('scripts')
<script>
const password = document.getElementById('password');
const konfirmasi = document.getElementById('password_confirmation');
const btnSubmit = document.querySelector('.btn-login');
function cekPassword() {
const val = konfirmasi.value;
if (val === '') {
konfirmasi.style.borderColor = '';
document.getElementById('pesan-konfirmasi').textContent = '';
btnSubmit.disabled = false;
return;
}
if (password.value === val) {
konfirmasi.style.borderColor = '#2d6a2f';
document.getElementById('pesan-konfirmasi').textContent = '✓ Password sesuai';
document.getElementById('pesan-konfirmasi').style.color = '#2d6a2f';
btnSubmit.disabled = false;
} else {
konfirmasi.style.borderColor = '#e53935';
document.getElementById('pesan-konfirmasi').textContent = '⚠ Password tidak sesuai';
document.getElementById('pesan-konfirmasi').style.color = '#e53935';
btnSubmit.disabled = true;
}
}
konfirmasi.addEventListener('input', cekPassword);
password.addEventListener('input', cekPassword);
</script>
@endpush

87
resources/views/login/welcome.blade.php Normal file
View File

@ -0,0 +1,87 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/login.css') }}">
@endpush
@section('content')
<section class="login-section">
<div class="login-card">
{{-- Header --}}
<div class="login-header">
<div class="login-logo-wrap">
<div class="login-logo-box">
<img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="login-logo">
</div>
<span class="login-brand">SEHATI</span>
</div>
<p class="login-subtitle">Silakan masuk ke akun Anda</p>
</div>
{{-- Notifikasi error --}}
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
{{-- Notifikasi success (misal setelah reset password) --}}
@if (session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
{{-- Form --}}
<form action="{{ route('login') }}" method="POST">
@csrf
{{-- Email --}}
<div>
<label class="login-label" for="email">Email</label>
<div class="login-input-wrap">
<i class="fa-solid fa-envelope login-input-icon"></i>
<input type="email" id="email" name="email" class="login-input" placeholder="email@example.com" autocomplete="email">
</div>
</div>
{{-- Password --}}
<div>
<label class="login-label" for="password">Password</label>
<div class="login-input-wrap">
<i class="fa-solid fa-lock login-input-icon"></i>
<input type="password" id="password" name="password" class="login-input" placeholder="Masukkan password">
</div>
</div>
{{-- Remember & Forgot --}}
<div class="login-row">
<label class="login-remember">
<input type="checkbox" name="remember">
Ingat saya
</label>
<a href="{{ route('password.request') }}" class="login-forgot">Lupa password?</a>
</div>
{{-- Submit --}}
<button type="submit" class="btn-login">Masuk Sekarang</button>
{{-- Divider --}}
<div class="login-divider">
<span>Atau masuk dengan</span>
</div>
{{-- Social --}}
<div class="d-flex justify-content-center">
<a href="{{ route('auth.google') }}" class="btn-social">
<img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" width="20" alt="Google">
</a>
</div>
</form>
{{-- Register --}}
<div class="login-register">
Belum punya akun?
<a href="{{ route('register') }}">Daftar di sini</a>
</div>
</div>
</section>
@endsection

435
resources/views/tampilanutama/prediksi.blade.php Normal file
View File

@ -0,0 +1,435 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/prediksi.css') }}">
@endpush
@section('content')
<div class="bg-blob bg-blob-1"></div>
<div class="bg-blob bg-blob-2"></div>
<div class="page-wrap">
<!-- Header -->
<div class="form-header">
<p class="eyebrow">Pemeriksaan Awal</p>
<h2 class="form-main-title">Cek Kondisi Tubuh Anda</h2>
</div>
<!-- Step Progress -->
<div class="step-progress">
<div class="step-dot active" id="step-dot-1">
<div class="dot">1</div>
<span class="dot-label">Data Diri</span>
</div>
<div class="step-line" id="line-1-2"></div>
<div class="step-dot" id="step-dot-2">
<div class="dot">2</div>
<span class="dot-label">Gejala</span>
</div>
<div class="step-line" id="line-2-3"></div>
<div class="step-dot" id="step-dot-3">
<div class="dot">3</div>
<span class="dot-label">Gaya Hidup</span>
</div>
<div class="step-line" id="line-3-4"></div>
<div class="step-dot" id="step-dot-4">
<div class="dot">4</div>
<span class="dot-label">Hasil</span>
</div>
</div>
<!-- Card -->
<div class="form-card">
<form method="POST" action="{{ route('prediksi.proses') }}">
@csrf
<div class="slide-container">
{{-- ─── SLIDE 1: Data Diri ─── --}}
@if(!Auth::check())
<div class="prediction-slide active" id="slide-1">
<div class="slide-title">
<span class="icon">👤</span> Informasi Dasar
</div>
<div class="field-group">
<label for="nama">Nama Lengkap</label>
<input type="text" id="nama" name="nama" placeholder="cth. Budi Santoso" autocomplete="off">
<span class="field-error" id="err-nama">Nama tidak boleh kosong.</span>
</div>
<div class="field-group">
<label>Jenis Kelamin</label>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="jenis_kelamin" id="jk_l" value="L">
<label for="jk_l">♂ Laki-laki</label>
</div>
<div class="radio-option">
<input type="radio" name="jenis_kelamin" id="jk_p" value="P">
<label for="jk_p">♀ Perempuan</label>
</div>
</div>
<span class="field-error" id="err-jk">Pilih jenis kelamin.</span>
</div>
<div class="field-group">
<label for="umur">Umur</label>
<input type="number" id="umur" name="umur" placeholder="cth. 28" min="1" max="120">
<span class="field-error" id="err-umur">Masukkan umur yang valid.</span>
</div>
<div class="form-nav">
<button type="button" class="btn-prev" disabled>← Kembali</button>
<button type="button" class="btn-next" onclick="nextSlide(1)">Lanjut →</button>
</div>
</div>
@endif
{{-- ─── SLIDE 2: Gejala ─── --}}
<div class="prediction-slide {{ Auth::check() ? 'active' : '' }}" id="slide-2">
<div class="slide-title">
<span class="icon">🩺</span> Gejala yang Dirasakan
</div>
<div class="field-group">
<label>Pilih gejala yang sesuai</label>
<div class="symptom-grid">
@php
$gejala = [
'g1' => 'Nyeri Ulu Hati (Perut Bagian Atas)',
'g2' => 'Kembung',
'g3' => 'Dada Terasa Terbakar (Heartburn)',
'g4' => 'BAB Berdarah',
'g5' => 'Nafsu Makan Turun',
'g6' => 'Penurunan Berat Badan Akibat Sering Muntah',
];
@endphp
@foreach($gejala as $id => $label)
<div class="symptom-item">
<input type="checkbox" id="{{ $id }}" name="gejala[]" value="{{ $id }}">
<label for="{{ $id }}">
<span class="check-box"></span>
{{ $label }}
</label>
</div>
@endforeach
</div>
<span class="field-error" id="err-gejala">Minimal pilih 2 gejala agar sistem dapat melakukan prediksi.</span>
</div>
<div class="form-nav">
<button type="button" class="btn-prev" onclick="prevSlide(2)">← Kembali</button>
<button type="button" class="btn-next" onclick="nextSlide(2)">Lanjut →</button>
</div>
</div>
{{-- ─── SLIDE 3: Gaya Hidup ─── --}}
<div class="prediction-slide" id="slide-3">
<div class="slide-title">
<span class="icon">🌿</span> Faktor Gaya Hidup
</div>
<small class="slide-hint">Informasi gaya hidup akan membantu sistem memberikan prediksi yang lebih akurat.</small>
<div class="field-group">
<label>Mengalami Stres</label>
<small class="field-hint">Sering merasa cemas, tertekan, atau stres lebih dari 3-4 kali dalam seminggu</small>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="stres" id="stres_tidak" value="tidak">
<label for="stres_tidak">Tidak</label>
</div>
<div class="radio-option">
<input type="radio" name="stres" id="stres_ya" value="ya">
<label for="stres_ya">Ya</label>
</div>
</div>
<span class="field-error" id="err-stres">Silahkan pilih salah satu.</span>
</div>
<div class="field-group">
<label>Kebiasaan Merokok</label>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="merokok" id="rokok_tidak" value="tidak">
<label for="rokok_tidak">Tidak</label>
</div>
<div class="radio-option">
<input type="radio" name="merokok" id="rokok_ya" value="ya">
<label for="rokok_ya">Ya</label>
</div>
</div>
<span class="field-error" id="err-merokok">Silahkan pilih salah satu.</span>
</div>
<div class="field-group">
<label>Konsumsi Alkohol</label>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="alkohol" id="alkohol_tidak" value="tidak">
<label for="alkohol_tidak">Tidak</label>
</div>
<div class="radio-option">
<input type="radio" name="alkohol" id="alkohol_ya" value="ya">
<label for="alkohol_ya">Ya</label>
</div>
</div>
<span class="field-error" id="err-alkohol">Silahkan pilih salah satu.</span>
</div>
<div class="field-group">
<label>Konsumsi Obat Anti Inflamasi</label>
<small class="field-hint">Rutin mengonsumsi obat anti-inflamasi (seperti paracetamol, ibuprofen, atau asam mefenamat) setiap hari selama ±2 bulan terakhir</small>
<div class="radio-group">
<div class="radio-option">
<input type="radio" name="obat" id="obat_tidak" value="tidak">
<label for="obat_tidak">Tidak</label>
</div>
<div class="radio-option">
<input type="radio" name="obat" id="obat_ya" value="ya">
<label for="obat_ya">Ya</label>
</div>
</div>
<span class="field-error" id="err-obat">Silahkan pilih salah satu.</span>
</div>
<div class="form-nav">
<button type="button" class="btn-prev" onclick="prevSlide(3)">← Kembali</button>
<button type="button" class="btn-next" onclick="nextSlide(3)">Lanjut →</button>
</div>
</div>
{{-- ─── SLIDE 4: Hasil ─── --}}
<div class="prediction-slide" id="slide-4">
<div class="slide-title">
<span class="icon">📋</span> Hasil Pemeriksaan
</div>
@if(isset($hasil) && $hasil != "Tidak ada hasil")
<div class="result-box risk">
<div class="result-badge">
⚠️ Risiko Terdeteksi
</div>
<div class="disease-name">{{ $hasil }}</div>
@if(!empty($indikasi))
<p class="result-desc">
Terdapat gejala yang juga mengarah ke: <strong>{{ implode(', ', $indikasi) }}</strong>. Disarankan untuk pemeriksaan lebih lanjut.
</p>
@endif
<div class="result-divider"></div>
<div class="result-tips">
<div class="tips-label">💡 Saran</div>
<p class="tips-text">
@if($hasil == "Gastritis")
Makan secara teratur dan dalam porsi yang cukup, menghindari makanan pedas atau asam, tidak merokok dan tidak mengonsumsi alkohol, serta membatasi penggunaan obat anti inflamasi.
@elseif($hasil == "Gerd")
Hindari makanan yang berpotensi memicu gejala refluks seperti kopi, minuman bersoda, makanan pedas dan asam, serta makanan dengan kandungan lemak tinggi.
Selain itu, hindari merokok dan konsumsi alkohol.
@elseif($hasil == "Dispepsia")
Makan secara teratur, mengontrol stres, serta menghindari makanan pemicu seperti makanan pedas, asam, dan tinggi lemak.
@endif
</p>
</div>
<p class="result-desc">
Segera konsultasikan kondisi Anda ke dokter atau tenaga medis supaya mendapatkan penanganan yang tepat.
</p>
<div class="disclaimer-line"></div>
<div class="result-disclaimer">
<span class="disclaimer-icon">❗️</span>
<p>Prediksi ini dibuat oleh sistem berbasis machine learning dan <strong>tidak menggantikan</strong> diagnosis tenaga medis profesional.</p>
</div>
</div>
@else
<div class="result-placeholder">
<div class="result-icon">🌿</div>
<p>Sistem kami siap menganalisis kondisi Anda berdasarkan data yang telah diisi.</p>
<p style="margin-top:8px; font-size:12px;">
Klik <strong>Analisis</strong> untuk melihat hasil prediksi.
</p>
</div>
@endif
<div class="form-nav">
@if(isset($hasil))
<a href="{{ route('halaman.prediksi') }}" class="btn-prev">Cek Ulang</a>
<a href="{{ route('utama') }}" class="btn-next" style="text-decoration:none;">Selesai ✓</a>
@else
<button type="button" class="btn-prev" onclick="prevSlide(4)">← Kembali</button>
<button type="submit" class="btn-next">Analisis ✦</button>
@endif
</div>
</div>
</div>
</form>
</div>
{{-- Custom Alert Modal --}}
<div class="custom-alert-overlay" id="customAlertOverlay">
<div class="custom-alert-box">
<div class="custom-alert-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="#e6a817" stroke-width="2.2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
<p>Gejala yang dipilih masih terlalu umum. Tambahkan gejala lain agar sistem dapat melakukan prediksi yang lebih akurat.</p>
<button class="custom-alert-btn" onclick="closeCustomAlert()">Mengerti</button>
</div>
</div>
</div>
@push('scripts')
<script>
let currentSlide = {{ Auth::check() ? 2 : 1 }};
const totalSlides = 4;
updateProgress();
const slideValidations = {
1: () => {
if ({{ Auth::check() ? 'true' : 'false' }}) return true;
let valid = true;
const nama = document.getElementById('nama');
const umur = document.getElementById('umur');
const jk = document.querySelector('input[name="jenis_kelamin"]:checked');
clearErrors();
if (!nama.value.trim()) { showError('nama', nama); valid = false; }
if (!jk) { showError('jk'); valid = false; }
if (!umur.value || umur.value < 1 || umur.value > 120) {
showError('umur', umur); valid = false;
}
return valid;
},
2: () => {
clearErrors();
const checked = document.querySelectorAll('input[name="gejala[]"]:checked');
if (checked.length < 2) {
showError('gejala');
return false;
}
return true;
},
3: () => {
clearErrors();
const stres = document.querySelector('input[name="stres"]:checked');
const merokok = document.querySelector('input[name="merokok"]:checked');
const alkohol = document.querySelector('input[name="alkohol"]:checked');
const obat = document.querySelector('input[name="obat"]:checked');
let valid = true;
if (!stres) {
showError('stres');
valid = false;
}
if (!merokok) {
showError('merokok');
valid = false;
}
if (!alkohol) {
showError('alkohol');
valid = false;
}
if (!obat) {
showError('obat');
valid = false;
}
return valid;
}
};
function validateSlide(slideNum) {
return slideValidations[slideNum] ? slideValidations[slideNum]() : true;
}
function showError(id, inputEl) {
document.getElementById('err-' + id)?.classList.add('show');
if (inputEl) inputEl.classList.add('error');
}
function clearErrors() {
document.querySelectorAll('.field-error').forEach(el => el.classList.remove('show'));
document.querySelectorAll('input.error, select.error').forEach(el => el.classList.remove('error'));
}
function nextSlide(from) {
if (!validateSlide(from)) return;
goToSlide(from + 1);
}
function prevSlide(from) {
goToSlide(from - 1);
}
function goToSlide(target) {
const current = document.getElementById('slide-' + currentSlide);
const next = document.getElementById('slide-' + target);
if (!next) return;
current.classList.add('exit-left');
setTimeout(() => {
current.classList.remove('active', 'exit-left');
next.classList.add('active');
currentSlide = target;
updateProgress();
}, 200);
}
function updateProgress() {
for (let i = 1; i <= totalSlides; i++) {
const dot = document.getElementById('step-dot-' + i);
dot.classList.remove('active', 'done');
if (i < currentSlide) dot.classList.add('done');
if (i === currentSlide) dot.classList.add('active');
}
document.getElementById('line-1-2').classList.toggle('filled', currentSlide >= 2);
document.getElementById('line-2-3').classList.toggle('filled', currentSlide >= 3);
document.getElementById('line-3-4').classList.toggle('filled', currentSlide >= 4);
}
function showCustomAlert() {
document.getElementById('customAlertOverlay').classList.add('show');
}
function closeCustomAlert() {
document.getElementById('customAlertOverlay').classList.remove('show');
}
document.querySelectorAll('input, select').forEach(el => {
el.addEventListener('input', () => el.classList.remove('error'));
});
@if(isset($hasil))
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.prediction-slide').forEach(slide=>{
slide.classList.remove('active');
});
document.getElementById('slide-4').classList.add('active');
currentSlide = 4;
updateProgress();
});
@endif
</script>
@endpush
@endsection

103
resources/views/tampilanutama/riwayat.blade.php Normal file
View File

@ -0,0 +1,103 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/riwayat.css') }}">
@endpush
@section('content')
<div class="riwayat-wrap">
<div class="riwayat-header">
<h2 class="riwayat-title">Riwayat Prediksi</h2>
<p class="riwayat-subtitle">Daftar hasil prediksi yang pernah kamu lakukan</p>
</div>
@if($riwayat->isEmpty())
<div class="riwayat-empty">
<div class="empty-icon">🩺</div>
<p>Belum ada riwayat prediksi.</p>
<a href="{{ route('halaman.prediksi') }}" class="btn-cek">Mulai Prediksi</a>
</div>
@else
<div class="riwayat-list">
@foreach($riwayat as $item)
<div class="riwayat-card">
{{-- Header card --}}
<div class="riwayat-card-header">
<div class="riwayat-hasil-badge {{ strtolower(str_replace(' ', '-', $item->hasil)) }}">
{{ $item->hasil }}
</div>
<span class="riwayat-tanggal">
<i class="fa-regular fa-clock"></i>
{{ $item->created_at->format('d M Y, H:i') }}
</span>
</div>
{{-- Data diri --}}
<div class="riwayat-section">
<div class="riwayat-row">
<span class="riwayat-key">Nama</span>
<span class="riwayat-val">{{ $item->nama }}</span>
</div>
</div>
{{-- Gejala --}}
<div class="riwayat-section">
<p class="riwayat-section-label">Gejala</p>
<div class="riwayat-gejala-wrap">
@php
$gejalaMap = [
'g1' => 'Nyeri Ulu Hati',
'g2' => 'Kembung',
'g3' => 'Heartburn',
'g4' => 'BAB Berdarah',
'g5' => 'Nafsu Makan Turun',
'g6' => 'Penurunan Berat Badan',
];
@endphp
@foreach($item->gejala as $g)
<span class="gejala-tag">{{ $gejalaMap[$g] ?? $g }}</span>
@endforeach
</div>
</div>
{{-- Gaya hidup --}}
<div class="riwayat-section">
<p class="riwayat-section-label">Gaya Hidup</p>
<div class="riwayat-gayahidup-wrap">
<span class="gayahidup-tag {{ $item->stres == 'ya' ? 'aktif' : 'tidak' }}">
Stres: {{ ucfirst($item->stres) }}
</span>
<span class="gayahidup-tag {{ $item->merokok == 'ya' ? 'aktif' : 'tidak' }}">
Merokok: {{ ucfirst($item->merokok) }}
</span>
<span class="gayahidup-tag {{ $item->alkohol == 'ya' ? 'aktif' : 'tidak' }}">
Alkohol: {{ ucfirst($item->alkohol) }}
</span>
<span class="gayahidup-tag {{ $item->obat == 'ya' ? 'aktif' : 'tidak' }}">
Obat Anti Inflamasi: {{ ucfirst($item->obat) }}
</span>
</div>
</div>
{{-- Indikasi Lain --}}
@if(!empty($item->indikasi) && count($item->indikasi) > 0)
<div class="riwayat-section">
<p class="riwayat-section-label">Indikasi Lain</p>
<div class="riwayat-indikasi-wrap">
@foreach($item->indikasi as $ind)
<span class="indikasi-tag">{{ $ind }}</span>
@endforeach
</div>
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
@endsection

489
resources/views/tampilanutama/utama.blade.php Normal file
View File

@ -0,0 +1,489 @@
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/utama.css') }}">
@endpush
@section('content')
{{-- ════════════════════════════════
HERO
════════════════════════════════ --}}
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 reveal">
<h1 class="hero-title">
Selamat Datang di<br>
<span>Sistem Prediksi Penyakit Akibat Nyeri Ulu Hati</span>
</h1>
<p class="hero-desc">
Sistem ini menganalisis gejala dan gaya hidup untuk memberikan gambaran risiko penyakit seperti Dispepsia, Gerd, dan Gastritis.
</p>
<div class="d-flex flex-wrap gap-3">
<a href="{{ route('halaman.prediksi') }}" class="btn-hero-primary">
Mulai Prediksi Sekarang
<i class="fa-solid fa-arrow-right fa-sm"></i>
</a>
<a href="#tentang" class="btn-hero-outline">
Pelajari Tentang Sistem
</a>
</div>
</div>
<div class="col-md-6 mt-5 mt-md-0 reveal reveal-delay-2">
<div class="hero-img-wrap">
<img src="{{ asset('img/lambung2.png') }}" alt="Ilustrasi Lambung" class="hero-img">
</div>
</div>
</div>
</div>
</section>
{{-- ════════════════════════════════
FEATURE CARDS
════════════════════════════════ --}}
<section class="features-section">
<div class="container">
<div class="row g-4">
<div class="col-md-6 reveal reveal-delay-1">
<div class="feature-card">
<div class="feature-icon">
<i class="fa-solid fa-chart-line"></i>
</div>
<h4>Akurasi Prediksi Tinggi</h4>
<p>Menggunakan metode Decision Tree untuk menghasilkan prediksi yang akurat berdasarkan data klinis yang diinput.</p>
</div>
</div>
<div class="col-md-6 reveal reveal-delay-2">
<div class="feature-card">
<div class="feature-icon">
<i class="fa-solid fa-shield-halved"></i>
</div>
<h4>Privasi Terjamin</h4>
<p>Data tidak disimpan atau dibagikan kepada pihak lain. Keamanan informasi kesehatan Anda adalah prioritas kami.</p>
</div>
</div>
</div>
</div>
</section>
{{-- ════════════════════════════════
TENTANG
════════════════════════════════ --}}
<section id="tentang" class="tentang-section">
<div class="container">
{{-- Header --}}
<div class="st-header reveal">
<h2 class="st-title">Cara Kerja Sistem</h2>
<p class="st-subtitle">
Melalui kuesioner sederhana, sistem akan menganalisis gejala dan gaya hidup dan memprosesnya dengan metode Decision Tree untuk menampilkan hasil prediksi risiko penyakit.
</p>
</div>
{{-- Split Steps --}}
<div style="position: relative;">
{{-- SVG garis timeline --}}
<svg id="timelineSvg" style="position:absolute;left:50%;transform:translateX(-50%);top:0;width:60px;pointer-events:none;z-index:0;" viewBox="0 0 60 640" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 20 C50 100, 10 200, 30 300 C50 400, 10 500, 30 580 C40 610, 25 625, 30 640" stroke="#c8dfc3" stroke-width="1.5" stroke-linecap="round" fill="none"/>
<path id="timelineProgress" d="M30 20 C50 100, 10 200, 30 300 C50 400, 10 500, 30 580 C40 610, 25 625, 30 640" stroke="#2D5A3D" stroke-width="2.5" stroke-linecap="round" fill="none"/>
</svg>
<div class="st-steps" id="stSteps">
{{-- Langkah 01: ilustrasi kiri, card kanan --}}
<div class="st-step reveal reveal-delay-1">
<div class="st-step-left">
<div class="st-illus">
<svg viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="15" width="140" height="110" rx="12" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<circle cx="100" cy="44" r="16" fill="#4F7C59" opacity=".2"/>
<circle cx="100" cy="44" r="10" fill="#2D5A3D"/>
<rect x="50" y="70" width="40" height="6" rx="3" fill="#7DAA6E" opacity=".5"/>
<rect x="96" y="70" width="60" height="6" rx="3" fill="#7DAA6E"/>
<rect x="50" y="84" width="40" height="6" rx="3" fill="#7DAA6E" opacity=".5"/>
<rect x="96" y="84" width="50" height="6" rx="3" fill="#7DAA6E" opacity=".7"/>
<rect x="50" y="98" width="40" height="6" rx="3" fill="#7DAA6E" opacity=".5"/>
<rect x="96" y="98" width="55" height="6" rx="3" fill="#7DAA6E" opacity=".6"/>
<line x1="90" y1="68" x2="90" y2="108" stroke="#7DAA6E" stroke-width="0.5" opacity=".4"/>
</svg>
</div>
</div>
<div class="st-step-center">
<div class="st-node" id="stNode0">
<div class="st-node-inner">&#128100;</div>
</div>
</div>
<div class="st-step-right">
<div class="st-card" id="stCard0">
<p class="st-card-num">Langkah 01</p>
<p class="st-card-title">Isi data diri</p>
<p class="st-card-desc">Masukkan informasi dasar seperti nama, usia, dan jenis kelamin sebagai identitas sebelum memulai pemeriksaan.</p>
</div>
</div>
</div>
{{-- Langkah 02: ilustrasi kiri, card kanan --}}
{{-- (CSS nth-child(even) akan flip tampilannya: card ke kiri, ilustrasi ke kanan) --}}
<div class="st-step reveal reveal-delay-2">
<div class="st-step-left">
<div class="st-illus">
<svg viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="15" width="140" height="110" rx="12" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<circle cx="50" cy="38" r="6" fill="#2D5A3D"/>
<text x="50" y="41" text-anchor="middle" font-size="7" fill="#e7f1e4" font-weight="700" font-family="Plus Jakarta Sans, sans-serif">✓</text>
<rect x="62" y="34" width="90" height="7" rx="3" fill="#7DAA6E"/>
<circle cx="50" cy="58" r="6" fill="#2D5A3D"/>
<text x="50" y="61" text-anchor="middle" font-size="7" fill="#e7f1e4" font-weight="700" font-family="Plus Jakarta Sans, sans-serif">✓</text>
<rect x="62" y="54" width="75" height="7" rx="3" fill="#7DAA6E" opacity=".8"/>
<circle cx="50" cy="78" r="6" fill="#4F7C59" opacity=".4"/>
<rect x="62" y="74" width="85" height="7" rx="3" fill="#7DAA6E" opacity=".5"/>
<circle cx="50" cy="98" r="6" fill="#4F7C59" opacity=".3"/>
<rect x="62" y="94" width="65" height="7" rx="3" fill="#7DAA6E" opacity=".4"/>
<rect x="50" y="112" width="100" height="5" rx="2.5" fill="#c8dfc3"/>
<rect x="50" y="112" width="55" height="5" rx="2.5" fill="#2D5A3D"/>
</svg>
</div>
</div>
<div class="st-step-center">
<div class="st-node" id="stNode1">
<div class="st-node-inner">&#128203;</div>
</div>
</div>
<div class="st-step-right">
<div class="st-card" id="stCard1">
<p class="st-card-num">Langkah 02</p>
<p class="st-card-title">Isi kuesioner gejala & gaya hidup</p>
<p class="st-card-desc">Jawab pertanyaan seputar gejala yang dirasakan serta kebiasaan gaya hidup Anda seperti stres, kebiasaan merokok, konsumsi alkohol, dan penggunaan obat anti inflamasi</p>
</div>
</div>
</div>
{{-- Langkah 03: ilustrasi kiri, card kanan --}}
<div class="st-step reveal reveal-delay-1">
<div class="st-step-left">
<div class="st-illus">
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
<rect x="80" y="10" width="40" height="18" rx="9" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<text x="100" y="21" text-anchor="middle" font-size="8" fill="#2D5A3D" font-weight="600" font-family="Plus Jakarta Sans, sans-serif">Nyeri?</text>
<line x1="100" y1="28" x2="65" y2="50" stroke="#7DAA6E" stroke-width="1.5"/>
<line x1="100" y1="28" x2="135" y2="50" stroke="#7DAA6E" stroke-width="1.5"/>
<rect x="38" y="50" width="54" height="18" rx="9" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<text x="65" y="61" text-anchor="middle" font-size="7" fill="#2D5A3D" font-weight="500" font-family="Plus Jakarta Sans, sans-serif">Heartburn?</text>
<rect x="108" y="50" width="54" height="18" rx="9" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<text x="135" y="61" text-anchor="middle" font-size="7" fill="#2D5A3D" font-weight="500" font-family="Plus Jakarta Sans, sans-serif">Obat?</text>
<text x="45" y="82" text-anchor="middle" font-size="6" fill="#4F7C59" font-family="Plus Jakarta Sans, sans-serif">Tidak</text>
<text x="86" y="82" text-anchor="middle" font-size="6" fill="#4F7C59" font-family="Plus Jakarta Sans, sans-serif">Ya</text>
<text x="114" y="82" text-anchor="middle" font-size="6" fill="#4F7C59" font-family="Plus Jakarta Sans, sans-serif">Tidak</text>
<text x="156" y="82" text-anchor="middle" font-size="6" fill="#4F7C59" font-family="Plus Jakarta Sans, sans-serif">Ya</text>
<line x1="52" y1="68" x2="36" y2="100" stroke="#7DAA6E" stroke-width="1.5"/>
<line x1="78" y1="68" x2="100" y2="100" stroke="#7DAA6E" stroke-width="1.5"/>
<line x1="122" y1="68" x2="100" y2="100" stroke="#7DAA6E" stroke-width="1.5"/>
<line x1="148" y1="68" x2="164" y2="100" stroke="#7DAA6E" stroke-width="1.5"/>
<rect x="10" y="100" width="52" height="16" rx="8" fill="#2D5A3D"/>
<text x="36" y="110" text-anchor="middle" font-size="7" fill="#e7f1e4" font-weight="600" font-family="Plus Jakarta Sans, sans-serif">Dispepsia</text>
<rect x="74" y="100" width="52" height="16" rx="8" fill="#4F7C59"/>
<text x="100" y="110" text-anchor="middle" font-size="7" fill="#e7f1e4" font-weight="600" font-family="Plus Jakarta Sans, sans-serif">GERD</text>
<rect x="138" y="100" width="52" height="16" rx="8" fill="#2D5A3D"/>
<text x="164" y="110" text-anchor="middle" font-size="7" fill="#e7f1e4" font-weight="600" font-family="Plus Jakarta Sans, sans-serif">Gastritis</text>
</svg>
</div>
</div>
<div class="st-step-center">
<div class="st-node" id="stNode2">
<div class="st-node-inner">&#127795;</div>
</div>
</div>
<div class="st-step-right">
<div class="st-card" id="stCard2">
<p class="st-card-num">Langkah 03</p>
<p class="st-card-title">Analisis Decision Tree</p>
<p class="st-card-desc">Data yang dimasukkan diolah secara otomatis oleh algoritma pohon keputusan untuk menemukan pola yang paling sesuai.</p>
</div>
</div>
</div>
{{-- Langkah 04: ilustrasi kiri, card kanan --}}
{{-- (CSS nth-child(even) akan flip tampilannya: card ke kiri, ilustrasi ke kanan) --}}
<div class="st-step reveal reveal-delay-2">
<div class="st-step-left">
<div class="st-illus">
<svg viewBox="0 0 220 140" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="15" width="180" height="110" rx="12" fill="#e7f1e4" stroke="#7DAA6E" stroke-width="1"/>
<text x="110" y="34" text-anchor="middle" font-size="7" fill="#4F7C59" font-weight="600" font-family="Plus Jakarta Sans, sans-serif">Hasil Prediksi</text>
<rect x="36" y="40" width="148" height="24" rx="8" fill="#2D5A3D"/>
<text x="110" y="55" text-anchor="middle" font-size="9" fill="#e7f1e4" font-weight="700" font-family="Plus Jakarta Sans, sans-serif">Kemungkinan Risiko: GERD</text>
<line x1="36" y1="74" x2="184" y2="74" stroke="#7DAA6E" stroke-width="0.5" opacity=".5"/>
<text x="36" y="86" font-size="7" fill="#2D5A3D" font-family="Plus Jakarta Sans, sans-serif">Hindari merokok</text>
<text x="36" y="100" font-size="7" fill="#2D5A3D" font-family="Plus Jakarta Sans, sans-serif">Kurangi makanan asam</text>
<text x="36" y="114" font-size="7" fill="#2D5A3D" font-family="Plus Jakarta Sans, sans-serif">Jaga pola makan teratur</text>
</svg>
</div>
</div>
<div class="st-step-center">
<div class="st-node" id="stNode3">
<div class="st-node-inner">&#128202;</div>
</div>
</div>
<div class="st-step-right">
<div class="st-card" id="stCard3">
<p class="st-card-num">Langkah 04</p>
<p class="st-card-title">Hasil prediksi</p>
<p class="st-card-desc">Sistem menampilkan kemungkinan risiko jenis penyakit sebagai gambaran awal kondisi kesehatan Anda.</p>
</div>
</div>
</div>
</div>
</div>
{{-- Disclaimer --}}
<div class="st-disclaimer reveal">
<div class="st-disclaimer-icon">
<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2v3M5 7v.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<p class="st-disclaimer-text">
Hasil sistem ini <strong>bukan diagnosis medis</strong>. Informasi yang diberikan hanya sebagai gambaran awal agar pengguna lebih waspada terhadap kondisi kesehatannya.
</p>
</div>
</div>
</section>
{{-- ════════════════════════════════
GEJALA
════════════════════════════════ --}}
<section id="gejala" class="gejala-section">
<div class="container">
<div class="text-center reveal">
<h2 class="section-title">Kenali Gejala</h2>
<div class="section-divider"></div>
</div>
<div class="row align-items-center">
<div class="col-md-4 text-center mb-4 mb-md-0 reveal reveal-delay-1">
<img src="{{ asset('img/kartun-sakit.png') }}" alt="Ilustrasi Gejala" class="gejala-img img-fluid">
</div>
<div class="col-md-8">
<div class="row g-3">
@php
$gejalas = [
['no' => '01', 'title' => 'Nyeri Ulu Hati', 'desc' => 'Rasa perih atau tidak nyaman di bagian tengah atas perut (ulu hati).'],
['no' => '02', 'title' => 'Kembung', 'desc' => 'Perut terasa penuh atau bengah akibat penumpukan gas di saluran pencernaan.'],
['no' => '03', 'title' => 'Penurunan Berat Badan', 'desc' => 'Berkurangnya berat badan secara tidak sengaja dalam jangka waktu tertentu.'],
['no' => '04', 'title' => 'Nafsu Makan Menurun', 'desc' => 'Kurangnya keinginan untuk makan atau tidak seperti biasanya.'],
['no' => '05', 'title' => 'Heartburn', 'desc' => 'Rasa terbakar di dada akibat asam lambung naik ke kerongkongan (refluks asam).'],
['no' => '06', 'title' => 'BAB Berdarah', 'desc' => 'Buang air besar yang disertai darah, bisa berwarna merah segar atau kehitaman.'],
];
@endphp
@foreach($gejalas as $i => $item)
<div class="col-md-4 reveal reveal-delay-{{ ($i % 3) + 1 }}">
<div class="gejala-card">
<div class="gejala-number">{{ $item['no'] }}</div>
<h6>{{ $item['title'] }}</h6>
<p>{{ $item['desc'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</section>
{{-- ════════════════════════════════
CTA
════════════════════════════════ --}}
<section class="cta-section">
<div class="container">
<div class="cta-box reveal" id="ctaBox">
<div class="cta-badge">
<i class="fa-solid fa-shield-heart fa-xs"></i>
Gratis & Tanpa Instalasi
</div>
<h2 class="cta-title">Pantau Kondisi Lambungmu,<br>Jangan Cuma Sekali.</h2>
<div class="cta-trust">
<div class="cta-trust-item">
<i class="fa-solid fa-circle-check"></i>
<span>Riwayat prediksi tersimpan otomatis</span>
</div>
<div class="cta-trust-item">
<i class="fa-solid fa-circle-check"></i>
<span>Pantau kondisi lambungmu dari waktu ke waktu</span>
</div>
<div class="cta-trust-item">
<i class="fa-solid fa-circle-check"></i>
<span>Kapan saja bisa cek ulang hasil sebelumnya</span>
</div>
</div>
<div class="cta-actions">
@if(Auth::check())
<a href="{{ route('halaman.prediksi') }}" class="btn-cta">
Mulai Prediksi Sekarang
<i class="fa-solid fa-arrow-right fa-sm"></i>
</a>
@else
<a href="{{ route('login') }}" class="btn-cta">
Login & Mulai Prediksi
<i class="fa-solid fa-arrow-right fa-sm"></i>
</a>
@endif
</div>
@if(!Auth::check())
<p class="cta-note">
Belum punya akun? <a href="{{ route('register') }}">Daftar sekarang</a>
</p>
@endif
</div>
</div>
</section>
@push('scripts')
<script>
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Restart animasi saat section tentang masuk viewport
const tentangSection = document.querySelector('#tentang');
const animasiFrame = document.querySelector('iframe[src*="sehati-animation"]');
const animasiObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animasiFrame.src = animasiFrame.src;
}
});
}, { threshold: 0.3 });
if (tentangSection && animasiFrame) {
animasiObserver.observe(tentangSection);
}
// Restart animasi saat klik menu "Tentang" di navbar
document.querySelectorAll('a[href="#tentang"], a[href="/#tentang"]').forEach(link => {
link.addEventListener('click', () => {
setTimeout(() => {
if (animasiFrame) animasiFrame.src = animasiFrame.src;
}, 600);
});
});
// Bubble CTA
const ctaBox = document.getElementById('ctaBox');
const bubbles = [];
function rand(min, max) { return Math.random() * (max - min) + min; }
function createBubble() {
const el = document.createElement('div');
const size = rand(8, 22);
el.style.cssText = `
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.08);
pointer-events: none;
width: ${size}px;
height: ${size}px;
`;
ctaBox.appendChild(el);
bubbles.push({
el, size,
x: rand(0, ctaBox.offsetWidth),
y: rand(0, ctaBox.offsetHeight),
vx: rand(-0.35, 0.35),
vy: rand(-0.35, 0.35),
opacity: 0, life: 0,
maxLife: rand(220, 420),
});
}
for (let i = 0; i < 12; i++) createBubble();
function tick() {
const W = ctaBox.offsetWidth;
const H = ctaBox.offsetHeight;
for (let i = bubbles.length - 1; i >= 0; i--) {
const b = bubbles[i];
b.life++;
b.x += b.vx;
b.y += b.vy;
if (b.life < 40) b.opacity = b.life / 40;
else if (b.life > b.maxLife - 40) b.opacity = (b.maxLife - b.life) / 40;
else b.opacity = 1;
b.el.style.left = b.x + 'px';
b.el.style.top = b.y + 'px';
b.el.style.opacity = b.opacity * 0.7;
b.el.style.transform = 'translate(-50%, -50%)';
if (b.x < 0 || b.x > W) b.vx *= -1;
if (b.y < 0 || b.y > H) b.vy *= -1;
if (b.life >= b.maxLife) {
b.el.remove();
bubbles.splice(i, 1);
createBubble();
}
}
requestAnimationFrame(tick);
}
tick();
// Timeline draw-on-scroll
const timelineProgress = document.getElementById('timelineProgress');
const stSteps = document.getElementById('stSteps');
const timelineSvg = document.getElementById('timelineSvg');
if (timelineProgress && stSteps) {
const totalLen = timelineProgress.getTotalLength();
timelineProgress.style.strokeDasharray = totalLen;
timelineProgress.style.strokeDashoffset = totalLen;
const stNodes = [0,1,2,3].map(i => document.getElementById('stNode'+i));
const stCards = [0,1,2,3].map(i => document.getElementById('stCard'+i));
function resizeTimeline() {
if (timelineSvg) timelineSvg.style.height = stSteps.offsetHeight + 'px';
}
function updateTimeline() {
const rect = stSteps.getBoundingClientRect();
const progress = Math.min(1, Math.max(0, (-rect.top + window.innerHeight * 0.6) / stSteps.offsetHeight));
timelineProgress.style.strokeDashoffset = totalLen * (1 - progress);
stNodes.forEach((node, i) => {
if (!node) return;
const active = progress >= (i / 4) + 0.08;
node.classList.toggle('st-active', active);
if (stCards[i]) stCards[i].classList.toggle('st-active', active);
});
}
window.addEventListener('scroll', updateTimeline, { passive: true });
window.addEventListener('resize', () => { resizeTimeline(); updateTimeline(); });
resizeTimeline();
updateTimeline();
}
</script>
@endpush
@endsection

8
routes/console.php Normal file
View File

@ -0,0 +1,8 @@
<?php
use Illuminate\Foundation\Inspiring;
use Illuminate\Support\Facades\Artisan;
Artisan::command('inspire', function () {
$this->comment(Inspiring::quote());
})->purpose('Display an inspiring quote');

37
routes/web.php Normal file
View File

@ -0,0 +1,37 @@
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PrediksiController;
use App\Http\Controllers\AuthController;
use App\Http\Controllers\GoogleAuthController;
// Halaman utama (bebas akses)
Route::get('/', [PrediksiController::class, 'index'])->name('utama');
// Login
Route::get('/login', [AuthController::class, 'showLogin'])->name('login');
Route::post('/login', [AuthController::class, 'login']);
// Register
Route::get('/register', [AuthController::class, 'showRegister'])->name('register');
Route::post('/register', [AuthController::class, 'register'])->name('register.store');
// Lupa password
Route::get('/lupa-password', [AuthController::class, 'showLupaPassword'])->name('password.request');
Route::post('/lupa-password', [AuthController::class, 'resetPassword'])->name('password.update');
// Logout
Route::post('/logout', [AuthController::class, 'logout'])->name('logout');
// Google Login
Route::get('/auth/google', [GoogleAuthController::class, 'redirect'])->name('auth.google');
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');
// Prediksi (wajib login)
Route::get('/prediksi', function () {
return view('tampilanutama.prediksi');
})->name('halaman.prediksi');
Route::post('/prediksi', [PrediksiController::class, 'proses'])->name('prediksi.proses');
Route::get('/riwayat', [PrediksiController::class, 'riwayat'])->middleware('auth')->name('riwayat.prediksi');

4
storage/app/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
*
!private/
!public/
!.gitignore

2
storage/app/private/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

2
storage/app/public/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

9
storage/framework/.gitignore vendored Normal file
View File

@ -0,0 +1,9 @@
compiled.php
config.php
down
events.scanned.php
maintenance.php
routes.php
routes.scanned.php
schedule-*
services.json

3
storage/framework/cache/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
*
!data/
!.gitignore

2
storage/framework/cache/data/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

2
storage/framework/sessions/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

2
storage/framework/testing/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

2
storage/framework/views/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

2
storage/logs/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*
!.gitignore

19
tests/Feature/ExampleTest.php Normal file
View File

@ -0,0 +1,19 @@
<?php
namespace Tests\Feature;
// use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class ExampleTest extends TestCase
{
/**
* A basic test example.
*/
public function test_the_application_returns_a_successful_response(): void
{
$response = $this->get('/');
$response->assertStatus(200);
}
}

10
tests/TestCase.php Normal file
View File

@ -0,0 +1,10 @@
<?php
namespace Tests;
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
abstract class TestCase extends BaseTestCase
{
//
}

16
tests/Unit/ExampleTest.php Normal file
View File

@ -0,0 +1,16 @@
<?php
namespace Tests\Unit;
use PHPUnit\Framework\TestCase;
class ExampleTest extends TestCase
{
/**
* A basic test example.
*/
public function test_that_true_is_true(): void
{
$this->assertTrue(true);
}
}

18
vite.config.js Normal file
View File

@ -0,0 +1,18 @@
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
server: {
watch: {
ignored: ['**/storage/framework/views/**'],
},
},
});