make full Clone Netflx Website With the Name ZeeFlix

also add Theme toogle button
fully responsive streams link and add servers
add upcomping movies header animations
8f2b224acadeeebc64ef32b4c04919de
add tmdb api key for all movies poster ,art,details
make search box full responsive

README.md

@@ -1,10 +1,13 @@
 ---
-title: Zeeflix
-emoji: 🏆
-colorFrom: indigo
+title: ZeeFlix 🎬🍿
+colorFrom: yellow
 colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/hero.js

@@ -0,0 +1,129 @@
+class HeroSection extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .hero {
+          height: 80vh;
+          background-size: cover;
+          background-position: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 0 4%;
+          position: relative;
+          color: white;
+        }
+        .hero::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
+          z-index: 1;
+        }
+        .hero-content {
+          max-width: 600px;
+          z-index: 2;
+        }
+        .hero-title {
+          font-size: 3rem;
+          margin-bottom: 1rem;
+          animation: fadeInUp 1s ease;
+        }
+        .hero-desc {
+          font-size: 1.2rem;
+          margin-bottom: 1.5rem;
+          animation: fadeInUp 1s ease 0.3s forwards;
+          opacity: 0;
+        }
+        .hero-buttons {
+          display: flex;
+          gap: 1rem;
+          animation: fadeInUp 1s ease 0.6s forwards;
+          opacity: 0;
+        }
+        .play-btn, .info-btn {
+          padding: 0.8rem 1.8rem;
+          border: none;
+          border-radius: 4px;
+          font-size: 1rem;
+          font-weight: bold;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: all 0.3s;
+        }
+        .play-btn {
+          background-color: white;
+          color: black;
+        }
+        .play-btn:hover {
+          background-color: rgba(255,255,255,0.8);
+        }
+        .info-btn {
+          background-color: rgba(109, 109, 110, 0.7);
+          color: white;
+        }
+        .info-btn:hover {
+          background-color: rgba(109, 109, 110, 0.4);
+        }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @media (max-width: 768px) {
+          .hero {
+            height: 60vh;
+          }
+          .hero-title {
+            font-size: 2rem;
+          }
+          .hero-desc {
+            font-size: 1rem;
+          }
+          .hero-buttons {
+            flex-direction: column;
+          }
+        }
+      </style>
+      <div class="hero">
+        <div class="hero-content">
+          <h1 class="hero-title">Unlimited movies, TV shows, and more.</h1>
+          <p class="hero-desc">Watch anywhere. Cancel anytime.</p>
+          <div class="hero-buttons">
+            <button class="play-btn">▶ Play</button>
+            <button class="info-btn">ℹ More Info</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // Random hero image from TMDB API
+    this.fetchHeroImage();
+  }
+
+  async fetchHeroImage() {
+    try {
+      const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=8f2b224acadeeebc64ef32b4c04919de&language=en-US&page=1`);
+      const data = await response.json();
+      const randomMovie = data.results[Math.floor(Math.random() * data.results.length)];
+      this.shadowRoot.querySelector('.hero').style.backgroundImage = `url(https://image.tmdb.org/t/p/original${randomMovie.backdrop_path})`;
+      this.shadowRoot.querySelector('.hero-title').textContent = randomMovie.title;
+      this.shadowRoot.querySelector('.hero-desc').textContent = randomMovie.overview;
+    } catch (error) {
+      console.error('Error fetching hero image:', error);
+      this.shadowRoot.querySelector('.hero').style.backgroundImage = `url(http://static.photos/movie/1200x630/1)`;
+    }
+  }
+}
+customElements.define('hero-section', HeroSection);

components/movie-row.js

