DateKeys-App/src/routes/+page.svelte

<script lang="ts">
  import { resolve } from '$app/paths';
  import { INSPECT_STEPS, stepGloss, stepName } from '$lib/inspector/format.ts';
</script>

<svelte:head>
  <title>DateKeys: comprueba y abre una cápsula en el navegador</title>
  <meta
    name="description"
    content="Comprueba en el navegador, sin red, la parte pública de una cápsula DateKeys (.dkc) y, pasada su fecha, ábrela con la firma que publica drand."
  />
</svelte:head>

<div class="wrap hero">
  <div class="pitch">
    <h1>Comprueba una cápsula DateKeys y ábrela en su fecha</h1>
    <p class="lead">
      Una cápsula <code>.dkc</code> es un fichero cifrado que no se puede abrir antes de una fecha: la clave depende de
      una firma que todavía no existe. La publicará en esa fecha drand, una red pública que emite una firma nueva cada
      pocos segundos; la garantía se apoya en que esa red no revele la firma antes de tiempo. El inspector lee la parte pública de la cápsula y comprueba que está bien formada, con los mismos
      pasos que la herramienta <code>datekeys inspect</code>. Pasada la fecha, la abre con esa firma, que pegas tú, y con
      tu clave si la cápsula la pide.
    </p>
    <p>
      Y para crear una, la página cifra tu fichero en este navegador para la fecha que elijas, también sin red.
    </p>
    <p class="actions">
      <a class="button" href={resolve('/inspect')}>Abrir el inspector</a>
      <a class="button quiet" href={resolve('/create')}>Crear una cápsula</a>
    </p>
  </div>

  <figure class="preview" aria-labelledby="preview-caption">
    <figcaption id="preview-caption">Los ocho pasos que se comprueban antes de la fecha de apertura (§63)</figcaption>
    <ol class="rail">
      {#each INSPECT_STEPS as step (step)}
        <li>
          <span class="dot" aria-hidden="true">{step}</span>
          <div>
            <p class="step-name" lang="en">{stepName(step)}</p>
            <p class="step-gloss">{stepGloss(step)}</p>
          </div>
        </li>
      {/each}
    </ol>
  </figure>
</div>

<section class="wrap guarantees" aria-labelledby="guarantees-title">
  <h2 id="guarantees-title">Qué garantiza la página</h2>
  <ul>
    <li>
      <h3>El fichero no sale del navegador</h3>
      <p>
        Se lee y se abre en local. La política de seguridad de la página (CSP) solo permite conexiones a su propio origen,
        y solo se usan para descargar las cápsulas de prueba que vienen con el sitio. La firma de la ronda tampoco se pide
        a la red: la copias tú de drand.
      </p>
    </li>
    <li>
      <h3>Tus claves y tu texto, solo aquí</h3>
      <p>
        Solo pide una clave para abrir una cápsula que la exige: una <code>.dkk</code> o una identidad de age, que se usan
        en este navegador y nunca se envían. El texto descifrado de tu fichero va a un fichero temporal privado del
        navegador hasta que lo descargas, y se borra después.
      </p>
    </li>
    <li>
      <h3>El veredicto de la referencia</h3>
      <p>
        Pasos, códigos de error y detalles son los de la implementación de referencia en Go. <strong>Copiar JSON</strong>
        da exactamente la salida de <code>datekeys inspect -json</code>.
      </p>
    </li>
    <li>
      <h3>Lo que no prueba</h3>
      <p>
        Superar los pasos 1 a 8 no prueba que la cápsula se pueda abrir. Al abrirla, la cabecera pública queda vinculada al
        resto en el paso 15 y age autentica el contenido, pero nada de eso prueba quién la escribió ni cuándo (§55.1).
      </p>
    </li>
  </ul>
</section>

<style>
  .hero {
    display: grid;
    gap: 3rem;
    padding-block: clamp(2.5rem, 6vw, 5rem) 3rem;
  }
  @media (min-width: 900px) {
    .hero {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      align-items: start;
      gap: 4rem;
    }
  }
  .pitch h1 {
    max-width: 14em;
    text-wrap: balance;
  }
  .pitch .lead {
    margin-top: 1.25rem;
  }
  .pitch .lead + p {
    margin-top: 1rem;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 2rem;
  }
  .preview {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-2);
  }
  .preview figcaption {
    font-size: var(--t-small);
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
  }
  .step-name {
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 2rem;
  }
  .step-gloss {
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .guarantees {
    padding-top: 2rem;
  }
  .guarantees ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: grid;
    gap: 0 3rem;
  }
  @media (min-width: 720px) {
    .guarantees ul {
      grid-template-columns: 1fr 1fr;
    }
  }
  .guarantees li {
    border-top: 1px solid var(--rule);
    padding-block: 1.25rem 1.5rem;
  }
  .guarantees h3 {
    font-size: var(--t-body);
    margin-bottom: 0.4rem;
  }
  .guarantees p {
    color: var(--ink-muted);
    max-width: 52ch;
  }
</style>