`; } if (dict[i].length === 4) { let val = ""; let eltop = 0; let elleft = 0; for (let j of dict[i][3]) { if (Object.keys(dict).includes(j)) { val += `

`; elleft += 29.5; if (elleft >= 80) { eltop += 44; elleft = 0; } } } dict[i][3] = val; } } // Defining some variables var mainNav,main,lst=0,navtop=0,rowtop = 930, t, t2, lastvalue,tActive=true, t2Active=false, cstop=[0, 50], t3, downloads = [], mn = "", myList = [], myLiked = [], cml = 0, cmml = 0, myDisliked = []; // Calling everything (making long rows of movies) window.onload = function() { t = setInterval(NavBar, 10); setInterval(BackHolder, 10); setInterval(dpMovies, 1000); addRow(180, 120, "Trending Now", ["emily in paris", "dolly kitty aur woh chamakte sitare", "friends", "enola holmes", "serious men", "saheb biwi aur gangster returns", "ginny weds sunny", "zindagi gulzar hai", "aapla manus", "masaba masaba", "ramji london waley", "luka chhupi", "pyaar ka punchnama 2", "wonder", "raat akeli hai", "jamtara sabka number ayega", "never have i ever", "humpty sharma ki dulhania", "shimla mirch"]); addRow(330, 160, "Netflix Originals", ["lucifer", "dolly kitty aur woh chamakte sitare<>", "enola holmes<>", "she", "soni", "ratched<>", "the social dilemma<>", "designated survivor<>", "hasmukh<>", "chopsticks", "typewriter", "the crown"]); addRow(180, 120, "Indian Movies", ["luka chhupi", "ishqiya", "guilty", "santa banta", "jai mummy di", "gunjan saxena", "manorama", "ankhon dekhi", "saheb biwi aur gangster returns", "dhh", "jab we met", "dedh ishqiya", "life in a metro", "secret superstar", "jab harry met sejal", "mubarakan", "pyaar ka punchnama 2", "cargo", "fashion", "thank you", "ramji london waley", "guru", "time out", "gori tere pyaar mein", "kaagar", "for here or to go", "motichoor chaknachoor", "yeh jawaani hai deewani", "dil dhadakne do", "kal ho naa ho", "vivah", "barah aana", "ungli", "mumbai delhi mumbai"]); addRow(180, 120, "New Releases", ["schitt s creek", "the 100", "blacklist", "vikings", "designated survivor", "cobra kai", "ratched", "brooklyn nine-nine", "baby", "gotham", "the social dilemma", "the good place", "ozark", "motichoor chaknachoor", "jai mummy di", "ginny weds sunny", "wentworth", "good girls", "drive", "cargo", "article 15", "jamtara sabka number ayega", "rita", "the politician", "dead to me", "baazaar", "jab harry met sejal", "secret superstar", "kaali khuhi", "the haunting of bly manor", "rebecca", "holidate", "love aaj kal"]); addRow(300, 240, "Top 10 in India Today", ["serious men<>", "enola holmes><", "dolly kitty aur woh chamakte sitare><", "american assassin<>", "the 100<>", "emily in paris<>", "friends<>", "the social dilemma><", "the losers<>", "wonder<>"]); addRow(180, 120, "TV Dramedies", ["suits","gilmore girls","khan no.1","good girls","love me as i am","jane the virgin", "shameless", "hasmukh", "grace and frankie", "insatiable", "doc martin", "the ranch", "the losers", "girls hotel", "after life", "loaded", "the end of the fucking world", "everything sucks", "the umbrella academy"]); addRow(180, 120, "Exciting US Crime TV Shows", ["arrow", "designated survivor", "queen of the south", "narcos", "gotham", "iron fist", "jessica jones", "titans", "ragnarok", "dare devil", "narcos mexico", "luke cage", "el chema", "colony", "defenders", "american assassin", "house of cards", "shooter", "space force", "the people v oj simpson", "bad blood", "punisher", "wu assassins", "black lightning", "the inmate", "snow piercer", "warrior nun", "versace", "the sinner"]); addRow(180, 120, "International TV Shows", ["khaani", "baby", "love me as i am", "holidate", "naruto", "money heist", "fauda", "elite", "resurrection ertugrul", "the protector", "the gift", "la reina del sur", "zindagi gulzar hai", "toy boy", "locked up", "playing with fire", "everything sucks", "wonder", "cuckoo", "someone great", "i am not okay with this", "13 reasons why", "orange is the new black", "riverdale", "the duchess", "how to get away with murder", "pose", "the i-land", "the boys in the band", "a secret love", "eat pray love", "circus of books"]); addRow(180, 120, "Conspiracy TV Thrillers", ["delhi crime", "designated survivor", "sacred games", "class of 83", "bodyguard", "black mirror", "jamtara sabka number ayega", "el chapo", "v wars", "article 15", "bio hacker", "stranger", "iris", "silver spoon", "vagabond", "12 monkeys", "secret city", "london spy", "the code", "the losers", "bloodline", "brij mohan amar rahe", "deewana main deewana", "choked paisa bolta hai", "punisher", "shooter", "unbelievable", "cursed", "colony", "versace", "hollywood", "altered carbon"]); addRow(180, 120, "High School TV Shows", ["teen wolf", "cobra kai", "elite", "the perfect date", "chilling adventures of sabrina", "insatiable", "dhh", "selection day", "boys over flowers", "how to sell drugs online (fast)", "glee", "inheritors", "on my block", "guilty", "rita", "teenage bounty hunters", "the duchess", "little things", "crashing", "the politician", "away", "animal kingdom", "atypical", "13 reasons why", "eat pray love", "unbelievable", "i am not okay with this"]); addRow(180, 120, "Historical TV Shows", ["stories by rabindranath tagore", "vikings", "resurrection ertugrul", "spartacus", "the last kingdom", "beecham house", "world war II in colour", "marco polo", "grand hotel", "the empress ki", "cable girls", "roman empire"]); addComingSoonContent("https://drive.google.com/uc?export=download&id=1I__Tkuqyzk1SO8Bsaer46KvDIekTZ8es", "https://imgur.com/kfjFpDf.jpg", "Ginny Weds Sunny", "Eager to marry but constantly rejected by women, a bachelor hopes to won over a former crush by accepting help from an unlikely source: her mother.", ["Feel-Good", "Irrelevant", "Romantic", "Comedy", "Bollywood"]); addComingSoonContent("https://imgur.com/QutnEvW.mp4", "https://imgur.com/c5w3bUt.jpg", "Kaali Khuhi", "When a restless spirit curses a Punjab village that has a history of female infanticide, the town's fate lies in the hands of a 10-year-old girl.", ["Chilling", "Scary", "Dark", "Suspenseful", "Horror", "Ghosts", "Indian"]); addComingSoonContent("https://drive.google.com/uc?export=download&id=1pF6fP0eahtRCbkiPlh84up1qbt8IuqsT", "https://imgur.com/hxvVWR9.jpg", "Holidate", "Fed up with being single on holidays, two strangers agree to be each other's platonic plus-ones all year long, only to catch real feelings along the way.", ["Feel-Good", "Romantic", "Comedy", "Valentine's Day", "US"]); addComingSoonContent("https://drive.google.com/uc?export=download&id=1eFwpFlSy5_BQgkxBahNnFswIxyMBGEGs", "https://imgur.com/xCQC7IV.jpg", "The Haunting of Bly Manor", "Dead doesn't mean gone. An au pair plunges into an abyss of chilling secrets in this gothic romance from the creator of \"The Haunting of Hill House\".", ["Ominous", "Scary", "Dark", "Suspenseful", "Emotional", "Horror"]); addComingSoonContent("https://drive.google.com/uc?export=download&id=1XFz6x9Wd14oi9hWlCgYeNNMiwkilwkaQ", "https://imgur.com/MJPfb39.jpg", "Rebecca", "A young newlywed moves to her husband's imposing estate, where she must contend with his sinister housekeeper and the haunting shadow of his late wife.", ["Chilling", "Psychological", "Suspenseful", "Romantic", "Mystery"]); main = document.getElementById("main"); main.innerHTML += `

