sdsdsdewd/acessibot-conectando-todos-com-libras
coloque essas informaçoes na IA Assistente IA: Olá! Sou o assistente do Delta Negotiation. Posso te ajudar com:
o uso de acessibilidades libras e o chat da IA q esta funcionando eu quero que vc mande somente os codigos* <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Delta Negotiation Project - Conectando Talentos às Oportunidades</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#0033A0', /* Blue */ secondary: '#FF0000', /* Red */ accent: '#FFD700', /* Yellow */ } } } } </script> <style> .hero-gradient { background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, /* preto */ rgba(0, 51, 160, 0.9) 50%, /* azul */ rgba(255, 255, 255, 1) 100%); /* branco */ } .skill-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 50, 0.2), 0 10px 10px -5px rgba(0, 0, 50, 0.1); } .job-card:hover { border-left: 4px solid #0033A0; /* azul escuro */ } .high-contrast { filter: contrast(200%); } </style> </head> <body class="font-sans bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-lg"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <img src="img/image.png" alt="Logo da empresa" class="h-12 w-auto brightness-110"> <span class="ml-2 text-xl font-bold text-gray-900">Delta Negotiation Project </div> <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> <a href="index.html" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Início</a> <a href="processo.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Processo Seletivo</a> <a href="empresas.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Para Empresas</a> <a href="sobre.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sobre o SENAI</a> <a href="acessibilidade.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Acessibilidade</a> <a href="curriculo.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Enviar Currículo</a> </div> </div> <div class="hidden sm:ml-6 sm:flex sm:items-center"> <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Entrar</button> </div> <div class="-mr-2 flex items-center sm:hidden"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> <i data-feather="menu"></i> </button> </div> </div> </div> </nav> <!-- Hero Section --> <div id="vanta-bg" class="hero-gradient text-white py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> <div class="mb-8 lg:mb-0"> <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> Conectando talentos SENAI às melhores oportunidades </h1> <p class="mt-3 max-w-md mx-auto text-lg sm:text-xl md:mt-5 md:max-w-3xl"> Nossa plataforma de IA analisa suas habilidades e encontra as vagas perfeitas na região do ABC e Zona Leste de SP. </p> <div class="mt-8 flex flex-col sm:flex-row gap-4"> <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition duration-300"> Encontrar Vagas </a> <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10 transition duration-300"> Cadastrar Habilidades </a> </div> </div> <div class="relative"> <div class="bg-white rounded-xl shadow-2xl p-6 text-gray-800"> <h3 class="text-lg font-medium mb-4">Como funciona o Delta Negotiation?</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full text-primary"> <i data-feather="user" class="h-5 w-5"></i> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-700">1. Complete seu perfil com habilidades</p> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full text-primary"> <i data-feather="search" class="h-5 w-5"></i> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-700">2. Nossa IA analisa o mercado</p> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full text-primary"> <i data-feather="briefcase" class="h-5 w-5"></i> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-700">3. Receba vagas compatíveis</p> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full text-primary"> <i data-feather="trending-up" class="h-5 w-5"></i> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-700">4. Aumente suas chances de emprego</p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Stats Section --> <div class="bg-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Resultados Comprovados</h2> <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Nossa tecnologia está transformando vidas </p> </div> <div class="mt-10"> <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div class="bg-gray-50 p-6 rounded-lg shadow"> <div class="flex items-center"> <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-md p-3"> <i data-feather="users" class="h-6 w-6 text-red-600"></i> </div> <div class="ml-5"> <dt class="text-sm font-medium text-gray-500 truncate">Alunos Cadastrados</dt> <dd class="flex items-baseline"> <p class="text-2xl font-semibold text-gray-900">5,248</p> </dd> </div> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow"> <div class="flex items-center"> <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-md p-3"> <i data-feather="briefcase" class="h-6 w-6 text-red-600"></i> </div> <div class="ml-5"> <dt class="text-sm font-medium text-gray-500 truncate">Vagas Disponíveis</dt> <dd class="flex items-baseline"> <p class="text-2xl font-semibold text-gray-900">1,732</p> </dd> </div> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow"> <div class="flex items-center"> <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-md p-3"> <i data-feather="check-circle" class="h-6 w-6 text-red-600"></i> </div> <div class="ml-5"> <dt class="text-sm font-medium text-gray-500 truncate">Empregos Gerados</dt> <dd class="flex items-baseline"> <p class="text-2xl font-semibold text-gray-900">3,819</p> </dd> </div> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow"> <div class="flex items-center"> <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-md p-3"> <i data-feather="dollar-sign" class="h-6 w-6 text-red-600"></i> </div> <div class="ml-5"> <dt class="text-sm font-medium text-gray-500 truncate">Aumento Médio de Renda</dt> <dd class="flex items-baseline"> <p class="text-2xl font-semibold text-gray-900">42%</p> </dd> </div> </div> </div> </div> </div> </div> </div> <!-- How It Works Section --> <div class="bg-gray-50 py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Tecnologia Inteligente</h2> <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Como nossa IA funciona </p> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> Combinamos aprendizado de máquina com dados do mercado para criar conexões perfeitas entre talentos e oportunidades. </p> </div> <div class="mt-16"> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-xl shadow-lg"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> <i data-feather="database" class="h-6 w-6 text-yellow-500"></i> </div> <div class="mt-5"> <h3 class="text-lg font-medium text-gray-900">Análise de Perfil</h3> <p class="mt-2 text-base text-gray-500"> Nossa IA mapeia suas habilidades técnicas, comportamentais e experiências do SENAI. </p> </div> </div> <div class="bg-white p-8 rounded-xl shadow-lg"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> <i data-feather="activity" class="h-6 w-6 text-yellow-500"></i> </div> <div class="mt-5"> <h3 class="text-lg font-medium text-gray-900">Matching Inteligente</h3> <p class="mt-2 text-base text-gray-500"> Algoritmos avançados comparam seu perfil com milhares de vagas em tempo real. </p> </div> </div> <div class="bg-white p-8 rounded-xl shadow-lg"> <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> <i data-feather="bar-chart-2" class="h-6 w-6 text-yellow-500"></i> </div> <div class="mt-5"> <h3 class="text-lg font-medium text-gray-900">Recomendações Personalizadas</h3> <p class="mt-2 text-base text-gray-500"> Receba vagas com alta taxa de compatibilidade e dicas para melhorar seu perfil. </p> </div> </div> </div> </div> </div> </div> <!-- Featured Jobs Section --> <div class="bg-white py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Oportunidades Recentes</h2> <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Vagas compatíveis com formados SENAI </p> </div> <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> <!-- Job Card 1 --> <div class="job-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> <div class="p-6"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/industry/200x21" alt="Company logo"> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Técnico em Mecânica</h3> <p class="text-sm text-gray-500">ABC Industrial</p> </div> </div> <div class="mt-4"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> <i data-feather="map-pin" class="mr-1 h-3 w-3"></i> São Caetano do Sul </span> <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> CLT </span> </div> <p class="mt-3 text-sm text-gray-600">Manutenção preventiva e corretiva em máquinas industriais. Experiência com sistemas hidráulicos e pneumáticos.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-sm font-medium text-gray-900">R$ 2.800 - R$ 3.200</span> <button class="text-sm font-medium text-primary hover:text-blue-700">Ver detalhes →</button> </div> </div> </div> <!-- Job Card 2 --> <div class="job-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> <div class="p-6"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/technology/200x200/2" alt="Company logo"> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Operador de CNC</h3> <p class="text-sm text-gray-500">Metalúrgica XYZ</p> </div> </div> <div class="mt-4"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> <i data-feather="map-pin" class="mr-1 h-3 w-3"></i> Santo André </span> <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> CLT </span> </div> <p class="mt-3 text-sm text-gray-600">Operação de máquinas CNC, programação básica e controle de qualidade. Curso SENAI em usinagem desejável.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-sm font-medium text-gray-900">R$ 2.500 - R$ 3.000</span> <button class="text-sm font-medium text-primary hover:text-blue-700">Ver detalhes →</button> </div> </div> </div> <!-- Job Card 3 --> <div class="job-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> <div class="p-6"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/construction/200x200/3" alt="Company logo"> <div class="ml-4"> <h3 class="text-lg font-medium text-gray-900">Auxiliar de Logística</h3> <p class="text-sm text-gray-500">Distribuidora ABC</p> </div> </div> <div class="mt-4"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> <i data-feather="map-pin" class="mr-1 h-3 w-3"></i> São Bernardo </span> <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> CLT </span> </div> <p class="mt-3 text-sm text-gray-600">Organização de estoque, separação de pedidos e auxílio no carregamento. CNH B desejável.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-sm font-medium text-gray-900">R$ 1.800 - R$ 2.200</span> <button class="text-sm font-medium text-primary hover:text-blue-700">Ver detalhes →</button> </div> </div> </div> </div> <div class="mt-10 text-center"> <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-blue-700 transition duration-300"> Ver todas as vagas <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i> </a> </div> </div> </div> <!-- Testimonials --> <div class="bg-yellow-50 py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Histórias de Sucesso</h2> <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> O que nossos alunos dizem </p> </div> <div class="mt-16 grid md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-lg shadow"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/people/200x200/10" alt="Testimonial"> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Ana Claudia</h4> <p class="text-sm text-gray-500">Técnica em Eletrotécnica</p> </div> </div> <p class="mt-4 text-gray-600">"O Delta Negotiation me conectou com uma ótima empresa 2 semanas após me formar no SENAI. A vaga era perfeita para minhas habilidades!"</p> <div class="mt-4 flex"> <i data-feather="star" class="h-4 w-4 text-yellow-500"></i> <i data-feather="star" class="h-4 w-4 text-yellow-500"></i> <i data-feather="star" class="h-4 w-4 text-yellow-500"></i> <i data-feather="star" class="h-4 w-4 text-yellow-500"></i> <i data-feather="star" class="h-4 w-4 text-yellow-500"></i> </div> </div> <div class="bg-white p-8 rounded-lg shadow"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/people/200x200/11" alt="Testimonial"> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Carlos Eduardo</h4> <p class="text-sm text-gray-500">Técnico em Mecatrônica</p> </div> </div> <p class="mt-4 text-gray-600">"A IA identificou habilidades que eu nem sabia que eram valiosas no mercado. Em um mês já estava empregado com um salário 30% maior do que esperava."</p> <div class="mt-4 flex"> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> </div> </div> <div class="bg-white p-8 rounded-lg shadow"> <div class="flex items-center"> <img class="h-12 w-12 rounded-full object-cover" src="http://static.photos/people/200x200/12" alt="Testimonial"> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Juliana Santos</h4> <p class="text-sm text-gray-500">Técnica em Logística</p> </div> </div> <p class="mt-4 text-gray-600">"Depois de 5 meses desempregada, o Delta Negotiation me ajudou a encontrar uma oportunidade que combinava com minhas necessidades e competências."</p> <div class="mt-4 flex"> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> <i data-feather="star" class="h-4 w-4 text-yellow-400"></i> </div> </div> </div> </div> </div> <!-- CTA Section --> <div class="bg-primary text-white py-16" style="background: linear-gradient(to right, #021a4d, #2d68ac)"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> <div> <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> Pronto para encontrar sua próxima oportunidade? </h2> <p class="mt-3 max-w-3xl text-lg leading-6"> Cadastre-se gratuitamente e deixe nossa IA trabalhar para você. </p> </div> <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 justify-end"> <div class="inline-flex rounded-md shadow"> <a href="curriculo.html" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-100 transition duration-300"> Enviar Currículo </a> </div> <div class="ml-3 inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary bg-opacity-60 hover:bg-opacity-70 transition duration-300"> Saiba Mais </a> </div> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800 text-white"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Delta Negotiation</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Sobre Nós</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Como Funciona</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Parceiros</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Carreiras</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Para Alunos</h3> <ul class="mt-4 space-y-4"> <li><a href="curriculo.html" class="text-base text-gray-300 hover:text-white">Enviar Currículo</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Buscar Vagas</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Dicas de Carreira</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Cursos Recomendados</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Para Empresas</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Cadastrar Vagas</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Buscar Talentos</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Planos</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Parcerias SENAI</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Contato</h3> <ul class="mt-4 space-y-4"> <li class="flex items-center"> <i data-feather="mail" class="h-5 w-5 text-gray-400"></i> <a href="#" class="ml-2 text-base text-gray-300 hover:text-white">contato@deltanegotiation.com</a> </li> <li class="flex items-center"> <i data-feather="phone" class="h-5 w-5 text-gray-400"></i> <a href="#" class="ml-2 text-base text-gray-300 hover:text-white">(11) 4002-8922</a> </li> <li class="flex items-center"> <i data-feather="map-pin" class="h-5 w-5 text-gray-400"></i> <span class="ml-2 text-base text-gray-300">SENAI São Paulo</span> </li> </ul> <div class="mt-4 flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white"> <i data-feather="facebook" class="h-6 w-6"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i data-feather="instagram" class="h-6 w-6"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i data-feather="linkedin" class="h-6 w-6"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i data-feather="youtube" class="h-6 w-6"></i> </a> </div> </div> </div> <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> <p class="text-base text-gray-400"> © 2023 Delta Negotiation. Todos os direitos reservados. </p> <div class="mt-4 md:mt-0 flex space-x-6"> <a href="#" class="text-base text-gray-400 hover:text-white">Privacidade</a> <a href="#" class="text-base text-gray-400 hover:text-white">Termos</a> <a href="#" class="text-base text-gray-400 hover:text-white">Cookies</a> </div> </div> </div> </footer> <!-- AI Chat Widget --> <div id="ai-chat" class="fixed bottom-6 right-6 z-50"> <div class="bg-white rounded-full shadow-xl p-4 cursor-pointer hover:bg-gray-100 transition-all duration-300" id="chat-toggle"> <i data-feather="message-circle" class="h-8 w-8 text-primary"></i> </div> <div id="chat-window" class="hidden fixed bottom-24 right-6 w-80 bg-white rounded-lg shadow-xl overflow-hidden"> <div class="bg-primary text-white p-4 flex justify-between items-center"> <h3 class="font-bold">Assistente de IA</h3> <button id="close-chat" class="text-white hover:text-yellow-400"> <i data-feather="x" class="h-5 w-5"></i> </button> </div> <div id="chat-messages" class="h-64 p-4 overflow-y-auto bg-gray-50"></div> <div class="p-4 border-t border-gray-200"> <input type="text" id="user-input" class="w-full p-2 border rounded" placeholder="Digite sua mensagem..."> <button id="send-btn" class="mt-2 bg-primary text-white py-2 px-4 rounded hover:bg-blue-700 transition">Enviar</button> </div> </div> </div> <!-- Accessibility Widget --> <div id="accessibility-bar" class="fixed bottom-6 left-6 z-50"> <div class="bg-white rounded-full shadow-xl p-4 cursor-pointer hover:bg-gray-100 transition-all duration-300" id="accessibility-toggle"> <img src="img/acessibilidade .png" alt="Acessibilidade" class="h-8 w-8"> </div> </div> <div id="accessibility-menu" class="hidden fixed bottom-24 left-6 w-64 bg-white rounded-lg shadow-xl overflow-hidden p-4"> <h3 class="font-bold text-primary mb-2">Acessibilidade</h3> <button class="w-full mb-2 bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 transition" id="font-decrease-btn"> <i data-feather="minus" class="mr-2"></i> Diminuir Fonte </button> <button class="w-full mb-2 bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-600 transition" id="high-contrast-btn"> <i data-feather="eye" class="mr-2"></i> Alto Contraste </button> <button class="w-full bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 transition" id="font-size-btn"> <i data-feather="type" class="mr-2"></i> Aumentar Fonte </button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Initialize Vanta.js background VANTA.NET({ el: "#vanta-bg", mouseControls: true, touchControls: true, gyroControls: false, minHeight: 200.00, minWidth: 200.00, scale: 1.00, scaleMobile: 1.00, color: 0x0033A0, backgroundColor: 0x0, points: 12.00, maxDistance: 22.00, spacing: 18.00 }); // Initialize Feather Icons feather.replace(); // Animation for job cards document.querySelectorAll('.job-card').forEach((card, index) => { card.style.transitionDelay = `${index * 100}ms`; }); // Enhanced AI Chat Functionality const chatToggle = document.getElementById('chat-toggle'); const chatWindow = document.getElementById('chat-window'); const closeChat = document.getElementById('close-chat'); const chatMessages = document.getElementById('chat-messages'); const userInput = document.getElementById('user-input'); const sendBtn = document.getElementById('send-btn'); let currentStep = 0; let currentTopic = ''; chatToggle.addEventListener('click', () => { chatWindow.classList.toggle('hidden'); document.getElementById('accessibility-menu').classList.add('hidden'); if (!chatWindow.classList.contains('hidden')) { showWelcomeMessage(); } }); closeChat.addEventListener('click', () => { chatWindow.classList.add('hidden'); currentStep = 0; currentTopic = ''; }); sendBtn.addEventListener('click', sendMessage); userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); function showWelcomeMessage() { addMessage('Assistente IA', `Olá! Sou o assistente do Delta Negotiation. Posso te ajudar com:<br> <strong>1. Formulários e Cadastros</strong><br> <strong>2. Processo Seletivo</strong><br> <strong>3. Melhoria de Currículo</strong><br> <strong>4. Busca de Vagas</strong><br> Digite o número da opção que deseja ajuda ou descreva sua dúvida.`, 'ai'); } function sendMessage() { const message = userInput.value.trim(); if (message) { addMessage('Você', message, 'user'); userInput.value = ''; setTimeout(() => { processUserResponse(message); }, 800); } } function processUserResponse(message) { const messageLower = message.toLowerCase(); if (currentStep === 0) { // First interaction - choose main topic if (/1|formulário|cadastro/i.test(messageLower)) { currentTopic = 'form'; startFormGuide(); } else if (/2|processo seletivo/i.test(messageLower)) { currentTopic = 'process'; startProcessGuide(); } else if (/3|currículo|cv/i.test(messageLower)) { currentTopic = 'cv'; startCVGuide(); } else if (/4|vagas|emprego/i.test(messageLower)) { currentTopic = 'jobs'; startJobSearchGuide(); } else { addMessage('Assistente IA', "Por favor, escolha uma opção numérica:<br>" + "1. Ajuda com Formulários<br>" + "2. Processo Seletivo<br>" + "3. Melhoria de Currículo<br>" + "4. Busca de Vagas", 'ai'); } } else { // Continue with the selected flow if (currentTopic === 'form') { handleFormFlow(messageLower); } else if (currentTopic === 'process') { handleProcessFlow(messageLower); } else if (currentTopic === 'cv') { handleCVFlow(messageLower); } else if (currentTopic === 'jobs') { handleJobFlow(messageLower); } } } // Accessibility Functions const accessibilityToggle = document.getElementById('accessibility-toggle'); const accessibilityMenu = document.getElementById('accessibility-menu'); accessibilityToggle.addEventListener('click', () => { accessibilityMenu.classList.toggle('hidden'); chatWindow.classList.add('hidden'); }); document.getElementById('high-contrast-btn').addEventListener('click', () => { document.body.classList.toggle('high-contrast'); alert('Modo alto contraste ativado!'); }); document.getElementById('font-size-btn').addEventListener('click', () => { const currentSize = parseFloat(getComputedStyle(document.documentElement).fontSize); document.documentElement.style.fontSize = `${currentSize + 1}px`; alert('Tamanho da fonte aumentado!'); }); // Helper functions function addMessage(sender, text, type) { const messageDiv = document.createElement('div'); messageDiv.className = `mb-3 p-3 rounded-lg ${type === 'user' ? 'bg-primary text-white ml-auto' : 'bg-gray-200 text-gray-800 mr-auto'}`; messageDiv.style.maxWidth = '80%'; messageDiv.style.wordBreak = 'break-word'; messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Initialize when page loads document.addEventListener('DOMContentLoaded', () => { feather.replace(); }); </script> </body> </html>
initial commit