Lucas/ygg-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add matrix background and prepare filters

Browse Source
This commit is contained in:
Lucas
2025-11-11 18:48:31 +01:00
parent 06d0e1c426
commit b4b75f9545
7 changed files with 304 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/templates/dashboard.html
View File

@@ -2,25 +2,149 @@
{% 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">
<label>Catégorie</label>
<select name="category_id">
<option value="2178">Films d’animation</option>
<option value="2179">Séries d’animation / Mangas</option>
<option value="2181">Documentaires</option>
<option value="2182">Émissions TV</option>
<option value="2183">Films</option>
<option value="2184">Séries</option>
</select>
<form id="search-form" action="/search" method="GET" style="display: flex; gap: 10px; align-items: flex-stretch; flex-wrap: wrap;">
<label>Recherche</label>
<input type="text" name="query" required>
<!-- Colonne principale des filtres -->
<div style="display: flex; flex-direction: column; gap: 10px;">
<button type="submit">Rechercher</button>
<!-- 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 %}