Modelo do encurtador em FastAPI

Gerado a partir de deploy-templates/fastapi (dado.cloud ab2f4c0).
2026-10-21 14:40:18 +00:00
parent 7006615b91
commit e0c5d12f3f
5 changed files with 251 additions and 14 deletions
@@ -0,0 +1,111 @@
+<!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>