the beginning of the idiots
This commit is contained in:
		
							
								
								
									
										206
									
								
								qwen/go/templates/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										206
									
								
								qwen/go/templates/index.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,206 @@
 | 
			
		||||
<!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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user