Forms---Bolsonaro/index.html at main · Bren0o/Forms---Bolsonaro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Receba o material do Capitão — Cadastro 2026</title>
<meta name="description" content="Preencha o cadastro em poucos segundos e receba o material. Envios para o estado de São Paulo.">
<meta name="theme-color" content="#0B2E14">
<meta name="robots" content="index, follow">

<meta property="og:type" content="website">
<meta property="og:title" content="Receba o material do Capitão">
<meta property="og:description" content="Cadastro rápido. Digite seu CEP e o endereço é preenchido sozinho.">
<meta property="og:image" content="assets/hero-1080.jpg">

<link rel="preconnect" href="https://viacep.com.br">
<link rel="preload" href="assets/fonts/montserrat-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="assets/fonts.css">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>

<main class="wrap">

  <!-- ── Arte da campanha ───────────────────────────────── -->
  <section class="hero">
    <picture>
      <source type="image/webp" srcset="assets/hero-640.webp 640w, assets/hero-1080.webp 1080w"
              sizes="(min-width: 900px) 440px, 100vw">
      <img src="assets/hero-1080.jpg"
           srcset="assets/hero-640.jpg 640w, assets/hero-1080.jpg 1080w"
           sizes="(min-width: 900px) 440px, 100vw"
           width="1080" height="1350" fetchpriority="high"
           alt="Você quer receber material do Capitão? Preencha um cadastro em apenas 5 segundos e faça parte do nosso time. Eleições 2026.">
    </picture>
  </section>

  <!-- ── Formulário ─────────────────────────────────────── -->
  <section class="panel">
    <div class="card" id="card">

      <header class="card-head">
        <h1>Faça parte do nosso time</h1>
        <p>Só o nome e o endereço. Digite o CEP que o resto a gente preenche.</p>
      </header>

      <form id="form" novalidate autocomplete="on">

        <div class="field">
          <label for="nome">Nome completo</label>
          <input id="nome" name="nome" type="text" autocomplete="name"
                 placeholder="Seu nome e sobrenome" maxlength="80" required>
          <p class="err" id="err-nome" hidden></p>
        </div>

        <div class="field">
          <label for="cep">CEP</label>
          <div class="cep-box">
            <input id="cep" name="cep" type="text" inputmode="numeric" autocomplete="postal-code"
                   placeholder="00000-000" maxlength="9" required
                   aria-describedby="cep-status">
            <span class="spinner" id="spinner" hidden aria-hidden="true"></span>
          </div>
          <p class="hint" id="cep-status" role="status" aria-live="polite"></p>
          <p class="err" id="err-cep" hidden></p>
        </div>

        <!-- Endereço: só aparece depois que o CEP é encontrado -->
        <div id="endereco-bloco" hidden>

          <div class="field">
            <label for="endereco">Endereço</label>
            <input id="endereco" name="endereco" type="text" autocomplete="address-line1"
                   placeholder="Rua / Avenida" maxlength="120" required>
            <p class="err" id="err-endereco" hidden></p>
          </div>

          <div class="row">
            <div class="field">
              <label for="numero">Número</label>
              <input id="numero" name="numero" type="text" inputmode="numeric"
                     placeholder="123" maxlength="10" required>
              <p class="err" id="err-numero" hidden></p>
            </div>
            <div class="field">
              <label for="complemento">Complemento</label>
              <input id="complemento" name="complemento" type="text" autocomplete="address-line2"
                     placeholder="Opcional" maxlength="60">
            </div>
          </div>

          <div class="field">
            <label for="bairro">Bairro</label>
            <input id="bairro" name="bairro" type="text" autocomplete="address-level3"
                   maxlength="80" required>
            <p class="err" id="err-bairro" hidden></p>
          </div>

          <div class="row">
            <div class="field">
              <label for="cidade">Cidade</label>
              <input id="cidade" name="cidade" type="text" autocomplete="address-level2"
                     maxlength="80" required readonly>
            </div>
            <div class="field field-uf">
              <label for="estado">Estado</label>
              <input id="estado" name="estado" type="text" autocomplete="address-level1"
                     maxlength="2" required readonly>
            </div>
          </div>

        </div>

        <!-- Honeypot anti-robô: invisível para pessoas -->
        <div class="hp" aria-hidden="true">
          <label for="empresa">Não preencha este campo</label>
          <input id="empresa" name="empresa" type="text" tabindex="-1" autocomplete="off">
        </div>

        <div class="consent">
          <input id="consentimento" name="consentimento" type="checkbox" required>
          <label for="consentimento">
            Autorizo o Partido Liberal a usar meu <strong>nome e endereço</strong> com a
            finalidade específica de <strong>me enviar material da campanha pelo correio</strong>.
            Entendo que este cadastro revela minha preferência política, que a LGPD trata como
            dado sensível, e que posso retirar esta autorização quando quiser.
            Leia a <a href="privacidade.html" target="_blank" rel="noopener">Política de Privacidade</a>.
          </label>
        </div>
        <p class="err" id="err-consentimento" hidden></p>

        <button type="submit" class="btn" id="btn">
          <span class="btn-label">Quero receber o material</span>
          <span class="spinner spinner-btn" id="btn-spinner" hidden aria-hidden="true"></span>
        </button>

      </form>
    </div>

    <!-- ── Tela de sucesso ──────────────────────────────── -->
    <div class="card card-ok" id="sucesso" hidden>
      <div class="check" aria-hidden="true">
        <svg viewBox="0 0 52 52" width="52" height="52">
          <circle cx="26" cy="26" r="24" fill="none" stroke="currentColor" stroke-width="3"/>
          <path d="M15 27l8 8 15-16" fill="none" stroke="currentColor"
                stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h2>Cadastro confirmado!</h2>
      <p id="sucesso-msg">Recebemos seus dados. Em breve o material vai chegar no seu endereço.</p>
      <p class="sucesso-sub">Chame a galera: quanto mais gente no time, melhor.</p>
    </div>

    <footer class="legal">
      <p><strong>PARTIDO LIBERAL</strong> — CNPJ 09.214.316/0001-50</p>
      <p><a href="privacidade.html">Política de Privacidade</a></p>
    </footer>
  </section>

</main>

<div class="toast" id="toast" role="alert" aria-live="assertive" hidden></div>

<script src="assets/app.js" defer></script>
</body>
</html>