Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: complete UI redesign with DaisyUI + Tailwind CSS v4

Browse Source 
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
2026-04-11 19:46:52 +00:00
parent 87f245d3fc
commit 4101d98a41
28 changed files with 2534 additions and 2808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/watchlist.html
+79 -68
View File
@@ -1,79 +1,90 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="fr" data-theme="ohmstream">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watchlist - Ohm Stream Downloader</title>
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body class="watchlist-body">
<!-- Main Header -->
<div style="text-align: center; margin-bottom: 20px;">
<h1 style="color: #FF9F1C; font-size: 32px; margin: 0;"><i class="fa-solid fa-bolt"></i> Ohm Stream Downloader</h1>
<p style="color: #8a8f98; font-size: 14px; margin: 5px 0 0;">Téléchargez vos vidéos, animes et séries</p>
<body class="min-h-screen bg-base-100">
<!-- Navbar -->
<div class="navbar bg-base-200 border-b border-base-300 px-4">
<div class="flex-1">
<a href="/web" class="text-xl font-bold text-primary gap-2">
<i class="fa-solid fa-bolt"></i> Ohm Stream
</a>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal px-1 gap-1">
<li><a href="/web"><i class="fa-solid fa-house"></i> Accueil</a></li>
<li><a href="/web#anime"><i class="fa-solid fa-film"></i> Anime</a></li>
<li><a href="/web#series"><i class="fa-solid fa-tv"></i> Série</a></li>
<li><a href="/web#providers"><i class="fa-solid fa-box"></i> Fournisseurs</a></li>
<li><a href="/watchlist" class="active"><i class="fa-solid fa-clipboard-list"></i> Watchlist</a></li>
</ul>
</div>
</div>
<!-- User Info -->
<div id="userInfo" style="display: none; max-width: 1200px; margin: 0 auto 15px; padding: 10px; background: rgba(255,191,105,0.1); border: 1px solid #FF9F1C; border-radius: 4px;">
<span style="color: #FF9F1C;"><i class="fa-solid fa-user"></i> Connecté</span>
<button class="btn-secondary btn-small" onclick="handleLogout()"><i class="fa-solid fa-right-from-bracket"></i> Déconnexion</button>
</div>
<!-- Tabs -->
<div class="tabs" style="max-width: 1200px; margin: 0 auto 20px; display: flex; gap: 5px; border-bottom: 1px solid #2a2d32; padding-bottom: 10px;">
<button class="tab" onclick="window.location.href='/web'"><i class="fa-solid fa-house"></i> Accueil</button>
<button class="tab" onclick="window.location.href='/web#anime'"><i class="fa-solid fa-film"></i> Anime</button>
<button class="tab" onclick="window.location.href='/web#series'"><i class="fa-solid fa-tv"></i> Série</button>
<button class="tab" onclick="window.location.href='/web#providers'"><i class="fa-solid fa-box"></i> Fournisseurs</button>
<button class="tab active" onclick="window.location.href='/watchlist'"><i class="fa-solid fa-clipboard-list"></i> Watchlist</button>
</div>
<div class="watchlist-container">
<!-- Header -->
<div class="watchlist-header">
<h1><i class="fa-solid fa-clipboard-list"></i> Ma Watchlist</h1>
<p>Suivez vos animes préférés et téléchargez automatiquement les nouveaux épisodes</p>
<button type="button" class="btn-secondary watchlist-header-back-btn" onclick="window.location.href = '/web'">
← Retour à l'accueil
</button>
<!-- Main Content -->
<div class="max-w-6xl mx-auto px-4 py-6">
<!-- Page Header -->
<div class="flex justify-between items-start flex-wrap gap-4 mb-6">
<div>
<h1 class="text-2xl font-bold">
<i class="fa-solid fa-clipboard-list text-primary"></i> Ma Watchlist
</h1>
<p class="text-sm text-base-content/60 mt-1">
Suivez vos animes préférés et téléchargez automatiquement les nouveaux épisodes
</p>
</div>
<a href="/web" class="btn btn-ghost btn-sm">
<i class="fa-solid fa-arrow-left"></i> Retour à l'accueil
</a>
</div>
<!-- Scheduler Status -->
<div class="scheduler-status" id="schedulerStatus">
<div class="scheduler-status-header">
<div>
<h3><i class="fa-solid fa-clock"></i> Planificateur Automatique</h3>
<div id="nextRunInfo" class="next-run-info">Chargement...</div>
</div>
<div class="scheduler-controls">
<button id="startSchedulerBtn" class="btn-primary btn-small watchlist-btn-small" onclick="handleStartScheduler()" style="display:none;">
<i class="fa-solid fa-play"></i> Démarrer
</button>
<button id="stopSchedulerBtn" class="btn-secondary btn-small watchlist-btn-small" onclick="handleStopScheduler()" style="display:none;">
<i class="fa-solid fa-pause"></i> Arrêter
</button>
<button class="btn-secondary btn-small watchlist-btn-small" onclick="handleCheckAll()">
<i class="fa-solid fa-magnifying-glass"></i> Vérifier tout
</button>
<button class="btn-secondary btn-small watchlist-btn-small" onclick="handleOpenSettings()">
<i class="fa-solid fa-gear"></i> Paramètres
</button>
<div class="alert bg-base-200 border border-base-300 mb-4" id="schedulerStatus">
<div class="flex-1">
<div class="flex justify-between items-start flex-wrap gap-3">
<div>
<h3 class="font-semibold text-base-content">
<i class="fa-solid fa-clock text-primary"></i> Planificateur Automatique
</h3>
<div id="nextRunInfo" class="text-sm text-base-content/60 mt-1">Chargement...</div>
</div>
<div class="flex gap-2 flex-wrap">
<button id="startSchedulerBtn" class="btn btn-primary btn-sm hidden" onclick="handleStartScheduler()">
<i class="fa-solid fa-play"></i> Démarrer
</button>
<button id="stopSchedulerBtn" class="btn btn-ghost btn-sm hidden" onclick="handleStopScheduler()">
<i class="fa-solid fa-pause"></i> Arrêter
</button>
<button class="btn btn-ghost btn-sm" onclick="handleCheckAll()">
<i class="fa-solid fa-magnifying-glass"></i> Vérifier tout
</button>
<button class="btn btn-ghost btn-sm" onclick="handleOpenSettings()">
<i class="fa-solid fa-gear"></i> Paramètres
</button>
</div>
</div>
</div>
</div>
<!-- Filter Tabs -->
<div class="filter-tabs">
<button class="filter-tab active" onclick="filterWatchlist('all', this)">Tous</button>
<button class="filter-tab" onclick="filterWatchlist('active', this)">Actifs</button>
<button class="filter-tab" onclick="filterWatchlist('paused', this)">En pause</button>
<button class="filter-tab" onclick="filterWatchlist('completed', this)">Terminés</button>
<div class="tabs tabs-boxed bg-base-200 p-1 mb-4">
<button class="tab filter-tab tab-active" onclick="filterWatchlist('all', this)">Tous</button>
<button class="tab filter-tab" onclick="filterWatchlist('active', this)">Actifs</button>
<button class="tab filter-tab" onclick="filterWatchlist('paused', this)">En pause</button>
<button class="tab filter-tab" onclick="filterWatchlist('completed', this)">Terminés</button>
</div>
<!-- Watchlist Items -->
<div id="watchlistContainer">
<div class="watchlist-loading">Chargement de la watchlist...</div>
<div id="watchlistContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="col-span-full text-center py-12">
<span class="loading loading-spinner loading-lg text-primary"></span>
<p class="text-base-content/60 mt-3">Chargement de la watchlist...</p>
</div>
</div>
</div>
@@ -156,22 +167,22 @@
if (status.running) {
// Update buttons if they exist
if (startBtn) startBtn.style.display = 'none';
if (stopBtn) stopBtn.style.display = 'inline-block';
if (startBtn) startBtn.classList.add('hidden');
if (stopBtn) stopBtn.classList.remove('hidden');
if (status.next_run) {
const nextRun = new Date(status.next_run);
nextRunInfo.innerHTML = `<i class="fa-solid fa-check"></i> En cours<br>Prochaine vérification: ${nextRun.toLocaleString('fr-FR')}`;
nextRunInfo.innerHTML = `<i class="fa-solid fa-check text-success"></i> En cours<br>Prochaine vérification: ${nextRun.toLocaleString('fr-FR')}`;
} else {
// Scheduler running but no next_run yet (just started)
const interval = status.settings?.check_interval_hours || 6;
nextRunInfo.innerHTML = `<i class="fa-solid fa-check"></i> En cours<br>Vérification toutes les ${interval}h`;
nextRunInfo.innerHTML = `<i class="fa-solid fa-check text-success"></i> En cours<br>Vérification toutes les ${interval}h`;
}
} else {
// Update buttons if they exist
if (startBtn) startBtn.style.display = 'inline-block';
if (stopBtn) stopBtn.style.display = 'none';
nextRunInfo.innerHTML = '<i class="fa-solid fa-pause"></i> Arrêté';
if (startBtn) startBtn.classList.remove('hidden');
if (stopBtn) stopBtn.classList.add('hidden');
nextRunInfo.innerHTML = '<i class="fa-solid fa-pause text-base-content/40"></i> Arrêté';
}
}
@@ -181,11 +192,11 @@
async function filterWatchlist(status, tabElement) {
currentFilter = status;
// Update tab styles
// Update tab styles — DaisyUI uses tab-active
document.querySelectorAll('.filter-tab').forEach(tab => {
tab.classList.remove('active');
tab.classList.remove('tab-active');
});
tabElement.classList.add('active');
tabElement.classList.add('tab-active');
// Reload with filter
await displayWatchlist(status === 'all' ? null : status);
@@ -254,4 +265,4 @@
setInterval(loadSchedulerStatus, 30000);
</script>
</body>
</html>
</html>