index.html

---
layout: default
title: Home
---

<div class="homepage">
  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1>🔍 Threat Actor Database</h1>
      <p class="hero-subtitle">Comprehensive threat intelligence on 1,000+ APT groups, ransomware operations, and cybercriminal organizations.</p>
      
      <!-- Quick Search (prominent) -->
      <div class="quick-search">
        <input type="text" id="quick-search-input" placeholder="Search actors, malware, campaigns...">
        <button id="quick-search-btn">Search</button>
      </div>
      
      <!-- Quick Stats -->
      <div class="quick-stats">
        <div class="stat">
          <span class="stat-number">{{ site.data.generated.facets.counts.threat_actors | default: "1,062" }}</span>
          <span class="stat-label">Threat Actors</span>
        </div>
        <div class="stat">
          <span class="stat-number">{{ site.data.generated.facets.countries.size | default: "27" }}</span>
          <span class="stat-label">Countries</span>
        </div>
        <div class="stat">
          <span class="stat-number">{{ site.data.generated.facets.risk_levels.size | default: "4" }}</span>
          <span class="stat-label">Risk Levels</span>
        </div>
      </div>
    </div>
  </section>

  {% assign recently_updated = site.data.generated.recently_updated %}
  {% if recently_updated and recently_updated.size > 0 %}
  <!-- Recently Updated -->
  <section class="recently-updated-section" aria-labelledby="recently-updated-heading">
    <div class="section-header">
      <div>
        <h2 id="recently-updated-heading">Recently Updated</h2>
        <p>Freshly reviewed actor profiles from the precomputed index.</p>
      </div>
      <a class="section-link" href="{{ "/api/recently-updated.json" | relative_url }}">View JSON</a>
    </div>
    <div class="recently-updated-carousel" aria-label="Recently updated threat actors">
      {% for actor in recently_updated limit: 8 %}
      <article class="recent-update-card">
        <div class="recent-update-meta">
          {% if actor.last_updated %}
          <span class="updated-date"><time datetime="{{ actor.last_updated }}">{{ actor.last_updated | date: "%b %-d, %Y" }}</time></span>
          {% endif %}
          {% if actor.risk_level %}
          <span class="risk risk-{{ actor.risk_level | downcase }}">{{ actor.risk_level }}</span>
          {% endif %}
        </div>
        <h3><a href="{{ actor.permalink | default: actor.url | relative_url }}">{{ actor.name }}</a></h3>
        <p>{{ actor.description | truncate: 130 }}</p>
        <div class="recent-update-footer">
          {% if actor.country %}<span>{{ actor.country }}</span>{% endif %}
          {% if actor.ioc_count %}<span>{{ actor.ioc_count }} IOCs</span>{% endif %}
        </div>
      </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Advanced Filters (prominent) -->
  <section class="quick-filters">
    <div class="quick-filters-header">
      <h2>Advanced Search Filters</h2>
      <span>Sticky while browsing</span>
    </div>
    <div class="filter-chips">
      <div class="filter-group">
        <label>Country:</label>
        <select id="home-country-filter">
          <option value="">All Countries</option>
        </select>
      </div>
      <div class="filter-group">
        <label>Risk:</label>
        <select id="home-risk-filter">
          <option value="">All Risk Levels</option>
        </select>
      </div>
      <div class="filter-group">
        <label>Sector:</label>
        <select id="home-sector-filter">
          <option value="">All Sectors</option>
        </select>
      </div>
      <button id="apply-filters-btn">Search Actors</button>
      <button id="clear-filters-btn" class="secondary">Clear</button>
    </div>
  </section>

  <!-- Actor Cards Grid -->
  <section class="actors-section">
    <div class="section-header">
      <h2>Threat Actors</h2>
      <span class="actor-count" id="actor-count"></span>
    </div>
    <div class="actors-grid" id="actors-grid">
      <!-- Cards loaded via JS -->
    </div>
    <div class="load-more-container">
      <button id="load-more-btn" class="load-more-btn">Load More</button>
    </div>
  </section>
</div>

