maverick/pirates
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dark mode

Browse source
This commit is contained in:
Omar Najjar 2024-07-16 19:42:59 +10:00
parent e8d29f8b1e
commit 3ad6fcd99c
1 changed files with 71 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
index.html
View file

@ -19,6 +19,38 @@
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 {
background-color: #555;
}
.dark-mode .stream-btn:hover {
background-color: #666;
}
.video-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
@ -286,7 +318,7 @@
}
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 */
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4)); /* Add a shadow to enhance the effect */
}
}
@ -295,7 +327,8 @@
<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">
@ -318,14 +351,22 @@
<div id="videoModal" class="video-modal">
<div class="video-modal-content">
<span class="close">&times;</span>
<div style="border-radius: 10px; width: 100%; overflow: hidden;">
<iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
<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="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-600 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>
<button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
Pass the<span class="popcorn">🍿</span>
</button>
</div>
</div>
@ -506,10 +547,27 @@ function displayMovies(movies, containerId) {
}
// JavaScript to handle dark mode switch
const toggleSwitch = document.getElementById('dark-mode-toggle');
const bodyElement = document.body;
const dotElement = document.querySelector('.dot');
const videoModalContent = document.querySelector('.video-modal-content');
</script>
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
}
});
</script>
</body>
</html>