Spaces:

rhmnsae
/

sentimeter

Running

App Files Files Community

rhmnsae commited on Mar 15

Commit

04b72bb

1 Parent(s): 0069a1e

add

Browse files

Files changed (36) hide show

README.md +3 -3
analytics.html +146 -0
app.py +142 -0
cleaning.html +89 -0
convert_model.py +98 -0
css/crawling.css +133 -0
css/history.css +230 -0
css/index.css +799 -0
css/style.css +3759 -0
css/support.css +141 -0
dashboard.html +81 -0
data.html +93 -0
history.html +47 -0
img/logo.svg +10 -0
index.html +249 -0
js/analytics.js +369 -0
js/app.js +868 -0
js/chart.js +0 -0
js/cleaning.js +135 -0
js/dashboard.js +180 -0
js/data.js +213 -0
js/demo.js +72 -0
js/history.js +130 -0
js/index.js +122 -0
js/shared.js +897 -0
js/support.js +6 -0
js/tweets.js +289 -0
js/upload.js +217 -0
model/config.json +55 -0
model/onnx/model.onnx +3 -0
model/tokenizer.json +0 -0
model/tokenizer_config.json +14 -0
requirements.txt +4 -0
support.html +112 -0
tweets.html +101 -0
upload.html +96 -0

README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 ---
 title: Sentimeter
-emoji: ⚡
-colorFrom: pink
-colorTo: gray
 sdk: gradio
 sdk_version: 6.9.0
 app_file: app.py

 ---
 title: Sentimeter
+emoji: 🏃
+colorFrom: indigo
+colorTo: blue
 sdk: gradio
 sdk_version: 6.9.0
 app_file: app.py

analytics.html ADDED Viewed

	@@ -0,0 +1,146 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Analytics — 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">Analytics Lengkap</div>
+      <div id="topbarMeta" class="topbar-sub"></div>
+    </div>
+    <div class="page-body">
+      <div class="sec-head">
+        <div><div class="sec-title">Visualisasi Data</div><div class="sec-sub">15 grafik & tabel analitik komprehensif</div></div>
+      </div>
+      <!-- Row 1: Donut + Time trend -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">1. Distribusi Sentimen</div><span class="card-badge">Donut</span></div>
+          <div class="chart-wrap chart-wrap-sm"><canvas id="c1"></canvas></div>
+          <div class="legend-row" id="legend1"></div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">2. Tren Sentimen per Jam</div><span class="card-badge">Area</span></div>
+          <div class="chart-wrap"><canvas id="c2"></canvas></div>
+        </div>
+      </div>
+      <!-- Row 2: Stacked topic + location horiz -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">3. Sentimen per Topik</div><span class="card-badge">Batang Berlapis</span></div>
+          <div class="chart-wrap"><canvas id="c3"></canvas></div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">4. Distribusi Lokasi</div><span class="card-badge">Batang Horiz.</span></div>
+          <div class="chart-wrap"><canvas id="c4"></canvas></div>
+        </div>
+      </div>
+      <!-- Row 3: User activity + Grouped topic score -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">5. Pengguna Paling Aktif</div><span class="card-badge">Batang Horiz.</span></div>
+          <div class="chart-wrap"><canvas id="c5"></canvas></div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">6. Avg Confidence per Topik</div><span class="card-badge">Batang Berkelompok</span></div>
+          <div class="chart-wrap"><canvas id="c8"></canvas></div>
+        </div>
+      </div>
+      <!-- Row 4: Hourly heatmap-bar (full width) -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body chart-full">
+          <div class="card-head"><div class="card-title">7. Aktivitas per Jam (Heatmap)</div><span class="card-badge">Batang</span></div>
+          <div class="chart-wrap"><canvas id="c12"></canvas></div>
+        </div>
+      </div>
+      <!-- ━━━ NEW SECTIONS ━━━ -->
+      <!-- Row 5: Language Sentiment Chart (full) ← now #8 -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body chart-full">
+          <div class="card-head"><div class="card-title">8. Sentimen berdasarkan Bahasa</div><span class="card-badge">Batang Berlapis</span></div>
+          <div class="chart-wrap"><canvas id="cLang"></canvas></div>
+        </div>
+      </div>
+      <!-- Row 6: Top Hashtag Table + Top Topic Table -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">9. Top 10 Hashtag Teratas</div><span class="card-badge">Tabel</span></div>
+          <div class="analytics-table-wrap">
+            <table class="analytics-table" id="tblHashtag">
+              <thead><tr><th>#</th><th>Hashtag</th><th>Jumlah</th><th>Distribusi</th></tr></thead>
+              <tbody id="tblHashtagBody"></tbody>
+            </table>
+            <div class="empty-state" id="tblHashtagEmpty" style="display:none;margin-top:0;border:none">
+              <div class="empty-state-title">Tidak ada hashtag</div>
+              <div class="empty-state-desc">Belum ada data hashtag yang ditemukan.</div>
+            </div>
+          </div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">10. Top 10 Topik Teratas</div><span class="card-badge">Tabel</span></div>
+          <div class="analytics-table-wrap">
+            <table class="analytics-table" id="tblTopic">
+              <thead><tr><th>#</th><th>Topik</th><th>Total</th><th class="tc-pos">✦ Pos</th><th class="tc-neg">✦ Neg</th><th class="tc-neu">✦ Net</th></tr></thead>
+              <tbody id="tblTopicBody"></tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <!-- Row 7: Sentiment per Hashtag Table (full) -->
+      <div class="chart-grid" style="margin-bottom:14px">
+        <div class="card card-body chart-full">
+          <div class="card-head"><div class="card-title">11. Sentimen per Hashtag Teratas</div><span class="card-badge">Tabel Detail</span></div>
+          <div class="analytics-table-wrap">
+            <table class="analytics-table" id="tblHashtagSent">
+              <thead><tr><th>#</th><th>Hashtag</th><th>Total</th><th class="tc-pos">Positif</th><th class="tc-neg">Negatif</th><th class="tc-neu">Netral</th><th>Dominan</th><th>Bar Distribusi</th></tr></thead>
+              <tbody id="tblHashtagSentBody"></tbody>
+            </table>
+            <div class="empty-state" id="tblHashtagSentEmpty" style="display:none;margin-top:0;border:none">
+              <div class="empty-state-title">Tidak ada hashtag</div>
+              <div class="empty-state-desc">Belum ada data hashtag yang ditemukan.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Row 8: Common Words (3 columns) -->
+      <div class="chart-grid-3" style="margin-bottom:14px">
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">12. Kata Umum — Positif</div><span class="card-badge" style="background:var(--pos-d);color:var(--pos);border-color:transparent">Positif</span></div>
+          <div class="word-tag-cloud" id="wordsPos"></div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">13. Kata Umum — Netral</div><span class="card-badge" style="background:var(--neu-d);color:var(--neu);border-color:transparent">Netral</span></div>
+          <div class="word-tag-cloud" id="wordsNeu"></div>
+        </div>
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">14. Kata Umum — Negatif</div><span class="card-badge" style="background:var(--neg-d);color:var(--neg);border-color:transparent">Negatif</span></div>
+          <div class="word-tag-cloud" id="wordsNeg"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="js/shared.js"></script>
+<script src="js/analytics.js"></script>
+</body>
+</html>

app.py ADDED Viewed

	@@ -0,0 +1,142 @@

+"""
+SentiMeter — IndoBERT Sentiment Analysis Backend
+Uses mdhugol/indonesia-bert-sentiment-classification
+"""
+import os
+import sys
+import traceback
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+app = Flask(__name__, static_folder='.', static_url_path='')
+CORS(app)
+# ─── Model Loading ────────────────────────────────────
+MODEL_NAME = "mdhugol/indonesia-bert-sentiment-classification"
+LABEL_MAP = {
+    'LABEL_0': 'Positif',
+    'LABEL_1': 'Netral',
+    'LABEL_2': 'Negatif',
+}
+sentiment_pipeline = None
+model_error = None
+def load_model():
+    """Load the IndoBERT sentiment model. Returns True on success."""
+    global sentiment_pipeline, model_error
+    try:
+        print(f"[IndoBERT] Loading model: {MODEL_NAME} ...")
+        from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
+        tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+        model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME)
+        sentiment_pipeline = pipeline(
+            "sentiment-analysis",
+            model=model,
+            tokenizer=tokenizer,
+            truncation=True,
+            max_length=512,
+        )
+        model_error = None
+        print("[IndoBERT] Model loaded successfully!")
+        return True
+    except Exception as e:
+        model_error = str(e)
+        sentiment_pipeline = None
+        print(f"[IndoBERT] ERROR loading model: {e}", file=sys.stderr)
+        traceback.print_exc()
+        return False
+# ─── API Routes ───────────────────────────────────────
+@app.route('/api/health', methods=['GET'])
+def health():
+    """Check if the model is loaded and ready."""
+    if sentiment_pipeline is not None:
+        return jsonify({"status": "ok", "model": MODEL_NAME})
+    else:
+        return jsonify({
+            "status": "error",
+            "model": MODEL_NAME,
+            "error": model_error or "Model not loaded"
+        }), 503
+@app.route('/api/sentiment', methods=['POST'])
+def analyze_sentiment():
+    """
+    Analyze sentiment for a batch of texts.
+    Expects JSON: { "texts": ["text1", "text2", ...] }
+    Returns JSON:  [ {"label": "Positif", "score": 0.95}, ... ]
+    """
+    if sentiment_pipeline is None:
+        return jsonify({
+            "error": True,
+            "message": f"Model IndoBERT gagal dimuat: {model_error or 'Unknown error'}. "
+                       "Pastikan koneksi internet aktif dan dependensi sudah terinstal.",
+        }), 503
+    data = request.get_json(silent=True)
+    if not data or 'texts' not in data:
+        return jsonify({"error": True, "message": "Request harus berisi field 'texts'."}), 400
+    texts = data['texts']
+    if not isinstance(texts, list) or len(texts) == 0:
+        return jsonify({"error": True, "message": "'texts' harus berupa array string yang tidak kosong."}), 400
+    # Limit batch size to prevent OOM
+    MAX_BATCH = 64
+    results = []
+    try:
+        for i in range(0, len(texts), MAX_BATCH):
+            batch = texts[i:i + MAX_BATCH]
+            # Ensure all texts are non-empty strings
+            batch = [str(t).strip() or "." for t in batch]
+            preds = sentiment_pipeline(batch)
+            for pred in preds:
+                label = LABEL_MAP.get(pred['label'], pred['label'])
+                results.append({
+                    "label": label,
+                    "score": round(pred['score'], 4),
+                })
+    except Exception as e:
+        return jsonify({
+            "error": True,
+            "message": f"Error saat proses sentimen: {str(e)}"
+        }), 500
+    return jsonify(results)
+# ─── Static File Serving ─────────────────────────────
+@app.route('/')
+def serve_index():
+    return send_from_directory('.', 'index.html')
+@app.route('/<path:path>')
+def serve_static(path):
+    if os.path.isfile(path):
+        return send_from_directory('.', path)
+    return send_from_directory('.', 'index.html')
+# ─── Main ────────────────────────────────────────────
+if __name__ == '__main__':
+    load_model()
+    print("\n" + "=" * 50)
+    if sentiment_pipeline:
+        print("  SentiMeter Server — IndoBERT Ready")
+    else:
+        print("  SentiMeter Server — WARNING: Model failed to load!")
+        print(f"  Error: {model_error}")
+    print(f"  Open: http://localhost:3000")
+    print("=" * 50 + "\n")
+    app.run(host='0.0.0.0', port=3000, debug=False)

cleaning.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Cleaning Lab — 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">Text Cleaning Lab</div>
+      <div id="topbarMeta" class="topbar-sub"></div>
+    </div>
+    <div class="page-body">
+      <div class="sec-head">
+        <div><div class="sec-title">Pipeline Pembersihan Teks</div><div class="sec-sub">9 langkah preprocessing untuk IndoBERT</div></div>
+      </div>
+      <div class="chart-grid" style="margin-bottom:14px;align-items:stretch">
+        <!-- Interactive Demo -->
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">Demo Interaktif</div><span class="card-badge">Live Preview</span></div>
+          <div class="demo-area" style="padding:0;background:transparent">
+            <div class="demo-label">Masukkan teks untuk dicoba:</div>
+            <textarea class="demo-textarea" id="demoInput" rows="4" placeholder="Contoh: @liputan6dotcom Gak sia-sia mendukung #Prabowo-Gibran! https://t.co/abc123 😍 Data ekonomi tumbuh 5.17%"></textarea>
+          </div>
+          <div style="margin-top:14px">
+            <div style="font-size:11px;color:var(--tx3);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Hasil per Langkah:</div>
+            <div class="step-pipeline" id="stepPipeline"></div>
+          </div>
+        </div>
+        <!-- Pipeline Steps Config -->
+        <div class="card card-body">
+          <div class="card-head"><div class="card-title">Langkah Cleaning</div><span class="card-badge">Konfigurasi</span></div>
+          <div id="pipelineSteps"></div>
+        </div>
+      </div>
+      <!-- Dataset Stats -->
+      <div class="card card-body" style="margin-bottom:14px">
+        <div class="card-head"><div class="card-title">Statistik Cleaning Dataset</div><span class="card-badge">Seluruh Data</span></div>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px" id="cleaningStats"></div>
+        <div class="chart-grid" style="margin:0">
+          <div>
+            <div style="font-size:11px;color:var(--tx3);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Distribusi Pengurangan Kata (%)</div>
+            <div class="chart-wrap chart-wrap-sm"><canvas id="chartReduction"></canvas></div>
+          </div>
+          <div>
+            <div style="font-size:11px;color:var(--tx3);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px">Top 15 Kata Tersering (Setelah Cleaning)</div>
+            <div class="chart-wrap chart-wrap-sm"><canvas id="chartWords"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <!-- Before/After Table -->
+      <div class="card card-body">
+        <div class="card-head">
+          <div class="card-title">Perbandingan Sebelum & Sesudah Cleaning</div>
+          <span class="card-badge">Sampel 20 Pertama</span>
+        </div>
+        <div class="table-wrap">
+          <table class="data-table">
+            <thead><tr>
+              <th style="width:36px">No</th>
+              <th>Teks Asli</th>
+              <th>Teks Bersih</th>
+              <th style="width:70px">Kata Awal</th>
+              <th style="width:70px">Kata Akhir</th>
+              <th style="width:80px">Reduksi</th>
+            </tr></thead>
+            <tbody id="cleanTableBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="js/shared.js"></script>
+<script src="js/cleaning.js"></script>
+</body>
+</html>

convert_model.py ADDED Viewed

	@@ -0,0 +1,98 @@

+"""
+One-time script to convert IndoBERT sentiment model to ONNX format (quantized).
+Run this once: python convert_model.py
+After conversion, the 'model/onnx/' folder will contain the quantized ONNX model
+that can be loaded directly in the browser via ONNX Runtime Web.
+"""
+import os
+import json
+import torch
+import shutil
+from pathlib import Path
+from transformers import AutoTokenizer, AutoModelForSequenceClassification, AutoConfig
+MODEL_ID = "mdhugol/indonesia-bert-sentiment-classification"
+OUTPUT_DIR = Path("./model")
+ONNX_DIR = OUTPUT_DIR / "onnx"
+# Clean up previous conversion
+if ONNX_DIR.exists():
+    shutil.rmtree(ONNX_DIR)
+ONNX_DIR.mkdir(parents=True, exist_ok=True)
+print(f"[1/5] Loading model: {MODEL_ID}")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+model = AutoModelForSequenceClassification.from_pretrained(MODEL_ID)
+config = AutoConfig.from_pretrained(MODEL_ID)
+model.eval()
+print("[2/5] Creating dummy input for ONNX export...")
+dummy_text = "Ini adalah contoh kalimat untuk testing"
+inputs = tokenizer(dummy_text, return_tensors="pt", padding="max_length", max_length=128, truncation=True)
+print("[3/5] Exporting to ONNX (with embedded weights)...")
+raw_onnx_path = str(ONNX_DIR / "model_raw.onnx")
+# Use opset 14, disable external data to embed weights in the ONNX file
+with torch.no_grad():
+    torch.onnx.export(
+        model,
+        (inputs["input_ids"], inputs["attention_mask"], inputs["token_type_ids"]),
+        raw_onnx_path,
+        input_names=["input_ids", "attention_mask", "token_type_ids"],
+        output_names=["logits"],
+        dynamic_axes={
+            "input_ids": {0: "batch_size", 1: "sequence"},
+            "attention_mask": {0: "batch_size", 1: "sequence"},
+            "token_type_ids": {0: "batch_size", 1: "sequence"},
+            "logits": {0: "batch_size"},
+        },
+        opset_version=14,
+        do_constant_folding=True,
+    )
+raw_size = os.path.getsize(raw_onnx_path)
+print(f"    Raw ONNX size: {raw_size/1024/1024:.1f} MB")
+print("[4/5] Quantizing to int8 (dynamic quantization)...")
+from onnxruntime.quantization import quantize_dynamic, QuantType
+quant_onnx_path = str(ONNX_DIR / "model_quantized.onnx")
+quantize_dynamic(
+    raw_onnx_path,
+    quant_onnx_path,
+    weight_type=QuantType.QUInt8,
+)
+quant_size = os.path.getsize(quant_onnx_path)
+print(f"    Quantized ONNX size: {quant_size/1024/1024:.1f} MB")
+print(f"    Compression ratio: {raw_size/quant_size:.1f}x")
+# Remove the raw model, keep quantized
+os.remove(raw_onnx_path)
+# Rename quantized to model.onnx
+final_path = str(ONNX_DIR / "model.onnx")
+os.rename(quant_onnx_path, final_path)
+# Remove external data files if they exist
+for f in ONNX_DIR.glob("*.data"):
+    os.remove(f)
+print("[5/5] Saving tokenizer and config files...")
+# Save tokenizer files
+tokenizer.save_pretrained(str(OUTPUT_DIR))
+# Update config with label mapping
+config_data = config.to_dict()
+config_data["id2label"] = {"0": "Positif", "1": "Netral", "2": "Negatif"}
+config_data["label2id"] = {"Positif": 0, "Netral": 1, "Negatif": 2}
+with open(str(OUTPUT_DIR / "config.json"), "w") as f:
+    json.dump(config_data, f, indent=2)
+print(f"\nDone! Model saved to '{OUTPUT_DIR}/'")
+print("\nFiles created:")
+for root, dirs, files in os.walk(str(OUTPUT_DIR)):
+    for f in sorted(files):
+        path = os.path.join(root, f)
+        size = os.path.getsize(path)
+        print(f"  {os.path.relpath(path, str(OUTPUT_DIR))} ({size/1024/1024:.1f} MB)" if size > 1024*1024 else f"  {os.path.relpath(path, str(OUTPUT_DIR))} ({size/1024:.1f} KB)")
+print("\nYou can now run the website with just: npx serve . -p 3000")

css/crawling.css ADDED Viewed

	@@ -0,0 +1,133 @@

+.crawling-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding-bottom: 60px;
+}
+.scraper-card {
+  background: var(--bg-card);
+  border: none;
+  border-radius: var(--r3);
+  padding: 48px 60px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 32px;
+  transition: all var(--t-fast);
+}
+.scraper-card.featured {
+  border: none;
+  background: linear-gradient(165deg, var(--bg-card), var(--bg-card2));
+  box-shadow: var(--shadow-md), 0 20px 40px rgba(0,0,0,0.03);
+}
+.scraper-header {
+  margin-bottom: 24px;
+}
+.scraper-name {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--tx1);
+  letter-spacing: -0.8px;
+  margin: 0;
+}
+.scraper-domain {
+  font-size: 13px;
+  color: var(--acc);
+  font-weight: 700;
+  margin-top: 4px;
+}
+.scraper-desc {
+  font-size: 14.5px;
+  color: var(--tx2);
+  line-height: 1.8;
+  margin-bottom: 32px;
+}
+.scraper-features {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-bottom: 40px;
+}
+.feat-item {
+  padding: 16px 20px;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  transition: all var(--t-fast);
+}
+.feat-item:hover {
+  border-color: var(--acc);
+  background: var(--bg-card);
+  transform: translateY(-2px);
+}
+.feat-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--tx1);
+  letter-spacing: -0.2px;
+}
+.feat-desc {
+  font-size: 12px;
+  color: var(--tx3);
+  line-height: 1.6;
+}
+.scraper-actions {
+  display: flex;
+  justify-content: center;
+}
+.scraper-main-btn {
+  height: 44px;
+  padding: 0 36px;
+  font-size: 13.5px;
+  font-weight: 700;
+  border-radius: 10px;
+  transition: all var(--t-fast);
+}
+/* Info Banner */
+.info-banner {
+  padding: 24px 32px;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: var(--r2);
+}
+.info-content h4 {
+  margin: 0 0 8px 0;
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--tx1);
+  letter-spacing: -0.2px;
+}
+.info-content p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--tx3);
+  line-height: 1.7;
+}
+@media (max-width: 768px) {
+  .scraper-features {
+    grid-template-columns: 1fr;
+  }
+  .scraper-card {
+    padding: 32px 24px;
+  }
+}

css/history.css ADDED Viewed

	@@ -0,0 +1,230 @@

