Redesign of carbon footprint page (#373)

## Issues Identification close #369 ### Summary I redesigned the entire Carbon Footprint page, updating the header, footer, main content, and JavaScript functionality. The header and footer were streamlined for better navigation and responsiveness. The main content was reorganized to improve readability and engagement, with added sections for data visualization. JavaScript updates enhanced interactivity, introducing dynamic content and real-time functionality. Overall, the changes improve usability, visual appeal, and mobile performance. ### Details Include any detailed information about the changes in this pull request. ## Types of Changes _Please check the boxes that apply_ - [👍 ] New feature (non-breaking change that adds functionality) - [ 👍 ] Breaking change (fix or feature that would cause existing functionality to not work as expected) ## Checklist _Please check the boxes that apply_ - [👍 ] My code follows the style guidelines of this project - [ 👍 ] I have performed a self-review of my own code - [ ok] I have commented my code, particularly in hard-to-understand areas - [ok ] I have made corresponding changes to the documentation - [ ok] My changes generate no new warnings - [ ok] My changes do not break the current system and pass all existing test cases - [ ok] I have added tests that prove my fix is effective or that my feature works - [ ok] New and existing unit tests pass locally with my changes - [ ok] Any dependent changes have been merged and published in downstream modules ## Screenshots ![Screenshot 2024-10-20 160020](https://github.com/user-attachments/assets/cab05fd6-e155-4063-9b0f-a8f6cc6c963d) ![Screenshot 2024-10-20 204719](https://github.com/user-attachments/assets/29fee5b1-7053-4a6e-b587-3f4635edceba) ![Screenshot 2024-10-20 204719 - Copy](https://github.com/user-attachments/assets/3aa28d3e-42d5-4b97-93d7-c7bc9dd98c83)  ## Summary by CodeRabbit - **New Features** - Introduced a responsive navigation header with theme toggle functionality. - Added a progress bar that dynamically updates based on scroll position. - Implemented a newsletter subscription form and enhanced footer elements. - New form validation and calculation features for the carbon footprint calculator. - **Style** - Comprehensive styling overhaul, including dark mode support and improved responsiveness. - Enhanced styles for input fields, buttons, and social media icons for better interaction.
GarimaSingh0109 · Oct 21, 2024 · 455b8ba · 455b8ba
2 parents 3003fb2 + d0792ff
commit 455b8ba
Show file tree

Hide file tree

Showing 3 changed files with 383 additions and 14 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
diff --git 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;
+  }