├── src ├── scss │ └── styles.scss ├── images │ ├── next.png │ ├── star.png │ ├── btn-play.png │ ├── favicon.png │ ├── search.png │ └── attribution.svg ├── fonts │ └── SF-Pro-Text.woff └── js │ ├── element.js │ ├── getApi.js │ ├── trailer.js │ └── movies.js ├── .gitignore ├── example ├── laptop.png ├── tablet.png ├── smartphone.png ├── play-on-laptop.png └── play-on-smartphone.png ├── dist ├── fonts │ └── SF-Pro-Text-4f9cec2c.woff ├── js │ ├── trailer-1b46da01.js │ └── main-4282af19.js └── css │ └── main-cfc7d048.css ├── package.json ├── README.md ├── webpack.config.js ├── template.html └── index.html /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @use "main.scss"; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | apikey.env 4 | src/scss/_*.scss -------------------------------------------------------------------------------- /example/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/example/laptop.png -------------------------------------------------------------------------------- /example/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/example/tablet.png -------------------------------------------------------------------------------- /src/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/images/next.png -------------------------------------------------------------------------------- /src/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/images/star.png -------------------------------------------------------------------------------- /example/smartphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/example/smartphone.png -------------------------------------------------------------------------------- /src/images/btn-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/images/btn-play.png -------------------------------------------------------------------------------- /src/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/images/favicon.png -------------------------------------------------------------------------------- /src/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/images/search.png -------------------------------------------------------------------------------- /example/play-on-laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/example/play-on-laptop.png -------------------------------------------------------------------------------- /src/fonts/SF-Pro-Text.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/src/fonts/SF-Pro-Text.woff -------------------------------------------------------------------------------- /example/play-on-smartphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/example/play-on-smartphone.png -------------------------------------------------------------------------------- /dist/fonts/SF-Pro-Text-4f9cec2c.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devnazir/movietrailer/HEAD/dist/fonts/SF-Pro-Text-4f9cec2c.woff -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movietrailer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --config webpack.config.js --mode production --watch" 8 | }, 9 | "author": "Nazir Bahrul Ulum", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "compression-webpack-plugin": "^7.1.2", 14 | "css-loader": "^5.0.1", 15 | "css-minimizer-webpack-plugin": "^1.2.0", 16 | "dotenv": "^8.2.0", 17 | "file-loader": "^6.2.0", 18 | "html-webpack-plugin": "^5.0.0-alpha.10", 19 | "mini-css-extract-plugin": "^1.3.3", 20 | "process": "^0.11.10", 21 | "sass": "^1.32.2", 22 | "sass-loader": "^10.1.1", 23 | "url-loader": "^4.1.1", 24 | "webpack": "^5.12.3", 25 | "webpack-cli": "^4.3.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/js/element.js: -------------------------------------------------------------------------------- 1 | class ElementMovies { 2 | constructor() { 3 | this.loading = document.querySelectorAll(".loading .circle"); 4 | this.containerPopularMovies = document.querySelector(".content-popular"); 5 | this.containerGenresMovies = document.querySelector("section#genre .movies"); 6 | this.containerFeaturedMovies = document.querySelector("section#featured .featured-movies"); 7 | this.linkGenre = document.querySelectorAll(".genre-nav a"); 8 | this.search = document.querySelector(".input-search"); 9 | this.genreNav = document.querySelectorAll(".genre-nav li"); 10 | this.ul = document.querySelector(".genre-nav ul"); 11 | this.next = document.querySelector(".next"); 12 | this.iconSearch = document.querySelector(".icon-search"); 13 | this.hamburger = document.querySelector("nav .hamburger"); 14 | } 15 | } 16 | 17 | export { ElementMovies }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Movietrailer 2 | Movietrailer ✅ merupakan Website yang berisi trailer movie, menggunakan Public API dari https://www.themoviedb.org/ dan Youtube API https://developers.google.com/youtube/v3/docs. 3 | 4 | ## Cara install 5 | 12 | 13 | #### Note: 14 | Agar programnya jalan Silahkan buat sebuah file .env dengan nama 'apikey.env', lalu isi filenya dengan seperti ini: 15 | ``` 16 | APIKEY_YT=Api key Milik Kamu 17 | APIKEY_TMDB=Api key Milik Kamu 18 | ``` 19 | 20 | #### Contoh: 21 | ``` 22 | APIKEY_YT=AIzaSyCqs12439sdffjsd 23 | APIKEY_TMDB=46dh279043hsdfh32 24 | ``` 25 | 26 | ### Screenshoot 27 | #### Laptop : 28 | ![Laptop](/example/laptop.png) 29 | #### Tablet : 30 | ![Tablet](/example/tablet.png) 31 | #### Smartphone : 32 | ![Smartphone](/example/smartphone.png) 33 | 34 | ### Play Video 35 | ![play](/example/play-on-smartphone.png) 36 | ![play](/example/play-on-laptop.png) 37 | 38 | Thanks to Irvan for your Design 😁😁😃 39 | -------------------------------------------------------------------------------- /dist/js/trailer-1b46da01.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunkmovietrailer=self.webpackChunkmovietrailer||[]).push([[955],{95:(e,t,i)=>{"use strict";i.r(t),i.d(t,{Trailer:()=>a});var r=i(569);class a{constructor(){this.trailerContainer=document.querySelector(".trailer-container"),this.content=this.trailerContainer.querySelector(".trailer-container .content"),this.loadBody=document.querySelector(".loading-body"),this.circleLoadBody=this.loadBody.querySelector(".circle"),this.loadBody.classList.add("show"),this.circleLoadBody.classList.add("spin")}async getTrailer(e){try{const t=e.dataset.btn,i=await new r.L({path:"search",query:t}).trailer(),a=await new r.L({path:"search/multi",query:t}).movies();this.showTrailerMovies(i,a[0])}catch(e){console.log(e)}}showTrailerMovies(e,t){this.trailerContainer.classList.add("full-height");const i=e.items[0].id.videoId,r=t.original_title??t.original_name,a=t.overview;this.content.innerHTML=this.templateTrailer(i,r,a),this.loadBody.classList.remove("show"),this.circleLoadBody.classList.remove("spin"),this.content.querySelector(".btn-back").addEventListener("click",(()=>{this.trailerContainer.classList.remove("full-height")}))}templateTrailer(e,t,i){return`\n
\n \n
\n
\n

${t}

\n \n

${i}

