187 lines
12 KiB
PHP
Executable File
187 lines
12 KiB
PHP
Executable File
<?php
|
|
if(isset($_COOKIE['index']) || (isset($_COOKIE['cadastro']) && $_COOKIE['cadastro'] === 'true')) {
|
|
header('Location: play.php');
|
|
exit();
|
|
}
|
|
?>
|
|
<!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">
|
|
<title>Formulário de Registro</title>
|
|
<style>
|
|
.fade-transition {
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fade-transition.show {
|
|
opacity: 1;
|
|
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>
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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">
|
|
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>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js?321"></script>
|
|
<script src="./main.js"></script>
|
|
<script>
|
|
window.onload = function () {
|
|
document.getElementById("registrationFormContainer").classList.add("visible");
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const modal = document.getElementById('welcomeModal');
|
|
const startTourBtn = document.getElementById('startTourBtn');
|
|
const modalContent = modal.querySelector('.modal-content');
|
|
|
|
// Mostrar o modal após um pequeno delay
|
|
setTimeout(() => {
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
modalContent.classList.add('show');
|
|
}, 10);
|
|
}, 500);
|
|
|
|
// Fechar o modal e iniciar o cadastro
|
|
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'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|