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

fix: resolve all DaisyUI audit issues

Browse Source 
- settings.js: replace broken CSS vars with getThemeColor() helper
- base.html: add bg-primary text-primary-content active state to drawer
- All templates: btn-small -> btn-sm (DaisyUI standard)
- Delete orphan templates/components/header.html
- auth-utils.js: fix .show class -> use hidden (Tailwind)
- login.html: remove redundant auth-* classes, keep DaisyUI only
- auth-ui.js: update form selector for cleanup
- watchlist.html: fix nav active class styling
- 4 JS files (series-search, tabs, recommendations, anime-details):
  - Replace all old CSS classes with DaisyUI/Tailwind
  - Remove hardcoded colors, use theme-aware classes
  - loading-spinner -> DaisyUI loading component
  - no-results/search-results -> Tailwind utility layout
  - All badges -> DaisyUI badge variants
This commit is contained in:
root
2026-04-11 20:20:26 +00:00
parent 4101d98a41
commit 535005b3d5
12 changed files with 375 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/recommendations.js
+97 -85
View File
@@ -8,7 +8,7 @@ async function loadRecommendations() {
if (!container) return;
try {
container.innerHTML = '<div class="loading-spinner">Analyse de vos téléchargements...</div>';
container.innerHTML = '<div class="flex justify-center py-8"><span class="loading loading-spinner loading-md"></span><span class="ml-3 text-base-content/60">Analyse de vos téléchargements...</span></div>';
const response = await fetch(`${API_BASE}/recommendations?limit=12`);
const data = await response.json();
@@ -16,17 +16,18 @@ async function loadRecommendations() {
console.log('Recommendations response:', data);
if (data.recommendations && data.recommendations.length > 0) {
container.innerHTML = `<div class="recommendations-carousel">${data.recommendations.map(anime =>
container.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">${data.recommendations.map(anime =>
renderRecommendationCard(anime)
).join('')}</div>`;
} else {
container.innerHTML = `
<div class="no-results">
<p><i class="fa-solid fa-triangle-exclamation"></i> Aucune recommandation disponible pour le moment.</p>
<p style="font-size: 12px; margin-top: 10px; color: #888;">
<div class="text-center py-16 text-base-content/50">
<i class="fa-solid fa-triangle-exclamation text-3xl mb-3 block"></i>
<p>Aucune recommandation disponible pour le moment.</p>
<p class="text-xs mt-2 text-base-content/40">
Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
</p>
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-sm mt-3" onclick="loadRecommendations()">
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
@@ -37,10 +38,11 @@ async function loadRecommendations() {
} catch (error) {
console.error('Error loading recommendations:', error);
container.innerHTML = `
<div class="no-results">
<p><i class="fa-solid fa-xmark"></i> Erreur lors du chargement des recommandations.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
<div class="text-center py-16 text-base-content/50">
<i class="fa-solid fa-xmark text-3xl mb-3 block"></i>
<p>Erreur lors du chargement des recommandations.</p>
<p class="text-xs mt-2 text-error">${error.message}</p>
<button class="btn btn-secondary btn-sm mt-3" onclick="loadRecommendations()">
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
@@ -57,7 +59,7 @@ async function loadLatestReleases() {
if (!container) return;
try {
container.innerHTML = '<div class="loading-spinner">Chargement des dernières sorties...</div>';
container.innerHTML = '<div class="flex justify-center py-8"><span class="loading loading-spinner loading-md"></span><span class="ml-3 text-base-content/60">Chargement des dernières sorties...</span></div>';
const response = await fetch(`${API_BASE}/releases/latest?limit=12`);
const data = await response.json();
@@ -65,17 +67,18 @@ async function loadLatestReleases() {
console.log('Releases response:', data);
if (data.releases && data.releases.length > 0) {
container.innerHTML = `<div class="releases-carousel">${data.releases.map(anime =>
container.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">${data.releases.map(anime =>
renderReleaseCard(anime)
).join('')}</div>`;
} else {
container.innerHTML = `
<div class="no-results">
<p><i class="fa-solid fa-triangle-exclamation"></i> Aucune sortie disponible pour le moment.</p>
<p style="font-size: 12px; margin-top: 10px; color: #888;">
<div class="text-center py-16 text-base-content/50">
<i class="fa-solid fa-triangle-exclamation text-3xl mb-3 block"></i>
<p>Aucune sortie disponible pour le moment.</p>
<p class="text-xs mt-2 text-base-content/40">
L'API MyAnimeList pourrait être temporairement inaccessible.
</p>
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-sm mt-3" onclick="loadLatestReleases()">
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
@@ -86,10 +89,11 @@ async function loadLatestReleases() {
} catch (error) {
console.error('Error loading releases:', error);
container.innerHTML = `
<div class="no-results">
<p><i class="fa-solid fa-xmark"></i> Erreur lors du chargement des sorties.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
<div class="text-center py-16 text-base-content/50">
<i class="fa-solid fa-xmark text-3xl mb-3 block"></i>
<p>Erreur lors du chargement des sorties.</p>
<p class="text-xs mt-2 text-error">${error.message}</p>
<button class="btn btn-secondary btn-sm mt-3" onclick="loadLatestReleases()">
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
@@ -148,44 +152,48 @@ function renderRecommendationCard(anime) {
const reason = anime.recommendation_reason || 'Recommandé';
return `
<div class="anime-card-horizontal recommendation-card">
${reason ? `<div class="recommendation-badge"><i class="fa-solid fa-lightbulb"></i> ${escapeHtml(reason)}</div>` : ''}
<div class="card bg-base-200 border border-base-300 shadow-sm relative">
${reason ? `<div class="badge badge-accent badge-sm absolute top-2 left-2 z-10"><i class="fa-solid fa-lightbulb"></i> ${escapeHtml(reason)}</div>` : ''}
<div class="anime-card-header">
<div class="anime-card-title">${escapeHtml(anime.title)}</div>
${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
</div>
<div class="card-body p-4">
<div class="flex justify-between items-start">
<h4 class="card-title text-base">${escapeHtml(anime.title)}</h4>
${score > 0 ? `<span class="badge badge-warning badge-sm shrink-0 ml-2"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</span>` : ''}
</div>
<div class="anime-card-content">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}
<div class="flex gap-3 mt-1">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="w-20 h-28 object-cover rounded-lg shrink-0" onerror="this.style.display='none'">` : ''}
<div class="anime-card-info">
<div class="anime-genres">
${genres.slice(0, 3).map(g => `<span class="anime-genre-tag">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="flex flex-col gap-2 text-sm">
<div class="flex flex-wrap gap-1">
${genres.slice(0, 3).map(g => `<span class="badge badge-outline badge-sm">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="anime-card-meta">
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
<div class="text-base-content/60 text-xs">
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
</div>
</div>
</div>
${anime.synopsis ? `
<details class="anime-synopsis">
<summary><i class="fa-solid fa-book"></i> Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
${anime.synopsis ? `
<details class="collapse collapse-arrow border border-base-300 mt-2 bg-base-300/30">
<summary class="collapse-title text-xs font-medium py-2 min-h-0"><i class="fa-solid fa-book"></i> Synopsis</summary>
<div class="collapse-content text-xs text-base-content/70">
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</div>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<i class="fa-solid fa-download"></i> Télécharger
</button>
<div class="card-actions justify-end mt-2">
<button class="btn btn-secondary btn-sm" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-sm" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<i class="fa-solid fa-download"></i> Télécharger
</button>
</div>
</div>
</div>
`;
@@ -201,44 +209,48 @@ function renderReleaseCard(anime) {
const releaseType = anime.release_type || 'Nouveau';
return `
<div class="anime-card-horizontal release-card">
<div class="release-badge"><i class="fa-solid fa-fire"></i> ${escapeHtml(releaseType)}</div>
<div class="card bg-base-200 border border-base-300 shadow-sm relative">
<div class="badge badge-error badge-sm absolute top-2 left-2 z-10"><i class="fa-solid fa-fire"></i> ${escapeHtml(releaseType)}</div>
<div class="anime-card-header">
<div class="anime-card-title">${escapeHtml(anime.title)}</div>
${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
</div>
<div class="card-body p-4">
<div class="flex justify-between items-start">
<h4 class="card-title text-base">${escapeHtml(anime.title)}</h4>
${score > 0 ? `<span class="badge badge-warning badge-sm shrink-0 ml-2"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</span>` : ''}
</div>
<div class="anime-card-content">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}
<div class="flex gap-3 mt-1">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="w-20 h-28 object-cover rounded-lg shrink-0" onerror="this.style.display='none'">` : ''}
<div class="anime-card-info">
<div class="anime-genres">
${genres.slice(0, 3).map(g => `<span class="anime-genre-tag" style="color: #ff6b6b; background: rgba(255,107,107,0.15);">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="flex flex-col gap-2 text-sm">
<div class="flex flex-wrap gap-1">
${genres.slice(0, 3).map(g => `<span class="badge badge-error badge-outline badge-sm">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="anime-card-meta">
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
<div class="text-base-content/60 text-xs">
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
</div>
</div>
</div>
${anime.synopsis ? `
<details class="anime-synopsis">
<summary><i class="fa-solid fa-book"></i> Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
${anime.synopsis ? `
<details class="collapse collapse-arrow border border-base-300 mt-2 bg-base-300/30">
<summary class="collapse-title text-xs font-medium py-2 min-h-0"><i class="fa-solid fa-book"></i> Synopsis</summary>
<div class="collapse-content text-xs text-base-content/70">
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</div>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<i class="fa-solid fa-download"></i> Télécharger
</button>
<div class="card-actions justify-end mt-2">
<button class="btn btn-secondary btn-sm" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-sm" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<i class="fa-solid fa-download"></i> Télécharger
</button>
</div>
</div>
</div>
`;
@@ -246,11 +258,11 @@ function renderReleaseCard(anime) {
// Get rating color based on score
function getRatingColor(score) {
if (score >= 9) return '#ffd700';
if (score >= 8) return '#2d936c';
if (score >= 7) return '#FF9F1C';
if (score >= 6) return '#f4a261';
return '#888888';
if (score >= 9) return 'text-warning';
if (score >= 8) return 'text-success';
if (score >= 7) return 'text-warning';
if (score >= 6) return 'text-warning';
return 'text-base-content/40';
}
// Search anime on providers (redirects to anime tab)