Team Ai
Apppublic

noamin2525/javascript

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
index.html680 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="he" dir="rtl">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>StreamFlix Pro - צפייה ישירה בסרטים וסדרות</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <style>11        @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');12        13        * {14            font-family: 'Heebo', sans-serif;15        }16        17        .gradient-bg {18            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);19        }20        21        .hero-gradient {22            background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 100%);23        }24        25        .card-hover {26            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);27        }28        29        .card-hover:hover {30            transform: scale(1.05);31            box-shadow: 0 20px 40px rgba(0,0,0,0.3);32        }33        34        .scrollbar-hide {35            -ms-overflow-style: none;36            scrollbar-width: none;37        }38        39        .scrollbar-hide::-webkit-scrollbar {40            display: none;41        }42        43        .fade-in {44            animation: fadeIn 0.5s ease-in;45        }46        47        @keyframes fadeIn {48            from { opacity: 0; transform: translateY(20px); }49            to { opacity: 1; transform: translateY(0); }50        }51        52        .shimmer {53            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);54            background-size: 200% 100%;55            animation: shimmer 1.5s infinite;56        }57        58        @keyframes shimmer {59            0% { background-position: 200% 0; }60            100% { background-position: -200% 0; }61        }62        63        .glass-effect {64            background: rgba(255, 255, 255, 0.1);65            backdrop-filter: blur(10px);66            border: 1px solid rgba(255, 255, 255, 0.2);67        }68    </style>69</head>70<body class="bg-gray-900 text-white">71    <!-- Header -->72    <header class="fixed top-0 w-full z-50 glass-effect">73        <nav class="container mx-auto px-4 py-4">74            <div class="flex items-center justify-between">75                <div class="flex items-center space-x-reverse space-x-8">76                    <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">77                        StreamFlix Pro78                    </h1>79                    <div class="hidden md:flex space-x-reverse space-x-6">80                        <a href="#" class="hover:text-purple-400 transition">בית</a>81                        <a href="#movies" class="hover:text-purple-400 transition">סרטים</a>82                        <a href="#series" class="hover:text-purple-400 transition">סדרות</a>83                        <a href="#addons" class="hover:text-purple-400 transition">תוספים</a>84                    </div>85                </div>86                87                <div class="flex items-center space-x-reverse space-x-4">88                    <!-- Search Bar -->89                    <div class="relative hidden md:block">90                        <input 91                            type="text" 92                            id="searchInput"93                            placeholder="חיפוש סרטים, סדרות..."94                            class="bg-gray-800 rounded-full px-4 py-2 pr-10 w-64 focus:outline-none focus:ring-2 focus:ring-purple-400"95                        >96                        <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-gray-400"></i>97                        <!-- Search Results Dropdown -->98                        <div id="searchResults" class="absolute top-full mt-2 w-full bg-gray-800 rounded-lg shadow-xl hidden max-h-96 overflow-y-auto">99                        </div>100                    </div>101                    102                    <!-- User Menu -->103                    <button id="userMenuBtn" class="flex items-center space-x-reverse space-x-2 hover:bg-gray-800 rounded-full p-2 transition">104                        <img src="https://picsum.photos/seed/user1/40/40" alt="User" class="w-8 h-8 rounded-full">105                        <i data-feather="chevron-down" class="w-4 h-4"></i>106                    </button>107                    108                    <!-- Mobile Menu Toggle -->109                    <button id="mobileMenuBtn" class="md:hidden">110                        <i data-feather="menu" class="w-6 h-6"></i>111                    </button>112                </div>113            </div>114        </nav>115    </header>116 117    <!-- Main Content -->118    <main class="pt-16">119        <!-- Hero Section -->120        <section class="relative h-screen flex items-center justify-center overflow-hidden">121            <div id="heroBackground" class="absolute inset-0">122                <img src="https://picsum.photos/seed/hero/1920/1080" alt="Hero" class="w-full h-full object-cover">123                <div class="absolute inset-0 hero-gradient"></div>124            </div>125            126            <div class="relative container mx-auto px-4 text-center fade-in">127                <h2 class="text-5xl md:text-7xl font-bold mb-6">128                    <span id="heroTitle">צפו בכל מה שאתם אוהבים</span>129                </h2>130                <p class="text-xl md:text-2xl mb-8 text-gray-300">131                    אלפי סרטים וסדרות במקום אחד132                </p>133                <div class="flex flex-col sm:flex-row gap-4 justify-center">134                    <button id="watchNowBtn" class="bg-purple-600 hover:bg-purple-700 px-8 py-4 rounded-full font-semibold transition transform hover:scale-105">135                        צפו עכשיו136                    </button>137                    <button id="addonsBtn" class="bg-gray-800 hover:bg-gray-700 px-8 py-4 rounded-full font-semibold transition transform hover:scale-105">138                        התקינו תוספים139                    </button>140                </div>141            </div>142        </section>143 144        <!-- Popular Movies Section -->145        <section id="movies" class="py-16 container mx-auto px-4">146            <div class="flex items-center justify-between mb-8">147                <h3 class="text-3xl font-bold">פופולרי עכשיו</h3>148                <div class="flex space-x-reverse space-x-2">149                    <button id="moviePrev" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full transition">150                        <i data-feather="chevron-right" class="w-5 h-5"></i>151                    </button>152                    <button id="movieNext" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full transition">153                        <i data-feather="chevron-left" class="w-5 h-5"></i>154                    </button>155                </div>156            </div>157            <div id="moviesCarousel" class="flex space-x-reverse space-x-4 overflow-x-auto scrollbar-hide pb-4">158                <!-- Movies will be loaded here -->159            </div>160            <p class="text-gray-400 text-sm mt-2">לחיצה על סרט תציג פרטים נוספים ואפשרות לצפייה ב-Stremio</p>161</section>162 163        <!-- Popular Series Section -->164        <section id="series" class="py-16 container mx-auto px-4">165            <div class="flex items-center justify-between mb-8">166                <h3 class="text-3xl font-bold">סדרות חמות</h3>167                <div class="flex space-x-reverse space-x-2">168                    <button id="seriesPrev" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full transition">169                        <i data-feather="chevron-right" class="w-5 h-5"></i>170                    </button>171                    <button id="seriesNext" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-full transition">172                        <i data-feather="chevron-left" class="w-5 h-5"></i>173                    </button>174                </div>175            </div>176            <div id="seriesCarousel" class="flex space-x-reverse space-x-4 overflow-x-auto scrollbar-hide pb-4">177                <!-- Series will be loaded here -->178            </div>179            <p class="text-gray-400 text-sm mt-2">לחיצה על סדרה תציג פרטים נוספים ואפשרות לצפייה ב-Stremio</p>180</section>181 182        <!-- Addons Section -->183        <section id="addons" class="py-16 container mx-auto px-4">184            <h3 class="text-3xl font-bold mb-8 text-center">תוספים מומלצים</h3>185            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">186                <!-- Torrentio+ed -->187                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition card-hover">188                    <div class="text-purple-400 mb-4">189                        <i data-feather="download" class="w-12 h-12"></i>190                    </div>191                    <h4 class="text-xl font-semibold mb-2">Torrentio+ed</h4>192                    <p class="text-gray-400 mb-4">גישה לתכנים ממקורות טורנט</p>193                    <button class="addon-install-btn w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg transition" 194                            data-url="stremio://torrentio.strem.fun/easydebrid=n3cgfuzhg9ptzbss/manifest.json">195                        התקן עכשיו196                    </button>197                </div>198 199                <!-- Wizdom Subtitles -->200                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition card-hover">201                    <div class="text-blue-400 mb-4">202                        <i data-feather="type" class="w-12 h-12"></i>203                    </div>204                    <h4 class="text-xl font-semibold mb-2">Wizdom כתוביות</h4>205                    <p class="text-gray-400 mb-4">כתוביות איכותיות במגוון שפות</p>206                    <button class="addon-install-btn w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg transition"207                            data-url="stremio://4b139a4b7f94-wizdom-stremio-v2.baby-beamup.club/manifest.json">208                        התקן עכשיו209                    </button>210                </div>211 212                <!-- Ktuvit Subtitles -->213                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition card-hover">214                    <div class="text-green-400 mb-4">215                        <i data-feather="file-text" class="w-12 h-12"></i>216                    </div>217                    <h4 class="text-xl font-semibold mb-2">Ktuvit כתוביות</h4>218                    <p class="text-gray-400 mb-4">כתוביות בעברית מ-Ktuvit</p>219                    <button class="addon-install-btn w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg transition"220                            data-url="stremio://4b139a4b7f94-ktuvit-stremio.baby-beamup.club/manifest.json">221                        התקן עכשיו222                    </button>223                </div>224 225                <!-- New Movies Dates -->226                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition card-hover">227                    <div class="text-red-400 mb-4">228                        <i data-feather="calendar" class="w-12 h-12"></i>229                    </div>230                    <h4 class="text-xl font-semibold mb-2">עדכוני סרטים חדשים</h4>231                    <p class="text-gray-400 mb-4">קבלו התראות על סרטים חדשים</p>232                    <button class="addon-install-btn w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg transition"233                            data-url="stremio://stremio7rd-movies-online-dates.vercel.app/manifest.json">234                        התקן עכשיו235                    </button>236                </div>237 238                <!-- Hebrew Content -->239                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition card-hover">240                    <div class="text-yellow-400 mb-4">241                        <i data-feather="search" class="w-12 h-12"></i>242                    </div>243                    <h4 class="text-xl font-semibold mb-2">תוכן בעברית</h4>244                    <p class="text-gray-400 mb-4">חיפוש תוכן ופוסטרים בעברית</p>245                    <button class="addon-install-btn w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg transition"246                            data-url="stremio://94c8cb9f702d-tmdb-addon.baby-beamup.club/N4IgNghgdg5grhGBTEAuEALJBaAkgGRABoQBnAFwCckIBbAS1jQG0BdEgYwnIjAHsYpFqHoATNCHK1RAIwB05PgAdikgJ5KU6WnwBu9FCSh0tIAArK4kSqtIY+Ad1xQAEn1paqcJAF8iI8XQpWQVlVXINU1IkSgMhIxMJCyUrCBsSO0dnNw80L19-EDEJYPk1GnT1TQkdfUMQY1z0AE0K23snV3dPSm8-AJLpMraSCOr0aNikeIbElpGyDuzuvN6CgaChuUhYBGRwyJq9A1VG03xoeER6zM6cnr7C4s2Qnav90cOJmLjTuZALrtru0sl0mvl+kVApItlQkFBRIwYAdxiBaicEk0QAAVagIpEgu4rVAQp7Q0oKPGIpifVGTX6Y0y4+HU5EZJZgh6+dggLgUADCfDgUHIaAArD4gA/manifest.json">247                        התקן עכשיו248                    </button>249                </div>250            </div>251        </section>252    </main>253 254    <!-- Movie/Series Detail Modal -->255    <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden overflow-y-auto">256        <div class="min-h-screen px-4 text-center">257            <div class="inline-block w-full max-w-6xl my-8 text-right align-middle transition-all transform bg-gray-900 shadow-xl rounded-lg">258                <div id="modalContent">259                    <!-- Dynamic content will be loaded here -->260                </div>261            </div>262        </div>263    </div>264 265    <!-- Toast Notification -->266    <div id="toast" class="fixed bottom-4 left-4 bg-purple-600 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300 z-50">267        <span id="toastMessage"></span>268    </div>269    <script>270        // TMDB API Configuration271        const API_KEY = '93f0d2ee2e3e60d061d14d91cbb47b46';272        const BASE_URL = 'https://api.themoviedb.org/3';273        const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';274 275        // Initialize Feather Icons276        feather.replace();277 278        // Global State279        let currentMovies = [];280        let currentSeries = [];281        let movieCarouselIndex = 0;282        let seriesCarouselIndex = 0;283 284        // Utility Functions285        function showToast(message, duration = 3000) {286            const toast = document.getElementById('toast');287            const toastMessage = document.getElementById('toastMessage');288            toastMessage.textContent = message;289            toast.style.transform = 'translateY(0)';290            setTimeout(() => {291                toast.style.transform = 'translateY(100%)';292            }, duration);293        }294 295        function isStremioInstalled() {296            // Check for Stremio desktop app by testing common Stremio protocols and user agents297            return navigator.userAgent.includes('Stremio') || 298                   navigator.userAgent.includes('Electron') ||299                   window.location.protocol === 'stremio:' ||300                   // Check if Stremio custom protocol handlers are registered301                   !!navigator.registerProtocolHandler ||302                   // Try to detect Stremio by checking for common Stremio window properties303                   (window.external && window.external.AddSearchProvider);304        }305        async function openInStremio(id, type, title) {306            try {307                // Create URL-friendly title by removing special characters and replacing spaces with hyphens308                const cleanTitle = title.toLowerCase()309                    .replace(/[^a-z0-9\s-]/g, '')310                    .replace(/\s+/g, '-')311                    .replace(/-+/g, '-')312                    .replace(/^-|-$/g, '');313                314                // Use TMDB IDs with the proper Stremio URL format315                const stremioUrl = type === 'movie' 316                    ? `stremio:///detail/movie/tmdb-${id}/${cleanTitle}`317                    : `stremio:///detail/series/tmdb-${id}/${cleanTitle}`;318                319                // Try to open Stremio app320                window.location.href = stremioUrl;321                322                showToast('פותח ב-Stremio...');323            } catch (error) {324                console.error('Error opening Stremio:', error);325                showToast('שגיאה בפתיחת Stremio');326            }327        }328async function installAddon(addonUrl) {329            try {330                // Try to open in Stremio app331                window.location.href = addonUrl;332                showToast('מתקין תוסף ב-Stremio...');333                334                // Fallback to web after a short delay335                setTimeout(() => {336                    window.open(addonUrl, '_blank');337                }, 1000);338            } catch (error) {339                console.error('Error installing addon:', error);340                window.open(addonUrl, '_blank');341                showToast('התוסף נפתח בדפדפן - התקן ידנית ב-Stremio');342            }343        }344 345        // API Functions346        async function fetchPopularMovies() {347            try {348                const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=he&page=1`);349                const data = await response.json();350                currentMovies = data.results;351                renderMovies(currentMovies);352            } catch (error) {353                console.error('Error fetching movies:', error);354                showToast('שגיאה בטעינת סרטים');355            }356        }357 358        async function fetchPopularSeries() {359            try {360                const response = await fetch(`${BASE_URL}/tv/popular?api_key=${API_KEY}&language=he&page=1`);361                const data = await response.json();362                currentSeries = data.results;363                renderSeries(currentSeries);364            } catch (error) {365                console.error('Error fetching series:', error);366                showToast('שגיאה בטעינת סדרות');367            }368        }369 370        async function searchContent(query) {371            try {372                const [moviesResponse, seriesResponse] = await Promise.all([373                    fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=he&query=${query}`),374                    fetch(`${BASE_URL}/search/tv?api_key=${API_KEY}&language=he&query=${query}`)375                ]);376                377                const movies = await moviesResponse.json();378                const series = await seriesResponse.json();379                380                return [...movies.results, ...series.results];381            } catch (error) {382                console.error('Error searching:', error);383                return [];384            }385        }386 387        async function fetchMovieDetails(movieId) {388            try {389                const response = await fetch(`${BASE_URL}/movie/${movieId}?api_key=${API_KEY}&language=he`);390                const movie = await response.json();391                return movie;392            } catch (error) {393                console.error('Error fetching movie details:', error);394                return null;395            }396        }397 398        async function fetchSeriesDetails(seriesId) {399            try {400                const response = await fetch(`${BASE_URL}/tv/${seriesId}?api_key=${API_KEY}&language=he`);401                const series = await response.json();402                return series;403            } catch (error) {404                console.error('Error fetching series details:', error);405                return null;406            }407        }408 409        // Render Functions410        function renderMovies(movies) {411            const carousel = document.getElementById('moviesCarousel');412            carousel.innerHTML = movies.map(movie => `413                <div class="flex-none w-48 cursor-pointer movie-card" data-id="${movie.id}" data-type="movie" 414                     onclick="showDetail(${movie.id}, 'movie')">415                    <div class="relative group">416                        <img src="${IMAGE_BASE_URL}${movie.poster_path}" 417                             alt="${movie.title}" 418                             class="w-full h-72 object-cover rounded-lg card-hover"419                             onerror="this.src='https://picsum.photos/seed/${movie.id}/200/300'">420                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg flex items-end p-4">421                            <div class="text-white">422                                <h4 class="font-semibold">${movie.title}</h4>423                                <div class="flex items-center space-x-reverse space-x-2 text-sm">424                                    <span>⭐ ${movie.vote_average.toFixed(1)}</span>425                                    <span>${new Date(movie.release_date).getFullYear()}</span>426                                </div>427                            </div>428                        </div>429                    </div>430                </div>431            `).join('');432        }433 434        function renderSeries(series) {435            const carousel = document.getElementById('seriesCarousel');436            carousel.innerHTML = series.map(show => `437                <div class="flex-none w-48 cursor-pointer series-card" data-id="${show.id}" data-type="series"438                     onclick="showDetail(${show.id}, 'series')">439                    <div class="relative group">440                        <img src="${IMAGE_BASE_URL}${show.poster_path}" 441                             alt="${show.name}" 442                             class="w-full h-72 object-cover rounded-lg card-hover"443                             onerror="this.src='https://picsum.photos/seed/${show.id}/200/300'">444                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg flex items-end p-4">445                            <div class="text-white">446                                <h4 class="font-semibold">${show.name}</h4>447                                <div class="flex items-center space-x-reverse space-x-2 text-sm">448                                    <span>⭐ ${show.vote_average.toFixed(1)}</span>449                                    <span>${show.first_air_date.split('-')[0]}</span>450                                </div>451                            </div>452                        </div>453                    </div>454                </div>455            `).join('');456        }457 458        function renderSearchResults(results) {459            const searchResults = document.getElementById('searchResults');460            if (results.length === 0) {461                searchResults.innerHTML = '<div class="p-4 text-gray-400">לא נמצאו תוצאות</div>';462                return;463            }464            465            searchResults.innerHTML = results.map(item => `466                <div class="p-3 hover:bg-gray-700 cursor-pointer search-result" data-id="${item.id}" data-type="${item.title ? 'movie' : 'series'}">467                    <div class="flex items-center space-x-reverse space-x-3">468                        <img src="${IMAGE_BASE_URL}${item.poster_path}" 469                             alt="${item.title || item.name}" 470                             class="w-12 h-16 object-cover rounded"471                             onerror="this.src='https://picsum.photos/seed/${item.id}/48/64'">472                        <div>473                            <h5 class="font-semibold">${item.title || item.name}</h5>474                            <p class="text-sm text-gray-400">${item.title ? 'סרט' : 'סדרה'} • ${item.vote_average.toFixed(1)} ⭐</p>475                        </div>476                    </div>477                </div>478            `).join('');479            // Add click handlers480            document.querySelectorAll('.search-result').forEach(result => {481                result.addEventListener('click', () => {482                    const id = result.dataset.id;483                    const type = result.dataset.type;484                    const item = type === 'movie' 485                        ? currentMovies.find(m => m.id == id)486                        : currentSeries.find(s => s.id == id);487                    if (item) {488                        showDetail(id, type);489                    }490                    document.getElementById('searchResults').classList.add('hidden');491                    document.getElementById('searchInput').value = '';492                });493            });494}495        async function showDetail(id, type) {496            const modal = document.getElementById('detailModal');497            const modalContent = document.getElementById('modalContent');498            499            modalContent.innerHTML = '<div class="p-8 text-center"><div class="shimmer h-96 w-full rounded-lg"></div></div>';500            modal.classList.remove('hidden');501            502            let details;503            if (type === 'movie') {504                details = await fetchMovieDetails(id);505            } else {506                details = await fetchSeriesDetails(id);507            }508 509            if (!details) {510                modalContent.innerHTML = '<div class="p-8 text-center">שגיאה בטעינת הפרטים</div>';511                return;512            }513            514            modalContent.innerHTML = `515                <div class="relative">516                    <img src="https://image.tmdb.org/t/p/original${details.backdrop_path}" 517                         alt="${details.title || details.name}" 518                         class="w-full h-96 object-cover rounded-t-lg"519                         onerror="this.src='https://picsum.photos/seed/${details.id}/1200/400'">520                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent rounded-t-lg"></div>521                    <button onclick="closeModal()" class="absolute top-4 left-4 bg-gray-800 hover:bg-gray-700 p-2 rounded-full">522                        <i data-feather="x" class="w-6 h-6"></i>523                    </button>524                </div>525                526                <div class="p-8">527                    <div class="flex flex-col lg:flex-row gap-8">528                        <div class="lg:w-1/3">529                            <img src="${IMAGE_BASE_URL}${details.poster_path}" 530                                 alt="${details.title || details.name}" 531                                 class="w-full rounded-lg shadow-xl"532                                 onerror="this.src='https://picsum.photos/seed/${details.id}/300/450'">533                        </div>534                        535                        <div class="lg:w-2/3">536                            <h2 class="text-4xl font-bold mb-4">${details.title || details.name}</h2>537                            <div class="flex items-center space-x-reverse space-x-4 mb-6">538                                <span class="text-yellow-400">⭐ ${details.vote_average.toFixed(1)}</span>539                                <span>${details.release_date ? new Date(details.release_date).getFullYear() : (details.first_air_date ? new Date(details.first_air_date).getFullYear() : '')}</span>540                                ${details.runtime ? `<span>${details.runtime} דקות</span>` : ''}541                                <div class="flex gap-2">542                                    ${details.genres.map(genre => `543                                        <span class="bg-purple-600 px-3 py-1 rounded-full text-sm">${genre.name}</span>544                                    `).join('')}545                                </div>546                            </div>547                            <p class="text-gray-300 mb-8 leading-relaxed">${details.overview}</p>548                            549                            <div class="flex gap-4 mb-8">550                                <button onclick="openInStremio('${id}', '${type}', '${details.title || details.name}')" 551                                        class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-semibold transition flex items-center space-x-reverse space-x-2">552                                    <i data-feather="play" class="w-5 h-5"></i>553                                    <span>צפייה ב-Stremio</span>554                                </button>555                                <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-lg font-semibold transition">556                                    <i data-feather="bookmark" class="w-5 h-5 inline-block ml-2"></i>557                                    הוסף למועדפים558                                </button>559                            </div>560                        </div>561                    </div>562                </div>563            `;564            565            feather.replace();566        }567function closeModal() {568            document.getElementById('detailModal').classList.add('hidden');569        }570 571        // Carousel Navigation572        function scrollCarousel(carouselId, direction) {573            const carousel = document.getElementById(carouselId);574            const scrollAmount = 200;575            carousel.scrollBy({576                left: direction === 'next' ? scrollAmount : -scrollAmount,577                behavior: 'smooth'578            });579        }580 581        // Event Listeners582        document.getElementById('moviePrev').addEventListener('click', () => scrollCarousel('moviesCarousel', 'prev'));583        document.getElementById('movieNext').addEventListener('click', () => scrollCarousel('moviesCarousel', 'next'));584        document.getElementById('seriesPrev').addEventListener('click', () => scrollCarousel('seriesCarousel', 'prev'));585        document.getElementById('seriesNext').addEventListener('click', () => scrollCarousel('seriesCarousel', 'next'));586 587        // Search functionality588        const searchInput = document.getElementById('searchInput');589        const searchResults = document.getElementById('searchResults');590        let searchTimeout;591 592        searchInput.addEventListener('input', (e) => {593            clearTimeout(searchTimeout);594            const query = e.target.value.trim();595            596            if (query.length < 2) {597                searchResults.classList.add('hidden');598                return;599            }600            601            searchTimeout = setTimeout(async () => {602                const results = await searchContent(query);603                renderSearchResults(results);604                searchResults.classList.remove('hidden');605            }, 300);606        });607 608        // Close search results when clicking outside609        document.addEventListener('click', (e) => {610            if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {611                searchResults.classList.add('hidden');612            }613        });614 615        // Addon install buttons616        document.querySelectorAll('.addon-install-btn').forEach(btn => {617            btn.addEventListener('click', () => {618                const addonUrl = btn.dataset.url;619                installAddon(addonUrl);620            });621        });622 623        // Mobile menu toggle624        document.getElementById('mobileMenuBtn').addEventListener('click', () => {625            // Implement mobile menu626            showToast('תפריט נייד בפיתוח');627        });628 629        // User menu630        document.getElementById('userMenuBtn').addEventListener('click', () => {631            // Implement user menu632            showToast('תפריט משתמש בפיתוח');633        });634        // Watch now button635        document.getElementById('watchNowBtn').addEventListener('click', () => {636            if (currentMovies.length > 0) {637                showDetail(currentMovies[0].id, 'movie');638            }639        });640// Addons button641        document.getElementById('addonsBtn').addEventListener('click', () => {642            document.getElementById('addons').scrollIntoView({ behavior: 'smooth' });643        });644 645        // Modal close on backdrop click646        document.getElementById('detailModal').addEventListener('click', (e) => {647            if (e.target.id === 'detailModal') {648                closeModal();649            }650        });651 652        // Initialize the app653        async function checkStremioInstallation() {654            // Always try to open - the protocol handler will determine if Stremio is installed655            return true;656        }657 658        async function init() {659            await fetchPopularMovies();660            await fetchPopularSeries();661            // Check Stremio installation662            const isInstalled = await checkStremioInstallation();663            if (isInstalled) {664                console.log('Ready to open content in Stremio');665                showToast('מוכן לצפייה ב-Stremio!');666            }667 668            // Set hero content669            if (currentMovies.length > 0) {670                const heroMovie = currentMovies[0];671                document.getElementById('heroTitle').textContent = heroMovie.title;672            }673        }674 675        // Start the app676        init();677    </script>678</body>679</html>680