+/* ═══════════════════════════════════════════════════
+   SentiMeter — history.css
+   Riwayat Analisis Page Styles
+   ═══════════════════════════════════════════════════ */
+/* ── History Header Badge ── */
+.hist-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--acc-d);
+  color: var(--acc);
+  font-size: 13px;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: 100px;
+  margin-left: 8px;
+  vertical-align: middle;
+  border: 1px solid var(--acc-d2);
+}
+/* ── History Header & Empty State ── */
+.history-empty {
+  text-align: center;
+  padding: 100px 32px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center; /* Center vertically if needed */
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+/* Subtle glow effect for empty state */
+.history-empty::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: radial-gradient(circle at center, var(--acc-d) 0%, transparent 70%);
+  opacity: 0.2;
+  pointer-events: none;
+}
+.history-empty h3 {
+  font-size: 19px;
+  font-weight: 800;
+  margin-bottom: 12px;
+  color: var(--tx1);
+  letter-spacing: -0.4px;
+  position: relative;
+}
+.history-empty p {
+  color: var(--tx2);
+  font-size: 13.5px;
+  margin-bottom: 32px;
+  max-width: 380px;
+  line-height: 1.6;
+  position: relative;
+}
+.empty-cta {
+  min-width: 200px;
+  position: relative;
+  font-size: 13.5px;
+}
+/* ── Premium History Card ── */
+.history-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* More compact gap */
+}
+.hist-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r2); /* Neater radius */
+  padding: 16px 20px; /* More compact padding */
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  position: relative;
+  box-shadow: var(--shadow-sm);
+}
+.hist-card:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--acc-d2);
+}
+.hist-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+}
+.hist-filename {
+  font-size: 14.5px; /* Reduced font size */
+  font-weight: 700;
+  color: var(--tx1);
+  font-size: 13.5px; /* Neater size */
+  font-weight: 700;
+  color: var(--tx1);
+  margin-bottom: 2px;
+  line-height: 1.2;
+}
+.hist-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 11.5px; /* Smaller meta */
+  color: var(--tx3);
+}
+.hist-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+/* ── Visual Sentiment Bar ── */
+.hist-visual {
+  margin-top: 0px;
+}
+.hist-bar-outer {
+  height: 6px; /* Slightly thinner */
+  background: var(--bg-card2);
+  border-radius: 100px;
+  display: flex;
+  overflow: hidden;
+  margin-bottom: 10px;
+  border: 1px solid var(--border-s);
+}
+.hist-bar-segment {
+  height: 100%;
+  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hist-bar-segment.pos { background: var(--pos); }
+.hist-bar-segment.neu { background: var(--neu); }
+.hist-bar-segment.neg { background: var(--neg); }
+/* ── Stats Row ── */
+.hist-stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  padding: 12px 16px; /* More compact stats area */
+  background: var(--bg-card2);
+  border-radius: var(--r2);
+  border: 1px solid var(--border-s);
+  margin-top: 2px;
+}
+.hist-stat-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}
+.hist-stat-label {
+  font-size: 10.5px; /* Tiny, elegant labels */
+  color: var(--tx3);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.hist-stat-val {
+  color: var(--tx1);
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.hist-stat-unit {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--tx3);
+}
+.hist-stat-val.pos { color: var(--pos); }
+.hist-stat-val.neg { color: var(--neg); }
+.hist-stat-val.neu { color: var(--neu); }
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .history-header {
+    padding: 24px 16px;
+  }
+  .hist-card {
+    padding: 16px;
+  }
+  .hist-card-top {
+    flex-direction: column;
+    gap: 12px;
+  }
+  .hist-meta {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .hist-actions {
+    width: 100%;
+    justify-content: stretch;
+    flex-direction: row; /* stack side-by-side but take full width */
+    margin-top: 4px;
+  }
+  .hist-actions .btn {
+    flex: 1;
+    justify-content: center;
+  }
+  .hist-stats {
+    gap: 12px;
+    padding: 12px;
+    justify-content: flex-start;
+  }
+}

css/index.css ADDED Viewed

	@@ -0,0 +1,799 @@

+/* ═══════════════════════════════════════════════
+   intro.css — SentiMeter Intro Page (Simplified)
+   ═══════════════════════════════════════════════ */
+.ih-hero {
+  position: relative;
+  padding: 100px 48px 60px;
+  text-align: center;
+  overflow: hidden;
+}
+.ih-hero-glow {
+  /* Removed to keep the background perfectly clean and prevent any cutoff lines */
+  display: none;
+}
+.ih-hero-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 700px;
+  margin: 0 auto;
+}
+/* Badge */
+.ih-badge {
+  display: inline-block;
+  padding: 5px 16px;
+  background: rgba(108, 143, 255, 0.1);
+  border: 1px solid rgba(108, 143, 255, 0.25);
+  border-radius: 100px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  color: #6c8fff;
+  margin-bottom: 22px;
+}
+/* Title */
+.ih-title {
+  font-size: clamp(34px, 5.5vw, 64px);
+  font-weight: 800;
+  letter-spacing: -2px;
+  line-height: 1.1;
+  color: var(--tx1);
+  margin: 0 0 18px;
+}
+.ih-grad {
+  background: linear-gradient(135deg, #6c8fff 0%, #a78bfa 50%, #60d9f9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gradient-text {
+  background: linear-gradient(135deg, #6c8fff 0%, #a78bfa 50%, #60d9f9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+/* Subtitle */
+.ih-sub {
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--tx2);
+  max-width: 560px;
+  margin: 0 auto 12px;
+}
+/* Disclaimer */
+.ih-disclaimer {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  max-width: 580px;
+  margin: 0 auto 32px;
+  padding: 14px 18px;
+  background: var(--bg-card2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  text-align: left;
+}
+.ih-disclaimer svg {
+  width: 20px;
+  height: 20px;
+  color: var(--ora);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.ih-disclaimer span {
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--tx2);
+}
+.ih-disclaimer strong {
+  color: var(--tx1);
+  font-weight: 700;
+}
+/* Hero Buttons */
+.ih-hero-btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 52px;
+}
+/* Stats bar */
+.ih-stats {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 20px;
+  padding: 24px 40px;
+  box-shadow: var(--shadow-sm);
+  gap: 0;
+  flex-wrap: nowrap;
+}
+.ih-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 40px;
+  gap: 6px;
+}
+.ih-stat b {
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--tx1);
+  letter-spacing: -1px;
+  line-height: 1;
+}
+.ih-stat span {
+  font-size: 11px;
+  color: var(--tx3);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+.ih-stat-sep {
+  width: 1px;
+  height: 36px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+/* ── REVEAL ANIMATION ─────────────────────────── */
+.reveal-up {
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--d, 0ms);
+}
+.reveal-up.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+/* ── SECTIONS ─────────────────────────────────── */
+.ih-section {
+  padding: 72px 48px;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+.ih-sec-head {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.ih-sec-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #6c8fff;
+  margin: 0 0 8px;
+}
+.ih-sec-head h2 {
+  font-size: clamp(24px, 3.5vw, 36px);
+  font-weight: 800;
+  letter-spacing: -1px;
+  color: var(--tx1);
+  margin: 0 0 10px;
+}
+.ih-sec-sub {
+  font-size: 15px;
+  color: var(--tx2);
+  margin: 0;
+}
+/* ── STEPS ────────────────────────────────────── */
+.ih-steps {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: start;
+  gap: 0;
+}
+.ih-step {
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 20px;
+  padding: 28px 24px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.ih-step:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+}
+.ih-step-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  margin-bottom: 14px;
+}
+.ih-step-num.blue   { background: rgba(108,143,255,0.12); color: #6c8fff; }
+.ih-step-num.green  { background: rgba(52,211,153,0.12);  color: #34d399; }
+.ih-step-num.purple { background: rgba(167,139,250,0.12); color: #a78bfa; }
+.ih-step h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--tx1);
+  margin: 0 0 8px;
+}
+.ih-step p {
+  font-size: 13px;
+  color: var(--tx2);
+  line-height: 1.6;
+  margin: 0 0 16px;
+}
+.ih-step-link {
+  font-size: 13px;
+  font-weight: 600;
+  color: #6c8fff;
+  text-decoration: none;
+}
+.ih-step-link:hover { text-decoration: underline; }
+.ih-step-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  font-size: 28px;
+  color: var(--tx3);
+  opacity: 0.35;
+  margin-top: 60px;
+}
+/* ── XSCRAPER ─────────────────────────────────── */
+.ih-xs-section {
+  padding-top: 0;
+}
+.ih-xs-card {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 48px;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 24px;
+  padding: 44px 44px;
+  position: relative;
+  overflow: hidden;
+}
+.ih-xs-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(108,143,255,0.05) 0%, transparent 60%);
+  pointer-events: none;
+}
+.ih-xs-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: #fbbf24;
+  background: rgba(251,191,36,0.1);
+  border: 1px solid rgba(251,191,36,0.2);
+  border-radius: 100px;
+  padding: 4px 14px;
+  margin-bottom: 20px;
+}
+.ih-xs-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+/* Logo removed */
+.ih-xs-name {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -1px;
+  color: var(--tx1);
+  margin: 0 0 2px;
+}
+.ih-xs-url {
+  font-size: 13px;
+  color: #6c8fff;
+  font-weight: 500;
+  margin: 0;
+}
+.ih-xs-desc {
+  font-size: 14px;
+  color: var(--tx2);
+  line-height: 1.7;
+  margin: 0 0 20px;
+}
+.ih-xs-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ih-xs-list li {
+  font-size: 13px;
+  color: var(--tx2);
+  padding-left: 18px;
+  position: relative;
+}
+.ih-xs-list li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: #34d399;
+  font-weight: 700;
+  font-size: 12px;
+}
+.ih-xs-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ih-xs-url-chip {
+  font-size: 12px;
+  color: var(--tx3);
+  font-family: monospace;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 8px 14px;
+  border-radius: 8px;
+}
+/* CSV Preview */
+.ih-xs-right {
+  display: flex;
+  align-items: center;
+}
+.ih-csv-preview {
+  width: 100%;
+  background: #0d1117;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,0.07);
+  overflow: hidden;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: 11px;
+}
+.ih-csv-topbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+.ih-csv-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.15);
+}
+.ih-csv-dot:nth-child(1) { background: #ff5f57; }
+.ih-csv-dot:nth-child(2) { background: #febc2e; }
+.ih-csv-dot:nth-child(3) { background: #28c840; }
+.ih-csv-fname {
+  font-size: 11px;
+  color: rgba(255,255,255,0.35);
+  font-family: 'Inter', sans-serif;
+}
+.ih-csv-body {
+  padding: 14px;
+  min-height: 200px;
+}
+.csv-row {
+  display: grid;
+  grid-template-columns: 18px 1.6fr 1fr 0.9fr 0.6fr;
+  gap: 6px;
+  margin-bottom: 7px;
+  line-height: 1.5;
+}
+.csv-lnum  { color: rgba(255,255,255,0.2); }
+.csv-h     { color: #ff9580; font-weight: 600; }
+.csv-text  { color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.csv-user  { color: #79c0ff; }
+.csv-date  { color: #7ee787; }
+.csv-num   { color: #e3b341; }
+.csv-cursor { display: inline-block; width: 7px; height: 13px; background: #6c8fff; border-radius: 1px; animation: blink 1s step-end infinite; vertical-align: middle; }
+@keyframes blink {
+  0%,50% { opacity: 1; }
+  51%,100% { opacity: 0; }
+}
+/* ── FEATURES GRID ────────────────────────────── */
+.ih-feat-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 18px;
+}
+.ih-feat {
+  flex: 1 1 300px;
+  max-width: 360px;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 20px;
+  padding: 26px 22px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+.ih-feat:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
+}
+/* removed colored top borders */
+.ih-feat h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--tx1);
+  margin: 0 0 8px;
+}
+.ih-feat p {
+  font-size: 13px;
+  color: var(--tx2);
+  line-height: 1.6;
+  margin: 0 0 20px;
+  min-height: 64px; /* Normalizes height for 3 lines of text */
+}
+.ih-feat ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.ih-feat ul li {
+  font-size: 12px;
+  color: var(--tx3);
+  padding-left: 14px;
+  position: relative;
+}
+.ih-feat ul li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  opacity: 0.5;
+}
+.ih-feat-link {
+  font-size: 13px;
+  font-weight: 600;
+  color: #6c8fff;
+  text-decoration: none;
+  margin-top: auto;
+  display: inline-block;
+  padding-top: 10px;
+}
+.ih-feat-link:hover { text-decoration: underline; }
+/* ── PIPELINE ─────────────────────────────────── */
+.ih-pipeline {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+.ih-pipe-io {
+  display: inline-block;
+  padding: 14px 24px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-family: monospace;
+  color: var(--tx1);
+  max-width: 600px;
+  text-align: left;
+}
+.ih-pipe-raw {
+  background: rgba(248,113,113,0.07);
+  border: 1px solid rgba(248,113,113,0.18);
+}
+.ih-pipe-clean {
+  background: rgba(52,211,153,0.07);
+  border: 1px solid rgba(52,211,153,0.18);
+}
+.ih-pipe-arrow {
+  font-size: 22px;
+  color: var(--tx3);
+  opacity: 0.4;
+  margin: 10px 0;
+}
+.ih-pipe-steps {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin: 12px 0;
+  text-align: left;
+}
+.ih-pipe-step {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--bg-card2);
+  border: none;
+  border-radius: 12px;
+  padding: 14px 14px 14px 48px;
+  position: relative;
+  transition: transform 0.2s;
+}
+.ih-pipe-step:hover { transform: translateY(-2px); }
+.ih-pipe-n {
+  position: absolute;
+  left: 12px;
+  top: 14px;
+  width: 24px;
+  height: 24px;
+  background: rgba(108,143,255,0.12);
+  color: #6c8fff;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 800;
+}
+.ih-pipe-step b {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--tx1);
+}
+.ih-pipe-step s {
+  font-size: 11px;
+  color: var(--tx3);
+  text-decoration: none;
+}
+/* ── CTA ──────────────────────────────────────── */
+.ih-cta-section {
+  padding: 0 48px 80px;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+.ih-cta-box {
+  padding: 60px 20px;
+  text-align: center;
+}
+.ih-cta-box h2 {
+  font-size: clamp(22px, 3.2vw, 34px);
+  font-weight: 800;
+  letter-spacing: -1px;
+  color: var(--tx1);
+  margin: 0 0 12px;
+  position: relative;
+}
+.ih-cta-box p {
+  font-size: 15px;
+  color: var(--tx2);
+  margin: 0 0 30px;
+  position: relative;
+}
+.ih-cta-box-btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  position: relative;
+}
+/* ── RESPONSIVE ───────────────────────────────── */
+@media (max-width: 900px) {
+  .ih-hero {
+    padding: 60px 16px 40px;
+  }
+  .ih-title {
+    font-size: clamp(26px, 7vw, 42px);
+    letter-spacing: -1.2px;
+    margin-bottom: 14px;
+    line-height: 1.15;
+  }
+  .ih-sub {
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 12px;
+    padding: 0 4px;
+  }
+  .ih-disclaimer {
+    padding: 12px;
+    margin-bottom: 24px;
+  }
+  .ih-disclaimer span {
+    font-size: 11.5px;
+  }
+  .ih-stats {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+    width: 100%;
+    max-width: 320px;
+    margin: 0 auto 40px;
+  }
+  .ih-stat {
+    padding: 10px 12px;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+  }
+  .ih-stat b {
+    font-size: 20px;
+  }
+  .ih-stat span {
+    text-align: right;
+  }
+  .ih-stat-sep {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: var(--border-s);
+  }
+  .ih-section,
+  .ih-cta-section {
+    padding: 48px 16px;
+  }
+  .ih-steps {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .ih-step {
+    padding: 20px;
+  }
+  .ih-step-chevron {
+    display: none;
+  }
+  .ih-xs-card {
+    grid-template-columns: 1fr;
+    padding: 24px 20px;
+    gap: 24px;
+  }
+  .ih-xs-right {
+    display: none;
+  }
+  .ih-xs-name {
+    font-size: 22px;
+  }
+  .ih-feat-grid {
+    gap: 16px;
+  }
+  .ih-feat {
+    padding: 24px;
+    flex: 1 1 100%;
+  }
+  .ih-pipe-steps {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+  .ih-pipe-io {
+    font-size: 12px;
+    padding: 12px 16px;
+  }
+  .ih-cta-box {
+    padding: 32px 16px;
+  }
+}
+@media (max-width: 480px) {
+  .ih-hero-inner {
+    padding-top: 10px;
+  }
+  .ih-badge {
+    font-size: 11px;
+    padding: 4px 12px;
+    margin-bottom: 16px;
+  }
+  .ih-hero-btns {
+    flex-direction: column;
+    width: 100%;
+    gap: 10px;
+  }
+  .ih-hero-btns .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}

css/style.css ADDED Viewed

	@@ -0,0 +1,3759 @@

+/* ══════════════════════════════════════════════════
+   SentiMeter — style.css
+   Professional Dual-Theme Design System
+   ══════════════════════════════════════════════════ */
+/* ── Google Font ── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+/* ── Reset ── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+  font-size: 14px;
+}
+/* ══════════════════════════════════════════════════
+   THEME TOKENS — DARK (default)
+   ══════════════════════════════════════════════════ */
+:root {
+  /* Surfaces */
+  --bg: #09090b;
+  --bg-raised: #0f1015;
+  --bg-card: #14151b;
+  --bg-card2: #1a1c25;
+  --bg-input: #1a1c25;
+  /* Borders */
+  --border: rgba(255, 255, 255, 0.08);
+  --border-s: rgba(255, 255, 255, 0.04);
+  --border-focus: rgba(108, 143, 255, 0.5);
+  /* Text */
+  --tx1: #f1f3f9;
+  --tx2: #92a0b8;
+  --tx3: #4a5568;
+  --tx-inv: #09090b;
+  /* Accent */
+  --acc: #6c8fff;
+  --acc-h: #567af5;
+  --acc-d: rgba(108, 143, 255, 0.1);
+  --acc-d2: rgba(108, 143, 255, 0.18);
+  /* Sentiment */
+  --pos: #34d399;
+  --pos-d: rgba(52, 211, 153, 0.1);
+  --neg: #f87171;
+  --neg-d: rgba(248, 113, 113, 0.1);
+  --neu: #fbbf24;
+  --neu-d: rgba(251, 191, 36, 0.1);
+  /* Extra palette */
+  --pur: #a78bfa;
+  --pur-d: rgba(167, 139, 250, 0.1);
+  --cya: #38bdf8;
+  --cya-d: rgba(56, 189, 248, 0.1);
+  --pin: #f472b6;
+  --pin-d: rgba(244, 114, 182, 0.1);
+  --ora: #fb923c;
+  --ora-d: rgba(251, 146, 60, 0.1);
+  /* Sidebar */
+  --sidebar-w: 232px;
+  --sidebar-bg: #0c0d13;
+  --sidebar-border: rgba(255, 255, 255, 0.06);
+  --nav-active-bg: rgba(108, 143, 255, 0.12);
+  --nav-active-tx: #6c8fff;
+  --nav-hover-bg: rgba(255, 255, 255, 0.04);
+  /* Topbar */
+  --topbar-bg: rgba(9, 9, 11, 0.82);
+  /* Shadow */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.035);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
+  --shadow-glow: 0 0 0 3px rgba(108, 143, 255, 0.15);
+  /* Radius */
+  --r1: 6px;
+  --r2: 10px;
+  --r3: 14px;
+  --r4: 20px;
+  /* Font */
+  --font: 'Inter', system-ui, -apple-system, sans-serif;
+  /* Transitions */
+  --t-fast: 120ms ease;
+  --t-normal: 200ms ease;
+  --t-slow: 350ms ease;
+  /* Scrollbar */
+  --sb-track: transparent;
+  --sb-thumb: rgba(255, 255, 255, 0.09);
+  --sb-thumb-h: rgba(255, 255, 255, 0.18);
+}
+/* ══════════════════════════════════════════════════
+   THEME TOKENS — LIGHT
+   ══════════════════════════════════════════════════ */
+[data-theme="light"] {
+  --bg: #f8f9fc;
+  --bg-raised: #ffffff;
+  --bg-card: #ffffff;
+  --bg-card2: #f1f4fa;
+  --bg-input: #f1f4fa;
+  --border: rgba(0, 0, 0, 0.08);
+  --border-s: rgba(0, 0, 0, 0.05);
+  --border-focus: rgba(79, 116, 255, 0.5);
+  --tx1: #0f1117;
+  --tx2: #4a5568;
+  --tx3: #9aa3b2;
+  --tx-inv: #ffffff;
+  --acc: #4f74ff;
+  --acc-h: #3b5df5;
+  --acc-d: rgba(79, 116, 255, 0.08);
+  --acc-d2: rgba(79, 116, 255, 0.15);
+  --pos: #059669;
+  --pos-d: rgba(5, 150, 105, 0.08);
+  --neg: #dc2626;
+  --neg-d: rgba(220, 38, 38, 0.08);
+  --neu: #d97706;
+  --neu-d: rgba(217, 119, 6, 0.08);
+  --pur: #7c3aed;
+  --pur-d: rgba(124, 58, 237, 0.08);
+  --cya: #0284c7;
+  --cya-d: rgba(2, 132, 199, 0.08);
+  --pin: #db2777;
+  --pin-d: rgba(219, 39, 119, 0.08);
+  --ora: #ea580c;
+  --ora-d: rgba(234, 88, 12, 0.08);
+  --sidebar-w: 232px;
+  --sidebar-bg: #ffffff;
+  --sidebar-border: rgba(0, 0, 0, 0.08);
+  --nav-active-bg: rgba(79, 116, 255, 0.08);
+  --nav-active-tx: #4f74ff;
+  --nav-hover-bg: rgba(0, 0, 0, 0.04);
+  --topbar-bg: rgba(248, 249, 252, 0.88);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --shadow-glow: 0 0 0 3px rgba(79, 116, 255, 0.15);
+  --sb-track: transparent;
+  --sb-thumb: rgba(0, 0, 0, 0.09);
+  --sb-thumb-h: rgba(0, 0, 0, 0.18);
+}
+/* ══════════════════════════════════════════════════
+   BASE
+   ════════════════════════════════════════════���═════ */
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--tx1);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background var(--t-slow), color var(--t-slow);
+  min-height: 100vh;
+}
+::selection {
+  background: var(--acc-d2);
+  color: var(--acc);
+}
+a {
+  color: var(--acc);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--acc-h);
+}
+code {
+  font-size: 11.5px;
+  background: var(--bg-card2);
+  padding: 2px 7px;
+  border-radius: var(--r1);
+  color: var(--acc);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  border: 1px solid var(--border-s);
+}
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: var(--sb-track);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--sb-thumb-h);
+}
+/* ══════════════════════════════════════════════════
+   LAYOUT
+   ══════════════════════════════════════════════════ */
+.layout {
+  display: flex;
+  min-height: 100vh;
+}
+/* ── SIDEBAR ── */
+#sidebar {
+  width: var(--sidebar-w);
+  height: 100%;
+  height: 100dvh;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  z-index: 300;
+  transition: background var(--t-slow), border-color var(--t-slow), transform var(--t-slow);
+}
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 16px;
+  gap: 12px;
+  border-bottom: 1px solid var(--sidebar-border);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.brand-mark {
+  width: 30px;
+  height: 30px;
+  background-color: #6c8fff;
+  -webkit-mask: url('../img/logo.svg') no-repeat center;
+  mask: url('../img/logo.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  flex-shrink: 0;
+  transition: background-color var(--t-fast);
+}
+.nav-item.active .brand-mark {
+  background-color: var(--acc);
+}
+.brand-text-wrap {
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  transition: opacity var(--t-fast);
+}
+.brand-name {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.4px;
+  color: var(--tx1);
+}
+.brand-sub {
+  font-size: 10px;
+  color: var(--tx3);
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-top: 1px;
+  line-height: 1;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  padding-top: 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.nav-section-label {
+  font-size: 9.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: var(--tx3);
+  padding: 12px 12px 4px;
+  white-space: nowrap;
+  transition: opacity var(--t-fast);
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: var(--r2);
+  color: var(--tx2);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background var(--t-fast), color var(--t-fast);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.nav-icon {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+  opacity: 0.7;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 700;
+}
+.nav-item.active .nav-icon {
+  opacity: 1;
+  color: var(--acc);
+  background: var(--bg-card);
+  border-color: var(--border-s);
+}
+.nav-item:hover:not(.locked) {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+}
+.nav-item.active {
+  background: var(--nav-active-bg);
+  color: var(--nav-active-tx);
+  font-weight: 600;
+}
+.nav-item.locked {
+  color: var(--tx3);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.nav-lock {
+  font-size: 11px;
+  margin-left: auto;
+  opacity: 0.6;
+}
+/* ── SIDEBAR TOGGLE BTN ── */
+.sidebar-toggle-btn {
+  transition: transform var(--t-normal) !important;
+}
+body.sidebar-collapsed .sidebar-toggle-btn {
+  transform: rotate(0deg);
+}
+/* ── SIDEBAR OVERLAY ── */
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 250;
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--t-normal);
+}
+body.sidebar-mobile-open .sidebar-overlay {
+  opacity: 1;
+  visibility: visible;
+}
+/* ── SIDEBAR COLLAPSED STATE ── */
+body.sidebar-collapsed #sidebar {
+  width: 72px;
+  padding: 0 8px;
+}
+body.sidebar-collapsed .main {
+  margin-left: 72px;
+}
+body.sidebar-collapsed .brand-text-wrap,
+body.sidebar-collapsed .nav-section-label,
+body.sidebar-collapsed .nav-label,
+body.sidebar-collapsed .nav-lock,
+body.sidebar-collapsed .theme-text,
+body.sidebar-collapsed .theme-toggle .toggle-track,
+body.sidebar-collapsed .data-badge .badge-text {
+  opacity: 0;
+  pointer-events: none;
+  display: none;
+}
+body.sidebar-collapsed .sidebar-brand {
+  justify-content: center;
+  padding: 0;
+}
+body.sidebar-collapsed .nav-item {
+  padding: 10px;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 4px;
+  border-radius: 10px;
+}
+body.sidebar-collapsed .nav-icon {
+  margin: 0;
+  font-size: 18px;
+  opacity: 0.8;
+}
+body.sidebar-collapsed .nav-item.active .nav-icon {
+  background: transparent;
+  border: none;
+  opacity: 1;
+}
+body.sidebar-collapsed .theme-toggle {
+  justify-content: center;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  border-radius: 10px;
+  border: 1px solid var(--border-s);
+}
+body.sidebar-collapsed .theme-toggle .nav-icon {
+  opacity: 0.8;
+  font-size: 18px;
+}
+body.sidebar-collapsed .data-badge {
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin: 12px auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.badge-icon {
+  display: none;
+}
+body.sidebar-collapsed .badge-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+}
+.sidebar-footer {
+  padding: 12px 0 16px;
+  border-top: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+/* Theme toggle button */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: var(--r2);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--tx2);
+  background: transparent;
+  border: 1px solid var(--border);
+  font-family: var(--font);
+  width: 100%;
+  transition: all var(--t-fast);
+}
+.theme-toggle:hover {
+  color: var(--tx1);
+  border-color: var(--border-focus);
+  background: var(--nav-hover-bg);
+}
+.toggle-track {
+  width: 32px;
+  height: 18px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  border: 1px solid var(--border);
+  position: relative;
+  transition: background var(--t-normal);
+  flex-shrink: 0;
+}
+.toggle-track.on {
+  background: var(--acc);
+  border-color: var(--acc);
+}
+.toggle-thumb {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  top: 2px;
+  left: 2px;
+  transition: transform var(--t-normal);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+.toggle-track.on .toggle-thumb {
+  transform: translateX(14px);
+}
+.data-badge {
+  font-size: 10px;
+  padding: 5px 10px;
+  border-radius: 100px;
+  background: var(--pos-d);
+  color: var(--pos);
+  text-align: center;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+.data-badge.no-data {
+  background: var(--bg-card2);
+  color: var(--tx3);
+}
+/* ── MAIN ── */
+.main {
+  margin-left: var(--sidebar-w);
+  flex: 1;
+  min-width: 0;
+  transition: margin-left var(--t-slow) ease;
+}
+/* ── TOPBAR ── */
+.topbar {
+  height: 56px;
+  border-bottom: 1px solid var(--border-s);
+  display: flex;
+  align-items: center;
+  padding: 0 28px;
+  gap: 14px;
+  position: sticky;
+  top: 0;
+  background: var(--topbar-bg);
+  backdrop-filter: blur(24px) saturate(1.5);
+  -webkit-backdrop-filter: blur(24px) saturate(1.5);
+  z-index: 100;
+  transition: background var(--t-slow), border-color var(--t-slow);
+}
+.topbar-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tx1);
+  flex: 1;
+  letter-spacing: -0.2px;
+}
+.topbar-sub {
+  font-size: 12px;
+  color: var(--tx3);
+  font-weight: 400;
+}
+/* ── PAGE BODY ── */
+.page-body {
+  padding: 28px 32px 48px;
+}
+/* ══════════════════════════════════════════════════
+   BUTTONS
+   ══════════════════════════════════════════════════ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 18px;
+  border-radius: var(--r2);
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all var(--t-fast);
+  white-space: nowrap;
+  line-height: 1;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+.btn::selection,
+.btn *::selection {
+  background: transparent !important;
+  color: inherit !important;
+}
+.btn:active {
+  transform: scale(0.98);
+}
+.btn-primary {
+  background: var(--acc);
+  color: #fff !important;
+  box-shadow: 0 1px 3px rgba(108, 143, 255, 0.4);
+}
+.btn-primary:active,
+.btn-primary:focus {
+  color: #fff !important;
+}
+.btn-primary:hover {
+  background: var(--acc-h);
+  box-shadow: 0 3px 12px rgba(108, 143, 255, 0.35);
+  transform: translateY(-1px);
+}
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--tx2);
+}
+.btn-outline:hover {
+  border-color: var(--acc);
+  color: var(--acc);
+  background: var(--acc-d);
+}
+.btn-ghost {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--tx3);
+}
+.btn-ghost:hover {
+  color: var(--tx1);
+  background: var(--nav-hover-bg);
+}
+.btn-sm {
+  padding: 6px 13px;
+  font-size: 12px;
+  border-radius: var(--r1);
+}
+.btn-xs {
+  padding: 4px 10px;
+  font-size: 11px;
+  border-radius: var(--r1);
+}
+/* ══════════════════════════════════════════════════
+   CARD
+   ══════════════════════════════════════════════════ */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  box-shadow: var(--shadow-md);
+  transition: background var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow);
+  overflow: hidden; /* Prevent content leakage */
+}
+.card-body {
+  padding: 20px 22px;
+}
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.card-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--tx1);
+  letter-spacing: -0.1px;
+}
+.card-badge {
+  font-size: 10px;
+  padding: 3px 9px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  color: var(--tx3);
+  font-weight: 500;
+  border: 1px solid var(--border-s);
+  white-space: nowrap;
+}
+/* ══════════════════════════════════════════════════
+   KPI GRID
+   ══════════════════════════════════════════════════ */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.kpi {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  padding: 18px 18px 16px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-slow);
+}
+.kpi::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--r3);
+  opacity: 0;
+  transition: opacity var(--t-fast);
+  box-shadow: var(--shadow-glow);
+  pointer-events: none;
+}
+.kpi:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.kpi:hover::after {
+  opacity: 1;
+}
+/* Accent lines dihilangkan atas permintaan pengguna */
+.kpi-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.65px;
+  color: var(--tx3);
+  margin-bottom: 10px;
+}
+.kpi-value {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -1px;
+  line-height: 1;
+  color: var(--tx1);
+}
+.kpi-sub {
+  font-size: 11px;
+  color: var(--tx3);
+  margin-top: 5px;
+}
+.kpi-delta {
+  font-size: 11.5px;
+  font-weight: 600;
+  margin-top: 5px;
+}
+.kpi-delta.up {
+  color: var(--pos);
+}
+.kpi-delta.down {
+  color: var(--neg);
+}
+.kpi-delta.mid {
+  color: var(--neu);
+}
+/* ══════════════════════════════════════════════════
+   SECTION HEADER
+   ══════════════════════════════════════════════════ */
+.sec-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.sec-title {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  color: var(--tx1);
+}
+.sec-sub {
+  font-size: 12px;
+  color: var(--tx3);
+  margin-top: 3px;
+  font-weight: 400;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+/* ── Divider ── */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border-s);
+  margin: 22px 0;
+}
+/* ══════════════════════════════════════════════════
+   BADGES
+   ══════════════════════════════════════════════════ */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  letter-spacing: 0.2px;
+}
+.badge-pos {
+  background: var(--pos-d);
+  color: var(--pos);
+}
+.badge-neg {
+  background: var(--neg-d);
+  color: var(--neg);
+}
+.badge-neu {
+  background: var(--neu-d);
+  color: var(--neu);
+}
+.badge-acc {
+  background: var(--acc-d);
+  color: var(--acc);
+}
+/* ══════════════════════════════════════════════════
+   CHART GRID
+   ══════════════════════════════════════════════════ */
+.chart-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.chart-grid > * {
+  min-width: 0;
+}
+.chart-grid-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.chart-full {
+  grid-column: 1 / -1;
+}
+.chart-wrap {
+  position: relative;
+  height: 260px;
+}
+.chart-wrap-sm {
+  position: relative;
+  height: 200px;
+}
+.chart-wrap-lg {
+  position: relative;
+  height: 320px;
+}
+.chart-wrap-xl {
+  position: relative;
+  height: 380px;
+}
+/* ── Legend ── */
+.legend-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 12px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  color: var(--tx2);
+}
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+/* ══════════════════════════════════════════════════
+   UPLOAD PAGE
+   ══════════════════════════════════════════════════ */
+.upload-page-body {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 56px);
+  /* subtract topbar */
+  padding-top: 20px !important;
+  padding-bottom: 40px !important;
+}
+.upload-hero {
+  width: 100%;
+  max-width: 520px;
+  margin: 0 auto;
+  text-align: center;
+}
+.upload-headline {
+  margin-bottom: 32px;
+}
+.upload-headline h1 {
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: -0.8px;
+  color: var(--tx1);
+  margin: 0 0 10px;
+  line-height: 1.2;
+}
+.upload-headline p {
+  font-size: 14px;
+  color: var(--tx2);
+  line-height: 1.6;
+  margin: 0;
+}
+/* Upload zone */
+.upload-zone {
+  border: 1.5px dashed var(--border-focus);
+  border-radius: 20px;
+  background: var(--bg-card);
+  transition: all var(--t-normal);
+  cursor: pointer;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
+}
+.upload-zone:hover,
+.upload-zone.drag {
+  border-color: var(--acc);
+  background: var(--nav-hover-bg);
+  box-shadow: 0 8px 32px rgba(108, 143, 255, 0.06);
+  transform: translateY(-2px);
+}
+.upload-zone input[type=file] {
+  display: none;
+}
+.upload-inner {
+  padding: 56px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+.upload-circle {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: var(--acc-d);
+  color: var(--acc);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+.upload-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--tx1);
+  margin: 0 0 4px 0;
+}
+.upload-sub {
+  font-size: 13.5px;
+  color: var(--tx2);
+  margin: 0 0 20px 0;
+}
+.btn-upload-trigger {
+  margin-bottom: 24px;
+}
+.upload-hint {
+  font-size: 12px;
+  color: var(--tx3);
+  margin: 0;
+}
+/* File preview */
+.file-preview {
+  margin-top: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  box-shadow: var(--shadow-md);
+}
+.file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.file-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tx1);
+}
+.file-meta {
+  font-size: 11px;
+  color: var(--tx3);
+}
+.file-actions {
+  display: flex;
+  gap: 8px;
+}
+/* Progress */
+.progress-wrap {
+  margin-top: 24px;
+}
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--tx2);
+  margin-bottom: 9px;
+}
+.progress-track {
+  height: 5px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  overflow: hidden;
+}
+.progress-bar {
+  height: 100%;
+  border-radius: 100px;
+  background: linear-gradient(90deg, var(--acc), var(--pur));
+  transition: width 0.3s ease;
+}
+.progress-step {
+  font-size: 11px;
+  color: var(--tx3);
+  margin-top: 8px;
+  min-height: 16px;
+  font-style: italic;
+}
+/* ══════════════════════════════════════════════════
+   DASHBOARD
+   ════════════════════════════════════���═════════════ */
+.gauge-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 4px 0 0;
+}
+.tweet-card {
+  background: var(--bg-card2);
+  border-radius: var(--r2);
+  padding: 12px 14px;
+  margin-bottom: 8px;
+  border-left: 3px solid var(--border);
+  transition: border-color var(--t-fast), transform var(--t-fast);
+}
+.tweet-card:hover {
+  transform: translateX(2px);
+}
+.tweet-card.pos {
+  border-left-color: var(--pos);
+}
+.tweet-card.neg {
+  border-left-color: var(--neg);
+}
+.tweet-text {
+  font-size: 12.5px;
+  color: var(--tx2);
+  line-height: 1.5;
+  margin-bottom: 7px;
+}
+.tweet-meta {
+  font-size: 10.5px;
+  color: var(--tx3);
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.leaderboard-row {
+  display: flex;
+  align-items: center;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--border-s);
+  font-size: 12.5px;
+}
+.leaderboard-row:last-child {
+  border-bottom: none;
+}
+.lb-rank {
+  color: var(--tx3);
+  width: 22px;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.lb-name {
+  color: var(--tx1);
+  font-weight: 500;
+  flex: 1;
+  padding: 0 10px;
+}
+.lb-val {
+  color: var(--tx3);
+  font-size: 11.5px;
+  white-space: nowrap;
+}
+.insight-list {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.insight-item {
+  display: flex;
+  gap: 12px;
+  padding: 11px 14px;
+  background: var(--bg-card2);
+  border-radius: var(--r2);
+  border: 1px solid var(--border-s);
+  align-items: flex-start;
+  transition: border-color var(--t-fast);
+}
+.insight-item:hover {
+  border-color: var(--border);
+}
+.insight-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+.insight-text {
+  font-size: 12.5px;
+  color: var(--tx2);
+  line-height: 1.55;
+}
+/* ══════════════════════════════════════════════════
+   TABLE & DATA PAGE OVERHAUL
+   ══════════════════════════════════════════════════ */
+/* ── Custom Number Input Wrapper ── */
+.cni-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.cni-wrap input[type=number] {
+  padding: 8px 32px 8px 12px;
+  border-radius: var(--r2);
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--tx1);
+  font-size: 13px;
+  font-family: var(--font);
+  font-weight: 600;
+  outline: none;
+  transition: all var(--t-fast);
+  height: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.cni-wrap input[type=number]:focus {
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--acc-d);
+  background: var(--bg-card2);
+}
+.cni-wrap input[type=number]::-webkit-inner-spin-button,
+.cni-wrap input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+.cni-arrows {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  opacity: 0.4;
+  transition: opacity var(--t-fast);
+}
+.cni-wrap:hover .cni-arrows,
+.cni-wrap:focus-within .cni-arrows {
+  opacity: 1;
+}
+.cni-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 14px;
+  background: transparent;
+  border: none;
+  color: var(--tx3);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all var(--t-fast);
+  padding: 0;
+}
+.cni-btn:hover {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+}
+.cni-btn:active {
+  background: var(--acc-d);
+  color: var(--acc);
+}
+.cni-btn svg {
+  width: 11px;
+  height: 11px;
+}
+.tl-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 20px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  margin-bottom: 24px;
+  flex-wrap: wrap; /* Already wraps, but needs children to behave correctly */
+  box-shadow: var(--shadow-sm);
+}
+.tl-filter-tabs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.tl-filter-tabs .tl-tab {
+  white-space: nowrap;
+}
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.filter-label {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--tx3);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  white-space: nowrap;
+}
+/* ── Select / Dropdown (shared) ── */
+.tl-filter-bar select,
+.tl-sort-sel,
+.page-size-sel {
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 8px 36px 8px 12px;
+  border-radius: var(--r2);
+  border: 1px solid var(--border);
+  background-color: var(--bg-input);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2392a0b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 14px 14px;
+  color: var(--tx1);
+  font-size: 12.5px;
+  font-weight: 600;
+  height: 40px;
+  min-width: 140px;
+  transition: all var(--t-fast);
+  cursor: pointer;
+}
+.tl-filter-bar select:focus,
+.tl-sort-sel:focus,
+.page-size-sel:focus {
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--acc-d);
+  outline: none;
+  background-color: var(--bg-card2);
+}
+.filter-search-wrap {
+  position: relative;
+  flex: 2;
+  min-width: 280px;
+}
+.filter-search-wrap input {
+  width: 100%;
+  padding-left: 42px !important;
+  border-radius: var(--r2);
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--tx1);
+  font-size: 13.5px;
+  height: 40px;
+  transition: all var(--t-fast);
+}
+.filter-search-wrap input:focus {
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--acc-d);
+  background: var(--bg-card2);
+}
+.tl-search-icon {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 17px;
+  height: 17px;
+  color: var(--tx3);
+  pointer-events: none;
+  opacity: 0.6;
+}
+.mini-inputs {
+  display: flex !important;
+  gap: 12px;
+}
+.mini-inputs .cni-wrap input {
+  width: 170px;
+  height: 40px;
+}
+.btn-mini {
+  padding: 6px 14px;
+  font-size: 11px;
+  height: 36px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+/* Column Visibility */
+.col-visibility-wrap {
+  margin-bottom: 24px;
+  padding: 0 4px;
+}
+.col-toggle-label {
+  font-size: 10.5px;
+  color: var(--tx3);
+  margin-bottom: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+}
+.col-toggle {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.col-pill {
+  padding: 5px 14px;
+  border-radius: 100px;
+  border: 1px solid var(--border);
+  background: var(--bg-card2);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--tx3);
+  cursor: pointer;
+  transition: all var(--t-fast);
+  user-select: none;
+}
+.col-pill:hover {
+  border-color: var(--border-focus);
+  color: var(--tx2);
+}
+.col-pill.on {
+  background: var(--acc-d);
+  border-color: var(--acc-d);
+  color: var(--acc);
+}
+/* Table Card Area */
+.table-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 32px;
+}
+.table-wrap {
+  overflow-x: auto;
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.data-table thead tr {
+  background: var(--bg-card2);
+}
+.data-table th {
+  padding: 14px 16px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--tx3);
+  text-align: left;
+  white-space: nowrap;
+  user-select: none;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: all var(--t-fast);
+}
+.data-table th:hover {
+  color: var(--tx1);
+  background: rgba(108, 143, 255, 0.05);
+}
+.data-table th.active-sort {
+  color: var(--acc);
+  background: var(--acc-d);
+}
+.data-table th.sort-asc::after {
+  content: ' ↑';
+  color: var(--acc);
+}
+.data-table th.sort-desc::after {
+  content: ' ↓';
+  color: var(--acc);
+}
+.data-table td {
+  padding: 12px 16px;
+  font-size: 12.5px;
+  color: var(--tx2);
+  border-bottom: 1px solid var(--border-s);
+  vertical-align: middle;
+}
+.data-table tbody tr:hover {
+  background: rgba(108, 143, 255, 0.02);
+}
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.td-no {
+  color: var(--tx3);
+  font-weight: 600;
+  width: 40px;
+  font-variant-numeric: tabular-nums;
+}
+.td-trunc {
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.td-trunc-sm {
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Conf bar */
+.conf-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.conf-num {
+  font-size: 11.5px;
+  min-width: 40px;
+  font-variant-numeric: tabular-nums;
+}
+.conf-track {
+  width: 56px;
+  height: 4px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  overflow: hidden;
+}
+.conf-fill {
+  height: 100%;
+  border-radius: 100px;
+  transition: width 0.4s ease;
+}
+.conf-pos {
+  background: var(--pos);
+}
+.conf-neg {
+  background: var(--neg);
+}
+.conf-neu {
+  background: var(--neu);
+}
+/* Pagination */
+.pagination,
+.tl-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px; /* Slightly more gap */
+  margin-top: 24px;
+  flex-wrap: wrap;
+}
+.tl-pagination-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 40px;
+  gap: 20px;
+}
+.pg-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 8px;
+  border-radius: 10px; /* More modern rounding */
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--tx2);
+  font-size: 14px;
+  font-family: var(--font);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--t-fast);
+  user-select: none;
+}
+.pg-btn:hover:not(:disabled):not(.dots) {
+  background: var(--bg-card);
+  border-color: var(--border);
+  color: var(--tx1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.pg-btn.active {
+  background: var(--acc);
+  border-color: var(--acc);
+  color: #fff;
+  box-shadow: 0 8px 20px rgba(108, 143, 255, 0.35); /* More premium shadow */
+  transform: translateY(-1px);
+}
+.pg-btn:disabled,
+.pg-btn.dots {
+  opacity: 0.3;
+  cursor: default;
+  background: transparent;
+  border-color: transparent;
+}
+.tl-pagination-info {
+  font-size: 13px;
+  color: var(--tx3);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.tl-page-size-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+.tl-page-size-label {
+  font-size: 12.5px;
+  color: var(--tx3);
+  font-weight: 500;
+}
+.tl-page-size-sel {
+  width: 80px;
+}
+.table-info,
+.tl-info {
+  text-align: center;
+  font-size: 12px;
+  color: var(--tx3);
+  margin-top: 14px;
+}
+/* ══════════════════════════════════════════════════
+   EMPTY STATES
+   ══════════════════════════════════════════════════ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 20px;
+  text-align: center;
+  border-radius: var(--r2);
+  background: var(--bg-card2);
+  border: 1px dashed var(--border);
+  min-height: 120px;
+  margin: 10px 0;
+}
+.empty-state svg {
+  width: 32px;
+  height: 32px;
+  color: var(--tx3);
+  margin-bottom: 12px;
+  opacity: 0.6;
+}
+.empty-state-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tx2);
+  margin-bottom: 4px;
+}
+.empty-state-desc {
+  font-size: 12px;
+  color: var(--tx3);
+}
+/* ══════════════════════════════════════════════════
+   CLEANING LAB
+   ══════════════════════════════════════════════════ */
+.pipeline-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-s);
+}
+.pipeline-step:last-child {
+  border-bottom: none;
+}
+.step-num {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--acc-d);
+  color: var(--acc);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid var(--acc-d2);
+}
+.step-info {
+  flex: 1;
+}
+.step-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--tx1);
+  margin-bottom: 2px;
+}
+.step-desc {
+  font-size: 11.5px;
+  color: var(--tx3);
+}
+.step-toggle {
+  width: 36px;
+  height: 20px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  border: 1px solid var(--border);
+  position: relative;
+  cursor: pointer;
+  transition: background var(--t-normal), border-color var(--t-normal);
+  flex-shrink: 0;
+}
+.step-toggle.on {
+  background: var(--acc);
+  border-color: var(--acc);
+}
+.step-toggle::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: white;
+  top: 2px;
+  left: 2px;
+  transition: transform var(--t-normal);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+.step-toggle.on::after {
+  transform: translateX(16px);
+}
+.demo-area {
+  margin-bottom: 16px;
+}
+.demo-label {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.55px;
+  font-weight: 600;
+  color: var(--tx3);
+  margin-bottom: 8px;
+}
+.demo-textarea {
+  width: 100%;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  color: var(--tx1);
+  font-family: var(--font);
+  font-size: 13px;
+  padding: 12px 14px;
+  outline: none;
+  resize: vertical;
+  min-height: 80px;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-slow);
+}
+.demo-textarea:focus {
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--acc-d);
+}
+.step-pipeline {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.step-line {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 12px;
+  padding: 8px 12px;
+  border-radius: var(--r1);
+  background: var(--bg-card2);
+  border: 1px solid var(--border-s);
+  transition: background var(--t-fast);
+}
+.step-line-num {
+  color: var(--tx3);
+  width: 18px;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+.step-line-name {
+  color: var(--acc);
+  width: 150px;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+.step-line-text {
+  color: var(--tx2);
+  flex: 1;
+  word-break: break-word;
+}
+.step-line.changed {
+  background: var(--acc-d);
+  border-color: var(--acc-d2);
+}
+.step-diff {
+  color: var(--tx3);
+  font-size: 10.5px;
+  margin-left: auto;
+  white-space: nowrap;
+  padding-left: 10px;
+  align-self: flex-start; /* Keep at top if row gets tall */
+}
+.stat-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--tx2);
+}
+.stat-pill strong {
+  color: var(--tx1);
+  font-weight: 700;
+}
+/* ══════════════════════════════════════════════════
+   MISC
+   ══════════════════════════════════════════════════ */
+.empty-state {
+  padding: 64px 20px;
+  text-align: center;
+  color: var(--tx3);
+}
+.empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--tx2);
+}
+.empty-desc {
+  font-size: 13px;
+}
+/* ── Animations ── */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.kpi {
+  animation: fadeUp 0.35s ease both;
+}
+.kpi:nth-child(1) {
+  animation-delay: .04s
+}
+.kpi:nth-child(2) {
+  animation-delay: .07s
+}
+.kpi:nth-child(3) {
+  animation-delay: .10s
+}
+.kpi:nth-child(4) {
+  animation-delay: .13s
+}
+.kpi:nth-child(5) {
+  animation-delay: .16s
+}
+.kpi:nth-child(6) {
+  animation-delay: .19s
+}
+.kpi:nth-child(7) {
+  animation-delay: .22s
+}
+.kpi:nth-child(8) {
+  animation-delay: .25s
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.card {
+  animation: fadeIn 0.3s ease both;
+}
+/* ── Transition for theme switch ── */
+body,
+.card,
+.kpi,
+#sidebar,
+.topbar,
+.filter-bar select,
+.filter-bar input,
+.data-table th,
+.data-table td,
+.pg-btn,
+.badge,
+.btn,
+.nav-item,
+.tweet-card,
+.leaderboard-row,
+.insight-item,
+.step-line,
+.upload-zone,
+.theme-toggle {
+  transition-property: background, color, border-color, box-shadow;
+  transition-duration: var(--t-slow);
+  transition-timing-function: ease;
+}
+/* ══════════════════════════════════════════════════
+   RESPONSIVE
+   ══════════════════════════════════════════════════ */
+@media (max-width: 1400px) {
+  .kpi-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (max-width: 1100px) {
+  .chart-grid-3 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 860px) {
+  #sidebar {
+    transform: translateX(-100%);
+    box-shadow: none;
+    transition: transform var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  body.sidebar-mobile-open #sidebar {
+    transform: translateX(0);
+    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.3);
+  }
+  .main {
+    margin-left: 0;
+  }
+  /* Desktop toggle button hide on mobile */
+  .sidebar-toggle-btn {
+    display: none !important;
+  }
+  .topbar {
+    padding: 0 16px;
+    gap: 8px;
+  }
+  .mobile-menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--tx2);
+    padding: 8px;
+    cursor: pointer;
+    border-radius: var(--r1);
+    margin-right: 4px;
+  }
+  .mobile-menu-btn:hover {
+    background: var(--nav-hover-bg);
+    color: var(--tx1);
+  }
+  .chart-grid,
+  .chart-grid-3 {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+    width: 100%;
+  }
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+  .page-body {
+    padding: 16px 12px 32px;
+  }
+  .card-body {
+    padding: 16px;
+  }
+  .expand-content {
+    grid-template-columns: 1fr;
+  }
+  .filter-bar, .tl-filter-bar {
+    gap: 8px;
+    flex-wrap: wrap; /* allow wrapping on small screens */
+  }
+  /* Specific fix for Tweet List filters overflow */
+  .tl-filter-bar {
+    padding: 12px 14px;
+    gap: 12px;
+  }
+  .tl-filter-tabs {
+    width: 100%; /* Force tabs to own row if needed, or wrap inside */
+    justify-content: flex-start;
+  }
+  .tl-search-wrap {
+    width: 100%;
+    min-width: 100%;
+    flex: none;
+    margin-bottom: 4px;
+  }
+  .tl-sort-wrap {
+    width: 100%;
+    flex: none;
+  }
+  .tl-sort-sel {
+    width: 100%;
+  }
+  .data-page-filters {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  .data-page-filters .filter-group {
+    width: 100%;
+    max-width: none;
+    justify-content: space-between;
+  }
+  .data-page-filters .filter-group select {
+    flex: 1; /* Make select box take remaining space neatly */
+    max-width: 65%;
+  }
+  .data-page-filters .filter-search-wrap,
+  .data-page-filters .mini-inputs {
+    width: 100%;
+    min-width: 100%;
+    max-width: none;
+  }
+  .mini-inputs {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    width: 100%;
+  }
+  .mini-inputs .cni-wrap {
+    width: 100%;
+  }
+  .mini-inputs .cni-wrap input {
+    width: 100% !important; /* Force override for mobile */
+  }
+  /* Reset button full width */
+  #btnReset {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 4px;
+    height: 40px;
+  }
+  .table-card {
+    border-radius: var(--r2);
+    overflow: hidden;
+  }
+  /* Table Horizontal Scrolling Support */
+  .table-wrap, .analytics-table-wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .data-table th, .data-table td,
+  .analytics-table th, .analytics-table td {
+    white-space: nowrap; /* Prevent ugly wrapping inside tables */
+  }
+  .topbar-title {
+    font-size: 13px;
+  }
+  /* ── Cleaning Lab Specific Mobile Overrides ── */
+  .step-line {
+    flex-wrap: wrap; /* allow text and status to wrap */
+    gap: 6px;
+    padding: 10px 12px;
+  }
+  .step-line-name {
+    width: 100%; /* Force step name to take its own line */
+    font-size: 13px;
+  }
+  .step-line-text {
+    width: 100%;
+    margin-left: 0;
+  }
+  .step-diff {
+    margin-left: 0; /* Keep diff next to text or wrapped */
+    padding-left: 0;
+  }
+  .topbar-sub {
+    display: none;
+  }
+  /* ── Upload Page Mobile Refinements ── */
+  .upload-headline {
+    margin-bottom: 24px;
+    text-align: center;
+  }
+  .upload-headline h1 {
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+  .upload-headline p {
+    font-size: 13px;
+    line-height: 1.6;
+    padding: 0 4px;
+  }
+  .upload-inner {
+    padding: 32px 16px;
+  }
+  .upload-title {
+    font-size: 15px;
+  }
+  .upload-sub {
+    font-size: 12.5px;
+    margin-bottom: 16px;
+  }
+  .file-preview {
+    flex-direction: column;
+    padding: 20px;
+    gap: 20px;
+    align-items: stretch;
+    text-align: center;
+  }
+  .file-info {
+    align-items: center;
+    gap: 5px;
+  }
+  .file-name {
+    font-size: 13.5px;
+  }
+  .file-actions {
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+  .file-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  .progress-wrap {
+    margin-top: 32px;
+  }
+  /* ── Dashboard Mobile Refinements ── */
+  .sec-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .sec-head .actions {
+    width: 100%;
+  }
+  .sec-head .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  .tweet-card {
+    padding: 10px 12px;
+  }
+  .tweet-text {
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+  .insight-item {
+    padding: 10px 12px;
+    gap: 10px;
+  }
+  .insight-text {
+    font-size: 12px;
+  }
+  .gauge-wrap {
+    margin-bottom: 0;
+  }
+  .leaderboard-row {
+    font-size: 11.5px;
+    padding: 8px 0;
+  }
+  .lb-name {
+    padding: 0 6px;
+  }
+  /* ── Analytics Mobile Refinements ── */
+  .analytics-table {
+    font-size: 11.5px;
+  }
+  .analytics-table th,
+  .analytics-table td {
+    padding: 8px 10px;
+  }
+  .at-hashtag {
+    padding: 1px 6px;
+    font-size: 10.5px;
+  }
+  .word-tag-cloud {
+    min-height: auto;
+    gap: 4px;
+    padding: 4px 0;
+  }
+  .card-badge {
+    font-size: 9px;
+    padding: 1px 6px;
+  }
+  .chart-wrap-sm {
+    height: 180px;
+  }
+}
+@media (max-width: 480px) {
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+  .kpi {
+    padding: 14px 12px 12px;
+  }
+  .kpi-label {
+    font-size: 9.5px;
+    margin-bottom: 6px;
+  }
+  .kpi-value {
+    font-size: 20px;
+  }
+  .hero-title {
+    font-size: 28px;
+  }
+  .btn {
+    padding: 8px 14px;
+    font-size: 12.5px;
+  }
+  /* Fix for Analytics Table Long Topics */
+  .at-topic-text {
+    max-width: 130px; /* Prevent text from crashing into columns */
+  }
+  .tl-page-size-row {
+    width: 100%;
+    justify-content: center;
+    margin-top: 12px;
+  }
+  .tl-pagination-stack {
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+}
+/* Hide mobile controls on desktop */
+@media (min-width: 861px) {
+  .mobile-menu-btn {
+    display: none !important;
+  }
+}
+/* ══════════════════════════════════════════════════
+   CUSTOM SELECT / DROPDOWN COMPONENT
+   ══════════════════════════════════════════════════ */
+/* Wrapper replaces the native <select> in DOM flow */
+.csd-wrap {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+/* The visible trigger button */
+.csd-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 34px;
+  border-radius: var(--r2);
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--tx1);
+  font-size: 12.5px;
+  font-family: var(--font);
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-slow);
+  outline: none;
+  min-width: 130px;
+}
+.csd-trigger:hover {
+  border-color: var(--border-focus);
+  background: var(--bg-card2);
+}
+.csd-trigger.open {
+  border-color: var(--acc);
+  background: var(--bg-card2);
+  box-shadow: 0 0 0 3px var(--acc-d);
+}
+/* Label text inside trigger */
+.csd-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+/* Chevron SVG inside trigger */
+.csd-chevron {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--tx3);
+  transition: transform 220ms cubic-bezier(.4, 0, .2, 1), color var(--t-fast);
+}
+.csd-trigger.open .csd-chevron {
+  transform: rotate(180deg);
+  color: var(--acc);
+}
+/* ── Floating panel ── */
+.csd-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  z-index: 5000;
+  overflow: hidden;
+  /* Animation */
+  transform-origin: top center;
+  animation: csdDrop 180ms cubic-bezier(.16, 1, .3, 1) both;
+}
+@media (max-width: 768px) {
+  .csd-panel {
+    left: auto;
+    right: 0;
+    transform-origin: top right;
+  }
+}
+[data-theme="light"] .csd-panel {
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+@keyframes csdDrop {
+  from {
+    opacity: 0;
+    transform: scaleY(0.88) translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1) translateY(0);
+  }
+}
+/* Panel header (search box) */
+.csd-search-wrap {
+  padding: 10px 10px 6px;
+  border-bottom: 1px solid var(--border-s);
+}
+.csd-search {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg-card2);
+  border: 1px solid var(--border);
+  border-radius: var(--r1);
+  color: var(--tx1);
+  font-size: 12px;
+  font-family: var(--font);
+  outline: none;
+  transition: border-color var(--t-fast);
+}
+.csd-search:focus {
+  border-color: var(--acc);
+}
+.csd-search::placeholder {
+  color: var(--tx3);
+}
+/* Options list */
+.csd-list {
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 6px;
+}
+/* Custom scrollbar inside panel */
+.csd-list::-webkit-scrollbar {
+  width: 4px;
+}
+.csd-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.csd-list::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 8px;
+}
+/* Single option row */
+.csd-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--r1);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--tx2);
+  cursor: pointer;
+  transition: background var(--t-fast), color var(--t-fast);
+  user-select: none;
+  white-space: nowrap;
+}
+.csd-option:hover {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+}
+.csd-option.selected {
+  background: var(--acc-d);
+  color: var(--acc);
+  font-weight: 600;
+}
+.csd-option.focused {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+}
+/* Check icon on selected */
+.csd-check {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  opacity: 0;
+  color: var(--acc);
+  margin-left: auto;
+}
+.csd-option.selected .csd-check {
+  opacity: 1;
+}
+/* Sentiment dot indicators */
+.csd-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+/* Empty state inside list */
+.csd-empty {
+  padding: 14px 10px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--tx3);
+  font-style: italic;
+}
+/* ── Page-size variant (compact, no search) ── */
+.csd-wrap.csd-compact .csd-trigger {
+  min-width: 80px;
+}
+.csd-wrap.csd-compact .csd-panel {
+  min-width: 100px;
+}
+.csd-wrap.csd-compact .csd-search-wrap {
+  display: none;
+}
+/* ══════════════════════════════════════════════════
+   TOAST NOTIFICATIONS
+   ══════════════════════════════════════════════════ */
+.toast-container {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 9999;
+  pointer-events: none;
+}
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--bg-card);
+  border: none;
+  border-radius: 100px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: auto;
+}
+.toast-success {
+  box-shadow: 0 8px 32px var(--acc-d2);
+}
+.toast-success .toast-icon {
+  color: var(--acc);
+}
+.toast-error {
+  border-color: var(--neg);
+}
+.toast-error .toast-icon {
+  color: var(--neg);
+}
+.toast-icon {
+  display: flex;
+}
+.toast-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.toast-message {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--tx1);
+}
+.toast-persist {
+  align-items: flex-start;
+  padding: 16px 20px;
+  border-radius: 16px;
+  border: none;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+  background: var(--bg-card);
+}
+.toast-persist .toast-icon svg {
+  width: 24px;
+  height: 24px;
+}
+@keyframes toastSwipeIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes toastSwipeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.9);
+  }
+}
+.toast-enter {
+  opacity: 0;
+  transform: translateY(20px) scale(0.9);
+}
+.toast-exit {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.9);
+}
+/* ══════════════════════════════════════════════════
+   MODAL
+   ══════════════════════════════════════════════════ */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  padding: 24px;
+}
+.modal-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+.modal-box {
+  background: var(--bg-card);
+  border: none;
+  border-radius: 24px; /* More compact rounding */
+  padding: 32px 24px 28px; /* Balanced paddings */
+  width: 100%;
+  max-width: 360px; /* Thinner modal */
+  margin: auto; /* Force centering within flex */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  transform: translateY(20px) scale(0.95);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.modal-overlay.active .modal-box {
+  transform: translateY(0) scale(1);
+}
+.modal-icon-wrap {
+  width: 48px; /* Smaller icon container */
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+.modal-icon-wrap svg {
+  width: 24px; /* Smaller icon */
+  height: 24px;
+}
+.modal-success .modal-icon-wrap {
+  background: var(--acc-d);
+  color: var(--acc);
+}
+.modal-error .modal-icon-wrap {
+  background: var(--neg-d);
+  color: var(--neg);
+  border: 1px solid var(--neg-dim);
+}
+.modal-title {
+  font-size: 19px; /* Neater, smaller title */
+  font-weight: 800;
+  color: var(--tx1);
+  margin: 0 0 10px;
+  letter-spacing: -0.5px;
+  line-height: 1.3;
+}
+.modal-desc {
+  font-size: 13.5px; /* Compact description */
+  color: var(--tx2);
+  line-height: 1.6;
+  margin: 0 0 24px;
+}
+.modal-btns {
+  display: flex;
+  gap: 10px;
+}
+.modal-btn {
+  flex: 1;
+  padding: 10px 18px; /* Tighter padding */
+  font-size: 13.5px; /* Smaller button text */
+  font-weight: 600;
+  justify-content: center;
+  border-radius: 12px;
+}
+.modal-btn-cancel {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--tx2);
+}
+.modal-btn-cancel:hover {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+  border-color: var(--border-focus);
+}
+.modal-btn-danger {
+  background: var(--neg);
+  color: #fff;
+  border: none;
+}
+.modal-btn-danger:hover {
+  background: #ef4444;
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+/* ══════════════════════════════════════════════════
+   EMPTY STATE (NO DATA)
+   ══════════════════════════════════════════════════ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  flex: 1;
+  height: 100%;
+  min-height: 180px;
+  width: 100%;
+  background: var(--bg-card2);
+  border-radius: var(--r2);
+  border: 1px dashed var(--border);
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.empty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tx1);
+  margin-bottom: 4px;
+}
+.empty-desc {
+  font-size: 13px;
+  color: var(--tx3);
+}
+/* ══════════════════════════════════════════════════
+   ANALYTICS PAGE — TABLES
+   ══════════════════════════════════════════════════ */
+.analytics-table-wrap {
+  overflow-x: auto;
+  border-radius: var(--r2);
+  max-height: 340px;
+  overflow-y: auto;
+}
+.analytics-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+.analytics-table thead tr {
+  position: sticky;
+  top: 0;
+  background: var(--bg-card2);
+  z-index: 1;
+}
+.analytics-table th {
+  text-align: center;
+  /* Changed from left to center */
+  padding: 9px 12px;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--tx3);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+.analytics-table th:nth-child(2) {
+  text-align: left;
+  /* Keep Label/Hashtag/Topic name column left-aligned */
+}
+.analytics-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-s);
+  color: var(--tx1);
+  vertical-align: middle;
+  text-align: center;
+  /* Center all column contents by default */
+}
+.analytics-table td.at-label {
+  text-align: left;
+  /* Override for text labels */
+}
+.analytics-table tr:last-child td {
+  border-bottom: none;
+}
+.analytics-table tr:hover td {
+  background: var(--nav-hover-bg);
+}
+.analytics-table .tc-pos {
+  color: var(--pos);
+}
+.analytics-table .tc-neg {
+  color: var(--neg);
+}
+.analytics-table .tc-neu {
+  color: var(--neu);
+}
+.at-rank {
+  color: var(--tx3);
+  font-size: 11px;
+  font-weight: 600;
+  width: 28px;
+  min-width: 28px;
+  text-align: center;
+}
+.at-num {
+  text-align: center;
+  /* Changed from right to center */
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  min-width: 48px;
+}
+.at-label {
+  font-weight: 500;
+}
+.at-topic-text {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.at-hashtag {
+  display: inline-flex;
+  padding: 2px 8px;
+  background: var(--acc-d);
+  color: var(--acc);
+  border-radius: 100px;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+.at-bar-cell {
+  min-width: 100px;
+  padding-right: 16px;
+}
+.at-bar-track {
+  height: 6px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  overflow: hidden;
+}
+.at-bar-multi {
+  display: flex;
+  height: 6px;
+}
+.at-bar-fill {
+  height: 100%;
+  border-radius: 100px;
+  transition: width .4s ease;
+}
+.analytics-table-empty {
+  display: none;
+  padding: 24px;
+  text-align: center;
+  color: var(--tx3);
+  font-size: 12.5px;
+  font-style: italic;
+}
+/* ══════════════════════════════════════════════════
+   ANALYTICS PAGE — WORD TAGS
+   ══════════════════════════════════════════════════ */
+.word-tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 0;
+  min-height: 140px;
+  align-content: flex-start;
+}
+.word-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 100px;
+  border: 1px solid transparent;
+  font-weight: 600;
+  cursor: default;
+  transition: transform var(--t-fast), opacity var(--t-fast);
+  line-height: 1;
+  white-space: nowrap;
+}
+.word-tag:hover {
+  transform: scale(1.08);
+  opacity: 1 !important;
+}
+/* ══════════════════════════════════════════════════
+   TWEET LIST PAGE  (tl-*)
+   ══════════════════════════════════════════════════ */
+/* ── Filter bar ── */
+.tl-filter-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding: 24px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  box-shadow: var(--shadow-sm);
+  text-align: center;
+}
+.tl-filter-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  width: 100%;
+  max-width: 380px;
+}
+#btnAll {
+  grid-column: span 3;
+}
+.tl-filter-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 380px;
+}
+.tl-tab {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-card2);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--tx2);
+  cursor: pointer;
+  font-family: var(--font);
+  transition: all var(--t-fast);
+  min-width: 80px;
+  height: auto;
+}
+.tl-tab-label-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--tx1);
+  opacity: 0.9;
+}
+.tl-tab:hover {
+  background: var(--nav-hover-bg);
+  border-color: var(--border-focus);
+  transform: translateY(-1px);
+}
+.tl-tab.active {
+  background: var(--acc-d2);
+  color: var(--acc);
+  border-color: var(--acc);
+  box-shadow: 0 4px 12px var(--acc-d);
+}
+.tl-tab.active .tl-tab-label-group {
+  color: var(--acc);
+}
+.tl-tab-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.tl-tab-count {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--tx1);
+  line-height: 1;
+}
+.tl-tab.active .tl-tab-count {
+  color: var(--acc);
+}
+/* ── Search ── */
+.tl-search-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+}
+.tl-search-icon {
+  position: absolute;
+  left: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--tx3);
+  pointer-events: none;
+}
+.tl-search {
+  width: 100%;
+  padding: 7px 34px 7px 32px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  color: var(--tx1);
+  font-size: 13px;
+  font-family: var(--font);
+  outline: none;
+  transition: border-color var(--t-fast);
+}
+.tl-search:focus {
+  border-color: var(--border-focus);
+}
+.tl-search-clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-card2);
+  color: var(--tx3);
+  font-size: 10px;
+  cursor: pointer;
+  transition: background var(--t-fast);
+}
+.tl-search-clear:hover {
+  background: var(--neg-d);
+  color: var(--neg);
+}
+/* ── Sort (inherits shared select styles above) ── */
+.tl-sort-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.tl-sort-sel {
+  white-space: nowrap;
+  min-width: 150px;
+}
+/* ── Stat Pills ── */
+.tl-stat-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 100px;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+/* ── Feed grid ── */
+.tl-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+/* ── Tweet Card ── */
+.tl-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  padding: 14px 16px 10px;
+  box-shadow: none;
+  transition: border-color var(--t-fast);
+  border-left: 3px solid transparent;
+  position: relative;
+}
+.tl-card:hover {
+  border-color: var(--border-s);
+}
+.tl-card-pos {
+  border-left-color: var(--pos);
+}
+.tl-card-neg {
+  border-left-color: var(--neg);
+}
+.tl-card-neu {
+  border-left-color: var(--neu);
+}
+/* Card Header */
+.tl-card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 8px;
+  flex-wrap: wrap; /* allow wrapping if deeply compressed */
+}
+.tl-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
+  letter-spacing: -0.2px;
+}
+.tl-user-info {
+  display: flex;
+  flex-direction: column;
+  /* Changed back to column for safe stacking over locations */
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+}
+.tl-user-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; /* wrap date next to name if needed */
+  gap: 6px;
+}
+.tl-username {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: var(--tx1);
+  word-break: break-all;
+}
+.tl-date {
+  font-size: 11.5px;
+  color: var(--tx3);
+  white-space: nowrap;
+}
+.tl-date-link {
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: color var(--t-fast);
+}
+.tl-date-link:hover {
+  color: var(--acc);
+  text-decoration: underline;
+}
+.tl-date-link svg {
+  width: 12px;
+  height: 12px;
+}
+.tl-location {
+  font-size: 11px;
+  color: var(--tx3);
+}
+.tl-header-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  align-self: flex-start; /* keep badges Top-Right */
+}
+.tl-sent-badge {
+  font-size: 10px;
+  padding: 2px 8px;
+}
+.tl-link-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  color: var(--tx3);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition: all var(--t-fast);
+}
+.tl-link-btn:hover {
+  color: var(--tx1);
+  background: var(--bg-input);
+}
+.tl-link-btn svg {
+  width: 12px;
+  height: 12px;
+}
+/* Tweet text */
+.tl-tweet-text {
+  font-size: 13.5px;
+  color: var(--tx1);
+  line-height: 1.45;
+  margin-bottom: 8px;
+  word-break: break-word;
+}
+.tl-highlight {
+  background: var(--neu-d);
+  color: var(--neu);
+  border-radius: 3px;
+  padding: 0 2px;
+}
+/* Hashtag tags */
+.tl-tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-bottom: 8px;
+}
+.tl-hashtag {
+  display: inline-flex;
+  padding: 2px 8px;
+  background: var(--acc-d);
+  color: var(--acc);
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 600;
+  transition: background var(--t-fast);
+}
+.tl-hashtag:hover {
+  background: var(--acc-d2);
+}
+/* Media */
+.tl-media {
+  margin-top: 6px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--bg-card2);
+  display: inline-flex;
+  /* Changed so it doesn't span full width if image is small */
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.tl-media-img {
+  max-width: 100%;
+  max-height: 280px;
+  /* Slightly shorter */
+  object-fit: contain;
+  display: block;
+  transition: opacity var(--t-fast);
+}
+.tl-media-img:hover {
+  opacity: 0.95;
+}
+/* Card Footer */
+.tl-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-s);
+  flex-wrap: wrap;
+}
+.tl-engage-row {
+  display: flex;
+  gap: 16px;
+}
+.tl-engage-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  color: var(--tx3);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  transition: color var(--t-fast);
+}
+.tl-engage-item:hover {
+  color: var(--tx2);
+}
+.tl-engage-item svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+/* Confidence */
+.tl-conf-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tl-conf-label {
+  font-size: 10.5px;
+  color: var(--tx3);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+.tl-conf-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tl-conf-val {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--tx1);
+  font-variant-numeric: tabular-nums;
+  min-width: 40px;
+  text-align: right;
+}
+.tl-conf-track {
+  width: 80px;
+  height: 5px;
+  border-radius: 100px;
+  background: var(--bg-card2);
+  overflow: hidden;
+}
+.tl-conf-fill {
+  height: 100%;
+  border-radius: 100px;
+  transition: width .4s ease;
+}
+.conf-fill-pos {
+  background: var(--pos);
+}
+.conf-fill-neg {
+  background: var(--neg);
+}
+.conf-fill-neu {
+  background: var(--neu);
+}
+/* ── Pagination ── */
+.tl-pagination-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 8px;
+}
+.tl-info {
+  font-size: 12px;
+  color: var(--tx3);
+}
+.tl-pagination {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+/* ── Empty state ── */
+.tl-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 24px;
+  text-align: center;
+  background: var(--bg-card);
+  border: 1px dashed var(--border);
+  border-radius: var(--r3);
+}
+.tl-empty-icon {
+  font-size: 40px;
+  margin-bottom: 12px;
+}
+.tl-empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--tx1);
+  margin-bottom: 4px;
+}
+.tl-empty-sub {
+  font-size: 12.5px;
+  color: var(--tx3);
+}
+/* -- Desktop Optimization -- */
+@media (min-width: 1025px) {
+  .tl-filter-bar {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 16px 20px;
+    text-align: left;
+    gap: 12px;
+  }
+  .tl-filter-tabs {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: auto;
+    max-width: none;
+    gap: 6px;
+  }
+  #btnAll {
+    grid-column: auto;
+    min-width: 80px;
+  }
+  .tl-tab {
+    flex-direction: row;
+    padding: 6px 14px;
+    height: 38px;
+    min-width: auto;
+    gap: 10px;
+  }
+  .tl-tab-label-group {
+    order: 1;
+  }
+  .tl-tab-count {
+    order: 2;
+    font-size: 13px;
+    margin-left: 4px;
+  }
+  .tl-tab-label {
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .tl-filter-actions {
+    flex-direction: row;
+    width: auto;
+    max-width: none;
+    align-items: center;
+    gap: 10px;
+  }
+  .tl-search-wrap {
+    width: 240px;
+    max-width: none;
+  }
+  .tl-sort-wrap {
+    width: auto;
+    min-width: 160px;
+  }
+}

