-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvolunteer.html
More file actions
138 lines (124 loc) · 5.72 KB
/
Copy pathvolunteer.html
File metadata and controls
138 lines (124 loc) · 5.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volunteer - Saylani Portal</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper d-flex">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="Capture.JPG" alt="Saylani Logo" class="img-fluid">
</div>
<ul class="list-unstyled components">
<li>
<a href="dashboard.html">
<i class="fas fa-th-large"></i> Dashboard
</a>
</li>
<li>
<a href="lost-found.html">
<i class="fas fa-search"></i> Lost & Found
</a>
</li>
<li>
<a href="complaints.html">
<i class="fas fa-exclamation-circle"></i> Complaints
</a>
</li>
<li>
<a href="volunteer.html" class="active">
<i class="fas fa-hands-helping"></i> Volunteers
</a>
</li>
<li>
<a href="notifications.html">
<i class="fas fa-bell"></i> Notifications
</a>
</li>
</ul>
<div class="mt-auto p-4">
<button onclick="logout()" class="btn btn-outline-danger w-100 btn-sm">
<i class="fas fa-sign-out-alt me-2"></i> Logout
</button>
</div>
</nav>
<!-- Page Content -->
<div id="content" class="w-100">
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-5">
<div>
<h2 class="fw-bold text-dark"><i class="fas fa-briefcase text-success me-2"></i>Upcoming Events</h2>
<p class="text-muted mb-0">Join our community drives and workshops</p>
</div>
<div class="d-flex align-items-center">
<span class="text-muted me-3" id="user-greeting">Welcome, User</span>
<img src="https://ui-avatars.com/api/?name=User&background=0D8ABC&color=fff"
class="rounded-circle shadow-sm" width="45" alt="Avatar">
</div>
</div>
<!-- Hero Event Card -->
<div class="row mb-4">
<div class="col-12">
<div class="hero-event-card"
style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop');">
<div class="hero-overlay"></div>
<div class="hero-content">
<h2 class="fw-bold text-white mb-2">Community Cleanup</h2>
<p class="text-white opacity-75 mb-3">Saturday, 28th June</p>
<span class="event-badge">City Park</span>
</div>
</div>
</div>
</div>
<!-- Small Event Cards -->
<div class="row g-4">
<!-- Card 1 -->
<div class="col-md-6">
<div class="event-card">
<div class="event-img"
style="background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070&auto=format&fit=crop');">
</div>
<div class="p-3">
<h5 class="fw-bold mb-1">Tech Workshop</h5>
<div class="d-flex justify-content-between align-items-center mt-3">
<small class="text-muted fw-bold">June 5</small>
<button class="btn-register-green">Register</button>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-md-6">
<div class="event-card">
<div class="event-img"
style="background-image: url('https://images.unsplash.com/photo-1576091160550-2187d800173f?q=80&w=2070&auto=format&fit=crop');">
</div>
<div class="p-3">
<h5 class="fw-bold mb-1">Health Camp</h5>
<div class="d-flex justify-content-between align-items-center mt-3">
<small class="text-muted fw-bold">July 5</small>
<button class="btn-register-green">Register</button>
</div>
</div>
</div>
</div>
</div>
<!-- Registration Modal (Placeholder for logic) -->
<!-- Note: In a real app, clicking register would open a form or modal -->
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>