`; setTimeout(function() { document.getElementById("loader").style.display = "none"; }, 7000); }; function showNetflix() { document.getElementById("choose-person").style.display = "none"; } // To add movies in the rows of the main page function addRow(height, width, heading, movies) { main = document.getElementById("main"); inner = `

${heading}

`; for (let i = 0; i < movies.length; i++) { if (movies[i].slice(-2) === "<>") { inner += `

`; } else if (movies[i].slice(-2) === "><") { inner += `

`; } else { inner += `

`; } } inner += "

"; main.innerHTML += inner; rowtop+=height+90; } // For defining where the top navbar (in the main page) should be when we scroll function NavBar() { mainNav = document.getElementById("main-nav"); main = document.getElementById("main"); var st = main.scrollTop; mainNav.style.background = `rgba(0,0,0,${st/300})`; navtop += lst - st; if (st > lst) { if (mainNav.offsetTop <= -50) { navtop = -50; } mainNav.style.top = navtop + "px"; } else if (st < lst) { if (mainNav.offsetTop >= 0) { navtop = 0; } mainNav.style.top = navtop + "px"; } lst = st; } // backbutton for the movie page function BackHolder() { var mp = document.getElementById("movie-page"); var bh = document.getElementById("back-holder"); var st = mp.scrollTop; bh.style.background = `rgba(0,0,0,${st/200})`; } // Calling the movie page function call(movie) { if (movie.slice(-2) === "<>" || movie.slice(-2) === "><") { movie = movie.slice(0,-2); } mn = movie; var mpp = document.getElementById("mp-plus"); mpp.innerHTML = "+"; mpp.style.fontSize = "70px"; mpp.style.backgroundImage = "none"; var rt = document.getElementById("rate-thumb"); rt.style.backgroundColor = "transparent"; rt.style.backgroundImage = `url("https://imgur.com/rLVi4GP.png")`; var mp = document.getElementById("movie-page"); mp.style.left = "0"; mp.style.width = "100vw"; var bh = document.getElementById("back-holder"); bh.style.left = "0"; bh.style.width = "100vw"; var mpbg = document.getElementById("mp-bg"); mpbg.style.backgroundImage = `url('${dict[movie][0][0]}.jpg')`; var mpimg = document.getElementById("mp-img"); mpimg.style.backgroundImage = `url('${dict[movie][0][0]}.jpg')`; var mps = document.getElementById("mp-synopsis"); mps.innerHTML = dict[movie][1]; var t1 = document.getElementById("mp-more-like-this"); var t2 = document.getElementById("mp-trailer"); t1.innerHTML = ""; t2.innerHTML = ""; SetTabs(movie); changeTab(0); CheckButtons(); } function CheckButtons() { if (myLiked.includes(mn)) { let rt = document.getElementById("rate-thumb"); rt.style.backgroundColor = "white" rt.style.backgroundImage = "url('https://imgur.com/iArC1rh.jpg')"; } else if (myDisliked.includes(mn)) { let rt = document.getElementById("rate-thumb"); rt.style.backgroundImage = "url('https://imgur.com/FVMIKtW.jpg')"; } if (myList.includes(mn)) { let mpp = document.getElementById("mp-plus"); mpp.innerHTML = "✔"; mpp.style.fontSize = "40px"; } } // When we click at the back button this function is called (for the movie page) function remove() { var mp = document.getElementById("movie-page"); mp.style.left = "100vw"; mp.style.width = "0"; mp.scrollTop = 0; var bh = document.getElementById("back-holder"); bh.style.left = "100vw"; bh.style.width = "0"; let mlt = document.getElementById("mp-more-like-this"); mlt.scrollTop = 0; let video = document.getElementsByTagName("video")[0]; video.pause(); } // Functionality of the rate button of the movie page function rate() { var mp = document.getElementById("movie-page"); var tu = document.getElementById("thumbs-up"); var td = document.getElementById("thumbs-down"); setTimeout(function() { mp.style.filter = "brightness(50%)"; tu.style.display = "block"; td.style.display = "block"; },10); } // Back for the above button function Back() { var mp = document.getElementById("movie-page"); mp.style.filter = "none"; var tu = document.getElementById("thumbs-up"); var td = document.getElementById("thumbs-down"); tu.style.display = "none"; td.style.display = "none"; } // This is called when the bottom tabs are changed (clicked) function changeTab(x) { var mlt = document.getElementById("more-like-this"); var trailer = document.getElementById("trailer"); var tb = document.getElementById("tab-bar"); var t1 = document.getElementById("mp-more-like-this"); var t2 = document.getElementById("mp-trailer"); if (x === 0) { mlt.style.filter = "none"; trailer.style.filter = "brightness(0.5)"; tb.style.left = "5px"; t1.style.left = "0"; t2.style.left = "100vw"; let video = document.getElementsByTagName("video")[0]; video.pause(); } else { mlt.style.filter = "brightness(0.5)"; trailer.style.filter = "none"; tb.style.left = "160px"; t1.style.left = "-100vw"; t2.style.left = "0"; } } // It is for the movie page tabs shown at the bottom (the 2 columns) function SetTabs(m) { var t1 = document.getElementById("mp-more-like-this"); var t2 = document.getElementById("mp-trailer"); var mpp = document.getElementById("mp-play"); if (dict[m].length === 4) { t1.innerHTML = dict[m][3]; } if (dict[m].length >= 3) { t2.innerHTML = dict[m][2]; } } // When we click at a movie in the 'more like this' column function newMovie(name) { remove(); setTimeout(function() { call(name); }, 500); } // activating the tabs when we click at them (the main ones) function activate(x) { let tabs = document.getElementsByClassName("bottom-tabs"); let pages = document.getElementsByClassName("pages"); remove(); for (let i = 0; i < 5; i++) { tabs[i].style.filter = "brightness(0.5)"; pages[i].style.display = "none"; } tabs[x].style.filter = "brightness(1)"; pages[x].style.display = "block"; if (x === 1 && !t2Active) { t2Active = true; t2 = setInterval(ShowSearchResults, 400) } else if (x !== 1) { clearInterval(t2); t2Active = false; } if (x === 0 && !tActive) { tActive = true; t = setInterval(NavBar, 10); } else if (x !== 0) { clearInterval(t); tActive = false; } if (x !== 4) { if (cml%2) { showML(); } if (cmml%2) { showMML(); } } if (x !== 2) { let el = document.getElementsByClassName("cs-movie-video"); for (let i = 0; i < 5; i++) { el[i].pause() } } } // This is specially for the search page, and to make the process quick (no hangs) I have put some if conditions so that if the value is same the system doesn't need to do the whole searching process again function ShowSearchResults() { var input = document.getElementsByTagName("input")[0]; var sr = document.getElementById("search-results"); var ai = document.getElementById("audio-icon"); let movies = {}; let x = input.value.toLowerCase(); var list = []; let t=0,l=0; if (x !== lastvalue) { sr.innerHTML = ""; if (input.value !== "") { ai.style.backgroundImage = "url('https://imgur.com/JLqZjiK.jpg')"; for (let i of Object.keys(dict)) { if (i === x) { movies[i] = Object.keys(movies).includes(i) ? movies[i]+100 : 100; } if (i.includes(x) || x.includes(i)) { movies[i] = Object.keys(movies).includes(i) ? movies[i]+50 : 50; } for (let j of i.split(" ")) { for (let k of x.split(" ")) { if (j === k) { movies[i] = Object.keys(movies).includes(i) ? movies[i]+10 : 10; } if (j.includes(k) || k.includes(j)) { movies[i] = Object.keys(movies).includes(i) ? movies[i]+2 : 2; } } } } let len = Object.keys(movies).length; for (let i = 0; i < len; i++) { let max = Object.values(movies).indexOf(Math.max(...Object.values(movies))); sr.innerHTML += `

