Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>Tweet List — SentiMeter</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="css/style.css" /> | |
| <link rel="icon" type="image/svg+xml" href="img/logo.svg" /> | |
| </head> | |
| <body> | |
| <div class="layout"> | |
| <div id="sidebar"></div> | |
| <div class="main"> | |
| <div class="topbar"> | |
| <div class="topbar-title">Tweet List</div> | |
| <div id="topbarMeta" class="topbar-sub"></div> | |
| </div> | |
| <div class="page-body"> | |
| <div class="sec-head"> | |
| <div> | |
| <div class="sec-title">Daftar Tweet</div> | |
| <div class="sec-sub">Tampilan postingan asli dengan analisis sentimen</div> | |
| </div> | |
| <div class="actions" id="tweetStats"></div> | |
| </div> | |
| <!-- Filter Bar --> | |
| <div class="tl-filter-bar"> | |
| <div class="tl-filter-tabs"> | |
| <button class="tl-tab active" data-filter="all" id="btnAll"> | |
| <span class="tl-tab-label">Semua</span> | |
| </button> | |
| <button class="tl-tab tl-tab-pos" data-filter="Positif" id="btnPos"> | |
| <div class="tl-tab-label-group"> | |
| <span class="tl-tab-dot" style="background:var(--pos)"></span> | |
| <span class="tl-tab-label">Positif</span> | |
| </div> | |
| <span class="tl-tab-count" id="cntPos">0</span> | |
| </button> | |
| <button class="tl-tab tl-tab-neg" data-filter="Negatif" id="btnNeg"> | |
| <div class="tl-tab-label-group"> | |
| <span class="tl-tab-dot" style="background:var(--neg)"></span> | |
| <span class="tl-tab-label">Negatif</span> | |
| </div> | |
| <span class="tl-tab-count" id="cntNeg">0</span> | |
| </button> | |
| <button class="tl-tab tl-tab-neu" data-filter="Netral" id="btnNeu"> | |
| <div class="tl-tab-label-group"> | |
| <span class="tl-tab-dot" style="background:var(--neu)"></span> | |
| <span class="tl-tab-label">Netral</span> | |
| </div> | |
| <span class="tl-tab-count" id="cntNeu">0</span> | |
| </button> | |
| </div> | |
| <div class="tl-filter-actions"> | |
| <div class="tl-search-wrap"> | |
| <svg class="tl-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg> | |
| <input class="tl-search" type="text" id="tweetSearch" placeholder="Cari tweet atau username…" /> | |
| <button class="tl-search-clear" id="searchClear" title="Hapus pencarian">✕</button> | |
| </div> | |
| <div class="tl-sort-wrap"> | |
| <select class="tl-sort-sel" id="sortSel"> | |
| <option value="default">Urutan Asli</option> | |
| <option value="conf-desc">Confidence Tinggi</option> | |
| <option value="conf-asc">Confidence Rendah</option> | |
| <option value="engage-desc">Engagement Tinggi</option> | |
| <option value="date-desc">Terbaru</option> | |
| <option value="date-asc">Terlama</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tweet Feed --> | |
| <div id="tweetFeed" class="tl-feed"></div> | |
| <!-- Info & Pagination --> | |
| <div class="tl-pagination-stack"> | |
| <div class="tl-pagination" id="tweetPagination"></div> | |
| <div class="tl-pagination-info" id="tweetInfo"></div> | |
| <div class="tl-page-size-row"> | |
| <span class="tl-page-size-label">Baris per halaman:</span> | |
| <select id="pageSizeSel" class="tl-page-size-sel"> | |
| <option value="10">10</option> | |
| <option value="20" selected>20</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/shared.js"></script> | |
| <script src="js/tweets.js"></script> | |
| </body> | |
| </html> | |