Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <title>Dashboard — 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" /> | |
| <script src="js/chart.js"></script> | |
| <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">Dashboard Eksekutif</div> | |
| <div id="topbarMeta" class="topbar-sub"></div> | |
| </div> | |
| <div class="page-body"> | |
| <!-- KPI CARDS --> | |
| <div class="sec-head" style="margin-bottom:14px"> | |
| <div><div class="sec-title">Ringkasan Analisis</div><div class="sec-sub" id="datePeriod"></div></div> | |
| <div class="actions"> | |
| <button class="btn btn-ghost btn-sm" onclick="location.href='upload'">Upload Baru</button> | |
| </div> | |
| </div> | |
| <div class="kpi-grid" id="kpiGrid"></div> | |
| <!-- GAUGE + DONUT + TIME --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Skor Sentimen Global</div><span class="card-badge">Gauge</span></div> | |
| <div class="gauge-wrap"><canvas id="chartGauge" width="240" height="140"></canvas></div> | |
| <div id="gaugeLabel" style="text-align:center;font-size:13px;color:var(--tx2);margin-top:6px"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Distribusi Sentimen</div><span class="card-badge">Donut</span></div> | |
| <div class="chart-wrap chart-wrap-sm"><canvas id="chartDonut"></canvas></div> | |
| <div class="legend-row" id="legendDonut"></div> | |
| </div> | |
| </div> | |
| <!-- TREND --> | |
| <div class="card card-body" style="margin-bottom:14px"> | |
| <div class="card-head"><div class="card-title">Tren Sentimen per Waktu</div><span class="card-badge">Garis</span></div> | |
| <div class="chart-wrap"><canvas id="chartTrend"></canvas></div> | |
| </div> | |
| <!-- TOP TWEETS + LEADERBOARD --> | |
| <div class="chart-grid" style="margin-bottom:14px"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Tweet Positif Teratas</div><span class="card-badge">Top 5</span></div> | |
| <div id="positiveTweets"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Tweet Negatif Teratas</div><span class="card-badge">Top 5</span></div> | |
| <div id="negativeTweets"></div> | |
| </div> | |
| </div> | |
| <!-- ENGAGEMENT + INSIGHTS --> | |
| <div class="chart-grid"> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Engagement Leaderboard</div><span class="card-badge">Top 10</span></div> | |
| <div id="leaderboard"></div> | |
| </div> | |
| <div class="card card-body"> | |
| <div class="card-head"><div class="card-title">Insight Otomatis</div><span class="card-badge">AI</span></div> | |
| <div class="insight-list" id="insights"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/shared.js"></script> | |
| <script src="js/dashboard.js"></script> | |
| </body> | |
| </html> | |