UI: Standardize buttons and design system across the application

- Created a unified button system in style.css with primary, secondary, and icon variants.
- Standardized cards, inputs, and layout components for a more premium look.
- Refactored header, login, anime/series cards, and watchlist/downloads sections to use the new design system.
- Cleaned up inline styles and redundant local style blocks in templates.
- Updated JS-generated buttons to follow the new global styling.

templates/components/anime_card.html

@@ -16,7 +16,7 @@
 
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -38,13 +38,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -53,7 +53,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}"}'
                 hx-swap="none"
@@ -61,7 +61,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}

templates/components/downloads_list.html

@@ -4,7 +4,7 @@
             <div class="download-item task-{{ task.status }}">
                 <div class="download-info">
                     <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
-                    <span class="badge badge-{{ task.status }}">{{ task.status }}</span>
+                    <span class="badge badge-{{ task.status }}">{{ task.status | upper }}</span>
                 </div>
                 
                 <div class="progress-container">
@@ -23,21 +23,25 @@
                             <i class="fas fa-pause"></i>
                         </button>
                     {% elif task.status == 'paused' %}
-                        <button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
+                        <button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
                             <i class="fas fa-play"></i>
                         </button>
                     {% endif %}
                     
                     {% if task.status == 'completed' %}
-                        <a href="/video/{{ task.id }}" class="btn-icon success">
+                        <a href="/video/{{ task.id }}" class="btn-icon success" title="Voir la vidéo">
                             <i class="fas fa-external-link-alt"></i>
                         </a>
+                        <a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Télécharger le fichier">
+                            <i class="fas fa-file-download"></i>
+                        </a>
                     {% endif %}
                     
                     <button class="btn-icon danger" 
                             hx-delete="/api/downloads/{{ task.id }}" 
                             hx-confirm="Supprimer ce téléchargement ?"
-                            hx-swap="none">
+                            hx-swap="none"
+                            title="Supprimer">
                         <i class="fas fa-trash"></i>
                     </button>
                 </div>
@@ -45,52 +49,8 @@
         {% endfor %}
     </div>
 {% else %}
-    <div class="empty-state">
+    <div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
+        <i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
         <p>Aucun téléchargement en cours</p>
     </div>
 {% endif %}
