QWAw commited on
Commit
0a7e395
·
verified ·
1 Parent(s): b37ee24

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +748 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ubc Space
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ubc-space
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,748 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>UBC AI Projects Showcase</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ ubcBlue: '#002145',
15
+ ubcYellow: '#FFD700',
16
+ ubcGray: '#F5F5F5',
17
+ },
18
+ fontFamily: {
19
+ sans: ['Inter', 'sans-serif'],
20
+ },
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ }
31
+
32
+ .project-card {
33
+ transition: all 0.3s ease;
34
+ box-shadow: 0 4px 6px rgba(0, 33, 69, 0.1);
35
+ }
36
+
37
+ .project-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 15px rgba(0, 33, 69, 0.2);
40
+ }
41
+
42
+ .tag {
43
+ transition: all 0.2s ease;
44
+ }
45
+
46
+ .tag:hover {
47
+ transform: scale(1.05);
48
+ }
49
+
50
+ .search-input:focus {
51
+ outline: none;
52
+ box-shadow: 0 0 0 3px rgba(0, 33, 69, 0.2);
53
+ }
54
+
55
+ .modal {
56
+ transition: opacity 0.3s ease, visibility 0.3s ease;
57
+ }
58
+
59
+ .gradient-bg {
60
+ background: linear-gradient(135deg, #002145 0%, #004d7a 100%);
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-ubcGray min-h-screen">
65
+ <!-- Header -->
66
+ <header class="gradient-bg text-white">
67
+ <div class="container mx-auto px-4 py-6">
68
+ <div class="flex justify-between items-center">
69
+ <div class="flex items-center space-x-4">
70
+ <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/6f/University_of_British_Columbia_Logo.svg/1200px-University_of_British_Columbia_Logo.svg.png" alt="UBC Logo" class="h-12">
71
+ <div>
72
+ <h1 class="text-2xl font-bold">UBC AI Projects Showcase</h1>
73
+ <p class="text-sm opacity-80">Connecting students and alumni through AI innovation</p>
74
+ </div>
75
+ </div>
76
+ <nav class="hidden md:flex space-x-6">
77
+ <a href="#" class="hover:text-ubcYellow transition">Home</a>
78
+ <a href="#" class="hover:text-ubcYellow transition">Projects</a>
79
+ <a href="#" class="hover:text-ubcYellow transition">Resources</a>
80
+ <a href="#" class="hover:text-ubcYellow transition">About</a>
81
+ </nav>
82
+ <button class="md:hidden text-2xl" id="mobile-menu-button">
83
+ <i class="fas fa-bars"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </header>
88
+
89
+ <!-- Mobile Menu -->
90
+ <div class="hidden bg-ubcBlue text-white py-4 px-4" id="mobile-menu">
91
+ <nav class="flex flex-col space-y-3">
92
+ <a href="#" class="hover:text-ubcYellow transition">Home</a>
93
+ <a href="#" class="hover:text-ubcYellow transition">Projects</a>
94
+ <a href="#" class="hover:text-ubcYellow transition">Resources</a>
95
+ <a href="#" class="hover:text-ubcYellow transition">About</a>
96
+ </nav>
97
+ </div>
98
+
99
+ <!-- Hero Section -->
100
+ <section class="gradient-bg text-white py-16">
101
+ <div class="container mx-auto px-4 text-center">
102
+ <h2 class="text-4xl font-bold mb-4">Showcasing UBC's AI Innovation</h2>
103
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Discover, share, and collaborate on AI projects created by UBC students and alumni. From research to applications, explore the cutting edge of artificial intelligence.</p>
104
+ <div class="flex flex-col md:flex-row justify-center gap-4">
105
+ <button class="bg-ubcYellow text-ubcBlue font-bold py-3 px-6 rounded-lg hover:bg-yellow-600 transition" id="add-project-btn">
106
+ <i class="fas fa-plus mr-2"></i> Add Your Project
107
+ </button>
108
+ <button class="bg-white text-ubcBlue font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition">
109
+ <i class="fas fa-search mr-2"></i> Explore Projects
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Main Content -->
116
+ <main class="container mx-auto px-4 py-12">
117
+ <!-- Search and Filter Section -->
118
+ <div class="mb-12">
119
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
120
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
121
+ <div class="relative flex-grow">
122
+ <input type="text" placeholder="Search projects..." class="search-input w-full py-3 px-4 border border-gray-300 rounded-lg pl-10 focus:border-ubcBlue">
123
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
124
+ </div>
125
+ <div class="flex flex-wrap gap-2">
126
+ <select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none">
127
+ <option>All Departments</option>
128
+ <option>Computer Science</option>
129
+ <option>Engineering</option>
130
+ <option>Data Science</option>
131
+ <option>Business</option>
132
+ </select>
133
+ <select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none">
134
+ <option>All Years</option>
135
+ <option>2023</option>
136
+ <option>2022</option>
137
+ <option>2021</option>
138
+ <option>2020</option>
139
+ </select>
140
+ <select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none">
141
+ <option>All Types</option>
142
+ <option>Research</option>
143
+ <option>Application</option>
144
+ <option>Startup</option>
145
+ <option>Open Source</option>
146
+ </select>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="flex flex-wrap gap-2 mb-6">
152
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Machine Learning</span>
153
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Computer Vision</span>
154
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">NLP</span>
155
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Robotics</span>
156
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Healthcare</span>
157
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Sustainability</span>
158
+ <span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Finance</span>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Projects Grid -->
163
+ <div class="mb-12">
164
+ <h3 class="text-2xl font-bold mb-6 text-ubcBlue">Featured Projects</h3>
165
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-container">
166
+ <!-- Project cards will be dynamically inserted here -->
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Stats Section -->
171
+ <div class="bg-white rounded-xl shadow-md p-8 mb-12">
172
+ <h3 class="text-2xl font-bold mb-6 text-ubcBlue text-center">UBC AI Community by the Numbers</h3>
173
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
174
+ <div>
175
+ <div class="text-5xl font-bold text-ubcBlue mb-2">127</div>
176
+ <p class="text-gray-600">Projects Shared</p>
177
+ </div>
178
+ <div>
179
+ <div class="text-5xl font-bold text-ubcBlue mb-2">89</div>
180
+ <p class="text-gray-600">Active Contributors</p>
181
+ </div>
182
+ <div>
183
+ <div class="text-5xl font-bold text-ubcBlue mb-2">23</div>
184
+ <p class="text-gray-600">Departments Represented</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Testimonials -->
190
+ <div class="mb-12">
191
+ <h3 class="text-2xl font-bold mb-6 text-ubcBlue">What Our Community Says</h3>
192
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
193
+ <div class="bg-white rounded-xl shadow-md p-6">
194
+ <div class="flex items-center mb-4">
195
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-4">
196
+ <div>
197
+ <h4 class="font-bold">Sarah Chen</h4>
198
+ <p class="text-sm text-gray-600">Computer Science, Class of 2021</p>
199
+ </div>
200
+ </div>
201
+ <p class="text-gray-700">"The UBC AI Showcase helped me connect with alumni working in my field of interest. I found a mentor who guided me through my capstone project and even referred me to my current job!"</p>
202
+ <div class="mt-4 flex space-x-1">
203
+ <i class="fas fa-star text-yellow-400"></i>
204
+ <i class="fas fa-star text-yellow-400"></i>
205
+ <i class="fas fa-star text-yellow-400"></i>
206
+ <i class="fas fa-star text-yellow-400"></i>
207
+ <i class="fas fa-star text-yellow-400"></i>
208
+ </div>
209
+ </div>
210
+ <div class="bg-white rounded-xl shadow-md p-6">
211
+ <div class="flex items-center mb-4">
212
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-4">
213
+ <div>
214
+ <h4 class="font-bold">David Park</h4>
215
+ <p class="text-sm text-gray-600">Engineering Physics, Class of 2019</p>
216
+ </div>
217
+ </div>
218
+ <p class="text-gray-700">"As an alumni, I love seeing what current students are working on. I've hired two interns from projects I discovered here, and it's been amazing to give back to the UBC community."</p>
219
+ <div class="mt-4 flex space-x-1">
220
+ <i class="fas fa-star text-yellow-400"></i>
221
+ <i class="fas fa-star text-yellow-400"></i>
222
+ <i class="fas fa-star text-yellow-400"></i>
223
+ <i class="fas fa-star text-yellow-400"></i>
224
+ <i class="fas fa-star text-yellow-400"></i>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </main>
230
+
231
+ <!-- Add Project Modal -->
232
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="project-modal">
233
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
234
+ <div class="p-6">
235
+ <div class="flex justify-between items-center mb-6">
236
+ <h3 class="text-2xl font-bold text-ubcBlue">Add Your Project</h3>
237
+ <button class="text-gray-500 hover:text-gray-700" id="close-modal">
238
+ <i class="fas fa-times text-2xl"></i>
239
+ </button>
240
+ </div>
241
+
242
+ <form id="project-form" class="space-y-6">
243
+ <div>
244
+ <label class="block text-gray-700 mb-2">Project Title</label>
245
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required>
246
+ </div>
247
+
248
+ <div>
249
+ <label class="block text-gray-700 mb-2">Description</label>
250
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none h-32" required></textarea>
251
+ </div>
252
+
253
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
254
+ <div>
255
+ <label class="block text-gray-700 mb-2">Your Name</label>
256
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required>
257
+ </div>
258
+ <div>
259
+ <label class="block text-gray-700 mb-2">UBC Affiliation</label>
260
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required>
261
+ <option value="">Select...</option>
262
+ <option>Current Student</option>
263
+ <option>Alumni</option>
264
+ <option>Faculty</option>
265
+ <option>Researcher</option>
266
+ </select>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
271
+ <div>
272
+ <label class="block text-gray-700 mb-2">Department</label>
273
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required>
274
+ <option value="">Select...</option>
275
+ <option>Computer Science</option>
276
+ <option>Engineering</option>
277
+ <option>Data Science</option>
278
+ <option>Business</option>
279
+ <option>Medicine</option>
280
+ <option>Other</option>
281
+ </select>
282
+ </div>
283
+ <div>
284
+ <label class="block text-gray-700 mb-2">Graduation Year</label>
285
+ <input type="number" min="1900" max="2099" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none">
286
+ </div>
287
+ </div>
288
+
289
+ <div>
290
+ <label class="block text-gray-700 mb-2">Project Type</label>
291
+ <div class="flex flex-wrap gap-3">
292
+ <label class="inline-flex items-center">
293
+ <input type="checkbox" class="form-checkbox text-ubcBlue rounded">
294
+ <span class="ml-2">Research</span>
295
+ </label>
296
+ <label class="inline-flex items-center">
297
+ <input type="checkbox" class="form-checkbox text-ubcBlue rounded">
298
+ <span class="ml-2">Application</span>
299
+ </label>
300
+ <label class="inline-flex items-center">
301
+ <input type="checkbox" class="form-checkbox text-ubcBlue rounded">
302
+ <span class="ml-2">Startup</span>
303
+ </label>
304
+ <label class="inline-flex items-center">
305
+ <input type="checkbox" class="form-checkbox text-ubcBlue rounded">
306
+ <span class="ml-2">Open Source</span>
307
+ </label>
308
+ </div>
309
+ </div>
310
+
311
+ <div>
312
+ <label class="block text-gray-700 mb-2">Technologies Used</label>
313
+ <div class="flex flex-wrap gap-2 mb-2" id="tech-tags-container">
314
+ <!-- Tags will be added here -->
315
+ </div>
316
+ <div class="flex">
317
+ <input type="text" id="tech-input" placeholder="Add technology (e.g. Python, TensorFlow)" class="flex-grow p-3 border border-gray-300 rounded-l-lg focus:border-ubcBlue focus:outline-none">
318
+ <button type="button" id="add-tech-btn" class="bg-ubcBlue text-white px-4 rounded-r-lg hover:bg-blue-900 transition">
319
+ <i class="fas fa-plus"></i>
320
+ </button>
321
+ </div>
322
+ </div>
323
+
324
+ <div>
325
+ <label class="block text-gray-700 mb-2">Project Link (optional)</label>
326
+ <input type="url" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none">
327
+ </div>
328
+
329
+ <div>
330
+ <label class="block text-gray-700 mb-2">Project Image (optional)</label>
331
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
332
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
333
+ <p class="text-gray-500">Drag & drop your image here or click to browse</p>
334
+ <input type="file" class="hidden">
335
+ </div>
336
+ </div>
337
+
338
+ <div class="pt-4">
339
+ <button type="submit" class="w-full bg-ubcBlue text-white py-3 px-6 rounded-lg hover:bg-blue-900 transition font-bold">
340
+ Submit Project
341
+ </button>
342
+ </div>
343
+ </form>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Project Detail Modal -->
349
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="detail-modal">
350
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
351
+ <div class="p-6">
352
+ <div class="flex justify-between items-center mb-6">
353
+ <h3 class="text-2xl font-bold text-ubcBlue" id="detail-title">Project Title</h3>
354
+ <button class="text-gray-500 hover:text-gray-700" id="close-detail">
355
+ <i class="fas fa-times text-2xl"></i>
356
+ </button>
357
+ </div>
358
+
359
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
360
+ <div class="lg:col-span-2">
361
+ <div class="bg-gray-200 rounded-lg h-64 flex items-center justify-center">
362
+ <i class="fas fa-image text-5xl text-gray-400"></i>
363
+ </div>
364
+ </div>
365
+ <div>
366
+ <div class="bg-ubcBlue text-white p-4 rounded-lg">
367
+ <h4 class="font-bold mb-2">Project Details</h4>
368
+ <div class="space-y-3">
369
+ <div>
370
+ <p class="text-sm opacity-80">Creator</p>
371
+ <p class="font-medium" id="detail-creator">John Doe</p>
372
+ </div>
373
+ <div>
374
+ <p class="text-sm opacity-80">Department</p>
375
+ <p class="font-medium" id="detail-department">Computer Science</p>
376
+ </div>
377
+ <div>
378
+ <p class="text-sm opacity-80">Year</p>
379
+ <p class="font-medium" id="detail-year">2023</p>
380
+ </div>
381
+ <div>
382
+ <p class="text-sm opacity-80">Type</p>
383
+ <p class="font-medium" id="detail-type">Research</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="mb-6">
391
+ <h4 class="font-bold text-lg mb-2 text-ubcBlue">Description</h4>
392
+ <p class="text-gray-700" id="detail-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
393
+ </div>
394
+
395
+ <div class="mb-6">
396
+ <h4 class="font-bold text-lg mb-2 text-ubcBlue">Technologies Used</h4>
397
+ <div class="flex flex-wrap gap-2" id="detail-tech">
398
+ <!-- Technologies will be added here -->
399
+ </div>
400
+ </div>
401
+
402
+ <div class="mb-6">
403
+ <h4 class="font-bold text-lg mb-2 text-ubcBlue">Project Links</h4>
404
+ <div class="flex flex-wrap gap-3">
405
+ <a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center">
406
+ <i class="fab fa-github mr-2"></i> GitHub
407
+ </a>
408
+ <a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center">
409
+ <i class="fas fa-globe mr-2"></i> Live Demo
410
+ </a>
411
+ <a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center">
412
+ <i class="fas fa-file-pdf mr-2"></i> Research Paper
413
+ </a>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="pt-4 border-t border-gray-200">
418
+ <div class="flex justify-between items-center">
419
+ <button class="bg-ubcBlue text-white py-2 px-6 rounded-lg hover:bg-blue-900 transition font-bold">
420
+ <i class="fas fa-envelope mr-2"></i> Contact Creator
421
+ </button>
422
+ <div class="flex space-x-2">
423
+ <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full">
424
+ <i class="fas fa-share-alt"></i>
425
+ </button>
426
+ <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full">
427
+ <i class="fas fa-bookmark"></i>
428
+ </button>
429
+ <button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full">
430
+ <i class="fas fa-heart"></i>
431
+ </button>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Footer -->
440
+ <footer class="bg-ubcBlue text-white py-12">
441
+ <div class="container mx-auto px-4">
442
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
443
+ <div>
444
+ <h4 class="text-lg font-bold mb-4">UBC AI Showcase</h4>
445
+ <p class="text-sm opacity-80">Connecting students and alumni through artificial intelligence innovation at the University of British Columbia.</p>
446
+ </div>
447
+ <div>
448
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
449
+ <ul class="space-y-2">
450
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Browse Projects</a></li>
451
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Submit a Project</a></li>
452
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Resources</a></li>
453
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">FAQ</a></li>
454
+ </ul>
455
+ </div>
456
+ <div>
457
+ <h4 class="text-lg font-bold mb-4">Connect</h4>
458
+ <ul class="space-y-2">
459
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">AI Club at UBC</a></li>
460
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Computer Science Dept</a></li>
461
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Engineering Dept</a></li>
462
+ <li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Data Science Institute</a></li>
463
+ </ul>
464
+ </div>
465
+ <div>
466
+ <h4 class="text-lg font-bold mb-4">Stay Updated</h4>
467
+ <p class="text-sm opacity-80 mb-4">Subscribe to our newsletter for the latest projects and events.</p>
468
+ <div class="flex">
469
+ <input type="email" placeholder="Your email" class="flex-grow p-2 rounded-l-lg text-gray-800">
470
+ <button class="bg-ubcYellow text-ubcBlue px-4 rounded-r-lg font-bold">
471
+ <i class="fas fa-paper-plane"></i>
472
+ </button>
473
+ </div>
474
+ <div class="flex space-x-4 mt-4">
475
+ <a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-twitter"></i></a>
476
+ <a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-linkedin"></i></a>
477
+ <a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-instagram"></i></a>
478
+ <a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-github"></i></a>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm opacity-80 text-center">
483
+ <p>© 2023 UBC AI Projects Showcase. All rights reserved.</p>
484
+ </div>
485
+ </div>
486
+ </footer>
487
+
488
+ <script>
489
+ // Sample project data
490
+ const projects = [
491
+ {
492
+ id: 1,
493
+ title: "AI-Powered Campus Navigation",
494
+ description: "A computer vision system that helps visually impaired students navigate UBC campus using real-time object detection and pathfinding algorithms.",
495
+ creator: "Emily Zhang",
496
+ department: "Computer Science",
497
+ year: "2023",
498
+ type: "Application",
499
+ technologies: ["Python", "TensorFlow", "OpenCV", "React"],
500
+ image: null,
501
+ likes: 24,
502
+ saved: false
503
+ },
504
+ {
505
+ id: 2,
506
+ title: "Predicting Student Success",
507
+ description: "Machine learning model that analyzes academic patterns to predict student success and recommend intervention strategies for at-risk students.",
508
+ creator: "Raj Patel",
509
+ department: "Data Science",
510
+ year: "2022",
511
+ type: "Research",
512
+ technologies: ["Python", "Scikit-learn", "Pandas", "Flask"],
513
+ image: null,
514
+ likes: 18,
515
+ saved: true
516
+ },
517
+ {
518
+ id: 3,
519
+ title: "Sustainable Energy Optimization",
520
+ description: "AI system that optimizes energy usage across UBC buildings using reinforcement learning and IoT sensor data.",
521
+ creator: "Sophia Chen",
522
+ department: "Engineering",
523
+ year: "2021",
524
+ type: "Research",
525
+ technologies: ["PyTorch", "Node.js", "MongoDB", "D3.js"],
526
+ image: null,
527
+ likes: 32,
528
+ saved: false
529
+ },
530
+ {
531
+ id: 4,
532
+ title: "Automated Lecture Summarizer",
533
+ description: "NLP application that processes lecture recordings to generate concise summaries and key concept flashcards for students.",
534
+ creator: "Michael Johnson",
535
+ department: "Computer Science",
536
+ year: "2023",
537
+ type: "Application",
538
+ technologies: ["Python", "Hugging Face", "FastAPI", "Next.js"],
539
+ image: null,
540
+ likes: 15,
541
+ saved: false
542
+ },
543
+ {
544
+ id: 5,
545
+ title: "Campus Safety AI",
546
+ description: "Real-time monitoring system that uses computer vision to detect safety hazards and alert campus security.",
547
+ creator: "Aisha Mohammed",
548
+ department: "Engineering",
549
+ year: "2022",
550
+ type: "Startup",
551
+ technologies: ["TensorFlow", "React Native", "Firebase", "AWS"],
552
+ image: null,
553
+ likes: 29,
554
+ saved: true
555
+ },
556
+ {
557
+ id: 6,
558
+ title: "AI Research Paper Recommender",
559
+ description: "Personalized recommendation system that suggests relevant research papers to UBC students based on their academic interests.",
560
+ creator: "David Kim",
561
+ department: "Computer Science",
562
+ year: "2021",
563
+ type: "Open Source",
564
+ technologies: ["Python", "BERT", "Elasticsearch", "Vue.js"],
565
+ image: null,
566
+ likes: 21,
567
+ saved: false
568
+ }
569
+ ];
570
+
571
+ // DOM Elements
572
+ const projectsContainer = document.getElementById('projects-container');
573
+ const projectModal = document.getElementById('project-modal');
574
+ const addProjectBtn = document.getElementById('add-project-btn');
575
+ const closeModalBtn = document.getElementById('close-modal');
576
+ const projectForm = document.getElementById('project-form');
577
+ const techInput = document.getElementById('tech-input');
578
+ const addTechBtn = document.getElementById('add-tech-btn');
579
+ const techTagsContainer = document.getElementById('tech-tags-container');
580
+ const detailModal = document.getElementById('detail-modal');
581
+ const closeDetailBtn = document.getElementById('close-detail');
582
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
583
+ const mobileMenu = document.getElementById('mobile-menu');
584
+
585
+ // Sample technologies for tags
586
+ const sampleTechs = ["Python", "TensorFlow", "PyTorch", "Scikit-learn", "OpenCV", "NLTK", "React", "Node.js", "Flask", "Django", "AWS", "Azure", "Docker", "Kubernetes"];
587
+
588
+ // Render projects
589
+ function renderProjects() {
590
+ projectsContainer.innerHTML = '';
591
+
592
+ projects.forEach(project => {
593
+ const projectCard = document.createElement('div');
594
+ projectCard.className = 'project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition';
595
+ projectCard.innerHTML = `
596
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
597
+ ${project.image ?
598
+ `<img src="${project.image}" alt="${project.title}" class="w-full h-full object-cover">` :
599
+ `<i class="fas fa-project-diagram text-5xl text-gray-400"></i>`}
600
+ </div>
601
+ <div class="p-6">
602
+ <div class="flex justify-between items-start mb-2">
603
+ <h3 class="text-xl font-bold text-ubcBlue">${project.title}</h3>
604
+ <button class="text-gray-400 hover:text-ubcBlue transition ${project.saved ? 'text-ubcYellow' : ''}">
605
+ <i class="fas fa-bookmark"></i>
606
+ </button>
607
+ </div>
608
+ <p class="text-gray-600 text-sm mb-4 line-clamp-2">${project.description}</p>
609
+ <div class="flex flex-wrap gap-2 mb-4">
610
+ ${project.technologies.map(tech =>
611
+ `<span class="tag bg-gray-100 text-gray-800 py-1 px-2 rounded-full text-xs">${tech}</span>`
612
+ ).join('')}
613
+ </div>
614
+ <div class="flex justify-between items-center text-sm">
615
+ <div class="flex items-center">
616
+ <i class="fas fa-user-graduate mr-1 text-ubcBlue"></i>
617
+ <span>${project.creator}</span>
618
+ </div>
619
+ <div class="flex items-center space-x-2">
620
+ <span class="flex items-center">
621
+ <i class="fas fa-heart mr-1 text-red-500"></i>
622
+ <span>${project.likes}</span>
623
+ </span>
624
+ <button class="text-ubcBlue hover:text-blue-900 transition view-detail" data-id="${project.id}">
625
+ View <i class="fas fa-chevron-right ml-1"></i>
626
+ </button>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ `;
631
+ projectsContainer.appendChild(projectCard);
632
+ });
633
+
634
+ // Add event listeners to view detail buttons
635
+ document.querySelectorAll('.view-detail').forEach(button => {
636
+ button.addEventListener('click', (e) => {
637
+ const projectId = parseInt(e.currentTarget.getAttribute('data-id'));
638
+ showProjectDetail(projectId);
639
+ });
640
+ });
641
+ }
642
+
643
+ // Show project detail modal
644
+ function showProjectDetail(projectId) {
645
+ const project = projects.find(p => p.id === projectId);
646
+ if (!project) return;
647
+
648
+ // Update modal content
649
+ document.getElementById('detail-title').textContent = project.title;
650
+ document.getElementById('detail-creator').textContent = project.creator;
651
+ document.getElementById('detail-department').textContent = project.department;
652
+ document.getElementById('detail-year').textContent = project.year;
653
+ document.getElementById('detail-type').textContent = project.type;
654
+ document.getElementById('detail-description').textContent = project.description;
655
+
656
+ // Update technologies
657
+ const techContainer = document.getElementById('detail-tech');
658
+ techContainer.innerHTML = '';
659
+ project.technologies.forEach(tech => {
660
+ const tag = document.createElement('span');
661
+ tag.className = 'tag bg-gray-100 text-gray-800 py-1 px-3 rounded-full text-sm';
662
+ tag.textContent = tech;
663
+ techContainer.appendChild(tag);
664
+ });
665
+
666
+ // Show modal
667
+ detailModal.classList.remove('hidden');
668
+ }
669
+
670
+ // Add technology tag
671
+ function addTechTag() {
672
+ const tech = techInput.value.trim();
673
+ if (tech && !techTagsContainer.querySelector(`[data-tech="${tech}"]`)) {
674
+ const tag = document.createElement('div');
675
+ tag.className = 'tag bg-gray-100 text-gray-800 py-1 px-3 rounded-full text-sm flex items-center';
676
+ tag.setAttribute('data-tech', tech);
677
+ tag.innerHTML = `
678
+ ${tech}
679
+ <button type="button" class="ml-2 text-gray-500 hover:text-gray-700 remove-tech">
680
+ <i class="fas fa-times text-xs"></i>
681
+ </button>
682
+ `;
683
+ techTagsContainer.appendChild(tag);
684
+ techInput.value = '';
685
+
686
+ // Add event listener to remove button
687
+ tag.querySelector('.remove-tech').addEventListener('click', () => {
688
+ tag.remove();
689
+ });
690
+ }
691
+ }
692
+
693
+ // Event Listeners
694
+ addProjectBtn.addEventListener('click', () => {
695
+ projectModal.classList.remove('hidden');
696
+ });
697
+
698
+ closeModalBtn.addEventListener('click', () => {
699
+ projectModal.classList.add('hidden');
700
+ });
701
+
702
+ closeDetailBtn.addEventListener('click', () => {
703
+ detailModal.classList.add('hidden');
704
+ });
705
+
706
+ addTechBtn.addEventListener('click', addTechTag);
707
+
708
+ techInput.addEventListener('keypress', (e) => {
709
+ if (e.key === 'Enter') {
710
+ e.preventDefault();
711
+ addTechTag();
712
+ }
713
+ });
714
+
715
+ projectForm.addEventListener('submit', (e) => {
716
+ e.preventDefault();
717
+ // Here you would normally send the form data to a server
718
+ alert('Project submitted successfully!');
719
+ projectModal.classList.add('hidden');
720
+ projectForm.reset();
721
+ techTagsContainer.innerHTML = '';
722
+ });
723
+
724
+ mobileMenuButton.addEventListener('click', () => {
725
+ mobileMenu.classList.toggle('hidden');
726
+ });
727
+
728
+ // Close modals when clicking outside
729
+ window.addEventListener('click', (e) => {
730
+ if (e.target === projectModal) {
731
+ projectModal.classList.add('hidden');
732
+ }
733
+ if (e.target === detailModal) {
734
+ detailModal.classList.add('hidden');
735
+ }
736
+ });
737
+
738
+ // Initialize
739
+ renderProjects();
740
+
741
+ // Add some sample tech tags to the form
742
+ sampleTechs.slice(0, 5).forEach(tech => {
743
+ techInput.value = tech;
744
+ addTechTag();
745
+ });
746
+ </script>
747
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=QWAw/ubc-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
748
+ </html>