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)
88 lines
5.0 KiB
HTML
88 lines
5.0 KiB
HTML
<div class="card bg-base-200 border border-primary/30 mt-8" x-data="{ view: 'grid' }">
|
|
<!-- Header -->
|
|
<div class="card-body p-6">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<h2 class="text-xl font-bold border-none p-0 m-0">{{ anime_title }}</h2>
|
|
<span class="badge badge-outline">{{ episodes|length }} épisodes disponibles</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-circle btn-sm btn-ghost" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
|
|
<i class="fas fa-th"></i>
|
|
</button>
|
|
<button class="btn btn-circle btn-sm btn-ghost" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
<button class="btn btn-circle btn-sm btn-error" onclick="document.getElementById('player-container').innerHTML = ''">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video player display area -->
|
|
<div id="video-player-display" x-ref="playerArea"></div>
|
|
|
|
<!-- Episodes content -->
|
|
{% if episodes %}
|
|
<!-- Grid View -->
|
|
<div x-show="view === 'grid'" x-transition class="mt-6">
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-3">
|
|
{% for ep in episodes %}
|
|
<div class="bg-base-300 rounded-lg p-4 text-center hover:bg-base-100 transition-colors border border-transparent hover:border-primary flex flex-col gap-2">
|
|
<div class="text-primary font-bold text-xl">EP {{ ep.episode_number or loop.index }}</div>
|
|
<button class="btn btn-xs btn-primary w-full"
|
|
hx-get="/api/player/embed?url={{ ep.url | urlencode }}"
|
|
hx-target="#video-player-display"
|
|
hx-swap="innerHTML"
|
|
onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
|
|
<i class="fas fa-play"></i> Regarder
|
|
</button>
|
|
<button class="btn btn-xs btn-ghost w-full"
|
|
hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
|
|
hx-swap="none"
|
|
title="Télécharger cet épisode">
|
|
<i class="fas fa-download"></i> Télécharger
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List View -->
|
|
<div x-show="view === 'list'" x-transition class="mt-6">
|
|
<div class="flex flex-col gap-2">
|
|
{% for ep in episodes %}
|
|
<div class="flex items-center gap-4 bg-base-300 rounded-lg px-4 py-3 hover:bg-base-100 transition-colors">
|
|
<span class="font-bold text-primary w-12 shrink-0">EP {{ ep.episode_number or loop.index }}</span>
|
|
<span class="flex-1 truncate text-base-content/80 font-medium"
|
|
title="{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}">
|
|
{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
|
|
</span>
|
|
<div class="flex gap-2 shrink-0">
|
|
<button class="btn btn-xs btn-primary"
|
|
hx-get="/api/player/embed?url={{ ep.url | urlencode }}"
|
|
hx-target="#video-player-display"
|
|
hx-swap="innerHTML"
|
|
onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
|
|
<i class="fas fa-play"></i> Regarder
|
|
</button>
|
|
<button class="btn btn-xs btn-ghost"
|
|
hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
|
|
hx-swap="none"
|
|
title="Télécharger cet épisode">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 text-base-content/40">
|
|
<i class="fas fa-exclamation-circle text-3xl mb-3 block"></i>
|
|
<p>Aucun épisode trouvé pour cette source.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|