diff --git a/LICENSE b/LICENSE.txt similarity index 98% rename from LICENSE rename to LICENSE.txt index 2a6bac3..f713b33 100644 --- a/LICENSE +++ b/LICENSE.txt @@ -1,21 +1,21 @@ -MIT License - -Copyright (c) 2025 AQSA CHOUDHARY - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +MIT License + +Copyright (c) 2025 AQSA CHOUDHARY + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/index.html b/index.html index fd1cdb8..61cad47 100644 --- a/index.html +++ b/index.html @@ -1,497 +1,19 @@ - - - - Netflix India-Watch TV Shows Online, Watch Movies Online - - - - -
-
- -
- -
- - - -
- - -
-
-
-
- Unlimited movies, TV shows and more - Starts at ₹149. Cancel at any time. - - Ready to watch? Enter your email to create or restart your - membership - -
- - -
-
-
-
-
-
- Enjoy on your TV - Watch on smart TVs, PlayStations, XBox, Chromecast, Apple TV, Blu-ray - Players and more. -
-
- -
-
-
-
-
- -
-
-
- Download your shows to watch offline - Save your favourites easily and always have something to watch. -
-
-
-
-
- Create profiles for kids - Send children on adventures with their favourite characters in a - space made just for them-free with your membership. -
-
- -
-
-
- -
-

Frequently Asked Questions

- -
-
- What is Netflix? - - - - -
-

- Netflix is a streaming service that offers a wide variety of - award-winning TV shows, movies and documentaries on thousands of - internet-connected devices. You can watch as much as you want, - whenever you want without a single commercial-all for one low - monthly price. -
-
- -
-
- How much does Netflix cost? - - - - -
-

- Watch Netflix on your smartphone, tablet, Smart TV, laptop, or - streaming device, all for one fixed monthly fee. Plans range from ₹149 - to ₹649 a month. No extra costs, no contracts. -
-
- -
-
- Where can I watch? - - - - -
-

- Watch anywhere, anytime. Sign in with your Netflix account to watch - instantly on the web at netflix.com from your personal computer or on - any internet-connected device that offers the Netflix app, including - smart TVs, smartphones, tablets, streaming media players and game - consoles. -
-
- -
-
- How can I cancel? - - - - -
-

- Netflix is flexible. There are no pesky contracts and no commitments. - You can easily cancel your account online in two clicks. There are no - cancellation fees – start or stop your account anytime. -
-
- -
-
- What can I watch on Netflix? - - - - -
-

- Netflix has an extensive library of feature films, documentaries, TV - shows, anime, award-winning Netflix originals, and more. Watch as much - as you want, anytime you want. -
-
- -
-
- Is Netflix good for kids? - - - - -
-

- The Netflix Kids experience is included in your membership to give - parents control while kids enjoy family-friendly TV shows and movies - in their own space. Kids profiles come with PIN-protected parental - controls. -
-
-
-
- - -
- -
-

- Ready to watch? Enter your email to create or restart your membership. -

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

Questions? Call 000-800-919-1694

-
- - -
-
    -
  • FAQ
    • -
  • Help Centre
    • -
  • Account
    • -
  • Media Centre
    • -
-
    -
  • Investor Relations
    • -
  • Jobs
    • -
  • Ways to Watch
    • -
  • Terms of Use
    • -
-
    -
  • Privacy
    • -
  • Cookie Preferences
    • -
  • Corporate Information
    • -
  • Contact Us
    • -
-
    -
  • Speed Test
    • -
  • Legal Notices
    • -
  • Only on Netflix
    • -
-

- - -
- -

Netflix India