\n
\n Back to Homepage\n
\n
\n `}}}}]); -------------------------------------------------------------------------------- /src/js/getApi.js: -------------------------------------------------------------------------------- 1 | export class publicApi { 2 | constructor(object) { 3 | const { path, query, page } = object; 4 | this.path = path; 5 | this.query = query; 6 | this.page = page; 7 | 8 | this.url = ""; 9 | this.api = ""; 10 | this.apiKey = ""; 11 | } 12 | 13 | async movies() { 14 | this.api = `https://api.themoviedb.org/3/`; 15 | this.apiKey = process.env.APIKEY_TMDB; 16 | 17 | const query = this.query ?? ''; 18 | const page = this.page ?? ''; 19 | this.url = `${this.api}${this.path}?api_key=${this.apiKey}&page=${page}&query=${query}`; 20 | 21 | if (query === "" && page === "" && this.url.includes("&query=")) { 22 | return await fetch(this.url.replace("&page=&query=", "")) 23 | .then(response => { 24 | if (!response.ok) { 25 | throw new Error(response.statusText) 26 | } 27 | return response.json(); 28 | }).then(response => response.results); 29 | } 30 | 31 | return await fetch(this.url).then(response => { 32 | if (!response.ok) { 33 | throw new Error(response.statusText) 34 | } 35 | return response.json(); 36 | }).then(response => response.results); 37 | } 38 | async trailer(channelId) { 39 | this.api = `https://youtube.googleapis.com/youtube/v3/`; 40 | this.apiKey = process.env.APIKEY_YT; 41 | 42 | const id = channelId ?? ''; 43 | this.url = `${this.api}${this.path}?part=snippet&channelId=${id}&maxResults=1&q=${this.query}&type=video&key=${this.apiKey}` 44 | return await fetch(this.url).then(response => { 45 | if (!response.ok) { 46 | throw new Error(response.statusText); 47 | } 48 | return response.json(); 49 | }) 50 | } 51 | } -------------------------------------------------------------------------------- /src/images/attribution.svg: -------------------------------------------------------------------------------- 1 | Asset 5 -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const htmlPlugin = require("html-webpack-plugin"); 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 3 | const cssExternal = require("mini-css-extract-plugin"); 4 | const path = require("path"); 5 | const webpack = require('webpack') 6 | const dotenv = require("dotenv"); 7 | 8 | module.exports = { 9 | entry: { 10 | main: './src/js/movies.js' 11 | }, 12 | output: { 13 | filename: '[name]-[contenthash:8].js', 14 | chunkFilename: '[name]-[contenthash:8].js', 15 | path: path.resolve(__dirname, 'dist', 'js') 16 | }, 17 | plugins: [ 18 | new htmlPlugin({ 19 | template: 'template.html', 20 | filename: '../../index.html' 21 | }), 22 | new cssExternal({ 23 | filename: '../css/[name]-[contenthash:8].css', 24 | }), 25 | new CleanWebpackPlugin({ 26 | dry: false, 27 | dangerouslyAllowCleanPatternsOutsideProject: true, 28 | cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist/**/*')] 29 | }), 30 | new webpack.ProvidePlugin({ 31 | process: 'process/browser', 32 | }), 33 | new webpack.DefinePlugin({ 34 | 'process.env': JSON.stringify(dotenv.config({ path: 'apikey.env' }).parsed) 35 | }) 36 | ], 37 | module: { 38 | rules: [ 39 | { 40 | test: /\.s?css$/, 41 | use: [cssExternal.loader, 'css-loader', 'sass-loader'] 42 | }, 43 | { 44 | test: /\.(png|jpeg|jpg|svg)$/i, 45 | use: { 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | outputPath: '../images/', 50 | publicPath: 'dist/images', 51 | name: '[name]-[hash:8].[ext]', 52 | esModule: false, 53 | } 54 | } 55 | }, 56 | { 57 | test: /\.(ttf|woff)$/i, 58 | use: { 59 | loader: 'file-loader', 60 | options: { 61 | outputPath: '../fonts/', 62 | publicPath: '../fonts', 63 | name: '[name]-[hash:8].[ext]' 64 | } 65 | } 66 | } 67 | ] 68 | }, 69 | } -------------------------------------------------------------------------------- /src/js/trailer.js: -------------------------------------------------------------------------------- 1 | import { publicApi as Api } from './getApi'; 2 | 3 | export class Trailer { 4 | constructor() { 5 | this.trailerContainer = document.querySelector(".trailer-container"); 6 | this.content = this.trailerContainer.querySelector(".trailer-container .content"); 7 | this.loadBody = document.querySelector(".loading-body"); 8 | this.circleLoadBody = this.loadBody.querySelector(".circle"); 9 | this.loadBody.classList.add("show"); 10 | this.circleLoadBody.classList.add("spin"); 11 | } 12 | 13 | async getTrailer(event) { 14 | try { 15 | const querySeacrh = event.dataset.btn; 16 | const dataTrailer = await new Api({ 17 | path: "search", 18 | query: querySeacrh, 19 | }).trailer(); 20 | 21 | const dataMovie = await new Api({ 22 | path: "search/multi", 23 | query: querySeacrh 24 | }).movies(); 25 | 26 | this.showTrailerMovies(dataTrailer, dataMovie[0]); 27 | } 28 | catch (err) { 29 | console.log(err); 30 | } 31 | } 32 | 33 | showTrailerMovies(dataTrailer, dataMovie) { 34 | this.trailerContainer.classList.add("full-height"); 35 | const videoId = dataTrailer.items[0].id.videoId; 36 | 37 | const title = dataMovie.original_title ?? dataMovie.original_name; 38 | const overview = dataMovie.overview; 39 | 40 | this.content.innerHTML = this.templateTrailer(videoId, title, overview); 41 | this.loadBody.classList.remove("show"); 42 | this.circleLoadBody.classList.remove("spin"); 43 | 44 | const btnBack = this.content.querySelector(".btn-back"); 45 | btnBack.addEventListener("click", () => { 46 | this.trailerContainer.classList.remove("full-height"); 47 | }); 48 | } 49 | 50 | templateTrailer(videoId, title, overview) { 51 | return ` 52 |
53 | 54 |
55 |
56 |

${title}

57 | 58 |

${overview}

