<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TalentHub - Conectando Talentos e Oportunidades</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8fafc;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
.auth-buttons {
display: flex;
gap: 1rem;
}
.btn {
padding: 0.5rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: #4f46e5;
color: white;
}
.btn-outline {
background: transparent;
color: white;
border: 2px solid white;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Main Content */
main {
margin-top: 80px;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 5rem 0;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease-out;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
animation: fadeInUp 1s ease-out 0.2s both;
}
/* Search Section */
.search-section {
background: white;
padding: 3rem 0;
margin-top: -50px;
position: relative;
z-index: 100;
}
.search-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
}
.search-form {
display: flex;
gap: 1rem;
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.search-field {
flex: 1;
position: relative;
}
.search-field input, .search-field select {
width: 100%;
padding: 1rem;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s;
}
.search-field input:focus, .search-field select:focus {
outline: none;
border-color: #4f46e5;
}
.search-field label {
position: absolute;
top: -8px;
left: 15px;
background: white;
padding: 0 5px;
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
}
.btn-search {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-search:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
}
/* Stats Section */
.stats {
background: #1f2937;
color: white;
padding: 3rem 0;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
}
.stat-item h3 {
font-size: 2.5rem;
color: #60a5fa;
margin-bottom: 0.5rem;
}
/* Featured Jobs */
.featured-jobs {
padding: 5rem 0;
background: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #1f2937;
}
.jobs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.job-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s;
border: 1px solid #f3f4f6;
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.job-header {
display: flex;
align-items: start;
margin-bottom: 1rem;
}
.company-logo {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 1rem;
font-size: 1.2rem;
}
.job-info h3 {
color: #1f2937;
margin-bottom: 0.5rem;
}
.job-info .company {
color: #6b7280;
font-weight: 500;
}
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.tag {
background: #eff6ff;
color: #1d4ed8;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.job-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}
.salary {
font-weight: 600;
color: #059669;
}
.location {
color: #6b7280;
font-size: 0.9rem;
}
/* How it Works */
.how-it-works {
background: #f8fafc;
padding: 5rem 0;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.step {
text-align: center;
padding: 2rem;
}
.step-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}
.step h3 {
color: #1f2937;
margin-bottom: 1rem;
}
.step p {
color: #6b7280;
line-height: 1.8;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2000;
animation: fadeIn 0.3s ease-out;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2rem;
border-radius: 15px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.close {
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #4f46e5;
}
/* Dashboard Styles */
.dashboard {
display: none;
padding: 2rem 0;
background: white;
}
.dashboard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 0;
margin-bottom: 2rem;
}
.dashboard-nav {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 1rem;
}
.dashboard-nav button {
padding: 0.75rem 1.5rem;
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
}
.dashboard-nav button.active {
color: #4f46e5;
border-bottom: 2px solid #4f46e5;
}
.dashboard-content {
min-height: 400px;
}
.dashboard-section {
display: none;
}
.dashboard-section.active {
display: block;
}
/* Job Application Modal */
.application-form {
max-height: 70vh;
overflow-y: auto;
}
/* Notifications */
.notification {
position: fixed;
top: 100px;
right: 20px;
background: #10b981;
color: white;
padding: 1rem 1.5rem;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
z-index: 3000;
animation: slideInRight 0.3s ease-out;
}
.notification.error {
background: #ef4444;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2rem;
}
.search-form {
flex-direction: column;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.jobs-grid {
grid-template-columns: 1fr;
}
.steps {
grid-template-columns: 1fr;
}
}
/* Footer */
footer {
background: #1f2937;
color: white;
padding: 3rem 0 1rem;
margin-top: 5rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-section h3 {
margin-bottom: 1rem;
color: #60a5fa;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #d1d5db;
text-decoration: none;
transition: color 0.3s;
}
.footer-section a:hover {
color: #60a5fa;
}
.footer-bottom {
border-top: 1px solid #374151;
margin-top: 2rem;
padding-top: 1rem;
text-align: center;
color: #9ca3af;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<nav>
<div class="logo">
<i class="fas fa-briefcase"></i> TalentHub
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#vagas">Vagas</a></li>
<li><a href="#empresas">Empresas</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
<div class="auth-buttons">
<a href="#" class="btn btn-outline" onclick="openModal('loginModal')">Login</a>
<a href="#" class="btn btn-primary" onclick="openModal('registerModal')">Cadastrar</a>
</div>
</nav>
</header>
<!-- Main Content -->
<main id="mainContent">
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Encontre sua próxima oportunidade</h1>
<p>Conectamos talentos excepcionais com empresas inovadoras. Descubra milhares de vagas ou encontre o candidato perfeito para sua equipe.</p>
<div style="margin-top: 2rem;">
<a href="#" class="btn btn-primary" style="margin-right: 1rem;" onclick="openModal('registerModal')">Começar Agora</a>
<a href="#vagas" class="btn btn-outline">Ver Vagas</a>
</div>
</div>
</section>
<!-- Search Section -->
<section class="search-section">
<div class="search-container">
<form class="search-form" onsubmit="searchJobs(event)">
<div class="search-field">
<label>Cargo ou palavra-chave</label>
<input type="text" placeholder="Ex: Desenvolvedor, Marketing..." id="searchKeyword">
</div>
<div class="search-field">
<label>Localização</label>
<input type="text" placeholder="Ex: São Paulo, Rio de Janeiro..." id="searchLocation">
</div>
<div class="search-field">
<label>Categoria</label>
<select id="searchCategory">
<option value="">Todas as categorias</option>
<option value="tecnologia">Tecnologia</option>
<option value="marketing">Marketing</option>
<option value="vendas">Vendas</option>
<option value="financeiro">Financeiro</option>
<option value="rh">Recursos Humanos</option>
</select>
</div>
<button type="submit" class="btn-search">
<i class="fas fa-search"></i> Buscar
</button>
</form>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stats-container">
<div class="stat-item">
<h3 id="jobCount">2.847</h3>
<p>Vagas Ativas</p>
</div>
<div class="stat-item">
<h3 id="companyCount">1.234</h3>
<p>Empresas Cadastradas</p>
</div>
<div class="stat-item">
<h3 id="candidateCount">45.678</h3>
<p>Candidatos Ativos</p>
</div>
<div class="stat-item">
<h3 id="hireCount">8.901</h3>
<p>Contratações Realizadas</p>
</div>
</div>
</section>
<!-- Featured Jobs -->
<section class="featured-jobs" id="vagas">
<div class="container">
<h2 class="section-title">Vagas em Destaque</h2>
<div class="jobs-grid" id="jobsGrid">
<!-- Jobs will be loaded here -->
</div>
</div>
</section>
<!-- How it Works -->
<section class="how-it-works">
<div class="container">
<h2 class="section-title">Como Funciona</h2>
<div class="steps">
<div class="step">
<div class="step-icon">
<i class="fas fa-user-plus"></i>
</div>
<h3>1. Cadastre-se</h3>
<p>Crie seu perfil completo com informações profissionais, experiências e habilidades para se destacar no mercado.</p>
</div>
<div class="step">
<div class="step-icon">
<i class="fas fa-search"></i>
</div>
<h3>2. Explore Oportunidades</h3>
<p>Use nossa busca inteligente para encontrar vagas que combinam perfeitamente com seu perfil e aspirações.</p>
</div>
<div class="step">
<div class="step-icon">
<i class="fas fa-paper-plane"></i>
</div>
<h3>3. Candidate-se</h3>
<p>Aplique para as vagas com apenas um clique e acompanhe o status das suas candidaturas em tempo real.</p>
</div>
</div>
</div>
</section>
</main>
<!-- Dashboard (Hidden by default) -->
<div class="dashboard" id="dashboard">
<div class="dashboard-header">
<div class="container">
<h1>Dashboard</h1>
<p>Bem-vindo de volta! <span id="userName"></span></p>
</div>
</div>
<div class="container">
<nav class="dashboard-nav">
<button class="active" onclick="showDashboardSection('overview')">Visão Geral</button>
<button onclick="showDashboardSection('applications')">Minhas Candidaturas</button>
<button onclick="showDashboardSection('profile')">Perfil</button>
<button onclick="showDashboardSection('saved')">Vagas Salvas</button>
</nav>
<div class="dashboard-content">
<div id="overview" class="dashboard-section active">
<h2>Visão Geral</h2>
<div class="stats-container" style="background: transparent; color: #333; padding: 2rem 0;">
<div class="stat-item">
<h3 style="color: #4f46e5;" id="userApplications">12</h3>
<p>Candidaturas Enviadas</p>
</div>
<div class="stat-item">
<h3 style="color: #10b981;" id="userInterviews">3</h3>
<p>Entrevistas Agendadas</p>
</div>
<div class="stat-item">
<h3 style="color: #f59e0b;" id="userSaved">8</h3>
<p>Vagas Salvas</p>
</div>
</div>
</div>
<div id="applications" class="dashboard-section">
<h2>Minhas Candidaturas</h2>
<div id="applicationsList">
<!-- Applications will be loaded here -->
</div>
</div>
<div id="profile" class="dashboard-section">
<h2>Meu Perfil</h2>
<form id="profileForm">
<div class="form-group">
<label>Nome Completo</label>
<input type="text" id="profileName" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="profileEmail" required>
</div>
<div class="form-group">
<label>Telefone</label>
<input type="tel" id="profilePhone">
</div>
<div class="form-group">
<label>Localização</label>
<input type="text" id="profileLocation">
</div>
<div class="form-group">
<label>Área de Atuação</label>
<select id="profileArea">
<option value="tecnologia">Tecnologia</option>
<option value="marketing">Marketing</option>
<option value="vendas">Vendas</option>
<option value="financeiro">Financeiro</option>
<option value="rh">Recursos Humanos</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Salvar Alterações</button>
</form>
</div>
<div id="saved" class="dashboard-section">
<h2>Vagas Salvas</h2>
<div id="savedJobsList">
<!-- Saved jobs will be loaded here -->
</div>
</div>
</div>
<div style="margin-top: 2rem; text-align: center;">
<button class="btn btn-outline" onclick="logout()">Sair</button>
</div>
</div>
</div>
<!-- Modals -->
<!-- Login Modal -->
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Login</h2>
<span class="close" onclick="closeModal('loginModal')">×</span>
</div>
<form id="loginForm" onsubmit="login(event)">
<div class="form-group">
<label>Email</label>
<input type="email" id="loginEmail" required>
</div>
<div class="form-group">
<label>Senha</label>
<input type="password" id="loginPassword" required>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Entrar</button>
</form>
<p style="text-align: center; margin-top: 1rem;">
Não tem conta? <a href="#" onclick="closeModal('loginModal'); openModal('registerModal')">Cadastre-se</a>
</p>
</div>
</div>
<!-- Register Modal -->
<div id="registerModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Cadastro</h2>
<span class="close" onclick="closeModal('registerModal')">×</span>
</div>
<form id="registerForm" onsubmit="register(event)">
<div class="form-group">
<label>Tipo de Conta</label>
<select id="userType" required>
<option value="candidate">Candidato</option>
<option value="company">Empresa</option>
</select>
</div>
<div class="form-group">
<label>Nome Completo</label>
<input type="text" id="registerName" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="registerEmail" required>
</div>
<div class="form-group">
<label>Senha</label>
<input type="password" id="registerPassword" required>
</div>
<div class="form-group">
<label>Telefone</label>
<input type="tel" id="registerPhone">
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Criar Conta</button>
</form>
<p style="text-align: center; margin-top: 1rem;">
Já tem conta? <a href="#" onclick="closeModal('registerModal'); openModal('loginModal')">Faça login</a>
</p>
</div>
</div>
<!-- Job Application Modal -->
<div id="applicationModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Candidatar-se à Vaga</h2>
<span class="close" onclick="closeModal('applicationModal')">×</span>
</div>
<div class="application-form">
<div id="jobDetails"></div>
<form id="applyForm" onsubmit="applyToJob(event)">
<div class="form-group">
<label>Carta de Apresentação</label>
<textarea id="coverLetter" rows="4" placeholder="Por que você é o candidato ideal para esta vaga?"></textarea>
</div>
<div class="form-group">
<label>Currículo (opcional)</label>
<input type="file" id="resumeFile" accept=".pdf,.doc,.docx">
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Enviar Candidatura</button>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>TalentHub</h3>
<p>Conectando talentos e oportunidades desde 2024. Sua próxima oportunidade de carreira está aqui.</p>
<div style="margin-top: 1rem;">
<a href="#" style="margin-right: 1rem; font-size: 1.5rem;"><i class="fab fa-linkedin"></i></a>
<a href="#" style="margin-right: 1rem; font-size: 1.5rem;"><i class="fab fa-twitter"></i></a>
<a href="#" style="margin-right: 1rem; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
</div>
</div>
<div class="footer-section">
<h3>Para Candidatos</h3>
<ul>
<li><a href="#">Buscar Vagas</a></li>
<li><a href="#">Criar Perfil</a></li>
<li><a href="#">Dicas de Carreira</a></li>
<li><a href="#">Salários</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Para Empresas</h3>
<ul>
<li><a href="#">Publicar Vaga</a></li>
<li><a href="#">Buscar Candidatos</a></li>
<li><a href="#">Planos</a></li>
<li><a href="#">Recursos</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Suporte</h3>
<ul>
<li><a href="#">Central de Ajuda</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Política de Privacidade</a></li>
<li><a href="#">Termos de Uso</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 TalentHub. Todos os direitos reservados.</p>
</div>
</footer>
<script>
// Global Variables
let currentUser = null;
let savedJobs = [];
let userApplications = [];
// Sample Job Data
const sampleJobs = [
{
id: 1,
title: "Desenvolvedor Full Stack",
company: "TechCorp",
location: "São Paulo, SP",
salary: "R$ 8.000 - R$ 12.000",
type: "CLT",
remote: true,
tags: ["React", "Node.js", "MongoDB"],
description: "Desenvolvedor experiente para trabalhar em projetos inovadores...",
requirements: ["3+ anos de experiência", "React", "Node.js"],
posted: "2 dias atrás"
},
{
id: 2,
title: "Designer UX/UI",
company: "CreativeStudio",
location: "Rio de Janeiro, RJ",
salary: "R$ 5.000 - R$ 8.000",
type: "CLT",
remote: false,
tags: ["Figma", "Adobe XD", "Prototipagem"],
description: "Designer criativo para desenvolver interfaces incríveis...",
requirements: ["Portfolio sólido", "Figma", "Adobe Creative Suite"],
posted: "1 dia atrás"
},
{
id: 3,
title: "Gerente de Marketing",
company: "MarketPlus",
location: "Belo Horizonte, MG",
salary: "R$ 10.000 - R$ 15.000",
type: "CLT",
remote: true,
tags: ["Marketing Digital", "SEO", "Analytics"],
description: "Gerente experiente para liderar estratégias de marketing...",
requirements: ["5+ anos em marketing", "Liderança de equipes", "Google Analytics"],
posted: "3 dias atrás"
},
{
id: 4,
title: "Analista de Dados",
company: "DataInsights",
location: "Remoto",
salary: "R$ 6.000 - R$ 9.000",
type: "PJ",
remote: true,
tags: ["Python", "SQL", "Machine Learning"],
description: "Analista para extrair insights valiosos dos dados...",
requirements: ["Python", "SQL", "Estatística"],
posted: "5 dias atrás"
},
{
id: 5,
title: "Desenvolvedor Mobile",
company: "AppMakers",
location: "Porto Alegre, RS",
salary: "R$ 7.000 - R$ 10.000",
type: "CLT",
remote: true,
tags: ["React Native", "Flutter", "iOS", "Android"],
description: "Desenvolvedor mobile para criar apps revolucionários...",
requirements: ["React Native ou Flutter", "Publicação na App Store"],
posted: "1 semana atrás"
},
{
id: 6,
title: "Especialista em DevOps",
company: "CloudTech",
location: "São Paulo, SP",
salary: "R$ 12.000 - R$ 18.000",
type: "CLT",
remote: true,
tags: ["AWS", "Docker", "Kubernetes", "CI/CD"],
description: "Especialista para otimizar nossa infraestrutura em nuvem...",
requirements: ["AWS Certification", "Docker", "Kubernetes"],
posted: "4 dias atrás"
}
];
// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
loadJobs();
updateStats();
checkUserSession();
});
// Modal Functions
function openModal(modalId) {
document.getElementById(modalId).style.display = 'block';
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// Close modal when clicking outside
window.onclick = function(event) {
const modals = document.querySelectorAll('.modal');
modals.forEach(modal => {
if (event.target == modal) {
modal.style.display = 'none';
}
});
}
// Load Jobs
function loadJobs(jobs = sampleJobs) {
const jobsGrid = document.getElementById('jobsGrid');
jobsGrid.innerHTML = '';
jobs.forEach(job => {
const jobCard = createJobCard(job);
jobsGrid.appendChild(jobCard);
});
}
// Create Job Card
function createJobCard(job) {
const card = document.createElement('div');
card.className = 'job-card';
card.innerHTML = `
<div class="job-header">
<div class="company-logo">${job.company[0]}</div>
<div class="job-info">
<h3>${job.title}</h3>
<p class="company">${job.company}</p>
</div>
</div>
<div class="job-tags">
${job.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
${job.remote ? '<span class="tag" style="background: #dcfce7; color: #16a34a;">Remoto</span>' : ''}
</div>
<p style="color: #6b7280; margin: 1rem 0; line-height: 1.6;">${job.description}</p>
<div class="job-details">
<div>
<div class="salary">${job.salary}</div>
<div class="location"><i class="fas fa-map-marker-alt"></i> ${job.location}</div>
</div>
<div style="text-align: right;">
<button class="btn btn-primary" onclick="openJobApplication(${job.id})" style="margin-right: 0.5rem;">
Candidatar-se
</button>
<button class="btn btn-outline" onclick="toggleSaveJob(${job.id})" style="padding: 0.5rem;">
<i class="fas fa-heart ${savedJobs.includes(job.id) ? 'saved' : ''}"></i>
</button>
</div>
</div>
<div style="margin-top: 1rem; font-size: 0.8rem; color: #9ca3af;">
<i class="fas fa-clock"></i> Publicado ${job.posted}
</div>
`;
return card;
}
// Search Jobs
function searchJobs(event) {
event.preventDefault();
const keyword = document.getElementById('searchKeyword').value.toLowerCase();
const location = document.getElementById('searchLocation').value.toLowerCase();
const category = document.getElementById('searchCategory').value;
const filteredJobs = sampleJobs.filter(job => {
const matchKeyword = !keyword ||
job.title.toLowerCase().includes(keyword) ||
job.tags.some(tag => tag.toLowerCase().includes(keyword));
const matchLocation = !location ||
job.location.toLowerCase().includes(location);
const matchCategory = !category || job.tags.some(tag =>
tag.toLowerCase().includes(category));
return matchKeyword && matchLocation && matchCategory;
});
loadJobs(filteredJobs);
showNotification(`${filteredJobs.length} vagas encontradas!`);
}
// Authentication Functions
function login(event) {
event.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
// Simple validation (in a real app, this would be server-side)
if (email && password) {
currentUser = {
id: 1,
name: 'João Silva',
email: email,
type: 'candidate'
};
localStorage.setItem('currentUser', JSON.stringify(currentUser));
closeModal('loginModal');
showDashboard();
showNotification('Login realizado com sucesso!');
}
}
function register(event) {
event.preventDefault();
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const phone = document.getElementById('registerPhone').value;
const type = document.getElementById('userType').value;
if (name && email && password) {
currentUser = {
id: Date.now(),
name: name,
email: email,
phone: phone,
type: type
};
localStorage.setItem('currentUser', JSON.stringify(currentUser));
closeModal('registerModal');
showDashboard();
showNotification('Conta criada com sucesso!');
}
}
function logout() {
currentUser = null;
localStorage.removeItem('currentUser');
showHomePage();
showNotification('Logout realizado com sucesso!');
}
function checkUserSession() {
const savedUser = localStorage.getItem('currentUser');
if (savedUser) {
currentUser = JSON.parse(savedUser);
updateAuthButtons();
}
}
function updateAuthButtons() {
const authButtons = document.querySelector('.auth-buttons');
if (currentUser) {
authButtons.innerHTML = `
<span style="color: white; margin-right: 1rem;">Olá, ${currentUser.name}</span>
<a href="#" class="btn btn-primary" onclick="showDashboard()">Dashboard</a>
<a href="#" class="btn btn-outline" onclick="logout()">Sair</a>
`;
}
}
// Dashboard Functions
function showDashboard() {
document.getElementById('mainContent').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
document.getElementById('userName').textContent = currentUser?.name || 'Usuário';
loadUserData();
updateAuthButtons();
}
function showHomePage() {
document.getElementById('mainContent').style.display = 'block';
document.getElementById('dashboard').style.display = 'none';
document.querySelector('.auth-buttons').innerHTML = `
<a href="#" class="btn btn-outline" onclick="openModal('loginModal')">Login</a>
<a href="#" class="btn btn-primary" onclick="openModal('registerModal')">Cadastrar</a>
`;
}
function showDashboardSection(sectionName) {
// Hide all sections
document.querySelectorAll('.dashboard-section').forEach(section => {
section.classList.remove('active');
});
// Show selected section
document.getElementById(sectionName).classList.add('active');
// Update nav buttons
document.querySelectorAll('.dashboard-nav button').forEach(button => {
button.classList.remove('active');
});
event.target.classList.add('active');
// Load section-specific data
if (sectionName === 'applications') {
loadUserApplications();
} else if (sectionName === 'saved') {
loadSavedJobs();
} else if (sectionName === 'profile') {
loadUserProfile();
}
}
function loadUserData() {
// Load user applications, saved jobs, etc.
loadUserApplications();
loadSavedJobs();
updateDashboardStats();
}
function loadUserApplications() {
const applicationsList = document.getElementById('applicationsList');
if (userApplications.length === 0) {
applicationsList.innerHTML = '<p>Você ainda não se candidatou a nenhuma vaga.</p>';
return;
}
applicationsList.innerHTML = userApplications.map(app => {
const job = sampleJobs.find(j => j.id === app.jobId);
return `
<div class="job-card">
<div class="job-header">
<div class="company-logo">${job.company[0]}</div>
<div class="job-info">
<h3>${job.title}</h3>
<p class="company">${job.company}</p>
</div>
</div>
<div style="margin-top: 1rem;">
<span class="tag" style="background: ${getStatusColor(app.status)};">${getStatusText(app.status)}</span>
<div style="margin-top: 0.5rem; font-size: 0.9rem; color: #6b7280;">
Candidatura enviada em ${app.appliedDate}
</div>
</div>
</div>
`;
}).join('');
}
function loadSavedJobs() {
const savedJobsList = document.getElementById('savedJobsList');
if (savedJobs.length === 0) {
savedJobsList.innerHTML = '<p>Você ainda não salvou nenhuma vaga.</p>';
return;
}
const jobs = sampleJobs.filter(job => savedJobs.includes(job.id));
savedJobsList.innerHTML = jobs.map(job => createJobCard(job).outerHTML).join('');
}
function loadUserProfile() {
if (currentUser) {
document.getElementById('profileName').value = currentUser.name || '';
document.getElementById('profileEmail').value = currentUser.email || '';
document.getElementById('profilePhone').value = currentUser.phone || '';
document.getElementById('profileLocation').value = currentUser.location || '';
document.getElementById('profileArea').value = currentUser.area || '';
}
}
function updateDashboardStats() {
document.getElementById('userApplications').textContent = userApplications.length;
document.getElementById('userInterviews').textContent = userApplications.filter(app => app.status === 'interview').length;
document.getElementById('userSaved').textContent = savedJobs.length;
}
// Job Application Functions
function openJobApplication(jobId) {
if (!currentUser) {
openModal('loginModal');
showNotification('Faça login para se candidatar às vagas.', 'error');
return;
}
const job = sampleJobs.find(j => j.id === jobId);
if (!job) return;
document.getElementById('jobDetails').innerHTML = `
<div class="job-card" style="margin-bottom: 1.5rem;">
<div class="job-header">
<div class="company-logo">${job.company[0]}</div>
<div class="job-info">
<h3>${job.title}</h3>
<p class="company">${job.company}</p>
</div>
</div>
<div class="job-tags">
${job.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
</div>
<div class="salary" style="margin-top: 1rem;">${job.salary}</div>
<div class="location"><i class="fas fa-map-marker-alt"></i> ${job.location}</div>
</div>
`;
document.getElementById('applyForm').dataset.jobId = jobId;
openModal('applicationModal');
}
function applyToJob(event) {
event.preventDefault();
const jobId = parseInt(document.getElementById('applyForm').dataset.jobId);
const coverLetter = document.getElementById('coverLetter').value;
// Check if already applied
if (userApplications.some(app => app.jobId === jobId)) {
showNotification('Você já se candidatou a esta vaga!', 'error');
return;
}
const application = {
id: Date.now(),
jobId: jobId,
coverLetter: coverLetter,
appliedDate: new Date().toLocaleDateString('pt-BR'),
status: 'pending'
};
userApplications.push(application);
localStorage.setItem('userApplications', JSON.stringify(userApplications));
closeModal('applicationModal');
showNotification('Candidatura enviada com sucesso!');
// Clear form
document.getElementById('coverLetter').value = '';
}
function toggleSaveJob(jobId) {
if (!currentUser) {
openModal('loginModal');
showNotification('Faça login para salvar vagas.', 'error');
return;
}
if (savedJobs.includes(jobId)) {
savedJobs = savedJobs.filter(id => id !== jobId);
showNotification('Vaga removida dos salvos.');
} else {
savedJobs.push(jobId);
showNotification('Vaga salva com sucesso!');
}
localStorage.setItem('savedJobs', JSON.stringify(savedJobs));
loadJobs(); // Reload to update heart icons
}
// Utility Functions
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 4000);
}
function updateStats() {
// Animate counters
animateCounter('jobCount', 2847);
animateCounter('companyCount', 1234);
animateCounter('candidateCount', 45678);
animateCounter('hireCount', 8901);
}
function animateCounter(elementId, target) {
const element = document.getElementById(elementId);
let current = 0;
const increment = target / 100;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
element.textContent = Math.floor(current).toLocaleString('pt-BR');
}, 20);
}
function getStatusColor(status) {
switch (status) {
case 'pending': return '#fef3c7; color: #92400e';
case 'interview': return '#dbeafe; color: #1e40af';
case 'accepted': return '#dcfce7; color: #16a34a';
case 'rejected': return '#fee2e2; color: #dc2626';
default: return '#f3f4f6; color: #374151';
}
}
function getStatusText(status) {
switch (status) {
case 'pending': return 'Em Análise';
case 'interview': return 'Entrevista Agendada';
case 'accepted': return 'Aceito';
case 'rejected': return 'Não Selecionado';
default: return 'Desconhecido';
}
}
// Load saved data on page load
window.addEventListener('load', function() {
const savedUserApplications = localStorage.getItem('userApplications');
const savedJobsData = localStorage.getItem('savedJobs');
if (savedUserApplications) {
userApplications = JSON.parse(savedUserApplications);
}
if (savedJobsData) {
savedJobs = JSON.parse(savedJobsData);
}
});
// Profile form submission
document.getElementById('profileForm').addEventListener('submit', function(event) {
event.preventDefault();
if (currentUser) {
currentUser.name = document.getElementById('profileName').value;
currentUser.email = document.getElementById('profileEmail').value;
currentUser.phone = document.getElementById('profilePhone').value;
currentUser.location = document.getElementById('profileLocation').value;
currentUser.area = document.getElementById('profileArea').value;
localStorage.setItem('currentUser', JSON.stringify(currentUser));
showNotification('Perfil atualizado com sucesso!');
updateAuthButtons();
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>