Spaces:

Sfwrtuyrdfg
/

test

Running

App Files Files Community

Sfwrtuyrdfg commited on Sep 15, 2025

Commit

1bfe13b

verified ·

1 Parent(s): 982157a

Create a fully responsive, modern movie streaming website using HTML, CSS (or TailwindCSS), and JavaScript (or React/Vue).

Browse files

The website should fetch and stream movies using vidsrc.me and the vidsrc.me API.

🔑 Requirements:
1. Design & Theme
• Dark background with purple (#8a2be2) and cyan (#00ffff) neon glow effects.
• Modern, clean UI with smooth hover animations and glassmorphism cards.
• Use Google Fonts (e.g., Poppins or Inter) for modern typography.
• Sticky neon glowing header with site logo + navigation.
2. Pages/Sections
• Home Page: Trending movies, featured carousel, search bar.
• Movie Detail Page: Fetch details from vidsrc.me/api/ → Show poster, title, rating, description, and watch button that embeds player.
• Video Player Page: Use the vidsrc.me/embed/ link to stream the movie.
• Optional: Categories (Popular, Top Rated, Upcoming).
3. API Integration
• Use https://vidsrc.me/api/ to fetch movie metadata (title, year, poster, etc.).
• Implement search function that queries API and returns results in neon-styled grid.
• On movie click → go to detail page with player embed.
4. UI/UX Features
• Search bar with neon glow focus.
• Movie cards with hover effect (scale + glow border).
• Responsive grid (3-5 columns desktop, 2 tablet, 1 mobile).
• Loading animations (skeleton screens).
5. Technical
• Framework option: Vanilla JS / React / Vue (you decide).
• Ensure it’s mobile-friendly and looks great on all screens.
• Keep code modular and easy to expand.

🎨 Example Styling Notes
• Background: #0a0a0f (deep black).
• Neon Glow Purple: #8a2be2 (for buttons, active states).
• Neon Glow Cyan: #00ffff (for highlights, borders).
• Use CSS shadows like:

box-shadow: 0 0 10px #8a2be2, 0 0 20px #00ffff;

• Buttons: Glassmorphism with glowing borders - Initial Deployment

Files changed (5) hide show

README.md +7 -5
index.html +319 -18
movie.html +200 -0
player.html +148 -0
prompts.txt +39 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 📈
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,320 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeonFlix - Modern Movie Streaming</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-dark: #0a0a0f;
+            --neon-purple: #8a2be2;
+            --neon-cyan: #00ffff;
+            --text-light: #ffffff;
+            --text-muted: #a0a0a0;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+            overflow-x: hidden;
+        }
+        .neon-glow-purple {
+            box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
+        }
+        .neon-glow-cyan {
+            box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
+        }
+        .neon-border-purple {
+            border: 1px solid var(--neon-purple);
+            box-shadow: 0 0 5px var(--neon-purple), inset 0 0 5px var(--neon-purple);
+        }
+        .neon-border-cyan {
+            border: 1px solid var(--neon-cyan);
+            box-shadow: 0 0 5px var(--neon-cyan), inset 0 0 5px var(--neon-cyan);
+        }
+        .glass-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .search-input {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(138, 43, 226, 0.3);
+            transition: all 0.3s ease;
+        }
+        .search-input:focus {
+            border-color: var(--neon-purple);
+            box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
+        }
+        .movie-card {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .movie-card:hover {
+            transform: translateY(-10px) scale(1.03);
+            border-color: var(--neon-cyan);
+            box-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-cyan);
+        }
+        .skeleton {
+            background: linear-gradient(90deg, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+        }
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            background: rgba(10, 10, 15, 0.8);
+        }
+        .carousel-item {
+            transition: opacity 0.5s ease-in-out;
+        }
+        .player-container {
+            position: relative;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
+        }
+        .player-iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Sticky Header -->
+    <header class="sticky-header border-b border-gray-800 neon-glow-purple">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="film" class="text-purple-500"></i>
+                <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500">NeonFlix</span>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="text-white hover:text-purple-400 transition-colors">Home</a>
+                <a href="#" class="text-white hover:text-purple-400 transition-colors">Movies</a>
+                <a href="#" class="text-white hover:text-purple-400 transition-colors">TV Shows</a>
+                <a href="#" class="text-white hover:text-purple-400 transition-colors">New</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <input type="text" placeholder="Search movies..." class="search-input py-2 px-4 rounded-full text-white placeholder-gray-400 focus:outline-none">
+                    <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
+                </div>
+                <button class="glass-card py-2 px-4 rounded-full neon-border-purple text-white hover:neon-glow-purple transition-all">
+                    <i data-feather="user" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Carousel -->
+    <section class="relative h-96 md:h-[500px] overflow-hidden">
+        <div class="carousel-container h-full">
+            <div class="carousel-item absolute inset-0 opacity-100">
+                <div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-transparent z-10"></div>
+                <img src="http://static.photos/movie/1200x630/1" alt="Featured Movie" class="w-full h-full object-cover">
+                <div class="absolute bottom-0 left-0 z-20 p-8 max-w-2xl">
+                    <h2 class="text-3xl md:text-5xl font-bold mb-4">The Neon Chronicles</h2>
+                    <p class="text-gray-300 mb-6">In a dystopian future where dreams are currency, one rebel fights to free humanity from digital slavery.</p>
+                    <div class="flex space-x-4">
+                        <button class="glass-card py-3 px-6 rounded-full neon-border-cyan text-white hover:neon-glow-cyan transition-all flex items-center">
+                            <i data-feather="play" class="mr-2"></i> Watch Now
+                        </button>
+                        <button class="glass-card py-3 px-6 rounded-full border border-gray-600 text-white hover:bg-gray-800 transition-all">
+                            More Info
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Trending Movies -->
+    <section class="py-12 px-4 container mx-auto">
+        <h2 class="text-2xl md:text-3xl font-bold mb-8 flex items-center">
+            <i data-feather="trending-up" class="mr-3 text-purple-500"></i>
+            Trending Now
+        </h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6" id="trending-movies">
+            <!-- Movie cards will be loaded here -->
+            <div class="skeleton h-80 rounded-xl"></div>
+            <div class="skeleton h-80 rounded-xl"></div>
+            <div class="skeleton h-80 rounded-xl"></div>
+            <div class="skeleton h-80 rounded-xl"></div>
+            <div class="skeleton h-80 rounded-xl"></div>
+        </div>
+    </section>
+    <!-- Categories -->
+    <section class="py-12 px-4 container mx-auto">
+        <h2 class="text-2xl md:text-3xl font-bold mb-8 flex items-center">
+            <i data-feather="grid" class="mr-3 text-cyan-500"></i>
+            Browse Categories
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="glass-card p-6 text-center rounded-xl hover:neon-glow-purple transition-all cursor-pointer">
+                <i data-feather="star" class="w-10 h-10 mx-auto text-yellow-400 mb-3"></i>
+                <h3 class="font-semibold">Top Rated</h3>
+            </div>
+            <div class="glass-card p-6 text-center rounded-xl hover:neon-glow-purple transition-all cursor-pointer">
+                <i data-feather="calendar" class="w-10 h-10 mx-auto text-green-400 mb-3"></i>
+                <h3 class="font-semibold">New Releases</h3>
+            </div>
+            <div class="glass-card p-6 text-center rounded-xl hover:neon-glow-purple transition-all cursor-pointer">
+                <i data-feather="heart" class="w-10 h-10 mx-auto text-red-400 mb-3"></i>
+                <h3 class="font-semibold">Popular</h3>
+            </div>
+            <div class="glass-card p-6 text-center rounded-xl hover:neon-glow-purple transition-all cursor-pointer">
+                <i data-feather="clock" class="w-10 h-10 mx-auto text-blue-400 mb-3"></i>
+                <h3 class="font-semibold">Coming Soon</h3>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="glass-card mt-12 py-8 px-4 border-t border-gray-800">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <i data-feather="film" class="text-purple-500"></i>
+                        <span class="text-xl font-bold">NeonFlix</span>
+                    </div>
+                    <p class="text-gray-400">The ultimate destination for premium movie streaming with a neon twist.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Navigation</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">Home</a></li>
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">Movies</a></li>
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">TV Shows</a></li>
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">My List</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Legal</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">Terms of Service</a></li>
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">Privacy Policy</a></li>
+                        <li><a href="#" class="hover:text-purple-400 transition-colors">Cookie Policy</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
+                            <i data-feather="youtube"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-500">
+                <p>© 2023 NeonFlix. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize libraries
+        AOS.init();
+        feather.replace();
+        // API integration for fetching movies
+        document.addEventListener('DOMContentLoaded', function() {
+            // Simulate API call to vidsrc.me (in a real implementation, this would be actual API calls)
+            setTimeout(() => {
+                const trendingContainer = document.getElementById('trending-movies');
+                trendingContainer.innerHTML = '';
+                // Sample movie data (would come from API in real implementation)
+                const movies = [
+                    { id: 1, title: "Cyber Revolution", year: 2023, rating: 8.2, poster: "http://static.photos/technology/300x450/10" },
+                    { id: 2, title: "Neon Dreams", year: 2022, rating: 7.8, poster: "http://static.photos/abstract/300x450/15" },
+                    { id: 3, title: "Digital Ghost", year: 2023, rating: 8.5, poster: "http://static.photos/scifi/300x450/20" },
+                    { id: 4, title: "Electric Shadows", year: 2022, rating: 7.9, poster: "http://static.photos/futuristic/300x450/25" },
+                    { id: 5, title: "Synthwave Runner", year: 2023, rating: 8.7, poster: "http://static.photos/cyberpunk/300x450/30" }
+                ];
+                movies.forEach(movie => {
+                    const movieCard = document.createElement('div');
+                    movieCard.className = 'movie-card glass-card rounded-xl overflow-hidden cursor-pointer';
+                    movieCard.innerHTML = `
+                        <div class="relative">
+                            <img src="${movie.poster}" alt="${movie.title}" class="w-full h-60 object-cover">
+                            <div class="absolute top-2 right-2 glass-card px-2 py-1 rounded flex items-center">
+                                <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
+                                <span class="text-sm font-semibold">${movie.rating}</span>
+                            </div>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-semibold text-lg mb-1">${movie.title}</h3>
+                            <p class="text-gray-400 text-sm">${movie.year}</p>
+                        </div>
+                    `;
+                    movieCard.addEventListener('click', () => {
+                        window.location.href = `movie.html?id=${movie.id}`;
+                    });
+                    trendingContainer.appendChild(movieCard);
+                });
+                feather.replace();
+            }, 1500); // Simulate loading delay
+        });
+    </script>
+</body>
 </html>

