151 lines
7.0 KiB
HTML
151 lines
7.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Tableau de bord{% 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;">
|
|
|
|
<!-- 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">
|
|
<option value="">Tout</option>
|
|
<optgroup label="🎬 Film / Vidéo">
|
|
<option value="2178">Film/Vidéo : Animation</option>
|
|
<option value="2179">Film/Vidéo : Animation Série</option>
|
|
<option value="2180">Film/Vidéo : Concert</option>
|
|
<option value="2181">Film/Vidéo : Documentaire</option>
|
|
<option value="2182">Film/Vidéo : Émission TV</option>
|
|
<option value="2183">Film/Vidéo : Film</option>
|
|
<option value="2184">Film/Vidéo : Série TV</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="15">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ligne 3 : Série -->
|
|
<div style="display: flex; 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>
|
|
|
|
<!-- Champs conditionnels -->
|
|
<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_number" min="1" step="1" placeholder="1">
|
|
</div>
|
|
</div>
|
|
<!-- Bouton Recherche sur le côté -->
|
|
<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');
|
|
|
|
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';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|