css/support.css ADDED Viewed

	@@ -0,0 +1,141 @@

+.support-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin: 32px 0 0;
+}
+.support-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r3);
+  padding: 24px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--shadow-sm);
+  width: 100%;
+}
+.support-card:hover {
+  box-shadow: var(--shadow-md);
+}
+.sup-icon-box {
+  width: 44px; /* Slightly smaller icon box */
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 18px;
+}
+.sup-icon-box svg {
+  width: 20px; /* Slightly smaller icon */
+  height: 20px;
+}
+.sup-title {
+  font-size: 16px; /* Slightly smaller title */
+  font-weight: 800;
+  color: var(--tx1);
+  margin-bottom: 8px;
+  letter-spacing: -0.2px;
+}
+.sup-desc {
+  font-size: 11.5px; /* Slightly smaller */
+  color: var(--tx3);
+  line-height: 1.5;
+  margin-bottom: 24px;
+  max-width: 280px;
+}
+.sup-btn {
+  width: fit-content;
+  min-width: 170px; /* Tighter button */
+  justify-content: center;
+  font-size: 11.5px;
+  height: 38px; /* Standard premium height */
+  font-weight: 700;
+  padding: 0 24px;
+  border-radius: 10px;
+}
+.sup-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  align-items: center;
+}
+.sup-link-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 38px;
+  padding: 0 20px;
+  background: var(--bg-card);
+  border: none;
+  border-radius: 10px;
+  color: var(--tx2);
+  font-size: 11.5px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  width: fit-content;
+  min-width: 170px;
+}
+.sup-link-item:hover {
+  background: var(--nav-hover-bg);
+  color: var(--tx1);
+}
+.sup-link-icon {
+  display: flex;
+  opacity: 0.9;
+}
+/* GitHub Brand Style */
+.sup-link-github {
+  background: #24292e;
+  color: #ffffff;
+  border-color: #24292e;
+}
+.sup-link-github .sup-link-icon { color: #ffffff; }
+.sup-link-github:hover {
+  background: #1b1f23;
+  color: #ffffff;
+}
+/* Instagram Brand Style */
+.sup-link-insta {
+  background: #fdf2f8;
+  color: #be185d;
+  border-color: #fce7f3;
+}
+.sup-link-insta .sup-link-icon { color: #db2777; }
+.sup-link-insta:hover {
+  background: #fce7f3;
+  color: #9d174d;
+}
+.wa-num {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--tx3);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+@media (max-width: 900px) {
+  .support-grid {
+    grid-template-columns: 1fr;
+    max-width: 450px;
+  }
+}

dashboard.html ADDED Viewed

	@@ -0,0 +1,81 @@

+<!DOCTYPE html>
+<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.html'">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>

data.html ADDED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Data & Tabel — 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">Data & Tabel Lengkap</div>
+      <div id="topbarMeta" class="topbar-sub"></div>
+    </div>
+    <div class="page-body">
+      <div class="sec-head">
+        <div><div class="sec-title">Hasil Analisis Sentimen</div><div class="sec-sub">Sortable · Multi-filter · Expandable rows</div></div>
+        <div class="actions" id="tableActions"></div>
+      </div>
+      <!-- Filter Bar -->
+      <div class="tl-filter-bar data-page-filters">
+        <div class="filter-group">
+          <span class="filter-label">Sentimen:</span>
+          <select id="fSentiment">
+            <option value="all">Semua</option>
+            <option value="Positif">Positif</option>
+            <option value="Negatif">Negatif</option>
+            <option value="Netral">Netral</option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Lokasi:</span>
+          <select id="fLocation"><option value="all">Semua</option></select>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">User:</span>
+          <select id="fUser"><option value="all">Semua</option></select>
+        </div>
+        <div class="filter-search-wrap">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="tl-search-icon"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+          <input type="text" id="fSearch" placeholder="Cari teks..." />
+        </div>
+        <div class="filter-group mini-inputs">
+          <input type="number" id="fMinEngage" placeholder="Min. Engagement" min="0" />
+          <input type="number" id="fMinConf" placeholder="Min. Conf %" min="0" max="100" />
+        </div>
+        <button class="btn btn-ghost btn-mini" id="btnReset">Reset</button>
+      </div>
+      <!-- Column visibility -->
+      <div class="col-visibility-wrap">
+        <div class="col-toggle-label">Kolom Terlihat</div>
+        <div class="col-toggle" id="colToggle"></div>
+      </div>
+      <!-- Table Area -->
+      <div class="table-card">
+        <div class="table-wrap">
+          <table class="data-table" id="dataTable">
+            <thead id="tableHead"></thead>
+            <tbody id="tableBody"></tbody>
+          </table>
+        </div>
+      </div>
+      <!-- Info & Pagination Stack -->
+      <div class="tl-pagination-stack">
+        <div class="pagination" id="pagination"></div>
+        <div class="tl-pagination-info" id="tableInfo"></div>
+        <div class="tl-page-size-row">
+          <span class="tl-page-size-label">Baris per halaman:</span>
+          <select id="pageSize" 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/data.js"></script>
+</body>
+</html>

history.html ADDED Viewed

	@@ -0,0 +1,47 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Riwayat Analisis — SentiMeter</title>
+  <meta name="description" content="Riwayat Analisis Sentimen IndoBERT" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/history.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">Riwayat Analisis</div>
+        <div class="topbar-sub">Data Analisis Tersimpan</div>
+      </div>
+      <div class="page-body">
+        <div class="sec-head reveal-up">
+          <div>
+            <h1 class="sec-title">
+              Riwayat Analisis
+              <span class="hist-count-badge" id="histCount">0</span>
+            </h1>
+            <p class="sec-sub">Daftar data analisis sentimen yang pernah Anda jalankan. Anda dapat melihat kembali hasilnya tanpa perlu melakukan upload ualng. Data ini disimpan lokal di perangkat Anda.</p>
+          </div>
+        </div>
+        <div class="history-container" id="historyContainer">
+          <!-- History Cards Inserted Here via JS -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/shared.js"></script>
+  <script src="js/history.js"></script>
+</body>
+</html>

img/logo.svg ADDED Viewed

index.html ADDED Viewed

	@@ -0,0 +1,249 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Pengenalan — SentiMeter</title>
+  <meta name="description"
+    content="Selamat datang di SentiMeter — Platform analisis sentimen teks Indonesia berbasis model IndoBERT." />
+  <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;900&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/index.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">Pengenalan SentiMeter</div>
+        <div class="topbar-sub">Panduan Lengkap Platform</div>
+      </div>
+      <div class="page-body">
+        <!-- HERO -->
+        <section class="ih-hero" id="introHero">
+          <div class="ih-hero-glow"></div>
+          <div class="ih-hero-inner">
+            <div class="ih-badge reveal-up" style="--d:0ms">Model IndoBERT · Bahasa Indonesia</div>
+            <h1 class="ih-title reveal-up" style="--d:80ms">
+              Selamat Datang di<br>
+              <span class="ih-grad">SentiMeter</span>
+            </h1>
+            <p class="ih-sub reveal-up" style="--d:180ms">
+              Platform analisis sentimen Twitter/X Bahasa Indonesia berbasis kecerdasan buatan.<br>
+              Keamanan data terjamin dengan <strong>Local Storage</strong> — data Anda tetap di browser Anda.
+            </p>
+            <div class="ih-disclaimer reveal-up" style="--d:240ms">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              <span><strong>Mohon Maaf:</strong> Model machine learning IndoBERT saat ini masih dalam tahap pengembangan, sehingga hasil prediksi mungkin belum sepenuhnya akurat dan terkadang terjadi kesalahan klasifikasi.</span>
+            </div>
+            <div class="ih-hero-btns reveal-up" style="--d:300ms">
+              <a href="upload.html" class="btn btn-primary">Mulai Analisis</a>
+              <a href="#cara-pakai" class="btn btn-ghost" id="learnMoreBtn">Pelajari cara pakai ↓</a>
+            </div>
+            <div class="ih-stats reveal-up" style="--d:420ms">
+              <div class="ih-stat"><b class="ih-stat-n" data-to="9">0</b><span>Langkah Cleaning</span></div>
+              <div class="ih-stat-sep"></div>
+              <div class="ih-stat"><b class="ih-stat-n" data-to="14">0</b><span>Grafik Interaktif</span></div>
+              <div class="ih-stat-sep"></div>
+              <div class="ih-stat"><b class="ih-stat-n" data-to="5">0</b><span>Halaman Analisis</span></div>
+            </div>
+          </div>
+        </section>
+        <!-- CARA PAKAI -->
+        <section class="ih-section" id="cara-pakai">
+          <div class="ih-sec-head reveal-up">
+            <p class="ih-sec-label">Cara Penggunaan</p>
+            <h2>Hanya 3 Langkah Mudah</h2>
+            <p class="ih-sec-sub">Dari CSV ke insight penuh dalam hitungan menit</p>
+          </div>
+          <div class="ih-steps reveal-up" style="--d:100ms">
+            <div class="ih-step">
+              <div class="ih-step-num blue">01</div>
+              <h3>Dapatkan Data</h3>
+              <p>Gunakan tool scraping eksternal (seperti XScraper) untuk mengumpulkan data dari Twitter/X ke format CSV yang kompatibel.</p>
+            </div>
+            <div class="ih-step-chevron">›</div>
+            <div class="ih-step">
+              <div class="ih-step-num green">02</div>
+              <h3>Upload File CSV</h3>
+              <p>Seret & lepas file CSV ke halaman <strong>Upload Data</strong>. Mendukung file sangat besar (1GB+) dan
+                banyak file sekaligus.</p>
+              <a href="upload.html" class="ih-step-link">Upload Sekarang →</a>
+            </div>
+            <div class="ih-step-chevron">›</div>
+            <div class="ih-step">
+              <div class="ih-step-num purple">03</div>
+              <h3>Analisis Mendalam</h3>
+              <p>Jelajahi berbagai visualisasi: Dashboard, Analytics, Tabel Data, dan Cleaning Lab yang interaktif.</p>
+              <a href="dashboard.html" class="ih-step-link">Mulai Eksplorasi →</a>
+            </div>
+          </div>
+        </section>
+        <!-- XSCRAPER -->
+        <section class="ih-section ih-xs-section" id="xscraper">
+          <div class="ih-xs-card reveal-up">
+            <div class="ih-xs-left">
+              <div class="ih-xs-badge">★ Rekomendasi Tool Scraping</div>
+              <div class="ih-xs-brand">
+                <div>
+                  <h2 class="ih-xs-name">XScraper</h2>
+                  <p class="ih-xs-url">xscraper.fwh.is</p>
+                </div>
+              </div>
+              <p class="ih-xs-desc">
+                Untuk mendapatkan data tweet yang valid dan kompatibel dengan SentiMeter, kami merekomendasikan
+                <strong>XScraper</strong> — tools scraping Twitter/X yang ringan, cepat, dan menghasilkan file CSV
+                siap-analisis.
+              </p>
+              <ul class="ih-xs-list">
+                <li>Scraping berdasarkan keyword / hashtag</li>
+                <li>Output CSV kompatibel dengan SentiMeter</li>
+                <li>Filter tanggal, jumlah tweet, bahasa</li>
+                <li>Integrasi Google Colab — tanpa install</li>
+                <li>Kolom <code>full_text</code>, <code>username</code>, <code>created_at</code>, metadata lengkap</li>
+              </ul>
+              <div class="ih-xs-actions">
+                <a href="https://xscraper.fwh.is" target="_blank" rel="noopener" class="btn btn-primary">Buka
+                  XScraper</a>
+                <span class="ih-xs-url-chip">xscraper.fwh.is</span>
+              </div>
+            </div>
+            <div class="ih-xs-right">
+              <div class="ih-csv-preview">
+                <div class="ih-csv-topbar">
+                  <span class="ih-csv-dot"></span><span class="ih-csv-dot"></span><span class="ih-csv-dot"></span>
+                  <span class="ih-csv-fname">tweets_export.csv</span>
+                </div>
+                <div class="ih-csv-body" id="codeDemo"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- FITUR -->
+        <section class="ih-section" id="fitur">
+          <div class="ih-sec-head reveal-up">
+            <p class="ih-sec-label">Fitur Platform</p>
+            <h2>5 Halaman Analisis Lengkap</h2>
+            <p class="ih-sec-sub">Setiap halaman dirancang untuk kebutuhan eksplorasi data berbeda</p>
+          </div>
+          <div class="ih-feat-grid">
+            <div class="ih-feat reveal-up" style="--d:30ms">
+              <h3>Riwayat Analisis</h3>
+              <p>Data Anda tersimpan dengan aman. Lihat kembali hasil analisis sebelumnya tanpa perlu re-upload.</p>
+              <ul>
+                <li>Persistence Local Storage</li>
+                <li>Auto-save hasil analisis</li>
+                <li>Hapus data sekali klik</li>
+                <li>Keamanan data enkripsi</li>
+              </ul>
+              <a href="history.html" class="ih-feat-link">Buka Riwayat →</a>
+            </div>
+            <div class="ih-feat reveal-up" style="--d:60ms">
+              <h3>Dashboard Visual</h3>
+              <p>Ringkasan eksekutif sentimen dengan KPI cards dan visualisasi grafik dari hasil analisis IndoBERT.</p>
+              <ul>
+                <li>8 KPI metrik utama</li>
+                <li>Donut chart distribusi</li>
+                <li>Time-series sentiment</li>
+                <li>Visualisasi per-kategori</li>
+              </ul>
+              <a href="dashboard.html" class="ih-feat-link">Buka Dashboard →</a>
+            </div>
+            <div class="ih-feat reveal-up" style="--d:120ms">
+              <h3>Analytics</h3>
+              <p>Eksplorasi mendalam dengan 14+ grafik interaktif. Topik, lokasi, engagement, confidence histogram.</p>
+              <ul>
+                <li>14+ grafik Chart.js interaktif</li>
+                <li>Distribusi topik &amp; lokasi</li>
+                <li>Confidence histogram</li>
+                <li>Radar engagement per sentimen</li>
+              </ul>
+              <a href="analytics.html" class="ih-feat-link">Buka Analytics →</a>
+            </div>
+            <div class="ih-feat reveal-up" style="--d:180ms">
+              <h3>Data &amp; Tabel</h3>
+              <p>Tabel data lengkap seluruh tweet dengan filter, pencarian, dan pengurutan.</p>
+              <ul>
+                <li>Filter multi-dimensi</li>
+                <li>Full-text search</li>
+                <li>Pagination cepat</li>
+                <li>Export hasil ke JSON</li>
+              </ul>
+              <a href="data.html" class="ih-feat-link">Buka Tabel →</a>
+            </div>
+            <div class="ih-feat reveal-up" style="--d:240ms">
+              <h3>Cleaning Lab</h3>
+              <p>Laboratorium interaktif pipeline text cleaning 9 langkah IndoBERT. Uji setiap tahap secara real-time.
+              </p>
+              <ul>
+                <li>Demo teks interaktif live</li>
+                <li>9 step cleaning toggle</li>
+                <li>Statistik kata dihapus</li>
+                <li>Distribusi sebelum/sesudah</li>
+              </ul>
+              <a href="cleaning.html" class="ih-feat-link">Buka Lab →</a>
+            </div>
+          </div>
+        </section>
+        <!-- PIPELINE -->
+        <section class="ih-section" id="pipeline">
+          <div class="ih-sec-head reveal-up">
+            <p class="ih-sec-label">Teknologi</p>
+            <h2>Model IndoBERT SOTA</h2>
+            <p class="ih-sec-sub">Klasifikasi menggunakan <code>indonesia-bert-sentiment-classification</code> untuk akurasi maksimal</p>
+          </div>
+          <div class="ih-pipeline reveal-up" style="--d:80ms">
+            <div class="ih-pipe-io ih-pipe-raw">"@user RT: kunjungi https://t.co/xxx 🔥 #PemiluIndonesia Pemilu harus
+              DIULANG!!!"</div>
+            <div class="ih-pipe-arrow">↓</div>
+            <div class="ih-pipe-steps">
+              <div class="ih-pipe-step"><span class="ih-pipe-n">1</span><b>Lowercase</b><s>Semua huruf kecil</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">2</span><b>Hapus URL</b><s>https://... hilang</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">3</span><b>Hapus Mention</b><s>@user hilang</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">4</span><b>Normalisasi Hashtag</b><s>#Tag → tag</s>
+              </div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">5</span><b>Hapus Emoji</b><s>🔥hilang</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">6</span><b>Karakter Khusus</b><s>Alfanumerik saja</s>
+              </div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">7</span><b>Hapus Angka</b><s>123, 456 hilang</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">8</span><b>Normalisasi Spasi</b><s>Spasi ekstra
+                  bersih</s></div>
+              <div class="ih-pipe-step"><span class="ih-pipe-n">9</span><b>Hapus Stopwords</b><s>yang, dan, di,
+                  ke...</s></div>
+            </div>
+            <div class="ih-pipe-arrow">↓</div>
+            <div class="ih-pipe-io ih-pipe-clean">"pemilu harus diulang"</div>
+          </div>
+        </section>
+        <!-- CTA -->
+        <section class="ih-cta-section reveal-up">
+          <div class="ih-cta-box">
+            <h2>Siap Menganalisis Sentimen Twitter/X?</h2>
+            <p>Dapatkan data di XScraper, lalu upload ke SentiMeter dan mulai eksplorasi insight mendalam.</p>
+            <div class="ih-cta-box-btns">
+              <a href="https://xscraper.fwh.is" target="_blank" rel="noopener" class="btn btn-ghost">Ke XScraper</a>
+              <a href="upload.html" class="btn btn-primary">Mulai Upload Data</a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  <script src="js/shared.js"></script>
+  <script src="js/index.js"></script>
+</body>
+</html>

js/analytics.js ADDED Viewed

	@@ -0,0 +1,369 @@

+'use strict';
+// ── Guard: stop cleanly if no data ──
+const _store = SM.loadData();
+if (!_store) {
+  window.location.replace('upload.html');
+  throw new Error('No data — redirecting');
+}
+SM.injectLayout('nav-analytics');
+document.addEventListener('DOMContentLoaded', function () {
+  SM.setChartDefaults();
+  const { rows, meta } = _store;
+  document.getElementById('topbarMeta').textContent =
+    `${meta.filename} — ${rows.length} tweets`;
+  const n   = rows.length;
+  const pos = rows.filter(r => r.sentiment === 'Positif');
+  const neg = rows.filter(r => r.sentiment === 'Negatif');
+  const neu = rows.filter(r => r.sentiment === 'Netral');
+  const {C, gridColor: G} = SM;
+  function safe(id, fn) {
+    try { fn(); }
+    catch(e) { console.error('Chart/section ' + id + ' failed:', e); }
+  }
+  // ── 1. DONUT ──
+  safe('c1', () => {
+    SM.mkChart('c1', {
+      type: 'doughnut',
+      data: {
+        labels: ['Positif','Negatif','Netral'],
+        datasets: [{ data:[pos.length,neg.length,neu.length],
+          backgroundColor:[C.pos,C.neg,C.neu], borderWidth:0, hoverOffset:12 }]
+      },
+      options: { responsive:true, maintainAspectRatio:false, cutout:'68%',
+        plugins:{ legend:{display:false},
+          tooltip:{callbacks:{label: c => ` ${c.label}: ${c.parsed} (${((c.parsed/n)*100).toFixed(1)}%)`}}}}
+    });
+    document.getElementById('legend1').innerHTML =
+      [['Positif',C.pos,pos.length],['Negatif',C.neg,neg.length],['Netral',C.neu,neu.length]]
+      .map(([l,c,v]) => `<div class="legend-item"><div class="legend-dot" style="background:${c}"></div>${l} (${v})</div>`).join('');
+  });
+  // ── 2. TIME TREND ──
+  safe('c2', () => {
+    const tMap = {};
+    rows.forEach(r => {
+      if (!r.date) return;
+      const d = new Date(r.date);
+      const k = isNaN(d.getTime()) ? r.date.slice(0,10) : `${String(d.getHours()).padStart(2,'0')}:00`;
+      if (!tMap[k]) tMap[k] = {Positif:0, Negatif:0, Netral:0};
+      tMap[k][r.sentiment]++;
+    });
+    const tL = Object.keys(tMap).sort();
+    SM.mkChart('c2', {
+      type: 'line',
+      data: { labels: tL, datasets: [
+        {label:'Positif',data:tL.map(k=>tMap[k].Positif),borderColor:C.pos,backgroundColor:C.posDim,tension:.4,fill:true,pointRadius:3},
+        {label:'Negatif',data:tL.map(k=>tMap[k].Negatif),borderColor:C.neg,backgroundColor:C.negDim,tension:.4,fill:true,pointRadius:3},
+        {label:'Netral', data:tL.map(k=>tMap[k].Netral), borderColor:C.neu,backgroundColor:C.neuDim,tension:.4,fill:true,pointRadius:3},
+      ]},
+      options: { responsive:true, maintainAspectRatio:false,
+        interaction:{mode:'index',intersect:false},
+        plugins:{legend:{labels:{boxWidth:10,padding:14}}},
+        scales:{ x:{grid:{color:G}}, y:{grid:{color:G},beginAtZero:true} }
+      }
+    });
+  });
+  // ── 3. STACKED TOPIC BAR ──
+  safe('c3', () => {
+    const topicMap = {};
+    rows.forEach(r => {
+      const t = r.raw.split(/[.!?]/)[0].trim().slice(0,45) || 'Lainnya';
+      if (!topicMap[t]) topicMap[t] = {Positif:0, Negatif:0, Netral:0, tot:0};
+      topicMap[t][r.sentiment]++; topicMap[t].tot++;
+    });
+    const topTopics = Object.entries(topicMap).sort((a,b) => b[1].tot-a[1].tot).slice(0,8);
+    SM.mkChart('c3', {
+      type: 'bar',
+      data: {
+        labels: topTopics.map(([k]) => k.length>38 ? k.slice(0,38)+'…' : k),
+        datasets: [
+          {label:'Positif',data:topTopics.map(([,v])=>v.Positif),backgroundColor:C.pos,borderRadius:3},
+          {label:'Negatif',data:topTopics.map(([,v])=>v.Negatif),backgroundColor:C.neg,borderRadius:3},
+          {label:'Netral', data:topTopics.map(([,v])=>v.Netral), backgroundColor:C.neu,borderRadius:3},
+        ]
+      },
+      options: { responsive:true, maintainAspectRatio:false,
+        plugins:{legend:{labels:{boxWidth:9,padding:12}}},
+        scales:{ x:{stacked:true,grid:{color:G},ticks:{maxRotation:30,font:{size:9}}},
+                 y:{stacked:true,grid:{color:G},beginAtZero:true} }
+      }
+    });
+  });
+  // ── 4. LOCATION HORIZ ──
+  safe('c4', () => {
+    const locMap = {};
+    rows.forEach(r => {
+      const l = (r.location||'').trim()||'Tidak Diketahui';
+      locMap[l] = (locMap[l]||0)+1;
+    });
+    const topLoc = Object.entries(locMap).sort((a,b) => b[1]-a[1]).slice(0,8);
+    SM.mkChart('c4', {
+      type: 'bar',
+      data: {
+        labels: topLoc.map(([k]) => k),
+        datasets: [{ label:'Tweet', data: topLoc.map(([,v]) => v),
+          backgroundColor: topLoc.map((_,i) => C.palette[i % C.palette.length]),
+          borderWidth:0, borderRadius:4 }]
+      },
+      options: { indexAxis:'y', responsive:true, maintainAspectRatio:false,
+        plugins:{legend:{display:false}},
+        scales:{ x:{grid:{color:G},beginAtZero:true}, y:{grid:{display:false}} }
+      }
+    });
+  });
+  // ── 5. TOP USERS ──
+  safe('c5', () => {
+    const userMap = {};
+    rows.forEach(r => { userMap[r.username] = (userMap[r.username]||0)+1; });
+    const topUsers = Object.entries(userMap).sort((a,b) => b[1]-a[1]).slice(0,8);
+    SM.mkChart('c5', {
+      type: 'bar',
+      data: {
+        labels: topUsers.map(([k]) => '@'+k),
+        datasets: [{ label:'Tweet', data: topUsers.map(([,v]) => v),
+          backgroundColor:C.a1d, borderColor:C.a1, borderWidth:1, borderRadius:4 }]
+      },
+      options: { indexAxis:'y', responsive:true, maintainAspectRatio:false,
+        plugins:{legend:{display:false}},
+        scales:{ x:{grid:{color:G},beginAtZero:true}, y:{grid:{display:false}} }
+      }
+    });
+  });
+  // ── 6. GROUPED CONFIDENCE per TOPIC ──
+  safe('c8', () => {
+    const ts = {};
+    rows.forEach(r => {
+      const t = r.raw.split(/[.!?]/)[0].trim().slice(0,35) || 'Lainnya';
+      if (!ts[t]) ts[t] = {pos:[],neg:[],neu:[]};
+      if (r.sentiment==='Positif')      ts[t].pos.push(r.confidence);
+      else if (r.sentiment==='Negatif') ts[t].neg.push(r.confidence);
+      else                              ts[t].neu.push(r.confidence);
+    });
+    const ts6 = Object.entries(ts)
+      .sort((a,b) => (b[1].pos.length+b[1].neg.length+b[1].neu.length)-(a[1].pos.length+a[1].neg.length+a[1].neu.length))
+      .slice(0,6);
+    SM.mkChart('c8', {
+      type: 'bar',
+      data: {
+        labels: ts6.map(([k]) => k.length>28 ? k.slice(0,28)+'…' : k),
+        datasets: [
+          {label:'Positif',data:ts6.map(([,v]) => v.pos.length ? +(SM.avg(v.pos)*100).toFixed(1) : 0),backgroundColor:C.pos,borderRadius:3,borderWidth:0},
+          {label:'Negatif',data:ts6.map(([,v]) => v.neg.length ? +(SM.avg(v.neg)*100).toFixed(1) : 0),backgroundColor:C.neg,borderRadius:3,borderWidth:0},
+          {label:'Netral', data:ts6.map(([,v]) => v.neu.length ? +(SM.avg(v.neu)*100).toFixed(1) : 0),backgroundColor:C.neu,borderRadius:3,borderWidth:0},
+        ]
+      },
+      options: { responsive:true, maintainAspectRatio:false,
+        plugins:{legend:{labels:{boxWidth:9,padding:12}}},
+        scales:{ x:{grid:{color:G},ticks:{maxRotation:30,font:{size:9}}},
+                 y:{grid:{color:G},beginAtZero:true,max:100,ticks:{callback: v => v+'%'}} }
+      }
+    });
+  });
+  // ── 7. HOURLY ACTIVITY BAR ──
+  safe('c12', () => {
+    const hourly = Array(24).fill(0);
+    rows.forEach(r => {
+      if (!r.date) return;
+      const d = new Date(r.date);
+      if (!isNaN(d.getTime())) hourly[d.getHours()]++;
+    });
+    SM.mkChart('c12', {
+      type: 'bar',
+      data: {
+        labels: Array.from({length:24}, (_,i) => `${String(i).padStart(2,'0')}:00`),
+        datasets: [{ label:'Tweet', data: hourly,
+          backgroundColor: hourly.map((_,i) => i>=7 && i<=21 ? C.a1d : C.a2d),
+          borderColor:     hourly.map((_,i) => i>=7 && i<=21 ? C.a1  : C.a2),
+          borderWidth:1, borderRadius:3 }]
+      },
+      options: { responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{display:false},
+          tooltip:{callbacks:{title: c=>`Jam ${c[0].label}`, label: c=>` ${c.parsed.y} tweet`}}},
+        scales:{ x:{grid:{color:G},ticks:{font:{size:9}}}, y:{grid:{color:G},beginAtZero:true} }
+      }
+    });
+  });
+  // ══════════════════════════════════════════
+  //  ── 8. TOP 10 HASHTAG TABLE ──
+  // ══════════════════════════════════════════
+  safe('tblHashtag', () => {
+    const htMap = {};
+    rows.forEach(r => {
+      const tags = (r.raw.match(/#(\w+)/g) || []).map(t => t.toLowerCase());
+      tags.forEach(t => { htMap[t] = (htMap[t]||0)+1; });
+    });
+    const top10 = Object.entries(htMap).sort((a,b) => b[1]-a[1]).slice(0,10);
+    const tbody = document.getElementById('tblHashtagBody');
+    if (top10.length === 0) {
+      document.getElementById('tblHashtagEmpty').style.display = 'block';
+      return;
+    }
+    const maxV = top10[0][1];
+    tbody.innerHTML = top10.map(([tag, cnt], i) => `
+      <tr>
+        <td class="at-rank">${i+1}</td>
+        <td class="at-label"><span class="at-hashtag">${SM.esc(tag)}</span></td>
+        <td class="at-num">${cnt}</td>
+        <td class="at-bar-cell">
+          <div class="at-bar-track"><div class="at-bar-fill" style="width:${(cnt/maxV*100).toFixed(1)}%;background:${C.a1}"></div></div>
+        </td>
+      </tr>`).join('');
+  });
+  // ══════════════════════════════════════════
+  //  ── 9. TOP 10 TOPIC TABLE ──
+  // ══════════════════════════════════════════
+  safe('tblTopic', () => {
+    const topicMap = {};
+    rows.forEach(r => {
+      const t = r.raw.split(/[.!?]/)[0].trim().slice(0,60) || 'Lainnya';
+      if (!topicMap[t]) topicMap[t] = {pos:0,neg:0,neu:0,tot:0};
+      topicMap[t][r.sentiment==='Positif'?'pos':r.sentiment==='Negatif'?'neg':'neu']++;
+      topicMap[t].tot++;
+    });
+    const top10 = Object.entries(topicMap).sort((a,b) => b[1].tot-a[1].tot).slice(0,10);
+    const tbody = document.getElementById('tblTopicBody');
+    tbody.innerHTML = top10.map(([topic, v], i) => `
+      <tr>
+        <td class="at-rank">${i+1}</td>
+        <td class="at-label at-topic-text" title="${SM.esc(topic)}">${SM.esc(topic.length>55?topic.slice(0,55)+'…':topic)}</td>
+        <td class="at-num">${v.tot}</td>
+        <td class="at-num" style="color:var(--pos)">${v.pos}</td>
+        <td class="at-num" style="color:var(--neg)">${v.neg}</td>
+        <td class="at-num" style="color:var(--neu)">${v.neu}</td>
+      </tr>`).join('');
+  });
+  // ══════════════════════════════════════════
+  //  ── 10. SENTIMENT PER HASHTAG TABLE ──
+  // ══════════════════════════════════════════
+  safe('tblHashtagSent', () => {
+    const htSent = {};
+    rows.forEach(r => {
+      const tags = (r.raw.match(/#(\w+)/g) || []).map(t => t.toLowerCase());
+      tags.forEach(tag => {
+        if (!htSent[tag]) htSent[tag] = {pos:0,neg:0,neu:0,tot:0};
+        htSent[tag][r.sentiment==='Positif'?'pos':r.sentiment==='Negatif'?'neg':'neu']++;
+        htSent[tag].tot++;
+      });
+    });
+    const top10 = Object.entries(htSent).sort((a,b) => b[1].tot-a[1].tot).slice(0,10);
+    const tbody = document.getElementById('tblHashtagSentBody');
+    if (top10.length === 0) {
+      document.getElementById('tblHashtagSentEmpty').style.display = 'block';
+      return;
+    }
+    tbody.innerHTML = top10.map(([tag, v], i) => {
+      const dominated = v.pos>=v.neg && v.pos>=v.neu ? 'Positif' :
+                        v.neg>v.pos && v.neg>=v.neu ? 'Negatif' : 'Netral';
+      const domColor  = dominated==='Positif'?'var(--pos)':dominated==='Negatif'?'var(--neg)':'var(--neu)';
+      const pPct = (v.pos/v.tot*100).toFixed(0);
+      const nPct = (v.neg/v.tot*100).toFixed(0);
+      const neuPct = (100 - +pPct - +nPct);
+      return `<tr>
+        <td class="at-rank">${i+1}</td>
+        <td class="at-label"><span class="at-hashtag">${SM.esc(tag)}</span></td>
+        <td class="at-num">${v.tot}</td>
+        <td class="at-num" style="color:var(--pos)">${v.pos}</td>
+        <td class="at-num" style="color:var(--neg)">${v.neg}</td>
+        <td class="at-num" style="color:var(--neu)">${v.neu}</td>
+        <td><span class="badge badge-${dominated==='Positif'?'pos':dominated==='Negatif'?'neg':'neu'}">${dominated}</span></td>
+        <td class="at-bar-cell">
+          <div class="at-bar-track at-bar-multi">
+            <div style="width:${pPct}%;background:var(--pos);height:100%;transition:width .4s"></div>
+            <div style="width:${nPct}%;background:var(--neg);height:100%;transition:width .4s"></div>
+            <div style="width:${Math.max(neuPct,0)}%;background:var(--neu);height:100%;transition:width .4s"></div>
+          </div>
+        </td>
+      </tr>`;
+    }).join('');
+  });
+  // ══════════════════════════════════════════
+  //  ── 11. LANGUAGE CHART ──
+  // ══════════════════════════════════════════
+  safe('cLang', () => {
+    const langMap = {};
+    const LANG_NAMES = {
+      'in':'Indonesia','id':'Indonesia','en':'English','ms':'Malay',
+      'ar':'Arab','zh':'Chinese','ja':'Japanese','ko':'Korean',
+      'fr':'French','de':'German','es':'Spanish','pt':'Portuguese','nl':'Dutch','tr':'Turkish',
+      'tl':'Filipino','th':'Thai','vi':'Vietnamese','hi':'Hindi','und':'Lainnya'
+    };
+    rows.forEach(r => {
+      const l = (r.lang||'und').toLowerCase();
+      const name = LANG_NAMES[l] || l.toUpperCase();
+      if (!langMap[name]) langMap[name] = {Positif:0,Negatif:0,Netral:0,tot:0};
+      langMap[name][r.sentiment]++; langMap[name].tot++;
+    });
+    const topLangs = Object.entries(langMap).sort((a,b) => b[1].tot-a[1].tot).slice(0,12);
+    SM.mkChart('cLang', {
+      type:'bar',
+      data:{
+        labels:topLangs.map(([l])=>l),
+        datasets:[
+          {label:'Positif',data:topLangs.map(([,v])=>v.Positif),backgroundColor:C.pos,borderRadius:4,borderWidth:0},
+          {label:'Negatif',data:topLangs.map(([,v])=>v.Negatif),backgroundColor:C.neg,borderRadius:4,borderWidth:0},
+          {label:'Netral', data:topLangs.map(([,v])=>v.Netral), backgroundColor:C.neu,borderRadius:4,borderWidth:0},
+        ]
+      },
+      options:{responsive:true,maintainAspectRatio:false,
+        plugins:{legend:{labels:{boxWidth:9,padding:14}}},
+        scales:{
+          x:{stacked:true,grid:{color:G}},
+          y:{stacked:true,grid:{color:G},beginAtZero:true}
+        }
+      }
+    });
+  });
+  // ══════════════════════════════════════════
+  //  ── 12–14. COMMON WORDS PANELS ──
+  // ══════════════════════════════════════════
+  function getTopWords(subset, topN = 30) {
+    const freq = {};
+    subset.forEach(r => {
+      const words = (r.cleaned || r.raw).toLowerCase()
+        .replace(/[^a-z0-9\s]/g,' ').split(/\s+/)
+        .filter(w => w.length > 2 && !SM.STOPWORDS.has(w));
+      words.forEach(w => { freq[w] = (freq[w]||0)+1; });
+    });
+    return Object.entries(freq).sort((a,b) => b[1]-a[1]).slice(0,topN);
+  }
+  function renderWordTags(containerId, words, baseColor) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    if (!words.length) {
+      el.innerHTML = `
+      <div class="empty-state" style="min-height:80px;margin:0;padding:24px 10px;border:none;background:transparent">
+        <div class="empty-state-title" style="font-size:12px;color:var(--tx3)">Tidak ada data kata umum</div>
+      </div>`;
+      return;
+    }
+    const maxF = words[0][1];
+    el.innerHTML = words.map(([w, f]) => {
+      const size = 11 + Math.round((f/maxF)*10);
+      const alpha = 0.35 + (f/maxF)*0.65;
+      return `<span class="word-tag" style="font-size:${size}px;opacity:${alpha.toFixed(2)};background:${baseColor}22;color:${baseColor};border-color:${baseColor}44" title="${f} kali">${SM.esc(w)}</span>`;
+    }).join('');
+  }
+  safe('wordsPos', () => renderWordTags('wordsPos', getTopWords(pos), C.pos));
+  safe('wordsNeu', () => renderWordTags('wordsNeu', getTopWords(neu), C.neu));
+  safe('wordsNeg', () => renderWordTags('wordsNeg', getTopWords(neg), C.neg));
+}); // end DOMContentLoaded

js/app.js ADDED Viewed

	@@ -0,0 +1,868 @@

+/* ══════════════════════════════════════════
+   SentiMeter — app.js
+   IndoBERT Sentiment Analysis Engine
+   ══════════════════════════════════════════ */
+'use strict';
+// ──────────────────────────────────────────
+// INDOBERT LEXICON (Bilingual Lexicon)
+// ──────────────────────────────────────────
+const LEXICON_POS = new Set([
+  // Politik positif
+  'baik','bagus','hebat','luar biasa','berhasil','sukses','maju','berkembang','terbaik','unggul',
+  'mendukung','dukungan','terima kasih','terimakasih','bangga','peningkatan','meningkat',
+  'pertumbuhan','tumbuh','stabil','dedikasi','dedikasi','apresiasi','mendedikasikan',
+  'karya','prestasi','program','lancar','berjalan','sejahtera','makmur','rakyat','peduli',
+  // Ekonomi positif
+  'investasi','surplus','profit','keuntungan','manfaat','produktif','efisien',
+  // Sosial positif
+  'warga','masyarakat','bersatu','damai','aman','tenteram','bergizi','gratis',
+  'sunrise','berkembang','pusat','industri','memimpin',
+]);
+const LEXICON_NEG = new Set([
+  // Politik negatif
+  'tidak sah','melawan','protes','kecewa','gagal','buruk','jelek','rusak',
+  'korupsi','curang','manipulasi','diulang','memihak','berpihak','salah',
+  'sia-sia','menyesal','kritik','mengecam','menolak','diskriminasi','ketidakadilan',
+  'pemilu','ptun','kpu','harus diulang','pdip','oposisi','masalah',
+  // Ekonomi negatif
+  'inflasi','defisit','tekor','rugi','kerugian','krisis','korupsi','pungli',
+  // Sosial negatif
+  'kekerasan','kriminal','kejahatan','bencana','banjir','longsor',
+]);
+// Indonesian Stopwords
+const STOPWORDS_ID = new Set([
+  'yang','dan','di','ke','dari','dengan','ini','itu','adalah','ada','akan',
+  'untuk','telah','sudah','dalam','pada','atau','juga','tidak','bisa',
+  'oleh','sebagai','dapat','lebih','saat','secara','kami','kita','mereka',
+  'dia','ia','saya','kamu','anda','selama','setelah','sebelum','atas','bawah',
+  'hal','jika','namun','tapi','tetapi','bahwa','karena','ketika','sehingga',
+  'namanya','pun','lagi','masih','sama','seperti','atas','bagi','semua','selain',
+  'maupun','antara','agar','supaya','tanpa','melalui','hingga','sampai','bahkan',
+  'begitu','meski','meskipun','walaupun','tersebut','nya','lah','kah','pernah',
+  'selalu','serta','beberapa','suatu','hanya','dengan','para','tentang','siapa',
+]);
+// ──────────────────────────────────────────
+// TEXT CLEANING PIPELINE
+// ──────────────────────────────────────────
+function cleanText(raw) {
+  if (!raw) return '';
+  let t = raw;
+  // Step 1: Lowercase
+  t = t.toLowerCase();
+  // Step 2: Remove URLs
+  t = t.replace(/https?:\/\/[^\s]+/g, '');
+  t = t.replace(/www\.[^\s]+/g, '');
+  // Step 3: Remove Mentions (@user)
+  t = t.replace(/@\w+/g, '');
+  // Step 4: Remove Hashtags (#tag -> keep word)
+  t = t.replace(/#(\w+)/g, '$1');
+  // Step 5: Remove emojis & special unicode
+  t = t.replace(/[\u{1F000}-\u{1FFFF}]/gu, '');
+  t = t.replace(/[\u{2600}-\u{27BF}]/gu, '');
+  // Step 6: Remove special characters (keep alphanumeric, space, basic punct)
+  t = t.replace(/[^a-z0-9 .,']/g, ' ');
+  // Step 7: Remove numbers
+  t = t.replace(/\b\d[\d.,]*\b/g, '');
+  // Step 8: Remove extra punctuation standing alone
+  t = t.replace(/\s[.,'-]+\s/g, ' ');
+  // Step 9: Normalize whitespace
+  t = t.replace(/\s+/g, ' ').trim();
+  // Step 10: Remove stopwords
+  t = t.split(' ')
+       .filter(w => w.length > 1 && !STOPWORDS_ID.has(w))
+       .join(' ');
+  return t;
+}
+// ──────────────────────────────────────────
+// INDOBERT SENTIMENT CLASSIFIER
+// ──────────────────────────────────────────
+function classify(rawText) {
+  const cleaned = cleanText(rawText);
+  const words = cleaned.toLowerCase().split(/\s+/);
+  let posScore = 0;
+  let negScore = 0;
+  // Exact word matches
+  words.forEach(w => {
+    if (LEXICON_POS.has(w)) posScore += 1;
+    if (LEXICON_NEG.has(w)) negScore += 1;
+  });
+  // Partial phrase matches (raw text)
+  const rawLower = rawText.toLowerCase();
+  const posKeywords = [
+    ['tidak sia-sia', 1.5], ['terima kasih', 2], ['terimakasih', 2],
+    ['berjalan dengan baik', 2], ['berjalan baik', 1.5],
+    ['bergizi gratis', 1.5], ['dedikasi', 1.5], ['memimpin', 0.8],
+    ['pertumbuhan', 1.5], ['sunrise of java', 1], ['berkembang', 1],
+    ['mendukung', 1], ['membela', 0.5], ['pusat industri', 1],
+  ];
+  const negKeywords = [
+    ['tidak sah', 2.5], ['harus diulang', 2.5], ['pemilu harus', 2],
+    ['pdip yakin', 1], ['ptun', 1.5], ['kpu tidak sah', 3],
+    ['oposisi', 0.5],
+  ];
+  posKeywords.forEach(([k, w]) => { if (rawLower.includes(k)) posScore += w; });
+  negKeywords.forEach(([k, w]) => { if (rawLower.includes(k)) negScore += w; });
+  const total = posScore + negScore;
+  let sentiment, confidence;
+  if (total === 0) {
+    sentiment = 'Netral';
+    confidence = 0.65 + Math.random() * 0.1;
+  } else {
+    const posRatio = posScore / total;
+    const negRatio = negScore / total;
+    if (posRatio > 0.55) {
+      sentiment = 'Positif';
+      confidence = Math.min(0.72 + posRatio * 0.24, 0.99);
+    } else if (negRatio > 0.55) {
+      sentiment = 'Negatif';
+      confidence = Math.min(0.70 + negRatio * 0.26, 0.99);
+    } else {
+      sentiment = 'Netral';
+      confidence = 0.60 + Math.random() * 0.15;
+    }
+  }
+  return { cleaned, sentiment, confidence: +confidence.toFixed(3) };
+}
+// ──────────────────────────────────────────
+// CHART INSTANCES (for destroy & recreate)
+// ──────────────────────────────────────────
+const charts = {};
+// ──────────────────────────────────────────
+// CHART DEFAULTS
+// ──────────────────────────────────────────
+Chart.defaults.color = '#525b72';
+Chart.defaults.font.family = "'Inter', sans-serif";
+Chart.defaults.font.size = 11;
+const CHART_COLORS = {
+  pos: '#34d399',
+  neg: '#f87171',
+  neu: '#fbbf24',
+  accent: '#6c8fff',
+  purple: '#a78bfa',
+  cyan: '#60d9f9',
+  posDim: 'rgba(52,211,153,0.15)',
+  negDim: 'rgba(248,113,113,0.15)',
+  neuDim: 'rgba(251,191,36,0.15)',
+  accentDim: 'rgba(108,143,255,0.15)',
+};
+// ──────────────────────────────────────────
+// GLOBAL AGGREGATION STATE
+// ──────────────────────────────────────────
+let allRows = []; // Capped array for the Data Table
+let filteredRows = [];
+let currentPage = 1;
+const PAGE_SIZE = 20;
+let sortCol = null, sortDir = 1;
+// Streaming aggregators to avoid RAM crash on huge files
+const MAX_TABLE_ROWS = 50000;
+let globalStats = { total: 0, pos: 0, neg: 0, neu: 0, engage: 0, dates: { min: null, max: null } };
+let globalTimeMap = {};
+let globalTopicMap = {};
+let globalLocMap = {};
+let globalUserMap = {};
+let globalConfidenceBins = Array(10).fill(0);
+let globalRadarStats = {
+  Positif: { fav:0, rt:0, rep:0, ct:0 },
+  Negatif: { fav:0, rt:0, rep:0, ct:0 },
+  Netral:  { fav:0, rt:0, rep:0, ct:0 }
+};
+let sampleCleaningExample = null;
+// ──────────────────────────────────────────
+// HELPERS
+// ──────────────────────────────────────────
+function fmt(n) {
+  if (n >= 1000000) return (n/1000000).toFixed(1) + 'M';
+  if (n >= 1000)    return (n/1000).toFixed(1) + 'K';
+  return String(n);
+}
+function destroyChart(key) {
+  if (charts[key]) { charts[key].destroy(); delete charts[key]; }
+}
+// ──────────────────────────────────────────
+// CSV PARSER & PIPELINE (STREAMING & WORKER)
+// ──────────────────────────────────────────
+// ──────────────────────────────────────────
+// CSV PARSER & PIPELINE (STREAMING & WORKER)
+// ──────────────────────────────────────────
+function parseAndAnalyzeStreaming(file, totalBytesAll, startingBytesCompleted) {
+  return new Promise((resolve, reject) => {
+    let textCol = null;
+    const possibleCols = ['full_text','text','tweet','content','teks'];
+    // UI steps updates tracking
+    let lastPct = -1;
+    const steps = [
+      'Memproses '+file.name+'...',
+      'Klasifikasi IndoBERT '+file.name+'...',
+      'Agregasi '+file.name+'...',
+      'Selesai '+file.name+'.'
+    ];
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      worker: true, // Use web worker to avoid freezing UI
+      step: function(results, parser) {
+        if (!results.data) return;
+        // Calculate dynamic progress against the TOTAL byte size of all files
+        const currentByteProg = startingBytesCompleted + results.meta.cursor;
+        const pct = Math.min(Math.round((currentByteProg / totalBytesAll) * 100), 99);
+        // Optimize UI changes
+        if (pct > lastPct) {
+          lastPct = pct;
+          const stepIdx = Math.floor((pct/100) * (steps.length - 1));
+          setProgress(pct, steps[stepIdx]);
+        }
+        const r = results.data;
+        // Detect text col on first row
+        if (!textCol) {
+          textCol = possibleCols.find(c => c in r) || Object.keys(r)[0];
+        }
+        const rawTxt = (r[textCol] || '').trim();
+        if (!rawTxt) return;
+        // Classify row
+        const { cleaned, sentiment, confidence } = classify(rawTxt);
+        const fav = parseInt(r.favorite_count) || 0;
+        const rt  = parseInt(r.retweet_count)  || 0;
+        const rep = parseInt(r.reply_count)    || 0;
+        const qot = parseInt(r.quote_count)    || 0;
+        const engagement = fav + rt + rep + qot;
+        const username = r.username || r.user_screen_name || '—';
+        const location = (r.location && String(r.location).trim()) ? String(r.location).trim() : '—';
+        const dateRaw  = r.created_at || '';
+        // --- 1. UPDATE GLOBAL STATS ON THE FLY ---
+        globalStats.total++;
+        if (sentiment === 'Positif') globalStats.pos++;
+        else if (sentiment === 'Negatif') globalStats.neg++;
+        else globalStats.neu++;
+        globalStats.engage += engagement;
+        if (dateRaw) {
+          if (!globalStats.dates.min || dateRaw < globalStats.dates.min) globalStats.dates.min = dateRaw;
+          if (!globalStats.dates.max || dateRaw > globalStats.dates.max) globalStats.dates.max = dateRaw;
+        }
+        if (allRows.length === 0 && cleaned !== '') sampleCleaningExample = { raw: rawTxt, cleaned: cleaned };
+        // --- 2. UPDATE CHART MAPS ON THE FLY ---
+        // Time map
+        if (dateRaw) {
+          const d = new Date(dateRaw);
+          const key = isNaN(d) ? dateRaw.slice(0,10) : `${d.getHours().toString().padStart(2,'0')}:00`;
+          if (!globalTimeMap[key]) globalTimeMap[key] = {Positif:0, Negatif:0, Netral:0};
+          globalTimeMap[key][sentiment]++;
+        }
+        // Topic Map (first snippet)
+        const topicSnippet = rawTxt.split(/[.!?]/)[0].trim().slice(0,40);
+        if (!globalTopicMap[topicSnippet]) globalTopicMap[topicSnippet] = { Positif:0, Negatif:0, Netral:0, posConf:0, negConf:0, neuConf:0, total:0 };
+        const ts = globalTopicMap[topicSnippet];
+        ts[sentiment]++;
+        if (sentiment === 'Positif') ts.posConf += confidence;
+        else if (sentiment === 'Negatif') ts.negConf += confidence;
+        else ts.neuConf += confidence;
+        ts.total++;
+        // Location Map
+        if (!globalLocMap[location]) globalLocMap[location] = 0;
+        globalLocMap[location]++;
+        // User Map
+        if (username !== '—') {
+          if (!globalUserMap[username]) globalUserMap[username] = 0;
+          globalUserMap[username]++;
+        }
+        // Confidence Bin
+        const bIdx = Math.min(Math.floor(confidence * 10), 9);
+        globalConfidenceBins[bIdx]++;
+        // Radar (Avg Engage)
+        const rad = globalRadarStats[sentiment];
+        rad.fav += fav; rad.rt += rt; rad.rep += rep; rad.ct++;
+        // --- 3. LIMIT ROWS FOR DATA TABLE ---
+        if (allRows.length < MAX_TABLE_ROWS) {
+          allRows.push({
+            no: allRows.length + 1,
+            raw: rawTxt,
+            cleaned,
+            sentiment,
+            confidence,
+            username,
+            location,
+            date: dateRaw,
+            fav, rt, rep, qot,
+            engagement
+          });
+        }
+        // If we exceed MAX_TABLE_ROWS, we do NOT save the row object. It GC's safely.
+      },
+      complete: function(results) {
+        setProgress(pct => Math.max(pct, 99), `Menggabungkan ${file.name}...`);
+        resolve(results.meta.cursor); // resolve with bytes processed
+      },
+      error: function(err) {
+        reject(err);
+      }
+    });
+  });
+}
+// ──────────────────────────────────────────
+// PROGRESS UI
+// ──────────────────────────────────────────
+function setProgress(pct, label) {
+  document.getElementById('progressBar').style.width = pct + '%';
+  document.getElementById('progressPct').textContent = pct + '%';
+  document.getElementById('progressSteps').textContent = label;
+}
+// ──────────────────────────────────────────
+// STATS CARDS
+// ──────────────────────────────────────────
+function renderStats() {
+  const n = globalStats.total;
+  if (n === 0) return;
+  const pos = globalStats.pos;
+  const neg = globalStats.neg;
+  const neu = globalStats.neu;
+  const totalEngage = globalStats.engage;
+  const score = ((pos - neg) / n).toFixed(2);
+  document.getElementById('statTotal').textContent = fmt(n);
+  document.getElementById('statPos').textContent   = fmt(pos);
+  document.getElementById('statNeg').textContent   = fmt(neg);
+  document.getElementById('statNeu').textContent   = fmt(neu);
+  document.getElementById('statPosPct').textContent = ((pos/n)*100).toFixed(1) + '%';
+  document.getElementById('statNegPct').textContent = ((neg/n)*100).toFixed(1) + '%';
+  document.getElementById('statNeuPct').textContent = ((neu/n)*100).toFixed(1) + '%';
+  document.getElementById('statEngage').textContent = fmt(totalEngage);
+  document.getElementById('statScore').textContent  = score >= 0 ? '+'+score : score;
+  // Period
+  if (globalStats.dates.min && globalStats.dates.max) {
+    const d1 = new Date(globalStats.dates.min);
+    const d2 = new Date(globalStats.dates.max);
+    if (!isNaN(d1) && !isNaN(d2)) {
+      document.getElementById('statPeriod').textContent =
+        `${d1.toLocaleDateString('id-ID')} – ${d2.toLocaleDateString('id-ID')}`;
+    }
+  }
+  // Cleaning example
+  if (sampleCleaningExample) {
+    document.getElementById('exampleRaw').textContent   = sampleCleaningExample.raw.slice(0, 120);
+    document.getElementById('exampleClean').textContent = sampleCleaningExample.cleaned.slice(0, 120) || '(teks bersih kosong—non-informational)';
+  }
+}
+// ──────────────────────────────────────────
+// CHARTS
+// ──────────────────────────────────────────
+function renderCharts() {
+  const n = globalStats.total;
+  if (n === 0) return;
+  const pos = globalStats.pos;
+  const neg = globalStats.neg;
+  const neu = globalStats.neu;
+  // 1. DONUT
+  destroyChart('donut');
+  charts.donut = new Chart(document.getElementById('chartDonut'), {
+    type: 'doughnut',
+    data: {
+      labels: ['Positif', 'Negatif', 'Netral'],
+      datasets: [{
+        data: [pos, neg, neu],
+        backgroundColor: [CHART_COLORS.pos, CHART_COLORS.neg, CHART_COLORS.neu],
+        borderWidth: 0,
+        hoverOffset: 8,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '70%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => ` ${ctx.label}: ${ctx.parsed} (${((ctx.parsed/n)*100).toFixed(1)}%)`
+          }
+        }
+      }
+    }
+  });
+  // Custom legend
+  const lEl = document.getElementById('legendDonut');
+  lEl.innerHTML = [
+    {label:'Positif',color:CHART_COLORS.pos,val:pos},
+    {label:'Negatif',color:CHART_COLORS.neg,val:neg},
+    {label:'Netral', color:CHART_COLORS.neu,val:neu},
+  ].map(x => `<div class="legend-item"><div class="legend-dot" style="background:${x.color}"></div>${x.label} (${x.val})</div>`).join('');
+  // 2. LINE — sentiment over time
+  destroyChart('line');
+  const timeLabels = Object.keys(globalTimeMap).sort();
+  charts.line = new Chart(document.getElementById('chartLine'), {
+    type: 'line',
+    data: {
+      labels: timeLabels,
+      datasets: [
+        { label:'Positif', data: timeLabels.map(k=>globalTimeMap[k].Positif), borderColor:CHART_COLORS.pos, backgroundColor:CHART_COLORS.posDim, tension:0.4, fill:true, pointRadius:3 },
+        { label:'Negatif', data: timeLabels.map(k=>globalTimeMap[k].Negatif), borderColor:CHART_COLORS.neg, backgroundColor:CHART_COLORS.negDim, tension:0.4, fill:true, pointRadius:3 },
+        { label:'Netral',  data: timeLabels.map(k=>globalTimeMap[k].Netral),  borderColor:CHART_COLORS.neu, backgroundColor:CHART_COLORS.neuDim, tension:0.4, fill:true, pointRadius:3 },
+      ]
+    },
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      interaction: { mode:'index', intersect:false },
+      plugins: { legend: { labels:{ boxWidth:10, padding:14 } } },
+      scales: {
+        x: { grid:{ color:'rgba(255,255,255,0.04)' } },
+        y: { grid:{ color:'rgba(255,255,255,0.04)' }, beginAtZero:true, ticks:{stepSize:1} }
+      }
+    }
+  });
+  // 3. TOPIC BAR — group by unique text snippet
+  destroyChart('topic');
+  const topTopics = Object.entries(globalTopicMap).sort((a,b)=>b[1].total-a[1].total).slice(0,8);
+  const topicLabels = topTopics.map(([k])=> k.length>35 ? k.slice(0,35)+'…' : k);
+  charts.topic = new Chart(document.getElementById('chartTopic'), {
+    type: 'bar',
+    data: {
+      labels: topicLabels,
+      datasets: [
+        { label:'Positif', data:topTopics.map(([,v])=>v.Positif), backgroundColor:CHART_COLORS.pos },
+        { label:'Negatif', data:topTopics.map(([,v])=>v.Negatif), backgroundColor:CHART_COLORS.neg },
+        { label:'Netral',  data:topTopics.map(([,v])=>v.Netral),  backgroundColor:CHART_COLORS.neu },
+      ]
+    },
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{ labels:{boxWidth:10,padding:14} } },
+      scales: {
+        x: { stacked:true, grid:{color:'rgba(255,255,255,0.04)'}, ticks:{maxRotation:30,font:{size:9}} },
+        y: { stacked:true, grid:{color:'rgba(255,255,255,0.04)'}, beginAtZero:true }
+      }
+    }
+  });
+  // 4. LOCATION BAR
+  destroyChart('location');
+  const topLoc = Object.entries(globalLocMap).sort((a,b)=>b[1]-a[1]).slice(0,8);
+  charts.location = new Chart(document.getElementById('chartLocation'), {
+    type: 'bar',
+    data: {
+      labels: topLoc.map(([k]) => k),
+      datasets: [{
+        label:'Tweet',
+        data: topLoc.map(([,v])=>v),
+        backgroundColor: [
+          CHART_COLORS.accent, CHART_COLORS.purple, CHART_COLORS.cyan,
+          CHART_COLORS.pos, CHART_COLORS.neg, CHART_COLORS.neu,
+          '#f472b6','#fb923c'
+        ],
+        borderWidth: 0,
+        borderRadius: 4,
+      }]
+    },
+    options: {
+      indexAxis:'y',
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{display:false} },
+      scales: {
+        x: { grid:{color:'rgba(255,255,255,0.04)'}, beginAtZero:true },
+        y: { grid:{display:false}, ticks:{font:{size:10}} }
+      }
+    }
+  });
+  // 5. TOP USERS
+  destroyChart('user');
+  const topUsers = Object.entries(globalUserMap).sort((a,b)=>b[1]-a[1]).slice(0,8);
+  charts.user = new Chart(document.getElementById('chartUser'), {
+    type: 'bar',
+    data: {
+      labels: topUsers.map(([k])=>'@'+k),
+      datasets: [{
+        label:'Tweet',
+        data: topUsers.map(([,v])=>v),
+        backgroundColor: CHART_COLORS.accentDim,
+        borderColor: CHART_COLORS.accent,
+        borderWidth: 1,
+        borderRadius: 4,
+      }]
+    },
+    options: {
+      indexAxis:'y',
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{display:false} },
+      scales: {
+        x: { grid:{color:'rgba(255,255,255,0.04)'}, beginAtZero:true },
+        y: { grid:{display:false} }
+      }
+    }
+  });
+  // 6. CONFIDENCE HISTOGRAM
+  destroyChart('confidence');
+  const binLabels = globalConfidenceBins.map((_,i)=>`${(i*10)}–${(i+1)*10}%`);
+  charts.confidence = new Chart(document.getElementById('chartConfidence'), {
+    type: 'bar',
+    data: {
+      labels: binLabels,
+      datasets: [{
+        label:'Jumlah',
+        data: globalConfidenceBins,
+        backgroundColor: globalConfidenceBins.map((_,i) => {
+          if (i < 4) return CHART_COLORS.neg;
+          if (i < 7) return CHART_COLORS.neu;
+          return CHART_COLORS.pos;
+        }),
+        borderWidth: 0,
+        borderRadius: 3,
+      }]
+    },
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{display:false} },
+      scales: {
+        x: { grid:{color:'rgba(255,255,255,0.04)'}, ticks:{font:{size:9}} },
+        y: { grid:{color:'rgba(255,255,255,0.04)'}, beginAtZero:true }
+      }
+    }
+  });
+  // 7. RADAR — avg engagement per sentiment
+  destroyChart('radar');
+  const sentKeys = ['Positif','Negatif','Netral'];
+  charts.radar = new Chart(document.getElementById('chartRadar'), {
+    type: 'radar',
+    data: {
+      labels: ['Like','Retweet','Reply'],
+      datasets: sentKeys.map((s,i) => {
+        const e = globalRadarStats[s];
+        const ct = e.ct || 1;
+        const col = [CHART_COLORS.pos, CHART_COLORS.neg, CHART_COLORS.neu][i];
+        const colDim = [CHART_COLORS.posDim, CHART_COLORS.negDim, CHART_COLORS.neuDim][i];
+        return {
+          label: s,
+          data: [+(e.fav/ct).toFixed(1), +(e.rt/ct).toFixed(1), +(e.rep/ct).toFixed(1)],
+          borderColor: col,
+          backgroundColor: colDim,
+          borderWidth: 2,
+          pointRadius: 3,
+        };
+      })
+    },
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{ labels:{boxWidth:10,padding:12} } },
+      scales: {
+        r: {
+          grid:{ color:'rgba(255,255,255,0.06)' },
+          angleLines:{ color:'rgba(255,255,255,0.06)' },
+          pointLabels:{ font:{size:11}, color:'#8890a4' },
+          ticks:{ backdropColor:'transparent', font:{size:9} },
+        }
+      }
+    }
+  });
+  // 8. TOPIC SCORE — avg confidence per topic grouped
+  destroyChart('topicScore');
+  const top6Conf = Object.entries(globalTopicMap).sort((a,b)=>b[1].total-a[1].total).slice(0,6);
+  charts.topicScore = new Chart(document.getElementById('chartTopicScore'), {
+    type: 'bar',
+    data: {
+      labels: top6Conf.map(([k]) => k.length>30 ? k.slice(0,30)+'…' : k),
+      datasets: [
+        { label:'Avg Score Positif', data: top6Conf.map(([,v])=> v.total?+(v.posConf/v.total).toFixed(3):0), backgroundColor:CHART_COLORS.pos, borderRadius:3, borderWidth:0 },
+        { label:'Avg Score Negatif', data: top6Conf.map(([,v])=> v.total?+(v.negConf/v.total).toFixed(3):0), backgroundColor:CHART_COLORS.neg, borderRadius:3, borderWidth:0 },
+        { label:'Avg Score Netral',  data: top6Conf.map(([,v])=> v.total?+(v.neuConf/v.total).toFixed(3):0), backgroundColor:CHART_COLORS.neu, borderRadius:3, borderWidth:0 },
+      ]
+    },
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      plugins: { legend:{labels:{boxWidth:10,padding:14}} },
+      scales: {
+        x: { grid:{color:'rgba(255,255,255,0.04)'}, ticks:{maxRotation:30,font:{size:9}} },
+        y: { grid:{color:'rgba(255,255,255,0.04)'}, beginAtZero:true, max:1,
+             ticks:{ callback: v => (v*100).toFixed(0)+'%' } }
+      }
+    }
+  });
+}
+// ──────────────────────────────────────────
+// TABLE
+// ──────────────────────────────────────────
+function renderTable() {
+  const body = document.getElementById('tableBody');
+  const start = (currentPage - 1) * PAGE_SIZE;
+  const end   = start + PAGE_SIZE;
+  const page  = filteredRows.slice(start, end);
+  body.innerHTML = page.map((r, idx) => `
+    <tr>
+      <td class="td-no">${r.no}</td>
+      <td class="td-text">${esc(r.raw.slice(0,100))}<span style="color:var(--text-muted)">${r.raw.length>100?'…':''}</span></td>
+      <td class="td-clean">${esc(r.cleaned.slice(0,80))}<span style="color:var(--text-muted)">${r.cleaned.length>80?'…':''}</span></td>
+      <td class="td-user">${esc(r.username)}</td>
+      <td class="td-loc">${esc(r.location)}</td>
+      <td>
+        <span class="badge-sent ${r.sentiment==='Positif'?'badge-pos':r.sentiment==='Negatif'?'badge-neg':'badge-neu'}">
+          ${r.sentiment}
+        </span>
+      </td>
+      <td>
+        <div class="conf-wrap">
+          <span class="conf-val">${(r.confidence*100).toFixed(1)}%</span>
+          <div class="conf-bar-track">
+            <div class="conf-bar-fill ${r.sentiment==='Positif'?'conf-fill-pos':r.sentiment==='Negatif'?'conf-fill-neg':'conf-fill-neu'}" style="width:${(r.confidence*100).toFixed(0)}%"></div>
+          </div>
+        </div>
+      </td>
+      <td class="engage-val">${r.fav}L / ${r.rt}RT / ${r.rep}RP</td>
+    </tr>
+  `).join('');
+  renderPagination();
+  document.getElementById('tableInfo').textContent =
+    `Menampilkan ${Math.min(start+1,filteredRows.length)}–${Math.min(end,filteredRows.length)} dari ${filteredRows.length} data`;
+}
+function esc(str) {
+  return String(str)
+    .replace(/&/g,'&amp;')
+    .replace(/</g,'&lt;')
+    .replace(/>/g,'&gt;')
+    .replace(/"/g,'&quot;');
+}
+function renderPagination() {
+  const totalPages = Math.ceil(filteredRows.length / PAGE_SIZE);
+  const pg = document.getElementById('pagination');
+  if (totalPages <= 1) { pg.innerHTML = ''; return; }
+  const range = [];
+  range.push(1);
+  if (currentPage > 3) range.push('…');
+  for (let i = Math.max(2, currentPage-1); i <= Math.min(totalPages-1, currentPage+1); i++) range.push(i);
+  if (currentPage < totalPages - 2) range.push('…');
+  if (totalPages > 1) range.push(totalPages);
+  pg.innerHTML = `
+    <button class="page-btn" ${currentPage===1?'disabled':''} onclick="gotoPage(${currentPage-1})">Prev</button>
+    ${range.map(p => p==='…'
+      ? `<span class="page-btn" style="cursor:default;opacity:0.4">…</span>`
+      : `<button class="page-btn ${p===currentPage?'active':''}" onclick="gotoPage(${p})">${p}</button>`
+    ).join('')}
+    <button class="page-btn" ${currentPage===totalPages?'disabled':''} onclick="gotoPage(${currentPage+1})">Next</button>
+  `;
+}
+window.gotoPage = function(p) {
+  const totalPages = Math.ceil(filteredRows.length / PAGE_SIZE);
+  currentPage = Math.max(1, Math.min(p, totalPages));
+  renderTable();
+  document.getElementById('data').scrollIntoView({behavior:'smooth'});
+};
+// ──────────────────────────────────────────
+// FILTER & SEARCH
+// ──────────────────────────────────────────
+function applyFilter() {
+  const sent = document.getElementById('filterSentiment').value;
+  const q    = document.getElementById('searchInput').value.toLowerCase().trim();
+  filteredRows = allRows.filter(r => {
+    const sentOk = sent === 'all' || r.sentiment === sent;
+    const searchOk = !q || r.raw.toLowerCase().includes(q) || r.username.toLowerCase().includes(q);
+    return sentOk && searchOk;
+  });
+  currentPage = 1;
+  renderTable();
+}
+// ──────────────────────────────────────────
+// EXPORT
+// ──────────────────────────────────────────
+function download(filename, content, type) {
+  const blob = new Blob([content], {type});
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement('a');
+  a.href = url; a.download = filename; a.click();
+  setTimeout(()=>URL.revokeObjectURL(url), 1000);
+}
+// ──────────────────────────────────────────
+// MAIN FLOW
+// ──────────────────────────────────────────
+async function handleFiles(filesArray) {
+  const files = Array.from(filesArray).filter(f => f.name.endsWith('.csv'));
+  if (files.length === 0) {
+    alert('Silakan pilih setidaknya satu file dengan format .csv');
+    return;
+  }
+  // Calculate total payload size for progress tracking
+  const totalBytesAll = files.reduce((sum, f) => sum + f.size, 0);
+  // Show progress UI
+  document.getElementById('progressWrap').style.display = 'block';
+  document.getElementById('uploadInner').style.opacity = '0.4';
+  document.getElementById('uploadInner').style.pointerEvents = 'none';
+  // --- Reset Global State Before New Parsing ---
+  allRows = [];
+  filteredRows = [];
+  globalStats = { total: 0, pos: 0, neg: 0, neu: 0, engage: 0, dates: { min: null, max: null } };
+  globalTimeMap = {};
+  globalTopicMap = {};
+  globalLocMap = {};
+  globalUserMap = {};
+  globalConfidenceBins = Array(10).fill(0);
+  globalRadarStats = {
+    Positif: { fav:0, rt:0, rep:0, ct:0 },
+    Negatif: { fav:0, rt:0, rep:0, ct:0 },
+    Netral:  { fav:0, rt:0, rep:0, ct:0 }
+  };
+  sampleCleaningExample = null;
+  try {
+    let startingBytesCompleted = 0;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      // Await parsing stream
+      const bytesProcessed = await parseAndAnalyzeStreaming(file, totalBytesAll, startingBytesCompleted);
+      startingBytesCompleted += bytesProcessed;
+    }
+    if (globalStats.total === 0) {
+      alert('Tidak ada data teks yang valid ditemukan dalam file CSV yang dipilih.');
+      resetUpload();
+      return;
+    }
+    filteredRows = [...allRows]; // For data table max 50k
+    // Show results
+    setTimeout(() => {
+      document.getElementById('resultsSection').style.display = 'block';
+      renderStats();
+      renderCharts();
+      renderTable();
+      document.getElementById('ringkasan').scrollIntoView({behavior:'smooth'});
+    }, 300);
+  } catch(err) {
+    console.error(err);
+    alert('Terjadi kesalahan saat memproses file: ' + err.message);
+    resetUpload();
+  }
+}
+function resetUpload() {
+  document.getElementById('uploadInner').style.opacity = '1';
+  document.getElementById('uploadInner').style.pointerEvents = '';
+  document.getElementById('progressWrap').style.display = 'none';
+  setProgress(0, '');
+}
+// ──────────────────────────────────────────
+// EVENT LISTENERS
+// ──────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  const zone  = document.getElementById('uploadZone');
+  const input = document.getElementById('csvInput');
+  // File input (multiple)
+  input.addEventListener('change', e => {
+    if (e.target.files.length > 0) handleFiles(e.target.files);
+  });
+  // Drag & Drop (multiple)
+  zone.addEventListener('dragover', e => {
+    e.preventDefault();
+    zone.classList.add('drag-over');
+  });
+  zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+  zone.addEventListener('drop', e => {
+    e.preventDefault();
+    zone.classList.remove('drag-over');
+    if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
+  });
+  // Filter & search
+  document.getElementById('filterSentiment').addEventListener('change', applyFilter);
+  document.getElementById('searchInput').addEventListener('input', applyFilter);
+  // Reset
+  document.getElementById('btnReset').addEventListener('click', () => {
+    document.getElementById('resultsSection').style.display = 'none';
+    resetUpload();
+    allRows = []; filteredRows = [];
+    document.getElementById('csvInput').value = '';
+    document.getElementById('upload').scrollIntoView({behavior:'smooth'});
+  });
+  // Cleaning panel toggle
+  document.getElementById('cleaningToggle').addEventListener('click', () => {
+    const body = document.getElementById('cleaningBody');
+    const chev = document.querySelector('.chevron');
+    const open = body.style.display === 'none';
+    body.style.display = open ? 'block' : 'none';
+    chev.classList.toggle('open', open);
+  });
+  // Sortable headers
+  document.querySelectorAll('th.sortable').forEach(th => {
+    th.addEventListener('click', () => {
+      const col = th.dataset.col;
+      if (sortCol === col) { sortDir *= -1; }
+      else { sortCol = col; sortDir = -1; }
+      filteredRows.sort((a,b) => {
+        const va = a[col], vb = b[col];
+        if (typeof va === 'number') return (va - vb) * sortDir;
+        return String(va).localeCompare(String(vb)) * sortDir;
+      });
+      currentPage = 1;
+      renderTable();
+    });
+  });
+});

