From 1544d626be7e08efbd7e043b5d46a4f9e3d953e2 Mon Sep 17 00:00:00 2001
From: Ctrl-apk <3639shifa@gmail.com>
Date: Wed, 30 Oct 2024 09:37:27 +0530
Subject: [PATCH] footer-update

---
 Enhancing events page | 289 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 289 insertions(+)
 create mode 100644 Enhancing events page
diff --git a/Enhancing events page b/Enhancing events page
new file mode 100644
index 0000000..6dea2c3
--- /dev/null
+++ b/Enhancing events page	
@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tree2Hope</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+        :root {
+            --primary-color: #91BE55; /* Forest Green */
+            --secondary-color: #5b7737; /* Deep Green */
+            --background-color: #f0f8ff; /* Light blue (nature-like) */
+            --card-background: #ffffff;
+            --text-color: #91BE55; /* Sea Green */
+            --shadow-color: rgba(0, 0, 0, 0.15);
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--background-color);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        h1, h2 {
+            font-size: 2.5em;
+            color: var(--primary-color); 
+            margin-bottom: 20px;
+        }
+
+        .main-event {
+            background: url(./assets/images/School.webp) center/cover;
+            border-radius: 10px;
+            padding: 30px;
+            margin-bottom: 20px;
+            color: var(--card-background);
+            box-shadow: 0 4px 8px var(--shadow-color);
+            transition: transform 0.3s;
+            text-align: center;
+        }
+
+        .main-event h1 {
+            font-size: 2.8em;
+            font-weight: bold;
+            color: var(--card-background);
+        }
+
+        .main-event button {
+            margin-top: 10px;
+            background-color: var(--secondary-color);
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+
+        .main-event button:hover {
+            background-color: #4a6530;
+        }
+
+        .events-container {
+            padding: 20px 0;
+        }
+
+        .event-card {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            justify-content: space-between;
+            padding: 25px;
+            margin-bottom: 20px;
+            background-color: var(--card-background);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px var(--shadow-color);
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+        }
+
+        .event-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px var(--shadow-color);
+            background-color: var(--background-color);
+        }
+
+        /* Date Section */
+        .event-date {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: var(--secondary-color);
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            width: 80px;
+        }
+
+        .event-date .month {
+            font-size: 1.2em;
+        }
+
+        .event-date .day {
+            font-size: 2.5em;
+            font-weight: bold;
+        }
+
+        .event-details h3 {
+            margin: 0;
+            font-size: 1.8em;
+            color: var(--primary-color);
+        }
+
+        .event-details p {
+            margin: 5px 0;
+        }
+
+        .event-action {
+            text-align: right;
+        }
+
+        button {
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+
+        button:hover {
+            background-color: #4a6530;
+        }
+
+        /* Back Button Styling */
+        .back-btn {
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: background-color 0.3s;
+        }
+
+        .back-btn:hover {
+            background-color: #4a6530;
+        }
+
+        @media (max-width: 768px) {
+            .event-card {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .event-action {
+                margin-top: 15px;
+                text-align: left;
+            }
+
+            h1, h2 {
+                font-size: 2em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Back Button -->
+        <button class="back-btn" onclick="goBack()">← Back</button>
+
+        <main>
+            <div class="main-event">
+                <h1 id="mainEventName">Save the Forest</h1>
+                <p id="mainEventDate"></p>
+                <button onclick="remindMe()">Set Reminder</button>
+            </div>
+
+            <h2>Upcoming Events</h2>
+            <div id="futureEvents" class="events-container"></div>
+
+            <h2>Previous Events</h2>
+            <div id="pastEvents" class="events-container"></div>
+        </main>
+    </div>
+
+    <script>
+        const events = [
+            { 
+                name: "Forest Restoration Drive", 
+                date: '2024-10-22', 
+                time: '9:00 AM', 
+                type: 'main', 
+                location: 'Central Park, New York', 
+                description: 'Join us for a day of planting trees and restoring the natural habitat.' 
+            },
+            { 
+                name: "Tree Plantation", 
+                date: '2024-10-23', 
+                time: '10:00 AM', 
+                type: 'future', 
+                location: 'Santa Monica Beach, California', 
+                description: 'Participate in our campaign to plant trees and enhance urban greenery.' 
+            },
+            { 
+                name: "Save Trees- The Chipko movement", 
+                date: '2024-10-24', 
+                time: '11:00 AM', 
+                type: 'future', 
+                location: 'Golden Gate Park, San Francisco', 
+                description: 'Join with us to create awareness and protests against cutting down trees.' 
+            },
+            { 
+                name: "Save the Wetlands", 
+                date: '2024-10-25', 
+                time: '8:00 AM', 
+                type: 'future', 
+                location: 'Everglades, Florida', 
+                description: 'Join us in preserving wetlands and protecting wildlife habitats.' 
+            },
+            { 
+                name: "Tree plantation by Location", 
+                date: '2024-10-12', 
+                time: '7:00 AM', 
+                type: 'past', 
+                location: 'City Zoo, Chicago', 
+                description: '.' 
+            }
+        ];
+    
+        async function displayEvents() {
+            const mainEvent = events.find(event => event.type === 'main');
+            if (mainEvent) {
+                document.getElementById('mainEventName').textContent = mainEvent.name;
+                document.getElementById('mainEventDate').textContent = `${formatDate(mainEvent.date)} at ${mainEvent.time}`;
+            }
+    
+            const futureEvents = document.getElementById('futureEvents');
+            const pastEvents = document.getElementById('pastEvents');
+    
+            for (const event of events) {
+                if (event.type === 'main') continue;
+    
+                const eventElement = document.createElement('div');
+                eventElement.className = 'event-card';
+                eventElement.innerHTML = `
+                    <div class="event-date">
+                        <span class="month">${new Date(event.date).toLocaleString('default', { month: 'short' })}</span>
+                        <span class="day">${new Date(event.date).getDate()}</span>
+                    </div>
+                    <div class="event-details">
+                        <h3>${event.name}</h3>
+                        <p>${event.description}</p>
+                        <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+          <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
+        </svg>${event.location}</p>
+                    </div>
+                    <div class="event-action">
+                        <button onclick="remindMe()">Remind Me</button>
+                    </div>
+                `;
+                (event.type === 'future' ? futureEvents : pastEvents).appendChild(eventElement);
+            }
+        }
+    
+        function formatDate(date) {
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            return new Date(date).toLocaleDateString(undefined, options);
+        }
+    
+        function goBack() {
+            window.history.back();
+        }
+    
+        function remindMe() {
+            alert("Reminder set!");
+        }
+    
+        document.addEventListener('DOMContentLoaded', displayEvents);
+    </script>
+</body>
+</html>
