diff --git a/assets/contact-w.avif b/assets/contact-w.avif new file mode 100644 index 00000000..1257b75b Binary files /dev/null and b/assets/contact-w.avif differ diff --git a/assets/faq-w.jpg b/assets/faq-w.jpg new file mode 100644 index 00000000..e67779e7 Binary files /dev/null and b/assets/faq-w.jpg differ diff --git a/assets/feed-w.avif b/assets/feed-w.avif new file mode 100644 index 00000000..942621dd Binary files /dev/null and b/assets/feed-w.avif differ diff --git a/index.html b/index.html index 4143033b..cf61539c 100644 --- a/index.html +++ b/index.html @@ -1,626 +1,776 @@ - Waste Management - - - - - - - + + + + - - - - - -
-
-
- - - -

Waste Management

- - - -

Waste Management

- - - - -
-
🌓
- +
+ +
+
-
-

Efficient Waste Management

-

Join our mission for a cleaner, greener planet. We strive to minimize waste through effective - recycling, composting, and sustainable practices.

-

Together, we can reduce the environmental impact and create a more sustainable future for generations - to come. Let’s make the world a better place by reducing our carbon footprint and managing waste - efficiently.

- Discover Features -
-
- Waste Management Image -
+

Manage Your Waste Effectively

+

Join us in making a cleaner, greener planet.

+ Explore Features
-
-
-
-
- Upload Preview -
-
-

Upload Your Files

- -
-
- -
-
+
+
+

Upload Image

+ +
- -
-
-
-

Waste Classification

-

Your classification result will appear here.

-
-
-

Disposal Information

-

Disposal information will be displayed here.

-
-
-

Waste Categories

-
-
-
-
- Biodegradable Waste - Biodegradable Waste -
+
+

Classification

+

+
-
- +
+

Disposal Information

+

+

Our Features

-
-
- -
-

Real-time Monitoring

-
- Did you know that over 2 billion tons of waste are generated - globally every year, but only 16% is recycled? -
- -

Track, Reduce, and Make a Difference With real-time waste monitoring, you can be part of the solution by tracking - your waste habits, identifying areas for improvement, and contributing to a greener planet. - Take control of your impact – start monitoring your waste today and help reduce the overwhelming waste burden - on our environment. Every action counts.

- Let's be on right track -
-
-

Eco-Friendly Tips

-
- Do you know only 9% of plastic ever produced has been recycled? -
-

- Be Eco-savvy by embracing simple, comprehensive, and quick solutions from the comfort of your home. - Contribute in managing the overwhelming burden of waste generation. Get personalized tips to manage waste sustainably and - be the change you want to see in the world!. -

- I'm in! -
- -
-

Community Engagement

-

Join community efforts to promote effective waste management.

- Join Community -
- -
-

Our Commitment to Sustainability

-

At Waste Management, we are dedicated to building a greener future. Through our community recycling - programs and sustainability initiatives, we strive to reduce waste and protect the environment for - generations to come. Join us in our mission to create a cleaner, healthier planet.

-
- -
- - +
+

Real-time Monitoring

+

Track your waste management activities in real-time.

+
+
+

Eco-Friendly Tips

+
Do you know only 9% of plastic ever produced has been recycled?
+

Be Eco-savvy by embracing simple, comprehensive, and quick solutions from home.

+ I'm in! +
+
+

Community Engagement

+

Join community efforts to promote waste management.

-
+ + -
- -
+
+
+ +
+ FAQs Image +
+ + +

Frequently Asked Questions (FAQs)

- +
-

What is the difference between biodegradable and non-biodegradable waste?

-

Biodegradable waste refers to organic materials such as food scraps and garden waste that - decompose naturally over time. Non-biodegradable waste includes plastics, metals, and other - materials that do not decompose easily and require recycling or special disposal methods. -

+

What is the difference between biodegradable and non-biodegradable waste? + ▶ +

+

Biodegradable waste refers to organic materials such as food scraps and garden waste that decompose naturally. Non-biodegradable waste includes plastics and metals that require special disposal.

- +
-

How can I reduce household waste?

-

You can reduce waste by buying reusable products, composting organic waste, recycling - materials like plastic and paper, and avoiding single-use items. Participating in community - waste reduction programs is also helpful.

+

How can I reduce household waste? + ▶ +

+

You can reduce household waste by recycling, composting organic waste, and avoiding single-use plastics.

- +
-

What should I do with hazardous waste?

-

Hazardous waste, such as batteries, chemicals, and electronic waste, should be taken to - designated disposal sites or collection events. Do not dispose of them in regular household - trash as they can be harmful to the environment.

+

What items can be recycled at home? + ▶ +

+

Common recyclable items include paper, cardboard, glass, plastic bottles, and aluminum cans. Check with your local recycling center for more details.

- +
-

Can all plastics be recycled?

-

No, not all plastics are recyclable. Look for recycling symbols with numbers on plastic - products. Most recycling centers accept plastics marked with numbers 1 and 2, but it's - important to check with your local center for specific guidelines.

+

What is composting and how can I do it? + ▶ +

+

Composting is the process of turning organic waste into nutrient-rich soil. You can compost food scraps, leaves, and other biodegradable materials in a bin or pile in your backyard.

- +
-

How do I start composting at home?

-

To start composting, collect food scraps like fruit peels, vegetable leftovers, and coffee - grounds. Combine them with yard waste like leaves and grass clippings in a compost bin. Turn - the compost regularly to ensure proper aeration and decomposition.

+

Why is plastic waste harmful to the environment? + ▶ +

+

Plastic waste takes hundreds of years to decompose and can harm wildlife, pollute oceans, and contribute to climate change.

- +
-

Why is it important to sort waste?

-

Sorting waste ensures that recyclable materials like paper, glass, and plastics are properly - processed, reducing the amount of waste sent to landfills. Proper sorting helps reduce - pollution, conserve resources, and protect the environment.

-
-
- - - -
-
- -
-

About Us

-
- - -
-

At Waste Management, we are passionate about creating a sustainable - future through effective waste disposal solutions. Our goal is to not only reduce - environmental pollution but also educate communities and empower - individuals with sustainable waste practices.

-

By leveraging our state-of-the-art waste classification system and - encouraging community engagement, we aim to inspire everyone to adopt eco-friendly - habits. Together, we can make a significant impact in reducing waste, promoting - recycling, and preserving the environment for future generations.

-
- - -
- Waste Management team working towards sustainability -
- -
-

Biodegradable Waste

-

Includes food remains and garden waste. These can be composted to create manure and naturally - decompose over time.

+

How can I safely dispose of hazardous waste? + ▶ +

+

Hazardous waste, such as batteries, chemicals, and electronics, should be taken to specialized disposal centers. Do not throw them in regular trash.

+ + + + + + + -
-
-
- Non-Biodegradable Waste - Non-Biodegradable Waste -
-
-

Non-Biodegradable Waste

-

Items like old newspapers, broken glass, and plastics. These do not decompose and are major - pollutants, but can be recycled and reused.

-
+ + + + + + + + + + + + + + + + + + + + + + + + + + - +
+
+
+ Contact Us +
+
+

Contact Us

+

If you have any questions, concerns, or feedback, feel free to reach out to us using the form below. We would love to hear from you!

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + +

Stay Connected

- - + +
-
-

Our Commitment to Sustainability

-

At Waste Management, we are dedicated to building a greener future. Through our community recycling - programs and sustainability initiatives, we strive to reduce waste and protect the environment for - generations to come. Join us in our mission to create a cleaner, healthier planet.

- - - - - - - - - - - - - -
-

© 2024 Waste Management. All rights reserved.

-
-
-
-
-
-

Discover Our Features

-
-
-
-

Eco-Friendly Tips

-
- Did you know - only 9% of all plastic ever produced has been recycled? -
-

- Make a difference by embracing eco-friendly practices from home. Learn tips to help manage waste - efficiently and reduce your environmental impact. -

- Get Tips! -
- -
-
-

Real-time Monitoring

-

- Keep track of your waste management activities instantly, with up-to-the-minute updates. -

-
- -
-

Community Engagement

-

- Join community efforts to promote effective waste management. -

- Join Community -
-
-
-
-
-
-

Frequently Asked Questions (FAQs)

-
-

- What is the difference between biodegradable and - non-biodegradable waste? -

-

- Biodegradable waste refers to organic materials such as - food scraps and garden waste that decompose naturally over - time. Non-biodegradable waste includes plastics, metals, - and other materials that do not decompose easily and - require recycling or special disposal methods. -

-
-
-

How can I reduce household waste?

-

- You can reduce waste by buying reusable products, - composting organic waste, recycling materials like plastic - and paper, and avoiding single-use items. Participating in - community waste reduction programs is also helpful. -

-
-
-

What should I do with hazardous waste?

-

- Hazardous waste, such as batteries, chemicals, and - electronic waste, should be taken to designated disposal - sites or collection events. Do not dispose of them in - regular household trash as they can be harmful to the - environment. -

-
-
-

Can all plastics be recycled?

-

- No, not all plastics are recyclable. Look for recycling - symbols with numbers on plastic products. Most recycling - centers accept plastics marked with numbers 1 and 2, but - it's important to check with your local center for - specific guidelines. -

-
-
-

How do I start composting at home?

-

