ABD_AZIZ_RAMADLONI
/
Mif_E31230483_KlasifikasiTomat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update website with MaturityScan Tomat branding and responsive design improvements 

- Updated all page titles and branding to MaturityScan Tomat
- Added responsive text justification for mobile and desktop
- Improved card layouts with uniform heights
- Enhanced mobile responsiveness across all pages
- Updated button text to 'Mulai Klasifikasi'
- Added tomato images for classification levels
- Updated copyright year to 2026
- Removed emoji from branding for cleaner look
This commit is contained in:
ramzdhani11 2026-02-20 23:28:03 +07:00
parent ae52db3626
commit 0bdb00f471
10 changed files with 160 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/banyaktomat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/images/matang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

BIN
public/assets/images/mentah.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 700 KiB

BIN
public/assets/images/setengahmateng.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

BIN
public/assets/images/tomatt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 902 KiB

269
resources/views/landing_page/about.blade.php
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tentang Kami -Tomato Maturity Scan </title> <title>Tentang - Klasifikasi Kematangan Tomat</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
@ -22,12 +22,11 @@
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-8"> <div class="flex items-center space-x-8">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="text-xl font-bold text-red-600">🍅 Tomato Maturity Scan</span> <span class="text-xl font-bold text-red-600"> MaturityScan Tomat</span>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
<div class="flex items-baseline space-x-6"> <div class="flex items-baseline space-x-6">
<a href="/" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors">Home</a> <a href="/" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors">Home</a>
<a href="/about" class="text-gray-900 hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors">About</a>
</div> </div>
</div> </div>
</div> </div>
@ -42,39 +41,42 @@
<section class="py-24 lg:py-32"> <section class="py-24 lg:py-32">
<div class="text-center space-y-8"> <div class="text-center space-y-8">
<h1 class="text-4xl lg:text-6xl font-bold text-red-600 leading-tight"> <h1 class="text-4xl lg:text-6xl font-bold text-red-600 leading-tight">
Mengenal MaturityScan Tomat: Solusi Klasifikasi Kematangan Inovatif Anda Klasifikasi Tingkat Kematangan Tomat Berdasarkan Citra Digital
</h1> </h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed"> <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed text-justify">
Platform berbasis AI yang dirancang khusus untuk membantu petani dan distributor dalam menentukan tingkat kematangan tomat secara akurat dan efisien. Penelitian Tugas Akhir: "Klasifikasi Tingkat Kematangan Tomat Berdasarkan Citra Digital Menggunakan Random Forest (RF) dan Color Histogram Berbasis Website"
</p> </p>
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" <img src="{{ asset('assets/images/banyaktomat.png') }}"
alt="MaturityScan Technology" alt="Tomat Klasifikasi"
class="w-full h-auto rounded-2xl shadow-lg"> class="w-full h-auto rounded-2xl shadow-lg">
</div> </div>
</div> </div>
</section> </section>
<!-- Section: Tujuan Sistem Kami --> <!-- Section: Penelitian -->
<section class="py-24"> <section class="py-24">
<div class="text-center space-y-8"> <div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600"> <h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Tujuan Sistem Kami Tentang Penelitian
</h2> </h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Kami berkomitmen untuk menyediakan solusi teknologi yang dapat meningkatkan efisiensi dan kualitas dalam industri pertanian tomat.
</p>
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-lg p-12 border border-gray-100"> <div class="bg-white rounded-2xl shadow-lg p-12 border border-gray-100">
<div class="prose prose-lg max-w-none text-gray-700 leading-relaxed"> <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed text-justify">
<p class="mb-6"> <p class="mb-6">
MaturityScan Tomat dikembangkan dengan tujuan utama untuk mengatasi tantangan dalam klasifikasi kematangan tomat yang selama ini dilakukan secara manual dan subjektif. Sistem kami memanfaatkan kekuatan kecerdasan buatan dan computer vision untuk memberikan hasil yang konsisten, akurat, dan dapat diandalkan. Website ini dikembangkan sebagai bagian dari penelitian tugas akhir yang berjudul:
<strong>"Klasifikasi Tingkat Kematangan Tomat Berdasarkan Citra Digital Menggunakan Random Forest (RF) dan Color Histogram Berbasis Website."</strong>
</p> </p>
<p class="mb-6"> <p class="mb-6">
Dengan menggunakan algoritma pembelajaran mendalam yang telah dilatih dengan ribuan gambar tomat dari berbagai tingkat kematangan, sistem kami mampu mengenali pola-pola visual yang sulit dibedakan oleh mata manusia. Ini memungkinkan klasifikasi yang lebih presisi berdasarkan karakteristik warna, tekstur, dan bentuk tomat. Penelitian ini bertujuan untuk membangun sistem yang mampu mengidentifikasi tingkat kematangan tomat secara otomatis melalui analisis citra digital. Sistem memanfaatkan metode ekstraksi fitur Color Histogram dan algoritma Random Forest untuk mengklasifikasikan tomat ke dalam tiga kategori:
</p> </p>
<p> <ul class="list-disc list-inside space-y-2 ml-4 mb-6">
Kami percaya bahwa teknologi ini tidak hanya akan membantu meningkatkan kualitas produk tomat yang mencapai pasar, tetapi juga akan mengurangi pemborosan akibat klasifikasi yang tidak akurat. Petani dapat memanen tomat pada waktu yang optimal, distributor dapat mengelola inventaris dengan lebih baik, dan konsumen akhir akan mendapatkan produk dengan kualitas yang konsisten. <li><strong>Mentah</strong></li>
<li><strong>Setengah Matang</strong></li>
<li><strong>Matang</strong></li>
</ul>
<p class="mb-6">
Selama ini, proses penilaian kematangan tomat umumnya dilakukan secara manual melalui observasi visual. Metode tersebut bersifat subjektif, memakan waktu, dan berpotensi menimbulkan ketidakkonsistenan hasil. Oleh karena itu, sistem ini hadir sebagai solusi berbasis teknologi untuk membantu proses klasifikasi yang lebih cepat, objektif, dan akurat.
</p> </p>
</div> </div>
</div> </div>
@ -82,155 +84,159 @@ class="w-full h-auto rounded-2xl shadow-lg">
</div> </div>
</section> </section>
<!-- Section: Teknologi di Balik Akurasi Kami --> <!-- Section: Latar Belakang -->
<section class="py-24 bg-gray-50">
<div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Latar Belakang Pengembangan
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-lg p-12 border border-gray-100">
<div class="prose prose-lg max-w-none text-gray-700 leading-relaxed text-justify md:text-left">
<p class="mb-6">
Indonesia sebagai negara agraris memiliki sektor pertanian yang sangat penting, termasuk komoditas hortikultura seperti tomat. Tingkat kematangan tomat berpengaruh langsung terhadap:
</p>
<ul class="list-disc list-inside space-y-2 ml-4 mb-6">
<li>Kualitas produk</li>
<li>Nilai gizi</li>
<li>Daya tarik konsumen</li>
<li>Nilai ekonomi</li>
</ul>
<p>
Dengan memanfaatkan teknologi pengolahan citra digital dan machine learning, sistem ini dirancang untuk mendukung efisiensi dalam proses sortir dan penilaian mutu hasil panen.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Teknologi -->
<section class="py-24"> <section class="py-24">
<div class="text-center space-y-8"> <div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600"> <h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Teknologi di Balik Akurasi Kami Teknologi yang Digunakan
</h2> </h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> <p class="text-lg text-gray-600 max-w-3xl mx-auto">
Kombinasi algoritma canggih dan arsitektur modern yang menjamin performa optimal. Sistem ini dibangun menggunakan pendekatan modern untuk hasil yang optimal
</p> </p>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Left Card --> <!-- Teknologi 1 -->
<div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100"> <div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<div class="w-16 h-16 bg-red-100 rounded-xl flex items-center justify-center mb-6"> <div class="w-16 h-16 bg-red-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <i class="fas fa-image text-2xl text-red-600"></i>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Algoritma Klasifikasi Cerdas</h3> <h3 class="text-xl font-bold text-gray-900 mb-4">Pengolahan Citra Digital</h3>
<div class="text-gray-700 leading-relaxed space-y-3"> <div class="text-gray-700 leading-relaxed space-y-3">
<p> <p>Ekstraksi Fitur Warna (Color Histogram RGB)</p>
Sistem kami menggunakan Convolutional Neural Network (CNN) yang telah dioptimalkan khusus untuk klasifikasi gambar tomat. Algoritma ini mampu: <p>Analisis karakteristik visual tomat</p>
</p>
<ul class="list-disc list-inside space-y-2 ml-4">
<li>Mengenali 95+ fitur visual dari setiap gambar</li>
<li>Proses klasifikasi dalam waktu kurang dari 2 detik</li>
<li>Akurasi mencapai 98.7% pada dataset pengujian</li>
<li>Kemampuan pembelajaran berkelanjutan untuk meningkatkan akurasi</li>
</ul>
</div> </div>
</div> </div>
<!-- Right Card --> <!-- Teknologi 2 -->
<div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100"> <div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6"> <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <i class="fas fa-brain text-2xl text-blue-600"></i>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Tumpukan Teknologi Aplikasi Web</h3> <h3 class="text-xl font-bold text-gray-900 mb-4">Machine Learning</h3>
<div class="text-gray-700 leading-relaxed space-y-3"> <div class="text-gray-700 leading-relaxed space-y-3">
<p> <p>Algoritma Random Forest (RF)</p>
Arsitektur aplikasi kami dibangun dengan teknologi modern untuk memastikan performa dan skalabilitas: <p>Klasifikasi otomatis tingkat kematangan</p>
</p> </div>
<ul class="list-disc list-inside space-y-2 ml-4"> </div>
<li>Backend Laravel dengan PHP 8.2 untuk performa optimal</li>
<li>Frontend responsive dengan Tailwind CSS</li> <!-- Teknologi 3 -->
<li>Cloud storage untuk pengelolaan gambar yang efisien</li> <div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<li>API RESTful untuk integrasi dengan sistem lain</li> <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mb-6">
<li>Database PostgreSQL untuk data yang kompleks</li> <i class="fas fa-globe text-2xl text-green-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Aplikasi Web</h3>
<div class="text-gray-700 leading-relaxed space-y-3">
<p>Platform berbasis website</p>
<p>Mudah diakses dari berbagai perangkat</p>
</div>
</div>
<!-- Teknologi 4 -->
<div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-upload text-2xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Cara Penggunaan</h3>
<div class="text-gray-700 leading-relaxed space-y-3">
<p>Pengguna cukup mengunggah gambar tomat</p>
<p>Sistem menampilkan hasil klasifikasi otomatis</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Tujuan dan Manfaat -->
<section class="py-24 bg-gray-50">
<div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Tujuan & Manfaat Sistem
</h2>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Tujuan -->
<div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<div class="w-16 h-16 bg-red-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-bullseye text-2xl text-red-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Tujuan Sistem</h3>
<ul class="text-gray-700 leading-relaxed space-y-3 text-left list-disc list-inside">
<li>Mengembangkan sistem klasifikasi kematangan tomat berbasis citra digital</li>
<li>Menguji performa algoritma Random Forest</li>
<li>Menyediakan aplikasi web yang mudah diakses pengguna</li>
</ul>
</div>
<!-- Manfaat -->
<div class="bg-white rounded-2xl shadow-lg p-10 border border-gray-100">
<div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-leaf text-2xl text-green-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Manfaat Sistem</h3>
<ul class="text-gray-700 leading-relaxed space-y-3 text-left list-disc list-inside">
<li>Membantu proses sortir tomat secara otomatis</li>
<li>Mengurangi subjektivitas penilaian visual</li>
<li>Mendukung efisiensi pascapanen</li>
<li>Menjadi referensi pengembangan computer vision di bidang pertanian</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<!-- Section: Alur Kerja Klasifikasi Sederhana --> <!-- Section: Pengembang -->
<section class="py-24"> <section class="py-24">
<div class="text-center space-y-8"> <div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600"> <h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Alur Kerja Klasifikasi Sederhana Pengembang
</h2> </h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Empat langkah mudah untuk mendapatkan hasil klasifikasi yang akurat.
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Step 1 -->
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 text-center">
<div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-3">1. Unggah Gambar</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Upload foto tomat melalui interface yang user-friendly. Support format JPG dan PNG.
</p>
</div>
<!-- Step 2 -->
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 text-center">
<div class="w-16 h-16 bg-yellow-100 rounded-xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-3">2. Proses Analisis</h3>
<p class="text-gray-600 text-sm leading-relaxed">
AI kami menganalisis gambar secara mendalam untuk menentukan tingkat kematangan.
</p>
</div>
<!-- Step 3 -->
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 text-center">
<div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-3">3. Tampilkan Hasil</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Lihat hasil klasifikasi dengan probabilitas dan rekomendasi penggunaan.
</p>
</div>
<!-- Step 4 -->
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 text-center">
<div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-3">4. Iterasi & Pembelajaran</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Sistem terus belajar dari setiap klasifikasi untuk meningkatkan akurasi.
</p>
</div>
</div>
</div>
</section>
<!-- Section: Visi Kami untuk Masa Depan -->
<section class="py-24">
<div class="text-center space-y-8">
<h2 class="text-3xl lg:text-4xl font-bold text-red-600">
Visi Kami untuk Masa Depan
</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Membangun ekosistem pertanian digital yang lebih cerdas dan berkelanjutan.
</p>
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-lg p-12 border border-gray-100"> <div class="bg-white rounded-2xl shadow-lg p-12 border border-gray-100">
<div class="prose prose-lg max-w-none text-gray-700 leading-relaxed"> <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed text-justify md:text-left">
<p class="mb-6"> <p class="mb-6">
Visi kami adalah menjadi pemimpin dalam teknologi klasifikasi pertanian di Asia Tenggara pada tahun 2030. Kami tidak berhenti hanya pada klasifikasi tomat, tetapi berencana untuk mengembangkan sistem yang dapat mengklasifikasikan berbagai jenis produk pertanian lainnya seperti buah-buahan, sayuran, dan biji-bijian. Dikembangkan oleh:
</p> </p>
<p class="mb-6"> <div class="text-center space-y-4">
Kami sedang mengembangkan fitur-fitur canggih seperti prediksi waktu panen berdasarkan data historis, rekomendasi harga pasar berdasarkan kualitas produk, dan sistem integrasi dengan marketplace pertanian. Ini akan menciptakan ekosistem lengkap dari hulu hingga hilir yang memberikan nilai tambah bagi semua pemangku kepentingan. <div class="text-2xl font-bold text-gray-900">
Abd. Aziz Ramadloni
</div>
<p class="text-lg text-gray-600">
Mahasiswa Program Studi Manajemen Informatika<br>
Politeknik Negeri Jember
</p> </p>
<p class="mb-6"> <p class="text-gray-500">
Dalam jangka panjang, kami berharap teknologi kami dapat berkontribusi pada ketahanan pangan global dengan mengurangi pemborosan makanan hingga 30% melalui klasifikasi yang lebih akurat dan manajemen rantai pasok yang lebih efisien. Kami juga berkomitmen untuk membuat teknologi ini mudah diakses oleh petani skala kecil melalui model harga yang terjangkau dan program pelatihan berkelanjutan. Sebagai bagian dari penelitian Tugas Akhir
</p>
<p>
Kolaborasi dengan institusi penelitian, pemerintah, dan komunitas pertanian menjadi kunci dalam mewujudkan visi ini. Bersama, kita dapat membangun masa depan pertanian yang lebih cerdas, berkelanjutan, dan menguntungkan bagi semua pihak.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</main> </main>
@ -240,10 +246,7 @@ class="w-full h-auto rounded-2xl shadow-lg">
<div class="max-w-5xl mx-auto px-6 lg:px-8"> <div class="max-w-5xl mx-auto px-6 lg:px-8">
<div class="text-center space-y-4"> <div class="text-center space-y-4">
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500">
© 2026 TomatoMaturityScan Tomat. All rights reserved. © 2026 MaturityScanTomat. All rights reserved.
</p>
<p class="text-sm text-gray-400">
Made with ♥ Wasily
</p> </p>
</div> </div>
</div> </div>

