├── README.md ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Streaming-Service 2 | 3 | This code is uploaded on codepen.io, visit this link to view it live -> https://codepen.io/Gunnarhawk/pen/vYJEwoM 4 | 5 | My goal for this project was to make the UI of a streaming service and have it be scalable/responsive on mobile. 6 | 7 | The movie cards are retrieved from an object array in js. This object array can be changed out for an http request that returns the same data structure, but in this application, the data is hard coded in inside of the global variable 'cards' 8 | 9 | A large part of that was getting the cards to fit on the screen and have their background scale with their size, I then wrote an equation to do this: 10 | 11 | let scale = (100 * ((carousel_width - btn_width) / num_cards - card_margin * 2)) / initial_width; 12 | 13 | carousel_width is the width of the whole carousel without margin or padding 14 | btn_width is the width of both of the side buttons 15 | num_cards is the number of cards i want to display on the screen, this value is changed based on the size of the user's screen 16 | card_margin is the margin (spaces) between the cards 17 | initial_width is the initial width (in px) of the background image (1920 from 1920x1080) 18 | 19 | This equation then gives a scale % that I could multiply the width and height of the card by to keep the aspect ratio of the image the same and have it fit well inside of the card 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Streaming Service 5 | 6 | 7 | 8 |

9 |

10 |

11 |

FiRE

12 |

WATCH

13 |

14 |

15 | 16 |

HOME

17 | 18 | 19 |

MOVIES

20 | 21 | 22 |

RELEASES

26 | 27 | 28 |

SEARCH

29 | 30 |

31 |

32 | 35 |

36 |

37 |

38 |

39 |

40 |

Interstellar

41 |

Follow a group of astronauts from the future through the cosmos in search of an earthly replacement, what will happen next?

42 |

43 |

44 |

Play

45 | 49 |

50 |

51 |

Watch Later

52 | 56 |

57 |

58 |

59 |

60 |

61 |

62 | 68 |

69 |

NEW RELEASES

70 |

71 | 72 |

73 |

74 |

75 |

76 |

Can't Find Anything You Like?

77 |

Search for thousands of unique movies from our growing database...

78 |

79 | 80 | 83 |

84 |

85 |

86 |

87 |

ACTION

88 |

89 | 90 |

91 |

92 |

93 |

DRAMA

94 |

95 | 96 |

97 |

98 |

99 |

THRILLER

100 |

101 | 102 |

103 |

104 |

105 |

106 |

107 |

Help Center

108 |

Private Policy

109 |

Contact Us

110 |

111 |

112 |

Terms of Use

113 |

Jobs

114 |

Legal Notices

115 |

116 |

117 |

118 |

FiRE

119 |

WATCH

120 |

121 |

122 | 125 | 126 | 129 | 130 | 131 | 134 | 135 |

136 |

137 |

138 |

139 |

140 |

141 |