- To start composting, collect food scraps like fruit peels, - vegetable leftovers, and coffee grounds. Combine them with - yard waste like leaves and grass clippings in a compost - bin. Turn the compost regularly to ensure proper aeration - and decomposition. -

-
-
-

Why is it important to sort waste?

-

- Sorting waste ensures that recyclable materials like - paper, glass, and plastics are properly processed, - reducing the amount of waste sent to landfills. Proper - sorting helps reduce pollution, conserve resources, and - protect the environment. -

-
- -
- -
-
-
-

Your Feedback

-
- - - -
-
- - -
-
-

About Us

-
-
-

- At Waste Management, we are passionate - about creating a sustainable future through effective - waste disposal solutions. Our goal is to not only reduce - environmental pollution but also - educate communities and empower - individuals with sustainable waste practices. -

-

- By leveraging our - state-of-the-art waste classification system - and encouraging community engagement, we aim to inspire - everyone to adopt eco-friendly habits. Together, we can - make a significant impact in reducing waste, promoting - recycling, and preserving the environment for future - generations. -

-
-
- Waste Management team working towards sustainability -
-
-
-
-

Our Mission

-
-
- Reduce Waste -

Reduce Waste

-

- Minimize waste generation through innovative - technologies and education. -

-
-
- Promote Recycling -

Promote Recycling

-

- Encourage responsible disposal and recycling - practices in every community. -

-
-
- Empower Communities -

Empower Communities

-

- Equip individuals with knowledge and tools for - sustainable living. -

-
-
- Build a Cleaner Future -

Build a Cleaner Future

-

Protect the environment for future generations.

-
-
-
-
-
-
-

Our Core Values

-
-
-

Innovation

-

- We believe in continually evolving our waste - management practices with cutting-edge technologies to - improve efficiency and reduce our environmental - footprint. -

-
-
-

Sustainability

-

- Environmental sustainability is at the heart of - everything we do. We prioritize reducing waste, - reusing materials, and promoting recycling initiatives - globally. -

-
-
-

Community

-

- Collaboration is key. By working together with - communities, we aim to foster eco-consciousness and - sustainable living across the globe. -

-
-
-

Responsibility

-

- We are committed to acting with integrity and - accountability, ensuring that our practices positively - impact both the environment and society. -

-
-
-
-
- -
-
-

SIGN UP

-
-
- - -
-
- - -
-
- - -
-
- -

Have an Account? Login Here!

