From e8e6d4654592cc29a68611c47ae3d284a3b3716c Mon Sep 17 00:00:00 2001 From: Omar Najjar Date: Sun, 30 Mar 2025 06:00:54 +1100 Subject: [PATCH] x --- index.html | 1846 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 1124 insertions(+), 722 deletions(-) diff --git a/index.html b/index.html index 0c5ebe4..f49f75f 100644 --- a/index.html +++ b/index.html @@ -1,779 +1,1181 @@ - - - - - - - - - - - Watermelon Movies 🍉 - - - - - - - - -
-

Watermelon Movies 🍉

-

🤘.The Jews took hollywood...we're stealing it back

-
- + .close:hover, + .close:focus { + color: deeppink; + text-decoration: none; + } - -
-
- - -
-
-
-
-
+ @media (max-width: 600px) { + .video-modal-content { + padding: 10px; + font-size: 14px; + } + .close { + font-size: 24px; + } + } + + .movie-tile img { + border-radius: 10px; + margin-bottom: 10px; + } + + .movie-tile h3, .movie-tile p { + color: black; + text-align: left; + margin: 5px 0; + } + + .dark-mode .movie-tile h3, .dark-mode .movie-tile p { + color: white; + } + + .night-light .movie-tile h3, .night-light .movie-tile p { + color: black; + } + + .media-label { + display: inline-block; + padding: 4px 8px; + background-color: #ff6347; + color: #fff; + border-radius: 4px; + font-size: 0.75rem; + position: absolute; + top: 10px; + right: 10px; + } + + .stream-btn, .trailer-btn { + padding: 5px 10px; + margin: 5px; + border: none; + border-radius: 4px; + cursor: pointer; + } + + .trailer-btn { + background-color: #32cd32; + color: white; + } + + .trailer-btn:hover { + background-color: #28a745; + } + + .share-btn { + background-color: rgb(250, 217, 0); + color: black; + padding: 5px 10px; + margin: 16px 5px 5px 0px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + display: inline-flex; + align-items: center; + justify-content: center; + } + + .share-btn:hover { + background-color: rgb(255, 217, 0); + } + + .popcorn { + margin-left: 5px; + display: inline-block; + animation: popcornBounce 1s ease-in-out infinite; + } + + @keyframes popcornBounce { + 0%, 100% { + transform: translateY(0) rotate(0deg); + filter: drop-shadow(0 0 0 transparent); + } + 50% { + transform: translateY(-10px) rotate(360deg); + filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4)); + } + } + + .melon { + width: 6em; + height: 6em; + background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/melon.svg) no-repeat no-repeat; + background-size: 48em; + background-position: 0% 0%; + animation: melonSequence 0.8s steps(7) infinite reverse; + margin: 0em auto; + } + + @keyframes melonSequence { + from { background-position: 0% 0%; } + to { background-position: 100% 0%; } + } + + /* Season and episode selectors */ + .season-selector, .episode-selector { + margin-top: 8px; + display: flex; + flex-wrap: wrap; + gap: 15px; /* Increased spacing between buttons */ + max-height: 150px; + overflow-y: auto; + padding: 12px; + background-color: rgba(0,0,0,0.2); + border-radius: 8px; + } + + /* Add more spacing between season and episode selectors */ + .episode-selector { + margin-top: 16px; + } + + .season-btn, .episode-btn { + padding: 8px 16px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + /* Add min-width to ensure consistent spacing */ + min-width: 40px; + text-align: center; + /* Make buttons not touch each other */ + margin: 3px; + } + + .season-btn:hover, .episode-btn:hover { + background-color: #3e8e41; + } + + .season-btn.active, .episode-btn.active { + background-color: #ff6347; + } + + /* Dark mode styles for buttons */ + .dark-mode .season-btn, .dark-mode .episode-btn { + background-color: #555; + color: white; + } + + .dark-mode .season-btn:hover, .dark-mode .episode-btn:hover { + background-color: #666; + } + + .dark-mode .season-btn.active, .dark-mode .episode-btn.active { + background-color: #ff6347; + } + + /* Night light styles for buttons */ + .night-light .season-btn, .night-light .episode-btn { + background-color: #daa520; + color: black; + } + + .night-light .season-btn:hover, .night-light .episode-btn:hover { + background-color: #cd853f; + } + + .night-light .season-btn.active, .night-light .episode-btn.active { + background-color: #ff6347; + } + + .alt-source-btn { + background-color: #ff6347; + color: white; + padding: 6px 12px; + margin: 5px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + } + + .alt-source-btn:hover { + background-color: #ff4500; + } + + /* Toggle styles */ + .dot { + position: absolute; + left: 1px; + top: 1px; + background-color: white; + width: 4px; + height: 4px; + border-radius: 50%; + transition: transform 0.3s; + } + + .dot-night { + position: absolute; + left: 1px; + top: 1px; + background-color: white; + width: 4px; + height: 4px; + border-radius: 50%; + transition: transform 0.3s; + } + + /* Dark mode styles for toggle labels */ + .dark-mode .toggle-label { + color: white; + } + + /* Progress indicator */ + #progressIndicator { + position: fixed; + top: 4px; + right: 4px; + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 8px 16px; + border-radius: 8px; + z-index: 50; + display: none; + transition: opacity 0.3s; + } + + .coming-soon-slider { + scroll-snap-type: x mandatory; + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + } + + .slider-container { + display: flex; + gap: 1rem; + -ms-overflow-style: none; + scrollbar-width: none; + } + + .slider-container::-webkit-scrollbar { + display: none; + } + + .slider-item { + flex: 0 0 auto; + width: 200px; + scroll-snap-align: start; + } + + .slider-item img { + width: 100%; + height: auto; + border-radius: 0.5rem; + } + + .category-slider { + display: flex; + gap: 1rem; + -ms-overflow-style: none; + scrollbar-width: none; + overflow-x: auto; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + } + + .category-slider::-webkit-scrollbar { + display: none; + } + + .category-item { + flex: 0 0 auto; + width: 180px; + scroll-snap-align: start; + position: relative; + } + + .category-item img { + width: 100%; + height: auto; + border-radius: 0.5rem; + transition: transform 0.2s; + } + + .category-item img:hover { + transform: scale(1.05); + } + + .rating-badge { + position: absolute; + top: 5px; + right: 5px; + background-color: rgba(0,0,0,0.7); + color: white; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.8rem; + } + + /* Placeholder shimmer effect for loading */ + .placeholder { + background: #f6f7f8; + background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%); + background-size: 800px 104px; + position: relative; + animation: placeholderShimmer 1.5s infinite linear forwards; + border-radius: 8px; + } + + @keyframes placeholderShimmer { + 0% { background-position: -468px 0 } + 100% { background-position: 468px 0 } + } + + .placeholder-item { + height: 250px; + width: 100%; + margin-bottom: 10px; + } + + + +
+

+ + Watermelon Movies 🍉 + +

+

🤘.The Jews took hollywood...we're stealing it back

+
+ +
+
+ + +
+
+
+
+
- -
-
- × -
-
- + +
+
+ × +
+
+ +
+
+ + + + + +
+
-
- - - -
+
Night Light
+ + + +
+
-
- + +
+ +
+ +
+ +
+ + +
+

Coming Soon

+
+
+
- -
-

Coming Soon

-
- -
-
+ +
- - - + } + + + \ No newline at end of file