Merge pull request #76 from pandeyji711/New_web

implement the dark mode on HelpOps-Hub
mdazfar2 · Jun 2, 2024 · 6d47ffe · 6d47ffe
2 parents beeba19 + da6b571
commit 6d47ffe
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 9 deletions.
diff --git a/Official_Website/dark_mode.css b/Official_Website/dark_mode.css
@@ -0,0 +1,28 @@
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+header.dark-mode {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+}
+
+.icons a.dark-mode {
+    color: #e0e0e0;
+}
+
+.sponsor-button.dark-mode {
+    background-color: #bb86fc;
+    color: #121212;
+}
+
+#search-bar.dark-mode {
+    background-color: #333333;
+    color: #e0e0e0;
+}
+
+#folders-container div.dark-mode {
+    background-color: #2c2c2c;
+    border: 1px solid #444444;
+}
diff --git a/Official_Website/darkmode.js b/Official_Website/darkmode.js
@@ -0,0 +1,14 @@
+/* app.js */
+
+function toggleTheme() {
+  document.body.classList.toggle("dark-mode");
+  document.querySelector("header").classList.toggle("dark-mode");
+  document.querySelector(".sponsor-button").classList.toggle("dark-mode");
+  document.querySelectorAll(".icons a").forEach((icon) => {
+    icon.classList.toggle("dark-mode");
+  });
+  document.getElementById("search-bar").classList.toggle("dark-mode");
+  document.querySelectorAll("#folders-container div").forEach((folder) => {
+    folder.classList.toggle("dark-mode");
+  });
+}
diff --git a/Official_Website/index.html b/Official_Website/index.html
@@ -4,9 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <title>HelpOps-Hub</title>
     <!-- Added Favicon for website -->
-    <link rel="shortcut icon" href="Favicon.png" type="Favicon"> 
+    <link rel="shortcut icon" href="Favicon.png" type="image/x-icon"> 
+    <link rel="stylesheet" href="dark_mode.css">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -17,15 +19,21 @@
         </div>
         <h1>HelpOps-Hub</h1>
         <p>Ensuring You Never Get Stuck In DevOps Again!</p>
-        <button class="sponsor-button" onclick="window.location.href=`https://github.com/sponsors/mdazfar2`">
+        <div class="icons">
+            <a href="https://github.com" target="_blank" class="fab fa-github"></a>
+            <a href="https://linkedin.com" target="_blank" class="fab fa-linkedin"></a>
+            <a href="https://discord.com" target="_blank" class="fab fa-discord"></a>
+            <a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
+        </div>
+        <button class="sponsor-button" onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
             <span class="heart">&#10084;</span> Sponsor
         </button>
     </header>
-        <div id="search-container">
-            <input type="text" id="search-bar" placeholder="Search repositories...">
-        </div>
+    <div id="search-container">
+        <input type="text" id="search-bar" placeholder="Search repositories...">
+    </div>
 
-        <div id="maincontainer">
+    <div id="maincontainer">
         <div id="loading" class="loading-gears">
             <svg class="gear one" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                 <path d="M78.9,50c0-1.6-0.1-3.1-0.2-4.6l9.4-7.2c0.7-0.5,0.9-1.5,0.4-2.2l-8.8-15.3c-0.5-0.7-1.5-0.9-2.2-0.4l-11,6.4
@@ -47,6 +55,7 @@ <h1>HelpOps-Hub</h1>
     </div>
     <div id="folders-container"></div>
     <script src="app.js"></script>
+    <script src="darkmode.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/Official_Website/style.css b/Official_Website/style.css
@@ -65,7 +65,7 @@ body {
    display: flex;
    align-items: center;
    justify-content: center;
-   height: 700px;;
+   height: 500px;;
 }
 /* Header styles */
 header {
@@ -148,7 +148,6 @@ width: 40px;
   justify-content: center;
   margin: auto;
   /* justify-content: space-between; Distribute cards evenly */
-  margin-top: 20px;
 }
 
 /* Individual folder card */
@@ -216,4 +215,19 @@ width: 40px;
   background-color: white;
   /* color: black;
   box-shadow: 5px 5px 20px #00ccff; */
+}
+/* icons */
+.icons {
+  display: flex;
+  gap: 10px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 20px; /* Distance from the top */
+  right: 20px; /* Distance from the right */
+}
+.icons a {
+  color: inherit;
+  text-decoration: none;
+  font-size: 20px; /* Adjust as needed */
 }