-
-<style>
-.downloads-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 15px;
-}
-.download-item {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 10px;
-    padding: 15px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.progress-container {
-    height: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    margin: 10px 0;
-    overflow: hidden;
-}
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, #00d9ff, #00ff88);
-    transition: width 0.3s ease;
-}
-.download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
-.download-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
-.download-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #aaa; }
-.download-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-.btn-icon {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: white;
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-.badge-completed { color: #00ff88; }
-.badge-failed { color: #ff4444; }
-.badge-downloading { color: #00d9ff; }
-</style>

templates/components/episode_list.html

@@ -1,23 +1,26 @@
-<div class="episode-list-container card" x-data="{ view: 'grid' }">
-    <div class="episode-header">
-        <div class="header-info">
-            <h3>{{ anime_title }}</h3>
-            <span class="episode-count">{{ episodes|length }} épisodes disponibles</span>
+<div class="episode-list-container section-container" x-data="{ view: 'grid' }">
+    <div class="section-header">
+        <div>
+            <h2 style="border: none; padding: 0; margin-bottom: 5px;">{{ anime_title }}</h2>
+            <span class="badge">{{ episodes|length }} épisodes disponibles</span>
         </div>
-        <div class="header-actions">
-            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'active': view === 'grid' }">
+        <div class="header-actions" style="display: flex; gap: 10px;">
+            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
                 <i class="fas fa-th"></i>
             </button>
-            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'active': view === 'list' }">
+            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
                 <i class="fas fa-list"></i>
             </button>
-            <button class="btn btn-close" onclick="document.getElementById('player-container').innerHTML = ''">
+            <button class="btn btn-icon danger" onclick="document.getElementById('player-container').innerHTML = ''">
                 <i class="fas fa-times"></i>
             </button>
         </div>
     </div>
 
-    <div class="episodes-content" :class="'view-' + view">
+    <!-- Zone d'affichage du player vidéo (Placé en haut pour une meilleure visibilité lors de la sélection) -->
+    <div id="video-player-display"></div>
+
+    <div class="episodes-content" :class="'view-' + view" style="margin-top: 25px;">
         {% if episodes %}
             {% for ep in episodes %}
                 <div class="episode-item">
@@ -26,105 +29,103 @@
                         {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
                     </div>
                     <div class="ep-actions">
-                        <button class="btn-play-small" 
+                        <button class="btn btn-primary btn-small" 
                                 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-download-small"
+                        <button class="btn btn-secondary btn-icon btn-small"
                                 hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
-                                hx-swap="none">
+                                hx-swap="none"
+                                title="Télécharger cet épisode">
                             <i class="fas fa-download"></i>
                         </button>
                     </div>
                 </div>
             {% endfor %}
         {% else %}
-            <p class="empty-msg">Aucun épisode trouvé pour ce lien.</p>
+            <div class="no-results">
+                <i class="fas fa-exclamation-circle"></i>
+                <p>Aucun épisode trouvé pour cette source.</p>
+            </div>
         {% endif %}
     </div>
-
-    <!-- Zone d'affichage du player vidéo -->
-    <div id="video-player-display"></div>
 </div>
 
 <style>
 .episode-list-container {
-    margin-top: 20px;
-    background: #1e1e2e;
-    border: 1px solid #333;
-    padding: 20px;
+    margin-top: 30px;
+    background: var(--bg-card);
+    border-radius: var(--card-radius);
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
     animation: fadeIn 0.3s ease-out;
 }
-.episode-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #333;
-}
-.episode-header h3 { margin: 0; color: #00d9ff; }
-.episode-count { font-size: 0.8rem; color: #888; }
 
 .episodes-content.view-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 15px;
 }
+
 .view-grid .episode-item {
-    background: #252538;
-    padding: 15px;
-    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 20px 15px;
+    border-radius: 12px;
     text-align: center;
-    transition: all 0.2s;
+    transition: var(--transition);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
-.view-grid .episode-item:hover { background: #2d2d4a; transform: translateY(-2px); }
+
+.view-grid .episode-item:hover { 
+    background: rgba(255, 255, 255, 0.07); 
+    border-color: var(--primary);
+    transform: translateY(-3px); 
+}
+
 .view-grid .ep-title { display: none; }
-.view-grid .ep-number { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
+.view-grid .ep-number { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
+.view-grid .ep-actions { display: flex; flex-direction: column; gap: 8px; }
+.view-grid .ep-actions .btn { width: 100%; }
 
 .episodes-content.view-list {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 10px;
 }
+
 .view-list .episode-item {
     display: flex;
     align-items: center;
-    gap: 15px;
-    background: #252538;
-    padding: 10px 15px;
-    border-radius: 6px;
+    gap: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 12px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: var(--transition);
 }
-.view-list .ep-number { font-weight: bold; width: 50px; }
-.view-list .ep-title { flex: 1; color: #ccc; }
 
-.btn-play-small {
-    background: #00d9ff;
-    color: #000;
-    border: none;
-    padding: 5px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-weight: bold;
+.view-list .episode-item:hover {
+    background: rgba(255, 255, 255, 0.07);
+    border-color: var(--primary);
 }
-.btn-download-small {
-    background: transparent;
-    color: #888;
-    border: 1px solid #444;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-.btn-download-small:hover { color: #fff; border-color: #fff; }
+
+.view-list .ep-number { font-weight: 800; width: 60px; color: var(--primary); }
+.view-list .ep-title { flex: 1; color: var(--text-main); font-weight: 500; }
+.view-list .ep-actions { display: flex; gap: 10px; }
 
 #video-player-display:not(:empty) {
-    margin-top: 30px;
-    padding-top: 20px;
-    border-top: 2px dashed #333;
+    margin: 20px 0 30px 0;
+    padding: 25px;
+    background: #000;
+    border-radius: 12px;
+    border: 1px solid var(--primary);
+    box-shadow: 0 0 30px rgba(0, 217, 255, 0.15);
 }
 
 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

templates/components/header.html

@@ -1,70 +1,69 @@
-<h1>⚡ Ohm Stream Downloader</h1>
-<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
+<header>
+    <h1>⚡ Ohm Stream Downloader</h1>
+    <p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
 
-<!-- User info and logout button -->
-<div id="userInfo" 
-     x-show="isAuthenticated" 
-     style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
-    <div style="display: flex; align-items: center; gap: 10px;">
-        <span style="color: #00d9ff;">👤</span>
-        <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: #00d9ff;">-</strong></span>
+    <!-- User info and logout button -->
+    <div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak>
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <span style="color: var(--primary); font-size: 1.2rem;">👤</span>
+            <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: var(--primary);">-</strong></span>
+        </div>
+        <button class="btn btn-secondary btn-small" 
+                hx-post="/api/auth/logout"
+                hx-on::after-request="isAuthenticated = false; window.location.reload()">
+            🚪 Déconnexion
+        </button>
     </div>
-    <button class="btn-secondary btn-small" 
-            hx-post="/api/auth/logout"
-            hx-on::after-request="isAuthenticated = false; window.location.reload()"
-            style="padding: 5px 15px; font-size: 12px;">
-        🚪 Déconnexion
-    </button>
-</div>
 
-<!-- Login prompt (shown when not logged in) -->
-<div id="loginPrompt" 
-     x-show="!isAuthenticated" 
-     style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
-    <p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
-</div>
+    <!-- Login prompt (shown when not logged in) -->
+    <div id="loginPrompt" x-show="!isAuthenticated" class="auth-panel" style="justify-content: center;" x-cloak>
+        <p style="color: var(--primary); margin: 0;">
+            👋 Bienvenue! <a href="/login" class="btn btn-secondary btn-small" style="margin-left: 10px;">Se connecter</a> pour accéder à toutes les fonctionnalités.
+        </p>
+    </div>
 
-<!-- Tabs - Robust navigation -->
-<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'home' }" 
-            @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-        </svg>
-        Accueil
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'anime' }" 
-            @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        Anime
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'series' }" 
-            @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
-        </svg>
-        Série
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'watchlist' }" 
-            @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
-        </svg>
-        Watchlist
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'downloads' }" 
-            @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-        </svg>
-        Téléchargements
-    </button>
-</div>
+    <!-- Tabs - Robust navigation -->
+    <nav id="mainTabs" class="tabs">
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'home' }" 
+                @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            Accueil
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'anime' }" 
+                @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Anime
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'series' }" 
+                @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
+            </svg>
+            Série
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'watchlist' }" 
+                @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
+            </svg>
+            Watchlist
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'downloads' }" 
+                @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+            </svg>
+            Téléchargements
+        </button>
+    </nav>
+</header>

