From 1d96be29dae8ac80c95489c2bbdc89a655da226e Mon Sep 17 00:00:00 2001 From: Abhinav Gupta Date: Thu, 17 Oct 2024 01:06:40 +0530 Subject: [PATCH 1/3] Add files via upload --- index.html | 157 ++++++++++++++++++++++++++++++------------------- themeToggle.js | 11 ++++ 2 files changed, 107 insertions(+), 61 deletions(-) create mode 100644 themeToggle.js diff --git a/index.html b/index.html index 2722a25c..798c1b06 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,24 @@ - + - + Retro - - + + + + @@ -34,21 +42,26 @@ - + - -

Frequently Asked Questions

-
-
+

Frequently Asked Questions

+
+
What is your return policy? @@ -807,7 +830,7 @@

Our return policy lasts 30 days...

-
+
How do I track my order? @@ -818,7 +841,7 @@

You can track your order using the tracking number...

-
+
How long does shipping take? @@ -829,7 +852,7 @@

Shipping typically takes 5-7 business days, depending on your location.

-
+
Can I change my order after it's been placed? @@ -840,7 +863,7 @@

If your order hasn't been processed yet, you can contact us to make changes.

-
+
Do you ship internationally? @@ -851,7 +874,7 @@

Yes, we offer international shipping to select countries.

-
+
Do you offer discounts for bulk orders? @@ -900,9 +923,10 @@

Downlo Services Contact us Cart + Contributors
-

Contact Us!

- - - - - - - +

Contact Us!

+ +
+ + +
+ +
+ + +
+ -
+ + + + +

@@ -1115,6 +1149,7 @@

