-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcommunity.html
140 lines (132 loc) · 7.69 KB
/
community.html
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
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community Hub - EcoOps Platform</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<nav class="bg-green-600 text-white p-4">
<div class="container mx-auto">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold">EcoOps Platform</h1>
<div class="space-x-4">
<a href="index.html" class="px-4 py-2 text-green-200 hover:text-green-100">Dashboard</a>
<a href="knowledge.html" class="px-4 py-2 text-green-200 hover:text-green-100">Knowledge Transfer</a>
<a href="projects.html" class="px-4 py-2 text-green-200 hover:text-green-100">Project Tracking</a>
<a href="tokens.html" class="px-4 py-2 text-green-200 hover:text-green-100">Token Management</a>
<a href="community.html" class="px-4 py-2 text-green-100 border-b-2 border-green-100">Community Hub</a>
<a href="impact.html" class="px-4 py-2 text-green-200 hover:text-green-100">Impact Analysis</a>
</div>
</div>
</div>
</nav>
<main class="container mx-auto p-8">
<div class="space-y-8">
<div>
<h2 class="text-3xl font-bold">Community Hub</h2>
<p class="text-gray-600">Connect, collaborate, and grow with fellow ecological stewards</p>
</div>
<!-- Featured Communities -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="font-semibold text-lg mb-4">Indigenous Knowledge Keepers</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<img src="/api/placeholder/40/40" alt="Community Avatar" class="rounded-full"/>
<span class="text-green-600 font-bold">142 Members</span>
</div>
<p class="text-gray-600 text-sm">Preserving and sharing traditional ecological knowledge across generations.</p>
<button class="w-full bg-green-100 text-green-800 py-2 rounded-md hover:bg-green-200">Join Community</button>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="font-semibold text-lg mb-4">Youth Eco-Leaders</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<img src="/api/placeholder/40/40" alt="Community Avatar" class="rounded-full"/>
<span class="text-green-600 font-bold">256 Members</span>
</div>
<p class="text-gray-600 text-sm">Young champions driving innovative solutions for ecological restoration.</p>
<button class="w-full bg-green-100 text-green-800 py-2 rounded-md hover:bg-green-200">Join Community</button>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="font-semibold text-lg mb-4">Citizen Scientists</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<img src="/api/placeholder/40/40" alt="Community Avatar" class="rounded-full"/>
<span class="text-green-600 font-bold">189 Members</span>
</div>
<p class="text-gray-600 text-sm">Collaborative research and monitoring of ecosystem health.</p>
<button class="w-full bg-green-100 text-green-800 py-2 rounded-md hover:bg-green-200">Join Community</button>
</div>
</div>
</div>
<!-- Community Activities -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-6">Recent Activities</h3>
<div class="space-y-4">
<div class="border-l-4 border-green-500 pl-4">
<div class="flex justify-between items-start">
<div>
<p class="font-medium">New Knowledge Session Posted</p>
<p class="text-sm text-gray-600">Traditional water harvesting techniques in arid regions</p>
</div>
<span class="text-xs text-gray-500">2 hours ago</span>
</div>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<div class="flex justify-between items-start">
<div>
<p class="font-medium">Community Milestone Achieved</p>
<p class="text-sm text-gray-600">1000th tree planted in urban forestry initiative</p>
</div>
<span class="text-xs text-gray-500">1 day ago</span>
</div>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<div class="flex justify-between items-start">
<div>
<p class="font-medium">New Research Collaboration</p>
<p class="text-sm text-gray-600">Mapping butterfly migration patterns</p>
</div>
<span class="text-xs text-gray-500">2 days ago</span>
</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-6">Upcoming Events</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium">Virtual Knowledge Exchange</h4>
<span class="text-sm text-green-600">Nov 20, 2024</span>
</div>
<p class="text-sm text-gray-600 mb-3">Indigenous practices for sustainable agriculture</p>
<button class="text-sm bg-green-100 text-green-800 px-4 py-2 rounded-md hover:bg-green-200">Register</button>
</div>
<div class="border p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium">Community Field Day</h4>
<span class="text-sm text-green-600">Nov 25, 2024</span>
</div>
<p class="text-sm text-gray-600 mb-3">Hands-on wetland restoration workshop</p>
<button class="text-sm bg-green-100 text-green-800 px-4 py-2 rounded-md hover:bg-green-200">Register</button>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-800 text-white mt-8 py-6">
<div class="container mx-auto px-4">
<div class="text-center text-gray-400">
<p>© 2024 EcoOps Platform - Generated: 2024-11-17</p>
</div>
</div>
</footer>
</body>
</html>