-
-
- - - -
- -
-
- 🎬 MovieBot - × -
-
-
-
-
-
- - -
-
-
- - - + + + + Netflix Clone + + + + + + + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..800d48b --- /dev/null +++ b/script.js @@ -0,0 +1,333 @@ +document.addEventListener('DOMContentLoaded', () => { + const appRoot = document.getElementById('app-root'); + const TMDB_API_KEY = "Your api key"; + const TMDB_BASE_URL = "https://api.themoviedb.org/3"; + const TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p/"; + + // --- DATA MANAGEMENT --- + let myList = JSON.parse(localStorage.getItem('myList')) || []; + let profiles = JSON.parse(localStorage.getItem('profiles')) || [ + { id: 1, name: 'Ashish', avatar: 'https://placehold.co/150x150/E50914/FFFFFF?text=A' }, + { id: 2, name: 'Kids', avatar: 'https://placehold.co/150x150/333/FFFFFF?text=K' } + ]; + let manageMode = false; + + // --- CATEGORY & GENRE DEFINITIONS --- + const HOME_CATEGORIES = { "Popular on Netflix": "trending/all/week", "Trending Now": "movie/popular", "Top Rated Movies": "movie/top_rated", "Top Rated TV Shows": "tv/top_rated" }; + const MOVIE_CATEGORIES = { "Popular Movies": "movie/popular", "Trending Movies": "trending/movie/week", "Action": "discover/movie?with_genres=28", "Comedy": "discover/movie?with_genres=35", "Horror": "discover/movie?with_genres=27" }; + const TV_CATEGORIES = { "Popular TV Shows": "tv/popular", "Top Rated TV": "tv/top_rated", "Sci-Fi & Fantasy": "discover/tv?with_genres=10765", "Dramas": "discover/tv?with_genres=18", "Comedies": "discover/tv?with_genres=35" }; + + // --- HTML TEMPLATES --- + const landingPageTemplate = ` +
+
+ Netflix Logo + Sign In +
+
+

Unlimited movies, TV shows and more.

+

Watch anywhere. Cancel anytime.

+

Ready to watch? Enter your email to create or restart your membership.

+
+ + +
+
+
`; + + const browsePageTemplate = ` +
+
+ Netflix Logo +
    +
    • +
    • +
    • +
    • +
    • +
+
+ +
+
+
+
`; + + const searchPageTemplate = ` +
+
`; + + function getProfilesPageTemplate() { + return ` +
+

Who's watching?

+
+ ${profiles.map(p => ` +
+
+ ${manageMode && profiles.length > 1 ? '
' : ''} +
+ ${p.name} +
`).join('')} +
+
+ Add Profile +
+
+
+ + +
+
`; + } + + // --- ROUTER & NAVIGATION --- + function navigate(path) { + if (path === 'profiles') { + appRoot.innerHTML = getProfilesPageTemplate(); + addProfilePageListeners(); + } else { + const routes = { 'landing': landingPageTemplate, 'browse': browsePageTemplate }; + appRoot.innerHTML = routes[path] || routes['landing']; + } + + window.history.pushState({path}, path, `#${path}`); + if (path === 'browse') initBrowsePage(); + addNavigationListeners(); + } + function addNavigationListeners() { + document.querySelectorAll('[data-route]').forEach(el => el.addEventListener('click', (e) => { + e.preventDefault(); + navigate(el.dataset.route); + })); + } + + // --- PROFILE PAGE LOGIC --- + function addProfilePageListeners() { + document.querySelectorAll('.profile[data-profile-id]').forEach(el => { + el.addEventListener('click', () => { + const profileId = parseInt(el.dataset.profileId); + if (manageMode) { + if (profiles.length > 1) { // Prevent deleting the last profile + deleteProfile(profileId); + } + } else { + navigate('browse'); + } + }); + }); + document.getElementById('add-profile-btn')?.addEventListener('click', addProfile); + document.querySelector('.btn-manage-profiles')?.addEventListener('click', toggleManageMode); + } + function saveProfiles() { localStorage.setItem('profiles', JSON.stringify(profiles)); } + function addProfile() { + const name = prompt("Enter a name for the new profile:"); + if (name && name.trim() !== '') { + const newProfile = { + id: Date.now(), + name: name.trim(), + avatar: `https://placehold.co/150x150/${Math.floor(Math.random()*16777215).toString(16)}/FFFFFF?text=${name.charAt(0).toUpperCase()}` + }; + profiles.push(newProfile); + saveProfiles(); + navigate('profiles'); + } + } + function deleteProfile(id) { + profiles = profiles.filter(p => p.id !== id); + saveProfiles(); + navigate('profiles'); + } + function toggleManageMode() { + manageMode = !manageMode; + navigate('profiles'); + } + + // --- BROWSE PAGE LOGIC --- + function initBrowsePage() { + renderHomePage(); + addSidebarNavListeners(); + } + function addSidebarNavListeners() { + document.getElementById('home-btn')?.addEventListener('click', (e) => { e.preventDefault(); renderHomePage(); }); + document.getElementById('tv-btn')?.addEventListener('click', (e) => { e.preventDefault(); renderContentPage(TV_CATEGORIES, 'tv', 'tv-btn'); }); + document.getElementById('movies-btn')?.addEventListener('click', (e) => { e.preventDefault(); renderContentPage(MOVIE_CATEGORIES, 'movie', 'movies-btn'); }); + document.getElementById('my-list-btn')?.addEventListener('click', (e) => { e.preventDefault(); renderMyListPage(); }); + document.getElementById('search-btn')?.addEventListener('click', (e) => { e.preventDefault(); renderSearchPage(); }); + document.querySelector('.sidebar-logout a')?.addEventListener('click', (e) => { e.preventDefault(); navigate('profiles'); }); + } + + // --- PAGE RENDERING FUNCTIONS --- + async function renderContentPage(categories, type = 'movie', activeId) { + updateActiveLink(activeId); + const mainContent = document.querySelector('.main-content'); + if (!mainContent) return; + mainContent.innerHTML = `
`; + + const heroContent = await fetchMovies(type === 'tv' ? 'tv/popular' : 'movie/popular'); + if (heroContent?.results?.length > 0) { + displayHero(heroContent.results[Math.floor(Math.random() * heroContent.results.length)]); + } + + const rowsContainer = mainContent.querySelector('.movie-rows-container'); + for (const [title, endpoint] of Object.entries(categories)) { + const items = await fetchMovies(endpoint); + if (items?.results?.length > 0) { + rowsContainer.appendChild(createMovieRow(title, items.results)); + } + } + } + function renderHomePage() { renderContentPage(HOME_CATEGORIES, 'movie', 'home-btn'); } + async function renderMyListPage() { + updateActiveLink('my-list-btn'); + const mainContent = document.querySelector('.main-content'); + if (!mainContent) return; + mainContent.innerHTML = `

My Favourite Movies & Shows

`; + + const rowsContainer = mainContent.querySelector('.movie-rows-container'); + if (myList.length === 0) { + rowsContainer.innerHTML = `

My List is empty. Add shows and movies to see them here!

`; + return; + } + + const myListDetails = await Promise.all(myList.map(item => fetchMovies(`${item.type}/${item.id}`))); + + const movies = myListDetails.filter(item => item && item.title); + const tvShows = myListDetails.filter(item => item && item.name); + + rowsContainer.innerHTML = ''; // Clear for new content + if (movies.length > 0) { + rowsContainer.appendChild(createMovieRow("Movies", movies)); + } + if (tvShows.length > 0) { + rowsContainer.appendChild(createMovieRow("TV Shows", tvShows)); + } + } + async function renderSearchPage() { + updateActiveLink('search-btn'); + const mainContent = document.querySelector('.main-content'); + if (!mainContent) return; + mainContent.innerHTML = searchPageTemplate; + + const searchInput = document.getElementById('search-input'); + const resultsGrid = document.querySelector('.search-results-grid'); + + const initialResults = await fetchMovies('trending/all/week'); + displaySearchResults(initialResults, resultsGrid, "Top Searches"); + + let debounceTimer; + searchInput.addEventListener('input', () => { + clearTimeout(debounceTimer); + debounceTimer = setTimeout(async () => { + const query = searchInput.value.trim(); + if (query) { + const searchResults = await fetchMovies(`search/multi`, `&query=${encodeURIComponent(query)}`); + displaySearchResults(searchResults, resultsGrid, "Results"); + } else { + displaySearchResults(initialResults, resultsGrid, "Top Searches"); + } + }, 500); + }); + } + function displaySearchResults(results, container, title) { + container.innerHTML = `

${title}

`; + if (results?.results?.length > 0) { + results.results + .filter(item => item.poster_path) + .forEach(item => container.appendChild(createMovieCard(item))); + } else if (title === "Results") { + container.innerHTML += `

No results found.

`; + } + } + + // --- CORE HELPER FUNCTIONS --- + async function fetchMovies(endpoint, queryParams = '') { + const url = `${TMDB_BASE_URL}/${endpoint}?api_key=${TMDB_API_KEY}&language=en-US${queryParams}`; + try { + const response = await fetch(url); + if (!response.ok) { console.error(`API Error: ${response.status} for ${url}`); return null; } + return await response.json(); + } catch (error) { console.error(`Fetch Error for ${url}:`, error); return null; } + } + function createMovieRow(title, items) { + const row = document.createElement('section'); + row.className = 'movie-row'; + row.innerHTML = `

${title}

`; + const carousel = row.querySelector('.carousel-inner'); + if (Array.isArray(items)) { + items.forEach(item => carousel.appendChild(createMovieCard(item))); + } + return row; + } + function createMovieCard(item) { + const card = document.createElement('div'); + card.className = 'movie-card-browse'; + card.dataset.itemId = item.id; + const posterPath = item.poster_path ? `${TMDB_IMAGE_BASE_URL}w342${item.poster_path}` : 'https://placehold.co/220x330/222/FFF?text=No+Image'; + card.innerHTML = `${item.title || item.name}`; + const myListBtn = document.createElement('button'); + myListBtn.className = 'my-list-btn-card'; + updateMyListButtonState(myListBtn, item.id); + myListBtn.onclick = (e) => { + e.stopPropagation(); + toggleMyList(item, myListBtn); + if (document.querySelector('.sidebar-nav-links li a.active')?.id === 'my-list-btn') { + renderMyListPage(); + } + }; + card.appendChild(myListBtn); + card.onclick = () => displayHero(item); + return card; + } + function displayHero(item) { + const heroSection = document.querySelector('.hero-section'); + if (!heroSection || !item) return; + const backdropPath = item.backdrop_path ? `${TMDB_IMAGE_BASE_URL}original${item.backdrop_path}` : ''; + heroSection.innerHTML = ` +
+
+

${item.title || item.name}

+

${item.overview}

+
+ + +
+
`; + const heroMyListButton = heroSection.querySelector('.btn-my-list'); + updateMyListButtonState(heroMyListButton, item.id); + heroMyListButton.addEventListener('click', () => toggleMyList(item, heroMyListButton)); + } + function toggleMyList(item, button) { + const itemId = item.id; + const itemType = item.media_type || (item.title ? 'movie' : 'tv'); + const index = myList.findIndex(i => i.id === itemId); + if (index > -1) { myList.splice(index, 1); } else { myList.push({ id: itemId, type: itemType }); } + localStorage.setItem('myList', JSON.stringify(myList)); + updateMyListButtonState(button, itemId); + const cardButton = document.querySelector(`.movie-card-browse[data-item-id='${itemId}'] .my-list-btn-card`); + if (cardButton) updateMyListButtonState(cardButton, itemId); + } + function updateMyListButtonState(button, itemId) { + if (!button) return; + const isInList = myList.some(i => i.id === itemId); + const icon = isInList ? 'fa-check' : 'fa-plus'; + if (button.classList.contains('my-list-btn-card')) { + button.innerHTML = ``; + } else { + button.innerHTML = ` My List`; + } + } + function updateActiveLink(activeId) { + document.querySelectorAll('.sidebar-nav-links li a').forEach(link => { + link.classList.remove('active'); + }); + const linkToActivate = document.getElementById(activeId); + if (linkToActivate) { + linkToActivate.classList.add('active'); + } + } + + // --- INITIAL APPLICATION LOAD --- + const initialPath = window.location.hash.replace('#', '') || 'landing'; + navigate(initialPath); +}); diff --git a/style.css b/style.css index 04512b5..5cc3744 100644 --- a/style.css +++ b/style.css @@ -1,871 +1,190 @@ -@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"); -@font-face { - font-family: "Netflix Sans Bolder"; - src: url("fonts/NetflixSans-Bold.otf") format("opentype"); -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"); :root { - --main-page-bg: black; - --main-text-color: white; - - --section-bg: black; - --section-text-color: white; - - --faq-box-bg: rgb(84, 83, 83); - --faq-box-hover-bg:rgb(147, 146, 146); - --faq-svg-filter: invert(1); - - --first-image-filter: none; - - --btn-text-on-light-bg:white; - --btn-lang-svg-filter: invert(1); - - --separation-color:rgb(248, 38, 38); - --btn-default-bg: rgb(117, 115, 115); - --btn-default-text:white; - --btn-red-bg: rgb(228, 15, 15); - --btn-red-text: white; - --input-bg-color: rgba(23, 23, 23, 0.7); - --input-border-color: rgba(126, 122, 122, 0.5); + --netflix-red: #e50914; + --netflix-black: #141414; + --text-primary: #fff; + --text-secondary: #b3b3b3; + --background-dark: #111; } -/* Light Mode Overrides for the variables */ -body[data-theme="light"] { - --main-page-bg: white; - --main-text-color: black; - - --section-bg: #f0f0f0; - --section-text-color: black; - - --faq-box-bg: whitesmoke; - --faq-box-hover-bg: lightgray; - --faq-svg-filter: none; - - --first-image-filter: brightness(1.5) grayscale(0.5); - - --btn-text-on-light-bg:black; - --btn-lang-svg-filter: none; -} * { padding: 0; margin: 0; - font-family: "Netflix Sans Bolder", "Poppins", sans-serif; + box-sizing: border-box; + font-family: "Poppins", "Martel Sans", sans-serif; } body { - background-color: var(--main-page-bg); - transition: background-color 0.3s ease; + background-color: var(--background-dark); + color: var(--text-primary); + overflow-x: hidden; } -.main { - - background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f562aaf4-5dbb-4603-a32b-6ef6c2230136/dh0w8qv-9d8ee6b2-b41a-4681-ab9b-8a227560dc75.jpg/v1/fill/w_1280,h_720,q_75,strp/the_netflix_login_background__canada__2024___by_logofeveryt_dh0w8qv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvZjU2MmFhZjQtNWRiYi00NjAzLWEzMmItNmVmNmMyMjMwMTM2XC9kaDB3OHF2LTlkOGVlNmIyLWI0MWEtNDY4MS1hYjliLThhMjI3NTYwZGM3NS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LOYKSxIDqfPwWHR0SSJ-ugGQ6bECF0yO6Cmc0F26CQs'); - height: 70vh; +/* === 1. LANDING PAGE STYLES === */ +.landing-page-container { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.8) 100%), url('home_page_background_image.jpg'); + min-height: 100vh; position: relative; - background-position: center center; + background-position: center; background-repeat: no-repeat; - background-size: max(1200px, 100vw); -} - -.main .box { - height: 70vh; - width: 100%; - opacity: 0.7; - background-color: black; - position: absolute; - top: 0; - - background-image: url(home_page_background_image.jpg), 0.7; - height: 99vh; - width: 100%; - position: relative; - background-position: center center; - background-repeat: no-repeat; - background-size: max(1200px, 100vw); -} - -.main .box { - height: 99vh; - width: 100%; - opacity: 0.79; - background-color: var(--main-page-bg); - position: absolute; - top: 0; -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 65vw; - margin: auto; - height: 85px; - padding:0 145px; -} - -nav img { - color: rgb(255, 0, 0); - padding: 20px; - width: 130px; - position: relative; - z-index: 10; -} - -nav button { - position: relative; - z-index: 10; - margin:5%; -} - -.hero { - height: calc(100% - 100px); - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - color: var(--main-text-color); - position: relative; - font-family: "Martel Sans", serif; - gap: 23px; - padding: 0 30px; -} - -.hero > :first-child { - font-weight: bolder; - font-size: 48px; - text-align: center; -} - -.hero > :nth-child(2) { - font-weight: 400; - font-size: 24px; - text-align: center; -} - -.hero > :nth-child(3) { - font-weight: 400; - font-size: 20px; - text-align: center; -} - -.separation { - height: 6px; - background-color: var(--separation-color); - position: relative; - z-index: 20; -} - -.nav-btn { - width: 186px; - display: flex; - justify-content: space-between; - align-items: center; - gap:10px; -} - -.btn { - background: #666; - color: rgb(255, 255, 255); - padding:5px 25px; - margin: 10px 12px; - border: none; - border-radius: 4px; - cursor:pointer; - text-decoration: none; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.btn:hover { -transform: scale(1.05); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); -} - -.btn-red { - background:rgb(228, 15, 15); - font-size:15px; - font-weight:lighter; -} - -.btn-red:hover { - box-shadow:0px 6px 20px rgb(171, 212, 171); - transform: scale(1.08); -} - -#theme-toggle { - font-size: 1.2rem; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - line-height: 1; -} - -.language-switch { - width: 15px; - padding: 2px; -} -#language-select { - background: transparent; - color: white; - border: none; - font-size: 16px; - appearance: none; - padding: 8px; - cursor: pointer; -} - -.down-arrow { - width: 8px; - padding: 0 2px; -} - -.hero-buttons { - display: flex; - align-items: center; - justify-content: center; - gap: 14px; -} - -.main input { - padding: 7px 101px 8px 14px; - color: var(--btn-default-text); - font-size: 12px; - font-weight: 900; - border-radius: 4px; - background-color: var(--input-bg-color); - border: 1px solid var(--input-border-color); -} - -.btn-lang { - background-color: var(--section-bg); - border: 1px solid var(--btn-default-text); - color: var(--btn-text-on-light-bg); - display: flex; - align-items: center; -} - -.english { - padding: 0 5px; -} - -.btn-red-sm { - background-color: var(--btn-red-bg); - color: var(--btn-red-text); - display: flex; - align-items: center; - margin:3px; -} - -.btn-lang .language-switch, -.btn-lang .down-arrow { - filter: var(--btn-lang-svg-filter); -} -.first { - display: flex; - justify-content: center; - align-items: center; - max-width: 100vw; - margin: 0; - background-color: var(--section-bg); - color: var(--section-text-color); - padding: 34px 0; -} -@media screen and (max-width: 1300px) { - .first { - flex-wrap: wrap; - } - .secImg img { - width: 305px; - position: relative; - z-index: 10; - } - .hero > :first-child { - font-size: 32px; - } - .hero > :nth-child(2) { - font-size: 18px; - } - .hero > :nth-child(3) { - font-size: 18px; - } - nav { - max-width: 90vw; - } - .main input { - padding: 7px 53px 8px 14px; - } - .hero-buttons { - display: flex; - - justify-content: center; - max-width: 70vw; - margin: auto; - color: white; - align-items: center; - padding: 70px 0; - flex-wrap: wrap; -} - -.second { - flex-direction: row-reverse; -} - -section.first > div { - display: flex; - flex-direction: column; - padding: 0 34px; - flex: 1; - min-width: 300px; - text-align: left; - gap: 15px; -} - -section.first > div :first-child { - font-size: 48px; - font-weight: bolder; - line-height: 1.1; -} - -section.first > div :nth-child(2) { - font-size: 24px; - line-height: 1.2; -} - -.secImg { - position: relative; - display: flex; - align-items: center; - justify-content: center; -} -@media screen and (max-width:1300px){ - .first{ - flex-wrap: wrap; - } - .secImg img { - width: 305px; - position: relative; - z-index: 10; - } - .hero> :first-child { - font-size: 32px; - } - .hero> :nth-child(2){ - font-size: 18px; - } - .hero> :nth-child(3){ - font-size: 18px; - } - nav{ - max-width: 90vw; - } - .main input{ - padding: 7px 53px 8px 14px; - } - .hero-buttons { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 14px; - } - .faq h2{ - text-align: center; - font-size: 32px; - } - footer{ - max-width: 90vw; - } - .footer-item{ - align-items: center; - } - .footer{ - display: grid; - grid-template-columns: 1fr 1fr; - color: white; - gap: 25px; - } - flex-direction: column; - align-items: center; - justify-content: center; - gap: 14px; - } - .faq h2 { - text-align: center; - font-size: 32px; - } -} - -.secImg img { - filter: var(--first-image-filter); - width: 400px; - position: relative; - z-index: 10; -} - -.secImg { - position: relative; -} -section.first > div { - display: flex; - flex-direction: column; -} - -section.first > div :nth-child(1) { - font-size: 30px; - font-weight: bolder; -} - -section.first > div :nth-child(2) { - font-size: 24px; -} -.faq h2 { - text-align: center; - font-size: 48px; -} -.faq { - background-color: var(--section-bg); - color: var(--section-text-color); - padding: 34px; + background-size: cover; + border-bottom: 8px solid #222; } -.faqbox{ +.landing-nav { display: flex; - transition: all 0.5s ease-out; - background-color: rgb(84, 83, 83); justify-content: space-between; - padding: 24px; - max-width: 60vw; - font-size: 20px; - margin: 20px auto; - cursor: pointer; - border-radius: 15px; -} -footer{ - color: white; - max-width: 60vw; - margin: auto; - padding: 14px; -} -.footer{ - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - color: white; -} -.footer-item{ - display: flex; - flex-direction: column; - gap: 23px; -.faqbox:hover { - background-color: var(--faq-box-hover-bg); - -} -.faqbox svg { - filter: var(--faq-svg-filter); -} -.faqbox { - display: flex; - transition: all 0.5s ease-out; - background-color: var(--faq-box-bg); - justify-content: space-between; - padding: 24px; - max-width: 60vw; - font-size: 24px; - margin: 20px auto; - cursor: pointer; -} - -#chatbot-widget { - position: fixed; - bottom: 30px; - right: 30px; - z-index: 1000; - font-family: "Segoe UI", Arial, sans-serif; -} -#chatbot-toggle { - background: #e50914; - color: #fff; - border: none; - border-radius: 50%; - width: 56px; - height: 56px; - font-size: 2rem; - cursor: pointer; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - transition: background 0.2s; -} -#chatbot-toggle:hover { - background: #b0060f; -} -#chatbot-window { - width: 340px; - min-height: 420px; - max-height: 70vh; - background: #181818; - color: #fff; - border-radius: 18px; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); - position: absolute; - bottom: 70px; - right: 0; - display: flex; - flex-direction: column; - overflow: hidden; - animation: fadeIn 0.3s; -} -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -#chatbot-header { - background: #e50914; - color: #fff; - padding: 14px 18px; - font-weight: bold; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 1.1rem; - letter-spacing: 0.5px; -} -#chatbot-close { - cursor: pointer; - font-size: 1.4rem; - transition: color 0.2s; -} -#chatbot-close:hover { - color: #ffd700; -} -#chatbot-messages { - flex: 1; - padding: 18px 12px 8px 12px; - overflow-y: auto; - background: #222; - display: flex; - flex-direction: column; - gap: 10px; -} -.chat-message { - display: flex; - flex-direction: column; - align-items: flex-start; -} -.chat-message.user { - align-items: flex-end; -} -.bubble { - max-width: 80%; - padding: 12px 16px; - border-radius: 18px; - font-size: 1rem; - line-height: 1.5; - margin-bottom: 2px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); - word-break: break-word; -} -.chat-message.user .bubble { - background: #e50914; - color: #fff; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 18px; - border-top-left-radius: 18px; - border-top-right-radius: 18px; -} -.chat-message.bot .bubble { - background: #333; - color: #fff; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 18px; - border-top-left-radius: 18px; - border-top-right-radius: 18px; -} -#chatbot-loading { - display: flex; - justify-content: center; - align-items: center; - padding: 10px 0; - background: #222; -} -.spinner { - border: 4px solid #444; - border-top: 4px solid #e50914; - border-radius: 50%; - width: 28px; - height: 28px; - animation: spin 1s linear infinite; -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -#chatbot-form { - display: flex; - border-top: 1px solid #333; - background: #181818; - padding: 10px 12px; - gap: 8px; -} -#chatbot-input { - flex: 1; - padding: 10px 14px; - border: none; - background: #222; - color: #fff; - font-size: 1rem; - border-radius: 12px; - outline: none; - transition: box-shadow 0.2s; -} -#chatbot-input:focus { - box-shadow: 0 0 0 2px #e50914; -} -#chatbot-form button { - background: #e50914; - color: #fff; - border: none; - padding: 0 18px; - font-size: 1.2rem; - border-radius: 12px; - cursor: pointer; - transition: background 0.2s; -} -#chatbot-form button:hover { - background: #b0060f; -} -@media (max-width: 500px) { - #chatbot-window { - width: 98vw; - min-width: 0; - right: 1vw; - left: 1vw; - bottom: 80px; - max-height: 80vh; - } - #chatbot-toggle { - right: 10px; - bottom: 10px; - } -} -/* <<<<<<< feature/light-dark-mode -======= */ - -@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"); - -* { - padding: 0; - margin: 0; - font-family: "Netflix Sans Bolder", "Poppins", sans-serif; -} - -body { - background-color: black; - padding: 20px; -} - -.faq h2 { - text-align: center; - font-size: 48px; - color: white; - margin-bottom: 30px; -} - -.faq { - background-color: black; - color: white; - padding: 34px; -} - -.faqbox:hover { - background-color: rgb(147, 146, 146); -} - -.faqbox svg { - filter: invert(1); - transition: transform 0.3s ease; -} - -.faqbox.active svg { - transform: rotate(45deg); -} - -.faqbox { - display: flex; - transition: all 0.5s ease-out; - background-color: rgb(84, 83, 83); - justify-content: space-between; - align-items: center; - padding: 24px; - max-width: 60vw; - font-size: 24px; - margin: 20px auto; - cursor: pointer; - flex-direction: column; -} - -.faq-question { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.faq-answer { - width: 100%; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease, padding 0.3s ease; - font-size: 18px; - line-height: 1.5; -} - -.faqbox.active .faq-answer { - max-height: 200px; - padding-top: 20px; -} - -@media screen and (max-width: 1300px) { - .faq h2 { - text-align: center; - font-size: 32px; - } - .faqbox { + align-items: center; max-width: 90vw; - font-size: 20px; - } - .faq-answer { - font-size: 16px; - } -} -/* >>>>>>> main */ - -/* FOOTER SIGNUP */ -.footer-signup { - text-align: center; - margin: 40px auto; - max-width: 600px; -} - -.footer-signup p { - font-size: 18px; - margin-bottom: 20px; - color:white; -} - -.footer-signup-box { - display: flex; - justify-content: center; - gap: 10px; - flex-wrap: wrap; -} - -/* Floating label for footer input */ -.input-container { - position: relative; - display: inline-block; - flex: 1; - min-width: 280px; - padding-right: 25px; -} - -.footer-input-container{ - padding: 16px 14px 8px 14px; - font-size: 16px; - border-radius: 4px; - border: 1px solid rgba(137, 134, 134, 0.7); - background: rgba(23, 23, 23, 0.7); - color:white; - width: 100%; -} - -.input-container label { - position: absolute; - left: 14px; - top: 50%; - transform: translateY(-50%); - color: #aaa; - font-size: 16px; - pointer-events: none; - transition: 0.3s ease all; -} - -.input-container input:focus + label, -.input-container input:not(:placeholder-shown) + label { - top: 6px; - font-size: 12px; - color: #aaa; /* keep same grey color */ -} - -/* FOOTER LINKS & LANGUAGE */ -footer { - max-width: 75vw; - margin: auto; - padding: 40px 0; - color: #b3b3b3; - font-size: 14px; -} - -footer .questions { - margin: 20px 0; -} - -footer .questions a { - color: #b3b3b3; - text-decoration: underline; -} - -.footer-links { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 20px; - margin-bottom: 30px; -} - -.footer-links ul { - list-style: none; -} - -.footer-links li { - margin-bottom: 12px; -} - -.footer-links a { - color: #b3b3b3;; - text-decoration: none; -} - -.footer-links a:hover { - text-decoration: underline; -} - -.footer-bottom { - display: flex; - flex-direction: column; /* stack vertically */ - align-items: flex-start; - gap: 10px; - margin-top: 20px; -} - -.language-select { - background: rgba(0, 0, 0, 0.7); - color: #b3b3b3; - border: 1px solid #333; - border-radius: 4px; - padding: 8px 14px; - font-size: 14px; - cursor: pointer; -} - -.netflix-india { - font-size: 14px; - color: #b3b3b3; - padding-top: 20px; + margin: auto; + padding: 20px 0; +} +.landing-nav .logo { width: 150px; height: auto; } +.landing-nav .btn-signin { + background-color: var(--netflix-red); color: white; padding: 8px 17px; + border-radius: 5px; text-decoration: none; font-weight: 500; +} +.hero-card { + min-height: 80vh; display: flex; align-items: center; justify-content: center; + flex-direction: column; text-align: center; color: white; gap: 20px; padding: 0 30px; +} +.hero-card h1 { font-size: 3rem; font-weight: 900; } +.hero-card h3 { font-size: 1.5rem; font-weight: 400; } +.hero-card p { font-size: 1.2rem; font-weight: 400; } +.email-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } +.email-form input { + padding: 15px; font-size: 1rem; min-width: 450px; border-radius: 5px; + border: 1px solid #888; background: rgba(0,0,0,0.7); color: white; +} +.email-form .btn-get-started { + background-color: var(--netflix-red); color: white; padding: 15px 30px; + font-size: 1.5rem; font-weight: 600; border: none; border-radius: 5px; cursor: pointer; +} + +/* === 2. PROFILES PAGE STYLES === */ +.profiles-container { + display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; +} +.profiles-container h1 { font-size: 3.5rem; font-weight: 400; margin-bottom: 30px; } +.profile-list { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; } +.profile { cursor: pointer; text-align: center; color: var(--text-secondary); transition: color 0.2s; position: relative; } +.profile:hover { color: var(--text-primary); } +.profile .profile-avatar { + width: 150px; height: 150px; border-radius: 5px; background-color: #333; + margin-bottom: 10px; background-size: cover; border: 3px solid transparent; transition: border-color 0.2s; +} +.profile:hover .profile-avatar { border-color: white; } +.profile .profile-name { font-size: 1.3rem; } +.profile-buttons { display: flex; gap: 20px; margin-top: 50px; } +.btn-manage-profiles, .btn-logout { + background: transparent; border: 1px solid var(--text-secondary); + color: var(--text-secondary); padding: 10px 25px; font-size: 1.2rem; cursor: pointer; +} +.btn-manage-profiles:hover, .btn-logout:hover { color: white; border-color: white; } +.delete-overlay { + position: absolute; top: 0; left: 0; width: 150px; height: 150px; + background-color: rgba(0,0,0,0.7); border-radius: 5px; display: flex; + align-items: center; justify-content: center; font-size: 3rem; + opacity: 0; transition: opacity 0.2s; +} +.profile.manage-mode:hover .delete-overlay { opacity: 1; } + +/* === 3. BROWSE PAGE STYLES === */ +.browse-page-container { display: flex; } +.sidebar { + width: 90px; height: 100vh; background-color: #000; position: fixed; + top: 0; left: 0; display: flex; flex-direction: column; align-items: center; + padding: 20px 0; z-index: 100; +} +.sidebar-logo { width: 40px; margin-bottom: 40px; } +.sidebar-nav-links { list-style: none; width: 100%; margin: 0; } +.sidebar-nav-links li a { + display: flex; align-items: center; color: var(--text-secondary); + text-decoration: none; padding: 15px 30px; font-size: 1.5rem; position: relative; +} +.sidebar-nav-links li a:hover { color: var(--text-primary); } +.sidebar-nav-links li a.active { color: var(--text-primary); } +.sidebar-nav-links li a.active::before { + content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); + width: 4px; height: 70%; background-color: var(--netflix-red); border-radius: 0 5px 5px 0; +} +.sidebar-logout { margin-top: auto; } + +.main-content { margin-left: 90px; width: calc(100% - 90px); } +.hero-section { height: 80vh; position: relative; display: flex; align-items: center; } +.hero-background { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; + background-size: cover; background-position: center top; z-index: 1; +} +.hero-background::after { + content: ''; position: absolute; bottom: 0; left: 0; + width: 100%; height: 150px; background: linear-gradient(to top, var(--background-dark), transparent); +} +.hero-content { position: relative; z-index: 2; padding: 0 5%; max-width: 50%; } +.hero-title { font-size: 3.5rem; font-weight: bold; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); } +.hero-description { font-size: 1.2rem; line-height: 1.5; margin-bottom: 30px; max-width: 600px; } +.hero-buttons .btn-hero { + border: none; padding: 15px 35px; border-radius: 5px; font-size: 1.1rem; + font-weight: bold; cursor: pointer; margin-right: 15px; transition: opacity 0.2s; +} +.hero-buttons .btn-play { background-color: #fff; color: #000; } +.hero-buttons .btn-my-list { background-color: rgba(109, 109, 110, 0.7); color: #fff; } +.hero-buttons .btn-hero:hover { opacity: 0.8; } +.btn-hero i { margin-right: 10px; } +.movie-rows-container { padding: 0 5%; margin-top: -100px; position: relative; z-index: 10; } + +.movie-row { + margin-bottom: 20px; + padding: 30px 0; +} +.movie-row h2 { font-size: 1.4rem; margin-bottom: 15px; } +.carousel-inner { + display: flex; gap: 10px; overflow-x: auto; + overflow-y: visible; + padding-top: 15px; + padding-bottom: 15px; + margin-top: -15px; + margin-bottom: -15px; + scrollbar-width: none; +} +.carousel-inner::-webkit-scrollbar { display: none; } +.movie-card-browse { + flex: 0 0 auto; width: 220px; border-radius: 5px; overflow: visible; + cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; + position: relative; background-color: #222; +} +.movie-card-browse:hover { + transform: scale(1.1); + z-index: 20; + box-shadow: 0 8px 24px rgba(0,0,0,0.7); +} +.movie-card-browse img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; } +.my-list-btn-card { + position: absolute; top: 10px; right: 10px; background-color: rgba(0,0,0,0.7); + color: white; border: 2px solid white; border-radius: 50%; width: 34px; height: 34px; + font-size: 1rem; cursor: pointer; display: none; align-items: center; justify-content: center; + transition: background-color 0.2s; +} +.movie-card-browse:hover .my-list-btn-card { display: flex; } +.my-list-btn-card:hover { background-color: rgba(255,255,255,0.2); } + +/* === 4. SEARCH & MY LIST PAGE STYLES === */ +.search-container { padding: 20px 5%; } +#search-input { + width: 100%; padding: 15px 20px; font-size: 1.2rem; + background-color: #333; border: none; border-radius: 5px; color: white; outline: none; +} +.search-results-grid { + display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 35px; + padding: 20px 5%; +} +.search-results-grid h2, .my-list-page-header { + grid-column: 1 / -1; font-size: 1.8rem; margin-bottom: 10px; +} +.my-list-page-header { + padding: 40px 5% 0; + font-size: 2.5rem; }