<script>
  const ITEMS_PER_PAGE = 24;
  let sourceActors = [];
  let allActors = [];
  let displayedCount = ITEMS_PER_PAGE;
  let filterBarOffset = null;

  // Load actor data
  Promise.all([
    fetch('/api/threat-actors.json').then(r => r.json()),
    fetch('/api/facets.json').then(r => r.json())
  ]).then(([actors, facets]) => {
    sourceActors = actors;
    allActors = actors;
    populateFilters(facets);
    applyFiltersFromUrl();
    renderActors();
    setupEventListeners();
  }).catch(error => {
    console.error('Unable to load threat actor index', error);
    document.getElementById('actors-grid').innerHTML = '<p class="load-error">Unable to load threat actor data.</p>';
  });

  function populateFilters(facets) {
    populateSelect('home-country-filter', facets.countries || []);
    populateSelect('home-risk-filter', facets.risk_levels || []);
    populateSelect('home-sector-filter', facets.sectors || []);
  }

  function populateSelect(id, values) {
    const select = document.getElementById(id);
    values.forEach(v => {
      const opt = document.createElement('option');
      opt.value = v;
      opt.textContent = v;
      select.appendChild(opt);
    });
  }

  function renderActors() {
    const grid = document.getElementById('actors-grid');
    const countEl = document.getElementById('actor-count');
    const toShow = allActors.slice(0, displayedCount);
    
    grid.innerHTML = toShow.map(a => `
      <div class="actor-card">
        <h3><a href="${a.url || a.permalink}">${esc(a.name)}</a></h3>
        <div class="card-meta">
          ${a.country ? `<span class="country">${esc(a.country)}</span>` : ''}
          ${a.risk_level ? `<span class="risk risk-${a.risk_level.toLowerCase()}">${esc(a.risk_level)}</span>` : ''}
        </div>
        <p class="card-desc">${esc(a.description || '').substring(0, 120)}${(a.description || '').length > 120 ? '...' : ''}</p>
        ${a.sector_focus?.length ? `<div class="card-sectors">${a.sector_focus.slice(0,3).map(s => `<span class="sector-tag">${esc(s)}</span>`).join('')}</div>` : ''}
      </div>
    `).join('');
    
    const activeSearch = document.getElementById('quick-search-input').value.trim();
    countEl.textContent = activeSearch ? `${allActors.length} actors match "${activeSearch}"` : `${allActors.length} actors`;
    
    // Show/hide load more
    document.getElementById('load-more-btn').style.display = 
      displayedCount >= allActors.length ? 'none' : 'block';
  }

  function filterAndRender() {
    const country = document.getElementById('home-country-filter').value;
    const risk = document.getElementById('home-risk-filter').value;
    const sector = document.getElementById('home-sector-filter').value;
    const search = document.getElementById('quick-search-input').value.toLowerCase();
    
    allActors = sourceActors.filter(a => {
      const matchCountry = !country || a.country === country;
      const matchRisk = !risk || a.risk_level === risk;
      const matchSector = !sector || (a.sector_focus || []).includes(sector);
      const matchSearch = !search || 
        a.name.toLowerCase().includes(search) ||
        (a.aliases || []).some(alias => alias.toLowerCase().includes(search)) ||
        (a.description || '').toLowerCase().includes(search);
      return matchCountry && matchRisk && matchSector && matchSearch;
    });
    
    displayedCount = ITEMS_PER_PAGE;
    renderActors();
  }

  function applyFiltersFromUrl() {
    const params = new URLSearchParams(window.location.search);
    setSelectFromParam('home-country-filter', params.get('country'));
    setSelectFromParam('home-risk-filter', params.get('risk'));
    setSelectFromParam('home-sector-filter', params.get('sector'));
    if (params.get('q')) {
      document.getElementById('quick-search-input').value = params.get('q');
    }
    if (params.toString()) filterAndRender();
  }

  function setSelectFromParam(id, value) {
    const select = document.getElementById(id);
    if (value && Array.prototype.some.call(select.options, opt => opt.value === value)) {
      select.value = value;
    }
  }

  function setupEventListeners() {
    document.getElementById('load-more-btn').onclick = () => {
      displayedCount += ITEMS_PER_PAGE;
      renderActors();
    };
    
    document.getElementById('apply-filters-btn').onclick = () => {
      filterAndRender();
      document.getElementById('actors-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    document.getElementById('clear-filters-btn').onclick = () => {
      document.getElementById('home-country-filter').value = '';
      document.getElementById('home-risk-filter').value = '';
      document.getElementById('home-sector-filter').value = '';
      document.getElementById('quick-search-input').value = '';
      allActors = sourceActors;
      displayedCount = ITEMS_PER_PAGE;
      renderActors();
      history.replaceState(null, '', window.location.pathname);
    };
    
    document.getElementById('quick-search-btn').onclick = () => {
      filterAndRender();
      document.getElementById('actors-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    document.getElementById('quick-search-input').addEventListener('keypress', e => {
      if (e.key === 'Enter') {
        filterAndRender();
        document.getElementById('actors-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
    setupPinnedFilters();
  }

  function setupPinnedFilters() {
    const filterBar = document.querySelector('.quick-filters');
    if (!filterBar) return;

    function syncPinnedFilters() {
      if (filterBarOffset === null || !filterBar.classList.contains('is-pinned')) {
        filterBarOffset = filterBar.getBoundingClientRect().top + window.scrollY;
      }
      const shouldPin = window.scrollY >= filterBarOffset;
      filterBar.classList.toggle('is-pinned', shouldPin);
      document.body.classList.toggle('has-pinned-filters', shouldPin);
    }

    syncPinnedFilters();
    window.addEventListener('scroll', syncPinnedFilters, { passive: true });
    window.addEventListener('resize', function() {
      filterBar.classList.remove('is-pinned');
      document.body.classList.remove('has-pinned-filters');
      filterBarOffset = null;
      syncPinnedFilters();
    });
  }

  function esc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
</script>