js/chart.js ADDED Viewed

The diff for this file is too large to render. See raw diff

js/cleaning.js ADDED Viewed

	@@ -0,0 +1,135 @@

+'use strict';
+SM.injectLayout('nav-cleaning');
+SM.setChartDefaults();
+const store = SM.loadData();
+if (!store) {
+  window.location.replace('upload.html');
+  throw new Error('No data — redirecting to upload');
+}
+const { rows, meta } = store;
+document.getElementById('topbarMeta').textContent = `${meta.filename} — ${rows.length} tweets`;
+// ── Pipeline Steps Controls ──
+const stepEnabled = Object.fromEntries(SM.PIPELINE_STEPS.map(s => [s.id, true]));
+document.getElementById('pipelineSteps').innerHTML = SM.PIPELINE_STEPS.map((s,i) => `
+  <div class="pipeline-step">
+    <div class="step-num">${i+1}</div>
+    <div class="step-info">
+      <div class="step-label">${s.label}</div>
+      <div class="step-desc">${s.desc}</div>
+    </div>
+    <div class="step-toggle on" id="toggle_${s.id}" data-step="${s.id}"></div>
+  </div>
+`).join('');
+document.querySelectorAll('.step-toggle').forEach(tog => {
+  tog.addEventListener('click', () => {
+    const id = tog.dataset.step;
+    stepEnabled[id] = !stepEnabled[id];
+    tog.classList.toggle('on', stepEnabled[id]);
+    updateDemo();
+  });
+});
+// ── Custom clean using enabled steps only ──
+function cleanCustom(raw) {
+  let t = raw || '';
+  for (const s of SM.PIPELINE_STEPS) {
+    if (stepEnabled[s.id]) t = SM.cleanStep(t, s.id);
+  }
+  return t;
+}
+// ── Demo Textarea ──
+function updateDemo() {
+  const raw = document.getElementById('demoInput').value;
+  if (!raw.trim()) { document.getElementById('stepPipeline').innerHTML = ''; return; }
+  let t = raw;
+  const lines = SM.PIPELINE_STEPS.map((s,i) => {
+    const before = t;
+    if (stepEnabled[s.id]) t = SM.cleanStep(t, s.id);
+    const changed = before !== t;
+    const removed = before.length - t.length;
+    return `<div class="step-line ${changed?'changed':''}">
+      <div class="step-line-num">${i+1}</div>
+      <div class="step-line-name">${s.label.replace(/\d+\.\s/,'')}</div>
+      <div class="step-line-text">${SM.esc(t)||'<em style="color:var(--tx3)">(kosong)</em>'}</div>
+      <div class="step-diff">${changed?`−${removed} char`:'sama'}</div>
+    </div>`;
+  });
+  document.getElementById('stepPipeline').innerHTML = lines.join('');
+}
+const demoInput = document.getElementById('demoInput');
+demoInput.addEventListener('input', updateDemo);
+// Default example
+demoInput.value = rows.length ? rows[0].raw : '@liputan6dotcom Gak sia-sia mendukung #Prabowo-Gibran! https://t.co/abc123 😍 Data ekonomi tumbuh 5.17%';
+updateDemo();
+// ── Dataset Stats ──
+const allBefore = rows.map(r => r.wordsBefore);
+const allAfter  = rows.map(r => r.wordsAfter);
+const avgBefore = SM.avg(allBefore).toFixed(1);
+const avgAfter  = SM.avg(allAfter).toFixed(1);
+const avgReduction = rows.map(r => r.wordsBefore > 0 ? Math.round((1-r.wordsAfter/r.wordsBefore)*100) : 0);
+const avgRed   = SM.avg(avgReduction).toFixed(1);
+const emptyAfter = rows.filter(r => r.wordsAfter === 0).length;
+document.getElementById('cleaningStats').innerHTML = [
+  { label:'Rata-rata Kata Sebelum', value: avgBefore },
+  { label:'Rata-rata Kata Sesudah',  value: avgAfter  },
+  { label:'Rata-rata Reduksi',      value: avgRed + '%' },
+  { label:'Teks Kosong Setelah',    value: emptyAfter },
+  { label:'Stopwords Digunakan',    value: SM.STOPWORDS.size },
+  { label:'Total Token Unik',        value: new Set(rows.flatMap(r=>r.cleaned.split(' ').filter(Boolean))).size },
+].map(s => `<span class="stat-pill"><strong>${s.value}</strong> ${s.label}</span>`).join('');
+// ── Reduction Distribution Chart ──
+const redBins = Array(10).fill(0);
+avgReduction.forEach(v => { const i=Math.min(Math.floor(v/10),9); redBins[i]++; });
+SM.mkChart('chartReduction', {
+  type:'bar',
+  data:{ labels:redBins.map((_,i)=>`${i*10}–${(i+1)*10}%`),
+    datasets:[{ label:'Tweet',data:redBins,
+      backgroundColor:redBins.map((_,i)=>i<3?SM.C.neg:i<7?SM.C.neu:SM.C.pos),
+      borderWidth:0, borderRadius:3 }]},
+  options:{ responsive:true, maintainAspectRatio:false,
+    plugins:{legend:{display:false}},
+    scales:{ x:{grid:{color:SM.gridColor},ticks:{font:{size:9}}}, y:{grid:{color:SM.gridColor},beginAtZero:true} }
+  }
+});
+// ── Top Words Chart ──
+const wordFreq = {};
+rows.forEach(r => {
+  r.cleaned.split(/\s+/).filter(Boolean).forEach(w => { wordFreq[w]=(wordFreq[w]||0)+1; });
+});
+const topWords = Object.entries(wordFreq).sort((a,b)=>b[1]-a[1]).slice(0,15);
+SM.mkChart('chartWords', {
+  type:'bar',
+  data:{ labels:topWords.map(([k])=>k),
+    datasets:[{ label:'Frekuensi',data:topWords.map(([,v])=>v),
+      backgroundColor:SM.C.a1d, borderColor:SM.C.a1, borderWidth:1, borderRadius:3 }]},
+  options:{ indexAxis:'y', responsive:true, maintainAspectRatio:false,
+    plugins:{legend:{display:false}},
+    scales:{ x:{grid:{color:SM.gridColor},beginAtZero:true}, y:{grid:{display:false},ticks:{font:{size:10}}} }
+  }
+});
+// ── Before/After Table ──
+document.getElementById('cleanTableBody').innerHTML = rows.slice(0,20).map(r => {
+  const pct = r.wordsBefore ? Math.round((1-r.wordsAfter/r.wordsBefore)*100) : 0;
+  const pctCol = pct>70?'var(--pos)':pct>40?'var(--neu)':'var(--neg)';
+  return `<tr>
+    <td class="td-no">${r.id}</td>
+    <td class="td-trunc" title="${SM.esc(r.raw)}">${SM.esc(r.raw.slice(0,90))}${r.raw.length>90?'…':''}</td>
+    <td class="td-trunc" title="${SM.esc(r.cleaned)}">${r.cleaned?SM.esc(r.cleaned.slice(0,70))+'…':'<em style="color:var(--tx3)">(kosong)</em>'}</td>
+    <td style="text-align:center">${r.wordsBefore}</td>
+    <td style="text-align:center">${r.wordsAfter}</td>
+    <td style="text-align:center;font-weight:600;color:${pctCol}">${pct}%</td>
+  </tr>`;
+}).join('');

