From c88e1964aa030e1d8d9823f87ad682fdc01d81e3 Mon Sep 17 00:00:00 2001 From: Anurag Pandey Date: Mon, 3 Jun 2024 00:35:20 +0530 Subject: [PATCH] added dark mode --- Official_Website/dark_mode.css | 28 ++++++++++++++++++++++++++++ Official_Website/darkmode.js | 14 ++++++++++++++ Official_Website/index.html | 23 ++++++++++++++++------- Official_Website/style.css | 18 ++++++++++++++++-- 4 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 Official_Website/dark_mode.css create mode 100644 Official_Website/darkmode.js diff --git a/Official_Website/dark_mode.css b/Official_Website/dark_mode.css new file mode 100644 index 00000000..56fb173d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Official_Website/darkmode.js b/Official_Website/darkmode.js new file mode 100644 index 00000000..104fa923 --- /dev/null +++ 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 index d23fe722..2e2d0789 100644 --- a/Official_Website/index.html +++ b/Official_Website/index.html @@ -4,9 +4,11 @@ + HelpOps-Hub - + + @@ -17,15 +19,21 @@

HelpOps-Hub

Ensuring You Never Get Stuck In DevOps Again!

- -
- -
+
+ +
-
+
+ - \ No newline at end of file + diff --git a/Official_Website/style.css b/Official_Website/style.css index 4ee8047f..c124d4ab 100644 --- 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 */ } \ No newline at end of file