// DATA pour le tableau comparateur des activités et expériences à Hurghada.
// Cette structure est facilement extensible pour ajouter de nouvelles entrées ou champs.
const hurghadaData = [
{
theme: “Plongée & Snorkeling”,
description: “Explorez les récifs coralliens vibrants de la Mer Rouge, un paradis sous-marin. Profitez des eaux cristallines pour admirer une faune marine incroyable, des poissons colorés aux tortues majestueuses.”,
idealFor: “Amateurs de vie marine, Aventuriers, Familles”,
budget: “€€”,
aprilTip: “Les températures de l’eau sont parfaites (23-25°C), et l’affluence est moins forte qu’en plein été. Pensez à réserver à l’avance pour les excursions populaires et les centres de plongée.”,
keywords: [“eau”, “poissons”, “corail”, “mer”, “sous-marin”, “aventure”, “famille”, “récifs”, “tortues”, “excursion”, “bateau”, “aquatique”]
},
{
theme: “Safari Désert en Quad”,
description: “Vivez une aventure palpitante à travers les dunes du désert égyptien, incluant souvent une visite d’un village bédouin, un dîner traditionnel sous les étoiles et une balade à dos de chameau.”,
idealFor: “Chercheurs de sensations fortes, Groupes, Familles (enfants plus âgés)”,
budget: “€€”,
aprilTip: “Privilégiez le matin tôt ou la fin d’après-midi pour éviter les heures les plus chaudes. N’oubliez pas un foulard (keffieh) pour vous protéger du sable et des lunettes de soleil.”,
keywords: [“sable”, “quad”, “bédouin”, “désert”, “aventure”, “groupe”, “dunes”, “soirée”, “chameau”, “exotique”]
},
{
theme: “Détente sur la Plage”,
description: “Profitez des magnifiques plages de sable fin d’Hurghada et des eaux turquoise apaisantes pour une journée de farniente, de baignade et de bronzage sous le soleil égyptien.”,
idealFor: “Couples, Familles, Amateurs de farniente”,
budget: “€”,
aprilTip: “Les températures sont très agréables, parfaites pour bronzer et nager sans la chaleur étouffante de l’été. Les plages privées des hôtels offrent souvent de meilleurs services et équipements.”,
keywords: [“soleil”, “sable”, “plage”, “relax”, “farniente”, “couple”, “famille”, “baignade”, “bronzage”, “resort”]
},
{
theme: “Excursions Iles Giftun / Orange Bay”,
description: “Naviguez vers les îles paradisiaques de Giftun ou Orange Bay pour une journée mémorable. Au programme : snorkeling dans des eaux cristallines, baignade et détente sur des plages de rêve dignes de cartes postales.”,
idealFor: “Familles, Couples, Amoureux de la mer”,
budget: “€€€”,
aprilTip: “C’est une activité très populaire, réservez votre excursion à l’avance, surtout si vous avez une préférence pour une île spécifique. N’oubliez pas votre crème solaire biodégradable et votre appareil photo étanche !”,
keywords: [“île”, “bateau”, “plage”, “snorkeling”, “mer”, “paradis”, “famille”, “couple”, “excursion”, “croisière”, “nage”]
},
{
theme: “Délices Culinaires Locaux”,
description: “Découvrez la richesse de la cuisine égyptienne, des fruits de mer frais de la Mer Rouge aux plats traditionnels comme le koshary (plat végétarien) ou le foul medames, dans les restaurants locaux d’Hurghada.”,
idealFor: “Gourmands, Curieux, Couples”,
budget: “€€”,
aprilTip: “De nombreux restaurants proposent des terrasses agréables en soirée, idéales pour profiter de la brise marine. N’hésitez pas à goûter les jus de fruits frais (mangue, goyave) et les pâtisseries locales.”,
keywords: [“nourriture”, “cuisine”, “restaurant”, “égyptien”, “fruits de mer”, “gourmand”, “culture”, “koshary”, “terrasse”, “dîner”, “saveurs”, “épices”]
},
{
theme: “Visite de El Dahar (Centre-ville)”,
description: “Explorez le quartier historique et authentique d’Hurghada. Flânez dans ses souks animés, découvrez les marchés colorés et imprégnez-vous de l’ambiance locale loin des resorts touristiques.”,
idealFor: “Amateurs de culture, Explorateurs, Acheteurs”,
budget: “€”,
aprilTip: “Idéal en fin d’après-midi ou en soirée pour profiter de l’ambiance vivante et d’une température plus clémente. Soyez prêt à négocier les prix dans les marchés pour les souvenirs !”,
keywords: [“ville”, “marché”, “culture”, “local”, “histoire”, “shopping”, “souk”, “authentique”, “exploration”, “tradition”]
},
{
theme: “Sports Nautiques (hors plongée)”,
description: “Adrénaline et sensations garanties avec une multitude d’activités : jet-ski, parachute ascensionnel (parasailing), planche à voile, kitesurf, banana boat… Il y en a pour tous les goûts !”,
idealFor: “Amateurs de sensations fortes, Groupes, Jeunes”,
budget: “€€”,
aprilTip: “Le vent est souvent idéal en avril pour la planche à voile et le kitesurf. Renseignez-vous sur les centres de sports nautiques qui proposent des forfaits ou des cours.”,
keywords: [“jet-ski”, “parachute”, “kitesurf”, “planche à voile”, “eau”, “vitesse”, “adrénaline”, “mer”, “sport”]
}
];
// Variables d’état pour la gestion du tableau interactif
let currentSort = { column: ‘theme’, direction: ‘asc’ }; // Définit la colonne de tri initiale et sa direction
let currentFilter = { idealFor: ‘all’, budget: ‘all’, search: ” }; // Initialise les filtres
const tableBody = document.getElementById(‘comparateur-body’); // Référence au corps du tableau HTML
const searchInput = document.getElementById(‘search-input’); // Champ de recherche
const filterButtons = document.querySelectorAll(‘.filter-btn’); // Boutons de filtre par catégorie
const budgetFilter = document.getElementById(‘budget-filter’); // Sélecteur de filtre par budget
const noResultsMessage = document.getElementById(‘no-results’); // Message d’absence de résultats
const tableHeaders = document.querySelectorAll(‘th[data-sort-by]’); // En-têtes de colonne pour le tri
/**
* Génère l’icône de tri (▲ pour ascendant, ▼ pour descendant) pour une colonne donnée.
* @param {string} column – La colonne à vérifier.
* @param {string} direction – La direction du tri actuelle.
* @returns {string} L’icône HTML sous forme de chaîne de caractères.
*/
function getSortIcon(column, direction) {
if (currentSort.column === column) {
return direction === ‘asc’ ? ‘ ▲’ : ‘ ▼’; // Utilise des triangles comme icônes de tri
}
return ”; // Pas d’icône si la colonne n’est pas triée
}
/**
* Met à jour les icônes de tri dans les en-têtes du tableau.
* Cette fonction est appelée après chaque rendu du tableau pour s’assurer que les icônes sont à jour.
*/
function updateSortIcons() {
tableHeaders.forEach(header => {
const sortBy = header.dataset.sortBy;
let iconSpan = header.querySelector(‘.sort-icon’);
if (!iconSpan) { // Crée le span si inexistant
iconSpan = document.createElement(‘span’);
iconSpan.classList.add(‘sort-icon’, ‘ml-1’, ‘text-gray-200’); // Ajoute des classes Tailwind pour le style
header.appendChild(iconSpan);
}
iconSpan.textContent = getSortIcon(sortBy, currentSort.direction); // Met à jour l’icône
iconSpan.classList.toggle(‘text-white’, currentSort.column === sortBy); // Rend l’icône active blanche
iconSpan.classList.toggle(‘text-gray-200’, currentSort.column !== sortBy); // Rend l’icône inactive grise
});
}
/**
* Trie les données du tableau selon une colonne et une direction spécifiques.
* Gère un tri spécial pour la colonne ‘budget’.
* @param {Array
