Skip to content

Commit

Permalink
UI Enhancement: Update Navbar Styling for a Modern Look (#423) (#426)
Browse files Browse the repository at this point in the history 
### Description:
This PR updates the styling of the navbar in the Waste Management
project to align with modern design standards and improve user
experience. The current navbar includes green buttons that feel outdated
and inconsistent with the overall aesthetic. The new design introduces a
cohesive look that complements the website’s main color scheme.

### Requirements:

- Replaced the green button styling with a background color that matches
the website’s primary color palette.
- Added hover effects to navbar links, changing the text color to green
to maintain thematic consistency and provide visual feedback.
- Ensured the navbar styling is responsive and visually appealing across
all screen sizes and devices.

### Acceptance Criteria:

- Navbar background color aligns with the website’s primary color
palette.
- Navbar link text color changes to green on hover for visual feedback.
- Navbar styling remains consistent and responsive across all devices.
- The updated navbar design complements the website’s modern look and
feel.

### Additional Context: 
This UI enhancement refreshes the navbar’s appearance, creating a more
cohesive and visually appealing experience that matches the overall
design standards of the site. The improved styling aims to enhance
usability and user interaction.

### Screenshot:
![Screenshot
(238)](https://github.com/user-attachments/assets/35ddd10f-ab84-4a1c-9b6f-834c28e84c5f)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced dark mode styling for various header elements and
components.
- Enhanced form validation with clearer error messages for signup and
newsletter forms.
  - Added functionality for a scroll-to-top button.

- **Bug Fixes**
  - Standardized `required` attribute syntax in feedback forms.

- **Style**
  - Updated button and section styles, including new hover effects.
  - Implemented dark mode classes for improved visual coherence.

- **Chores**
  - Added event listeners for dark mode toggle functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
  • Loading branch information
@khushi-joshi-05
khushi-joshi-05 authored Nov 10, 2024
2 parents 4ee2a67 + 501a9bc commit 1c8edc1
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 50 deletions.
34 changes: 18 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h2>Efficient Waste Management</h2>
<img src="./assets/rb_2148298503.png" alt="Upload Preview">
</div>
<div class="upload-text">
<h2>Upload Your Files</h2>
<h2 class="darkmodetext">Upload Your Files</h2>
<label for="image-input" class="custom-file-upload">
<input type="file" id="image-input" accept="image/*" hidden />
<span>Select Image</span>
Expand All @@ -86,17 +86,17 @@ <h2>Upload Your Files</h2>
</div>
</section>
<section class="classification">
<h2>Waste Classification</h2>
<h2 class="darkmodetext">Waste Classification</h2>
<p id="classification-result">Your classification result will appear here.</p>
</section>
<!-- part 2 start-->

<section class="disposal">
<h2>Disposal Information</h2>
<h2 class="darkmodetext">Disposal Information</h2>
<p id="disposal-information">Disposal information will be displayed here.</p>
</section>
<div class="Categories">
<h2>Waste Categories</h2>
<h2 class="darkmodetext">Waste Categories</h2>
<div class="card-container">
<div class="card">
<div class="card-inner">
Expand Down Expand Up @@ -453,7 +453,7 @@ <h3>Our Commitment to Sustainability</h3>
</div>
</div>
<section class="features" id="features">
<h2>Discover Our Features</h2>
<h2 class="darkmodetext">Discover Our Features</h2>
<div class="features-container">
<div class="feature-card" id="eco-friendly">
<div class="icon"></div>
Expand Down Expand Up @@ -492,7 +492,7 @@ <h3>Community Engagement</h3>
<section class="faqisection">
<section class="faqs" id="faqs">
<div>
<h2>Frequently Asked Questions (FAQs)</h2>
<h2 class="darkmodetext">Frequently Asked Questions (FAQs)</h2>
<div class="faq-item">
<h3>
What is the difference between biodegradable and
Expand Down Expand Up @@ -561,29 +561,30 @@ <h3>Why is it important to sort waste?</h3>
</section>
</section>
<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<h2 class="darkmodetext">Your Feedback</h2>
<form id="feedback-form" name="feedback-form">
<input type="text" placeholder="Your Name" required="" />
<textarea placeholder="Your Feedback" required=""></textarea>
<input type="text" placeholder="Your Name" required />
<textarea placeholder="Your Feedback" required></textarea>
<button type="submit">Submit</button>
</form>
</section>



<section class="about-container">
<div class="about-heading">
<h2>About Us</h2>
<h2 class="darkmodetext">About Us</h2>
</div>
<div class="about-text">
<p>
<p class="darkmodetext">
<strong>At Waste Management</strong>, we are passionate
about creating a sustainable future through effective
waste disposal solutions. Our goal is to not only reduce
environmental pollution but also
<strong>educate communities</strong> and empower
individuals with sustainable waste practices.
</p>
<p>
<p class="darkmodetext">
By leveraging our
<strong>state-of-the-art waste classification system</strong>
and encouraging community engagement, we aim to inspire
Expand All @@ -598,8 +599,8 @@ <h2>About Us</h2>
</div>
</section>
<section>
<div class="mission-container">
<h3>Our Mission</h3>
<div class="mission-container darkmodetext">
<h2 class="darkmodetext">Our Mission</h2>
<div class="mission-box">
<div class="mission-item">
<img src="./assets/recycling-bin_532768.png" alt="Reduce Waste" />
Expand Down Expand Up @@ -634,8 +635,8 @@ <h4>Build a Cleaner Future</h4>
</div>
</section>
<section>
<div class="values-container">
<h3>Our Core Values</h3>
<div class="values-container darkmodetext">
<h2 class="darkmodetext">Our Core Values</h2>
<div class="values-cards">
<div class="value-card">
<h4>Innovation</h4>
Expand Down Expand Up @@ -762,6 +763,7 @@ <h3>Our Commitment to Sustainability</h3>
</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="wQJs3fix9gu515zxNshBF" domain="www.chatbase.co" defer>
</script>
<script src="styles.js"></script>
</body>

</html>
7 changes: 0 additions & 7 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -565,12 +565,5 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('load', updateSlider);


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});