59 |
60 | Back to Homepage 61 |
62 |
63 | `; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MovieTrailer 9 | 10 | 12 | 15 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |
25 | 43 | 44 |
45 |

Popular Movies

46 |
47 |
48 | 49 | 50 | 51 |
52 | 53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 |
61 |

Browse by Genre

62 |
63 | 71 |
72 |
73 |
74 | 75 | Page 1 76 | 77 |
78 |
79 |
80 |
81 |
82 | 83 | 95 | 96 |
97 |

Result

98 |
99 |
100 | 101 |
102 | 103 | 111 | 112 |
113 |
114 |
115 |
116 | 117 | 118 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | MovieTrailer

Popular Movies

Browse by Genre

Page 1

Result

-------------------------------------------------------------------------------- /dist/js/main-4282af19.js: -------------------------------------------------------------------------------- 1 | (()=>{var e,t,s={819:e=>{e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAwFBMVEUAAAAgcN8saNsrZt0rat8sat8tad8sad8sad8tadwsad8qaNwsat8rad8oaN8padwtad8rad8wcN8rat8sauEsaN0raN8pZtwsaN8rZt8rad0sad8sad4taN4raN4tad8taN8saN8tat8waN8saN0tad8uZt8sad4sad4rad4sad85cuHl7Pt7oetGfOP///9ul+mwxvNGe+OVtO/Y4vmIq+3K2vdhj+fy9f2Jq+2WtO85c+GjvfFTheWwx/PX4/lYsXJgAAAAKnRSTlMAEEBwn8/fv69Q72B/3yBQj48Qz3+An1BAcHDPwKCwUGCAnyCQ73Dg0KC6Ue7aAAAAAWJLR0QvI9QgEQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+UBDQgMFYosK6MAAAGuSURBVEjHndfbeoIwDADgogKK4pSd3KaoA3WrzO6ITnZ4/7daRZ1KmzYlt/B/SWpKKyGSsCrVmu1QHo5br1YILqyG69GT8OpNBGsV1Db8WrsMy6OloGcw22SFCrY6VBPdQOba51QbvqTctk9pGYlzosS6orTQjlL7eIU61CC6B9ekRtEwb3A3u/tiL6hhXO4SCg/mc1TKK+FBkjxhUgodLhhjybM2pbikG8jYy6tCXnNYByBjbzB1OfRAyOBWea09CkNOoaQVcqOEYKu3khZPIW9VBmvE1UJpq3fE0UPG3oV6fUIxUNIqFrLkoyRkSUmYLgsQtThs9Sksjo2B66z4Tp8M9DBdiO+E2pFjyVI+cuohF5v7H/LAU8GvDNhWfD+6MEy/of0YcjiEoLy5bYw4FGvN4Wqdwc7Jv3JjGfzJVF+5+xyKKX/Tpfq7GhF5SuQRIPtFlOFE++NqaAZHhwMyNnHx0Ykc2AaFnlx2Ise8QTNZdFgpOpy0I9llLtCubRwA98eRMulkCF9YI3j6JuNAeUeOBk4Zti04nBRUvxEg/wn0pmF/tjGzh8dpT6r+ADvWmQmg1pUBAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTEzVDA4OjEyOjA1KzAwOjAwr3gO7AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0xM1QwODoxMjowNSswMDowMN4ltlAAAAAASUVORK5CYII="},344:e=>{e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEoSURBVHgBlVPLbcMwDOXHvWcEdwMpaM/1Bl0hvQToLRsE3aC9pgiKbtANOkAPVjtBRnDOscpQThRE+SgOAQMmxfdIPlEAGfubD0f1+12Vyylyh4Q4JZZGf+3ZHMhUF4FSP/M7H07O5eGpYP1hyhvh70CwDTUt+Vv75JosgQIH7KEi5EcBGB3kfon4T78CZ5/dYkdQz+5Nwf9TRDEiWEIP06oLLeBa71/Ijn+ctrrsCw6m4KDN0o6d60T07CdK6/oSIKLrMLCnQZi/UOGU3mTB2v6KvI2CpiLOjOrBdY5A57ah9egne1AgDOBKSwgE+SIBAyUjJqssIkYFiq7OiG8aK4ngIS6VHHSZvoXNYQdsqX2NQoXNZKGqexu4285jCyKG24CMhZx9fw35xXbA3444vwAAAABJRU5ErkJggg=="},569:(e,t,s)=>{"use strict";s.d(t,{L:()=>i});class i{constructor(e){const{path:t,query:s,page:i}=e;this.path=t,this.query=s,this.page=i,this.url="",this.api="",this.apiKey=""}async movies(){this.api="https://api.themoviedb.org/3/",this.apiKey="6fa39716df5c82d1be46c3d685c8c56c";const e=this.query??"",t=this.page??"";return this.url=`${this.api}${this.path}?api_key=${this.apiKey}&page=${t}&query=${e}`,""===e&&""===t&&this.url.includes("&query=")?await fetch(this.url.replace("&page=&query=","")).then((e=>{if(!e.ok)throw new Error(e.statusText);return e.json()})).then((e=>e.results)):await fetch(this.url).then((e=>{if(!e.ok)throw new Error(e.statusText);return e.json()})).then((e=>e.results))}async trailer(e){this.api="https://youtube.googleapis.com/youtube/v3/",this.apiKey="AIzaSyCqsoYk6gWBrvtLCubO2-Ec0HhtDty_YW8";const t=e??"";return this.url=`${this.api}${this.path}?part=snippet&channelId=${t}&maxResults=1&q=${this.query}&type=video&key=${this.apiKey}`,await fetch(this.url).then((e=>{if(!e.ok)throw new Error(e.statusText);return e.json()}))}}}},i={};function n(e){if(i[e])return i[e].exports;var t=i[e]={exports:{}};return s[e](t,t.exports,n),t.exports}n.m=s,n.d=(e,t)=>{for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,s)=>(n.f[s](e,t),t)),[])),n.u=e=>"trailer-1b46da01.js",n.miniCssF=e=>"../css/"+{179:"main",955:"trailer"}[e]+"-"+{179:"undefine",955:"31d6cfe0"}[e]+".css",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="movietrailer:",n.l=(s,i,a,r)=>{if(e[s])e[s].push(i);else{var o,l;if(void 0!==a)for(var c=document.getElementsByTagName("script"),d=0;d{o.onerror=o.onload=null,clearTimeout(p);var n=e[s];if(delete e[s],o.parentNode&&o.parentNode.removeChild(o),n&&n.forEach((e=>e(i))),t)return t(i)},p=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),l&&document.head.appendChild(o)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var s=t.getElementsByTagName("script");s.length&&(e=s[s.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={179:0};n.f.j=(t,s)=>{var i=n.o(e,t)?e[t]:void 0;if(0!==i)if(i)s.push(i[2]);else{var a=new Promise(((s,n)=>{i=e[t]=[s,n]}));s.push(i[2]=a);var r=n.p+n.u(t),o=new Error;n.l(r,(s=>{if(n.o(e,t)&&(0!==(i=e[t])&&(e[t]=void 0),i)){var a=s&&("load"===s.type?"missing":s.type),r=s&&s.target&&s.target.src;o.message="Loading chunk "+t+" failed.\n("+a+": "+r+")",o.name="ChunkLoadError",o.type=a,o.request=r,i[1](o)}}),"chunk-"+t,t)}};var t=(t,s)=>{for(var i,a,[r,o,l]=s,c=0,d=[];c{"use strict";var e=n(569);class t extends class{constructor(){this.loading=document.querySelectorAll(".loading .circle"),this.containerPopularMovies=document.querySelector(".content-popular"),this.containerGenresMovies=document.querySelector("section#genre .movies"),this.containerFeaturedMovies=document.querySelector("section#featured .featured-movies"),this.linkGenre=document.querySelectorAll(".genre-nav a"),this.search=document.querySelector(".input-search"),this.genreNav=document.querySelectorAll(".genre-nav li"),this.ul=document.querySelector(".genre-nav ul"),this.next=document.querySelector(".next"),this.iconSearch=document.querySelector(".icon-search"),this.hamburger=document.querySelector("nav .hamburger")}}{constructor(){super(),this.scrollLeft,this.onMouseDown=!1,this.startX=0,this.scroll=0,this.slideIndex=0,this.page=1,this.loading.forEach((e=>{e.classList.add("spin")})),this.getPopularMovies(),this.event()}async searchMovies(s){if("Enter"==s.key)try{const s=this.value,i=await new e.L({path:"search/multi",query:s}).movies();(new t).updateUISection(i)}catch(e){console.log(e)}}updateUISection(e){const t=document.querySelectorAll("section"),s=document.querySelector(".result-search"),i=s.querySelector("button"),n=document.querySelector(".popular-movies"),a=document.querySelector("header");i.addEventListener("click",(()=>{t.forEach((e=>{e.style.display="block"})),a.style.cssText="height: auto;",n.style.display="block",s.style.display="none"})),a.style.cssText="height: 50px;",n.style.display="none",s.style.display="block",t.forEach((e=>{e.style.display="none"})),this.showResultMovies(e,s)}showResultMovies(e,t){let s="";const i=t.querySelector(".cards");e.forEach((e=>{console.log(e),s+=this.templateGenres(e)})),i.innerHTML=s}clickingButtonPlay(e){e.path.some((e=>{if("next-pop"===e.className||"card-title"===e.className)n.e(955).then(n.bind(n,95)).then((t=>{(new t.Trailer).getTrailer(e)}));else if("icon-search"==e.className){const t=e.previousElementSibling;t.classList.add("show"),t.focus(),e.classList.add("hide"),t.addEventListener("focusout",(()=>{t.classList.remove("show"),e.classList.remove("hide"),t.value=""}))}}))}async getPopularMovies(){try{const t=await new e.L({path:"trending/movie/week",query:""}).movies();this.updateUIPopularMovies(t),this.removeClassSpin()}catch(e){console.log(e)}}removeClassSpin(){this.loading.forEach((e=>{e.classList.remove("spin"),e.parentElement.style.display="none"}))}updateUIPopularMovies(e){let t="";e.forEach((e=>{t+=this.templatePopular(e)})),this.containerPopularMovies.innerHTML=t,this.checkWidthUserBrowser()}checkWidthUserBrowser(){if(window.innerWidth<=576){const e=this.containerPopularMovies.querySelectorAll(".card"),t=document.getElementsByClassName("dot"),s=document.querySelector("section#genre"),i=s.querySelector("h3");s.style.marginTop="1rem",i.textContent="Recommended Movies",this.ul.style.display="none",this.showSlides(e,t)}if(window.innerWidth<=992){const e=document.querySelector(".page-featured .next-page"),t=document.querySelector(".page-featured .page-currently"),s=document.querySelector(".page-featured .prev-page");e.addEventListener("click",(()=>{this.page++,this.getFeaturedMovies(this.page),t.textContent=`Page ${this.page}`})),s.addEventListener("click",(()=>{this.page--,this.page<=0&&(this.page=1),t.textContent=`Page ${this.page}`,this.getFeaturedMovies(this.page)})),this.getFeaturedMovies()}}async getFeaturedMovies(t){const s=await new e.L({path:"trending/all/week",query:"",page:t}).movies();this.updateUIFeaturedMovies(s)}updateUIFeaturedMovies(e){let t="";e.forEach((e=>{t+=this.templateGenres(e)})),this.containerFeaturedMovies.innerHTML=t}browseByGenre(){const e=this.dataset.genre;(new s).checkActiveClass(),this.classList.add("active"),(new s).checkGenreId(e)}event(){this.containerPopularMovies.addEventListener("mousedown",this.mouseDown),this.containerPopularMovies.addEventListener("mousemove",this.mouseMove),this.containerPopularMovies.addEventListener("mouseup",this.mouseUp),this.containerPopularMovies.addEventListener("mouseleave",this.mouseUp),this.containerGenresMovies.addEventListener("mousedown",this.mouseDown),this.containerGenresMovies.addEventListener("mousemove",this.mouseMove),this.containerGenresMovies.addEventListener("mouseup",this.mouseUp),this.containerGenresMovies.addEventListener("mouseleave",this.mouseUp),this.ul.addEventListener("mousedown",this.mouseDown),this.ul.addEventListener("mousemove",this.mouseMove),this.ul.addEventListener("mouseup",this.mouseUp),this.ul.addEventListener("mouseleave",this.mouseUp),this.search.addEventListener("keydown",this.searchMovies),document.addEventListener("click",this.clickingButtonPlay),this.hamburger.addEventListener("click",this.openMenu)}openMenu(){const e=this.nextElementSibling.nextElementSibling;if(e.classList.contains("open-menu"))return this.classList.remove("fixed"),void e.classList.remove("open-menu");e.classList.add("open-menu"),this.classList.add("fixed")}mouseDown(e){e.preventDefault(),t.onMouseDown=!0,t.startX=e.clientX,t.scrollLeft=this.scrollLeft}mouseMove(e){if(e.preventDefault(),!t.onMouseDown)return;let s=e.clientX;t.scroll=s-t.startX,"content-popular"==this.className?(this.scrollLeft=t.scrollLeft-t.scroll,this.scrollLeft==this.scrollWidth-this.clientWidth?this.nextElementSibling.style.cssText="opacity: 1":this.nextElementSibling.style.cssText="opacity: 0"):("movies"==this.className||"links"==this.className)&&(this.scrollLeft=t.scrollLeft-t.scroll)}mouseUp(){t.onMouseDown=!1}templatePopular(e){return`
\n
\n Thumbnail\n \n
\n
\n

