document.addEventListener('DOMContentLoaded', () => { const app = document.getElementById('app'); let currentPage = 'home'; let selectedMission = null; let searchTerm = ''; let selectedPassions = ['all']; let favorites = []; let showApplicationForm = false; let formData = { name: '', email: '', message: '' }; const passions = [ { id: 'all', label: 'Toutes', emoji: '✨' }, { id: 'sustainability', label: 'Durabilité', emoji: '🌱' }, { id: 'innovation', label: 'Innovation', emoji: '🚀' }, { id: 'creativity', label: 'Créativité', emoji: '🎨' }, { id: 'education', label: 'Éducation', emoji: '📚' }, { id: 'technology', label: 'Technologie', emoji: '💻' }, { id: 'social-impact', label: 'Impact Social', emoji: '🌍' } ]; const missions = [ { id: 1, title: 'Co-créer un atlas visuel de la mode durable parisienne', client: 'Atelier Vert', avatar: 'AV', impact: 8.5, emoji: '🌱', passions: ['sustainability', 'creativity'], tags: ['Durabilité', 'Storytelling', 'Photographie'], duration: '3-4 semaines', level: 'Défi modéré', description: 'Réinventons ensemble comment la mode durable peut transformer l\'industrie parisienne. Cette mission vous invite à créer un atlas visuel qui celebrate les artisans et créateurs qui redéfinissent la mode.', fullDescription: 'Rejoignez Atelier Vert pour un projet ambitieux et créatif. Nous cherchons un freelancer passionné par la mode durable pour documenter et raconter les histoires inspirantes des créateurs parisiens. Vous allez créer un atlas visuel complet qui servira de référence pour l\'industrie.', requirements: ['Expérience en photographie', 'Sens du storytelling', 'Connaissance de la mode durable'], budget: '€3,500 - €5,500', location: 'Paris' }, // Other missions... ]; function render() { if (currentPage === 'mission-detail' && selectedMission) { renderMissionDetail(); } else { renderHome(); } } function renderHome() { const filteredMissions = missions.filter(mission => { const matchesSearch = mission.title.toLowerCase().includes(searchTerm.toLowerCase()) || mission.client.toLowerCase().includes(searchTerm.toLowerCase()); const matchesPassion = selectedPassions.includes('all') || mission.passions.some(p => selectedPassions.includes(p)); return matchesSearch && matchesPassion; }); app.innerHTML = `

Votre prochaine mission est une aventure

Découvrez un travail significatif qui s'aligne avec vos passions et nourrit votre croissance

${['🎨', '🚀', '🌱', '💡'].map(emoji => `
${emoji}
`).join('')}

Filtrer par passion

${passions.map(passion => ` `).join('')}

${filteredMissions.length} mission${filteredMissions.length > 1 ? 's' : ''} trouvée${filteredMissions.length > 1 ? 's' : ''}

${filteredMissions.map(mission => ` `).join('')}
${filteredMissions.length === 0 ? `
🔍

Aucune mission trouvée

Essayez d'ajuster vos filtres ou votre recherche

` : ''}
`; // Initialize Lucide icons if (window.lucide) { lucide.createIcons(); } // Add event listeners document.querySelectorAll('.search-input').forEach(input => { input.addEventListener('input', (e) => { searchTerm = e.target.value; render(); }); }); document.querySelectorAll('.passion-btn').forEach(btn => { btn.addEventListener('click', (e) => { const passionId = e.currentTarget.dataset.passion; togglePassion(passionId); }); }); } function renderMissionDetail() { // Mission detail rendering logic... } function togglePassion(passionId) { if (passionId === 'all') { selectedPassions = ['all']; } else { const updated = selectedPassions.filter(p => p !== 'all'); if (updated.includes(passionId)) { selectedPassions = updated.filter(p => p !== passionId); } else { selectedPassions = [...updated, passionId]; } } render(); } // Initial render render(); });