837 lines
34 KiB
HTML
837 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="og:title" content="Watermelon Movies 🍉">
|
|
<meta property="og:description" content="The jews took hollywood, we're stealing it back">
|
|
<meta property="og:image" content="">
|
|
<meta property="og:url" content="">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<title>Watermelon Movies 🍉</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon_watermelon_icon.ico">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Custom styles for movie tiles */
|
|
.movie-tile {
|
|
transition: transform 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
.movie-tile:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
/* Background gradient color */
|
|
body {
|
|
background: linear-gradient(to right, #32cd32 50%, #ff6347 50%);
|
|
}
|
|
.dark-mode body {
|
|
background: linear-gradient(to right, #000000 50%, #333333 50%);
|
|
color: white;
|
|
}
|
|
|
|
.translate-x-full {
|
|
transform: translateX(100%);
|
|
}
|
|
.dark-mode .movie-tile {
|
|
background: #444;
|
|
color: white;
|
|
}
|
|
|
|
.dark-mode .search-input {
|
|
background-color: #333;
|
|
color: white;
|
|
}
|
|
|
|
.dark-mode .video-modal-content {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
background: 0;
|
|
}
|
|
|
|
.dark-mode .stream-btn .trailer-btn{
|
|
background-color: #555;
|
|
}
|
|
|
|
.dark-mode .stream-btn:hover .trailer-btn:hover{
|
|
background-color: #666;
|
|
}
|
|
|
|
.night-light body {
|
|
background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
|
|
color: black;
|
|
}
|
|
|
|
.night-light .video-modal-content {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
background: #f5deb3;
|
|
}
|
|
|
|
.night-light .movie-tile {
|
|
background: #f5deb3;
|
|
color: black;
|
|
}
|
|
|
|
.night-light .search-input {
|
|
background-color: #deb887;
|
|
color: black;
|
|
}
|
|
|
|
.night-light .video-modal-content {
|
|
background-color: rgba(255, 228, 181, 0.8);
|
|
}
|
|
|
|
.night-light .stream-btn .trailer-btn{
|
|
background-color: #daa520;
|
|
}
|
|
|
|
.night-light .stream-btn:hover .trailer-btn:hover{
|
|
background-color: #cd853f;
|
|
}
|
|
|
|
.video-modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1000; /* Sit on top */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
}
|
|
|
|
.video-modal-content {
|
|
position: fixed;
|
|
top: 10%; /* Adjusted for better vertical alignment */
|
|
left: 5%; /* Centering the modal on mobile */
|
|
width: 90%; /* Full width on mobile */
|
|
background-color: #000000;
|
|
/* background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3400754.jpg&f=1&nofb=1&ipt=e6ef828ce4ca397f27b57b585f1382ded672498ebfcdc63466a8fdc6507a5082&ipo=images') no-repeat center center; */
|
|
background-size: cover;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow for better visibility */
|
|
border-radius: 25px;
|
|
border: 4px solid black;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 36px; /* More accessible position */
|
|
top: 20px;
|
|
font-size: 50px; /* Larger clickable area */
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: deeppink;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.video-modal-content {
|
|
padding: 10px;
|
|
font-size: 14px; /* Smaller font size for very small devices */
|
|
}
|
|
.close {
|
|
font-size: 24px; /* Smaller close button on very small devices */
|
|
}
|
|
}
|
|
|
|
.hidden { display: none; }
|
|
.flex { display: flex; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.min-h-screen { min-height: 100vh; }
|
|
.rounded-lg { border-radius: 0.5rem; }
|
|
.shadow-xl { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
|
|
.p-5 { padding: 1.25rem; }
|
|
.bg-white { background-color: #ffffff; }
|
|
.cursor-pointer { cursor: pointer; }
|
|
.text-gray-700 { color: #4a5568; }
|
|
|
|
/* Other custom styles */
|
|
.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; /* 6em * 8 */
|
|
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%;
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: row-reverse; /* Reverse the order for RTL */
|
|
}
|
|
|
|
.search-input {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
text-align: right; /* For RTL */
|
|
font-size: 16px; /* Prevent zoom on mobile devices */
|
|
}
|
|
|
|
.search-btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
color: black;
|
|
}
|
|
|
|
.coming-soon-slider {
|
|
scroll-snap-type: x mandatory;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.slider-item {
|
|
flex: 0 0 auto;
|
|
width: 200px; /* Adjust the width as per your design */
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.slider-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* Hide vertical scrollbar for the entire page */
|
|
body, html {
|
|
overflow-y: hidden; /* Hide vertical scrollbar */
|
|
max-height: 100vh; /* Optional: Limit the height of the body to the viewport height */
|
|
}
|
|
|
|
/* Hide horizontal scrollbar for the slider */
|
|
.slider-container {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.slider-container::-webkit-scrollbar {
|
|
display: none; /* Hide scrollbar for Chrome, Safari and Opera */
|
|
}
|
|
|
|
/* Ensure the body or main container supports vertical scrolling if needed */
|
|
body, .main-container {
|
|
overflow-x: hidden; /* Hide horizontal overflow */
|
|
overflow-y: auto; /* Enable vertical scrolling if content overflows */
|
|
}
|
|
|
|
/* Hide scrollbar for aesthetic purposes */
|
|
.coming-soon-slider::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.coming-soon-slider {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
/* Custom styles for movie tiles */
|
|
.movie-tile {
|
|
transition: transform 0.3s;
|
|
cursor: pointer;
|
|
background: rgb(232, 222, 222); /* Set background to white */
|
|
border-radius: 15px; /* Rounded corners */
|
|
padding: 10px; /* Padding inside the tile */
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
|
|
}
|
|
|
|
.movie-tile:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.movie-tile img {
|
|
border-radius: 10px; /* Rounded corners for images */
|
|
margin-bottom: 10px; /* Space between image and text */
|
|
}
|
|
|
|
/* Ensure text is visible against the white background */
|
|
.movie-tile h3, .movie-tile p {
|
|
color: black; /* Dark text color for readability */
|
|
text-align: left;
|
|
margin: 5px 0; /* Margin for spacing */
|
|
font-family: 'Courier New', Courier, monospace; /* Monospace font */
|
|
}
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace; /* Monospace font for all text */
|
|
}
|
|
|
|
.special-button {
|
|
background-color: #4CAF50; /* Green */
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* This ensures that the button is visually separate from other elements */
|
|
.special-container {
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.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); /* Gold color */
|
|
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); /* Adding shadow to text */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-btn:hover {
|
|
background-color: rgb(255, 217, 0); /* Slightly lighter gold for hover effect */
|
|
}
|
|
|
|
.popcorn {
|
|
margin-left: 5px; /* Adds space between the text and emoji */
|
|
display: inline-block; /* Allows transformation effects */
|
|
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)); /* Add a shadow to enhance the effect */
|
|
}
|
|
}
|
|
|
|
|
|
#overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
import Hydrafiles from 'https://hydrafiles.com/hydrafiles-web.esm.js';
|
|
|
|
const hydrafiles = new Hydrafiles();
|
|
document.getElementById('start').addEventListener('click', async () => {
|
|
await hydrafiles.start();
|
|
console.log('Hydrafiles started');
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
// Function to block window.open globally after load
|
|
function blockWindowOpen() {
|
|
const originalOpen = window.open;
|
|
window.open = function(url, ...args) {
|
|
if (url) {
|
|
console.log('Blocked opening URL:', url);
|
|
alert("Opening new tabs is blocked on this website.");
|
|
return null;
|
|
}
|
|
return originalOpen.apply(this, arguments);
|
|
};
|
|
}
|
|
|
|
// Function to block iframe content and navigation after it has loaded
|
|
function blockIframeContent(iframe) {
|
|
try {
|
|
const iframeWindow = iframe.contentWindow;
|
|
const iframeDocument = iframeWindow.document;
|
|
|
|
// Block window.open within the iframe
|
|
iframeWindow.open = function(url, ...args) {
|
|
if (url) {
|
|
console.log('Blocked opening URL from iframe:', url);
|
|
alert("Opening new tabs is blocked on this website.");
|
|
return null;
|
|
}
|
|
return null; // Prevent any window from being opened
|
|
};
|
|
|
|
// Block external navigation (e.g., links)
|
|
iframeDocument.addEventListener('click', function(event) {
|
|
if (event.target.tagName === 'A' && event.target.href) {
|
|
event.preventDefault();
|
|
console.log('Blocked external navigation:', event.target.href);
|
|
alert("External links are blocked within iframes.");
|
|
}
|
|
});
|
|
|
|
// Prevent form submissions from navigating
|
|
iframeDocument.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
alert("Form submissions are blocked within iframes.");
|
|
});
|
|
|
|
// Continuously monitor for src changes and block navigation
|
|
const observer = new MutationObserver(() => {
|
|
iframe.src = 'about:blank'; // Block any navigation attempt
|
|
iframeWindow.stop(); // Stop loading
|
|
});
|
|
|
|
observer.observe(iframe, {
|
|
attributes: true,
|
|
attributeFilter: ['src']
|
|
});
|
|
|
|
// Continuously block iframe script attempts to navigate
|
|
const blockScriptNavigation = () => {
|
|
try {
|
|
iframeWindow.location = 'about:blank';
|
|
} catch (e) {
|
|
console.log('Blocked script-based navigation.');
|
|
}
|
|
};
|
|
|
|
// Monitor scripts in the iframe
|
|
iframeWindow.addEventListener('beforeunload', blockScriptNavigation);
|
|
iframeWindow.addEventListener('unload', blockScriptNavigation);
|
|
|
|
} catch (e) {
|
|
console.error('Could not intercept iframe:', e);
|
|
}
|
|
}
|
|
|
|
// Apply monitoring to each iframe after it has loaded
|
|
function monitorIframe(iframe) {
|
|
iframe.onload = function() {
|
|
blockIframeContent(iframe);
|
|
};
|
|
}
|
|
|
|
// Apply monitoring to all existing and new iframes
|
|
function applyIframeMonitoring() {
|
|
document.querySelectorAll('iframe').forEach((iframe) => {
|
|
monitorIframe(iframe);
|
|
});
|
|
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
mutation.addedNodes.forEach((node) => {
|
|
if (node.tagName === 'IFRAME') {
|
|
monitorIframe(node);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
}
|
|
|
|
// Initialize after page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
blockWindowOpen(); // Apply global block after page load
|
|
applyIframeMonitoring(); // Start monitoring iframes
|
|
});
|
|
})();
|
|
|
|
</script>
|
|
</head>
|
|
<body class="text-black">
|
|
<div class="container mx-auto px-4">
|
|
<h1 class="text-6xl font-bold my-8 text-left">Watermelon Movies 🍉</h1>
|
|
<h2 class="text-left">🤘.The Jews took hollywood...we're stealing it back</h2>
|
|
<div class="melon"></div>
|
|
<!-- <button id="start">Start Hydrafiles</button> -->
|
|
|
|
|
|
<div class="relative text-gray-600">
|
|
<form id="searchForm" action="#">
|
|
<input type="search" name="search" placeholder="Search" class="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
|
|
<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
|
|
<!-- SVG code -->
|
|
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
|
|
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<br>
|
|
<div id="searchResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
|
|
<div id="movies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
|
|
</div>
|
|
|
|
<!-- Video Modal -->
|
|
<div id="videoModal" class="video-modal">
|
|
<div class="video-modal-content">
|
|
<span class="close">×</span>
|
|
<div style="border-radius: 10px; width: 100%; overflow: hidden;">
|
|
<div id="iframeContainer">
|
|
<iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen href="xxxxxxxxxxxxx" target="_self"><a href="xxxxxxxxxxxxx" target="_self"></a></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end items-center mt-4 space-x-4">
|
|
<label for="night-light-toggle" class="flex items-center cursor-pointer mt-3">
|
|
<div class="relative">
|
|
<input type="checkbox" id="night-light-toggle" class="sr-only">
|
|
<div class="block bg-yellow-100 w-10 h-6 rounded-full"></div>
|
|
<div class="dot-night absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
|
|
</div>
|
|
<div class="ml-2 mr-2 text-gray-700">Night Light</div>
|
|
</label>
|
|
<label for="dark-mode-toggle" class="flex items-center cursor-pointer ml-4 mt-3">
|
|
<div class="relative">
|
|
<input type="checkbox" id="dark-mode-toggle" class="sr-only">
|
|
<div class="bg-gray-400 w-10 h-6 rounded-full"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
|
|
</div>
|
|
<div class="mr-2 text-gray-700">Dark Mode</div>
|
|
</label>
|
|
<button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
|
|
Pass the<span class="popcorn">🍿</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="randomMovies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 my-4">
|
|
<!-- Random movies will load here -->
|
|
</div>
|
|
|
|
<!-- Coming Soon Section -->
|
|
<div id="comingSoon" class="my-8">
|
|
<h2 class="text-2xl font-bold mb-4 text-left pl-4">Coming Soon</h2>
|
|
<div class="slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4">
|
|
<!-- Slider items will be added here by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // TMDB API Key
|
|
const youtubeApiKey = 'AIzaSyAG7vJ284HAxvZ5caDhPISIZTPKXZsyKi8'; // Replace with your YouTube API Key
|
|
|
|
document.getElementById('searchForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const searchQuery = document.querySelector('[name="search"]').value.trim();
|
|
if (searchQuery) {
|
|
searchMedia(searchQuery);
|
|
}
|
|
});
|
|
|
|
function searchMedia(query) {
|
|
const url = `https://api.themoviedb.org/3/search/multi?api_key=${apiKey}&query=${encodeURIComponent(query)}`;
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
displaySearchResults(data.results, 'searchResults');
|
|
});
|
|
}
|
|
|
|
function displaySearchResults(results, containerId) {
|
|
const container = document.getElementById(containerId);
|
|
container.innerHTML = ''; // Clear previous results
|
|
results.forEach(result => {
|
|
if ((result.media_type === 'movie' || result.media_type === 'tv') && result.poster_path) {
|
|
const title = result.title || result.name;
|
|
const imdbId = result.id; // Assuming it fetches the correct ID
|
|
const posterPath = `https://image.tmdb.org/t/p/w500${result.poster_path}`;
|
|
const overview = result.overview || 'No de scription available.';
|
|
const mediaType = result.media_type;
|
|
|
|
const movieTile = document.createElement('div');
|
|
movieTile.className = 'movie-tile';
|
|
movieTile.innerHTML = `
|
|
<img src="${posterPath}" alt="Poster for ${title}" style="width:100%; height:auto;">
|
|
<h3>${title}</h3>
|
|
<p>${overview}</p>
|
|
<button class="trailer-btn bg-green-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${title}')">Trailer</button>
|
|
`;
|
|
container.appendChild(movieTile);
|
|
}
|
|
});
|
|
}
|
|
|
|
function fetchTrailer(title) {
|
|
const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' trailer')}&key=${youtubeApiKey}`;
|
|
fetch(youtubeSearchUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.items.length > 0) {
|
|
const videoId = data.items[0].id.videoId;
|
|
openTrailerModal(videoId);
|
|
} else {
|
|
alert('Trailer not found.');
|
|
}
|
|
});
|
|
}
|
|
|
|
function openTrailerModal(videoId) {
|
|
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
|
const modal = document.getElementById("videoModal");
|
|
const videoIframe = document.getElementById("videoIframe");
|
|
|
|
modal.style.display = "block";
|
|
videoIframe.src = videoUrl;
|
|
}
|
|
|
|
const modal = document.getElementById("videoModal");
|
|
const span = document.getElementsByClassName("close")[0];
|
|
const videoIframe = document.getElementById("videoIframe");
|
|
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
videoIframe.src = "";
|
|
}
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
videoIframe.src = "";
|
|
}
|
|
}
|
|
|
|
// Add this function to update meta tags
|
|
function updateMetaTags(title, description, posterPath) {
|
|
document.querySelector('meta[property="og:title"]').setAttribute('content', title + ' - Watermelon Movies 🍉');
|
|
document.querySelector('meta[property="og:description"]').setAttribute('content', description || 'Watch ' + title + ' on Watermelon Movies');
|
|
document.querySelector('meta[property="og:image"]').setAttribute('content', posterPath ? `https://image.tmdb.org/t/p/w500${posterPath}` : '');
|
|
document.querySelector('meta[property="og:url"]').setAttribute('content', window.location.href);
|
|
document.title = title + ' - Watermelon Movies 🍉';
|
|
}
|
|
|
|
// Replace your existing openModal function with this updated version
|
|
async function openModal(mediaType, imdbId, season = null, episode = null) {
|
|
let baseUrl = 'https://vidsrc.xyz/embed/';
|
|
if (mediaType === 'movie') {
|
|
baseUrl += 'movie/';
|
|
} else if (mediaType === 'tv') {
|
|
baseUrl += `tv/?season=${season}&episode=${episode}&`;
|
|
} else {
|
|
console.error('Unsupported media type');
|
|
return;
|
|
}
|
|
|
|
// Fetch movie/show details from TMDB
|
|
const detailsUrl = `https://api.themoviedb.org/3/${mediaType}/${imdbId}?api_key=${apiKey}`;
|
|
try {
|
|
const response = await fetch(detailsUrl);
|
|
const data = await response.json();
|
|
const title = data.title || data.name;
|
|
const description = data.overview;
|
|
const posterPath = data.poster_path;
|
|
|
|
// Update meta tags with movie/show info
|
|
updateMetaTags(title, description, posterPath);
|
|
|
|
// Update URL and open modal
|
|
const videoUrl = baseUrl + imdbId;
|
|
modal.style.display = "block";
|
|
videoIframe.src = videoUrl;
|
|
|
|
let newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
|
|
if (season && episode) {
|
|
newUrl += `&season=${season}&episode=${episode}`;
|
|
}
|
|
window.history.pushState({ path: newUrl }, '', newUrl);
|
|
} catch (error) {
|
|
console.error('Error fetching media details:', error);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
fetchMovies(); // Fetches upcoming movies for the Coming Soon section
|
|
fetchRandomMovies(); // Fetches random movies for display on page load
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
|
e.preventDefault();
|
|
document.querySelector('[name="search"]').focus();
|
|
}
|
|
});
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const mediaType = urlParams.get('type');
|
|
const imdbId = urlParams.get('id');
|
|
if (mediaType && imdbId) {
|
|
openModal(mediaType, imdbId);
|
|
}
|
|
});
|
|
|
|
function fetchRandomMovies() {
|
|
fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
displayMovies(data.results, 'randomMovies');
|
|
})
|
|
.catch(error => console.error('Error fetching random movies:', error));
|
|
}
|
|
|
|
function fetchMovies() {
|
|
fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${apiKey}&language=en`)
|
|
.then(response => response.json())
|
|
.then(data => displayComingSoon(data.results))
|
|
.catch(error => console.error('Fetching movies failed:', error));
|
|
}
|
|
|
|
function displayComingSoon(movies) {
|
|
const container = document.getElementById('comingSoon');
|
|
container.innerHTML = '';
|
|
const slider = document.createElement('div');
|
|
slider.className = 'slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4';
|
|
movies.forEach(movie => {
|
|
const movieCard = document.createElement('div');
|
|
movieCard.className = 'slider-item';
|
|
movieCard.innerHTML = `
|
|
<a href="javascript:void(0);" onclick="openModal('movie', '${movie.id}')">
|
|
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
|
|
<h3 class="text-lg font-semibold mt-2">${movie.title}</h3>
|
|
</a>
|
|
`;
|
|
slider.appendChild(movieCard);
|
|
});
|
|
container.appendChild(slider);
|
|
}
|
|
|
|
|
|
function displayMovies(movies, containerId) {
|
|
const container = document.getElementById(containerId);
|
|
container.innerHTML = ''; // Clear previous results
|
|
movies.forEach(movie => {
|
|
if (movie.poster_path) {
|
|
const movieTile = document.createElement('div');
|
|
movieTile.className = 'movie-tile';
|
|
movieTile.innerHTML = `
|
|
<a href="javascript:void(0);" onclick="openModal('movie', '${movie.id}')">
|
|
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
|
|
<h3>${movie.title}</h3>
|
|
<p>${movie.overview || 'No description available.'}</p>
|
|
</a>
|
|
<button class="trailer-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${movie.title}')">Trailer</button>
|
|
`;
|
|
container.appendChild(movieTile);
|
|
}
|
|
});
|
|
}
|
|
|
|
function displaySoundtracks() {
|
|
const soundtrackList = document.getElementById('soundtrackList');
|
|
soundtrackList.innerHTML = ''; // Clear previous soundtracks
|
|
|
|
// Example soundtracks - replace these with dynamic data if needed
|
|
const playlists = [
|
|
'https://open.spotify.com/embed/playlist/7N1Vxlv6sqZaAbGlo5XQRE', // Replace with your playlist URLs
|
|
|
|
];
|
|
|
|
playlists.forEach(url => {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = url;
|
|
iframe.width = '100%';
|
|
iframe.height = '380';
|
|
iframe.frameBorder = '0';
|
|
iframe.allow = 'encrypted-media';
|
|
soundtrackList.appendChild(iframe);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
displaySoundtracks(); // Call the function to display soundtracks
|
|
});
|
|
|
|
|
|
|
|
const toggleSwitch = document.getElementById('dark-mode-toggle');
|
|
const nightLightSwitch = document.getElementById('night-light-toggle');
|
|
const bodyElement = document.body;
|
|
const dotElement = document.querySelector('.dot');
|
|
const dotNightElement = document.querySelector('.dot-night');
|
|
const videoModalContent = document.querySelector('.video-modal-content');
|
|
|
|
toggleSwitch.addEventListener('change', () => {
|
|
if (toggleSwitch.checked) {
|
|
bodyElement.classList.add('dark-mode');
|
|
dotElement.classList.add('translate-x-full');
|
|
dotElement.classList.add('bg-gray-800');
|
|
videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
|
|
document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
|
|
} else {
|
|
bodyElement.classList.remove('dark-mode');
|
|
dotElement.classList.remove('translate-x-full');
|
|
dotElement.classList.remove('bg-gray-800');
|
|
videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
|
document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
|
|
}
|
|
});
|
|
|
|
nightLightSwitch.addEventListener('change', () => {
|
|
if (nightLightSwitch.checked) {
|
|
bodyElement.classList.add('night-light');
|
|
dotNightElement.classList.add('translate-x-full');
|
|
dotNightElement.classList.add('bg-yellow-500');
|
|
} else {
|
|
bodyElement.classList.remove('night-light');
|
|
dotNightElement.classList.remove('translate-x-full');
|
|
dotNightElement.classList.remove('bg-yellow-500');
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|