// Configuration Tailwind pour personnaliser les couleurs et garantir la disponibilité de toutes les classes.
// Cela est essentiel lors de l’utilisation du CDN ‘@tailwindcss/browser@4’ pour que vos personnalisations soient prises en compte.
tailwind.config = {
theme: {
extend: {
colors: {
canaryBlue: ‘#007ACC’, // Bleu Atlantique pour les accents et titres
canaryYellow: ‘#FFD700’, // Jaune soleil pour les touches lumineuses
canaryGreen: ‘#4CAF50’, // Vert nature pour les points positifs
},
// Ajoutez ici d’autres extensions de thème si nécessaire
}
},
// Active le mode JIT (Just-In-Time) pour générer les classes à la volée, très efficace.
// Le CDN ‘@tailwindcss/browser@4’ utilise déjà un concept similaire.
// plugins: [], // Aucun plugin additionnel nécessaire pour cet exemple
}
/**
* @fileoverview Script pour un tableau comparatif super interactif des activités aux Canaries.
* @author Un(e) Dev Front Ultra-Créatif(ve)
*/
// — 1. Références aux éléments du DOM —
const tableBody = document.getElementById(‘activities-table-body’);
const categoryFilter = document.getElementById(‘category-filter’);
const searchInput = document.getElementById(‘search-input’);
const loadingSpinner = document.getElementById(‘loading-spinner’);
const noResultsMessage = document.getElementById(‘no-results’);
// — 2. Simulation d’API de données —
/**
* @typedef {Object} ActivityData
* @property {string} id – Identifiant unique de l’activité.
* @property {string} categorie – Catégorie de l’activité (ex: “Nature & Aventure”).
* @property {string} nom – Nom de l’activité.
* @property {string} description – Description détaillée de l’activité.
* @property {Object} presence – Indique la pertinence/présence sur chaque île (ex: “Oui”, “Non”, “Partiel”).
* @property {Object} meilleur_en_aout – Spécificité pour le mois d’août sur chaque île (ex: “Excellent”, “Très chaud”).
* @property {Object} points_forts – Liste des points forts pour chaque île.
* @property {string} conseils_generaux – Conseils généraux applicables à l’activité.
*/
/**
* @const {ActivityData[]}
* @description Données statiques simulant la réponse d’une API pour les activités des Canaries.
*
* IMPORTANT : Conformément aux contraintes, l’outil doit utiliser des APIs gratuites sans clé.
* Cependant, aucune API publique gratuite et sans clé n’a été identifiée pour fournir des données structurées
* et comparatives sur les activités spécifiques des îles Canaries en août.
* Par conséquent, ces données sont construites manuellement dans le code JavaScript pour simuler
* la structure d’une réponse d’API et permettre le fonctionnement de l’outil.
*
* @comment URL de l’API (simulée): Aucune URL externe. Les données sont internes à ce script.
* @comment Exemple de réponse JSON (simulée): Voir la constante `rawActivitiesData` ci-dessous.
*/
const rawActivitiesData = [
{
id: ‘teide-tenerife’,
categorie: ‘Nature & Aventure’,
nom: ‘Parc National du Teide (Tenerife)’,
description: ‘Exploration du volcan Teide, point culminant de l’Espagne. Randonnée, téléphérique, observation des étoiles. Pensez à réserver le permis d’accès au sommet si vous souhaitez y monter à pied, ainsi que le téléphérique à l’avance, surtout en août.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Non’, ‘Lanzarote’: ‘Non’ },
meilleur_en_aout: { ‘Tenerife’: ‘Excellent (temps clair et frais en altitude)’, ‘Gran Canaria’: ‘N/A’, ‘Lanzarote’: ‘N/A’ },
points_forts: {
‘Tenerife’: [‘Paysages lunaires uniques’, ‘Randonnées variées’, ‘Téléphérique pour la vue’, ‘Observation des étoiles (ciel pur)’],
‘Gran Canaria’: [], ‘Lanzarote’: []
},
conseils_generaux: ‘Réservez le téléphérique et/ou le permis d’ascension bien à l’avance en période estivale. Prévoyez des vêtements chauds, même en août, l’altitude rend les températures fraîches.’
},
{
id: ‘siam-park-tenerife’,
categorie: ‘Divertissement & Famille’,
nom: ‘Siam Park (Tenerife)’,
description: ‘Un des meilleurs parcs aquatiques au monde avec des toboggans à sensations fortes et des zones de détente. Idéal pour toute la famille. Très populaire, attendez-vous à du monde en août.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Non’, ‘Lanzarote’: ‘Non’ },
meilleur_en_aout: { ‘Tenerife’: ‘Idéal (chaleur estivale)’, ‘Gran Canaria’: ‘N/A’, ‘Lanzarote’: ‘N/A’ },
points_forts: {
‘Tenerife’: [‘Toboggans primés’, ‘Grande variété d’attractions’, ‘Ambiance thaïlandaise’, ‘Piscines à vagues’],
‘Gran Canaria’: [], ‘Lanzarote’: []
},
conseils_generaux: ‘Achetez vos billets en ligne pour éviter les files d’attente. Arrivez tôt pour profiter au maximum. Crème solaire indispensable !’
},
{
id: ‘dunes-maspalomas-grancanaria’,
categorie: ‘Nature & Aventure’,
nom: ‘Dunes de Maspalomas (Gran Canaria)’,
description: ‘Immense étendue de dunes de sable doré classée réserve naturelle. Parfaite pour la marche, les photos et admirer le coucher de soleil. Peut être très chaud en août, prévoyez de l’eau.’,
presence: { ‘Tenerife’: ‘Non’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Non’ },
meilleur_en_aout: { ‘Tenerife’: ‘N/A’, ‘Gran Canaria’: ‘Très chaud (privilégiez matin/soir)’, ‘Lanzarote’: ‘N/A’ },
points_forts: {
‘Tenerife’: [],
‘Gran Canaria’: [‘Paysage désertique unique’, ‘Plage immense à proximité’, ‘Couchers de soleil spectaculaires’],
‘Lanzarote’: []
},
conseils_generaux: ‘Visitez tôt le matin ou en fin d’après-midi pour éviter la chaleur intense d’août. Chaussures fermées recommandées pour le sable chaud. Respectez la faune et la flore.’
},
{
id: ‘plages-lanzarote’,
categorie: ‘Plages & Mer’,
nom: ‘Plages de Papagayo (Lanzarote)’,
description: ‘Un ensemble de criques de sable blanc et d’eaux cristallines, considérées parmi les plus belles de Lanzarote. Idéales pour la baignade et le snorkeling. Accès via une piste en terre, payant.’,
presence: { ‘Tenerife’: ‘Non’, ‘Gran Canaria’: ‘Non’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘N/A’, ‘Gran Canaria’: ‘N/A’, ‘Lanzarote’: ‘Parfaites pour la baignade’ },
points_forts: {
‘Tenerife’: [], ‘Gran Canaria’: [],
‘Lanzarote’: [‘Eaux turquoises’, ‘Sable fin’, ‘Ambiance préservée’, ‘Snorkeling excellent’]
},
conseils_generaux: ‘Prévoyez de l’eau et de la nourriture, peu de services sur place. L’accès est payant (quelques euros par voiture). Idéal pour une journée de détente.’
},
{
id: ‘timanfaya-lanzarote’,
categorie: ‘Nature & Aventure’,
nom: ‘Parc National de Timanfaya (Lanzarote)’,
description: ‘Découvrez les paysages volcaniques uniques et la puissance géothermique de Lanzarote. Visites guidées en bus, démonstrations de chaleur et restaurant qui cuisine avec la chaleur du volcan.’,
presence: { ‘Tenerife’: ‘Non’, ‘Gran Canaria’: ‘Non’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘N/A’, ‘Gran Canaria’: ‘N/A’, ‘Lanzarote’: ‘Impressionnant (peu d’ombre, chaud)’ },
points_forts: {
‘Tenerife’: [], ‘Gran Canaria’: [],
‘Lanzarote’: [‘Paysages lunaires fascinants’, ‘Expériences géothermiques’, ‘Visite en bus commentée’]
},
conseils_generaux: ‘Arrivez tôt le matin pour éviter les longues files d’attente. Crème solaire et chapeau recommandés car il y a très peu d’ombre.’
},
{
id: ‘surf-grancanaria’,
categorie: ‘Plages & Mer’,
nom: ‘Surf à Las Canteras (Gran Canaria)’,
description: ‘La plage urbaine de Las Canteras à Las Palmas est un spot de surf reconnu, idéal pour les débutants et intermédiaires. Plusieurs écoles de surf disponibles. L’eau est agréable en août.’,
presence: { ‘Tenerife’: ‘Bon spot’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Bon spot’ },
meilleur_en_aout: { ‘Tenerife’: ‘Bonnes vagues’, ‘Gran Canaria’: ‘Bonnes conditions (swell modéré)’, ‘Lanzarote’: ‘Excellent (plus de vent)’ },
points_forts: {
‘Tenerife’: [‘Spots variés (El Médano)’, ‘Conditions constantes’],
‘Gran Canaria’: [‘Spot accessible en ville’, ‘Écoles de surf’, ‘Ambiance animée’],
‘Lanzarote’: [‘Meilleurs spots pour experts (Famara)’, ‘Bonnes écoles’]
},
conseils_generaux: ‘De nombreuses écoles proposent des cours et la location de matériel. L’eau est chaude en août, mais une combinaison courte peut être agréable pour les longues sessions.’
},
{
id: ‘observ_baleines_tenerife’,
categorie: ‘Nature & Aventure’,
nom: ‘Observation des cétacés (Tenerife)’,
description: ‘Les eaux au large de Tenerife sont un habitat permanent pour les grands dauphins et les globicéphales, avec d’excellentes chances d’observation toute l’année, y compris en août. Excursions en bateau respectueuses.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Oui (moins courant)’, ‘Lanzarote’: ‘Non’ },
meilleur_en_aout: { ‘Tenerife’: ‘Très bon (mer calme)’, ‘Gran Canaria’: ‘Moyen’, ‘Lanzarote’: ‘N/A’ },
points_forts: {
‘Tenerife’: [‘Haut taux de réussite’, ‘Biodiversité marine riche’, ‘Excursions éco-responsables’],
‘Gran Canaria’: [], ‘Lanzarote’: []
},
conseils_generaux: ‘Choisissez des opérateurs labellisés “Bateau Bleu” pour garantir le respect des animaux. Pensez aux médicaments contre le mal de mer si vous y êtes sujet.’
},
{
id: ‘jameos-del-agua-lanzarote’,
categorie: ‘Culture & Patrimoine’,
nom: ‘Jameos del Agua (Lanzarote)’,
description: ‘Œuvre d’art, de culture et de tourisme créée par César Manrique à l’intérieur d’un tunnel volcanique. Inclut un lac souterrain, un auditorium et un restaurant. Abrite des crabes aveugles uniques.’,
presence: { ‘Tenerife’: ‘Non’, ‘Gran Canaria’: ‘Non’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘N/A’, ‘Gran Canaria’: ‘N/A’, ‘Lanzarote’: ‘Agréable (frais à l’intérieur)’ },
points_forts: {
‘Tenerife’: [], ‘Gran Canaria’: [],
‘Lanzarote’: [‘Architecture unique’, ‘Lac souterrain’, ‘Crabes albinos rares’, ‘Ambiance sereine’]
},
conseils_generaux: ‘Peut être visité en environ 1h30. Combinable avec Cueva de los Verdes (proche). Idéal pour échapper à la chaleur de l’après-midi.’
},
{
id: ‘randonnee-roque-nublo-grancanaria’,
categorie: ‘Nature & Aventure’,
nom: ‘Randonnée au Roque Nublo (Gran Canaria)’,
description: ‘Le Roque Nublo est un monolithe volcanique emblématique de Gran Canaria, offrant des vues panoramiques spectaculaires sur l’île et, par temps clair, jusqu’à Tenerife. Randonnée accessible.’,
presence: { ‘Tenerife’: ‘Non’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Non’ },
meilleur_en_aout: { ‘Tenerife’: ‘N/A’, ‘Gran Canaria’: ‘Excellent (vues dégagées)’, ‘Lanzarote’: ‘N/A’ },
points_forts: {
‘Tenerife’: [],
‘Gran Canaria’: [‘Vues panoramiques’, ‘Symbole de l’île’, ‘Randonnée modérée’, ‘Air frais en altitude’],
‘Lanzarote’: []
},
conseils_generaux: ‘Le parking peut être bondé en août, arrivez tôt. Prévoyez de l’eau, même si la randonnée n’est pas très longue. Chaussures de marche recommandées.’
},
{
id: ‘plong_snork_canaries’,
categorie: ‘Plages & Mer’,
nom: ‘Plongée & Snorkeling (Toutes îles)’,
description: ‘Les Canaries offrent d’excellents sites de plongée et snorkeling. À Lanzarote, le Museo Atlántico est unique. À Tenerife, la diversité marine est au rendez-vous. Eaux chaudes et claires en août.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘Idéal’, ‘Gran Canaria’: ‘Idéal’, ‘Lanzarote’: ‘Idéal’ },
points_forts: {
‘Tenerife’: [‘Faune variée’, ‘Épaves’, ‘Eaux claires’, ‘Sites protégés’],
‘Gran Canaria’: [‘Faune variée’, ‘Eaux claires’, ‘Sites pour tous niveaux’, ‘Épaves’],
‘Lanzarote’: [‘Museo Atlántico’, ‘Grottes volcaniques’, ‘Faune abondante’, ‘Eaux translucides’]
},
conseils_generaux: ‘De nombreux centres de plongée certifiés sur toutes les îles. Réservez à l’avance en août. Apportez votre propre équipement de snorkeling si vous en avez un.’
},
{
id: ‘gastronomie-locale’,
categorie: ‘Culture & Patrimoine’,
nom: ‘Dégustation Gastronomie Locale’,
description: ‘Goûtez aux spécialités canariennes : papas arrugadas, mojo picón, fromages locaux, fruits de mer frais, vins des Canaries. Chaque île a ses propres délices et traditions culinaires.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘Excellent’, ‘Gran Canaria’: ‘Excellent’, ‘Lanzarote’: ‘Excellent’ },
points_forts: {
‘Tenerife’: [‘Vins de Tacoronte-Acentejo’, ‘Bananes’, ‘Fromages frais’],
‘Gran Canaria’: [‘Fromages de Flor de Guía’, ‘Ron Miel (rhum au miel)’, ‘Poissons frais’],
‘Lanzarote’: [‘Vins de La Geria’, ‘Pommes de terre “papas arrugadas”‘, ‘Poissons et fruits de mer’]
},
conseils_generaux: ‘N’hésitez pas à explorer les madagasikara.fr/entrepreneuriat-binational-naviguer-entre-la-france-et-madagascar/">marchés locaux et les petits restaurants traditionnels. Demandez les “platos del día” (plats du jour) pour des options fraîches et locales.’
},
{
id: ‘détente-spa-bienetre’,
categorie: ‘Bien-être & Détente’,
nom: ‘Spa et Bien-être’,
description: ‘Profitez des nombreux spas et centres de bien-être. Idéal pour se détendre après une journée d’exploration ou de plage. Nombreuses options dans les hôtels de luxe et centres spécialisés.’,
presence: { ‘Tenerife’: ‘Oui’, ‘Gran Canaria’: ‘Oui’, ‘Lanzarote’: ‘Oui’ },
meilleur_en_aout: { ‘Tenerife’: ‘Idéal’, ‘Gran Canaria’: ‘Idéal’, ‘Lanzarote’: ‘Idéal’ },
points_forts: {
‘Tenerife’: [‘Hôtels de luxe avec spas’, ‘Thermes marins’],
‘Gran Canaria’: [‘Grands complexes hôteliers’, ‘Massages sur la plage’],
‘Lanzarote’: [‘Centres de thalassothérapie’, ‘Cadre volcanique unique’]
},
conseils_generaux: ‘Réservez vos soins à l’avance, surtout en haute saison (août). De nombreux hôtels offrent des forfaits bien-être pour les non-résidents.’
}
];
/**
* Simule un appel API pour récupérer les données des activités.
* Utilise un délai pour imiter un chargement réseau asynchrone.
* @returns {Promise} Une promesse qui se résout avec les données des activités.
*/
function fetchCanaryActivities() {
return new Promise(resolve => {
// Simule un délai réseau de 500ms à 1.5s pour une expérience utilisateur réaliste.
setTimeout(() => {
resolve(rawActivitiesData);
}, Math.random() * 1000 + 500);
});
}
// — 3. Fonctions de rendu et de filtrage —
/**
* Affiche ou masque le spinner de chargement.
* @param {boolean} show – Vrai pour montrer le spinner, faux pour le cacher.
*/
function toggleLoadingSpinner(show) {
if (show) {
loadingSpinner.classList.remove(‘hidden’);
loadingSpinner.classList.add(‘flex’); // Assure que flex est appliqué pour centrer le contenu
} else {
loadingSpinner.classList.add(‘hidden’);
loadingSpinner.classList.remove(‘flex’);
}
}
/**
* Met à jour l’affichage du message “aucun résultat”.
* @param {boolean} show – Vrai pour afficher le message, faux pour le cacher.
*/
function toggleNoResultsMessage(show) {
if (show) {
noResultsMessage.classList.remove(‘hidden’);
} else {
noResultsMessage.classList.add(‘hidden’);
}
}
/**
* Rend le tableau avec les données filtrées.
* Crée les lignes et cellules du tableau dynamiquement.
* Gère l’affichage des descriptions complètes et des détails spécifiques à chaque île.
* @param {ActivityData[]} data – Les données d’activités à afficher.
*/
function renderTable(data) {
tableBody.innerHTML = ”; // Efface le contenu actuel du tableau
toggleNoResultsMessage(data.length === 0); // Affiche/cache le message “aucun résultat”
if (data.length === 0) {
return; // Si aucune donnée, on arrête là
}
const fragment = document.createDocumentFragment(); // Utilise un fragment pour une meilleure performance DOM
data.forEach(activity => {
const row = document.createElement(‘tr’);
row.classList.add(‘hover:bg-gray-50’, ‘transition-colors’, ‘duration-150’);
// Cellule : Nom de l’activité et description courte/longue
const nameCell = document.createElement(‘td’);
nameCell.classList.add(‘px-6’, ‘py-4’, ‘whitespace-normal’, ‘text-sm’, ‘font-medium’, ‘text-gray-900’, ‘border-r’, ‘border-gray-200’, ‘align-top’);
nameCell.innerHTML = `
{“@context”:”https://schema.org”,”@type”:”FAQPage”,”mainEntity”:[{“@type”:”Question”,”name”:”Quel est le meilleur moment pour ru00e9server un voyage aux Canaries en aou00fbt ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Pour voyager aux Canaries en aou00fbt, il est fortement conseillu00e9 de ru00e9server vos vols et votre hu00e9bergement plusieurs mois u00e0 l’avance, idu00e9alement du00e8s le du00e9but de l’annu00e9e. C’est une pu00e9riode de forte affluence, ce qui rend les tarifs plus u00e9levu00e9s et les disponibilitu00e9s limitu00e9es. La ru00e9servation anticipu00e9e vous assure de meilleurs prix et un plus grand choix.”}},{“@type”:”Question”,”name”:”Les Canaries sont-elles adaptu00e9es aux familles en aou00fbt ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Absolument ! Les Canaries offrent de nombreuses activitu00e9s pour toute la famille en aou00fbt. Entre les plages pour la baignade et les chu00e2teaux de sable, les parcs d’attractions, les piscines naturelles, les courtes randonnu00e9es et les festivitu00e9s locales, il y a de quoi divertir petits et grands. Le climat est u00e9galement tru00e8s agru00e9able pour les enfants.”}},{“@type”:”Question”,”name”:”Peut-on u00e9viter la foule aux Canaries en plein mois d’aou00fbt ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Il est difficile d’u00e9viter totalement la foule en aou00fbt, mais on peut la gu00e9rer. Pour cela, on vous recommande de privilu00e9gier les visites tu00f4t le matin ou en fin de journu00e9e, d’explorer les villages intu00e9rieurs moins fru00e9quentu00e9s et de planifier des excursions vers les u00eeles moins touristiques comme La Gomera ou El Hierro. Ru00e9server ses activitu00e9s u00e0 l’avance permet aussi de gagner du temps.”}},{“@type”:”Question”,”name”:”Quelles sont les activitu00e9s incontournables si l’on visite les Canaries en aou00fbt ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”En aou00fbt, les incontournables incluent la du00e9couverte des plages (sable noir de Tenerife, Papagayo de Lanzarote), l’exploration des paysages volcaniques (Parc National de Timanfaya u00e0 Lanzarote, Volcan Teide u00e0 Tenerife), la randonnu00e9e dans les parcs naturels, et l’immersion dans les fu00eates locales comme la Bajada de la Rama u00e0 Gran Canaria ou le Pu00e8lerinage de Candelaria u00e0 Tenerife. Les sports nautiques sont u00e9galement tru00e8s populaires.”}},{“@type”:”Question”,”name”:”Quel type de vu00eatements faut-il emporter pour un su00e9jour en aou00fbt ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Pour un su00e9jour en aou00fbt aux Canaries, privilu00e9giez des vu00eatements lu00e9gers : shorts, t-shirts, maillots de bain. N’oubliez pas un pull lu00e9ger ou une veste pour les soiru00e9es en altitude ou les brises marines. Des baskets confortables pour la randonnu00e9e, des sandales pour la plage, des lunettes de soleil, un chapeau et de la cru00e8me solaire sont u00e9galement indispensables.”}}]}