142 | 143 | 156 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&family=Roboto&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&display=swap"); 3 | 4 | :root { 5 | --blue: rgba(35, 73, 189, 1); 6 | --blue-selected: rgba(30, 73, 210, 0.8); 7 | --grey: rgba(104, 104, 104, 1); 8 | --grey-selected: rgb(162, 159, 159); 9 | --red: rgba(212, 44, 44, 1); 10 | --red-selected: rgba(170, 35, 35, 0.9); 11 | --card-scale: 5; 12 | } 13 | 14 | html, 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | width: 100%; 19 | } 20 | 21 | h1, 22 | h3, 23 | h2, 24 | h5, 25 | h4, 26 | p { 27 | margin: 0px; 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | } 33 | 34 | .content { 35 | margin: 0; 36 | padding: 0; 37 | width: 100%; 38 | height: 100%; 39 | display: flex; 40 | flex-direction: column; 41 | overflow-y: auto; 42 | } 43 | 44 | .red { 45 | color: var(--red); 46 | } 47 | 48 | .white { 49 | color: rgba(230, 230, 230, 1); 50 | } 51 | 52 | /* HEADER */ 53 | .header { 54 | width: 100%; 55 | position: fixed; 56 | height: 70px; 57 | background-color: transparent; 58 | display: flex; 59 | align-items: center; 60 | z-index: 10; 61 | transition: background-color 0.3s; 62 | } 63 | 64 | .header-change { 65 | flex-direction: column; 66 | justify-content: center; 67 | } 68 | 69 | .header-top { 70 | display: flex; 71 | align-items: center; 72 | width: 100%; 73 | } 74 | 75 | .header-bottom { 76 | display: flex; 77 | align-items: center; 78 | flex-direction: column; 79 | width: 100%; 80 | } 81 | 82 | .header-bottom .main-nav { 83 | flex-direction: column; 84 | margin-left: 0px; 85 | margin-bottom: 20px; 86 | } 87 | 88 | .header-bottom .main-nav h3 { 89 | margin-bottom: 10px; 90 | } 91 | 92 | .header-bottom .right-nav { 93 | margin: 0 auto !important; 94 | } 95 | 96 | .header:hover { 97 | background-color: rgba(51, 51, 51, 1); 98 | box-shadow: 0px 2px 10px black; 99 | transition: background-color 0.3s; 100 | } 101 | 102 | .header-active { 103 | background-color: rgba(51, 51, 51, 1); 104 | box-shadow: 0px 2px 10px black; 105 | transition: background-color 0.3s; 106 | } 107 | 108 | .header .brand { 109 | margin-left: 25px; 110 | display: flex; 111 | } 112 | 113 | .header .brand h1 { 114 | font-family: "Anton", sans-serif; 115 | font-size: 35px; 116 | } 117 | 118 | .main-nav { 119 | height: 100%; 120 | display: flex; 121 | align-items: center; 122 | margin-left: 50px; 123 | } 124 | 125 | .main-nav .button-container { 126 | height: calc(100% - 10px); 127 | margin-top: 5px; 128 | padding: 0px 15px; 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | border-bottom: 5px solid transparent; 133 | border-bottom-color: transparent; 134 | transition: border-bottom-color 0.3s; 135 | } 136 | 137 | .main-nav .button-container:hover { 138 | cursor: pointer; 139 | border-bottom-color: var(--red); 140 | transition: border-bottom-color 0.3s; 141 | } 142 | 143 | .main-nav .button-container h2 { 144 | font-family: "Roboto", sans-serif; 145 | font-size: 26px; 146 | color: white; 147 | } 148 | 149 | .header .right-nav { 150 | margin-left: auto; 151 | display: flex; 152 | align-items: center; 153 | margin-right: 25px; 154 | } 155 | 156 | .right-nav .button-container { 157 | display: flex; 158 | justify-content: center; 159 | align-items: center; 160 | padding: 8px 25px; 161 | border-radius: 8px; 162 | } 163 | 164 | .login { 165 | background-color: var(--red); 166 | } 167 | 168 | .login:hover { 169 | background-color: var(--red-selected); 170 | cursor: pointer; 171 | } 172 | 173 | .right-nav .button-container h2 { 174 | font-family: "Roboto", sans-serif; 175 | font-size: 20px; 176 | color: white; 177 | } 178 | 179 | .hamburger { 180 | margin-left: auto; 181 | margin-right: 25px; 182 | } 183 | 184 | .hamburger:hover svg { 185 | cursor: pointer; 186 | background-color: rgba(255, 255, 255, 0.8); 187 | } 188 | 189 | .hamburger svg { 190 | width: 30px; 191 | height: 30px; 192 | min-width: 30px; 193 | padding: 8px; 194 | border-radius: 12px; 195 | background-color: white; 196 | color: black; 197 | } 198 | /* END HEADER */ 199 | 200 | /* TOP SECTION */ 201 | .top { 202 | width: 100%; 203 | min-height: 250px; 204 | display: flex; 205 | align-items: center; 206 | background-image: url("//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fhdwallpaperim.com%2Fwp-content%2Fuploads%2F2017%2F08%2F24%2F107270-Interstellar_movie.jpg&f=1&nofb=1"); 207 | background-repeat: no-repeat; 208 | background-size: cover; 209 | } 210 | 211 | .top .image-container { 212 | width: 100%; 213 | height: 100%; 214 | display: flex; 215 | align-items: center; 216 | background: rgb(20, 20, 20); 217 | background: linear-gradient( 218 | 0deg, 219 | rgba(20, 20, 20, 1) 0%, 220 | rgba(255, 255, 255, 0) 36% 221 | ); 222 | } 223 | 224 | @-webkit-keyframes fadeIn { 225 | 0% { 226 | opacity: 0; 227 | } 228 | 100% { 229 | opacity: 1; 230 | } 231 | } 232 | 233 | @keyframes fadeIn { 234 | 0% { 235 | opacity: 0; 236 | } 237 | 100% { 238 | opacity: 1; 239 | } 240 | } 241 | 242 | @-webkit-keyframes fadeOut { 243 | 0% { 244 | opacity: 1; 245 | } 246 | 100% { 247 | opacity: 0; 248 | } 249 | } 250 | 251 | @keyframes fadeOut { 252 | 0% { 253 | opacity: 1; 254 | } 255 | 100% { 256 | opacity: 0; 257 | } 258 | } 259 | 260 | .fadeIn { 261 | -webkit-animation-name: fadeIn; 262 | animation-name: fadeIn; 263 | } 264 | 265 | .fadeOut { 266 | -webkit-animation-name: fadeOut; 267 | animation-name: fadeOut; 268 | } 269 | 270 | .top .left-side { 271 | width: 40%; 272 | height: 80%; 273 | padding-left: 10%; 274 | display: flex; 275 | flex-direction: column; 276 | justify-content: center; 277 | } 278 | 279 | .top h1 { 280 | margin: 0px; 281 | font-family: "Montserrat", sans-serif; 282 | font-weight: 600; 283 | font-size: 95px; 284 | color: white; 285 | text-shadow: 5px 5px 10px black; 286 | } 287 | 288 | .top p { 289 | margin: 0px; 290 | font-family: "Montserrat", sans-serif; 291 | font-weight: 400; 292 | font-size: 20px; 293 | color: white; 294 | text-shadow: 2px 2px 1px black; 295 | padding: 25px 0px; 296 | } 297 | 298 | .top h3 { 299 | display: flex; 300 | align-items: center; 301 | } 302 | 303 | .button-section { 304 | width: 100%; 305 | display: flex; 306 | font-family: "Roboto", sans-serif; 307 | } 308 | 309 | .button-section svg { 310 | width: 25px; 311 | height: 25px; 312 | min-width: 25px; 313 | padding-left: 10px; 314 | } 315 | 316 | .top .watch, 317 | .top .queue { 318 | padding: 10px 25px; 319 | border-radius: 8px; 320 | } 321 | 322 | .watch { 323 | color: white; 324 | display: flex; 325 | background-color: var(--red); 326 | } 327 | 328 | .queue { 329 | color: white; 330 | display: flex; 331 | background-color: var(--grey); 332 | margin-left: 30px; 333 | } 334 | 335 | .watch:hover { 336 | background-color: var(--red-selected); 337 | cursor: pointer; 338 | } 339 | 340 | .queue:hover { 341 | background-color: var(--grey-selected); 342 | cursor: pointer; 343 | } 344 | /* END TOP SECTION*/ 345 | 346 | /* MID SECTION */ 347 | .mid { 348 | display: flex; 349 | flex-direction: column; 350 | background-color: #141414; 351 | padding: 40px; 352 | } 353 | 354 | .mid .content-area { 355 | width: 100%; 356 | display: flex; 357 | flex-direction: column; 358 | margin-bottom: 40px; 359 | } 360 | 361 | .content-area .content-title { 362 | font-family: "Bebas Neue", cursive; 363 | color: white; 364 | font-size: 35px; 365 | letter-spacing: 5px; 366 | padding-left: 40px; 367 | } 368 | 369 | .card-carousel { 370 | width: 100%; 371 | margin: 25px 0px; 372 | display: flex; 373 | } 374 | 375 | .card-carousel:hover svg { 376 | color: white; 377 | transition: color 0.3s; 378 | } 379 | 380 | .carousel-btn { 381 | display: flex; 382 | align-items: center; 383 | justify-content: center; 384 | color: white; 385 | } 386 | 387 | .carousel-btn svg { 388 | width: 40px; 389 | height: 40px; 390 | color: transparent; 391 | transition: color 0.3s; 392 | } 393 | 394 | .carousel-btn svg:hover { 395 | color: lightgrey; 396 | cursor: pointer; 397 | } 398 | 399 | .card { 400 | background-size: cover; 401 | transform: scale(1); 402 | transition: transform 0.2s; 403 | border-radius: 5px; 404 | } 405 | 406 | .card h4 { 407 | font-family: "Roboto", sans-serif; 408 | font-size: 20px; 409 | color: white; 410 | text-shadow: 1px 1px 3px black; 411 | } 412 | 413 | .card p { 414 | font-family: "Roboto", sans-serif; 415 | font-size: 14px; 416 | color: white; 417 | text-shadow: 1px 1px 1px black; 418 | text-overflow: ellipsis; 419 | } 420 | 421 | .card h3 { 422 | font-family: "Roboto", sans-serif; 423 | font-size: 14px; 424 | color: white; 425 | } 426 | 427 | .card svg { 428 | width: 25px; 429 | height: 25px; 430 | min-width: 25px; 431 | } 432 | 433 | .card:hover { 434 | transform: scale(1.3); 435 | transition: transform 0.5s; 436 | z-index: 1; 437 | } 438 | 439 | .movie-desc { 440 | position: fixed; 441 | left: 0; 442 | top: 0; 443 | width: 100%; 444 | height: calc(100% - 100px); 445 | background-color: rgba(0, 0, 0, 0.5); 446 | display: flex; 447 | vertical-align: center; 448 | justify-content: center; 449 | z-index: 10; 450 | 451 | padding: 50px 0px; 452 | } 453 | 454 | .modal-content { 455 | width: 100%; 456 | max-width: 1000px; 457 | height: auto; 458 | display: flex; 459 | flex-direction: column; 460 | background-color: rgba(51, 51, 51, 1); 461 | } 462 | 463 | .desc-image { 464 | width: 100%; 465 | background-repeat: no-repeat; 466 | background-size: cover; 467 | } 468 | 469 | .desc-image div { 470 | width: 100%; 471 | height: 100%; 472 | background: rgb(51, 51, 51); 473 | background: linear-gradient( 474 | 0deg, 475 | rgba(51, 51, 51, 1) 0%, 476 | rgba(255, 255, 255, 0) 36% 477 | ); 478 | } 479 | 480 | .close-btn { 481 | background-color: #333; 482 | border-radius: 50px; 483 | position: relative; 484 | z-index: 11; 485 | } 486 | 487 | .close-btn svg { 488 | position: absolute; 489 | top: 0px; 490 | right: 0px; 491 | margin-top: 15px; 492 | margin-right: 15px; 493 | width: 30px; 494 | min-width: 30px; 495 | height: 30px; 496 | min-height: 30px; 497 | padding: 8px; 498 | border-radius: 50px; 499 | background-color: #333; 500 | color: white; 501 | cursor: pointer; 502 | } 503 | 504 | .close-btn svg:hover { 505 | transform: scale(1.15); 506 | } 507 | 508 | .desc-top { 509 | display: flex; 510 | flex-direction: column; 511 | width: calc(100% - 50px); 512 | padding: 0px 25px; 513 | margin-top: 25px; 514 | } 515 | 516 | .desc-top h1 { 517 | font-family: "Bebas Neue", cursive; 518 | font-size: 50px; 519 | color: white; 520 | border-bottom: 5px solid var(--red); 521 | } 522 | 523 | .desc-top .button-selection { 524 | display: flex; 525 | width: 100%; 526 | margin-top: 15px; 527 | } 528 | 529 | .desc-top .button-selection div { 530 | padding: 10px 25px; 531 | } 532 | 533 | .desc-top h3 { 534 | font-family: "Roboto", sans-serif; 535 | } 536 | 537 | .desc-top svg { 538 | width: 25px; 539 | height: 25px; 540 | margin-left: 15px; 541 | } 542 | 543 | .desc-mid { 544 | width: calc(100% - 50px); 545 | margin-top: 50px; 546 | padding: 0px 25px; 547 | } 548 | 549 | .desc-mid p { 550 | font-size: 30px; 551 | font-family: "Roboto", sans-serif; 552 | color: white; 553 | } 554 | 555 | .desc-bottom { 556 | width: 100%; 557 | display: flex; 558 | flex-direction: column; 559 | width: calc(100% - 50px); 560 | margin-top: 50px; 561 | padding: 0px 25px; 562 | } 563 | 564 | .desc-bottom .cast { 565 | width: 100%; 566 | display: flex; 567 | } 568 | 569 | .cast-card { 570 | height: auto; 571 | background-size: cover; 572 | background-repeat: no-repeat; 573 | } 574 | 575 | .overlay { 576 | height: 100%; 577 | width: calc(100% - 30px); 578 | display: flex; 579 | flex-direction: column; 580 | position: relative; 581 | justify-content: end; 582 | padding: 0px 15px; 583 | text-overflow: ellipsis; 584 | display: none; 585 | border-radius: 5px; 586 | } 587 | 588 | .overlay .button-container { 589 | width: 100%; 590 | display: flex; 591 | margin-bottom: 15px; 592 | margin-top: 15px; 593 | } 594 | 595 | .overlay .button-container svg { 596 | width: 15px; 597 | height: 15px; 598 | min-width: 15px; 599 | padding: 2px; 600 | } 601 | 602 | .card .queue, 603 | .card .star { 604 | margin-left: 8px; 605 | padding: 7px; 606 | border-radius: 50px; 607 | background-color: #333; 608 | color: white; 609 | border: 2px solid #878585; 610 | } 611 | 612 | .card .watch { 613 | padding: 7px; 614 | border-radius: 50px; 615 | border: 2px solid var(--red); 616 | } 617 | 618 | .card .queue:hover, 619 | .card .star:hover { 620 | background-color: #616161; 621 | } 622 | 623 | .card:hover .overlay { 624 | display: flex; 625 | background-image: linear-gradient( 626 | to right, 627 | rgba(51, 51, 51, 0.95), 628 | rgba(255, 255, 255, 0.01) 629 | ); 630 | } 631 | 632 | .overlay p { 633 | color: #bdbdbd; 634 | } 635 | 636 | .mid .search-area { 637 | width: 100%; 638 | display: flex; 639 | flex-direction: column; 640 | margin-bottom: 40px; 641 | height: 500px; 642 | background-image: url("//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi0.wp.com%2Fwww.trenovision.com%2Fwp-content%2Fuploads%2F2019%2F10%2F553ada2b9135a3ccdfaaaf31346403dd.png%3Fresize%3D730%252C418%26ssl%3D1&f=1&nofb=1"); 643 | background-size: cover; 644 | background-repeat: no-repeat; 645 | } 646 | 647 | .search-area .search-area-content { 648 | width: 100%; 649 | height: 100%; 650 | background-color: rgba(51, 51, 51, 0.8); 651 | display: flex; 652 | justify-content: center; 653 | align-items: center; 654 | flex-direction: column; 655 | } 656 | 657 | .search-area h2 { 658 | font-family: "Montserrat", sans-serif; 659 | color: white; 660 | font-size: 55px; 661 | } 662 | 663 | .search-area p { 664 | font-family: "Montserrat", sans-serif; 665 | color: white; 666 | font-size: 30px; 667 | } 668 | 669 | .search-area input { 670 | border: none; 671 | background-color: transparent; 672 | width: 100%; 673 | height: 50px; 674 | padding: 4px 25px; 675 | font-family: "Roboto", sans-serif; 676 | font-size: 25px; 677 | } 678 | 679 | .search-area svg { 680 | width: 30px; 681 | height: 30px; 682 | min-width: 30px; 683 | padding: 5px 25px; 684 | margin-left: auto; 685 | } 686 | 687 | .search-area .input-area { 688 | width: 40%; 689 | display: flex; 690 | align-items: center; 691 | background-color: white; 692 | border-radius: 50px; 693 | margin-top: 50px; 694 | } 695 | /* END MID SECTION */ 696 | /* FOOTER */ 697 | .bottom { 698 | width: 100%; 699 | display: flex; 700 | flex-direction: column; 701 | min-height: 100px; 702 | background-color: #141414; 703 | justify-content: center; 704 | align-items: center; 705 | } 706 | 707 | .bottom .btn-row { 708 | width: 50%; 709 | margin: 15px 0px; 710 | display: flex; 711 | align-items: center; 712 | justify-content: space-between; 713 | } 714 | 715 | .bottom .btn-row h4 { 716 | color: white; 717 | font-family: "Montserrat", sans-serif; 718 | font-size: 12px; 719 | } 720 | 721 | .bottom .btn-row h4:hover { 722 | text-decoration: underline; 723 | cursor: pointer; 724 | } 725 | 726 | .bottom .brand { 727 | display: flex; 728 | } 729 | 730 | .bottom .brand h1 { 731 | font-family: "Anton", sans-serif; 732 | font-size: 35px; 733 | } 734 | 735 | .bottom .socials { 736 | display: flex; 737 | justify-content: end; 738 | align-items: center; 739 | } 740 | 741 | .socials a svg { 742 | width: 25px; 743 | height: 25px; 744 | max-width: 25px; 745 | color: white; 746 | padding-left: 20px; 747 | } 748 | 749 | .btn-row p { 750 | color: white; 751 | font-family: "Montserrat", sans-serif; 752 | font-size: 8px; 753 | } 754 | /* END FOOTER */ 755 | 756 | /* MODAL */ 757 | 758 | .watch-later-modal { 759 | position: fixed; 760 | bottom: 0px; 761 | left: 0px; 762 | z-index: 11; 763 | background-color: #333; 764 | margin-bottom: 15px; 765 | margin-left: 15px; 766 | display: flex; 767 | padding: 20px; 768 | border-radius: 9px; 769 | align-items: center; 770 | display: none; 771 | } 772 | 773 | .watch-later-modal h3 { 774 | font-family: "Roboto", sans-serif; 775 | font-size: 20px; 776 | color: white; 777 | } 778 | 779 | .watch-later-modal .side-buttons { 780 | display: flex; 781 | align-items: center; 782 | justify-content: center; 783 | } 784 | 785 | .watch-later-modal .side-buttons svg { 786 | width: 35px; 787 | min-width: 35px; 788 | height: 35px; 789 | min-height: 35px; 790 | color: white; 791 | background-color: rgba(255, 255, 255, 0.1); 792 | padding: 6px; 793 | border-radius: 50px; 794 | margin-left: 20px; 795 | } 796 | 797 | .side-buttons svg:hover { 798 | background-color: #141414; 799 | transition: background-color 0.3s; 800 | cursor: pointer; 801 | } 802 | 803 | .watch-later-modal h3 .playlist { 804 | color: var(--red); 805 | } 806 | 807 | .watch-later-modal h3 .movie { 808 | color: var(--red); 809 | } 810 | 811 | /* END MODAL */ 812 | 813 | @media screen and (max-width: 1660px) { 814 | .top p { 815 | font-size: 16px; 816 | } 817 | } 818 | 819 | @media screen and (max-width: 1430px) { 820 | .card h4 { 821 | font-size: 16px; 822 | } 823 | 824 | .card p { 825 | font-size: 11px; 826 | } 827 | 828 | .overlay { 829 | width: calc(100% - 20px); 830 | padding: 0px 10px; 831 | } 832 | 833 | .overlay .button-container { 834 | margin-bottom: 10px; 835 | margin-top: 10px; 836 | } 837 | 838 | .modal-content { 839 | max-width: 800px; 840 | } 841 | } 842 | 843 | @media screen and (max-width: 1330px) { 844 | .top h1 { 845 | font-size: 80px; 846 | } 847 | 848 | .top p { 849 | font-size: 14px; 850 | } 851 | 852 | .top h3 { 853 | font-size: 12px; 854 | } 855 | 856 | .top svg { 857 | width: 20px; 858 | height: 20px; 859 | min-width: 20px; 860 | } 861 | 862 | .top .watch, 863 | .top .queue { 864 | padding: 7px 20px; 865 | } 866 | } 867 | 868 | @media screen and (max-width: 1230px) { 869 | .main-nav .button-container h2 { 870 | font-size: 20px; 871 | } 872 | 873 | .right-nav .button-container h2 { 874 | font-size: 16px; 875 | } 876 | 877 | .carousel-btn svg { 878 | width: 30px; 879 | height: 30px; 880 | } 881 | 882 | .card svg { 883 | width: 20px; 884 | height: 20px; 885 | min-width: 20px; 886 | } 887 | 888 | .content-area .content-title { 889 | padding-left: 30px; 890 | } 891 | 892 | .search-area-content h2 { 893 | font-size: 40px; 894 | } 895 | 896 | .search-area-content p { 897 | font-size: 20px; 898 | } 899 | } 900 | 901 | @media screen and (max-width: 1180px) { 902 | .top .left-side { 903 | padding-left: 6%; 904 | width: 45%; 905 | } 906 | 907 | .search-area-content .input-area { 908 | width: 50%; 909 | margin-top: 40px; 910 | } 911 | 912 | .mid .search-area { 913 | height: 400px; 914 | } 915 | 916 | .search-area input { 917 | font-size: 18px; 918 | } 919 | 920 | .search-area svg { 921 | width: 20px; 922 | height: 20px; 923 | min-width: 20px; 924 | } 925 | 926 | .modal-content { 927 | max-width: 700px; 928 | } 929 | } 930 | 931 | @media screen and (max-width: 1045px) { 932 | .top h1 { 933 | font-size: 65px; 934 | } 935 | 936 | .top p { 937 | font-size: 12px; 938 | } 939 | 940 | .content-area .content-title { 941 | font-size: 28px; 942 | } 943 | 944 | .mid { 945 | padding: 30px; 946 | } 947 | 948 | .search-area-content .input-area input { 949 | height: 40px; 950 | } 951 | 952 | .search-area-content h2 { 953 | font-size: 30px; 954 | } 955 | .search-area-content p { 956 | font-size: 16px; 957 | } 958 | 959 | .mid .search-area { 960 | height: 350px; 961 | } 962 | } 963 | 964 | @media screen and (max-width: 950px) { 965 | .header .brand h1 { 966 | font-size: 30px; 967 | } 968 | 969 | .main-nav .button-container h2 { 970 | font-size: 16px; 971 | } 972 | 973 | .right-nav .button-container h2 { 974 | font-size: 12px; 975 | } 976 | 977 | .main-nav { 978 | margin-left: 30px; 979 | } 980 | 981 | .movie-desc { 982 | padding: 0px; 983 | height: 100%; 984 | } 985 | 986 | .modal-content { 987 | max-width: 100%; 988 | } 989 | } 990 | 991 | @media screen and (max-width: 815px) { 992 | .header { 993 | min-height: 70px; 994 | height: auto; 995 | } 996 | } 997 | 998 | @media screen and (max-width: 737px) { 999 | .carousel-btn { 1000 | display: none; 1001 | } 1002 | 1003 | .card { 1004 | display: flex !important; 1005 | overflow-y: visible; 1006 | } 1007 | 1008 | .card:hover { 1009 | position: relative; 1010 | margin: 0px 30px !important; 1011 | } 1012 | 1013 | .card-carousel { 1014 | overflow-x: scroll; 1015 | overflow-y: visible; 1016 | align-items: center; 1017 | } 1018 | 1019 | .card svg { 1020 | width: 10px; 1021 | height: 10px; 1022 | min-width: 10px; 1023 | } 1024 | 1025 | .search-area .input-area { 1026 | width: 70%; 1027 | } 1028 | 1029 | .mid .search-area { 1030 | height: 250px; 1031 | } 1032 | 1033 | .content-area .content-title { 1034 | padding-left: 0px; 1035 | } 1036 | 1037 | .bottom .btn-row { 1038 | width: 95%; 1039 | } 1040 | 1041 | .desc-top h3 { 1042 | font-size: 16px; 1043 | } 1044 | 1045 | .desc-top svg { 1046 | width: 20px; 1047 | height: 20px; 1048 | } 1049 | 1050 | .desc-mid p { 1051 | font-size: 25px; 1052 | } 1053 | } 1054 | 1055 | @media screen and (max-width: 730px) { 1056 | .carousel-btn svg { 1057 | width: 20px; 1058 | height: 20px; 1059 | } 1060 | 1061 | .card-carousel { 1062 | margin: 10px 0px; 1063 | } 1064 | } 1065 | 1066 | @media screen and (max-width: 710px) { 1067 | .card h4 { 1068 | font-size: 13px; 1069 | } 1070 | 1071 | .card p { 1072 | font-size: 8px; 1073 | } 1074 | 1075 | .overlay { 1076 | width: calc(100% - 16px); 1077 | padding: 0px 8px; 1078 | } 1079 | 1080 | .overlay .button-container { 1081 | margin-bottom: 8px; 1082 | margin-top: 8px; 1083 | } 1084 | 1085 | .card .queue { 1086 | margin-left: 8px; 1087 | } 1088 | 1089 | .card .queue, 1090 | .card .watch, 1091 | .card .star { 1092 | padding: 4px; 1093 | } 1094 | 1095 | .search-area-content h2 { 1096 | font-size: 25px; 1097 | } 1098 | .search-area-content p { 1099 | font-size: 12px; 1100 | } 1101 | } 1102 | 1103 | @media screen and (max-width: 610px) { 1104 | .card svg { 1105 | width: 8px; 1106 | height: 8px; 1107 | min-width: 8px; 1108 | } 1109 | 1110 | .top h1 { 1111 | font-size: 50px; 1112 | } 1113 | 1114 | .top p { 1115 | font-size: 10px; 1116 | padding: 15px 0px; 1117 | } 1118 | 1119 | .top .left-side { 1120 | width: 80%; 1121 | } 1122 | 1123 | .mid { 1124 | padding: 20px; 1125 | } 1126 | } 1127 | 1128 | @media screen and (max-width: 545px) { 1129 | .card h4 { 1130 | font-size: 10px; 1131 | } 1132 | 1133 | .card p { 1134 | font-size: 6px; 1135 | } 1136 | 1137 | .search-area-content h2 { 1138 | text-align: center; 1139 | font-size: 24px; 1140 | } 1141 | .search-area-content p { 1142 | text-align: center; 1143 | width: 90%; 1144 | font-size: 12px; 1145 | } 1146 | 1147 | .desc-top h3 { 1148 | font-size: 14px; 1149 | } 1150 | 1151 | .desc-top svg { 1152 | width: 18px; 1153 | height: 18px; 1154 | } 1155 | 1156 | .desc-mid p { 1157 | font-size: 20px; 1158 | } 1159 | } 1160 | 1161 | @media screen and (max-width: 460px) { 1162 | .btn-row { 1163 | flex-direction: column; 1164 | } 1165 | 1166 | .socials svg { 1167 | padding: 0px 10px; 1168 | } 1169 | } 1170 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let num_cards_GLOBAL = 5; 2 | 3 | let cards = [ 4 | { 5 | background: 6 | "//external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fmoviefail.com%2Fwp-content%2Fuploads%2F2014%2F11%2Finterstellar1.jpeg&f=1&nofb=1", 7 | display_background: 8 | "//external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhdqwalls.com%2Fdownload%2Finterstellar-gargantua-u4-1920x1080.jpg&f=1&nofb=1", 9 | title: "Interstellar", 10 | description: 11 | "Watch this incredible film made by some incredible people!" 12 | }, 13 | { 14 | background: "https://images.alphacoders.com/586/thumb-1920-586902.jpg", 15 | display_background: 16 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages2.alphacoders.com%2F845%2F84502.jpg&f=1&nofb=1", 17 | title: "Inception", 18 | description: 19 | "Watch this incredible film made by some incredible people!" 20 | }, 21 | { 22 | background: 23 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.wallpapersafari.com%2F41%2F1%2Fhj197K.jpg&f=1&nofb=1", 24 | display_background: 25 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages7.alphacoders.com%2F990%2F990610.jpg&f=1&nofb=1", 26 | title: "Avengers: Endgame", 27 | description: 28 | "Watch this incredible film made by some incredible people!" 29 | }, 30 | { 31 | background: 32 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages.wallpapersden.com%2Fimage%2Fdownload%2Fjoker-2019-movie_66632_1920x1080.jpg&f=1&nofb=1", 33 | display_background: 34 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages.wallpapersden.com%2Fimage%2Fdownload%2Fjoker-stair-dance_68124_1920x1080.jpg&f=1&nofb=1", 35 | title: "Joker", 36 | description: 37 | "Watch this incredible film made by some incredible people!" 38 | }, 39 | { 40 | background: 41 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.U2iFUz9mivZeH-h48O5wtwHaEK%26pid%3DApi&f=1", 42 | title: "1917", 43 | description: 44 | "Watch this incredible film made by some incredible people!" 45 | }, 46 | { 47 | background: 48 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapershome.com%2Fimages%2Fpages%2Fpic_h%2F22685.jpg&f=1&nofb=1", 49 | title: "TENET", 50 | description: 51 | "Watch this incredible film made by some incredible people!" 52 | }, 53 | { 54 | background: 55 | "//external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.hdwallpapers.in%2Fdownload%2Fskyfall_2012_movie-1920x1080.jpg&f=1&nofb=1", 56 | title: "Skyfall", 57 | description: 58 | "Watch this incredible film made by some incredible people!" 59 | }, 60 | { 61 | background: 62 | "//external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2F9%2F6%2F8%2F126147.jpg&f=1&nofb=1", 63 | title: "Star Wars: A New Hope", 64 | description: 65 | "Watch this incredible film made by some incredible people!" 66 | }, 67 | { 68 | background: 69 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.tmdb.org%2Ft%2Fp%2Foriginal%2FrPpxrz8o0svAPCLucjsEdMXoDfX.jpg&f=1&nofb=1", 70 | title: "Venom", 71 | description: 72 | "Watch this incredible film made by some incredible people!" 73 | }, 74 | { 75 | background: 76 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapertag.com%2Fwallpaper%2Ffull%2F2%2F6%2F8%2F123320-lord-of-the-rings-background-1920x1080-picture.jpg&f=1&nofb=1", 77 | title: "Lord of the Rings", 78 | description: 79 | "Watch this incredible film made by some incredible people!" 80 | } 81 | ]; 82 | 83 | let cast = [ 84 | { 85 | picture: 86 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.scdn.co%2Fimage%2F338040ea81df8012c152cfa65a4c1b440a94a1bc&f=1&nofb=1", 87 | square: 1000, 88 | name: "Will Smith" 89 | }, 90 | { 91 | picture: 92 | "//external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fsiskiyou.sou.edu%2Fwp-content%2Fuploads%2F2014%2F10%2FRobin.jpg&f=1&nofb=1", 93 | square: 2000, 94 | name: "Robin Williams" 95 | }, 96 | { 97 | picture: 98 | "//external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.byrdie.com%2Fthmb%2FaSjYcUqubm-ucpugLMuN8m-nvdU%3D%2F796x700%2Ffilters%3Ano_upscale()%3Amax_bytes(150000)%3Astrip_icc()%2Fcdn.cliqueinc.com__cache__posts__237400__jennifer-lawrence-hairstyles-237400-1506716140954-main.700x0c-af3f438528ea44f0aa9c3c1fe3ef8c64.jpg&f=1&nofb=1", 99 | square: 700, 100 | name: "Jennifer Lawrence" 101 | } 102 | ]; 103 | 104 | const IsMobile = () => { 105 | let width = 106 | window.innerWidth || 107 | document.documentElement.clientWidth || 108 | document.getElementsByTagName("body")[0].clientWidth; 109 | 110 | if (width <= 736) { 111 | return true; 112 | } else { 113 | return false; 114 | } 115 | }; 116 | 117 | const CheckSizeAttributes = () => { 118 | let width = 119 | window.innerWidth || 120 | document.documentElement.clientWidth || 121 | document.getElementsByTagName("body")[0].clientWidth; 122 | 123 | let carousels = document.getElementsByClassName("card-carousel"); 124 | 125 | let old_num_cards = num_cards_GLOBAL; 126 | let new_num_cards; 127 | 128 | if (width > 1501) { 129 | new_num_cards = 5; 130 | } else if (width <= 1500 && width > 1100) { 131 | new_num_cards = 4; 132 | } else if (width <= 1100 && width > 520) { 133 | new_num_cards = 3; 134 | } else if (width <= 520) { 135 | new_num_cards = 2; 136 | } 137 | 138 | for (let i = 0; i < carousels.length; i++) { 139 | if (carousels[i].children.length > 2) { 140 | for (let j = 1; j < carousels[i].children.length - 1; j++) { 141 | carousels[i].children[j].style.display = "none"; 142 | } 143 | for (let j = 1; j < new_num_cards + 1; j++) { 144 | carousels[i].children[j].style.display = "flex"; 145 | } 146 | } 147 | } 148 | 149 | num_cards_GLOBAL = new_num_cards; 150 | }; 151 | 152 | const ResizeHeader = () => { 153 | let width = 154 | window.innerWidth || 155 | document.documentElement.clientWidth || 156 | document.getElementsByTagName("body")[0].clientWidth; 157 | 158 | if (width <= 815) { 159 | if (document.getElementsByClassName("hamburger").length <= 0) { 160 | let header = document.getElementsByClassName("header")[0]; 161 | let main_nav = header.getElementsByClassName("main-nav")[0]; 162 | let right_nav = header.getElementsByClassName("right-nav")[0]; 163 | 164 | let hamburger = document.createElement("div"); 165 | hamburger.classList.add("hamburger"); 166 | hamburger.innerHTML = ``; 169 | main_nav.remove(); 170 | right_nav.remove(); 171 | 172 | let bottom_header = document.createElement("div"); 173 | bottom_header.classList.add("header-bottom"); 174 | bottom_header.append(main_nav, right_nav); 175 | bottom_header.style.display = "none"; 176 | 177 | hamburger.addEventListener("click", function () { 178 | if (bottom_header.style.display == "none") { 179 | bottom_header.style.display = "flex"; 180 | header.style.paddingBottom = "9px"; 181 | header.style.paddingTop = "9px"; 182 | } else { 183 | bottom_header.style.display = "none"; 184 | header.style.paddingBottom = "0px"; 185 | header.style.paddingTop = "0px"; 186 | } 187 | }); 188 | 189 | header.classList.add("header-change"); 190 | 191 | let top_header = document.createElement("div"); 192 | top_header.classList.add("header-top"); 193 | top_header.append(header.children[0], hamburger); 194 | 195 | header.innerHTML = ""; 196 | header.append(top_header, bottom_header); 197 | } 198 | } else { 199 | if (document.getElementsByClassName("hamburger").length > 0) { 200 | let header = document.getElementsByClassName("header")[0]; 201 | let main_nav = header.getElementsByClassName("main-nav")[0]; 202 | let right_nav = header.getElementsByClassName("right-nav")[0]; 203 | let brand = header.getElementsByClassName("brand")[0]; 204 | 205 | header.classList.remove("header-change"); 206 | header.children[0].remove(); 207 | header.children[0].remove(); 208 | header.append(brand, main_nav, right_nav); 209 | } 210 | } 211 | }; 212 | 213 | const AddCards = () => { 214 | let carousel_width = document.getElementsByClassName("card-carousel")[0] 215 | .clientWidth; 216 | 217 | let btn_width = 218 | document.getElementsByClassName("carousel-btn")[0].clientWidth + 219 | document.getElementsByClassName("carousel-btn")[1].clientWidth; 220 | 221 | let num_cards = num_cards_GLOBAL; 222 | let card_margin = 2; 223 | let initial_width = 1920; 224 | let initial_height = 1080; 225 | 226 | let scale = 227 | (100 * ((carousel_width - btn_width) / num_cards - card_margin * 2)) / 228 | initial_width; 229 | 230 | let content_titles = document.getElementsByClassName("content-title"); 231 | 232 | for (let i = 0; i < content_titles.length; i++) { 233 | content_titles[i].style.marginLeft = `${card_margin}px`; 234 | } 235 | 236 | let carousels = document.getElementsByClassName("card-carousel"); 237 | for (let i = 0; i < carousels.length; i++) { 238 | let not_chosen = []; 239 | 240 | for (let c = 0; c < cards.length; c++) { 241 | not_chosen.push(c); 242 | } 243 | 244 | for (let j = 0; j < cards.length; j++) { 245 | let chosen_index = Math.floor(Math.random() * not_chosen.length); 246 | 247 | let chosen_card = cards[not_chosen[chosen_index]]; 248 | 249 | not_chosen.splice(chosen_index, 1); 250 | 251 | let card = document.createElement("div"); 252 | card.classList.add("card"); 253 | card.style.backgroundImage = `url(${chosen_card.background})`; 254 | 255 | //If image doesn't load 256 | card.style.backgroundColor = `#333`; 257 | 258 | card.style.width = initial_width * (scale / 100) + "px"; 259 | card.style.height = initial_height * (scale / 100) + "px"; 260 | card.style.margin = `0px ${card_margin}px`; 261 | card.style.minWidth = initial_width * (scale / 100) + "px"; 262 | card.style.minHeight = initial_height * (scale / 100) + "px"; 263 | 264 | let overlay = document.createElement("div"); 265 | overlay.classList.add("overlay"); 266 | 267 | let title = document.createElement("h4"); 268 | title.innerText = chosen_card.title; 269 | let description = document.createElement("p"); 270 | description.innerText = "1h 25m"; 271 | 272 | let button_container = document.createElement("div"); 273 | button_container.classList.add("button-container"); 274 | 275 | let button1 = document.createElement("div"); 276 | button1.innerHTML = ``; 279 | button1.classList.add("watch"); 280 | 281 | let button2 = document.createElement("div"); 282 | button2.innerHTML = ``; 286 | button2.classList.add("queue"); 287 | 288 | button2.addEventListener("click", function () { 289 | ToggleWatchLater(`${chosen_card.title}`); 290 | }); 291 | 292 | let button3 = document.createElement("div"); 293 | button3.innerHTML = ``; 296 | button3.classList.add("star"); 297 | button3.classList.add("queue"); 298 | 299 | button3.addEventListener("click", function () { 300 | if (button3.children[0].style.color != "rgb(255, 255, 87)") { 301 | button3.children[0].style.color = "rgb(255, 255, 87)"; 302 | } else { 303 | button3.children[0].style.color = "white"; 304 | } 305 | }); 306 | 307 | let button4 = document.createElement("div"); 308 | button4.innerHTML = ``; 312 | button4.classList.add("star"); 313 | button4.classList.add("queue"); 314 | 315 | button4.addEventListener("click", function () { 316 | if (document.getElementsByClassName("movie-desc").length > 0) { 317 | // If the modal exists 318 | document.getElementsByClassName("movie-desc")[0].remove(); 319 | } else { 320 | let modal = document.createElement("div"); 321 | modal.classList.add("movie-desc"); 322 | 323 | let modal_content = document.createElement("div"); 324 | modal_content.classList.add("modal-content"); 325 | 326 | let bg_image = document.createElement("div"); 327 | bg_image.classList.add("desc-image"); 328 | bg_image.style.backgroundImage = `url(${chosen_card.background})`; 329 | let image_cover = document.createElement("div"); 330 | 331 | let close_btn = document.createElement("div"); 332 | close_btn.classList.add("close-btn"); 333 | close_btn.innerHTML = ``; 336 | 337 | close_btn.addEventListener("click", function () { 338 | this.parentElement.parentElement.parentElement.parentElement.remove(); 339 | }); 340 | 341 | image_cover.append(close_btn); 342 | bg_image.append(image_cover); 343 | 344 | let top_info = document.createElement("div"); 345 | top_info.classList.add("desc-top"); 346 | let title = document.createElement("h1"); 347 | title.innerText = chosen_card.title; 348 | 349 | let btn_selection = document.createElement("div"); 350 | btn_selection.classList.add("button-selection"); 351 | btn_selection.innerHTML = ` 352 |