`; l+=31; if (l >= 90) { l = 0; t += 47; } delete movies[Object.keys(movies)[max]]; } if (sr.innerHTML === "") { sr.innerHTML = `

` } } else { ai.style.backgroundImage = "url('https://imgur.com/lXYziXE.jpg')"; for (let i of Object.keys(dict)) { sr.innerHTML += `

`; l+=31; if (l >= 90) { l = 0; t += 47; } } } } lastvalue = x } // For the cross button in the search page function clearInput() { var input = document.getElementsByTagName("input")[0]; input.value = ""; } // For the notification page in the 'coming soon' tab function showNots() { var nots = document.getElementById("nots"); nots.style.left = "0"; nots.style.width = "100vw"; } // back button for the above mentioned page function NotsBack() { var nots = document.getElementById("nots"); nots.style.left = "100vw"; nots.style.width = "0"; } // Js loops and functions are awesome (as can be seen in the window.onload function), I can simply call this function to add more movies in the coming soon page. This made the process very easy and less time consuming function addComingSoonContent(video, icon, name, synopsis, genre) { var csp = document.getElementById("coming-soon-page"); csp.innerHTML += `

${name}

${synopsis}

${genre.join(" • ")}

`; cstop[0]+=60; cstop[1]+=200; } // Weird name though but very useful, it sets the scroll of the main page (first shown home page) when we click at the top buttons function showShows(x) { t3 = setInterval(function() { let main = document.getElementById("main"); if (main.scrollTop < x-15) { main.scrollTop+=25; } else if (main.scrollTop > x+15){ main.scrollTop-=25; } else { clearInterval(t3) } }, 1); } function addDownloads() { if (downloads.includes(mn) === false && mn !== "") { downloads.push(mn); setTimeout(function() { alertBox(`${mn} downloaded`) }, 500); } } function alertBox(x) { var ab = document.getElementById("alert-box"); var val = []; for (let i of x.split(" ")) { val.push(i.slice(0,1).toUpperCase() + i.slice(1)) } ab.innerHTML = val.join(" "); ab.style.top = "70vh"; setTimeout(function() { ab.style.top = "100vh"; }, 1000); } function dpMovies() { var dp = document.getElementById("downloads-page"); if (downloads.length === 0) { dp.innerHTML = '

'; } else { let inner = "" for (let i of downloads) { inner += `

