From e6675a1f2c3dc3ec6d34e24dbbdc945aaa281217 Mon Sep 17 00:00:00 2001 From: t rahul prabhu Date: Fri, 4 Oct 2024 11:59:59 +0530 Subject: [PATCH 1/6] done --- darkMode.js | 22 ++++++++++ index.html | 12 +++++- style.css | 114 ++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 139 insertions(+), 9 deletions(-) create mode 100644 darkMode.js diff --git a/darkMode.js b/darkMode.js new file mode 100644 index 00000000..f3597c3f --- /dev/null +++ b/darkMode.js @@ -0,0 +1,22 @@ +const checkbox = document.getElementById('checkbox') +const modeLabel = document.getElementById('mode-label') + +// Check if dark mode is already enabled +if (localStorage.getItem('theme') === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark') + checkbox.checked = true + modeLabel.textContent = 'Dark Mode' +} + +// Add event listener for toggle switch +checkbox.addEventListener('change', () => { + if (checkbox.checked) { + document.documentElement.setAttribute('data-theme', 'dark') + localStorage.setItem('theme', 'dark') + modeLabel.textContent = 'Dark Mode' + } else { + document.documentElement.setAttribute('data-theme', 'light') + localStorage.setItem('theme', 'light') + modeLabel.textContent = 'Light Mode' + } +}) diff --git a/index.html b/index.html index 3e30462b..256eba89 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@
+
Collect your GamingTools @@ -22,8 +23,16 @@
  • Others
    • + - + +
    + + Light Mode +
    @@ -292,6 +301,7 @@ + diff --git a/style.css b/style.css index 8d59ccaf..df0324f2 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,104 @@ margin: 18px 0; } +/* Dark mode */ + +/* Default light mode colors */ +:root { + --background-color: white; + --text-color: black; + --header-bg: lightgray; +} + +h2{ + color: var(--text-color); +} +/* Dark mode colors */ +[data-theme="dark"] { + --background-color: #121212; + --text-color: #f1f1f1; + --header-bg: #1c1c1c; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + transition: background-color 0.3s, color 0.3s; +} + +header { + background-color: var(--header-bg); + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +h1 { + margin: 0; +} + +.theme-switch-wrapper { + display: flex; + align-items: center; +} + +#mode-label { + margin-left: 10px; + font-size: 1rem; +} + +/* Toggle Switch */ +.theme-switch { + position: relative; + display: inline-block; + width: 50px; + height: 24px; +} + +.theme-switch 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: 24px; +} + +.slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + border-radius: 50%; + background-color: white; + transition: 0.4s; + top: 3px; + left: 4px; +} + +input:checked + .slider { + background-color: #66bb6a; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +/*---------------------*/ + @keyframes rainbow { 0% { background-position: 0% 50%; @@ -123,13 +221,13 @@ nav ul li.login:hover { .col-1 h2 { font-size: 54px; - color: #000; + color: var(--text-color); cursor: pointer; } .col-1 h3 { font-size: 30px; - color: #707070; + color: var(--text-color); font-weight: 100; margin: 20px 0 10px; cursor: pointer; @@ -137,7 +235,7 @@ nav ul li.login:hover { .col-1 p { font-size: 16px; - color: #a1a1a1; + color: var(--text-color); font-weight: 500; cursor: pointer; } @@ -147,7 +245,7 @@ button { border: 0; padding: 14px 12px; outline: none; - color: #fff; + color: var(--text-color); font-size: 16px; font-weight: bolder; background: linear-gradient(to right, #fb5283, #ff3527); @@ -212,20 +310,20 @@ button:hover { .original-price { font-size: 20px; - color: #a1a1a1; + color: var(--text-color); text-decoration: line-through; margin-right: 15px; } .discounted-price { font-size: 24px; - color: #000; + color: var(--text-color); font-weight: bold; } .discount { background-color: #ff3c6d; - color: #fff; + color: var(--text-color); padding: 5px 10px; border-radius: 5px; font-size: 14px; @@ -242,7 +340,7 @@ button:hover { text-align: center; font-size: 14px; font-weight: bold; - color: #fff; + color: var(--text-color); cursor: pointer; border: 1.5px solid #fff; padding: 10px; From a0a2f93c642ed805e332e8351b020974d4cfa699 Mon Sep 17 00:00:00 2001 From: t rahul prabhu Date: Fri, 4 Oct 2024 12:03:42 +0530 Subject: [PATCH 2/6] done --- style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/style.css b/style.css index df0324f2..93cd9a8f 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,6 @@ .container { width: 100%; min-height: 100vh; - padding-left: 5%; padding-right: 5%; box-sizing: border-box; overflow: hidden; From 56fc098107ebbc0de9fc567f90d426efbc5674d1 Mon Sep 17 00:00:00 2001 From: t rahul prabhu Date: Mon, 7 Oct 2024 06:03:22 +0530 Subject: [PATCH 3/6] done --- SignUp/signup.css | 16 ++++++++++++++++ SignUp/signup.html | 3 +++ login/forgot.css | 24 ++++++++++++++++++++---- login/forgot.html | 3 +++ login/login.css | 24 +++++++++++++++++++----- login/login.html | 4 ++++ 6 files changed, 65 insertions(+), 9 deletions(-) diff --git a/SignUp/signup.css b/SignUp/signup.css index f2f7510f..51858141 100644 --- a/SignUp/signup.css +++ b/SignUp/signup.css @@ -104,3 +104,19 @@ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focu color: #ff80ab; text-decoration: underline; } + +.linksHome{ + position: absolute; + top: 20px; + left: 20px; + color: #eb6289; + background-color: rgb(255, 211, 211); + color: black; + padding: 15px; + font-size: large; + text-decoration: none; + border-radius: 15px; +} +a{ + text-decoration: none; +} \ No newline at end of file diff --git a/SignUp/signup.html b/SignUp/signup.html index ce911481..d1537965 100644 --- a/SignUp/signup.html +++ b/SignUp/signup.html @@ -8,6 +8,9 @@ +
    + home +