root
4101d98a41
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
284 lines
15 KiB
HTML
284 lines
15 KiB
HTML
<div class="space-y-6">
|
|
<!-- Section Title -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold">Paramètres</h2>
|
|
</div>
|
|
|
|
<!-- General Preferences -->
|
|
<div class="card bg-base-200 border border-base-300">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg text-primary">
|
|
<i class="fa-solid fa-sliders"></i> Général
|
|
</h3>
|
|
|
|
<form id="settings-form" class="space-y-4">
|
|
<!-- Language -->
|
|
<div class="form-control w-full max-w-xs">
|
|
<label class="label" for="default_lang">
|
|
<span class="label-text font-semibold">Langue par défaut</span>
|
|
</label>
|
|
<select name="default_lang" id="default_lang" class="select select-bordered w-full">
|
|
<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>
|
|
|
|
<!-- Theme -->
|
|
<div class="form-control w-full max-w-xs">
|
|
<label class="label" for="theme">
|
|
<span class="label-text font-semibold">Thème</span>
|
|
</label>
|
|
<select name="theme" id="theme" class="select select-bordered w-full">
|
|
<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>
|
|
|
|
<!-- Download Directory -->
|
|
<div class="form-control w-full">
|
|
<label class="label" for="download_dir">
|
|
<span class="label-text font-semibold">Répertoire de téléchargement</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="download_dir"
|
|
id="download_dir"
|
|
value="{{ settings.download_dir }}"
|
|
class="input input-bordered w-full"
|
|
>
|
|
<label class="label">
|
|
<span class="label-text-alt text-base-content/50">Répertoire où les fichiers seront téléchargés (défaut: downloads/)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<button type="submit" class="btn btn-primary w-full" onclick="event.preventDefault(); saveSettings();">
|
|
<i class="fa-solid fa-save"></i> Enregistrer les préférences
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Filters -->
|
|
<div class="card bg-base-200 border border-base-300">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg text-primary">
|
|
<i class="fa-solid fa-filter"></i> Filtres de contenu
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Recommendations Filter -->
|
|
<div class="form-control w-full max-w-xs">
|
|
<label class="label" for="recommendations_filter">
|
|
<span class="label-text font-semibold">Recommandé pour vous : afficher</span>
|
|
</label>
|
|
<select name="recommendations_filter" id="recommendations_filter" class="select select-bordered w-full" onchange="saveFilter('recommendations_filter', this.value)">
|
|
<option value="all" {% if settings.recommendations_filter == 'all' %}selected{% endif %}>Les deux (Animes + Séries)</option>
|
|
<option value="anime" {% if settings.recommendations_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.recommendations_filter == 'series' %}selected{% endif %}>Séries uniquement</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Releases Filter -->
|
|
<div class="form-control w-full max-w-xs">
|
|
<label class="label" for="releases_filter">
|
|
<span class="label-text font-semibold">Dernières sorties : afficher</span>
|
|
</label>
|
|
<select name="releases_filter" id="releases_filter" class="select select-bordered w-full" onchange="saveFilter('releases_filter', this.value)">
|
|
<option value="all" {% if settings.releases_filter == 'all' %}selected{% endif %}>Les deux (Animes + Séries)</option>
|
|
<option value="anime" {% if settings.releases_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.releases_filter == 'series' %}selected{% endif %}>Séries uniquement</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="card bg-base-200 border border-base-300">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg text-primary">
|
|
<i class="fa-solid fa-layer-group"></i> Catégories
|
|
</h3>
|
|
<p class="text-sm text-base-content/60 mb-4">Activez ou désactivez les catégories. Au moins une doit rester active.</p>
|
|
|
|
<div class="flex gap-4 flex-wrap">
|
|
<!-- Anime Toggle -->
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer justify-start gap-4 bg-base-300 rounded-lg p-4 border border-base-content/10 flex-1 min-w-[200px]">
|
|
<div class="flex-1">
|
|
<span class="font-semibold text-base">Animes</span>
|
|
<p class="text-xs text-base-content/60">Films et séries animées</p>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
id="anime_enabled"
|
|
class="toggle toggle-primary"
|
|
{% if settings.anime_enabled %}checked{% endif %}
|
|
onchange="toggleCategory('anime_enabled', this.checked)"
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Series Toggle -->
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer justify-start gap-4 bg-base-300 rounded-lg p-4 border border-base-content/10 flex-1 min-w-[200px]">
|
|
<div class="flex-1">
|
|
<span class="font-semibold text-base">Séries TV</span>
|
|
<p class="text-xs text-base-content/60">Séries américaines et européennes</p>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
id="series_enabled"
|
|
class="toggle toggle-primary"
|
|
{% if settings.series_enabled %}checked{% endif %}
|
|
onchange="toggleCategory('series_enabled', this.checked)"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Weight -->
|
|
<div class="card bg-base-200 border border-base-300">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg text-primary">
|
|
<i class="fa-solid fa-scale-balanced"></i> Équilibre du fil d'actualité
|
|
</h3>
|
|
<p class="text-sm text-base-content/60 mb-4">
|
|
Définissez la proportion d'animes et de séries affichés dans les recommandations et dernières sorties.
|
|
</p>
|
|
|
|
<!-- Weight Mode -->
|
|
<div class="form-control w-full max-w-xs mb-4">
|
|
<label class="label" for="content_weight_mode">
|
|
<span class="label-text font-semibold">Mode</span>
|
|
</label>
|
|
<select name="content_weight_mode" id="content_weight_mode" class="select select-bordered w-full" onchange="onWeightModeChange(this.value)">
|
|
<option value="auto" {% if settings.content_weight_mode == 'auto' %}selected{% endif %}>Automatique (basé sur vos téléchargements)</option>
|
|
<option value="manual" {% if settings.content_weight_mode == 'manual' %}selected{% endif %}>Manuel</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Auto mode info -->
|
|
<div id="weight-auto-info" class="bg-base-300 rounded-lg p-4 border border-base-content/10 mb-4" {% if settings.content_weight_mode != 'auto' %}style="display:none;"{% endif %}>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i class="fa-solid fa-chart-pie text-primary"></i>
|
|
<span class="font-semibold">Analyse de vos téléchargements</span>
|
|
</div>
|
|
<div id="weight-auto-details" class="text-sm text-base-content/60">
|
|
Chargement...
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual mode controls -->
|
|
<div id="weight-manual-controls" {% if settings.content_weight_mode != 'manual' %}style="display:none;"{% endif %}>
|
|
<div class="flex gap-6 items-start flex-wrap">
|
|
<!-- Anime Weight -->
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="label">
|
|
<span class="label-text font-semibold">
|
|
<i class="fa-solid fa-dragon text-primary"></i> Poids Animes
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
id="content_weight_anime_range"
|
|
min="0"
|
|
max="5"
|
|
step="1"
|
|
value="{{ settings.content_weight_anime }}"
|
|
class="range range-primary range-sm"
|
|
oninput="document.getElementById('content_weight_anime').value = this.value; updateWeightPreview();"
|
|
>
|
|
<div class="flex justify-between text-xs text-base-content/50 px-1 mt-1">
|
|
<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Series Weight -->
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="label">
|
|
<span class="label-text font-semibold">
|
|
<i class="fa-solid fa-tv text-secondary"></i> Poids Séries
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
id="content_weight_series_range"
|
|
min="0"
|
|
max="5"
|
|
step="1"
|
|
value="{{ settings.content_weight_series }}"
|
|
class="range range-secondary range-sm"
|
|
oninput="document.getElementById('content_weight_series').value = this.value; updateWeightPreview();"
|
|
>
|
|
<div class="flex justify-between text-xs text-base-content/50 px-1 mt-1">
|
|
<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 }}">
|
|
|
|
<!-- Weight Preview -->
|
|
<div id="weight-preview" class="bg-base-300 rounded-lg p-3 text-center text-sm mt-4"></div>
|
|
|
|
<button class="btn btn-primary w-full mt-4" onclick="saveManualWeights()">
|
|
<i class="fa-solid fa-scale-balanced"></i> Appliquer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Providers Management -->
|
|
<div class="card bg-base-200 border border-base-300">
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="card-title text-lg text-primary mb-0">
|
|
<i class="fa-solid fa-server"></i> Disponibilité des Fournisseurs
|
|
</h3>
|
|
<button class="btn btn-sm btn-ghost" hx-post="/api/providers/health/check" hx-swap="none">
|
|
<i class="fa-solid fa-arrows-rotate"></i> Forcer vérification
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{% for provider in providers %}
|
|
<div class="flex items-center justify-between bg-base-300 rounded-lg p-3 border border-base-content/10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">{{ provider.icon }}</span>
|
|
<div>
|
|
<div class="font-semibold text-sm">{{ provider.name }}</div>
|
|
<div class="flex items-center gap-1.5">
|
|
{% if provider.status == 'up' %}
|
|
<span class="badge badge-success badge-xs"></span>
|
|
<span class="text-xs font-bold text-success">UP</span>
|
|
{% elif provider.status == 'down' %}
|
|
<span class="badge badge-error badge-xs"></span>
|
|
<span class="text-xs font-bold text-error">DOWN</span>
|
|
{% else %}
|
|
<span class="badge badge-ghost badge-xs"></span>
|
|
<span class="text-xs font-bold text-base-content/40">{{ provider.status | upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn btn-sm {% if provider.enabled %}btn-ghost{% else %}btn-primary{% endif %}"
|
|
hx-post="/api/settings/providers/{{ provider.id }}/toggle"
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#tab-settings > div', 'refresh-settings')"
|
|
>
|
|
{% if provider.enabled %}Désactiver{% else %}Activer{% endif %}
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|