@@ -0,0 +1,114 @@
+class MovieRow extends HTMLElement {
+  constructor() {
+    super();
+    this.movies = [];
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.fetchMovies();
+  }
+
+  static get observedAttributes() {
+    return ['title', 'category'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'title') {
+      this.shadowRoot.querySelector('h2').textContent = newValue;
+    }
+    if (name === 'category') {
+      this.fetchMovies();
+    }
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        .row {
+          margin: 2rem 4%;
+        }
+        .row-title {
+          color: white;
+          font-size: 1.4rem;
+          margin-bottom: 1rem;
+        }
+        .row-container {
+          display: flex;
+          overflow-x: auto;
+          gap: 0.5rem;
+          padding: 1rem 0;
+          scroll-behavior: smooth;
+        }
+        .row-container::-webkit-scrollbar {
+          display: none;
+        }
+        .movie-card {
+          min-width: 200px;
+          transition: transform 0.3s;
+          position: relative;
+        }
+        .movie-card:hover {
+          transform: scale(1.05);
+          z-index: 10;
+        }
+        .movie-poster {
+          width: 100%;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .row {
+            margin: 1rem 2%;
+          }
+          .movie-card {
+            min-width: 150px;
+          }
+        }
+      </style>
+      <div class="row">
+        <h2 class="row-title">${this.getAttribute('title') || 'Popular'}</h2>
+        <div class="row-container" id="row-container"></div>
+      </div>
+    `;
+  }
+
+  async fetchMovies() {
+    const category = this.getAttribute('category') || 'popular';
+    try {
+      const response = await fetch(`https://api.themoviedb.org/3/movie/${category}?api_key=8f2b224acadeeebc64ef32b4c04919de&language=en-US&page=1`);
+      const data = await response.json();
+      this.movies = data.results;
+      this.renderMovies();
+    } catch (error) {
+      console.error('Error fetching movies:', error);
+      // Fallback to placeholder images
+      this.movies = Array(10).fill().map((_, i) => ({
+        poster_path: `/placeholder/${i+1}`,
+        title: `Movie ${i+1}`
+      }));
+      this.renderMovies();
+    }
+  }
+
+  renderMovies() {
+    const container = this.shadowRoot.getElementById('row-container');
+    container.innerHTML = '';
+    
+    this.movies.forEach(movie => {
+      const card = document.createElement('div');
+      card.className = 'movie-card';
+      card.innerHTML = `
+        <img 
+          class="movie-poster" 
+          src="${movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : 'http://static.photos/movie/200x200'}" 
+          alt="${movie.title}"
+          loading="lazy"
+        >
+      `;
+      container.appendChild(card);
+    });
+  }
+}
+customElements.define('movie-row', MovieRow);

components/navbar.js

@@ -0,0 +1,113 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem 4%;
+          background: linear-gradient(to bottom, rgba(0,0,0,0.7) 10%, transparent);
+          position: fixed;
+          width: 92%;
+          z-index: 1000;
+          transition: all 0.5s ease;
+        }
+        nav.scrolled {
+          background-color: #141414;
+        }
+        .logo {
+          color: #e50914;
+          font-size: 2rem;
+          font-weight: bold;
+          cursor: pointer;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .nav-links a {
+          color: white;
+          text-decoration: none;
+          font-size: 0.9rem;
+          transition: color 0.3s;
+        }
+        .nav-links a:hover {
+          color: #e50914;
+        }
+        .search-container {
+          display: flex;
+          align-items: center;
+        }
+        .search-input {
+          padding: 0.5rem;
+          border: none;
+          border-radius: 4px;
+          background: rgba(0,0,0,0.5);
+          color: white;
+          width: 0;
+          opacity: 0;
+          transition: all 0.3s ease;
+        }
+        .search-input.active {
+          width: 200px;
+          opacity: 1;
+          padding: 0.5rem 1rem;
+          margin-right: 1rem;
+        }
+        .search-icon {
+          color: white;
+          cursor: pointer;
+          font-size: 1.2rem;
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem 2%;
+            width: 96%;
+          }
+          .nav-links {
+            display: none;
+          }
+          .search-input.active {
+            width: 150px;
+          }
+        }
+      </style>
+      <nav id="main-nav">
+        <a href="/" class="logo">ZeeFlix</a>
+        <div class="nav-links">
+          <a href="/">Home</a>
+          <a href="#">TV Shows</a>
+          <a href="#">Movies</a>
+          <a href="#">New & Popular</a>
+          <a href="#">My List</a>
+        </div>
+        <div class="search-container">
+          <input type="text" class="search-input" placeholder="Titles, people, genres">
+          <i class="search-icon">🔍</i>
+          <theme-toggle></theme-toggle>
+        </div>
+      </nav>
+    `;
+
+    const nav = this.shadowRoot.getElementById('main-nav');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 100) {
+        nav.classList.add('scrolled');
+      } else {
+        nav.classList.remove('scrolled');
+      }
+    });
+
+    const searchIcon = this.shadowRoot.querySelector('.search-icon');
+    const searchInput = this.shadowRoot.querySelector('.search-input');
+    searchIcon.addEventListener('click', () => {
+      searchInput.classList.toggle('active');
+      if (searchInput.classList.contains('active')) {
+        searchInput.focus();
+      }
+    });
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/theme-toggle.js

@@ -0,0 +1,79 @@
+class ThemeToggle extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .toggle-container {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        .toggle-switch {
+          position: relative;
+          display: inline-block;
+          width: 60px;
+          height: 30px;
+        }
+        .toggle-switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(to right, #141414, #333);
+          transition: .4s;
+          border-radius: 34px;
+        }
+        .slider:before {
+          position: absolute;
+          content: "";
+          height: 22px;
+          width: 22px;
+          left: 4px;
+          bottom: 4px;
+          background-color: white;
+          transition: .4s;
+          border-radius: 50%;
+        }
+        input:checked + .slider {
+          background: linear-gradient(to right, #e50914, #b20710);
+        }
+        input:checked + .slider:before {
+          transform: translateX(30px);
+        }
+        .icon {
+          font-size: 1.2rem;
+          color: #e50914;
+        }
+        .dark .icon {
+          color: #fff;
+        }
+      </style>
+      <div class="toggle-container">
+        <label class="toggle-switch">
+          <input type="checkbox" id="theme-toggle">
+          <span class="slider"></span>
+        </label>
+        <span class="icon">🎬</span>
+      </div>
+    `;
+
+    const toggle = this.shadowRoot.getElementById('theme-toggle');
+    toggle.addEventListener('change', () => {
+      document.body.classList.toggle('dark');
+      localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+    });
+
+    if (localStorage.getItem('theme') === 'dark') {
+      document.body.classList.add('dark');
+      toggle.checked = true;
+    }
+  }
+}
+customElements.define('theme-toggle', ThemeToggle);