353 |

Play

354 | 358 |

359 |

360 |

Watch Later

361 | 365 |

`; 366 | 367 | top_info.append(title, btn_selection); 368 | 369 | let mid_info = document.createElement("div"); 370 | mid_info.classList.add("desc-mid"); 371 | mid_info.innerHTML = `

${chosen_card.description}

`; 372 | 373 | let bottom_info = document.createElement("div"); 374 | bottom_info.classList.add("desc-bottom"); 375 | 376 | let cast_slider = document.createElement("div"); 377 | cast_slider.classList.add("cast"); 378 | 379 | bottom_info.append(cast_slider); 380 | 381 | modal_content.append( 382 | bg_image, 383 | top_info, 384 | mid_info, 385 | bottom_info 386 | ); 387 | modal.append(modal_content); 388 | 389 | document.body.append(modal); 390 | 391 | document.body.addEventListener("click", function (event) { 392 | if (!event.target.classList.contains("modal-content")) { 393 | //modal.remove(); 394 | console.log(1); 395 | } 396 | }); 397 | 398 | // Set the height for the modal image 399 | let total_width = document.getElementsByClassName( 400 | "modal-content" 401 | )[0].clientWidth; 402 | let large_scale = (100 * total_width) / 1920; 403 | document.getElementsByClassName( 404 | "desc-image" 405 | )[0].style.height = `${1080 * (large_scale / 100)}px`; 406 | 407 | // Set image for cast 408 | for (let c = 0; c < cast.length; c++) { 409 | let cast_block = document.createElement("div"); 410 | cast_block.classList.add("cast-card"); 411 | cast_block.style.backgroundImage = `url("${cast[c].picture}")`; 412 | cast_block.style.width = 100 / cast.length - 5 + "%"; 413 | cast_block.style.height = `calc(${ 414 | document.getElementsByClassName("cast")[0] 415 | .clientWidth / cast.length 416 | }"px" - 5%)`; 417 | cast_slider.append(cast_block); 418 | } 419 | } 420 | }); 421 | 422 | button_container.append(button1, button2, button3, button4); 423 | 424 | overlay.append(title, description, button_container); 425 | card.append(overlay); 426 | if (j < num_cards) { 427 | carousels[i].insertBefore( 428 | card, 429 | carousels[i].children[carousels[i].children.length - 1] 430 | ); 431 | } else { 432 | card.style.display = "none"; 433 | carousels[i].insertBefore( 434 | card, 435 | carousels[i].children[carousels[i].children.length - 1] 436 | ); 437 | } 438 | } 439 | } 440 | }; 441 | 442 | const CheckCards = () => { 443 | let carousels = document.getElementsByClassName("card-carousel"); 444 | 445 | for (let i = 0; i < carousels.length; i++) { 446 | let carousel_width = carousels[i].clientWidth; 447 | 448 | let btn_width = 449 | carousels[i].getElementsByClassName("carousel-btn")[0].clientWidth + 450 | carousels[i].getElementsByClassName("carousel-btn")[1].clientWidth; 451 | 452 | let num_cards = num_cards_GLOBAL; 453 | let card_margin = 2; 454 | let initial_width = 1920; 455 | let initial_height = 1080; 456 | 457 | let scale = 458 | (100 * 459 | ((carousel_width - btn_width) / num_cards - card_margin * 2)) / 460 | initial_width; 461 | 462 | let cards = carousels[i].getElementsByClassName("card"); 463 | 464 | for (let i = 0; i < cards.length; i++) { 465 | cards[i].style.width = initial_width * (scale / 100) + "px"; 466 | cards[i].style.height = initial_height * (scale / 100) + "px"; 467 | cards[i].style.margin = `0px ${card_margin}px`; 468 | cards[i].style.minWidth = initial_width * (scale / 100) + "px"; 469 | cards[i].style.minHeight = initial_height * (scale / 100) + "px"; 470 | } 471 | 472 | if (IsMobile()) { 473 | carousels[i].style.height = 474 | 1.6 * (initial_height * (scale / 100)) + "px"; 475 | } else { 476 | carousels[i].style.height = "auto"; 477 | } 478 | } 479 | }; 480 | 481 | const AddCarouselButtons = () => { 482 | let carousels = document.getElementsByClassName("card-carousel"); 483 | for (let i = 0; i < carousels.length; i++) { 484 | let btn1 = document.createElement("div"); 485 | btn1.classList.add("carousel-btn"); 486 | btn1.innerHTML = ``; 489 | 490 | let btn2 = document.createElement("div"); 491 | btn2.classList.add("carousel-btn"); 492 | 493 | btn2.innerHTML = ``; 496 | 497 | carousels[i].append(btn1, btn2); 498 | } 499 | }; 500 | 501 | const ScrollFunction = () => { 502 | let header = document.getElementsByClassName("header")[0]; 503 | if (document.documentElement.scrollTop > 1) { 504 | header.classList.add("header-active"); 505 | } else { 506 | header.classList.remove("header-active"); 507 | } 508 | }; 509 | 510 | const MakeJumbotron = () => { 511 | let height = 512 | window.innerHeight || 513 | document.documentElement.clientHeight || 514 | document.getElementsByTagName("body")[0].clientHeight; 515 | 516 | document.getElementsByClassName("top")[0].style.height = `${height}px`; 517 | }; 518 | 519 | let slide_index = 0; 520 | 521 | const AutoSlideShow = () => { 522 | let slide_area = document.getElementsByClassName("top")[0]; 523 | let container = slide_area.children[0]; 524 | 525 | container.classList.add("fadeIn"); 526 | 527 | let bg_display = []; 528 | for (let i = 0; i < cards.length; i++) { 529 | if (cards[i].display_background) { 530 | bg_display.push(i); 531 | } 532 | } 533 | 534 | slide_index++; 535 | if (slide_index > bg_display.length - 1) { 536 | slide_index = 0; 537 | } 538 | 539 | slide_area.style.backgroundImage = `url("${ 540 | cards[bg_display[slide_index]].display_background 541 | }")`; 542 | slide_area.getElementsByTagName("h1")[0].innerHTML = 543 | cards[bg_display[slide_index]].title; 544 | slide_area.getElementsByTagName("p")[0].innerHTML = 545 | cards[bg_display[slide_index]].description; 546 | 547 | container.classList.add("fadeOut"); 548 | setTimeout(AutoSlideShow, 2000); 549 | }; 550 | 551 | const SmoothScroll = (id) => { 552 | let element = document.getElementById(id); 553 | element.scrollIntoView({ behavior: "smooth", block: "center" }); 554 | }; 555 | 556 | const Next = (elem) => { 557 | let carousel = elem.parentElement.parentElement; 558 | let first_elem = carousel.children[1]; 559 | let next_elem; 560 | 561 | for (let i = 0; i < carousel.children.length; i++) { 562 | if (carousel.children[i].style.display == "none") { 563 | next_elem = carousel.children[i]; 564 | break; 565 | } 566 | } 567 | 568 | first_elem.style.display = "none"; 569 | first_elem.remove(); 570 | carousel.insertBefore( 571 | first_elem, 572 | carousel.children[carousel.children.length - 1] 573 | ); 574 | 575 | next_elem.style.display = "flex"; 576 | }; 577 | 578 | const Previous = (elem) => { 579 | let carousel = elem.parentElement.parentElement; 580 | let last_display_item; 581 | let prev_elem = carousel.children[carousel.children.length - 2]; 582 | 583 | for (let i = 0; i < carousel.children.length; i++) { 584 | if ( 585 | carousel.children[i].style.display != "none" && 586 | !carousel.children[i].classList.contains("carousel-btn") 587 | ) { 588 | last_display_item = carousel.children[i]; 589 | } 590 | } 591 | 592 | last_display_item.style.display = "none"; 593 | 594 | carousel.insertBefore(prev_elem, carousel.children[1]); 595 | 596 | prev_elem.style.display = "flex"; 597 | }; 598 | 599 | const ToggleWatchLater = (movie = "", activate = true) => { 600 | let modal = document.getElementsByClassName("watch-later-modal")[0]; 601 | 602 | if (movie != "") { 603 | modal.getElementsByClassName("movie")[0].innerText = movie; 604 | } 605 | 606 | if (activate) { 607 | modal.style.display = "flex"; 608 | } else { 609 | modal.style.display = "none"; 610 | } 611 | }; 612 | --------------------------------------------------------------------------------

FiRE

WATCH

HOME

MOVIES

TRENDING

RELEASES

SEARCH

Log In

Interstellar

Play

Watch Later

TRENDING

NEW RELEASES

Can't Find Anything You Like?

ACTION

DRAMA

THRILLER

Help Center

Private Policy

Contact Us

Terms of Use

Jobs

Legal Notices

FiRE

WATCH

Added to your WATCH LATER playlist!

Play

Watch Later