movie.html ADDED Viewed

	@@ -0,0 +1,200 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movie Details - NeonFlix</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-dark: #0a0a0f;
+            --neon-purple: #8a2be2;
+            --neon-cyan: #00ffff;
+            --text-light: #ffffff;
+            --text-muted: #a0a0a0;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+        }
+        .neon-glow-purple {
+            box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
+        }
+        .neon-glow-cyan {
+            box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
+        }
+        .neon-border-purple {
+            border: 1px solid var(--neon-purple);
+            box-shadow: 0 0 5px var(--neon-purple), inset 0 0 5px var(--neon-purple);
+        }
+        .neon-border-cyan {
+            border: 1px solid var(--neon-cyan);
+            box-shadow: 0 0 5px var(--neon-cyan), inset 0 0 5px var(--neon-cyan);
+        }
+        .glass-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            background: rgba(10, 10, 15, 0.8);
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Sticky Header -->
+    <header class="sticky-header border-b border-gray-800 neon-glow-purple">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <a href="index.html">
+                    <i data-feather="film" class="text-purple-500"></i>
+                </a>
+                <a href="index.html" class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500">NeonFlix</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="index.html" class="glass-card py-2 px-4 rounded-full neon-border-purple text-white hover:neon-glow-purple transition-all flex items-center">
+                    <i data-feather="arrow-left" class="mr-2"></i> Back to Home
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- Movie Details -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Poster -->
+            <div class="lg:w-1/3" data-aos="fade-right">
+                <img src="http://static.photos/cyberpunk/400x600/50" alt="Movie Poster" class="w-full rounded-xl neon-glow-cyan">
+            </div>
+            <!-- Details -->
+            <div class="lg:w-2/3" data-aos="fade-left">
+                <h1 class="text-3xl md:text-4xl font-bold mb-2">Cyber Revolution</h1>
+                <div class="flex items-center space-x-4 mb-4">
+                    <div class="flex items-center glass-card px-3 py-1 rounded-full">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
+                        <span>8.2/10</span>
+                    </div>
+                    <span class="text-gray-400">2023</span>
+                    <span class="text-gray-400">2h 15m</span>
+                    <span class="text-gray-400">PG-13</span>
+                </div>
+                <div class="flex flex-wrap gap-2 mb-6">
+                    <span class="glass-card px-3 py-1 rounded-full text-sm">Sci-Fi</span>
+                    <span class="glass-card px-3 py-1 rounded-full text-sm">Action</span>
+                    <span class="glass-card px-3 py-1 rounded-full text-sm">Thriller</span>
+                    <span class="glass-card px-3 py-1 rounded-full text-sm">Cyberpunk</span>
+                </div>
+                <p class="text-gray-300 mb-8 leading-relaxed">
+                    In a dystopian future where corporations rule the world and human emotions are commodified,
+                    a rogue hacker discovers a revolutionary AI that could free humanity or destroy it completely.
+                    With agents of the mega-corporation hunting her down, she must navigate the neon-lit underworld
+                    of the digital metropolis to unlock the AI's true potential before it falls into the wrong hands.
+                </p>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                    <div>
+                        <h3 class="font-semibold text-purple-400 mb-2">Director</h3>
+                        <p>Alexandra Chen</p>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-purple-400 mb-2">Cast</h3>
+                        <p>Maya Rodriguez, Kenji Tanaka, Sarah Johnson, David Miller</p>
+                    </div>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="player.html?id=123" class="glass-card py-3 px-8 rounded-full neon-border-cyan text-white hover:neon-glow-cyan transition-all flex items-center">
+                        <i data-feather="play" class="mr-2"></i> Watch Now
+                    </a>
+                    <button class="glass-card py-3 px-6 rounded-full border border-gray-600 text-white hover:bg-gray-800 transition-all flex items-center">
+                        <i data-feather="plus" class="mr-2"></i> Add to List
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Similar Movies -->
+        <section class="mt-16">
+            <h2 class="text-2xl font-bold mb-6">Similar Movies</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <div class="glass-card rounded-xl overflow-hidden cursor-pointer hover:neon-glow-purple transition-all">
+                    <img src="http://static.photos/scifi/300x450/21" alt="Similar Movie" class="w-full h-40 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm mb-1">Neon Dreams</h3>
+                        <p class="text-gray-400 text-xs">2022</p>
+                    </div>
+                </div>
+                <div class="glass-card rounded-xl overflow-hidden cursor-pointer hover:neon-glow-purple transition-all">
+                    <img src="http://static.photos/futuristic/300x450/26" alt="Similar Movie" class="w-full h-40 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm mb-1">Digital Ghost</h3>
+                        <p class="text-gray-400 text-xs">2023</p>
+                    </div>
+                </div>
+                <div class="glass-card rounded-xl overflow-hidden cursor-pointer hover:neon-glow-purple transition-all">
+                    <img src="http://static.photos/technology/300x450/11" alt="Similar Movie" class="w-full h-40 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm mb-1">Electric Shadows</h3>
+                        <p class="text-gray-400 text-xs">2022</p>
+                    </div>
+                </div>
+                <div class="glass-card rounded-xl overflow-hidden cursor-pointer hover:neon-glow-purple transition-all">
+                    <img src="http://static.photos/abstract/300x450/16" alt="Similar Movie" class="w-full h-40 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm mb-1">Synthwave Runner</h3>
+                        <p class="text-gray-400 text-xs">2023</p>
+                    </div>
+                </div>
+                <div class="glass-card rounded-xl overflow-hidden cursor-pointer hover:neon-glow-purple transition-all">
+                    <img src="http://static.photos/cyberpunk/300x450/31" alt="Similar Movie" class="w-full h-40 object-cover">
+                    <div class="p-3">
+                        <h3 class="font-semibold text-sm mb-1">Data Heist</h3>
+                        <p class="text-gray-400 text-xs">2023</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script>
+        AOS.init();
+        feather.replace();
+        // Get movie ID from URL and fetch details (simulated)
+        document.addEventListener('DOMContentLoaded', function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const movieId = urlParams.get('id');
+            // In a real implementation, this would fetch from vidsrc.me API
+            console.log("Loading movie with ID:", movieId);
+        });
+    </script>
+</body>
+</html>

