noamin2525/javascript
0
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 