Skip to content
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.

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

Added event details and volunteer registration # 150 #151

Merged
merged 1 commit into from
Oct 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
141 changes: 141 additions & 0 deletions EventVolunteer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volunteer Registering</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: #fff;
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;
color: #666;
font-size: 1.1em;
margin-bottom: 40px;
}

form {
display: flex;
flex-direction: column;
gap: 20px;
}

label {
font-size: 1.1em;
color: #333;
}

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 Volunteering</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">Event Name:</label>
<select id="event-Name" name="Event-Name">
<option value="Forest Restoration Drive">Forest Restoration Drive</option>
<option value="Tree Plantation">Tree Plantation</option>
<option value="Save Trees- The Chipko movement">Save Trees- The Chipko movement</option>
<option value="Save the Wetlands">Save the Wetlands</option>
</select>

<label for="volunteer-role">Preferred Volunteer Role:</label>
<select id="volunteer-role" name="volunteer-role">
<option value="Plantation">Plantation</option>
<option value="awareness">Awareness Campaign</option>
<option value="logistics">Logistics Support</option>
</select>

<label for="message">Additional Information (optional):</label>
<textarea id="message" name="message" rows="4"></textarea>

<button type="submit">Submit Registration</button>
</form>

<div class="back-button">
<a href="Events.html">← Back to Events</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>
Loading