<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IDENTIFIKASI JENIS PENYAKIT BUAH KAKAO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}" type="image/x-icon">
</head>
<body class="bg-[#f0f9ff] font-poppins">
    <div class="flex flex-col justify-center items-center h-screen text-center mb-30">
        <!-- Header Section with SVG logo -->
        <div class="flex items-center mb-10">
            <!-- Logo SVG on the left -->
            <img src="{{url_for('static', filename='img/logo.svg') }}" alt="logo" class="w-20 h-20 mr-4">
            <h1 class="text-[#1cadc0] text-[50px] font-extrabold">IDENTIFIKASI PENYAKIT BUAH KAKAO</h1>
        </div>

        <!-- Cards Section -->
        <div class="flex gap-10 mt-10 mb">
            <!-- Perhitungan Card -->
            <!-- <a href="perhitungan.html" class="w-64 p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                <img src="" alt="Perhitungan Icon" class="w-24 h-24 mx-auto mb-4">
                <p class="text-[#1cadc0] text-xl font-bold">PERHITUNGAN</p>
            </a> -->

            <!-- Identifikasi Card -->
            <a href="{{ url_for('identifikasi') }}" class="w-64 p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                <img src="{{ url_for('static', filename='img/Object.svg') }}" alt="Object" class="w-24 h-24 mx-auto mb-4">
                <p class="text-[#1cadc0] text-xl font-bold">IDENTIFIKASI</p>
            </a>

            <!-- Panduan Card -->
            <a href="{{ url_for('panduan') }}" class="w-64 p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition duration-300">
                <img src="{{ url_for('static', filename='img/User guide.svg') }}" alt="User guide" class="w-24 h-24 mx-auto mb-4">
                <p class="text-[#1cadc0] text-xl font-bold">PANDUAN</p>
            </a>
        </div>

        <!-- Footer Section -->
        <footer class="mt-16 w-full px-10">
            <div class="flex justify-between items-center">
                <!-- Left-aligned Text -->
                <div>
                    <h4 class="text-[#1cadc0] text-2xl font-bold">POPO ZAKARIA</h4>
                    <h4 class="text-[#1cadc0] text-2xl font-bold">E41211247</h4>
                </div>

                <!-- Right-aligned Text -->
                <div class="text-right">
                    <h4 class="text-[#1cadc0] text-2xl font-bold mr-10">TEKNIK INFORMATIKA</h4>
                    <h4 class="text-[#1cadc0] text-2xl font-bold">POLITEKNIK NEGERI JEMBER</h4>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
