index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Condiciones de Observación</title>
  <meta name="description" content="Monitor de condiciones de observación con datos meteorológicos reales de observatorio." />
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#0A0E14" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="apple-touch-icon" href="/static/icons/icon-192.png" />
  <link rel="icon" href="/static/icons/icon-192.png" />
  <link rel="stylesheet" href="/static/styles.css" />
</head>
<body data-nivel="ok">
  <div class="app">

    <header class="estado" id="estado">
      <div class="estado__glow" aria-hidden="true"></div>
      <div class="estado__contenido">
        <p class="estado__eyebrow" id="reloj">—</p>
        <h1 class="estado__titulo" id="estadoTitulo">Cargando…</h1>
        <p class="estado__sub" id="estadoSub">Analizando condiciones</p>
      </div>
    </header>

    <!-- Fuente de datos -->
    <div class="fuente">
      <button class="chip" id="btnMuestra" aria-pressed="true">Muestra (ESO)</button>
      <label class="chip chip--file">
        Subir CSV
        <input type="file" id="fileCsv" accept=".csv" hidden />
      </label>
      <span class="fuente__nombre" id="fuenteNombre"></span>
    </div>
    <p class="avisos" id="avisos"></p>

    <main>
      <section class="bloque">
        <div class="bloque__cab">
          <h2>Avisos</h2>
          <span class="contador" id="contadorInc">0</span>
        </div>
        <div id="incidencias" class="incidencias"></div>
      </section>

      <section class="bloque">
        <div class="bloque__cab">
          <h2>Sensores</h2>
          <span class="pista"><span id="nMuestras">0</span> medidas</span>
        </div>
        <div id="sensores" class="sensores"></div>
      </section>

      <section class="bloque">
        <details>
          <summary>Parte de condiciones</summary>
          <pre id="informe" class="informe">—</pre>
        </details>
      </section>
    </main>

    <footer class="pie">
      <button id="btnActualizar" class="boton">Actualizar</button>
      <span class="pie__nota">Datos meteo reales de observatorio · José Andrés López</span>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
  <script src="/static/app.js"></script>
</body>
</html>