added trailers
This commit is contained in:
Omar Najjar
parent
0fb4b8cd89
commit
dbaa46104b
1 changed files with 270 additions and 265 deletions
535
index.html
535
index.html
|
|
@ -25,63 +25,62 @@
|
|||
}
|
||||
|
||||
.translate-x-full {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.dark-mode .movie-tile {
|
||||
background: #444;
|
||||
color: white;
|
||||
}
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.dark-mode .movie-tile {
|
||||
background: #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark-mode .search-input {
|
||||
background-color: #333;
|
||||
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 .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 {
|
||||
background-color: #555;
|
||||
}
|
||||
.dark-mode .stream-btn:hover .trailer-btn:hover{
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.dark-mode .stream-btn:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
.night-light body {
|
||||
background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.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 .video-modal-content {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background: #f5deb3;
|
||||
}
|
||||
.night-light .movie-tile {
|
||||
background: #f5deb3;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.night-light .movie-tile {
|
||||
background: #f5deb3;
|
||||
color: black;
|
||||
}
|
||||
.night-light .search-input {
|
||||
background-color: #deb887;
|
||||
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 .video-modal-content {
|
||||
background-color: rgba(255, 228, 181, 0.8);
|
||||
}
|
||||
.night-light .stream-btn .trailer-btn{
|
||||
background-color: #daa520;
|
||||
}
|
||||
|
||||
.night-light .stream-btn {
|
||||
background-color: #daa520;
|
||||
}
|
||||
|
||||
.night-light .stream-btn:hover {
|
||||
background-color: #cd853f;
|
||||
}
|
||||
.night-light .stream-btn:hover .trailer-btn:hover{
|
||||
background-color: #cd853f;
|
||||
}
|
||||
|
||||
.video-modal {
|
||||
display: none; /* Hidden by default */
|
||||
|
|
@ -301,7 +300,7 @@
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
.stream-btn, .cloudflare-btn {
|
||||
.stream-btn, .trailer-btn {
|
||||
padding: 5px 10px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
|
|
@ -352,15 +351,12 @@
|
|||
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>
|
||||
|
||||
<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">
|
||||
|
|
@ -368,66 +364,65 @@
|
|||
<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>
|
||||
<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;">
|
||||
<iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
|
||||
</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="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>
|
||||
|
||||
<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 -->
|
||||
<!-- 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;">
|
||||
<iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
|
||||
</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 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>
|
||||
|
||||
<script>
|
||||
const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // Replace with your TMDB API key
|
||||
</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>
|
||||
|
||||
document.getElementById('searchForm').addEventListener('submit', function(e) {
|
||||
<!-- 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) {
|
||||
|
|
@ -444,104 +439,115 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
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 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 = "";
|
||||
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>
|
||||
<button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${title}')">Trailer</button>
|
||||
`;
|
||||
container.appendChild(movieTile);
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
videoIframe.src = "";
|
||||
});
|
||||
}
|
||||
|
||||
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 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 openTrailerModal(videoId) {
|
||||
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
const modal = document.getElementById("videoModal");
|
||||
const videoIframe = document.getElementById("videoIframe");
|
||||
|
||||
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));
|
||||
}
|
||||
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 = "";
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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
|
||||
|
||||
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`)
|
||||
|
|
@ -551,77 +557,76 @@ function fetchRandomMovies() {
|
|||
}
|
||||
|
||||
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);
|
||||
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('movie', '${movie.id}')">Stream</button>
|
||||
`;
|
||||
slider.appendChild(movieCard);
|
||||
});
|
||||
container.appendChild(slider);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// JavaScript to handle dark mode switch
|
||||
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'); // Optional: change dot color in dark mode
|
||||
videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // Transparent modal box
|
||||
document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; // Darken background
|
||||
} else {
|
||||
bodyElement.classList.remove('dark-mode');
|
||||
dotElement.classList.remove('translate-x-full');
|
||||
dotElement.classList.remove('bg-gray-800'); // Optional: revert dot color
|
||||
videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)'; // Revert modal box color
|
||||
document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // Revert background color
|
||||
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 = `
|
||||
<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>
|
||||
<button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${movie.title}')">Trailer</button>
|
||||
`;
|
||||
container.appendChild(movieTile);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nightLightSwitch.addEventListener('change', () => {
|
||||
if (nightLightSwitch.checked) {
|
||||
bodyElement.classList.add('night-light');
|
||||
dotNightElement.classList.add('translate-x-full');
|
||||
dotNightElement.classList.add('bg-yellow-500'); // Optional: change dot color in night light mode
|
||||
} else {
|
||||
bodyElement.classList.remove('night-light');
|
||||
dotNightElement.classList.remove('translate-x-full');
|
||||
dotNightElement.classList.remove('bg-yellow-500'); // Optional: revert dot color
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue