modelo-express/paginas/aviso.html

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="referrer" content="no-referrer" />
    <title>Você está saindo deste site</title>
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%233b5bdb'/%3E%3Cpath d='M13.5 18.5l5-5M12 15l-2 2a3.5 3.5 0 005 5l2-2M20 17l2-2a3.5 3.5 0 00-5-5l-2 2' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"
    />
    <style>
      /* Página de aviso antes de sair: mesmo visual da página inicial. */
      :root {
        --fundo: #f6f7f9;
        --cartao: #ffffff;
        --texto: #14161a;
        --suave: #5b6270;
        --borda: #e3e6eb;
        --destaque: #3b5bdb;
        --destaque-texto: #ffffff;
        --destaque-suave: #edf1ff;
        --raio: 14px;
        --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        color-scheme: light dark;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --fundo: #0f1115;
          --cartao: #171a21;
          --texto: #eceef2;
          --suave: #9aa1ad;
          --borda: #2a2f3a;
          --destaque: #8299ff;
          --destaque-texto: #0f1115;
          --destaque-suave: #1e2540;
        }
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background: var(--fundo);
        color: var(--texto);
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
      }
      .pagina { max-width: 640px; margin: 0 auto; padding: 56px 16px 32px; }
      .topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
      .marca {
        flex: none; width: 40px; height: 40px; border-radius: 10px;
        background: var(--destaque); color: var(--destaque-texto);
        display: grid; place-items: center;
      }
      h1 { font-size: 28px; line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
      .lead { color: var(--suave); margin: 0 0 24px; }
      .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
      .rotulo { margin: 0; font-size: 13px; color: var(--suave); }
      .host { margin: 2px 0 0; font-family: var(--mono); font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
      .url-completa {
        margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--destaque-suave);
        font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere;
      }
      .cuidado { margin: 16px 0 0; font-size: 14px; color: var(--suave); }
      .acoes { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
      .botao {
        font-weight: 600; padding: 12px 20px; border-radius: 10px; text-decoration: none;
        background: var(--destaque); color: var(--destaque-texto); overflow-wrap: anywhere;
      }
      .voltar { color: var(--destaque); font-weight: 600; }
      a:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
      .rodape { margin-top: 32px; text-align: center; font-size: 13px; color: var(--suave); }
      .rodape a { color: inherit; }
      @media (max-width: 480px) {
        .pagina { padding-top: 32px; }
        h1 { font-size: 24px; }
        .host { font-size: 20px; }
        .acoes { flex-direction: column; align-items: stretch; text-align: center; }
      }
    </style>
  </head>
  <body>
    <main class="pagina">
      <header class="topo">
        <span class="marca" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <path d="M10 14l4-4M8.5 11.5l-1.8 1.8a3.2 3.2 0 004.5 4.5l1.8-1.8M15.5 12.5l1.8-1.8a3.2 3.2 0 00-4.5-4.5l-1.8 1.8" />
          </svg>
        </span>
        <h1>Você está saindo deste site</h1>
      </header>
      <p class="lead">Este link curto leva para outro endereço.</p>

      <section class="cartao" aria-label="Destino do link">
        <p class="rotulo">Você está indo para</p>
        <p class="host">{{HOST}}</p>
        <p class="url-completa">{{URL}}</p>
        <p class="cuidado">
          Confira se o endereço é o que você esperava. Este encurtador é público: qualquer pessoa pode criar links nele.
        </p>
        <div class="acoes">
          <a class="botao" href="/{{CODIGO}}/ir" rel="noreferrer">Continuar para {{HOST}}</a>
          <a class="voltar" href="/">Voltar</a>
        </div>
      </section>

      <footer class="rodape">Publicado na <a href="https://dado.cloud" target="_blank" rel="noopener">Dado</a></footer>
    </main>
  </body>
</html>