-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
175 lines (168 loc) · 7.68 KB
/
Copy pathoptions.html
File metadata and controls
175 lines (168 loc) · 7.68 KB
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
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Opções — Apex Leads Extractor</title>
<style>
:root {
--fundo: #f4f4f6; --cartao: #ffffff; --texto: #111114; --texto-suave: #8a8a93;
--borda: #e7e7ec; --campo: #f7f7f9; --acento: #0071e3; --acento-2: #0a84ff;
--acento-hover: #0060c8; --acento-soft: rgba(10,132,255,.16); --divisor: #f0f0f3;
}
@media (prefers-color-scheme: dark) {
:root {
--fundo: #0b0b0d; --cartao: #161619; --texto: #f5f5f7; --texto-suave: #6d6d77;
--borda: #26262b; --campo: #1b1b1f; --acento: #0a84ff; --acento-2: #409cff;
--acento-hover: #409cff; --acento-soft: rgba(10,132,255,.24); --divisor: #242429;
}
}
* { box-sizing: border-box; }
body {
margin: 0; padding: 40px 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
background: var(--fundo); color: var(--texto); font-size: 14px;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 560px; margin: 0 auto; }
h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px 0; letter-spacing: -0.02em; }
.subtitle { color: var(--texto-suave); margin: 0 0 24px 0; font-size: 13px; }
.card {
background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px;
padding: 20px 22px; margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(17,17,20,0.05), 0 8px 20px rgba(17,17,20,0.05);
}
.card h2 { font-size: 13px; font-weight: 600; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave); }
.campo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--divisor); }
.campo:first-of-type { border-top: none; }
.campo-vertical { flex-direction: column; align-items: stretch; }
.campo-vertical input { width: 100%; margin-top: 8px; }
.campo label { flex: 1; font-weight: 500; }
.campo .dica { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 3px; font-weight: 400; }
input[type="number"], input[type="text"] {
width: 110px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--borda);
background: var(--campo); color: var(--texto); font-size: 14px; font-family: inherit; outline: none;
transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-soft); }
input[type="checkbox"] { accent-color: var(--acento); width: 17px; height: 17px; }
.acoes { display: flex; gap: 10px; margin-top: 8px; }
button {
padding: 11px 20px; border-radius: 11px; border: 1px solid transparent; font-size: 14px; font-weight: 600;
cursor: pointer; font-family: inherit; letter-spacing: -0.01em; transition: filter .15s, transform .1s, background .15s;
}
button:active { transform: translateY(1px); }
.salvar {
background: linear-gradient(180deg, var(--acento-2), var(--acento)); color: #fff;
box-shadow: 0 1px 2px rgba(0,113,227,.3), 0 4px 12px rgba(0,113,227,.22);
}
.salvar:hover { filter: brightness(1.06); }
.padroes { background: transparent; color: var(--acento); border-color: var(--borda); }
.padroes:hover { background: var(--acento-soft); }
.aviso { font-size: 13px; color: var(--texto-suave); min-height: 18px; margin-top: 10px; }
</style>
</head>
<body>
<div class="container">
<h1>Opções</h1>
<p class="subtitle">Apex Leads Extractor — Google Maps</p>
<div class="card">
<h2>Ritmo da coleta</h2>
<div class="campo">
<label>Intervalo mínimo entre buscas (s)</label>
<input type="number" id="intervaloMinSeg" min="1" max="120" step="1">
</div>
<div class="campo">
<label>Intervalo máximo entre buscas (s)</label>
<input type="number" id="intervaloMaxSeg" min="1" max="300" step="1">
</div>
<div class="campo">
<label>Timeout de extração por busca (s)
<span class="dica">Tempo máximo esperando o resultado de uma página</span>
</label>
<input type="number" id="timeoutExtracaoSeg" min="30" max="600" step="10">
</div>
<div class="campo">
<label>Tamanho do bloco (cidades)
<span class="dica">No modo Blocos, pausa e exporta a cada N cidades</span>
</label>
<input type="number" id="tamanhoBloco" min="1" max="50" step="1">
</div>
</div>
<div class="card">
<h2>Cobertura geográfica</h2>
<div class="campo">
<label>Deslocamento Norte/Sul (graus de latitude)
<span class="dica">0.03 ≈ 3 km do centro — mantém os pontos dentro da cidade</span>
</label>
<input type="number" id="deltaLat" min="0.01" max="0.2" step="0.005">
</div>
<div class="campo">
<label>Deslocamento Leste/Oeste (graus de longitude)
<span class="dica">Menor = pontos mais próximos do centro (mais preciso)</span>
</label>
<input type="number" id="deltaLng" min="0.01" max="0.2" step="0.005">
</div>
<div class="campo">
<label>Zoom dos pontos de cobertura
<span class="dica">14 = cidade preenche a tela · maior = mais fechado</span>
</label>
<input type="number" id="zoomPonto" min="11" max="16" step="1">
</div>
<div class="campo">
<label>Raio da cidade (km)
<span class="dica">Leads além deste raio do centro são descartados (o Google
mistura resultados de toda a região quando a cidade tem poucos). 0 desliga.</span>
</label>
<input type="number" id="raioCidadeKm" min="0" max="200" step="5">
</div>
</div>
<div class="card">
<h2>Modo profundo (enriquecimento)</h2>
<div class="campo">
<label>Visitar a ficha de leads sem telefone
<span class="dica">Mais lento: abre a ficha de cada lead sem telefone ao fim da cidade</span>
</label>
<input type="checkbox" id="modoProfundo">
</div>
<div class="campo">
<label>Limite de fichas por cidade</label>
<input type="number" id="limiteFichasPorCidade" min="1" max="150" step="1">
</div>
</div>
<div class="card">
<h2>Comportamento</h2>
<div class="campo">
<label>Notificações do sistema
<span class="dica">Avisa ao concluir, fechar bloco ou detectar verificação do Google</span>
</label>
<input type="checkbox" id="notificacoes">
</div>
<div class="campo">
<label>Retomar sozinho após reiniciar o navegador
<span class="dica">Desligado: a varredura pausa e espera você clicar em Continuar</span>
</label>
<input type="checkbox" id="autoRetomar">
</div>
</div>
<div class="card">
<h2>Validação por IA (opcional)</h2>
<div class="campo campo-vertical">
<label>Chave da API Groq
<span class="dica">Com a chave, a IA valida cada lead contra o termo buscado e REMOVE
os que forem claramente de outro ramo. O CSV final sai limpo e enriquecido: nome comercial
formatado, segmento, tipo de negócio, prioridade (A/B/C) e uma mensagem de abordagem pronta —
e as linhas vêm ordenadas por prioridade. Sem precisar de listas por nicho. Sem chave, nada muda.
Pegue a sua grátis em console.groq.com/keys (começa com "gsk_").</span>
</label>
<input type="password" id="groqApiKey" placeholder="gsk_..." autocomplete="off" spellcheck="false">
</div>
</div>
<div class="acoes">
<button type="button" class="salvar" id="btnSalvar">Salvar</button>
<button type="button" class="padroes" id="btnPadroes">Restaurar padrões</button>
</div>
<div class="aviso" id="aviso"></div>
</div>
<script src="options.js"></script>
</body>
</html>