Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BB3 - Configuração do Entrevistador IA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .wizard-step { | |
| display: none; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| .wizard-step.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .avatar-option { | |
| transition: all 0.2s ease; | |
| } | |
| .avatar-option:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .avatar-option.selected { | |
| border: 3px solid #3B82F6; | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-4xl bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <!-- Wizard Header --> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 p-6 text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold">Configuração do Entrevistador IA</h1> | |
| <p class="mt-1 opacity-90">Personalize seu assistente de recrutamento inteligente</p> | |
| </div> | |
| <div class="bg-blue-500 rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mt-6 bg-blue-400 bg-opacity-30 rounded-full h-2"> | |
| <div id="progress-bar" class="progress-bar bg-white rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <!-- Wizard Steps Container --> | |
| <div class="p-8"> | |
| <!-- Step 1: Tipo de Entrevistador --> | |
| <div class="wizard-step active" id="step1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">1. Tipo de Entrevistador</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="formal"> | |
| <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-3xl text-gray-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-2">Entrevistador Formal</h3> | |
| <p class="text-sm text-gray-600">Perguntas estruturadas, linguagem profissional, foco em competências técnicas.</p> | |
| <div class="mt-4"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="descontraido"> | |
| <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center"> | |
| <i class="fas fa-smile text-3xl text-gray-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-2">Entrevistador Descontraído</h3> | |
| <p class="text-sm text-gray-600">Abordagem mais informal, foco em cultura organizacional e fit com a equipe.</p> | |
| <div class="mt-4"> | |
| <span class="inline-block px-3 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Ideal para startups</span> | |
| </div> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-xl p-6 text-center cursor-pointer" data-type="tecnico"> | |
| <div class="bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center"> | |
| <i class="fas fa-code text-3xl text-gray-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800 mb-2">Entrevistador Técnico</h3> | |
| <p class="text-sm text-gray-600">Testes práticos, desafios de código, avaliação de habilidades específicas.</p> | |
| <div class="mt-4"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <label for="custom-type" class="block text-sm font-medium text-gray-700 mb-2">Ou descreva seu estilo preferido:</label> | |
| <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..."> | |
| </div> | |
| </div> | |
| <!-- Step 2: Personalidade e Aparência --> | |
| <div class="wizard-step" id="step2"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">2. Personalidade e Aparência</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Selecione um avatar:</h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="1"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto mb-2"> | |
| <span class="text-xs text-gray-600">Clara</span> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto mb-2"> | |
| <span class="text-xs text-gray-600">Ricardo</span> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="3"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar 3" class="w-16 h-16 rounded-full mx-auto mb-2"> | |
| <span class="text-xs text-gray-600">Fernanda</span> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar 4" class="w-16 h-16 rounded-full mx-auto mb-2"> | |
| <span class="text-xs text-gray-600">Marcos</span> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="5"> | |
| <div class="w-16 h-16 rounded-full mx-auto mb-2 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-2xl text-blue-600"></i> | |
| </div> | |
| <span class="text-xs text-gray-600">Robótico</span> | |
| </div> | |
| <div class="avatar-option border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer" data-avatar="6"> | |
| <div class="w-16 h-16 rounded-full mx-auto mb-2 bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-user-circle text-2xl text-gray-600"></i> | |
| </div> | |
| <span class="text-xs text-gray-600">Neutro</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="avatar-name" class="block text-sm font-medium text-gray-700 mb-2">Nome do Entrevistador:</label> | |
| <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"> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Personalidade:</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Formalidade</label> | |
| <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"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Muito Informal</span> | |
| <span>Neutro</span> | |
| <span>Muito Formal</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Cordialidade</label> | |
| <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"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Neutro</span> | |
| <span>Amigável</span> | |
| <span>Muito Acolhedor</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Estilo de Comunicação</label> | |
| <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"> | |
| <option value="direto">Direto e Objetivo</option> | |
| <option value="descritivo">Descritivo e Detalhado</option> | |
| <option value="motivacional">Motivacional e Inspirador</option> | |
| <option value="analitico">Analítico e Lógico</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="custom-personality" class="block text-sm font-medium text-gray-700 mb-2">Descrição adicional (opcional):</label> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Áreas de Especialização --> | |
| <div class="wizard-step" id="step3"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">3. Áreas de Especialização</h2> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Selecione as áreas de atuação do entrevistador:</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="flex items-center"> | |
| <input id="area-tech" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="area-tech" class="ml-2 block text-sm text-gray-700">Tecnologia</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-rh" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="area-rh" class="ml-2 block text-sm text-gray-700">RH</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-finance" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-finance" class="ml-2 block text-sm text-gray-700">Finanças</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-marketing" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-marketing" class="ml-2 block text-sm text-gray-700">Marketing</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-sales" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-sales" class="ml-2 block text-sm text-gray-700">Vendas</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-operations" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-operations" class="ml-2 block text-sm text-gray-700">Operações</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-legal" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-legal" class="ml-2 block text-sm text-gray-700">Jurídico</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="area-health" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="area-health" class="ml-2 block text-sm text-gray-700">Saúde</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Níveis de Experiência que o entrevistador avaliará:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3"> | |
| <div class="flex items-center"> | |
| <input id="level-junior" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="level-junior" class="ml-2 block text-sm text-gray-700">Júnior</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="level-mid" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="level-mid" class="ml-2 block text-sm text-gray-700">Pleno</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="level-senior" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="level-senior" class="ml-2 block text-sm text-gray-700">Sênior</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Habilidades Específicas (opcional):</h3> | |
| <div class="flex"> | |
| <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"> | |
| <button id="add-skill" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div id="skills-container" class="mt-3 flex flex-wrap gap-2"> | |
| <!-- Skills will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4: Critérios de Avaliação --> | |
| <div class="wizard-step" id="step4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">4. Critérios de Avaliação</h2> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Critérios Padrão:</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-communication" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-communication" class="font-medium text-gray-700">Comunicação</label> | |
| <p class="text-gray-500">Avalia clareza, objetividade e habilidades interpessoais</p> | |
| <div class="mt-1"> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="comm-weight" class="text-blue-600" value="1" checked> | |
| <span class="ml-1 text-xs">Normal</span> | |
| </label> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="comm-weight" class="text-blue-600" value="2"> | |
| <span class="ml-1 text-xs">Importante</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="comm-weight" class="text-blue-600" value="3"> | |
| <span class="ml-1 text-xs">Crítico</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-technical" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-technical" class="font-medium text-gray-700">Conhecimento Técnico</label> | |
| <p class="text-gray-500">Avalia domínio das habilidades necessárias para a função</p> | |
| <div class="mt-1"> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="tech-weight" class="text-blue-600" value="1"> | |
| <span class="ml-1 text-xs">Normal</span> | |
| </label> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="tech-weight" class="text-blue-600" value="2" checked> | |
| <span class="ml-1 text-xs">Importante</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="tech-weight" class="text-blue-600" value="3"> | |
| <span class="ml-1 text-xs">Crítico</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="criteria-problem-solving" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="criteria-problem-solving" class="font-medium text-gray-700">Resolução de Problemas</label> | |
| <p class="text-gray-500">Avalia capacidade analítica e criatividade na solução</p> | |
| <div class="mt-1"> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="problem-weight" class="text-blue-600" value="1" checked> | |
| <span class="ml-1 text-xs">Normal</span> | |
| </label> | |
| <label class="inline-flex items-center mr-4"> | |
| <input type="radio" name="problem-weight" class="text-blue-600" value="2"> | |
| <span class="ml-1 text-xs">Importante</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="problem-weight" class="text-blue-600" value="3"> | |
| <span class="ml-1 text-xs">Crítico</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Critérios Personalizados:</h3> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <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"> | |
| <select id="criteria-weight" class="border-t border-b border-gray-300 px-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="1">Normal</option> | |
| <option value="2">Importante</option> | |
| <option value="3">Crítico</option> | |
| </select> | |
| <button id="add-criteria" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div id="custom-criteria-container" class="mt-3 space-y-2"> | |
| <!-- Custom criteria will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5: Fluxo da Entrevista --> | |
| <div class="wizard-step" id="step5"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">5. Fluxo da Entrevista</h2> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Estrutura da Entrevista:</h3> | |
| <div id="interview-flow" class="space-y-3"> | |
| <div class="flow-step bg-blue-50 border border-blue-100 rounded-lg p-4 flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-grin text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Saudação Inicial</h4> | |
| <p class="text-sm text-gray-600">Apresentação do entrevistador e explicação do processo</p> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Obrigatório</span> | |
| </div> | |
| </div> | |
| <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move"> | |
| <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Apresentação do Candidato</h4> | |
| <p class="text-sm text-gray-600">Peça para o candidato se apresentar brevemente</p> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <button class="text-red-500 hover:text-red-700 ml-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move"> | |
| <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-briefcase text-gray-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Experiência Profissional</h4> | |
| <p class="text-sm text-gray-600">Perguntas sobre histórico e conquistas profissionais</p> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <button class="text-red-500 hover:text-red-700 ml-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flow-step bg-white border border-gray-200 rounded-lg p-4 flex items-start cursor-move"> | |
| <div class="flex-shrink-0 bg-gray-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code text-gray-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Teste Técnico</h4> | |
| <p class="text-sm text-gray-600">Avaliação de habilidades específicas para a vaga</p> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <button class="text-red-500 hover:text-red-700 ml-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flow-step bg-blue-50 border border-blue-100 rounded-lg p-4 flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-question text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Perguntas do Candidato</h4> | |
| <p class="text-sm text-gray-600">Espaço para o candidato tirar dúvidas sobre a vaga/empresa</p> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Obrigatório</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="add-step" class="text-blue-600 hover:text-blue-800 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> Adicionar Etapa Personalizada | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Duração Estimada:</h3> | |
| <div class="flex items-center"> | |
| <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"> | |
| <span id="duration-value" class="ml-4 font-medium">45 minutos</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">Ajuste o tempo total estimado para a entrevista</p> | |
| </div> | |
| </div> | |
| <!-- Step 6: Revisão e Ativação --> | |
| <div class="wizard-step" id="step6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">6. Revisão e Ativação</h2> | |
| <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-check-circle text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Configuração Completa!</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Revise as configurações abaixo e ative seu Entrevistador IA quando estiver pronto.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Resumo da Configuração:</h4> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Tipo:</strong> <span id="review-type">Entrevistador Formal</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Nome:</strong> <span id="review-name">Entrevistador BB3</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Áreas:</strong> <span id="review-areas">Tecnologia, RH</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Níveis:</strong> <span id="review-levels">Júnior, Pleno, Sênior</span></span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Detalhes da Entrevista:</h4> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Duração:</strong> <span id="review-duration">45 minutos</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Critérios:</strong> <span id="review-criteria">Comunicação, Conhecimento Técnico, Resolução de Problemas</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span><strong>Etapas:</strong> <span id="review-steps">5 etapas configuradas</span></span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Pré-visualização do Entrevistador:</h3> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6"> | |
| <div class="flex items-start"> | |
| <img id="review-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4"> | |
| <div class="bg-gray-100 p-4 rounded-lg flex-1"> | |
| <p class="font-medium text-gray-800 mb-1" id="review-avatar-name">Entrevistador BB3</p> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center"> | |
| <input id="activate-interviewer" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <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> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wizard Navigation --> | |
| <div class="px-8 py-4 border-t border-gray-200 bg-gray-50 flex justify-between"> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i> Voltar | |
| </button> | |
| <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"> | |
| Próximo <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <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"> | |
| <i class="fas fa-check-circle mr-2"></i> Ativar Entrevistador | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Wizard functionality | |
| const steps = document.querySelectorAll('.wizard-step'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const finishBtn = document.getElementById('finish-btn'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| let currentStep = 0; | |
| // Initialize wizard | |
| function updateWizard() { | |
| // Update progress bar | |
| const progress = ((currentStep + 1) / steps.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| // Show/hide navigation buttons | |
| if (currentStep === 0) { | |
| prevBtn.classList.add('hidden'); | |
| } else { | |
| prevBtn.classList.remove('hidden'); | |
| } | |
| if (currentStep === steps.length - 1) { | |
| nextBtn.classList.add('hidden'); | |
| finishBtn.classList.remove('hidden'); | |
| updateReviewSection(); | |
| } else { | |
| nextBtn.classList.remove('hidden'); | |
| finishBtn.classList.add('hidden'); | |
| } | |
| // Update step display | |
| steps.forEach((step, index) => { | |
| if (index === currentStep) { | |
| step.classList.add('active'); | |
| } else { | |
| step.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| // Navigation | |
| nextBtn.addEventListener('click', () => { | |
| if (currentStep < steps.length - 1) { | |
| currentStep++; | |
| updateWizard(); | |
| } | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| if (currentStep > 0) { | |
| currentStep--; | |
| updateWizard(); | |
| } | |
| }); | |
| // Step 1: Select interviewer type | |
| const typeOptions = document.querySelectorAll('.avatar-option[data-type]'); | |
| typeOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| typeOptions.forEach(opt => opt.classList.remove('selected', 'border-blue-500')); | |
| option.classList.add('selected', 'border-blue-500'); | |
| }); | |
| }); | |
| // Step 2: Select avatar | |
| const avatarOptions = document.querySelectorAll('.avatar-option[data-avatar]'); | |
| avatarOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| avatarOptions.forEach(opt => opt.classList.remove('selected', 'border-blue-500')); | |
| option.classList.add('selected', 'border-blue-500'); | |
| }); | |
| }); | |
| // Update avatar name | |
| document.getElementById('avatar-name').addEventListener('input', function() { | |
| document.getElementById('review-avatar-name').textContent = this.value || 'Entrevistador BB3'; | |
| }); | |
| // Step 3: Skills functionality | |
| document.getElementById('add-skill').addEventListener('click', function() { | |
| const skillInput = document.getElementById('skill-input'); | |
| const skill = skillInput.value.trim(); | |
| if (skill) { | |
| const skillElement = document.createElement('div'); | |
| skillElement.className = 'bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full flex items-center'; | |
| skillElement.innerHTML = ` | |
| ${skill} | |
| <button class="ml-1 text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| document.getElementById('skills-container').appendChild(skillElement); | |
| skillInput.value = ''; | |
| // Add remove functionality | |
| skillElement.querySelector('button').addEventListener('click', function() { | |
| skillElement.remove(); | |
| }); | |
| } | |
| }); | |
| // Step 4: Custom criteria | |
| document.getElementById('add-criteria').addEventListener('click', function() { | |
| const name = document.getElementById('criteria-name').value.trim(); | |
| const weight = document.getElementById('criteria-weight').value; | |
| if (name) { | |
| const weightText = { | |
| '1': 'Normal', | |
| '2': 'Importante', | |
| '3': 'Crítico' | |
| }; | |
| const criteriaElement = document.createElement('div'); | |
| criteriaElement.className = 'bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between'; | |
| criteriaElement.innerHTML = ` | |
| <div> | |
| <span class="font-medium">${name}</span> | |
| <span class="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full ml-2">${weightText[weight]}</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| document.getElementById('custom-criteria-container').appendChild(criteriaElement); | |
| document.getElementById('criteria-name').value = ''; | |
| // Add remove functionality | |
| criteriaElement.querySelector('button').addEventListener('click', function() { | |
| criteriaElement.remove(); | |
| }); | |
| } | |
| }); | |
| // Step 5: Duration slider | |
| const durationSlider = document.getElementById('duration-slider'); | |
| const durationValue = document.getElementById('duration-value'); | |
| durationSlider.addEventListener('input', function() { | |
| durationValue.textContent = `${this.value} minutos`; | |
| }); | |
| // Step 6: Update review section | |
| function updateReviewSection() { | |
| // Update type | |
| const selectedType = document.querySelector('.avatar-option[data-type].selected'); | |
| if (selectedType) { | |
| document.getElementById('review-type').textContent = selectedType.querySelector('h3').textContent; | |
| } | |
| // Update name | |
| document.getElementById('review-name').textContent = document.getElementById('avatar-name').value || 'Entrevistador BB3'; | |
| // Update areas | |
| const selectedAreas = Array.from(document.querySelectorAll('[id^="area-"]:checked')) | |
| .map(el => el.nextElementSibling.textContent) | |
| .join(', '); | |
| document.getElementById('review-areas').textContent = selectedAreas || 'Nenhuma área selecionada'; | |
| // Update levels | |
| const selectedLevels = Array.from(document.querySelectorAll('[id^="level-"]:checked')) | |
| .map(el => el.nextElementSibling.textContent) | |
| .join(', '); | |
| document.getElementById('review-levels').textContent = selectedLevels || 'Nenhum nível selecionado'; | |
| // Update duration | |
| document.getElementById('review-duration').textContent = `${durationSlider.value} minutos`; | |
| // Update criteria | |
| const selectedCriteria = Array.from(document.querySelectorAll('[id^="criteria-"]:checked')) | |
| .map(el => el.closest('div').querySelector('label').textContent.trim()) | |
| .join(', '); | |
| document.getElementById('review-criteria').textContent = selectedCriteria || 'Nenhum critério selecionado'; | |
| // Update steps | |
| const stepCount = document.querySelectorAll('.flow-step').length; | |
| document.getElementById('review-steps').textContent = `${stepCount} etapas configuradas`; | |
| // Update avatar preview | |
| const selectedAvatar = document.querySelector('.avatar-option[data-avatar].selected'); | |
| if (selectedAvatar) { | |
| const avatarImg = selectedAvatar.querySelector('img'); | |
| if (avatarImg) { | |
| document.getElementById('review-avatar').src = avatarImg.src; | |
| } else { | |
| // Handle non-image avatars (like the robot icon) | |
| document.getElementById('review-avatar').src = ''; | |
| document.getElementById('review-avatar').className = 'w-12 h-12 rounded-full mr-4 bg-gray-100 flex items-center justify-center'; | |
| document.getElementById('review-avatar').innerHTML = selectedAvatar.querySelector('i').outerHTML; | |
| } | |
| } | |
| } | |
| // Finish wizard | |
| finishBtn.addEventListener('click', function() { | |
| const isActivated = document.getElementById('activate-interviewer').checked; | |
| // Show success message | |
| alert(isActivated | |
| ? 'Entrevistador IA configurado e ativado com sucesso! Você será redirecionado para o painel.' | |
| : 'Configuração salva como rascunho. Você pode ativar o entrevistador quando estiver pronto.'); | |
| // In a real app, you would submit the form/data here | |
| // For this example, we'll just simulate a redirect | |
| setTimeout(() => { | |
| window.location.href = 'dashboard.html'; | |
| }, 1500); | |
| }); | |
| // Initialize | |
| updateWizard(); | |
| </script> | |
| <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> | |
| </html> |