MIF_E31230820/resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klasifikasi Penyakit Daun Padi</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body id="body"
      class="bg-gradient-to-br from-green-100 to-green-50 min-h-screen transition-all duration-500">

    <!-- Navbar -->

    <nav class="bg-white shadow-md">

        <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">

            <h1 class="text-2xl font-bold text-green-700">
                Rice Leaf AI
            </h1>

            <div class="flex flex-col md:flex-row gap-4">

                <a href="/dashboard"
                   class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
                    Dashboard
                </a>

                <a href="/riwayat"
                   class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg">
                    Riwayat
                </a>

                <a href="/penyakit"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                    Informasi Penyakit
                </a>

                <button onclick="toggleDarkMode()"
                        class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-lg">
                    🌙 Dark Mode
                </button>

            </div>

        </div>

    </nav>

    <!-- Hero -->

    <section class="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-10 items-center">

        <div>

            <h1 class="text-5xl font-bold text-green-800 leading-tight mb-6">

                Sistem Klasifikasi
                Penyakit Daun Padi
                Berbasis Artificial Intelligence

            </h1>

            <p class="text-lg text-gray-700 mb-8">

                Deteksi penyakit daun padi secara otomatis menggunakan
                teknologi Deep Learning berbasis website.

            </p>

            <div class="flex gap-4">

                <a href="#upload"
                   class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-xl text-lg shadow-lg">

                    Mulai Prediksi

                </a>

                <a href="/dashboard"
                   class="bg-white border border-green-600 text-green-700 px-6 py-3 rounded-xl text-lg">

                    Lihat Dashboard

                </a>

            </div>

        </div>

        <div>

            <img src="https://images.unsplash.com/photo-1625246333195-78d9c38ad449?q=80&w=1200&auto=format&fit=crop"
                 class="rounded-3xl shadow-2xl">

        </div>

    </section>

    <!-- Upload -->

    <section id="upload" class="max-w-4xl mx-auto px-6 pb-20">

        <div class="bg-white rounded-3xl shadow-2xl p-10">

            <h2 class="text-3xl font-bold text-center text-green-700 mb-8">

                Upload Gambar Daun Padi

            </h2>

            @if(session('success'))

            <div class="bg-green-100 border border-green-300 text-green-700 p-4 rounded-xl mb-6">

                {{ session('success') }}

            </div>

            @endif

            @if(session('error'))

            <div class="bg-red-100 border border-red-300 text-red-700 p-4 rounded-xl mb-6">

                {{ session('error') }}

            </div>

            @endif

            <form id="formPrediksi"
                  action="/prediksi"
                  method="POST"
                  enctype="multipart/form-data">

                @csrf

                <div class="border-2 border-dashed border-green-400 rounded-2xl p-10 text-center">

                    <input type="file"
                           name="gambar"
                           id="gambar"
                           accept="image/*"
                           onchange="previewImage(event)"
                           class="w-full border border-gray-300 rounded-xl p-3">

                    <div class="mt-6 text-center">

                        <img id="preview"
                             class="hidden mx-auto rounded-2xl shadow-lg w-64 h-64 object-cover">

                    </div>

                    <p class="text-gray-500 mt-6">
                        Upload gambar daun padi untuk diprediksi
                    </p>

                </div>

                <button type="submit"
                        id="btnPrediksi"
                        class="w-full mt-6 bg-green-600 hover:bg-green-700 text-white py-4 rounded-2xl text-xl font-semibold shadow-lg">

                    Prediksi Sekarang

                </button>

            </form>

            <!-- Hasil Prediksi -->

            @if(session('hasil'))

            <div class="mt-10 bg-green-50 border border-green-200 rounded-3xl p-8">

                <h2 class="text-3xl font-bold text-green-700 mb-6">
                    Hasil Prediksi
                </h2>

                <img src="{{ asset('uploads/' . session('gambar')) }}"
                     class="w-64 rounded-2xl shadow-lg mb-6 mx-auto">

                <div class="grid md:grid-cols-2 gap-6">

                    <div class="bg-white p-6 rounded-2xl shadow">

                        <h3 class="text-lg text-gray-500 mb-2">
                            Penyakit
                        </h3>

                        <p class="text-3xl font-bold text-red-600">
                            {{ session('hasil') }}
                        </p>

                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow">

                        <h3 class="text-lg text-gray-500 mb-2">
                            Confidence
                        </h3>

                        <p class="text-3xl font-bold text-green-700">
                            {{ session('confidence') }}%
                        </p>

                    </div>

                </div>

                @if(session('allPredictions'))

                <div class="bg-white p-6 rounded-2xl shadow mt-6">

                    <h3 class="text-2xl font-bold text-green-700 mb-4">
                        Probabilitas Semua Kelas
                    </h3>

                    @foreach(session('allPredictions') as $kelas => $nilai)

                    <div class="mb-4">

                        <div class="flex justify-between mb-1">

                            <span class="font-semibold">
                                {{ $kelas }}
                            </span>

                            <span>
                                {{ $nilai }}%
                            </span>

                        </div>

                        <div class="w-full bg-gray-200 rounded-full h-4">

                            <div class="bg-green-600 h-4 rounded-full"
                                 style="width: {{ $nilai }}%">
                            </div>

                        </div>

                    </div>

                    @endforeach

                </div>

                @endif

                @if(session('deskripsi'))

                <div class="bg-white p-6 rounded-2xl shadow mt-6">

                    <h3 class="text-2xl font-bold text-green-700 mb-4">
                        Informasi Penyakit
                    </h3>

                    <p class="mb-4 text-gray-700">
                        <span class="font-bold">Deskripsi:</span><br>
                        {{ session('deskripsi') }}
                    </p>

                    <p class="text-gray-700">
                        <span class="font-bold">Solusi:</span><br>
                        {{ session('solusi') }}
                    </p>

                </div>

                @endif

            </div>

            @endif

        </div>

    </section>

    <!-- Contoh Penyakit -->

    <section class="max-w-7xl mx-auto px-6 pb-20">

        <h2 class="text-4xl font-bold text-center text-green-700 mb-12">
            Contoh Penyakit Daun Padi
        </h2>

        <div class="grid md:grid-cols-4 gap-8">

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden">

                <img src="https://images.unsplash.com/photo-1592982537447-6f2a6a0f4d4d?q=80&w=1200&auto=format&fit=crop"
                     class="h-56 w-full object-cover">

                <div class="p-5">

                    <h3 class="text-2xl font-bold text-red-600 mb-3">
                        Blast
                    </h3>

                    <p class="text-gray-600">
                        Penyakit akibat jamur yang menyerang daun padi.
                    </p>

                </div>

            </div>

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden">

                <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=1200&auto=format&fit=crop"
                     class="h-56 w-full object-cover">

                <div class="p-5">

                    <h3 class="text-2xl font-bold text-yellow-600 mb-3">
                        Blight
                    </h3>

                    <p class="text-gray-600">
                        Hawar daun yang menyebabkan daun menguning.
                    </p>

                </div>

            </div>

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden">

                <img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?q=80&w=1200&auto=format&fit=crop"
                     class="h-56 w-full object-cover">

                <div class="p-5">

                    <h3 class="text-2xl font-bold text-orange-500 mb-3">
                        Tungro
                    </h3>

                    <p class="text-gray-600">
                        Penyakit virus yang ditularkan wereng hijau.
                    </p>

                </div>

            </div>

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden">

                <img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=1200&auto=format&fit=crop"
                     class="h-56 w-full object-cover">

                <div class="p-5">

                    <h3 class="text-2xl font-bold text-green-600 mb-3">
                        Healthy
                    </h3>

                    <p class="text-gray-600">
                        Daun padi sehat tanpa gejala penyakit.
                    </p>

                </div>

            </div>

        </div>

    </section>

    <!-- Footer -->

    <footer class="bg-green-700 text-white py-6 text-center">

        <p class="text-lg">
            Sistem Klasifikasi Penyakit Daun Padi Berbasis AI
        </p>

        <p class="text-sm mt-2">
            Politeknik Negeri Jember • 2026
        </p>

    </footer>

    <!-- Loading -->

    <div id="loading"
         class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">

        <div class="bg-white p-10 rounded-3xl shadow-2xl text-center">

            <div class="animate-spin rounded-full h-20 w-20 border-b-4 border-green-700 mx-auto mb-6"></div>

            <h2 class="text-2xl font-bold text-green-700">
                AI Sedang Menganalisis...
            </h2>

            <p class="text-gray-500 mt-2">
                Mohon tunggu sebentar
            </p>

        </div>

    </div>

    <script>

        function previewImage(event)
        {
            const preview = document.getElementById('preview');

            preview.src = URL.createObjectURL(event.target.files[0]);

            preview.classList.remove('hidden');
        }

        const form = document.getElementById('formPrediksi');

        form.addEventListener('submit', function() {

            document.getElementById('loading')
                    .classList.remove('hidden');

        });

        function toggleDarkMode()
        {
            const body = document.getElementById('body');

            body.classList.toggle('bg-gray-900');

            body.classList.toggle('text-white');

            body.classList.toggle('from-green-100');

            body.classList.toggle('to-green-50');
        }

    </script>

</body>
</html>