Spaces:

mramazan
/

AnimeRecBERT

Running

File size: 40,563 Bytes

426ffb5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anime Recommendation System</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='greentheme.css') }}" id="theme-green" disabled>
    <link rel="stylesheet" href="{{ url_for('static', filename='orangetheme.css') }}" id="theme-orange" disabled>
    <link rel="stylesheet" href="{{ url_for('static', filename='purpletheme.css') }}" id="theme-purple">
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="preconnect" href="https://www.google-analytics.com">

    <style>
        /* Critical CSS - Sayfa yükleme sırasında görünümü engellemek için */
        html {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        html.loaded {
            visibility: visible;
            opacity: 1;
        }

        /* Loading screen */
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 1;
            transition: opacity 0.5s ease-out;
        }

        .page-loader.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Preload critical animations */
        .preload-animations {
            position: absolute;
            top: -9999px;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
        }

        /* Theme Switcher Styles */
        .theme-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }


        .theme-switcher-toggle {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 10px;
            transition: all 0.3s ease;
            color: inherit;
        }

        .theme-switcher-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .theme-options {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 15px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: all 0.3s ease;
            min-width: 150px;
        }

        .theme-options.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        .theme-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 2px 0;
            font-size: 14px;
            font-weight: 500;
        }

        .theme-option:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(3px);
        }

        .theme-option.active {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .theme-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }

        .theme-option.active .theme-color {
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .theme-purple .theme-color {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .theme-green .theme-color {
            background: linear-gradient(45deg, #4caf50, #2e7d32);
        }

        .theme-orange .theme-color {
            background: linear-gradient(45deg, #ffa500, #ff4500);
        }
        .product-hunt {
            position: fixed;
            top: 17px;
            right: 235px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .theme-switcher {
                top: 15px;
                right: 15px;
                padding: 6px;
            }

            .theme-switcher-toggle {
                font-size: 18px;
                padding: 6px;
            }

            .theme-options {
                right: -20px;
                min-width: 130px;
            }

            .theme-option {
                font-size: 13px;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Page Loader -->
    <div class="page-loader" id="pageLoader">
        <div class="loader-spinner"></div>
    </div>

    <!-- Preload animations -->
    <div class="preload-animations">
        <div class="theme-switcher-toggle"></div>
        <div class="theme-option"></div>
        <div class="anime-card"></div>
    </div>


    <div class="theme-switcher">
        <button class="theme-switcher-toggle" onclick="toggleThemeOptions()">🎨</button>
        <div class="theme-options" id="themeOptions">
            <div class="theme-option theme-purple active" onclick="changeTheme('purple')">
                <div class="theme-color"></div>
                <span>Purple</span>
            </div>
            <div class="theme-option theme-green" onclick="changeTheme('green')">
                <div class="theme-color"></div>
                <span>Green</span>
            </div>
            <div class="theme-option theme-orange" onclick="changeTheme('orange')">
                <div class="theme-color"></div>
                <span>Orange</span>
            </div>
        </div>
    </div>

    <div class="social-button">
        <a href="/chat" class="social-btn">
            <span class="social-icon">💬</span>
            <span class="social-text">Social</span>
        </a>
    </div>

    <button class="back-button" onclick="showFavorites()">← Back to Favorites</button>

    <div class="container">
        <div class="header">
            <h1>Just one episode...</h1>
            <p>Discover your next favorite anime</p>
        </div>

        <!-- Favorites Section -->
        <div class="favorites-section" id="favoritesSection">
            <h2 class="section-title">Select Your Favorite Animes</h2>

           <div class="search-container" style="position: relative;">
  <input type="text" class="search-input" id="animeSearch" placeholder="Search for an anime..." autocomplete="off">
  <button class="blacklist-button" id="blacklistButton" onclick="openBlacklistModal()" title="Manage Blacklist">
    🗑️
    <span class="blacklist-counter" id="blacklistCounter">0</span>
</button>
               <div class="blacklist-modal" id="blacklistModal">
    <div class="blacklist-content">
        <div class="blacklist-header">
            <h2 class="blacklist-title">Blacklisted Animes</h2>
            <button class="blacklist-close" onclick="closeBlacklistModal()">×</button>
        </div>
        <div class="blacklist-list" id="blacklistList"></div>
        <div class="blacklist-actions">
            <button class="clear-blacklist-btn" onclick="clearBlacklist()">Clear All Blacklist</button>
        </div>
    </div>
</div>
  <!-- Modern SVG ikonu -->
  <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       style="width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #888;">
    <circle cx="11" cy="11" r="8" />
    <line x1="21" y1="21" x2="16.65" y2="16.65" />
  </svg>

  <div class="anime-dropdown" id="animeDropdown"></div>
</div>


            <div class="favorites-list" id="favoritesList">
                <div class="empty-state">No favorites selected yet. Search and add some animes!</div>
            </div>

            <div class="action-buttons">
                <button class="btn btn-primary" onclick="getRecommendations()">Get Recommendations</button>
                <button class="btn btn-secondary" onclick="clearFavorites()">Clear All</button>
            </div>
        </div>

        <!-- Recommendations Section -->

        <div class="recommendations-section" id="recommendationsSection">
            <div class="favorites-section">
                <h2 class="section-title">Recommended for You</h2>
                <div class="filter-container">
                    <div class="filter-buttons">
                        <button class="filter-btn" data-filter="show_sequels" onclick="toggleFilter(this)">Sequels</button>
                        <button class="filter-btn active" data-filter="show_movies" onclick="toggleFilter(this)">Movies</button>
                        <button class="filter-btn active" data-filter="show_tv" onclick="toggleFilter(this)">TV Series</button>
                        <button class="filter-btn" data-filter="show_ova" onclick="toggleFilter(this)">OVA/ONA/SPECIAL</button>
                    </div>
                    <button class="apply-filters-btn" onclick="applyFilters()">Apply Filters</button>
                </div>
                <div class="recommendations-grid" id="recommendationsGrid"></div>
            </div>
        </div>

        <div class="about-section" id="aboutSection">
            <div class="about-content">
                <div class="about-item">
                    <h3>About the Model</h3>
                    <p>Despite its strong performance, I couldn't find any anime recommendation websites using a BERT-based recommender system. This recommendation system uses a BERT transformer specifically for anime recommendations. Unlike other systems, it takes only users' favorite anime titles as input, rather than ratings. I believe the BERT model handled the recommendation task very well, including effectively addressing the cold start problem by generating meaningful recommendations even with limited user data.</p>
                </div>

                <div class="about-item">
                    <h3>Purpose</h3>
                    <p>AnimeRecbert was built with the mission of making anime discovery smarter, more personal, and more enjoyable. Instead of relying on generic ratings or tags, it uses the power of modern NLP — specifically BERT — to understand your favorite titles and suggest anime that match your unique preferences. Our goal is to reimagine recommendation systems by combining deep language understanding with intuitive user interaction. Whether you're a seasoned anime fan or just getting started, AnimeRecbert helps you find your next favorite show effortlessly.</p>
                </div>

                <div class="about-item">
                    <h3>Contact & Feedback</h3>
                    <p><a href="mailto:[email protected]">[email protected]</a></p>
                </div>

                <div class="about-item">
                    <h3>GitHub Repo</h3>
                    <p><a href="https://github.com/MRamazan/AnimeRecBertWeb">https://github.com/MRamazan/AnimeRecBertWeb</a></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let allAnimes = [];
        let malLogoUrl = '';
        let currentTheme = 'purple';

        // Page loading optimization
        function initializePage() {
            // Hide loader after everything is loaded
            const pageLoader = document.getElementById('pageLoader');
            const html = document.documentElement;

            // Add loaded class to html
            html.classList.add('loaded');

            // Hide loader with animation
            setTimeout(() => {
                pageLoader.classList.add('hidden');
                setTimeout(() => {
                    pageLoader.style.display = 'none';
                }, 500);
            }, 300);
        }

        // Critical resource preloading
        function preloadCriticalResources() {
            // Preload theme CSS files
            const themes = ['green', 'orange', 'purple'];
            themes.forEach(theme => {
                const link = document.createElement('link');
                link.rel = 'preload';
                link.as = 'style';
                link.href = `{{ url_for('static', filename='${theme}theme.css') }}`;
                document.head.appendChild(link);
            });

            // Preload commonly used images
            const commonImages = ['/static/mal-logo.png', '/static/placeholder.jpg'];
            commonImages.forEach(src => {
                const img = new Image();
                img.src = src;
            });
        }

        // Theme Switcher Functions
        function toggleThemeOptions() {
            const themeOptions = document.getElementById('themeOptions');
            themeOptions.classList.toggle('show');
        }

        function changeTheme(theme) {
            // Use requestAnimationFrame for smooth transitions
            requestAnimationFrame(() => {
                // Disable all theme stylesheets
                document.getElementById('theme-purple').disabled = true;
                document.getElementById('theme-green').disabled = true;
                document.getElementById('theme-orange').disabled = true;

                // Enable selected theme
                document.getElementById(`theme-${theme}`).disabled = false;

                // Update active theme option
                document.querySelectorAll('.theme-option').forEach(option => {
                    option.classList.remove('active');
                });
                document.querySelector(`.theme-${theme}`).classList.add('active');

                // Save theme preference
                localStorage.setItem('selectedTheme', theme);
                currentTheme = theme;

                // Hide theme options
                document.getElementById('themeOptions').classList.remove('show');
            });
        }

        function loadSavedTheme() {
            const savedTheme = localStorage.getItem('selectedTheme') || 'purple';
            changeTheme(savedTheme);
        }

        // Close theme options when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.theme-switcher')) {
                document.getElementById('themeOptions').classList.remove('show');
            }
        });

        // Initialize the application
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize page loading

            initializePage();
            preloadCriticalResources();
            loadBlacklist();

            loadSavedTheme();
            loadFavorites();
            loadMalLogo();

            const searchInput = document.getElementById('animeSearch');
            const dropdown = document.getElementById('animeDropdown');

            // Use debouncing for search
            let searchTimeout;
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                const query = this.value.trim();

                searchTimeout = setTimeout(() => {
                    if (query.length > 0) {
                        searchAnimes(query);
                    } else {
                        hideDropdown();
                    }
                }, 300); // 300ms debounce
            });

            // Hide dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.search-container')) {
                    hideDropdown();
                }
            });
        });

        // Load MAL logo from backend with caching
        async function loadMalLogo() {
            try {
                // Check cache first
                const cachedLogo = localStorage.getItem('malLogoUrl');
                if (cachedLogo) {
                    malLogoUrl = cachedLogo;
                    return;
                }

                const response = await fetch('/api/mal_logo');
                const data = await response.json();
                if (data.success) {
                    malLogoUrl = data.logo_url;
                    localStorage.setItem('malLogoUrl', malLogoUrl);
                }
            } catch (error) {
                console.error('Error loading MAL logo:', error);
            }
        }

        // Search animes with caching
        let searchCache = new Map();
        async function searchAnimes(query) {
            try {
                // Check cache first
                if (searchCache.has(query)) {
                    showDropdown(searchCache.get(query));
                    return;
                }

                const response = await fetch(`/api/search_animes?q=${encodeURIComponent(query)}`);
                const animes = await response.json();

                // Cache the result
                searchCache.set(query, animes);

                // Limit cache size
                if (searchCache.size > 50) {
                    const firstKey = searchCache.keys().next().value;
                    searchCache.delete(firstKey);
                }

                showDropdown(animes);
            } catch (error) {
                console.error('Error searching animes:', error);
            }
        }

        // Show dropdown with optimized rendering
        function showDropdown(animes) {
            const dropdown = document.getElementById('animeDropdown');

            // Use requestAnimationFrame for smooth rendering
            requestAnimationFrame(() => {
                dropdown.innerHTML = '';
                dropdown.style.display = 'block';

                // Use DocumentFragment for better performance
                const fragment = document.createDocumentFragment();

                if (animes.length === 0) {
                    const option = document.createElement('div');
                    option.className = 'anime-option';
                    option.textContent = 'No animes found';
                    fragment.appendChild(option);
                } else {
                    animes.slice(0, 30).forEach(anime => {
                        const option = document.createElement('div');
                        option.className = 'anime-option';
                        option.textContent = anime[1];
                        option.onclick = () => addToFavorites(anime[0], anime[1]);
                        fragment.appendChild(option);
                    });
                }

                dropdown.appendChild(fragment);

                // Show with animation
                setTimeout(() => {
                    dropdown.classList.add('show');
                }, 50);
            });
        }

        // Hide dropdown - optimized version
        function hideDropdown() {
            const dropdown = document.getElementById('animeDropdown');
            dropdown.classList.remove('show');

            setTimeout(() => {
                dropdown.style.display = 'none';
                dropdown.innerHTML = '';
            }, 300);
        }

        // Add anime to favorites
        async function addToFavorites(animeId, animeName) {
            try {
                const response = await fetch('/api/add_favorite', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        anime_id: animeId,
                        anime_name: animeName
                    })
                });

                const result = await response.json();

                if (result.success) {
                    loadFavorites();
                    document.getElementById('animeSearch').value = '';
                    hideDropdown();
                } else {
                    showMessage("Error", 'error');
                }
            } catch (error) {
                console.error('Error adding favorite:', error);
                showMessage('Error adding favorite', 'error');
            }
        }

        // Remove from favorites
        async function removeFromFavorites(animeId) {
            try {
                const response = await fetch('/api/remove_favorite', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        anime_id: animeId,

                    })
                });

                const result = await response.json();

                if (result.success) {
                    loadFavorites();
                } else {
                    showMessage("Error", 'error');
                }
            } catch (error) {
                console.error('Error removing favorite:', error);
            }
        }

        // Remove from favorites
        async function removeFromFavorites(animeId) {
            try {
                const response = await fetch('/api/remove_favorite', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        anime_id: animeId,

                    })
                });

                const result = await response.json();

                if (result.success) {
                    loadFavorites();
                } else {
                    showMessage("Error", 'error');
                }
            } catch (error) {
                console.error('Error removing favorite:', error);
            }
        }

        // Load favorites from server
        async function loadFavorites() {
            try {
                const response = await fetch('/api/get_favorites');
                const favorites = await response.json();
                displayFavorites(favorites);
            } catch (error) {
                console.error('Error loading favorites:', error);
            }
        }

        // Display favorites with optimized rendering
        function displayFavorites(favorites) {
            const favoritesList = document.getElementById('favoritesList');

            requestAnimationFrame(() => {
                if (favorites.length === 0) {
                    favoritesList.innerHTML = '<div class="empty-state">No favorites selected yet. Search and add some animes!</div>';
                } else {
                    const fragment = document.createDocumentFragment();
                    favorites.forEach(anime => {
                        const div = document.createElement('div');
                        div.className = 'favorite-tag';
                        div.innerHTML = `
                            <span>${anime.name}</span>
                            <button class="remove-btn" onclick="removeFromFavorites(${anime.id})">×</button>
                        `;
                        fragment.appendChild(div);
                    });
                    favoritesList.innerHTML = '';
                    favoritesList.appendChild(fragment);
                }
            });
        }

        // Clear all favorites
        async function clearFavorites() {
            try {
                const response = await fetch('/api/clear_favorites', {
                    method: 'POST'
                });

                const result = await response.json();

                if (result.success) {
                    loadFavorites();
                }
            } catch (error) {
                console.error('Error clearing favorites:', error);
            }
        }

        // Get recommendations
        async function getRecommendations() {
    const recommendationsSection = document.getElementById('recommendationsSection');
    const favoritesSection = document.getElementById('favoritesSection');
    const backButton = document.querySelector('.back-button');
    const recommendationsGrid = document.getElementById('recommendationsGrid');

    // Show loading
    recommendationsGrid.innerHTML = `
        <div class="loading">
            <div class="spinner"></div>
            <div>Getting your recommendations...</div>
        </div>
    `;

    // Hide favorites section and show recommendations
    favoritesSection.style.display = 'none';
    recommendationsSection.style.display = 'block';
    backButton.style.display = 'block';

    try {
        const response = await fetch('/api/get_recommendations', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                filters: currentFilters,
                blacklisted_animes: blacklistedAnimes.map(anime => anime.id) // Her zaman blacklist gönder
            })
        });

        const result = await response.json();

        if (result.success) {
            displayRecommendations(result.recommendations);
        } else {
            recommendationsGrid.innerHTML = `
                <div class="loading">
                    <div style="color: #ff6b6b;">${result.message}</div>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error getting recommendations:', error);
        recommendationsGrid.innerHTML = `
            <div class="loading">
                <div style="color: #ff6b6b;">Error getting recommendations</div>
            </div>
        `;
    }
}

        // Display recommendations with optimized rendering
        function displayRecommendations(recommendations) {
    const recommendationsGrid = document.getElementById('recommendationsGrid');

    if (recommendations.length === 0) {
        recommendationsGrid.innerHTML = '<div class="loading">No recommendations found</div>';
        return;
    }

    requestAnimationFrame(() => {
        const fragment = document.createDocumentFragment();

        recommendations.forEach((anime, index) => {
            const imageElement = anime.image_url
                ? `<img src="${anime.image_url}" alt="${anime.name}" class="anime-image" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">`
                : '';

            const placeholderElement = anime.image_url
                ? `<div class="no-image-placeholder" style="display: none;">🎌</div>`
                : `<div class="no-image-placeholder">🎌</div>`;

            const malButton = anime.mal_url
                ? `<a href="${anime.mal_url}" target="_blank" class="mal-button">
                    ${malLogoUrl ? `<img src="${malLogoUrl}" alt="MAL" class="mal-logo">` : '🔗'}
                    View on MyAnimeList
                   </a>`
                : `<div class="mal-message">MyAnimeList link not available</div>`;

            const genresElementFront = anime.genres && anime.genres.length > 0
                ? `<div class="genres-container-front">
                    ${anime.genres.slice(0, 4).map(genre => `<span class="genre-tag-front">${genre}</span>`).join('')}
                   </div>`
                : '';

            const div = document.createElement('div');
            div.className = 'anime-card-wrapper';
            div.style.animationDelay = `${index * 0.1}s`;
            div.setAttribute('data-anime-id', anime.id);
            div.innerHTML = `
                <button class="delete-button" onclick="deleteAnimeCard(event, ${anime.id})" title="Remove from recommendations">
                    🗑️
                </button>
                <div class="anime-rank"></div>
                <div class="anime-card" onclick="flipCard(this)">
                    <div class="card-inner">
                        <div class="card-front">
                            <div class="anime-image-container">
                                ${imageElement}
                                ${placeholderElement}
                            </div>
                            <div class="anime-info">
                                <div class="anime-name">${anime.name}</div>
                                <div class="anime-bottom-section">
                                    ${genresElementFront}
                                    <button class="already-watched-btn" onclick="addToFavoritesFromRecommendations(event, ${anime.id}, '${anime.name.replace(/'/g, "\\'")}')">
                                        Already Watched & Liked
                                    </button>
                                </div>
                                <div class="flip-hint">Click card to see MyAnimeList link →</div>
                            </div>
                        </div>
                        <div class="card-back">
                            <div class="mal-button-container">
                                ${malButton}
                            </div>

                        </div>
                    </div>
                </div>
            `;
            fragment.appendChild(div);
        });

        recommendationsGrid.innerHTML = '';
        recommendationsGrid.appendChild(fragment);
    });
}


        function flipCard(card) {
            const cardInner = card.querySelector('.card-inner');
            const scoreElement = card.querySelector('.anime-score');
            const buttonElement = card.querySelector('.already-watched-btn');

            if (cardInner.classList.contains('flipped')) {
                cardInner.classList.remove('flipped');
                if (scoreElement) scoreElement.classList.add('hidden');
                if (buttonElement) buttonElement.classList.add('hidden');

                setTimeout(() => {
                    if (scoreElement) scoreElement.classList.remove('hidden');
                    if (buttonElement) buttonElement.classList.remove('hidden');
                }, 300);
            } else {
                cardInner.classList.add('flipped');
            }

            const malButton = card.querySelector('.mal-button');
            if (malButton) {
                malButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
        }

        // Show favorites section
        function showFavorites() {
            document.getElementById('favoritesSection').style.display = 'block';
            document.getElementById('recommendationsSection').style.display = 'none';
            document.querySelector('.back-button').style.display = 'none';
            window.scrollTo(0, 0);
        }

        // Show messages
        function showMessage(message, type) {
            alert(message);
        }

        // Add anime to favorites from recommendations
        async function addToFavoritesFromRecommendations(event, animeId, animeName) {
            event.stopPropagation();

            try {
                const response = await fetch('/api/add_favorite', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        anime_id: animeId,
                        anime_name: animeName
                    })
                });

                const result = await response.json();

                if (result.success) {
                    showFavorites();
                    loadFavorites();
                    getRecommendations();
                } else {
                    showMessage("This anime is already in your favorites!", 'info');
                }
            } catch (error) {
                console.error('Error adding favorite:', error);
                showMessage('Error adding to favorites', 'error');
            }
        }

        let currentFilters = {
            show_sequels: false,
            show_movies: true,
            show_tv: true,
            show_ova: false,
        };

        function toggleFilter(button) {
            const filterName = button.getAttribute('data-filter');
            const isActive = button.classList.contains('active');

            if (isActive) {
                button.classList.remove('active');
                currentFilters[filterName] = false;
            } else {
                button.classList.add('active');
                currentFilters[filterName] = true;
            }
        }

        function applyFilters() {
    getRecommendations(); // Artık blacklist otomatik olarak dahil edilecek
}

        // Page visibility optimization
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                // Page is hidden, pause animations
                document.body.style.animationPlayState = 'paused';
            } else {
                // Page is visible, resume animations
                document.body.style.animationPlayState = 'running';
            }
        });
       function deleteAnimeCard(event, animeId) {
    event.stopPropagation();

    const cardWrapper = event.target.closest('.anime-card-wrapper');
    const animeName = cardWrapper.querySelector('.anime-name').textContent;

    // Blacklist'e ekle
    addToBlacklist(animeId, animeName);

    // Smooth animation ile kartı kaldır
    cardWrapper.style.transform = 'scale(0.8)';
    cardWrapper.style.opacity = '0';
    cardWrapper.style.transition = 'all 0.3s ease';

    setTimeout(() => {
        cardWrapper.remove();

        // Kalan kartları yeniden düzenle
        const remainingCards = document.querySelectorAll('.anime-card-wrapper');
        remainingCards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });

        // Önerileri yeniden al (blacklist ile birlikte)
        getRecommendations();
    }, 300);
}
        let blacklistedAnimes = [];

