|
|
@ -2,7 +2,8 @@
|
|
|
|
<html lang="fr">
|
|
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>Agrégateur Multi-Source</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
<title>CineKids: Recommandations d'âge requis pour films et séries tv :-)</title>
|
|
|
|
<style>
|
|
|
|
<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; }
|
|
|
|
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; }
|
|
|
|
.container { max-width: 1200px; margin: auto; }
|
|
|
@ -35,12 +36,62 @@
|
|
|
|
min-width:2.5em;display:inline-block;letter-spacing:0.05em;
|
|
|
|
min-width:2.5em;display:inline-block;letter-spacing:0.05em;
|
|
|
|
margin-left:10px;transition:background 0.2s;
|
|
|
|
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>
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<img src="/logo.png" alt="Logo Cine Kids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
|
|
|
|
<img src="/logo.png" alt="Logo CineKids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
|
|
|
|
<h1>Ciné-agrégateur Multi-Source</h1>
|
|
|
|
<h1>CinéKids - Recommandations d'âge requis pour films et séries tv</h1>
|
|
|
|
<div class="searchbox">
|
|
|
|
<div class="searchbox">
|
|
|
|
<input type="text" id="q" placeholder="Ex: Dune, Spider-Man, Oppenheimer..." />
|
|
|
|
<input type="text" id="q" placeholder="Ex: Dune, Spider-Man, Oppenheimer..." />
|
|
|
|
<button onclick="search()">Rechercher</button>
|
|
|
|
<button onclick="search()">Rechercher</button>
|
|
|
@ -123,13 +174,23 @@
|
|
|
|
badge.textContent = val + '+';
|
|
|
|
badge.textContent = val + '+';
|
|
|
|
badge.style.background = getAgeColor(val);
|
|
|
|
badge.style.background = getAgeColor(val);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
async function search() {
|
|
|
|
let lastQuery = '';
|
|
|
|
|
|
|
|
let lastResults = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function search(force = false) {
|
|
|
|
const query = document.getElementById('q').value.trim();
|
|
|
|
const query = document.getElementById('q').value.trim();
|
|
|
|
if (!query) return;
|
|
|
|
if (!query) return;
|
|
|
|
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
|
|
|
const maxAge = parseInt(document.getElementById('maxAge').value, 10);
|
|
|
|
window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
|
|
|
|
window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
|
|
|
|
const filmsDiv = document.getElementById('films');
|
|
|
|
const filmsDiv = document.getElementById('films');
|
|
|
|
filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
|
|
|
|
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 {
|
|
|
|
try {
|
|
|
|
const base = window.location.origin;
|
|
|
|
const base = window.location.origin;
|
|
|
|
const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
|
|
|
|
const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
|
|
|
@ -138,16 +199,8 @@
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let films = await response.json();
|
|
|
|
let films = await response.json();
|
|
|
|
if (!Array.isArray(films) || !films.length) {
|
|
|
|
|
|
|
|
filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Filtres sources inutiles (pas de description et/ou pas d'âge)
|
|
|
|
|
|
|
|
films = films.map(film => {
|
|
|
|
films = films.map(film => {
|
|
|
|
film.results = film.results.filter(r => {
|
|
|
|
film.results = film.results.filter(r => {
|
|
|
|
// On considère valide si :
|
|
|
|
|
|
|
|
// - summary ou parentsNeedToKnow ou details.summary >= 8 chars
|
|
|
|
|
|
|
|
// - ET un âge existe (age, normalizedMarks, marks, details.ageLegal, etc)
|
|
|
|
|
|
|
|
let hasDescription =
|
|
|
|
let hasDescription =
|
|
|
|
(r.summary && r.summary.length >= 8) ||
|
|
|
|
(r.summary && r.summary.length >= 8) ||
|
|
|
|
(r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
|
|
|
|
(r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
|
|
|
@ -159,8 +212,18 @@
|
|
|
|
return film;
|
|
|
|
return film;
|
|
|
|
}).filter(film => film.results.length > 0);
|
|
|
|
}).filter(film => film.results.length > 0);
|
|
|
|
|
|
|
|
|
|
|
|
if (isFinite(maxAge)) {
|
|
|
|
lastQuery = query;
|
|
|
|
films = films.filter(film => {
|
|
|
|
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 uniqueResults = [];
|
|
|
|
const seenSources = new Set();
|
|
|
|
const seenSources = new Set();
|
|
|
|
film.results.forEach(r => {
|
|
|
|
film.results.forEach(r => {
|
|
|
@ -174,6 +237,9 @@
|
|
|
|
return Math.max(...ages) <= maxAge;
|
|
|
|
return Math.max(...ages) <= maxAge;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderFilms(films) {
|
|
|
|
|
|
|
|
const filmsDiv = document.getElementById('films');
|
|
|
|
if (!films.length) {
|
|
|
|
if (!films.length) {
|
|
|
|
filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
|
|
|
|
filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
|
|
|
|
return;
|
|
|
|
return;
|
|
|
@ -194,7 +260,7 @@
|
|
|
|
<td style="vertical-align:top;">
|
|
|
|
<td style="vertical-align:top;">
|
|
|
|
<div style="text-align:center;">
|
|
|
|
<div style="text-align:center;">
|
|
|
|
<div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
|
|
|
|
<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;">` : ''}
|
|
|
|
${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>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
|
|
|
|
<td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
|
|
|
@ -261,16 +327,17 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
html += '</tbody></table>';
|
|
|
|
html += '</tbody></table>';
|
|
|
|
filmsDiv.innerHTML = html;
|
|
|
|
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() {
|
|
|
|
document.getElementById('maxAge').addEventListener('input', function() {
|
|
|
|
updateMaxAgeDisplay();
|
|
|
|
updateMaxAgeDisplay();
|
|
|
|
search();
|
|
|
|
// 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', () => {
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
const q = params.get('q');
|
|
|
|
const q = params.get('q');
|
|
|
@ -281,10 +348,11 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (q) {
|
|
|
|
if (q) {
|
|
|
|
document.getElementById('q').value = q;
|
|
|
|
document.getElementById('q').value = q;
|
|
|
|
search();
|
|
|
|
search(true); // force fetch initiale
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
|
|
|
|
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); });
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|