48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
<!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>
|