177 lines
8.0 KiB
HTML
177 lines
8.0 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block title %}Les films de Lulu{% endblock %}
|
||
|
||
{% block matrix %}
|
||
<canvas id="matrix"></canvas>
|
||
<script src="{{ url_for('static', filename='js/matrix.js') }}"></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<form id="search-form" action="/search" method="GET" style="display: flex; gap: 10px; align-items: flex-stretch; flex-wrap: wrap;">
|
||
|
||
<!-- Colonne principale des filtres -->
|
||
<div style="display: flex; flex-direction: column; gap: 10px;">
|
||
<div style="display: flex; flex-direction: column;">
|
||
<p class="user-info" style="text-align: center;">
|
||
Conseils de recherche 😊
|
||
</p>
|
||
<p class="user-info">
|
||
- Préciser une catégorie<br>
|
||
- Essayer les titres en anglais<br>
|
||
- Ajuster la taille maximale
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Ligne 1 : Catégorie et Recherche -->
|
||
<div style="display: flex; gap: 10px; align-items: flex-start">
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label class="bold-label">Catégorie</label>
|
||
<select name="category_id" id="category_id">
|
||
<option value="">Tout</option>
|
||
<optgroup label="🎬 Film / Vidéo">
|
||
<option value="2183" selected>Film/Vidéo : Film</option>
|
||
<option value="2184">Film/Vidéo : Série TV</option>
|
||
<option value="2178">Film/Vidéo : Animation</option>
|
||
<option value="2179">Film/Vidéo : Animation Série</option>
|
||
<option value="2181">Film/Vidéo : Documentaire</option>
|
||
<option value="2182">Film/Vidéo : Émission TV</option>
|
||
<option value="2180">Film/Vidéo : Concert</option>
|
||
<option value="2185">Film/Vidéo : Spectacle</option>
|
||
<option value="2186">Film/Vidéo : Sport</option>
|
||
<option value="2187">Film/Vidéo : Vidéo-clips</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="🎧 Audio">
|
||
<option value="2147">Audio : Karaoké</option>
|
||
<option value="2148">Audio : Musique</option>
|
||
<option value="2150">Audio : Podcast / Radio</option>
|
||
<option value="2149">Audio : Samples</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="💻 Application">
|
||
<option value="2177">Application : Autre</option>
|
||
<option value="2176">Application : Formation</option>
|
||
<option value="2171">Application : Linux</option>
|
||
<option value="2172">Application : MacOS</option>
|
||
<option value="2174">Application : Smartphone</option>
|
||
<option value="2175">Application : Tablette</option>
|
||
<option value="2173">Application : Windows</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="🕹️ Jeu vidéo">
|
||
<option value="2167">Jeu vidéo : Autre</option>
|
||
<option value="2159">Jeu vidéo : Linux</option>
|
||
<option value="2160">Jeu vidéo : MacOS</option>
|
||
<option value="2161">Jeu vidéo : Windows</option>
|
||
<option value="2162">Jeu vidéo : Microsoft / Xbox</option>
|
||
<option value="2163">Jeu vidéo : Nintendo</option>
|
||
<option value="2164">Jeu vidéo : Sony / PlayStation</option>
|
||
<option value="2165">Jeu vidéo : Smartphone</option>
|
||
<option value="2166">Jeu vidéo : Tablette</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="📚 eBook">
|
||
<option value="2151">eBook : Audio</option>
|
||
<option value="2152">eBook : BDs</option>
|
||
<option value="2153">eBook : Comics</option>
|
||
<option value="2154">eBook : Livres</option>
|
||
<option value="2155">eBook : Mangas</option>
|
||
<option value="2156">eBook : Presse</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column; width: 100%; box-sizing: border-box;">
|
||
<label class="bold-label">Recherche</label>
|
||
<input type="text" name="query" placeholder="Gladiator" required>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ligne 2 : Langue et Taille max -->
|
||
<div style="display: flex; gap: 10px; align-items: flex-start;">
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label class="bold-label">Langue</label>
|
||
<select name="language">
|
||
<option value="">Toutes</option>
|
||
<option value="VO">VO</option>
|
||
<option value="VF">VF</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column;">
|
||
<label class="bold-label">Taille max (Go)</label>
|
||
<input type="number" name="max_size" min="1" step="1" value="5">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ligne 3 : Série -->
|
||
<div id="serie-section" style="display: none; flex-direction: column; gap: 5px;">
|
||
<label class="bold-label">Série</label>
|
||
<div style="display: flex; gap: 10px;">
|
||
<label><input type="radio" name="serie_type" value="all" checked> Tout</label>
|
||
<label><input type="radio" name="serie_type" value="season"> Saison entière</label>
|
||
<label><input type="radio" name="serie_type" value="episode"> Épisode précis</label>
|
||
</div>
|
||
|
||
<div id="season-field" style="display: none; margin-top: 5px;">
|
||
<label>Saison</label>
|
||
<input type="number" name="season" min="1" step="1" placeholder="1">
|
||
</div>
|
||
|
||
<div id="episode-field" style="display: none; margin-top: 5px;">
|
||
<label>Épisode</label>
|
||
<input type="number" name="episode" min="1" step="1" placeholder="1">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: center;">
|
||
<button type="submit" style="padding: 5px 30px;">Rechercher</button>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
|
||
<div id="results">
|
||
<!-- Les résultats de recherche seront injectés ici -->
|
||
</div>
|
||
|
||
<script>
|
||
const radioButtons = document.querySelectorAll('input[name="serie_type"]');
|
||
const seasonField = document.getElementById('season-field');
|
||
const episodeField = document.getElementById('episode-field');
|
||
const serieSection = document.getElementById('serie-section');
|
||
const categorySelect = document.getElementById('category_id');
|
||
|
||
// Gestion des radio boutons (saison/épisode)
|
||
radioButtons.forEach(radio => {
|
||
radio.addEventListener('change', () => {
|
||
if (radio.value === 'all') {
|
||
seasonField.style.display = 'none';
|
||
episodeField.style.display = 'none';
|
||
} else if (radio.value === 'season') {
|
||
seasonField.style.display = 'block';
|
||
episodeField.style.display = 'none';
|
||
} else if (radio.value === 'episode') {
|
||
seasonField.style.display = 'block';
|
||
episodeField.style.display = 'block';
|
||
}
|
||
});
|
||
});
|
||
|
||
// Affiche la section Série uniquement si la catégorie correspond à une série
|
||
function updateSerieVisibility() {
|
||
const selected = categorySelect.value;
|
||
if (selected === "2184" || selected === "2179" || selected === "2182") {
|
||
serieSection.style.display = "flex";
|
||
} else {
|
||
serieSection.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// Exécute au chargement et lors d’un changement de catégorie
|
||
categorySelect.addEventListener('change', updateSerieVisibility);
|
||
updateSerieVisibility();
|
||
</script>
|
||
{% endblock %}
|