templates/components/home_section.html

@@ -7,7 +7,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🎯 Recommandé pour vous</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/recommendations" 
                     hx-target="#recommendationsList">
                 <i class="fas fa-sync-alt"></i> Actualiser
@@ -25,7 +25,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🔥 Dernières sorties</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/releases/latest" 
                     hx-target="#releasesList">
                 <i class="fas fa-sync-alt"></i> Actualiser

templates/components/series_card.html

@@ -8,7 +8,7 @@
              onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Image+Error'; this.onerror=null;">
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -25,13 +25,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -40,7 +40,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ series.url }}", "anime_title": "{{ series.title }}", "provider_id": "fs7", "lang": "vf"}'
                 hx-swap="none"
@@ -48,7 +48,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}

templates/index.html

@@ -28,18 +28,18 @@
                 placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
                 required
             >
-            <button type="submit" class="btn-primary">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button type="submit" class="btn btn-primary btn-search">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                 </svg>
                 Rechercher
             </button>
         </form>
-        <div id="search-loading" class="htmx-indicator">
+        <div id="search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--primary); display: none;">
             <div class="spinner"></div> Recherche en cours...
         </div>
-        <div style="margin-top: 10px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
-            💡 <strong>Info:</strong> La recherche utilise MyAnimeList pour afficher la fiche complète (synopsis, saisons, etc.)
+        <div style="margin-top: 15px; padding: 12px; background: rgba(0, 217, 255, 0.05); border: 1px solid rgba(0, 217, 255, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
+            💡 <strong>Astuce :</strong> La recherche unifiée explore plusieurs sources pour trouver vos animes préférés.
         </div>
     </div>
 
@@ -49,18 +49,18 @@
     <!-- Player container for HTMX injections -->
     <div id="player-container"></div>
 
-    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
+    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
 
     <!-- Latest Releases Section -->
     <div class="section-header">
         <h2>🔥 Dernières sorties Anime</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/releases/latest" 
                 hx-target="#animeReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
