modes enabled

sk66641 · Jun 25, 2024 · 5ab0f0c · 5ab0f0c
1 parent 468c468
commit 5ab0f0c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 17 deletions.
diff --git a/404.html b/404.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="assets/images/favicon/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="./css/404.css">
     <title>Error - 404</title>
+    <script src="./js/404.js" defer></script>
 </head>
 
 <body>
@@ -18,9 +19,11 @@
             unavailable.</div>
         <div class="text4 text3">Redirecting in <strong></strong> seconds</div>
         <div class="text5"><a href="../index.html">Go to HomePage</a></div>
-
+        <div class="dark-mode-toggle">
+            <input type="checkbox" id="dark-mode-toggle">
+            <label for="dark-mode-toggle">Dark Mode</label>
+        </div>
     </div>
-    <script src="./js/404.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/css/404.css b/css/404.css
@@ -1,3 +1,5 @@
+/* General styles */
+
 * {
     margin: 0;
     padding: 0;
@@ -115,6 +117,8 @@ a:hover {
     align-items: center;
 }
 
+/* Media queries for responsiveness */
+
 @media only screen and (max-width: 705px) {
     .text1 {
         font-size: 175px;
@@ -186,4 +190,48 @@ a:hover {
         transform: translateY(0);
         opacity: 1;
     }
-}
+}
+
+/* Dark Mode Toggle */
+
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: white;
+}
+
+.dark-mode-toggle label {
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.dark-mode-toggle input[type="checkbox"] {
+    display: none;
+}
+
+.dark-mode-toggle input[type="checkbox"] + label:before {
+    content: '\1F31E'; /* Sun emoji for light mode */
+    font-size: 20px;
+}
+
+.dark-mode-toggle input[type="checkbox"]:checked + label:before {
+    content: '\1F30C'; /* Moon emoji for dark mode */
+}
+
+body.dark-mode {
+    background: #333; /* Dark background color */
+    color: white;
+}
+
+body.dark-mode .container {
+    color: white; /* Adjust text color for dark mode */
+}
+
+body.dark-mode .star {
+    background: rgba(255, 255, 255, 0.8); /* Adjust star color for dark mode */
+}
diff --git a/js/404.js b/js/404.js
@@ -1,16 +1,3 @@
-let n = 10 // seconds
-
-setTimeout(function () {
-    window.location.href = './index.html';
-}, n*1000);
-
-document.querySelector('.text4').getElementsByTagName("strong")[0].innerHTML = n;
-setInterval(() => {
-    document.querySelector('.text4').getElementsByTagName("strong")[0].innerHTML = n - 1;
-    n = n - 1
-}, 1000);
-
-// Generate stars
 document.addEventListener('DOMContentLoaded', function () {
     const starsContainer = document.querySelector('.stars');
     for (let i = 0; i < 100; i++) {
@@ -21,4 +8,20 @@ document.addEventListener('DOMContentLoaded', function () {
         star.style.animationDelay = `${Math.random() * 2}s`;
         starsContainer.appendChild(star);
     }
+
+    const darkModeToggle = document.getElementById('dark-mode-toggle');
+    darkModeToggle.addEventListener('change', function () {
+        document.body.classList.toggle('dark-mode');
+    });
+
+    let n = 10; // seconds
+    setTimeout(function () {
+        window.location.href = '../index.html';
+    }, n * 1000);
+
+    const countdownElement = document.querySelector('.text4').getElementsByTagName('strong')[0];
+    countdownElement.innerHTML = n;
+    setInterval(() => {
+        countdownElement.innerHTML = --n;
+    }, 1000);
 });