feat: flat design Sunset Glitch palette + Font Awesome icons

2026-04-04 07:59:46 +00:00
parent 0179ddbdf4
commit 9e53579b36
24 changed files with 437 additions and 260 deletions
@@ -82,7 +82,7 @@ async function searchAnimeDetails(query, malId = null) {
            if (hasResults) {
                streamingParts.unshift(
                    `<div class="streaming-results-header">
-                        <h3>🎬 Résultats de streaming</h3>
+                        <h3><i class="fa-solid fa-film"></i> Résultats de streaming</h3>
                    </div>
                    <div class="search-results" style="margin-top: 20px;">`
                );
@@ -110,7 +110,7 @@ async function searchAnimeDetails(query, malId = null) {
            if (streamingHtml) {
                resultsContainer.innerHTML = `
                    <div class="no-results" style="margin-bottom: 20px;">
-                        <p>ℹ️ Aucune fiche trouvée sur MyAnimeList pour "${escapeHtml(query)}"</p>
+                        <p><i class="fa-solid fa-circle-info"></i> Aucune fiche trouvée sur MyAnimeList pour "${escapeHtml(query)}"</p>
                        <p style="font-size: 12px; margin-top: 10px; color: #888;">
                            Essayez le nom en anglais ou japonais (ex: "Frieren: Beyond Journey's End")
                        </p>
@@ -125,7 +125,7 @@ async function searchAnimeDetails(query, malId = null) {
            } else {
                resultsContainer.innerHTML = `
                    <div class="no-results">
-                        <p>❌ Aucun résultat trouvé pour "${escapeHtml(query)}"</p>
+                        <p><i class="fa-solid fa-xmark"></i> Aucun résultat trouvé pour "${escapeHtml(query)}"</p>
                        <p style="font-size: 12px; margin-top: 10px; color: #888;">
                            Essayez le nom en anglais ou japonais (ex: "Frieren: Beyond Journey's End", "One Piece")
                        </p>
@@ -138,7 +138,7 @@ async function searchAnimeDetails(query, malId = null) {
        console.error('Error searching anime details:', error);
        resultsContainer.innerHTML = `
            <div class="no-results">
-                <p>❌ Erreur lors de la recherche.</p>
+                <p><i class="fa-solid fa-xmark"></i> Erreur lors de la recherche.</p>
                <p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
            </div>
        `;
@@ -177,7 +177,7 @@ async function getProviderSearchResults(query) {
        if (hasResults) {
            htmlParts.unshift(
                `<div class="streaming-results-header">
-                    <h3>🎬 Résultats de streaming</h3>
+                    <h3><i class="fa-solid fa-film"></i> Résultats de streaming</h3>
                </div>
                <div class="search-results" style="margin-top: 20px;">`
            );
@@ -249,16 +249,16 @@ function renderAnimeDetails(anime) {
                    ` : ''}

                    <div class="anime-details-meta">
-                        ${score > 0 ? `<div class="anime-details-rating">★ ${score.toFixed(2)}</div>` : ''}
+                        ${score > 0 ? `<div class="anime-details-rating"><i class="fa-solid fa-star"></i> ${score.toFixed(2)}</div>` : ''}
                        ${rank > 0 ? `<div class="anime-details-rank">#${rank}</div>` : ''}
                        ${popularity > 0 ? `<div class="anime-details-popularity">Popularity #${popularity}</div>` : ''}
                    </div>

                    <div class="anime-details-stats">
-                        ${anime.episodes ? `<span>📺 ${anime.episodes} épisodes</span>` : ''}
-                        ${anime.status ? `<span>📡 ${translateStatus(anime.status)}</span>` : ''}
-                        ${anime.duration ? `<span>⏱️ ${escapeHtml(anime.duration)}</span>` : ''}
-                        ${anime.year ? `<span>📅 ${anime.year}</span>` : ''}
+                        ${anime.episodes ? `<span><i class="fa-solid fa-tv"></i> ${anime.episodes} épisodes</span>` : ''}
+                        ${anime.status ? `<span><i class="fa-solid fa-tower-broadcast"></i> ${translateStatus(anime.status)}</span>` : ''}
+                        ${anime.duration ? `<span><i class="fa-solid fa-clock"></i> ${escapeHtml(anime.duration)}</span>` : ''}
+                        ${anime.year ? `<span><i class="fa-solid fa-calendar"></i> ${anime.year}</span>` : ''}
                    </div>

                    ${studios.length > 0 ? `
@@ -269,10 +269,10 @@ function renderAnimeDetails(anime) {

                    <div class="anime-details-actions">
                        <a href="${escapeHtml(anime.url)}" target="_blank" class="btn btn-secondary btn-small">
-                            🔗 Voir sur MAL
+                            <i class="fa-solid fa-link"></i> Voir sur MAL
                        </a>
                        <button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn btn-primary btn-small">
-                            📥 Télécharger
+                            <i class="fa-solid fa-download"></i> Télécharger
                        </button>
                    </div>
                </div>
@@ -290,9 +290,9 @@ function renderAnimeDetails(anime) {
            ${synopsis ? `
                <div class="anime-details-section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-                        <h3 style="margin: 0;">📖 Synopsis</h3>
+                        <h3 style="margin: 0;"><i class="fa-solid fa-book"></i> Synopsis</h3>
                        <button onclick="translateSynopsis('${synopsisId}', this)" class="btn btn-secondary btn-small" style="font-size: 12px;">
-                            🌐 Traduire en français
+                            <i class="fa-solid fa-globe"></i> Traduire en français
                        </button>
                    </div>
                    <p id="${synopsisId}" class="anime-details-synopsis">${escapeHtml(synopsis)}</p>
@@ -302,7 +302,7 @@ function renderAnimeDetails(anime) {
            <!-- Seasons (Sequel/Prequel) -->
            ${seasons.length > 0 ? `
                <div class="anime-details-section">
-                    <h3>📺 Saisons</h3>
+                    <h3><i class="fa-solid fa-tv"></i> Saisons</h3>
                    <div class="anime-related-list">
                        ${seasons.map(season => `
                            <div class="anime-related-group">
@@ -310,7 +310,7 @@ function renderAnimeDetails(anime) {
                                <div class="anime-related-items">
                                    ${season.entries.map(entry => `
                                        <div class="anime-related-item" onclick="searchAnimeDetails('${escapeHtml(entry.title)}', ${entry.mal_id})" style="cursor: pointer;">
-                                            ${entry.type ? `<span style="color: #f15025; font-size: 11px; margin-right: 8px;">${escapeHtml(entry.type)}</span>` : ''}
+                                            ${entry.type ? `<span style="color: #FFBF69; font-size: 11px; margin-right: 8px;">${escapeHtml(entry.type)}</span>` : ''}
                                            ${escapeHtml(entry.title)}
                                            ${entry.url ? `<a href="${escapeHtml(entry.url)}" target="_blank" style="margin-left: auto; color: #888; font-size: 18px; text-decoration: none;" title="Voir sur MyAnimeList">↗</a>` : ''}
                                        </div>
@@ -358,7 +358,7 @@ async function loadStreamingResults(query) {
        if (successfulResults.length === 0) {
            container.innerHTML = `
                <div class="no-results">
-                    <p>⚠️ Aucun résultat de streaming trouvé pour "${escapeHtml(query)}"</p>
+                    <p><i class="fa-solid fa-triangle-exclamation"></i> Aucun résultat de streaming trouvé pour "${escapeHtml(query)}"</p>
                </div>
            `;
            return;
@@ -367,7 +367,7 @@ async function loadStreamingResults(query) {
        // Display results
        container.innerHTML = `
            <div class="streaming-results-header">
-                <h3>🎬 Disponible sur</h3>
+                <h3><i class="fa-solid fa-film"></i> Disponible sur</h3>
            </div>
            <div class="streaming-results-grid">
                ${successfulResults.map(result => renderStreamingResult(result, query)).join('')}
@@ -378,7 +378,7 @@ async function loadStreamingResults(query) {
        console.error('Error loading streaming results:', error);
        container.innerHTML = `
            <div class="no-results">
-                <p>❌ Erreur lors de la recherche des sources de streaming.</p>
+                <p><i class="fa-solid fa-xmark"></i> Erreur lors de la recherche des sources de streaming.</p>
            </div>
        `;
    }
@@ -406,7 +406,7 @@ function renderStreamingResult(result, query) {
                </select>

                <button class="btn btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
-                    📥 Télécharger
+                    <i class="fa-solid fa-download"></i> Télécharger
                </button>
            </div>

@@ -475,7 +475,7 @@ async function translateSynopsis(synopsisId, button) {
        // Revert to original
        synopsisElement.textContent = originalText;
        synopsisElement.dataset.translated = 'false';
-        button.innerHTML = '🌐 Traduire en français';
+        button.innerHTML = '<i class="fa-solid fa-globe"></i> Traduire en français';
        return;
    }

@@ -484,7 +484,7 @@ async function translateSynopsis(synopsisId, button) {

    // Show loading state
    button.disabled = true;
-    button.innerHTML = '⏳ Traduction...';
+    button.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Traduction...';
    synopsisElement.style.opacity = '0.5';

    try {
@@ -509,7 +509,7 @@ async function translateSynopsis(synopsisId, button) {

            synopsisElement.textContent = data.translatedText;
            synopsisElement.dataset.translated = 'true';
-            button.innerHTML = '🔄 Voir l\'original';
+            button.innerHTML = '<i class="fa-solid fa-rotate"></i> Voir l\'original';
        } else {
            const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }));
            console.error('Translation API error:', errorData);
@@ -523,7 +523,7 @@ async function translateSynopsis(synopsisId, button) {
        const errorMessage = document.createElement('div');
        errorMessage.style.cssText = 'margin-top: 10px; padding: 10px; background: rgba(255, 107, 107, 0.2); border-radius: 8px; font-size: 12px; color: #ff6b6b;';
        errorMessage.innerHTML = `
-            ⚠️ Service de traduction temporairement indisponible.<br>
+            <i class="fa-solid fa-triangle-exclamation"></i> Service de traduction temporairement indisponible.<br>
            <small>Essayez à nouveau dans quelques instants.</small>
        `;