// Blacklist yönetimi
function loadBlacklist() {
    const saved = localStorage.getItem('blacklistedAnimes');
    if (saved) {
        blacklistedAnimes = JSON.parse(saved);
    }
    updateBlacklistCounter();
}

function saveBlacklist() {
    localStorage.setItem('blacklistedAnimes', JSON.stringify(blacklistedAnimes));
    updateBlacklistCounter();
}

function updateBlacklistCounter() {
    const counter = document.getElementById('blacklistCounter');
    const button = document.getElementById('blacklistButton');

    if (blacklistedAnimes.length > 0) {
        counter.textContent = blacklistedAnimes.length;
        button.classList.add('show');
    } else {
        counter.textContent = '0';
        button.classList.remove('show');
    }
}

function addToBlacklist(animeId, animeName) {
    const existingIndex = blacklistedAnimes.findIndex(anime => anime.id === animeId);
    if (existingIndex === -1) {
        blacklistedAnimes.push({ id: animeId, name: animeName });
        saveBlacklist();
    }
}
function displayBlacklistItems() {
    const blacklistList = document.getElementById('blacklistList');

    if (blacklistedAnimes.length === 0) {
        blacklistList.innerHTML = '<div class="empty-blacklist">No animes in blacklist</div>';
        return;
    }

    const fragment = document.createDocumentFragment();
    blacklistedAnimes.forEach(anime => {
        const div = document.createElement('div');
        div.className = 'blacklist-item';
        div.innerHTML = `
            <span class="blacklist-name">${anime.name}</span>
            <button class="remove-blacklist-btn" onclick="removeFromBlacklist(${anime.id})">Remove</button>
        `;
        fragment.appendChild(div);
    });

    blacklistList.innerHTML = '';
    blacklistList.appendChild(fragment);
}
function removeFromBlacklist(animeId) {
    blacklistedAnimes = blacklistedAnimes.filter(anime => anime.id !== animeId);
    saveBlacklist();
    displayBlacklistItems();
}
function showCustomConfirm(title, message, onConfirm) {
    // Modal HTML'ini oluştur
    const modal = document.createElement('div');
    modal.className = 'custom-confirm-modal';
    modal.innerHTML = `
        <div class="custom-confirm-content">
            <div class="confirm-header">
                <h3>${title}</h3>
            </div>
            <div class="confirm-message">
                <p>${message}</p>
            </div>
            <div class="confirm-actions">
                <button class="confirm-btn cancel" onclick="closeCustomConfirm()">Cancel</button>
                <button class="confirm-btn confirm" onclick="confirmAction()">Yes, Clear All</button>
            </div>
        </div>
    `;

    document.body.appendChild(modal);

    // Fonksiyonları global olarak erişilebilir yap
    window.confirmAction = () => {
        onConfirm();
        closeCustomConfirm();
    };

    window.closeCustomConfirm = () => {
        modal.remove();
        delete window.confirmAction;
        delete window.closeCustomConfirm;
    };

    // Modal'ı göster
    setTimeout(() => modal.classList.add('show'), 50);
}
function clearBlacklist() {
    showCustomConfirm(
        'Clear All Blacklist',
        'Are you sure you want to clear all blacklisted animes?',
        () => {
            blacklistedAnimes = [];
            saveBlacklist();
            displayBlacklistItems();
        }
    );
}

