307 lines
6.2 KiB
PHP
307 lines
6.2 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Sistem Pakar Jagung</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Poppins', sans-serif;
|
||
background-color: #f0fdf4;
|
||
color: #1b1b1b;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 2rem;
|
||
background: #ffffffee;
|
||
backdrop-filter: blur(6px);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 999;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.logo-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 40px;
|
||
height: 40px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: #2f855a;
|
||
}
|
||
|
||
.masuk-btn {
|
||
background: linear-gradient(90deg, #facc15, #f59e0b);
|
||
padding: 0.6rem 1.2rem;
|
||
border-radius: 8px;
|
||
color: #1f2937;
|
||
font-weight: 600;
|
||
transition: background 0.3s, transform 0.2s;
|
||
}
|
||
|
||
.masuk-btn:hover {
|
||
background: #eab308;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.slider-section {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 80vh;
|
||
background: white;
|
||
overflow: hidden;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.slide-card {
|
||
display: none;
|
||
max-width: 800px;
|
||
text-align: center;
|
||
animation: fadeIn 0.3s ease-in-out;
|
||
}
|
||
|
||
.slide-card.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.slide-card h2 {
|
||
font-size: 2rem;
|
||
color: #256d3c;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.slide-card p {
|
||
font-size: 1.1rem;
|
||
color: #444;
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
.steps-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 2rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.step {
|
||
background: #ecfdf5;
|
||
padding: 1.5rem;
|
||
border-radius: 1rem;
|
||
max-width: 240px;
|
||
flex: 1 1 200px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.step:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.step-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: #059669;
|
||
}
|
||
|
||
.step h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.5rem;
|
||
color: #065f46;
|
||
}
|
||
|
||
.step p {
|
||
font-size: 0.95rem;
|
||
color: #374151;
|
||
}
|
||
|
||
|
||
.nav-arrow {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 1.8rem;
|
||
background: #e2e8f0;
|
||
color: #1a202c;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition: background 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-arrow:hover {
|
||
background: #cbd5e0;
|
||
}
|
||
|
||
.nav-left {
|
||
left: 1rem;
|
||
}
|
||
|
||
.nav-right {
|
||
right: 1rem;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 2rem 1rem;
|
||
font-size: 0.9rem;
|
||
color: #999;
|
||
background: #f4f4f4;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
header {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
padding: 1rem;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.masuk-btn {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
|
||
.slide-card h2 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.slide-card p {
|
||
font-size: 0.95rem;
|
||
padding: 0 0.5rem;
|
||
}
|
||
|
||
.slide-card img {
|
||
width: 120px;
|
||
}
|
||
|
||
.nav-arrow {
|
||
font-size: 1.3rem;
|
||
padding: 0.3rem 0.6rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="logo-title">
|
||
<img src="/images/logo.png" alt="Logo" class="logo-img" />
|
||
<h1>CFCORN</h1>
|
||
</div>
|
||
<a href="{{ route('auth') }}" class="masuk-btn">Masuk ke Sistem</a>
|
||
</header>
|
||
|
||
<section class="slider-section">
|
||
<!-- Slide 1 -->
|
||
<div class="slide-card active">
|
||
<h2>Apa itu Sistem Pakar?</h2>
|
||
<p>
|
||
Sistem Pakar Diagnosa Penyakit Tanaman Jagung ini merupakan aplikasi berbasis web yang dirancang untuk membantu petani dan pengguna umum dalam mengidentifikasi jenis penyakit yang menyerang tanaman jagung berdasarkan gejala yang dialami. </p>
|
||
<img src="/images/logo.png" alt="Logo">
|
||
</div>
|
||
|
||
<!-- Slide 2 -->
|
||
<div class="slide-card">
|
||
<h2>Bagaimana Cara Kerjanya?</h2>
|
||
<div class="steps-container">
|
||
<div class="step">
|
||
<div class="step-icon">🔍</div>
|
||
<h3>Pilih Gejala</h3>
|
||
<p>Petani memilih gejala yang terlihat dari tanaman jagung mereka.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-icon">⚙️</div>
|
||
<h3>Analisis Sistem</h3>
|
||
<p>Sistem menganalisis gejala berdasarkan pengetahuan pakar.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-icon">✅</div>
|
||
<h3>Hasil Diagnosa</h3>
|
||
<p>Penyakit dan solusi ditampilkan untuk ditindaklanjuti.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Slide 3 -->
|
||
<div class="slide-card">
|
||
<h2>PAKAR KAMI</h2>
|
||
<img src="/images/pakar.jpg" alt="Pak Saihu">
|
||
<p>
|
||
Sistem ini dibangun bersama Pak M. Saihu, Ketua Kelompok Tani Bedadung 2, yang telah menjadi penyuluh pertanian kurang lebih selama 9 tahun di Kecamatan Balung, Kabupaten Jember.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tombol Navigasi Panah -->
|
||
<button class="nav-arrow nav-left" onclick="prevSlide()">‹</button>
|
||
<button class="nav-arrow nav-right" onclick="nextSlide()">›</button>
|
||
</section>
|
||
|
||
<script>
|
||
const slides = document.querySelectorAll('.slide-card');
|
||
let currentSlide = 0;
|
||
|
||
function showSlide(index) {
|
||
slides.forEach((slide, i) => {
|
||
slide.classList.toggle('active', i === index);
|
||
});
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentSlide = (currentSlide + 1) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
function prevSlide() {
|
||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|