525 lines
No EOL
17 KiB
HTML
525 lines
No EOL
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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%);
|
|
}
|
|
|
|
|
|
.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 */
|
|
}
|
|
|
|
.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: #fefefe;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for better visibility */
|
|
}
|
|
|
|
.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; }
|
|
|
|
|
|
.episode-link-hover:hover {
|
|
color: #4CAF50; /* Change the color to what fits your design */
|
|
text-decoration: underline; /* Example styling, modify as needed */
|
|
}
|
|
|
|
|
|
.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, .cloudflare-btn {
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stream-btn {
|
|
background-color: #32cd32;
|
|
color: white;
|
|
}
|
|
|
|
.stream-btn:hover {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.share-btn {
|
|
background-color: #FFD700; /* Gold color */
|
|
color: white;
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
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: #FFC107; /* 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 */
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</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>
|
|
<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>
|
|
</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>
|
|
<iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
|
|
<button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
|
|
Pass the<span class="popcorn">🍿</span>
|
|
</button>
|
|
|
|
|
|
</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'; // Replace with your TMDB 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 description 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="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('${mediaType}', '${imdbId}')">Stream</button>
|
|
`;
|
|
container.appendChild(movieTile);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 = "";
|
|
}
|
|
}
|
|
|
|
function openModal(mediaType, imdbId) {
|
|
let baseUrl = 'https://vidsrc.to/embed/';
|
|
if (mediaType === 'movie') {
|
|
baseUrl += 'movie/';
|
|
} else if (mediaType === 'tv') {
|
|
baseUrl += 'tv/';
|
|
} else {
|
|
console.error('Unsupported media type');
|
|
return;
|
|
}
|
|
const videoUrl = baseUrl + imdbId;
|
|
modal.style.display = "block";
|
|
videoIframe.src = videoUrl;
|
|
|
|
// Update the URL in the address bar
|
|
const newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
|
|
window.history.pushState({ path: newUrl }, '', newUrl);
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
fetchMovies(); // Fetches upcoming movies for the Coming Soon section
|
|
fetchRandomMovies(); // Fetches random movies for display on page load
|
|
// Add event listener for keydown on the entire document
|
|
document.addEventListener('keydown', function(e) {
|
|
// Check if the '/' key is pressed and if no input is currently focused
|
|
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
|
// Prevent the default action to avoid typing the '/' character
|
|
e.preventDefault();
|
|
// Focus on the search input box
|
|
document.querySelector('[name="search"]').focus();
|
|
}
|
|
});
|
|
|
|
// Check URL parameters and open modal if applicable
|
|
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'); // Ensure this uses the same display function
|
|
})
|
|
.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 = `
|
|
<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>
|
|
<button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('https://vidsrc.to/embed/movie/${movie.id}')">Stream</button>
|
|
`;
|
|
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) { // Ensure there is a poster to display
|
|
const movieTile = document.createElement('div');
|
|
movieTile.className = 'movie-tile';
|
|
movieTile.innerHTML = `
|
|
<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>
|
|
<button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
|
|
`;
|
|
container.appendChild(movieTile);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|