273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Agrégateur Multi-Source</title>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; font-size: 14px; }
|
|
.container { max-width: 1200px; margin: auto; }
|
|
h1 { color: #fff; text-align: center; }
|
|
.searchbox { margin: 20px 0 30px; display: flex; justify-content: center; align-items:center; }
|
|
input[type="text"] { font-size: 1.1em; width: clamp(200px, 60%, 500px); background: #2c2c2c; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 10px 12px; }
|
|
button { font-size: 1.1em; padding: 10px 18px; background: #007aff; color: #fff; border-radius: 4px; border: none; margin-left: 10px; cursor: pointer; transition: background-color 0.2s; }
|
|
button:hover { background: #005bb5; }
|
|
#films { margin-top: 20px; }
|
|
.results-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
|
|
.results-table th, .results-table td { border: 1px solid #333; padding: 12px; text-align: left; vertical-align: top; }
|
|
.results-table th { background-color: #252525; color: #ccc; font-weight: 600; }
|
|
.results-table td:nth-child(1) { width: 25%; }
|
|
.results-table td:nth-child(2) { width: 10%; }
|
|
.results-table td:nth-child(3) { width: 65%; }
|
|
.source-block { border: 1px solid #383838; border-radius: 4px; padding: 10px; margin-bottom: 10px; background-color: #222; }
|
|
.source-block:last-child { margin-bottom: 0; }
|
|
.source-name { font-weight: bold; color: #58a6ff; margin-bottom: 8px; font-size: 1.1em; }
|
|
.source-block img { max-height: 100px; float: right; margin-left: 10px; border-radius: 3px; }
|
|
.source-block p { margin: 4px 0; line-height: 1.5; }
|
|
.source-block a { color: #79c0ff; text-decoration: none; }
|
|
.source-block a:hover { text-decoration: underline; }
|
|
.year { color: #aaa; }
|
|
.loader { text-align: center; font-size: 1.2em; color: #888; }
|
|
.no-results { text-align: center; font-size: 1.1em; color: #999; margin-top:30px;}
|
|
.maxagebox { display:flex;align-items:center;margin-left:25px;}
|
|
.slider-age-badge {
|
|
font-size:1.25em;font-weight:bold;
|
|
color:#fff;border-radius:0.5em;padding:2px 10px;
|
|
min-width:2.5em;display:inline-block;letter-spacing:0.05em;
|
|
margin-left:10px;transition:background 0.2s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<img src="/logo.png" alt="Logo Cine Kids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
|
|
<h1>Ciné-agrégateur Multi-Source</h1>
|
|
<div class="searchbox">
|
|
<input type="text" id="q" placeholder="Ex: Dune, Spider-Man, Oppenheimer..." />
|
|
<button onclick="search()">Rechercher</button>
|
|
<div class="maxagebox">
|
|
<label for="maxAge" style="margin-right:9px;">Âge max :</label>
|
|
<input type="range" id="maxAge" min="3" max="21" value="21" step="1" style="vertical-align:middle;width:140px;" oninput="updateMaxAgeDisplay()">
|
|
<span id="maxAgeDisplay" class="slider-age-badge">21+</span>
|
|
</div>
|
|
</div>
|
|
<div id="films"></div>
|
|
</div>
|
|
<script>
|
|
function getAgeColor(age) {
|
|
age = parseInt(age, 10);
|
|
if (isNaN(age)) return '#999';
|
|
if (age <= 6) return '#19c94a';
|
|
if (age <= 9) return '#68c3ee';
|
|
if (age <= 12) return '#ffe45e';
|
|
if (age <= 16) return '#ffb154';
|
|
if (age <= 18) return '#ff6384';
|
|
return '#e2525c';
|
|
}
|
|
function ageBadge(age) {
|
|
if (!age) return '';
|
|
const c = getAgeColor(age);
|
|
return `<span class="age-badge" style="
|
|
display:inline-block;
|
|
font-size:1.2em;
|
|
min-width:2.5em;
|
|
font-weight:bold;
|
|
color:#222;
|
|
background:${c};
|
|
border-radius:0.4em;
|
|
text-align:center;
|
|
margin-right:0.7em;
|
|
padding:0.15em 0.7em;
|
|
box-shadow:0 2px 8px #0003;
|
|
letter-spacing:0.03em;
|
|
">${age}+</span>`;
|
|
}
|
|
function shortSummary(str, n = 200) {
|
|
if (!str) return '-';
|
|
if (str.length <= n) return str;
|
|
return str.slice(0, n).replace(/\s+\S*$/, '') + '…';
|
|
}
|
|
function getAllAges(results) {
|
|
const ages = [];
|
|
results.forEach(r => {
|
|
if (r.source === 'commonsense' && r.age && !isNaN(parseInt(r.age))) {
|
|
ages.push(parseInt(r.age));
|
|
}
|
|
else if (r.source === 'cinecheck') {
|
|
if (Array.isArray(r.normalizedMarks) && r.normalizedMarks.length) {
|
|
r.normalizedMarks.forEach(a => { if (!isNaN(parseInt(a))) ages.push(parseInt(a)); });
|
|
} else if (r.marks && r.marks.length) {
|
|
r.marks.forEach(a => {
|
|
const n = parseInt(a);
|
|
if (!isNaN(n)) ages.push(n);
|
|
});
|
|
}
|
|
}
|
|
else if (r.source === 'filmages') {
|
|
if (r.details && r.details.ageLegal && !isNaN(parseInt(r.details.ageLegal))) {
|
|
ages.push(parseInt(r.details.ageLegal));
|
|
}
|
|
if (r.details && r.details.ageSuggested && !isNaN(parseInt(r.details.ageSuggested))) {
|
|
ages.push(parseInt(r.details.ageSuggested));
|
|
}
|
|
}
|
|
else if (r.age && !isNaN(parseInt(r.age))) {
|
|
ages.push(parseInt(r.age));
|
|
}
|
|
});
|
|
return ages;
|
|
}
|
|
function updateMaxAgeDisplay() {
|
|
var el = document.getElementById('maxAge');
|
|
var badge = document.getElementById('maxAgeDisplay');
|
|
var val = el.value || 21;
|
|
badge.textContent = val + '+';
|
|
badge.style.background = getAgeColor(val);
|
|
}
|
|
async function search() {
|
|
const query = document.getElementById('q').value.trim();
|
|
if (!query) return;
|
|
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
|
window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
|
|
const filmsDiv = document.getElementById('films');
|
|
filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
|
|
try {
|
|
const base = window.location.origin;
|
|
const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
|
|
if (!response.ok) {
|
|
filmsDiv.innerHTML = `<p class="no-results">Error: ${response.status} ${response.statusText || 'Backend unreachable.'}</p>`;
|
|
return;
|
|
}
|
|
let films = await response.json();
|
|
if (!Array.isArray(films) || !films.length) {
|
|
filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
|
|
return;
|
|
}
|
|
if (isFinite(maxAge)) {
|
|
films = films.filter(film => {
|
|
const uniqueResults = [];
|
|
const seenSources = new Set();
|
|
film.results.forEach(r => {
|
|
if (!seenSources.has(r.source)) {
|
|
uniqueResults.push(r);
|
|
seenSources.add(r.source);
|
|
}
|
|
});
|
|
const ages = getAllAges(uniqueResults);
|
|
if (ages.length === 0) return true;
|
|
return Math.max(...ages) <= maxAge;
|
|
});
|
|
}
|
|
if (!films.length) {
|
|
filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
|
|
return;
|
|
}
|
|
let html = `<table class="results-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Year</th>
|
|
<th>Information sources</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>`;
|
|
films.forEach(film => {
|
|
const allImgs = film.results.map(r => r.img).filter(Boolean);
|
|
const mainImg = allImgs.length ? allImgs[0] : null;
|
|
html += `<tr>
|
|
<td style="vertical-align:top;">
|
|
<div style="text-align:center;">
|
|
<div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
|
|
${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
|
|
</div>
|
|
</td>
|
|
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
|
|
<td>`;
|
|
const uniqueResults = [];
|
|
const seenSources = new Set();
|
|
film.results.forEach(r => {
|
|
if (!seenSources.has(r.source)) {
|
|
uniqueResults.push(r);
|
|
seenSources.add(r.source);
|
|
}
|
|
});
|
|
uniqueResults.forEach(r => {
|
|
html += `<div class="source-block">`;
|
|
html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
|
|
if (r.link) {
|
|
html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
|
|
}
|
|
if (r.source === 'commonsense') {
|
|
html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
|
|
html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
|
|
if (r.details && r.details.length) {
|
|
html += `<p><b>Details (CSM):</b></p><ul>`;
|
|
r.details.forEach(d => {
|
|
html += `<li>${d.type}: ${d.score}/5 - ${shortSummary(d.description, 80)}</li>`;
|
|
});
|
|
html += `</ul>`;
|
|
}
|
|
}
|
|
else if (r.source === 'cinecheck') {
|
|
let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
|
|
? r.normalizedMarks
|
|
: (r.marks || []).map(x => {
|
|
let n = parseInt((x + '').replace(/\d+/, ''), 10);
|
|
return isNaN(n) ? null : n;
|
|
}).filter(n => n !== null && !isNaN(n));
|
|
let minAge = numericAges.length ? Math.min(...numericAges) : '';
|
|
html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
|
|
html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
|
|
if (r.details && r.details.length) {
|
|
html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
|
|
}
|
|
}
|
|
else if (r.source === 'filmages') {
|
|
html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
|
|
html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
|
|
html += `<p><b>Suggested age (Filmages):</b> ${ageBadge(r.details.ageSuggested)}</p>`;
|
|
html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
|
|
html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
|
|
if (r.details.indications && r.details.indications.length) {
|
|
html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
|
|
}
|
|
if (r.details.counterIndications && r.details.counterIndications.length) {
|
|
html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
|
|
}
|
|
}
|
|
else {
|
|
html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
|
|
html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
|
|
}
|
|
html += `</div>`;
|
|
});
|
|
html += `</td></tr>`;
|
|
});
|
|
html += '</tbody></table>';
|
|
filmsDiv.innerHTML = html;
|
|
} catch (error) {
|
|
console.error('Search function error:', error);
|
|
filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
|
|
}
|
|
}
|
|
document.getElementById('maxAge').addEventListener('input', function() {
|
|
updateMaxAgeDisplay();
|
|
search();
|
|
});
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const q = params.get('q');
|
|
const maxAge = params.get('maxAge');
|
|
if (maxAge) {
|
|
document.getElementById('maxAge').value = maxAge;
|
|
updateMaxAgeDisplay();
|
|
}
|
|
if (q) {
|
|
document.getElementById('q').value = q;
|
|
search();
|
|
}
|
|
});
|
|
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
|
|
</script>
|
|
</body>
|
|
</html>
|