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

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Faisal Oktabrian Sholihin</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">
                                Dampak Pemindahan IKN <br>
                                Dibidang <br>
                                <span class="accent-text">Pendidikan & Kebudayaan</span>
                            </h1>

                            <p class="mb-4 mb-md-5">
                                Penulis ingin memahami lebih dalam mengenai tentang dampak pemindahan ibu kota IKN
                                Nusantara di bidang
                                Pendidikan & Kebudayaan
                            </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">media sosial x menjadi tempat untuk membahas isu-isu terkait
                                    pendidikan hingga
                                    kebudayaan</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">1380 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">Support Vector Machine</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.8320</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="features-2" class="features-2 section">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <div class="row align-items-center">
                    <div class="col-lg-4">
                        <div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="200">
                            <div class="d-flex align-items-center justify-content-end gap-4">
                                <div class="feature-content">
                                    <h3>Akses di Berbagai Perangkat</h3>
                                    <p>Platform ini memungkinkan analisis sentimen terhadap dampak pemindahan Ibu Kota
                                        Negara
                                        (IKN) dalam sektor pendidikan dan kebudayaan secara fleksibel, dapat diakses
                                        dari
                                        berbagai perangkat.</p>
                                </div>
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-display"></i>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->

                        <div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="300">
                            <div class="d-flex align-items-center justify-content-end gap-4">
                                <div class="feature-content">
                                    <h3>Visualisasi Sentimen</h3>
                                    <p>Menampilkan data sentimen publik terhadap kebijakan pemindahan IKN dalam bidang
                                        pendidikan dan kebudayaan dalam bentuk grafis yang mudah dipahami.</p>
                                </div>
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-bar-chart"></i>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->

                        <div class="feature-item text-end" data-aos="fade-right" data-aos-delay="400">
                            <div class="d-flex align-items-center justify-content-end gap-4">
                                <div class="feature-content">
                                    <h3>Analisis Mendalam</h3>
                                    <p>Menyediakan wawasan berbasis data mengenai persepsi masyarakat terhadap perubahan
                                        sistem
                                        pendidikan dan dampak budaya akibat perpindahan IKN.</p>
                                </div>
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-eye"></i>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->
                    </div>

                    <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
                        <div class="phone-mockup text-center">
                            <img src="{{ url_for('static', filename='assets/img/ikn.png') }}" alt="Phone Mockup"
                                class="img-fluid">
                        </div>
                    </div><!-- End Phone Mockup -->

                    <div class="col-lg-4">
                        <div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="200">
                            <div class="d-flex align-items-center gap-4">
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-code-square"></i>
                                </div>
                                <div class="feature-content">
                                    <h3>Algoritma Canggih</h3>
                                    <p>Menggunakan metode Support Vector Machine (SVM) untuk menganalisis opini
                                        masyarakat
                                        terhadap dampak pemindahan IKN di sektor pendidikan dan kebudayaan.</p>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->

                        <div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="300">
                            <div class="d-flex align-items-center gap-4">
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-phone"></i>
                                </div>
                                <div class="feature-content">
                                    <h3>Interaktif dan Responsif</h3>
                                    <p>Platform ini didesain responsif dan mudah digunakan, memungkinkan eksplorasi data
                                        sentimen dengan tampilan yang interaktif.</p>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->

                        <div class="feature-item" data-aos="fade-left" data-aos-delay="400">
                            <div class="d-flex align-items-center gap-4">
                                <div class="feature-icon flex-shrink-0">
                                    <i class="bi bi-globe"></i>
                                </div>
                                <div class="feature-content">
                                    <h3>Dukungan Multi-Platform</h3>
                                    <p>Dapat diakses melalui berbagai browser dan perangkat, sehingga memudahkan
                                        analisis
                                        persepsi publik kapan saja dan di mana saja.</p>
                                </div>
                            </div>
                        </div><!-- End .feature-item -->
                    </div>
                </div>
            </div>
        </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>Tweet</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 -->
        <section id="visualisasi" class="features section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Visualisasi</h2>
                <p>Menyajikan data analisis sentimen dalam bentuk grafis yang informatif dan mudah dipahami.</p>
            </div>


            <div class="container">

                <div class="d-flex justify-content-center">

                    <ul class="nav nav-tabs" data-aos="fade-up" data-aos-delay="100">

                        <li class="nav-item">
                            <a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#features-tab-1">
                                <h4>Kemunculan Kata</h4>
                            </a>
                        </li><!-- End tab nav item -->

                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-2">
                                <h4>Polaritas</h4>
                            </a><!-- End tab nav item -->

                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-3">
                                <h4>Wordcloud</h4>
                            </a>
                        </li><!-- End tab nav item -->

                    </ul>

                </div>

                <div class="tab-content" data-aos="fade-up" data-aos-delay="200">

                    <div class="tab-pane fade active show" id="features-tab-1">
                        <div class="row">
                            <div
                                class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
                                <h3>Kemunculan Kata</h3>
                                <p class="fst-italic">
                                    Fitur ini menampilkan kata-kata yang paling sering muncul dalam dataset analisis
                                    sentimen, membantu
                                    dalam memahami pola penggunaan kata dalam opini publik.
                                </p>
                                <ul>
                                    <li><i class="bi bi-check2-all"></i> <span>Menganalisis frekuensi kemunculan kata
                                            dalam kumpulan
                                            data.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Mengidentifikasi kata-kata yang sering
                                            digunakan dalam
                                            sentimen positif, negatif, atau netral.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Memberikan wawasan tentang topik utama
                                            yang banyak
                                            dibicarakan di media sosial.</span></li>
                                </ul>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2 text-center">
                                <img src="{{ url_for('static', filename='assets/img/kata.png') }}" alt="Kemunculan Kata"
                                    class="img-fluid">
                            </div>
                        </div>
                    </div>


                    <div class="tab-pane fade" id="features-tab-2">
                        <div class="row">
                            <div
                                class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
                                <h3>Polaritas</h3>
                                <p class="fst-italic">
                                    Analisis polaritas membantu mengklasifikasikan opini publik menjadi sentimen
                                    positif, negatif, atau
                                    netral berdasarkan teks yang dianalisis.
                                </p>
                                <ul>
                                    <li><i class="bi bi-check2-all"></i> <span>Mengukur tingkat sentimen dari suatu
                                            opini atau
                                            komentar.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Menentukan apakah suatu pernyataan
                                            memiliki kecenderungan
                                            positif, negatif, atau netral.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Mempermudah identifikasi persepsi publik
                                            terhadap isu
                                            tertentu.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Memberikan wawasan berbasis data untuk
                                            analisis tren sentimen
                                            di media sosial.</span></li>
                                </ul>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2 text-center">
                                <img src="{{ url_for('static', filename='assets/img/polarity.png') }}"
                                    alt="Polaritas Sentimen" class="img-fluid">
                            </div>
                        </div>
                    </div>


                    <div class="tab-pane fade" id="features-tab-3">
                        <div class="row">
                            <div
                                class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
                                <h3>Wordcloud</h3>
                                <ul>
                                    <li><i class="bi bi-check2-all"></i> <span>Visualisasi kata-kata yang paling sering
                                            muncul dalam
                                            analisis sentimen.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Memudahkan pemahaman tren opini publik
                                            secara cepat dan
                                            interaktif.</span></li>
                                    <li><i class="bi bi-check2-all"></i> <span>Menampilkan kata-kata dominan dalam
                                            berbagai kategori
                                            sentimen: positif, negatif, atau netral.</span></li>
                                </ul>
                                <p class="fst-italic">
                                    Wordcloud membantu dalam mengidentifikasi pola kata yang sering digunakan dalam
                                    diskusi publik,
                                    memberikan wawasan yang lebih mendalam mengenai persepsi masyarakat terhadap
                                    pemindahan IKN dalam bidang
                                    pendidikan dan kebudayaan.
                                </p>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2 text-center">
                                <img src="{{ url_for('static', filename='assets/img/wordcloud.png') }}"
                                    alt="Wordcloud Analysis" class="img-fluid">
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </section>

        <section id="analisis" class="tweet-section section">
            <div class="container" data-aos="fade-up" data-aos-delay="100">
                <h2 class="section-title">Tahapan Preprocessing</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">Tampilan Preprocessing</button>
                                </div>
                            </form>

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

                <!-- Table -->
                <div class="table-responsive">
                    <table id="myTable1"
                        class="table table-hover table-striped table-bordered text-center align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>No</th>
                                <th>Clean</th>
                                <th>Token</th>
                                <th>Normalisasi</th>
                                <th>Stop</th>
                                <th>Stemmed</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for data in preprocessing_data %}
                            <tr>
                                <td>{{ data.id }}</td>
                                <td>{{ data.clean_text }}</td>
                                <td>{{ data.tokens }}</td>
                                <td>{{ data.normalized_tokens }}</td>
                                <td>{{ data.filtered_tokens }}</td>
                                <td>{{ data.stemmed_tokens }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <script>
                    $(document).ready(function () {
                        $('#myTable1').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>

        <!-- Testimonials Section -->
        <section id="tweet" class="testimonials section light-background">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Tweet Mereka</h2>
                <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="row g-5">

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="testimonial-item">
                            <img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-1.jpg') }}"
                                class="testimonial-img" alt="">
                            <h3>Saul Goodman</h3>
                            <h4>Ceo &amp; Founder</h4>
                            <div class="stars">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i>
                            </div>
                            <p>
                                <i class="bi bi-quote quote-icon-left"></i>
                                <span>Pindah IKN Majukan Pendidikan Daerah #IbukotaNegara #IKN #SemangatNusantara</span>
                                <i class="bi bi-quote quote-icon-right"></i>
                            </p>
                        </div>
                    </div><!-- End testimonial item -->

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="testimonial-item">
                            <img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-2.jpg') }}"
                                class="testimonial-img" alt="">
                            <h3>Sara Wilsson</h3>
                            <h4>Designer</h4>
                            <div class="stars">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i>
                            </div>
                            <p>
                                <i class="bi bi-quote quote-icon-left"></i>
                                <span>Harga sembako mahal biaya pendidikan mahal .... Hanya bisa diatasi dgn IKN.</span>
                                <i class="bi bi-quote quote-icon-right"></i>
                            </p>
                        </div>
                    </div><!-- End testimonial item -->

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
                        <div class="testimonial-item">
                            <img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-3.jpg') }}"
                                class="testimonial-img" alt="">
                            <h3>Jena Karlis</h3>
                            <h4>Store Owner</h4>
                            <div class="stars">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i>
                            </div>
                            <p>
                                <i class="bi bi-quote quote-icon-left"></i>
                                <span>Kebudayaan dan kearifan lokal di IKN Nusantara Kaltim tidak akan tergerus
                                    #IbukotaNegara #IKN
                                    #SemangatNusantara.</span>
                                <i class="bi bi-quote quote-icon-right"></i>
                            </p>
                        </div>
                    </div><!-- End testimonial item -->

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="400">
                        <div class="testimonial-item">
                            <img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-4.jpg') }}"
                                class="testimonial-img" alt="">
                            <h3>Thors</h3>
                            <h4>Freelancer</h4>
                            <div class="stars">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i>
                            </div>
                            <p>
                                <i class="bi bi-quote quote-icon-left"></i>
                                <span>@_riverheaven Rakyat butuh pendidikan dan kesehatan bukan bangunan megah yang
                                    hanya menguntungkan
                                    segelintir orang. IKN.</span>
                                <i class="bi bi-quote quote-icon-right"></i>
                            </p>
                        </div>
                    </div><!-- End testimonial item -->

                </div>

            </div>

        </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 gy-4">

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item text-center w-100 h-100">
                            <span data-purecounter-start="0" data-purecounter-end="634" 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 text-center w-100 h-100">
                            <span data-purecounter-start="0" data-purecounter-end="272" data-purecounter-duration="1"
                                class="purecounter"></span>
                            <p>Netral</p>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item text-center w-100 h-100">
                            <span data-purecounter-start="0" data-purecounter-end="474" 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 text-center w-100 h-100">
                            <span data-purecounter-start="0" data-purecounter-end="1380" data-purecounter-duration="1"
                                class="purecounter"></span>
                            <p>Jumlah Dataset</p>
                        </div>
                    </div><!-- End Stats Item -->

                </div>

            </div>

        </section><!-- /Stats Section -->

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

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Pembagian Data Train & Test</h2>
                <p>Menentukan proporsi data yang optimal untuk analisis sentimen terkait pemindahan IKN di bidang
                    pendidikan dan
                    kebudayaan.</p>
            </div><!-- End Section Title -->

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

                <div class="row g-4 justify-content-center">

                    <!-- Pembagian Pertama -->
                    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                        <div class="pricing-card">
                            <h3>Pembagian Pertama</h3>
                            <div class="price">
                                <span class="amount">70:30</span>
                                <span class="period">%</span>
                            </div>
                            <p class="description">Pembagian ini digunakan untuk menjaga keseimbangan antara data latih
                                dan uji
                                dalam memahami opini masyarakat terhadap kebijakan pendidikan akibat pemindahan IKN.</p>

                            <h4>Keunggulan:</h4>
                            <ul class="features-list">
                                <li><i class="bi bi-check-circle-fill"></i> Seimbang untuk pelatihan dan pengujian</li>
                                <li><i class="bi bi-check-circle-fill"></i> Cocok untuk dataset sedang hingga besar</li>
                                <li><i class="bi bi-check-circle-fill"></i> Dapat meningkatkan generalisasi model</li>
                            </ul>

                            <a href="#" class="btn btn-primary">
                                Akurasi adalah 0.7724
                                <i class="bi bi-graph-up"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Pembagian Kedua -->
                    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                        <div class="pricing-card popular">
                            <div class="popular-badge">Saat Ini</div>
                            <h3>Pembagian Kedua</h3>
                            <div class="price">
                                <span class="amount">90:10</span>
                                <span class="period">%</span>
                            </div>
                            <p class="description">Menggunakan lebih banyak data latih untuk meningkatkan kemampuan
                                model dalam
                                mengenali sentimen masyarakat terhadap dampak pemindahan IKN di sektor pendidikan dan
                                kebudayaan.</p>

                            <h4>Keunggulan:</h4>
                            <ul class="features-list">
                                <li><i class="bi bi-check-circle-fill"></i> Model lebih terlatih dengan lebih banyak
                                    data</li>
                                <li><i class="bi bi-check-circle-fill"></i> Cocok untuk dataset besar</li>
                                <li><i class="bi bi-check-circle-fill"></i> Akurasi model meningkat</li>
                                <li><i class="bi bi-check-circle-fill"></i> Meminimalisir overfitting</li>
                            </ul>

                            <a href="#" class="btn btn-light">
                                Akurasi adalah 0.8320
                                <i class="bi bi-graph-up"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Pembagian Ketiga -->
                    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
                        <div class="pricing-card">
                            <h3>Pembagian Ketiga</h3>
                            <div class="price">
                                <span class="amount">80:20</span>
                                <span class="period">%</span>
                            </div>
                            <p class="description">Menyeimbangkan antara jumlah data latih dan uji agar model dapat
                                mengenali
                                pola sentimen dengan baik serta tetap mampu menggeneralisasi opini publik.</p>

                            <h4>Keunggulan:</h4>
                            <ul class="features-list">
                                <li><i class="bi bi-check-circle-fill"></i> Kombinasi optimal antara data latih dan uji
                                </li>
                                <li><i class="bi bi-check-circle-fill"></i> Mengurangi risiko bias pada model</li>
                                <li><i class="bi bi-check-circle-fill"></i> Cocok untuk berbagai skala dataset</li>
                                <li><i class="bi bi-check-circle-fill"></i> Model tetap memiliki data uji yang cukup
                                </li>
                            </ul>
                            <a href="#" class="btn btn-primary">
                                Akurasi adalah 0.7557
                                <i class="bi bi-graph-up"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </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 pemrosesan bahasa alami untuk menentukan apakah
                                        suatu
                                        teks bersifat positif, negatif, atau netral.</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                            <div class="faq-item">
                                <h3>Bagaimana cara kerja analisis sentimen dengan SVM?</h3>
                                <div class="faq-content">
                                    <p>SVM (Support Vector Machine) mengklasifikasikan data berdasarkan pola dalam fitur
                                        teks
                                        menggunakan model pembelajaran mesin.</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 media sosial X dan telah melalui proses
                                        preprocessing
                                        serta pelabelan manual.</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>Model SVM yang digunakan telah diuji dan dikembangkan untuk mendapatkan hasil
                                        akurasi
                                        yang optimal berdasarkan dataset yang tersedia.</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 Pemindahan IKN</h3>
                            <p>Pemindahan Ibu Kota Negara (IKN) ke Nusantara menjadi topik yang banyak diperbincangkan,
                                terutama
                                dalam aspek pendidikan dan kebudayaan. Dengan analisis sentimen, kita dapat memahami
                                bagaimana
                                masyarakat bereaksi terhadap perubahan ini, baik dalam hal peluang maupun tantangan yang
                                muncul.
                            </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 pemindahan IKN di bidang
                    pendidikan dan
                    kebudayaan.</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>faisalokta08@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-Jalan</p>
                        <p>Australia</p>
                        <p class="mt-3"><strong>Phone:</strong> <span>00000000</span></p>
                        <p><strong>Email:</strong> <span>brians@example.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=""><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">Faisal Oktabrian</strong> <span>All Rights
                    Reserved</span>
            </p>
            <div class="credits">
                Designed by <a href="">Faisal</a> Distributed By <a href="">FOS</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>