<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CineKids: Recommandations d'âge requis pour films et séries tv :-)</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; } @media (max-width: 800px) { .searchbox { flex-direction: column; align-items: stretch; } .searchbox input[type="text"] { width: 100%; margin-bottom: 10px; } .searchbox button { margin-left: 0; margin-bottom: 10px; } .maxagebox { margin-left: 0; margin-top: 10px; justify-content: center; } .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; width: 100% !important; } .results-table thead { display: none; } .results-table tr { margin-bottom: 20px; border-bottom: 1px solid #333; } .results-table td { border: none; padding: 10px 0; text-align: left; } .results-table td:first-child div { font-size: 1.2em; margin-bottom: 10px; } .results-table img, .source-block img { width: 100% !important; height: auto !important; display: block; margin: 10px 0 !important; float: none !important; } } </style> </head> <body> <div class="container"> <img src="/logo.png" alt="Logo CineKids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;"> <h1>CinéKids - Recommandations d'âge requis pour films et séries tv</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); } let lastQuery = ''; let lastResults = []; async function search(force = false) { 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>'; // Si on a déjà cherché ce terme, et pas force, on ne refait pas le fetch if (!force && lastQuery === query && lastResults.length) { renderFilms(filterFilmsByMaxAge(lastResults, maxAge)); return; } 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(); films = films.map(film => { film.results = film.results.filter(r => { let hasDescription = (r.summary && r.summary.length >= 8) || (r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) || (r.details && r.details.summary && r.details.summary.length >= 8); let ages = getAllAges([r]); let hasAge = ages && ages.length > 0; return hasDescription && hasAge; }); return film; }).filter(film => film.results.length > 0); lastQuery = query; lastResults = films; renderFilms(filterFilmsByMaxAge(films, maxAge)); } catch (error) { console.error('Search function error:', error); filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`; } } function filterFilmsByMaxAge(films, maxAge) { if (!isFinite(maxAge)) return films; return 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; }); } function renderFilms(films) { const filmsDiv = document.getElementById('films'); 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:200px;max-height:250px;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; } document.getElementById('maxAge').addEventListener('input', function() { updateMaxAgeDisplay(); // Pas de fetch, juste filtre en front const query = document.getElementById('q').value.trim(); if (!query || !lastResults.length) return; const maxAge = parseInt(document.getElementById('maxAge').value, 10); renderFilms(filterFilmsByMaxAge(lastResults, maxAge)); }); 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(true); // force fetch initiale } }); document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); }); </script> </body> </html>