{% extends 'layout.html' %}

{% block title %}JERNIHin{% endblock %}

{% block content %}
<!-- Video Banner -->
<div id="tm-video-container">
    <video autoplay muted loop id="tm-video">
        <source src="{{url_for('static', filename='video/ocean-sea-wave-video.mp4')}}" type="video/mp4">
    </video>  
    <i id="tm-video-control-button" class="fas fa-pause"></i>
</div>

<!-- Popup Navigation -->
<div class="tm-container">
    <nav class="tm-main-nav">
        <ul id="inline-popups">
            <!-- Popup Intro -->
            <li class="tm-nav-item">
                <a href="#intro" data-effect="mfp-move-from-top" class="tm-nav-link">
                    Introduction
                    <i class="fa fa-3x fa-info"></i>
                </a>
            </li>
            <!-- Popup Predict -->
            <li class="tm-nav-item">
                <a href="#about" data-effect="mfp-move-from-top" class="tm-nav-link">
                    Prediction
                    <i class="fa fa-3x fa-tint"></i>
                </a>
            </li>
            <!-- Popup About us -->
            <li class="tm-nav-item">
                <a href="#gallery" data-effect="mfp-move-from-top" class="tm-nav-link" id="tm-gallery-link">
                    About Us
                    <i class="fa fa-3x fa-user"></i>
                </a>
            </li>
            <!-- Popup Contact -->
            <li class="tm-nav-item">
                <a href="#contact" data-effect="mfp-move-from-top" class="tm-nav-link">
                    Contact
                    <i class="fa fa-3x fa-comments"></i>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Intro -->
    <div id="intro" class="popup mfp-with-anim mfp-hide tm-bg-gray">
        <div class="tm-close">
            <a href="#" class="tm-close-popup">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <div class="tm-row tm-intro-row">
            <img src="{{url_for('static', filename='img/intro.jpg')}}" alt="Intro" class="tm-intro-img">
            <div class="tm-col tm-bg-white tm-intro-pad">
                <h2 class="tm-color-primary tm-page-title tm-mb-15">Apa itu JERNIHin?</h2>
                <div class="tm-row tm-content-row">
                    <div class="tm-col-6 tm-intro-col-l">
                        <p>
                            Air yang aman dan tersedia sangat penting untuk kesehatan masyarakat, baik itu digunakan untuk minum, keperluan rumah tangga, produksi makanan atau tujuan rekreasi.
                        </p>
                        <p>
                            Indeks kualitas air (WQI/<i>Water Quality Index</i>) merupakan alat ukur yang penting untuk menentukan kualitas air sebagai indeks yang mencerminkan pengaruh gabungan dari berbagai parameter kualitas air yang dipertimbangkan dan diambil untuk perhitungan indeks kualitas air.
                        </p>
                    </div>
                    <div class="tm-col-6 tm-intro-col-r">
                        <p>
                            Jadi, kami mengambil beberapa inspirasi untuk menggunakan <i>dataset</i> indeks kualitas air (WQI) untuk memahami jenis air minum yang aman dengan menerapkan <i>machine learning</i> untuk membedakan antara air minum dan air yang tidak layak untuk diminum.
                        </p>
                        <p>
                            Jernihin adalah aplikasi berbasis <i>website</i> untuk memprediksi tingkat kualitas air yang dapat memberikan hasil prediksi air tersebut apakah aman untuk dikonsumsi atau tidak layak untuk dikonsumsi.
                        </p>
                        <div class="tm-text-center">
                            <a href="#" class="tm-btn btn-blue mfp-prevent-close tm-btn-next">
                                Coba Prediksi
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>

    <!-- Predict -->
    <div id="about" class="popup mfp-with-anim mfp-hide tm-bg-gray">
        <div class="tm-close">
            <a href="#" class="tm-close-popup">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <h2 class="tm-color-primary tm-about-col tm-mb-20 tm-page-title">Apa itu <i>Water Quality Index</i>?</h2>
        <div class="tm-row tm-about-row">
            <div class="tm-col tm-about-col tm-about-left">
                <img src="{{url_for('static', filename='img/predict.jpg')}}" alt="Prediction" class="tm-mb-15">
                <p class="tm-mb-15 tm-text-center tm-color-primary">
                   <b><i>"Save Water, Save Life"</i></b> 
                </p>
                <p class="tm-mb-15">
                    <i>Water quality index</i> (WQI) adalah metode sederhana yang digunakan sebagai bagian dari survei kualitas air yang dipengaruhi oleh proses alam dan aktivitas manusia. 
                    Indeks Kualitas Air dikembangkan dengan konsep bahwa nilai indeks yang semakin tinggi menunjukkan kualitas air yang semakin baik. Metode yang diusulkan untuk membandingkan kualitas air dari berbagai sumber air didasarkan pada delapan parameter kualitas air seperti Fecal, ph, Temperaure, Phosphorus, Oxygen, total sediment, Nitrogen dan Turbidity.
                </p>
            </div>
            <div class="tm-col tm-about-col">
                <p class="tm-mb-15 tm-text-center tm-color-primary">
                    <b>Pentingnya Pemantauan Kualitas Air</b>
                </p>
                <ol class="tm-mb-15">
                    <li><b>Sebagai Kebutuhan Dasar Manusia</b>
                        <p>Air adalah salah satu kebutuhan paling dasar untuk mendukung hidup manusia. Hal ini merefleksikan betapa pentingnya air dalam hidup manusia. Parameter untuk mengukur kualitas air baik secara fisik, kimia, atau bakteriologi harus sesuai dengan standarnya.</p>
                    </li>
                    <li><b>Kualitas yang aman untuk dikonsumsi</b>
                        <p>Kualitas air yang aman dikonsumsi adalah kualitas air yang memenuhi kriteria baik Fisik (Temperatur, Warna, Sedimentasi); Kimiawi (Oksigen, pH, Salinitas, Nutrien); maupun Biologis (Bakteri, Alga, Fitoplankton).</p>
                    </li>
                </ol>
                <p class="tm-mb-15">
                    Mari pastikan kualitas air Anda sekarang!
                </p>
                <a href="/predict" class="tm-btn btn-blue mfp-prevent-close">
                    Prediksi Sekarang!
                </a>
            </div>
        </div>
    </div>

    <!-- About Us -->
    <div id="gallery" class="popup mfp-with-anim mfp-hide tm-bg-gray">
        <div class="tm-close">
            <a href="#" class="tm-close-popup">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <div class="tm-row tm-gallery-row">
            <div class="tm-gallery">
                <div class="tm-gallery-container">
                    <figure class="effect-chico tm-gallery-item gilang">
                        <a href="https://www.linkedin.com/in/agilangaleyustas" target="_blank">
                            <img src="{{url_for('static', filename='img/team_gilang.jpg')}}" alt="Gilang"/>
                            <figcaption>
                                <p>Gilang</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="effect-chico tm-gallery-item ades">
                        <a href="https://www.linkedin.com/in/ades-tikaningsih-25a571244" target="_blank">
                            <img src="{{url_for('static', filename='img/team_ades.jpg')}}" alt="Ades"/>
                            <figcaption>
                                <p>Ades</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="effect-chico tm-gallery-item andrew">
                        <a href="https://www.linkedin.com/in/andrewbjamesie" target="_blank">
                            <img src="{{url_for('static', filename='img/team_andrew.jpg')}}" alt="Andrew"/>
                            <figcaption>
                                <p>Andrew</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="effect-chico tm-gallery-item cheliza">
                        <a href="https://www.linkedin.com/in/chelizasriayusimarsoit" target="_blank">
                            <img src="{{url_for('static', filename='img/team_cheliza.jpg')}}" alt="Cheliza"/>
                            <figcaption>
                                <p>Cheliza</p>
                            </figcaption>
                        </a>
                    </figure>
                </div>
            </div>

            <!-- navigation and description -->
            <div class="tm-col tm-gallery-right">
                <h2 class="tm-color-primary tm-mb-15 tm-page-title">Development Team</h2>
                <div class="tm-gallery-right-inner">
                    <ul class="tm-gallery-links">
                        <li>
                            <a href="#" class="active tm-gallery-link" data-filter="*">
                                <i class="fas fa-layer-group tm-gallery-link-icon"></i>
                                All Members
                            </a>
                        </li>
                        <li>
                            <a href="#" class="tm-gallery-link" data-filter="gilang">
                                <i class="fas fa-portrait tm-gallery-link-icon"></i>
                                A. Gilang Aleyusta Savada
                            </a>
                        </li>
                        <li>
                            <a href="#" class="tm-gallery-link" data-filter="ades">
                                <i class="fas fa-portrait tm-gallery-link-icon"></i>
                                Ades Tikaningsih
                            </a>
                        </li>
                        <li>
                            <a href="#" class="tm-gallery-link" data-filter="andrew">
                                <i class="fas fa-portrait tm-gallery-link-icon"></i>
                                Andrew Benedictus Jamesie
                            </a>
                        </li>
                        <li>
                            <a href="#" class="tm-gallery-link" data-filter="cheliza">
                                <i class="fas fa-portrait tm-gallery-link-icon"></i>
                                Cheliza Sriayu Simarsoit
                            </a>
                        </li>
                    </ul>
                    <p>
                        Kami tim JERNIHin, mahasiswa semester 5 yang berasal dari Prodi Teknik Informatika Universitas Lampung (<a href="#" class="tm-gallery-link" data-filter="gilang">Gilang</a>), Prodi Informatika Universitas AMIKOM Purwokerto (<a href="#" class="tm-gallery-link" data-filter="ades">Ades</a>), dan Prodi Ilmu Komputer Universitas Sumatera Utara (<a href="#" class="tm-gallery-link" data-filter="andrew">Andrew</a> & <a href="#" class="tm-gallery-link" data-filter="cheliza">Chea</a>). Kami tergabung dalam Capstone Team C22-078 SIB Dicoding Cycle 3 yang berfokus pada Pengembangan Machine Learning dan Front-End Web Developer.
                    </p>
                </div>
                <a href="#" class="tm-btn btn-blue mfp-prevent-close tm-btn-next">
                    Contact Us
                </a>
            </div>
        </div>
    </div>

    <!-- Contact -->
    <div id="contact" class="popup mfp-with-anim mfp-hide tm-bg-gray">
        <div class="tm-close">
            <a href="#" class="tm-close-popup">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <h2 class="tm-contact-col tm-color-primary tm-page-title tm-mb-20">Contact Us</h2>
        <div class="tm-row tm-contact-row">
            <div class="tm-col tm-contact-col">
                <form id="contact-form" action="" method="POST" class="tm-contact-form">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" placeholder="Full Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <textarea rows="8" name="message" class="form-control" placeholder="Message" required></textarea>
                    </div>
                    <div class="form-group">
                        <button type="reset" class="tm-btn btn-red">Reset</button>
                        <button type="submit" class="tm-btn btn-blue tm-ml-10">Send</button>
                    </div>
                </form>
            </div>
            <div class="tm-col tm-contact-col tm-contact-col-r">

                <!-- Map -->
                <div class="mapouter tm-mb-30">
                    <div class="gmap_canvas">
                        <iframe width="100%" height="520" id="gmap_canvas"
                            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2098.243952082923!2d107.63245264839983!3d-6.895763240062077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb8bb411d2516aad6!2sDicoding%20Academy!5e0!3m2!1sid!2sid!4v1670045754042!5m2!1sid!2sid"
                            frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                        </iframe>
                    </div>
                </div>

                <!-- Address -->
                <address class="tm-mb-30">
                    Jalan Batik Kumeli No. 50, Kel. Sukaluyu, Kec. Cibeunying Kaler<br>
                    Kota Bandung, Jawa Barat, Indonesia, 40123
                </address>

                <!-- Links -->
                <ul class="tm-contact-links">
                    <li>
                        <a href="tel:6282127277101">
                            <i class="fas fa-phone tm-contact-link-icon"></i>
                            Tel: 62 821-2727-7101
                        </a>
                    </li>
                    <li>
                        <a href="mailto:c22-078@dicoding.org">
                            <i class="fas fa-at tm-contact-link-icon"></i>
                            Email: c22-078@dicoding.org
                        </a>
                    </li>
                    <li>
                        <a href="https://jernihin.up.railway.app">
                            <i class="fa fa-globe tm-contact-link-icon"></i>
                            Web: jernihin.up.railway.app
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}