TIF_E41253394/frontend/index.html

98 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analisis Sentimen Komentar TikTok | TF-IDF & Logistic Regression</title>
<meta name="description"
content="Sistem analisis sentimen komentar TikTok menggunakan ekstraksi fitur TF-IDF dan algoritma Logistic Regression dengan dukungan database MySQL Laragon.">
<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=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='25' fill='%230f172a'/><path d='M65 30c-5 0-9.5-2.2-12.5-5.6V62a15 15 0 1 1-15-15c2.3 0 4.5.5 6.4 1.5v9.1A6.8 6.8 0 1 0 50 64V18h8.5c1.4 6 5.8 10.5 11.5 11.5v6.5A16.5 16.5 0 0 1 65 30z' fill='%2325f4ee'/><path d='M62 33c-5 0-9.5-2.2-12.5-5.6V65a15 15 0 1 1-15-15c2.3 0 4.5.5 6.4 1.5v9.1A6.8 6.8 0 1 0 47 67V21h8.5c1.4 6 5.8 10.5 11.5 11.5v6.5A16.5 16.5 0 0 1 62 33z' fill='%23fe2c55'/></svg>">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="shell">
<header class="top" id="topbar" hidden>
<div class="brand-wrap">
<a class="brand" href="#/">
<div class="brand-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.5 3C14.5 5.5 12 6.5 9 6.5V15.5C9 18 6.8 20 4.5 20C2.2 20 0 18 0 15.5C0 13 2 11 4.5 11C5.2 11 6 11.2 6.5 11.5V6.8C5.8 6.6 5.2 6.5 4.5 6.5C1.8 6.5 -0.5 9 -0.5 12C-0.5 15 1.8 17.5 4.5 17.5C7.2 17.5 9.5 15 9.5 12V3H16.5Z"
fill="#25f4ee" transform="translate(4, 2)" />
<path
d="M18.5 5C16.5 7.5 14 8.5 11 8.5V17.5C11 20 8.8 22 6.5 22C4.2 22 2 20 2 17.5C2 15 4 13 6.5 13C7.2 13 8 13.2 8.5 13.5V8.8C7.8 8.6 7.2 8.5 6.5 8.5C3.8 8.5 1.5 11 1.5 14C1.5 17 3.8 19.5 6.5 19.5C9.2 19.5 11.5 17 11.5 14V5H18.5Z"
fill="#fe2c55" transform="translate(3, 1)" />
</svg>
</div>
<div class="brand-text">
<span class="brand-title">Sentimen TikTok</span>
<span class="brand-subtitle">TF-IDF & Logistic Regression</span>
</div>
</a>
<div class="db-pill" id="dbStatusBadge" title="Status Koneksi Database">
<span class="db-dot"></span>
</div>
</div>
<nav class="nav">
<a href="#/" data-nav="dashboard" class="nav-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="9" rx="1" />
<rect x="14" y="3" width="7" height="5" rx="1" />
<rect x="14" y="12" width="7" height="9" rx="1" />
<rect x="3" y="16" width="7" height="5" rx="1" />
</svg>
<span>Dashboard</span>
</a>
<a href="#/playground" data-nav="playground" class="nav-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
<line x1="12" y1="22.08" x2="12" y2="12" />
</svg>
<span>Uji Cepat Kata</span>
</a>
<a href="#/history" data-nav="history" class="nav-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
<span>Riwayat</span>
</a>
<a href="#/evaluation" data-nav="evaluation" class="nav-item nav-item-admin" id="navEvaluation">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" />
<path d="M3 9h18" />
<path d="M9 21V9" />
</svg>
<span>Pengujian Model</span>
<span class="admin-pill">Admin</span>
</a>
<div class="user-chip">
<div class="avatar-circle" id="userAvatar">-</div>
<span class="who" id="whoami"></span>
</div>
<button class="btn-logout" id="btnLogout" title="Keluar">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7" />
<line x1="21" y1="12" x2="9" y2="12" />
</svg>
<span>Keluar</span>
</button>
</nav>
</header>
<main id="app" aria-live="polite"></main>
</div>
<script src="/static/app.js"></script>
</body>
</html>