hbox-docs/docs/entrar.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>Entrar — Drogheda HBOX</title>
<!-- 27-oct-2026: página de entrada propia (antes: la ventana gris de HTTP Basic de nginx).
     Es pública: nginx la sirve sin sesión, junto con /publico/, /fonts/, /stylesheets/helgen.css y /js/tema.js.
     No lleva datos del proyecto: solo entrar, avisos marcados como públicos y reportar un problema. -->
<script src="/js/tema.js"></script>
<link rel="icon" type="image/svg+xml" href="/img/helgen-mascara.svg">
<link rel="stylesheet" href="/stylesheets/helgen.css">
<link rel="stylesheet" href="/publico/entrar.css">
</head>
<body>
<main class="en">
  <header class="en-cab top">
    <svg class="en-masc" viewBox="0 0 200 214.5" aria-hidden="true"><ellipse cx="100" cy="107.25" rx="96" ry="103" style="fill:#2C3C5B"/><path style="fill:#51F3DA" fill-rule="evenodd" d="M96.2 213.2C32.3 210.2 -12.0 145.2 4.7 79.0C15.9 34.9 53.0 3.1 95.7 1.2C161.5 -1.7 211.4 63.4 196.0 132.3C185.1 181.0 142.7 215.4 96.2 213.2ZM104.0 199.9C160.7 196.6 198.8 136.5 181.2 78.1C169.4 39.2 134.8 12.9 97.1 14.5C40.8 16.7 1.8 75.9 18.2 134.3C29.5 174.7 65.4 202.1 104.0 199.9ZM62.5 132.8C60.4 132.5 57.0 131.1 53.2 129.0C44.3 124.0 40.5 116.9 39.4 103.5C39.0 98.4 39.4 83.9 40.1 78.2C40.2 76.8 41.7 67.7 41.7 67.5C41.9 67.2 42.3 67.6 46.7 71.9C52.2 77.4 53.3 78.4 57.7 81.4C60.9 83.6 63.3 85.0 67.7 87.3C82.4 95.3 87.9 104.4 84.6 115.9C82.6 122.8 79.1 126.8 72.0 130.3C67.7 132.4 65.1 133.1 62.5 132.8ZM137.4 132.8C133.3 132.3 126.2 128.4 122.9 125.0C117.9 119.7 115.7 110.4 118.0 103.9C119.8 98.6 123.9 94.1 130.7 89.7C132.1 88.8 133.6 88.0 136.9 86.2C141.2 83.9 145.9 80.8 149.6 77.9C150.6 77.1 152.3 75.5 155.7 72.1C160.4 67.3 160.7 67.1 160.8 67.7C161.0 68.2 162.3 76.5 162.4 77.7C163.1 83.0 163.5 99.2 163.1 104.2C161.9 117.6 157.9 124.4 148.5 129.4C143.2 132.2 140.2 133.1 137.4 132.8ZM65.6 120.9C70.8 119.4 73.8 115.0 73.8 109.1C73.8 103.2 72.1 101.3 62.4 97.0C57.7 94.8 52.6 91.9 49.6 89.7C49.0 89.2 48.9 89.3 48.7 90.3C47.4 95.7 49.0 107.8 51.6 113.2C53.7 117.4 57.0 120.2 60.8 121.1C61.9 121.3 64.5 121.2 65.6 120.9ZM142.2 121.0C146.5 119.8 150.2 115.9 151.9 110.9C153.9 104.7 154.9 95.2 154.0 90.6C153.7 89.3 153.6 89.2 152.9 89.8C149.3 92.3 145.2 94.6 139.0 97.5C130.9 101.2 129.0 103.1 128.7 107.9C128.3 114.7 131.8 119.8 137.6 121.1C138.6 121.3 141.3 121.2 142.2 121.0Z"/></svg>
    <div>
      <h1>Drogheda · HBOX</h1>
      <p>Centro de mando de Helgen — pendientes, actas, inventario y documentos</p>
    </div>
  </header>

  <section class="en-tarjeta" aria-labelledby="t-entrar">
    <h2 id="t-entrar">Entrar</h2>
    <form id="fEntrar" method="post" action="/api/entrar" autocomplete="on" novalidate>
      <label for="usuario">Usuario o correo</label>
      <input id="usuario" name="username" type="text" autocomplete="username" autocapitalize="none"
             autocorrect="off" spellcheck="false" inputmode="email" placeholder="adriana · adriana@helgen.tech" required>
      <label for="password">Contraseña</label>
      <div class="en-pw">
        <input id="password" name="password" type="password" autocomplete="current-password" autocapitalize="none"
               autocorrect="off" spellcheck="false" required>
        <button type="button" class="en-ver" id="ver" aria-label="Mostrar la contraseña" aria-pressed="false">Ver</button>
      </div>
      <p class="en-mayus" id="mayus" hidden>Tienes activadas las mayúsculas (Bloq Mayús).</p>
      <label class="en-check"><input type="checkbox" id="recordar" checked> Mantener la sesión 30 días en este equipo</label>
      <button type="submit" class="en-boton" id="bEntrar">Entrar</button>
      <div class="en-msg" id="msg" role="alert" aria-live="assertive"></div>
    </form>
  </section>

  <section class="en-avisos" id="avisos" hidden aria-labelledby="t-avisos">
    <h2 id="t-avisos">Avisos del sitio</h2>
    <ul id="avisosLista"></ul>
  </section>

  <details class="en-ayuda" id="ayuda">
    <summary>¿No puedes entrar o algo falla? Repórtalo aquí</summary>
    <div class="en-ayuda__c">
      <ul class="en-tips">
        <li><b>Tu usuario</b> es tu nombre en minúsculas y sin acentos, como te lo dieron (por ejemplo <code>adriana</code>, <code>jesush</code>), o tu correo de Helgen.</li>
        <li><b>¿Te restablecieron la contraseña?</b> Usa la nueva, tal como te la pasaron. Si tu teléfono o tu navegador llena la contraseña solo, bórrala y escríbela a mano; cuando entres, acepta «actualizar la contraseña guardada».</li>
        <li><b>¿Sigue sin dejarte?</b> Escríbenos aquí abajo. Llega directo a quien atiende el sitio y se revisa todos los días.</li>
      </ul>
      <form id="fReporte" novalidate>
        <div class="en-dos">
          <div><label for="rNombre">Tu usuario o tu nombre</label>
            <input id="rNombre" type="text" maxlength="80" autocapitalize="none" autocomplete="off"></div>
          <div><label for="rContacto">Cómo te contactamos</label>
            <input id="rContacto" type="text" maxlength="120" placeholder="teléfono o correo" autocomplete="off"></div>
        </div>
        <fieldset class="en-tipo">
          <legend>Qué pasa</legend>
          <label><input type="radio" name="rTipo" value="acceso" checked> No puedo entrar</label>
          <label><input type="radio" name="rTipo" value="error"> Otra falla del sitio</label>
        </fieldset>
        <label for="rDesc">Cuéntanos con tus palabras</label>
        <textarea id="rDesc" rows="4" maxlength="2000" placeholder="Ej.: me restablecieron la contraseña ayer y me dice que no coincide; estoy en el teléfono."></textarea>
        <input type="text" id="rTrampa" name="sitio_web" tabindex="-1" autocomplete="off" class="en-trampa" aria-hidden="true">
        <button type="submit" class="en-boton sec" id="bReporte">Enviar reporte</button>
        <div class="en-msg" id="msgR" role="status" aria-live="polite"></div>
      </form>
    </div>
  </details>

  <p class="en-pie">Helgen Technologies · Querétaro · Solo personal autorizado.</p>
</main>
<script src="/publico/entrar.js"></script>
</body>
</html>