206 lines
8.9 KiB
HTML
206 lines
8.9 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 - Connecting Talents with Opportunities</title>
|
|
<meta name="description" content="A multi-tenant recruiting platform for TSYS Group's various business lines">
|
|
|
|
<!-- Accessibility features -->
|
|
<meta name="theme-color" content="#2c3e50">
|
|
|
|
<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>Connecting talents with opportunities across TSYS Group</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">
|
|
<section class="hero">
|
|
<div class="card">
|
|
<h2>Welcome to MerchantsOfHope.org</h2>
|
|
<p>Our platform connects talented professionals with opportunities across TSYS Group's diverse business lines. Whether you're looking for your next career opportunity or seeking the perfect candidate, we provide a seamless, accessible experience for all users.</p>
|
|
|
|
<div class="actions">
|
|
<a href="/positions" class="btn btn-primary">Browse Job Positions</a>
|
|
<a href="/register" class="btn">Register as Job Seeker</a>
|
|
<a href="/register?role=provider" class="btn">Register as Job Provider</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<h2>Platform Features</h2>
|
|
|
|
<div class="card">
|
|
<h3>Multi-Tenant Architecture</h3>
|
|
<p>Each of TSYS Group's business lines operates as an independent tenant with complete data isolation, ensuring privacy and security across all operations.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Universal Access</h3>
|
|
<p>Our platform is designed with accessibility in mind, following WCAG 2.1 AA standards to ensure everyone can participate regardless of ability.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Secure Authentication</h3>
|
|
<p>Log in using your preferred method - local credentials, OIDC, or social media accounts - with enterprise-grade security measures in place.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="positions-preview">
|
|
<h2>Featured Positions</h2>
|
|
<div class="card">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Location</th>
|
|
<th>Type</th>
|
|
<th>Posted</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="positions-table-body">
|
|
<tr>
|
|
<td colspan="5">Loading positions...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a href="/positions" class="btn">View All Positions</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 MerchantsOfHope.org - A TSYS Group Initiative</p>
|
|
<p>Committed to accessibility, security, and excellence</p>
|
|
<p>
|
|
<a href="/accessibility" style="color: white; margin: 0 10px;">Accessibility Statement</a> |
|
|
<a href="/privacy" style="color: white; margin: 0 10px;">Privacy Policy</a> |
|
|
<a href="/terms" style="color: white; margin: 0 10px;">Terms of Service</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Accessible JavaScript functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load featured positions
|
|
loadFeaturedPositions();
|
|
|
|
// Set proper focus management
|
|
const mainContent = document.getElementById('main');
|
|
mainContent.setAttribute('tabindex', '-1');
|
|
|
|
// Focus main content when page loads
|
|
mainContent.focus();
|
|
|
|
// Form validation
|
|
const forms = document.querySelectorAll('form');
|
|
forms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Basic validation
|
|
let isValid = true;
|
|
const requiredFields = form.querySelectorAll('[required]');
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.classList.add('error');
|
|
|
|
// Create error message
|
|
const error = document.createElement('div');
|
|
error.className = 'alert alert-error';
|
|
error.textContent = `${field.name || 'This field'} is required`;
|
|
error.setAttribute('role', 'alert');
|
|
|
|
// Add to proper location
|
|
field.parentNode.insertBefore(error, field.nextSibling);
|
|
} else {
|
|
field.classList.remove('error');
|
|
|
|
// Remove any existing error messages
|
|
const existingErrors = field.parentNode.querySelectorAll('.alert-error');
|
|
existingErrors.forEach(err => err.remove());
|
|
}
|
|
});
|
|
|
|
if (isValid) {
|
|
// In a real app, you would submit the form here
|
|
alert('Form submitted successfully! (Demo)');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 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 = '';
|
|
});
|
|
});
|
|
});
|
|
|
|
function loadFeaturedPositions() {
|
|
// In a real app, this would fetch from the API
|
|
// For demo, we'll use sample data
|
|
const positions = [
|
|
{ title: "Senior Software Engineer", location: "Remote", type: "Full-time", posted: "2025-01-15" },
|
|
{ title: "DevOps Specialist", location: "Atlanta, GA", type: "Contract", posted: "2025-01-10" },
|
|
{ title: "Product Manager", location: "Remote", type: "Full-time", posted: "2025-01-05" },
|
|
{ title: "UX/UI Designer", location: "New York, NY", type: "Full-time", posted: "2025-01-01" }
|
|
];
|
|
|
|
const tbody = document.getElementById('positions-table-body');
|
|
tbody.innerHTML = '';
|
|
|
|
positions.forEach(position => {
|
|
const row = document.createElement('tr');
|
|
|
|
row.innerHTML = `
|
|
<td>${position.title}</td>
|
|
<td>${position.location}</td>
|
|
<td>${position.type}</td>
|
|
<td>${position.posted}</td>
|
|
<td>
|
|
<button class="btn" onclick="viewPosition('${position.title}')">View Details</button>
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function viewPosition(title) {
|
|
alert(`Viewing position: ${title}\n\nIn a real application, this would take you to the detailed position page.`);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |