Skip to content

Added event management pages #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
feranmioyedele1-ship-it wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added event management pages #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
294 changes: 294 additions & 0 deletions EVENT-DETAILS.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Details</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- CSS -->
<link rel="stylesheet" href="event detail.css">
</head>

<body>

<div class="container">

<!-- SIDEBAR -->
<div class="side-bar">
<img src="Frame 501.png" alt="Logo">

<ul>
<li><i class="fa-solid fa-house"></i><a href="#">Dashboard</a></li>
<li><i class="fa-solid fa-circle-plus"></i><a href="#">Create Events</a></li>
<li><i class="fa-regular fa-calendar"></i><a href="#">Events</a></li>
<li><i class="fa-solid fa-user-group"></i><a href="#">Volunteers</a></li>
<li><i class="fa-solid fa-certificate"></i><a href="#">Certificates</a></li>
<li><i class="fa-regular fa-building"></i><a href="#">Profile</a></li>
<li><i class="fa-solid fa-right-from-bracket"></i><a href="#">Log out</a></li>
</ul>
</div>

<!-- MAIN -->
<div class="main-container">

<!-- NAV -->
<div class="nav">
<div>
<h2>Events</h2>
<p>Browse and Manage all your events</p>
</div>

<div class="nav-actions">
<button class="edit-btn">Edit Event</button>
<button class="cancel-btn">Cancel Event</button>
<i class="fas fa-bell"></i>
<i class="fas fa-user"></i>
</div>
</div>

<!-- TITLE -->
<div class="title-row">
<h1>Coastal Clean-Up Exercise</h1>
<span class="status published">Published</span>
</div>

<!-- IMAGE -->
<div class="event-img">
<img src="image 3.png" alt="Event Image">
<span class="status-badge">Published</span>
</div>

<!-- DESCRIPTION -->
<div class="section">
<h3>Events Description</h3>
<p>
Join us for a community coastal clean-up exercise aimed at reducing plastic waste and protecting marine life along the Lekki Waterfront. This initiative brings together passionate volunteers who are committed to keeping our beaches and waterways clean.

<p>
During this event, volunteers will work in small groups to collect plastic waste, sort recyclable materials, and safely dispose of debris found along the shoreline. All necessary clean-up materials such as gloves, waste bags, and safety gear will be provided by the organizers.

</p>

<p>
Beyond the clean-up activity, the event will also include a short environmental awareness session where participants will learn about the impact of plastic pollution on marine ecosystems and how small everyday actions can contribute to a healthier environment.
</p>

<p>
Whether you are passionate about environmental sustainability, looking to give back to the community, or simply want to spend a meaningful morning outdoors, this event is a great opportunity to make a positive impact while connecting with like-minded individuals.
</p>
</p>
</div>

<!-- DETAILS -->
<div class="details">
<div><i class="fa-regular fa-clock"></i> 8:00AM – 12:00 Noon</div>
<div><i class="fa-regular fa-calendar"></i> June 12, 2026</div>
<div><i class="fa-solid fa-location-dot"></i> Lekki Waterfront, Lagos</div>
</div>

<!-- REQUIREMENTS -->
<div class="section">
<h3>Volunteer Requirements</h3>
<ul>
<li>Must be 16+</li>
<li>Wear comfortable clothes</li>
<li>Bring water bottle</li>
</ul>
</div>

<!-- STATS -->
<div class="stats">
<div class="card">
<h2>40</h2>
<p>Total Slots</p>
</div>

<div class="card">
<h2>18</h2>
<p>Registered</p>
</div>

<div class="card">
<h2>22</h2>
<p>Remaining</p>
</div>
</div>

<!-- VOLUNTEERS TABLE -->
<div class="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Registration</th>
<th></th>
</tr>
</thead>

<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@email.com</td>
<td>March 10, 2026</td>
<td><span class="confirmed">Confirmed</span></td>
<td>⋯</td>
</tr>

<tr>
<td>John Smith</td>
<td>johnsmith@email.com</td>
<td>June 23, 2026</td>
<td><span class="confirmed">Confirmed</span></td>
<td>⋯</td>
</tr>

<tr>
<td>Mary Johnson</td>
<td>mary@email.com</td>
<td>June 23, 2026</td>
<td><span class="confirmed">Confirmed</span></td>
<td>⋯</td>
</tr>

<tr>
<td>Chinyere Okafor</td>
<td>chinyere@email.com</td>
<td>June 23, 2026</td>
<td><span class="confirmed">Confirmed</span></td>
<td>⋯</td>
</tr>

<tr>
<td>Emeka Nwosu</td>
<td>emeka@email.com</td>
<td>June 23, 2026</td>
<td><span class="confirmed">Confirmed</span></td>
<td>⋯</td>
</tr>
</tbody>
</table>
</div>

</div>
</div>


<script>

/* =========================
EDIT EVENT
========================= */
document.querySelector(".edit-btn").addEventListener("click", () => {
alert("Redirecting to Edit Page...");
// window.location.href = "edit-event.html";
});


/* =========================
CANCEL EVENT
========================= */
const cancelBtn = document.querySelector(".cancel-btn");
const statusText = document.querySelector(".status");
const badge = document.querySelector(".status-badge");

cancelBtn.addEventListener("click", () => {

const confirmCancel = confirm("Are you sure you want to cancel this event?");

if (confirmCancel) {
statusText.textContent = "Cancelled";
statusText.style.background = "red";

badge.textContent = "Cancelled";
badge.style.background = "red";

alert("Event Cancelled Successfully");
}
});


/* =========================
ACTION MENU (⋯)
========================= */

document.querySelectorAll("tbody tr").forEach(row => {
const actionCell = row.lastElementChild;

actionCell.addEventListener("click", (e) => {
e.stopPropagation();

// Remove old menu
document.querySelectorAll(".action-menu").forEach(m => m.remove());

const menu = document.createElement("div");
menu.classList.add("action-menu");

menu.innerHTML = `
<p class="remove">Remove</p>
`;

// Style
menu.style.position = "absolute";
menu.style.background = "white";
menu.style.border = "1px solid #ccc";
menu.style.padding = "10px";
menu.style.borderRadius = "8px";
menu.style.boxShadow = "0 5px 15px rgba(0,0,0,0.1)";

document.body.appendChild(menu);

const rect = actionCell.getBoundingClientRect();
menu.style.top = rect.bottom + "px";
menu.style.left = rect.left + "px";

/* REMOVE VOLUNTEER */
menu.querySelector(".remove").addEventListener("click", () => {
row.remove();
updateStats();
menu.remove();
});
});
});


/* =========================
CLOSE MENU WHEN CLICK OUTSIDE
========================= */
document.addEventListener("click", () => {
document.querySelectorAll(".action-menu").forEach(m => m.remove());
});


/* =========================
UPDATE STATS (VERY IMPORTANT)
========================= */

function updateStats() {

const totalSlots = 40; // You can make this dynamic later
const registered = document.querySelectorAll("tbody tr").length;
const remaining = totalSlots - registered;

const cards = document.querySelectorAll(".card h2");

cards[1].textContent = registered;
cards[2].textContent = remaining;
}


/* =========================
INITIAL LOAD
========================= */
updateStats();

</script>
</body>
</html>
Loading