thetechguardians · Gunjan10-droid · Jun 16, 2026 · Jun 18, 2026
diff --git a/Frontend/index.html b/Frontend/index.html
@@ -40,6 +40,7 @@
         <div class="nav-links">
           <a href="#features">Features</a>
           <a href="Analysis/analysis.html">Analyze</a>
+          <a href="sustainability.html">Sustainability Goals</a>
           <a href="#contact">Contact</a>
           <a
             href="https://github.com/thetechguardians/Climate-Shield"

diff --git a/Frontend/style.css b/Frontend/style.css
@@ -1291,6 +1291,33 @@ body.light-mode .navbar {
 [data-theme="light"] .footer-links a:hover {
   color: #0369a1;
 }
+
+
+#goal-name,
+#goal-target,
+#goal-deadline {
+  padding: 10px;
+  margin-right: 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,0.2);
+}
+
+#add-goal-btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.goal-badge {
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+.goal-form {
+  min-height: auto;
+}
+
 }
 
 /* Scroll to Top Button */
@@ -1324,4 +1351,5 @@ body.light-mode .navbar {
 .scroll-top-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(14, 165, 233, 0.45);
-}
+}
+
diff --git a/Frontend/sustainability.html b/Frontend/sustainability.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sustainability Goals | Climate Shield</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+
+<body>
+    <div class="page-shell">
+        <nav class="navbar">
+            <a class="brand" href="index.html">
+                <span class="brand-mark">🌍</span>
+                <span>
+                    <strong>Climate Shield</strong>
+                    <small>Climate intelligence, instantly</small>
+                </span>
+            </a>
+        </nav>
+
+        <main class="container">
+            <section class="feature-section">
+
+                <div class="section-heading">
+                    <span>Create Goal</span>
+                    <h2>Add a Sustainability Goal</h2>
+                </div>
+
+                <div class="feature-card goal-form">
+                    <input type="text" id="goal-name" placeholder="Goal Name" />
+
+                    <input type="number" id="goal-target" placeholder="Target Value" />
+                    <input type="date" id="goal-deadline" />
+                    <button id="add-goal-btn">
+                        Add Goal
+                    </button>
+                </div>
+
+            </section>
+            <section class="hero">
+                <div class="hero-copy">
+                    <span class="eyebrow">SUSTAINABILITY TRACKER</span>
+
+                    <h1>Track your sustainability goals.</h1>
+
+                    <p>
+                        Set environmental goals, monitor progress,
+                        and build sustainable habits.
+                    </p>
+                </div>
+            </section>
+
+            <section class="feature-section">
+                <div class="section-heading">
+                    <span>Your Goals</span>
+                    <h2>Personal Sustainability Dashboard</h2>
+                </div>
+                <div class="feature-card">
+                    <p><strong>Active Goals:</strong> <span id="active-count">0</span></p>
+                    <p><strong>Completed Goals:</strong> <span id="completed-count">0</span></p>
+                    <p><strong>Completion Rate:</strong> <span id="completion-rate">0%</span></p>
+                </div>
+                <h3>Active Goals</h3>
+                <div id="active-goals" class="feature-grid"></div>
+
+                <h3>Completed Goals</h3>
+                <div id="completed-goals" class="feature-grid"></div>
+            </section>
+        </main>
+    </div>
+    <script src="sustainability.js"></script>
+</body>
+
+</html>
diff --git a/Frontend/sustainability.js b/Frontend/sustainability.js
@@ -0,0 +1,120 @@
+const addGoalBtn = document.getElementById("add-goal-btn");
+const activeGoalsContainer =
+    document.getElementById("active-goals");
+
+const completedGoalsContainer =
+    document.getElementById("completed-goals");
+
+let goals =
+    JSON.parse(localStorage.getItem("sustainabilityGoals")) || [];
+
+function saveGoals() {
+    localStorage.setItem(
+        "sustainabilityGoals",
+        JSON.stringify(goals)
+    );
+}
+
+function renderGoals() {
+    activeGoalsContainer.innerHTML = "";
+    completedGoalsContainer.innerHTML = "";
+    let activeCount = 0;
+    let completedCount = 0;
+    goals.forEach((goal, index) => {
+        const progress =
+            goal.target > 0
+                ? (goal.current / goal.target) * 100
+                : 0;
+
+        const card = document.createElement("article");
+
+        card.className = "feature-card";
+
+        card.innerHTML = `
+      <div class="feature-icon">🌱</div>
+
+      <h3>${goal.name}</h3>
+      <p><strong>Deadline:</strong> ${goal.deadline || "Not Set"}</p>
+      <p>${goal.current} / ${goal.target}</p>
+      <p>${Math.round(progress)}% Complete</p>
+      <progress
+        value="${goal.current}"
+        max="${goal.target}">
+      </progress>
+
+      <button onclick="updateGoal(${index})">
+        + Progress
+      </button>
+
+      ${progress >= 100
+                ? '<p class="goal-badge">🏆 Achievement Unlocked!</p>'
+                : ''
+            }
+    `;
+
+        if (progress >= 100) {
+            completedCount++;
+            completedGoalsContainer.appendChild(card);
+        } else {
+            activeCount++;
+            activeGoalsContainer.appendChild(card);
+        }
+    });
+    const totalGoals = goals.length;
+
+    const completionRate =
+        totalGoals > 0
+            ? Math.round((completedCount / totalGoals) * 100)
+            : 0;
+
+    const activeCountEl = document.getElementById("active-count");
+    const completedCountEl = document.getElementById("completed-count");
+    const completionRateEl = document.getElementById("completion-rate");
+
+    if (activeCountEl) activeCountEl.textContent = activeCount;
+    if (completedCountEl) completedCountEl.textContent = completedCount;
+    if (completionRateEl) completionRateEl.textContent = `${completionRate}%`;
+}
+
+function updateGoal(index) {
+    goals[index].current = Math.min(
+        goals[index].current + 10,
+        goals[index].target
+    );
+
+    saveGoals();
+
+    renderGoals();
+}
+
+addGoalBtn.addEventListener("click", () => {
+    const name =
+        document.getElementById("goal-name").value.trim();
+
+    const target =
+        parseInt(
+            document.getElementById("goal-target").value
+        );
+    const deadline =
+        document.getElementById("goal-deadline").value;
+
+    if (!name || isNaN(target) || target <= 0 || !deadline) {
+        alert("Please fill all fields.");
+        return;
+    }
+    goals.push({
+        name,
+        target,
+        deadline,
+        current: 0
+    });
+
+    document.getElementById("goal-name").value = "";
+    document.getElementById("goal-target").value = "";
+    document.getElementById("goal-deadline").value = "";
+
+    saveGoals();
+    renderGoals();
+});
+
+renderGoals();