6
resources/views/landing_page/result.blade.php
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hasil Klasifikasi - Tomato Maturity Scan</title> <title>Hasil Klasifikasi - Maturity Scan Tomat</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
@ -22,7 +22,7 @@
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="text-2xl font-bold text-red-600">🍅 Tomato Maturity Scan</span> <span class="text-2xl font-bold text-red-600">MaturityScan Tomat</span>
</div> </div>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
@ -116,7 +116,7 @@ class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white font-semi
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center"> <div class="text-center">
<p class="text-gray-400 text-sm"> <p class="text-gray-400 text-sm">
© 2025 TomatoMaturityScan Tomat. All rights reserved. © 2026 MaturityScanTomat. All rights reserved.
</p> </p>
</div> </div>
</div> </div>

5
resources/views/landing_page/upload.blade.php
View File

@ -33,13 +33,12 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div class="flex items-center"> <div class="flex items-center">
<span class="text-2xl font-bold text-red-600">🍅 Tomato Maturity Scan</span> <span class="text-2xl font-bold text-red-600">MaturityScan Tomat </span>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4"> <div class="ml-10 flex items-baseline space-x-4">
<a href="/" class="text-gray-900 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium">Beranda</a> <a href="/" class="text-gray-900 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium">Beranda</a>
<a href="#" class="text-gray-500 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium">Tentang</a>
</div> </div>
</div> </div>
@ -160,7 +159,7 @@ class="bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-lg
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-white py-6 mt-auto"> <footer class="bg-gray-900 text-white py-6 mt-auto">
<div class="max-w-7xl mx-auto text-center text-gray-400 text-sm"> <div class="max-w-7xl mx-auto text-center text-gray-400 text-sm">
© 2025 TomatoMaturityScan Tomat. All rights reserved. © 2026 MaturityScanTomat. All rights reserved.
</div> </div>
</footer> </footer>

