feat: flat design Sunset Glitch palette + Font Awesome icons
CI / Test (Python 3.11) (pull_request) Has been cancelled
CI / Test (Python 3.12) (pull_request) Has been cancelled
CI / Lint (pull_request) Has been cancelled
CI / Type Check (pull_request) Has been cancelled
CI / Summary (pull_request) Has been cancelled

This commit is contained in:
root
2026-04-04 07:59:46 +00:00
parent 0179ddbdf4
commit 9e53579b36
24 changed files with 437 additions and 260 deletions
+25 -25
View File
@@ -22,12 +22,12 @@ async function loadRecommendations() {
} else {
container.innerHTML = `
<div class="no-results">
<p>⚠️ Aucune recommandation disponible pour le moment.</p>
<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;">
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;">
🔄 Réessayer
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
`;
@@ -38,10 +38,10 @@ async function loadRecommendations() {
console.error('Error loading recommendations:', error);
container.innerHTML = `
<div class="no-results">
<p> Erreur lors du chargement des recommandations.</p>
<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;">
🔄 Réessayer
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
`;
@@ -71,12 +71,12 @@ async function loadLatestReleases() {
} else {
container.innerHTML = `
<div class="no-results">
<p>⚠️ Aucune sortie disponible pour le moment.</p>
<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;">
L'API MyAnimeList pourrait être temporairement inaccessible.
</p>
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
🔄 Réessayer
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
`;
@@ -87,10 +87,10 @@ async function loadLatestReleases() {
console.error('Error loading releases:', error);
container.innerHTML = `
<div class="no-results">
<p> Erreur lors du chargement des sorties.</p>
<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;">
🔄 Réessayer
<i class="fa-solid fa-rotate"></i> Réessayer
</button>
</div>
`;
@@ -100,7 +100,7 @@ async function loadLatestReleases() {
// Load all home content
async function loadHomeContent() {
console.log('🏠 loadHomeContent() called');
console.log('loadHomeContent() called');
const loading = document.getElementById('homeLoading');
const recommendationsSection = document.getElementById('recommendationsSection');
@@ -123,13 +123,13 @@ async function loadHomeContent() {
loadRecommendations(),
loadLatestReleases()
]);
console.log('Home content loaded successfully');
console.log('Home content loaded successfully');
// Show sections if they have content
if (recommendationsSection) recommendationsSection.style.display = 'block';
if (releasesSection) releasesSection.style.display = 'block';
} catch (error) {
console.error('Error loading home content:', error);
console.error('Error loading home content:', error);
if (loading) {
loading.innerHTML = 'Erreur lors du chargement. Consultez la console pour plus de détails.';
}
@@ -149,11 +149,11 @@ function renderRecommendationCard(anime) {
return `
<div class="anime-card-horizontal recommendation-card">
${reason ? `<div class="recommendation-badge">💡 ${escapeHtml(reason)}</div>` : ''}
${reason ? `<div class="recommendation-badge"><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"> ${score.toFixed(1)}</div>` : ''}
${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
</div>
<div class="anime-card-content">
@@ -165,7 +165,7 @@ function renderRecommendationCard(anime) {
</div>
<div class="anime-card-meta">
${anime.episodes ? `📺 ${anime.episodes} ep` : ''}
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
@@ -174,17 +174,17 @@ function renderRecommendationCard(anime) {
${anime.synopsis ? `
<details class="anime-synopsis">
<summary>📖 Synopsis</summary>
<summary><i class="fa-solid fa-book"></i> Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
<i class="fa-solid fa-download"></i> Télécharger
</button>
</div>
</div>
@@ -202,11 +202,11 @@ function renderReleaseCard(anime) {
return `
<div class="anime-card-horizontal release-card">
<div class="release-badge">🔥 ${escapeHtml(releaseType)}</div>
<div class="release-badge"><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"> ${score.toFixed(1)}</div>` : ''}
${score > 0 ? `<div class="anime-card-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(1)}</div>` : ''}
</div>
<div class="anime-card-content">
@@ -218,7 +218,7 @@ function renderReleaseCard(anime) {
</div>
<div class="anime-card-meta">
${anime.episodes ? `📺 ${anime.episodes} ep` : ''}
${anime.episodes ? `<i class="fa-solid fa-tv"></i> ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
@@ -227,17 +227,17 @@ function renderReleaseCard(anime) {
${anime.synopsis ? `
<details class="anime-synopsis">
<summary>📖 Synopsis</summary>
<summary><i class="fa-solid fa-book"></i> Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
<i class="fa-solid fa-link"></i> MAL
</button>
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
<i class="fa-solid fa-download"></i> Télécharger
</button>
</div>
</div>
@@ -248,9 +248,9 @@ function renderReleaseCard(anime) {
function getRatingColor(score) {
if (score >= 9) return '#ffd700';
if (score >= 8) return '#2d936c';
if (score >= 7) return '#f15025';
if (score >= 7) return '#FF9F1C';
if (score >= 6) return '#f4a261';
return '#ced0ce';
return '#888888';
}
// Search anime on providers (redirects to anime tab)