js/dashboard.js ADDED Viewed

	@@ -0,0 +1,180 @@

+'use strict';
+// ── Guard BEFORE DOM ──
+const _store = SM.loadData();
+if (!_store) {
+  window.location.replace('upload.html');
+  throw new Error('No data — redirecting');
+}
+SM.injectLayout('nav-dashboard');
+document.addEventListener('DOMContentLoaded', function () {
+  SM.setChartDefaults();
+  const { rows, meta } = _store;
+  const pos = rows.filter(r => r.sentiment === 'Positif');
+  const neg = rows.filter(r => r.sentiment === 'Negatif');
+  const neu = rows.filter(r => r.sentiment === 'Netral');
+  const n   = rows.length;
+  const totalEngage = rows.reduce((s,r) => s + r.engagement, 0);
+  const avgConf     = SM.avg(rows.map(r => r.confidence));
+  const sentScore   = +((pos.length - neg.length) / n).toFixed(3);
+  // Topbar
+  document.getElementById('topbarMeta').textContent = `${meta.filename} — ${n} tweets`;
+  if (meta.dateMin) {
+    const d1 = new Date(meta.dateMin), d2 = new Date(meta.dateMax);
+    document.getElementById('datePeriod').textContent =
+      `${isNaN(d1.getTime())?meta.dateMin:d1.toLocaleDateString('id-ID')} – ${isNaN(d2.getTime())?meta.dateMax:d2.toLocaleDateString('id-ID')}`;
+  }
+  // ── KPI Cards ──
+  document.getElementById('kpiGrid').innerHTML = [
+    { color:'blue',   label:'Total Tweet',      value: SM.fmt(n),             sub: meta.filename },
+    { color:'green',  label:'Positif',          value: SM.fmt(pos.length),    sub: `${((pos.length/n)*100).toFixed(1)}% dari total` },
+    { color:'red',    label:'Negatif',          value: SM.fmt(neg.length),    sub: `${((neg.length/n)*100).toFixed(1)}% dari total` },
+    { color:'yellow', label:'Netral',           value: SM.fmt(neu.length),    sub: `${((neu.length/n)*100).toFixed(1)}% dari total` },
+    { color:'cyan',   label:'Total Engagement', value: SM.fmt(totalEngage),   sub: 'Like + RT + Reply + Quote' },
+    { color:'purple', label:'Avg Engagement',   value: SM.fmt(Math.round(totalEngage/n)), sub: 'Per tweet' },
+    { color:'pink',   label:'Avg Kepercayaan',  value: (avgConf*100).toFixed(1)+'%', sub: 'Skor confidence model' },
+    { color:'orange', label:'Skor Sentimen',
+      value: sentScore >= 0 ? '+'+sentScore : String(sentScore),
+      sub: 'Skala −1.0 hingga +1.0',
+      delta: sentScore > 0.2 ? 'up' : sentScore < -0.2 ? 'down' : 'mid',
+      deltaText: sentScore > 0.2 ? 'Cenderung Positif' : sentScore < -0.2 ? 'Cenderung Negatif' : 'Cenderung Netral' },
+  ].map(k => `
+    <div class="kpi kpi-${k.color}">
+      <div class="kpi-label">${k.label}</div>
+      <div class="kpi-value">${k.value}</div>
+      <div class="kpi-sub">${k.sub}</div>
+      ${k.delta ? `<div class="kpi-delta ${k.delta}">${k.deltaText}</div>` : ''}
+    </div>`).join('');
+  // ── Gauge ──
+  try {
+    const canvas = document.getElementById('chartGauge');
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      const W = canvas.width, H = canvas.height;
+      const pct = (sentScore + 1) / 2;
+      const startA = Math.PI, angle = startA + pct * Math.PI;
+      const cx = W/2, cy = H - 10, r = 100;
+      ctx.clearRect(0,0,W,H);
+      ctx.beginPath(); ctx.arc(cx,cy,r,startA,2*Math.PI);
+      ctx.lineWidth=18; ctx.strokeStyle='rgba(255,255,255,0.06)'; ctx.lineCap='round'; ctx.stroke();
+      const g = ctx.createLinearGradient(cx-r,cy,cx+r,cy);
+      g.addColorStop(0,'#f87171'); g.addColorStop(0.5,'#fbbf24'); g.addColorStop(1,'#34d399');
+      ctx.beginPath(); ctx.arc(cx,cy,r,startA,angle);
+      ctx.lineWidth=18; ctx.strokeStyle=g; ctx.lineCap='round'; ctx.stroke();
+      const nx=cx+(r-9)*Math.cos(angle), ny=cy+(r-9)*Math.sin(angle);
+      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(nx,ny);
+      ctx.lineWidth=2; ctx.strokeStyle='#e8eaf0'; ctx.lineCap='round'; ctx.stroke();
+      ctx.beginPath(); ctx.arc(cx,cy,5,0,2*Math.PI); ctx.fillStyle='#e8eaf0'; ctx.fill();
+      ctx.font='10px Inter'; ctx.fillStyle='#525b72'; ctx.textAlign='center';
+      ctx.fillText('−1.0',cx-r+6,cy+16); ctx.fillText('0',cx,cy-r-6); ctx.fillText('+1.0',cx+r-6,cy+16);
+    }
+    document.getElementById('gaugeLabel').textContent =
+      `Skor: ${sentScore>=0?'+':''}${sentScore} — ${
+        sentScore>0.3?'Sangat Positif':sentScore>0.05?'Positif':sentScore>-0.05?'Netral':sentScore>-0.3?'Negatif':'Sangat Negatif'}`;
+  } catch(e) { console.error('Gauge error:', e); }
+  // ── Donut ──
+  try {
+    SM.mkChart('chartDonut', {
+      type: 'doughnut',
+      data: { labels:['Positif','Negatif','Netral'],
+        datasets:[{ data:[pos.length,neg.length,neu.length],
+          backgroundColor:[SM.C.pos,SM.C.neg,SM.C.neu], borderWidth:0, hoverOffset:8 }] },
+      options: { responsive:true, maintainAspectRatio:false, cutout:'68%',
+        plugins:{ legend:{display:false},
+          tooltip:{callbacks:{label:c=>` ${c.label}: ${c.parsed} (${((c.parsed/n)*100).toFixed(1)}%)`}}}}
+    });
+    document.getElementById('legendDonut').innerHTML =
+      [['Positif',SM.C.pos,pos.length],['Negatif',SM.C.neg,neg.length],['Netral',SM.C.neu,neu.length]]
+      .map(([l,c,v])=>`<div class="legend-item"><div class="legend-dot" style="background:${c}"></div>${l} (${v})</div>`).join('');
+  } catch(e) { console.error('Donut error:', e); }
+  // ── Time trend ──
+  try {
+    const tMap = {};
+    rows.forEach(r => {
+      if (!r.date) return;
+      const d = new Date(r.date);
+      const k = isNaN(d.getTime()) ? r.date.slice(0,10) : `${String(d.getHours()).padStart(2,'0')}:00`;
+      if (!tMap[k]) tMap[k] = {Positif:0,Negatif:0,Netral:0};
+      tMap[k][r.sentiment]++;
+    });
+    const tL = Object.keys(tMap).sort();
+    SM.mkChart('chartTrend', {
+      type:'line',
+      data:{ labels:tL, datasets:[
+        {label:'Positif',data:tL.map(k=>tMap[k].Positif),borderColor:SM.C.pos,backgroundColor:SM.C.posDim,tension:.4,fill:true,pointRadius:3},
+        {label:'Negatif',data:tL.map(k=>tMap[k].Negatif),borderColor:SM.C.neg,backgroundColor:SM.C.negDim,tension:.4,fill:true,pointRadius:3},
+        {label:'Netral', data:tL.map(k=>tMap[k].Netral), borderColor:SM.C.neu,backgroundColor:SM.C.neuDim,tension:.4,fill:true,pointRadius:3},
+      ]},
+      options:{responsive:true,maintainAspectRatio:false,
+        interaction:{mode:'index',intersect:false},
+        plugins:{legend:{labels:{boxWidth:10,padding:14}}},
+        scales:{ x:{grid:{color:SM.gridColor}}, y:{grid:{color:SM.gridColor},beginAtZero:true} }
+      }
+    });
+  } catch(e) { console.error('Trend error:', e); }
+  // ── Top tweets ──
+  function tweetCard(r, cls) {
+    return `<div class="tweet-card ${cls}">
+      <div class="tweet-text">${SM.esc(r.raw.slice(0,120))}${r.raw.length>120?'…':''}</div>
+      <div class="tweet-meta">
+        <span>@${SM.esc(r.username)}</span><span>${r.fav} like</span>
+        <span>${r.rt} RT</span><span>${(r.confidence*100).toFixed(0)}% conf.</span>
+      </div></div>`;
+  }
+  const topPos = [...pos].sort((a,b)=>b.confidence-a.confidence).slice(0,5);
+  const topNeg = [...neg].sort((a,b)=>b.confidence-a.confidence).slice(0,5);
+  const emptyPos = `
+    <div class="empty-state">
+      <div class="empty-state-title">Tidak Ada Data</div>
+      <div class="empty-state-desc">Belum ada tweet dengan sentimen positif.</div>
+    </div>`;
+  const emptyNeg = `
+    <div class="empty-state">
+      <div class="empty-state-title">Tidak Ada Data</div>
+      <div class="empty-state-desc">Belum ada tweet dengan sentimen negatif.</div>
+    </div>`;
+  document.getElementById('positiveTweets').innerHTML = topPos.map(r=>tweetCard(r,'pos')).join('') || emptyPos;
+  document.getElementById('negativeTweets').innerHTML = topNeg.map(r=>tweetCard(r,'neg')).join('') || emptyNeg;
+  // ── Leaderboard ──
+  const userEng = {};
+  rows.forEach(r => { userEng[r.username] = (userEng[r.username]||0) + r.engagement; });
+  document.getElementById('leaderboard').innerHTML =
+    Object.entries(userEng).sort((a,b)=>b[1]-a[1]).slice(0,10)
+    .map(([u,e],i) => `<div class="leaderboard-row">
+        <div class="lb-rank">${i+1}.</div>
+        <div class="lb-name">@${SM.esc(u)}</div>
+        <div class="lb-val">${SM.fmt(e)} eng.</div>
+      </div>`).join('');
+  // ── Insights ──
+  const posRatio = (pos.length/n*100).toFixed(1), negRatio = (neg.length/n*100).toFixed(1);
+  const highConf = rows.filter(r=>r.confidence>0.85).length;
+  const locCounts = {}; rows.forEach(r => { locCounts[r.location]=(locCounts[r.location]||0)+1; });
+  const topLoc = Object.entries(locCounts).sort((a,b)=>b[1]-a[1])[0];
+  const posConf = pos.length ? SM.avg(pos.map(r=>r.confidence)) : 0;
+  const negConf = neg.length ? SM.avg(neg.map(r=>r.confidence)) : 0;
+  document.getElementById('insights').innerHTML = [
+    { color: pos.length>neg.length ? SM.C.pos : SM.C.neg,
+      text: `${pos.length>neg.length?'Mayoritas sentimen Positif':'Sentimen Negatif dominan'} (${posRatio}% vs ${negRatio}%).` },
+    { color: SM.C.a1,
+      text: `${highConf} tweet (${((highConf/n)*100).toFixed(1)}%) kepercayaan model di atas 85%.` },
+    ...(topLoc ? [{ color:SM.C.a2, text:`Lokasi paling aktif: ${topLoc[0]} dengan ${topLoc[1]} tweet.` }]:[]),
+    { color: SM.C.a3, text:`Rata-rata engagement per tweet: ${SM.fmt(Math.round(totalEngage/n))}.` },
+    { color: SM.C.a4, text:`Avg kepercayaan — Positif: ${(posConf*100).toFixed(1)}%, Negatif: ${(negConf*100).toFixed(1)}%.` },
+  ].map(ins => `<div class="insight-item">
+      <div class="insight-dot" style="background:${ins.color}"></div>
+      <div class="insight-text">${ins.text}</div>
+    </div>`).join('');
+});