player.html ADDED Viewed

	@@ -0,0 +1,148 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Watch Movie - NeonFlix</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-dark: #0a0a0f;
+            --neon-purple: #8a2be2;
+            --neon-cyan: #00ffff;
+            --text-light: #ffffff;
+            --text-muted: #a0a0a0;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+        }
+        .neon-glow-purple {
+            box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
+        }
+        .glass-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .player-container {
+            position: relative;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
+        }
+        .player-iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Sticky Header -->
+    <header class="sticky top-0 z-50 backdrop-blur-md bg-gray-900/80 border-b border-gray-800 neon-glow-purple">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <a href="index.html">
+                    <i data-feather="film" class="text-purple-500"></i>
+                </a>
+                <a href="index.html" class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500">NeonFlix</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="movie.html?id=123" class="glass-card py-2 px-4 rounded-full neon-border-purple text-white hover:neon-glow-purple transition-all flex items-center">
+                    <i data-feather="arrow-left" class="mr-2"></i> Back to Details
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- Video Player -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="mb-6">
+            <h1 class="text-2xl md:text-3xl font-bold mb-2">Cyber Revolution</h1>
+            <p class="text-gray-400">You are watching: Chapter 1 - The Awakening</p>
+        </div>
+        <div class="player-container glass-card rounded-xl overflow-hidden mb-6">
+            <iframe class="player-iframe" src="https://vidsrc.me/embed/123" allowfullscreen></iframe>
+        </div>
+        <!-- Player Controls -->
+        <div class="glass-card p-4 mb-8">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="font-semibold">Chapters</h2>
+                <div class="flex items-center text-sm text-gray-400">
+                    <i data-feather="clock" class="w-4 h-4 mr-1"></i>
+                    <span>2:15:30 remaining</span>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+                <button class="py-2 px-3 rounded glass-card text-sm hover:bg-purple-900/30 transition-colors">Chapter 1</button>
+                <button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 2</button>
+                <button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 3</button>
+                <button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 4</button>
+                <button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 5</button>
+            </div>
+        </div>
+        <!-- Movie Info -->
+        <div class="glass-card p-6">
+            <h2 class="text-xl font-bold mb-4">About This Movie</h2>
+            <p class="text-gray-300 mb-4">
+                In a dystopian future where corporations rule the world and human emotions are commodified,
+                a rogue hacker discovers a revolutionary AI that could free humanity or destroy it completely.
+            </p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div>
+                    <h3 class="font-semibold text-purple-400 mb-1">Director</h3>
+                    <p class="text-sm">Alexandra Chen</p>
+                </div>
+                <div>
+                    <h3 class="font-semibold text-purple-400 mb-1">Release Year</h3>
+                    <p class="text-sm">2023</p>
+                </div>
+                <div>
+                    <h3 class="font-semibold text-purple-400 mb-1">Duration</h3>
+                    <p class="text-sm">2h 15m</p>
+                </div>
+                <div>
+                    <h3 class="font-semibold text-purple-400 mb-1">Rating</h3>
+                    <p class="text-sm">PG-13</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+        // Get movie ID from URL
+        document.addEventListener('DOMContentLoaded', function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const movieId = urlParams.get('id');
+            // In a real implementation, this would set the iframe src to vidsrc.me/embed/{movieId}
+            console.log("Playing movie with ID:", movieId);
+        });
+    </script>
+</body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,39 @@