-            Dernières sorties
+            Actualiser
         </button>
     </div>
     <div id="animeReleasesList" class="recommendations-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:500ms"></div>
@@ -85,30 +85,30 @@
                 placeholder="Rechercher une série (ex: Breaking Bad, Game of Thrones...)"
                 required
             >
-            <button type="submit" class="btn-primary">
-                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button type="submit" class="btn btn-primary btn-search">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                 </svg>
                 Rechercher
             </button>
         </form>
-        <div id="series-search-loading" class="htmx-indicator">
+        <div id="series-search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--secondary); display: none;">
             <div class="spinner"></div> Recherche en cours...
         </div>
-        <div style="margin-top: 10px; padding: 10px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
-            💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes
+        <div style="margin-top: 15px; padding: 12px; background: rgba(255, 107, 107, 0.05); border: 1px solid rgba(255, 107, 107, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
+            💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes.
         </div>
     </div>
 
     <!-- Series search results -->
     <div id="seriesSearchResults" style="margin-bottom: 40px;"></div>
 
-    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
+    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
 
     <!-- Recommendations Section -->
     <div class="section-header">
         <h2>🎯 Recommandé pour vous</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/recommendations" 
                 hx-target="#seriesRecommendationsList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
@@ -122,26 +122,18 @@
     <!-- Latest Releases Section -->
     <div class="section-header" style="margin-top: 40px;">
         <h2>🔥 Dernières sorties Séries TV</h2>
-        <button class="btn-small btn-secondary" 
+        <button class="btn btn-secondary btn-small" 
                 hx-get="/api/releases/latest" 
                 hx-target="#seriesReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
-            Dernières sorties
+            Actualiser
         </button>
     </div>
     <div id="seriesReleasesList" class="releases-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:700ms"></div>
 </div>
 
-<div id="tab-providers" class="tab-content" x-show="activeTab === 'providers'">
-    <div class="section-header">
-        <h2>📦 Fournisseurs de Streaming</h2>
-        <button class="btn btn-sm btn-secondary" hx-get="/api/providers/health" hx-target="#providersGrid">Actualiser</button>
-    </div>
-    <div id="providersGrid" class="search-results"></div>
-</div>
-
 <div id="tab-watchlist" class="tab-content" x-show="activeTab === 'watchlist'">
 {% include "components/watchlist_section.html" %}
 </div>

templates/login.html

@@ -5,116 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Connexion - Ohm Stream Downloader</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .auth-container {
-            max-width: 400px;
-            margin: 50px auto;
-            padding: 30px;
-            background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
-            border-radius: 20px;
-            box-shadow: 0 8px 32px rgba(0, 217, 255, 0.3);
-        }
-        .auth-title {
-            text-align: center;
-            color: #00d9ff;
-            margin-bottom: 30px;
-            font-size: 28px;
-        }
-        .auth-tabs {
-            display: flex;
-            margin-bottom: 30px;
-            border-bottom: 2px solid rgba(0, 217, 255, 0.2);
-        }
-        .auth-tab {
-            flex: 1;
-            padding: 15px;
-            text-align: center;
-            cursor: pointer;
-            color: #aaa;
-            transition: all 0.3s ease;
-        }
-        .auth-tab.active {
-            color: #00d9ff;
-            border-bottom: 2px solid #00d9ff;
-        }
-        .auth-tab:hover {
-            color: #00d9ff;
-        }
-        .auth-form {
-            display: none;
-        }
-        .auth-form.active {
-            display: block;
-        }
-        .form-group {
-            margin-bottom: 20px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #00d9ff;
-            font-size: 14px;
-        }
-        .form-group input {
-            width: 100%;
-            padding: 12px;
-            background: rgba(0, 217, 255, 0.1);
-            border: 1px solid rgba(0, 217, 255, 0.3);
-            border-radius: 8px;
-            color: #fff;
-            font-size: 14px;
-            box-sizing: border-box;
-        }
-        .form-group input:focus {
-            outline: none;
-            border-color: #00d9ff;
-            box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
-        }
-        .form-group input::placeholder {
-            color: #666;
-        }
-        .auth-error {
-            background: rgba(255, 107, 107, 0.2);
-            border: 1px solid #ff6b6b;
-            color: #ff6b6b;
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            display: none;
-        }
-        .auth-error.show {
-            display: block;
-        }
-        .auth-success {
-            background: rgba(0, 217, 255, 0.2);
-            border: 1px solid #00d9ff;
-            color: #00d9ff;
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            display: none;
-        }
-        .auth-success.show {
-            display: block;
-        }
-        .btn-block {
-            width: 100%;
-        }
-        .back-link {
-            text-align: center;
-            margin-top: 20px;
-        }
-        .back-link a {
-            color: #00d9ff;
-            text-decoration: none;
-            font-size: 14px;
-        }
-        .back-link a:hover {
-            text-decoration: underline;
-        }
-    </style>
 </head>
 <body>
     <div class="auth-container">