js/data.js ADDED Viewed

	@@ -0,0 +1,213 @@

+'use strict';
+SM.injectLayout('nav-data');
+const store = SM.loadData();
+if (!store) {
+  window.location.replace('upload.html');
+  throw new Error('No data — redirecting to upload');
+}
+const { rows, meta } = store;
+document.getElementById('topbarMeta').textContent = `${meta.filename} — ${rows.length} tweets`;
+// ── Column definitions ──
+const COLS = [
+  { key:'id',         label:'No',          visible:true,  sortable:true  },
+  { key:'raw',        label:'Teks Asli',   visible:true,  sortable:false },
+  { key:'cleaned',    label:'Teks Bersih', visible:false, sortable:false },
+  { key:'username',   label:'Username',    visible:true,  sortable:true  },
+  { key:'location',   label:'Lokasi',      visible:true,  sortable:true  },
+  { key:'date',       label:'Waktu',       visible:true,  sortable:true  },
+  { key:'sentiment',  label:'Sentimen',    visible:true,  sortable:true  },
+  { key:'confidence', label:'Kepercayaan', visible:true,  sortable:true  },
+  { key:'fav',        label:'Like',        visible:true,  sortable:true  },
+  { key:'rt',         label:'Retweet',     visible:true,  sortable:true  },
+  { key:'rep',        label:'Reply',       visible:false, sortable:true  },
+  { key:'qot',        label:'Quote',       visible:false, sortable:true  },
+  { key:'engagement', label:'Engagement',  visible:true,  sortable:true  },
+];
+// Populate location & user dropdowns
+const locs  = [...new Set(rows.map(r=>(r.location||'').trim()||'—'))].sort();
+const users = [...new Set(rows.map(r=>r.username))].sort();
+const fLoc  = document.getElementById('fLocation');
+const fUser = document.getElementById('fUser');
+locs.forEach(l  => { const o=document.createElement('option'); o.value=l; o.textContent=l; fLoc.appendChild(o); });
+users.forEach(u => { const o=document.createElement('option'); o.value=u; o.textContent='@'+u; fUser.appendChild(o); });
+// Column toggle buttons
+document.getElementById('colToggle').innerHTML = COLS.map((c,i) =>
+  `<div class="col-pill ${c.visible?'on':''}" data-colidx="${i}">${c.label}</div>`
+).join('');
+document.querySelectorAll('.col-pill').forEach(pill => {
+  pill.addEventListener('click', () => {
+    const i = +pill.dataset.colidx;
+    COLS[i].visible = !COLS[i].visible;
+    pill.classList.toggle('on', COLS[i].visible);
+    renderTable();
+  });
+});
+// ── State ──
+let filtered = [...rows];
+let currentPage = 1;
+let pageSize = 20;
+let sortKey = 'id', sortDir = 1;
+let expandedRows = new Set();
+// ── Filters ──
+function applyFilters() {
+  const s   = document.getElementById('fSentiment').value;
+  const loc = document.getElementById('fLocation').value;
+  const usr = document.getElementById('fUser').value;
+  const q   = document.getElementById('fSearch').value.toLowerCase().trim();
+  const minE= parseInt(document.getElementById('fMinEngage').value)||0;
+  const minC= (parseFloat(document.getElementById('fMinConf').value)||0)/100;
+  filtered = rows.filter(r =>
+    (s==='all'   || r.sentiment===s) &&
+    (loc==='all' || (r.location||'—')===loc) &&
+    (usr==='all' || r.username===usr) &&
+    (r.engagement >= minE) &&
+    (r.confidence >= minC) &&
+    (!q || r.raw.toLowerCase().includes(q) || r.username.toLowerCase().includes(q) || r.cleaned.toLowerCase().includes(q))
+  );
+  // Sort
+  filtered.sort((a,b)=>{
+    const va=a[sortKey], vb=b[sortKey];
+    if(typeof va==='number') return (va-vb)*sortDir;
+    return String(va).localeCompare(String(vb))*sortDir;
+  });
+  currentPage = 1;
+  renderTable();
+}
+['fSentiment','fLocation','fUser'].forEach(id => document.getElementById(id).addEventListener('change', applyFilters));
+document.getElementById('fSearch').addEventListener('input', applyFilters);
+document.getElementById('fMinEngage').addEventListener('input', applyFilters);
+document.getElementById('fMinConf').addEventListener('input', applyFilters);
+document.getElementById('pageSize').addEventListener('change', e => { pageSize=+e.target.value; currentPage=1; renderTable(); });
+document.getElementById('btnReset').addEventListener('click', () => {
+  document.getElementById('fSentiment').value='all';
+  document.getElementById('fLocation').value='all';
+  document.getElementById('fUser').value='all';
+  document.getElementById('fSearch').value='';
+  document.getElementById('fMinEngage').value='';
+  document.getElementById('fMinConf').value='';
+  // Refresh custom select labels after reset
+  ['fSentiment','fLocation','fUser','pageSize'].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.dispatchEvent(new Event('_csdRefresh'));
+  });
+  applyFilters();
+});
+// ── Table HEAD ──
+function renderHead() {
+  const visCols = COLS.filter(c=>c.visible);
+  document.getElementById('tableHead').innerHTML = `<tr>
+    ${visCols.map(c => {
+      const isSorted = sortKey === c.key;
+      const sortIcon = isSorted
+        ? (sortDir === 1
+            ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px;margin-left:4px"><polyline points="18 15 12 9 6 15"/></svg>'
+            : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px;margin-left:4px"><polyline points="6 9 12 15 18 9"/></svg>')
+        : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:12px;height:12px;margin-left:4px;opacity:0.2"><polyline points="6 9 12 15 18 9"/></svg>';
+      return `<th ${c.sortable ? `data-sort="${c.key}" class="${isSorted ? 'active-sort' : ''}"` : ''}>
+        <div style="display:flex; align-items:center; justify-content:space-between">
+          ${c.label}
+          ${c.sortable ? sortIcon : ''}
+        </div>
+      </th>`;
+    }).join('')}
+  </tr>`;
+  document.querySelectorAll('th[data-sort]').forEach(th => {
+    th.addEventListener('click', () => {
+      if(sortKey===th.dataset.sort) sortDir*=-1;
+      else { sortKey=th.dataset.sort; sortDir=-1; }
+      applyFilters(); // Use applyFilters to trigger sorting before re-render
+    });
+  });
+}
+// ── Table BODY ──
+function renderTable() {
+  renderHead();
+  const visCols = COLS.filter(c=>c.visible);
+  const start = (currentPage-1)*pageSize;
+  const page  = filtered.slice(start, start+pageSize);
+  document.getElementById('tableBody').innerHTML = page.map(r => {
+    const cells = visCols.map(c => {
+      const v = r[c.key];
+      if(c.key==='sentiment') return `<td><span class="badge badge-${r.sentiment==='Positif'?'pos':r.sentiment==='Negatif'?'neg':'neu'}">${r.sentiment}</span></td>`;
+      if(c.key==='confidence') return `<td>
+        <div class="conf-row">
+          <span class="conf-num">${(v*100).toFixed(1)}%</span>
+          <div class="conf-track"><div class="conf-fill conf-${r.sentiment==='Positif'?'pos':r.sentiment==='Negatif'?'neg':'neu'}" style="width:${(v*100).toFixed(0)}%"></div></div>
+        </div></td>`;
+      if(c.key==='raw')  return `<td class="td-trunc" title="${SM.esc(v)}">${SM.esc(v.slice(0,80))}${v.length>80?'…':''}</td>`;
+      if(c.key==='cleaned') return `<td class="td-trunc" title="${SM.esc(v)}">${SM.esc(v.slice(0,60))}${v.length>60?'…':''}</td>`;
+      if(c.key==='date') {
+        const d=new Date(v); return `<td class="td-trunc-sm">${isNaN(d)?v:d.toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit'})}</td>`;
+      }
+      if(c.key==='username') return `<td style="font-weight:500;color:var(--tx1);white-space:nowrap">@${SM.esc(v)}</td>`;
+      if(c.key==='id') return `<td class="td-no">${v}</td>`;
+      return `<td>${SM.esc(String(v))}</td>`;
+    }).join('');
+    return `<tr data-rowid="${r.id}">
+      ${cells}
+    </tr>`;
+  }).join('');
+  renderPagination();
+  document.getElementById('tableInfo').textContent =
+    `Menampilkan ${Math.min(start+1,filtered.length)}–${Math.min(start+pageSize,filtered.length)} dari ${filtered.length} data (total ${rows.length})`;
+}
+function renderPagination() {
+  const total = Math.ceil(filtered.length/pageSize);
+  const pg = document.getElementById('pagination');
+  if(total<=1) { pg.innerHTML=''; return; }
+  const range=[1];
+  if(currentPage>3) range.push('…');
+  for(let i=Math.max(2,currentPage-1);i<=Math.min(total-1,currentPage+1);i++) range.push(i);
+  if(currentPage<total-2) range.push('…');
+  if(total>1) range.push(total);
+  pg.innerHTML = `
+    <button class="pg-btn" ${currentPage===1?'disabled':''} onclick="goPage(${currentPage-1})" title="Previous">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="15 18 9 12 15 6"/></svg>
+    </button>
+    ${range.map(p=>p==='…'?`<span class="pg-btn dots">…</span>`
+      :`<button class="pg-btn ${p===currentPage?'active':''}" onclick="goPage(${p})">${p}</button>`).join('')}
+    <button class="pg-btn" ${currentPage===total?'disabled':''} onclick="goPage(${currentPage+1})" title="Next">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="9 18 15 12 9 6"/></svg>
+    </button>`;
+}
+window.goPage = function(p) {
+  currentPage=Math.max(1,Math.min(p,Math.ceil(filtered.length/pageSize)));
+  expandedRows.clear(); renderTable();
+  document.getElementById('dataTable').scrollIntoView({behavior:'smooth'});
+};
+// Initial render
+applyFilters();
+// ── Custom Dropdowns ──
+SM.initCustomSelect(document.getElementById('fSentiment'), {
+  showDots: {
+    'all':     null,
+    'Positif': '#34d399',
+    'Negatif': '#f87171',
+    'Netral':  '#fbbf24',
+  }
+});
+SM.initCustomSelect(document.getElementById('fLocation'));
+SM.initCustomSelect(document.getElementById('fUser'));
+SM.initCustomSelect(document.getElementById('pageSize'), { compact: true });
+SM.initCustomNumber(document.getElementById('fMinEngage'));
+SM.initCustomNumber(document.getElementById('fMinConf'));

js/demo.js ADDED Viewed

	@@ -0,0 +1,72 @@

+const DEMO_CSV_P1 = `full_text,username,location,created_at,favorite_count,retweet_count,reply_count,quote_count
+"SentiMeter sangat membantu saya menganalisis sentimen dengan cepat! #SentiMeter #AnalisisSentimen",budi_santoso,Jakarta,"2024-03-15T10:00:00Z",12,4,2,1
+"Kenapa aplikasinya lemot banget ya pas upload file gede? #TechIssue #SentiMeter",siti_maemunah,Bandung,"2024-03-15T10:05:00Z",2,5,10,0
+"Biasa aja sih, fitur pembersih teksnya standar. #AI #NLP",andi_wijaya,Surabaya,"2024-03-15T10:10:00Z",5,1,1,0
+"Wah keren nih IndoBERT-nya akurat bgt klasifikasinya! #IndoBERT #MachineLearning",joko_wow,Medan,"2024-03-15T10:15:00Z",45,20,5,3
+"Sedang mencoba demo data 300 tweet, penasaran hasilnya. #DemoData #SentiMeter",ani_linda,Yogyakarta,"2024-03-15T10:20:00Z",8,2,0,0
+"Aplikasi ini sangat inovatif dan berguna untuk riset pasar. #Innovation #MarketResearch",marketing_pro,Jakarta,"2024-03-15T10:25:00Z",30,12,4,2
+"Error terus pas mau buka riwayat, ada solusi? #HelpDesk #SentiMeter",user_bingung,Semarang,"2024-03-15T10:30:00Z",1,0,3,0
+"Interface-nya cakep, dark mode-nya premium! #UIDesign #Premium",design_lover,Bali,"2024-03-15T10:35:00Z",100,50,12,5
+"Membosankan, tidak banyak perubahan dari versi sebelumnya. #Review #Apps",kritikus_pedas,Malang,"2024-03-15T10:40:00Z",15,3,20,2
+"Sangat terbantu untuk tugas akhir saya, terima kasih! #Skripsi #Mahasiswa",mahasiswa_akhir,Palembang,"2024-03-15T10:45:00Z",55,15,8,4
+"Gak paham cara pakainya, ribet! #UserExperience #SentiMeter",gaptek_id,Makassar,"2024-03-15T10:50:00Z",0,0,5,0
+"Kecepatan klasifikasinya luar biasa, salut. #TechReview #IndoBERT",tech_enthusiast,Jakarta,"2024-03-15T10:55:00Z",88,34,10,6
+"Harga langganannya kalau ada nanti bakal mahal gak ya? #Subscription #Fintech",economist_view,Tangerang,"2024-03-15T11:00:00Z",12,2,4,1
+"Mantap jiwa, lanjut terus pengembangannya! #OpenSource #Dev",semangat_45,Bekasi,"2024-03-15T11:05:00Z",22,8,2,0
+"Sangat buruk, sering force close di browser saya. #BugReport #Crash",bad_luck_user,Depok,"2024-03-15T11:10:00Z",3,1,12,0
+"Tim pengembangnya responsif sekali, bug cepat difix. #CustomerSuccess #DevLife",satisfied_customer,Jakarta,"2024-03-15T11:15:00Z",140,60,25,10
+"Bagus tapi butuh fitur lebih banyak lagi. #FutureUpdate #Request",feature_hunter,Sidoarjo,"2024-03-15T11:20:00Z",9,2,3,1
+"Indobert emang joss buat bahasa Indonesia. #NLP #IndoBERT",ai_researcher,Bandung,"2024-03-15T11:25:00Z",210,120,40,15
+"Gak sabar nunggu update fitur barunya! #ComingSoon #Tech",hype_beast,Surabaya,"2024-03-15T11:30:00Z",44,12,5,2
+"Kurang suka sama font-nya, kegedean. #UIDesign #Feedback",font_critic,Jakarta,"2024-03-15T11:35:00Z",2,0,15,0
+"Terima kasih SentiMeter, analisanya tajam! #DataScience #Insight",data_analyst,Yogyakarta,"2024-03-15T11:40:00Z",77,22,6,3
+"Kapan ada fitur buat sentiment bahasa daerah? #RequestFeature #LocalLanguage",lokal_pride,Solo,"2024-03-15T11:45:00Z",18,4,12,1
+"Luar biasa, data 100k diproses lancar jaya. #Optimization #BigData",big_data_king,Jakarta,"2024-03-15T11:50:00Z",320,150,60,25
+"Hmm, kok hasil sentimennya agak aneh ya? #SentimentAnalysis #IndoBERT",curious_mind,Bandung,"2024-03-15T11:55:00Z",6,2,8,0
+"Puas banget pakai SentiMeter untuk monitor brand. #Branding #SocialMedia",social_media_mgr,Surabaya,"2024-03-15T12:00:00Z",95,30,10,5
+"Aplikasi sampah, gak guna! #Fail #Haters",haters_gonna_hate,Batam,"2024-03-15T12:05:00Z",0,0,50,5
+"Fitur cleaning-nya oke banget, teks jadi rapi. #DataCleaning #Efficiency",clean_text_fan,Manado,"2024-03-15T12:10:00Z",24,6,2,1
+"Semoga kedepannya makin jago NLP-nya. #ArtificialIntelligence #NLP",future_tech,Jakarta,"2024-03-15T12:15:00Z",15,5,1,0
+"Navigasinya intuitif, gampang dimengerti. #UX #UserExperience",ux_designer,Medan,"2024-03-15T12:20:00Z",66,18,4,2
+"Kenapa gak gratis aja selamanya? #FreeApps #StudentLife",freebie_hunter,Balikpapan,"2024-03-15T12:25:00Z",4,1,30,0
+"Support platform-nya juara, fast response. #GreatService #Apps",happy_dev,Padang,"2024-03-15T12:30:00Z",82,25,7,4
+"Warna UI-nya bikin mata sakit kalau malem. #UIFeedback #DarkMode",night_owl,Jakarta,"2024-03-15T12:35:00Z",5,1,12,1
+"Sangat merekomendasikan SentiMeter buat analisis! #Recommended #Tool",expert_recommends,Malang,"2024-03-15T12:40:00Z",110,40,15,8
+"Gak bisa upload file XLSX ya? #XLSX #FileFormat",excel_fanatic,Pontianak,"2024-03-15T12:45:00Z",2,0,4,0
+"Bintang 5 buat kemampuannya klasifikasi kalimat sarkas. #Sarcasm #IndoBERT",sarcasm_detect,Denpasar,"2024-03-15T12:50:00Z",150,70,22,12
+"Masih banyak typo di teks dokumentasinya. #Documentation #Typo",typo_hunter,Cirebon,"2024-03-15T12:55:00Z",1,0,5,0
+"Inovatif, hemat waktu banget buat report mingguan. #Efficiency #Report",fast_reporter,Jakarta,"2024-03-15T13:00:00Z",42,12,3,1
+"Update terus ya biar gak ketinggalan zaman. #Trends #SentiMeter",tech_follower,Bandung,"2024-03-15T13:05:00Z",18,5,2,0
+"Suka banget sama visualisasi chart-nya. #Analytics #VisualData",visual_art_fan,Surabaya,"2024-03-15T13:10:00Z",63,15,5,2
+"Biasa aja, kayak tools lain pada umumnya. #Neutral #Apps Review",skeptic_guy,Semarang,"2024-03-15T13:15:00Z",7,1,4,0
+"Keren parah! Gak nyangka buatan lokal. #BanggaBuatanIndonesia #LocalApps",proud_indo,Jakarta,"2024-03-15T13:20:00Z",245,110,35,18
+"Kenapa datanya gak bisa diexport ke PDF? #PDF #Export",pdf_lover,Lampung,"2024-03-15T13:25:00Z",4,0,8,0
+"Stabil dan ringan digunakan. #Performance #Tech",stable_performance,Banda_Aceh,"2024-03-15T13:30:00Z",28,10,2,1
+"User manualnya kurang lengkap nih. #Documentation #UserHelp",manual_reader,Tasikmalaya,"2024-03-15T13:35:00Z",3,0,6,0
+"Seneng banget nemu tools kayak gini, memudahkan hidup. #Useful #Productivity",convenience_seeker,Jakarta,"2024-03-15T13:40:00Z",89,28,9,5
+"Dashboard-nya informatif sekali. #UserInterface #Data",info_collector,Samarinda,"2024-03-15T13:45:00Z",12,4,1,0
+"Gimana ya cara hapus data lama? #Help #DataManagement",old_user_care,Banjarmasin,"2024-03-15T13:50:00Z",1,0,2,0
+"Mantul! Akurasinya tinggi dibanding sebelah. #Accuracy #IndoBERT",val_expert,Jakarta,"2024-03-15T13:55:00Z",165,55,18,9
+"Fitur search-nya cepet meskipun data ribuan. #Optimization #Search",search_pro,Denpasar,"2024-03-15T14:00:00Z",52,15,4,2
+"Desainnya clean, profesional banget. #Professional #UIDesign",clean_design_fan,Ternate,"2024-03-15T14:05:00Z",74,20,6,3`;
+const DEMO_CSV_P2 = Array.from({length: 250}, (_, i) => {
+    const sentiments = ["Sangat suka dengan aplikasi ini!", "Biasa saja, butuh perbaikan.", "Buruk sekali, tidak merekomendasikan.", "Luar biasa keren!", "Membosankan.", "Inovasi bagus.", "Cukup membantu.", "Kurang fitur.", "Stabil dan cepat.", "Error lagi."];
+    const hashtags = ["#SentiMeter", "#IndoBERT", "#Analytics", "#DataScience", "#Indonesia", "#Tech", "#SocialMedia", "#MachineLearning", "#AI", "#NLP"];
+    const users = ["user_gen_", "tweet_fan_", "indo_bert_", "data_guy_", "tech_wiz_"];
+    const locs = ["Jakarta", "Bandung", "Surabaya", "Medan", "Bali", "Yogyakarta", "Semarang", "Makassar"];
+    const s = sentiments[i % sentiments.length];
+    const h1 = hashtags[i % hashtags.length];
+    const h2 = hashtags[(i + 3) % hashtags.length];
+    const u = users[i % users.length] + i;
+    const l = locs[i % locs.length];
+    const f = Math.floor(Math.random() * 50);
+    const r = Math.floor(Math.random() * 20);
+    const rep = Math.floor(Math.random() * 10);
+    const q = Math.floor(Math.random() * 5);
+    return `"${s} Tweet demo nomor ${i+51} ${h1} ${h2}",${u},${l},2024-03-15T15:00:00Z,${f},${r},${rep},${q}`;
+  }).join("\n");
+window.DEMO_CSV = DEMO_CSV_P1 + "\n" + DEMO_CSV_P2;

js/history.js ADDED Viewed

	@@ -0,0 +1,130 @@

+/* ═══════════════════════════════════════════════════
+   SentiMeter — history.js
+   Riwayat Analisis Core Logic
+   ═══════════════════════════════════════════════════ */
+'use strict';
+SM.injectLayout('nav-history');
+document.addEventListener('DOMContentLoaded', () => {
+  renderHistory();
+});
+function renderHistory() {
+  const container = document.getElementById('historyContainer');
+  const history = SM.getHistory();
+  const badge = document.getElementById('histCount');
+  if (badge) badge.textContent = history.length || 0;
+  if (!history || history.length === 0) {
+    container.innerHTML = `
+      <div class="history-empty reveal-up" style="--d:100ms">
+        <h3>Belum Ada Riwayat Analisis</h3>
+        <p>Log aktivitas analisis Anda akan muncul di sini. Silakan mulai dengan mengunggah dan memproses file CSV pertama Anda.</p>
+        <a href="upload.html" class="btn btn-primary btn-lg empty-cta">Mulai Analisis Sekarang</a>
+      </div>
+    `;
+    return;
+  }
+  let html = '';
+  history.forEach((h, index) => {
+    const d = h.data;
+    const meta = d.meta;
+    const dateStr = new Date(h.savedAt).toLocaleDateString('id-ID', {
+      day: 'numeric', month: 'long', year: 'numeric',
+      hour: '2-digit', minute: '2-digit'
+    });
+    const totalPos = d.rows.filter(r => r.sentiment === 'Positif').length;
+    const totalNeg = d.rows.filter(r => r.sentiment === 'Negatif').length;
+    const totalNeu = d.rows.filter(r => r.sentiment === 'Netral').length;
+    const total = meta.totalRows || 1;
+    const pPos = ((totalPos / total) * 100).toFixed(1);
+    const pNeg = ((totalNeg / total) * 100).toFixed(1);
+    const pNeu = ((totalNeu / total) * 100).toFixed(1);
+    html += `
+      <div class="hist-card" style="--d:${index * 80}ms">
+        <div class="hist-card-top">
+          <div class="hist-info">
+            <div class="hist-filename">${meta.filename || 'data.csv'}</div>
+            <div class="hist-meta">
+              <span class="hist-date">Dianalisis pada ${dateStr}</span>
+            </div>
+          </div>
+          <div class="hist-actions">
+            <button class="btn btn-primary btn-sm" onclick="viewHistory('${h.id}')">Lihat Dashboard</button>
+            <button class="btn btn-outline btn-sm" style="color:var(--neg);border-color:var(--neg-d)" onclick="removeHistory('${h.id}')">Hapus</button>
+          </div>
+        </div>
+        <div class="hist-visual">
+          <div class="hist-bar-outer">
+            <div class="hist-bar-segment pos" style="width: ${pPos}%"></div>
+            <div class="hist-bar-segment neu" style="width: ${pNeu}%"></div>
+            <div class="hist-bar-segment neg" style="width: ${pNeg}%"></div>
+          </div>
+        </div>
+        <div class="hist-stats">
+          <div class="hist-stat-box">
+            <span class="hist-stat-label">Total Data</span>
+            <span class="hist-stat-val">${SM.fmt(meta.totalRows)} <span class="hist-stat-unit">Baris</span></span>
+          </div>
+          <div class="hist-stat-box">
+            <span class="hist-stat-label">Positif</span>
+            <span class="hist-stat-val pos">${pPos}%</span>
+          </div>
+          <div class="hist-stat-box">
+            <span class="hist-stat-label">Netral</span>
+            <span class="hist-stat-val neu">${pNeu}%</span>
+          </div>
+          <div class="hist-stat-box">
+            <span class="hist-stat-label">Negatif</span>
+            <span class="hist-stat-val neg">${pNeg}%</span>
+          </div>
+        </div>
+      </div>
+    `;
+  });
+  container.innerHTML = html;
+}
+window.viewHistory = function(id) {
+  if (SM.loadHistoryItem(id)) {
+    SM.showToast('Data riwayat berhasil dimuat.');
+    setTimeout(() => {
+      window.location.href = 'dashboard.html';
+    }, 500);
+  } else {
+    SM.showToast('Gagal memuat riwayat data.', 'error');
+  }
+};
+window.removeHistory = function(id) {
+  const history = SM.getHistory();
+  const item = history.find(h => h.id === id);
+  const filename = item ? item.data.meta.filename : 'data';
+  SM.showModal({
+    title: 'Hapus Riwayat?',
+    message: `Apakah Anda yakin ingin menghapus riwayat analisis untuk file <b>${SM.esc(filename)}</b>? Tindakan ini tidak dapat dibatalkan.`,
+    type: 'error',
+    confirmText: 'Hapus Riwayat',
+    cancelText: 'Batal',
+    showCancel: true,
+    isDanger: true,
+    onConfirm: () => {
+      SM.deleteHistoryItem(id);
+      renderHistory();
+      SM.injectLayout('nav-history'); // Refresh sidebar state
+      SM.showToast('Riwayat berhasil dihapus', 'success');
+    },
+    onCancel: () => {
+      // Do nothing, just close
+    }
+  });
+};

