Hugging Face's logo

Spaces:
menezes-nathan
/
wizard
Running

App Files Community
menezes-nathan commited on
Commit
93a399d
·
verified ·
1 Parent(s): fd2f11f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +774 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wizard
3
- emoji: 🚀
4
- colorFrom: gray
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wizard
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,774 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BB3 - Configuração do Entrevistador IA</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .wizard-step {
11
+ display: none;
12
+ animation: fadeIn 0.5s ease-in-out;
13
+ }
14
+ .wizard-step.active {
15
+ display: block;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; transform: translateY(10px); }
19
+ to { opacity: 1; transform: translateY(0); }
20
+ }
21
+ .progress-bar {
22
+ height: 6px;
23
+ transition: width 0.3s ease;
24
+ }
25
+ .avatar-option {
26
+ transition: all 0.2s ease;
27
+ }
28
+ .avatar-option:hover {
29
+ transform: scale(1.05);
30
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31
+ }
32
+ .avatar-option.selected {
33
+ border: 3px solid #3B82F6;
34
+ transform: scale(1.05);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 font-sans">
39
+ <div class="min-h-screen flex items-center justify-center p-4">
40
+ <div class="w-full max-w-4xl bg-white rounded-xl shadow-xl overflow-hidden">
41
+ <!-- Wizard Header -->
42
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 p-6 text-white">
43
+ <div class="flex items-center justify-between">
44
+ <div>
45
+ <h1 class="text-2xl font-bold">Configuração do Entrevistador IA</h1>
46
+ <p class="mt-1 opacity-90">Personalize seu assistente de recrutamento inteligente</p>
47
+ </div>
48
+ <div class="bg-blue-500 rounded-full w-12 h-12 flex items-center justify-center">
49
+ <i class="fas fa-robot text-xl"></i>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Progress Bar -->
54
+ <div class="mt-6 bg-blue-400 bg-opacity-30 rounded-full h-2">
55
+ <div id="progress-bar" class="progress-bar bg-white rounded-full" style="width: 20%"></div>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Wizard Steps Container -->
60
+ <div class="p-8">
61
+ <!-- Step 1: Tipo de Entrevistador -->
62
+ <div class="wizard-step active" id="step1">
63
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">1. Tipo de Entrevistador</h2>
64
+
65
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
66
+ <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="formal">
67
+ <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center">
68
+ <i class="fas fa-user-tie text-3xl text-gray-600"></i>
69
+ </div>
70
+ <h3 class="font-medium text-gray-800 mb-2">Entrevistador Formal</h3>
71
+ <p class="text-sm text-gray-600">Perguntas estruturadas, linguagem profissional, foco em competências técnicas.</p>
72
+ <div class="mt-4">
73
+ <span class="inline-block px-3 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Recomendado para vagas sênior</span>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="descontraido">
78
+ <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center">
79
+ <i class="fas fa-smile text-3xl text-gray-600"></i>
80
+ </div>
81
+ <h3 class="font-medium text-gray-800 mb-2">Entrevistador Descontraído</h3>
82
+ <p class="text-sm text-gray-600">Abordagem mais informal, foco em cultura organizacional e fit com a equipe.</p>
83
+ <div class="mt-4">
84
+ <span class="inline-block px-3 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Ideal para startups</span>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="tecnico">
89
+ <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center">
90
+ <i class="fas fa-code text-3xl text-gray-600"></i>
91
+ </div>
92
+ <h3 class="font-medium text-gray-800 mb-2">Entrevistador Técnico</h3>
93
+ <p class="text-sm text-gray-600">Testes práticos, desafios de código, avaliação de habilidades específicas.</p>
94
+ <div class="mt-4">
95
+ <span class="inline-block px-3 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">Para áreas técnicas</span>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="mt-8">
101
+ <label for="custom-type" class="block text-sm font-medium text-gray-700 mb-2">Ou descreva seu estilo preferido:</label>
102
+ <input type="text" id="custom-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Formal com toque descontraído, foco em liderança...">
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Step 2: Personalidade e Aparência -->
107
+ <div class="wizard-step" id="step2">
108
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">2. Personalidade e Aparência</h2>
109
+
110
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
111
+ <div>
112
+ <h3 class="font-medium text-gray-700 mb-4">Selecione um avatar:</h3>
113
+ <div class="grid grid-cols-3 gap-4">
114
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="1">
115
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto mb-2">
116
+ <span class="text-xs text-gray-600">Clara</span>
117
+ </div>
118
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="2">
119
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto mb-2">
120
+ <span class="text-xs text-gray-600">Ricardo</span>
121
+ </div>
122
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="3">
123
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar 3" class="w-16 h-16 rounded-full mx-auto mb-2">
124
+ <span class="text-xs text-gray-600">Fernanda</span>
125
+ </div>
126
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="4">
127
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar 4" class="w-16 h-16 rounded-full mx-auto mb-2">
128
+ <span class="text-xs text-gray-600">Marcos</span>
129
+ </div>
130
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="5">
131
+ <div class="w-16 h-16 rounded-full mx-auto mb-2 bg-blue-100 flex items-center justify-center">
132
+ <i class="fas fa-robot text-2xl text-blue-600"></i>
133
+ </div>
134
+ <span class="text-xs text-gray-600">Robótico</span>
135
+ </div>
136
+ <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="6">
137
+ <div class="w-16 h-16 rounded-full mx-auto mb-2 bg-gray-100 flex items-center justify-center">
138
+ <i class="fas fa-user-circle text-2xl text-gray-600"></i>
139
+ </div>
140
+ <span class="text-xs text-gray-600">Neutro</span>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="mt-6">
145
+ <label for="avatar-name" class="block text-sm font-medium text-gray-700 mb-2">Nome do Entrevistador:</label>
146
+ <input type="text" id="avatar-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="Entrevistador BB3">
147
+ </div>
148
+ </div>
149
+
150
+ <div>
151
+ <h3 class="font-medium text-gray-700 mb-4">Personalidade:</h3>
152
+ <div class="space-y-4">
153
+ <div>
154
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Formalidade</label>
155
+ <input type="range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="formality-level">
156
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
157
+ <span>Muito Informal</span>
158
+ <span>Neutro</span>
159
+ <span>Muito Formal</span>
160
+ </div>
161
+ </div>
162
+
163
+ <div>
164
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Cordialidade</label>
165
+ <input type="range" min="1" max="5" value="4" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="friendliness-level">
166
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
167
+ <span>Neutro</span>
168
+ <span>Amigável</span>
169
+ <span>Muito Acolhedor</span>
170
+ </div>
171
+ </div>
172
+
173
+ <div>
174
+ <label class="block text-sm font-medium text-gray-700 mb-1">Estilo de Comunicação</label>
175
+ <select id="communication-style" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
176
+ <option value="direto">Direto e Objetivo</option>
177
+ <option value="descritivo">Descritivo e Detalhado</option>
178
+ <option value="motivacional">Motivacional e Inspirador</option>
179
+ <option value="analitico">Analítico e Lógico</option>
180
+ </select>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="mt-6">
185
+ <label for="custom-personality" class="block text-sm font-medium text-gray-700 mb-2">Descrição adicional (opcional):</label>
186
+ <textarea id="custom-personality" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Gostaria que o entrevistador fosse paciente com candidatos iniciantes..."></textarea>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Step 3: Áreas de Especialização -->
193
+ <div class="wizard-step" id="step3">
194
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">3. Áreas de Especialização</h2>
195
+
196
+ <div class="mb-8">
197
+ <h3 class="font-medium text-gray-700 mb-4">Selecione as áreas de atuação do entrevistador:</h3>
198
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
199
+ <div class="flex items-center">
200
+ <input id="area-tech" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
201
+ <label for="area-tech" class="ml-2 block text-sm text-gray-700">Tecnologia</label>
202
+ </div>
203
+ <div class="flex items-center">
204
+ <input id="area-rh" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
205
+ <label for="area-rh" class="ml-2 block text-sm text-gray-700">RH</label>
206
+ </div>
207
+ <div class="flex items-center">
208
+ <input id="area-finance" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
209
+ <label for="area-finance" class="ml-2 block text-sm text-gray-700">Finanças</label>
210
+ </div>
211
+ <div class="flex items-center">
212
+ <input id="area-marketing" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
213
+ <label for="area-marketing" class="ml-2 block text-sm text-gray-700">Marketing</label>
214
+ </div>
215
+ <div class="flex items-center">
216
+ <input id="area-sales" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
217
+ <label for="area-sales" class="ml-2 block text-sm text-gray-700">Vendas</label>
218
+ </div>
219
+ <div class="flex items-center">
220
+ <input id="area-operations" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
221
+ <label for="area-operations" class="ml-2 block text-sm text-gray-700">Operações</label>
222
+ </div>
223
+ <div class="flex items-center">
224
+ <input id="area-legal" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
225
+ <label for="area-legal" class="ml-2 block text-sm text-gray-700">Jurídico</label>
226
+ </div>
227
+ <div class="flex items-center">
228
+ <input id="area-health" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
229
+ <label for="area-health" class="ml-2 block text-sm text-gray-700">Saúde</label>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="mb-8">
235
+ <h3 class="font-medium text-gray-700 mb-4">Níveis de Experiência que o entrevistador avaliará:</h3>
236
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
237
+ <div class="flex items-center">
238
+ <input id="level-junior" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
239
+ <label for="level-junior" class="ml-2 block text-sm text-gray-700">Júnior</label>
240
+ </div>
241
+ <div class="flex items-center">
242
+ <input id="level-mid" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
243
+ <label for="level-mid" class="ml-2 block text-sm text-gray-700">Pleno</label>
244
+ </div>
245
+ <div class="flex items-center">
246
+ <input id="level-senior" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
247
+ <label for="level-senior" class="ml-2 block text-sm text-gray-700">Sênior</label>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <div>
253
+ <h3 class="font-medium text-gray-700 mb-4">Habilidades Específicas (opcional):</h3>
254
+ <div class="flex">
255
+ <input type="text" id="skill-input" placeholder="Adicionar habilidade (ex: React, Gestão de Pessoas)" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500">
256
+ <button id="add-skill" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700">
257
+ <i class="fas fa-plus"></i>
258
+ </button>
259
+ </div>
260
+ <div id="skills-container" class="mt-3 flex flex-wrap gap-2">
261
+ <!-- Skills will be added here -->
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Step 4: Critérios de Avaliação -->
267
+ <div class="wizard-step" id="step4">
268
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">4. Critérios de Avaliação</h2>
269
+
270
+ <div class="mb-8">
271
+ <h3 class="font-medium text-gray-700 mb-4">Critérios Padrão:</h3>
272
+ <div class="space-y-4">
273
+ <div class="flex items-start">
274
+ <div class="flex items-center h-5">
275
+ <input id="criteria-communication" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
276
+ </div>
277
+ <div class="ml-3 text-sm">
278
+ <label for="criteria-communication" class="font-medium text-gray-700">Comunicação</label>
279
+ <p class="text-gray-500">Avalia clareza, objetividade e habilidades interpessoais</p>
280
+ <div class="mt-1">
281
+ <label class="inline-flex items-center mr-4">
282
+ <input type="radio" name="comm-weight" class="text-blue-600" value="1" checked>
283
+ <span class="ml-1 text-xs">Normal</span>
284
+ </label>
285
+ <label class="inline-flex items-center mr-4">
286
+ <input type="radio" name="comm-weight" class="text-blue-600" value="2">
287
+ <span class="ml-1 text-xs">Importante</span>
288
+ </label>
289
+ <label class="inline-flex items-center">
290
+ <input type="radio" name="comm-weight" class="text-blue-600" value="3">
291
+ <span class="ml-1 text-xs">Crítico</span>
292
+ </label>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="flex items-start">
298
+ <div class="flex items-center h-5">
299
+ <input id="criteria-technical" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
300
+ </div>
301
+ <div class="ml-3 text-sm">
302
+ <label for="criteria-technical" class="font-medium text-gray-700">Conhecimento Técnico</label>
303
+ <p class="text-gray-500">Avalia domínio das habilidades necessárias para a função</p>
304
+ <div class="mt-1">
305
+ <label class="inline-flex items-center mr-4">
306
+ <input type="radio" name="tech-weight" class="text-blue-600" value="1">
307
+ <span class="ml-1 text-xs">Normal</span>
308
+ </label>
309
+ <label class="inline-flex items-center mr-4">
310
+ <input type="radio" name="tech-weight" class="text-blue-600" value="2" checked>
311
+ <span class="ml-1 text-xs">Importante</span>
312
+ </label>
313
+ <label class="inline-flex items-center">
314
+ <input type="radio" name="tech-weight" class="text-blue-600" value="3">
315
+ <span class="ml-1 text-xs">Crítico</span>
316
+ </label>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="flex items-start">
322
+ <div class="flex items-center h-5">
323
+ <input id="criteria-problem-solving" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
324
+ </div>
325
+ <div class="ml-3 text-sm">
326
+ <label for="criteria-problem-solving" class="font-medium text-gray-700">Resolução de Problemas</label>
327
+ <p class="text-gray-500">Avalia capacidade analítica e criatividade na solução</p>
328
+ <div class="mt-1">
329
+ <label class="inline-flex items-center mr-4">
330
+ <input type="radio" name="problem-weight" class="text-blue-600" value="1" checked>
331
+ <span class="ml-1 text-xs">Normal</span>
332
+ </label>
333
+ <label class="inline-flex items-center mr-4">
334
+ <input type="radio" name="problem-weight" class="text-blue-600" value="2">
335
+ <span class="ml-1 text-xs">Importante</span>
336
+ </label>
337
+ <label class="inline-flex items-center">
338
+ <input type="radio" name="problem-weight" class="text-blue-600" value="3">
339
+ <span class="ml-1 text-xs">Crítico</span>
340
+ </label>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <div>
348
+ <h3 class="font-medium text-gray-700 mb-4">Critérios Personalizados:</h3>
349
+ <div class="space-y-4">
350
+ <div class="flex">
351
+ <input type="text" id="criteria-name" placeholder="Nome do critério" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500">
352
+ <select id="criteria-weight" class="border-t border-b border-gray-300 px-2 focus:ring-blue-500 focus:border-blue-500">
353
+ <option value="1">Normal</option>
354
+ <option value="2">Importante</option>
355
+ <option value="3">Crítico</option>
356
+ </select>
357
+ <button id="add-criteria" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700">
358
+ <i class="fas fa-plus"></i>
359
+ </button>
360
+ </div>
361
+ <div id="custom-criteria-container" class="mt-3 space-y-2">
362
+ <!-- Custom criteria will be added here -->
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Step 5: Fluxo da Entrevista -->
369
+ <div class="wizard-step" id="step5">
370
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">5. Fluxo da Entrevista</h2>
371
+
372
+ <div class="mb-8">
373
+ <h3 class="font-medium text-gray-700 mb-4">Estrutura da Entrevista:</h3>
374
+ <div id="interview-flow" class="space-y-3">
375
+ <div class="flow-step bg-blue-50 border border-blue-100 rounded-lg p-4 flex items-start">
376
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-3">
377
+ <i class="fas fa-grin text-blue-600"></i>
378
+ </div>
379
+ <div class="flex-1">
380
+ <h4 class="font-medium text-gray-800">Saudação Inicial</h4>
381
+ <p class="text-sm text-gray-600">Apresentação do entrevistador e explicação do processo</p>
382
+ </div>
383
+ <div class="flex-shrink-0 flex items-center">
384
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Obrigatório</span>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move">
389
+ <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3">
390
+ <i class="fas fa-user text-gray-600"></i>
391
+ </div>
392
+ <div class="flex-1">
393
+ <h4 class="font-medium text-gray-800">Apresentação do Candidato</h4>
394
+ <p class="text-sm text-gray-600">Peça para o candidato se apresentar brevemente</p>
395
+ </div>
396
+ <div class="flex-shrink-0 flex items-center">
397
+ <button class="text-red-500 hover:text-red-700 ml-2">
398
+ <i class="fas fa-times"></i>
399
+ </button>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move">
404
+ <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3">
405
+ <i class="fas fa-briefcase text-gray-600"></i>
406
+ </div>
407
+ <div class="flex-1">
408
+ <h4 class="font-medium text-gray-800">Experiência Profissional</h4>
409
+ <p class="text-sm text-gray-600">Perguntas sobre histórico e conquistas profissionais</p>
410
+ </div>
411
+ <div class="flex-shrink-0 flex items-center">
412
+ <button class="text-red-500 hover:text-red-700 ml-2">
413
+ <i class="fas fa-times"></i>
414
+ </button>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move">
419
+ <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3">
420
+ <i class="fas fa-code text-gray-600"></i>
421
+ </div>
422
+ <div class="flex-1">
423
+ <h4 class="font-medium text-gray-800">Teste Técnico</h4>
424
+ <p class="text-sm text-gray-600">Avaliação de habilidades específicas para a vaga</p>
425
+ </div>
426
+ <div class="flex-shrink-0 flex items-center">
427
+ <button class="text-red-500 hover:text-red-700 ml-2">
428
+ <i class="fas fa-times"></i>
429
+ </button>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="flow-step bg-blue-50 border border-blue-100 rounded-lg p-4 flex items-start">
434
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-3">
435
+ <i class="fas fa-question text-blue-600"></i>
436
+ </div>
437
+ <div class="flex-1">
438
+ <h4 class="font-medium text-gray-800">Perguntas do Candidato</h4>
439
+ <p class="text-sm text-gray-600">Espaço para o candidato tirar dúvidas sobre a vaga/empresa</p>
440
+ </div>
441
+ <div class="flex-shrink-0 flex items-center">
442
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Obrigatório</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="mt-4">
448
+ <button id="add-step" class="text-blue-600 hover:text-blue-800 flex items-center">
449
+ <i class="fas fa-plus-circle mr-1"></i> Adicionar Etapa Personalizada
450
+ </button>
451
+ </div>
452
+ </div>
453
+
454
+ <div>
455
+ <h3 class="font-medium text-gray-700 mb-4">Duração Estimada:</h3>
456
+ <div class="flex items-center">
457
+ <input type="range" min="15" max="120" value="45" step="5" class="w-full md:w-1/2 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="duration-slider">
458
+ <span id="duration-value" class="ml-4 font-medium">45 minutos</span>
459
+ </div>
460
+ <p class="text-sm text-gray-500 mt-2">Ajuste o tempo total estimado para a entrevista</p>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Step 6: Revisão e Ativação -->
465
+ <div class="wizard-step" id="step6">
466
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">6. Revisão e Ativação</h2>
467
+
468
+ <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-8">
469
+ <div class="flex items-center mb-4">
470
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
471
+ <i class="fas fa-check-circle text-blue-600 text-xl"></i>
472
+ </div>
473
+ <h3 class="text-lg font-medium text-gray-800">Configuração Completa!</h3>
474
+ </div>
475
+ <p class="text-gray-700 mb-4">Revise as configurações abaixo e ative seu Entrevistador IA quando estiver pronto.</p>
476
+
477
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
478
+ <div>
479
+ <h4 class="font-medium text-gray-700 mb-2">Resumo da Configuração:</h4>
480
+ <ul class="space-y-2 text-sm text-gray-600">
481
+ <li class="flex items-start">
482
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
483
+ <span><strong>Tipo:</strong> <span id="review-type">Entrevistador Formal</span></span>
484
+ </li>
485
+ <li class="flex items-start">
486
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
487
+ <span><strong>Nome:</strong> <span id="review-name">Entrevistador BB3</span></span>
488
+ </li>
489
+ <li class="flex items-start">
490
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
491
+ <span><strong>Áreas:</strong> <span id="review-areas">Tecnologia, RH</span></span>
492
+ </li>
493
+ <li class="flex items-start">
494
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
495
+ <span><strong>Níveis:</strong> <span id="review-levels">Júnior, Pleno, Sênior</span></span>
496
+ </li>
497
+ </ul>
498
+ </div>
499
+ <div>
500
+ <h4 class="font-medium text-gray-700 mb-2">Detalhes da Entrevista:</h4>
501
+ <ul class="space-y-2 text-sm text-gray-600">
502
+ <li class="flex items-start">
503
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
504
+ <span><strong>Duração:</strong> <span id="review-duration">45 minutos</span></span>
505
+ </li>
506
+ <li class="flex items-start">
507
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
508
+ <span><strong>Critérios:</strong> <span id="review-criteria">Comunicação, Conhecimento Técnico, Resolução de Problemas</span></span>
509
+ </li>
510
+ <li class="flex items-start">
511
+ <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
512
+ <span><strong>Etapas:</strong> <span id="review-steps">5 etapas configuradas</span></span>
513
+ </li>
514
+ </ul>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="mb-8">
520
+ <h3 class="font-medium text-gray-700 mb-4">Pré-visualização do Entrevistador:</h3>
521
+ <div class="bg-white border border-gray-200 rounded-lg p-6">
522
+ <div class="flex items-start">
523
+ <img id="review-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
524
+ <div class="bg-gray-100 p-4 rounded-lg flex-1">
525
+ <p class="font-medium text-gray-800 mb-1" id="review-avatar-name">Entrevistador BB3</p>
526
+ <p class="text-sm text-gray-600" id="review-message">Olá! Sou o Entrevistador BB3 e vou conduzir nossa conversa hoje. Estamos procurando um profissional com experiência em desenvolvimento front-end. Poderia começar se apresentando brevemente?</p>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <div>
533
+ <div class="flex items-center">
534
+ <input id="activate-interviewer" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
535
+ <label for="activate-interviewer" class="ml-2 block text-sm font-medium text-gray-700">Ativar Entrevistador IA imediatamente após a configuração</label>
536
+ </div>
537
+ <p class="text-sm text-gray-500 mt-1">Se desmarcado, o entrevistador ficará em modo de rascunho até que você o ative manualmente.</p>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Wizard Navigation -->
543
+ <div class="px-8 py-4 border-t border-gray-200 bg-gray-50 flex justify-between">
544
+ <button id="prev-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 hidden">
545
+ <i class="fas fa-arrow-left mr-2"></i> Voltar
546
+ </button>
547
+ <button id="next-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ml-auto">
548
+ Próximo <i class="fas fa-arrow-right ml-2"></i>
549
+ </button>
550
+ <button id="finish-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 hidden">
551
+ <i class="fas fa-check-circle mr-2"></i> Ativar Entrevistador
552
+ </button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <script>
558
+ // Wizard functionality
559
+ const steps = document.querySelectorAll('.wizard-step');
560
+ const nextBtn = document.getElementById('next-btn');
561
+ const prevBtn = document.getElementById('prev-btn');
562
+ const finishBtn = document.getElementById('finish-btn');
563
+ const progressBar = document.getElementById('progress-bar');
564
+ let currentStep = 0;
565
+
566
+ // Initialize wizard
567
+ function updateWizard() {
568
+ // Update progress bar
569
+ const progress = ((currentStep + 1) / steps.length) * 100;
570
+ progressBar.style.width = `${progress}%`;
571
+
572
+ // Show/hide navigation buttons
573
+ if (currentStep === 0) {
574
+ prevBtn.classList.add('hidden');
575
+ } else {
576
+ prevBtn.classList.remove('hidden');
577
+ }
578
+
579
+ if (currentStep === steps.length - 1) {
580
+ nextBtn.classList.add('hidden');
581
+ finishBtn.classList.remove('hidden');
582
+ updateReviewSection();
583
+ } else {
584
+ nextBtn.classList.remove('hidden');
585
+ finishBtn.classList.add('hidden');
586
+ }
587
+
588
+ // Update step display
589
+ steps.forEach((step, index) => {
590
+ if (index === currentStep) {
591
+ step.classList.add('active');
592
+ } else {
593
+ step.classList.remove('active');
594
+ }
595
+ });
596
+ }
597
+
598
+ // Navigation
599
+ nextBtn.addEventListener('click', () => {
600
+ if (currentStep < steps.length - 1) {
601
+ currentStep++;
602
+ updateWizard();
603
+ }
604
+ });
605
+
606
+ prevBtn.addEventListener('click', () => {
607
+ if (currentStep > 0) {
608
+ currentStep--;
609
+ updateWizard();
610
+ }
611
+ });
612
+
613
+ // Step 1: Select interviewer type
614
+ const typeOptions = document.querySelectorAll('.avatar-option[data-type]');
615
+ typeOptions.forEach(option => {
616
+ option.addEventListener('click', () => {
617
+ typeOptions.forEach(opt => opt.classList.remove('selected', 'border-blue-500'));
618
+ option.classList.add('selected', 'border-blue-500');
619
+ });
620
+ });
621
+
622
+ // Step 2: Select avatar
623
+ const avatarOptions = document.querySelectorAll('.avatar-option[data-avatar]');
624
+ avatarOptions.forEach(option => {
625
+ option.addEventListener('click', () => {
626
+ avatarOptions.forEach(opt => opt.classList.remove('selected', 'border-blue-500'));
627
+ option.classList.add('selected', 'border-blue-500');
628
+ });
629
+ });
630
+
631
+ // Update avatar name
632
+ document.getElementById('avatar-name').addEventListener('input', function() {
633
+ document.getElementById('review-avatar-name').textContent = this.value || 'Entrevistador BB3';
634
+ });
635
+
636
+ // Step 3: Skills functionality
637
+ document.getElementById('add-skill').addEventListener('click', function() {
638
+ const skillInput = document.getElementById('skill-input');
639
+ const skill = skillInput.value.trim();
640
+
641
+ if (skill) {
642
+ const skillElement = document.createElement('div');
643
+ skillElement.className = 'bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full flex items-center';
644
+ skillElement.innerHTML = `
645
+ ${skill}
646
+ <button class="ml-1 text-blue-500 hover:text-blue-700">
647
+ <i class="fas fa-times"></i>
648
+ </button>
649
+ `;
650
+
651
+ document.getElementById('skills-container').appendChild(skillElement);
652
+ skillInput.value = '';
653
+
654
+ // Add remove functionality
655
+ skillElement.querySelector('button').addEventListener('click', function() {
656
+ skillElement.remove();
657
+ });
658
+ }
659
+ });
660
+
661
+ // Step 4: Custom criteria
662
+ document.getElementById('add-criteria').addEventListener('click', function() {
663
+ const name = document.getElementById('criteria-name').value.trim();
664
+ const weight = document.getElementById('criteria-weight').value;
665
+
666
+ if (name) {
667
+ const weightText = {
668
+ '1': 'Normal',
669
+ '2': 'Importante',
670
+ '3': 'Crítico'
671
+ };
672
+
673
+ const criteriaElement = document.createElement('div');
674
+ criteriaElement.className = 'bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between';
675
+ criteriaElement.innerHTML = `
676
+ <div>
677
+ <span class="font-medium">${name}</span>
678
+ <span class="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full ml-2">${weightText[weight]}</span>
679
+ </div>
680
+ <button class="text-red-500 hover:text-red-700">
681
+ <i class="fas fa-times"></i>
682
+ </button>
683
+ `;
684
+
685
+ document.getElementById('custom-criteria-container').appendChild(criteriaElement);
686
+ document.getElementById('criteria-name').value = '';
687
+
688
+ // Add remove functionality
689
+ criteriaElement.querySelector('button').addEventListener('click', function() {
690
+ criteriaElement.remove();
691
+ });
692
+ }
693
+ });
694
+
695
+ // Step 5: Duration slider
696
+ const durationSlider = document.getElementById('duration-slider');
697
+ const durationValue = document.getElementById('duration-value');
698
+
699
+ durationSlider.addEventListener('input', function() {
700
+ durationValue.textContent = `${this.value} minutos`;
701
+ });
702
+
703
+ // Step 6: Update review section
704
+ function updateReviewSection() {
705
+ // Update type
706
+ const selectedType = document.querySelector('.avatar-option[data-type].selected');
707
+ if (selectedType) {
708
+ document.getElementById('review-type').textContent = selectedType.querySelector('h3').textContent;
709
+ }
710
+
711
+ // Update name
712
+ document.getElementById('review-name').textContent = document.getElementById('avatar-name').value || 'Entrevistador BB3';
713
+
714
+ // Update areas
715
+ const selectedAreas = Array.from(document.querySelectorAll('[id^="area-"]:checked'))
716
+ .map(el => el.nextElementSibling.textContent)
717
+ .join(', ');
718
+ document.getElementById('review-areas').textContent = selectedAreas || 'Nenhuma área selecionada';
719
+
720
+ // Update levels
721
+ const selectedLevels = Array.from(document.querySelectorAll('[id^="level-"]:checked'))
722
+ .map(el => el.nextElementSibling.textContent)
723
+ .join(', ');
724
+ document.getElementById('review-levels').textContent = selectedLevels || 'Nenhum nível selecionado';
725
+
726
+ // Update duration
727
+ document.getElementById('review-duration').textContent = `${durationSlider.value} minutos`;
728
+
729
+ // Update criteria
730
+ const selectedCriteria = Array.from(document.querySelectorAll('[id^="criteria-"]:checked'))
731
+ .map(el => el.closest('div').querySelector('label').textContent.trim())
732
+ .join(', ');
733
+ document.getElementById('review-criteria').textContent = selectedCriteria || 'Nenhum critério selecionado';
734
+
735
+ // Update steps
736
+ const stepCount = document.querySelectorAll('.flow-step').length;
737
+ document.getElementById('review-steps').textContent = `${stepCount} etapas configuradas`;
738
+
739
+ // Update avatar preview
740
+ const selectedAvatar = document.querySelector('.avatar-option[data-avatar].selected');
741
+ if (selectedAvatar) {
742
+ const avatarImg = selectedAvatar.querySelector('img');
743
+ if (avatarImg) {
744
+ document.getElementById('review-avatar').src = avatarImg.src;
745
+ } else {
746
+ // Handle non-image avatars (like the robot icon)
747
+ document.getElementById('review-avatar').src = '';
748
+ document.getElementById('review-avatar').className = 'w-12 h-12 rounded-full mr-4 bg-gray-100 flex items-center justify-center';
749
+ document.getElementById('review-avatar').innerHTML = selectedAvatar.querySelector('i').outerHTML;
750
+ }
751
+ }
752
+ }
753
+
754
+ // Finish wizard
755
+ finishBtn.addEventListener('click', function() {
756
+ const isActivated = document.getElementById('activate-interviewer').checked;
757
+
758
+ // Show success message
759
+ alert(isActivated
760
+ ? 'Entrevistador IA configurado e ativado com sucesso! Você será redirecionado para o painel.'
761
+ : 'Configuração salva como rascunho. Você pode ativar o entrevistador quando estiver pronto.');
762
+
763
+ // In a real app, you would submit the form/data here
764
+ // For this example, we'll just simulate a redirect
765
+ setTimeout(() => {
766
+ window.location.href = 'dashboard.html';
767
+ }, 1500);
768
+ });
769
+
770
+ // Initialize
771
+ updateWizard();
772
+ </script>
773
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=menezes-nathan/wizard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
774
+ </html>