${i.toUpperCase()}

`; } dp.innerHTML = inner + "

"; } } function showMML() { cmml++; let arrow = document.getElementById("mml-arrow"); let movies = document.getElementById("mml-movies"); let mml = document.getElementById("more-my-list"); if (cmml%2) { arrow.style.transform = "rotate(-90deg)"; arrow.style.top = "-5px"; arrow.style.left = "calc(100vw - 60px)"; movies.style.height = "200px"; mml.style.height = "250px"; let val = ""; for (let i of myList) { val += `

${i.toUpperCase()}

`; } if (val === "") { val = "

No Movie or TV Show :(

"; } movies.innerHTML = val; } else { arrow.style.transform = "rotate(90deg)"; arrow.style.top = "15px"; arrow.style.left = "calc(100vw - 50px)"; movies.style.height = "0"; mml.style.height = "50px"; movies.innerHTML = ""; } } function showML() { cml++; let arrow = document.getElementById("ml-arrow"); let ml = document.getElementById("more-liked"); let movies = document.getElementById("ml-movies"); if (cml%2) { arrow.style.transform = "rotate(-90deg)"; arrow.style.top = "-5px"; arrow.style.left = "calc(100vw - 60px)"; movies.style.height = "200px"; ml.style.height = "250px"; let val = ""; for (let i of myLiked) { val += `

