ronaldo/quiz-ius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alterações 07-04-26

Browse Source
This commit is contained in:
Ronaldo
2026-04-07 20:46:59 +00:00
parent e61ccda3ed
commit 9274560a9b
15 changed files with 411 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
index.php
View File

@@ -1,5 +1,5 @@
<?php
if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastro'] === 'true')) {
if (isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastro'] === 'true')) {
header('Location: play.php');
exit();
}
@@ -7,6 +7,7 @@ if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastr
<!DOCTYPE html>
<html lang="pt-BR">
<?php include 'header.php'; ?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,43 +19,46 @@ if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastr
max-height: 0;
overflow: hidden;
}
.fade-transition.show {
opacity: 1;
max-height: 500px; /* altura máxima suficiente para o conteúdo */
max-height: 500px;
/* altura máxima suficiente para o conteúdo */
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease-in-out;
}
.modal-content {
transform: scale(0.9);
opacity: 0;
transition: all 0.3s ease-in-out;
}
.modal-content.show {
transform: scale(1);
opacity: 1;
}
</style>
</head>
<body class="bg-gray-100" app="form">
<!-- Modal Inicial -->
<div id="welcomeModal" class="fixed inset-0 z-50 overflow-y-auto modal-backdrop hidden">
<div class="flex items-center justify-center min-h-screen px-4">
<div class="modal-content bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Siemens: Rode a Roleta e Ganhe Prêmios!</h2>
<h2 class="text-2xl font-bold text-gray-900 mb-4">Seu conhecimento em SST vale prêmios!</h2>
<div class="text-gray-600 mb-6 space-y-4">
<p>Bem-vindo ao nosso estande! Participe do jogo <strong>Rode a Roleta</strong> e concorra a prêmios exclusivos.</p>
<p>Cadastre-se rapidamente no formulário abaixo e, em seguida, rode a roleta para descobrir qual prêmio você pode ganhar.</p>
<p>Não perca essa chance de se divertir e conhecer as soluções Siemens!</p>
<p>Você é fera em Saúde e Segurança do Trabalho? Chegou a hora de provar! Participe do nosso
Quiz, teste seus conhecimentos e concorra a prêmios exclusivos.</p>
<p>Segurança em primeiro lugar, prêmios logo em seguida. Participe agora!</p>
</div>
<button id="startTourBtn" class="w-full bg-gold-xcmg text-white font-bold py-3 px-6 rounded-lg hover:bg-yellow-600 transition duration-300">
Quero me cadastrar e rodar a roleta!
<button id="startTourBtn"
class="w-full bg-gold-xcmg text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition duration-300">
Quero me cadastrar e participar!
</button>
</div>
</div>
@@ -63,88 +67,133 @@ if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastr
<div class="min-h-screen flex items-center justify-center" id="registrationFormContainer">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center">Roleta de Prêmios - Cadastro</h2>
<h2 class="text-2xl font-bold mb-6 text-center">Quiz - Cadastro</h2>
<form action="salvar.php" method="POST" class="space-y-4" id="registrationForm">
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="nome" id="nome" class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0" placeholder=" " required />
<label for="nome" class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Nome e sobrenome</label>
<input type="text" name="nome" id="nome"
class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0"
placeholder=" " required />
<label for="nome"
class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Nome</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="telefone" id="telefone" class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0" placeholder=" " required />
<label for="telefone" class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Telefone</label>
<input type="email" name="email" id="email"
class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0"
placeholder=" " required />
<label for="email"
class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">E-mail</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="email" id="email" class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0" placeholder=" " required />
<label for="email" class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">E-mail</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="empresa" id="empresa" class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0" placeholder=" " required />
<label for="empresa" class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Empresa</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="cargo" id="cargo" class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0" placeholder=" " required />
<label for="cargo" class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Setor</label>
</div>
<div class="mb-5">
<label class="block text-sm font-medium text-gray-700 mb-2">Gostaria de ser contatado por um de nossos especialistas?</label>
<div class="flex items-center space-x-6">
<div class="flex items-center">
<input id="contato-sim" name="contato_especialista" type="radio" value="Sim" class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500">
<label for="contato-sim" class="ml-2 block text-sm text-gray-900">Sim</label>
</div>
<div class="flex items-center">
<input id="contato-nao" name="contato_especialista" type="radio" value="Não" class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
<label for="contato-nao" class="ml-2 block text-sm text-gray-900">Não</label>
</div>
</div>
<input type="text" name="empresa" id="empresa"
class="peer block py-2.5 px-3 w-full text-sm text-gray-900 rounded-lg border border-gray-900 focus:border-gold-xcmg bg-transparent focus:ring-0"
placeholder=" " required />
<label for="empresa"
class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-gold-xcmg peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 start-1">Empresa</label>
</div>
<div class="mb-5">
<label class="block text-sm font-medium text-gray-700 mb-2">Tópicos de interesse:</label>
<div class="space-y-2">
<div>
<input type="checkbox" id="topico_automacao" name="topicos[]" value="Automação e Otimização de Processos" class="mr-2">
<label for="topico_automacao">Acionamentos</label>
</div>
<div>
<input type="checkbox" id="topico_ciberseguranca" name="topicos[]" value="Cibersegurança, IoT e Redes Industriais" class="mr-2">
<label for="topico_ciberseguranca">Cibersegurança, IoT e Redes Industriais</label>
</div>
<div>
<input type="checkbox" id="topico_convergencia" name="topicos[]" value="Convergência TI e TA" class="mr-2">
<label for="topico_convergencia">Automação de Pontes Rolantes</label>
</div>
<div>
<input type="checkbox" id="topico_eletrificacao" name="topicos[]" value="Eletrificação e soluções para subestações e eletrocentros" class="mr-2">
<label for="topico_eletrificacao">Eletrificação e soluções para subestações e eletrocentros</label>
</div>
<div>
<input type="checkbox" id="topico_gemeos" name="topicos[]" value="Gêmeos Digitais" class="mr-2">
<label for="topico_gemeos">Gêmeos Digitais</label>
</div>
<div>
<input type="checkbox" id="topico_instrumentacao" name="topicos[]" value="Instrumentação de Processos" class="mr-2">
<label for="topico_instrumentacao">Instrumentação de Processos</label>
</div>
<div>
<input type="checkbox" id="topico_manutencao" name="topicos[]" value="Manutenções Preditivas baseadas em IA" class="mr-2">
<label for="topico_manutencao">Manutenções Preditivas baseadas em IA</label>
</div>
<div>
<input type="checkbox" id="tsolucoes_em_baixa_tensão" name="topicos[]" value="Soluções em baixa tensão" class="mr-2">
<label for="topico_manutencao">Soluções em baixa tensão</label>
</div>
</div>
<label for="cargo" class="block mb-2 text-sm font-medium text-gray-700">Qual seu cargo</label>
<select id="cargo" name="cargo" required
class="bg-gray-50 border border-gray-900 text-gray-900 text-sm rounded-lg focus:ring-gold-xcmg focus:border-gold-xcmg block w-full p-2.5">
<option value="" disabled selected>Selecione seu cargo</option>
<option value="Analista">Analista</option>
<option value="Técnico">Técnico</option>
<option value="Assistente">Assistente</option>
<option value="Engenheiro">Engenheiro</option>
<option value="Especialista">Especialista</option>
<option value="Supervisor/coordenador">Supervisor/coordenador</option>
<option value="Gestor/Gerente">Gestor/Gerente</option>
<option value="Diretor">Diretor</option>
<option value="Consultor de sistema de gestão">Consultor de sistema de gestão</option>
<option value="Estudante">Estudante</option>
<option value="Outro">Outro</option>
<option value="Consultor">Consultor</option>
<option value="Aposentado">Aposentado</option>
<option value="Autônomo">Autônomo</option>
<option value="Socio/proprietário">Socio/proprietário</option>
<option value="CEO/Presidente">CEO/Presidente</option>
<option value="Advogado">Advogado</option>
</select>
</div>
<div class="mb-5">
<label for="setor" class="block mb-2 text-sm font-medium text-gray-700">Qual seu setor</label>
<select id="setor" name="setor" required
class="bg-gray-50 border border-gray-900 text-gray-900 text-sm rounded-lg focus:ring-gold-xcmg focus:border-gold-xcmg block w-full p-2.5">
<option value="" disabled selected>Selecione seu setor</option>
<option value="Qualidade">Qualidade</option>
<option value="Meio ambiente">Meio ambiente</option>
<option value="Segurança do trabalho">Segurança do trabalho</option>
<option value="SGI">SGI</option>
<option value="Regulatório jurídico">Regulatório jurídico</option>
<option value="ESG">ESG</option>
<option value="SS/MA/Q">SS/MA/Q</option>
<option value="Tecnologia/TI">Tecnologia/TI</option>
<option value="Administrativo">Administrativo</option>
<option value="Compliance">Compliance</option>
<option value="RH">RH</option>
<option value="Suprimentos">Suprimentos</option>
<option value="Outros">Outros</option>
</select>
</div>
<div class="mb-5">
<label for="segmento" class="block mb-2 text-sm font-medium text-gray-700">Segmento da
empresa</label>
<select id="segmento" name="segmento" required
class="bg-gray-50 border border-gray-900 text-gray-900 text-sm rounded-lg focus:ring-gold-xcmg focus:border-gold-xcmg block w-full p-2.5">
<option value="" disabled selected>Selecione o segmento</option>
<option value="Agronegócio">Agronegócio</option>
<option value="Alimentos">Alimentos</option>
<option value="Atividades administrativas/escritório">Atividades administrativas/escritório
</option>
<option value="Automotivo">Automotivo</option>
<option value="Construção civil">Construção civil</option>
<option value="Energia">Energia</option>
<option value="Engenharia">Engenharia</option>
<option value="Gerenciamento de resíduos">Gerenciamento de resíduos</option>
<option value="Indústria em geral">Indústria em geral</option>
<option value="Indústria química">Indústria química</option>
<option value="Logística e armazenamento de mercadorias/produtos">Logística e armazenamento de
mercadorias/produtos</option>
<option value="Logística portuária">Logística portuária</option>
<option value="Manutenção de máquinas e equipamentos">Manutenção de máquinas e equipamentos
</option>
<option value="Metalúrgica">Metalúrgica</option>
<option value="Mineração">Mineração</option>
<option value="Petróleo e Gás">Petróleo e Gás</option>
<option value="Serviços de saúde">Serviços de saúde</option>
<option value="Transporte em geral">Transporte em geral</option>
<option value="Outros">Outros</option>
</select>
</div>
<div class="mb-5">
<label for="funcionarios" class="block mb-2 text-sm font-medium text-gray-700">Número de
funcionários</label>
<select id="funcionarios" name="funcionarios" required
class="bg-gray-50 border border-gray-900 text-gray-900 text-sm rounded-lg focus:ring-gold-xcmg focus:border-gold-xcmg block w-full p-2.5">
<option value="" disabled selected>Selecione o número de funcionários</option>
<option value="1 a 10">1 a 10</option>
<option value="11 a 50">11 a 50</option>
<option value="51 a 200">51 a 200</option>
<option value="201 a 500">201 a 500</option>
<option value="Mais de 500">Mais de 500</option>
</select>
</div>
<input type="hidden" id="codigo" name="codigo" value="">
<button type="submit"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
class="w-full text-white bg-gold-xcmg hover:opacity-90 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
Enviar
</button>
</form>
<p class="text-xs text-gray-500 mt-4">
As informações coletadas por meio deste formulário serão tratadas estritamente para realização do evento, do sorteio e para atualização da nossa base de contatos, com todas as medidas técnicas e administrativas de segurança disponíveis. Em caso de quaisquer dúvidas/solicitações acerca do tratamento dos seus dados, contate a Organização de Privacidade de Dados da Siemens via e-mail <a href="mailto:dataprivacy.br@siemens.com" class="underline text-blue-600">dataprivacy.br@siemens.com</a>.
As informações coletadas por meio deste formulário serão tratadas estritamente para realização do
evento, do sorteio e para atualização da nossa base de contatos, com todas as medidas técnicas e
administrativas de segurança disponíveis. Em caso de quaisquer dúvidas/solicitações acerca do tratamento
dos seus dados, contate a Organização de Privacidade de Dados da IUS via e-mail <a
href="mailto:marketing@iusnatura.com.br"
class="underline text-blue-600">marketing@iusnatura.com.br</a>.
</p>
</div>
</div>
@@ -155,7 +204,7 @@ if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastr
document.getElementById("registrationFormContainer").classList.add("visible");
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const modal = document.getElementById('welcomeModal');
const startTourBtn = document.getElementById('startTourBtn');
const modalContent = modal.querySelector('.modal-content');
@@ -169,15 +218,15 @@ if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastr
}, 500);
// Fechar o modal e iniciar o cadastro
startTourBtn.addEventListener('click', function() {
startTourBtn.addEventListener('click', function () {
modalContent.classList.remove('show');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
// Rolar suavemente até o formulário
document.getElementById('registrationFormContainer').scrollIntoView({
behavior: 'smooth'
document.getElementById('registrationFormContainer').scrollIntoView({
behavior: 'smooth'
});
});
});