<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JobShield AI | Secure Your Career</title>
<link rel="stylesheet" href="/static/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/app.js" defer></script>
</head>
<body>
<header class="navbar">
<a href="#" class="logo">⬡ JobShield <span>AI</span></a>
<nav>
<a href="#verify">Verify Jobs</a>
<a href="#resume">Resume AI</a>
<a href="#jobs">Job Matcher</a>
<a href="#skills">Learn Skills</a>
<a href="#dashboard">Dashboard</a>
</nav>
<button class="login-btn" onclick="openAuth()">
Login / Register
</button>
</header>
<section class="hero">
<div class="hero-content">
<span class="badge">✦ AI-POWERED CAREER SECURITY</span>
<h1>
Protect Your Career.<br>
<span>Power Your Future.</span>
</h1>
<p>
Verify suspicious job offers, analyze your resume,
discover career opportunities, and build the skills
you need to succeed.
</p>
<div class="hero-buttons">
<a href="#verify" class="primary-btn">Verify a Job ↗</a>
<a href="#resume" class="secondary-btn">Analyze Resume</a>
</div>
<div class="hero-features">
<span>✓ Job Safety</span>
<span>✓ Resume Analysis</span>
<span>✓ Career Growth</span>
</div>
</div>
<div class="hero-visual">
<div class="orbit orbit-one"></div>
<div class="orbit orbit-two"></div>
<div class="shield">
<svg viewBox="0 0 120 140" aria-label="Security shield">
<path d="M60 5 L110 25 V65
C110 95 90 120 60 135
C30 120 10 95 10 65 V25 Z"
fill="none"
stroke="#55f5ff"
stroke-width="4"/>
<path d="M35 70 L52 87 L85 48"
fill="none"
stroke="#55f5ff"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</div>
<div class="floating-card card-top">
<span>🛡️</span>
<div>
<strong>Career Protection</strong>
<small>Evidence-based screening</small>
</div>
</div>
<div class="floating-card card-bottom">
<span>✨</span>
<div>
<strong>Skill Intelligence</strong>
<small>Build your future</small>
</div>
</div>
</div>
</section>
<section class="statistics" id="dashboard">
<div class="stat-card">
<span>🔍</span>
<p>Jobs Checked</p>
<h2 id="jobChecks">0</h2>
</div>
<div class="stat-card">
<span>📄</span>
<p>Resumes Analyzed</p>
<h2 id="resumeChecks">0</h2>
</div>
<div class="stat-card">
<span>🎯</span>
<p>Saved Jobs</p>
<h2 id="savedJobs">0</h2>
</div>
<div class="stat-card">
<span>📚</span>
<p>Courses Completed</p>
<h2 id="completedCourses">0</h2>
</div>
</section>
<section class="section" id="verify">
<div class="section-heading">
<span class="section-label">MODULE 01</span>
<h2>Company <span>Verification</span></h2>
<p>Examine job details and identify potential warning signs.</p>
</div>
<div class="panel verification-panel">
<form id="verificationForm">
<div class="form-grid">
<label>
Company Name
<input type="text" name="company"
placeholder="Enter company name" required>
</label>
<label>
Company Website
<input type="url" name="website"
placeholder="https://company.com">
</label>
<label>
Job Advertisement URL
<input type="url" name="ad_url"
placeholder="https://job-listing.com">
</label>
<label>
Recruiter Email
<input type="email" name="recruiter_email"
placeholder="recruiter@company.com">
</label>
<label class="full-width">
Job Description
<textarea name="description" rows="4"
placeholder="Paste the job description here"></textarea>
</label>
</div>
<button type="submit" class="primary-btn">
Analyze Job Security →
</button>
</form>
<div id="verificationResult" class="result-box">
<div class="result-icon">🛡️</div>
<h3>Your Verification Report</h3>
<p>Your screening results will appear here.</p>
</div>
</div>
</section>
<section class="section" id="resume">
<div class="section-heading">
<span class="section-label">MODULE 02</span>
<h2>AI Resume <span>Analyzer</span></h2>
<p>Identify your skills and discover opportunities to improve.</p>
</div>
<div class="panel">
<form id="resumeForm">
<label class="upload-box">
<span class="upload-icon">📄</span>
<strong>Choose Your Resume</strong>
<p>Upload a PDF or DOCX file. Maximum size: 5 MB.</p>
<input type="file" name="resume"
accept=".pdf,.docx" required>
</label>
<button type="submit" class="primary-btn">
Analyze My Resume →
</button>
</form>
<div id="resumeResult"></div>
</div>
</section>
<section class="section" id="jobs">
<div class="section-heading">
<span class="section-label">MODULE 03</span>
<h2>Career <span>Job Matcher</span></h2>
<p>Explore entry-level career paths and their typical skill requirements.</p>
</div>
<div class="job-grid">
<article class="job-card">
<span class="job-icon">🛡️</span>
<h3>SOC Analyst</h3>
<p>Networking, Linux, SIEM, incident response.</p>
<button class="outline-btn"
onclick="saveJob('SOC Analyst')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">🔐</span>
<h3>Cybersecurity Analyst</h3>
<p>Security monitoring, risk assessment, Python.</p>
<button class="outline-btn"
onclick="saveJob('Cybersecurity Analyst')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">💻</span>
<h3>Web Developer</h3>
<p>HTML, CSS, JavaScript, responsive design.</p>
<button class="outline-btn"
onclick="saveJob('Web Developer')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">📊</span>
<h3>Data Analyst</h3>
<p>SQL, Excel, Python, data visualization.</p>
<button class="outline-btn"
onclick="saveJob('Data Analyst')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">🧪</span>
<h3>Junior Penetration Tester</h3>
<p>Nmap, Burp Suite, OWASP, Linux.</p>
<button class="outline-btn"
onclick="saveJob('Junior Penetration Tester')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">🎓</span>
<h3>Security Intern</h3>
<p>Networking, vulnerability assessment, security basics.</p>
<button class="outline-btn"
onclick="saveJob('Security Intern')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">🖥️</span>
<h3>IT Support Engineer</h3>
<p>Troubleshooting, networking, operating systems.</p>
<button class="outline-btn"
onclick="saveJob('IT Support Engineer')">
+ Save Role
</button>
</article>
<article class="job-card">
<span class="job-icon">⚙️</span>
<h3>Software Developer</h3>
<p>Programming, Git, problem-solving, databases.</p>
<button class="outline-btn"
onclick="saveJob('Software Developer')">
+ Save Role
</button>
</article>
</div>
<p class="notice">
These are illustrative role cards, not real job vacancies.
Live listings require a configured job data provider.
</p>
</section>
<section class="section" id="skills">
<div class="section-heading">
<span class="section-label">MODULE 04</span>
<h2>Skill <span>Development</span></h2>
<p>Explore learning platforms and track your career development.</p>
</div>
<div class="course-grid">
<article class="course-card">
<h3>Cisco Networking Academy</h3>
<p>Networking and cybersecurity fundamentals.</p>
<a href="https://www.netacad.com/"
target="_blank" rel="noopener noreferrer">
Explore Courses ↗
</a>
<button onclick="completeCourse(this)">
Mark Completed
</button>
</article>
<article class="course-card">
<h3>Microsoft Learn</h3>
<p>Explore technical learning paths and modules.</p>
<a href="https://learn.microsoft.com/training/"
target="_blank" rel="noopener noreferrer">
Explore Courses ↗
</a>
<button onclick="completeCourse(this)">
Mark Completed
</button>
</article>
<article class="course-card">
<h3>freeCodeCamp</h3>
<p>Practice programming and web development.</p>
<a href="https://www.freecodecamp.org/learn/"
target="_blank" rel="noopener noreferrer">
Explore Courses ↗
</a>
<button onclick="completeCourse(this)">
Mark Completed
</button>
</article>
<article class="course-card">
<h3>TryHackMe</h3>
<p>Practice cybersecurity skills in learning labs.</p>
<a href="https://tryhackme.com/"
target="_blank" rel="noopener noreferrer">
Explore Courses ↗
</a>
<button onclick="completeCourse(this)">
Mark Completed
</button>
</article>
</div>
</section>
<section class="section" id="alerts">
<div class="section-heading">
<span class="section-label">MODULE 05</span>
<h2>Fraud <span>Alerts</span></h2>
<p>Explore alert channels. External delivery requires provider configuration.</p>
</div>
<div class="panel alert-panel">
<div>
<h3>Stay alert. Stay protected.</h3>
<p>Test the demonstration alert interface.</p>
</div>
<button class="outline-btn" onclick="testAlert('website')">
Website Alert
</button>
<button class="outline-btn" onclick="testAlert('sms')">
SMS Demo
</button>
<button class="outline-btn" onclick="testAlert('whatsapp')">
WhatsApp Demo
</button>
<p id="alertResult" aria-live="polite"></p>
</div>
</section>
<section class="section">
<div class="section-heading">
<span class="section-label">MODULE 06</span>
<h2>Your Career <span>Dashboard</span></h2>
<p>Visualize your career activity.</p>
</div>
<div class="panel chart-panel">
<canvas id="careerChart"></canvas>
</div>
</section>
<footer>
<a href="#" class="logo">⬡ JobShield <span>AI</span></a>
<p>Verify the Job. Build Your Skills. Secure Your Future.</p>
<small>
Preliminary screening is not official verification or a guarantee
that a job is safe.
</small>
</footer>
<div id="authModal" class="modal hidden">
<div class="modal-content">
<button class="close-btn" onclick="closeAuth()">×</button>
<h2>Welcome to <span>JobShield AI</span></h2>
<div class="auth-tabs">
<button onclick="setAuthMode('login')">Login</button>
<button onclick="setAuthMode('register')">Register</button>
</div>
<form id="authForm">
<label id="nameLabel" class="hidden">
Full Name
<input type="text" name="name">
</label>
<label>
Email
<input type="email" name="email" required>
</label>
<label>
Password
<input type="password" name="password"
minlength="10" required>
</label>
<button class="primary-btn" type="submit">
Continue Securely
</button>
</form>
<p id="authMessage" aria-live="polite"></p>
</div>
</div>
<div id="toast" class="toast" role="status"></div>
</body>
</html>