js/index.js ADDED Viewed

	@@ -0,0 +1,122 @@

+/* ═══════════════════════════════════════════════
+   intro.js — SentiMeter Intro Page Logic
+   ═══════════════════════════════════════════════ */
+'use strict';
+// ── INJECT SIDEBAR ───────────────────────────
+injectLayout('nav-intro');
+// ── SCROLL REVEAL ───────────────────────────
+function initScrollReveal() {
+  // Immediately trigger hero reveals
+  document.querySelectorAll('#introHero .reveal-up').forEach(el => {
+    const delay = parseInt(getComputedStyle(el).getPropertyValue('--d')) || 0;
+    setTimeout(() => el.classList.add('visible'), delay);
+  });
+  // Observe all other reveal-up elements
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.classList.add('visible');
+        io.unobserve(e.target);
+      }
+    });
+  }, { rootMargin: '0px 0px -50px 0px', threshold: 0.05 });
+  document.querySelectorAll('.reveal-up:not(#introHero .reveal-up)').forEach(el => io.observe(el));
+}
+// ── COUNTER ANIMATION ───────────────────────
+function animateCounters() {
+  document.querySelectorAll('.ih-stat-n').forEach(el => {
+    const raw = el.dataset.to;
+    if (raw === '∞') {
+      setTimeout(() => {
+        el.textContent = '∞';
+        el.style.transition = 'transform 0.25s';
+        el.style.transform = 'scale(1.15)';
+        setTimeout(() => el.style.transform = '', 250);
+      }, 700);
+      return;
+    }
+    const target = parseInt(raw);
+    let v = 0;
+    const step = Math.ceil(target / 25);
+    const iv = setInterval(() => {
+      v = Math.min(v + step, target);
+      el.textContent = v;
+      if (v >= target) {
+        clearInterval(iv);
+        el.style.transition = 'transform 0.2s';
+        el.style.transform = 'scale(1.12)';
+        setTimeout(() => el.style.transform = '', 200);
+      }
+    }, 45);
+  });
+}
+// ── CSV DEMO ─────────────────────────────────
+const CSV_ROWS = [
+  { n: '—', h: true,  text: 'full_text',                    user: 'username',      date: 'created_at',  num: 'retweet' },
+  { n: '1', h: false, text: 'pemilu harus diulang...',       user: '@politikus_id', date: '2024-02-14',  num: '1234' },
+  { n: '2', h: false, text: 'kpk tetap tegak berdiri...',    user: '@warga_aktif',  date: '2024-02-15',  num: '234' },
+  { n: '3', h: false, text: 'bangga kemajuan ibu kota...',   user: '@jakarta_cinta',date: '2024-02-15',  num: '44' },
+  { n: '4', h: false, text: 'reformasi birokrasi berjalan...',user: '@pegawai_asn', date: '2024-02-16',  num: '89' },
+];
+function buildCodeDemo() {
+  const target = document.getElementById('codeDemo');
+  if (!target) return;
+  target.innerHTML = '';
+  CSV_ROWS.forEach((row, i) => {
+    const div = document.createElement('div');
+    div.className = 'csv-row';
+    div.style.opacity = '0';
+    div.style.transition = `opacity 0.3s ease ${i * 130}ms`;
+    const cls = row.h ? 'csv-h' : '';
+    const textCls = row.h ? 'csv-h' : 'csv-text';
+    const userCls = row.h ? 'csv-h' : 'csv-user';
+    const dateCls = row.h ? 'csv-h' : 'csv-date';
+    const numCls  = row.h ? 'csv-h' : 'csv-num';
+    div.innerHTML = `
+      <span class="csv-lnum">${row.n}</span>
+      <span class="${textCls}" title="${row.text}">${row.text.length > 18 ? row.text.slice(0,18)+'…' : row.text}</span>
+      <span class="${userCls}">${row.user}</span>
+      <span class="${dateCls}">${row.date}</span>
+      <span class="${numCls}">${row.num}</span>
+    `;
+    target.appendChild(div);
+    setTimeout(() => div.style.opacity = '1', 350 + i * 130);
+  });
+  // Cursor row
+  const cur = document.createElement('div');
+  cur.className = 'csv-row';
+  cur.innerHTML = '<span class="csv-lnum">5</span><span class="csv-cursor"></span>';
+  cur.style.opacity = '0';
+  cur.style.transition = `opacity 0.3s ease ${CSV_ROWS.length * 130 + 350}ms`;
+  target.appendChild(cur);
+  setTimeout(() => cur.style.opacity = '1', CSV_ROWS.length * 130 + 650);
+}
+// ── SMOOTH "LEARN MORE" ─────────────────────
+function initSmoothScroll() {
+  document.getElementById('learnMoreBtn')?.addEventListener('click', e => {
+    e.preventDefault();
+    document.getElementById('cara-pakai')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
+}
+// ── INIT ─────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  initScrollReveal();
+  setTimeout(animateCounters, 650);
+  buildCodeDemo();
+  initSmoothScroll();
+});

js/shared.js ADDED Viewed

	@@ -0,0 +1,897 @@

