<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Agrégateur Parents</title>
<style>
.film { border:1px solid #ccc; margin:10px; padding:10px; }
.film img { max-height: 180px; }
</style>
</head>
<body>
<div id="films"></div>
<script>
// Appelle ton backend qui utilise le module JS au-dessus
// Ici, on simule avec des données
const films = [
{
title: "A Minecraft Movie",
year: "2025",
imgSrc: "https://www.cinecheck.be/media/n1hojmmh/a-minecraft-movie-ov-_ps_1_jpg_sd-high_2025-warner-bros-entertainment-inc-all-rights-reserved-photo-credit-courtesy-warner-bros-pictures.jpg",
link: "https://www.cinecheck.be/films/a-minecraft-movie/",
marks: ["9 ans", "Peur"],
summary: "A Minecraft Movie, van Warner Bros. Pictures en Legendary Pictures, ...",
details: [
{ type: "angst", description: "La film contient des scènes effrayantes..." }
]
}
];
const container = document.getElementById('films');
films.forEach(f => {
const div = document.createElement('div');
div.className = 'film';
div.innerHTML = `
<h2>${f.title} (${f.year || "?"})</h2>
<img src="${f.imgSrc}" alt="cover">
<div><b>Conseil d'âge:</b> ${f.marks.join(', ')}</div>
<p>${f.summary}</p>
<ul>
${f.details.map(d => `<li><b>${d.type}:</b> ${d.description}</li>`).join('')}
</ul>
<a href="${f.link}" target="_blank">Voir sur Cinecheck</a>
`;
container.appendChild(div);
});
</script>
</body>
</html>