<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

  <title>Detector de Golpes | Global Cyberguard</title>

  <meta
    name="description"
    content="Herramienta experimental para detección de impactos acústicos y patrones repetitivos de Global Cyberguard."
  >

  <meta name="theme-color" content="#ffffff">

  <link rel="icon" href="/assets/favicon/favicon.ico">

  <link
    rel="preload"
    as="image"
    href="/assets/brand/logo.webp"
    type="image/webp"
  >

  <link rel="stylesheet" href="/css/gcg-root.css?v=20260809-01">
  <link rel="stylesheet" href="/css/gcg-components.css?v=20260809-01">

  <link
    rel="stylesheet"
    href="/terremoto/herramientas/golpes/golpes.css?v=20260812-01"
  >
</head>

<body>

  <div class="gcg-bg" aria-hidden="true"></div>

  <header class="gcg-header">

    <a
      class="gcg-brand"
      href="/"
      aria-label="Global Cyberguard inicio"
    >
      <img
        src="/assets/brand/logo.webp"
        alt="Global Cyberguard"
      >

      <div>
        <strong>Global</strong>
        <span>Cyberguard</span>
      </div>
    </a>

    <nav class="gcg-nav" aria-label="Navegación">

      <a
        class="gcg-nav-link"
        href="/terremoto/"
      >
        Centro de apoyo
      </a>

      <a
        class="gcg-nav-link"
        href="/terremoto/herramientas/sonido/"
      >
        Escucha
      </a>

      <a
        class="gcg-nav-link"
        href="/"
      >
        Inicio
      </a>

    </nav>

  </header>


  <main class="gcg-app gcg-impact-app">


    <!-- HERO -->

    <section class="gcg-impact-hero">

      <p class="gcg-kicker">
        Análisis acústico experimental
      </p>

      <h1>
        Detector de golpes
      </h1>

      <p class="gcg-impact-lead">
        Analiza señales captadas por el micrófono para detectar picos acústicos,
        registrar impactos y evaluar si aparecen secuencias repetitivas durante
        una sesión de escucha.
      </p>

      <div class="gcg-impact-actions">

        <button
          id="startBtn"
          class="gcg-btn gcg-btn-primary"
          type="button"
        >
          Iniciar análisis
        </button>

        <button
          id="calibrateBtn"
          class="gcg-btn gcg-btn-secondary"
          type="button"
          disabled
        >
          Calibrar ambiente
        </button>

        <button
          id="stopBtn"
          class="gcg-btn gcg-btn-ghost"
          type="button"
          disabled
        >
          Detener
        </button>

      </div>

      <div
        id="micState"
        class="gcg-impact-status"
      >
        Micrófono detenido
      </div>

    </section>



    <!-- ESTADO -->

    <section class="gcg-impact-grid">

      <article class="gcg-impact-panel gcg-detection-panel">

        <header class="gcg-panel-header">

          <div>

            <span class="gcg-panel-label">
              DETECCIÓN EN TIEMPO REAL
            </span>

            <strong id="dbValue">
              -- dBFS
            </strong>

          </div>

          <div
            id="eventState"
            class="gcg-detection-state"
          >
            Sin impactos
          </div>

        </header>



        <div class="gcg-impact-visual">

          <div class="gcg-impact-ring">

            <div
              id="impactPulse"
              class="gcg-impact-core"
            >
              <span id="impactCountLarge">
                0
              </span>

              <small>
                impactos
              </small>
            </div>

          </div>

        </div>



        <div class="gcg-meter">

          <div class="gcg-meter-track">

            <div
              id="levelBar"
              class="gcg-meter-fill"
            ></div>

            <div
              id="thresholdMarker"
              class="gcg-meter-threshold"
            ></div>

          </div>

          <div class="gcg-meter-labels">
            <span>-80</span>
            <span>-60</span>
            <span>-40</span>
            <span>-20</span>
            <span>0 dBFS</span>
          </div>

        </div>



        <div class="gcg-impact-stats">

          <article>
            <span>Ruido ambiente</span>
            <strong id="noiseFloor">Sin calibrar</strong>
          </article>

          <article>
            <span>Último impacto</span>
            <strong id="lastImpact">--</strong>
          </article>

          <article>
            <span>Intervalo</span>
            <strong id="lastInterval">--</strong>
          </article>

          <article>
            <span>Patrón</span>
            <strong id="patternState">No detectado</strong>
          </article>

        </div>

      </article>



      <!-- CONFIGURACIÓN -->

      <aside class="gcg-impact-panel gcg-impact-controls">

        <div class="gcg-control-group">

          <label for="threshold">

            Umbral de impacto

            <strong>
              <span id="thresholdValue">-40</span>
              dBFS
            </strong>

          </label>

          <input
            id="threshold"
            type="range"
            min="-75"
            max="-15"
            value="-40"
            step="1"
          >

          <small>
            Un pico debe superar este nivel para ser registrado.
          </small>

        </div>



        <div class="gcg-control-group">

          <label for="minimumGap">

            Separación mínima

            <strong>
              <span id="minimumGapValue">250</span>
              ms
            </strong>

          </label>

          <input
            id="minimumGap"
            type="range"
            min="100"
            max="1500"
            value="250"
            step="50"
          >

          <small>
            Evita que un mismo golpe sea contado varias veces.
          </small>

        </div>



        <div class="gcg-control-group">

          <label for="patternTolerance">

            Tolerancia de patrón

            <strong>
              ±
              <span id="patternToleranceValue">35</span>
              %
            </strong>

          </label>

          <input
            id="patternTolerance"
            type="range"
            min="10"
            max="60"
            value="35"
            step="5"
          >

          <small>
            Define cuánto pueden variar los intervalos entre golpes para
            considerarse repetitivos.
          </small>

        </div>



        <div class="gcg-impact-warning">

          <strong>
            Interpretación
          </strong>

          <p>
            Un patrón repetitivo no significa que exista una persona.
            Maquinaria, estructuras, piedras, vibraciones y otros elementos
            pueden generar señales similares.
          </p>

        </div>

      </aside>

    </section>



    <!-- PATRÓN -->

    <section class="gcg-impact-panel gcg-pattern-panel">

      <header class="gcg-panel-header">

        <div>

          <span class="gcg-panel-label">
            SECUENCIA RECIENTE
          </span>

          <strong>
            Intervalos entre impactos
          </strong>

        </div>

        <button
          id="clearBtn"
          class="gcg-btn gcg-btn-ghost"
          type="button"
        >
          Reiniciar
        </button>

      </header>


      <div
        id="sequence"
        class="gcg-sequence"
      >
        <div class="gcg-empty">
          Aún no se han registrado impactos.
        </div>
      </div>

    </section>



    <!-- REGISTRO -->

    <section class="gcg-impact-panel gcg-log-panel">

      <header class="gcg-panel-header">

        <div>

          <span class="gcg-panel-label">
            REGISTRO LOCAL
          </span>

          <strong>
            Historial de impactos
          </strong>

        </div>

      </header>


      <div id="impactLog">

        <div class="gcg-empty">
          No hay eventos registrados.
        </div>

      </div>

    </section>



    <!-- DISCLAIMER -->

    <section class="gcg-impact-disclaimer">

      <strong>
        Alcance de la herramienta
      </strong>

      <p>
        Esta aplicación únicamente identifica variaciones acústicas y relaciones
        temporales entre ellas. No determina origen, distancia, ubicación ni
        presencia de personas y no sustituye equipos profesionales de búsqueda
        acústica ni protocolos de rescate.
      </p>

    </section>

  </main>


  <script
    src="/terremoto/herramientas/golpes/golpes.js?v=20260812-01"
    defer
  ></script>

</body>
</html>