<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <link rel="icon" href="{{ asset('images/lungs.png') }}" type="image/png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ISPA Prediction</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <style>
            body {
            width: 100%;
            background-image: url('{{ asset('images/babygirl.jpg') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Poppins', sans-serif; 
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding-left: 20px;
            position: relative;
            overflow-y: auto;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .container {
            position: relative;
            z-index: 2;
            text-align: left;
            max-width: 650px;
            padding-left: 40px;
            overflow-y: auto;
        }

        .logo-wrapper {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            z-index: 3;
            padding-left: 40px;
        }

        .logo, .small-logo {
            width: 40px;  /* Ukuran dikurangi dari 80px ke 60px */
            height: auto;
            margin-right: 10px;
        }
        .right-image {
            position: absolute;
            top: 90px;
            right: 80px;
            width: 500px;
            height: auto;
            z-index: 2;
        }

        .header {
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 1.8rem;
            color: #1F2937;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .container p {
            margin-bottom: 30px;
            font-size: 1rem;
            color: #4B5563;
            line-height: 1.6;
            text-align: justify;
        }

        .buttons {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 3;
            align-items: center;
        }

        .buttons a {
            margin: 0 10px;
            font-size: 1rem;
            color: #F97316;
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: normal;
        }

        .buttons a.register {
            color: #F97316;
        }

        .buttons a:hover {
            color: #FB923C;
            transform: scale(1.1);
        }

        .buttons a.register:hover {
            color: #FB923C;
            transform: scale(1.1);
        }

        .start-button {
            display: inline-block;
            padding: 15px 30px;
            margin-top: 10px;
            background-color: #60A5FA;
            color: white;
            text-align: center;
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .start-button:hover {
            background-color: #93C5FD;
            transform: translateY(-3px);
        }

 @media (max-width: 768px) {
    body {
        padding: 10px;
        overflow-x: hidden;
    }

    .logo-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .right-image {
        position: static !important;
        width: 100%;
        max-width: 300px;
        height: auto;
        display: block;
        margin: 20px auto;
    }

    .container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        text-align: justify;
        z-index: 1;
    }

    .header {
        text-align: center;
    }

    .header h1 {
        font-size: 1.2rem;
    }

    .container p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .buttons {
        justify-content: center;
        margin-top: 20px;
    }

    .start-button {
        font-size: 1rem;
        padding: 10px 20px;
    }
}

    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="logo-wrapper">
        <img src="{{ asset('images/logostb.png') }}" alt="Logo STB" class="small-logo">
        <img src="{{ asset('images/logokemenkes.png') }}" alt="Logo Kemenkes" class="logo">
    </div>
    <div class="right-image">
        <img src="{{ asset('images/mind.png') }}" alt="Image Right" class="right-image">
    </div>
    <div class="container">
    <div class="header">
        <h1>Selamat Datang di Sistem Prediksi ISPA Kabupaten Situbondo</h1>
    </div>
    <p>Website ini merupakan aplikasi berbasis web yang dikembangkan untuk melakukan klasifikasi penyebaran penyakit Infeksi Saluran Pernapasan Akut (ISPA) di Kabupaten Situbondo. Sistem ini menggunakan metode Naive Bayes dalam proses analisis data, dengan mempertimbangkan beberapa faktor seperti kebiasaan merokok, kondisi tempat tinggal, perilaku hidup sehat, dan status imunisasi guna mengetahui tingkat kerentanan suatu wilayah terhadap penyakit ISPA.</p>
    <p>Tujuan utama dari website ini adalah untuk memberikan informasi yang akurat dan bermanfaat bagi masyarakat dan instansi terkait, yaitu Dinas Kesehatan Kabupaten Situbondo, sehingga dapat digunakan sebagai dasar dalam pengambilan keputusan serta tindakan preventif untuk menanggulangi penyebaran ISPA secara lebih efektif dan tepat sasaran.</p>
    <!-- Button Mulai -->
     
    <a href="{{ route('login') }}" class="start-button">Mulai</a>
</div>
</body>
</html>