222 lines
10 KiB
HTML
222 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Browse Positions - MerchantsOfHope.org</title>
|
|
<meta name="description" content="Browse job positions on MerchantsOfHope.org">
|
|
|
|
<link rel="stylesheet" href="/static/css/accessibility.css">
|
|
</head>
|
|
<body>
|
|
<a href="#main" class="skip-link">Skip to main content</a>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<h1>MerchantsOfHope.org</h1>
|
|
<p>Browse Job Positions</p>
|
|
|
|
<nav aria-label="Main navigation">
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/positions">Browse Positions</a></li>
|
|
<li><a href="/apply">Apply</a></li>
|
|
<li><a href="/login">Login</a></li>
|
|
<li><a href="/register">Register</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<div class="container">
|
|
<h1>Available Positions</h1>
|
|
|
|
<div class="filter-section">
|
|
<h2>Filter Positions</h2>
|
|
<form id="filter-form">
|
|
<div class="form-group">
|
|
<label for="location">Location</label>
|
|
<input type="text" id="location" name="location" placeholder="e.g., Remote, New York, Atlanta">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="employment-type">Employment Type</label>
|
|
<select id="employment-type" name="employment_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>
|
|
|
|
<div class="form-group">
|
|
<label for="experience-level">Experience Level</label>
|
|
<select id="experience-level" name="experience_level">
|
|
<option value="">All Levels</option>
|
|
<option value="entry_level">Entry Level</option>
|
|
<option value="mid_level">Mid Level</option>
|
|
<option value="senior_level">Senior Level</option>
|
|
<option value="executive">Executive</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Apply Filters</button>
|
|
<button type="reset" class="btn">Clear Filters</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="positions-container">
|
|
<!-- Positions will be loaded here dynamically -->
|
|
<div class="position-card">
|
|
<div class="position-title">Senior Software Engineer</div>
|
|
<div class="position-meta">
|
|
<div>💰 $100,000 - $140,000</div>
|
|
<div>📍 Remote</div>
|
|
<div>🕒 Full-time</div>
|
|
<div>📊 Mid Level</div>
|
|
</div>
|
|
<p>Join our dynamic team building cutting-edge financial solutions. We're looking for an experienced software engineer with strong Go skills to help develop our next-generation platform.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="applyForPosition('Senior Software Engineer')">Apply Now</button>
|
|
<button class="btn" onclick="viewPositionDetails('Senior Software Engineer')">View Details</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-card">
|
|
<div class="position-title">DevOps Specialist</div>
|
|
<div class="position-meta">
|
|
<div>💰 $90,000 - $120,000</div>
|
|
<div>📍 Atlanta, GA</div>
|
|
<div>🕒 Contract</div>
|
|
<div>📊 Mid Level</div>
|
|
</div>
|
|
<p>Help us improve our deployment pipelines and infrastructure. We need a DevOps specialist to implement CI/CD solutions and ensure our systems are scalable and reliable.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="applyForPosition('DevOps Specialist')">Apply Now</button>
|
|
<button class="btn" onclick="viewPositionDetails('DevOps Specialist')">View Details</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-card">
|
|
<div class="position-title">Product Manager</div>
|
|
<div class="position-meta">
|
|
<div>💰 $95,000 - $130,000</div>
|
|
<div>📍 Remote</div>
|
|
<div>🕒 Full-time</div>
|
|
<div>📊 Senior Level</div>
|
|
</div>
|
|
<p>Lead product strategy and development for our merchant services platform. This role requires excellent communication skills and a deep understanding of the fintech industry.</p>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="applyForPosition('Product Manager')">Apply Now</button>
|
|
<button class="btn" onclick="viewPositionDetails('Product Manager')">View Details</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pagination" class="card">
|
|
<nav aria-label="Pagination">
|
|
<ul style="display: flex; list-style: none; gap: var(--spacing-small);">
|
|
<li><button class="btn" onclick="changePage(1)">First</button></li>
|
|
<li><button class="btn" onclick="changePage(currentPage - 1)" id="prev-btn">Previous</button></li>
|
|
<li><button class="btn" onclick="changePage(1)" aria-current="page" id="page-1">1</button></li>
|
|
<li><button class="btn" onclick="changePage(2)" id="page-2">2</button></li>
|
|
<li><button class="btn" onclick="changePage(3)" id="page-3">3</button></li>
|
|
<li><button class="btn" onclick="changePage(currentPage + 1)" id="next-btn">Next</button></li>
|
|
<li><button class="btn" onclick="changePage(10)">Last</button></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 MerchantsOfHope.org - A TSYS Group Initiative</p>
|
|
<p>Committed to accessibility, security, and excellence</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set proper focus management
|
|
const mainContent = document.getElementById('main');
|
|
mainContent.setAttribute('tabindex', '-1');
|
|
mainContent.focus();
|
|
|
|
// Filter form submission
|
|
const filterForm = document.getElementById('filter-form');
|
|
filterForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
applyFilters();
|
|
});
|
|
|
|
// Ensure all interactive elements have proper focus management
|
|
const interactiveElements = document.querySelectorAll('a, button, input, select, textarea');
|
|
interactiveElements.forEach(el => {
|
|
el.addEventListener('focus', function() {
|
|
this.style.outline = '2px solid var(--secondary-color)';
|
|
this.style.outlineOffset = '2px';
|
|
});
|
|
|
|
el.addEventListener('blur', function() {
|
|
this.style.outline = '';
|
|
});
|
|
});
|
|
});
|
|
|
|
let currentPage = 1;
|
|
|
|
function applyFilters() {
|
|
// In a real app, this would update the position list based on filters
|
|
alert('Filters applied! In a real application, this would update the position listings.');
|
|
}
|
|
|
|
function applyForPosition(title) {
|
|
// Check if user is logged in
|
|
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
|
|
|
|
if (!isLoggedIn) {
|
|
alert('Please log in to apply for positions.');
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
alert(`Applying for position: ${title}\n\nIn a real application, this would take you to the application form.`);
|
|
}
|
|
|
|
function viewPositionDetails(title) {
|
|
alert(`Viewing details for position: ${title}\n\nIn a real application, this would show comprehensive details about the position.`);
|
|
}
|
|
|
|
function changePage(page) {
|
|
if (page < 1) page = 1;
|
|
if (page > 10) page = 10;
|
|
|
|
currentPage = page;
|
|
updatePagination();
|
|
|
|
// In a real app, this would load the new page of positions
|
|
alert(`Loading page ${page} of positions`);
|
|
}
|
|
|
|
function updatePagination() {
|
|
document.getElementById('prev-btn').disabled = (currentPage === 1);
|
|
document.getElementById('next-btn').disabled = (currentPage === 10);
|
|
|
|
// Update page number buttons to show current page
|
|
for (let i = 1; i <= 3; i++) {
|
|
const pageBtn = document.getElementById(`page-${i}`);
|
|
if (i === currentPage) {
|
|
pageBtn.setAttribute('aria-current', 'page');
|
|
pageBtn.style.backgroundColor = 'var(--primary-color)';
|
|
} else {
|
|
pageBtn.removeAttribute('aria-current');
|
|
pageBtn.style.backgroundColor = 'var(--secondary-color)';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |