205 lines
5.3 KiB
PHP
205 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>landing</title>
|
|
<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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body{
|
|
margin:0;
|
|
font-family:'Segoe UI',sans-serif;
|
|
background:#f8fafc;
|
|
}
|
|
|
|
/* NAVBAR */
|
|
.navbar{
|
|
background:white;
|
|
box-shadow:0 2px 15px rgba(0,0,0,0.05);
|
|
padding:15px 0;
|
|
}
|
|
|
|
.navbar-brand{
|
|
font-weight:700;
|
|
color:#2563eb !important;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero{
|
|
padding:120px 0;
|
|
background:linear-gradient(135deg,#2563eb,#0ea5e9);
|
|
color:white;
|
|
text-align:center;
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.hero h1{
|
|
font-weight:800;
|
|
font-size:42px;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
.hero p{
|
|
max-width:600px;
|
|
margin:0 auto;
|
|
opacity:0.9;
|
|
font-size:18px;
|
|
}
|
|
|
|
.btn-hero{
|
|
background:white;
|
|
color:#2563eb;
|
|
border-radius:30px;
|
|
padding:12px 30px;
|
|
font-weight:600;
|
|
margin-top:25px;
|
|
transition:0.3s;
|
|
}
|
|
|
|
.btn-hero:hover{
|
|
background:#e2e8f0;
|
|
transform:translateY(-2px);
|
|
}
|
|
|
|
/* SECTION */
|
|
.section{
|
|
padding:80px 0;
|
|
}
|
|
|
|
.feature-card{
|
|
border:none;
|
|
border-radius:18px;
|
|
padding:30px;
|
|
background:white;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.05);
|
|
transition:0.3s;
|
|
height:100%;
|
|
}
|
|
|
|
.feature-card:hover{
|
|
transform:translateY(-8px);
|
|
box-shadow:0 15px 35px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.feature-icon{
|
|
width:60px;
|
|
height:60px;
|
|
border-radius:15px;
|
|
background:linear-gradient(135deg,#2563eb,#0ea5e9);
|
|
color:white;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
margin-bottom:20px;
|
|
font-size:22px;
|
|
}
|
|
|
|
footer{
|
|
background:#0f172a;
|
|
color:white;
|
|
padding:25px 0;
|
|
text-align:center;
|
|
font-size:14px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media(max-width:768px){
|
|
.hero h1{
|
|
font-size:30px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fa fa-stethoscope me-2"></i>
|
|
TensiKu
|
|
</a>
|
|
|
|
<div>
|
|
<a href="{{ route('login') }}" class="btn btn-primary btn-sm me-2">
|
|
Login
|
|
</a>
|
|
<a href="{{ route('register') }}" class="btn btn-outline-primary btn-sm">
|
|
Register
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Yuk Deteksi Dini Penyakit Hipertensi</h1>
|
|
<p>
|
|
Sistem pakar deteksi dini penyakit hipertensi dengan metode Certainty Factor untuk membantu proses diagnosa secara mandiri.
|
|
</p>
|
|
|
|
<a href="{{ route('login') }}" class="btn btn-hero">
|
|
Mulai Sekarang
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FITUR -->
|
|
<section class="section">
|
|
<div class="container">
|
|
|
|
<div class="row g-4 text-center">
|
|
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<div class="feature-icon mx-auto">
|
|
<i class="fa fa-brain"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Metode Certainty Factor</h5>
|
|
<p class="text-muted">
|
|
Menggunakan metode CF untuk menghitung tingkat keyakinan diagnosa.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<div class="feature-icon mx-auto">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Edukasi</h5>
|
|
<p class="text-muted">
|
|
menu edukasi menambah pengetahuan anda tentang penyakit hipertensi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<div class="feature-icon mx-auto">
|
|
<i class="fa fa-chart-line"></i>
|
|
</div>
|
|
<h5 class="fw-bold">Riwayat & Laporan</h5>
|
|
<p class="text-muted">
|
|
Semua hasil diagnosa tersimpan dan dapat dicetak dalam PDF.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
© {{ date('Y') }} Sistem Pakar Diagnosa • All Rights Reserved
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |