<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🍒 Media Pulse Dashboard - Cherry & Navy Sweet Analytics ⚓</title>
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Poppins & Quicksand untuk tampilan bulat menggemaskan -->
<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=Quicksand:wght@500;700;900&family=Poppins:wght@400;600;800;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
cherry: '#FF0052',
cherryLight: '#FF4D80',
cherryDark: '#C2003B',
cherryBg: '#FFF0F3',
navy: '#000080',
navyLight: '#3333B3',
navyDark: '#000050',
navyBg: '#EEF2FF',
cuteBlack: '#1E2229',
cream: '#FFFDF9',
pureWhite: '#FFFFFF'
},
fontFamily: {
sans: ['Quicksand', 'Poppins', 'sans-serif'],
},
borderRadius: {
'cute': '22px',
'cute-sm': '14px'
},
boxShadow: {
'neo': '5px 5px 0px #1E2229',
'neo-sm': '3px 3px 0px #1E2229',
'neo-hover': '7px 7px 0px #1E2229'
}
}
}
}
</script>
<!-- Menghubungkan ke file CSS eksternal -->
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-cream font-sans text-cuteBlack min-h-screen flex flex-col antialiased">
<!-- Toast Notification Menawan -->
<div id="toast" class="fixed top-5 right-5 z-50 transform translate-y-[-150%] transition-all duration-300 ease-out bg-pureWhite border-3 border-cuteBlack p-4 rounded-cute shadow-neo flex items-center space-x-3 text-sm">
<span id="toast-icon" class="text-2xl">🍒</span>
<span id="toast-msg" class="font-extrabold text-cuteBlack">Sihir berhasil dirapal!</span>
</div>
<!-- Header Dashboard Ceria -->
<header class="bg-pureWhite border-b-4 border-cuteBlack py-5 px-6 sticky top-0 z-40">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
<div class="flex items-center space-x-3">
<span class="text-4xl animate-bounce">🍒</span>
<div>
<h1 class="text-2xl font-black tracking-tight text-cherry flex items-center gap-1.5">
Media Pulse <span class="text-navy">Dashboard</span>
</h1>
<p class="text-xs text-slate-500 font-bold">✨ Analisis Sentimen & Opini Publik Pintar-mu secara Instan! ⚓</p>
</div>
</div>
<div class="flex items-center gap-2">
<span class="bg-navyBg text-navy px-3.5 py-2 rounded-full text-xs font-black border-2 border-cuteBlack shadow-neo-sm">
⚓ Navy Style
</span>
<span class="bg-cherryBg text-cherry px-3.5 py-2 rounded-full text-xs font-black border-2 border-cuteBlack shadow-neo-sm">
🍒 Cherry Powered
</span>
</div>
</div>
</header>
<!-- Konten Utama -->
<main class="flex-1 p-4 sm:p-6 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- PANEL INPUT (Kiri) -->
<section class="bg-pureWhite p-6 rounded-cute border-4 border-cuteBlack shadow-neo h-fit">
<h2 class="text-xl font-black text-cuteBlack mb-4 flex items-center gap-2 border-b-2 border-cuteBlack/10 pb-3">
<span>⚙️</span> Konfigurasi & Data
</h2>
<form id="analysisForm" class="space-y-4" onsubmit="event.preventDefault();">
<!-- OpenRouter API Key -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">🔑 API Key OpenRouter</label>
<input type="password" id="apiKey" placeholder="sk-or-v1-..." class="mt-1 w-full p-3 bg-slate-50 border-2 border-cuteBlack rounded-cute-sm text-sm focus:ring-2 focus:ring-cherry focus:bg-pureWhite outline-none transition-all">
<p class="text-[10px] text-slate-400 mt-1 leading-relaxed">Kosongkan kolom ini untuk mengaktifkan **✨ Demo Mode (Sihir Simulasi Lokal)**.</p>
</div>
<!-- AI Model -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">🤖 Model AI</label>
<input type="text" id="aiModel" value="openrouter/free" class="mt-1 w-full p-3 bg-slate-100 border-2 border-cuteBlack rounded-cute-sm text-sm text-slate-600 font-mono focus:outline-none" readonly>
</div>
<hr class="border-2 border-dashed border-cuteBlack/10">
<!-- Topic / Brand Name -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">🏷️ Nama Topik / Brand</label>
<input type="text" id="topic" placeholder="Contoh: Kopi Ceri Manis" class="mt-1 w-full p-3 border-2 border-cuteBlack rounded-cute-sm text-sm focus:ring-2 focus:ring-cherry outline-none transition-all font-bold" required>
</div>
<!-- Data Source Selector -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">🌐 Sumber Data Media</label>
<select id="dataSource" class="mt-1 w-full p-3 border-2 border-cuteBlack rounded-cute-sm text-sm focus:ring-2 focus:ring-cherry outline-none transition-all font-bold">
<option value="Twitter/X">🐦 Twitter / X</option>
<option value="Berita Online">📰 Berita Online</option>
<option value="Forum Reddit">💬 Forum Reddit</option>
<option value="TikTok">🎵 TikTok</option>
<option value="Lainnya">✨ Lainnya</option>
</select>
</div>
<!-- File Upload Feature with Cute Styling -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">📂 Upload Data File (.txt / .csv)</label>
<div class="mt-1 relative flex items-center justify-center w-full">
<label for="fileUpload" class="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-cuteBlack rounded-cute-sm cursor-pointer bg-navyBg/40 hover:bg-navyBg transition-all">
<div class="flex flex-col items-center justify-center pt-3 pb-3">
<span class="text-3xl mb-1">📄</span>
<p class="text-xs text-cuteBlack font-bold" id="fileUploadLabel">Klik untuk unggah file imut-mu</p>
</div>
<input id="fileUpload" type="file" accept=".txt,.csv" class="hidden" />
</label>
</div>
</div>
<!-- Data Media Input (Text Area) -->
<div>
<label class="block text-xs font-black text-cuteBlack uppercase tracking-wider">✍️ Isi Data Media (Teks)</label>
<textarea id="mediaData" rows="5" placeholder="Tempel ulasan media sosial, berita, atau biarkan terisi otomatis lewat file upload..." class="mt-1 w-full p-3 border-2 border-cuteBlack rounded-cute-sm text-sm focus:ring-2 focus:ring-cherry outline-none transition-all resize-y" required></textarea>
</div>
<!-- Action Buttons -->
<div class="flex gap-3 pt-2">
<button type="button" id="btnLoadSample" class="btn-bouncy flex-1 bg-navy text-pureWhite border-2 border-cuteBlack font-black py-3 px-4 rounded-cute-sm text-xs shadow-neo-sm hover:shadow-neo transition duration-200 flex items-center justify-center gap-1.5">
📥 Load Sample Data
</button>
<button type="button" id="btnAnalyze" class="btn-bouncy flex-1 bg-cherry text-pureWhite border-2 border-cuteBlack font-black py-3 px-4 rounded-cute-sm text-xs shadow-neo-sm hover:shadow-neo transition duration-200 flex items-center justify-center gap-1.5">
✨ Analyze
</button>
</div>
</form>
</section>
<!-- PANEL HASIL (Kanan - Tersembunyi sampai analisis selesai) -->
<section class="lg:col-span-2 space-y-6">
<!-- Tempat Laporan Utama -->
<div id="resultPanel" class="space-y-6 hidden">
<!-- Bar Atas Hasil & Copy -->
<div class="flex flex-col sm:flex-row justify-between items-center bg-pureWhite p-4 rounded-cute border-4 border-cuteBlack shadow-neo gap-3">
<div class="flex items-center gap-2">
<span class="text-2xl animate-spin">🔮</span>
<h2 class="font-black text-cuteBlack text-base">Sihir Analisis AI Telah Selesai!</h2>
</div>
<button id="btnCopy" class="btn-bouncy bg-emerald-500 hover:bg-emerald-600 text-pureWhite border-2 border-cuteBlack px-4 py-2 rounded-cute-sm text-xs font-black transition-all shadow-neo-sm hover:shadow-neo flex items-center gap-1.5">
📋 Copy Report
</button>
</div>
<!-- Row 1: Sentiment Score & Risk Badge -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Sentiment Score Card -->
<div class="bg-pureWhite p-5 rounded-cute border-4 border-cuteBlack shadow-neo flex flex-col justify-between">
<div>
<span class="text-xs font-black text-slate-500 uppercase tracking-wider">💖 Sentiment Score Card</span>
<div class="flex items-baseline mt-1.5">
<span id="sentimentScore" class="text-5xl font-black text-cherry">0%</span>
<span id="sentimentLabel" class="ml-2.5 text-xs font-black text-navyDark bg-navyBg border-2 border-cuteBlack px-3 py-1 rounded-full"></span>
</div>
</div>
<div class="mt-4">
<!-- Visual Progress Bar murni CSS -->
<div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden border-2 border-cuteBlack">
<div id="sentimentBar" class="h-full rounded-full transition-all duration-1000 bg-gradient-to-r from-cherry to-emerald-500" style="width: 0%"></div>
</div>
<div class="flex justify-between text-[10px] text-slate-600 mt-2 font-black">
<span>💔 Negatif (0%)</span>
<span>😐 Netral (50%)</span>
<span>💖 Positif (100%)</span>
</div>
</div>
</div>
<!-- Risk Level Badge Card -->
<div class="bg-pureWhite p-5 rounded-cute border-4 border-cuteBlack shadow-neo flex flex-col justify-between">
<div>
<span class="text-xs font-black text-slate-500 uppercase tracking-wider">🚨 Risk Level Badge</span>
<div class="mt-3">
<span id="riskBadge" class="px-4 py-2.5 rounded-cute-sm text-sm font-black tracking-wide inline-block border-2 border-cuteBlack shadow-neo-sm">
MEMBACA...
</span>
</div>
</div>
<p class="text-[11px] text-slate-400 font-bold leading-relaxed mt-4">Tingkat bahaya dihitung otomatis berdasarkan kedalaman ulasan publik negatif.</p>
</div>
</div>
<!-- Executive Summary & Key Insights -->
<div class="bg-pureWhite p-5 rounded-cute border-4 border-cuteBlack shadow-neo space-y-4">
<div>
<h3 class="text-sm font-black text-cuteBlack flex items-center gap-1.5">
<span class="text-cherry">📌</span> Executive Summary
</h3>
<p id="executiveSummary" class="text-slate-600 text-xs mt-2 leading-relaxed whitespace-pre-line font-bold"></p>
</div>
<div class="border-t-2 border-dashed border-cuteBlack/10 pt-4">
<h3 class="text-sm font-black text-cuteBlack flex items-center gap-1.5">
<span class="text-navy">🔍</span> Key Insight
</h3>
<ul id="keyInsights" class="text-slate-600 text-xs mt-2 space-y-1.5 list-disc pl-4 font-bold"></ul>
</div>
</div>
<!-- Tema Utama (Grafik Batang Murni HTML & CSS - Tanpa Library Luar) -->
<div class="bg-pureWhite p-5 rounded-cute border-4 border-cuteBlack shadow-neo">
<h3 class="text-sm font-black text-cuteBlack mb-4 flex items-center gap-1.5">
<span class="text-cherry">📈</span> Bar Chart Frekuensi Tema (Top Themes)
</h3>
<div id="themeBarsContainer" class="space-y-4">
<!-- Batang diisi dinamis oleh JS -->
</div>
</div>
<!-- Tabel Perbandingan Peluang vs Perhatian Publik -->
<div class="bg-pureWhite rounded-cute border-4 border-cuteBlack shadow-neo overflow-hidden">
<div class="p-4 border-b-2 border-cuteBlack bg-navyBg">
<h3 class="text-sm font-black text-cuteBlack flex items-center gap-1.5">
<span class="text-cherry">🔄</span> Tabel Perbandingan Peluang & Kekhawatiran
</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full text-xs text-left border-collapse">
<thead>
<tr class="bg-cherryBg border-b-2 border-cuteBlack">
<th class="p-3 font-black text-cherry border-r-2 border-cuteBlack w-1/2">💡 Opportunities (Peluang)</th>
<th class="p-3 font-black text-navy w-1/2">⚠️ Concerns (Kekhawatiran)</th>
</tr>
</thead>
<tbody id="oppsAndConcernsTableBody" class="divide-y-2 divide-cuteBlack">
<!-- Baris diisi dinamis oleh JS -->
</tbody>
</table>
</div>
</div>
<!-- Recommended Actions -->
<div class="bg-pureWhite p-5 rounded-cute border-4 border-cuteBlack shadow-neo">
<h3 class="text-sm font-black text-cuteBlack mb-3 flex items-center gap-1.5">
<span class="text-navy">🎯</span> Recommended Actions dengan Priority Badge
</h3>
<div id="recommendedActionsContainer" class="space-y-2.5">
<!-- Konten diisi dinamis oleh JS -->
</div>
</div>
</div>
<!-- LAYAR STANDBY (Sebelum Analisis) -->
<div id="placeholderPanel" class="border-4 border-dashed border-cuteBlack rounded-cute flex flex-col justify-center items-center p-12 bg-pureWhite shadow-neo text-center">
<span class="text-6xl mb-4 animate-bounce">✨🍒⚓</span>
<h3 class="font-black text-cuteBlack text-lg">Siap Mencerahkan Media Pulse-mu!</h3>
<p class="text-xs text-slate-500 max-w-sm mt-2 leading-relaxed font-extrabold">
Silakan masukkan data atau klik tombol navy imut <b class="text-navy font-black">"📥 Load Sample Data"</b> kemudian tekan tombol ceri merah <b class="text-cherry font-black">"✨ Analyze"</b> untuk memanggil analisis.
</p>
</div>
</main>
</div>
<!-- Footer -->
<footer class="bg-pureWhite border-t-4 border-cuteBlack py-4 px-6 text-center text-xs text-slate-500 font-black mt-6">
© 2026 Media Pulse Dashboard 🍒 Cherry & Navy Sweet Analytics.
</footer>
<!-- Menghubungkan ke file JavaScript eksternal -->
<script src="app.js"></script>
</body>
</html>