.Stat Data Explorer — demo 2 SDMX - Version SDMX list of statistical subject-matter domains

by jlujan

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estadísticas — Categorías</title>

</head>

<body>

<div class="header">
  <div class="logo">SIS-CC</div>

  <div class="nav-icons">
    🔍 ⚙️ ❓
    <span class="lang-switch" id="langSwitch" role="group" aria-label="Idioma">
      <button type="button" data-lang="en">EN</button>
      <button type="button" data-lang="es">ES</button>
      <button type="button" data-lang="fr">FR</button>
    </span>
  </div>
</div>

<h1>.Stat Data Explorer</h1>
<p>Find, access and share data...</p>

<div class="search-container">
  <input type="text" placeholder="Search by keywords" id="searchInput">
  <button type="button" id="searchBtn">➡️</button>
</div>

<div class="browse-container">
  <p>or browse by</p>

  <div class="dropdown-container" id="dropdown">
    <button
      class="category-dropdown"
      id="topicsBtn"
      aria-haspopup="true"
      aria-expanded="false">
      TÓPICOS ⬇️
    </button>

    <div class="submenu" id="submenu" role="dialog" aria-modal="true">
      <div class="submenu-header">
        <h2>Topics</h2>
        <button type="button" class="submenu-close" id="submenuClose" aria-label="Cerrar">✕</button>
      </div>

      <div class="topics-grid">

        <!-- Columna 1 -->
        <section class="topic-column">
          <div class="topic-header">
            <h3>Demographic and<br>social statistics</h3>
          </div>
          <ul class="topic-list">
            <li><button class="topic-link">Population and migration</button></li>
            <li><button class="topic-link">Labour</button></li>
            <li><button class="topic-link">Education</button></li>
            <li><button class="topic-link">Health</button></li>
            <li><button class="topic-link">Income and consumption</button></li>
            <li><button...

CSS

* { box-sizing: border-box; }

  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100vh;
    color: #222;
    background: #ff0099;
    text-align: center;
  }

  .header {
    background: rgba(245,245,245,.96);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #222;
    box-shadow: 0 1px 5px rgba(0,0,0,.16);
  }

  .logo {
    font-weight: 700;
    letter-spacing: 1px;
  }

  .nav-icons {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lang-switch {
    display: inline-flex;
    gap: 4px;
  }

  .lang-switch button {
    border: 1px solid #bbb;
    background: #fff;
    color: #222;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
  }

  .lang-switch button[aria-pressed="true"] {
    background: #0b5db3;
    border-color: #0b5db3;
    color: #fff;
  }

  h1 {
    margin: 28px 0 8px;
    color: #fff;
    font-size: 31px;
  }

  body > p {
    color: #fff;
    margin-top: 0;
  }

  .search-container {
    background: #0d5cad;
    padding: 10px;
    display: inline-flex;
    border-radius: 5px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }

  .search-container input {
    padding: 9px 10px;
    width: min(420px, 68vw);
    border: 0;
    outline: none;
  }

  .search-container button {
    border: 0;
    background: white;
    padding: 0 12px;
    cursor: pointer;
  }

  .browse-container {
    margin-top: 12px;
  }

  .browse-container > p {
    color: #fff;
    margin-bottom: 4px;
  }

  .dropdown-container {
    display: inline-block;
    position: relative;
  }

  .category-dropdown {
    min-width: 210px;
    padding: 11px 14px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: #f8a526;
    color: #171717;
    border-radius: 3px;
    box-shadow: 0 3px 9px...

JavaScript

(function () {
  "use strict";

  const dropdown = document.getElementById("dropdown");
  const btn = document.getElementById("topicsBtn");
  const closeBtn = document.getElementById("submenuClose");
  const overlay = document.getElementById("overlay");
  const selection = document.getElementById("selection");
  const searchInput = document.getElementById("searchInput");
  const searchBtn = document.getElementById("searchBtn");

  function openMenu() {
    dropdown.classList.add("active");
    document.body.classList.add("menu-open");
    btn.setAttribute("aria-expanded", "true");

    const first = document.querySelector(".topic-link");
    if (first) first.focus();
  }

  function closeMenu() {
    dropdown.classList.remove("active");
    document.body.classList.remove("menu-open");
    btn.setAttribute("aria-expanded", "false");
    btn.focus();
  }

  function toggleMenu() {
    if (dropdown.classList.contains("active")) {
      closeMenu();
    } else {
      openMenu();
    }
  }

  btn.addEventListener("click", toggleMenu);
  closeBtn.addEventListener("click", closeMenu);
  overlay.addEventListener("click", closeMenu);

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && dropdown.classList.contains("active")) {
      closeMenu();
    }
  });

  document.querySelector(".topics-grid").addEventListener("click", function (e) {
    const item = e.target.closest(".topic-link");
    if (!item) return;

    selection.hidden = false;
    selection.innerHTML = "";

    const strong = document.createElement("strong");
    strong.textContent = item.textContent;

    selection.appendChild(strong);
    selection.appendChild(
      document.createTextNode("Tema seleccionado")
    );

    closeMenu();
  });

  function searchTopics() {
    const term = searchInput.value.trim().toLowerCase();

    document.querySelectorAll(".topic-link").forEach(function (item) {
      const...