Skip to content

Commit 7399dd6

Browse files
committed
Deploy changes to GitHub
1 parent 2d604da commit 7399dd6

4 files changed

Lines changed: 189 additions & 6 deletions

File tree

README.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# VORTEX Streaming
2+
3+
A modern, responsive web application for streaming movies and TV shows online. Built with vanilla JavaScript, HTML5, and CSS3, featuring a sleek dark theme and progressive web app capabilities.
4+
5+
![VORTEX Streaming](https://img.shields.io/badge/VORTEX-Streaming-blue?style=for-the-badge&logo=netflix&logoColor=white)
6+
![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow?style=flat-square&logo=javascript)
7+
![HTML5](https://img.shields.io/badge/HTML5-5.0-orange?style=flat-square&logo=html5)
8+
![CSS3](https://img.shields.io/badge/CSS3-3.0-blue?style=flat-square&logo=css3)
9+
![PWA](https://img.shields.io/badge/PWA-Ready-green?style=flat-square&logo=pwa)
10+
11+
## 🌟 Features
12+
13+
- **🎬 Movie & TV Show Streaming**: Browse and watch thousands of movies and TV shows
14+
- **🔥 Trending Content**: Discover the most popular and trending media
15+
- **📱 Progressive Web App**: Installable on mobile devices with offline capabilities
16+
- **🎯 Genre Filtering**: Filter content by genres (Action, Comedy, Drama, Thriller, etc.)
17+
- **🔍 Smart Search**: Search for movies and TV shows with real-time suggestions
18+
- **📋 My List**: Save your favorite content for later viewing
19+
- **🎨 Dark Theme**: Modern dark UI for comfortable viewing
20+
- **📱 Responsive Design**: Optimized for all screen sizes
21+
- **⚡ Fast Loading**: Optimized with minified assets and lazy loading
22+
- **🌐 Multi-language Support**: Google Translate integration
23+
24+
## 🚀 Live Demo
25+
26+
[View Live Demo](https://night677coder.github.io/vortex)
27+
28+
## 📋 Prerequisites
29+
30+
- Modern web browser with JavaScript enabled
31+
- Internet connection for streaming content
32+
- Node.js (for development and building)
33+
34+
## 🛠️ Installation
35+
36+
1. **Clone the repository**
37+
```bash
38+
git clone https://github.com/night677coder/vortex.git
39+
cd vortex
40+
```
41+
42+
2. **Install dependencies**
43+
```bash
44+
npm install
45+
```
46+
47+
3. **Build the project**
48+
```bash
49+
npm run build
50+
```
51+
52+
4. **Serve locally** (optional)
53+
```bash
54+
# Use any static server, for example:
55+
python -m http.server 8000
56+
# or
57+
npx serve .
58+
```
59+
60+
## 📖 Usage
61+
62+
### For Users
63+
1. Open the application in your web browser
64+
2. Browse trending content or use the search bar
65+
3. Click on any movie/TV show to view details
66+
4. Click "Watch Now" to start streaming
67+
5. Add content to your list using the "Add to List" button
68+
69+
### For Developers
70+
- **Development**: Edit source files (`script.js`, `styles.css`, `index.html`)
71+
- **Building**: Run `npm run build` to minify and optimize assets
72+
- **Deployment**: The `dist/` folder contains production-ready files
73+
74+
## 🏗️ Project Structure
75+
76+
```
77+
vortex/
78+
├── index.html # Main homepage
79+
├── movies.html # Movies page
80+
├── tvshows.html # TV Shows page
81+
├── trending.html # Trending content page
82+
├── mylist.html # User's saved list
83+
├── movie-detail.html # Movie/TV show detail page
84+
├── script.js # Main JavaScript file
85+
├── script.min.js # Minified JavaScript (generated)
86+
├── styles.css # Main CSS file
87+
├── styles.min.css # Minified CSS (generated)
88+
├── manifest.json # PWA manifest
89+
├── service-worker.js # Service worker for PWA
90+
├── build.mjs # Build script
91+
├── package.json # Project dependencies
92+
├── .htaccess # Apache configuration
93+
├── icon.svg # App icon
94+
└── README.md # This file
95+
```
96+
97+
## 🛠️ Technologies Used
98+
99+
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
100+
- **APIs**: TMDB API for movie/TV show data
101+
- **Build Tools**: Node.js, Terser (JS minification), CleanCSS (CSS minification)
102+
- **PWA**: Service Worker, Web App Manifest
103+
- **Icons**: Font Awesome, Google Fonts (Inter)
104+
- **Ads**: Google AdSense integration
105+
106+
## 🎨 Customization
107+
108+
### Changing Colors
109+
Edit the CSS custom properties in `styles.css`:
110+
111+
```css
112+
:root {
113+
--primary-color: #ff6b6b;
114+
--secondary-color: #4ecdc4;
115+
--background-color: #101010;
116+
--text-color: #ffffff;
117+
/* ... other variables */
118+
}
119+
```
120+
121+
### Adding New Features
122+
1. Modify `script.js` for new functionality
123+
2. Update `styles.css` for styling
124+
3. Test across different devices and browsers
125+
126+
## 📱 Progressive Web App (PWA)
127+
128+
The app includes PWA features:
129+
- **Installable**: Can be installed on mobile devices
130+
- **Offline Support**: Basic offline functionality
131+
- **Fast Loading**: Cached assets for quick loading
132+
- **Native Feel**: App-like experience on mobile
133+
134+
## 🔧 Build Process
135+
136+
The build process includes:
137+
- JavaScript minification and obfuscation
138+
- CSS minification
139+
- Asset optimization
140+
- Service worker generation
141+
142+
Run `npm run build` to generate production files.
143+
144+
## 🤝 Contributing
145+
146+
1. Fork the repository
147+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
148+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
149+
4. Push to the branch (`git push origin feature/amazing-feature`)
150+
5. Open a Pull Request
151+
152+
## 📄 License
153+
154+
This project is for educational purposes only. Please respect copyright laws and content ownership.
155+
156+
## ⚠️ Disclaimer
157+
158+
This application is a demonstration of web development skills and uses publicly available APIs. It does not host or distribute copyrighted content. Users are responsible for complying with local laws and regulations regarding media consumption.
159+
160+
## 📞 Support
161+
162+
For questions or support:
163+
- Open an issue on GitHub
164+
- Check the documentation in this README
165+
166+
## 🙏 Acknowledgments
167+
168+
- [TMDB](https://www.themoviedb.org/) for providing movie and TV show data
169+
- [Font Awesome](https://fontawesome.com/) for icons
170+
- [Google Fonts](https://fonts.google.com/) for typography
171+
- [Unsplash](https://unsplash.com/) and [Picsum](https://picsum.photos/) for placeholder images
172+
173+
---
174+
175+
**Made with ❤️ for streaming enthusiasts**

build.mjs

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ import JavaScriptObfuscator from 'javascript-obfuscator';
55
import CleanCSS from 'clean-css';
66

77
const root = process.cwd();
8+
const distDir = path.join(root, 'dist');
89

910
const inJs = path.join(root, 'script.js');
1011
const inCss = path.join(root, 'styles.css');
11-
const outJs = path.join(root, 'script.min.js');
12-
const outCss = path.join(root, 'styles.min.css');
12+
const outJs = path.join(distDir, 'script.min.js');
13+
const outCss = path.join(distDir, 'styles.min.css');
14+
15+
// Ensure dist directory exists
16+
await fs.mkdir(distDir, { recursive: true });
1317

1418
async function buildJs() {
1519
const js = await fs.readFile(inJs, 'utf8');

movie-detail.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,13 +237,13 @@ <h4>Countries</h4>
237237
}
238238

239239
// Server 2: 2embed.cc (tmdbId)
240-
// Docs show: movie => /embed/{tmdbId}, tv => /embedtvfull/{tmdbId}
240+
// Docs show: movie => /embed/{tmdbId}, tv => /embedtv/{tmdbId}
241241
if (server === 2) {
242242
if (!item.tmdbId) return buildEmbedUrl(1, item, season, episode);
243243

244244
return item.type === 'movie'
245245
? `https://www.2embed.cc/embed/${item.tmdbId}`
246-
: `https://www.2embed.cc/embedtvfull/${item.tmdbId}?s=${season}&e=${episode}`;
246+
: `https://www.2embed.cc/embedtv/${item.tmdbId}?s=${season}&e=${episode}`;
247247
}
248248

249249
// Server 3: vidsrc.cc (supports imdbId or tmdbId)
@@ -264,7 +264,11 @@ <h4>Countries</h4>
264264
const iframe = document.getElementById('video-player');
265265
if (!iframe) return;
266266
if (!item?.imdbId && !item?.tmdbId) return;
267-
iframe.src = buildEmbedUrl(currentServer, item, currentSeason, currentEpisode);
267+
// Force reload by clearing src first (busts iframe cache)
268+
iframe.src = '';
269+
setTimeout(() => {
270+
iframe.src = buildEmbedUrl(currentServer, item, currentSeason, currentEpisode);
271+
}, 50);
268272
}
269273

270274
// Load movie data when page loads

script.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)