${e.title}

\n ${e.release_date}\n
\n
\n
\n Star\n

${e.vote_average}

\n
\n
\n
`}templateGenres(e){return`
\n
\n Thumbnail\n
\n
\n

${"movie"==e.media_type?e.title:e.name??e.original_title}

\n ${e.release_date}\n
\n Star\n

${e.vote_average}

\n
\n
\n
`}showSlides(e,t){for(let t=0;t<4;t++)e[t].style.display="none";this.slideIndex++,this.slideIndex>=4&&(this.slideIndex=1);for(let e=0;e{this.showSlides(e,t)}),3e3)}}class s extends t{constructor(){super(),this.event(),this.pageGenre=1,this.clickingPagination()}clickingPagination(){const e=document.querySelector(".page-genres .next-page"),t=document.querySelector(".page-genres .page-currently"),s=document.querySelector(".page-genres .prev-page");e.addEventListener("click",(()=>{this.pageGenre++,this.checkGenreId("all",this.pageGenre),t.textContent=`Page ${this.pageGenre}`})),s.addEventListener("click",(()=>{this.pageGenre--,this.pageGenre<=0&&(this.pageGenre=1),t.textContent=`Page ${this.pageGenre}`,this.checkGenreId("all",this.pageGenre)}))}event(){this.genreNav.forEach((e=>e.addEventListener("click",this.browseByGenre))),this.linkGenre.forEach((e=>e.addEventListener("click",(e=>e.preventDefault()))))}checkActiveClass(){return this.genreNav.forEach((e=>{e.classList.contains("active")&&e.classList.remove("active")}))}async checkGenreId(t,s){try{const i=await new e.L({path:"trending/movie/day",query:"",page:s}).movies();this.updateUIGenreMovies(i,t)}catch(e){console.log(e)}}updateUIGenreMovies(e,t){let s="";e.reverse().forEach((e=>{e.genre_ids.includes(parseInt(t))&&(s+=this.templateGenres(e)),"all"==t&&(s+=this.templateGenres(e))})),this.containerGenresMovies.innerHTML=s}}window.innerWidth<=576?(new s).checkGenreId("all"):(new s).checkGenreId(28),new t})()})(); -------------------------------------------------------------------------------- /src/js/movies.js: -------------------------------------------------------------------------------- 1 | import '../scss/styles.scss'; 2 | import { publicApi as Api } from './getApi'; 3 | import { ElementMovies } from './element'; 4 | 5 | class Movies extends ElementMovies { 6 | constructor() { 7 | super(); 8 | this.scrollLeft; 9 | this.onMouseDown = false; 10 | this.startX = 0; 11 | this.scroll = 0; 12 | this.slideIndex = 0; 13 | this.page = 1; 14 | 15 | this.loading.forEach(loading => { 16 | loading.classList.add("spin") 17 | }); 18 | 19 | this.getPopularMovies(); 20 | this.event(); 21 | } 22 | 23 | async searchMovies(event) { 24 | if (event.key == "Enter") { 25 | try { 26 | const value = this.value; 27 | const data = await new Api({ 28 | path: "search/multi", 29 | query: value, 30 | }).movies(); 31 | 32 | new Movies().updateUISection(data) 33 | } 34 | 35 | catch (err) { 36 | console.log(err) 37 | } 38 | 39 | } 40 | } 41 | 42 | updateUISection(data) { 43 | const section = document.querySelectorAll("section"); 44 | const resultSearch = document.querySelector(".result-search"); 45 | const btnBack = resultSearch.querySelector("button"); 46 | const popularMov = document.querySelector(".popular-movies"); 47 | const header = document.querySelector("header"); 48 | 49 | btnBack.addEventListener("click", () => { 50 | section.forEach(sec => { 51 | sec.style.display = "block"; 52 | }); 53 | header.style.cssText = "height: auto;" 54 | popularMov.style.display = "block"; 55 | resultSearch.style.display = "none"; 56 | return; 57 | }); 58 | 59 | header.style.cssText = "height: 50px;" 60 | popularMov.style.display = "none"; 61 | resultSearch.style.display = "block"; 62 | section.forEach(sec => { 63 | sec.style.display = "none"; 64 | }); 65 | 66 | this.showResultMovies(data, resultSearch); 67 | } 68 | 69 | showResultMovies(data, resultSearch) { 70 | let resultMov = ""; 71 | const cards = resultSearch.querySelector(".cards") 72 | data.forEach(movie => { 73 | console.log(movie) 74 | resultMov += this.templateGenres(movie); 75 | }); 76 | 77 | cards.innerHTML = resultMov; 78 | } 79 | 80 | clickingButtonPlay(event) { 81 | event.path.some(check => { 82 | if (check.className === "next-pop" || check.className === "card-title") { 83 | import(/* webpackChunkName: 'trailer' */ './trailer') 84 | .then(response => { 85 | new response.Trailer().getTrailer(check); 86 | }) 87 | } else if (check.className == "icon-search") { 88 | const inputsearch = check.previousElementSibling; 89 | inputsearch.classList.add("show"); 90 | inputsearch.focus(); 91 | check.classList.add("hide"); 92 | 93 | inputsearch.addEventListener("focusout", () => { 94 | inputsearch.classList.remove("show"); 95 | check.classList.remove("hide"); 96 | inputsearch.value = ""; 97 | }); 98 | } 99 | }); 100 | 101 | } 102 | 103 | async getPopularMovies() { 104 | try { 105 | const data = await new Api({ 106 | path: "trending/movie/week", 107 | query: "", 108 | }).movies(); 109 | 110 | this.updateUIPopularMovies(data); 111 | this.removeClassSpin(); 112 | } 113 | 114 | catch (err) { 115 | console.log(err) 116 | } 117 | } 118 | 119 | removeClassSpin() { 120 | this.loading.forEach(loading => { 121 | loading.classList.remove("spin"); 122 | loading.parentElement.style.display = 'none'; 123 | }); 124 | } 125 | 126 | updateUIPopularMovies(data) { 127 | let popular = ""; 128 | data.forEach(movie => { 129 | popular += this.templatePopular(movie); 130 | }); 131 | 132 | this.containerPopularMovies.innerHTML = popular; 133 | this.checkWidthUserBrowser(); 134 | } 135 | 136 | checkWidthUserBrowser() { 137 | if (window.innerWidth <= 576) { 138 | const images = this.containerPopularMovies.querySelectorAll(".card"); 139 | const dots = document.getElementsByClassName("dot"); 140 | const sectionGenre = document.querySelector("section#genre"); 141 | const h3 = sectionGenre.querySelector("h3"); 142 | 143 | sectionGenre.style.marginTop = "1rem"; 144 | h3.textContent = "Recommended Movies"; 145 | this.ul.style.display = "none"; 146 | 147 | this.showSlides(images, dots); 148 | } 149 | 150 | if (window.innerWidth <= 992) { 151 | const nextPage = document.querySelector(".page-featured .next-page"); 152 | const span = document.querySelector(".page-featured .page-currently"); 153 | const prevPage = document.querySelector(".page-featured .prev-page"); 154 | 155 | nextPage.addEventListener("click", () => { 156 | this.page++; 157 | this.getFeaturedMovies(this.page); 158 | span.textContent = `Page ${this.page}`; 159 | return; 160 | }); 161 | 162 | prevPage.addEventListener("click", () => { 163 | this.page--; 164 | if (this.page <= 0) this.page = 1; 165 | span.textContent = `Page ${this.page}`; 166 | this.getFeaturedMovies(this.page); 167 | return; 168 | }); 169 | 170 | 171 | this.getFeaturedMovies(); 172 | } 173 | } 174 | 175 | async getFeaturedMovies(page) { 176 | const data = await new Api({ 177 | path: "trending/all/week", 178 | query: "", 179 | page: page, 180 | }).movies(); 181 | 182 | this.updateUIFeaturedMovies(data); 183 | } 184 | 185 | updateUIFeaturedMovies(data) { 186 | let featured = ""; 187 | data.forEach(movie => { 188 | featured += this.templateGenres(movie) 189 | }); 190 | 191 | this.containerFeaturedMovies.innerHTML = featured; 192 | } 193 | 194 | browseByGenre() { 195 | const genreId = this.dataset.genre; 196 | new Genre().checkActiveClass(); 197 | this.classList.add("active"); 198 | new Genre().checkGenreId(genreId); 199 | } 200 | 201 | event() { 202 | this.containerPopularMovies.addEventListener("mousedown", this.mouseDown); 203 | this.containerPopularMovies.addEventListener("mousemove", this.mouseMove); 204 | this.containerPopularMovies.addEventListener("mouseup", this.mouseUp); 205 | this.containerPopularMovies.addEventListener("mouseleave", this.mouseUp); 206 | 207 | this.containerGenresMovies.addEventListener("mousedown", this.mouseDown); 208 | this.containerGenresMovies.addEventListener("mousemove", this.mouseMove); 209 | this.containerGenresMovies.addEventListener("mouseup", this.mouseUp); 210 | this.containerGenresMovies.addEventListener("mouseleave", this.mouseUp); 211 | 212 | this.ul.addEventListener("mousedown", this.mouseDown); 213 | this.ul.addEventListener("mousemove", this.mouseMove); 214 | this.ul.addEventListener("mouseup", this.mouseUp); 215 | this.ul.addEventListener("mouseleave", this.mouseUp); 216 | 217 | this.search.addEventListener("keydown", this.searchMovies); 218 | document.addEventListener("click", this.clickingButtonPlay); 219 | 220 | this.hamburger.addEventListener("click", this.openMenu); 221 | } 222 | 223 | openMenu() { 224 | const ul = this.nextElementSibling.nextElementSibling; 225 | if(ul.classList.contains("open-menu")) { 226 | this.classList.remove("fixed"); 227 | ul.classList.remove("open-menu"); 228 | return; 229 | } 230 | ul.classList.add("open-menu"); 231 | this.classList.add("fixed"); 232 | } 233 | 234 | mouseDown(e) { 235 | e.preventDefault(); 236 | Movies.onMouseDown = true; 237 | Movies.startX = e.clientX; 238 | Movies.scrollLeft = this.scrollLeft; 239 | } 240 | 241 | mouseMove(e) { 242 | e.preventDefault(); 243 | if (!Movies.onMouseDown) return; 244 | let x = e.clientX; 245 | Movies.scroll = (x - Movies.startX); 246 | 247 | if (this.className == "content-popular") { 248 | this.scrollLeft = Movies.scrollLeft - (Movies.scroll); 249 | 250 | if (this.scrollLeft == (this.scrollWidth - this.clientWidth)) { 251 | this.nextElementSibling.style.cssText = 'opacity: 1'; 252 | } else { 253 | this.nextElementSibling.style.cssText = 'opacity: 0'; 254 | } 255 | } 256 | 257 | else if (this.className == "movies") { 258 | this.scrollLeft = Movies.scrollLeft - (Movies.scroll); 259 | } 260 | 261 | else if (this.className == "links") { 262 | this.scrollLeft = Movies.scrollLeft - (Movies.scroll); 263 | } 264 | 265 | } 266 | 267 | mouseUp() { 268 | Movies.onMouseDown = false; 269 | } 270 | 271 | templatePopular(movie) { 272 | return `
273 |
274 | Thumbnail 275 | 278 |
279 |
280 |

