Update templates/index.html

templates/index.html

@@ -123,12 +123,39 @@ h1.ht .l3 { display: block; color: var(--muted2); }
 }
 .f-input::placeholder { color: var(--muted); }
 .f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,156,249,0.12); }
-select.f-input {
-  appearance: none; cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.2rem;
-  background-color: var(--s2);
+.src-lbl { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; }
+.src-lbl b { color: var(--accent); cursor: pointer; font-weight: 400; transition: opacity .2s; }
+.src-lbl b:hover { opacity: 0.7; }
+.src-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; margin-bottom: 0.2rem; }
+.src-item { position: relative; }
+.src-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
+.src-item label {
+  display: flex; align-items: center; gap: 0.5rem;
+  background: var(--s2); border: 1px solid var(--b2); border-radius: 7px;
+  padding: 0.5rem 0.6rem; cursor: pointer;
+  transition: border-color .15s, background .15s;
+  user-select: none; min-height: 48px;
+}
+.src-item label:hover { filter: brightness(1.1); }
+.src-item input:checked + label { border-color: var(--accent); background: rgba(79,156,249,0.1); }
+.src-ico { font-size: 1rem; flex-shrink: 0; }
+.src-info { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; }
+.src-name { font-size: 0.7rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.src-sub { font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.04em; color: var(--muted); }
+.src-box {
+  width: 13px; height: 13px; border-radius: 3px;
+  border: 1px solid var(--b2); flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .15s, border-color .15s;
 }
+.src-item input:checked + label .src-box { background: var(--accent); border-color: var(--accent); }
+.src-item input:checked + label .src-box::after {
+  content: ''; display: block; width: 7px; height: 3.5px;
+  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
+  transform: rotate(-45deg) translateY(-1px);
+}
+.src-warn { font-family: var(--mono); font-size: 0.55rem; color: #f59e0b; margin-top: 0.4rem; display: none; }
+.src-warn.show { display: block; }
 
 .btn-go {
   align-self: flex-end;
@@ -354,21 +381,53 @@ footer {
       <button class="btn-go" onclick="go()">Analisis →</button>
     </div>
     <div class="f-group">
-      <label for="source">Sumber Data</label>
-      <select id="source" class="f-input">
-        <option value="all">Semua Platform (YouTube + Reddit + Instagram + TikTok + News)</option>
-        <option value="youtube">YouTube saja</option>
-        <option value="reddit">Reddit saja</option>
-        <option value="instagram">Instagram saja</option>
-        <option value="tiktok">TikTok saja</option>
-        <option value="news">Google News saja</option>
-        <option value="youtube,tiktok">YouTube + TikTok</option>
-        <option value="instagram,tiktok">Instagram + TikTok</option>
-        <option value="tiktok,news">TikTok + Google News</option>
-        <option value="youtube,news">YouTube + Google News</option>
-        <option value="youtube,instagram">YouTube + Instagram</option>
-        <option value="reddit,news">Reddit + Google News</option>
-      </select>
+      <div class="src-lbl">
+        <span>Sumber Data</span>
+        <b onclick="toggleAll()">Pilih Semua</b>
+      </div>
+      <div class="src-grid">
+        <div class="src-item">
+          <input type="checkbox" id="src-yt" value="youtube" checked>
+          <label for="src-yt">
+            <span class="src-ico">▶</span>
+            <span class="src-info"><span class="src-name">YouTube</span><span class="src-sub">Komentar video</span></span>
+            <span class="src-box"></span>
+          </label>
+        </div>
+        <div class="src-item">
+          <input type="checkbox" id="src-rd" value="reddit" checked>
+          <label for="src-rd">
+            <span class="src-ico">👾</span>
+            <span class="src-info"><span class="src-name">Reddit</span><span class="src-sub">Komentar thread</span></span>
+            <span class="src-box"></span>
+          </label>
+        </div>
+        <div class="src-item">
+          <input type="checkbox" id="src-ig" value="instagram">
+          <label for="src-ig">
+            <span class="src-ico">📸</span>
+            <span class="src-info"><span class="src-name">Instagram</span><span class="src-sub">via Apify</span></span>
+            <span class="src-box"></span>
+          </label>
+        </div>
+        <div class="src-item">
+          <input type="checkbox" id="src-tt" value="tiktok">
+          <label for="src-tt">
+            <span class="src-ico">🎵</span>
+            <span class="src-info"><span class="src-name">TikTok</span><span class="src-sub">via Apify</span></span>
+            <span class="src-box"></span>
+          </label>
+        </div>
+        <div class="src-item">
+          <input type="checkbox" id="src-nw" value="news">
+          <label for="src-nw">
+            <span class="src-ico">📰</span>
+            <span class="src-info"><span class="src-name">Google News</span><span class="src-sub">via SerpApi</span></span>
+            <span class="src-box"></span>
+          </label>
+        </div>
+      </div>
+      <p class="src-warn" id="src-warn">⚠ Pilih minimal satu sumber data</p>
     </div>
     <p class="f-hint">Tekan <b>Enter</b> untuk mulai · Maks. <b>100 komentar</b> per sumber</p>
   </div>
@@ -481,9 +540,35 @@ function tick() {
   st = setTimeout(tick, 2000);
 }
 
+function getSelectedSources() {
+  const boxes = document.querySelectorAll('.src-item input[type="checkbox"]:checked');
+  const vals  = Array.from(boxes).map(b => b.value);
+  if (vals.length === 0) return null;
+  if (vals.length === 5) return 'all';
+  return vals.join(',');
+}
+
+function toggleAll() {
+  const boxes = document.querySelectorAll('.src-item input[type="checkbox"]');
+  const anyUnchecked = Array.from(boxes).some(b => !b.checked);
+  boxes.forEach(b => { b.checked = anyUnchecked; });
+  const btn = document.querySelector('.src-lbl b');
+  btn.textContent = anyUnchecked ? 'Batal Semua' : 'Pilih Semua';
+}
+
+// sync toggle-all label
+document.addEventListener('change', () => {
+  const boxes  = document.querySelectorAll('.src-item input[type="checkbox"]');
+  const btn    = document.querySelector('.src-lbl b');
+  const allOn  = Array.from(boxes).every(b => b.checked);
+  btn.textContent = allOn ? 'Batal Semua' : 'Pilih Semua';
+  document.getElementById('src-warn').classList.remove('show');
+});
+
 async function go() {
   const kw  = document.getElementById('keyword').value.trim();
-  const src = document.getElementById('source').value;
+  const src = getSelectedSources();
+
   if (!kw) {
     const inp = document.getElementById('keyword');
     inp.style.borderColor = '#ef4444';
@@ -491,9 +576,16 @@ async function go() {
     setTimeout(() => inp.style.borderColor = '', 1500);
     return;
   }
+
+  if (!src) {
+    document.getElementById('src-warn').classList.add('show');
+    return;
+  }
+
   document.getElementById('loading').classList.add('on');
   document.getElementById('ld-step').textContent = STEPS[0];
   st = setTimeout(tick, 2000);
+
   try {
     const r = await fetch('/analyze', {
       method: 'POST',