├── CNAME
├── .dockerignore
├── .github
    └── FUNDING.yml
├── logo.png
├── Dockerfile
├── README.md
├── sources.js
├── settings.html
├── livesports.html
└── index.html


/CNAME:
--------------------------------------------------------------------------------
1 | novastream.top


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | CNAME
2 | README.md
3 | .github/
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [ambr0sial]
2 | ko_fi: ambrosial
3 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ambr0sial/nova/HEAD/logo.png


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM nginx:alpine
2 | COPY . /usr/share/nginx/html
3 | EXPOSE 80
4 | CMD ["nginx", "-g", "daemon off;"]
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > [!IMPORTANT]
  2 | > This repository is archived because I have a lot of other projects on the side and I can't keep up with Nova right now. This is not fully abandoned!
  3 | 
  4 | <div align="center">
  5 |   
  6 |   ![Nova](logo.png)
  7 |   <h1>Nova ☄️</h1>
  8 |   <p>
  9 |     <a href="https://discord.gg/s9kUZw7CqP">
 10 |       <img src="https://img.shields.io/discord/1328474718193586226?color=%237289DA&label=Discord&logo=discord&logoColor=white&style=for-the-badge" alt="Discord">
 11 |     </a>
 12 |     <a href="https://github.com/ambr0sial/nova/stargazers">
 13 |       <img src="https://img.shields.io/github/stars/ambr0sial/nova?color=%23A855F7&logo=github&style=for-the-badge" alt="Stars">
 14 |     </a>
 15 |     <a href="https://ko-fi.com/ambrosial">
 16 |       <img src="https://img.shields.io/badge/Support-Nova-%23A855F7?style=for-the-badge&logo=kofi&logoColor=white" alt="Support">
 17 |     </a>
 18 |   </p>
 19 |   <h3>✨ Click, watch, enjoy. ✨</h3>
 20 |   
 21 |   <p><strong>Nova itself is ad-free, but it happens that providers insert their own ads. For the best experience, I recommend using <a href="https://ublockorigin.com/">uBlock Origin</a>.</strong></p>
 22 |   <p><strong>Thank you for the 100 stars!</strong></p>
 23 |   
 24 |   <p align="center">
 25 |     <img alt="Nova Screenshot" src="https://iili.io/2iL3qAB.png" width="700">
 26 |   </p>
 27 |   <br>
 28 | </div>
 29 | 
 30 | ## ⚡ Features
 31 | 
 32 | <div align="center">
 33 | <table>
 34 | <tr>
 35 | <td>
 36 | 
 37 | ### 🎬 Content
 38 | Extensive library of movies & TV shows <br>
 39 | Multiple language options <br>
 40 | Download capabilities <br>
 41 | Trailers & extras
 42 | 
 43 | </td>
 44 | <td>
 45 | 
 46 | ### 🎨 Design
 47 | Modern, sleek interface <br>
 48 | Mobile responsive <br>
 49 | Beautiful animations <br>
 50 | Intuitive navigation
 51 | 
 52 | </td>
 53 | </tr>
 54 | <tr>
 55 | <td>
 56 | 
 57 | ### 🛠 Technical
 58 | Fast & lightweight <br>
 59 | No registration required <br>
 60 | Multiple backup domains <br>
 61 | Regular updates
 62 | 
 63 | </td>
 64 | <td>
 65 | 
 66 | ### 🌟 Experience
 67 | Watch Later functionality <br>
 68 | Multiple streaming sources <br>
 69 | Easy source switching <br>
 70 | Filtered search for better content discovery
 71 | 
 72 | </td>
 73 | </tr>
 74 | </table>
 75 | </div>
 76 | 
 77 | ## 🌐 Alternative Domains
 78 | 
 79 | If the main domain is unavailable, visit [this website](https://nova-domains.github.io) to see alternative domains.
 80 | 
 81 | ## 🤝 Contributing
 82 | 
 83 | Contributions are always welcome! Feel free to open pull requests to improve Nova.
 84 | 
 85 | ## 📝 License
 86 | 
 87 | You can freely host this website yourself. All we ask is that you provide proper credits by linking to this repository.
 88 | 
 89 | ## ⭐ Star History
 90 | 
 91 | <div align="center">
 92 | <a href="https://star-history.com/#ambr0sial/nova&Timeline">
 93 |   <picture>
 94 |     <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=ambr0sial/nova&type=Timeline&theme=dark" />
 95 |     <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=ambr0sial/nova&type=Timeline" />
 96 |     <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=ambr0sial/nova&type=Timeline" />
 97 |   </picture>
 98 | </a>
 99 | </div>
100 | 
101 | <div align="center">
102 |   
103 | ---
104 |   
105 | <p>Made with ❤️ by <a href="https://github.com/ambr0sial">ambr0sial</a></p>
106 | <p>
107 |   <a href="mailto:contact.novastream@gmail.com">contact.novastream@gmail.com</a>
108 | </p>
109 |   
110 | </div> 
111 | 


--------------------------------------------------------------------------------
/sources.js:
--------------------------------------------------------------------------------
  1 | const availableSources = [
  2 |     {
  3 |         id: 'mapple',
  4 |         name: 'MappleTv',
  5 |         isFrench: false,
  6 |         urls: {
  7 |             movie: 'https://mappletv.uk/watch/movie/{id}',
  8 |             tv: 'https://mappletv.uk/watch/tv/{id}-{season}-{episode}'
  9 |         }
 10 |     },
 11 |     {
 12 |         id: 'pstream',
 13 |         name: 'P-Stream',
 14 |         isFrench: false,
 15 |         urls: {
 16 |             movie: 'https://iframe.pstream.mov/media/tmdb-movie-{id}',
 17 |             tv: 'https://iframe.pstream.mov/media/tmdb-tv-{id}/{season}/{episode}'
 18 |         }
 19 |     },
 20 |     {
 21 |         id: 'multiembed',
 22 |         name: 'MultiEmbed',
 23 |         isFrench: false,
 24 |         urls: {
 25 |             movie: 'https://multiembed.mov/?video_id={id}&tmdb=1',
 26 |             tv: 'https://multiembed.mov/?video_id={id}&tmdb=1&s={season}&e={episode}'
 27 |         }
 28 |     },
 29 |     {
 30 |         id: 'moviesapi',
 31 |         name: 'MoviesAPI',
 32 |         isFrench: false,
 33 |         urls: {
 34 |             movie: 'https://moviesapi.club/movie/{id}',
 35 |             tv: 'https://moviesapi.club/tv/{id}-{season}-{episode}'
 36 |         }
 37 |     },
 38 |     {
 39 |         id: 'embedsu',
 40 |         name: 'EmbedSU',
 41 |         isFrench: false,
 42 |         urls: {
 43 |             movie: 'https://embed.su/embed/movie/{id}',
 44 |             tv: 'https://embed.su/embed/tv/{id}/{season}/{episode}'
 45 |         }
 46 |     },
 47 |     {
 48 |         id: 'hexa',
 49 |         name: 'Hexa',
 50 |         isFrench: false,
 51 |         urls: {
 52 |             movie: 'https://hexa.watch/watch/movie/{id}',
 53 |             tv: 'https://hexa.watch/watch/tv/{id}/{season}/{episode}'
 54 |         }
 55 |     },
 56 |     {
 57 |         id: 'vidlink',
 58 |         name: 'VidLink',
 59 |         isFrench: false,
 60 |         urls: {
 61 |             movie: 'https://vidlink.pro/movie/{id}',
 62 |             tv: 'https://vidlink.pro/tv/{id}/{season}/{episode}'
 63 |         }
 64 |     },
 65 |     {
 66 |         id: 'vidsrcXyz',
 67 |         name: 'VidSrcXyz',
 68 |         isFrench: false,
 69 |         urls: {
 70 |             movie: 'https://vidsrc.xyz/embed/movie/{id}',
 71 |             tv: 'https://vidsrc.xyz/embed/tv/{id}/{season}/{episode}'
 72 |         }
 73 |     },
 74 |     {
 75 |         id: 'vidsrcrip',
 76 |         name: 'VidSrcRIP',
 77 |         isFrench: false,
 78 |         urls: {
 79 |             movie: 'https://vidsrc.rip/embed/movie/{id}',
 80 |             tv: 'https://vidsrc.rip/embed/tv/{id}/{season}/{episode}'
 81 |         }
 82 |     },
 83 |     {
 84 |         id: 'vidsrcsu',
 85 |         name: 'VidSrcSU',
 86 |         isFrench: false,
 87 |         urls: {
 88 |             movie: 'https://vidsrc.su/embed/movie/{id}',
 89 |             tv: 'https://vidsrc.su/embed/tv/{id}/{season}/{episode}'
 90 |         }
 91 |     },
 92 |     {
 93 |         id: 'vidsrcvip',
 94 |         name: 'VidSrcVIP',
 95 |         isFrench: false,
 96 |         urls: {
 97 |             movie: 'https://vidsrc.vip/embed/movie/{id}',
 98 |             tv: 'https://vidsrc.vip/embed/tv/{id}/{season}/{episode}'
 99 |         }
100 |     },
101 |     {
102 |         id: '2embed',
103 |         name: '2Embed',
104 |         isFrench: false,
105 |         urls: {
106 |             movie: 'https://www.2embed.cc/embed/{id}',
107 |             tv: 'https://www.2embed.cc/embedtv/{id}&s={season}&e={episode}'
108 |         }
109 |     },
110 |     {
111 |         id: '123embed',
112 |         name: '123Embed',
113 |         isFrench: false,
114 |         urls: {
115 |             movie: 'https://play2.123embed.net/movie/{id}',
116 |             tv: 'https://play2.123embed.net/tv/{id}/{season}/{episode}'
117 |         }
118 |     },
119 |     {
120 |         id: '111movies',
121 |         name: '111Movies',
122 |         isFrench: false,
123 |         urls: {
124 |             movie: 'https://111movies.com/movie/{id}',
125 |             tv: 'https://111movies.com/tv/{id}/{season}/{episode}'
126 |         }
127 |     },
128 |     {
129 |         id: 'smashystream',
130 |         name: 'SmashyStream',
131 |         isFrench: false,
132 |         urls: {
133 |             movie: 'https://player.smashy.stream/movie/{id}',
134 |             tv: 'https://player.smashy.stream/tv/{id}?s={season}&e={episode}'
135 |         }
136 |     },
137 |     {
138 |         id: 'autoembed',
139 |         name: 'AutoEmbed',
140 |         isFrench: false,
141 |         urls: {
142 |             movie: 'https://player.autoembed.cc/embed/movie/{id}',
143 |             tv: 'https://player.autoembed.cc/embed/tv/{id}/{season}/{episode}'
144 |         }
145 |     },
146 |     {
147 |         id: 'videasy',
148 |         name: 'VidEasy (4K)',
149 |         isFrench: false,
150 |         urls: {
151 |             movie: 'https://player.videasy.net/movie/{id}?color=8834ec',
152 |             tv: 'https://player.videasy.net/tv/{id}/{season}/{episode}?color=8834ec'
153 |         }
154 |     },
155 |     {
156 |         id: 'vidfast',
157 |         name: 'VidFast (4K)',
158 |         isFrench: false,
159 |         urls: {
160 |             movie: 'https://vidfast.pro/movie/{id}',
161 |             tv: 'https://vidfast.pro/tv/{id}/{season}/{episode}'
162 |         }
163 |     },
164 |     {
165 |         id: 'vidify',
166 |         name: 'Vidify',
167 |         isFrench: false,
168 |         urls: {
169 |             movie: 'https://vidify.top/embed/movie/{id}',
170 |             tv: 'https://vidify.top/embed/tv/{id}/{season}/{episode}'
171 |         }
172 |     },
173 |     {
174 |         id: 'flicky',
175 |         name: 'Flicky',
176 |         isFrench: false,
177 |         urls: {
178 |             movie: 'https://flicky.host/embed/movie/?id={id}',
179 |             tv: 'https://flicky.host/embed/tv/{id}/{season}/{episode}'
180 |         }
181 |     },
182 |     {
183 |         id: 'rive',
184 |         name: 'RiveStream',
185 |         isFrench: false,
186 |         urls: {
187 |             movie: 'https://rivestream.org/embed?type=movie&id={id}',
188 |             tv: 'https://rivestream.org/embed?type=tv&id={id}&season={season}&episode={episode}'
189 |         }
190 |     },
191 |     {
192 |         id: 'vidora',
193 |         name: 'Vidora',
194 |         isFrench: false,
195 |         urls: {
196 |             movie: 'https://vidora.su/movie/{id}',
197 |             tv: 'https://vidora.su/tv/{id}/{season}/{episode}'
198 |         }
199 |     },
200 |     {
201 |         id: 'vidsrccc',
202 |         name: 'VidSrcCC',
203 |         isFrench: false,
204 |         urls: {
205 |             movie: 'https://vidsrc.cc/v2/embed/movie/{id}?autoPlay=false',
206 |             tv: 'https://vidsrc.cc/v2/embed/tv/{id}/{season}/{episode}?autoPlay=false'
207 |         }
208 |     },
209 |     {
210 |         id: 'streamflix',
211 |         name: 'StreamFlix',
212 |         isFrench: false,
213 |         urls: {
214 |             movie: 'https://watch.streamflix.one/movie/{id}}/watch?server=1',
215 |             tv: 'https://watch.streamflix.one/tv/{id}}/watch?server=1&season={season}}&episode={episode}}'
216 |         }
217 |     },
218 |     {
219 |         id: 'nebula',
220 |         name: 'NebulaFlix',
221 |         isFrench: false,
222 |         urls: {
223 |             movie: 'https://nebulaflix.stream/movie?mt={id}&server=1',
224 |             tv: 'https://nebulaflix.stream/show?st={id}&season={season}&episode={episode}&server=1'
225 |         }
226 |     },
227 |     {
228 |         id: 'vidjoy',
229 |         name: 'VidJoy',
230 |         isFrench: false,
231 |         urls: {
232 |             movie: 'https://vidjoy.pro/embed/movie/{id}',
233 |             tv: 'https://vidjoy.pro/embed/tv/{id}}/{season}/{episode}'
234 |         }
235 |     },
236 |     {
237 |         id: 'vidzee',
238 |         name: 'VidZee',
239 |         isFrench: false,
240 |         urls: {
241 |             movie: 'https://player.vidzee.wtf/embed/movie/{id}', // @ambr0sial: there is a 4K endpoint for movies only. in case you want to implement that sometime: https://player.vidzee.wtf/embed/movie/4k/{id}
242 |             tv: 'https://player.vidzee.wtf/embed/tv/{id}/{season}/{episode}'
243 |         }
244 |     },
245 |     {
246 |         id: 'spenflix',
247 |         name: 'Spenflix',
248 |         isFrench: false,
249 |         urls: {
250 |             movie: 'https://spencerdevs.xyz/movie/{id}',
251 |             tv: 'https://spencerdevs.xyz/tv/{id}/{season}/{episode}'
252 |         }
253 |     },
254 |     {
255 |         id: 'frembed',
256 |         name: 'Frembed',
257 |         isFrench: true,
258 |         urls: {
259 |             movie: 'https://frembed.icu/api/film.php?id={id}',
260 |             tv: 'https://frembed.icu/api/serie.php?id={id}&sa={season}&epi={episode}'
261 |         }
262 |     },
263 |     {
264 |         id: 'uembed',
265 |         name: 'UEmbed (premium)',
266 |         isFrench: false,
267 |         urls: {
268 |             movie: 'https://uembed.site/?id={id}&apikey=thisisforsurenotapremiumkey_right?',
269 |             tv: 'https://uembed.site/?id={id}&season={season}&episode={episode}&apikey=thisisforsurenotapremiumkey_right?'
270 |         }
271 |     },
272 |     {
273 |         id: 'vidsrccx',
274 |         name: 'VidSrcCX',
275 |         isFrench: false,
276 |         urls: {
277 |             movie: 'https://vidsrc.cx/embed/movie/{id}',
278 |             tv: 'https://vidsrc.cx/embed/tv/{id}/{season}/{episode}'
279 |         }
280 |     }
281 | ];
282 | 


--------------------------------------------------------------------------------
/settings.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <!-- google tag (gtag.js) -->
  5 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HGL07M90WG"></script>
  6 |     <script>
  7 |         window.dataLayer = window.dataLayer || [];
  8 |         function gtag(){dataLayer.push(arguments);}
  9 |         gtag('js', new Date());
 10 | 
 11 |         gtag('config', 'G-HGL07M90WG');
 12 |     </script>
 13 |     <meta charset="UTF-8">
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 15 |     <title>Settings - Nova</title>
 16 |     <meta content="Nova" property="og:title"/>
 17 |     <meta content="Click, watch, enjoy. Nova breaks down the paywall, ensuring that quality content is accessible to everyone." property="og:description"/>
 18 |     <meta content="https://novastream.top" property="og:url"/>
 19 |     <meta content="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png" property="og:image"/>
 20 |     <meta content="#A17FC0" data-react-helmet="true" name="theme-color"/>
 21 |     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png">
 22 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 23 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
 24 |     <script src="https://cdn.tailwindcss.com"></script>
 25 |     <script src="sources.js"></script>
 26 |     <script>
 27 |         tailwind.config = {
 28 |             theme: {
 29 |                 extend: {
 30 |                     fontFamily: {
 31 |                         sans: ['Poppins', 'sans-serif'],
 32 |                     },
 33 |                 },
 34 |             },
 35 |         }
 36 |     </script>
 37 |     <style>
 38 |         .settings-sidebar {
 39 |             background: rgba(30, 41, 59, 0.5);
 40 |             backdrop-filter: blur(10px);
 41 |             border-right: 1px solid rgba(148, 163, 184, 0.1);
 42 |         }
 43 |         
 44 |         .settings-content {
 45 |             background: rgba(15, 23, 42, 0.3);
 46 |         }
 47 | 
 48 |         .source-option {
 49 |             transition: all 0.3s ease;
 50 |             border: 2px solid transparent;
 51 |         }
 52 | 
 53 |         .source-option:hover {
 54 |             background: rgba(148, 163, 184, 0.1);
 55 |         }
 56 | 
 57 |         .source-option.selected {
 58 |             border-color: #A855F7;
 59 |             background: rgba(168, 85, 247, 0.1);
 60 |         }
 61 | 
 62 |         .source-option.disabled {
 63 |             opacity: 0.5;
 64 |             cursor: not-allowed;
 65 |         }
 66 | 
 67 |         .glass-effect {
 68 |             background: rgba(17, 24, 39, 0.7);
 69 |             backdrop-filter: blur(12px);
 70 |             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 71 |             box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 72 |         }
 73 | 
 74 |         .nav-link {
 75 |             position: relative;
 76 |             transition: all 0.3s ease;
 77 |             padding: 0.5rem 0;
 78 |         }
 79 | 
 80 |         .nav-link::after {
 81 |             content: '';
 82 |             position: absolute;
 83 |             width: 0;
 84 |             height: 2px;
 85 |             bottom: 0;
 86 |             left: 50%;
 87 |             background: linear-gradient(to right, #a78bfa, #4c1d95);
 88 |             transition: all 0.3s ease;
 89 |             transform: translateX(-50%);
 90 |         }
 91 | 
 92 |         .nav-link:hover {
 93 |             color: #a78bfa;
 94 |         }
 95 | 
 96 |         .nav-link:hover::after {
 97 |             width: 100%;
 98 |         }
 99 |     </style>
100 | </head>
101 | <body class="bg-gray-900 text-white min-h-screen font-sans" x-data="{ 
102 |     activeSection: 'default-source', 
103 |     mobileMenu: false,
104 |     showMobileWarning: window.innerWidth < 768,
105 |     isMobileWarningDismissed: false,
106 |     showParticles: localStorage.getItem('showParticles') === null ? true : localStorage.getItem('showParticles') !== 'false',
107 |     showUpdateNotice: localStorage.getItem('showUpdateNotice') === null ? true : localStorage.getItem('showUpdateNotice') !== 'false',
108 |     toggleParticles() {
109 |         this.showParticles = !this.showParticles;
110 |         localStorage.setItem('showParticles', this.showParticles);
111 |         window.dispatchEvent(new Event('appearance-changed'));
112 |     },
113 |     toggleUpdateNotice() {
114 |         this.showUpdateNotice = !this.showUpdateNotice;
115 |         localStorage.setItem('showUpdateNotice', this.showUpdateNotice);
116 |         window.dispatchEvent(new Event('appearance-changed'));
117 |     },
118 |     selectedLanguage: localStorage.getItem('selectedLanguage') || 'en',
119 |     changeLanguage(newLanguage) {
120 |         this.selectedLanguage = newLanguage;
121 |         localStorage.setItem('selectedLanguage', newLanguage);
122 |         window.dispatchEvent(new Event('language-changed'));
123 |     }
124 | }">
125 |     <!-- mobile warning -->
126 |     <div x-show="showMobileWarning && !isMobileWarningDismissed" 
127 |          class="fixed inset-0 z-[60] flex items-center justify-center bg-black/90 px-4"
128 |          x-transition:enter="transition ease-out duration-300"
129 |          x-transition:enter-start="opacity-0 transform scale-95"
130 |          x-transition:enter-end="opacity-100 transform scale-100"
131 |          x-transition:leave="transition ease-in duration-200"
132 |          x-transition:leave-start="opacity-100 transform scale-100"
133 |          x-transition:leave-end="opacity-0 transform scale-95">
134 |         <div class="bg-gray-800 rounded-lg p-6 w-full max-w-sm text-center space-y-4">
135 |             <div class="w-16 h-16 mx-auto bg-purple-500/10 rounded-full flex items-center justify-center">
136 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
137 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
138 |                 </svg>
139 |             </div>
140 |             <h3 class="text-xl font-semibold text-purple-400">Mobile Experience Limited</h3>
141 |             <p class="text-gray-300">The settings page isn't fully optimized for mobile devices yet. For the best experience, please use a desktop browser.</p>
142 |             <button @click="isMobileWarningDismissed = true" 
143 |                     class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition-colors duration-300">
144 |                 I understand
145 |             </button>
146 |         </div>
147 |     </div>
148 | 
149 |     <!-- navigation -->
150 |     <nav class="fixed w-full z-50 glass-effect">
151 |         <div class="container mx-auto px-6 py-3">
152 |             <div class="flex items-center justify-between">
153 |                 <div class="flex items-center space-x-4 md:space-x-8">
154 |                     <div class="flex items-center space-x-3">
155 |                         <img src="logo.png" alt="Nova Logo" class="h-8 w-8 md:h-10 md:w-10">
156 |                         <span class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-800">Nova</span>
157 |                     </div>
158 |                     <div class="hidden md:flex space-x-6">
159 |                         <a href="index.html" class="nav-link">Home</a>
160 |                         <a href="https://github.com/ambr0sial/nova" target="_blank" class="nav-link">GitHub</a>
161 |                         <a href="https://ko-fi.com/ambrosial" target="_blank" class="nav-link">Ko-Fi</a>
162 |                         <a href="https://discord.gg/s9kUZw7CqP" target="_blank" class="nav-link">Discord</a>
163 |                     </div>
164 |                 </div>
165 |                 <!-- mobile menu button -->
166 |                 <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-300 hover:text-white">
167 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
168 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
169 |                     </svg>
170 |                 </button>
171 |             </div>
172 |             
173 |             <!-- mobile menu -->
174 |             <div x-show="mobileMenu" 
175 |                 x-transition:enter="transition ease-out duration-200"
176 |                 x-transition:enter-start="opacity-0 transform -translate-y-2"
177 |                 x-transition:enter-end="opacity-100 transform translate-y-0"
178 |                 x-transition:leave="transition ease-in duration-150"
179 |                 x-transition:leave-start="opacity-100 transform translate-y-0"
180 |                 x-transition:leave-end="opacity-0 transform -translate-y-2"
181 |                 class="md:hidden mt-4 pb-4">
182 |                 <div class="flex flex-col space-y-4">
183 |                     <a href="index.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Home</a>
184 |                     <a href="livesports.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Live Sports</a>
185 |                     <a href="https://github.com/ambr0sial/nova" target="_blank" 
186 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">GitHub</a>
187 |                     <a href="https://ko-fi.com/ambrosial" target="_blank" 
188 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Ko-Fi</a>
189 |                     <a href="https://discord.gg/s9kUZw7CqP" target="_blank" 
190 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Discord</a>
191 |                 </div>
192 |             </div>
193 |         </div>
194 |     </nav>
195 | 
196 |     <div class="flex min-h-screen pt-16">
197 |         <!-- sidebar -->
198 |         <div class="settings-sidebar w-64 p-6 flex flex-col">
199 |             <button @click="window.history.back()" class="text-left px-4 py-2 rounded-lg hover:bg-purple-600/50 transition-colors mb-2">Back</button>
200 |             <hr class="border-gray-600 mb-2">
201 |             <div class="flex flex-col space-y-2">
202 |                 <button 
203 |                     @click="activeSection = 'default-source'"
204 |                     :class="{'bg-purple-600': activeSection === 'default-source'}"
205 |                     class="text-left px-4 py-2 rounded-lg hover:bg-purple-600/50 transition-colors">
206 |                     Default Source
207 |                 </button>
208 |                 <button 
209 |                     @click="activeSection = 'appearance'"
210 |                     :class="{'bg-purple-600': activeSection === 'appearance'}"
211 |                     class="text-left px-4 py-2 rounded-lg hover:bg-purple-600/50 transition-colors">
212 |                     Appearance
213 |                 </button>
214 |             </div>
215 |         </div>
216 | 
217 |         <!-- main content -->
218 |         <div class="flex-1 p-8 settings-content">
219 |             <div class="max-w-4xl mx-auto">
220 |                 <div class="mb-8">
221 |                     <h1 class="text-4xl font-bold mb-2">Settings</h1>
222 |                     <p class="text-slate-400 text-lg">Customize your Nova experience</p>
223 |                 </div>
224 | 
225 |                 <div class="bg-gradient-to-r from-purple-500/10 via-purple-500/20 to-purple-500/10 border border-purple-500/20 p-6 rounded-xl mb-8 relative overflow-hidden">
226 |                     <div class="absolute top-0 right-0 bg-purple-500/10 px-4 py-1 rounded-bl-lg text-purple-400 text-xs font-medium">
227 |                         WIP
228 |                     </div>
229 |                     <div class="flex items-start space-x-4">
230 |                         <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
231 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
232 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
233 |                             </svg>
234 |                         </div>
235 |                         <div>
236 |                             <h3 class="text-lg font-semibold text-purple-400 mb-2">Work in Progress</h3>
237 |                             <p class="text-slate-300">Nova's settings page is currently under active development. More customization options will be added soon.</p>
238 |                         </div>
239 |                     </div>
240 |                 </div>
241 | 
242 |                 <!-- default source section -->
243 |                 <div x-show="activeSection === 'default-source'" class="animate-fade-in">
244 |                     <div class="mb-6">
245 |                         <h2 class="text-2xl font-semibold mb-2">Default Source</h2>
246 |                         <p class="text-slate-400">Choose your preferred default source for streaming content. This setting will be remembered across sessions.</p>
247 |                     </div>
248 | 
249 |                     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" x-data="{ 
250 |                         selectedSource: localStorage.getItem('defaultSource') || 'multiembed',
251 |                         setSource(sourceId) {
252 |                             this.selectedSource = sourceId;
253 |                             localStorage.setItem('defaultSource', sourceId);
254 |                         }
255 |                     }">
256 |                         <template x-for="source in availableSources" :key="source.id">
257 |                             <div 
258 |                                 @click="setSource(source.id)"
259 |                                 :class="{'selected': selectedSource === source.id}"
260 |                                 class="source-option bg-slate-800/50 rounded-lg p-4 cursor-pointer">
261 |                                 <div class="flex items-center justify-between">
262 |                                     <div>
263 |                                         <div class="font-medium" x-text="source.name"></div>
264 |                                         <div class="text-sm text-slate-400" x-text="source.isFrench ? 'French Content' : 'English Content'"></div>
265 |                                     </div>
266 |                                     <div class="w-5 h-5 rounded-full border-2" 
267 |                                         :class="selectedSource === source.id ? 'border-purple-500 bg-purple-500' : 'border-slate-600'">
268 |                                     </div>
269 |                                 </div>
270 |                             </div>
271 |                         </template>
272 |                     </div>
273 |                 </div>
274 | 
275 |                 <!-- appearance section -->
276 |                 <div x-show="activeSection === 'appearance'" class="animate-fade-in space-y-8">
277 |                     <div class="mb-6">
278 |                         <h2 class="text-2xl font-semibold mb-2">Appearance</h2>
279 |                         <p class="text-slate-400">Customize how Nova looks and feels</p>
280 |                     </div>
281 | 
282 |                     <div class="space-y-6">
283 |                         <!-- Background Particles Toggle -->
284 |                         <div class="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg">
285 |                             <div class="space-y-1">
286 |                                 <h3 class="font-medium">Background Particles</h3>
287 |                                 <p class="text-sm text-slate-400">Toggle the animated particle effect in the background of Nova</p>
288 |                             </div>
289 |                             <button 
290 |                                 @click="toggleParticles"
291 |                                 class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
292 |                                 :class="showParticles ? 'bg-purple-600' : 'bg-gray-600'">
293 |                                 <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
294 |                                       :class="showParticles ? 'translate-x-6' : 'translate-x-1'"></span>
295 |                             </button>
296 |                         </div>
297 | 
298 |                         <!-- update notice toggle -->
299 |                         <div class="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg">
300 |                             <div class="space-y-1">
301 |                                 <h3 class="font-medium">Update Notice</h3>
302 |                                 <p class="text-sm text-slate-400">Toggle the update notice on the homepage that informs you about the latest updates</p>
303 |                             </div>
304 |                             <button 
305 |                                 @click="toggleUpdateNotice"
306 |                                 class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
307 |                                 :class="showUpdateNotice ? 'bg-purple-600' : 'bg-gray-600'">
308 |                                 <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
309 |                                       :class="showUpdateNotice ? 'translate-x-6' : 'translate-x-1'"></span>
310 |                             </button>
311 |                         </div>
312 | 
313 |                         <!-- popup reminder toggle -->
314 |                         <div class="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg">
315 |                             <div class="space-y-1">
316 |                                 <h3 class="font-medium">Popup Reminder</h3>
317 |                                 <p class="text-sm text-slate-400">Toggle the popup reminder to bookmark the site</p>
318 |                             </div>
319 |                             <button 
320 |                                 @click="showPopupReminder = !showPopupReminder; localStorage.setItem('showPopupReminder', showPopupReminder)"
321 |                                 class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
322 |                                 :class="showPopupReminder ? 'bg-purple-600' : 'bg-gray-600'"
323 |                                 x-data="{ showPopupReminder: localStorage.getItem('showPopupReminder') !== 'false' }">
324 |                                 <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
325 |                                       :class="showPopupReminder ? 'translate-x-6' : 'translate-x-1'"></span>
326 |                             </button>
327 |                         </div>
328 | 
329 |                         <!-- donation banner toggle -->
330 |                         <div class="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg">
331 |                             <div class="space-y-1">
332 |                                 <h3 class="font-medium">Donation Banner</h3>
333 |                                 <p class="text-sm text-slate-400">Toggle the donation banner at the bottom of the homepage</p>
334 |                             </div>
335 |                             <button 
336 |                                 @click="showDonationBanner = !showDonationBanner; localStorage.setItem('showDonationBanner', showDonationBanner)"
337 |                                 class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
338 |                                 :class="showDonationBanner ? 'bg-purple-600' : 'bg-gray-600'"
339 |                                 x-data="{ showDonationBanner: localStorage.getItem('showDonationBanner') !== 'false' }">
340 |                                 <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
341 |                                       :class="showDonationBanner ? 'translate-x-6' : 'translate-x-1'"></span>
342 |                             </button>
343 |                         </div>
344 | 
345 |                         <!-- content language dropdown -->
346 |                         <div class="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg">
347 |                             <div class="space-y-1">
348 |                                 <h3 class="font-medium">Content Language</h3>
349 |                                 <p class="text-sm text-slate-400">Select the language for content information</p>
350 |                             </div>
351 |                             <select x-model="selectedLanguage" @change="changeLanguage(selectedLanguage)" class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
352 |                                 <option value="en">English</option>
353 |                                 <option value="fr">French</option>
354 |                             </select>
355 |                         </div>
356 |                     </div>
357 |                 </div>
358 |             </div>
359 |         </div>
360 |     </div>
361 | 
362 |     <script>
363 |         if (!localStorage.getItem('defaultSource')) {
364 |             localStorage.setItem('defaultSource', 'embedsu');
365 |         }
366 |         if (localStorage.getItem('showParticles') === null) {
367 |             localStorage.setItem('showParticles', 'true');
368 |         }
369 |         if (localStorage.getItem('showUpdateNotice') === null) {
370 |             localStorage.setItem('showUpdateNotice', 'true');
371 |         }
372 |         if (localStorage.getItem('showPopupReminder') === null) {
373 |             localStorage.setItem('showPopupReminder', 'true');
374 |         }
375 |         if (localStorage.getItem('showDonationBanner') === null) {
376 |             localStorage.setItem('showDonationBanner', 'true');
377 |         }
378 |     </script>
379 | </body>
380 | </html>
381 | 
382 | <!--
383 |  _   _                 
384 | | \ | | _____   ____ _ 
385 | |  \| |/ _ \ \ / / _` |
386 | | |\  | (_) \ V / (_| |
387 | |_| \_|\___/ \_/ \__,_|
388 | -->


--------------------------------------------------------------------------------
/livesports.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <!-- google tag (gtag.js) -->
  5 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HGL07M90WG"></script>
  6 |     <script>
  7 |         window.dataLayer = window.dataLayer || [];
  8 |         function gtag(){dataLayer.push(arguments);}
  9 |         gtag('js', new Date());
 10 | 
 11 |         gtag('config', 'G-HGL07M90WG');
 12 |     </script>
 13 |     <meta charset="UTF-8">
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 15 |     <title>Live Sports - Nova</title>
 16 |     <meta content="Nova - Live Sports" property="og:title"/>
 17 |     <meta content="Watch live sports streams for free. Nova breaks down the paywall, ensuring that quality content is accessible to everyone." property="og:description"/>
 18 |     <meta content="https://novastream.top" property="og:url"/>
 19 |     <meta content="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png" property="og:image"/>
 20 |     <meta content="#A17FC0" data-react-helmet="true" name="theme-color"/>
 21 |     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png">
 22 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 23 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
 24 |     <script src="https://cdn.tailwindcss.com"></script>
 25 |     <script>
 26 |         tailwind.config = {
 27 |             theme: {
 28 |                 extend: {
 29 |                     fontFamily: {
 30 |                         sans: ['Poppins', 'sans-serif'],
 31 |                     },
 32 |                 },
 33 |             },
 34 |         }
 35 |     </script>
 36 |     <style>
 37 |         .nav-link {
 38 |             position: relative;
 39 |             transition: all 0.3s ease;
 40 |             padding: 0.5rem 0;
 41 |         }
 42 | 
 43 |         .nav-link::after {
 44 |             content: '';
 45 |             position: absolute;
 46 |             width: 0;
 47 |             height: 2px;
 48 |             bottom: 0;
 49 |             left: 50%;
 50 |             background: linear-gradient(to right, #a78bfa, #4c1d95);
 51 |             transition: all 0.3s ease;
 52 |             transform: translateX(-50%);
 53 |         }
 54 | 
 55 |         .nav-link:hover {
 56 |             color: #a78bfa;
 57 |         }
 58 | 
 59 |         .nav-link:hover::after {
 60 |             width: 100%;
 61 |         }
 62 | 
 63 |         .glass-effect {
 64 |             background: rgba(17, 24, 39, 0.7);
 65 |             backdrop-filter: blur(12px);
 66 |             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 67 |             box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 68 |         }
 69 | 
 70 |         .match-card {
 71 |             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 72 |             position: relative;
 73 |         }
 74 | 
 75 |         .match-card::after {
 76 |             content: '';
 77 |             position: absolute;
 78 |             inset: -1px;
 79 |             background: linear-gradient(
 80 |                 35deg,
 81 |                 rgba(168, 85, 247, 0.4),
 82 |                 rgba(168, 85, 247, 0),
 83 |                 rgba(139, 92, 246, 0.4)
 84 |             );
 85 |             border-radius: 0.5rem;
 86 |             z-index: -1;
 87 |             opacity: 0;
 88 |             transition: opacity 0.4s ease;
 89 |         }
 90 | 
 91 |         .match-card:hover {
 92 |             transform: translateY(-8px) scale(1.02);
 93 |             box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5);
 94 |         }
 95 | 
 96 |         .match-card:hover::after {
 97 |             opacity: 1;
 98 |         }
 99 | 
100 |         .live-indicator {
101 |             animation: pulse 2s infinite;
102 |         }
103 | 
104 |         @keyframes pulse {
105 |             0% { opacity: 0.5; }
106 |             50% { opacity: 1; }
107 |             100% { opacity: 0.5; }
108 |         }
109 | 
110 |         @keyframes spin {
111 |             from {
112 |                 transform: rotate(0deg);
113 |             }
114 |             to {
115 |                 transform: rotate(180deg);
116 |             }
117 |         }
118 | 
119 |         .settings-icon {
120 |             transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
121 |         }
122 | 
123 |         .settings-icon:hover {
124 |             transform: rotate(180deg);
125 |         }
126 |     </style>
127 | </head>
128 | <body class="bg-gray-900 text-white min-h-screen" x-data="sportsApp()">
129 |     <div x-show="localStorage.getItem('showParticles') !== 'false'" id="particles-js" class="fixed inset-0 pointer-events-none z-[-1]"></div>
130 | 
131 |     <!-- navigation -->
132 |     <nav class="fixed w-full z-50 glass-effect">
133 |         <div class="container mx-auto px-6 py-3">
134 |             <div class="flex items-center justify-between">
135 |                 <div class="flex items-center space-x-4 md:space-x-8">
136 |                     <div class="flex items-center space-x-3">
137 |                         <img src="logo.png" alt="Nova Logo" class="h-8 w-8 md:h-10 md:w-10">
138 |                         <span class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-800">Nova</span>
139 |                     </div>
140 |                     <div class="hidden md:flex space-x-6">
141 |                         <a href="index.html" class="nav-link">Home</a>
142 |                         <a href="https://github.com/ambr0sial/nova" target="_blank" class="nav-link">GitHub</a>
143 |                         <a href="https://ko-fi.com/ambrosial" target="_blank" class="nav-link">Ko-Fi</a>
144 |                         <a href="https://discord.gg/s9kUZw7CqP" target="_blank" class="nav-link">Discord</a>
145 |                     </div>
146 |                 </div>
147 |                 <div class="flex items-center space-x-4">
148 |                     <a href="settings.html" class="text-gray-400 hover:text-purple-400 transition-colors duration-300" title="Settings">
149 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 settings-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
150 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
151 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
152 |                         </svg>
153 |                     </a>
154 |                     <!-- mobile menu button -->
155 |                     <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-300 hover:text-white">
156 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
157 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
158 |                         </svg>
159 |                     </button>
160 |                 </div>
161 |             </div>
162 |             
163 |             <!-- mobile menu -->
164 |             <div x-show="mobileMenu" 
165 |                 x-transition:enter="transition ease-out duration-200"
166 |                 x-transition:enter-start="opacity-0 transform -translate-y-2"
167 |                 x-transition:enter-end="opacity-100 transform translate-y-0"
168 |                 x-transition:leave="transition ease-in duration-150"
169 |                 x-transition:leave-start="opacity-100 transform translate-y-0"
170 |                 x-transition:leave-end="opacity-0 transform -translate-y-2"
171 |                 class="md:hidden mt-4 pb-4">
172 |                 <div class="flex flex-col space-y-4">
173 |                     <a href="index.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Movies & Shows</a>
174 |                     <a href="livesports.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Live Sports</a>
175 |                     <a href="settings.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors flex items-center space-x-2">
176 |                         <span>Settings</span>
177 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
178 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
179 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
180 |                         </svg>
181 |                     </a>
182 |                     <a href="https://github.com/ambr0sial/nova" target="_blank" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">GitHub</a>
183 |                     <a href="https://ko-fi.com/ambrosial" target="_blank" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Ko-Fi</a>
184 |                     <a href="https://discord.gg/s9kUZw7CqP" target="_blank" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Discord</a>
185 |                 </div>
186 |             </div>
187 |         </div>
188 |     </nav>
189 | 
190 |     <!-- main content -->
191 |     <div class="pt-24 pb-12 px-6">
192 |         <div class="container mx-auto">
193 |             <div class="bg-purple-600 text-white text-center p-4 rounded-lg mb-4 z-10">
194 |                 <strong>Notice:</strong> This page is subject to change and is currently experimental. I also don't have expertise in sports, so there may be errors or inaccuracies.
195 |             </div>
196 |             <!-- filters -->
197 |             <div class="mb-8 space-y-4">
198 |                 <div class="flex flex-wrap gap-4 items-center">
199 |                     <!-- sports filter -->
200 |                     <div class="relative">
201 |                         <select x-model="selectedSport"
202 |                                 @change="filterMatches()"
203 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
204 |                             <option value="">All Sports</option>
205 |                             <template x-for="sport in sports" :key="sport.id">
206 |                                 <option :value="sport.id" x-text="sport.name"></option>
207 |                             </template>
208 |                         </select>
209 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
210 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
211 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
212 |                             </svg>
213 |                         </div>
214 |                     </div>
215 | 
216 |                     <!-- match type filter -->
217 |                     <div class="relative">
218 |                         <select x-model="matchType"
219 |                                 @change="loadMatches()"
220 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
221 |                             <option value="live">Live Matches</option>
222 |                             <option value="today">Today's Matches</option>
223 |                             <option value="all">All Matches</option>
224 |                         </select>
225 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
226 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
227 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
228 |                             </svg>
229 |                         </div>
230 |                     </div>
231 | 
232 |                     <!-- popular toggle -->
233 |                     <button @click="togglePopular()"
234 |                             class="px-4 py-2 rounded-lg transition-colors duration-300"
235 |                             :class="showPopular ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800 hover:bg-gray-700'">
236 |                         <span class="flex items-center space-x-2">
237 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
238 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
239 |                             </svg>
240 |                             <span>Popular</span>
241 |                         </span>
242 |                     </button>
243 |                 </div>
244 |             </div>
245 | 
246 |             <!-- matches grid -->
247 |             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
248 |                 <template x-for="match in filteredMatches" :key="match.id">
249 |                     <div class="match-card bg-gray-800 rounded-lg overflow-hidden">
250 |                         <!-- add poster background if available -->
251 |                         <div class="relative">
252 |                             <template x-if="match.poster">
253 |                                 <div class="absolute inset-0 bg-cover bg-center opacity-20"
254 |                                      :style="'background-image: url(https://streamed.su/api/images/proxy/' + match.poster + '.webp)'">
255 |                                 </div>
256 |                             </template>
257 |                         </div>
258 |                         <div class="p-4 relative">
259 |                             <!-- match header -->
260 |                             <div class="flex items-center justify-between mb-4">
261 |                                 <span class="text-sm text-gray-400" x-text="match.category"></span>
262 |                                 <template x-if="matchType === 'live'">
263 |                                     <span class="flex items-center space-x-1">
264 |                                         <span class="w-2 h-2 bg-red-500 rounded-full live-indicator"></span>
265 |                                         <span class="text-red-500 text-sm">LIVE</span>
266 |                                     </span>
267 |                                 </template>
268 |                                 <template x-if="matchType !== 'live'">
269 |                                     <span class="text-sm text-gray-400" x-text="formatDate(match.date)"></span>
270 |                                 </template>
271 |                             </div>
272 | 
273 |                             <!-- teams -->
274 |                             <div class="flex items-center justify-between mb-4">
275 |                                 <template x-if="match.teams">
276 |                                     <div class="flex items-center justify-between w-full">
277 |                                         <!-- home team -->
278 |                                         <div class="flex items-center space-x-2">
279 |                                             <img :src="match.teams.home?.badge ? 'https://streamed.su/api/images/badge/' + match.teams.home.badge + '.webp' : 'logo.png'" 
280 |                                                  :alt="match.teams.home?.name"
281 |                                                  class="w-8 h-8 object-contain"
282 |                                                  @error="$event.target.src = 'logo.png'">
283 |                                             <span x-text="match.teams.home?.name"></span>
284 |                                         </div>
285 |                                         <span class="text-gray-400">vs</span>
286 |                                         <!-- away team -->
287 |                                         <div class="flex items-center space-x-2">
288 |                                             <span x-text="match.teams.away?.name"></span>
289 |                                             <img :src="match.teams.away?.badge ? 'https://streamed.su/api/images/badge/' + match.teams.away.badge + '.webp' : 'logo.png'" 
290 |                                                  :alt="match.teams.away?.name"
291 |                                                  class="w-8 h-8 object-contain"
292 |                                                  @error="$event.target.src = 'logo.png'">
293 |                                         </div>
294 |                                     </div>
295 |                                 </template>
296 |                                 <template x-if="!match.teams">
297 |                                     <div class="text-center w-full">
298 |                                         <template x-if="match.poster">
299 |                                             <img :src="'https://streamed.su/api/images/poster/' + match.poster + '.webp'"
300 |                                                  :alt="match.title"
301 |                                                  class="w-32 h-32 object-contain mx-auto mb-2"
302 |                                                  @error="$event.target.style.display = 'none'">
303 |                                         </template>
304 |                                         <span x-text="match.title"></span>
305 |                                     </div>
306 |                                 </template>
307 |                             </div>
308 | 
309 |                             <!-- watch button -->
310 |                             <button @click="openStream(match)"
311 |                                     class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors duration-300 flex items-center justify-center space-x-2">
312 |                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
313 |                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
314 |                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
315 |                                 </svg>
316 |                                 <span>Watch Stream</span>
317 |                             </button>
318 |                         </div>
319 |                     </div>
320 |                 </template>
321 |             </div>
322 | 
323 |             <!-- no matches message -->
324 |             <div x-show="filteredMatches.length === 0" class="text-center py-12">
325 |                 <div class="text-gray-400">No matches available</div>
326 |             </div>
327 |         </div>
328 |     </div>
329 | 
330 |     <!-- stream modal -->
331 |     <div x-show="showModal" 
332 |          class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-90 flex items-center justify-center"
333 |          @click.away="closeModal()"
334 |          x-transition:enter="transition ease-out duration-300"
335 |          x-transition:enter-start="opacity-0"
336 |          x-transition:enter-end="opacity-100"
337 |          x-transition:leave="transition ease-in duration-200"
338 |          x-transition:leave-start="opacity-100"
339 |          x-transition:leave-end="opacity-0">
340 |         <div class="bg-gray-900 rounded-lg w-full max-w-4xl p-6">
341 |             <div class="flex items-center justify-between mb-4">
342 |                 <h2 class="text-xl font-bold" x-text="selectedMatch?.title || 'Stream'"></h2>
343 |                 <button @click="closeModal()" class="text-gray-500 hover:text-white">
344 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
345 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
346 |                     </svg>
347 |                 </button>
348 |             </div>
349 | 
350 |             <!-- stream selection -->
351 |             <div class="mb-4">
352 |                 <div class="flex flex-wrap gap-2">
353 |                     <template x-for="source in availableStreams" :key="source.id">
354 |                         <button @click="selectStream(source)"
355 |                                 class="px-4 py-2 rounded-lg transition-colors duration-300"
356 |                                 :class="selectedStream?.id === source.id ? 'bg-purple-600' : 'bg-gray-800 hover:bg-gray-700'">
357 |                             <span x-text="source.source"></span>
358 |                             <template x-if="source.hd">
359 |                                 <span class="ml-2 text-xs bg-purple-500 px-1.5 rounded">HD</span>
360 |                             </template>
361 |                         </button>
362 |                     </template>
363 |                 </div>
364 |             </div>
365 | 
366 |             <!-- stream player -->
367 |             <template x-if="selectedStream">
368 |                 <div class="relative pt-[56.25%]" id="streamContainer">
369 |                     <iframe :src="selectedStream.embedUrl"
370 |                             class="absolute inset-0 w-full h-full rounded-lg"
371 |                             frameborder="0"
372 |                             allowfullscreen
373 |                             x-ref="streamFrame"></iframe>
374 |                 </div>
375 |             </template>
376 |         </div>
377 |     </div>
378 | 
379 |     <script>
380 |         function sportsApp() {
381 |             return {
382 |                 sports: [],
383 |                 matches: [],
384 |                 filteredMatches: [],
385 |                 selectedSport: '',
386 |                 matchType: 'live',
387 |                 showPopular: false,
388 |                 mobileMenu: false,
389 |                 showModal: false,
390 |                 selectedMatch: null,
391 |                 selectedStream: null,
392 |                 availableStreams: [],
393 | 
394 |                 async init() {
395 |                     await this.loadSports();
396 |                     await this.loadMatches();
397 |                 },
398 | 
399 |                 async loadSports() {
400 |                     try {
401 |                         const response = await fetch('https://streamed.su/api/sports');
402 |                         this.sports = await response.json();
403 |                     } catch (error) {
404 |                         console.error('Error loading sports:', error);
405 |                         this.sports = [];
406 |                     }
407 |                 },
408 | 
409 |                 async loadMatches() {
410 |                     let endpoint = '';
411 |                     switch (this.matchType) {
412 |                         case 'live':
413 |                             endpoint = this.showPopular ? '/api/matches/live/popular' : '/api/matches/live';
414 |                             break;
415 |                         case 'today':
416 |                             endpoint = this.showPopular ? '/api/matches/all-today/popular' : '/api/matches/all-today';
417 |                             break;
418 |                         case 'all':
419 |                             endpoint = this.showPopular ? '/api/matches/all/popular' : '/api/matches/all';
420 |                             break;
421 |                     }
422 | 
423 |                     try {
424 |                         const response = await fetch(`https://streamed.su${endpoint}`);
425 |                         this.matches = await response.json();
426 |                         this.filterMatches();
427 |                     } catch (error) {
428 |                         console.error('Error loading matches:', error);
429 |                         this.matches = [];
430 |                         this.filterMatches();
431 |                     }
432 |                 },
433 | 
434 |                 filterMatches() {
435 |                     this.filteredMatches = this.selectedSport
436 |                         ? this.matches.filter(match => match.category === this.selectedSport)
437 |                         : this.matches;
438 |                 },
439 | 
440 |                 togglePopular() {
441 |                     this.showPopular = !this.showPopular;
442 |                     this.loadMatches();
443 |                 },
444 | 
445 |                 formatDate(timestamp) {
446 |                     return new Date(timestamp).toLocaleString();
447 |                 },
448 | 
449 |                 closeModal() {
450 |                     this.showModal = false;
451 |                     this.selectedStream = null;
452 |                     this.selectedMatch = null;
453 |                     this.availableStreams = [];
454 |                     
455 |                     const container = document.getElementById('streamContainer');
456 |                     if (container) {
457 |                         container.innerHTML = '';
458 |                     }
459 |                 },
460 | 
461 |                 async openStream(match) {
462 |                     if (this.showModal) {
463 |                         this.closeModal();
464 |                     }
465 | 
466 |                     this.selectedMatch = match;
467 |                     this.selectedStream = null;
468 |                     this.availableStreams = [];
469 |                     this.showModal = true;
470 | 
471 |                     for (const source of match.sources) {
472 |                         try {
473 |                             const response = await fetch(`https://streamed.su/api/stream/${source.source}/${source.id}`);
474 |                             const streams = await response.json();
475 |                             this.availableStreams = [...this.availableStreams, ...streams];
476 |                         } catch (error) {
477 |                             console.error(`Error loading stream for ${source.source}:`, error);
478 |                         }
479 |                     }
480 | 
481 |                     if (this.availableStreams.length > 0) {
482 |                         this.selectStream(this.availableStreams[0]);
483 |                     }
484 |                 },
485 | 
486 |                 selectStream(stream) {
487 |                     const container = document.getElementById('streamContainer');
488 |                     if (container) {
489 |                         container.innerHTML = '';
490 |                     }
491 |                     
492 |                     this.selectedStream = stream;
493 |                     
494 |                     this.$nextTick(() => {
495 |                     });
496 |                 }
497 |             }
498 |         }
499 |     </script>
500 | 
501 |     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
502 |     <script>
503 |         particlesJS('particles-js', {
504 |             particles: {
505 |                 number: {
506 |                     value: 80,
507 |                     density: {
508 |                         enable: true,
509 |                         value_area: 800
510 |                     }
511 |                 },
512 |                 color: {
513 |                     value: '#a855f7'
514 |                 },
515 |                 shape: {
516 |                     type: 'circle'
517 |                 },
518 |                 opacity: {
519 |                     value: 0.2,
520 |                     random: true,
521 |                     animation: {
522 |                         enable: true,
523 |                         speed: 1,
524 |                         opacity_min: 0.1,
525 |                         sync: false
526 |                     }
527 |                 },
528 |                 size: {
529 |                     value: 3,
530 |                     random: true,
531 |                     animation: {
532 |                         enable: true,
533 |                         speed: 2,
534 |                         size_min: 0.1,
535 |                         sync: false
536 |                     }
537 |                 },
538 |                 line_linked: {
539 |                     enable: true,
540 |                     distance: 150,
541 |                     color: '#a855f7',
542 |                     opacity: 0.2,
543 |                     width: 1
544 |                 },
545 |                 move: {
546 |                     enable: true,
547 |                     speed: 1,
548 |                     direction: 'none',
549 |                     random: true,
550 |                     straight: false,
551 |                     out_mode: 'out',
552 |                     bounce: false,
553 |                 }
554 |             },
555 |             interactivity: {
556 |                 detect_on: 'window',
557 |                 events: {
558 |                     onhover: {
559 |                         enable: true,
560 |                         mode: 'grab'
561 |                     },
562 |                     onclick: {
563 |                         enable: true,
564 |                         mode: 'push'
565 |                     },
566 |                     resize: true
567 |                 },
568 |                 modes: {
569 |                     grab: {
570 |                         distance: 140,
571 |                         line_linked: {
572 |                             opacity: 0.5
573 |                         }
574 |                     },
575 |                     push: {
576 |                         particles_nb: 4
577 |                     }
578 |                 }
579 |             },
580 |             retina_detect: true
581 |         });
582 | 
583 |         window.addEventListener('appearance-changed', () => {
584 |             const particlesEl = document.getElementById('particles-js');
585 |             if (localStorage.getItem('showParticles') === 'false') {
586 |                 particlesEl.style.display = 'none';
587 |             } else {
588 |                 particlesEl.style.display = 'block';
589 |             }
590 |         });
591 |     </script>
592 | </body>
593 | </html>
594 | 
595 | <!--
596 |  _   _                 
597 | | \ | | _____   ____ _ 
598 | |  \| |/ _ \ \ / / _` |
599 | | |\  | (_) \ V / (_| |
600 | |_| \_|\___/ \_/ \__,_|
601 | -->


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <!-- google tag (gtag.js) -->
   5 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HGL07M90WG"></script>
   6 |     <script>
   7 |         window.dataLayer = window.dataLayer || [];
   8 |         function gtag(){dataLayer.push(arguments);}
   9 |         gtag('js', new Date());
  10 | 
  11 |         gtag('config', 'G-HGL07M90WG');
  12 |     </script>
  13 |     <meta charset="UTF-8">
  14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15 |     <title>Nova</title>
  16 |     <meta content="Nova" property="og:title"/>
  17 |     <meta name="keywords" content="free movies, free streaming, watch movies online, free tv shows, streaming service, watch movies free, online streaming, novastream, free movies online, free series online">
  18 |     <meta content="Click, watch, enjoy. Nova breaks down the paywall, ensuring that quality content is accessible to everyone." property="og:description"/>
  19 |     <meta content="https://novastream.top" property="og:url"/>
  20 |     <meta content="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png" property="og:image"/>
  21 |     <meta content="#A17FC0" data-react-helmet="true" name="theme-color"/>
  22 |     <meta property="twitter:card" content="summary">
  23 |     <meta property="twitter:url" content="https://novastream.top">
  24 |     <meta property="twitter:title" content="Nova - Watch Movies & TV Shows">
  25 |     <meta property="twitter:description" content="Click, watch, enjoy. Nova breaks down the paywall, ensuring that quality content is accessible to everyone.">
  26 |     <meta property="twitter:image" content="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png">
  27 |     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/ambr0sial/nova/main/logo.png">
  28 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  29 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
  30 |     <script src="https://cdn.tailwindcss.com"></script>
  31 |     <script src="sources.js"></script>
  32 |     <script>
  33 |         tailwind.config = {
  34 |             theme: {
  35 |                 extend: {
  36 |                     fontFamily: {
  37 |                         sans: ['Poppins', 'sans-serif'],
  38 |                     },
  39 |                 },
  40 |             },
  41 |         }
  42 |     </script>
  43 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  44 |     <style>
  45 |         @keyframes float {
  46 |             0% { transform: translateY(0px); }
  47 |             50% { transform: translateY(-10px); }
  48 |             100% { transform: translateY(0px); }
  49 |         }
  50 | 
  51 |         @keyframes slide-down {
  52 |             0% { transform: translateY(-100%); }
  53 |             100% { transform: translateY(0); }
  54 |         }
  55 | 
  56 |         .animate-slide-down {
  57 |             animation: slide-down 0.5s ease-out;
  58 |         }
  59 | 
  60 |         @keyframes glow {
  61 |             0% { box-shadow: 0 0 5px rgba(167, 139, 250, 0.3); }
  62 |             50% { box-shadow: 0 0 20px rgba(167, 139, 250, 0.5); }
  63 |             100% { box-shadow: 0 0 5px rgba(167, 139, 250, 0.3); }
  64 |         }
  65 | 
  66 |         .search-container {
  67 |             position: relative;
  68 |             width: 256px;
  69 |         }
  70 | 
  71 |         .search-container::before {
  72 |             content: '';
  73 |             position: absolute;
  74 |             inset: -2px;
  75 |             background: radial-gradient(
  76 |                 circle at var(--mouse-x, center) var(--mouse-y, center),
  77 |                 rgba(168, 85, 247, 0.5) 0%,
  78 |                 rgba(168, 85, 247, 0.2) 25%,
  79 |                 transparent 70%
  80 |             );
  81 |             border-radius: 9999px;
  82 |             opacity: 0;
  83 |             transition: opacity 0.3s;
  84 |             pointer-events: none;
  85 |             z-index: 0;
  86 |         }
  87 | 
  88 |         .search-container:hover::before,
  89 |         .search-container:focus-within::before {
  90 |             opacity: 1;
  91 |         }
  92 | 
  93 |         .search-input {
  94 |             position: relative;
  95 |             z-index: 1;
  96 |             transition: all 0.3s ease;
  97 |             padding-right: 5rem !important;
  98 |         }
  99 | 
 100 |         .card-hover {
 101 |             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 102 |             position: relative;
 103 |         }
 104 | 
 105 |         .card-hover::after {
 106 |             content: '';
 107 |             position: absolute;
 108 |             inset: -1px;
 109 |             background: linear-gradient(
 110 |                 35deg,
 111 |                 rgba(168, 85, 247, 0.4),
 112 |                 rgba(168, 85, 247, 0),
 113 |                 rgba(139, 92, 246, 0.4)
 114 |             );
 115 |             border-radius: 0.5rem;
 116 |             z-index: -1;
 117 |             opacity: 0;
 118 |             transition: opacity 0.4s ease;
 119 |         }
 120 | 
 121 |         .card-hover:hover {
 122 |             transform: translateY(-8px) scale(1.02);
 123 |             box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5);
 124 |         }
 125 | 
 126 |         .card-hover:hover::after {
 127 |             opacity: 1;
 128 |         }
 129 | 
 130 |         .card-hover:hover .card-overlay {
 131 |             opacity: 1;
 132 |             background: linear-gradient(
 133 |                 to top,
 134 |                 rgba(0, 0, 0, 0.95) 0%,
 135 |                 rgba(0, 0, 0, 0.8) 40%,
 136 |                 rgba(0, 0, 0, 0.2) 100%
 137 |             );
 138 |         }
 139 | 
 140 |         .card-overlay {
 141 |             opacity: 0;
 142 |             transition: all 0.4s ease;
 143 |             background: linear-gradient(
 144 |                 to top,
 145 |                 rgba(0, 0, 0, 0.9) 0%,
 146 |                 rgba(0, 0, 0, 0.7) 50%,
 147 |                 rgba(0, 0, 0, 0.3) 100%
 148 |             );
 149 |         }
 150 | 
 151 |         .card-hover:hover img {
 152 |             filter: blur(2px) brightness(0.9);
 153 |             transition: all 0.4s ease;
 154 |         }
 155 | 
 156 |         .card-hover img {
 157 |             transition: all 0.4s ease;
 158 |         }
 159 | 
 160 |         .nav-link {
 161 |             position: relative;
 162 |             transition: all 0.3s ease;
 163 |             padding: 0.5rem 0;
 164 |         }
 165 | 
 166 |         .nav-link::after {
 167 |             content: '';
 168 |             position: absolute;
 169 |             width: 0;
 170 |             height: 2px;
 171 |             bottom: 0;
 172 |             left: 50%;
 173 |             background: linear-gradient(to right, #a78bfa, #4c1d95);
 174 |             transition: all 0.3s ease;
 175 |             transform: translateX(-50%);
 176 |         }
 177 | 
 178 |         .nav-link:hover {
 179 |             color: #a78bfa;
 180 |         }
 181 | 
 182 |         .nav-link:hover::after {
 183 |             width: 100%;
 184 |         }
 185 | 
 186 |         .glass-effect {
 187 |             background: rgba(17, 24, 39, 0.7);
 188 |             backdrop-filter: blur(12px);
 189 |             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 190 |             box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 191 |         }
 192 | 
 193 |         .modal-animation {
 194 |             animation: modalFade 0.3s ease-out;
 195 |         }
 196 | 
 197 |         @keyframes modalFade {
 198 |             from { opacity: 0; transform: scale(0.95); }
 199 |             to { opacity: 1; transform: scale(1); }
 200 |         }
 201 | 
 202 |         .floating-button {
 203 |             animation: float 3s ease-in-out infinite;
 204 |         }
 205 | 
 206 |         .search-input:focus {
 207 |             box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
 208 |             transform: scale(1.02);
 209 |             background: rgba(31, 41, 55, 0.9);
 210 |         }
 211 | 
 212 |         .search-input:focus + div {
 213 |             opacity: 0.7;
 214 |             transform: translateY(-50%) scale(0.95);
 215 |         }
 216 | 
 217 |         .search-input + div {
 218 |             transition: all 0.3s ease;
 219 |             opacity: 0.5;
 220 |             z-index: 2;
 221 |         }
 222 | 
 223 |         html {
 224 |             scroll-behavior: smooth;
 225 |         }
 226 | 
 227 |         .scroll-top-button {
 228 |             transition: all 0.3s ease;
 229 |             opacity: 0;
 230 |             visibility: hidden;
 231 |         }
 232 | 
 233 |         .scroll-top-button.visible {
 234 |             opacity: 1;
 235 |             visibility: visible;
 236 |         }
 237 | 
 238 |         #githubButton img, #kofiButton img {
 239 |             width: 32px;
 240 |             height: 32px;
 241 |             border-radius: 50%;
 242 |         }
 243 | 
 244 |         @keyframes spin {
 245 |             from {
 246 |                 transform: rotate(0deg);
 247 |             }
 248 |             to {
 249 |                 transform: rotate(180deg);
 250 |             }
 251 |         }
 252 | 
 253 |         .settings-icon {
 254 |             transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 255 |         }
 256 | 
 257 |         .settings-icon:hover {
 258 |             transform: rotate(180deg);
 259 |         }
 260 |     </style>
 261 | </head>
 262 | <body class="bg-gray-900 text-white min-h-screen" x-data="app()" 
 263 |       @keydown.meta.k.prevent="$refs.searchInput.focus()"
 264 |       @keydown.ctrl.k.prevent="$refs.searchInput.focus()">
 265 |     <div x-data="{ showPopup: localStorage.getItem('showPopupReminder') !== 'false' }" x-show="showPopup" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
 266 |         <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md w-full">
 267 |             <h2 class="text-lg font-bold mb-2">Important Notice</h2>
 268 |             <p class="mb-4">Please bookmark <a href="https://nova-domains.github.io" target="_blank" class="text-purple-400 underline">nova-domains.github.io</a> in case the domain you're using stops working. This website lists all Nova domains and indicates whether each one is working or not.</p>
 269 |             <p class="mb-4">You can disable this popup in <a href="settings.html" class="text-purple-400 underline">Settings > Appearance</a>.</p>
 270 |             <button @click="showPopup = false" class="bg-purple-600 text-white w-full px-4 py-2 rounded hover:bg-purple-700 transition">Got it!</button>
 271 |         </div>
 272 |     </div>
 273 |     <div x-show="localStorage.getItem('showParticles') !== 'false'" id="particles-js" class="fixed inset-0 pointer-events-none z-0"></div>
 274 | 
 275 |     <!-- navigation -->
 276 |     <nav class="fixed w-full z-50 glass-effect">
 277 |         <div class="container mx-auto px-6 py-3">
 278 |             <div class="flex items-center justify-between">
 279 |                 <div class="flex items-center space-x-4 md:space-x-8">
 280 |                     <div class="flex items-center space-x-3">
 281 |                         <img src="logo.png" alt="Nova Logo" class="h-8 w-8 md:h-10 md:w-10">
 282 |                         <span class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-800">Nova</span>
 283 |                     </div>
 284 |                     <!-- mobile search bar -->
 285 |                     <div class="md:hidden relative">
 286 |                         <input type="text" 
 287 |                                x-model="searchQuery" 
 288 |                                @keyup.debounce.300ms="searchContent()"
 289 |                                placeholder="Search..." 
 290 |                                class="w-32 bg-gray-800 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-purple-400">
 291 |                     </div>
 292 |                     <div class="hidden md:flex space-x-6">
 293 |                         <button @click="currentTab = currentTab === 'movies' ? 'shows' : 'movies'" 
 294 |                                 class="nav-link">
 295 |                             <span x-text="currentTab === 'movies' ? 'Switch to TV Shows' : 'Switch to Movies'"></span>
 296 |                         </button>
 297 |                         <a href="livesports.html" class="nav-link">Live Sports</a>
 298 |                         <button @click="showWatchLater = true" class="nav-link flex items-center space-x-2">
 299 |                             <span>Watch Later</span>
 300 |                             <span x-show="watchLaterCount > 0" 
 301 |                                   class="bg-purple-600 text-white text-xs flex items-center justify-center rounded-full w-6 h-6" 
 302 |                                   x-text="watchLaterCount"></span>
 303 |                         </button>
 304 |                         <a href="https://github.com/ambr0sial/nova" target="_blank" class="nav-link flex items-center">
 305 |                             <span>GitHub</span>
 306 |                         </a>
 307 |                         <a href="https://ko-fi.com/ambrosial" target="_blank" class="nav-link flex items-center">
 308 |                             <span>Ko-Fi</span>
 309 |                         </a>
 310 |                         <a href="https://discord.gg/s9kUZw7CqP" target="_blank" class="nav-link flex items-center">
 311 |                             <span>Discord</span>
 312 |                         </a>
 313 |                     </div>
 314 |                 </div>
 315 |                 <div class="flex items-center space-x-4">
 316 |                     <div class="relative">
 317 |                         <div class="search-container hidden md:block">
 318 |                             <input type="text" 
 319 |                                    x-ref="searchInput"
 320 |                                    x-model="searchQuery" 
 321 |                                    @keyup.debounce.300ms="searchContent()"
 322 |                                    placeholder="Search..." 
 323 |                                    class="search-input bg-gray-800 rounded-full px-6 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 w-64">
 324 |                             <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center space-x-1 text-gray-400 pointer-events-none select-none">
 325 |                                 <span class="text-xs bg-gray-700 rounded px-1.5 py-0.5">⌘</span>
 326 |                                 <span class="text-xs bg-gray-700 rounded px-1.5 py-0.5">K</span>
 327 |                             </div>
 328 |                         </div>
 329 |                     </div>
 330 |                     <a href="settings.html" class="text-gray-400 hover:text-purple-400 transition-colors duration-300" title="Settings">
 331 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 settings-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 332 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
 333 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 334 |                         </svg>
 335 |                     </a>
 336 |                     <!-- mobile menu button -->
 337 |                     <button @click="mobileMenu = !mobileMenu" class="md:hidden text-gray-300 hover:text-white">
 338 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 339 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 340 |                         </svg>
 341 |                     </button>
 342 |                 </div>
 343 |             </div>
 344 |             
 345 |             <!-- mobile menu -->
 346 |             <div x-show="mobileMenu" 
 347 |                 x-transition:enter="transition ease-out duration-200"
 348 |                 x-transition:enter-start="opacity-0 transform -translate-y-2"
 349 |                 x-transition:enter-end="opacity-100 transform translate-y-0"
 350 |                 x-transition:leave="transition ease-in duration-150"
 351 |                 x-transition:leave-start="opacity-100 transform translate-y-0"
 352 |                 x-transition:leave-end="opacity-0 transform -translate-y-2"
 353 |                 class="md:hidden mt-4 pb-4">
 354 |                 <div class="flex flex-col space-y-4">
 355 |                     <button @click="currentTab = currentTab === 'movies' ? 'shows' : 'movies'; mobileMenu = false" 
 356 |                             class="text-left px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">
 357 |                         <span x-text="currentTab === 'movies' ? 'Switch to TV Shows' : 'Switch to Movies'"></span>
 358 |                     </button>
 359 |                     <a href="livesports.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Live Sports</a>
 360 |                     <button @click="showWatchLater = true; mobileMenu = false" 
 361 |                             class="flex items-center justify-between px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">
 362 |                         <span>Watch Later</span>
 363 |                         <span x-show="watchLaterCount > 0" 
 364 |                               class="bg-purple-600 text-white text-xs flex items-center justify-center rounded-full w-6 h-6" 
 365 |                               x-text="watchLaterCount"></span>
 366 |                     </button>
 367 |                     <a href="settings.html" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors flex items-center space-x-2">
 368 |                         <span>Settings</span>
 369 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 370 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
 371 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 372 |                         </svg>
 373 |                     </a>
 374 |                     <a href="https://github.com/ambr0sial/nova" target="_blank" 
 375 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">GitHub</a>
 376 |                     <a href="https://ko-fi.com/ambrosial" target="_blank" 
 377 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Ko-Fi</a>
 378 |                     <a href="https://discord.gg/s9kUZw7CqP" target="_blank" 
 379 |                        class="px-4 py-2 hover:bg-gray-800 rounded-lg transition-colors">Discord</a>
 380 |                 </div>
 381 |             </div>
 382 |         </div>
 383 |     </nav>
 384 | 
 385 |     <!-- update message -->
 386 |     <div x-data="{ show: true }"
 387 |          x-show="show && localStorage.getItem('showUpdateNotice') !== 'false'" 
 388 |          class="fixed top-[3.5rem] md:top-16 left-0 right-0 z-40 animate-slide-down"
 389 |          x-transition:enter="transition ease-out duration-300"
 390 |          x-transition:enter-start="transform -translate-y-full"
 391 |          x-transition:enter-end="transform translate-y-0"
 392 |          x-transition:leave="transition ease-in duration-200"
 393 |          x-transition:leave-start="transform translate-y-0"
 394 |          x-transition:leave-end="transform -translate-y-full">
 395 |         <div class="bg-gray-900 border-b border-purple-500/20">
 396 |             <div class="container mx-auto px-6 py-2 flex items-center justify-between">
 397 |                 <div class="flex items-center space-x-2">
 398 |                     <!-- <span class="text-purple-400">🎉</span> -->
 399 |                     <p class="text-sm">
 400 |                         <span class="font-semibold text-purple-400">Update (16/07/25)</span>
 401 |                         <span class="text-gray-300 text-xs sm:text-sm">Updated and Added more sources!🎉</span>
 402 |                     </p>
 403 |                 </div>
 404 |                 <button @click="show = false" class="text-gray-400 hover:text-white transition-colors">×</button>
 405 |             </div>
 406 |         </div>
 407 |     </div>
 408 | 
 409 |     <!-- hero section -->
 410 |     <div class="pt-24 pb-12 px-6">
 411 |         <div class="container mx-auto">
 412 |             <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
 413 |                 <h2 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-800" 
 414 |                     x-text="currentTab === 'movies' ? 'Popular Movies' : 'Popular TV Shows'"></h2>
 415 |             </div>
 416 |             
 417 |             <!-- filters -->
 418 |             <div class="mb-8 space-y-4">
 419 |                 <div class="flex flex-wrap gap-4 items-center">
 420 |                     <!-- genre filter -->
 421 |                     <div class="relative">
 422 |                         <select x-model="selectedGenre"
 423 |                                 @change="applyFilters()"
 424 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
 425 |                             <option value="">All Genres</option>
 426 |                             <template x-for="genre in genres" :key="genre.id">
 427 |                                 <option :value="genre.id" x-text="genre.name"></option>
 428 |                             </template>
 429 |                         </select>
 430 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
 431 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
 432 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 433 |                             </svg>
 434 |                         </div>
 435 |                     </div>
 436 | 
 437 |                     <!-- rating range -->
 438 |                     <div class="relative">
 439 |                         <select x-model="minRating"
 440 |                                 @change="applyFilters()"
 441 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
 442 |                             <option value="">Any Rating</option>
 443 |                             <option value="8">8+ ⭐</option>
 444 |                             <option value="7">7+ ⭐</option>
 445 |                             <option value="6">6+ ⭐</option>
 446 |                             <option value="5">5+ ⭐</option>
 447 |                         </select>
 448 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
 449 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
 450 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 451 |                             </svg>
 452 |                         </div>
 453 |                     </div>
 454 | 
 455 |                     <!-- year range -->
 456 |                     <div class="relative">
 457 |                         <select x-model="yearRange"
 458 |                                 @change="applyFilters()"
 459 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
 460 |                             <option value="">Any Year</option>
 461 |                             <option value="2020,2024">2020s</option>
 462 |                             <option value="2010,2019">2010s</option>
 463 |                             <option value="2000,2009">2000s</option>
 464 |                             <option value="1990,1999">1990s</option>
 465 |                             <option value="1980,1989">1980s</option>
 466 |                             <option value="1970,1979">1970s</option>
 467 |                             <option value="1960,1969">1960s</option>
 468 |                             <option value="1950,1959">1950s</option>
 469 |                         </select>
 470 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
 471 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
 472 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 473 |                             </svg>
 474 |                         </div>
 475 |                     </div>
 476 | 
 477 |                     <!-- language filter -->
 478 |                     <div class="relative">
 479 |                         <select x-model="selectedLanguage"
 480 |                                 @change="applyFilters()"
 481 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
 482 |                             <option value="">All Languages</option>
 483 |                             <option value="en">English</option>
 484 |                             <option value="fr">French</option>
 485 |                             <option value="es">Spanish</option>
 486 |                             <option value="de">German</option>
 487 |                             <option value="it">Italian</option>
 488 |                             <option value="ja">Japanese</option>
 489 |                             <option value="ko">Korean</option>
 490 |                         </select>
 491 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
 492 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
 493 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 494 |                             </svg>
 495 |                         </div>
 496 |                     </div>
 497 | 
 498 |                     <!-- sort order -->
 499 |                     <div class="relative">
 500 |                         <select x-model="sortBy"
 501 |                                 @change="applyFilters()"
 502 |                                 class="bg-gray-800 text-white rounded-lg px-4 py-2 pr-8 appearance-none hover:bg-gray-700 transition-colors duration-300 focus:ring-2 focus:ring-purple-400 focus:outline-none">
 503 |                             <option value="popularity.desc">Most Popular</option>
 504 |                             <option value="revenue.desc">Highest Revenue</option>
 505 |                             <option value="vote_count.desc">Most Reviewed</option>
 506 |                         </select>
 507 |                         <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
 508 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
 509 |                                 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 510 |                             </svg>
 511 |                         </div>
 512 |                     </div>
 513 | 
 514 |                     <!-- active filters display -->
 515 |                     <div class="flex flex-wrap gap-2">
 516 |                         <template x-if="selectedGenre">
 517 |                             <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
 518 |                                 <span x-text="getGenreName(selectedGenre)"></span>
 519 |                                 <button @click="selectedGenre = ''; applyFilters()" class="hover:text-gray-300">×</button>
 520 |                             </span>
 521 |                         </template>
 522 |                         <template x-if="minRating">
 523 |                             <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
 524 |                                 <span x-text="minRating + '+ ⭐'"></span>
 525 |                                 <button @click="minRating = ''; applyFilters()" class="hover:text-gray-300">×</button>
 526 |                             </span>
 527 |                         </template>
 528 |                         <template x-if="yearRange">
 529 |                             <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
 530 |                                 <span x-text="getYearRangeName(yearRange)"></span>
 531 |                                 <button @click="yearRange = ''; applyFilters()" class="hover:text-gray-300">×</button>
 532 |                             </span>
 533 |                         </template>
 534 |                         <template x-if="selectedLanguage">
 535 |                             <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
 536 |                                 <span x-text="getLanguageName(selectedLanguage)"></span>
 537 |                                 <button @click="selectedLanguage = ''; applyFilters()" class="hover:text-gray-300">×</button>
 538 |                             </span>
 539 |                         </template>
 540 |                         <template x-if="hasActiveFilters">
 541 |                             <button @click="clearAllFilters()" 
 542 |                                     class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2 transition-colors duration-300">
 543 |                                 <span>Clear All Filters</span>
 544 |                             </button>
 545 |                         </template>
 546 |                     </div>
 547 |                 </div>
 548 |                 <button @click="pickRandom()" 
 549 |                         class="bg-gradient-to-r from-purple-600 to-violet-600 text-white px-4 py-2 rounded-lg hover:brightness-110 transition-all duration-300 flex items-center space-x-2">
 550 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 551 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
 552 |                     </svg>
 553 |                     <span>Random Pick</span>
 554 |                 </button>
 555 |             </div>
 556 |             
 557 |             <!-- content grid -->
 558 |             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 559 |                 <template x-for="item in filteredContent" :key="item.id">
 560 |                     <div class="relative card-hover" @contextmenu.prevent="
 561 |                         $store.contextMenu = {
 562 |                             show: true,
 563 |                             x: $event.clientX,
 564 |                             y: $event.clientY,
 565 |                             item: item
 566 |                         }">
 567 |                         <a :href="'watch.html?id=' + item.id + '&type=' + (currentTab === 'movies' ? 'movie' : 'tv')"
 568 |                            class="block rounded-lg overflow-hidden bg-gray-800 aspect-[2/3]">
 569 |                             <div class="relative h-full">
 570 |                                 <img :src="'https://image.tmdb.org/t/p/w500' + item.poster_path" 
 571 |                                      :alt="item.title || item.name"
 572 |                                      class="w-full h-full object-cover"
 573 |                                      @error="event => {
 574 |                                             event.target.src = '/logo.png';
 575 |                                             event.target.classList.remove('object-cover');
 576 |                                             event.target.classList.add('object-contain');
 577 |                                         }" />
 578 |                                 <div class="card-overlay absolute inset-0 flex flex-col justify-end p-2 sm:p-3 md:p-4">
 579 |                                     <h3 class="text-sm md:text-lg font-semibold" x-text="item.title || item.name"></h3>
 580 |                                     <p class="text-gray-400 text-xs md:text-sm mt-1" x-text="'⭐ ' + (item.vote_average || 'N/A') + '/10'"></p>
 581 |                                     <p class="text-gray-300 text-xs md:text-sm mt-2 hidden sm:block" x-text="item.overview.substring(0, 100) + '...'"></p>
 582 |                                 </div>
 583 |                             </div>
 584 |                         </a>
 585 |                         <button @click.stop="toggleWatchLater(item)"
 586 |                                 class="absolute top-2 right-2 p-1.5 md:p-2 bg-gray-900 bg-opacity-75 rounded-full hover:bg-purple-600 transition-all duration-300"
 587 |                                 :class="isInWatchLater(item) ? 'text-purple-400' : 'text-white'">
 588 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="currentColor" viewBox="0 0 24 24">
 589 |                                 <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
 590 |                             </svg>
 591 |                         </button>
 592 |                     </div>
 593 |                 </template>
 594 |             </div>
 595 | 
 596 |             <!-- pagination -->
 597 |             <div class="mt-12 flex items-center justify-center space-x-4">
 598 |                 <button @click="currentPage > 1 && changePage(currentPage - 1)"
 599 |                         :class="currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-700'"
 600 |                         class="bg-gray-800 px-6 py-3 rounded-lg transition-all duration-300 flex items-center space-x-2">
 601 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 602 |                         <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
 603 |                     </svg>
 604 |                     <span>Previous</span>
 605 |                 </button>
 606 |                 
 607 |                 <span class="text-gray-400">Page <span class="text-white font-medium" x-text="currentPage"></span></span>
 608 | 
 609 |                 <button @click="changePage(currentPage + 1)"
 610 |                         class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-lg transition-all duration-300 flex items-center space-x-2">
 611 |                     <span>Next</span>
 612 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 613 |                         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
 614 |                     </svg>
 615 |                 </button>
 616 |             </div>
 617 |         </div>
 618 |     </div>
 619 | 
 620 |     <!-- streaming services -->
 621 |     <div class="container mx-auto px-4 md:px-6 py-8 md:py-12">
 622 |         <div class="text-center mb-6 md:mb-8">
 623 |             <h2 class="text-xl md:text-2xl font-bold text-gray-300">Content Available From</h2>
 624 |             <p class="text-sm md:text-base text-gray-400 mt-2">Nova aggregates content from various premium streaming platforms</p>
 625 |         </div>
 626 |         <div class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 items-center justify-items-center opacity-80">
 627 |             <a href="https://netflix.com" target="_blank" class="transform transition-transform hover:scale-105">
 628 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" 
 629 |                      alt="Netflix" 
 630 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(229,9,20,0.7)]">
 631 |             </a>
 632 |             <a href="https://www.primevideo.com" target="_blank" class="transform transition-transform hover:scale-105">
 633 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Amazon_Prime_Video_logo.svg" 
 634 |                      alt="Prime Video" 
 635 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(0,168,225,0.7)]">
 636 |             </a>
 637 |             <a href="https://www.disneyplus.com" target="_blank" class="transform transition-transform hover:scale-105">
 638 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Disney%2B_logo.svg" 
 639 |                      alt="Disney+" 
 640 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(113,168,255,0.7)]">
 641 |             </a>
 642 |             <a href="https://www.hulu.com" target="_blank" class="transform transition-transform hover:scale-105">
 643 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Hulu_logo_%282018%29.svg" 
 644 |                      alt="Hulu" 
 645 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(28,231,131,0.7)]">
 646 |             </a>
 647 |             <a href="https://www.max.com" target="_blank" class="transform transition-transform hover:scale-105">
 648 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/HBO_Max_Logo.svg" 
 649 |                      alt="HBO Max" 
 650 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(116,80,254,0.7)]">
 651 |             </a>
 652 |             <a href="https://tv.apple.com" target="_blank" class="transform transition-transform hover:scale-105">
 653 |                 <img src="https://upload.wikimedia.org/wikipedia/commons/2/28/Apple_TV_Plus_Logo.svg" 
 654 |                      alt="Apple TV+" 
 655 |                      class="h-6 md:h-8 w-auto grayscale hover:grayscale-0 hover:scale-110 hover:brightness-125 transition-all duration-300 transform hover:drop-shadow-[0_0_7px_rgba(0,244,244,0.7)]">
 656 |             </a>
 657 |         </div>
 658 |     </div>
 659 | 
 660 |     <footer class="text-gray-400 py-4 md:py-6 mt-8 md:mt-12">
 661 |         <div class="container mx-auto px-4 md:px-6 text-center">
 662 |             <p class="text-xs md:text-sm">
 663 |                 Nova doesn't store files, but provides links to external services. Legal issues should be discussed with file providers and hosts. The files provided by video providers are not covered by Nova.
 664 |             </p>
 665 |             <p class="mt-2 text-xs">
 666 |                 Made with ❤ by Ambrosial. 07/04/25
 667 |             </p>
 668 |             <p class="mt-2 text-xs">
 669 |                 <a href="mailto:contact.novastream@gmail.com" class="text-purple-400 hover:text-purple-300 transition-colors">contact.novastream@gmail.com</a>
 670 |             </p>
 671 |         </div>
 672 |     </footer>
 673 | 
 674 |     <!-- particles.js -->
 675 |     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 676 |     <script>
 677 |         particlesJS('particles-js', {
 678 |             particles: {
 679 |                 number: {
 680 |                     value: 80,
 681 |                     density: {
 682 |                         enable: true,
 683 |                         value_area: 800
 684 |                     }
 685 |                 },
 686 |                 color: {
 687 |                     value: '#a855f7'
 688 |                 },
 689 |                 shape: {
 690 |                     type: 'circle'
 691 |                 },
 692 |                 opacity: {
 693 |                     value: 0.2,
 694 |                     random: true,
 695 |                     animation: {
 696 |                         enable: true,
 697 |                         speed: 1,
 698 |                         opacity_min: 0.1,
 699 |                         sync: false
 700 |                     }
 701 |                 },
 702 |                 size: {
 703 |                     value: 3,
 704 |                     random: true,
 705 |                     animation: {
 706 |                         enable: true,
 707 |                         speed: 2,
 708 |                         size_min: 0.1,
 709 |                         sync: false
 710 |                     }
 711 |                 },
 712 |                 line_linked: {
 713 |                     enable: true,
 714 |                     distance: 150,
 715 |                     color: '#a855f7',
 716 |                     opacity: 0.2,
 717 |                     width: 1
 718 |                 },
 719 |                 move: {
 720 |                     enable: true,
 721 |                     speed: 1,
 722 |                     direction: 'none',
 723 |                     random: true,
 724 |                     straight: false,
 725 |                     out_mode: 'out',
 726 |                     bounce: false,
 727 |                 }
 728 |             },
 729 |             interactivity: {
 730 |                 detect_on: 'window',
 731 |                 events: {
 732 |                     onhover: {
 733 |                         enable: true,
 734 |                         mode: 'grab'
 735 |                     },
 736 |                     onclick: {
 737 |                         enable: true,
 738 |                         mode: 'push'
 739 |                     },
 740 |                     resize: true
 741 |                 },
 742 |                 modes: {
 743 |                     grab: {
 744 |                         distance: 140,
 745 |                         line_linked: {
 746 |                             opacity: 0.5
 747 |                         }
 748 |                     },
 749 |                     push: {
 750 |                         particles_nb: 4
 751 |                     }
 752 |                 }
 753 |             },
 754 |             retina_detect: true
 755 |         });
 756 |     </script>
 757 | 
 758 |     <!-- watch later modal -->
 759 |     <div x-show="showWatchLater" 
 760 |          class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-90 flex items-start justify-center"
 761 |          @click.away="showWatchLater = false"
 762 |          x-transition:enter="transition ease-out duration-300"
 763 |          x-transition:enter-start="opacity-0"
 764 |          x-transition:enter-end="opacity-100"
 765 |          x-transition:leave="transition ease-in duration-200"
 766 |          x-transition:leave-start="opacity-100"
 767 |          x-transition:leave-end="opacity-0">
 768 |         <div class="bg-gray-900 rounded-lg w-full max-w-4xl mt-20 modal-animation">
 769 |             <div class="p-6 border-b border-gray-800">
 770 |                 <div class="flex items-center justify-between">
 771 |                     <h2 class="text-2xl font-bold">Watch Later</h2>
 772 |                     <div class="flex items-center space-x-4">
 773 |                         <button @click="showClearConfirm = true" 
 774 |                                 x-show="watchLaterItems.length > 0"
 775 |                                 class="text-gray-400 hover:text-red-500 flex items-center space-x-2 transition-colors duration-300">
 776 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 777 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 778 |                             </svg>
 779 |                             <span>Clear All</span>
 780 |                         </button>
 781 |                         <button @click="showWatchLater = false" class="text-gray-500 hover:text-white">
 782 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 783 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 784 |                             </svg>
 785 |                         </button>
 786 |                     </div>
 787 |                 </div>
 788 |             </div>
 789 |             <div class="p-6">
 790 |                 <div x-show="!watchLaterItems.length" class="text-center text-gray-500 py-8">
 791 |                     No items in your watch later list
 792 |                 </div>
 793 |                 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
 794 |                     <template x-for="item in watchLaterItems" :key="item.id">
 795 |                         <div class="relative bg-gray-800 rounded-lg overflow-hidden">
 796 |                             <a :href="'watch.html?id=' + item.id + '&type=' + item.type"
 797 |                                class="block">
 798 |                                 <img :src="'https://image.tmdb.org/t/p/w500' + item.poster_path" 
 799 |                                      :alt="item.title || item.name"
 800 |                                      class="w-full h-48 object-cover">
 801 |                                 <div class="p-4">
 802 |                                     <h3 class="font-medium" x-text="item.title || item.name"></h3>
 803 |                                     <p class="text-gray-400 text-sm mt-1" x-text="'⭐ ' + (item.vote_average || 'N/A') + '/10'"></p>
 804 |                                 </div>
 805 |                             </a>
 806 |                             <button @click="toggleWatchLater(item)"
 807 |                                     class="absolute top-2 right-2 p-2 bg-gray-900 bg-opacity-75 rounded-full hover:bg-purple-600 transition-all duration-300 text-purple-400">
 808 |                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 809 |                                     <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
 810 |                                 </svg>
 811 |                             </button>
 812 |                         </div>
 813 |                     </template>
 814 |                 </div>
 815 |             </div>
 816 |         </div>
 817 |     </div>
 818 | 
 819 |     <!-- clear confirmation modal -->
 820 |     <div x-show="showClearConfirm" 
 821 |          class="fixed inset-0 z-[60] overflow-auto bg-black bg-opacity-90 flex items-center justify-center"
 822 |          @click.away="showClearConfirm = false"
 823 |          x-transition:enter="transition ease-out duration-300"
 824 |          x-transition:enter-start="opacity-0 transform scale-95"
 825 |          x-transition:enter-end="opacity-100 transform scale-100"
 826 |          x-transition:leave="transition ease-in duration-200"
 827 |          x-transition:leave-start="opacity-100 transform scale-100"
 828 |          x-transition:leave-end="opacity-0 transform scale-95">
 829 |         <div class="bg-gray-900 rounded-lg w-full max-w-md p-6 modal-animation">
 830 |             <div class="text-center">
 831 |                 <div class="w-16 h-16 rounded-full bg-red-500 bg-opacity-10 mx-auto flex items-center justify-center mb-4">
 832 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 833 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 834 |                     </svg>
 835 |                 </div>
 836 |                 <h3 class="text-xl font-bold mb-2">Clear Watch Later List?</h3>
 837 |                 <p class="text-gray-400 mb-6">This action cannot be undone. Are you sure you want to remove all items from your watch later list?</p>
 838 |                 <div class="flex space-x-3 justify-center">
 839 |                     <button @click="showClearConfirm = false" 
 840 |                             class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors duration-300">
 841 |                         Cancel
 842 |                     </button>
 843 |                     <button @click="doClearWatchLater()" 
 844 |                             class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors duration-300">
 845 |                         Clear All
 846 |                     </button>
 847 |                 </div>
 848 |             </div>
 849 |         </div>
 850 |     </div>
 851 | 
 852 |     <!-- context menu -->
 853 |     <div x-data="contextMenuHandler()" 
 854 |         x-show="$store.contextMenu.show"
 855 |         @click.away="$store.contextMenu.show = false"
 856 |         @keydown.escape.window="$store.contextMenu.show = false"
 857 |         :style="`position: fixed; left: ${$store.contextMenu.x}px; top: ${$store.contextMenu.y}px`"
 858 |         class="bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-50 w-56 py-2 animate-fade-in"
 859 |         x-cloak>
 860 |         
 861 |         <div class="px-4 py-2 border-b border-gray-700">
 862 |             <h3 class="text-sm font-medium text-gray-300" x-text="$store.contextMenu.item?.title || $store.contextMenu.item?.name"></h3>
 863 |         </div>
 864 | 
 865 |         <a :href="'https://www.themoviedb.org/' + (currentTab === 'movies' ? 'movie' : 'tv') + '/' + $store.contextMenu.item?.id"
 866 |            target="_blank"
 867 |            class="px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2 w-full">
 868 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 869 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 870 |             </svg>
 871 |             View on TMDB
 872 |         </a>
 873 | 
 874 |         <button @click="copyToClipboard($store.contextMenu.item?.title || $store.contextMenu.item?.name)"
 875 |                 class="px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2 w-full">
 876 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 877 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
 878 |             </svg>
 879 |             Copy Title
 880 |         </button>
 881 | 
 882 |         <button @click="copyToClipboard($store.contextMenu.item?.id)"
 883 |                 class="px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2 w-full">
 884 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 885 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
 886 |             </svg>
 887 |             Copy TMDB ID
 888 |         </button>
 889 | 
 890 |         <button @click="copyToClipboard($store.contextMenu.item?.overview)"
 891 |                 class="px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2 w-full">
 892 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 893 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
 894 |             </svg>
 895 |             Copy Overview
 896 |         </button>
 897 | 
 898 |         <div class="border-t border-gray-700 my-2"></div>
 899 | 
 900 |         <button @click="toggleWatchLater($store.contextMenu.item); $store.contextMenu.show = false"
 901 |                 class="px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 flex items-center gap-2 w-full">
 902 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 903 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
 904 |             </svg>
 905 |             <span x-text="isInWatchLater($store.contextMenu.item) ? 'Remove from Watch Later' : 'Add to Watch Later'"></span>
 906 |         </button>
 907 |     </div>
 908 | 
 909 |     <!-- toast notification -->
 910 |     <div x-data="toastHandler()" 
 911 |         x-show="show"
 912 |         @show-toast.window="showToast($event.detail.message)"
 913 |         x-transition:enter="transition ease-out duration-300"
 914 |         x-transition:enter-start="opacity-0 transform translate-y-8"
 915 |         x-transition:enter-end="opacity-100 transform translate-y-0"
 916 |         x-transition:leave="transition ease-in duration-200"
 917 |         x-transition:leave-start="opacity-100 transform translate-y-0"
 918 |         x-transition:leave-end="opacity-0 transform translate-y-8"
 919 |         class="fixed bottom-4 right-4 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-xl z-[100] flex items-center gap-2"
 920 |         style="pointer-events: none;">
 921 |         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
 922 |             <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
 923 |         </svg>
 924 |         <span x-text="message" class="text-sm"></span>
 925 |     </div>
 926 | 
 927 |     <script>
 928 |     function toastHandler() {
 929 |         return {
 930 |             message: '',
 931 |             show: false,
 932 |             showToast(msg) {
 933 |                 this.message = msg;
 934 |                 this.show = true;
 935 |                 setTimeout(() => {
 936 |                     this.show = false;
 937 |                 }, 3000);
 938 |             }
 939 |         }
 940 |     }
 941 | 
 942 |     function contextMenuHandler() {
 943 |         return {
 944 |             copyToClipboard(text) {
 945 |                 if (!text) return;
 946 |                 navigator.clipboard.writeText(text).then(() => {
 947 |                     window.dispatchEvent(new CustomEvent('show-toast', { 
 948 |                         detail: { message: 'Copied to clipboard!' }
 949 |                     }));
 950 |                 }).catch(() => {
 951 |                     window.dispatchEvent(new CustomEvent('show-toast', { 
 952 |                         detail: { message: 'Failed to copy to clipboard' }
 953 |                     }));
 954 |                 });
 955 |             }
 956 |         }
 957 |     }
 958 | 
 959 |     document.addEventListener('alpine:init', () => {
 960 |         Alpine.store('contextMenu', {
 961 |             show: false,
 962 |             x: 0,
 963 |             y: 0,
 964 |             item: null
 965 |         });
 966 |     });
 967 |     </script>
 968 | 
 969 |     <script>
 970 |         document.addEventListener('DOMContentLoaded', function() {
 971 |             const discordPopupSeen = localStorage.getItem('discordPopupSeen');
 972 | 
 973 |             if (!discordPopupSeen) {
 974 |                 const popup = document.createElement('div');
 975 |                 popup.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75';
 976 |                 popup.innerHTML = `
 977 |                     <div class="bg-gray-800 rounded-lg p-6 text-center space-y-4 max-w-sm">
 978 |                         <h2 class="text-xl font-bold text-purple-400">Nova has a Discord Server!</h2>
 979 |                         <p class="text-gray-300">Join the community for updates and discussions <3</p>
 980 |                         <a href="https://discord.gg/s9kUZw7CqP" target="_blank" 
 981 |                             class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-white inline-block">
 982 |                             Join Now
 983 |                         </a>
 984 |                         <button id="closePopup" 
 985 |                             class="text-gray-500 hover:text-gray-300 focus:outline-none">
 986 |                             Dismiss
 987 |                         </button>
 988 |                     </div>
 989 |                 `;
 990 |                 document.body.appendChild(popup);
 991 | 
 992 |                 document.getElementById('closePopup').addEventListener('click', function() {
 993 |                     popup.style.display = 'none';
 994 |                     localStorage.setItem('discordPopupSeen', 'true');
 995 |                 });
 996 |             }
 997 |         });
 998 | 
 999 |         document.addEventListener('alpine:init', () => {
1000 |             Alpine.store('contextMenu', {
1001 |                 show: false,
1002 |                 x: 0,
1003 |                 y: 0,
1004 |                 item: null
1005 |             });
1006 |         });
1007 | 
1008 |         function app() {
1009 |             return {
1010 |                 apiKey: '1070730380f5fee0d87cf0382670b255',
1011 |                 content: [],
1012 |                 currentTab: 'movies',
1013 |                 language: localStorage.getItem('selectedLanguage') || 'en',
1014 |                 searchQuery: '',
1015 |                 currentPage: 1,
1016 |                 showWatchLater: false,
1017 |                 watchLaterItems: [],
1018 |                 watchLaterCount: 0,
1019 |                 showModal: false,
1020 |                 selectedContent: null,
1021 |                 currentVideoUrl: '',
1022 |                 selectedSeason: 1,
1023 |                 selectedEpisode: 1,
1024 |                 seasons: [],
1025 |                 episodes: [],
1026 |                 selectedSource: localStorage.getItem('defaultSource') || 'embedsu',
1027 |                 availableSources: availableSources,
1028 |                 showClearConfirm: false,
1029 |                 genres: [],
1030 |                 selectedGenre: '',
1031 |                 minRating: '',
1032 |                 filteredContent: [],
1033 |                 mobileMenu: false,
1034 |                 sortBy: 'popularity.desc',
1035 |                 yearRange: '',
1036 |                 selectedLanguage: '',
1037 | 
1038 |                 async init() {
1039 |                     const savedItems = localStorage.getItem('watchLater');
1040 |                     if (savedItems) {
1041 |                         this.watchLaterItems = JSON.parse(savedItems);
1042 |                         this.watchLaterCount = this.watchLaterItems.length;
1043 |                     }
1044 | 
1045 |                     await this.fetchGenres();
1046 |                     await this.fetchContent();
1047 |                     
1048 |                     this.$watch('currentTab', async () => {
1049 |                         this.currentPage = 1;
1050 |                         this.selectedGenre = '';
1051 |                         this.minRating = '';
1052 |                         this.yearRange = '';
1053 |                         await this.fetchGenres();
1054 |                         await this.fetchContent();
1055 |                     });
1056 |                     
1057 |                     this.$watch('language', () => {
1058 |                         this.currentPage = 1;
1059 |                         this.fetchContent();
1060 |                     });
1061 |                 },
1062 | 
1063 |                 async fetchGenres() {
1064 |                     const baseUrl = 'https://api.themoviedb.org/3';
1065 |                     const endpoint = this.currentTab === 'movies' ? 'genre/movie/list' : 'genre/tv/list';
1066 |                     const url = `${baseUrl}/${endpoint}?api_key=${this.apiKey}&language=${this.language}`;
1067 | 
1068 |                     try {
1069 |                         const response = await fetch(url);
1070 |                         const data = await response.json();
1071 |                         this.genres = data.genres;
1072 |                     } catch (error) {
1073 |                         console.error('Error fetching genres:', error);
1074 |                     }
1075 |                 },
1076 | 
1077 |                 getGenreName(genreId) {
1078 |                     const genre = this.genres.find(g => g.id === parseInt(genreId));
1079 |                     return genre ? genre.name : '';
1080 |                 },
1081 | 
1082 |                 async applyFilters() {
1083 |                     const baseUrl = 'https://api.themoviedb.org/3/discover';
1084 |                     const endpoint = this.currentTab === 'movies' ? 'movie' : 'tv';
1085 |                     
1086 |                     let params = new URLSearchParams({
1087 |                         api_key: this.apiKey,
1088 |                         language: `${this.language}-${this.language.toUpperCase()}`,
1089 |                         page: this.currentPage,
1090 |                         sort_by: this.sortBy
1091 |                     });
1092 | 
1093 |                     if (this.selectedGenre) {
1094 |                         params.append('with_genres', this.selectedGenre);
1095 |                     }
1096 | 
1097 |                     if (this.minRating) {
1098 |                         params.append('vote_average.gte', this.minRating);
1099 |                     }
1100 | 
1101 |                     if (this.selectedLanguage) {
1102 |                         params.append('with_original_language', this.selectedLanguage);
1103 |                     }
1104 | 
1105 |                     if (this.yearRange) {
1106 |                         const [startYear, endYear] = this.yearRange.split(',');
1107 |                         params.append('primary_release_date.gte', `${startYear}-01-01`);
1108 |                         params.append('primary_release_date.lte', `${endYear}-12-31`);
1109 |                     }
1110 | 
1111 |                     const url = `${baseUrl}/${endpoint}?${params.toString()}`;
1112 | 
1113 |                     try {
1114 |                         const response = await fetch(url);
1115 |                         const data = await response.json();
1116 |                         this.content = data.results;
1117 |                         this.filteredContent = this.content;
1118 |                     } catch (error) {
1119 |                         console.error('Error applying filters:', error);
1120 |                     }
1121 |                 },
1122 | 
1123 |                 getLanguageName(code) {
1124 |                     const languages = {
1125 |                         en: 'English',
1126 |                         fr: 'French',
1127 |                         es: 'Spanish',
1128 |                         de: 'German',
1129 |                         it: 'Italian',
1130 |                         ja: 'Japanese',
1131 |                         ko: 'Korean'
1132 |                     };
1133 |                     return languages[code] || code;
1134 |                 },
1135 | 
1136 |                 getYearRangeName(range) {
1137 |                     if (!range) return '';
1138 |                     const [start, end] = range.split(',');
1139 |                     const decade = Math.floor(start / 10) * 10;
1140 |                     return `${decade}s`;
1141 |                 },
1142 | 
1143 |                 get hasActiveFilters() {
1144 |                     return this.selectedGenre || this.minRating || this.yearRange || this.selectedLanguage;
1145 |                 },
1146 | 
1147 |                 clearAllFilters() {
1148 |                     this.selectedGenre = '';
1149 |                     this.minRating = '';
1150 |                     this.yearRange = '';
1151 |                     this.selectedLanguage = '';
1152 |                     this.applyFilters();
1153 |                 },
1154 | 
1155 |                 async fetchContent() {
1156 |                     const baseUrl = 'https://api.themoviedb.org/3';
1157 |                     const endpoint = this.currentTab === 'movies' ? 'movie/popular' : 'tv/popular';
1158 |                     const url = `${baseUrl}/${endpoint}?api_key=${this.apiKey}&language=${this.language}&page=${this.currentPage}`;
1159 | 
1160 |                     try {
1161 |                         const response = await fetch(url);
1162 |                         const data = await response.json();
1163 |                         this.content = data.results;
1164 |                         this.applyFilters();
1165 |                     } catch (error) {
1166 |                         console.error('Error fetching content:', error);
1167 |                     }
1168 |                 },
1169 | 
1170 |                 async searchContent() {
1171 |                     if (!this.searchQuery) {
1172 |                         await this.applyFilters();
1173 |                         return;
1174 |                     }
1175 | 
1176 |                     const baseUrl = 'https://api.themoviedb.org/3';
1177 |                     const searchQuery = this.searchQuery.trim();
1178 |                     
1179 |                     if (searchQuery.startsWith('@')) {
1180 |                         const personName = searchQuery.substring(1);
1181 |                         if (!personName) {
1182 |                             await this.applyFilters();
1183 |                             return;
1184 |                         }
1185 | 
1186 |                         const personUrl = `${baseUrl}/search/person?api_key=${this.apiKey}&query=${encodeURIComponent(personName)}`;
1187 |                         try {
1188 |                             const personResponse = await fetch(personUrl);
1189 |                             const personData = await personResponse.json();
1190 |                             const person = personData.results[0];
1191 |                             
1192 |                             if (person) {
1193 |                                 const creditsUrl = `${baseUrl}/person/${person.id}/combined_credits?api_key=${this.apiKey}`;
1194 |                                 const creditsResponse = await fetch(creditsUrl);
1195 |                                 const creditsData = await creditsResponse.json();
1196 |                                 
1197 |                                 this.content = creditsData[this.currentTab === 'movies' ? 'cast' : 'crew']
1198 |                                     .filter(item => this.currentTab === 'movies' ? item.media_type === 'movie' : item.media_type === 'tv')
1199 |                                     .slice(0, 20);
1200 |                             } else {
1201 |                                 this.content = [];
1202 |                             }
1203 |                         } catch (error) {
1204 |                             console.error('Error searching person:', error);
1205 |                             this.content = [];
1206 |                         }
1207 |                     } else {
1208 |                         const endpoint = this.currentTab === 'movies' ? 'movie' : 'tv';
1209 |                         const url = `${baseUrl}/search/${endpoint}?api_key=${this.apiKey}&query=${encodeURIComponent(searchQuery)}&language=${this.language}-${this.language.toUpperCase()}&page=${this.currentPage}`;
1210 | 
1211 |                         try {
1212 |                             const response = await fetch(url);
1213 |                             const data = await response.json();
1214 |                             this.content = data.results;
1215 |                         } catch (error) {
1216 |                             console.error('Error searching content:', error);
1217 |                             this.content = [];
1218 |                         }
1219 |                     }
1220 |                     
1221 |             this.filteredContent = this.content.filter(item => {
1222 |                 if (this.selectedGenre && !item.genre_ids?.includes(parseInt(this.selectedGenre))) {
1223 |                     return false;
1224 |                 }
1225 |                 if (this.minRating && item.vote_average < parseFloat(this.minRating)) {
1226 |                     return false;
1227 |                 }
1228 |                 if (this.selectedLanguage && item.original_language !== this.selectedLanguage) {
1229 |                     return false;
1230 |                 }
1231 |                 return true;
1232 |             });
1233 |         },
1234 | 
1235 |         async openContent(item) {
1236 |             this.selectedContent = item;
1237 |             this.showModal = true;
1238 | 
1239 |             if (this.currentTab === 'shows') {
1240 |                 const url = `https://api.themoviedb.org/3/tv/${item.id}?api_key=${this.apiKey}`;
1241 |                 try {
1242 |                     const response = await fetch(url);
1243 |                     const data = await response.json();
1244 |                     this.seasons = Array.from({length: data.number_of_seasons}, (_, i) => i + 1);
1245 |                     this.updateEpisodes();
1246 |                 } catch (error) {
1247 |                     console.error('Error fetching seasons:', error);
1248 |                 }
1249 |             }
1250 |             this.updateVideoUrl();
1251 |         },
1252 | 
1253 |         getSourceUrl(sourceId, type, params) {
1254 |             const source = this.availableSources.find(s => s.id === sourceId);
1255 |             if (!source) return '';
1256 | 
1257 |             let url = source.urls[type];
1258 |             Object.entries(params).forEach(([key, value]) => {
1259 |                 url = url.replace(`{${key}}`, value);
1260 |             });
1261 |             return url;
1262 |         },
1263 | 
1264 |         updateVideoUrl() {
1265 |             const source = this.availableSources.find(s => s.id === this.selectedSource);
1266 |             if (!source) return '';
1267 | 
1268 |             const params = this.currentTab === 'shows'
1269 |                 ? { id: this.selectedContent.id, season: this.selectedSeason, episode: this.selectedEpisode }
1270 |                 : { id: this.selectedContent.id };
1271 | 
1272 |             this.currentVideoUrl = this.getSourceUrl(
1273 |                 this.selectedSource,
1274 |                 this.currentTab === 'shows' ? 'tv' : 'movie',
1275 |                 params
1276 |             );
1277 |         },
1278 | 
1279 |         async updateEpisodes() {
1280 |             const url = `https://api.themoviedb.org/3/tv/${this.selectedContent.id}/season/${this.selectedSeason}?api_key=${this.apiKey}`;
1281 |             try {
1282 |                 const response = await fetch(url);
1283 |                 const data = await response.json();
1284 |                 this.episodes = Array.from({length: data.episodes.length}, (_, i) => i + 1);
1285 |                 this.selectedEpisode = 1;
1286 |             } catch (error) {
1287 |                 console.error('Error fetching episodes:', error);
1288 |             }
1289 |         },
1290 | 
1291 |         loadEpisode() {
1292 |             this.updateVideoUrl();
1293 |         },
1294 | 
1295 |         async changePage(page) {
1296 |             this.currentPage = page;
1297 |             if (this.searchQuery) {
1298 |                 await this.searchContent();
1299 |             } else {
1300 |                 await this.fetchContent();
1301 |             }
1302 |         },
1303 | 
1304 |         toggleWatchLater(item) {
1305 |             const index = this.watchLaterItems.findIndex(i => i.id === item.id);
1306 |             if (index === -1) {
1307 |                 this.watchLaterItems.push({
1308 |                     ...item,
1309 |                     type: this.currentTab === 'movies' ? 'movie' : 'tv'
1310 |                 });
1311 |             } else {
1312 |                 this.watchLaterItems.splice(index, 1);
1313 |             }
1314 |             this.watchLaterCount = this.watchLaterItems.length;
1315 |             localStorage.setItem('watchLater', JSON.stringify(this.watchLaterItems));
1316 |         },
1317 | 
1318 |         isInWatchLater(item) {
1319 |             return this.watchLaterItems.some(i => i.id === item.id);
1320 |         },
1321 | 
1322 |         clearWatchLater() {
1323 |             this.showClearConfirm = true;
1324 |         },
1325 | 
1326 |         doClearWatchLater() {
1327 |             this.watchLaterItems = [];
1328 |             this.watchLaterCount = 0;
1329 |             localStorage.setItem('watchLater', JSON.stringify([]));
1330 |             this.showClearConfirm = false;
1331 |         },
1332 | 
1333 |         pickRandom() {
1334 |             const randomItem = this.filteredContent[Math.floor(Math.random() * this.filteredContent.length)];
1335 |             if (randomItem) {
1336 |                 window.location.href = `watch.html?id=${randomItem.id}&type=${this.currentTab === 'movies' ? 'movie' : 'tv'}`;
1337 |             }
1338 |         },
1339 | 
1340 |         changeLanguage(newLanguage) {
1341 |             this.language = newLanguage;
1342 |             localStorage.setItem('selectedLanguage', newLanguage);
1343 |             this.fetchContent();
1344 |         }
1345 |     }
1346 | }
1347 | </script>
1348 | <button 
1349 |     @click="window.scrollTo({top: 0})" 
1350 |     @scroll.window="showScrollTop = window.pageYOffset > 500"
1351 |     x-data="{ showScrollTop: false }"
1352 |     x-show="showScrollTop"
1353 |     x-transition:enter="transition ease-out duration-300"
1354 |     x-transition:enter-start="opacity-0 transform translate-y-10"
1355 |     x-transition:enter-end="opacity-100 transform translate-y-0"
1356 |     x-transition:leave="transition ease-in duration-300"
1357 |     x-transition:leave-start="opacity-100 transform translate-y-0"
1358 |     x-transition:leave-end="opacity-0 transform translate-y-10"
1359 |     class="fixed bottom-8 right-8 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-4 shadow-lg cursor-pointer transition-all duration-300 hover:scale-110 z-50">
1360 |     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1361 |         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
1362 |     </svg>
1363 | </button>
1364 | <div id="donationBanner" class="fixed bottom-4 left-4 right-4 md:left-1/2 md:-translate-x-1/2 max-w-2xl bg-gradient-to-r from-purple-600 to-violet-600 text-white p-4 rounded-xl shadow-2xl flex flex-col items-center justify-center space-y-2 z-50 backdrop-blur-sm bg-opacity-95 border border-white/10">
1365 |     <div class="text-center space-y-2">
1366 |         <p class="text-sm md:text-base leading-relaxed">
1367 |             Hello, Nova users! I'm a student developer who's passionate about making streaming accessible to everyone. I hate asking for money, but maintaining Nova takes a lot of time and effort. If you're enjoying the service, consider supporting me on Ko-Fi - it would mean the world to me and help keep me motivated to add more features and improvements! 💜
1368 |         </p>
1369 |         <div class="flex items-center justify-center space-x-3">
1370 |             <a href="https://ko-fi.com/ambrosial" target="_blank" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-purple-100 transition-all duration-300 flex items-center space-x-2">
1371 |                 <span>Support on Ko-Fi</span>
1372 |                 <span>☕</span>
1373 |             </a>
1374 |             <button id="closeBanner" class="text-white/80 hover:text-white transition-all px-3 py-2">
1375 |                 Maybe Later
1376 |             </button>
1377 |         </div>
1378 |     </div>
1379 | </div>
1380 | <script>
1381 |     // Check if user has disabled the donation banner
1382 |     const showDonationBanner = localStorage.getItem('showDonationBanner') !== 'false';
1383 |     const banner = document.getElementById('donationBanner');
1384 |     
1385 |     if (!showDonationBanner && banner) {
1386 |         banner.style.display = 'none';
1387 |     }
1388 |     
1389 |     const closeBannerButton = document.getElementById('closeBanner');
1390 |     if (closeBannerButton) {
1391 |         closeBannerButton.addEventListener('click', function() {
1392 |             if (banner) {
1393 |                 banner.style.display = 'none';
1394 |             }
1395 |         });
1396 |     }
1397 | </script>
1398 | <script>
1399 |     document.querySelector('.search-container input').addEventListener('mousemove', (e) => {
1400 |         const container = e.target.parentElement;
1401 |         const rect = container.getBoundingClientRect();
1402 |         const x = ((e.clientX - rect.left) * 100) / rect.width;
1403 |         const y = ((e.clientY - rect.top) * 100) / rect.height;
1404 |         container.style.setProperty('--mouse-x', x + '%');
1405 |         container.style.setProperty('--mouse-y', y + '%');
1406 |     });
1407 | </script>
1408 | <script>
1409 |     window.addEventListener('appearance-changed', () => {
1410 |         const particlesEl = document.getElementById('particles-js');
1411 |         if (localStorage.getItem('showParticles') === 'false') {
1412 |             particlesEl.style.display = 'none';
1413 |         } else {
1414 |             particlesEl.style.display = 'block';
1415 |         }
1416 |     });
1417 | </script>
1418 | </body>
1419 | </html>
1420 | 
1421 | <!--
1422 |  _   _                 
1423 | | \ | | _____   ____ _ 
1424 | |  \| |/ _ \ \ / / _` |
1425 | | |\  | (_) \ V / (_| |
1426 | |_| \_|\___/ \_/ \__,_|
1427 | -->
1428 | 


--------------------------------------------------------------------------------