3
resources/views/login.blade.php
View File

@ -40,9 +40,6 @@
<!-- Title & Description --> <!-- Title & Description -->
<div class="text-center mb-8"> <div class="text-center mb-8">
<div class="mb-4"> <div class="mb-4">
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto">
<span class="text-2xl">🍅Tomato Maturity Scan</span>
</div>
</div> </div>
<h1 class="text-2xl font-bold text-gray-900 mb-2">Login Admin</h1> <h1 class="text-2xl font-bold text-gray-900 mb-2">Login Admin</h1>
<p class="text-gray-600 text-sm">Silakan masukkan kredensial Anda untuk melanjutkan.</p> <p class="text-gray-600 text-sm">Silakan masukkan kredensial Anda untuk melanjutkan.</p>

61
resources/views/welcome.blade.php
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Klasifikasi Kematangan Tomat Otomatis</title> <title>Klasifikasi Kematangan Tomat</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
@ -22,7 +22,7 @@
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="text-2xl font-bold text-red-600">MaturityScan</span> <span class="text-2xl font-bold text-red-600">MaturityScan Tomat</span>
</div> </div>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
@ -53,12 +53,12 @@
<h1 class="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight"> <h1 class="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
Klasifikasi Kematangan Tomat Otomatis Klasifikasi Kematangan Tomat Otomatis
</h1> </h1>
<p class="text-lg text-gray-600 mb-8 leading-relaxed"> <p class="text-lg text-gray-600 mb-8 leading-relaxed text-justify">
MaturityScan Tomat adalah aplikasi web modern yang dirancang untuk mengklasifikasikan kematangan tomat menggunakan analisis gambar berbasis AI. MaturityScan Tomat adalah aplikasi berbasis website yang membantu Anda menentukan tingkat kematangan tomat secara otomatis menggunakan analisis citra digital. Sistem memanfaatkan metode Color Histogram dan algoritma Random Forest untuk memberikan hasil klasifikasi yang cepat dan objektif.
</p> </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<a href="{{ route('upload.index') }}" class="bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200 inline-block text-center"> <a href="{{ route('upload.index') }}" class="bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200 inline-block text-center">
Unggah Gambar Tomat Mulai Klasifikasi
</a> </a>
<a href="{{ route('about') }}" class="bg-white hover:bg-gray-50 text-gray-700 font-semibold py-3 px-8 rounded-lg shadow-md border border-gray-200 transition-all duration-200 inline-block text-center"> <a href="{{ route('about') }}" class="bg-white hover:bg-gray-50 text-gray-700 font-semibold py-3 px-8 rounded-lg shadow-md border border-gray-200 transition-all duration-200 inline-block text-center">
Pelajari Lebih Lanjut Pelajari Lebih Lanjut
@ -67,13 +67,10 @@
</div> </div>
<div class="relative"> <div class="relative">
<div class="bg-white rounded-2xl shadow-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-300"> <div class="bg-white rounded-2xl shadow-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-300">
<img src="https://images.unsplash.com/photo-1592924357228-91a4b4e5d53f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" <img src="{{ asset('assets/images/tomatt.png') }}"
alt="Fresh Tomatoes" alt="Fresh Tomatoes"
class="rounded-lg shadow-md w-full h-auto"> class="rounded-lg shadow-md w-full h-auto">
</div> </div>
<div class="absolute -bottom-4 -right-4 bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full font-semibold text-sm shadow-lg">
<i class="fas fa-star mr-2"></i>Akurasi 95%
</div>
</div> </div>
</div> </div>
</div> </div>
@ -89,8 +86,8 @@ class="rounded-lg shadow-md w-full h-auto">
<div class="grid md:grid-cols-3 gap-8"> <div class="grid md:grid-cols-3 gap-8">
<!-- Mentah Card --> <!-- Mentah Card -->
<div class="bg-green-50 border-2 border-green-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> <div class="bg-green-50 border-2 border-green-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
<div class="w-20 h-20 bg-green-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-32 h-32 bg-green-500 rounded-full mx-auto mb-6 flex items-center justify-center p-2">
<i class="fas fa-leaf text-3xl text-green-200"></i> <img src="{{ asset('assets/images/mentah.jpg') }}" alt="Tomat Mentah" class="w-full h-full object-contain rounded-full">
</div> </div>
<h3 class="text-2xl font-bold text-green-800 mb-4">Mentah</h3> <h3 class="text-2xl font-bold text-green-800 mb-4">Mentah</h3>
<p class="text-gray-600 mb-4">Tomat yang belum matang sempurna, berwarna hijau dan tekstur masih keras.</p> <p class="text-gray-600 mb-4">Tomat yang belum matang sempurna, berwarna hijau dan tekstur masih keras.</p>
@ -101,8 +98,8 @@ class="rounded-lg shadow-md w-full h-auto">
<!-- Setengah Matang Card --> <!-- Setengah Matang Card -->
<div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> <div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
<div class="w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-32 h-32 bg-yellow-500 rounded-full mx-auto mb-6 flex items-center justify-center p-2">
<i class="fas fa-circle-half-stroke text-3xl text-yellow-200"></i> <img src="{{ asset('assets/images/setengahmateng.jpg') }}" alt="Tomat Setengah Matang" class="w-full h-full object-contain rounded-full">
</div> </div>
<h3 class="text-2xl font-bold text-yellow-800 mb-4">Setengah Matang</h3> <h3 class="text-2xl font-bold text-yellow-800 mb-4">Setengah Matang</h3>
<p class="text-gray-600 mb-4">Tomat dalam proses pematangan, perpaduan warna hijau dan merah.</p> <p class="text-gray-600 mb-4">Tomat dalam proses pematangan, perpaduan warna hijau dan merah.</p>
@ -113,8 +110,8 @@ class="rounded-lg shadow-md w-full h-auto">
<!-- Matang Card --> <!-- Matang Card -->
<div class="bg-red-50 border-2 border-red-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> <div class="bg-red-50 border-2 border-red-200 rounded-xl p-8 text-center hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
<div class="w-20 h-20 bg-red-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-32 h-32 bg-red-500 rounded-full mx-auto mb-6 flex items-center justify-center p-2">
<i class="fas fa-circle text-3xl text-red-200"></i> <img src="{{ asset('assets/images/matang.jpg') }}" alt="Tomat Matang" class="w-full h-full object-contain rounded-full">
</div> </div>
<h3 class="text-2xl font-bold text-red-800 mb-4">Matang</h3> <h3 class="text-2xl font-bold text-red-800 mb-4">Matang</h3>
<p class="text-gray-600 mb-4">Tomat matang sempurna, berwarna merah cerah dan tekstur lembut.</p> <p class="text-gray-600 mb-4">Tomat matang sempurna, berwarna merah cerah dan tekstur lembut.</p>
@ -133,15 +130,15 @@ class="rounded-lg shadow-md w-full h-auto">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Bagaimana Cara Kerjanya?</h2> <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Bagaimana Cara Kerjanya?</h2>
<p class="text-lg text-gray-600">Tiga langkah mudah untuk mengklasifikasikan kematangan tomat Anda</p> <p class="text-lg text-gray-600">Tiga langkah mudah untuk mengklasifikasikan kematangan tomat Anda</p>
</div> </div>
<div class="grid md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<!-- Step 1 --> <!-- Step 1 -->
<div class="relative"> <div class="relative">
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center"> <div class="bg-white rounded-xl p-4 md:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center min-h-[280px] md:min-h-[320px]">
<div class="w-16 h-16 bg-blue-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-12 h-12 md:w-16 md:h-16 bg-blue-500 rounded-full mx-auto mb-4 md:mb-6 flex items-center justify-center">
<i class="fas fa-camera text-2xl text-white"></i> <i class="fas fa-camera text-lg md:text-2xl text-white"></i>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Unggah Gambar</h3> <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-4">Unggah Gambar</h3>
<p class="text-gray-600">Ambil foto tomat atau unggah gambar dari galeri perangkat Anda.</p> <p class="text-sm md:text-base text-gray-600 text-justify md:text-center">Ambil foto tomat atau unggah gambar dari galeri perangkat Anda.</p>
</div> </div>
<div class="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2"> <div class="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center"> <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
@ -152,12 +149,12 @@ class="rounded-lg shadow-md w-full h-auto">
<!-- Step 2 --> <!-- Step 2 -->
<div class="relative"> <div class="relative">
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center"> <div class="bg-white rounded-xl p-4 md:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center min-h-[280px] md:min-h-[320px]">
<div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-12 h-12 md:w-16 md:h-16 bg-purple-500 rounded-full mx-auto mb-4 md:mb-6 flex items-center justify-center">
<i class="fas fa-robot text-2xl text-white"></i> <i class="fas fa-palette text-lg md:text-2xl text-white"></i>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Analisis AI</h3> <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-4">Ekstraksi Fitur Warna</h3>
<p class="text-gray-600">Sistem AI kami menganalisis warna, tekstur, dan bentuk tomat secara otomatis.</p> <p class="text-sm md:text-base text-gray-600 text-justify md:text-center">Sistem mengekstraksi fitur warna menggunakan<br>Color Histogram (RGB) untuk membaca distribusi warna tomat.</p>
</div> </div>
<div class="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2"> <div class="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2">
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center"> <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
@ -168,12 +165,12 @@ class="rounded-lg shadow-md w-full h-auto">
<!-- Step 3 --> <!-- Step 3 -->
<div class="relative"> <div class="relative">
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center"> <div class="bg-white rounded-xl p-4 md:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 text-center min-h-[280px] md:min-h-[320px]">
<div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-6 flex items-center justify-center"> <div class="w-12 h-12 md:w-16 md:h-16 bg-green-500 rounded-full mx-auto mb-4 md:mb-6 flex items-center justify-center">
<i class="fas fa-chart-line text-2xl text-white"></i> <i class="fas fa-brain text-lg md:text-2xl text-white"></i>
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-4">Dapatkan Hasil</h3> <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-4">Klasifikasi & Hasil</h3>
<p class="text-gray-600">Lihat hasil klasifikasi kematangan tomat dengan akurasi tinggi.</p> <p class="text-sm md:text-base text-gray-600 text-justify md:text-center">Fitur warna diproses dengan Random Forest (RF)<br>untuk menentukan tingkat kematangan secara real-time.</p>
</div> </div>
</div> </div>
</div> </div>
@ -221,7 +218,7 @@ class="rounded-lg shadow-md w-full h-auto">
</a> </a>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<p class="text-gray-400 text-sm">© 2024 MaturityScan Tomat. All rights reserved.</p> <p class="text-gray-400 text-sm">© 2026 MaturityScanTomat. All rights reserved.</p>
</div> </div>
</div> </div>
</div> </div>