@@ -140,7 +30,7 @@
                     aria-required="true"
                     aria-describedby="loginUsernameHelp"
                 >
-                <span id="loginUsernameHelp" class="visually-hidden">Champ obligatoire</span>
+                <span id="loginUsernameHelp" style="display: none;">Champ obligatoire</span>
             </div>
             <div class="form-group">
                 <label for="loginPassword">Mot de passe</label>
@@ -152,7 +42,7 @@
                     aria-required="true"
                 >
             </div>
-            <button type="submit" id="loginSubmit" class="btn-primary btn-block">Se connecter</button>
+            <button type="submit" id="loginSubmit" class="btn btn-primary btn-block">Se connecter</button>
         </form>
 
         <!-- Register Form -->
@@ -206,11 +96,11 @@
                     aria-required="true"
                 >
             </div>
-            <button type="submit" id="registerSubmit" class="btn-primary btn-block">S'inscrire</button>
+            <button type="submit" id="registerSubmit" class="btn btn-primary btn-block">S'inscrire</button>
         </form>
 
-        <div class="back-link">
-            <a href="/web">← Retour à l'accueil</a>
+        <div style="text-align: center; margin-top: 25px;">
+            <a href="/web" class="btn btn-secondary btn-small">← Retour à l'accueil</a>
         </div>
     </div>
 
@@ -219,14 +109,6 @@
     <script src="/static/js/auth-api.js"></script>
     <script src="/static/js/auth-ui.js"></script>
     <script>
-        // Debug: Check what's loaded
-        console.log('Auth modules loaded:');
-        console.log('- window.safeJsonParse:', typeof window.safeJsonParse);
-        console.log('- window.authApi:', typeof window.authApi);
-        console.log('- window.authUi:', typeof window.authUi);
-        console.log('- window.authApi.login:', typeof window.authApi?.login);
-        console.log('- window.authUi.handleLogin:', typeof window.authUi?.handleLogin);
-
         // Expose setToken from auth.js if available
         if (typeof window.setToken === 'undefined') {
             window.setToken = function(token) {
@@ -237,44 +119,26 @@
 
         // Attach event listeners after all scripts are loaded
         document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM Content Loaded');
-            console.log('window.authUi:', window.authUi);
-
             const loginForm = document.getElementById('loginForm');
             const registerForm = document.getElementById('registerForm');
 
             if (loginForm && window.authUi && window.authUi.handleLogin) {
                 loginForm.addEventListener('submit', window.authUi.handleLogin);
-                console.log('✓ Login handler attached');
-            } else {
-                console.error('✗ authUi.handleLogin not available', {
-                    hasLoginForm: !!loginForm,
-                    hasAuthUi: !!window.authUi,
-                    hasHandleLogin: !!window.authUi?.handleLogin
-                });
             }
 
             if (registerForm && window.authUi && window.authUi.handleRegister) {
                 registerForm.addEventListener('submit', window.authUi.handleRegister);
-                console.log('✓ Register handler attached');
-            } else {
-                console.error('✗ authUi.handleRegister not available');
             }
 
             // Attach tab click handlers
             const tabs = document.querySelectorAll('.auth-tab');
-            console.log('Found tabs:', tabs.length);
             tabs.forEach(tab => {
                 tab.addEventListener('click', function() {
-                    console.log('Tab clicked:', this.dataset.tab);
                     if (window.authUi && window.authUi.switchTab) {
                         window.authUi.switchTab(this.dataset.tab);
-                    } else {
-                        console.error('✗ authUi.switchTab not available');
                     }
                 });
             });
-            console.log('✓ Tab handlers attached');
         });
     </script>
 </body>