Actualités

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Toutes les actualités en temps réel sont disponibles" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.7, viewport-fit=cover" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='88'>📰</text></svg>" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<link rel="canonical" href="https://feuille-heures-angelique.alwaysdata.net/plus/all/Actualites.html" />
<title>Actualités France & Tech</title>
<meta property="og:type" content="website" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:site_name" content="Feuille d'heures Angélique" />
<meta property="og:title" content="Partage de liens" />
<meta property="og:description" content="Toutes les actualités en temps réel" />
<meta property="og:url" content="https://feuille-heures-angelique.alwaysdata.net/plus/all/Actualites.html" />
<meta property="og:image" content="https://feuille-heures-angelique.alwaysdata.net/plus/preview.png" />
<meta property="og:image:alt" content="Aperçu du site" />
<meta name="author" content="sync" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Toutes les actualités en temps réel" />
<meta name="twitter:description" content="Partage de liens et bannières." />
<meta name="twitter:image" content="https://feuille-heures-angelique.alwaysdata.net/plus/preview.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#AABBAE" />
<meta name="application-name" content="Toutes les actualités en temps réel" />
<meta name="format-detection" content="telephone=no" />
<!-- Create By sync - https://feuille-heures-angelique.alwaysdata.net - (site ver:9.0.0) -->
<style>
html{scroll-behavior:smooth;}
html, body {
	margin: 20px;
	background-color: #BDFEFF;
	color: #a0a0a0;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: white;
	text-align: center;
	padding-top: env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

h1 {text-align: center; color: #222; margin-bottom: 30px;}
h2 {padding-bottom: 8px; margin-bottom: 15px; border-bottom: 3px solid #a0a0a0; color: #222;}

.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>

<script>
const PROXY_API = 'https://api.rss2json.com/v1/api.json?rss_url=';
// Définition des flux RSS
const FEEDS = [
	{
		id: 'france-news',
		url: 'https://www.lemonde.fr/rss/en_continu.xml', // Flux Le Monde (général)
		count: 8
	},
	{
		id: 'tech-news',
		url: 'https://www.zdnet.fr/feeds/rss/',
		count: 8
	}
];

/* 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();
/***
Page Actualités France & Tech réalisé par sync - 2026 - (𝓥er:1.0)
Auteur : Feuille d'heures Angélique
Site : https://feuille-heures-angelique.alwaysdata.net/plus/Page_Divers.html

Licence :
- Usage personnel autorisé
- Modification autorisée
- Redistribution autorisée uniquement avec crédit visible
- Interdiction de revente et suppression de l’auteur

Ce projet reste la propriété de son auteur original.
***/
</script>
<div style="margin: 10px;">
<footer style="position:relative; margin:0 auto; width:330px; 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; color:#5B4A00;"><a href="https://feuille-heures-angelique.alwaysdata.net/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'heures Angélique</a> <small>(𝓥er:1.0)</small></footer></div><p> </p>
</body>
</html>
🇫🇷 France (Le Monde)

Chargement des actualités...
💻 Informatique & Technologie (monde)

Chargement des actualités...