RajMalik23 · rishirohilla · Oct 11, 2023
diff --git a/Hotel Booking Website/contact_page/contact.html b/Hotel Booking Website/contact_page/contact.html
@@ -6,10 +6,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <title>Contact Us - Hotel System</title>
 </head>
-
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
         <div class="container-fluid">
@@ -32,6 +35,9 @@
             <input class="form-control me-4 mr-3" type="search" placeholder="Search" aria-label="Search">
             <button type="button" class="btn btn-outline-success">Search</button>
           </form>
+          <button id="mode-toggle" class="mode-toggle">
+            <i id="icon" class="ri-sun-line"></i>
+          </button>
         </div>
       </nav>
 
@@ -70,7 +76,7 @@
             <p>&copy; 2023 Hotel System. All rights reserved.</p>
         </div>
     </footer>
-
+    <script src="darkmodecntct.js"></script>
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

diff --git a/Hotel Booking Website/contact_page/darkmodecntct.js b/Hotel Booking Website/contact_page/darkmodecntct.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const modeToggle = document.getElementById('mode-toggle');
+    const icon = document.getElementById('icon');
+    modeToggle.addEventListener('click', function() {
+      document.body.classList.toggle('dark-mode');
+    // const arr = document.querySelectorAll('div');
+    // for(const i of arr) i.classList.toggle('dark-mode');
+      const isDarkMode = document.body.classList.contains('dark-mode');
+      icon.className = isDarkMode ? 'ri-moon-line' : 'ri-sun-line';
+    });
+  });
diff --git a/Hotel Booking Website/contact_page/style.css b/Hotel Booking Website/contact_page/style.css
@@ -24,60 +24,84 @@
 
 /* Main Content */
 .container {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    max-width: 400px;
-    width: 100%;
-    margin: 20px auto;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+  margin: 20px auto;
 }
 
 .form-group {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .form-group label {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 .form-group input,
 .form-group textarea {
-    width: calc(100% - 20px);
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    margin-bottom: 10px;
+  width: calc(100% - 20px);
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
 }
 
 form textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 button[type="submit"] {
-    width: calc(100% - 20px);
-    padding: 10px;
-    border: none;
-    background-color: #3498db;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-    border-radius: 5px;
+  width: calc(100% - 20px);
+  padding: 10px;
+  border: none;
+  background-color: #3498db;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
 }
 
 button[type="submit"]:hover {
-    background-color: #2980b9;
+  background-color: #2980b9;
 }
 
 /* Footer */
 footer {
-    background-color: #34495e;
-    color: white;
-    text-align: center;
-    padding: 10px;
-    position: bottom;
-    bottom: 0;
-    width: 100%;
-
+  background-color: #34495e;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  position: bottom;
+  bottom: 0;
+  width: 100%;
+}
+.mode-toggle {
+  position: fixed;
+  top: 4rem;
+  right: 2rem;
+  /* background: none; */
+  /* border: none; */
+  cursor: pointer;
+  font-size: 24px;
+  color: #333; /* Initial color of the icon */
+}
+.dark-mode {
+  background-color: #333;
+  color: #fff;
+}
+.dark-mode .mode-toggle {
+  color: #fff;
+}
+.dark-mode .container {
+  color: #fff;
+  background-color: #231212;
+}
+.dark-mode input,.dark-mode textarea{
+  color: #fff;
+  background-color: #5b5757;
 }
diff --git a/Hotel Booking Website/index_page/index.html b/Hotel Booking Website/index_page/index.html
@@ -19,6 +19,9 @@
         <li class="link"><a href="#">Blog</a></li>
         <li class="link"><a href="#">Contact Us</a></li>
       </ul>
+      <button id="mode-toggle" class="mode-toggle">
+        <i id="icon" class="ri-sun-line"></i>
+      </button>
     </nav>
     <header class="section__container header__container">
       <div class="header__image__container">
@@ -61,7 +64,6 @@ <h1>Enjoy Your Dream Vacation</h1>
         </div>
       </div>
     </header>
-
     <section class="section__container popular__container">
       <h2 class="section__header">Popular Hotels</h2>
       <div class="popular__grid">
@@ -204,5 +206,6 @@ <h4>Resources</h4>
         Copyright © 2023 Web Design Mastery. All rights reserved.
       </div>
     </footer>
+    <script src="scriptfordarkmodebtn.js"></script>
   </body>
 </html>
diff --git a/Hotel Booking Website/index_page/scriptfordarkmodebtn.js b/Hotel Booking Website/index_page/scriptfordarkmodebtn.js
@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const modeToggle = document.getElementById('mode-toggle');
+    const icon = document.getElementById('icon');
+
+    modeToggle.addEventListener('click', function() {
+      document.body.classList.toggle('dark-mode');
+    // const arr = document.querySelectorAll('div');
+    // for(const i of arr) i.classList.toggle('dark-mode');
+      const isDarkMode = document.body.classList.contains('dark-mode');
+      icon.className = isDarkMode ? 'ri-moon-line' : 'ri-sun-line';
+    });
+  });
+
diff --git a/Hotel Booking Website/index_page/styles.css b/Hotel Booking Website/index_page/styles.css
@@ -401,3 +401,35 @@ nav {
     gap: 2rem;
   }
 }
+.mode-toggle {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 24px;
+  color: #333; /* Initial color of the icon */
+}
+.dark-mode {
+  background-color: #333;
+  color: #fff;
+}
+
+.dark-mode .mode-toggle {
+  color: #fff;
+}
+.dark-mode .footer__col {
+  color:white;
+  /* background-color: rgb(0, 0, 0); */
+}
+.dark-mode .footer {
+  /* color:white; */
+  background-color: rgb(0, 0, 0);
+}
+.dark-mode .nav__logo {
+  color: #fff;
+}
+.dark-mode .reward__container h4{
+  color: #fff;
+}