67 changes: 41 additions & 26 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,13 @@ nav .btn-nav {
}

.button {
background-color: #4caf50;
background-color: transparent;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.3s ease;
font-weight: 500;
font-size: 1rem;
}

.button a {
Expand Down Expand Up @@ -142,10 +144,10 @@ nav .btn-nav {

/* Upload Section */
.upload {
background-color: #ffffff;
padding: 2rem;
margin: 2rem 0;
text-align: center;
border: 2px solid gray;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Expand Down Expand Up @@ -198,8 +200,8 @@ nav .btn-nav {
.classification {
padding: 2rem;
text-align: center;
background-color: #f9f9f9;
margin-top: 2rem;
border: 2px solid gray;
border-top: 3px solid #4caf50;
}

Expand Down Expand Up @@ -238,8 +240,8 @@ nav .btn-nav {
section {
padding: 20px;
margin: 20px 0;
background-color: #f8f8f8;
border-radius: 8px;
border: 2px solid gray;
}

h2, h3, h4 {
Expand All @@ -254,7 +256,7 @@ h2, h3, h4 {

/* Disposal Information Section */
.disposal {
background-color: #e3f2fd;
border: 2px solid gray;
border-left: 5px solid #2196f3;
padding-left: 20px;
}
Expand Down Expand Up @@ -310,9 +312,6 @@ h2, h3, h4 {
}

/* Features Section */
.features {
background-color: #f1f1f1;
}
.features h2{
text-align: center;
font-size: 2.3rem;
Expand All @@ -335,8 +334,11 @@ h2, h3, h4 {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: scale(1.05);
}

blockquote {
font-style: italic;
color: #777;
Expand Down Expand Up @@ -401,9 +403,6 @@ blockquote {
}

/* Feedback Section */
.feedback {
background-color: #fafafa;
}

#feedback-form input,
#feedback-form textarea {
Expand All @@ -427,6 +426,7 @@ blockquote {
background-color: #1976d2;
}


/* About Us Section */
.about-container {
display: flex;
Expand All @@ -450,7 +450,9 @@ blockquote {
flex: 1;
padding: 15px;
}

.mission-container h3{
color: #333;
}
.mission-box {
display: flex;
flex-wrap: wrap;
Expand All @@ -464,18 +466,20 @@ blockquote {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.mission-item:hover {
transform: scale(1.05);
}

.mission-item img {
width: 50px;
margin-bottom: 10px;
}

/* Values Section */
.values-container {
background-color: #f8f8f8;
.values-container h3{
color: #333;
}

.values-cards {
display: flex;
flex-wrap: wrap;
Expand All @@ -488,8 +492,11 @@ blockquote {
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.value-card:hover{
transform: scale(1.05);
}

.value-card h4 {
margin-bottom: 10px;
}
Expand Down Expand Up @@ -589,14 +596,14 @@ blockquote {
/* FAQ Section */
.faqisection {
padding: 50px 0;
background-color: #f9f9f9;
color: #333;
}

.faqs {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
border: 0;
}

.faqs h2 {
Expand All @@ -622,7 +629,7 @@ blockquote {
/* Feedback Section */
.feedback {
padding: 50px 20px;
background-color: #eef4f7;
border: 2px solid gray;
color: #333;
text-align: center;
}
Expand Down Expand Up @@ -666,7 +673,6 @@ blockquote {
padding: 50px 20px;
justify-content: space-between;
align-items: center;
background-color: #f1f1f1;
}

.about-text {
Expand Down Expand Up @@ -695,11 +701,10 @@ blockquote {
/* Mission Section */
.mission-container {
padding: 50px 20px;
background-color: #f9f9f9;
text-align: center;
}

.mission-container h3 {
.mission-container h2 {
font-size: 32px;
margin-bottom: 30px;
}
Expand Down Expand Up @@ -738,10 +743,9 @@ blockquote {
/* Values Section */
.values-container {
padding: 50px 20px;
background-color: #eef4f7;
}

.values-container h3 {
.values-container h2 {
font-size: 32px;
text-align: center;
margin-bottom: 30px;
Expand Down Expand Up @@ -778,7 +782,8 @@ blockquote {
justify-content: center;
align-items: center;
padding: 50px 20px;
background-color: #f9f9f9;
border: 2px solid gray;
margin-bottom: 5rem;
}

.form_area {
Expand Down Expand Up @@ -938,3 +943,13 @@ blockquote {
margin: 0;
}

.dark-mode{
background-color: black;
}
.dark-mode2{
background-color: #2a2a2a;
color: white;
}
.dark-mode3{
color: #ffffff;
}
15 changes: 14 additions & 1 deletion styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,17 @@ function showForm(formNumber) {
button.classList.remove('button-active');
}
});
}
}

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const whitetext = document.querySelectorAll(".darkmodetext");

themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');

// Loop through each element with the .whitetext class and toggle .dark-mode3
whitetext.forEach(element => {
element.classList.toggle("dark-mode3");
});
});

0 comments on commit 1c8edc1

Please sign in to comment.