Initial importv0.1.0

1 files changed, 160 insertions, 0 deletions

diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..eae1028
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>cepis-autofill — demonstração</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      body {
+        font:
+          16px/1.5 system-ui,
+          sans-serif;
+        margin: 0 auto;
+        max-width: 34rem;
+        padding: 2rem 1rem 4rem;
+      }
+      h1 {
+        font-size: 1.4rem;
+      }
+      p {
+        color: #555;
+      }
+      form {
+        display: grid;
+        gap: 0.25rem;
+      }
+      label {
+        display: block;
+        font-size: 0.85rem;
+        font-weight: 600;
+        margin-top: 0.75rem;
+      }
+      input,
+      select {
+        border: 1px solid #999;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font: inherit;
+        padding: 0.5rem;
+        width: 100%;
+      }
+      .row {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: 2fr 1fr;
+      }
+      .cepis-autofill-status {
+        font-size: 0.85rem;
+        margin-top: 0.25rem;
+      }
+      .cepis-autofill-status[data-cepis-state="loading"]::before {
+        content: "… ";
+      }
+      .cepis-autofill-status[data-cepis-state="found"] {
+        color: #146c2e;
+      }
+      .cepis-autofill-status[data-cepis-state="found"]::before {
+        content: "✓ ";
+      }
+      .cepis-autofill-status[data-cepis-state="error"] {
+        color: #a4262c;
+      }
+      .cepis-autofill-status[data-cepis-state="error"]::before {
+        content: "! ";
+      }
+      @media (prefers-color-scheme: dark) {
+        p {
+          color: #aaa;
+        }
+        .cepis-autofill-status[data-cepis-state="found"] {
+          color: #6dd48a;
+        }
+        .cepis-autofill-status[data-cepis-state="error"] {
+          color: #ff9a9e;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>cepis-autofill</h1>
+    <p>
+      Digite um CEP — por exemplo <code>01001-000</code>, <code>20040-020</code> ou
+      <code>99999-999</code> para ver o erro. A consulta vai para <code>https://cep.is</code>.
+    </p>
+
+    <form id="checkout" autocomplete="on">
+      <label for="cep">CEP</label>
+      <input id="cep" name="cep" inputmode="numeric" autocomplete="postal-code" />
+
+      <label for="logradouro">Endereço</label>
+      <input id="logradouro" name="logradouro" autocomplete="address-line1" />
+
+      <div class="row">
+        <div>
+          <label for="bairro">Bairro</label>
+          <input id="bairro" name="bairro" />
+        </div>
+        <div>
+          <label for="numero">Número</label>
+          <input id="numero" name="numero" inputmode="numeric" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div>
+          <label for="cidade">Cidade</label>
+          <input id="cidade" name="cidade" autocomplete="address-level2" />
+        </div>
+        <div>
+          <label for="uf">UF</label>
+          <select id="uf" name="uf" autocomplete="address-level1">
+            <option value="">--</option>
+            <option value="AC">Acre</option>
+            <option value="AL">Alagoas</option>
+            <option value="AM">Amazonas</option>
+            <option value="AP">Amapá</option>
+            <option value="BA">Bahia</option>
+            <option value="CE">Ceará</option>
+            <option value="DF">Distrito Federal</option>
+            <option value="ES">Espírito Santo</option>
+            <option value="GO">Goiás</option>
+            <option value="MA">Maranhão</option>
+            <option value="MG">Minas Gerais</option>
+            <option value="MS">Mato Grosso do Sul</option>
+            <option value="MT">Mato Grosso</option>
+            <option value="PA">Pará</option>
+            <option value="PB">Paraíba</option>
+            <option value="PE">Pernambuco</option>
+            <option value="PI">Piauí</option>
+            <option value="PR">Paraná</option>
+            <option value="RJ">Rio de Janeiro</option>
+            <option value="RN">Rio Grande do Norte</option>
+            <option value="RO">Rondônia</option>
+            <option value="RR">Roraima</option>
+            <option value="RS">Rio Grande do Sul</option>
+            <option value="SC">Santa Catarina</option>
+            <option value="SE">Sergipe</option>
+            <option value="SP">São Paulo</option>
+            <option value="TO">Tocantins</option>
+          </select>
+        </div>
+      </div>
+    </form>
+
+    <script src="dist/cepis-autofill.js"></script>
+    <script>
+      CepisAutofill.attach({
+        cep: "#cep",
+        logradouro: "#logradouro",
+        bairro: "#bairro",
+        localidade: "#cidade",
+        uf: "#uf",
+        numero: "#numero",
+        focusNumero: true,
+      });
+    </script>
+  </body>
+</html>