+Create a fully responsive, modern movie streaming website using HTML, CSS (or TailwindCSS), and JavaScript (or React/Vue).
+The website should fetch and stream movies using vidsrc.me and the vidsrc.me API.
+🔑 Requirements:
+	1.	Design & Theme
+	•	Dark background with purple (#8a2be2) and cyan (#00ffff) neon glow effects.
+	•	Modern, clean UI with smooth hover animations and glassmorphism cards.
+	•	Use Google Fonts (e.g., Poppins or Inter) for modern typography.
+	•	Sticky neon glowing header with site logo + navigation.
+	2.	Pages/Sections
+	•	Home Page: Trending movies, featured carousel, search bar.
+	•	Movie Detail Page: Fetch details from vidsrc.me/api/ → Show poster, title, rating, description, and watch button that embeds player.
+	•	Video Player Page: Use the vidsrc.me/embed/ link to stream the movie.
+	•	Optional: Categories (Popular, Top Rated, Upcoming).
+	3.	API Integration
+	•	Use https://vidsrc.me/api/ to fetch movie metadata (title, year, poster, etc.).
+	•	Implement search function that queries API and returns results in neon-styled grid.
+	•	On movie click → go to detail page with player embed.
+	4.	UI/UX Features
+	•	Search bar with neon glow focus.
+	•	Movie cards with hover effect (scale + glow border).
+	•	Responsive grid (3-5 columns desktop, 2 tablet, 1 mobile).
+	•	Loading animations (skeleton screens).
+	5.	Technical
+	•	Framework option: Vanilla JS / React / Vue (you decide).
+	•	Ensure it’s mobile-friendly and looks great on all screens.
+	•	Keep code modular and easy to expand.
+🎨 Example Styling Notes
+	•	Background: #0a0a0f (deep black).
+	•	Neon Glow Purple: #8a2be2 (for buttons, active states).
+	•	Neon Glow Cyan: #00ffff (for highlights, borders).
+	•	Use CSS shadows like:
+box-shadow: 0 0 10px #8a2be2, 0 0 20px #00ffff;
+	•	Buttons: Glassmorphism with glowing borders