Test page

Test page






Le Mag’ Gard & Occitanie


Découvrir le Gard

Terroir, Patrimoine et Saveurs d’Occitanie





Préparation des spécialités locales…


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Le Mag' Gard & Occitanie</title>
    <style>
        :root {
            --occitanie-red: #72091e; /* Rouge Croix du Languedoc */
            --nimes-blue: #003366;
            --sun-yellow: #ffcd00;
            --bg-gray: #f8f9fa;
        }

        body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--bg-gray); margin: 0; padding: 0; color: #333; }
        
        header { background: var(--occitanie-red); color: white; padding: 40px 20px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        header h1 { margin: 0; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 2px; }
        header p { opacity: 0.9; font-weight: 300; }

        .filters { display: flex; justify-content: center; gap: 10px; padding: 20px; flex-wrap: wrap; background: white; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #ddd; }
        .filter-btn { border: 2px solid var(--occitanie-red); background: transparent; color: var(--occitanie-red); padding: 8px 20px; border-radius: 25px; cursor: pointer; font-weight: bold; transition: 0.3s; }
        .filter-btn.active, .filter-btn:hover { background: var(--occitanie-red); color: white; }

        #rss-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: transform 0.3s ease; display: flex; flex-direction: column; }
        .card:hover { transform: translateY(-8px); }
        .card img { width: 100%; height: 200px; object-fit: cover; background-color: #eee; }
        
        .card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
        .source-tag { font-size: 0.7rem; text-transform: uppercase; color: var(--occitanie-red); font-weight: bold; margin-bottom: 8px; display: block; }
        .card h3 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.4; color: var(--nimes-blue); }
        .card p { font-size: 0.95rem; color: #666; margin-bottom: 20px; flex-grow: 1; line-height: 1.6; }
        
        .card-footer { border-top: 1px solid #eee; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        .date { font-size: 0.8rem; color: #999; }
        .btn-link { color: var(--occitanie-red); text-decoration: none; font-weight: bold; font-size: 0.9rem; }
        .btn-link:hover { text-decoration: underline; }

        .loader { grid-column: 1 / -1; text-align: center; padding: 50px; font-size: 1.2rem; color: #666; }
    </style>
</head>
<body>

<header>
    <h1>Découvrir le Gard</h1>
    <p>Terroir, Patrimoine et Saveurs d'Occitanie</p>
</header>

<div class="filters">
    <button class="filter-btn active" onclick="filterItems('all')">Tous</button>
    <button class="filter-btn" onclick="filterItems('nîmes')">Nîmes</button>
    <button class="filter-btn" onclick="filterItems('uzès')">Uzès</button>
    <button class="filter-btn" onclick="filterItems('cuisine')">Gastronomie</button>
    <button class="filter-btn" onclick="filterItems('culture')">Culture</button>
</div>

<div id="rss-grid">
    <div class="loader">Préparation des spécialités locales...</div>
</div>

<script>
    // Liste des flux RSS ciblés
    const FEEDS = [
        { name: 'Objectif Gard', url: 'https://www.objectifgard.com/loisirs/rss' },
        { name: 'Occitanie Tourisme', url: 'https://www.lindependant.fr/pyrenees-orientales/perpignan/rss' }, // Flux régional dynamique
        { name: 'Région Occitanie', url: 'https://www.laregion.fr/spip.php?page=backend&id_rubrique=113' }
    ];

    let allItems = [];

    async function loadFeeds() {
        const grid = document.getElementById('rss-grid');
        
        for (const feed of FEEDS) {
            try {
                // Conversion XML vers JSON via RSS2JSON (Gratuit)
                const response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feed.url)}`);
                const data = await response.json();
                
                if (data.status === 'ok') {
                    const itemsWithSource = data.items.map(item => ({
                        ...item,
                        sourceName: feed.name,
                        // Extraction d'image fallback si vide
                        image: item.enclosure.link || item.thumbnail || extractImage(item.content) || 'https://images.unsplash.com/photo-1565625413038-7f998499276d?auto=format&fit=crop&w=500&q=80'
                    }));
                    allItems = [...allItems, ...itemsWithSource];
                }
            } catch (err) {
                console.error("Erreur sur le flux : " + feed.name);
            }
        }
        
        // Trier par date (du plus récent au plus ancien)
        allItems.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
        displayItems(allItems);
    }

    // Fonction pour extraire une image d'une description HTML si nécessaire
    function extractImage(content) {
        const div = document.createElement('div');
        div.innerHTML = content;
        const img = div.querySelector('img');
        return img ? img.src : null;
    }

    function displayItems(items) {
        const grid = document.getElementById('rss-grid');
        grid.innerHTML = items.length > 0 ? '' : '<p>Aucun article trouvé pour ce filtre.</p>';

        items.forEach(item => {
            const date = new Date(item.pubDate).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
            const card = `
                <div class="card">
                    <img src="${item.image}" alt="Image article">
                    <div class="card-body">
                        <span class="source-tag">${item.sourceName}</span>
                        <h3>${item.title}</h3>
                        <p>${item.description.replace(/<[^>]*>?/gm, '').substring(0, 110)}...</p>
                    </div>
                    <div class="card-footer">
                        <span class="date">${date}</span>
                        <a href="${item.link}" target="_blank" class="btn-link">Lire la suite →</a>
                    </div>
                </div>
            `;
            grid.innerHTML += card;
        });
    }

    function filterItems(category) {
        // Gestion visuelle des boutons
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');

        if (category === 'all') {
            displayItems(allItems);
        } else {
            const filtered = allItems.filter(item => {
                const text = (item.title + item.description).toLowerCase();
                // Mots clés associés aux filtres
                if (category === 'cuisine') return text.includes('gastronomie') || text.includes('vin') || text.includes('recette') || text.includes('goût');
                if (category === 'culture') return text.includes('musée') || text.includes('expo') || text.includes('festival') || text.includes('histoire');
                return text.includes(category);
            });
            displayItems(filtered);
        }
    }

    // Lancement au chargement
    loadFeeds();
</script>

</body>
</html>