index.html

@@ -1,19 +1,107 @@
-<!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>ZeeFlix - Watch TV Shows Online, Watch Movies Online</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        background-color: #141414;
+        color: white;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      body.dark {
+        background-color: #141414;
+      }
+      body.light {
+        background-color: #f3f3f3;
+        color: #333;
+      }
+      main {
+        padding-top: 70px;
+      }
+      footer {
+        background-color: #141414;
+        color: #757575;
+        padding: 2rem 4%;
+        text-align: center;
+        margin-top: 2rem;
+      }
+      .social-icons {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin: 1rem 0;
+      }
+      .social-icons a {
+        color: white;
+        font-size: 1.5rem;
+      }
+      .footer-links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+        margin: 1rem 0;
+      }
+      .footer-links a {
+        color: #757575;
+        text-decoration: none;
+        font-size: 0.8rem;
+      }
+      .footer-links a:hover {
+        text-decoration: underline;
+      }
+      .copyright {
+        font-size: 0.8rem;
+        margin-top: 1rem;
+      }
+    </style>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <main>
+        <hero-section></hero-section>
+        <movie-row title="Popular on ZeeFlix" category="popular"></movie-row>
+        <movie-row title="Trending Now" category="now_playing"></movie-row>
+        <movie-row title="Top Rated" category="top_rated"></movie-row>
+        <movie-row title="Upcoming Movies" category="upcoming"></movie-row>
+    </main>
+    <footer>
+        <div class="social-icons">
+            <a href="#"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-youtube"></i></a>
+        </div>
+        <div class="footer-links">
+            <a href="#">Audio Description</a>
+            <a href="#">Help Center</a>
+            <a href="#">Gift Cards</a>
+            <a href="#">Media Center</a>
+            <a href="#">Investor Relations</a>
+            <a href="#">Jobs</a>
+            <a href="#">Terms of Use</a>
+            <a href="#">Privacy</a>
+            <a href="#">Legal Notices</a>
+            <a href="#">Cookie Preferences</a>
+            <a href="#">Corporate Information</a>
+            <a href="#">Contact Us</a>
+        </div>
+        <div class="copyright">
+            © 2023 ZeeFlix, Inc.
+        </div>
+    </footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/theme-toggle.js"></script>
+    <script src="components/hero.js"></script>
+    <script src="components/movie-row.js"></script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize stream quality selector
+  initStreamQuality();
+  
+  // Add upcoming movies highlight animation
+  highlightUpcomingMovies();
+  
+  // Handle search functionality
+  setupSearch();
+});
+
+function initStreamQuality() {
+  const qualityContainer = document.createElement('div');
+  qualityContainer.className = 'stream-quality';
+  qualityContainer.innerHTML = `
+    <h3>Stream Quality</h3>
+    <div class="server-options">
+      <button class="server-btn active" data-quality="auto">Auto</button>
+      <button class="server-btn" data-quality="1080p">1080p</button>
+      <button class="server-btn" data-quality="720p">720p</button>
+      <button class="server-btn" data-quality="480p">480p</button>
+    </div>
+  `;
+  document.body.appendChild(qualityContainer);
+
+  // Handle quality selection
+  const qualityBtns = document.querySelectorAll('.server-btn');
+  qualityBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      qualityBtns.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      // Here you would typically update the stream quality
+      console.log(`Switched to ${btn.dataset.quality} quality`);
+    });
+  });
+}
+
+function highlightUpcomingMovies() {
+  // Find all upcoming movie cards and add pulse animation
+  setTimeout(() => {
+    const upcomingRows = document.querySelectorAll('movie-row[title="Upcoming Movies"]');
+    upcomingRows.forEach(row => {
+      const cards = row.shadowRoot.querySelectorAll('.movie-card');
+      if (cards.length > 0) {
+        // Highlight the first 3 upcoming movies
+        for (let i = 0; i < Math.min(3, cards.length); i++) {
+          cards[i].classList.add('upcoming-highlight');
+        }
+      }
+    });
+  }, 1000); // Wait for movies to load
+}
+
+function setupSearch() {
+  // This would be connected to the navbar search functionality
+  document.addEventListener('keypress', (e) => {
+    if (e.target.classList.contains('search-input') && e.key === 'Enter') {
+      const query = e.target.value.trim();
+      if (query) {
+        console.log(`Searching for: ${query}`);
+        // Here you would typically redirect to search results or fetch them
+        // window.location.href = `/search.html?q=${encodeURIComponent(query)}`;
+      }
+    }
+  });
+}
+
+// Handle theme toggle
+document.addEventListener('themeToggle', (e) => {
+  document.body.classList.toggle('dark');
+  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+});
+
+// Check for saved theme preference
+if (localStorage.getItem('theme') === 'dark') {
+  document.body.classList.add('dark');
+} else if (localStorage.getItem('theme') === 'light') {
+  document.body.classList.add('light');
+}