${i.toUpperCase()}

`; } if (val === "") { val = "

No Movie or TV Show :(

"; } movies.innerHTML = val; } else { arrow.style.transform = "rotate(90deg)"; arrow.style.top = "15px"; arrow.style.left = "calc(100vw - 50px)"; movies.style.height = "0"; ml.style.height = "50px"; movies.innerHTML = ""; } } function like() { Back() if (myLiked.includes(mn) === false) { myLiked.push(mn); if (myDisliked.includes(mn)) { myDisliked.splice(myDisliked.indexOf(mn), 1) } alertBox(mn + " liked"); } let rt = document.getElementById("rate-thumb"); rt.style.backgroundColor = "white"; rt.style.backgroundImage = "url('https://imgur.com/iArC1rh.jpg')"; } function dislike() { Back() if (myDisliked.includes(mn) === false) { myDisliked.push(mn); if (myLiked.includes(mn)) { myLiked.splice(myLiked.indexOf(mn), 1) } alertBox(mn + " disliked"); } let rt = document.getElementById("rate-thumb"); rt.style.backgroundImage = "url('https://imgur.com/FVMIKtW.jpg')"; } function addMyList(m = mn) { if (myList.includes(m) === false) { myList.push(m); alertBox(m + " added to My List"); } let mpp = document.getElementById("mp-plus"); mpp.innerHTML = "✔"; mpp.style.fontSize = "40px"; //mpp.style.backgroundImage = "url('https://imgur.com/q4OgwyF.jpg')"; } function showTrailer() { let mp = document.getElementById("movie-page"); mp.scrollTop = 500; changeTab(1); let video = document.getElementsByTagName("video")[0]; video.play(); } function addToMyList(x) { addMyList(x); let plus = document.getElementById("plus"); plus.innerHTML = "✔"; plus.style.fontSize = "40px"; } function addToMyList2(x) { addMyList(x); let plus = document.getElementsByTagName("u")[0]; plus.innerHTML = "✔"; plus.style.fontSize = "30px" }

🔥🙌 Netflix Clone 🙌🔥