From 3cb32885768bf170bf414180e8cb6184d7d95a15 Mon Sep 17 00:00:00 2001
From: vivi29 <vivekroy2964@gmail.com>
Date: Sun, 20 Oct 2024 20:49:48 +0530
Subject: [PATCH 1/3] I have changed full layout (header, footer and javascript
 ) in carbon-footprint

---
 .vscode/settings.json |   2 +-
 Carbo-footprint.css   | 268 ++++++++++++++++++++++++++++++++++++++++--
 carbon-footprint.html | 127 +++++++++++++++++++-
 3 files changed, 383 insertions(+), 14 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f673a71 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
\ No newline at end of file
diff --git a/Carbo-footprint.css b/Carbo-footprint.css
index 33a123c..1065960 100644
--- a/Carbo-footprint.css
+++ b/Carbo-footprint.css
@@ -1,31 +1,168 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #EDF6F9;
-    color: #333;
-    text-align: center;
-    padding: 20px;
+/* Reset some default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+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;
+    color: white;
+  }
+  
+  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;
+  }
+  
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #333;
+    color: white;
+}
+
+body.dark-mode header {
+    background-color: #00796b;
+}
+
+body.dark-mode .button a {
+    color: #ddd;
+}
+
+body.dark-mode #progress-container {
+    background-color: #444;
+}
+
+body.dark-mode #progress-bar {
+    background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%);
+}
+.dark-mode label{
+    color: black;
 }
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .nav-menu {
+        display: none; /* Hide nav menu on smaller screens */
+    }
 
-.container {
-    max-width: 600px;
-    margin: auto;
+    #menu-toggle {
+        display: block; /* Show menu toggle button */
+    }
+}
+
+
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh; /* Makes sure the content is vertically centered */
+    background-color: #EDF6F9; /* Light background for the main section */
     padding: 20px;
+}
+main .container {
+    width: 100%; /* Ensures the container takes full width but stays within max-width */
+    max-width: 600px; /* Keeps the layout consistent */
+    background-color: #FFDDD2; /* Matches the container's background */
     border: 1px solid #006D77;
     border-radius: 10px;
-    background-color: #FFDDD2;
+    padding: 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #006D77;
 }
 
 label {
     display: block;
     margin: 10px 0 5px;
+    font-weight: bold;
 }
 
 input {
     width: 100%;
-    padding: 8px;
+    padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #006D77;
     border-radius: 5px;
+    transition: border-color 0.3s;
+}
+
+input:focus {
+    border-color: #004c54;
+    outline: none;
 }
 
 button {
@@ -35,13 +172,122 @@ button {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
 }
 
 button:hover {
     background-color: #004c54;
+    transform: scale(1.05);
 }
 
 .result, .tips {
     margin-top: 20px;
     font-weight: bold;
+    background-color: #FFF;
+    border: 1px solid #006D77;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+
+.nav-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.social-media {
+    display: flex;
+    justify-content: center;
+    gap: 15px; /* Space between the icons */
+    margin-top: 20px;
+}
+
+.social-media a {
+    display: inline-block;
+    font-size: 2rem;
+    color: #6366F1; /* Adjust this to match your site's theme */
+    transition: color 0.3s ease;
 }
+.social-media a:hover {
+    color: #4f50c4; /* Darker color on hover */
+}
+
+.social-media box-icon {
+    width: 40px; /* Adjust the size as per your requirement */
+    height: 40px;
+}
+
+@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;
+    }
+}
+
+#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;
+  }
\ No newline at end of file
diff --git a/carbon-footprint.html b/carbon-footprint.html
index e49216c..bbe143e 100644
--- a/carbon-footprint.html
+++ b/carbon-footprint.html
@@ -4,9 +4,36 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Carbon Footprint Calculator</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="Carbo-footprint.css">
 </head>
 <body>