style.css

@@ -1,28 +1,137 @@
+/* Base Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: #141414;
+  color: white;
+}
+
+/* Dark/Light Theme */
+body.dark {
+  background-color: #141414;
+  color: white;
+}
+
+body.light {
+  background-color: #f3f3f3;
+  color: #333;
+}
+
+/* Main Content */
+main {
+  padding-top: 70px;
+}
+
+/* Footer Styles */
+footer {
+  background-color: #141414;
+  color: #757575;
+  padding: 2rem 4%;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.social-icons a {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin: 1rem 0;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.footer-links a {
+  color: #757575;
+  text-decoration: none;
+  font-size: 0.8rem;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.footer-links a:hover {
+  text-decoration: underline;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.copyright {
+  font-size: 0.8rem;
+  margin-top: 1rem;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  main {
+    padding-top: 60px;
+  }
+  
+  footer {
+    padding: 1.5rem 2%;
+  }
+  
+  .footer-links {
+    gap: 0.8rem;
+  }
 }
+
+/* Stream Quality Selector */
+.stream-quality {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: rgba(20, 20, 20, 0.9);
+  padding: 1rem;
+  border-radius: 8px;
+  z-index: 1000;
+}
+
+.stream-quality h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}
+
+.server-options {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.server-btn {
+  background: #333;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.server-btn:hover {
+  background: #555;
+}
+
+.server-btn.active {
+  background: #e50914;
+}
+
+/* Animation for upcoming movies */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.upcoming-highlight {
+  animation: pulse 2s infinite;
+}