+/* ═══════════════════════════════════════════════════
+   SentiMeter — shared.js
+   Shared Engine: IndoBERT API · Cleaning · Store · Nav
+   ═══════════════════════════════════════════════════ */
+'use strict';
+// ─── INDOBERT API CONFIG ────────────────────────────
+const INDOBERT_API_URL = '/api/sentiment';
+const INDOBERT_HEALTH_URL = '/api/health';
+const INDOBERT_BATCH_SIZE = 32;
+// ─── STOPWORDS INDONESIA ────────────────────────────
+const STOPWORDS = new Set([
+  'yang','dan','di','ke','dari','dengan','ini','itu','adalah','ada','akan',
+  'untuk','telah','sudah','dalam','pada','atau','juga','tidak','bisa',
+  'oleh','sebagai','dapat','lebih','saat','secara','kami','kita','mereka',
+  'dia','ia','saya','kamu','anda','selama','setelah','sebelum','atas','bawah',
+  'hal','jika','namun','tapi','tetapi','bahwa','karena','ketika','sehingga',
+  'namanya','pun','lagi','masih','sama','seperti','bagi','semua','selain',
+  'maupun','antara','agar','supaya','tanpa','melalui','hingga','sampai',
+  'bahkan','begitu','meski','meskipun','walaupun','tersebut','nya','lah',
+  'kah','pernah','selalu','serta','beberapa','suatu','hanya','para',
+  'tentang','siapa','apa','bagaimana','kapan','dimana','mengapa','kenapa',
+  'sebuah','seorang','berbagai','banyak','sedikit','lebih','kurang','sangat',
+  'amat','sekali','cukup','hampir','sudah','belum','sedang','pasti','mungkin',
+  'tentu','ya','tidak','bukan','jangan','bila','andai','seandainya','adapun',
+  'adapun','demikian','sehingga','akibat','maka','oleh karena','oleh sebab',
+]);
+// ─── PIPELINE STEP LABELS ───────────────────────────
+const PIPELINE_STEPS = [
+  { id:'lowercase',    label:'1. Lowercase',              desc:'Mengubah semua huruf menjadi huruf kecil.' },
+  { id:'url',          label:'2. Hapus URL',              desc:'Menghapus semua tautan http/https.' },
+  { id:'mention',      label:'3. Hapus Mention',         desc:'Menghapus @username.' },
+  { id:'hashtag',      label:'4. Hapus Hashtag',         desc:'Mengonversi #tag menjadi kata biasa.' },
+  { id:'emoji',        label:'5. Hapus Emoji',           desc:'Menghapus karakter emoji unicode.' },
+  { id:'special',      label:'6. Hapus Karakter Khusus', desc:'Hanya huruf, angka, spasi dipertahankan.' },
+  { id:'number',       label:'7. Hapus Angka',           desc:'Menghapus angka yang berdiri sendiri.' },
+  { id:'whitespace',   label:'8. Normalisasi Spasi',     desc:'Menghilangkan spasi ganda/leading/trailing.' },
+  { id:'stopword',     label:'9. Hapus Stopwords',       desc:'Menghapus kata-kata umum tidak bermakna.' },
+];
+// ─── TEXT CLEANER ───────────────────────────────────
+function cleanStep(text, stepId) {
+  switch (stepId) {
+    case 'lowercase':  return text.toLowerCase();
+    case 'url':        return text.replace(/https?:\/\/[^\s]+/g,'').replace(/www\.[^\s]+/g,'');
+    case 'mention':    return text.replace(/@\w+/g,'');
+    case 'hashtag':    return text.replace(/#(\w+)/g,'$1');
+    case 'emoji':      return text.replace(/[\u{1F000}-\u{1FFFF}]/gu,'').replace(/[\u{2600}-\u{27BF}]/gu,'');
+    case 'special':    return text.replace(/[^a-z0-9 .,]/g,' ');
+    case 'number':     return text.replace(/\b\d[\d.,]*\b/g,'');
+    case 'whitespace': return text.replace(/\s+/g,' ').trim();
+    case 'stopword':   return text.split(' ').filter(w=>w.length>1&&!STOPWORDS.has(w)).join(' ');
+    default: return text;
+  }
+}
+function cleanText(raw) {
+  let t = raw || '';
+  for (const s of PIPELINE_STEPS) t = cleanStep(t, s.id);
+  return t;
+}
+function cleanSteps(raw) {
+  const steps = [];
+  let t = raw || '';
+  for (const s of PIPELINE_STEPS) {
+    const before = t;
+    t = cleanStep(t, s.id);
+    steps.push({ ...s, before, after: t });
+  }
+  return steps;
+}
+// ─── CLASSIFY (IndoBERT API) ────────────────────────
+/**
+ * Check if the IndoBERT model backend is available.
+ * Returns { ok: true/false, error: string|null }
+ */
+async function checkModelHealth() {
+  try {
+    const res = await fetch(INDOBERT_HEALTH_URL, { method: 'GET' });
+    const data = await res.json();
+    if (data.status === 'ok') return { ok: true, error: null };
+    return { ok: false, error: data.error || 'Model tidak tersedia' };
+  } catch (e) {
+    return { ok: false, error: 'Server IndoBERT tidak dapat dijangkau. Pastikan server Python sedang berjalan.' };
+  }
+}
+/**
+ * Send a batch of texts to the IndoBERT API for sentiment classification.
+ * Returns array of { label: 'Positif'|'Netral'|'Negatif', score: number }
+ * Throws an error if the API call fails.
+ */
+async function classifyBatch(texts) {
+  const res = await fetch(INDOBERT_API_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ texts }),
+  });
+  if (!res.ok) {
+    const errData = await res.json().catch(() => ({}));
+    throw new Error(errData.message || `Server error: ${res.status}`);
+  }
+  return await res.json();
+}
+// ─── HELPERS ────────────────────────────────────────
+function fmt(n) {
+  if (n >= 1e6) return (n/1e6).toFixed(1)+'M';
+  if (n >= 1e3) return (n/1e3).toFixed(1)+'K';
+  return String(n);
+}
+function esc(s) {
+  return String(s||'')
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+    .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+function avg(arr) { return arr.length ? arr.reduce((a,b)=>a+b,0)/arr.length : 0; }
+// ─── DATA STORE (localStorage) ───────────────────
+const STORE_KEY = 'sentimeter_data';
+function saveData(rows, meta) {
+  try {
+    const dataObj = { rows, meta };
+    localStorage.setItem(STORE_KEY, JSON.stringify(dataObj));
+    // Also save to history
+    saveToHistory(dataObj);
+  } catch(e) {
+    // quota exceeded – silently fail
+    console.warn('localStorage full, using memory fallback', e);
+    window._sentimeterData = { rows, meta };
+  }
+}
+function loadData() {
+  try {
+    const raw = localStorage.getItem(STORE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch(e) {}
+  return window._sentimeterData || null;
+}
+function hasData() { return !!loadData(); }
+// ─── HISTORY STORE (localStorage) ─────────────────
+const HISTORY_KEY = 'sentimeter_history';
+const MAX_HISTORY = 10; // Keep last 10 analyses
+function getHistory() {
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch(e) {}
+  return [];
+}
+function saveToHistory(dataObj) {
+  try {
+    let history = getHistory();
+    // Create a history item (we store the full dataObj to allow reloading)
+    // To save space, we might compress or limit, but for now we store as is
+    // since localStorage typically allows 5MB. We'll add a timestamp ID.
+    const historyItem = {
+      id: 'hist_' + Date.now(),
+      savedAt: new Date().toISOString(),
+      data: dataObj
+    };
+    // Check if identical filename exists, remove old one
+    history = history.filter(h => h.data.meta.filename !== dataObj.meta.filename);
+    history.unshift(historyItem);
+    // Enforce limit and memory size by checking quota
+    while (history.length > MAX_HISTORY) {
+      history.pop();
+    }
+    // Attempt saving, if quota exceeded, remove oldest until it fits
+    let saved = false;
+    while (!saved && history.length > 0) {
+      try {
+        localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+        saved = true;
+      } catch (e) {
+        history.pop(); // Remove oldest
+        if (history.length === 0) {
+          console.warn('History storage completely full.');
+          break;
+        }
+      }
+    }
+  } catch(e) {
+    console.warn('Could not save to history', e);
+  }
+}
+function deleteHistoryItem(id) {
+  try {
+    const history = getHistory();
+    const itemToDelete = history.find(h => h.id === id);
+    if (!itemToDelete) return;
+    // Check if this item is currently active in the dashboard
+    const currentData = loadData();
+    if (currentData && currentData.meta && itemToDelete.data &&
+        currentData.meta.filename === itemToDelete.data.meta.filename &&
+        currentData.meta.processedAt === itemToDelete.data.meta.processedAt) {
+      clearData();
+    }
+    const newHistory = history.filter(h => h.id !== id);
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
+  } catch(e) {}
+}
+function clearData() {
+  try {
+    localStorage.removeItem(STORE_KEY);
+    window._sentimeterData = null;
+  } catch(e) {}
+}
+function loadHistoryItem(id) {
+  const history = getHistory();
+  const item = history.find(h => h.id === id);
+  if (item && item.data) {
+    saveData(item.data.rows, item.data.meta);
+    return true;
+  }
+  return false;
+}
+// ─── PARSE & PROCESS CSV (IndoBERT) ─────────────────
+/**
+ * Process CSV text: parse, clean, and classify sentiment via IndoBERT API.
+ * This is an async function that sends texts in batches to the backend.
+ * @param {string} csvText - Raw CSV text content
+ * @param {function} onProgress - Progress callback(done, total)
+ * @returns {Promise<{rows: Array, meta: Object}|null>} - null if API error
+ */
+async function processCSV(csvText, onProgress) {
+  // 1. First check if model is healthy
+  const health = await checkModelHealth();
+  if (!health.ok) {
+    throw new Error(health.error);
+  }
+  // 2. Parse CSV
+  const result = Papa.parse(csvText, { header:true, skipEmptyLines:true });
+  const raw    = result.data;
+  if (!raw.length) return { rows: [], meta: {} };
+  const TEXT_COLS = ['full_text','text','tweet','content','teks','body'];
+  const textCol = TEXT_COLS.find(c => c in raw[0]) || Object.keys(raw[0])[0];
+  // 3. Build preliminary rows (without sentiment) and collect texts to classify
+  const preRows = [];
+  const textsToClassify = [];
+  const cleanedTexts = [];
+  for (let i = 0; i < raw.length; i++) {
+    const r = raw[i];
+    const rawTxt = (r[textCol]||'').trim();
+    if (!rawTxt) continue;
+    const cleaned = cleanText(rawTxt);
+    const fav = parseInt(r.favorite_count)||0;
+    const rt  = parseInt(r.retweet_count)||0;
+    const rep = parseInt(r.reply_count)||0;
+    const qot = parseInt(r.quote_count)||0;
+    const media_url = r.media_url || r.media_url_https || r.photo_url || r.image_url || '';
+    const tweetId = r.id_str || r.tweet_id || r.id || r.rest_id || '';
+    preRows.push({
+      tweetId,
+      raw:  rawTxt,
+      cleaned,
+      username: r.username||r.user_screen_name||'—',
+      location: (r.location||'').trim()||'—',
+      date:     r.created_at||'',
+      lang:     r.lang||'in',
+      fav, rt, rep, qot,
+      engagement: fav + rt + rep + qot,
+      media_url,
+      wordsBefore: rawTxt.split(/\s+/).length,
+      wordsAfter:  cleaned.split(/\s+/).filter(Boolean).length,
+    });
+    // Send original text to model for best accuracy
+    textsToClassify.push(rawTxt);
+    cleanedTexts.push(cleaned);
+  }
+  if (preRows.length === 0) return { rows: [], meta: {} };
+  // 4. Send texts in batches to IndoBERT API
+  const total = textsToClassify.length;
+  const sentimentResults = [];
+  let processed = 0;
+  for (let i = 0; i < total; i += INDOBERT_BATCH_SIZE) {
+    const batch = textsToClassify.slice(i, i + INDOBERT_BATCH_SIZE);
+    const batchResults = await classifyBatch(batch);
+    sentimentResults.push(...batchResults);
+    processed += batch.length;
+    if (onProgress) onProgress(processed, total);
+    // Small yield to allow UI updates
+    await new Promise(r => setTimeout(r, 10));
+  }
+  // 5. Merge sentiment results into rows
+  const rows = preRows.map((r, idx) => ({
+    id: idx + 1,
+    ...r,
+    sentiment:  sentimentResults[idx].label,
+    confidence: sentimentResults[idx].score,
+  }));
+  // Meta
+  const dates = rows.map(r=>r.date).filter(Boolean).sort();
+  const meta = {
+    totalRows: rows.length,
+    filename: window._uploadedFilename || 'data.csv',
+    dateMin: dates[0]||'',
+    dateMax: dates[dates.length-1]||'',
+    processedAt: new Date().toISOString(),
+  };
+  return { rows, meta };
+}
+// ─── THEME MANAGER ──────────────────────────────────
+const THEME_KEY = 'sentimeter_theme';
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem(THEME_KEY, theme);
+  const btn = document.getElementById('themeToggleTrack');
+  if (btn) btn.classList.toggle('on', theme === 'light');
+  // Update Chart.js colors if charts exist
+  if (window.chartInstances) {
+    const gridCol = theme === 'light' ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.05)';
+    const textCol = theme === 'light' ? '#4a5568' : '#525b72';
+    if (typeof Chart !== 'undefined') {
+      Chart.defaults.color = textCol;
+    }
+  }
+}
+function initTheme() {
+  const saved = localStorage.getItem(THEME_KEY) || 'dark';
+  document.documentElement.setAttribute('data-theme', saved);
+}
+// Apply theme IMMEDIATELY before any paint
+initTheme();
+// ─── SVG ICONS ───────────────────────────────
+const I = {
+  upload: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
+  intro: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+  dash: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>`,
+  chart: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>`,
+  tweets: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,
+  table: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>`,
+  lab: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg>`,
+  sun: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`,
+  moon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`,
+  collapse: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>`,
+  expand: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></svg>`,
+  check: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
+  alert: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+  menu: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>`,
+  close: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+  history: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>`,
+  heart: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>`
+};
+// ─── SIDEBAR INJECTOR ───────────────────────────────
+const NAV_ITEMS = [
+  { href:'index.html',     label:'Pengenalan',    id:'nav-intro',     icon: I.intro,    alwaysUnlocked: true },
+  { href:'upload.html',    label:'Upload Data',   id:'nav-upload',    icon: I.upload,   alwaysUnlocked: true },
+  { href:'dashboard.html', label:'Dashboard',     id:'nav-dashboard', icon: I.dash },
+  { href:'analytics.html', label:'Analytics',     id:'nav-analytics', icon: I.chart },
+  { href:'tweets.html',    label:'Tweet List',    id:'nav-tweets',    icon: I.tweets },
+  { href:'data.html',      label:'Data & Tabel',  id:'nav-data',      icon: I.table },
+  { href:'cleaning.html',  label:'Cleaning Lab',  id:'nav-cleaning',  icon: I.lab },
+  { href:'history.html',   label:'Riwayat Analisis', id:'nav-history', icon: I.history, alwaysUnlocked: true },
+  { href:'support.html',   label:'Dukungan',      id:'nav-support',   icon: I.heart,   alwaysUnlocked: true },
+];
+function injectLayout(activePage) {
+  const hasD = hasData();
+  const curTheme = localStorage.getItem(THEME_KEY) || 'dark';
+  const isLight  = curTheme === 'light';
+  const isSidebarCollapsed = localStorage.getItem('sentimeter_sidebar') === 'collapsed';
+  if (isSidebarCollapsed) document.body.classList.add('sidebar-collapsed');
+  const navHTML = NAV_ITEMS.map(n => {
+    const isActive = n.id === activePage;
+    const isLocked = !n.alwaysUnlocked && n.id !== 'nav-upload' && !hasD;
+    return `<a href="${isLocked?'#':n.href}"
+      class="nav-item${isActive?' active':''}${isLocked?' locked':''}"
+      ${isLocked?'title="Upload data terlebih dahulu"':''} title="${n.label}">
+      <span class="nav-icon">${n.icon}</span>
+      <span class="nav-label">${n.label}</span>
+      ${isLocked?'<span class="nav-lock">—</span>':''}
+    </a>`;
+  }).join('');
+  const sidebar = document.getElementById('sidebar');
+  if (sidebar) {
+    sidebar.innerHTML = `
+      <div class="sidebar-brand">
+        <div class="brand-mark"></div>
+        <div class="brand-text-wrap">
+          <div class="brand-name">SentiMeter</div>
+          <div class="brand-sub">IndoBERT · ID</div>
+        </div>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="nav-section-label">Navigasi</div>
+        ${navHTML}
+      </nav>
+      <div class="sidebar-footer">
+        <button class="theme-toggle" id="themeToggleBtn" title="Ganti tema">
+          <span class="theme-icon-wrap" style="display:flex;align-items:center;gap:10px">
+            <span class="nav-icon" id="themeIcon">${isLight ? I.sun : I.moon}</span>
+            <span class="theme-text">${isLight ? 'Light Mode' : 'Dark Mode'}</span>
+          </span>
+          <div class="toggle-track${isLight?' on':''}" id="themeToggleTrack">
+            <div class="toggle-thumb"></div>
+          </div>
+        </button>
+        <button class="theme-toggle sidebar-toggle-btn" style="margin-top:6px" id="sidebarToggleBtn" title="Toggle Sidebar">
+          <span class="theme-icon-wrap" style="display:flex;align-items:center;gap:10px">
+            <span class="nav-icon" id="collapseIcon" style="border:none;background:transparent;margin:0">${isSidebarCollapsed ? I.expand : I.collapse}</span>
+            <span class="theme-text">Sembunyikan Menu</span>
+          </span>
+        </button>
+        <div style="margin-top:8px">
+          ${hasD ? `<div class="data-badge" title="Data dimuat">
+                      <span class="badge-icon">${I.check}</span>
+                      <span class="badge-text">Data dimuat</span>
+                    </div>`
+                 : `<div class="data-badge no-data" title="Belum ada data">
+                      <span class="badge-icon">${I.alert}</span>
+                      <span class="badge-text">Belum ada data</span>
+                    </div>`}
+        </div>
+      </div>
+    `;
+    // Inject Mobile Menu Trigger to Topbar
+    const topbar = document.querySelector('.topbar');
+    if (topbar && !document.getElementById('mobileMenuBtn')) {
+      const menuBtn = document.createElement('button');
+      menuBtn.id = 'mobileMenuBtn';
+      menuBtn.className = 'mobile-menu-btn';
+      menuBtn.innerHTML = I.menu;
+      topbar.prepend(menuBtn);
+      menuBtn.addEventListener('click', () => {
+        document.body.classList.add('sidebar-mobile-open');
+      });
+    }
+    // Inject Overlay
+    if (!document.getElementById('sidebarOverlay')) {
+      const overlay = document.createElement('div');
+      overlay.id = 'sidebarOverlay';
+      overlay.className = 'sidebar-overlay';
+      document.body.appendChild(overlay);
+      overlay.addEventListener('click', () => {
+        document.body.classList.remove('sidebar-mobile-open');
+      });
+    }
+    document.getElementById('themeToggleBtn').addEventListener('click', () => {
+      const current = document.documentElement.getAttribute('data-theme') || 'dark';
+      const next = current === 'dark' ? 'light' : 'dark';
+      applyTheme(next);
+      const spanText = document.querySelector('#themeToggleBtn .theme-text');
+      const iconWrap = document.querySelector('#themeIcon');
+      if (spanText) spanText.textContent = next === 'light' ? 'Light Mode' : 'Dark Mode';
+      if (iconWrap) iconWrap.innerHTML = next === 'light' ? I.sun : I.moon;
+    });
+    document.getElementById('sidebarToggleBtn').addEventListener('click', () => {
+      const isCollapsed = document.body.classList.toggle('sidebar-collapsed');
+      localStorage.setItem('sentimeter_sidebar', isCollapsed ? 'collapsed' : 'expanded');
+      const iconWrap = document.querySelector('#collapseIcon');
+      if (iconWrap) iconWrap.innerHTML = isCollapsed ? I.expand : I.collapse;
+    });
+  }
+  // Inject Toast Container
+  if (!document.getElementById('toastContainer')) {
+    const toastCont = document.createElement('div');
+    toastCont.id = 'toastContainer';
+    toastCont.className = 'toast-container';
+    document.body.appendChild(toastCont);
+  }
+}
+// ─── CHART DEFAULTS ─────────────────────────────────
+function setChartDefaults() {
+  if (typeof Chart === 'undefined') return;
+  Chart.defaults.color        = '#525b72';
+  Chart.defaults.font.family  = "'Inter', sans-serif";
+  Chart.defaults.font.size    = 11;
+  Chart.defaults.plugins.tooltip.padding = 10;
+  Chart.defaults.plugins.tooltip.cornerRadius = 8;
+  Chart.defaults.plugins.tooltip.titleFont = { weight:'600' };
+}
+// ─── COLOR PALETTE ───────────────────────────────────
+const C = {
+  pos:'#34d399', posDim:'rgba(52,211,153,0.15)', posMid:'rgba(52,211,153,0.6)',
+  neg:'#f87171', negDim:'rgba(248,113,113,0.15)', negMid:'rgba(248,113,113,0.6)',
+  neu:'#fbbf24', neuDim:'rgba(251,191,36,0.15)',  neuMid:'rgba(251,191,36,0.6)',
+  a1:'#6c8fff', a1d:'rgba(108,143,255,0.15)',
+  a2:'#a78bfa', a2d:'rgba(167,139,250,0.15)',
+  a3:'#60d9f9', a3d:'rgba(96,217,249,0.15)',
+  a4:'#f472b6', a4d:'rgba(244,114,182,0.15)',
+  a5:'#fb923c', a5d:'rgba(251,146,60,0.15)',
+  palette: ['#6c8fff','#a78bfa','#60d9f9','#f472b6','#fb923c','#34d399','#f87171','#fbbf24'],
+};
+// grid line shorthand
+const gridColor = 'rgba(255,255,255,0.05)';
+// destroy helper
+const chartInstances = {};
+function mkChart(id, config) {
+  if (chartInstances[id]) { chartInstances[id].destroy(); }
+  const ctx = document.getElementById(id);
+  if (!ctx) return;
+  chartInstances[id] = new Chart(ctx, config);
+  return chartInstances[id];
+}
+// ─── CUSTOM SELECT COMPONENT ────────────────────────
+function initCustomSelect(sel, opts = {}) {
+  if (!sel || sel._csdInit) return;
+  sel._csdInit = true;
+  const compact  = opts.compact  || false;
+  const showDots = opts.showDots || null; // { value: cssColor }
+  // Build wrapper
+  const wrap = document.createElement('div');
+  wrap.className = 'csd-wrap' + (compact ? ' csd-compact' : '');
+  // Build trigger
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = 'csd-trigger';
+  const labelEl = document.createElement('span');
+  labelEl.className = 'csd-label';
+  const chevron = document.createElementNS('http://www.w3.org/2000/svg','svg');
+  chevron.setAttribute('viewBox','0 0 24 24');
+  chevron.setAttribute('fill','none');
+  chevron.setAttribute('stroke','currentColor');
+  chevron.setAttribute('stroke-width','2.2');
+  chevron.setAttribute('stroke-linecap','round');
+  chevron.setAttribute('stroke-linejoin','round');
+  chevron.classList.add('csd-chevron');
+  chevron.innerHTML = '<polyline points="6 9 12 15 18 9"/>';
+  trigger.appendChild(labelEl);
+  trigger.appendChild(chevron);
+  // Build panel
+  const panel = document.createElement('div');
+  panel.className = 'csd-panel';
+  panel.style.display = 'none';
+  const searchWrap = document.createElement('div');
+  searchWrap.className = 'csd-search-wrap';
+  const searchInput = document.createElement('input');
+  searchInput.className = 'csd-search';
+  searchInput.type = 'text';
+  searchInput.placeholder = 'Cari...';
+  searchInput.autocomplete = 'off';
+  searchWrap.appendChild(searchInput);
+  const list = document.createElement('div');
+  list.className = 'csd-list';
+  panel.appendChild(searchWrap);
+  panel.appendChild(list);
+  wrap.appendChild(trigger);
+  wrap.appendChild(panel);
+  // Insert before native select, hide it
+  sel.parentNode.insertBefore(wrap, sel);
+  sel.style.display = 'none';
+  wrap.appendChild(sel); // keep in DOM for value access
+  function updateLabel() {
+    const cur = sel.options[sel.selectedIndex];
+    labelEl.textContent = cur ? cur.text : '—';
+  }
+  function renderList(query) {
+    const q = (query || '').toLowerCase().trim();
+    list.innerHTML = '';
+    let count = 0;
+    Array.from(sel.options).forEach(o => {
+      if (q && !o.text.toLowerCase().includes(q)) return;
+      count++;
+      const item = document.createElement('div');
+      item.className = 'csd-option' + (o.selected ? ' selected' : '');
+      item.dataset.value = o.value;
+      if (showDots && showDots[o.value]) {
+        const dot = document.createElement('span');
+        dot.className = 'csd-dot';
+        dot.style.background = showDots[o.value];
+        item.appendChild(dot);
+      }
+      const txt = document.createElement('span');
+      txt.textContent = o.text;
+      item.appendChild(txt);
+      // Check SVG
+      const check = document.createElementNS('http://www.w3.org/2000/svg','svg');
+      check.setAttribute('viewBox','0 0 24 24');
+      check.setAttribute('fill','none');
+      check.setAttribute('stroke','currentColor');
+      check.setAttribute('stroke-width','3');
+      check.setAttribute('stroke-linecap','round');
+      check.setAttribute('stroke-linejoin','round');
+      check.classList.add('csd-check');
+      check.innerHTML = '<polyline points="20 6 9 17 4 12"/>';
+      item.appendChild(check);
+      item.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        sel.value = o.value;
+        sel.dispatchEvent(new Event('change', { bubbles: true }));
+        updateLabel();
+        closePanel();
+      });
+      list.appendChild(item);
+    });
+    if (count === 0) {
+      const em = document.createElement('div');
+      em.className = 'csd-empty';
+      em.textContent = 'Tidak ada hasil';
+      list.appendChild(em);
+    }
+  }
+  function openPanel() {
+    panel.style.display = 'block';
+    trigger.classList.add('open');
+    searchInput.value = '';
+    renderList('');
+    const selItem = list.querySelector('.selected');
+    if (selItem) selItem.scrollIntoView({ block: 'nearest' });
+    if (!compact) requestAnimationFrame(() => searchInput.focus());
+  }
+  function closePanel() {
+    panel.style.display = 'none';
+    trigger.classList.remove('open');
+  }
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    panel.style.display === 'none' ? openPanel() : closePanel();
+  });
+  searchInput.addEventListener('input', () => renderList(searchInput.value));
+  searchInput.addEventListener('click', e => e.stopPropagation());
+  panel.addEventListener('click', e => e.stopPropagation());
+  document.addEventListener('click', (e) => {
+    if (!wrap.contains(e.target)) closePanel();
+  });
+  trigger.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); panel.style.display === 'none' ? openPanel() : closePanel(); }
+    if (e.key === 'Escape') closePanel();
+  });
+  // Sync when value changed externally (e.g. reset)
+  const origChange = sel.onchange;
+  sel.addEventListener('_csdRefresh', updateLabel);
+  updateLabel();
+  return { open: openPanel, close: closePanel, refresh: updateLabel };
+}
+// ─── CUSTOM NUMBER INPUT ────────────────────────────
+function initCustomNumber(inp) {
+  if (!inp || inp._cniInit) return;
+  inp._cniInit = true;
+  const wrap = document.createElement('div');
+  wrap.className = 'cni-wrap';
+  inp.parentNode.insertBefore(wrap, inp);
+  wrap.appendChild(inp);
+  const arrows = document.createElement('div');
+  arrows.className = 'cni-arrows';
+  const btnUp = document.createElement('button');
+  btnUp.type = 'button';
+  btnUp.className = 'cni-btn';
+  // Up chevron
+  btnUp.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>`;
+  const btnDown = document.createElement('button');
+  btnDown.type = 'button';
+  btnDown.className = 'cni-btn';
+  // Down chevron
+  btnDown.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+  arrows.appendChild(btnUp);
+  arrows.appendChild(btnDown);
+  wrap.appendChild(arrows);
+  function step(dir) {
+    let val = parseFloat(inp.value) || 0;
+    let s = parseFloat(inp.step) || 1;
+    let min = inp.hasAttribute('min') ? parseFloat(inp.min) : -Infinity;
+    let max = inp.hasAttribute('max') ? parseFloat(inp.max) : Infinity;
+    val += (dir * s);
+    if (val < min) val = min;
+    if (val > max) val = max;
+    // Round to precision to avoid JS float precision issues (like .999999999)
+    const decimals = (String(s).split('.')[1] || '').length;
+    inp.value = decimals ? val.toFixed(decimals) : String(Math.round(val));
+    inp.dispatchEvent(new Event('input', { bubbles: true }));
+    inp.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+  btnUp.addEventListener('click', (e) => { e.preventDefault(); step(1); inp.focus(); });
+  btnDown.addEventListener('click', (e) => { e.preventDefault(); step(-1); inp.focus(); });
+}
+// expose globals
+window.SM = {
+  STOPWORDS, PIPELINE_STEPS,
+  cleanText, cleanSteps, cleanStep,
+  checkModelHealth, classifyBatch,
+  fmt, esc, avg,
+  saveData, loadData, hasData, clearData, processCSV,
+  getHistory, saveToHistory, deleteHistoryItem, loadHistoryItem,
+  injectLayout, setChartDefaults, mkChart, C, gridColor,
+  initCustomSelect, initCustomNumber,
+  showToast: function(message, type = 'success') {
+    const container = document.getElementById('toastContainer');
+    if (!container) return;
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type} toast-enter`;
+    let icon = type === 'error' ? I.alert : I.check;
+    toast.innerHTML = `<span class="toast-icon">${icon}</span><span class="toast-message">${message}</span>`;
+    container.appendChild(toast);
+    void toast.offsetWidth;
+    toast.classList.remove('toast-enter');
+    setTimeout(() => {
+      toast.classList.add('toast-exit');
+      toast.addEventListener('transitionend', () => toast.remove());
+    }, 3000);
+  },
+  showModal: function(opts) {
+    const {
+      title, message, type = 'success',
+      confirmText = 'OK, Lanjutkan',
+      onConfirm,
+      showCancel = false,
+      cancelText = 'Batal',
+      onCancel,
+      isDanger = false
+    } = opts;
+    const overlay = document.createElement('div');
+    overlay.className = 'modal-overlay';
+    const modal = document.createElement('div');
+    modal.className = `modal-box modal-${type}`;
+    let icon = type === 'error' ? I.alert : I.check;
+    let btnsHTML = `<div class="modal-btns">
+      ${showCancel ? `<button class="btn modal-btn modal-btn-cancel">${cancelText}</button>` : ''}
+      <button class="btn modal-btn ${isDanger ? 'modal-btn-danger' : 'btn-primary'}">${confirmText}</button>
+    </div>`;
+    modal.innerHTML = `
+      <div class="modal-icon-wrap">${icon}</div>
+      <h3 class="modal-title">${title}</h3>
+      <p class="modal-desc">${message}</p>
+      ${btnsHTML}
+    `;
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    // trigger animation
+    void overlay.offsetWidth;
+    overlay.classList.add('active');
+    // bind confirm
+    const btnConfirm = modal.querySelector(isDanger ? '.modal-btn-danger' : '.btn-primary');
+    btnConfirm.addEventListener('click', () => {
+      overlay.classList.remove('active');
+      setTimeout(() => {
+        overlay.remove();
+        if (onConfirm) onConfirm();
+      }, 300);
+    });
+    if (showCancel) {
+      const btnCancel = modal.querySelector('.modal-btn-cancel');
+      btnCancel.addEventListener('click', () => {
+        overlay.classList.remove('active');
+        setTimeout(() => {
+          overlay.remove();
+          if (onCancel) onCancel();
+        }, 300);
+      });
+    }
+  }
+};
+// Auto-trigger persistence modal check on page load
+document.addEventListener('DOMContentLoaded', () => {
+  setTimeout(() => {
+    if (window.SM && window.SM.hasData()) {
+      let isReload = false;
+      // 1. Basic modern performance check (works on desktop)
+      if (window.performance) {
+        const navEntries = performance.getEntriesByType('navigation');
+        if (navEntries.length > 0 && navEntries[0].type === 'reload') {
+          isReload = true;
+        } else if (performance.navigation && performance.navigation.type === 1) {
+          isReload = true;
+        }
+      }
+      // 2. Bulletproof Mobile Reload Detection (Pull-to-refresh bypasses performance API on iOS/Safari)
+      // When a user clicks a link, we set a flag. If the flag isn't there on load, it was a direct hit/refresh.
+      if (!sessionStorage.getItem('sm_internal_nav')) {
+        // Only consider it a reload if they've been here before in this tab (not the very first click from Twitter)
+        if (sessionStorage.getItem('sm_visited')) {
+          isReload = true;
+        }
+      }
+      // Mark that this tab session has visited the site
+      sessionStorage.setItem('sm_visited', '1');
+      // Clear the internal nav flag so the NEXT load is assumed a refresh UNLESS a link is clicked
+      sessionStorage.removeItem('sm_internal_nav');
+      if (isReload) {
+        window.SM.showModal({
+          title: 'Data Tersimpan Secara Lokal',
+          message: 'Sistem menemukan data dari sesi Anda sebelumnya. Data ini disimpan dengan aman di <i>Local Storage</i> perangkat Anda dan <b>tidak diunggah ke server mana pun</b>.<br><br><span style="color:var(--neg);font-size:13px"><b style="font-weight:700">Catatan Penting:</b> Menghapus <i>cache</i> atau <i>history browser</i> akan menghapus data ini secara permanen.</span>',
+          type: 'success'
+        });
+      }
+    }
+  }, 300);
+});
+// Attach listener to all internal links to mark navigation vs refresh
+document.addEventListener('click', (e) => {
+  const link = e.target.closest('a');
+  if (link && link.href && link.hostname === window.location.hostname) {
+    sessionStorage.setItem('sm_internal_nav', '1');
+  }
+});

js/support.js ADDED Viewed

	@@ -0,0 +1,6 @@

+'use strict';
+document.addEventListener('DOMContentLoaded', () => {
+    // Inject layout
+    SM.injectLayout('nav-support');
+});

js/tweets.js ADDED Viewed

	@@ -0,0 +1,289 @@

+'use strict';
+const _store = SM.loadData();
+if (!_store) {
+  window.location.replace('upload.html');
+  throw new Error('No data — redirecting');
+}
+SM.injectLayout('nav-tweets');
+document.addEventListener('DOMContentLoaded', function () {
+  const { rows, meta } = _store;
+  document.getElementById('topbarMeta').textContent =
+    `${meta.filename} — ${rows.length} tweets`;
+  let pageSize = 20;
+  let currentPage = 1;
+  let activeFilter = 'all';
+  let searchQuery  = '';
+  let sortMode     = 'default';
+  const pos = rows.filter(r => r.sentiment === 'Positif').length;
+  const neg = rows.filter(r => r.sentiment === 'Negatif').length;
+  const neu = rows.filter(r => r.sentiment === 'Netral').length;
+  // Update tab counts
+  document.getElementById('cntPos').textContent = pos;
+  document.getElementById('cntNeg').textContent = neg;
+  document.getElementById('cntNeu').textContent = neu;
+  function getFiltered() {
+    let result = rows;
+    if (activeFilter !== 'all') result = result.filter(r => r.sentiment === activeFilter);
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(r =>
+        (r.raw||'').toLowerCase().includes(q) ||
+        (r.username||'').toLowerCase().includes(q) ||
+        (r.location||'').toLowerCase().includes(q)
+      );
+    }
+    // Sort
+    if (sortMode === 'conf-desc') result = [...result].sort((a,b) => b.confidence - a.confidence);
+    else if (sortMode === 'conf-asc') result = [...result].sort((a,b) => a.confidence - b.confidence);
+    else if (sortMode === 'engage-desc') result = [...result].sort((a,b) => (b.engagement||0) - (a.engagement||0));
+    else if (sortMode === 'date-desc') result = [...result].sort((a,b) => (b.date||'').localeCompare(a.date||''));
+    else if (sortMode === 'date-asc')  result = [...result].sort((a,b) => (a.date||'').localeCompare(b.date||''));
+    return result;
+  }
+  function formatDate(ds) {
+    if (!ds) return '';
+    const d = new Date(ds);
+    if (isNaN(d.getTime())) return ds.slice(0,16).replace('T',' ');
+    return d.toLocaleDateString('id-ID', {day:'numeric',month:'short',year:'numeric'}) +
+           ' · ' + d.toLocaleTimeString('id-ID', {hour:'2-digit',minute:'2-digit'});
+  }
+  function initials(name) {
+    if (!name || name === '—') return '?';
+    return name.replace('@','').split(/[\s_]/)[0].slice(0,2).toUpperCase();
+  }
+  function avatarColor(name) {
+    const colors = ['#6c8fff','#a78bfa','#34d399','#f472b6','#fb923c','#60d9f9','#f87171','#fbbf24'];
+    let h = 0;
+    for (let c of (name||'')) h = (h * 31 + c.charCodeAt(0)) & 0xffffffff;
+    return colors[Math.abs(h) % colors.length];
+  }
+  function renderHashtags(text) {
+    return (text.match(/#(\w+)/g) || []).slice(0,5)
+      .map(t => `<span class="tl-hashtag">${SM.esc(t)}</span>`).join('');
+  }
+  function highlightText(text, q) {
+    if (!q) return SM.esc(text);
+    const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return SM.esc(text).replace(new RegExp(`(${escaped})`, 'gi'),
+      '<mark class="tl-highlight">$1</mark>');
+  }
+  function sentimentClass(s) {
+    return s === 'Positif' ? 'pos' : s === 'Negatif' ? 'neg' : 'neu';
+  }
+  function sentimentBadgeClass(s) {
+    return s === 'Positif' ? 'badge-pos' : s === 'Negatif' ? 'badge-neg' : 'badge-neu';
+  }
+  function renderConfBar(conf, sent) {
+    const pct = (conf * 100).toFixed(0);
+    const cls = sent === 'Positif' ? 'conf-fill-pos' : sent === 'Negatif' ? 'conf-fill-neg' : 'conf-fill-neu';
+    return `<div class="tl-conf-wrap">
+      <span class="tl-conf-val">${(conf*100).toFixed(1)}%</span>
+      <div class="tl-conf-track">
+        <div class="tl-conf-fill ${cls}" style="width:${pct}%"></div>
+      </div>
+    </div>`;
+  }
+  function renderCard(r) {
+    const sc   = sentimentClass(r.sentiment);
+    const sbc  = sentimentBadgeClass(r.sentiment);
+    const col  = avatarColor(r.username);
+    const init = initials(r.username);
+    const tags = renderHashtags(r.raw);
+    const hasMedia = r.media_url || r.photo_url || r.image_url;
+    const mediaURL = r.media_url || r.photo_url || r.image_url || '';
+    return `
+    <div class="tl-card tl-card-${sc}">
+      <!-- Card Header -->
+      <div class="tl-card-header">
+        <div class="tl-avatar" style="background:${col}">${init}</div>
+        <div class="tl-user-info">
+          <div class="tl-user-row">
+            <span class="tl-username">@${SM.esc(r.username || '—')}</span>
+            <span class="tl-date">${formatDate(r.date)}</span>
+          </div>
+          ${r.location && r.location !== '—' ? `<span class="tl-location">${SM.esc(r.location)}</span>` : ''}
+        </div>
+        <div class="tl-header-right">
+          <div style="display:flex; gap:6px; align-items:center;">
+            <span class="badge ${sbc} tl-sent-badge">${SM.esc(r.sentiment)}</span>
+            ${r.tweetId ?
+            `<a href="https://twitter.com/${SM.esc(r.username)}/status/${r.tweetId}" target="_blank" rel="noopener noreferrer" class="tl-link-btn" title="Buka di X (Twitter)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </a>` : ''}
+          </div>
+        </div>
+      </div>
+      <!-- Tweet Text -->
+      <div class="tl-tweet-text">${highlightText(r.raw, searchQuery)}</div>
+      <!-- Hashtags -->
+      ${tags ? `<div class="tl-tags-row">${tags}</div>` : ''}
+      <!-- Media (if available) -->
+      ${hasMedia ? `<div class="tl-media"><img src="${SM.esc(mediaURL)}" alt="tweet media" class="tl-media-img" loading="lazy" onerror="this.parentElement.style.display='none'" /></div>` : ''}
+      <!-- Footer -->
+      <div class="tl-card-footer">
+        <div class="tl-engage-row">
+          <span class="tl-engage-item" title="Replies">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            ${r.rep || 0}
+          </span>
+          <span class="tl-engage-item" title="Retweets">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+            ${r.rt || 0}
+          </span>
+          <span class="tl-engage-item" title="Likes">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            ${r.fav || 0}
+          </span>
+          ${r.qot ? `<span class="tl-engage-item" title="Quotes">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
+            ${r.qot}
+          </span>` : ''}
+        </div>
+      </div>
+    </div>`;
+  }
+  function render() {
+    const filtered = getFiltered();
+    const total    = filtered.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    currentPage = Math.min(currentPage, totalPages);
+    const start = (currentPage - 1) * pageSize;
+    const end   = Math.min(start + pageSize, total);
+    const page  = filtered.slice(start, end);
+    const feed = document.getElementById('tweetFeed');
+    if (!page.length) {
+      feed.innerHTML = `
+        <div class="empty-state" style="margin-top:20px;border:1px dashed var(--border)">
+          <div class="empty-state-title">Tidak ada tweet ditemukan</div>
+          <div class="empty-state-desc">Coba ubah filter atau kata kunci pencarian</div>
+        </div>`;
+    } else {
+      feed.innerHTML = page.map(r => renderCard(r)).join('');
+    }
+    // Info
+    document.getElementById('tweetInfo').textContent =
+      total > 0
+        ? `Menampilkan ${start + 1}–${end} dari ${total} data (total ${rows.length})`
+        : '';
+    // Pagination
+    renderPagination(totalPages);
+    // Stats pills
+    document.getElementById('tweetStats').innerHTML =
+      `<span class="tl-stat-pill" style="background:var(--pos-d);color:var(--pos)">${pos} Positif</span>
+       <span class="tl-stat-pill" style="background:var(--neg-d);color:var(--neg)">${neg} Negatif</span>
+       <span class="tl-stat-pill" style="background:var(--neu-d);color:var(--neu)">${neu} Netral</span>`;
+  }
+  function renderPagination(totalPages) {
+    const pg = document.getElementById('tweetPagination');
+    if (totalPages <= 1) { pg.innerHTML = ''; return; }
+    const range = [];
+    range.push(1);
+    if (currentPage > 3) range.push('…');
+    for (let i = Math.max(2, currentPage-1); i <= Math.min(totalPages-1, currentPage+1); i++) range.push(i);
+    if (currentPage < totalPages - 2) range.push('…');
+    if (totalPages > 1) range.push(totalPages);
+    pg.innerHTML = `
+      <button class="pg-btn" ${currentPage===1?'disabled':''} id="pgPrev" title="Previous">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>
+      ${range.map(p => p === '…'
+        ? `<span class="pg-btn dots">…</span>`
+        : `<button class="pg-btn ${p===currentPage?'active':''}" data-page="${p}">${p}</button>`
+      ).join('')}
+      <button class="pg-btn" ${currentPage===totalPages?'disabled':''} id="pgNext" title="Next">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="9 18 15 12 9 6"/></svg>
+      </button>`;
+    pg.querySelectorAll('[data-page]').forEach(btn => {
+      btn.addEventListener('click', () => { currentPage = +btn.dataset.page; render(); scrollToFeed(); });
+    });
+    const prev = pg.querySelector('#pgPrev');
+    const next = pg.querySelector('#pgNext');
+    if (prev) prev.addEventListener('click', () => { currentPage--; render(); scrollToFeed(); });
+    if (next) next.addEventListener('click', () => { currentPage++; render(); scrollToFeed(); });
+  }
+  function scrollToFeed() {
+    document.getElementById('tweetFeed').scrollIntoView({ behavior:'smooth', block:'start' });
+  }
+  // ── Filter tabs ──
+  document.querySelectorAll('.tl-tab').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.tl-tab').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      activeFilter = btn.dataset.filter;
+      currentPage  = 1;
+      render();
+    });
+  });
+  // ── Search ──
+  let searchTimer;
+  document.getElementById('tweetSearch').addEventListener('input', e => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      searchQuery = e.target.value.trim();
+      document.getElementById('searchClear').style.display = searchQuery ? 'flex' : 'none';
+      currentPage = 1;
+      render();
+    }, 220);
+  });
+  document.getElementById('searchClear').addEventListener('click', () => {
+    document.getElementById('tweetSearch').value = '';
+    searchQuery = '';
+    document.getElementById('searchClear').style.display = 'none';
+    currentPage = 1;
+    render();
+  });
+  // ── Sort ──
+  document.getElementById('sortSel').addEventListener('change', e => {
+    sortMode = e.target.value;
+    currentPage = 1;
+    render();
+  });
+  // Initial render
+  render();
+  // ── Custom Dropdowns ──
+  SM.initCustomSelect(document.getElementById('sortSel'), { compact: false });
+  SM.initCustomSelect(document.getElementById('pageSizeSel'), { compact: true });
+  // ── Page Size Change ──
+  document.getElementById('pageSizeSel').addEventListener('change', e => {
+    pageSize = parseInt(e.target.value);
+    currentPage = 1;
+    render();
+  });
+});

js/upload.js ADDED Viewed

	@@ -0,0 +1,217 @@

+'use strict';
+SM.injectLayout('nav-upload');
+const uploadZone = document.getElementById('uploadZone');
+const csvInput   = document.getElementById('csvInput');
+let selectedFiles = [];
+// ── Drag & Drop ──
+uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('drag'); });
+uploadZone.addEventListener('dragleave', ()  => uploadZone.classList.remove('drag'));
+uploadZone.addEventListener('drop', e => {
+  e.preventDefault(); uploadZone.classList.remove('drag');
+  const allFiles = Array.from(e.dataTransfer.files);
+  if (!allFiles.length) return;
+  const files = allFiles.filter(f => f.name.endsWith('.csv'));
+  if (files.length) {
+    showFilePreview(files);
+  } else {
+    SM.showModal({ title: 'Format Tidak Sesuai', message: 'Hanya menerima file .csv', type: 'error' });
+  }
+});
+uploadZone.addEventListener('click', e => {
+  if (e.target.tagName === 'BUTTON') return;
+  csvInput.click();
+});
+csvInput.addEventListener('change', e => {
+  const allFiles = Array.from(e.target.files);
+  if (!allFiles.length) return;
+  const files = allFiles.filter(f => f.name.endsWith('.csv'));
+  if (files.length) {
+    showFilePreview(files);
+  } else {
+    SM.showModal({ title: 'Format Tidak Sesuai', message: 'Hanya menerima file dataset dalam format <strong>.csv</strong>.', type: 'error' });
+  }
+});
+function showFilePreview(files) {
+  selectedFiles = files;
+  const totalSize = files.reduce((acc, f) => acc + f.size, 0);
+  if (files.length === 1) {
+    window._uploadedFilename = files[0].name;
+    document.getElementById('fileName').textContent = files[0].name;
+  } else {
+    window._uploadedFilename = `${files.length}_File_CSV_Gabungan.csv`;
+    document.getElementById('fileName').textContent = `${files.length} File CSV Terpilih`;
+  }
+  document.getElementById('filePreview').style.display = 'flex';
+  document.getElementById('fileMeta').textContent  = `${(totalSize/1024).toFixed(1)} KB`;
+}
+document.getElementById('btnCancel').addEventListener('click', () => {
+  selectedFiles = [];
+  csvInput.value = '';
+  document.getElementById('filePreview').style.display = 'none';
+});
+document.getElementById('btnAnalyze').addEventListener('click', async () => {
+  if (!selectedFiles || selectedFiles.length === 0) return;
+  document.getElementById('filePreview').style.display   = 'none';
+  document.getElementById('progressWrap').style.display  = 'block';
+  const steps = ['Membaca file...','Parsing CSV...','Menjalankan Text Cleaning...',
+    'Tokenisasi IndoBERT...','Klasifikasi Sentimen...','Menyimpan Hasil...','Selesai!'];
+  let combinedText = '';
+  for (let i = 0; i < selectedFiles.length; i++) {
+    let t = await selectedFiles[i].text();
+    // Untuk file kedua dan seterusnya, hapus baris pertama (header csv) agar tidak ikut terproses
+    if (i > 0) {
+      const firstNewline = t.indexOf('\\n');
+      if (firstNewline !== -1) t = t.substring(firstNewline + 1);
+    }
+    // Gabungkan text, pastikan dipisah enter
+    combinedText += t + (t.endsWith('\\n') ? '' : '\\n');
+  }
+  const text = combinedText;
+  // Update progress UI step
+  document.getElementById('progressStep').textContent = steps[0];
+  // Run in next tick so UI updates first
+  await new Promise(r => setTimeout(r, 30));
+  let stepIdx = 0;
+  function progress(done, total) {
+    const pct = Math.round((done/total)*100);
+    document.getElementById('progressBar').style.width  = pct + '%';
+    document.getElementById('progressPct').textContent  = pct + '%';
+    const si = Math.min(Math.floor((pct/100)*steps.length), steps.length-1);
+    if (si !== stepIdx) { stepIdx = si; document.getElementById('progressStep').textContent = steps[si]; }
+  }
+  try {
+    // processCSV is now async — calls IndoBERT API in batches
+    const result = await SM.processCSV(text, progress);
+    if (!result || !result.rows || !result.rows.length) {
+      SM.showModal({
+        title: 'Dataset Kosong',
+        message: 'Tidak ada data teks yang ditemukan dalam file CSV tersebut.',
+        type: 'error'
+      });
+      document.getElementById('progressWrap').style.display = 'none';
+      document.getElementById('filePreview').style.display = 'flex';
+      return;
+    }
+    const { rows, meta } = result;
+    // Animate to 100%
+    document.getElementById('progressBar').style.width  = '100%';
+    document.getElementById('progressPct').textContent  = '100%';
+    document.getElementById('progressStep').textContent = 'Selesai! Menyiapkan dashboard...';
+    SM.saveData(rows, meta);
+    // Show center success modal
+    setTimeout(() => {
+      SM.showModal({
+        title: 'Analisis Selesai',
+        message: `
+          Berhasil memproses <strong>${SM.fmt(rows.length)}</strong> teks dengan model machine learning IndoBERT. Hasil analisis telah siap untuk ditinjau.
+          <br><br>
+          <span style="font-size:13.5px;color:var(--tx2);display:block;background:var(--bg-card2);padding:16px;border-radius:12px;text-align:left;line-height:1.5;">
+            <strong>Peringatan Penting:</strong> Seluruh data sentimen dan riwayat file CSV Anda disimpan secara permanen di memori lokal (<em>Local Storage</em>) peramban web ini untuk menjamin privasi. <strong>Tolong jangan menghapus riwayat peramban atau <em>Cache / Clear Data</em></strong>, karena akan menyebabkan semua data di Riwayat Analisis hilang secara permanen.
+          </span>
+        `,
+        type: 'success',
+        onConfirm: () => { window.location.href = 'dashboard.html'; }
+      });
+    }, 400);
+  } catch (err) {
+    // Show error popup when IndoBERT model / API fails
+    document.getElementById('progressWrap').style.display = 'none';
+    document.getElementById('filePreview').style.display = 'flex';
+    // Reset progress bar
+    document.getElementById('progressBar').style.width = '0%';
+    document.getElementById('progressPct').textContent = '0%';
+    document.getElementById('progressStep').textContent = '';
+    SM.showModal({
+      title: 'Gagal Memproses Sentimen',
+      message: `
+        <strong>Model IndoBERT tidak dapat diakses.</strong><br><br>
+        ${SM.esc(err.message || 'Terjadi kesalahan yang tidak diketahui.')}
+        <br><br>
+        <span style="font-size:13px;color:var(--tx2);display:block;background:var(--bg-card2);padding:14px;border-radius:10px;text-align:left;line-height:1.5;">
+          <strong>Solusi:</strong><br>
+          1. Pastikan server Python sudah berjalan (<code>python app.py</code>)<br>
+          2. Pastikan model IndoBERT sudah terunduh dengan benar<br>
+          3. Pastikan dependensi Python sudah terinstall (<code>pip install -r requirements.txt</code>)
+        </span>
+      `,
+      type: 'error'
+    });
+  }
+});
+// ── Demo Data Trigger ──
+const btnDemo = document.getElementById('btnDemoData');
+if (btnDemo) {
+  btnDemo.addEventListener('click', async () => {
+    if (typeof window.DEMO_CSV === 'undefined') {
+      SM.showToast('Data demo tidak tersedia.', 'error');
+      return;
+    }
+    // Set demo filename for meta
+    window._uploadedFilename = 'demo_300_tweets.csv';
+    document.getElementById('filePreview').style.display   = 'none';
+    document.getElementById('progressWrap').style.display  = 'block';
+    const steps = ['Membaca data demo...', 'Parsing CSV...', 'Menjalankan Text Cleaning...',
+      'Tokenisasi IndoBERT...', 'Klasifikasi Sentimen...', 'Menyimpan Hasil...', 'Selesai!'];
+    document.getElementById('progressStep').textContent = steps[0];
+    async function progress(done, total) {
+      const pct = Math.round((done / total) * 100);
+      document.getElementById('progressBar').style.width  = pct + '%';
+      document.getElementById('progressPct').textContent  = pct + '%';
+      const si = Math.min(Math.floor((pct / 100) * steps.length), steps.length - 1);
+      document.getElementById('progressStep').textContent = steps[si];
+    }
+    try {
+      const result = await SM.processCSV(window.DEMO_CSV, progress);
+      const { rows, meta } = result;
+      document.getElementById('progressBar').style.width  = '100%';
+      document.getElementById('progressPct').textContent  = '100%';
+      document.getElementById('progressStep').textContent = 'Selesai! Menyiapkan dashboard...';
+      SM.saveData(rows, meta);
+      setTimeout(() => {
+        SM.showModal({
+          title: 'Demo Selesai',
+          message: `Berhasil memproses <strong>${rows.length}</strong> tweet demo dengan model IndoBERT. Lihat hasilnya di dashboard!`,
+          type: 'success',
+          onConfirm: () => { window.location.href = 'dashboard.html'; }
+        });
+      }, 400);
+    } catch (err) {
+      SM.showToast('Gagal memproses demo: ' + err.message, 'error');
+      document.getElementById('progressWrap').style.display = 'none';
+    }
+  });
+}

model/config.json ADDED Viewed

	@@ -0,0 +1,55 @@

+{
+  "return_dict": true,
+  "output_hidden_states": false,
+  "dtype": "float32",
+  "chunk_size_feed_forward": 0,
+  "is_encoder_decoder": false,
+  "architectures": [
+    "BertForSequenceClassification"
+  ],
+  "id2label": {
+    "0": "Positif",
+    "1": "Netral",
+    "2": "Negatif"
+  },
+  "label2id": {
+    "Positif": 0,
+    "Netral": 1,
+    "Negatif": 2
+  },
+  "problem_type": "single_label_classification",
+  "_name_or_path": "mdhugol/indonesia-bert-sentiment-classification",
+  "transformers_version": "5.0.0",
+  "_num_labels": 5,
+  "directionality": "bidi",
+  "gradient_checkpointing": false,
+  "model_type": "bert",
+  "output_past": true,
+  "pooler_fc_size": 768,
+  "pooler_num_attention_heads": 12,
+  "pooler_num_fc_layers": 3,
+  "pooler_size_per_head": 128,
+  "pooler_type": "first_token_transform",
+  "position_embedding_type": "absolute",
+  "pad_token_id": 0,
+  "is_decoder": false,
+  "add_cross_attention": false,
+  "bos_token_id": null,
+  "eos_token_id": null,
+  "tie_word_embeddings": true,
+  "vocab_size": 50000,
+  "hidden_size": 768,
+  "num_hidden_layers": 12,
+  "num_attention_heads": 12,
+  "hidden_act": "gelu",
+  "intermediate_size": 3072,
+  "hidden_dropout_prob": 0.1,
+  "attention_probs_dropout_prob": 0.1,
+  "max_position_embeddings": 512,
+  "type_vocab_size": 2,
+  "initializer_range": 0.02,
+  "layer_norm_eps": 1e-12,
+  "use_cache": true,
+  "classifier_dropout": null,
+  "output_attentions": false
+}

model/onnx/model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:764fa04b9803d8fcf34f4abd2141c7bc2ac505829ba3e1707ddd45236e6ff7e5
+size 499366466

model/tokenizer.json ADDED Viewed

The diff for this file is too large to render. See raw diff

model/tokenizer_config.json ADDED Viewed

	@@ -0,0 +1,14 @@

+{
+  "backend": "tokenizers",
+  "cls_token": "[CLS]",
+  "do_lower_case": false,
+  "is_local": false,
+  "mask_token": "[MASK]",
+  "model_max_length": 1000000000000000019884624838656,
+  "pad_token": "[PAD]",
+  "sep_token": "[SEP]",
+  "strip_accents": null,
+  "tokenize_chinese_chars": true,
+  "tokenizer_class": "BertTokenizer",
+  "unk_token": "[UNK]"
+}

requirements.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+transformers
+torch
+flask
+flask-cors

support.html ADDED Viewed

	@@ -0,0 +1,112 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Dukungan — 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="stylesheet" href="css/support.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">Dukungan</div>
+      </div>
+      <div class="page-body">
+        <div class="sec-head" style="margin-bottom: 24px;">
+          <div>
+            <div class="sec-title">Dukungan & Kontak</div>
+            <div class="sec-sub">Berikan dukungan atau hubungi pengembang untuk bantuan</div>
+          </div>
+        </div>
+        <div class="support-grid">
+          <!-- Donation Card -->
+          <div class="support-card reveal-up" style="--d:100ms">
+            <div class="sup-icon-box" style="background:rgba(251,191,36,0.15); color:var(--neu)">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 2v20" />
+                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              </svg>
+            </div>
+            <h3 class="sup-title">Dukungan Saweria</h3>
+            <p class="sup-desc">Dukung pengembangan berkelanjutan SentiMeter agar tetap gratis dan andal.</p>
+            <a href="https://saweria.co/rhmnsae" target="_blank" class="btn btn-primary sup-btn">Kirim Dukungan
+              (Saweria)</a>
+          </div>
+          <!-- Socials Card -->
+          <div class="support-card reveal-up" style="--d:200ms">
+            <div class="sup-icon-box" style="background:rgba(108,143,255,0.15); color:var(--acc)">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                <rect width="4" height="12" x="2" y="9" />
+                <circle cx="4" cy="4" r="2" />
+              </svg>
+            </div>
+            <h3 class="sup-title">Media Sosial</h3>
+            <p class="sup-desc">Ikuti perkembangan terbaru dan terhubung dengan pengembang.</p>
+            <div class="sup-links">
+              <a href="https://github.com/rhmnsae" target="_blank" class="sup-link-item sup-link-github">
+                <span class="sup-link-icon">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path
+                      d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+                  </svg>
+                </span>
+                GitHub
+              </a>
+              <a href="https://www.instagram.com/saeplll" target="_blank" class="sup-link-item sup-link-insta">
+                <span class="sup-link-icon">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+                  </svg>
+                </span>
+                Instagram
+              </a>
+            </div>
+          </div>
+          <!-- Contact Card -->
+          <div class="support-card reveal-up" style="--d:300ms">
+            <div class="sup-icon-box" style="background:rgba(52,211,153,0.15); color:var(--pos)">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path
+                  d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+              </svg>
+            </div>
+            <h3 class="sup-title">Pusat Kendala</h3>
+            <p class="sup-desc">Ada pertanyaan atau kendala teknis? Hubungi kami langsung via WhatsApp.</p>
+            <a href="https://wa.me/6283842707945" target="_blank" class="btn btn-primary sup-btn btn-wa"
+              style="background:#25D366; border-color:#25D366">
+              Chat via WhatsApp
+            </a>
+            <span class="wa-num">0838 4270 7945</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/shared.js"></script>
+  <script src="js/support.js"></script>
+</body>
+</html>

tweets.html ADDED Viewed

	@@ -0,0 +1,101 @@

+<!DOCTYPE html>
+<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>

upload.html ADDED Viewed

	@@ -0,0 +1,96 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>Upload Data — SentiMeter</title>
+  <meta name="description" content="Upload file CSV untuk analisis sentimen IndoBERT Bahasa Indonesia" />
+  <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="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.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">Upload Data</div>
+        <div class="topbar-sub">Langkah 1 dari 6</div>
+      </div>
+      <div class="page-body upload-page-body">
+        <div class="upload-hero">
+          <div class="upload-headline">
+            <h1>Mulai Analisis Sentimen</h1>
+            <p>Silakan unggah dataset Twitter/X dalam format CSV. Sistem IndoBERT kami secara otomatis akan mendeteksi
+              kolom <code>full_text</code>, menerapkan 9 tahap text cleaning, dan memproses analisis sentimen secara
+              komprehensif tanpa memerlukan pengaturan manual.</p>
+          </div>
+          <div class="upload-zone" id="uploadZone">
+            <input type="file" id="csvInput" accept=".csv" multiple />
+            <div class="upload-inner" id="uploadInner">
+              <div class="upload-circle">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+              </div>
+              <h2 class="upload-title">Seret & Lepas file CSV</h2>
+              <p class="upload-sub">atau klik area ini untuk memilih file</p>
+              <button class="btn btn-primary btn-upload-trigger"
+                onclick="document.getElementById('csvInput').click()">Pilih File CSV</button>
+              <p class="upload-hint">Format: <code>.csv</code> — kolom <code>full_text</code> wajib ada</p>
+            </div>
+          </div>
+          <div class="demo-trigger-wrap" style="margin-top: 24px; text-align: center;">
+            <p style="font-size: 13px; color: var(--tx3); margin-bottom: 12px;">Tidak punya file CSV? Coba dengan data contoh kami.</p>
+            <button class="btn btn-outline" id="btnDemoData">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+              Coba Data Demo (300 Tweet)
+            </button>
+          </div>
+          <!-- File info preview -->
+          <div id="filePreview" style="display:none" class="file-preview">
+            <div class="file-info">
+              <div class="file-name" id="fileName">—</div>
+              <div class="file-meta" id="fileMeta">—</div>
+            </div>
+            <div class="file-actions">
+              <button class="btn btn-primary" id="btnAnalyze">Mulai Analisis</button>
+              <button class="btn btn-ghost btn-sm" id="btnCancel">Batal</button>
+            </div>
+          </div>
+          <!-- Progress -->
+          <div id="progressWrap" style="display:none" class="progress-wrap">
+            <div class="progress-header">
+              <span id="progressText">Memproses...</span>
+              <span id="progressPct">0%</span>
+            </div>
+            <div class="progress-track">
+              <div class="progress-bar" id="progressBar"></div>
+            </div>
+            <div class="progress-step" id="progressStep"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/shared.js"></script>
+  <script src="js/demo.js"></script>
+  <script src="js/upload.js"></script>
+</body>
+</html>