Merge pull request #1069 from kanishk-2/main

updated index.html
khushi-joshi-05 · Jun 21, 2024 · 670ecba · 670ecba
2 parents 5747718 + 22cadeb
commit 670ecba
Showing 1 changed file with 115 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -662,4 +662,119 @@ <h4>Follow Us</h4>
 
 </body>
 
+
+<script>
+
+    function redirectLogin() {
+        window.location.href = "Html-files/login.html";
+    }
+    function redirectSignup() {
+        window.location.href = "Html-files/signup.html";
+    }
+
+    var icon = document.getElementById("icon");
+
+    icon.onclick = function(){
+        document.body.classList.toggle("dark-theme");
+        if(document.body.classList.contains("dark-theme")){
+            icon.src = "images/sun.png";
+        }else{
+            icon.src = "images/moon.png";
+        }
+    }
+
+</script>
+
+
+    document.addEventListener("DOMContentLoaded", function () {
+  setTimeout(function () {
+      document.querySelector("body").classList.add("loaded");
+  }, 500)
+});
+
+</script
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toggle Dark Mode</title>
+    <style>
+        body {
+            transition: background-color 0.5s, color 0.5s;
+        }
+
+        .dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+
+        .toggle-container {
+            position: relative;
+            width: 60px;
+            height: 30px;
+        }
+
+        .toggle-container input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: 0.4s;
+            border-radius: 34px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: 0.4s;
+            border-radius: 50%;
+            background-image: url('lightdarkmode.png');
+            background-size: cover;
+        }
+
+        input:checked + .slider {
+            background-color: #2196F3;
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+
+        .slider:after {
+            content: url('lightdarkmode.png');
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        input:checked + .slider:after {
+            content: url('lightdarkmode.png');
+        }
+    </style>
+</head>
+<body>
+    <div class="toggle-container">
+        <input type="checkbox" id="darkModeToggle">
+        <label class="slider" for="darkModeToggle"></label>
+    </div>
+
+</body>
+
 </html>