File size: 19,558 Bytes
c3f77ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal do Candidato - RHBrasil</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>
.gradient-bg {
background: #0550c9;
--tw-ring-color: #033a8c;
}
.input-focus:focus {
box-shadow: 0 0 0 3px rgba(5, 80, 201, 255);
}
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
</style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full space-y-8 bg-[#0550c9] p-6 rounded-lg">
<!-- Logo Section -->
<div class="text-center">
<img src="https://raw.githubusercontent.com/GustavoNeneve/Cargos-e-Categorias/refs/heads/main/LOGO_RHBrasil.svg" alt="RHBrasil Logo" class="mx-auto h-12 w-auto hover:scale-105 transition-transform duration-200">
<h2 class="mt-6 text-3xl font-extrabold text-white">
Bem vind@ ao Portal do Candidato
</h2>
</div>
<!-- Alert Box -->
<div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 rounded">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
Para você, candidato, a RHBrasil é totalmente gratuita. Se você, pessoa física, receber qualquer tipo de cobrança em nome da RHBrasil, cuidado! É golpe! Fique atento!
</p>
</div>
</div>
</div>
<!-- Login Form -->
<form id="loginForm" class="mt-8 space-y-6">
<div class="rounded-md shadow-sm space-y-4">
<div>
<label for="cpf" class="block text-sm font-medium text-white">Seu CPF</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input id="cpf" name="cpf" type="text" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 input-focus focus:outline-none focus:ring-[#0550c9] focus:border-[#0550c9] sm:text-sm" placeholder="000.000.000-00">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
</div>
<p class="mt-1 text-xs text-red-600 hidden" id="cpf-error">Esse campo é obrigatório!</p>
</div>
<div>
<label for="password" class="block text-sm font-medium text-white">Sua senha</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input id="password" name="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 input-focus focus:outline-none focus:ring-[#0550c9] focus:border-[#0550c9] sm:text-sm" placeholder="********">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<i class="fas fa-lock text-gray-400"></i>
</div>
</div>
<p class="mt-1 text-xs text-red-600 hidden" id="password-error">Esse campo é obrigatório!</p>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-[#033a8c] focus:ring-[#033a8c] border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-white">
Lembrar senha
</label>
</div>
<div class="text-sm">
<a href="#" id="forgotPassword" class="font-medium text-blue-300 hover:text-blue-200">
Esqueci minha senha
</a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-800 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i class="fas fa-sign-in-alt text-white"></i>
</span>
Entrar
</button>
</div>
</form>
<div class="text-center text-sm">
<p class="text-gray-200">
Ainda não tem cadastro?
<a href="https://www.rhbrasil.com.br/portaldocandidato/view/cadastro.php" class="font-medium text-blue-300 hover:text-blue-200 ml-1">
Clique aqui e cadastre seu currículo!
</a>
</p>
</div>
</div>
<!-- Forgot Password Modal -->
<div id="forgotPasswordModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50 p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">Redefinir senha</h3>
<button id="closeModal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div id="step1" class="space-y-4">
<p class="text-sm text-gray-500">Qual é o seu CPF?</p>
<div>
<input id="recoveryCpf" type="text" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 input-focus focus:outline-none focus:ring-[#0550c9] focus:border-[#0550c9] sm:text-sm" placeholder="000.000.000-00">
<p class="mt-1 text-xs text-red-600 hidden" id="recoveryCpf-error">Esse campo é obrigatório!</p>
</div>
<div class="flex justify-between pt-4">
<button id="backToLogin" type="button" class="inline-flex justify-center py-2 px-4 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">
Voltar para o login
</button>
<button id="nextStep" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0550c9]">
Continuar
</button>
</div>
</div>
<div id="step2" class="space-y-4 hidden">
<p class="text-sm text-gray-500">Escolha uma das opções para receber o código de redefinição de senha.</p>
<div class="space-y-2">
<div class="flex items-center">
<input id="emailOption" name="recoveryMethod" type="radio" class="focus:ring-[#0550c9] h-4 w-4 text-[#0550c9] border-gray-300" checked>
<label for="emailOption" class="ml-3 block text-sm font-medium text-gray-700">
E-mail
</label>
</div>
<div class="flex items-center">
<input id="smsOption" name="recoveryMethod" type="radio" class="focus:ring-[#0550c9] h-4 w-4 text-[#0550c9] border-gray-300">
<label for="smsOption" class="ml-3 block text-sm font-medium text-gray-700">
SMS
</label>
</div>
</div>
<p class="text-xs text-gray-500">Caso você não tenha acesso a esse e-mail, contate o <span class="font-medium">suporte@rhbrasil.com.br</span> informando seu Nome Completo e CPF, que retornaremos o contato com você!</p>
<div class="flex justify-between pt-4">
<button id="backToStep1" type="button" class="inline-flex justify-center py-2 px-4 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">
Voltar
</button>
<button id="sendCode" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0550c9]">
Enviar Código
</button>
</div>
</div>
<div id="step3" class="space-y-4 hidden">
<p class="text-sm text-gray-500">Informe o código enviado.</p>
<div>
<input id="verificationCode" type="text" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 input-focus focus:outline-none focus:ring-[#0550c9] focus:border-[#0550c9] sm:text-sm" placeholder="Código de 6 dígitos">
<p class="mt-1 text-xs text-red-600 hidden" id="code-error">Esse campo é obrigatório!</p>
</div>
<div class="flex justify-between pt-4">
<button id="backToStep2" type="button" class="inline-flex justify-center py-2 px-4 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">
Voltar
</button>
<button id="confirmCode" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0550c9]">
Confirmar Código
</button>
</div>
</div>
</div>
</div>
<script>
// Form validation
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// Validate CPF
const cpf = document.getElementById('cpf');
const cpfError = document.getElementById('cpf-error');
if (!cpf.value.trim()) {
cpf.classList.add('border-red-500');
cpfError.classList.remove('hidden');
isValid = false;
} else {
cpf.classList.remove('border-red-500');
cpfError.classList.add('hidden');
}
// Validate Password
const password = document.getElementById('password');
const passwordError = document.getElementById('password-error');
if (!password.value.trim()) {
password.classList.add('border-red-500');
passwordError.classList.remove('hidden');
isValid = false;
} else {
password.classList.remove('border-red-500');
passwordError.classList.add('hidden');
}
if (!isValid) {
document.getElementById('loginForm').classList.add('shake');
setTimeout(() => {
document.getElementById('loginForm').classList.remove('shake');
}, 500);
return;
}
// Form is valid, proceed with login
alert('Login realizado com sucesso!');
// In a real app, you would submit the form here
});
// Forgot password flow
const forgotPasswordBtn = document.getElementById('forgotPassword');
const forgotPasswordModal = document.getElementById('forgotPasswordModal');
const closeModalBtn = document.getElementById('closeModal');
const backToLoginBtn = document.getElementById('backToLogin');
const nextStepBtn = document.getElementById('nextStep');
const backToStep1Btn = document.getElementById('backToStep1');
const sendCodeBtn = document.getElementById('sendCode');
const backToStep2Btn = document.getElementById('backToStep2');
const confirmCodeBtn = document.getElementById('confirmCode');
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
forgotPasswordBtn.addEventListener('click', function(e) {
e.preventDefault();
forgotPasswordModal.classList.remove('hidden');
});
closeModalBtn.addEventListener('click', function() {
forgotPasswordModal.classList.add('hidden');
resetModal();
});
backToLoginBtn.addEventListener('click', function() {
forgotPasswordModal.classList.add('hidden');
resetModal();
});
nextStepBtn.addEventListener('click', function() {
const recoveryCpf = document.getElementById('recoveryCpf');
const recoveryCpfError = document.getElementById('recoveryCpf-error');
if (!recoveryCpf.value.trim()) {
recoveryCpf.classList.add('border-red-500');
recoveryCpfError.classList.remove('hidden');
return;
}
recoveryCpf.classList.remove('border-red-500');
recoveryCpfError.classList.add('hidden');
step1.classList.add('hidden');
step2.classList.remove('hidden');
});
backToStep1Btn.addEventListener('click', function() {
step2.classList.add('hidden');
step1.classList.remove('hidden');
});
sendCodeBtn.addEventListener('click', function() {
// In a real app, you would send the code here
step2.classList.add('hidden');
step3.classList.remove('hidden');
});
backToStep2Btn.addEventListener('click', function() {
step3.classList.add('hidden');
step2.classList.remove('hidden');
});
confirmCodeBtn.addEventListener('click', function() {
const verificationCode = document.getElementById('verificationCode');
const codeError = document.getElementById('code-error');
if (!verificationCode.value.trim()) {
verificationCode.classList.add('border-red-500');
codeError.classList.remove('hidden');
return;
}
verificationCode.classList.remove('border-red-500');
codeError.classList.add('hidden');
// In a real app, you would verify the code here
alert('Código verificado com sucesso! Um link para redefinição de senha foi enviado.');
forgotPasswordModal.classList.add('hidden');
resetModal();
});
function resetModal() {
step1.classList.remove('hidden');
step2.classList.add('hidden');
step3.classList.add('hidden');
document.getElementById('recoveryCpf').value = '';
document.getElementById('verificationCode').value = '';
document.getElementById('recoveryCpf').classList.remove('border-red-500');
document.getElementById('recoveryCpf-error').classList.add('hidden');
document.getElementById('verificationCode').classList.remove('border-red-500');
document.getElementById('code-error').classList.add('hidden');
}
// CPF mask
document.getElementById('cpf').addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 3) {
value = value.substring(0, 3) + '.' + value.substring(3);
}
if (value.length > 7) {
value = value.substring(0, 7) + '.' + value.substring(7);
}
if (value.length > 11) {
value = value.substring(0, 11) + '-' + value.substring(11);
}
if (value.length > 14) {
value = value.substring(0, 14);
}
e.target.value = value;
});
document.getElementById('recoveryCpf').addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 3) {
value = value.substring(0, 3) + '.' + value.substring(3);
}
if (value.length > 7) {
value = value.substring(0, 7) + '.' + value.substring(7);
}
if (value.length > 11) {
value = value.substring(0, 11) + '-' + value.substring(11);
}
if (value.length > 14) {
value = value.substring(0, 14);
}
e.target.value = value;
});
</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=Ticoliro/bendo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |