<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Nihla Rizkiyah</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- Favicons -->
    <link href="{{ url_for('static', filename='assets/img/ikn.png') }}" rel="icon">
    <link href="{{ url_for('static', filename='assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">

    <!-- Fonts -->
    <link href="{{ url_for('static', filename='https://fonts.googleapis.com') }}" rel="preconnect">
    <link href="{{ url_for('static', filename='https://fonts.gstatic.com') }}" rel="preconnect" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="{{ url_for('static', filename='assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='assets/vendor/aos/aos.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='') }}">

    <!-- Main CSS File -->
    <link href="{{ url_for('static', filename='assets/css/main.css') }}" rel="stylesheet">

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


</head>

<body class="index-page">
    <header id="header" class="header d-flex align-items-center fixed-top">
        <div
            class="header-container container-fluid container-xl position-relative d-flex align-items-center justify-content-between">

            <a href="#hero" class="logo d-flex align-items-center me-auto me-xl-0">
                <h1 class="sitename">Analisis Sentimen</h1>
            </a>
            <nav id="navmenu" class="navmenu">
                <ul>
                    <li><a href="#hero" class="active">Home</a></li>
                    <li><a href="#analisis">Analisis</a></li>
                    <!-- <li><a href="#visualisasi">Visualisasi</a></li>
                    <li><a href="#tweet">Tweet</a></li>
                    <li><a href="#split">Split Data</a></li> -->
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
            </nav>

            <a class="btn-getstarted" href="#analisis">Mulai Analisis</a>

        </div>
    </header>

    <main class="main">

        <!-- Hero Section -->
        <section id="hero" class="hero section">

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="hero-content" data-aos="fade-up" data-aos-delay="200">
                            <div class="company-badge mb-4">
                                <i class="bi bi-gear-fill me-2"></i>
                                Analisis Sentimen
                            </div>

                            <h1 class="mb-4">
                                Ulasan Pembelian Produk  <br>
                                E-Commerce <br>
                                <span class="accent-text">Studi Kasus Tokopedia</span>
                            </h1>

                            <p class="mb-4 mb-md-5">
                                Penelitian ini bertujuan untuk mengetahui sentimen masyarakat terhadap Tokopedia melalui analisis ulasan pengguna. 
                                Data dikumpulkan, dibersihkan, dan dianalisis menggunakan model RNN untuk mengklasifikasikan sentimen positif dan negatif. 
                                Hasilnya diharapkan dapat memberikan gambaran kepuasan pelanggan.
                                
                
                            </p>

                            <div class="hero-buttons">
                                <a href="#about" class="btn btn-primary me-0 me-sm-2 mx-1">Analisis</a>
                                <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8"
                                    class="btn btn-link mt-2 mt-sm-0 glightbox">
                                    <i class="bi bi-play-circle me-1"></i>
                                    Mulai Presentasi
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="hero-image" data-aos="zoom-out" data-aos-delay="300">
                            <img src="{{ url_for('static', filename='assets/img/illustration-1.webp') }}"
                                alt="Hero Image" class="img-fluid">

                            <div class="customers-badge">
                                <div class="customer-avatars">
                                    <img src="{{ url_for('static', filename='assets/img/avatar-1.webp') }}"
                                        alt="Customer 1" class="avatar">
                                    <img src="{{ url_for('static', filename='assets/img/avatar-2.webp') }}"
                                        alt="Customer 2" class="avatar">
                                    <img src="{{ url_for('static', filename='assets/img/avatar-3.webp') }}"
                                        alt="Customer 3" class="avatar">
                                    <img src="{{ url_for('static', filename='assets/img/avatar-4.webp') }}"
                                        alt="Customer 4" class="avatar">
                                    <img src="{{ url_for('static', filename='assets/img/avatar-5.webp') }}"
                                        alt="Customer 5" class="avatar">
                                    <span class="avatar more">1000+</span>
                                </div>
                                <p class="mb-0 mt-2">Tokopedia menjadi tempat ribuan pengguna membagikan 
                                    pendapat mereka terkait produk, tren, dan layanan di dunia fashion.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row stats-row gy-4 mt-5" data-aos="fade-up" data-aos-delay="500">
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="bi bi-trophy"></i>
                            </div>
                            <div class="stat-content">
                                <h4>Jumlah Dataset</h4>
                                <p class="mb-0">2217  Ulasan data</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="bi bi-briefcase"></i>
                            </div>
                            <div class="stat-content">
                                <h4>Metode</h4>
                                <p class="mb-0">Recurrent Neural Network</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="bi bi-graph-up"></i>
                            </div>
                            <div class="stat-content">
                                <h4>Akurasi Model</h4>
                                <p class="mb-0">0.80</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="bi bi-award"></i>
                            </div>
                            <div class="stat-content">
                                <h4>Perbandingan Data Latih & Uji</h4>
                                <p class="mb-0">90% Training, 10% Testing</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </section><!-- /Hero Section -->

        <section id="analisis" class="tweet-section section">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <h2 class="section-title">Mulai Analisis</h2>

                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Tambah
                </button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Data</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <form action="/predict" method="POST">
                                <div class="modal-body">
                                    <input type="text" name="text" class="form-control"
                                        placeholder="Masukkan kalimat anda..">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-primary">Analisis</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

                <!-- Table -->
                <div class="table-responsive">
                    <table id="myTable" class="table table-hover table-striped table-bordered text-center align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>No</th>
                                <th>Ulasan</th>
                                <th>Polarity</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tweet in tweets %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td class="text-start">{{ tweet.sentimen }}</td>
                                <td>
                                    {% if tweet.klasifikasi == 'positif' %}
                                    <span class="badge bg-success">Positif</span>
                                    {% elif tweet.klasifikasi == 'negatif' %}
                                    <span class="badge bg-danger">Negatif</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Netral</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <script>
                    $(document).ready(function () {
                        $('#myTable').DataTable({
                            "paging": true,
                            "searching": true,
                            "ordering": true,
                            "info": true,
                            "lengthMenu": [5, 10, 25, 50],
                            "language": {
                                "search": "Cari:",
                                "lengthMenu": "Tampilkan _MENU_ data",
                                "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                                "paginate": {
                                    "next": "Berikutnya",
                                    "previous": "Sebelumnya"
                                }
                            }
                        });
                    });
                </script>


            </div>
        </section>

        <!-- Features Section -->
        <!--  -->

    

        <!-- Testimonials Section -->
       

        <!-- Stats Section -->