-
- -
-
- - - - - - \ No newline at end of file + diff --git a/script.js b/script.js index c42022ef..e542c2c0 100644 --- a/script.js +++ b/script.js @@ -1,576 +1,79 @@ -// Function For Smooth Scrolling -function smoothScrolling() { - const lenis = new Lenis(); - - lenis.on('scroll', (e) => { - console.log(e); - }); - - function raf(time) { - lenis.raf(time); - requestAnimationFrame(raf); - } - - requestAnimationFrame(raf); -} - -function validateForm(formType) { - const form = document.getElementById(formType === 'signup' ? 'form1' : 'form2'); - const errorMessage = document.getElementById('error-message'); - const fields = Array.from(form.querySelectorAll('input')); - - errorMessage.innerText = ''; - - if (fields.some(field => !field.value)) { - errorMessage.innerText = 'Please fill all the details.'; - return false; - } - - if (formType === 'signup') { - const [password1, password2] = fields.slice(-2).map(field => field.value); - const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/; - - if (!passwordRegex.test(password1)) { - errorMessage.innerText = 'Password must be at least 8 characters long, including uppercase, lowercase, and special characters.'; - return false; - } - - if (password1 !== password2) { - errorMessage.innerText = 'Passwords do not match.'; - return false; - } - } - - return true; -} - -document.addEventListener('DOMContentLoaded', () => { - const body = document.body; - const menuToggle = document.getElementById('menu-toggle'); - const navMenu = document.getElementById('nav-menu'); - const themeToggle = document.getElementById('theme-toggle'); - const progressBar = document.getElementById('progress-bar'); - const imageInput = document.getElementById('image-input'); - const uploadButton = document.getElementById('upload-button'); - const classificationResult = document.getElementById('classification-result'); - const disposalInformation = document.getElementById('disposal-information'); - const feedbackForm = document.getElementById('feedback-form'); - const newsletterForm = document.getElementById('newsletter-form'); - const signupForm = document.getElementById('form1'); - const loginForm = document.getElementById('form2'); - - // Menu toggle functionality - menuToggle?.addEventListener('click', () => navMenu?.classList.toggle('show')); - - // Theme toggle functionality - themeToggle?.addEventListener('click', () => { - body.classList.toggle('dark-mode'); - themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌓'; - }); - - // FAQ toggle functionality - document.querySelectorAll('.faq-item').forEach(item => { - const question = item.querySelector('h3'); - const answer = item.querySelector('p'); - if (question && answer) { - answer.style.display = 'none'; - question.addEventListener('click', () => { - answer.style.display = answer.style.display === 'block' ? 'none' : 'block'; - }); - } - }); - - // Progress bar functionality - if (progressBar) { - window.addEventListener('scroll', () => { - const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100; - progressBar.style.width = `${scrollPercentage}%`; - }); +const imageInput = document.getElementById('image-input'); +const uploadButton = document.getElementById('upload-button'); +const classificationResult = document.getElementById('classification-result'); +const disposalInformation = document.getElementById('disposal-information'); + +uploadButton.addEventListener('click', () => { + const image = imageInput.files[0]; + if (!image) { + alert("Please select an image to upload."); + return; } - // Image upload functionality - uploadButton?.addEventListener('click', () => { - const image = imageInput?.files[0]; - if (!image) return; - - const formData = new FormData(); - formData.append('image', image); - - fetch('/classify', { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - if (classificationResult) classificationResult.textContent = data.classification; - if (disposalInformation) disposalInformation.textContent = data.disposalInformation; - }) - .catch(console.error); - }); - - // Feedback form validation - feedbackForm?.addEventListener('submit', (event) => { - event.preventDefault(); - const [name, email, message] = ['input[type="text"]', 'input[type="email"]', 'textarea'] - .map(selector => feedbackForm.querySelector(selector)?.value.trim()); - - const nameValid = name?.length >= 2; - const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); - const messageValid = message?.length >= 10; - - if (nameValid && emailValid && messageValid) { - alert('Feedback submitted successfully!'); - feedbackForm.reset(); - } else { - if (!nameValid) feedbackForm.querySelector('input[type="text"]').setCustomValidity('Name must be at least 2 characters long.'); - if (!emailValid) feedbackForm.querySelector('input[type="email"]').setCustomValidity('Please enter a valid email address.'); - if (!messageValid) alert('Message must be at least 10 characters long.'); - feedbackForm.reportValidity(); - } - }); - - // Newsletter form validation - newsletterForm?.addEventListener('submit', (event) => { - event.preventDefault(); - const email = newsletterForm.querySelector('input[type="email"]')?.value.trim(); - const errorMessage = document.getElementById('newsletter-error-message'); - - if (errorMessage) errorMessage.textContent = ''; - - if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { - alert('Subscribed successfully!'); - newsletterForm.reset(); - } else if (errorMessage) { - errorMessage.textContent = 'Please enter a valid email address.'; - } - }); - - // Attach form validation to respective forms - signupForm?.addEventListener('submit', (event) => { - if (!validateForm('signup')) event.preventDefault(); - }); + const formData = new FormData(); + formData.append('image', image); + + fetch('/classify', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + classificationResult.textContent = data.classification; + disposalInformation.textContent = data.disposalInformation; + }) + .catch(error => console.error('Error:', error)); +}); - loginForm?.addEventListener('submit', (event) => { - if (!validateForm('login')) event.preventDefault(); +// FAQ toggle +const faqItems = document.querySelectorAll('.faq-item h3'); +faqItems.forEach(item => { + item.addEventListener('click', function() { + const parent = this.parentElement; + parent.classList.toggle('active'); }); - - smoothScrolling(); }); +// Feedback form validation +const feedbackForm = document.getElementById('feedback-form'); +feedbackForm.addEventListener('submit', (event) => { + event.preventDefault(); + const name = feedbackForm.querySelector('input[type="text"]').value.trim(); + const email = feedbackForm.querySelector('input[type="email"]').value.trim(); + const message = feedbackForm.querySelector('textarea').value.trim(); + const formErrorMessage = document.getElementById('form-error-message'); + formErrorMessage.textContent = ''; // Clear previous error messages -// feature/your-new-feature - if (!emailPattern.test(email)) { - newsletterErrorMessage.textContent = 'Please enter a valid email address.'; - } else { - // If valid, you can implement your form submission logic here - alert('Subscribed to newsletter successfully!'); - newsletterForm.reset(); // Reset the form after successful submission + if (name.length < 2) { + formErrorMessage.textContent = 'Name must be at least 2 characters long.'; + return; } -}); - - -/*FEATURES CARD SLIDER */ -let currentSlide = 0; - function moveSlider(direction) { - const sliderWrapper = document.querySelector('.slider-wrapper'); - const totalSlides = document.querySelectorAll('.feature-card').length; - currentSlide += direction; - - // Loop the slider - if (currentSlide >= totalSlides) { - currentSlide = 0; - } else if (currentSlide < 0) { - currentSlide = totalSlides - 1; - } - - // Move the slider - sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`; + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + formErrorMessage.textContent = 'Invalid email format.'; + return; } - const tipsSlider = document.querySelector(".slider-wrapper"); - const slides = document.querySelectorAll(".feature-card"); - const prevSlide = document.getElementById("prev"); - const nextSlide = document.getElementById("next"); - let currentIndex = 0; - - const updateSlider = () => { - const slideWidth = slides[0].clientWidth; - tipsSlider.style.transform = `translateX(-${ - currentIndex * slideWidth - }px)`; - }; - - tipsSlider.style.transition = "transform 0.3s ease-in-out"; - - nextSlide.addEventListener("click", () => { - if (currentIndex < slides.length - 1) { - currentIndex++; - } else { - currentIndex = 0; - } - updateSlider(); - }); - - prevSlide.addEventListener("click", () => { - if (currentIndex > 0) { - currentIndex--; - } else { - currentIndex = slides.length - 1; - } - updateSlider(); - }); - - window.addEventListener("resize", updateSlider); - - window.addEventListener("load", updateSlider); - - - - - -/* Scroll to Top Function */ -const scrollToTopBtn = document.getElementById("BacktoTop"); -window.onscroll = function() { - scrollFunction(); -}; - -function scrollFunction() { - if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { - scrollToTopBtn.style.visibility = 'visible'; - scrollToTopBtn.style.opacity = '1'; - } else { - scrollToTopBtn.style.visibility = 'hidden'; - scrollToTopBtn.style.opacity = '0'; + if (message.length < 10) { + formErrorMessage.textContent = 'Message must be at least 10 characters long.'; + return; } -} -scrollToTopBtn.addEventListener("click", function() { - // Smooth scroll back to top - window.scrollTo({ top: 0, behavior: 'smooth' }); + alert('Feedback submitted successfully!'); + feedbackForm.reset(); }); +// Newsletter form validation +const newsletterForm = document.getElementById('newsletter-form'); +newsletterForm.addEventListener('submit', (event) => { + event.preventDefault(); + const email = newsletterForm.querySelector('input[type="email"]').value.trim(); - - // Attach form validation to respective forms - const signupForm = document.getElementById('form1'); - if (signupForm) { - signupForm.addEventListener('submit', (event) => { - if (!validateSignup()) { - event.preventDefault(); // Prevent form submission - } - }); - -// Ecotips.html -document.addEventListener('DOMContentLoaded', () => { - - - lenis.on('scroll', (e) => { - console.log(e); - }); - - function raf(time) { - lenis.raf(time); - requestAnimationFrame(raf); - } - - requestAnimationFrame(raf); - } - smoothScrolling(); - function validateSignup() { - const fullName = document.querySelector('input[name="fullName"]').value; - const email = document.querySelector('input[name="email"]').value; - const password1 = document.querySelector('input[name="password1"]').value; - const password2 = document.querySelector('input[name="password2"]').value; - const errorMessage = document.getElementById('error-message'); - - // Clear previous error message - errorMessage.innerText = ''; - - // Check if fields are empty - if (!fullName || !email || !password1 || !password2) { - errorMessage.innerText = 'Please fill all the details.'; - return false; // Prevent form submission - } - - // Password validation: at least 8 characters, one uppercase, one lowercase, and one special character - const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/; - if (!passwordRegex.test(password1)) { - errorMessage.innerText = 'Password must be at least 8 characters long, including uppercase, lowercase, and special characters.'; - return false; // Prevent form submission - } - - // Check if passwords match - if (password1 !== password2) { - errorMessage.innerText = 'Passwords do not match.'; - return false; // Prevent form submission - } - - return true; // Allow form submission - } - - function validateLogin() { - const email = document.querySelector('input[name="email"]').value; - const password1 = document.querySelector('input[name="password1"]').value; - const errorMessage = document.getElementById('error-message'); - - // Clear previous error message - errorMessage.innerText = ''; - - // Check if fields are empty - if (!email || !password1) { - errorMessage.innerText = 'Please fill all the details.'; - return false; // Prevent form submission - } - - return true; // Allow form submission + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + document.getElementById('newsletter-error-message').textContent = 'Please enter a valid email address.'; + } else { + alert('Subscribed to newsletter successfully!'); + newsletterForm.reset(); } - - document.addEventListener('DOMContentLoaded', (event) => { - const menuToggle = document.getElementById('menu-toggle'); - const navMenu = document.getElementById('nav-menu'); - const themeToggle = document.getElementById('theme-toggle'); - const body = document.body; - - // Menu toggle functionality - if (menuToggle && navMenu) { - menuToggle.addEventListener('click', () => { - navMenu.classList.toggle('show'); - }); - } - - // Theme toggle functionality - if (themeToggle) { - themeToggle.addEventListener('click', () => { - body.classList.toggle('dark-mode'); - themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌓'; - }); - } - - // FAQ toggle functionality - const faqItems = document.querySelectorAll('.faq-item'); - faqItems.forEach(item => { - const question = item.querySelector('h3'); - const answer = item.querySelector('p'); - - if (question && answer) { - // Initially hide the answer - answer.style.display = 'none'; - - question.addEventListener('click', () => { - answer.style.display = answer.style.display === 'block' ? 'none' : 'block'; - }); - } - }); - - // Progress bar functionality - const progressBar = document.getElementById('progress-bar'); - if (progressBar) { - window.addEventListener('scroll', () => { - const windowHeight = window.innerHeight; - const documentHeight = document.documentElement.scrollHeight; - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100; - - progressBar.style.width = scrollPercentage + '%'; - }); - } - - // Image upload functionality - const imageInput = document.getElementById('image-input'); - const uploadButton = document.getElementById('upload-button'); - const classificationResult = document.getElementById('classification-result'); - const disposalInformation = document.getElementById('disposal-information'); - - if (uploadButton) { - uploadButton.addEventListener('click', () => { - const image = imageInput.files[0]; - const formData = new FormData(); - formData.append('image', image); - - fetch('/classify', { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - classificationResult.textContent = data.classification; - disposalInformation.textContent = data.disposalInformation; - }) - .catch(error => console.error(error)); - }); - } - - // Feedback form validation - const feedbackForm = document.getElementById('feedback-form'); - if (feedbackForm) { - const feedbackName = feedbackForm.querySelector('input[type="text"]'); - const feedbackEmail = feedbackForm.querySelector('input[type="email"]'); - const feedbackMessage = feedbackForm.querySelector('textarea'); - - feedbackForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent the form from submitting - - const name = feedbackName.value.trim(); - const email = feedbackEmail.value.trim(); - const message = feedbackMessage.value.trim(); - let valid = true; - - // Clear previous error messages - feedbackName.setCustomValidity(''); - feedbackEmail.setCustomValidity(''); - - // Name validation - if (name.length < 2) { - feedbackName.setCustomValidity('Name must be at least 2 characters long.'); - valid = false; - } - - // Email validation - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailPattern.test(email)) { - feedbackEmail.setCustomValidity('Please enter a valid email address.'); - valid = false; - } - - // Message validation - if (message.length < 10) { - alert('Message must be at least 10 characters long.'); - valid = false; - } - - if (valid) { - alert('Feedback submitted successfully!'); - feedbackForm.reset(); // Reset the form after successful submission - } else { - feedbackName.reportValidity(); - feedbackEmail.reportValidity(); - } - }); - } - - // Newsletter form validation - const newsletterForm = document.getElementById('newsletter-form'); - if (newsletterForm) { - const newsletterEmail = newsletterForm.querySelector('input[type="email"]'); - const newsletterErrorMessage = document.getElementById('newsletter-error-message'); - - newsletterForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent the form from submitting - - const email = newsletterEmail.value.trim(); - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - - // Clear previous error message - newsletterErrorMessage.textContent = ''; - - if (!emailPattern.test(email)) { - newsletterErrorMessage.textContent = 'Please enter a valid email address.'; - } else { - alert('Subscribed successfully!'); - newsletterForm.reset(); - } - }); - } - - // Attach form validation to respective forms - const signupForm = document.getElementById('form1'); - if (signupForm) { - signupForm.addEventListener('submit', (event) => { - if (!validateSignup()) { - event.preventDefault(); // Prevent form submission - } - }); - } - - const loginForm = document.getElementById('form2'); - if (loginForm) { - loginForm.addEventListener('submit', (event) => { - if (!validateLogin()) { - event.preventDefault(); // Prevent form submission - } - }); - } - }); - - - - //Ecotips.html - - const tipsSlider = document.querySelector('.eco-tips-content'); - const slides = document.querySelectorAll('.eco-tip'); - const prevSlide = document.getElementById('prev-slide'); - const nextSlide = document.getElementById('next-slide'); - let currentIndex = 0; - - - const updateSlider = () => { - const slideWidth = slides[0].clientWidth; - tipsSlider.style.transform = `translateX(-${currentIndex * slideWidth}px)`; - }; - - tipsSlider.style.transition = 'transform 0.3s ease-in-out'; - - nextSlide?.addEventListener('click', () => { - currentIndex = (currentIndex + 1) % slides.length; - updateSlider(); - }); - - prevSlide?.addEventListener('click', () => { - currentIndex = (currentIndex - 1 + slides.length) % slides.length; - updateSlider(); - }); - - window.addEventListener('resize', updateSlider); - window.addEventListener('load', updateSlider); }); - - - // Function to update the slider's position - const updateSlider = () => { - const slideWidth = slides[0].clientWidth; // Calculate the width of a single slide - tipsSlider.style.transform = `translateX(-${currentIndex * slideWidth}px)`; - }; - - // Set the transition for smooth sliding - tipsSlider.style.transition = 'transform 0.3s ease-in-out'; - - // Handle next slide button click - nextSlide.addEventListener('click', () => { - if (currentIndex < slides.length - 1) { - currentIndex++; - } else { - currentIndex = 0; // Loop back to the first slide - } - updateSlider(); - }); - - // Handle previous slide button click - prevSlide.addEventListener('click', () => { - if (currentIndex > 0) { - currentIndex--; - } else { - currentIndex = slides.length - 1; // Loop back to the last slide - } - updateSlider(); - }); - - // Update slider position on window resize to ensure it adapts to the new slide width - window.addEventListener('resize', () => { - updateSlider(); - }); - - // Make sure the slider position is correct when the page loads - window.addEventListener('load', updateSlider); - - - const themeToggle = document.getElementById('theme-toggle'); - const body = document.body; - - themeToggle.addEventListener('click', () => { - body.classList.toggle('dark-mode'); - }); - - - diff --git a/styles.css b/styles.css index b77252b5..3e9b3cc2 100644 --- a/styles.css +++ b/styles.css @@ -1,2574 +1,249 @@ -/* Reset and Base Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - +/* General Styles */ body { font-family: 'Poppins', sans-serif; - background-color: #e0f7fa; - color: #333; - line-height: 1.6; - transition: background-color 0.3s, color 0.3s; -} - -a { - text-decoration: none; - color: inherit; -} - -/* Progress Bar */ -#progress-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 9px; - z-index: 99990; -} - -#progress-bar { - height: 9px; - width: 0; - background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%); - box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); - transition: width 0.09s ease-in-out; - border-radius: 10px; + margin: 0; + padding: 0; + background-color: #f4f4f4; } -/* Header and Navigation */ -header { - background-color: #00796b; - color: white; - padding: 15px; - position: sticky; - top: 0; - z-index: 1000; +/* Navbar Styles */ +.navbar-container { display: flex; justify-content: space-between; align-items: center; + padding: 10px 20px; + background-color: #2a9d8f; } -header h1 { - font-size: 1.5rem; - margin: 0; -} - -nav ul { - list-style-type: none; +.logo { display: flex; + align-items: center; } -nav ul li { - margin-left: 20px; -} - -nav ul li a { - color: white; - transition: color 0.3s; +.logo img { + width: 40px; + margin-right: 10px; } -nav ul li a:hover { - color: #e0f7fa; - background-color: rgba(255, 255, 255, 0.2); - border-radius: 7px; +.nav-links { + display: flex; + list-style: none; } -.nav-controls { - display: flex; - align-items: center; +.nav-links li { + margin-left: 20px; } -#theme-toggle, #menu-toggle { - background: none; - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - margin-left: 15px; +.nav-links a { + text-decoration: none; + color: #fff; + font-weight: 500; + transition: color 0.3s ease; } -#menu-toggle { - display: none; +.nav-links a:hover { + color: #e9c46a; } /* Hero Section */ .hero { - width: 100vw; - height: 90vh; - - color: white; - text-align: center; - padding: 80px 20px; -} - -.hero h2 { - font-size: 2.5rem; - margin-bottom: 20px; -} - -.hero p { - font-size: 1.2rem; - margin-bottom: 30px; -} - -.hero-btn { - display: inline-block; - background-color: #26a69a; - color: white; - padding: 12px 24px; - border-radius: 25px; - font-size: 1.1rem; - transition: background-color 0.3s; -} - -.hero-btn:hover { - background-color: #004d40; -} - -@media (max-width: 768px) { - .hero h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - margin-top: 100px; - } -} - -nav ul { - list-style-type: none; - padding: 0; - margin: 0; + background: url('your-hero-image.jpg') no-repeat center center/cover; + height: 60vh; display: flex; + align-items: center; justify-content: center; + text-align: center; } -nav ul li { - margin: 0 15px; +.hero-content h2 { + font-size: 2.5rem; + color: #264653; } -nav ul li a { - text-decoration: none; - color: #c8e6c9; +.hero-content p { + color: #264653; + margin-bottom: 20px; } .hero-btn { + background-color: #264653; + color: #fff; padding: 10px 20px; - font-size: 1rem; -} - - -@media (max-width: 480px) { - .hero { - padding: 60px 15px; - } - - .hero h2 { - font-size: 1.8rem; - } - - .hero p { - font-size: 0.9rem; - } - - .hero-btn { - padding: 8px 18px; - font-size: 0.9rem; - } -} - -main { - padding: 20px; + text-decoration: none; + border-radius: 5px; } -.upload, -.classification, -.disposal, -.feedback { - margin-bottom: 30px; +/* Section Styles */ +section { + padding: 60px 20px; + text-align: center; } -/* Styling for the upload section */ -/* Upload Section */ -.upload { - background-color: #f5f9ff; +.feature-card { + border: 1px solid #ccc; padding: 20px; + margin: 20px; border-radius: 10px; - text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 400px; - margin: 0 auto 30px; + background-color: #fff; } -.custom-file-upload { - display: inline-block; - background-color: #44bf49; - color: white; - padding: 10px 20px; +.cta-button { + background-color: #2a9d8f; + color: #fff; + padding: 10px 15px; + text-decoration: none; border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - margin-top: 10px; } -.custom-file-upload:hover { - background-color: #3a873d; +.cta-button:hover { + background-color: #264653; } -#upload-button { - background-color: #007bff; - color: white; - padding: 10px 20px; +/* MUI Button */ +.mui-btn { + background-color: #2a9d8f; + color: #fff; + padding: 10px 15px; border: none; border-radius: 5px; - font-size: 16px; cursor: pointer; - transition: background-color 0.3s; - margin-top: 10px; -} - -#upload-button:hover { - background-color: #0056b3; } -.classification-info { - max-width: 1200px; - margin: 0 auto; - padding: 20px; +.mui-btn:hover { + background-color: #264653; } -.classification-info h2 { +/* Footer Styles */ +footer { + background-color: #2a9d8f; + color: #fff; text-align: center; - margin-bottom: 20px; - color: #333; -} - -.features { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 5px; -} - -/* Card Section */ - -.card-container { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 20px; -} - -.card { - position: relative; - width: 400px; - height: 300px; - perspective: 1000px; -} - -.card-inner { - position: relative; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transition: transform 0.6s; -} - -.card:hover .card-inner { - transform: rotateY(180deg); -} - -.card-front, -.card-back { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; - border: 2px solid #ddd; - border-radius: 10px; - background-color: #99e4ab; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - display: flex; - align-items: center; - justify-content: center; -} - -.card-front { - color: #333; - font-size: 30px; -} - -.card-back { - transform: rotateY(180deg); - padding: 10px; - color: #444; - display: flex; /* Add this */ - flex-direction: column; /* Add this */ - align-items: center; /* Center horizontally */ - justify-content: center; /* Center vertically */ - text-align: center; /* Center text */ -} - -.card-back h3 { - margin: 10px 0; + padding: 20px; } -.card-back p { - text-align: justify; +footer a { + color: #fff; + text-decoration: none; + margin: 0 10px; } -/* FAQs Section */ -.faqs { - margin-bottom: 30px; +footer a:hover { + text-decoration: underline; } -.faqs h2 { - font-size: 2rem; - text-align: center; - font-family: 'Poppins', sans-serif; - color: black; -} +/* FAQ Section */ .faq-item { - background-color: #a5d6a7; - margin-bottom: 10px; - border-radius: 5px; - overflow: hidden; + border-bottom: 1px solid #ccc; + padding: 15px 0; + cursor: pointer; + transition: background-color 0.3s; } .faq-item h3 { - padding: 15px; - cursor: pointer; margin: 0; + font-size: 1.2em; + color: #2a9d8f; } .faq-item p { - padding: 15px; - background-color: white; - border: 1px solid #a5d6a7; display: none; + margin-top: 10px; + color: #555; } -/* Mission */ -.mission-container { - max-width: 1200px; - margin: 0 auto; - padding: 50px 20px; - text-align: center; -} - -.mission-container h3 { - font-size: 2.5rem; - color: #333; - margin-bottom: 40px; - font-family: 'Poppins', sans-serif; -} - -/* Mission Box (Container for Items) */ -.mission-box { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} - -/* Individual Mission Items (Card Style) */ -.mission-item { - background-color: #fff; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; - text-align: left; -} - -/* Hover Effect for Mission Items */ -.mission-item:hover { - transform: translateY(-10px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); -} - -.mission-item h4 { - font-size: 1.5rem; - color: #3b82f6; - margin-bottom: 10px; - font-family: 'Poppins', sans-serif; -} - -.mission-item p { - font-size: 1rem; - color: black; - line-height: 1.6; +.faq-item.active p { + display: block; } -/* Responsive */ -@media (max-width: 768px) { - .mission-box { - grid-template-columns: 1fr; - } +.faq-item:hover { + background-color: #f9f9f9; } - -/* Sign Up Section */ -.signup { - background-color: #f9f9f9; +/* Feedback Form */ +#feedback-form { + max-width: 600px; + margin: 0 auto; padding: 20px; + background-color: #fff; + border: 1px solid #e0e0e0; border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - max-width: 400px; - margin: 0 auto 30px; } -.signup form { - display: flex; - flex-direction: column; +.form-group { + margin-bottom: 15px; } -.signup input { - margin: 10px 0; +.mui-input { + width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; + font-size: 1em; } -.signup button { - background-color: #007b5f; - color: white; - padding: 10px; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s; -} - -.signup button:hover { - background-color: #005f46; -} - -/*About Us */ -.about-us { - max-width: 800px; /* Limit the width */ - margin: 0 auto; /* Center the section */ - padding: 20px; - text-align: center; +.mui-input:focus { + border-color: #2a9d8f; + outline: none; } -/* About Us Heading */ -.about-us h2 { - font-size: 2rem; - margin-bottom: 20px; - color: #333; +.mui-btn { + padding: 10px 20px; + background-color: #2a9d8f; + color: #fff; + border: none; + cursor: pointer; + border-radius: 4px; } -/* About Us Text */ -.about-us p { - font-size: 1.2rem; /* Increased font size */ - line-height: 1.6; - color: #555; - margin-bottom: 20px; +.mui-btn:hover { + background-color: #219f89; } -/* About Us Image */ -.about-image img { - width: 100%; /* Responsive image */ - height: auto; - margin-top: 20px; - border-radius: 8px; /* Optional: Rounded corners */ +.form-error { + color: red; + margin-top: 10px; } -.values-container { - max-width: 1200px; +/* Feedback Form */ +#feedback-form { + max-width: 500px; margin: 0 auto; - padding: 50px 20px; - text-align: center; -} - -/* Section Heading */ -.values-container h3 { - font-size: 2.5rem; - color: #333; - margin-bottom: 40px; - font-family: 'Poppins', sans-serif; } -/* Values Cards Container */ -.values-cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; +.mui-input { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; } -/* Card View Style for Individual Value Cards */ -.value-card { - background-color: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; - text-align: left; +.mui-btn { + padding: 10px 20px; + background-color: #00796b; + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; } -/* Hover effect for cards */ -.value-card:hover { - transform: translateY(-10px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +.mui-btn:hover { + background-color: #004d40; } -.value-card h4 { - font-size: 1.5rem; - color: #3b82f6; +.form-error { + color: red; margin-bottom: 10px; - font-family: 'Poppins', sans-serif; -} - -.value-card p { - font-size: 1rem; - color: #666; - line-height: 1.6; -} -/* feature section */ - -/* General styling for the section */ -.features { - padding: 60px 20px; - background-color: #f9f9f9; - text-align: center; -} - -.features h2 { - font-size: 36px; - margin-bottom: 40px; - color: #333; -} - -/* Container for feature cards */ -.features-container { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; /* Adds space between each card */ -} -.feature-card{ - background-color: #28a745; -} -/* Styling for each feature card */ -.feature-card, .feature-card1 { - background-color: #f4f4f4; /* Background color for the cards */ - padding: 20px; - border-radius: 8px; - width: 80%; /* Make the cards take up 80% of the container width */ - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adding shadow for card effect */ - text-align: center; -} -.feature-card:hover, .feature-card1:hover { - transform: translateY(-5px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } -/* Styling for icons inside feature cards */ -.feature-card .icon, .feature-card1 .icon { - font-size: 50px; - color: #4CAF50; - margin-bottom: 20px; - text-align: center; +/* FAQ Toggle */ +.faq-item.active p { + display: block; } - -.feature-card .icon i, .feature-card1 .icon i { - font-size: inherit; -} - -/* Heading for each card */ -.feature-card h2, .feature-card1 h3 { - font-size: 24px; - color: #45a049; - margin-bottom: 10px; -} - -/* Paragraph styling */ -.feature-card p, .feature-card1 p { - font-size: 16px; - color: black; - line-height: 1.6; -} - -/* Blockquote styling */ -.feature-card blockquote { - font-size: 16px; - color: #555; - background-color: #f0f8e8; - padding: 10px; - border-left: 4px solid #007bff; - margin-bottom: 15px; -} - -#fact-highlight { - font-weight: bold; - color: red; -} - -/* Call-to-action button */ -.cta-button { - display: inline-block; - padding: 10px 20px; - background-color: #0056b3; - color: #fff; - text-decoration: none; - border-radius: 5px; - margin-top: 15px; -} - -.cta-button:hover { - background-color: #45a049; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .features-container { - flex-direction: column; - align-items: center; - } - - .feature-card, .feature-card1 { - width: 100%; - max-width: 100%; /* Full-width for smaller screens */ - } - - .features h2 { - font-size: 28px; - } - - .feature-card h2, .feature-card1 h3 { - font-size: 20px; - } - - .cta-button { - font-size: 14px; - padding: 8px 16px; - } -} - -@media (min-width: 769px) and (max-width: 1024px) { - .feature-card, .feature-card1 { - max-width: 45%; /* Slightly narrower for medium screens */ - } -} - - -body.dark-mode { - background-color: #1f1f1f; - color: #ffffff; /* Default text color */ -} - -/* Header styling */ -.dark-mode header { - background-color: #00796b; -} - -/* Feature cards */ -.dark-mode .feature-card, -.dark-mode .feature-card1 { - border-color: #fff; /* Card border color */ -} - -/* Feedback and signup sections */ -.dark-mode .feedback, -.dark-mode .signup { - background-color: #fff; /* Feedback and signup background */ -} - -/* Footer styling */ -.dark-mode #footer { - background-color: #1c1c1c; /* Footer background color */ -} - -/* Headings */ -.dark-mode h1 { - color: #fff; /* H1 color */ -} -.dark-mode .feedback h2{ - color: #00796b; -} -.dark-mode h2{ - color: #fff; /* H2 color */ -} -.dark-mode .features h2{ - color: #28a745; -} - -.dark-mode h3 { - color: #fff; /* H3 color */ -} -.dark-mode .feature-card1 h3{ - color:#004d40; -} - -.dark-mode h4 { - color: #3b82f6; /* H4 color */ -} -.dark-mode .signup h2{ - color:#007b5f; -} -.dark-mode h5 { - color: #66ff66; /* H5 color */ -} - -.dark-mode h6 { - color: #cccccc; /* H6 color */ -} - -/* Paragraphs */ -.dark-mode p { - color: black; -} -.dark-mode .about-us p{ - color: white; -} - -/* Additional element styles for dark mode */ -.dark-mode a { - color: #fff; /* Link color */ -} - -.dark-mode .hero { - background-color: white; /* Hero section background */ -} - -.dark-mode .mission-item h4 { - color: #00bcd4; /* Mission item headings */ -} -.dark-mode .mission-item p{ - color: black; -} -.dark-mode .community-message p{ - color: #fff; -} -.dark-mode .upload-text h2{ - color:black; -} -.dark-mode .hero-text h3{ - color: #004d40; -} - -/* Footer */ -#footer { - background-color: #00796b; - color: white; - text-align: center; - padding: 20px; -} - -#newsletter-form { - display: flex; - justify-content: center; - gap: 10px; - margin: 20px 0; -} - -#newsletter-form input { - padding: 10px; - border: 1px solid #e0f7fa; - border-radius: 5px; -} - -#newsletter-form button { - background-color: #26a69a; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s, transform 0.2s; -} - -#newsletter-form button:hover { - background-color: #004d40; - transform: scale(1.05); -} - -.social-media { - margin: 20px 0; -} - -.social-media a { - color: white; - margin: 0 10px; -} -/* Responsive Design */ -@media (max-width: 768px) { - header { - flex-wrap: wrap; - } - - nav { - order: 3; - width: 100%; - margin-top: 15px; - } - - nav ul { - flex-direction: column; - display: none; - } - - nav ul.show { - display: flex; - } - - nav ul li { - margin: 10px 0; - } - - #menu-toggle { - display: block; - } - - .hero h2 { - font-size: 2rem; - } - - .feature-card, - .feature-card1 { - width: 100%; - } - - .card { - width: 100%; - } - - - /* Slider container */ - .feature-slider { - position: relative; - overflow: hidden; - max-width: 1000px; - margin: 0 auto; -} - -/* Feature Cards Wrapper */ -.slider-wrapper { - display: flex; - transition: transform 0.5s ease; - width: 300%; -} - -/* Individual Feature Card */ -.feature-card { - flex: 1 0 100%; - padding: 2rem; - text-align: center; - background-color: #EDF6F9; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - border-radius: 8px; - margin: 2rem; - transition: background-color 0.3s ease; -} - -/* Feature card specific styles */ -.feature-card h3 { - font-size: 2rem; - margin-bottom: 1rem; - color: #006D77; -} - -.feature-card p, blockquote { - font-size: 1.1rem; - color: #555; - line-height: 1.6; -} - -blockquote { - background-color: #C8E6C9; - padding: 1rem; - border-left: 4px solid #43A047; - border-radius: 5px; - margin: 1.5rem 0; -} - -#fact-highlight { - font-weight: bold; - color: #E53935; -} - -.highlight { - color: #2e7d32; - font-weight: bold; -} - -/* Call-to-action button */ -.cta-button { - display: inline-block; - padding: 10px 20px; - background-color: #4CAF50; - color: white; - text-decoration: none; - border-radius: 5px; - font-size: 1.1rem; - transition: background-color 0.3s ease; -} - -.cta-button:hover { - background-image: linear-gradient(to right, #006D77, #EDF6F9); -} - -/* Slider navigation buttons */ -.slider-btn { - position: absolute; - top: 50%; - transform: translateY(-50%); - background-color: rgba(0, 0, 0, 0.5); - color: white; - border: none; - padding: 1rem; - cursor: pointer; - z-index: 10; - font-size: 1.5rem; -} - -.slider-btn.left { - left: 10px; -} - -.slider-btn.right { - right: 10px; -} - -/* Responsive design */ -@media (max-width: 768px) { - .feature-card { - padding: 1rem; - margin: 1rem; - } - - .cta-button { - padding: 8px 16px; - font-size: 1rem; - } - - h3 { - font-size: 1.5rem; - } -} - - /*MISSION SECTION*/ - .mission-box { - grid-template-columns: 1fr; - } - - #newsletter-form { - flex-direction: column; - } - - #newsletter-form input, - #newsletter-form button { - width: 100%; - } -} - -@media (max-width: 480px) { - .hero h2 { - font-size: 1.5rem; - } - - .custom-file-upload, - #upload-button { - width: 100%; - } -} - - -/* ecotips.html */ -/* Hero Section */ -.hero-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - background-color: #f5f5f5; /* Light grey background */ - padding: 40px 20px; - width: 100%; - box-sizing: border-box; -} - -.hero-text { - font-size: 2.5em; - color: #2c3e50; /* Dark grey text */ - font-weight: bold; - margin-bottom: 20px; -} - -.hero-image { - max-width: 100%; - height: auto; /* Responsive image with full width */ - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ -} - -/* Eco Tips Slider */ -/* .eco-tips-slider { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px; - margin: 40px 0; - background-color: #f4f4f4; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; -} */ -/* Header Styling */ -.eco-tips-header{ - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; -} -.eco-tips-header h3 { - color: #388e3c; - font-size: 28px; - margin-bottom: 10px; - text-align: center; -} - -.eco-tips-header p { - color: #555; - font-size: 16px; - line-height: 1.6; - margin-bottom: 10px; - text-align: justify; -} - -.eco-tips-header p span { - font-weight: bold; - color: #2e7d32; -} - -.eco-tips-header em { - display: block; - margin-top: 15px; - font-style: italic; - font-size: 14px; - color: #9e9e9e; - text-align: center; -} - -/* Hover effect for entire container */ -#eco-tips-container:hover { - border-color: #4caf50; - box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); -} - -/* Media Queries for Responsiveness */ -@media (max-width: 600px) { - #eco-tips-container { - padding: 15px; - } - - .eco-tips-header h3 { - font-size: 24px; - } - - .eco-tips-header p { - font-size: 14px; - } -} - -.eco-tips-container { - max-width: 1200px; - margin: 40px auto; - padding: 0 20px; -} - -.eco-tips-slider { - display: flex; - justify-content: space-between; - align-items: center; - background-color: #f4f4f4; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; - position: relative; -} - -.slider-control { - background-color: #27ae60; - color: white; - border: none; - width: 40px; - height: 40px; - font-size: 1.2em; - cursor: pointer; - transition: background-color 0.3s ease; - z-index: 2; - position: absolute; - top: 50%; - transform: translateY(-50%); - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; -} - -.slider-control:hover { - background-color: #1e8449; -} - -#prev-slide { - left: 10px; -} - -#next-slide { - right: 10px; -} - -.eco-tips-content { - display: flex; - overflow-x: hidden; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - width: 100%; -} - -.eco-tip { - flex: 0 0 100%; - max-width: 100%; - scroll-snap-align: start; - padding: 40px; - background-color: white; - border-radius: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - text-align: center; -} - -.eco-tip h3 { - color: #27ae60; - font-size: 1.5em; - margin-bottom: 10px; -} - -.eco-tip p { - font-size: 1em; - margin-bottom: 15px; - line-height: 1.6; -} - -.eco-tip img, -.eco-tip video { - max-width: 100%; - height: auto; - border-radius: 8px; - object-fit: cover; - max-height: 300px; - width: 100%; -} - -@media (min-width: 768px) { - .eco-tip { - flex: 0 0 50%; - max-width: 50%; - } -} - -@media (min-width: 1024px) { - .eco-tip { - flex: 0 0 33.333%; - max-width: 33.333%; - } -} - - - -#BacktoTop { - display: block; - /* Ensure the button is part of the layout */ - position: fixed; - bottom: 20px; - right: 20px; - width: 55px; - height: 55px; - background-color: #004d40; - border-radius: 50%; - border: none; - cursor: pointer; - text-align: center; - line-height: 50px; - font-size: 24px; - z-index: 1000; - visibility: hidden; - opacity: 0; - transition: opacity 1.5s, visibility 1.5s, box-shadow 0.3s ease; - box-shadow: 0 0 0 2px #FFF, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2); - /* Adjusted outer rings */ - overflow: hidden; -} - -.circle1 { - display: flex; - align-items: center; - justify-content: center; -} - -#BacktoTop:hover { - background-color: #008c85; - /* Darker shade on hover */ - transform: scale(1.1); - /* Slight zoom effect on hover */ -} - -#BacktoTop svg { - fill: #b4a933; - transition: fill 0.3s ease-in-out; -} - -#BacktoTop:hover svg { - fill: #ffd700; -} - - - -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -.toggle-button { - background-color: #26a69a; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dark-mode header { - background-color: #1f1f1f; - /* Darker header */ -} - -.dark-mode .hero { - background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), url('https://images.unsplash.com/photo-1628638428099-48fc6fdb98c2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat; -} - -.dark-mode .feature-card { - background-color: #00796b; - /* Card color in dark mode */ -} - -.dark-mode .feedback { - background-color: #1f1f1f; - /* Feedback section background */ -} - -.dark-mode .feedback button { - background-color: #1c1c1c; - /* Dark mode button color (matches dark header) */ - color: #ffffff; - /* Light text color for contrast */ -} - -#newsletter-form input:focus { - outline: none; -} - -.moon-icon { - font-size: 30px; - /* Adjust size of the moon icon */ - margin-right: 8px; - /* Match the header color */ - color: white; - /* Set the icon color to white for contrast */ - border-radius: 50%; - /* Optional: add rounded corners */ - padding: 5px; - /* Optional: add some padding */ -} - -body.dark-mode { - background-color: #1f1f1f; - /* Consistent dark background */ - color: white; - /* Light text color */ -} - -#dark-mode-toggle { - background-color: #00796b; - /* Match the navbar color */ - color: white; - /* White text for contrast */ - - border: none; - - -@media (max-width: 767px) { - .slider-control { - width: 15px; - height: 25px; - font-size: 0.8em; - } - - #prev-slide { - left: 2px; - width: 25px; - height: 30px; - } - - #next-slide { - right: 5px; - width: 25px; - height: 30px; - } - - .eco-tip { - padding: 20px 40px; - } - .eco-tip h3 { - font-size: 1.2em; - } - - .eco-tip p { - font-size: 0.9em; - } -} -/* Eco Blogs Section */ -.eco-blogs { - padding: 40px 20px; - background-color: #f9f9f9; -} - -.blogs-section-title { - text-align: center; - color: #2c3e50; - font-size: 2.5em; - margin-bottom: 30px; - font-weight: bold; -} - -.eco-blogs-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} - -.eco-blogs-card { - background-color: white; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: transform 0.3s ease; -} - -.eco-blogs-card:hover { - transform: translateY(-10px); -} - -.card-header { - height: 200px; - background-size: cover; - background-position: center; -} - -.card-content { - padding: 20px; - text-align: center; -} - -.card-content h4 { - font-size: 1.5em; - color: #27ae60; - margin-bottom: 15px; -} - -.card-content p { - font-size: 1em; - color: #2c3e50; - margin-bottom: 20px; -} - -.read-more { - text-decoration: none; - color: white; - background-color: #27ae60; - padding: 10px 20px; - border-radius: 5px; - transition: background-color 0.3s ease; -} - -.read-more:hover { - background-color: #1e8449; -} - -/* Responsive Design */ - -/* Medium Screens (Tablets) */ -@media (max-width: 768px) { - .slider-control { - font-size: 1.2em; - } - - .eco-tip { - min-width: 200px; - max-width: 200px; - } - - .eco-blogs-container { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - } - - .card-header { - height: 150px; - } -} - -/* Small Screens (Mobile) */ -@media (max-width: 480px) { - .eco-tips-slider { - flex-direction: column; - padding: 10px; - } - - .eco-tips-content { - margin: 0; - } - - .slider-control { - margin-bottom: 15px; - width: 100%; - text-align: center; - } - - .eco-tip { - min-width: 100%; - max-width: 100%; - margin-bottom: 15px; - } - - .blogs-section-title { - font-size: 2em; - } - - .eco-blogs-container { - grid-template-columns: 1fr; - } - - .card-content h4 { - font-size: 1.2em; - } - - .card-content p { - font-size: 0.9em; - } - - .read-more { - font-size: 0.9em; - } -} - -.eco-tips-container { - background-color: #e9f7ef; /* Light green background */ - padding: 30px; - margin: 40px 0; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Box shadow */ - max-width: 1200px; - margin-left: auto; - margin-right: auto; -} - -.eco-tips-header { - font-size: 2em; - color: #27ae60; /* Green color for header */ - font-weight: bold; - text-align: center; - margin-bottom: 20px; -} - -.eco-tips { - list-style: none; - padding: 0; -} - -.eco-tips li { - background-color: white; - padding: 15px; - margin-bottom: 10px; - border-left: 4px solid #27ae60; /* Green border on the left */ - border-radius: 6px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Light shadow */ - font-size: 1.2em; -} - - -/* Reset and Base Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Poppins', sans-serif; - background-color: #e0f7fa; - color: #333; - line-height: 1.6; - transition: background-color 0.3s, color 0.3s; -} - -a { - text-decoration: none; - color: inherit; -} - -/* Progress Bar */ -#progress-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 9px; - z-index: 99990; -} - -#progress-bar { - height: 9px; - width: 0; - background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%); - box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); - transition: width 0.09s ease-in-out; - border-radius: 10px; -} - -/* Header and Navigation */ -header { - background-color: #00796b; - color: white; - padding: 15px; - position: sticky; - top: 0; - z-index: 1000; - display: flex; - justify-content: space-between; - align-items: center; -} - -header h1 { - font-size: 1.5rem; - margin: 0; -} - -nav ul { - list-style-type: none; - display: flex; -} - -nav ul li { - margin-left: 20px; -} - -nav ul li a { - color: white; - transition: color 0.3s; -} - -nav ul li a:hover { - color: #e0f7fa; - background-color: rgba(255, 255, 255, 0.2); - border-radius: 7px; -} - -.nav-controls { - display: flex; - align-items: center; -} - -#theme-toggle, #menu-toggle { - background: none; - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - margin-left: 15px; -} - -#menu-toggle { - display: none; -} - -/* CSS for transparent navbar buttons */ -.btn-nav { - display: flex; - gap: 10px; -} - -.button { - background-color: transparent; - padding: 10px 20px; - border: none; /* No border */ - font-family: 'Poppins', sans-serif; /* Modern font */ - font-size: 16px; - font-weight: bold; /* Bold font */ - text-transform: uppercase; - cursor: pointer; - transition: all 0.3s ease; /* Smooth transition */ -} - -.button a { - text-decoration: none; - color: #fff; /* White text color by default */ - font-weight: bold; - transition: color 0.3s ease; /* Smooth transition for color */ -} - -.button:hover { - transform: scale(1.1); /* Scale the button slightly on hover */ -} - -.button a:hover { - color: #adff2f; /* Light yellow-green text color on hover */ -} - -/* General styling */ -.hero { - - - color: white; - text-align: center; - padding: 80px 20px; -} -.hero h2 { - font-size: 2.5rem; - margin-bottom: 20px; -} - -.hero p { - font-size: 1.2rem; - margin-bottom: 30px; -} - -.hero-content { - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px; - gap: 20px; -} - -.hero-text { - flex: 1; -} - -.hero-img { - flex: 1; -} - -.hero-img img { - width: 100%; - max-width: 900px; - border-radius: 8px; -} - -/* Hero button styling */ -.hero-btn { - display: inline-block; - padding: 10px 20px; - background-color: #4CAF50; /* Button color */ - color: white; - text-decoration: none; - border-radius: 4px; - transition: background-color 0.3s ease; -} - -.hero-btn:hover { - background-color: #45a049; -} - -/* Responsive styling */ -@media screen and (max-width: 768px) { - .hero-content { - flex-direction: column-reverse; /* Stack content and image */ - text-align: center; - } - - .hero-img { - margin-bottom: 20px; - } - - .hero-text h2 { - font-size: 24px; - } - - .hero-btn { - padding: 12px 24px; - } -} - -/* General Styling for Upload Card */ -.upload-card { - display: flex; - justify-content: center; - align-items: center; - padding: 20px; - background-color: #fff; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - width: 350px; - margin: 20px auto; -} - -.upload-container { - text-align: center; -} - -.upload-img img { - width: 100%; - max-width: 500px; - margin-bottom: 20px; - border-radius: 8px; -} - -.upload-text h2 { - font-size: 22px; - margin-bottom: 10px; -} - -.custom-file-upload { - display: inline-block; - padding: 10px 20px; - color: white; - background-color: #007bff; - border-radius: 4px; - - cursor: pointer; - transition: background-color 0.3s ease; -} - - -body.dark-mode #dark-mode-toggle { - background-color: #1c1c1c; - /* Dark mode button color */ - color: white; - /* Keep text white */ -} - -.social-media a:hover { - scale: 1.01; - transition: all 0.3s ease-in-out; -} - -.btn-nav{ - display: flex; - gap: 20px; -} -.btn-nav a{ - color: wheat; -} -/* From Uiverse.io by nikk7007 */ -.button { - --color: #00A97F; - padding: 0.8em 1.7em; - background-color: transparent; - border-radius: .3em; - position: relative; - overflow: hidden; - cursor: pointer; - transition: .5s; - font-weight: 400; - font-size: 17px; - border: 1px solid; - font-family: inherit; - text-transform: uppercase; - color: var(--color); - z-index: 1; - } - - .button::before, .button::after { - content: ''; - display: block; - width: 50px; - height: 50px; - transform: translate(-50%, -50%); - position: absolute; - border-radius: 50%; - z-index: -1; - background-color: var(--color); - transition: 1s ease; - } - - .button::before { - top: -1em; - left: -1em; - } - - .button::after { - left: calc(100% + 1em); - top: calc(100% + 1em); - } - - .button:hover::before, .button:hover::after { - height: 410px; - width: 410px; - } - - .button:hover { - color: rgb(10, 25, 30); - } - - .button:active { - filter: brightness(.8); - } - -.checkbox-con { - margin: 10px; - display: flex; - align-items: center; - color: white; - } - - .checkbox-con input[type="checkbox"] { - appearance: none; - width: 48px; - height: 27px; - border: 2px solid #ff0000; - border-radius: 20px; - background: #f1e1e1; - position: relative; - box-sizing: border-box; - } - - .checkbox-con input[type="checkbox"]::before { - content: ""; - width: 14px; - height: 14px; - background: rgba(234, 7, 7, 0.5); - border: 2px solid #ea0707; - border-radius: 50%; - position: absolute; - top: 0; - left: 0; - transform: translate(13%, 15%); - transition: all 0.3s ease-in-out; - } - - .checkbox-con input[type="checkbox"]::after { - content: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E"); - position: absolute; - top: 0; - left: 20px; - } - - .checkbox-con input[type="checkbox"]:checked { - border: 2px solid #02c202; - background: #e2f1e1; - } - - .checkbox-con input[type="checkbox"]:checked::before { - background: rgba(2, 194, 2, 0.5); - border: 2px solid #02c202; - transform: translate(133%, 13%); - transition: all 0.3s ease-in-out; - } - - .checkbox-con input[type="checkbox"]:checked::after { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E"); - position: absolute; - top: 5px; - left: 5px; - } - - .checkbox-con label { - margin-left: 10px; - cursor: pointer; - user-select: none; - } - - -.btn-nav #checkbox:hover { - transform: scale(1.7); -} - - -.custom-file-upload:hover { - background-color: #0056b3; -} - -.custom-file-upload span { - font-size: 16px; -} - -.upload-submit button { - margin-top: 20px; - padding: 10px 20px; - background-color: #28a745; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.upload-submit button:hover { - background-color: #218838; -} - -/* Responsive Design */ -@media screen and (max-width: 480px) { - .upload-card { - max-width: 100%; - padding: 15px; - } - - .upload-img img { - max-width: 150px; - } -} - -/* General Section Styling */ -section h2 { - font-size: 24px; - text-align: center; - margin-bottom: 20px; -} - -.classification p, .disposal p { - text-align: center; - font-size: 18px; - margin-bottom: 20px; -} - -/* General Section Styling */ -h2 { - text-align: center; - font-size: 24px; - margin-bottom: 20px; -} - -/* Card Container Styling */ -.card-container { - display: flex; - justify-content: center; - gap: 20px; - flex-wrap: wrap; - padding: 20px; -} - -.card { - width: 450px; - height: 450px; - perspective: 1000px; /* 3D perspective for the card flipping effect */ -} - -.card-inner { - position: relative; - width: 100%; - height: 100%; - transition: transform 0.8s; - transform-style: preserve-3d; -} - -.card:hover .card-inner { - transform: rotateY(180deg); /* Flip card on hover */ -} - -.card-front, .card-back { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - overflow: hidden; - padding: 20px; -} - -.card-front { - background-color: #4CAF50; /* Front side background */ - color: white; -} - -.card-front img { - width: 100%; - height: 100%; - object-fit: cover; /* Image will cover the entire card size */ - border-radius: 10px 10px 0 0; -} - -.card-front span { - position: absolute; - bottom: 10px; - background-color: rgba(0, 0, 0, 0.5); - color: white; - padding: 10px; - width: 100%; - text-align: center; - font-size: 16px; - border-radius: 0 0 10px 10px; -} - -.card-back { - background-color: #fff; - color: #333; - transform: rotateY(180deg); -} - -.card-back h3 { - font-size: 20px; - margin-bottom: 10px; -} - -.card-back p { - font-size: 14px; -} - -/* Responsive Design */ -@media screen and (max-width: 768px) { - .card-container { - flex-direction: column; - align-items: center; - } - - .card { - width: 100%; - max-width: 300px; - margin-bottom: 20px; - } -} - -/* General Section Styling */ -.features { - padding: 40px 20px; - background-color: #f5f5f5; - text-align: center; -} - -.features h2 { - font-size: 28px; - margin-bottom: 30px; - color: #333; -} - -.features-container { - display: flex; - justify-content: space-around; - gap: 20px; - flex-wrap: wrap; -} - -.feature-card { - background-color: white; - border-radius: 10px; - padding: 20px; - width: 700px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - align-items: center; - text-align: left; -} - -.feature-card h3 { - font-size: 22px; - margin-bottom: 10px; - color: #4CAF50; -} - -.feature-card p { - font-size: 16px; - color: #555; - margin-bottom: 20px; -} - -.feature-card:hover { - transform: translateY(-10px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); -} - -.feature-card .cta-button, .feature-card .hero-btn { - display: inline-block; - padding: 10px 20px; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s ease; - cursor: pointer; -} - -.feature-card .cta-button:hover, .feature-card .hero-btn:hover { - background-color: #388E3C; -} - -/* Styling for icons - Placeholder for now */ -.icon { - width: 50px; - height: 50px; - background-color: #4CAF50; - border-radius: 50%; - margin-bottom: 15px; -} - -/* Blockquote for eco-fact */ -blockquote { - font-style: italic; - margin-bottom: 10px; - color: #777; -} - -#fact-highlight { - font-weight: bold; - color: #333; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .features-container { - flex-direction: column; - align-items: center; - } - - .feature-card { - width: 100%; - max-width: 350px; - } -} -/* FAQ Section */ -.faqisection{ - padding: 60px 20px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #f9f9f9; - text-align: left; - -} -.faqs { -padding: 60px 20px; -width: 50%; -height: 100%; -display: flex; -flex-direction: column; -justify-content: center; -background-color: #f9f9f9; -text-align: left; -} - -.faqs h2 { -text-align: center; -font-size: 28px; -margin-bottom: 30px; -color: #333; -} - -/* FAQ Items Styling */ -.faq-item { -margin-bottom: 20px; -border-bottom: 1px solid #ddd; -padding: 10px 0; -cursor: pointer; -} - -.faq-item h3 { -font-size: 20px; -color: #4CAF50; -margin-bottom: 10px; -position: relative; -transition: color 0.3s ease; -} - -.faq-item h3::after { -content: '\002B'; /* Plus sign icon */ -font-size: 24px; -position: absolute; -right: 0; -top: 0; -transition: transform 0.3s ease; -} - -.faq-item.active h3::after { -content: '\2212'; /* Minus sign icon */ -} - -.faq-item p { -font-size: 16px; -color: #555; -line-height: 1.6; -max-height: 0; -overflow: hidden; -transition: max-height 0.3s ease; -} - -/* FAQ Item Expanded */ -.faq-item.active p { -max-height: 500px; -} - -/* FAQ Hover Effect */ -.faq-item:hover h3 { -color: #388E3C; -} - -/* Responsive */ -@media (max-width: 768px) { -.faqs h2 { - font-size: 24px; -} - -.faq-item h3 { - font-size: 18px; -} - -.faq-item p { - font-size: 14px; -} -} -/* FAQ Section */ -.faqs { - padding: 40px 20px; - background-color: #f9f9f9; - text-align: left; -} - -.faqs h2 { - text-align: center; - font-size: 28px; - margin-bottom: 30px; - color: #333; -} - -/* FAQ Items Styling */ -.faq-item { - margin-bottom: 20px; - border-bottom: 1px solid #ddd; - padding: 10px 0; - cursor: pointer; -} - -.faq-item h3 { - font-size: 20px; - color: #4CAF50; - margin-bottom: 10px; - position: relative; - transition: color 0.3s ease; -} - -.faq-item h3::after { - content: '\002B'; /* Plus sign icon */ - font-size: 24px; - position: absolute; - right: 0; - top: 0; - transition: transform 0.3s ease; -} - -.faq-item.active h3::after { - content: '\2212'; /* Minus sign icon */ -} - .faq-item p { - font-size: 16px; - color: #555; - line-height: 1.6; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; -} - -/* FAQ Item Expanded */ -.faq-item.active p { - max-height: 500px; -} - -/* FAQ Hover Effect */ -.faq-item:hover h3 { - color: #388E3C; -} - -/* Responsive */ -@media (max-width: 768px) { - .faqs h2 { - font-size: 24px; - } - - .faq-item h3 { - font-size: 18px; - } - - .faq-item p { - font-size: 14px; - } -} - -/* feedback */ -.feedback { - margin-top: 30px; - background-color: #ffffff; - /* White background for better contrast */ - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 500px; - margin: 0 auto; -} - -.feedback h2 { - text-align: center; - color: #00796b; - /* Consistent color with the theme */ - margin-bottom: 20px; -} - -.feedback form { - display: flex; - flex-direction: column; -} - -.feedback input, -.feedback textarea { - margin: 10px 0; - padding: 12px; - border: 1px solid #00796b; - border-radius: 5px; - font-size: 16px; - background-color: #e0f7fa; - /* Matches the background theme */ -} - -.feedback textarea { - min-height: 100px; - /* Larger space for feedback text */ -} - -.feedback button { - background-color: #00796b; - /* Light mode button color (same as header) */ - color: white; - /* Text color for contrast */ - padding: 12px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.feedback button:hover { - background-color: #004d40; - /* Darker teal on hover */ -} - -/* About Us Section */ -.about-container { - display: flex; - flex-direction: column; - align-items: center; - padding: 40px 20px; - background-color: #f4f4f4; -} - -.about-heading h2 { - font-size: 28px; - color: #333; - margin-bottom: 20px; - text-align: center; -} - -/* About Text Styling */ -.about-text { - max-width: 800px; /* Restrict max width for readability */ - margin-bottom: 20px; - text-align: center; /* Center align text */ -} - -.about-text p { - font-size: 16px; - color: #555; - line-height: 1.6; - margin-bottom: 15px; /* Space between paragraphs */ -} - -/* About Image Styling */ -.about-image { - width: 100%; - max-width: 600px; /* Restrict max width for images */ - margin: 0 auto; /* Center the image */ -} - -.about-image img { - width: 100%; /* Make image responsive */ - height: auto; /* Maintain aspect ratio */ - border-radius: 8px; /* Rounded corners for the image */ -} - -/* Responsive Design */ -@media (max-width: 768px) { - .about-heading h2 { - font-size: 24px; - } - - .about-text p { - font-size: 14px; /* Smaller font size on mobile */ - } -} -/* Mission Section */ -section { - padding: 40px 20px; - background-color: #f9f9f9; /* Light background for contrast */ -} - -.mission-container { - max-width: 1200px; /* Restrict max width for content */ - margin: 0 auto; /* Center align the container */ - text-align: center; /* Center align the text */ - display: flex; - justify-content: center; - flex-direction: column; - /* align-items: center; */ -} - -.mission-container h3 { - font-size: 28px; - color: #333; - margin-bottom: 20px; -} - -/* Mission Box Styling */ -.mission-box { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */ - gap: 20px; /* Space between grid items */ -} - -.mission-item { - background-color: #fff; /* White background for items */ - border-radius: 8px; /* Rounded corners */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ - padding: 20px; /* Inner spacing */ - transition: transform 0.3s; /* Animation on hover */ -} - -.mission-item:hover { - transform: translateY(-5px); /* Lift effect on hover */ -} - -.mission-item img { - width: 60px; /* Fixed width for icons */ - height: auto; /* Maintain aspect ratio */ - margin-bottom: 10px; /* Space between image and text */ -} - -.mission-item h4 { - font-size: 20px; - color: #333; - margin: 10px 0; /* Space around the heading */ -} - -.mission-item p { - font-size: 14px; - color: #555; /* Dark gray for better readability */ -} - -/* Responsive Design */ -@media (max-width: 768px) { - .mission-container h3 { - font-size: 24px; /* Smaller heading size on mobile */ - } - - .mission-item h4 { - font-size: 18px; /* Smaller subheading on mobile */ - } - - .mission-item p { - font-size: 12px; /* Smaller paragraph size on mobile */ - } -} - -.container { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; -} - -.form_area { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - background-color: #EDDCD9; - height: auto; - width: auto; - border: 2px solid #264143; - border-radius: 20px; - box-shadow: 3px 4px 0px 1px #E99F4C; -} - -.title { - color: #264143; - font-weight: 900; - font-size: 1.5em; - margin-top: 20px; -} - -.sub_title { - font-weight: 600; - margin: 5px 0; -} - -.form_group { - display: flex; - flex-direction: column; - align-items: baseline; - margin: 10px; -} - -.form_style { - outline: none; - border: 2px solid #264143; - box-shadow: 3px 4px 0px 1px #E99F4C; - width: 490px; - padding: 12px 10px; - border-radius: 4px; - font-size: 15px; -} - -.form_style:focus, .btn:focus { - transform: translateY(4px); - box-shadow: 1px 2px 0px 0px #E99F4C; -} - -.btn { - padding: 15px; - margin: 25px 0px; - width: 290px; - font-size: 15px; - background: #DE5499; - border-radius: 10px; - font-weight: 800; - box-shadow: 3px 3px 0px 0px #E99F4C; -} - -.btn:hover { - opacity: .9; -} - -.link { - font-weight: 800; - color: #264143; - padding: 5px; + display: none; }