diff --git a/Feedback.html b/Feedback.html index 10b5e4ac..5b19238e 100644 --- a/Feedback.html +++ b/Feedback.html @@ -33,12 +33,144 @@ /* Adjust padding for better appearance */ } + + /* dark mode toggle button styling */ + body { + background-color: white; + /* Light mode background */ + color: black; + transition: background-color 0.3s, color 0.3s; + } + + .navbar { + + background-color: rgb(148 207 226); + /* Light mode navbar */ + + border-radius: 7px; + color: black; + padding: 7px; + } + + ul li a:hover { + color: rgb(16, 16, 16) !important; + } + a:hover { + color: rgb(0, 0, 6); + } + .navbar.dark-mode { + background-color: black; + /* Dark mode navbar */ + color: white; + } + + /* more addition for dark mode theme */ .dark-mode .logo img { filter: brightness(0) invert(1); /* Inverts the color to make it white */ } + + /* dark mode hove effect on logo */ + body.dark-mode #logo img:hover { + filter: brightness(0) invert(1); + /* Change black logo to white */ + filter: brightness(0.8); + /* Change the brightness to light grey on hover */ + } + + .navbar.dark-mode .logo-img { + filter: brightness(0) invert(1); + /* Change logo color in dark mode */ + } + + .menu ul { + list-style-type: none; + padding: 0; + display: flex; + + } + + .menu li { + margin-right: 15px; + } + + .menu a { + color: black; + /* Light mode link color */ + border: 1.5px solid black; + /* Black border */ + border-radius: 7px; + padding: 3px 5px; + text-decoration: none; + transition: all 0.3s; + display:inline-block; + vertical-align: middle; + } + + .menu a:hover { + background-color: blue; + /* Blue background on hover */ + color: white; + /* White text on hover */ + } + + .dark-mode .menu a { + color: white; + /* Dark mode link color */ + border: 1px solid lightgrey; + /* Light grey border in dark mode */ + } + + .dark-mode { + background-color: rgba(50, 50, 50, 0.95); + /* Slightly gray background with high opacity */ + } + + .dark-mode .menu a:hover { + background-color: white; + /* White background on hover in dark mode */ + color: black; + /* Black text on hover in dark mode */ + } + + .light-dark-btn { + background-color: transparent; + border: 1px solid black; + /* Black border */ + border-radius: 50px; + cursor: pointer; + color: black; + /* Default button color */ + } + + .light-dark-btn:hover { + color: blue; + /* Change color on hover */ + } + + .dark-mode .light-dark-btn { + color: white; + /* Button color in dark mode */ + border: 1px solid lightgrey; + /* Light grey border */ + } + + .dark-mode .light-dark-btn:hover { + background-color: white; + /* Background on hover in dark mode */ + color: black; + /* Text color on hover in dark mode */ + } + + .buttons { + display: flex; + align-items: center; + } + + + /* adding dark mode for contact info */ .content { transition: background-color 0.3s, color 0.3s; @@ -318,7 +450,30 @@ -
+ +
+ + + Get started + + + + +
+
+ + + + +
+ +

AmbuFlow Feedback

+ +
+ +

Feedback

Please rate your experience:

@@ -334,6 +489,52 @@

Please rate your experience:

+
+ Thank you for your response! +
+
+ + + +