<section id="stats" class="stats section">
    <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="row justify-content-center gy-4 text-center">
            <div class="col-lg-3 col-md-6">
                <div class="stats-item w-100 h-100">
                    <span data-purecounter-start="0" data-purecounter-end="1217" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Positif</p>
                </div>
            </div><!-- End Stats Item -->

            <div class="col-lg-3 col-md-6">
                <div class="stats-item w-100 h-100">
                    <span data-purecounter-start="0" data-purecounter-end="1000" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Negatif</p>
                </div>
            </div><!-- End Stats Item -->

            <div class="col-lg-3 col-md-6">
                <div class="stats-item w-100 h-100">
                    <span data-purecounter-start="0" data-purecounter-end="2217" data-purecounter-duration="1"
                        class="purecounter"></span>
                    <p>Jumlah Dataset</p>
                </div>
            </div><!-- End Stats Item -->
        </div>
    </div>
</section>


        <!-- Pricing Section -->
        <section id="split" class="pricing section light-background">

            <!-- Section Title -->
        </section>

        <section class="faq-9 faq section light-background" id="faq">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5" data-aos="fade-up">
                        <h2 class="faq-title">Pertanyaan Umum tentang Analisis Sentimen</h2>
                        <p class="faq-description">Temukan jawaban atas pertanyaan umum tentang metode analisis sentimen
                            yang
                            kami gunakan.</p>
                    </div>

                    <div class="col-lg-7" data-aos="fade-up" data-aos-delay="300">
                        <div class="faq-container">
                            <div class="faq-item faq-active">
                                <h3>Apa itu analisis sentimen?</h3>
                                <div class="faq-content">
                                    <p> Analisis sentimen adalah teknik dalam pemrosesan bahasa alami (Natural Language Processing) yang digunakan untuk mengidentifikasi dan 
                                        mengklasifikasikan opini atau emosi dalam suatu teks, apakah bersifat positif, negatif, atau netral. 
                                        Dalam konteks e-commerce, analisis ini membantu memahami persepsi pelanggan terhadap produk melalui ulasan yang mereka berikan.</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                            <div class="faq-item">
                                <h3>Bagaimana cara kerja analisis sentimen dengan RNN?</h3>
                                <div class="faq-content">
                                    <p>Recurrent Neural Network (RNN) bekerja dengan memproses data teks secara berurutan, sehingga mampu memahami konteks dan urutan kata dalam sebuah ulasan. 
                                       Model ini kemudian belajar mengenali pola-pola dalam teks untuk mengklasifikasikan sentimen menjadi positif atau negatif.</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                            <div class="faq-item">
                                <h3>Data apa yang digunakan dalam penelitian ini?</h3>
                                <div class="faq-content">
                                    <p> Data yang digunakan berasal dari ulasan produk di platform e-commerce dan telah melalui proses preprocessing seperti pembersihan teks dan normalisasi. 
                                        Selanjutnya, data dilabeli secara otomatis menggunakan skrip Python berdasarkan daftar kata positif dan negatif yang telah ditentukan.</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                            <div class="faq-item">
                                <h3>Apakah analisis sentimen ini akurat?</h3>
                                <div class="faq-content">
                                    <p>Analisis sentimen ini cukup akurat karena menggunakan model Recurrent Neural Network (RNN) yang telah dilatih dan diuji menggunakan dataset ulasan produk yang relevan. 
                                       Model ini mencapai tingkat akurasi sebesar 80%, menunjukkan kemampuannya dalam mengklasifikasikan sentimen positif dan negatif secara efektif.</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Call To Action 2 Section -->
        <section id="call-to-action-2" class="call-to-action-2 section dark-background">
            <div class="container">
                <div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
                    <div class="col-xl-10">
                        <div class="text-center">
                            <h3>Analisis Sentimen Ulasan Produk E-Commerce</h3>
                            <p> Perkembangan e-commerce yang pesat telah menghasilkan ribuan ulasan dari pengguna terhadap berbagai produk. 
                                Melalui analisis sentimen, kita dapat mengidentifikasi opini konsumen baik positif maupun negatif yang terkandung dalam ulasan tersebut. 
                                Hasil analisis ini dapat digunakan untuk memahami kepuasan pelanggan, meningkatkan kualitas produk, serta membantu pelaku bisnis dalam mengambil keputusan yang lebih tepat sasaran.
                            </p>
                            <a class="cta-btn" href="#">Lihat Hasil Analisis</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Contact Section -->
        <section id="contact" class="contact section light-background">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Contact</h2>
                <p>Hubungi kami untuk informasi lebih lanjut mengenai analisis sentimen ulasan produk
                    E-Commerce Tokopedia.</p>
            </div><!-- End Section Title -->

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row g-4 g-lg-5">
                    <div class="col-lg-5">
                        <div class="info-box" data-aos="fade-up" data-aos-delay="200">
                            <h3>Contact Info</h3>
                            <p>Silakan hubungi kami melalui informasi berikut:</p>

                            <div class="info-item" data-aos="fade-up" data-aos-delay="300">
                                <div class="icon-box">
                                    <i class="bi bi-envelope"></i>
                                </div>
                                <div class="content">
                                    <h4>Email</h4>
                                    <p>nihlarizk14@gmail.com</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="contact-form" data-aos="fade-up" data-aos-delay="300">
                            <h3>Get In Touch</h3>
                            <p>Kirimkan pertanyaan atau masukan Anda melalui formulir di bawah ini.</p>

                            <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up"
                                data-aos-delay="200">
                                <div class="row gy-4">

                                    <div class="col-md-6">
                                        <input type="text" name="name" class="form-control" placeholder="Your Name"
                                            required>
                                    </div>

                                    <div class="col-md-6 ">
                                        <input type="email" class="form-control" name="email" placeholder="Your Email"
                                            required>
                                    </div>

                                    <div class="col-12">
                                        <input type="text" class="form-control" name="subject" placeholder="Subject"
                                            required>
                                    </div>

                                    <div class="col-12">
                                        <textarea class="form-control" name="message" rows="6" placeholder="Message"
                                            required></textarea>
                                    </div>

                                    <div class="col-12 text-center">
                                        <div class="loading">Loading</div>
                                        <div class="error-message"></div>
                                        <div class="sent-message">Your message has been sent. Thank you!</div>

                                        <button type="submit" class="btn">Send Message</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>

        </section>


    </main>

    <footer id="footer" class="footer">

        <div class="container footer-top">
            <div class="row gy-4">
                <div class="col-lg-4 col-md-6 footer-about">
                    <a href="#hero" class="logo d-flex align-items-center">
                        <span class="sitename">Analisis Sentimen</span>
                    </a>
                    <div class="footer-contact pt-3">
                        <p>Jalan Mastrip</p>
                        <p>Jember</p>
                        <p class="mt-3"><strong>Phone:</strong> <span>+62 878 3868 5040</span></p>
                        <p><strong>Email:</strong> <span>nihlarizk14@gmail.com</span></p>
                    </div>
                    <div class="social-links d-flex mt-4">
                        <a href=""><i class="bi bi-twitter-x"></i></a>
                        <a href=""><i class="bi bi-facebook"></i></a>
                        <a href="https://www.instagram.com/nihla.att?igsh=eDU0dmp0ZTY0ODly&utm_source=qr"><i class="bi bi-instagram"></i></a>
                        <a href=""><i class="bi bi-linkedin"></i></a>
                    </div>
                </div>

                <div class="col-lg-2 col-md-3 footer-links">
                    <h4>Useful Links</h4>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Terms of service</a></li>
                        <li><a href="#">Privacy policy</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="container copyright text-center mt-4">
            <p>© <span>Copyright</span> <strong class="px-1 sitename">Nihla Rizkiyah</strong> <span>All Rights
                    Reserved</span>
            </p>
            <div class="credits">
                Designed by <a href="">Nihla</a> Distributed By <a href="">R</a>
            </div>
        </div>

    </footer>

    <!-- Scroll Top -->
    <a href=" #" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="{{ url_for('static', filename='assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/vendor/php-email-form/validate.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/vendor/aos/aos.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>

    <!-- Main JS File -->
    <script src="{{ url_for('static', filename='assets/js/main.js') }}"></script>

</body>

</html>