feat: complete UI redesign with DaisyUI + Tailwind CSS v4
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)
This commit is contained in:
root
@@ -1,202 +1,283 @@
|
||||
<div class="settings-container section-container">
|
||||
<div class="section-header">
|
||||
<h2>Parametres</h2>
|
||||
<div class="space-y-6">
|
||||
<!-- Section Title -->
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">Paramètres</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="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>
|
||||
|
||||
<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;">
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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="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="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="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 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="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 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</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="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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!-- 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 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 id="weight-auto-details" class="text-sm text-base-content/60">
|
||||
Chargement...
|
||||
</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;">
|
||||
|
||||
<!-- 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>
|
||||
<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="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="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 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>
|
||||
</div>
|
||||
|
||||
<button class="btn {% if provider.enabled %}btn-secondary{% else %}btn-accent{% endif %} btn-sm"
|
||||
<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')"
|
||||
style="min-width: 100px;">
|
||||
{% if provider.enabled %}Desactiver{% else %}Activer{% endif %}
|
||||
</button>
|
||||
>
|
||||
{% if provider.enabled %}Désactiver{% else %}Activer{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user