Follow + diff --git a/themeToggle.js b/themeToggle.js new file mode 100644 index 00000000..d8db51a9 --- /dev/null +++ b/themeToggle.js @@ -0,0 +1,11 @@ +function toggleDarkMode() { + let isDark = document.body.classList.toggle('dark-mode'); + localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled'); + } + + // On page load + document.addEventListener('DOMContentLoaded', (event) => { + if (localStorage.getItem('darkMode') === 'enabled') { + document.body.classList.add('dark-mode'); + } + }); \ No newline at end of file From 760eb63991d0f373938eff9b61bf67e17efef088 Mon Sep 17 00:00:00 2001 From: Abhinav Gupta Date: Thu, 17 Oct 2024 01:12:48 +0530 Subject: [PATCH 2/3] Update navbarstyles.css --- Css-files/navbarstyles.css | 178 ++++++++++++++++++++++++++++++++++++- 1 file changed, 177 insertions(+), 1 deletion(-) diff --git a/Css-files/navbarstyles.css b/Css-files/navbarstyles.css index 5f22fd7c..572d1269 100644 --- a/Css-files/navbarstyles.css +++ b/Css-files/navbarstyles.css @@ -33,6 +33,7 @@ body { color: black; font-weight: bold; transition: transform 0.3s ease; + font-family: var(--ff-philosopher); } .navbar-brand:hover { @@ -164,4 +165,179 @@ body { .nav-item { margin-bottom: 1rem; } -} \ No newline at end of file +} + +.dark-mode{ + body { + font-family: 'Philosopher', sans-serif; + margin: 0; + padding: 0; + } + + /* Navbar styles */ + .navbar { + background-color: black; + color: white; + padding: 1rem; + display: flex; + width: 100%; + justify-content: space-between; + margin: 10px 1px!important; + border-radius: 20px; + } + + .nav-right { + margin-left: auto; + /* Pushes the login/signup to the right side */ + display: flex; + gap: 15px; + /* Space between login and signup */ + } + + .ms-auto { + margin-left: auto; + /* Pushes to the right */ + } + + .navbar-brand { + font-size: 1.5rem; + color: whitesmoke; + font-weight: bold; + transition: transform 0.3s ease; + font-family: var(--ff-philosopher) + } + + .navbar-brand:hover { + transform: scale(1.6); + } + + .navbar-nav .nav-item { + margin-right: 15px; + } + + .nav-link { + color: white; + font-size: 1rem; + font-family: var(--ff-philosopher); + text-decoration: none; + /* Remove default underline */ + position: relative; + transition: all 0.3s ease; + font-weight: 400; + font-size: 21px; + line-height: 31px; + } + + .nav-item.dropdown .nav-link { + text-decoration: none; + /* No underline for dropdown toggle */ + } + + .nav-link:hover { + text-decoration: none; + /* Prevent default underline on hover */ + } + + .nav-link::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 0%; + height: 3.5px; + /* Thicker underline */ + background: transparent; + transition: all 0.3s ease-in-out; + box-shadow: + 0 0 30px rgba(255, 159, 128, 1), + /* Initial glow effect with bright peach color */ + 0 0 60px rgba(255, 159, 128, 1); + /* Increased glow effect */ + } + + .nav-link:hover::after { + background: rgba(243, 187, 183, 1); + width: 100%; + box-shadow: 0 0 20px rgba(243, 187, 183, 1); + } + + .nav-btn { + background: none; + border: none; + font-size: 1rem; + cursor: pointer; + color: white; + text-decoration: none; + position: relative; + } + + .nav-btn:hover { + color: #d2691e; + } + + .nav-btn::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 0%; + height: 2px; + background: #ffb6c1; + /* Adjust to match background color */ + transition: all 0.3s ease-in-out; + box-shadow: 0 20px #ffb6c1; + /* Glow effect */ + } + + .nav-link:hover::after { + background: rgba(255, 159, 128, 1); + width: 100%; + box-shadow: + 0 0 25px rgba(255, 159, 128, 1), + 0 0 50px rgba(255, 159, 128, 1); + /* Glow effect with bright peach color */ + } + + .nav-link:hover, + .nav-btn:hover { + color: hwb(327 21% 3%) !important; + } + + .dropdown-menu { + background-color: #ffe5e5; + border: none; + } + + .dropdown-item { + /*color: black;*/ + font-family: var(--ff-philosopher); + } + + .dropdown-item:hover { + background-color: #f0c0a0; + color: #d2691e; + } + + /* Mobile Styles */ + @media (max-width: 768px) { + .navbar-brand { + margin-left: 10px; + } + + .navbar-nav { + text-align: center; + } + + .navbar-toggler { + border: none; + } + + .navbar-toggler-icon { + color: white; + } + + .nav-item { + margin-bottom: 1rem; + } + } +} From 2d18bd11cb685b7bbc94824f1245b8d45456485a Mon Sep 17 00:00:00 2001 From: Abhinav Gupta Date: Thu, 17 Oct 2024 01:13:15 +0530 Subject: [PATCH 3/3] Add files via upload --- Css-files/themeToggle.css | 85 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 Css-files/themeToggle.css diff --git a/Css-files/themeToggle.css b/Css-files/themeToggle.css new file mode 100644 index 00000000..69f2ba59 --- /dev/null +++ b/Css-files/themeToggle.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + transition: 0.5s; +} + +input { + display: none; +} + +.display { + position: relative; + width: 100%; + top: 18%; + display: flex; + align-items: center; + justify-content: center; + background: white; +} + +label { + width: 80px; + height: 40px; + border-radius: 40px; + background: #F3F3F3; + box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05) inset; + cursor: pointer; + position: relative; +} + +.circle { + width: 160px; + height: 160px; + border-radius: 99px; + background: white; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05), + -10px -10px 30px rgba(0, 0, 0, 0.05) inset; + position: absolute; + top: 50%; + left: 0%; + transform: translate(10%, -50%); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +svg { + width: 80px; + position: absolute; +} +.sun { + color: #FFD600; + margin-top: 0%; + opacity: 1; +} +.moon { + margin-top: -150%; + color: white; + opacity: 0; +} + +input[type=checkbox]:checked + .display { + background: #2C2C2F; +} +input[type=checkbox]:checked + .display label { + background: #1F1F21; + box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) inset; +} +input[type=checkbox]:checked + .display label .circle { + left: 100%; + transform: translate(-110%, -50%); + background: #2C2C2F; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), + -10px -10px 30px rgba(0, 0, 0, 0.5) inset; +} +input[type=checkbox]:checked + .display label .circle .sun { + margin-top: 150%; + opacity: 0; +} +input[type=checkbox]:checked + .display label .circle .moon { + margin-top: 0%; + opacity: 1; +} +label:active .circle { + width: 200px; +} \ No newline at end of file