function openBlacklistModal() {
    displayBlacklistItems();
    document.getElementById('blacklistModal').classList.add('show');
}

function closeBlacklistModal() {
    document.getElementById('blacklistModal').classList.remove('show');
}
        
    </script>


<script async src="https://www.googletagmanager.com/gtag/js?id=G-THGPD4P709"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  // Ek konfigürasyonlar eklenebilir
  gtag('config', 'G-THGPD4P709', {
    // Cookie consent için (isteğe bağlı)
    'anonymize_ip': true,
    // Sayfa yükleme performansı ölçümü
    'send_page_view': true,
    // Custom events tanımlanabilir
    'custom_map': {
      'custom_parameter': 'dimension1'
    }
  });

  // Özel event'ler için örnek fonksiyonlar
  function trackAnimeRecommendation(animeName) {
    gtag('event', 'anime_recommendation', {
      'anime_name': animeName,
      'event_category': 'recommendation',
      'event_label': animeName
    });
  }

  function trackFavoriteAdd(animeName) {
    gtag('event', 'favorite_added', {
      'anime_name': animeName,
      'event_category': 'user_interaction',
      'event_label': animeName
    });
  }

  function trackThemeChange(themeName) {
    gtag('event', 'theme_changed', {
      'theme_name': themeName,
      'event_category': 'ui_customization',
      'event_label': themeName
    });
  }
</script>

</body>
</html>