+
+    <!-- Progress Bar -->
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+    </div>
+
+    <!-- Navbar section -->
+    <header>
+        <a href="index.html"><h1>Waste Management</h1></a>
+        <nav>
+            <ul id="nav-menu">
+                <li><a href="#upload">Upload</a></li>
+                <li><a href="#features">Features</a></li>
+                <li><a href="#feedback">Feedback</a></li>
+                <li><a href="#about">About US</a></li>
+                <li><a href="register.html">Sign up</a></li>
+                <li><a href="#footer">Contact</a></li>
+            </ul>
+        </nav>
+        <div class="nav-controls">
+            <button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
+            <button id="menu-toggle" aria-label="Toggle menu">☰</button>
+        </div>
+    </header>
+
+
+    <main>
     <div class="container">
         <h1>Carbon Footprint Calculator</h1>
         <form id="footprintForm">
@@ -21,8 +48,104 @@ <h1>Carbon Footprint Calculator</h1>
 
         <div id="result" class="result"></div>
         <div id="tips" class="tips"></div>
+    
     </div>
+</main>
+    <footer id="footer">
+        <h2>Stay Connected</h2>
+        <form id="newsletter-form">
+            <input type="email" placeholder="Your Email" required>
+            <button type="submit">Subscribe</button>
+        </form>
+        <div class="social-media">
+            <a href="#">
+                <box-icon type="logo" name="facebook"></box-icon>
+            </a>
+            <a href="#">
+                <box-icon type="logo" name="twitter"></box-icon>
+            </a>
+            <a href="#">
+                <box-icon type="logo" name="instagram"></box-icon>
+            </a>
+        </div>
+        <div class="community-message">
+            <h3>Our Commitment to Sustainability</h3>
+            <p>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.</p>
+        </div>
+        <br>
+        <p>&copy; 2024 Waste Management. All rights reserved.</p>
+    </footer>
+
+
+    <script>
+    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') ? '☀️' : '🌓';
+        });
+    }
+    });
+
+    document.getElementById('footprintForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    // Get input values
+    const wasteAmount = parseFloat(document.getElementById('wasteAmount').value);
+    const recycledAmount = parseFloat(document.getElementById('recycledAmount').value);
+
+    // Validate inputs
+    if (isNaN(wasteAmount) || isNaN(recycledAmount)) {
+        alert("Please enter valid numbers.");
+        return;
+    }
+
+    // Calculate carbon footprint
+    const netWaste = wasteAmount - recycledAmount;
+    const carbonFootprint = netWaste * 0.5; // Example factor
+
+    // Display results
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = `Your estimated carbon footprint is <strong>${carbonFootprint.toFixed(2)} kg CO2</strong> per week.`;
+
+    // Provide tips based on the result
+    let tips = '';
+    if (carbonFootprint < 10) {
+        tips = 'Great job! Keep reducing waste and recycling more.';
+    } else if (carbonFootprint >= 10 && carbonFootprint < 20) {
+        tips = 'You are doing well, but there’s room for improvement. Try to recycle more!';
+    } else {
+        tips = 'Consider reducing your waste and increasing your recycling efforts to lower your carbon footprint.';
+    }
+    
+    const tipsDiv = document.getElementById('tips');
+    tipsDiv.innerHTML = `<strong>Tips:</strong> ${tips}`;
+});
+
+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;
 
-    <script src="script.js"></script>
+            progressBar.style.width = scrollPercentage + '%';
+        });
+    }
+</script>
 </body>
 </html>

From 1007bd79a05450ba2df2e134eb5d6234481013aa Mon Sep 17 00:00:00 2001
From: vivi29 <vivekroy2964@gmail.com>
Date: Sun, 20 Oct 2024 21:18:21 +0530
Subject: [PATCH 2/3] I have change in port

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f673a71..6f3a291 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5501
 }
\ No newline at end of file

From d0792ffb939f93ad6f28cebae9f686a4a46af50e Mon Sep 17 00:00:00 2001
From: vivi29 <vivekroy2964@gmail.com>
Date: Sun, 20 Oct 2024 21:25:03 +0530
Subject: [PATCH 3/3] I have change port from 5001 to 5002

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f673a71 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
\ No newline at end of file