From c1d0cfd9acf8245159e51a155b6d35f87aa0ca08 Mon Sep 17 00:00:00 2001 From: Sandhya Date: Fri, 29 Aug 2025 19:47:22 +0530 Subject: [PATCH] Update navbar --- css/about.css | 53 ++++++++------------------------------------ css/auth.css | 28 ++++++----------------- css/convert.css | 22 +++++++++--------- css/customize.css | 43 +++++++++-------------------------- css/feedback.css | 48 ++++++++------------------------------- css/index.css | 51 ++++++++---------------------------------- css/recipe_hub.css | 21 +++++++++--------- html/about.html | 16 ++++++------- html/convert.html | 16 ++++++------- html/customize.html | 16 ++++++------- html/feedback.html | 16 ++++++------- html/login.html | 10 ++++----- html/recipe_hub.html | 10 ++++----- html/scale.html | 16 ++++++------- html/signup.html | 16 ++++++------- index.html | 28 +++++++++++------------ 16 files changed, 140 insertions(+), 270 deletions(-) diff --git a/css/about.css b/css/about.css index 2f0baf94..aa1c7c9b 100644 --- a/css/about.css +++ b/css/about.css @@ -155,8 +155,7 @@ body { left: 0; right: 0; bottom: 0; - background: #ccc; - border-radius: 34px; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; align-items: center; @@ -180,7 +179,7 @@ body { /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ecdc4; /* you can use any gradient if you want */ + background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -373,52 +372,18 @@ body { transform: translateY(-2px); } -/* Dark Mode Feedback Button */ -[data-theme="dark"] .fb-color { - padding: 8px 18px; - background: linear-gradient( - 135deg, - rgba(245, 115, 197, 0.9), - rgba(190, 8, 245, 0.7) - ); - border-radius: 25px; - border: 1px solid rgba(190, 8, 245, 0.3); - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 0 10px rgba(190, 8, 245, 0.3); -} - -[data-theme="dark"] .fb-color:hover { - background: linear-gradient( - 135deg, - rgba(243, 19, 224, 0.85), - rgba(190, 8, 245, 0.9) - ); - transform: scale(1.05); - box-shadow: 0 0 20px rgba(190, 8, 245, 0.6); -} - -[data-theme="dark"] .fb-color a { - color: #fff; - text-decoration: none; - font-weight: 600; - letter-spacing: 0.5px; -} -[data-theme="dark"] .fb-color a:hover { - color: #ffffff; -} - .fb-color { padding: 8px 15px; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 20px; - border: black 1px solid; + border: none; } .fb-color:hover { - background-color: rgba(169, 196, 13, 0.39); + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); } .fb-color a { - color: black; + color: white; text-decoration: none; } @@ -473,7 +438,7 @@ body { .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -483,7 +448,7 @@ body { } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/css/auth.css b/css/auth.css index ec30b8e6..a0dd0aef 100644 --- a/css/auth.css +++ b/css/auth.css @@ -218,16 +218,17 @@ html[data-theme="dark"] .auth-title { padding: 8px 15px; background-color: rgba(238, 255, 0, 0.356); border-radius: 20px; - border: black 1px solid; + border: none; transition: background-color 0.3s ease; } .fb-color:hover { - background-color: rgba(169, 196, 13, 0.39); + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); } .fb-color a { - color: black; + color: white; text-decoration: none; } @@ -269,7 +270,7 @@ html[data-theme="dark"] .auth-title { left: 0; right: 0; bottom: 0; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; @@ -293,7 +294,8 @@ html[data-theme="dark"] .auth-title { } .theme-switch input:checked + .slider { - background: #4ecdc4; + background: linear-gradient(45deg, #bf60fa, #fde68a); + } .theme-switch input:checked + .slider:before { @@ -830,22 +832,6 @@ html[data-theme="dark"] body { text-shadow: 0 0 8px rgba(187, 134, 252, 0.5); } -/* Feedback Button */ -[data-theme="dark"] .fb-color { - background: linear-gradient( - 135deg, - rgba(245, 115, 197, 0.9), - rgba(190, 8, 245, 0.7) - ); - border-radius: 25px; - border: 1px solid rgba(190, 8, 245, 0.3); - box-shadow: 0 0 10px rgba(190, 8, 245, 0.3); -} - -[data-theme="dark"] .fb-color a { - color: #fff; -} - /* Auth Card & Form */ html[data-theme="dark"] .auth-card { background: rgba(30, 30, 30, 0.95); diff --git a/css/convert.css b/css/convert.css index 9ab3f82b..b3b707c4 100644 --- a/css/convert.css +++ b/css/convert.css @@ -116,6 +116,7 @@ border-left: 4px solid #bb86fc; } + [data-theme="dark"] .step-card { background: rgba(30,30,30,0.7); border: 1px solid rgba(255,255,255,0.1); @@ -144,7 +145,7 @@ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; @@ -169,7 +170,7 @@ /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ECDC4; /* you can use any gradient if you want */ + background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -313,15 +314,16 @@ } .fb-color { padding: 0.5rem 0.9rem; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 1.25rem; - border: black 1px solid; - } - .fb-color:hover{ - background-color: rgba(169, 196, 13, 0.39); + border: none; } + .fb-color:hover { + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); +} .fb-color a { - color: black; + color: white; text-decoration: none; } /* CTA Button */ @@ -375,7 +377,7 @@ .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -385,7 +387,7 @@ } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/css/customize.css b/css/customize.css index 34171b90..5e904d75 100644 --- a/css/customize.css +++ b/css/customize.css @@ -110,29 +110,7 @@ transform: scale(1.05); box-shadow: 0 15px 35px rgba(187,134,252,0.25); } -/* Dark Mode Feedback Button */ -[data-theme="dark"] .fb-color { - padding: 8px 18px; - background: linear-gradient(135deg, rgba(245,115,197,0.9), rgba(190,8,245,0.7)); - border-radius: 25px; - border: 1px solid rgba(190, 8, 245, 0.3); - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 0 10px rgba(190, 8, 245, 0.3); -} - -[data-theme="dark"] .fb-color:hover { - background: linear-gradient(135deg, rgba(243,19,224,0.85), rgba(190,8,245,0.9)); - transform: scale(1.05); - box-shadow: 0 0 20px rgba(190, 8, 245, 0.6); -} -[data-theme="dark"] .fb-color a { - color: #fff; - text-decoration: none; - font-weight: 600; - letter-spacing: 0.5px; -} /* ===================== Footer ===================== */ [data-theme="dark"] .footer { background-color: var(--footer-bg); @@ -176,7 +154,7 @@ /* Theme switch slider */ [data-theme="dark"] .theme-switch input:checked + .slider { - background: #4ECDC4; + background: linear-gradient(45deg, #bf60fa, #fde68a); } [data-theme="dark"] .theme-switch input:checked + .slider:before { @@ -198,7 +176,7 @@ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; @@ -223,7 +201,7 @@ /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ECDC4; /* you can use any gradient if you want */ +background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -329,15 +307,16 @@ .fb-color { padding: 0.5rem 0.9rem; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 1.25rem; - border: black 1px solid; + border: none; } -.fb-color:hover{ - background-color: rgba(169, 196, 13, 0.39); +.fb-color:hover { + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); } .fb-color a { - color: black; + color: white; text-decoration: none; } @@ -392,7 +371,7 @@ .user-avatar { width: 2.5rem; height: 2.5rem; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -402,7 +381,7 @@ } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/css/feedback.css b/css/feedback.css index a9de3597..b3aa085c 100644 --- a/css/feedback.css +++ b/css/feedback.css @@ -57,37 +57,6 @@ transform: translateY(-2px); text-shadow: 0 0 12px rgba(187, 134, 252, 0.8); } -/* Dark Mode Feedback Button */ -[data-theme="dark"] .fb-color { - padding: 8px 18px; - background: linear-gradient( - 135deg, - rgba(245, 115, 197, 0.9), - rgba(190, 8, 245, 0.7) - ); - border-radius: 25px; - border: 1px solid rgba(190, 8, 245, 0.3); - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 0 10px rgba(190, 8, 245, 0.3); -} - -[data-theme="dark"] .fb-color:hover { - background: linear-gradient( - 135deg, - rgba(243, 19, 224, 0.85), - rgba(190, 8, 245, 0.9) - ); - transform: scale(1.05); - box-shadow: 0 0 20px rgba(190, 8, 245, 0.6); -} - -[data-theme="dark"] .fb-color a { - color: #fff; - text-decoration: none; - font-weight: 600; - letter-spacing: 0.5px; -} /* Hero Section */ [data-theme="dark"] .hero-title, @@ -260,7 +229,7 @@ body { left: 0; right: 0; bottom: 0; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; @@ -285,7 +254,7 @@ body { /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ecdc4; /* you can use any gradient if you want */ + background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -472,15 +441,16 @@ body { .fb-color { padding: 8px 15px; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 20px; - border: black 1px solid; + border: none; } .fb-color:hover { - background-color: rgba(169, 196, 13, 0.39); + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); } .fb-color a { - color: black; + color: white; text-decoration: none; } @@ -532,7 +502,7 @@ body { .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -542,7 +512,7 @@ body { } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/css/index.css b/css/index.css index a88e1e2b..0604d337 100644 --- a/css/index.css +++ b/css/index.css @@ -96,40 +96,6 @@ color: #ffffff !important; /* always white in dark mode */ } -/* Dark Mode Feedback Button */ -[data-theme="dark"] .fb-color { - padding: 8px 18px; - background: linear-gradient( - 135deg, - rgba(245, 115, 197, 0.9), - rgba(190, 8, 245, 0.7) - ); - border-radius: 25px; - border: 1px solid rgba(190, 8, 245, 0.3); - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 0 10px rgba(190, 8, 245, 0.3); -} - -[data-theme="dark"] .fb-color:hover { - background: linear-gradient( - 135deg, - rgba(243, 19, 224, 0.85), - rgba(190, 8, 245, 0.9) - ); - transform: scale(1.05); - box-shadow: 0 0 20px rgba(190, 8, 245, 0.6); -} - -[data-theme="dark"] .fb-color a { - color: #fff; - text-decoration: none; - font-weight: 600; - letter-spacing: 0.5px; -} -[data-theme="dark"] .fb-color a:hover { - color: #ffffff; -} /* Dark Theme for Newsletter Section */ html[data-theme="dark"] .newsletter-section { background: linear-gradient(135deg, #2c2c2c 0%, #3d3d3d 100%); @@ -462,7 +428,7 @@ body { .slider { position: absolute; cursor: pointer; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; top: 0; left: 0; @@ -491,7 +457,7 @@ body { /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ecdc4; + background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -517,15 +483,16 @@ body { .fb-color { padding: 0.5rem 0.9rem; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 20px; - border: black 1px solid; + border: none; } .fb-color:hover { - background-color: rgba(169, 196, 13, 0.39); + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); } .fb-color a { - color: black; + color: bwhitelack; text-decoration: none; } @@ -563,7 +530,7 @@ body { .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -573,7 +540,7 @@ body { } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/css/recipe_hub.css b/css/recipe_hub.css index 5637c692..85cb890e 100644 --- a/css/recipe_hub.css +++ b/css/recipe_hub.css @@ -144,7 +144,7 @@ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background: #ccc; + background: linear-gradient(45deg, #6b7043, #fde68a); border-radius: 34px; transition: 0.4s; display: flex; @@ -169,7 +169,7 @@ /* When checked (dark mode) */ .theme-switch input:checked + .slider { - background: #4ECDC4; /* you can use any gradient if you want */ + background: linear-gradient(45deg, #bf60fa, #fde68a); } .theme-switch input:checked + .slider:before { @@ -314,15 +314,16 @@ } .fb-color { padding: 8px 15px; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 20px; - border: black 1px solid; - } - .fb-color:hover{ - background-color: rgba(169, 196, 13, 0.39); + border: none; } + .fb-color:hover { + box-shadow: 0 4px 12px rgba(96,165,250,0.5); + transform: translateY(-2px); +} .fb-color a { - color: black; + color: white; text-decoration: none; } /* CTA Button */ @@ -376,7 +377,7 @@ .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -386,7 +387,7 @@ } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; diff --git a/html/about.html b/html/about.html index 79eef567..30fd473e 100644 --- a/html/about.html +++ b/html/about.html @@ -40,23 +40,23 @@
- +
Feedback
Scale Now +
diff --git a/html/convert.html b/html/convert.html index 211a79cc..063255bf 100644 --- a/html/convert.html +++ b/html/convert.html @@ -21,23 +21,23 @@
- +
Feedback
Scale Now +
diff --git a/html/customize.html b/html/customize.html index 3e9d1232..98e703bf 100644 --- a/html/customize.html +++ b/html/customize.html @@ -30,23 +30,23 @@
- +
Feedback
Scale Now +
diff --git a/html/feedback.html b/html/feedback.html index 0e61548d..b1e01a9e 100644 --- a/html/feedback.html +++ b/html/feedback.html @@ -35,23 +35,23 @@
- +
Feedback
Scale Now +
diff --git a/html/login.html b/html/login.html index 7f3132ca..5a654eca 100644 --- a/html/login.html +++ b/html/login.html @@ -43,12 +43,16 @@
+ +
+ Feedback +
+
-
- Feedback -
-
diff --git a/html/recipe_hub.html b/html/recipe_hub.html index 8d727f42..1ad6819d 100644 --- a/html/recipe_hub.html +++ b/html/recipe_hub.html @@ -31,12 +31,16 @@
+ +
+ Feedback +
+ Scale Now -
- Feedback -
- Scale Now
diff --git a/html/scale.html b/html/scale.html index 215c6796..09c872b0 100644 --- a/html/scale.html +++ b/html/scale.html @@ -26,23 +26,23 @@
- +
Feedback
Scale Now +
diff --git a/html/signup.html b/html/signup.html index a9db0d6e..9664fbbd 100644 --- a/html/signup.html +++ b/html/signup.html @@ -29,23 +29,23 @@
- +
Feedback
Login +
diff --git a/index.html b/index.html index 62c81ed9..c688e955 100644 --- a/index.html +++ b/index.html @@ -98,15 +98,15 @@ } .fb-color { padding: 8px 15px; - background-color: rgba(238, 255, 0, 0.356); + background: linear-gradient(45deg, #60a5fa, #fde68a); border-radius: 20px; - border: black 1px solid; + border: none; } .fb-color:hover{ - background-color: rgba(169, 196, 13, 0.39); + background: linear-gradient(45deg, #60a5fa, #fde68a); } .fb-color a { - color: black; + color: white; text-decoration: none; } /* CTA Button */ @@ -162,7 +162,7 @@ .user-avatar { width: 40px; height: 40px; - background: linear-gradient(45deg, var(--candy-red), var(--sunny-yellow)); + background: linear-gradient(45deg, #c270f6, #747061); border-radius: 50%; display: flex; align-items: center; @@ -172,7 +172,7 @@ } .logout-btn { - background: linear-gradient(45deg, #ff4757, #ff3838) !important; + background: linear-gradient(90deg, #ff5f6d, #c31432); color: #ffffff; border: none !important; padding: 0.5rem 1rem; @@ -551,19 +551,12 @@

Ready for some baking

- +
Feedback
@@ -572,6 +565,13 @@

Ready for some baking

Scale Now +