Skip to content

Commit

Permalink
Enhancing events page (#188)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ctrl-apk
Ctrl-apk authored Oct 30, 2024
1 parent 7178390 commit 70ca7ea
Showing 1 changed file with 289 additions and 0 deletions.
289 changes: 289 additions & 0 deletions Enhancing events page
View file
Original file line number Diff line number Diff line change
@@ -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/[email protected]/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>

0 comments on commit 70ca7ea

Please sign in to comment.