root
87f245d3fc
- Sunset Glitch color palette applied to all templates - Font Awesome icons throughout UI - Download manager with parallel queue and progress tracking - Settings page with dynamic configuration - Recommendations router enhanced with scoring - Local vendor libs (Alpine.js, HTMX) for offline support - Auto test suite with screenshots - Series releases list component - New download model
203 lines
14 KiB
HTML
203 lines
14 KiB
HTML
<div class="settings-container section-container">
|
|
<div class="section-header">
|
|
<h2>Parametres</h2>
|
|
</div>
|
|
|
|
<!-- General Preferences -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #2a2d32;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">General</h3>
|
|
|
|
<form id="settings-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="default_lang">Langue par defaut</label>
|
|
<select name="default_lang" id="default_lang" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;">
|
|
<option value="vostfr" {% if settings.default_lang == 'vostfr' %}selected{% endif %}>VOSTFR</option>
|
|
<option value="vf" {% if settings.default_lang == 'vf' %}selected{% endif %}>VF</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label for="theme">Theme</label>
|
|
<select name="theme" id="theme" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;">
|
|
<option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Sombre (Premium Dark)</option>
|
|
<option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Clair (Soon)</option>
|
|
<option value="oled" {% if settings.theme == 'oled' %}selected{% endif %}>OLED (Noir absolu)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label for="download_dir">Repertoire de telechargement</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="text" name="download_dir" id="download_dir" value="{{ settings.download_dir }}"
|
|
class="btn btn-secondary" style="flex: 1; text-align: left; padding: 12px 15px;">
|
|
</div>
|
|
<small style="color: var(--text-dim); font-size: 12px; margin-top: 5px; display: block;">
|
|
Repertoire ou les fichiers seront telecharges (defaut: downloads/)
|
|
</small>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="margin-top: 20px; width: 100%;" onclick="event.preventDefault(); saveSettings();">
|
|
<i class="fas fa-save"></i> Enregistrer les preferences
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Content Filters -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #2a2d32;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">Filtres de contenu</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="recommendations_filter">Recommande pour vous : afficher</label>
|
|
<select name="recommendations_filter" id="recommendations_filter" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;" onchange="saveFilter('recommendations_filter', this.value)">
|
|
<option value="all" {% if settings.recommendations_filter == 'all' %}selected{% endif %}>Les deux (Animes + Series)</option>
|
|
<option value="anime" {% if settings.recommendations_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.recommendations_filter == 'series' %}selected{% endif %}>Series uniquement</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 15px;">
|
|
<label for="releases_filter">Dernieres sorties : afficher</label>
|
|
<select name="releases_filter" id="releases_filter" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;" onchange="saveFilter('releases_filter', this.value)">
|
|
<option value="all" {% if settings.releases_filter == 'all' %}selected{% endif %}>Les deux (Animes + Series)</option>
|
|
<option value="anime" {% if settings.releases_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.releases_filter == 'series' %}selected{% endif %}>Series uniquement</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #2a2d32;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">Categories</h3>
|
|
<p style="color: var(--text-dim); font-size: 13px; margin-bottom: 15px;">Activez ou desactivez les categories. Au moins une doit rester active.</p>
|
|
|
|
<div style="display: flex; gap: 15px; flex-wrap: wrap;">
|
|
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: var(--bg-elevated); border-radius: 4px; border: 1px solid var(--secondary); display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 1.1rem;">Animes</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-dim);">Films et series anime</div>
|
|
</div>
|
|
<input type="checkbox" id="anime_enabled" {% if settings.anime_enabled %}checked{% endif %} onchange="toggleCategory('anime_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);">
|
|
</label>
|
|
|
|
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: var(--bg-elevated); border-radius: 4px; border: 1px solid var(--secondary); display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 1.1rem;">Series TV</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-dim);">Series americaines et europeennes</div>
|
|
</div>
|
|
<input type="checkbox" id="series_enabled" {% if settings.series_enabled %}checked{% endif %} onchange="toggleCategory('series_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Weight -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #2a2d32;">
|
|
<h3 style="margin-bottom: 5px; color: var(--primary);">Equilibre du fil d'actualite</h3>
|
|
<p style="color: var(--text-dim); font-size: 13px; margin-bottom: 20px;">
|
|
Definissez la proportion d'animes et de series affiches dans les recommandations et dernieres sorties.
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<label for="content_weight_mode" style="font-weight: 600; margin-bottom: 10px; display: block;">Mode</label>
|
|
<select name="content_weight_mode" id="content_weight_mode" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;" onchange="onWeightModeChange(this.value)">
|
|
<option value="auto" {% if settings.content_weight_mode == 'auto' %}selected{% endif %}>Automatique (basé sur vos telechargements)</option>
|
|
<option value="manual" {% if settings.content_weight_mode == 'manual' %}selected{% endif %}>Manuel</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Auto mode info -->
|
|
<div id="weight-auto-info" style="margin-top: 15px; padding: 15px; background: var(--bg-elevated); border-radius: 4px; border: 1px solid var(--secondary); display: {% if settings.content_weight_mode == 'auto' %}block{% else %}none{% endif %};">
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
|
|
<i class="fas fa-chart-pie" style="color: var(--primary);"></i>
|
|
<span style="font-weight: 600;">Analyse de vos telechargements</span>
|
|
</div>
|
|
<div id="weight-auto-details" style="font-size: 14px; color: var(--text-dim);">
|
|
Chargement...
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual mode controls -->
|
|
<div id="weight-manual-controls" style="margin-top: 15px; display: {% if settings.content_weight_mode == 'manual' %}block{% else %}none{% endif %};">
|
|
<div style="display: flex; gap: 15px; align-items: center;">
|
|
<div style="flex: 1;">
|
|
<label for="content_weight_anime" style="font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 8px;">
|
|
<i class="fas fa-dragon" style="color: var(--primary);"></i> Poids Animes
|
|
</label>
|
|
<input type="range" id="content_weight_anime_range" min="0" max="5" step="1" value="{{ settings.content_weight_anime }}"
|
|
style="width: 100%; accent-color: var(--primary);"
|
|
oninput="document.getElementById('content_weight_anime').value = this.value; updateWeightPreview();">
|
|
<div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-top: 2px;">
|
|
<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="content_weight_series" style="font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 8px;">
|
|
<i class="fas fa-tv" style="color: #6CB4EE;"></i> Poids Series
|
|
</label>
|
|
<input type="range" id="content_weight_series_range" min="0" max="5" step="1" value="{{ settings.content_weight_series }}"
|
|
style="width: 100%; accent-color: #6CB4EE;"
|
|
oninput="document.getElementById('content_weight_series').value = this.value; updateWeightPreview();">
|
|
<div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-top: 2px;">
|
|
<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="content_weight_anime" value="{{ settings.content_weight_anime }}">
|
|
<input type="hidden" id="content_weight_series" value="{{ settings.content_weight_series }}">
|
|
<div id="weight-preview" style="margin-top: 15px; padding: 12px; background: var(--bg-elevated); border-radius: 4px; text-align: center; font-size: 14px;">
|
|
</div>
|
|
<button class="btn btn-primary" style="margin-top: 15px; width: 100%;" onclick="saveManualWeights()">
|
|
<i class="fas fa-balance-scale"></i> Appliquer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Providers Management -->
|
|
<div class="settings-card card" style="padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #2a2d32;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="margin: 0; color: var(--primary);">Disponibilite des Fournisseurs</h3>
|
|
<button class="btn btn-secondary btn-small" hx-post="/api/providers/health/check" hx-swap="none">
|
|
<i class="fas fa-sync-alt"></i> Forcer verification
|
|
</button>
|
|
</div>
|
|
|
|
<div class="providers-settings-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px;">
|
|
{% for provider in providers %}
|
|
<div class="provider-status-card" style="padding: 15px; background: var(--bg-elevated); border-radius: 4px; border: 1px solid var(--secondary); display: flex; align-items: center; justify-content: space-between;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<span style="font-size: 1.5rem;">{{ provider.icon }}</span>
|
|
<div>
|
|
<div style="font-weight: 600;">{{ provider.name }}</div>
|
|
<div style="font-size: 0.75rem; display: flex; align-items: center; gap: 5px;">
|
|
<span class="status-dot" style="width: 8px; height: 8px; border-radius: 50%; background: {% if provider.status == 'up' %}var(--accent){% elif provider.status == 'down' %}var(--danger){% else %}var(--text-muted){% endif %};"></span>
|
|
<span style="color: {% if provider.status == 'up' %}var(--accent){% elif provider.status == 'down' %}var(--danger){% else %}var(--text-dim){% endif %}; text-transform: uppercase; font-weight: 800;">
|
|
{{ provider.status | upper }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn {% if provider.enabled %}btn-secondary{% else %}btn-accent{% endif %} btn-sm"
|
|
hx-post="/api/settings/providers/{{ provider.id }}/toggle"
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#tab-settings > div', 'refresh-settings')"
|
|
style="min-width: 100px;">
|
|
{% if provider.enabled %}Desactiver{% else %}Activer{% endif %}
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.settings-form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
}
|
|
.status-dot {
|
|
display: inline-block;
|
|
}
|
|
</style>
|