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

22
frontend/templates/base.html
View File

@@ -4,14 +4,30 @@
<meta charset="UTF-8">
<title>{% block title %}Yggtorrent App{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
/* Position du fond Matrix */
#matrix {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none; /* pour éviter tout blocage des clics */
}
</style>
</head>
<body>
<!-- Fond Matrix -->
{% block matrix %}{% endblock %}
<header>
<h1>Les films de Lulu</h1>
{% if user %}
<p>Connecté en tant que {{ user }}</p>
<form action="{{ url_for('logout') }}" method="GET" style="display:inline">
<p class="user-info">
Connecté en tant que {{ user }}
</p>
<form action="{{ url_for('logout') }}" method="GET" style="display:inline;">
<button type="submit">Déconnexion</button>
</form>
{% endif %}

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 %}

4
frontend/templates/login.html
View File

@@ -4,9 +4,9 @@
{% block content %}
<form action="/login" method="POST">
<label>Nom d'utilisateur</label>
<label class="bold-label">Nom d'utilisateur</label>
<input type="text" name="username" required>
<label>Mot de passe</label>
<label class="bold-label">Mot de passe</label>
<input type="password" name="password" required>
<button type="submit">Se connecter</button>
</form>

5
frontend/templates/search_results.html
View File

@@ -1,5 +1,10 @@
{% extends 'base.html' %}
{% block matrix %}
<canvas id="matrix"></canvas>
<script src="{{ url_for('static', filename='js/matrix.js') }}"></script>
{% endblock %}
{% block content %}
<h2>Résultats pour "{{ query }}"</h2>
<table id="results-table">