8月のハルガダ：エジプトの太陽の下での充実した滞在のためのガイド

// Données des activités à Hurghada pour le tableau comparatif const activityData = [ { ‘title’: ‘Activités en matinée (avant 11h)’, ‘Plongée/Snorkeling’: ‘Visibilité maximale, températures agréables sous l’eau. Idéal pour explorer les récifs.’, ‘Sports nautiques’: ‘Mer calme et moins de vent, parfait pour le paddle, le kayak ou les premières sensations en ski nautique.’, ‘Excursions îles’: ‘Départ tôt pour éviter la chaleur de midi et profiter des îles désertes avec une belle lumière.’ }, { ‘title’: ‘Activités en milieu de journée (11h-16h)’, ‘Plongée/Snorkeling’: ‘Moins recommandé, forte chaleur sur le bateau et sous le soleil. Préférable en piscine ou dans des lagons peu profonds à l’ombre.’, ‘Sports nautiques’: ‘Chaleur intense, moins confortable pour les activités intenses. Optez pour des sports aquatiques rafraîchissants comme le jet-ski ou des balades en bateau avec des arrêts baignade.’, ‘Excursions îles’: ‘Idéal pour le farniente à l’ombre sur les îles, repas et baignade dans les eaux fraîches. Attention aux coups de soleil.’ }, { ‘title’: ‘Activités en fin d’après-midi (après 16h)’, ‘Plongée/Snorkeling’: ‘Plongées de nuit possibles pour découvrir la vie marine nocturne, une expérience unique. Ou admirez un coucher de soleil spectaculaire depuis le bateau.’, ‘Sports nautiques’: ‘Le vent se lève souvent, idéal pour des sports comme le kitesurf ou la planche à voile. Les températures sont plus clémentes, rendant l’activité plus agréable.’, ‘Excursions îles’: ‘Retour des excursions en mer, possibilité de balades tranquilles sur la corniche d’Hurghada ou dîner au bord de mer pour admirer le crépuscule.’ } ]; // Mappage des titres de lignes aux identifiants de filtre const timeSlotMap = { ‘Activités en matinée (avant 11h)’: ‘matinee’, ‘Activités en milieu de journée (11h-16h)’: ‘midday’, ‘Activités en fin d’après-midi (après 16h)’: ‘afternoon’ }; // Identifiant du fuseau horaire d’Hurghada pour l’API World Time et Open-Meteo const hurghadaTimezone = ‘Africa/Cairo’; // URL de l’API World Time (gratuite, sans clé) // Permet d’obtenir l’heure et la date exactes pour un fuseau horaire donné. // Documentation: https://worldtimeapi.org/ const worldTimeApiUrl = `https://worldtimeapi.org/api/timezone/${hurghadaTimezone}`; /* Exemple de réponse JSON de worldtimeapi.org pour Africa/Cairo: { “abbreviation”: “EET”, “client_ip”: “…”, “datetime”: “2023-08-01T15:30:00.123456+02:00”, // La date et l’heure UTC+2 (EET) “day_of_week”: 2, “day_of_year”: 213, “dst”: false, “dst_from”: null, “dst_offset”: 0, “dst_until”: null, “raw_offset”: 7200, “timezone”: “Africa/Cairo”, “unixtime”: 1690906200, “utc_datetime”: “2023-08-01T13:30:00.123456+00:00”, “utc_offset”: “+02:00”, “week_number”: 31 } */ // URL de l’API Open-Meteo pour les prévisions météo d’Hurghada (gratuite, sans clé) // Permet d’obtenir des données météo actuelles ou prévisionnelles. // Latitude et longitude pour Hurghada (Egypte): 27.257, 33.812 // Documentation: https://open-meteo.com/en/docs const openMeteoApiUrl = ‘https://api.open-meteo.com/v1/forecast?latitude=27.257&longitude=33.812&current_weather=true&hourly=temperature_2m,relativehumidity_2m,precipitation&timezone=Africa%2FCairo’; /* Exemple de réponse JSON simplifiée de Open-Meteo pour Hurghada (current_weather): { “latitude”: 27.25, “longitude”: 33.8125, “generationtime_ms”: 0.19800662994384766, “utc_offset_seconds”: 7200, “timezone”: “Africa/Cairo”, “timezone_abbreviation”: “EET”, “elevation”: 11.0, “current_weather”: { “temperature”: 32.5, // Température actuelle “windspeed”: 18.5, // Vitesse du vent “winddirection”: 340, “weathercode”: 0, // Code météo (0 = ciel clair) “is_day”: 1, “time”: “2023-08-01T15:00″ }, // … autres données (hourly, daily) } */ // Fonction pour générer le tableau à partir des données `activityData` function generateTable() { const tableBody = document.getElementById(‘tableBody’); tableBody.innerHTML = ”; // Nettoyer le corps du tableau avant de le remplir activityData.forEach(item => { const row = document.createElement(‘tr’); const timeSlotId = timeSlotMap[item.title]; row.dataset.timeslot = timeSlotId; // Ajouter un attribut de données pour faciliter le filtrage et le surlignage row.classList.add(‘table-row’, ‘hover:bg-blue-50’, ‘transition-colors’, ‘duration-200’, ‘border-b’, ‘border-gray-100’); // Classes de base pour les lignes // Cellule pour le titre/moment de la journée (première colonne) const titleCell = document.createElement(‘td’); titleCell.classList.add(‘py-4’, ‘px-6’, ‘font-bold’, ‘text-blue-700’, ‘bg-blue-50’, ‘whitespace-nowrap’, ‘text-lg’); titleCell.textContent = item.title; row.appendChild(titleCell); // Cellules pour les descriptions des activités (colonnes suivantes) // On filtre la clé ‘title’ car elle est déjà traitée dans la première colonne. Object.keys(item).filter(key => key !== ‘title’).forEach(key => { const cell = document.createElement(‘td’); cell.classList.add(‘py-4’, ‘px-6’, ‘text-gray-800’, ‘text-base’); cell.textContent = item[key]; row.appendChild(cell); }); tableBody.appendChild(row); }); } // Fonction pour obtenir l’heure et la date actuelles à Hurghada via l’API World Time async function getHurghadaTime() { try { const response = await fetch(worldTimeApiUrl); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); const hurghadaDateTimeString = data.datetime; // Exemple: “2023-08-01T15:30:00.123456+02:00” const date = new Date(hurghadaDateTimeString); const optionsDate = { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’ }; const optionsTime = { hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’, hour12: false }; const formattedDate = date.toLocaleDateString(‘fr-FR’, optionsDate); const formattedTime = date.toLocaleTimeString(‘fr-FR’, optionsTime); const hurghadaDateTimeDiv = document.getElementById(‘hurghadaDateTime’); hurghadaDateTimeDiv.innerHTML = `${formattedDate} à ${formattedTime}`; return date.getHours(); // Retourne l’heure actuelle à Hurghada (format 0-23) } catch (error) { console.error(“Erreur lors de la récupération de l’heure d’Hurghada:”, error); document.getElementById(‘hurghadaDateTime’).textContent = “Non disponible”; return null; } } // Fonction pour obtenir la météo actuelle à Hurghada via l’API Open-Meteo async function getHurghadaWeather() { try { const response = await fetch(openMeteoApiUrl); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); if (data.current_weather) { const temp = data.current_weather.temperature; const windspeed = data.current_weather.windspeed; // Mappage des codes météo à des descriptions textuelles en français const weatherCodeMap = { 0: ‘Ciel clair’, 1: ‘Principalement clair’, 2: ‘Partiellement nuageux’, 3: ‘Nuageux’, 45: ‘Brouillard’, 48: ‘Brouillard givrant’, 51: ‘Bruine légère’, 53: ‘Bruine modérée’, 55: ‘Bruine dense’, 56: ‘Bruine verglaçante légère’, 57: ‘Bruine verglaçante dense’, 61: ‘Pluie légère’, 63: ‘Pluie modérée’, 65: ‘Pluie forte’, 66: ‘Pluie verglaçante légère’, 67: ‘Pluie verglaçante forte’, 71: ‘Chutes de neige légères’, 73: ‘Chutes de neige modérées’, 75: ‘Chutes de neige fortes’, 77: ‘Grêle’, 80: ‘Averses de pluie légères’, 81: ‘Averses de pluie modérées’, 82: ‘Averses de pluie violentes’, 85: ‘Averses de neige légères’, 86: ‘Averses de neige fortes’, 95: ‘Orage léger ou modéré’, 96: ‘Orage avec grêle légère’, 99: ‘Orage avec grêle forte’ }; const weatherDescription = weatherCodeMap[data.current_weather.weathercode] || ‘Météo inconnue’; document.getElementById(‘hurghadaWeather’).innerHTML = ` ${temp}°C – ${weatherDescription} avec un vent de ${windspeed} km/h. `; } else { document.getElementById(‘hurghadaWeather’).textContent = “Météo actuelle non disponible.”; } } catch (error) { console.error(“Erreur lors de la récupération de la météo d’Hurghada:”, error); document.getElementById(‘hurghadaWeather’).textContent = “Météo actuelle non disponible.”; } } // Fonction pour surligner la ligne du tableau correspondant au moment de la journée actuel à Hurghada function highlightCurrentTimeSlot(currentHour) { const rows = document.querySelectorAll(‘#tableBody tr’); rows.forEach(row => { // Supprimer les classes de surlignage des lignes précédentes row.classList.remove(‘bg-yellow-100’, ‘border-l-4’, ‘border-yellow-500’, ‘shadow-md’); }); let timeSlotToHighlight = ”; if (currentHour !== null) { if (currentHour = 11 && currentHour = 16 timeSlotToHighlight = ‘afternoon’; } // Appliquer les classes de surlignage à la ligne correspondante const currentRow = document.querySelector(`tr[data-timeslot=”${timeSlotToHighlight}”]`); if (currentRow) { currentRow.classList.add(‘bg-yellow-100’, ‘border-l-4’, ‘border-yellow-500’, ‘shadow-md’); } } } // Fonction pour filtrer les lignes du tableau en fonction du bouton cliqué function filterTable(filterValue) { const rows = document.querySelectorAll(‘#tableBody tr’); rows.forEach(row => { if (filterValue === ‘all’ || row.dataset.timeslot === filterValue) { row.style.display = ”; // Afficher la ligne } else { row.style.display = ‘none’; // Masquer la ligne } }); // Gérer l’état actif des boutons de filtre pour un meilleur retour visuel document.querySelectorAll(‘.filter-btn’).forEach(btn => { if (btn.dataset.filter === filterValue) { btn.classList.add(‘bg-blue-600’, ‘text-white’, ‘shadow-lg’); btn.classList.remove(‘bg-gray-200’, ‘text-gray-800’, ‘hover:bg-blue-200’, ‘hover:text-blue-800’, ‘shadow-md’); } else { btn.classList.remove(‘bg-blue-600’, ‘text-white’, ‘shadow-lg’); btn.classList.add(‘bg-gray-200’, ‘text-gray-800’, ‘hover:bg-blue-200’, ‘hover:text-blue-800’, ‘shadow-md’); } }); } // Initialisation de l’outil quand le DOM (Document Object Model) est entièrement chargé document.addEventListener(‘DOMContentLoaded’, async () => { generateTable(); // Construire le tableau initial avec les données // Récupérer et afficher l’heure et la météo d’Hurghada de manière asynchrone // L’heure est nécessaire pour le surlignage, la météo est complémentaire. const currentHourHurghada = await getHurghadaTime(); if (currentHourHurghada !== null) { highlightCurrentTimeSlot(currentHourHurghada); } getHurghadaWeather(); // Appel séparé, ne bloque pas l’affichage de l’heure // Ajouter les écouteurs d’événements pour les boutons de filtre document.querySelectorAll(‘.filter-btn’).forEach(button => { button.addEventListener(‘click’, (event) => { const filter = event.target.dataset.filter; filterTable(filter); }); }); // Appliquer le filtre “Afficher tout” par défaut au chargement filterTable(‘all’); });