feat: flat design Sunset Glitch + download manager + settings + recommendations overhaul
- 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
This commit is contained in:
root
@@ -89,6 +89,68 @@
|
||||
</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;">
|
||||
@@ -127,93 +189,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getToken() {
|
||||
return localStorage.getItem('auth_token') || null;
|
||||
}
|
||||
|
||||
async function saveSettings() {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
|
||||
const data = {
|
||||
default_lang: document.getElementById('default_lang').value,
|
||||
theme: document.getElementById('theme').value,
|
||||
download_dir: document.getElementById('download_dir').value,
|
||||
};
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/settings', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (r.ok) {
|
||||
showToast('Preferences enregistrees', 'success');
|
||||
}
|
||||
} catch (e) {
|
||||
showToast('Erreur: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveFilter(field, value) {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/settings', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ [field]: value })
|
||||
});
|
||||
if (r.ok) {
|
||||
showToast('Filtre mis a jour', 'success');
|
||||
}
|
||||
} catch (e) {
|
||||
showToast('Erreur: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleCategory(field, value) {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
|
||||
// Prevent disabling both
|
||||
if (!value) {
|
||||
const otherField = field === 'anime_enabled' ? 'series_enabled' : 'anime_enabled';
|
||||
const otherCheckbox = document.getElementById(otherField);
|
||||
if (otherCheckbox && !otherCheckbox.checked) {
|
||||
showToast('Au moins une categorie doit rester active', 'error');
|
||||
document.getElementById(field).checked = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/settings', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ [field]: value })
|
||||
});
|
||||
if (!r.ok) {
|
||||
const err = await r.json().catch(() => ({}));
|
||||
showToast(err.detail || 'Erreur', 'error');
|
||||
document.getElementById(field).checked = !value;
|
||||
} else {
|
||||
showToast('Categorie ' + (value ? 'activee' : 'desactivee'), 'success');
|
||||
}
|
||||
} catch (e) {
|
||||
showToast('Erreur: ' + e.message, 'error');
|
||||
document.getElementById(field).checked = !value;
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message, type) {
|
||||
const event = new CustomEvent('show-toast', { detail: { message, type } });
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.settings-form label {
|
||||
display: block;
|
||||
|
||||
Reference in New Issue
Block a user