${movie.title}

281 | ${movie.release_date} 282 |
283 |
284 |
285 | Star 286 |

${movie.vote_average}

287 |
288 |
289 |
`; 290 | } 291 | 292 | templateGenres(movie) { 293 | return `
294 |
295 | Thumbnail 296 |
297 |
298 |

${movie.media_type == "movie" ? movie.title : movie.name ?? movie.original_title}

299 | ${movie.release_date} 300 |
301 | Star 302 |

${movie.vote_average}

303 |
304 |
305 |
`; 306 | } 307 | 308 | showSlides(images, dots) { 309 | for (let i = 0; i < 4; i++) { 310 | images[i].style.display = "none"; 311 | } 312 | 313 | this.slideIndex++; 314 | if (this.slideIndex >= 4) { this.slideIndex = 1 } 315 | for (let i = 0; i < dots.length; i++) { 316 | dots[i].className = dots[i].className.replace(" active", ""); 317 | } 318 | 319 | images[this.slideIndex - 1].style.display = "block"; 320 | dots[this.slideIndex - 1].className += " active"; 321 | 322 | setTimeout(() => { 323 | this.showSlides(images, dots); 324 | }, 3000) 325 | } 326 | } 327 | 328 | class Genre extends Movies { 329 | constructor() { 330 | super(); 331 | this.event(); 332 | this.pageGenre = 1; 333 | this.clickingPagination(); 334 | } 335 | 336 | clickingPagination() { 337 | const nextPage = document.querySelector(".page-genres .next-page"); 338 | const span = document.querySelector(".page-genres .page-currently"); 339 | const prevPage = document.querySelector(".page-genres .prev-page"); 340 | 341 | nextPage.addEventListener("click", () => { 342 | this.pageGenre++; 343 | this.checkGenreId("all", this.pageGenre); 344 | span.textContent = `Page ${this.pageGenre}`; 345 | return; 346 | }); 347 | 348 | prevPage.addEventListener("click", () => { 349 | this.pageGenre--; 350 | if (this.pageGenre <= 0) this.pageGenre = 1; 351 | span.textContent = `Page ${this.pageGenre}`; 352 | this.checkGenreId("all", this.pageGenre); 353 | return; 354 | }); 355 | } 356 | 357 | event() { 358 | this.genreNav.forEach(li => li.addEventListener("click", this.browseByGenre)); 359 | this.linkGenre.forEach(a => a.addEventListener("click", (e) => e.preventDefault())); 360 | } 361 | 362 | checkActiveClass() { 363 | return this.genreNav.forEach(li => { 364 | if (li.classList.contains("active")) { 365 | li.classList.remove("active"); 366 | } 367 | }); 368 | } 369 | 370 | async checkGenreId(genreId, page) { 371 | try { 372 | const data = await new Api({ 373 | path: "trending/movie/day", 374 | query: "", 375 | page: page, 376 | }).movies(); 377 | this.updateUIGenreMovies(data, genreId); 378 | } 379 | catch (err) { 380 | console.log(err) 381 | } 382 | 383 | } 384 | 385 | updateUIGenreMovies(data, genreId) { 386 | let genre = ""; 387 | data.reverse().forEach(movie => { 388 | const id = movie.genre_ids; 389 | if (id.includes(parseInt(genreId))) { 390 | genre += this.templateGenres(movie) 391 | } 392 | 393 | if (genreId == "all") { 394 | genre += this.templateGenres(movie) 395 | } 396 | }); 397 | 398 | this.containerGenresMovies.innerHTML = genre; 399 | } 400 | 401 | } 402 | 403 | if (window.innerWidth <= 576) { 404 | new Genre().checkGenreId("all"); 405 | } else { 406 | new Genre().checkGenreId(28); 407 | } 408 | 409 | new Movies(); -------------------------------------------------------------------------------- /dist/css/main-cfc7d048.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:"SFPro-Text";src:url(../fonts/SF-Pro-Text-4f9cec2c.woff) format("woff");font-display:swap}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{to{opacity:1}from{opacity:.6}}header{color:#fff;display:flex;flex-direction:column;height:500px;justify-content:space-between;font-family:"Poppins",sans-serif;position:relative}header nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}header nav h1{font-size:1.8em}header nav h1 span{color:#2abeeb}header nav ul{display:flex;width:400px;align-items:center;list-style:none;justify-content:space-between}header nav ul li a{color:#fff;text-decoration:none;font-weight:normal;letter-spacing:.05em}header nav .icon-search{display:none}header nav .hamburger{width:30px;height:30px;display:flex;flex-direction:column;justify-content:space-evenly;display:none;cursor:pointer}header nav .hamburger span{height:3px;background-color:#fff;border-radius:2px}header nav .hamburger span:nth-child(2){width:70%}header nav .hamburger span:nth-child(3){width:40%}header nav .btn-search .input-search{padding:.5rem 1rem;font-family:"Poppins";color:#fff;border:none;outline:#fff;background:#202736;border-radius:50px}header nav .btn-search .input-search::placeholder{color:#444e62;opacity:1}header nav .btn-search .icon-search{cursor:pointer}header .popular-movies{font-family:"SFPro-Text",sans-serif}header .popular-movies h2{position:relative;width:max-content}header .popular-movies h2::after{content:"";display:block;position:absolute;width:100%;height:2px;background-color:#fff;bottom:-0.5rem;border-radius:2px}header .popular-movies .dots{display:none;justify-content:center;position:absolute;bottom:3rem;left:0;right:0}header .popular-movies .dots .dot{width:10px;margin:.2rem;height:10px;border:1px solid #fff;border-radius:50%;transition:background-color .6s ease}header .popular-movies .dots .dot.active{background-color:#fff}header .popular-movies .content-popular{margin-top:2rem;display:flex;overflow-x:hidden;position:relative}header .popular-movies .content-popular .card{width:400px;margin-right:2rem}header .popular-movies .content-popular .card .thumbnail{width:inherit;height:200px;text-align:center;position:relative}header .popular-movies .content-popular .card .thumbnail img{width:inherit;height:200px;line-height:200px;border-radius:1.8rem}header .popular-movies .content-popular .card .thumbnail::after{content:"";display:block;position:absolute;top:0;width:inherit;height:200px;border-radius:1.8rem;background:linear-gradient(180deg, rgba(7, 19, 34, 0) 0%, rgba(13, 19, 31, 0.6) 100%)}header .popular-movies .content-popular .card .thumbnail button{position:absolute;background:none;border-radius:50%;border:none;outline:none;cursor:pointer;bottom:1em;right:1em;z-index:2;transform:scale(0.7)}header .popular-movies .content-popular .card .thumbnail button img{width:auto;height:auto}header .popular-movies .content-popular .card .card-title{margin-top:1.3rem;display:flex;justify-content:space-between}header .popular-movies .content-popular .card .rating{margin-top:.5rem}header .popular-movies .content-popular .card .rating div{display:flex;align-items:center}header .popular-movies .content-popular .card .rating div p{margin-left:.5rem;font-size:.8em}header .popular-movies .content-popular .card span{font-size:.8em}header .popular-movies .content-popular::-webkit-scrollbar{width:0px}header .popular-movies .next{width:60px;height:60px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAzFBMVEUAAABAQFA9RlY7R1k7RVg8Rlk9Rlk8RVk8Rlk8Rlg8RFg8Rlo4QFg7RllAQFg7RVo8R1o8Rlo6RVg9Rlk9Rls9RVg8Rlk9RVo8RlpAQGA9Rlk7R1g8Rlo8Rlk9Rlg7Rlg8SFg4SFhASFg7RFc8RVk8R1k8Rlk7Rlg8RlmFi5fz9PXn6OqRl6L///+doqyqrrbO0dVIUWNhaXhUXW1UXW7a3eDz8/V5f42eoqyRl6HCxcttdIJsdILb3OC2usG1usGSl6JgaXjO0daGi5fEXIQfAAAAKHRSTlMAEFBwn8/fv6+AQH8g3yCfb+9gj49g75+AEFCfz8CgsEAgIHCQ4NCgAOKZwgAAAAFiS0dELc3aQT0AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflARMINxEBNSAuAAAB0UlEQVRIx6WXfV+CMBDHZwSIiWXPPqBgWgNEM6kss7Le/3uKDR9SdzcYv3/H93O3H7fbjRChSkfasW7QRIZZtiolklmlE5PuydSqmdDKAbniK8ook43jNQRlOkWSP6tTiexziL2gGXQp9linmaQLUq8ZNKPsqjqb0Ps1o9Mc0hW8Aly7ojmlqW041fXWtBuaW+amnqmC1nVuqMBmgcDr0MBJ8oNwKA1dAxbDKIpGGM3qTAPWggSOxgh8C2dNfQZHjxMs7wa4+MQSj8IpkjfidSyhm8RCdhU/M/rlFSzwMvozx3zjgOktIumXM4RuS2vzjdPvItNtIi3DeQDaJofpPP3hSvAHj7yIVeAhj/spLDSZYSPOzsQtmLQxdPLF2W/xqkM6GLtgaABVWBc8kYmmaW0voXWLNEF2mf7gGPzAhY+kz9mfCdpKTKQNoZ3ESTqJhbShmezKgfL2w+AXLQEPab0yOUWavkuIcmi7yEXnrq9JhdCtzf3cq+dO2tuOBnd54Z1BsJ+P7e+OQ+0CoxRpGGobXplmqLMJnTFzXfzg6Ct49W8QlKZe1+BRv9eRnCQPfWW4SHDHlb5vXEcZ5clrB7xj5XnUuVbXGTBscP+gNQHyD+8Hu09bhuC3AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTE5VDA4OjU1OjE0KzAwOjAwYxPXEQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0xOVQwODo1NToxNCswMDowMBJOb60AAAAASUVORK5CYII=);position:absolute;bottom:0px;right:1rem;transform:scale(0.9);opacity:0;transition:.5s}header .loading{width:100%;height:100%;display:flex;position:absolute;top:0}header .loading .circle{margin:auto;width:50px;height:50px;border-radius:50%;border-top:2px solid #fff;border-right:2px solid rgba(0,0,0,.3);border-bottom:2px solid rgba(0,0,0,.3);border-left:2px solid rgba(0,0,0,.3)}header .spin{animation:spin 1s infinite}@media(max-width: 992px){header .popular-movies .content-popular{overflow:scroll}}@media(max-width: 960px){header{height:450px}header nav{flex-wrap:nowrap}header nav .btn-search{position:relative}header nav .btn-search .icon-search{display:block !important;top:0;right:0;height:100%;transform:scale(0.6);position:absolute;transition:.2s}header nav .btn-search .icon-search.hide{transform:scale(0);transition:.2s}header nav .btn-search .input-search{width:0;opacity:0;transition:.2s}header nav .btn-search .input-search.show{width:200px;opacity:1;transition:.2s}header nav ul{display:none !important}header nav ul.open-menu{display:flex !important;flex-direction:column;height:100vh;width:100%;position:fixed;top:0;z-index:10;justify-content:space-evenly;background-color:#1a202c}header nav .hamburger{display:flex !important;z-index:20 !important}header nav .hamburger span{height:2.2px}header nav .hamburger.fixed{position:fixed}}@media(max-width: 576px){header{height:auto}header .popular-movies h2{display:none}header .popular-movies .dots{display:flex}header .popular-movies .content-popular{flex-wrap:wrap;border-radius:1.8rem;justify-content:center;padding:0;height:305px;overflow-y:hidden}header .popular-movies .content-popular .card{position:relative;margin-right:0;width:100%;height:100%;transition:opacity .5s}header .popular-movies .content-popular .card .thumbnail{height:100%}header .popular-movies .content-popular .card .thumbnail img{max-width:100%;height:100%}header .popular-movies .content-popular .card .thumbnail button{display:none}header .popular-movies .content-popular .card .thumbnail::after{height:inherit}header .popular-movies .content-popular .card:nth-child(2){display:none}header .popular-movies .content-popular .card:nth-child(3){display:none}header .popular-movies .content-popular .card:nth-child(4){display:none}header .popular-movies .content-popular .card:nth-child(5){display:none}header .popular-movies .content-popular .card:nth-child(6){display:none}header .popular-movies .content-popular .card:nth-child(7){display:none}header .popular-movies .content-popular .card:nth-child(8){display:none}header .popular-movies .content-popular .card:nth-child(9){display:none}header .popular-movies .content-popular .card:nth-child(10){display:none}header .popular-movies .content-popular .card:nth-child(11){display:none}header .popular-movies .content-popular .card:nth-child(12){display:none}header .popular-movies .content-popular .card:nth-child(13){display:none}header .popular-movies .content-popular .card:nth-child(14){display:none}header .popular-movies .content-popular .card:nth-child(15){display:none}header .popular-movies .content-popular .card:nth-child(16){display:none}header .popular-movies .content-popular .card:nth-child(17){display:none}header .popular-movies .content-popular .card:nth-child(18){display:none}header .popular-movies .content-popular .card:nth-child(19){display:none}header .popular-movies .content-popular .card:nth-child(20){display:none}header .popular-movies .content-popular .card .card-title{position:absolute;bottom:3rem;justify-content:center;flex-direction:column;padding:3rem}header .popular-movies .content-popular .card .card-title h3{font-size:1.5em}header .popular-movies .content-popular .card .card-title span{display:none}header .popular-movies .content-popular .card .rating{position:absolute;bottom:4.5rem}header .popular-movies .content-popular .card .rating div{padding-left:3rem}header .popular-movies .content-popular .card .rating span{padding:2.8rem;font-size:1em}header .popular-movies .content-popular .card.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}}section#genre,section#featured{font-family:"SFPro-Text","Open-sans",sans-serif;color:#fff}section#genre .genre-nav,section#featured .genre-nav{width:100%}section#genre .genre-nav ul,section#featured .genre-nav ul{overflow:hidden;width:max-content;margin-top:1rem;display:flex;justify-content:space-between;align-items:center}section#genre .genre-nav ul li,section#featured .genre-nav ul li{list-style:none;padding:.5rem 2rem}section#genre .genre-nav ul li a,section#featured .genre-nav ul li a{color:#fff;text-decoration:none;cursor:pointer}section#genre .genre-nav ul .active,section#featured .genre-nav ul .active{background:#272f3f;border-radius:60px;padding:.5rem 2rem}section#genre .genre-nav ul::-webkit-scrollbar,section#featured .genre-nav ul::-webkit-scrollbar{width:0px}@media screen and (max-width: 768px){section#genre .genre-nav ul,section#featured .genre-nav ul{width:100%;overflow:scroll}}section#genre .movies,section#genre .featured-movies,section#featured .movies,section#featured .featured-movies{margin-top:2rem;display:flex;overflow-x:hidden}section#genre .movies .card,section#genre .featured-movies .card,section#featured .movies .card,section#featured .featured-movies .card{width:150px;margin-right:2rem}section#genre .movies .card .thumbnail,section#genre .featured-movies .card .thumbnail,section#featured .movies .card .thumbnail,section#featured .featured-movies .card .thumbnail{width:inherit;height:200px}section#genre .movies .card .thumbnail img,section#genre .featured-movies .card .thumbnail img,section#featured .movies .card .thumbnail img,section#featured .featured-movies .card .thumbnail img{width:inherit;height:200px}section#genre .movies .card .card-title,section#genre .featured-movies .card .card-title,section#featured .movies .card .card-title,section#featured .featured-movies .card .card-title{margin-top:1rem;display:flex;flex-direction:column;cursor:pointer}section#genre .movies .card .card-title div,section#genre .featured-movies .card .card-title div,section#featured .movies .card .card-title div,section#featured .featured-movies .card .card-title div{display:flex;margin-top:.5rem;align-items:center}section#genre .movies .card .card-title div p,section#genre .featured-movies .card .card-title div p,section#featured .movies .card .card-title div p,section#featured .featured-movies .card .card-title div p{margin-left:.5rem;font-size:.7em}section#genre .movies .card .card-title h4,section#genre .featured-movies .card .card-title h4,section#featured .movies .card .card-title h4,section#featured .featured-movies .card .card-title h4{font-size:.9em;width:max-content}section#genre .movies .card .card-title span,section#genre .featured-movies .card .card-title span,section#featured .movies .card .card-title span,section#featured .featured-movies .card .card-title span{margin-top:.5rem;font-size:.7em}section#genre .movies::-webkit-scrollbar,section#genre .featured-movies::-webkit-scrollbar,section#featured .movies::-webkit-scrollbar,section#featured .featured-movies::-webkit-scrollbar{width:0px}@media(max-width: 992px){section#genre .movies,section#genre .featured-movies,section#featured .movies,section#featured .featured-movies{overflow:scroll}}@media(max-width: 992px){section#genre .movies .card .card-title span,section#genre .featured-movies .card .card-title span,section#featured .movies .card .card-title span,section#featured .featured-movies .card .card-title span{display:none}}section#featured{display:none}@media(max-width: 992px){section#featured{display:block}}.result-search{display:none;font-family:"SFPro-Text","Open-sans",sans-serif;color:#fff;margin-top:1rem}.result-search h2{font-size:1.5em}.result-search .cards{margin-top:1rem;display:grid;justify-items:center;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:1rem}.result-search .cards .card{width:150px}.result-search .cards .card .thumbnail img{width:150px}.result-search .cards .card .card-title{margin-top:1rem;display:flex;flex-direction:column;cursor:pointer}.result-search .cards .card .card-title div{display:flex;margin-top:.5rem;align-items:center}.result-search .cards .card .card-title div p{margin-left:.5rem;font-size:.7em}.result-search .cards .card .card-title span{margin-top:.5rem;font-size:.7em}.result-search button{margin-top:1rem;padding:1rem;border-radius:5px;width:max-content;outline:none;border:none;cursor:pointer;background-color:#eb372a}.result-search button a{text-decoration:none;color:#fff}*{margin:0;padding:0}body{background-color:#1a202c;overflow-x:hidden}body .loading-body{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background-color:#000}body .loading-body .circle{margin:auto;width:50px;height:50px;border-radius:50%;border-top:2px solid #fff;border-right:2px solid rgba(0,0,0,.3);border-bottom:2px solid rgba(0,0,0,.3);border-left:2px solid rgba(0,0,0,.3)}body .loading-body .circle.spin{animation:spin 1s infinite}body .loading-body.show{display:flex}body .container{max-width:1920px;padding:2rem 3rem;margin:auto;overflow-x:hidden}body .container section,body .container footer{margin-top:5rem}body .container section{position:relative;margin-bottom:3rem}body .container section .page{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}body .container section .page .page-currently{font-size:.8em}body .container section .page .prev-page{background-color:#eb372a}body .container section .page button{font-family:"Poppins";border-radius:5px;padding:.5rem 1rem;background-color:#2c69df;border:none;color:#fff;outline:none}body .container section .loading{width:100%;height:100%;display:flex;position:absolute;top:0}body .container section .loading .circle{margin:auto;width:50px;height:50px;border-radius:50%;border-top:2px solid #fff;border-right:2px solid rgba(0,0,0,.3);border-bottom:2px solid rgba(0,0,0,.3);border-left:2px solid rgba(0,0,0,.3)}body .container section .spin{animation:spin 1s infinite}body .container footer{font-family:"Poppins",sans-serif;width:100%;height:120px;display:flex;flex-direction:column;justify-content:space-evenly;color:#fff}body .container footer p{font-weight:500;font-size:.9em}body .container footer a{color:#2abeeb;text-decoration:none}body .container footer span{color:#2abeeb}body .container footer img{width:300px}@media(max-width: 425px){body .container{padding:2rem 1.2rem}}@media(max-width: 576px){body .container section{margin-top:1rem}}@media(max-width: 768px){body .container footer{height:180px}}body .trailer-container{background-color:#1a202c;font-family:"SFPro-text";display:flex;justify-content:center;position:fixed;width:100%;height:100vh;opacity:0;top:0;z-index:-2;transition:.2s}body .trailer-container .content{width:100%;overflow-y:scroll}body .trailer-container .content .trailer{position:relative;padding-bottom:56.25%;overflow:hidden;height:0}body .trailer-container .content .trailer iframe{position:absolute;top:0;left:0;width:100%;height:75%}body .trailer-container .content .description{padding:2rem;color:#fff;margin-top:-8rem}body .trailer-container .content .description p{margin-top:1.4rem;line-height:1.4em}body .trailer-container .content .description .btn-back{margin-top:1rem;padding:1rem;border-radius:5px;width:max-content;background-color:#eb372a}body .trailer-container .content .description .btn-back a{text-decoration:none;color:#fff}body .trailer-container .content::-webkit-scrollbar{width:0px}body .trailer-container.full-height{opacity:1;z-index:99}@media screen and (max-width: 768px){body .trailer-container .content .trailer iframe{width:100%;height:100%}body .trailer-container .content .description{margin-top:0}body .trailer-container .content .description .btn-back{margin-top:1rem}} 2 | --------------------------------------------------------------------------------