1114 lines
43 KiB
HTML
1114 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MerchantsOfHope.org - Recruiting Platform</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<style>
|
|
:root {
|
|
--primary-color: #0072ce;
|
|
--secondary-color: #f5f5f5;
|
|
--text-color: #333;
|
|
--text-light: #fff;
|
|
--border-color: #ccc;
|
|
--focus-color: #0056b3;
|
|
--success-color: #28a745;
|
|
--danger-color: #dc3545;
|
|
--warning-color: #ffc107;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--primary-color);
|
|
color: var(--text-light);
|
|
padding: 1rem 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
nav a {
|
|
color: var(--text-light);
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
nav a:hover, nav a.active {
|
|
background-color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--focus-color);
|
|
}
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 1px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: var(--success-color);
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: var(--danger-color);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
}
|
|
|
|
main {
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 3rem 0;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
color: #666;
|
|
}
|
|
|
|
.search-form {
|
|
max-width: 600px;
|
|
margin: 0 auto 2rem;
|
|
background-color: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
outline: 2px solid var(--focus-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tab {
|
|
padding: 1rem 2rem;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
}
|
|
|
|
.tab.active {
|
|
border-bottom: 3px solid var(--primary-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.job-card {
|
|
background-color: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.job-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.job-card h3 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.job-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.salary {
|
|
color: var(--success-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.close {
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
color: white;
|
|
z-index: 2000;
|
|
display: none;
|
|
}
|
|
|
|
.notification.success {
|
|
background-color: var(--success-color);
|
|
}
|
|
|
|
.notification.error {
|
|
background-color: var(--danger-color);
|
|
}
|
|
|
|
footer {
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 2rem 0;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dashboard-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.dashboard-card h3 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
nav ul {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero h2 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="notification" class="notification"></div>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<h1>MerchantsOfHope.org</h1>
|
|
<p>Connecting talent with opportunity</p>
|
|
</div>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#" class="nav-link active" data-page="home">Home</a></li>
|
|
<li><a href="#" class="nav-link" data-page="jobs">Jobs</a></li>
|
|
<li><a href="#" class="nav-link" data-page="dashboard">Dashboard</a></li>
|
|
<li><a href="#" class="nav-link" data-page="about">About</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="user-menu">
|
|
<button id="login-btn" class="btn btn-outline">Login</button>
|
|
<button id="signup-btn" class="btn">Sign Up</button>
|
|
<div id="user-info" style="display: none;">
|
|
<span id="user-name"></span>
|
|
<button id="logout-btn" class="btn btn-outline">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container">
|
|
<!-- Home Page -->
|
|
<div id="home-page" class="page active">
|
|
<div class="hero">
|
|
<h2>Find Your Dream Job Today</h2>
|
|
<p>Explore thousands of opportunities from top companies in the financial services industry</p>
|
|
<button id="cta-button" class="btn" style="font-size: 1.2rem; padding: 1rem 2rem;">
|
|
Browse Jobs Now
|
|
</button>
|
|
</div>
|
|
|
|
<div class="search-form">
|
|
<h3 style="text-align: center; margin-bottom: 1.5rem;">Search Jobs</h3>
|
|
<form id="job-search-form">
|
|
<div class="form-group">
|
|
<label for="search-keyword">Keywords</label>
|
|
<input type="text" id="search-keyword" placeholder="Job title, skills, or company">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="search-location">Location</label>
|
|
<input type="text" id="search-location" placeholder="City, state, or remote">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="search-type">Job Type</label>
|
|
<select id="search-type">
|
|
<option value="">All Types</option>
|
|
<option value="full_time">Full Time</option>
|
|
<option value="part_time">Part Time</option>
|
|
<option value="contract">Contract</option>
|
|
<option value="internship">Internship</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" style="width: 100%;">
|
|
<i class="fas fa-search"></i> Search Jobs
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jobs Page -->
|
|
<div id="jobs-page" class="page" style="display: none;">
|
|
<h2>Browse Job Opportunities</h2>
|
|
<p>Discover career opportunities that match your skills and interests</p>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="all">All Jobs</div>
|
|
<div class="tab" data-tab="featured">Featured</div>
|
|
<div class="tab" data-tab="remote">Remote</div>
|
|
</div>
|
|
|
|
<div id="job-listings-container">
|
|
<div id="job-listings">
|
|
<!-- Job listings will be populated here by JavaScript -->
|
|
<p>Loading job listings...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Page -->
|
|
<div id="dashboard-page" class="page" style="display: none;">
|
|
<h2>Dashboard</h2>
|
|
<p>Welcome back! Manage your job applications and postings</p>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" data-dashboard-tab="overview">Overview</div>
|
|
<div class="tab" data-dashboard-tab="applications">My Applications</div>
|
|
<div class="tab" data-dashboard-tab="postings">My Postings</div>
|
|
<div class="tab" data-dashboard-tab="create">Post Job</div>
|
|
</div>
|
|
|
|
<div class="tab-content active" id="overview-tab">
|
|
<div class="dashboard-grid">
|
|
<div class="dashboard-card">
|
|
<h3><i class="fas fa-briefcase"></i> Active Applications</h3>
|
|
<p id="active-applications-count">0</p>
|
|
<p>Pending responses</p>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<h3><i class="fas fa-file-alt"></i> Saved Jobs</h3>
|
|
<p id="saved-jobs-count">0</p>
|
|
<p>Jobs you've saved</p>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<h3><i class="fas fa-building"></i> Job Postings</h3>
|
|
<p id="job-postings-count">0</p>
|
|
<p>Active positions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Recent Activity</h3>
|
|
<div id="recent-activity">
|
|
<p>No recent activity to display</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="applications-tab">
|
|
<h3>My Job Applications</h3>
|
|
<div id="my-applications-list">
|
|
<p>Loading your applications...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="postings-tab">
|
|
<h3>My Job Postings</h3>
|
|
<div id="my-job-postings">
|
|
<p>Loading your job postings...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="create-tab">
|
|
<h3>Create New Job Posting</h3>
|
|
<form id="create-job-form">
|
|
<div class="form-group">
|
|
<label for="job-title">Job Title *</label>
|
|
<input type="text" id="job-title" required placeholder="e.g., Software Engineer">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="job-description">Description *</label>
|
|
<textarea id="job-description" rows="5" required placeholder="Provide details about the role, responsibilities, and requirements"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
<div class="form-group">
|
|
<label for="job-location">Location</label>
|
|
<input type="text" id="job-location" placeholder="e.g., New York, NY or Remote">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="job-type">Employment Type</label>
|
|
<select id="job-type">
|
|
<option value="full_time">Full Time</option>
|
|
<option value="part_time">Part Time</option>
|
|
<option value="contract">Contract</option>
|
|
<option value="internship">Internship</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
<div class="form-group">
|
|
<label for="job-salary-min">Minimum Salary ($)</label>
|
|
<input type="number" id="job-salary-min" placeholder="e.g., 80000">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="job-salary-max">Maximum Salary ($)</label>
|
|
<input type="number" id="job-salary-max" placeholder="e.g., 120000">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">
|
|
<i class="fas fa-plus-circle"></i> Post Job
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About Page -->
|
|
<div id="about-page" class="page" style="display: none;">
|
|
<h2>About MerchantsOfHope.org</h2>
|
|
<p>Connecting talent with opportunity in the financial services industry</p>
|
|
|
|
<div style="background: white; padding: 2rem; border-radius: 8px; margin: 2rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
|
|
<h3>Our Mission</h3>
|
|
<p>MerchantsOfHope.org is dedicated to connecting talented professionals with meaningful career opportunities in the financial services industry. We believe that everyone deserves access to fair employment opportunities regardless of their background.</p>
|
|
|
|
<h3 style="margin-top: 2rem;">Commitment to Accessibility</h3>
|
|
<p>We are committed to ensuring our platform is accessible to all users, including those with disabilities. Our platform complies with WCAG 2.1 AA standards and Section 508 requirements.</p>
|
|
|
|
<h3 style="margin-top: 2rem;">Equal Opportunity Employment</h3>
|
|
<p>We are an equal opportunity employer and strongly support diversity in the workplace. All employment decisions are based on qualifications, merit, and business needs without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, age, disability, or any other protected status.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Login Modal -->
|
|
<div id="login-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Login to Your Account</h3>
|
|
<button class="close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="login-email">Email *</label>
|
|
<input type="email" id="login-email" required placeholder="your@email.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="login-password">Password *</label>
|
|
<input type="password" id="login-password" required placeholder="••••••••">
|
|
</div>
|
|
|
|
<button type="submit" class="btn" style="width: 100%;">
|
|
<i class="fas fa-sign-in-alt"></i> Login
|
|
</button>
|
|
</form>
|
|
|
|
<div style="margin-top: 1.5rem; text-align: center;">
|
|
<p>Or login with:</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; margin-top: 1rem;">
|
|
<button class="btn btn-outline">
|
|
<i class="fab fa-google"></i> Google
|
|
</button>
|
|
<button class="btn btn-outline">
|
|
<i class="fab fa-facebook"></i> Facebook
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<p>Don't have an account? <a href="#" id="signup-link">Sign up</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Signup Modal -->
|
|
<div id="signup-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Create Account</h3>
|
|
<button class="close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="signup-form">
|
|
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
<div class="form-group">
|
|
<label for="signup-first-name">First Name *</label>
|
|
<input type="text" id="signup-first-name" required placeholder="John">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="signup-last-name">Last Name *</label>
|
|
<input type="text" id="signup-last-name" required placeholder="Doe">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="signup-email">Email *</label>
|
|
<input type="email" id="signup-email" required placeholder="your@email.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="signup-password">Password *</label>
|
|
<input type="password" id="signup-password" required placeholder="••••••••">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="signup-confirm-password">Confirm Password *</label>
|
|
<input type="password" id="signup-confirm-password" required placeholder="••••••••">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="signup-terms" required>
|
|
I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" style="width: 100%;">
|
|
<i class="fas fa-user-plus"></i> Create Account
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<p>Already have an account? <a href="#" id="login-link">Login</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Job Detail Modal -->
|
|
<div id="job-detail-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="job-detail-title">Job Details</h3>
|
|
<button class="close">×</button>
|
|
</div>
|
|
<div class="modal-body" id="job-detail-content">
|
|
<p>Loading job details...</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="apply-job-btn" class="btn">
|
|
<i class="fas fa-paper-plane"></i> Apply for This Job
|
|
</button>
|
|
<button class="btn btn-outline" id="save-job-btn">
|
|
<i class="fas fa-bookmark"></i> Save Job
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">
|
|
<div>
|
|
<h4>MerchantsOfHope.org</h4>
|
|
<p>Connecting talent with opportunity in financial services</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>For Job Seekers</h4>
|
|
<ul style="list-style: none;">
|
|
<li><a href="#" style="color: white; text-decoration: none;">Browse Jobs</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Career Advice</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Resume Builder</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>For Employers</h4>
|
|
<ul style="list-style: none;">
|
|
<li><a href="#" style="color: white; text-decoration: none;">Post Jobs</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Search Resumes</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Legal</h4>
|
|
<ul style="list-style: none;">
|
|
<li><a href="#" style="color: white; text-decoration: none;">Privacy Policy</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Terms of Service</a></li>
|
|
<li><a href="#" style="color: white; text-decoration: none;">Accessibility</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #555; text-align: center;">
|
|
<p>© 2025 MerchantsOfHope.org. All rights reserved.</p>
|
|
<p>Committed to accessibility and equal opportunity employment.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Global state
|
|
let currentUser = null;
|
|
let currentJobId = null;
|
|
|
|
// DOM Elements
|
|
const pages = {
|
|
home: document.getElementById('home-page'),
|
|
jobs: document.getElementById('jobs-page'),
|
|
dashboard: document.getElementById('dashboard-page'),
|
|
about: document.getElementById('about-page')
|
|
};
|
|
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const loginBtn = document.getElementById('login-btn');
|
|
const signupBtn = document.getElementById('signup-btn');
|
|
const logoutBtn = document.getElementById('logout-btn');
|
|
const userInfo = document.getElementById('user-info');
|
|
const userName = document.getElementById('user-name');
|
|
const notification = document.getElementById('notification');
|
|
|
|
// Modals
|
|
const loginModal = document.getElementById('login-modal');
|
|
const signupModal = document.getElementById('signup-modal');
|
|
const jobDetailModal = document.getElementById('job-detail-modal');
|
|
const closeButtons = document.querySelectorAll('.close');
|
|
|
|
// Forms
|
|
const jobSearchForm = document.getElementById('job-search-form');
|
|
const loginForm = document.getElementById('login-form');
|
|
const signupForm = document.getElementById('signup-form');
|
|
const createJobForm = document.getElementById('create-job-form');
|
|
|
|
// Event Listeners
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize the application
|
|
initApp();
|
|
|
|
// Load job listings
|
|
loadJobListings();
|
|
});
|
|
|
|
function initApp() {
|
|
// Navigation
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const page = this.getAttribute('data-page');
|
|
showPage(page);
|
|
});
|
|
});
|
|
|
|
// Button events
|
|
loginBtn.addEventListener('click', () => showModal(loginModal));
|
|
signupBtn.addEventListener('click', () => showModal(signupModal));
|
|
logoutBtn.addEventListener('click', logout);
|
|
|
|
// Modal close buttons
|
|
closeButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
hideAllModals();
|
|
});
|
|
});
|
|
|
|
// Click outside modal to close
|
|
window.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal')) {
|
|
hideAllModals();
|
|
}
|
|
});
|
|
|
|
// Form submissions
|
|
jobSearchForm.addEventListener('submit', handleJobSearch);
|
|
loginForm.addEventListener('submit', handleLogin);
|
|
signupForm.addEventListener('submit', handleSignup);
|
|
createJobForm.addEventListener('submit', handleCreateJob);
|
|
|
|
// Tab navigation
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// Remove active class from siblings
|
|
this.parentElement.querySelectorAll('.tab').forEach(t => {
|
|
t.classList.remove('active');
|
|
});
|
|
|
|
// Add active class to clicked tab
|
|
this.classList.add('active');
|
|
|
|
// Show corresponding content (for dashboard tabs)
|
|
const tabName = this.getAttribute('data-dashboard-tab');
|
|
if (tabName) {
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(`${tabName}-tab`).classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// CTA button
|
|
document.getElementById('cta-button').addEventListener('click', function() {
|
|
showPage('jobs');
|
|
});
|
|
|
|
// Modal navigation links
|
|
document.getElementById('signup-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
hideModal(loginModal);
|
|
showModal(signupModal);
|
|
});
|
|
|
|
document.getElementById('login-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
hideModal(signupModal);
|
|
showModal(loginModal);
|
|
});
|
|
|
|
// Apply button
|
|
document.getElementById('apply-job-btn').addEventListener('click', handleJobApplication);
|
|
}
|
|
|
|
function showPage(pageName) {
|
|
// Hide all pages
|
|
Object.values(pages).forEach(page => {
|
|
page.style.display = 'none';
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// Show requested page
|
|
const pageElement = document.getElementById(`${pageName}-page`);
|
|
if (pageElement) {
|
|
pageElement.style.display = 'block';
|
|
pageElement.classList.add('active');
|
|
}
|
|
|
|
// Update active nav link
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('data-page') === pageName) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
function showModal(modal) {
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function hideModal(modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
|
|
function hideAllModals() {
|
|
document.querySelectorAll('.modal').forEach(modal => {
|
|
modal.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function showNotification(message, type = 'success') {
|
|
notification.textContent = message;
|
|
notification.className = `notification ${type}`;
|
|
notification.style.display = 'block';
|
|
|
|
setTimeout(() => {
|
|
notification.style.display = 'none';
|
|
}, 5000);
|
|
}
|
|
|
|
function loadJobListings() {
|
|
fetch('/positions')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const container = document.getElementById('job-listings');
|
|
container.innerHTML = '';
|
|
|
|
if (data.positions && data.positions.length > 0) {
|
|
data.positions.forEach(position => {
|
|
const jobCard = createJobCard(position);
|
|
container.appendChild(jobCard);
|
|
});
|
|
} else {
|
|
container.innerHTML = '<p>No job positions available at this time. Please check back later.</p>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading job listings:', error);
|
|
document.getElementById('job-listings').innerHTML =
|
|
'<p>Error loading job listings. Please try again later.</p>';
|
|
});
|
|
}
|
|
|
|
function createJobCard(position) {
|
|
const jobCard = document.createElement('div');
|
|
jobCard.className = 'job-card';
|
|
jobCard.innerHTML = `
|
|
<h3>${position.title || 'Untitled Position'}</h3>
|
|
<div class="job-meta">
|
|
<span><i class="fas fa-building"></i> ${position.company || 'TSYS Group'}</span>
|
|
<span><i class="fas fa-map-marker-alt"></i> ${position.location || 'Location not specified'}</span>
|
|
</div>
|
|
<div class="job-meta">
|
|
<span><i class="fas fa-clock"></i> ${position.employment_type?.replace('_', ' ') || 'Full Time'}</span>
|
|
${position.salary_min ? `<span class="salary"><i class="fas fa-dollar-sign"></i> $${parseInt(position.salary_min).toLocaleString()} - $${parseInt(position.salary_max).toLocaleString()}</span>` : ''}
|
|
</div>
|
|
<p>${position.description || 'No description available.'}</p>
|
|
<button class="btn" onclick="showJobDetails('${position.id}')">
|
|
<i class="fas fa-eye"></i> View Details
|
|
</button>
|
|
`;
|
|
return jobCard;
|
|
}
|
|
|
|
function showJobDetails(jobId) {
|
|
currentJobId = jobId;
|
|
|
|
// In a real app, we would fetch job details from the API
|
|
// For now, we'll simulate with static data
|
|
const jobDetailContent = document.getElementById('job-detail-content');
|
|
jobDetailContent.innerHTML = `
|
|
<h4>Software Engineer</h4>
|
|
<div class="job-meta">
|
|
<span><i class="fas fa-building"></i> TSYS Group</span>
|
|
<span><i class="fas fa-map-marker-alt"></i> New York, NY</span>
|
|
</div>
|
|
<div class="job-meta">
|
|
<span><i class="fas fa-clock"></i> Full Time</span>
|
|
<span class="salary"><i class="fas fa-dollar-sign"></i> $80,000 - $120,000</span>
|
|
</div>
|
|
|
|
<h5 style="margin-top: 1.5rem;">Job Description</h5>
|
|
<p>Join our team of talented engineers building cutting-edge financial technology solutions. You'll work on mission-critical systems that process millions of transactions daily.</p>
|
|
|
|
<h5 style="margin-top: 1.5rem;">Responsibilities</h5>
|
|
<ul>
|
|
<li>Design, develop, and maintain scalable financial applications</li>
|
|
<li>Collaborate with cross-functional teams to deliver high-quality software</li>
|
|
<li>Participate in code reviews and technical design discussions</li>
|
|
<li>Troubleshoot and resolve production issues</li>
|
|
<li>Contribute to continuous improvement initiatives</li>
|
|
</ul>
|
|
|
|
<h5 style="margin-top: 1.5rem;">Requirements</h5>
|
|
<ul>
|
|
<li>Bachelor's degree in Computer Science or related field</li>
|
|
<li>3+ years of experience in software development</li>
|
|
<li>Proficiency in PHP, JavaScript, and SQL</li>
|
|
<li>Experience with modern frameworks and tools</li>
|
|
<li>Strong problem-solving and analytical skills</li>
|
|
</ul>
|
|
|
|
<h5 style="margin-top: 1.5rem;">Benefits</h5>
|
|
<ul>
|
|
<li>Competitive salary and bonus structure</li>
|
|
<li>Comprehensive health insurance</li>
|
|
<li>401(k) with company match</li>
|
|
<li>Flexible work arrangements</li>
|
|
<li>Professional development opportunities</li>
|
|
</ul>
|
|
`;
|
|
|
|
document.getElementById('job-detail-title').textContent = 'Software Engineer';
|
|
showModal(jobDetailModal);
|
|
}
|
|
|
|
function handleJobSearch(e) {
|
|
e.preventDefault();
|
|
const keyword = document.getElementById('search-keyword').value;
|
|
const location = document.getElementById('search-location').value;
|
|
const type = document.getElementById('search-type').value;
|
|
|
|
// In a real app, we would filter job listings based on these criteria
|
|
showNotification('Job search functionality would filter results based on your criteria.');
|
|
}
|
|
|
|
function handleLogin(e) {
|
|
e.preventDefault();
|
|
|
|
// Simulate login
|
|
const email = document.getElementById('login-email').value;
|
|
const password = document.getElementById('login-password').value;
|
|
|
|
// In a real app, we would authenticate with the API
|
|
currentUser = {
|
|
id: 'user-' + Date.now(),
|
|
email: email,
|
|
firstName: email.split('@')[0],
|
|
lastName: 'User',
|
|
role: 'job_seeker'
|
|
};
|
|
|
|
updateUIForLogin();
|
|
hideModal(loginModal);
|
|
showNotification('Welcome back! You have been logged in successfully.');
|
|
}
|
|
|
|
function handleSignup(e) {
|
|
e.preventDefault();
|
|
|
|
// Simulate signup
|
|
const firstName = document.getElementById('signup-first-name').value;
|
|
const lastName = document.getElementById('signup-last-name').value;
|
|
const email = document.getElementById('signup-email').value;
|
|
const password = document.getElementById('signup-password').value;
|
|
const confirmPassword = document.getElementById('signup-confirm-password').value;
|
|
|
|
if (password !== confirmPassword) {
|
|
showNotification('Passwords do not match.', 'error');
|
|
return;
|
|
}
|
|
|
|
// In a real app, we would register with the API
|
|
currentUser = {
|
|
id: 'user-' + Date.now(),
|
|
email: email,
|
|
firstName: firstName,
|
|
lastName: lastName,
|
|
role: 'job_seeker'
|
|
};
|
|
|
|
updateUIForLogin();
|
|
hideModal(signupModal);
|
|
showNotification('Account created successfully! Welcome to MerchantsOfHope.org.');
|
|
}
|
|
|
|
function logout() {
|
|
currentUser = null;
|
|
updateUIForLogout();
|
|
showNotification('You have been logged out successfully.');
|
|
}
|
|
|
|
function updateUIForLogin() {
|
|
if (currentUser) {
|
|
loginBtn.style.display = 'none';
|
|
signupBtn.style.display = 'none';
|
|
userInfo.style.display = 'flex';
|
|
userName.textContent = `${currentUser.firstName} ${currentUser.lastName}`;
|
|
}
|
|
}
|
|
|
|
function updateUIForLogout() {
|
|
loginBtn.style.display = 'inline-block';
|
|
signupBtn.style.display = 'inline-block';
|
|
userInfo.style.display = 'none';
|
|
}
|
|
|
|
function handleCreateJob(e) {
|
|
e.preventDefault();
|
|
|
|
if (!currentUser) {
|
|
showNotification('Please login to create job postings.', 'error');
|
|
showModal(loginModal);
|
|
return;
|
|
}
|
|
|
|
// Simulate job creation
|
|
const title = document.getElementById('job-title').value;
|
|
const description = document.getElementById('job-description').value;
|
|
|
|
if (!title || !description) {
|
|
showNotification('Please fill in all required fields.', 'error');
|
|
return;
|
|
}
|
|
|
|
// In a real app, we would post to the API
|
|
showNotification('Job posting created successfully!');
|
|
createJobForm.reset();
|
|
|
|
// Refresh job listings
|
|
loadJobListings();
|
|
}
|
|
|
|
function handleJobApplication() {
|
|
if (!currentUser) {
|
|
showNotification('Please login to apply for jobs.', 'error');
|
|
hideModal(jobDetailModal);
|
|
showModal(loginModal);
|
|
return;
|
|
}
|
|
|
|
// Simulate job application
|
|
showNotification('Your application has been submitted successfully!');
|
|
hideModal(jobDetailModal);
|
|
}
|
|
|
|
// Initialize with some mock data for demonstration
|
|
window.createJobCard = createJobCard;
|
|
window.showJobDetails = showJobDetails;
|
|
</script>
|
|
</body>
|
|
</html> |