58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Agrégateur de films pour parents</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #252525; color: #ececec; }
|
|
.film { border:1px solid #444; margin:16px 0; padding:16px; border-radius: 6px; background: #181818; }
|
|
.film img { max-height: 180px; float:right; margin-left:16px; }
|
|
.film h2 { margin-top:0;}
|
|
.searchbox { margin:32px 0; }
|
|
input[type="text"] { font-size:1.2em; width:22em; background:#111; color:#fff; border:1px solid #444; border-radius:4px; padding:6px; }
|
|
button { font-size:1.1em; padding:6px 14px; background:#333; color:#fff; border-radius:4px; border:1px solid #555; }
|
|
.marks { font-size:0.95em; color:#b4ffb4; margin-bottom:6px; }
|
|
.details { font-size:0.93em; color: #ffbdbd;}
|
|
.year { color:#aaa;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Cinécheck Agrégateur</h1>
|
|
<div class="searchbox">
|
|
<input type="text" id="q" placeholder="Recherche... (ex: Minecraft)" />
|
|
<button onclick="search()">Go</button>
|
|
</div>
|
|
<div id="films"></div>
|
|
<script>
|
|
async function search() {
|
|
const q = document.getElementById('q').value.trim();
|
|
if (!q) return;
|
|
document.getElementById('films').innerHTML = 'Loading...';
|
|
const res = await fetch(`http://localhost:3000/search?q=${encodeURIComponent(q)}`);
|
|
const films = await res.json();
|
|
if (!Array.isArray(films) || !films.length) {
|
|
document.getElementById('films').innerHTML = "Rien trouvé. Essaie autre chose.";
|
|
return;
|
|
}
|
|
document.getElementById('films').innerHTML = '';
|
|
films.forEach(f => {
|
|
const div = document.createElement('div');
|
|
div.className = 'film';
|
|
div.innerHTML = `
|
|
<h2>${f.title} ${f.year ? `<span class="year">(${f.year})</span>` : ''}</h2>
|
|
${f.img ? `<img src="${f.img}" alt="cover">` : ""}
|
|
<div class="marks"><b>Conseil d'âge:</b> ${f.marks ? f.marks.join(', ') : '-'}</div>
|
|
<div class="summary">${f.summary || 'Pas de résumé.'}</div>
|
|
<ul class="details">
|
|
${f.details && f.details.length ? f.details.map(d => `<li><b>${d.type}:</b> ${d.description}</li>`).join('') : ''}
|
|
</ul>
|
|
<a href="${f.link}" target="_blank" style="color:#7af;">Voir sur Cinecheck</a>
|
|
`;
|
|
document.getElementById('films').appendChild(div);
|
|
});
|
|
}
|
|
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
|
|
</script>
|
|
</body>
|
|
</html>
|