From ebe88002e4c07028c69bdcc768a4938fca8e6ac3 Mon Sep 17 00:00:00 2001
From: Aditya Gupta <ag7023587@gmail.com>
Date: Mon, 21 Oct 2024 18:23:03 +0530
Subject: [PATCH] add new html page for planting a tree and add more images for
 goals sections

---
 assets/css/style.css |   5 +-
 index.html           |  54 ++++++++++++++++-
 planttree.html       | 135 +++++++++++++++++++++++++++++++++++++++++++
 scripts/index.js     |  47 +++++++++------
 4 files changed, 219 insertions(+), 22 deletions(-)
 create mode 100644 planttree.html

diff --git a/assets/css/style.css b/assets/css/style.css
index 5a4e914..6bfba8d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -493,7 +493,7 @@ nav .nav_buttons {
 .Goals {
     width: 80vw;
     margin: 0px auto;
-    margin-bottom: 2em;
+    margin-bottom: 10px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -526,7 +526,7 @@ nav .nav_buttons {
     flex-direction: column;
     justify-content: center;
     max-width: 300px;
-    margin: 5px 10px;
+    margin-top: 30px;
     padding: 10px 5px;
     gap: 4%;
     font-size: 14px;
@@ -536,6 +536,7 @@ nav .nav_buttons {
 .Goals .images:hover {
     box-shadow: 0px 4px 5px rgba(24, 186, 12, 0.377);
     transform: scale(1.05);
+    cursor: pointer;
 }
 
 .Goals .images img {
diff --git a/index.html b/index.html
index 699aaf8..08fc645 100644
--- a/index.html
+++ b/index.html
@@ -105,7 +105,7 @@
                 </div>
                 <div class="page_buttons">
                     <button class="one">VIEW PROGRESS</button>
-                    <button
+                    <button id="plant"
                         class="two showPopupButton"
                         data-popup-trigger="cover-page"
                     >
@@ -176,6 +176,26 @@
                         /><span>Bhutan</span></a
                     >
                 </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Singapore"
+                        target="_blank"
+                        ><img
+                            src="https://img.freepik.com/free-photo/merlion-statue-cityscape-singapore_335224-666.jpg?size=626&ext=jpg&ga=GA1.1.774392908.1729423143&semt=ais_hybrid"
+                            alt="Singapore"
+                        /><span>Singapore</span></a
+                    >
+                </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/China"
+                        target="_blank"
+                        ><img
+                            src="https://img.freepik.com/premium-photo/wall-with-chinese-symbol-it-word-china-it_1199278-33131.jpg?ga=GA1.1.774392908.1729423143&semt=ais_hybrid"
+                            alt="China"
+                        /><span>China</span></a
+                    >
+                </div>
                 <div class="country_images">
                     <a
                         href="https://en.wikipedia.org/wiki/Sri_Lanka"
@@ -196,6 +216,17 @@
                         /><span>Malaysia</span></a
                     >
                 </div>
+                <div class="country_images">
+                    <a
+                        href="https://en.wikipedia.org/wiki/Australia"
+                        target="_blank"
+                        ><img
+                            src="https://img.freepik.com/free-photo/beautiful-shot-sydney-harbor-bridge-with-light-pink-blue-sky_181624-16041.jpg?size=626&ext=jpg"
+                            alt="Australia"
+                        /><span>Australia</span></a
+                    >
+                </div>
+
                 <div class="country_images">
                     <a
                         href="https://en.wikipedia.org/wiki/Indonesia"
@@ -284,6 +315,27 @@
                     efforts to 30+ countries across the world.
                 </div>
             </div>
+            <div class="images">
+                <img src="https://www.shutterstock.com/image-photo/farmers-hands-planted-saplings-on-600nw-2027021471.jpg" width="200px" />
+                <div class="text">
+                    <span>AFFORESTATION<br /><br /></span>Afforestation is the development of forest by planting trees on waste land. The main objective of afforestation is to control deforestation and prevent soil erosion. 
+                </div>
+            </div>
+            <div class="images">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyrC0d0TIG7MsdPL-dl77mcBp4mGsKNVR0_w&s" width="200px" />
+                <div class="text">
+                    <span>HEALTH BENEFITS<br /><br /></span>Trees
+                     can improve physical and mental health, reduce stress, and encourage outdoor activities.
+                </div>
+            </div>
+            <div class="images">
+                <img src="https://econation.one/wp-content/uploads/2015/08/Sustainable_development.jpg" width="200px" />
+                <div class="text">
+                    <span>SOCIAL AND ECONOMIC BENEFITS<br /><br /></span>Trees can reduce crime rates,
+                     strengthen community ties, and increase physical activity.
+                    They can also raise house prices and reduce green-space maintenance costs. 
+                </div>
+            </div>
             <div class="images">
                 <img src="./assets/images/Awareness.png" width="200px" />
                 <div class="text">
diff --git a/planttree.html b/planttree.html
new file mode 100644
index 0000000..577abe8
--- /dev/null
+++ b/planttree.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plant a tree</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f0f8ff;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #333;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            margin-top: 40px;
+        }
+
+        h1 {
+            font-size: 2em;
+            color: #4CAF50;
+            text-align: center;
+            
+        }
+
+        p {
+            text-align: center;
+            
+            font-size: 1.1em;
+            margin-bottom: 40px;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            
+            
+        }
+
+        label {
+            font-size: 1.1em;
+            color: #fff;
+        }
+
+        input, select, textarea {
+            padding: 10px;
+            font-size: 1em;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px;
+            font-size: 1.2em;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+
+        .back-button {
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        .back-button a {
+            text-decoration: none;
+            color: #4CAF50;
+            font-size: 1.1em;
+        }
+
+        .back-button a:hover {
+            color: #45a049;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <h1>Register for Planting trees</h1>
+        
+        <form id="registrationForm">
+            <label for="name">Full Name:</label>
+            <input type="text" id="name" name="name" required>
+
+            <label for="email">Email Address:</label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="phone">Phone Number:</label>
+            <input type="tel" id="phone" name="phone" required>
+
+            <label for="Event-Name">Number of trees to plant:</label>
+            <input type="number" id="number" name="number" required>
+
+            <label for="volunteer-role">Location:</label>
+            <input type="text" id="location" name="location" required>
+            
+            <label for="message">Additional Information (optional):</label>
+            <textarea id="message" name="message" rows="4"></textarea>
+
+            <button type="submit">Submit</button>
+        </form>
+
+        <div class="back-button">
+            <a href="index.html">← Back</a>
+        </div>
+    </div>
+    <script>
+        // JavaScript to handle form submission and display success message
+        document.getElementById('registrationForm').addEventListener('submit', function(event) {
+            // Prevent form from actually submitting
+            event.preventDefault();
+
+            // Show success message
+            alert("Registered successfully, an email is sent to your mail.");
+        });
+    </script>
+</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
index 13200d5..ce51ec6 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,4 +1,5 @@
-    const showPopupButtons = document.querySelectorAll(".showPopupButton");
+    // const showPopupButtons = document.querySelectorAll(".showPopupButton");
+    const plant= document.getElementById('plant');
     const closePopupButton = document.querySelector(".closePopupButton");
     const popup = document.querySelector(".popup");
     const overlay = document.getElementById("overlay");
@@ -6,25 +7,31 @@
     //   popup.style.display = "block";
     //   overlay.style.display = "block";
     // });
-    showPopupButtons.forEach((button) => {
-      button.addEventListener("click", function () {
-        // Determine which button was clicked and show the popup accordingly
-        const trigger = button.getAttribute("data-popup-trigger");
-        if (
-          trigger === "donate" ||
-          trigger === "cover-page" ||
-          trigger === "navbar"
-        ) {
-          popup.style.display = "block";
-          overlay.style.display = "block";
-        }
-      });
-    });
+    // showPopupButtons.forEach((button) => {
+    //   button.addEventListener("click", function () {
+    //     // Determine which button was clicked and show the popup accordingly
+    //     const trigger = button.getAttribute("data-popup-trigger");
+    //     if (
+    //       trigger === "donate" ||
+    //       trigger === "cover-page" ||
+    //       trigger === "navbar"
+    //     ) {
+    //       popup.style.display = "block";
+    //       overlay.style.display = "block";
+    //     }
+    //   });
+    // });
 
-    closePopupButton.addEventListener("click", function () {
-      popup.style.display = "none";
-      overlay.style.display = "none";
-    });
+    // closePopupButton.addEventListener("click", function () {
+    //   popup.style.display = "none";
+    //   overlay.style.display = "none";
+    // });
+
+
+
+    plant.addEventListener("click",function(){
+      window.location.href="/Tree2Hope/planttree.html";
+    })
 
   
     document.getElementById("openMenu").addEventListener("click", function () {
@@ -91,3 +98,5 @@
 
   window.addEventListener('scroll', handleScroll);
 
+
+