diff --git a/slideshowpure - no-support.css b/graveyard/slideshowpure - no-support.css similarity index 100% rename from slideshowpure - no-support.css rename to graveyard/slideshowpure - no-support.css diff --git a/graveyard/slideshowpure.css b/graveyard/slideshowpure.css new file mode 100644 index 0000000..c6dd816 --- /dev/null +++ b/graveyard/slideshowpure.css @@ -0,0 +1,2511 @@ +@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap); +.bar-loading { + z-index: 99999999; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.bar-loading h1 img { + opacity: 1; + display: block; + z-index: 999999999 !important; + visibility: visible; +} +.docspinner-loader { + width: 10px; + height: 10px; + margin: 50px auto 0; + position: relative; + border-radius: 50%; + border: 4px solid #fff0; + border-top-color: #fff; + animation: spin 1s linear infinite; + z-index: 999999999 !important; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@media only screen and (max-width: 480px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + cursor: pointer; + color: rgb(255 255 255 / 0.6); + z-index: 4; + -webkit-tap-highlight-color: #fff0; + display: none; + } + .left-arrow { + left: 10px; + } + .right-arrow { + right: 10px; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + body { + margin: 0; + padding: 0; + height: 100%; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #homeTab { + top: -5em; + padding-bottom: 5em !important; + position: relative; + padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -11em; + } + .dots-container { + position: absolute; + bottom: 20%; + left: 50%; + transform: translateX(-50%) scale(0.6); + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff13; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 27px; + height: 12px; + background-color: #fff; + border-radius: 10px; + } + #slides-container { + position: relative; + width: 100vw; + height: 800px; + overflow: hidden; + margin: 0; + padding: 0%; + top: -3.5em; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + z-index: 4; + filter: brightness(1.5); + } + .featured-logo-blur { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + scale: 1.01; + filter: blur(1.1rem); + z-index: 3; + } + .backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 0.65); + z-index: 2; + pointer-events: none; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + bottom: 30%; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + width: 90%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: "Archivo Narrow", sans-serif; + font-size: 1.1em; + font-weight: 500; + z-index: 4; + box-sizing: border-box; + } + .info-container { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + font-size: 1.1em; + color: #fff; + z-index: 5; + width: 100%; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-left: 2px; + } + .tomato-rating { + display: flex; + align-items: center; + } + .tomato-logo { + margin-right: 3px; + } + .critic-logo { + margin-left: 3px; + } + .imdb-logo { + margin-right: 3px; + } + .age-rating { + display: flex; + align-items: center; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.4em; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 1px; + color: aquamarine; + } + .featured-content, + .plot { + display: none; + } + .button-container { + position: absolute; + bottom: 13%; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 4; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: none; + border-radius: 20px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + border: solid 1.5px rgb(12 109 162 / 0.8); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (max-width: 767px) and (orientation: landscape) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: none; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 11em); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.8; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 170vh; + overflow: hidden; + margin: 0 auto; + top: -7.5em; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -60vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 8em; + left: 5em; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 4.5em; + position: absolute; + top: 8.5em; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 35px); + left: 4.8em; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + 0px); + display: flex; + align-items: center; + justify-content: center; + left: -1em !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + margin: 0 6em; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 10em); + left: 4.5em; + display: flex; + z-index: 5; + justify-content: space-between; + width: 16em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: none; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 14vh); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.6; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 70vh; + overflow: hidden; + margin: 0 auto; + top: -7.5em; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -25vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 10vh; + left: 6vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 6vw; + position: absolute; + top: 10vh; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 0vh); + left: 6vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + -4vh); + display: flex; + align-items: center; + justify-content: center; + left: 6vw !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 13vh); + left: 4em; + display: flex; + z-index: 5; + justify-content: space-between; + width: 15em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: none; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 9em); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.6; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 135vh; + overflow: hidden; + margin: 0 auto; + top: -7.5em; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -50vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 6em; + left: 5vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 5vw; + position: absolute; + top: 6.5em; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 3vh); + left: 5vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + -6vh); + display: flex; + align-items: center; + justify-content: center; + left: 5vw !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 7.5em); + left: 5vw; + display: flex; + z-index: 5; + justify-content: space-between; + width: 14em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (min-width: 1025px) and (max-width: 1440px) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: flex; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 26vh); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.8; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 95vh; + overflow: hidden; + margin: 0 auto; + top: -7.8em; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -16em; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 10em; + left: 6vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 6vw; + position: absolute; + top: 20vh; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 50px); + left: 6vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + 0px); + display: flex; + align-items: center; + justify-content: center; + left: 6vw !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 25vh); + left: 5vw; + display: flex; + z-index: 5; + justify-content: space-between; + width: 14em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (min-width: 1441px) and (max-width: 2560px) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: flex; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 22vh); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.8; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 98vh; + overflow: hidden; + margin: 0 auto; + top: -7.5em; + } + .layout-desktop .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -36vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 15vh; + left: 5vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 5vw; + position: absolute; + top: 20vh; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 4.5vh); + left: 5vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + -2vh); + display: flex; + align-items: center; + justify-content: center; + left: 5vw !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 21vh); + left: 5vw; + display: flex; + z-index: 5; + justify-content: space-between; + width: 14em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} +@media only screen and (min-width: 2561px) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: flex; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 21vh); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.8; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 95vh; + overflow: hidden; + margin: 0 auto; + top: -6.8em; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -25vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 10em; + left: 5vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 5vw; + position: absolute; + top: 18vh; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 5vh); + left: 5vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + 0vh); + display: flex; + align-items: center; + justify-content: center; + left: 5vw !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 20vh); + left: 10vh; + display: flex; + z-index: 5; + justify-content: space-between; + width: 15em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} diff --git a/graveyard/slideshowpure.js b/graveyard/slideshowpure.js new file mode 100644 index 0000000..ea8ae97 --- /dev/null +++ b/graveyard/slideshowpure.js @@ -0,0 +1,558 @@ +const getJellyfinCredentials = () => { + const jellyfinCreds = localStorage.getItem("jellyfin_credentials"); + try { + const serverCredentials = JSON.parse(jellyfinCreds); + const firstServer = serverCredentials.Servers[0]; + if (!firstServer) { + console.error("Could not find credentials for the client"); + return; + } + return { token: firstServer.AccessToken, userId: firstServer.UserId }; + } catch (e) { + console.error("Could not parse jellyfin credentials", e); + } +}; + +const initLoadingScreen = () => { + const currentPath = window.location.href.toLowerCase(); + if ( + currentPath.includes("/web/#/home.html") || + currentPath.includes("/web/index.html#/home.html") || + currentPath.endsWith("/web/") + ) { + const loadingHTML = ` +
+

+ Server Logo +

+ +
`; + document.body.insertAdjacentHTML("beforeend", loadingHTML); + const interval = setInterval(() => { + if (document.querySelector(".manualLoginForm")) { + $(".bar-loading").fadeOut(700, () => $(".bar-loading").remove()); + clearInterval(interval); + } + }, 100); + } +}; +initLoadingScreen(); +const slidesInit = async () => { + if (window.hasInitializedSlideshow) { + console.log("Slideshow already initialized. Skipping re-init."); + return; + } + + window.hasInitializedSlideshow = !0; + const shuffleInterval = 8000; + let isTransitioning = !1; + const listFileName = `${window.location.origin}/web/avatars/list.txt`; + const { token, userId } = getJellyfinCredentials(); + const shuffleArray = (array) => array.sort(() => Math.random() - 0.5); + const truncateText = (element, maxLength) => { + let text = element.innerText; + if (text.length > maxLength) + element.innerText = text.substring(0, maxLength) + "..."; + }; + const createSlideElement = (item, title) => { + const itemId = item.Id; + const plot = item.Overview || "No overview available"; + const rating = item.CommunityRating; + const criticRating = item.CriticRating; + const runtime = item.RunTimeTicks; + const genresArray = item.Genres; + const age = item.OfficialRating; + const date = item.PremiereDate; + const season = item.ChildCount; + function createSeparator() { + const separatorHtml = + ''; + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = separatorHtml; + return tempDiv.firstChild; + } + const slide = document.createElement("a"); + slide.className = "slide"; + slide.target = "_top"; + slide.rel = "noreferrer"; + slide.tabIndex = 0; + slide.style.display = "none"; + const backdrop = document.createElement("img"); + backdrop.className = "backdrop"; + backdrop.src = `${window.location.origin}/Items/${itemId}/Images/Backdrop/0`; + backdrop.alt = "Backdrop"; + backdrop.loading = "eager"; + const backdropOverlay = document.createElement("div"); + backdropOverlay.className = "backdrop-overlay"; + const backdropContainer = document.createElement("div"); + backdropContainer.className = "backdrop-container"; + backdropContainer.appendChild(backdrop); + backdropContainer.appendChild(backdropOverlay); + const logo = document.createElement("img"); + logo.className = "logo"; + logo.src = `${window.location.origin}/Items/${itemId}/Images/Logo`; + logo.alt = "Logo"; + logo.loading = "eager"; + const logoImgBlur = document.createElement("img"); + logoImgBlur.src = `${window.location.origin}/Items/${itemId}/Images/Logo`; + logoImgBlur.alt = item.Name || "Title"; + logoImgBlur.loading = "eager"; + logoImgBlur.className = "featured-logo-blur"; + const logoContainer = document.createElement("div"); + logoContainer.className = "logo-container"; + logoContainer.appendChild(logo); + logoContainer.appendChild(logoImgBlur); + const featuredContent = document.createElement("div"); + featuredContent.className = "featured-content"; + featuredContent.textContent = title; + const plotElement = document.createElement("div"); + plotElement.className = "plot"; + plotElement.textContent = plot; + truncateText(plotElement, 360); + const plotContainer = document.createElement("div"); + plotContainer.className = "plot-container"; + plotContainer.appendChild(plotElement); + const gradientOverlay = document.createElement("div"); + gradientOverlay.className = "gradient-overlay"; + const runTimeElement = document.createElement("div"); + runTimeElement.className = "runTime"; + if (season === undefined) { + const milliseconds = runtime / 10000; + const currentTime = new Date(); + const endTime = new Date(currentTime.getTime() + milliseconds); + const options = { hour: "2-digit", minute: "2-digit", hour12: !0 }; + const formattedEndTime = endTime.toLocaleTimeString([], options); + runTimeElement.textContent = `Ends at ${formattedEndTime}`; + } else { + runTimeElement.textContent = `${season} Season${season > 1 ? "s" : ""}`; + } + const ratingTest = document.createElement("div"); + ratingTest.className = "rating-value"; + const imdbLogo = document.createElement("img"); + imdbLogo.className = "imdb-logo"; + imdbLogo.src = + "https://upload.wikimedia.org/wikipedia/commons/6/69/IMDB_Logo_2016.svg"; + imdbLogo.alt = "IMDb Logo"; + imdbLogo.style.width = "30px"; + imdbLogo.style.height = "30px"; + ratingTest.appendChild(imdbLogo); + if (typeof rating === "number") { + const formattedRating = rating.toFixed(1); + ratingTest.innerHTML += `${formattedRating}`; + } else { + ratingTest.innerHTML += `N/A`; + } + ratingTest.appendChild(createSeparator()); + const tomatoRatingDiv = document.createElement("div"); + tomatoRatingDiv.className = "tomato-rating"; + const tomatoLogo = document.createElement("img"); + tomatoLogo.className = "tomato-logo"; + tomatoLogo.src = + "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Rotten_Tomatoes_positive_audience.svg/1920px-Rotten_Tomatoes_positive_audience.svg.png"; + const criticLogo = document.createElement("img"); + criticLogo.className = "critic-logo"; + let valueElement; + if (typeof criticRating === "number") { + valueElement = document.createTextNode(`${criticRating}% `); + } else { + const naSpan = document.createElement("span"); + naSpan.textContent = "N/A "; + naSpan.style.color = "#fff9"; + valueElement = naSpan; + } + if (criticRating === undefined || criticRating <= 59) { + criticLogo.src = + "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Rotten_Tomatoes_rotten.svg/1024px-Rotten_Tomatoes_rotten.svg.png"; + criticLogo.alt = "Rotten Tomato"; + } else { + criticLogo.src = "https://i.imgur.com/iMfwDk7.png"; + criticLogo.alt = "Fresh Tomato"; + } + tomatoLogo.style.width = "15px"; + tomatoLogo.style.height = "17px"; + criticLogo.style.width = "15px"; + criticLogo.style.height = "15px"; + tomatoRatingDiv.appendChild(tomatoLogo); + tomatoRatingDiv.appendChild(valueElement); + tomatoRatingDiv.appendChild(criticLogo); + tomatoRatingDiv.appendChild(createSeparator()); + const ageRatingDiv = document.createElement("div"); + ageRatingDiv.className = "age-rating"; + if (item.OfficialRating) { + ageRatingDiv.innerHTML = `${item.OfficialRating}`; + } else { + ageRatingDiv.innerHTML = `N/A`; + } + const premiereDate = document.createElement("div"); + premiereDate.className = "date"; + const year = date ? new Date(date).getFullYear() : NaN; + if (isNaN(year)) { + const naSpan = document.createElement("span"); + naSpan.textContent = "N/A"; + naSpan.style.color = "#fff9"; + premiereDate.innerHTML = ""; + premiereDate.appendChild(naSpan); + } else { + premiereDate.textContent = year; + } + ratingTest.appendChild(tomatoRatingDiv); + ratingTest.appendChild(premiereDate); + ratingTest.appendChild(createSeparator()); + ratingTest.appendChild(ageRatingDiv); + ratingTest.appendChild(createSeparator()); + ratingTest.appendChild(runTimeElement); + function parseGenres(genresArray) { + if (genresArray && genresArray.length > 0) { + return genresArray.slice(0, 3).join(" 🔹 "); + } else { + return "No Genre Available"; + } + } + const genreElement = document.createElement("div"); + genreElement.className = "genre"; + genreElement.innerHTML = parseGenres(genresArray); + const infoContainer = document.createElement("div"); + infoContainer.className = "info-container"; + infoContainer.appendChild(ratingTest); + const buttonContainer = document.createElement("div"); + buttonContainer.className = "button-container"; + const playButton = document.createElement("button"); + playButton.className = "play-button"; + playButton.innerHTML = ` + play_circle_fill + Play +`; + playButton.onclick = async () => { + if (!window.PlaybackManager) { + console.error("PlaybackManager is not available."); + return; + } + if (!window.ApiClient) { + console.error("Jellyfin API client is not available."); + return; + } + const apiClient = window.ApiClient; + const userId = apiClient.getCurrentUserId(); + if (!userId) { + console.error("User not found."); + return; + } + try { + const item = await apiClient.getItem(userId, itemId); + if (!item) { + console.error("Media item not found."); + return; + } + window.PlaybackManager.play({ + items: [item], + startPositionTicks: 0, + isMuted: !1, + isPaused: !1, + }) + .then(() => { + console.log("Playback started successfully."); + }) + .catch((error) => { + console.error("Failed to start playback:", error); + }); + } catch (error) { + console.error("Error starting playback:", error); + } + }; + const detailButton = document.createElement("button"); + detailButton.className = "detail-button"; + detailButton.innerHTML = ` + + Info +`; + detailButton.onclick = () => { + window.top.location.href = `/#!/details?id=${itemId}`; + }; + buttonContainer.appendChild(detailButton); + buttonContainer.appendChild(playButton); + slide.append( + logoContainer, + backdropContainer, + gradientOverlay, + featuredContent, + plotContainer, + infoContainer, + genreElement, + buttonContainer + ); + return slide; + }; + const createSlideForItem = async (item, title) => { + const container = document.getElementById("slides-container"); + const itemId = item.Id; + const backdropUrl = `${window.location.origin}/Items/${itemId}/Images/Backdrop/0`; + const logoUrl = `${window.location.origin}/Items/${itemId}/Images/Logo`; + const [backdropExists, logoExists] = await Promise.all([ + fetch(backdropUrl, { method: "HEAD" }).then((res) => res.ok), + fetch(logoUrl, { method: "HEAD" }).then((res) => res.ok), + ]); + if (backdropExists && logoExists) { + const slideElement = createSlideElement(item, title); + container.appendChild(slideElement); + if (container.children.length === 1) { + showSlide(0); + } + } else { + console.warn(`Skipping item ${itemId}: Missing backdrop or logo.`); + } + }; + const fetchItemDetails = async (itemId) => { + const response = await fetch(`${window.location.origin}/Items/${itemId}`, { + headers: { + Authorization: `MediaBrowser Client="Jellyfin Web", Device="YourDeviceName", DeviceId="YourDeviceId", Version="YourClientVersion", Token="${token}"`, + }, + }); + const item = await response.json(); + return item; + }; + const fetchItemIdsFromList = async () => { + try { + const response = await fetch(listFileName); + if (!response.ok) { + throw new Error("Failed to fetch list.txt"); + } + const text = await response.text(); + return text + .split("\n") + .map((id) => id.trim()) + .filter((id) => id) + .slice(1); + } catch (error) { + console.error("Error fetching list.txt:", error); + return []; + } + }; + const fetchItemsFromServer = async () => { + try { + const response = await fetch( + `${window.location.origin}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&SortBy=random&isPlayed=False&Limit=500`, + { + headers: { + Authorization: `MediaBrowser Client="Jellyfin Web", Device="YourDeviceName", DeviceId="YourDeviceId", Version="YourClientVersion", Token="${token}"`, + }, + } + ); + const data = await response.json(); + const items = data.Items; + const movies = items.filter((item) => item.Type === "Movie"); + const tvShows = items.filter((item) => item.Type === "Series"); + const shuffledMovies = shuffleArray(movies); + const shuffledTvShows = shuffleArray(tvShows); + const selectedMovies = shuffledMovies.slice(0, 15); + const selectedTvShows = shuffledTvShows.slice(0, 15); + const allItems = []; + const maxLength = Math.max(selectedMovies.length, selectedTvShows.length); + for (let i = 0; i < maxLength; i++) { + if (i < selectedMovies.length) allItems.push(selectedMovies[i]); + if (i < selectedTvShows.length) allItems.push(selectedTvShows[i]); + } + return allItems; + } catch (error) { + console.error("Error fetching items:", error); + return []; + } + }; + const createSlidesForItems = async (items) => { + await Promise.all( + items.map((item) => + createSlideForItem(item, item.Type === "Movie" ? "Movie" : "TV Show") + ) + ); + }; + const createPaginationDots = () => { + const dotsContainer = document.createElement("div"); + dotsContainer.className = "dots-container"; + for (let i = 0; i < 5; i++) { + const dot = document.createElement("span"); + dot.className = "dot"; + dotsContainer.appendChild(dot); + } + const container = document.getElementById("slides-container"); + container.appendChild(dotsContainer); + }; + const showSlide = (index) => { + const slides = document.querySelectorAll(".slide"); + const dots = document.querySelectorAll(".dot"); + slides.forEach((slide, i) => { + if (i === index) { + slide.style.removeProperty("display"); + slide.style.display = "block"; + slide.offsetHeight; + slide.style.opacity = "1"; + slide.classList.add("active"); + } else { + slide.style.opacity = "0"; + slide.classList.remove("active"); + setTimeout(() => { + slide.style.display = "none"; + }, 500); + } + document.getElementById("slides-container").offsetHeight; + }); + dots.forEach((dot, i) => { + dot.classList.toggle("active", i === index % 5); + }); + }; + const initializeSlideshow = () => { + var slideInterval = null; + class SlideTimer { + constructor(fnctn, time) { + var timerObject = setInterval(fnctn, time); + this.stop = function () { if (timerObject) { clearInterval(timerObject); timerObject = null; } return this; }; + this.start = function () { if (!timerObject) { this.stop(); timerObject = setInterval(fnctn, time); } return this; }; + this.restart = function () { return this.stop().start(); }; + } + } + const slides = document.querySelectorAll(".slide"); + createPaginationDots(); + const container = document.getElementById("slides-container"); + let currentSlideIndex = 0; + let focusedSlide = null; + let containerFocused = !1; + const updateCurrentSlide = (index) => { + if (isTransitioning) return; + isTransitioning = !0; + currentSlideIndex = (index + slides.length) % slides.length; + showSlide(currentSlideIndex); + slideInterval.restart(); + setTimeout(() => { + isTransitioning = !1; + }, 500); + }; + const openActiveSlide = () => { + if (focusedSlide) { + window.location.href = focusedSlide.href; + } + }; + if (slides.length > 0) { + showSlide(currentSlideIndex); + container.style.display = "block"; + slideInterval = + new SlideTimer(function() { + updateCurrentSlide(currentSlideIndex + 1); + }, shuffleInterval); + + } + slides.forEach((slide) => { + slide.addEventListener( + "focus", + () => { + focusedSlide = slide; + container.classList.remove("disable-interaction"); + }, + !0 + ); + slide.addEventListener( + "blur", + () => { + if (focusedSlide === slide) { + focusedSlide = null; + } + }, + !0 + ); + }); + document.addEventListener("keydown", (event) => { + if (containerFocused) { + switch (event.keyCode) { + case 37: + updateCurrentSlide(currentSlideIndex - 1); + break; + case 39: + updateCurrentSlide(currentSlideIndex + 1); + break; + case 13: + case 32: + openActiveSlide(); + break; + } + } + }); + const leftArrow = document.createElement("div"); + const rightArrow = document.createElement("div"); + leftArrow.classList.add("arrow", "left-arrow"); + rightArrow.classList.add("arrow", "right-arrow"); + leftArrow.innerHTML = ''; + rightArrow.innerHTML = ''; + container.appendChild(leftArrow); + container.appendChild(rightArrow); + let touchStartX = 0; + let touchEndX = 0; + const minSwipeDistance = 50; + let isTouchOnButton = false; + + container.addEventListener( + "touchstart", + (event) => { + touchStartX = event.touches[0].clientX; + isTouchOnButton = + event.target.closest(".play-button, .detail-button") !== null; + }, + { passive: false } + ); + container.addEventListener( + "touchmove", + (event) => { + touchEndX = event.touches[0].clientX; + }, + { passive: false } + ); + + container.addEventListener( + "touchend", + (event) => { + if (isTouchOnButton) return; + + const swipeDistance = touchEndX - touchStartX; + if (Math.abs(swipeDistance) > minSwipeDistance) { + event.preventDefault(); + event.stopPropagation(); + if (swipeDistance < 0) { + updateCurrentSlide(currentSlideIndex + 1); + } else { + updateCurrentSlide(currentSlideIndex - 1); + } + } + }, + { passive: false } + ); + leftArrow.addEventListener("click", () => + updateCurrentSlide(currentSlideIndex - 1) + ); + rightArrow.addEventListener("click", () => + updateCurrentSlide(currentSlideIndex + 1) + ); + container.addEventListener("focus", () => { + containerFocused = !0; + }); + container.addEventListener("blur", () => { + containerFocused = !1; + }); + }; + const initializeSlides = async () => { + const itemIds = await fetchItemIdsFromList(); + let items; + if (itemIds.length > 0) { + const itemPromises = itemIds.map((id) => fetchItemDetails(id)); + items = await Promise.all(itemPromises); + } else { + const allItems = await fetchItemsFromServer(); + const itemPromises = allItems.map((item) => fetchItemDetails(item.Id)); + items = await Promise.all(itemPromises); + } + items = shuffleArray(items); + await createSlidesForItems(items); + initializeSlideshow(); + $(".bar-loading").fadeOut(700, () => $(".bar-loading").remove()); + }; + initializeSlides(); +}; diff --git a/slideshowpure.css b/slideshowpure.css index c6dd816..eca511a 100644 --- a/slideshowpure.css +++ b/slideshowpure.css @@ -38,7 +38,8 @@ } } -@media only screen and (max-width: 480px) and (orientation: portrait) { +/*Mobiles S*/ +@media only screen and (max-width: 320px) and (orientation: portrait) { .backdrop, .slide { position: absolute; @@ -80,16 +81,16 @@ .fade-out { opacity: 0 !important; } - #homeTab { + /*#homeTab { top: -5em; padding-bottom: 5em !important; position: relative; padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; - } + }*/ .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -11em; + top: 71vh; } .dots-container { position: absolute; @@ -129,7 +130,7 @@ overflow: hidden; margin: 0; padding: 0%; - top: -3.5em; + /*top: -3.5em;*/ } .slide { transition: opacity 0.5s ease-in-out; @@ -336,7 +337,8 @@ align-items: center; } } -@media only screen and (max-width: 767px) and (orientation: landscape) { + +@media only screen and (max-width: 320px) and (orientation: landscape) { .backdrop, .slide { position: absolute; @@ -426,15 +428,1339 @@ #slides-container { position: relative; width: 100vw; - height: 170vh; + height: 190vh; overflow: hidden; margin: 0 auto; - top: -7.5em; } .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -60vh; + top: 125vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 70%; + max-width: 100%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 8vh; + left: 5vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 5vw; + position: absolute; + top: 8.5em; + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 35px); + left: 5vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + 0px); + display: flex; + align-items: center; + justify-content: center; + left: -1em !important; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 10em); + left: 4.5em; + display: flex; + z-index: 5; + justify-content: space-between; + width: 16em; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +/*Mobiles M*/ +@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + cursor: pointer; + color: rgb(255 255 255 / 0.6); + z-index: 4; + -webkit-tap-highlight-color: #fff0; + display: none; + } + .left-arrow { + left: 10px; + } + .right-arrow { + right: 10px; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + body { + margin: 0; + padding: 0; + height: 100%; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + /*#homeTab { + top: -5em; + padding-bottom: 5em !important; + position: relative; + padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; + }*/ + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 91vh; + } + .dots-container { + position: absolute; + bottom: 20%; + left: 50%; + transform: translateX(-50%) scale(0.6); + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff13; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 27px; + height: 12px; + background-color: #fff; + border-radius: 10px; + } + #slides-container { + position: relative; + width: 100vw; + height: 120vh; + overflow: hidden; + margin: 0; + padding: 0%; + /*top: -3.5em;*/ + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + z-index: 4; + filter: brightness(1.5); + } + .featured-logo-blur { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + scale: 1.01; + filter: blur(1.1rem); + z-index: 3; + } + .backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 0.65); + z-index: 2; + pointer-events: none; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + bottom: 30%; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + width: 90%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: "Archivo Narrow", sans-serif; + font-size: 1.1em; + font-weight: 500; + z-index: 4; + box-sizing: border-box; + } + .info-container { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + font-size: 1.1em; + color: #fff; + z-index: 5; + width: 100%; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-left: 2px; + } + .tomato-rating { + display: flex; + align-items: center; + } + .tomato-logo { + margin-right: 3px; + } + .critic-logo { + margin-left: 3px; + } + .imdb-logo { + margin-right: 3px; + } + .age-rating { + display: flex; + align-items: center; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.4em; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 1px; + color: aquamarine; + } + .featured-content, + .plot { + display: none; + } + .button-container { + position: absolute; + bottom: 13%; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 4; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: none; + border-radius: 20px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + border: solid 1.5px rgb(12 109 162 / 0.8); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: landscape) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: none; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 22vh); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.6; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 135vh; + overflow: hidden; + margin: 0 auto; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 75vh; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .backdrop-container { + position: relative; + top: -40%; + right: -35%; + width: 70%; + height: 100%; + } + .backdrop { + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; + border-radius: 5px; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .backdrop-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0 0 0 / 0.6); + border-radius: 5px; + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .logo-container { + width: 45%; + height: 40%; + position: relative; + display: flex; + justify-content: left; + align-items: left; + } + .logo { + position: relative; + max-height: 50%; + max-width: 70%; + height: auto; + width: auto; + object-fit: contain; + z-index: 4; + top: 25vh; + left: 5vw; + filter: brightness(1.5); + } + .featured-content { + position: absolute; + top: 0; + width: 100%; + height: 50px; + background-color: #fff0; + color: #d3d3d3; + font-size: 22px; + display: none; + align-items: center; + justify-content: flex-start; + z-index: 2; + } + .plot-container { + position: absolute; + bottom: 0; + color: #fff; + width: 90%; + height: 60%; + font-size: 15px; + padding: 10px 0 25px 15px; + border-radius: 5px; + z-index: 3; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + } + .plot { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + left: 5vw; + position: absolute; + top: calc(50% + -20vh); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + background: linear-gradient(to right, #000 49%, #fff0 70%); + z-index: 2; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + top: calc(50% + 0vh); + left: 5vw; + text-align: center; + color: #fff; + font-family: "Archivo Narrow", sans-serif; + font-size: 14px; + z-index: 4; + } + .info-container { + position: absolute; + top: calc(50% + -10vh); + display: flex; + align-items: center; + justify-content: center; + left: 5vw; + color: #fff; + z-index: 4; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + display: flex; + align-items: center; + z-index: 5; + position: relative; + } + .runTime { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin: 0 8px; + margin-right: -3px; + } + .rating-value img { + margin-right: 6px; + } + .tomato-rating { + display: flex; + align-items: center; + margin-left: 0; + } + .tomato-rating img { + margin-left: 5px; + } + .age-rating { + display: flex; + align-items: center; + margin-left: 5px; + margin-right: 5px; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.6em; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-right: 5px; + margin-left: 2px; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 10px; + color: aquamarine; + } + .button-container { + position: absolute; + top: calc(50% + 20vh); + left: 2vw; + display: flex; + z-index: 5; + justify-content: space-between; + width: 16em; + scale: 0.8; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: solid 2px rgb(12 109 162 / 0.7); + border-radius: 25px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +/*Mobiles L*/ +@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + cursor: pointer; + color: rgb(255 255 255 / 0.6); + z-index: 4; + -webkit-tap-highlight-color: #fff0; + display: none; + } + .left-arrow { + left: 10px; + } + .right-arrow { + right: 10px; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + body { + margin: 0; + padding: 0; + height: 100%; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + /*#homeTab { + top: -5em; + padding-bottom: 5em !important; + position: relative; + padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; + }*/ + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 73vh; + } + .dots-container { + position: absolute; + bottom: 20%; + left: 50%; + transform: translateX(-50%) scale(0.6); + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff13; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 27px; + height: 12px; + background-color: #fff; + border-radius: 10px; + } + #slides-container { + position: relative; + width: 100vw; + height: 95vh; + overflow: hidden; + margin: 0; + padding: 0%; + /*top: -3.5em;*/ + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + z-index: 4; + filter: brightness(1.5); + } + .featured-logo-blur { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + scale: 1.01; + filter: blur(1.1rem); + z-index: 3; + } + .backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 0.65); + z-index: 2; + pointer-events: none; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + bottom: 30%; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + width: 90%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: "Archivo Narrow", sans-serif; + font-size: 1.1em; + font-weight: 500; + z-index: 4; + box-sizing: border-box; + } + .info-container { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + font-size: 1.1em; + color: #fff; + z-index: 5; + width: 100%; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-left: 2px; + } + .tomato-rating { + display: flex; + align-items: center; + } + .tomato-logo { + margin-right: 3px; + } + .critic-logo { + margin-left: 3px; + } + .imdb-logo { + margin-right: 3px; + } + .age-rating { + display: flex; + align-items: center; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.4em; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 1px; + color: aquamarine; + } + .featured-content, + .plot { + display: none; + } + .button-container { + position: absolute; + bottom: 13%; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 4; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: none; + border-radius: 20px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + border: solid 1.5px rgb(12 109 162 / 0.8); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: landscape) { + .backdrop, + .slide { + position: absolute; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 12px; + cursor: pointer; + color: #fff; + z-index: 3; + display: none; + justify-content: center; + align-items: center; + } + .arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background-color: rgb(12 110 162 / 0.7); + border-radius: 50%; + z-index: -1; + } + .left-arrow { + left: 20px; + font-size: 12px; + } + .right-arrow { + right: 20px; + font-size: 12px; + } + .dots-container { + position: absolute; + top: calc(50% + 11em); + right: 3%; + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff3d; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + scale: 0.8; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 22px; + height: 12px; + background-color: #fff; + border-radius: 6px; + } + body { + margin: 0; + padding: 0; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + #slides-container { + position: relative; + width: 100vw; + height: 190vh; + overflow: hidden; + margin: 0 auto; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 125vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -558,7 +1884,7 @@ -webkit-box-orient: vertical; left: 4.5em; position: absolute; - top: 8.5em; + top: 35vh; } .gradient-overlay { position: absolute; @@ -605,7 +1931,6 @@ font-family: "Archivo Narrow", sans-serif; display: flex; align-items: center; - margin: 0 6em; z-index: 5; position: relative; } @@ -699,7 +2024,301 @@ align-items: center; } } -@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) { + +/*Mobiles UL*/ +@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + cursor: pointer; + color: rgb(255 255 255 / 0.6); + z-index: 4; + -webkit-tap-highlight-color: #fff0; + display: none; + } + .left-arrow { + left: 10px; + } + .right-arrow { + right: 10px; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + body { + margin: 0; + padding: 0; + height: 100%; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 73vh; + } + .dots-container { + position: absolute; + bottom: 24%; + left: 50%; + transform: translateX(-50%) scale(0.6); + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff13; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 27px; + height: 12px; + background-color: #fff; + border-radius: 10px; + } + #slides-container { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + margin: 0; + padding: 0%; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + z-index: 4; + filter: brightness(1.5); + } + .featured-logo-blur { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + scale: 1.01; + filter: blur(1.1rem); + z-index: 3; + } + .backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 0.65); + z-index: 2; + pointer-events: none; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + bottom: 33%; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + width: 90%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: "Archivo Narrow", sans-serif; + font-size: 1.1em; + font-weight: 500; + z-index: 4; + box-sizing: border-box; + } + .info-container { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + bottom: 28%; + left: 50%; + transform: translateX(-50%); + font-size: 1.1em; + color: #fff; + z-index: 5; + width: 100%; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-left: 2px; + } + .tomato-rating { + display: flex; + align-items: center; + } + .tomato-logo { + margin-right: 3px; + } + .critic-logo { + margin-left: 3px; + } + .imdb-logo { + margin-right: 3px; + } + .age-rating { + display: flex; + align-items: center; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.4em; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 1px; + color: aquamarine; + } + .featured-content, + .plot { + display: none; + } + .button-container { + position: absolute; + bottom: 18vh; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 4; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: none; + border-radius: 20px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + border: solid 1.5px rgb(12 109 162 / 0.8); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: landscape) { .backdrop, .slide { position: absolute; @@ -747,7 +2366,7 @@ } .dots-container { position: absolute; - top: calc(50% + 14vh); + top: calc(50% + 34vh); right: 3%; z-index: 2; display: flex; @@ -789,15 +2408,14 @@ #slides-container { position: relative; width: 100vw; - height: 70vh; + height: 145vh; overflow: hidden; margin: 0 auto; - top: -7.5em; } .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -25vh; + top: 90vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -881,8 +2499,8 @@ width: auto; object-fit: contain; z-index: 4; - top: 10vh; - left: 6vw; + top: 8em; + left: 4vw; filter: brightness(1.5); } .featured-content { @@ -919,9 +2537,9 @@ line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - left: 6vw; + left: 4vw; position: absolute; - top: 10vh; + top: 33vh; } .gradient-overlay { position: absolute; @@ -946,8 +2564,8 @@ } .genre { position: absolute; - top: calc(50% + 0vh); - left: 6vw; + top: calc(50% + 10vh); + left: 4vw; text-align: center; color: #fff; font-family: "Archivo Narrow", sans-serif; @@ -956,11 +2574,11 @@ } .info-container { position: absolute; - top: calc(50% + -4vh); + top: calc(50% + 0px); display: flex; align-items: center; justify-content: center; - left: 6vw !important; + left: 4vw; color: #fff; z-index: 4; } @@ -1019,12 +2637,13 @@ } .button-container { position: absolute; - top: calc(50% + 13vh); - left: 4em; + top: calc(50% + 32vh); + left: 0.5vw; display: flex; z-index: 5; justify-content: space-between; - width: 15em; + width: 16em; + scale: 0.8; } .play-button, .detail-button { @@ -1061,7 +2680,307 @@ align-items: center; } } -@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { +/*upwards changed lanscape width*/ + +@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) { + .backdrop, + .slide { + position: absolute; + } + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + cursor: pointer; + color: rgb(255 255 255 / 0.6); + z-index: 4; + -webkit-tap-highlight-color: #fff0; + display: none; + } + .left-arrow { + left: 10px; + } + .right-arrow { + right: 10px; + } + .featured-content, + .plot-container { + font-family: "Archivo Narrow", sans-serif; + left: 0; + } + .plot, + body { + overflow: hidden; + } + body { + margin: 0; + padding: 0; + height: 100%; + } + .fade-in { + opacity: 1 !important; + } + .fade-out { + opacity: 0 !important; + } + /*#homeTab { + top: -5em; + padding-bottom: 5em !important; + position: relative; + padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; + }*/ + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: 73vh; + } + .dots-container { + position: absolute; + bottom: 20%; + left: 50%; + transform: translateX(-50%) scale(0.6); + z-index: 2; + display: flex; + gap: 5px; + background-color: #ffffff13; + border-radius: 50px; + justify-content: center; + align-items: center; + width: 140px; + height: 22px; + transition: opacity 0.5s ease-in-out; + } + .dot { + display: inline-block; + width: 9px; + height: 9px; + margin: 0 5px; + background-color: #cecece; + border-radius: 50%; + transition: background-color 0.3s; + } + .dot.active { + width: 27px; + height: 12px; + background-color: #fff; + border-radius: 10px; + } + #slides-container { + position: relative; + width: 100vw; + height: 95vh; + overflow: hidden; + margin: 0; + padding: 0%; + } + .slide { + transition: opacity 0.5s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } + .slide.active { + opacity: 1; + display: block; + } + .slide:focus { + outline: #fff solid 2px; + } + .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + z-index: 4; + filter: brightness(1.5); + } + .featured-logo-blur { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 50%; + max-width: 70%; + width: auto; + scale: 1.01; + filter: blur(1.1rem); + z-index: 3; + } + .backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 1; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .gradient-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 0.65); + z-index: 2; + pointer-events: none; + mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + -webkit-mask-image: linear-gradient( + to top, + #fff0 2%, + rgb(0 0 0 / 0.5) 6%, + #000000 8% + ); + } + .genre { + position: absolute; + bottom: 30%; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: #fff; + width: 90%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-family: "Archivo Narrow", sans-serif; + font-size: 1.1em; + font-weight: 500; + z-index: 4; + box-sizing: border-box; + } + .info-container { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + font-size: 1.1em; + color: #fff; + z-index: 5; + width: 100%; + } + .rating-value { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + } + .date { + font-family: "Archivo Narrow", sans-serif; + font-weight: 500; + display: flex; + align-items: center; + margin-left: 2px; + } + .tomato-rating { + display: flex; + align-items: center; + } + .tomato-logo { + margin-right: 3px; + } + .critic-logo { + margin-left: 3px; + } + .imdb-logo { + margin-right: 3px; + } + .age-rating { + display: flex; + align-items: center; + border-radius: 5px; + background: rgb(255 255 255 / 0.8); + color: #000; + border: none; + font-weight: 600; + white-space: nowrap; + padding: 0 0.4em; + } + .separator-icon { + margin-left: 5px; + margin-right: 5px; + font-size: 1px; + color: aquamarine; + } + .featured-content, + .plot { + display: none; + } + .button-container { + position: absolute; + bottom: 13%; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; + z-index: 4; + } + .play-button, + .detail-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + border: none; + border-radius: 20px; + font-size: 14px; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 700; + gap: 6px; + -webkit-tap-highlight-color: #fff0; + } + .play-button { + background-color: #0c6da2; + color: #fff; + } + .detail-button { + background-color: rgb(12 109 162 / 0.5); + border: solid 1.5px rgb(12 109 162 / 0.8); + color: #fff; + } + .play-button:hover, + .detail-button:hover { + opacity: 0.8; + } + .play-icon, + .detail-icon { + font-size: 18px; + display: flex; + align-items: center; + } +} + +@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) { .backdrop, .slide { position: absolute; @@ -1154,12 +3073,11 @@ height: 135vh; overflow: hidden; margin: 0 auto; - top: -7.5em; } .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -50vh; + top: 83vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -1243,7 +3161,7 @@ width: auto; object-fit: contain; z-index: 4; - top: 6em; + top: 20vh; left: 5vw; filter: brightness(1.5); } @@ -1283,7 +3201,7 @@ -webkit-box-orient: vertical; left: 5vw; position: absolute; - top: 6.5em; + top: 25vh; } .gradient-overlay { position: absolute; @@ -1308,7 +3226,7 @@ } .genre { position: absolute; - top: calc(50% + 3vh); + top: calc(50% + 3.5vh); left: 5vw; text-align: center; color: #fff; @@ -1386,7 +3304,7 @@ display: flex; z-index: 5; justify-content: space-between; - width: 14em; + width: 15em; } .play-button, .detail-button { @@ -1423,6 +3341,7 @@ align-items: center; } } + @media only screen and (min-width: 1025px) and (max-width: 1440px) { .backdrop, .slide { @@ -1471,7 +3390,7 @@ } .dots-container { position: absolute; - top: calc(50% + 26vh); + top: calc(50% + 21vh); right: 3%; z-index: 2; display: flex; @@ -1516,12 +3435,11 @@ height: 95vh; overflow: hidden; margin: 0 auto; - top: -7.8em; } .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -16em; + top: 65vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -1743,12 +3661,12 @@ } .button-container { position: absolute; - top: calc(50% + 25vh); + top: calc(50% + 20vh); left: 5vw; display: flex; z-index: 5; justify-content: space-between; - width: 14em; + width: 15em; } .play-button, .detail-button { @@ -1833,7 +3751,7 @@ } .dots-container { position: absolute; - top: calc(50% + 22vh); + top: calc(50% + 20vh); right: 3%; z-index: 2; display: flex; @@ -1878,12 +3796,11 @@ height: 98vh; overflow: hidden; margin: 0 auto; - top: -7.5em; } - .layout-desktop .sections.homeSectionsContainer { + .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -36vh; + top: 65vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -2105,7 +4022,7 @@ } .button-container { position: absolute; - top: calc(50% + 21vh); + top: calc(50% + 19vh); left: 5vw; display: flex; z-index: 5; @@ -2240,12 +4157,11 @@ height: 95vh; overflow: hidden; margin: 0 auto; - top: -6.8em; } .sections.homeSectionsContainer { position: relative; z-index: 8; - top: -25vh; + top: 65vh; } .slide { transition: opacity 0.5s ease-in-out; @@ -2366,10 +4282,11 @@ display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; + font-size: x-large; -webkit-box-orient: vertical; left: 5vw; position: absolute; - top: 18vh; + top: 20vh; } .gradient-overlay { position: absolute; @@ -2399,12 +4316,13 @@ text-align: center; color: #fff; font-family: "Archivo Narrow", sans-serif; - font-size: 14px; + font-size: x-large; z-index: 4; } .info-container { position: absolute; top: calc(50% + 0vh); + font-size: x-large; display: flex; align-items: center; justify-content: center; @@ -2468,11 +4386,12 @@ .button-container { position: absolute; top: calc(50% + 20vh); - left: 10vh; + left: 12vh; display: flex; z-index: 5; justify-content: space-between; width: 15em; + scale: 1.3; } .play-button, .detail-button { @@ -2508,4 +4427,4 @@ display: flex; align-items: center; } -} +} \ No newline at end of file diff --git a/slideshowpure.js b/slideshowpure.js index ea8ae97..abb7a52 100644 --- a/slideshowpure.js +++ b/slideshowpure.js @@ -1,17 +1,30 @@ const getJellyfinCredentials = () => { const jellyfinCreds = localStorage.getItem("jellyfin_credentials"); + const deviceID = localStorage.getItem("_deviceId2"); + if (!jellyfinCreds) { + console.error("No Jellyfin credentials found in localStorage"); + return; + } try { const serverCredentials = JSON.parse(jellyfinCreds); - const firstServer = serverCredentials.Servers[0]; - if (!firstServer) { - console.error("Could not find credentials for the client"); + const firstServer = serverCredentials?.Servers?.[0]; + if (!firstServer || !firstServer.AccessToken || !firstServer.UserId) { + console.error("Invalid Jellyfin credentials structure"); return; } - return { token: firstServer.AccessToken, userId: firstServer.UserId }; + return { + token: firstServer.AccessToken, + userId: firstServer.UserId, + deviceID + }; } catch (e) { - console.error("Could not parse jellyfin credentials", e); + console.error("Could not parse Jellyfin credentials", e); } }; +const credentials = getJellyfinCredentials(); +if (credentials) { + console.log("Token:", credentials.token, "UserId:", credentials.userId, "DeviceID:", credentials.deviceID); +} const initLoadingScreen = () => { const currentPath = window.location.href.toLowerCase(); @@ -23,7 +36,7 @@ const initLoadingScreen = () => { const loadingHTML = `

- Server Logo

@@ -32,8 +45,15 @@ const initLoadingScreen = () => {
`; document.body.insertAdjacentHTML("beforeend", loadingHTML); + const interval = setInterval(() => { - if (document.querySelector(".manualLoginForm")) { + if ( + document.querySelector(".manualLoginForm") || + ( + document.querySelector(".homeSectionsContainer") && + document.querySelector(".slide.active") + ) + ) { $(".bar-loading").fadeOut(700, () => $(".bar-loading").remove()); clearInterval(interval); } @@ -41,12 +61,33 @@ const initLoadingScreen = () => { } }; initLoadingScreen(); -const slidesInit = async () => { + +const observer = new MutationObserver((mutations) => { + for (let mutation of mutations) { + if (window.location.hash.includes("#/home.html")) { + let container = document.getElementById("slides-container"); + + if (!container) { + container = document.createElement("div"); + container.id = "slides-container"; + document.body.appendChild(container); + slidesInit(); + } + container.style.display = "block"; + } else { + const container = document.getElementById("slides-container"); + if (container) container.style.display = "none"; + } + } +}); +observer.observe(document.body, { childList: true, subtree: true }); + + +const slidesInit = () => { if (window.hasInitializedSlideshow) { console.log("Slideshow already initialized. Skipping re-init."); return; } - window.hasInitializedSlideshow = !0; const shuffleInterval = 8000; let isTransitioning = !1; @@ -97,15 +138,9 @@ const slidesInit = async () => { logo.src = `${window.location.origin}/Items/${itemId}/Images/Logo`; logo.alt = "Logo"; logo.loading = "eager"; - const logoImgBlur = document.createElement("img"); - logoImgBlur.src = `${window.location.origin}/Items/${itemId}/Images/Logo`; - logoImgBlur.alt = item.Name || "Title"; - logoImgBlur.loading = "eager"; - logoImgBlur.className = "featured-logo-blur"; const logoContainer = document.createElement("div"); logoContainer.className = "logo-container"; logoContainer.appendChild(logo); - logoContainer.appendChild(logoImgBlur); const featuredContent = document.createElement("div"); featuredContent.className = "featured-content"; featuredContent.textContent = title; @@ -227,40 +262,58 @@ const slidesInit = async () => { Play `; playButton.onclick = async () => { - if (!window.PlaybackManager) { - console.error("PlaybackManager is not available."); - return; - } - if (!window.ApiClient) { - console.error("Jellyfin API client is not available."); - return; - } const apiClient = window.ApiClient; const userId = apiClient.getCurrentUserId(); - if (!userId) { - console.error("User not found."); + const mediabrowser = apiClient.appName(); + const appVersion = apiClient.appVersion(); + const deviceName = apiClient.deviceName(); + const deviceId = apiClient.deviceId(); + const accessToken = apiClient.accessToken(); + const baseUrl = apiClient.serverAddress(); + if (!userId || !mediabrowser || !deviceName || !deviceId || !appVersion || !accessToken || !baseUrl) { + console.error("Details not found."); return; } + let sessionId = null; try { - const item = await apiClient.getItem(userId, itemId); - if (!item) { - console.error("Media item not found."); + const response = await fetch(`${baseUrl}/Sessions?deviceId=${encodeURIComponent(deviceId)}`, { + headers: { + 'X-Emby-Authorization': `MediaBrowser Client="${mediabrowser}", Device="${deviceName}", DeviceId="${deviceId}", Version="${appVersion}", Token="${accessToken}"` + } + }); + if (!response.ok) { + throw new Error(`Failed to fetch session data: ${response.statusText}`); + } + const sessions = await response.json(); + if (sessions.length === 0) { + console.warn("No sessions found for deviceId:", deviceId); return; } - window.PlaybackManager.play({ - items: [item], - startPositionTicks: 0, - isMuted: !1, - isPaused: !1, - }) - .then(() => { - console.log("Playback started successfully."); - }) - .catch((error) => { - console.error("Failed to start playback:", error); - }); + const session = sessions[0]; + sessionId = session.Id; + console.log("Found sessionId:", sessionId); } catch (error) { - console.error("Error starting playback:", error); + console.error("Error fetching session data:", error); + return; + } + if (!sessionId) { + console.error("Session ID not found."); + return; + } + const playUrl = `${baseUrl}/Sessions/${sessionId}/Playing?playCommand=PlayNow&itemIds=${itemId}`; + try { + const playResponse = await fetch(playUrl, { + method: 'POST', + headers: { + 'X-Emby-Authorization': `MediaBrowser Client="${mediabrowser}", Device="${deviceName}", DeviceId="${deviceId}", Version="${appVersion}", Token="${accessToken}"` + } + }); + if (!playResponse.ok) { + throw new Error(`Failed to send play command: ${playResponse.statusText}`); + } + console.log("Play command sent successfully to session:", sessionId); + } catch (error) { + console.error("Error sending play command:", error); } }; const detailButton = document.createElement("button"); @@ -270,8 +323,8 @@ const slidesInit = async () => { Info `; detailButton.onclick = () => { - window.top.location.href = `/#!/details?id=${itemId}`; - }; + Emby.Page.show(`/details?id=${itemId}`); + } buttonContainer.appendChild(detailButton); buttonContainer.appendChild(playButton); slide.append( @@ -289,20 +342,10 @@ const slidesInit = async () => { const createSlideForItem = async (item, title) => { const container = document.getElementById("slides-container"); const itemId = item.Id; - const backdropUrl = `${window.location.origin}/Items/${itemId}/Images/Backdrop/0`; - const logoUrl = `${window.location.origin}/Items/${itemId}/Images/Logo`; - const [backdropExists, logoExists] = await Promise.all([ - fetch(backdropUrl, { method: "HEAD" }).then((res) => res.ok), - fetch(logoUrl, { method: "HEAD" }).then((res) => res.ok), - ]); - if (backdropExists && logoExists) { - const slideElement = createSlideElement(item, title); - container.appendChild(slideElement); - if (container.children.length === 1) { - showSlide(0); - } - } else { - console.warn(`Skipping item ${itemId}: Missing backdrop or logo.`); + const slideElement = createSlideElement(item, title); + container.appendChild(slideElement); + if (container.children.length === 1) { + showSlide(0); } }; const fetchItemDetails = async (itemId) => { @@ -334,7 +377,7 @@ const slidesInit = async () => { const fetchItemsFromServer = async () => { try { const response = await fetch( - `${window.location.origin}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&SortBy=random&isPlayed=False&Limit=500`, + `${window.location.origin}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&SortBy=random&isPlayed=False&Limit=100`, { headers: { Authorization: `MediaBrowser Client="Jellyfin Web", Device="YourDeviceName", DeviceId="YourDeviceId", Version="YourClientVersion", Token="${token}"`, @@ -437,10 +480,9 @@ const slidesInit = async () => { showSlide(currentSlideIndex); container.style.display = "block"; slideInterval = - new SlideTimer(function() { - updateCurrentSlide(currentSlideIndex + 1); - }, shuffleInterval); - + new SlideTimer(function () { + updateCurrentSlide(currentSlideIndex + 1); + }, shuffleInterval); } slides.forEach((slide) => { slide.addEventListener( @@ -552,7 +594,6 @@ const slidesInit = async () => { items = shuffleArray(items); await createSlidesForItems(items); initializeSlideshow(); - $(".bar-loading").fadeOut(700, () => $(".bar-loading").remove()); }; initializeSlides(); -}; +}; \ No newline at end of file