Actualités

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="author" content="sync" />
<title>Actualités France & Tech</title>
<style type="text/css">
body {
	font-family: Arial, sans-serif;
	margin: 20px;
	background-color: #f0f2f5;
	color: #333;
}
h1 { text-align: center; color: #222; margin-bottom: 30px;}
h2 {
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 3px solid #ccc;
}

.feed-container {
	margin-bottom: 40px;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

#actu-fr { background-color: #e8f0ff;} /* Bleu léger pour France */
#actu-tech { background-color: #fff0e8;} /* Orange léger pour Tech */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.news-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	min-height: 280px;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.news-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-bottom: 1px solid #eee;
	border-radius: 12px 12px 0 0;
}

.news-content {
	padding: 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.news-content a {
	text-decoration: none;
	color: #0055a5;
	font-weight: bold;
	margin-bottom: 5px;
	transition: color 0.2s;
}

.news-content a:hover {
	color: #ff6600;
}

.news-content p {
	margin: 0;
	font-size: 0.9em;
	color: #555;
	flex: 1;
}

.error-message {
	color: #a00;
	background-color: #ffe0e0;
	padding: 15px;
	border: 1px solid #f00;
	border-radius: 8px;
	grid-column: 1 / -1;
}
</style>
</head>

<body>
<h1>Actualités</h1>
<div class="feed-container" id="actu-fr">
	<h2>🇫🇷 France (Le Monde)</h2>
	<div class="news-grid" id="france-news">
		<p style="grid-column: 1 / -1;">Chargement des actualités...</p>
	</div>
</div>

<div class="feed-container" id="actu-tech">
	<h2>💻 Informatique & Technologie (monde)</h2>
	<div class="news-grid" id="tech-news">
		<p style="grid-column: 1 / -1;">Chargement des actualités...</p>
	</div>
</div>

/* Affiche un message d'erreur dans un conteneur donné. */
const displayError = (container, message) => {
	container.innerHTML = `<div class="error-message">❌ Erreur de chargement : ${message}<br>Vérifiez le réseau (Firewall) ou l'API proxy.</div>`;
};

/* Récupère le flux RSS via le proxy et affiche les cartes. */
const fetchRssFeed = async (feedConfig) => {
	const container = document.getElementById(feedConfig.id);
	const fullUrl = PROXY_API + encodeURIComponent(feedConfig.url);

try {
		const res = await fetch(fullUrl);
		// 1. Vérifie l'état de la requête HTTP
		if (!res.ok) {
			throw new Error(`Échec HTTP (${res.status}). Problème de proxy ou de source RSS.`);
		}

const data = await res.json();

// 2. Vérifie l'état de la réponse JSON du proxy
		if (data.status !== 'ok' || !data.items || data.items.length === 0) {
			throw new Error(`Proxy n'a pas pu charger le flux : ${data.message || 'Contenu vide.'}`);
		}

// Efface le message de chargement
		container.innerHTML = '';

// 3. Affiche les cartes
		data.items.slice(0, feedConfig.count).forEach(item => {
			const card = document.createElement('div');
			card.className = 'news-card';

// Tentative d'extraction de l'image (utilise thumbnail ou content si possible)
			let imageUrl = item.thumbnail || (item.enclosure && item.enclosure.link);
			let imageHtml = imageUrl ? `<img src="${imageUrl}" alt="Actualité">` : '';

card.innerHTML = `
				${imageHtml}
				<div class="news-content">
					<a href="${item.link}" target="_blank">${item.title}</a>
					<p>${item.description ? item.description.replace(/<[^>]*>?/gm, '').slice(0,120)+'...' : 'Cliquez pour lire l\'article complet.'}</p>
				</div>`;
			container.appendChild(card);
		});
	} catch (err) {
		// Gère les erreurs réseau, CORS ou de traitement
		console.error(`Erreur de chargement pour ${feedConfig.id}:`, err);
		displayError(container, err.message);
	}
};

// Exécute les deux requêtes en parallèle (pour un chargement plus rapide)
const runAllFeeds = async () => {
	// Si un problème NetworkError persiste, cela signifie que
	// votre environnement (Firewall, VPN, FAI) bloque toute connexion externe.
	await Promise.all(FEEDS.map(fetchRssFeed));
};

runAllFeeds();
</script>
<p style="margin: 0;">
<footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (fr)</a></p></footer></p>
</body>
</html>

🇫🇷 France (Le Monde)

Chargement des actualités...

💻 Informatique & Technologie (monde)

Chargement des actualités...