|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>UBC AI Projects Showcase</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
ubcBlue: '#002145', |
|
|
ubcYellow: '#FFD700', |
|
|
ubcGray: '#F5F5F5', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 33, 69, 0.1); |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 33, 69, 0.2); |
|
|
} |
|
|
|
|
|
.tag { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(0, 33, 69, 0.2); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
transition: opacity 0.3s ease, visibility 0.3s ease; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #002145 0%, #004d7a 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-ubcGray min-h-screen"> |
|
|
|
|
|
<header class="gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<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"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold">UBC AI Projects Showcase</h1> |
|
|
<p class="text-sm opacity-80">Connecting students and alumni through AI innovation</p> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Home</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Projects</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Resources</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">About</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-2xl" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="hidden bg-ubcBlue text-white py-4 px-4" id="mobile-menu"> |
|
|
<nav class="flex flex-col space-y-3"> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Home</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Projects</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">Resources</a> |
|
|
<a href="#" class="hover:text-ubcYellow transition">About</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-4xl font-bold mb-4">Showcasing UBC's AI Innovation</h2> |
|
|
<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> |
|
|
<div class="flex flex-col md:flex-row justify-center gap-4"> |
|
|
<button class="bg-ubcYellow text-ubcBlue font-bold py-3 px-6 rounded-lg hover:bg-yellow-600 transition" id="add-project-btn"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Your Project |
|
|
</button> |
|
|
<button class="bg-white text-ubcBlue font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-search mr-2"></i> Explore Projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<div class="mb-12"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
|
<div class="relative flex-grow"> |
|
|
<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"> |
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none"> |
|
|
<option>All Departments</option> |
|
|
<option>Computer Science</option> |
|
|
<option>Engineering</option> |
|
|
<option>Data Science</option> |
|
|
<option>Business</option> |
|
|
</select> |
|
|
<select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none"> |
|
|
<option>All Years</option> |
|
|
<option>2023</option> |
|
|
<option>2022</option> |
|
|
<option>2021</option> |
|
|
<option>2020</option> |
|
|
</select> |
|
|
<select class="py-3 px-4 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none"> |
|
|
<option>All Types</option> |
|
|
<option>Research</option> |
|
|
<option>Application</option> |
|
|
<option>Startup</option> |
|
|
<option>Open Source</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Machine Learning</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Computer Vision</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">NLP</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Robotics</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Healthcare</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Sustainability</span> |
|
|
<span class="tag bg-ubcBlue text-white py-1 px-3 rounded-full text-sm cursor-pointer hover:bg-blue-900">Finance</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-12"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-ubcBlue">Featured Projects</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-8 mb-12"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-ubcBlue text-center">UBC AI Community by the Numbers</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> |
|
|
<div> |
|
|
<div class="text-5xl font-bold text-ubcBlue mb-2">127</div> |
|
|
<p class="text-gray-600">Projects Shared</p> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-5xl font-bold text-ubcBlue mb-2">89</div> |
|
|
<p class="text-gray-600">Active Contributors</p> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-5xl font-bold text-ubcBlue mb-2">23</div> |
|
|
<p class="text-gray-600">Departments Represented</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-12"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-ubcBlue">What Our Community Says</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Chen</h4> |
|
|
<p class="text-sm text-gray-600">Computer Science, Class of 2021</p> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-4 flex space-x-1"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">David Park</h4> |
|
|
<p class="text-sm text-gray-600">Engineering Physics, Class of 2019</p> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
<div class="mt-4 flex space-x-1"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="project-modal"> |
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-ubcBlue">Add Your Project</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-modal"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form id="project-form" class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Title</label> |
|
|
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Description</label> |
|
|
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none h-32" required></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Your Name</label> |
|
|
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">UBC Affiliation</label> |
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required> |
|
|
<option value="">Select...</option> |
|
|
<option>Current Student</option> |
|
|
<option>Alumni</option> |
|
|
<option>Faculty</option> |
|
|
<option>Researcher</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Department</label> |
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none" required> |
|
|
<option value="">Select...</option> |
|
|
<option>Computer Science</option> |
|
|
<option>Engineering</option> |
|
|
<option>Data Science</option> |
|
|
<option>Business</option> |
|
|
<option>Medicine</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Graduation Year</label> |
|
|
<input type="number" min="1900" max="2099" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Type</label> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-ubcBlue rounded"> |
|
|
<span class="ml-2">Research</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-ubcBlue rounded"> |
|
|
<span class="ml-2">Application</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-ubcBlue rounded"> |
|
|
<span class="ml-2">Startup</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-ubcBlue rounded"> |
|
|
<span class="ml-2">Open Source</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Technologies Used</label> |
|
|
<div class="flex flex-wrap gap-2 mb-2" id="tech-tags-container"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<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"> |
|
|
<button type="button" id="add-tech-btn" class="bg-ubcBlue text-white px-4 rounded-r-lg hover:bg-blue-900 transition"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Link (optional)</label> |
|
|
<input type="url" class="w-full p-3 border border-gray-300 rounded-lg focus:border-ubcBlue focus:outline-none"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Image (optional)</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-500">Drag & drop your image here or click to browse</p> |
|
|
<input type="file" class="hidden"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button type="submit" class="w-full bg-ubcBlue text-white py-3 px-6 rounded-lg hover:bg-blue-900 transition font-bold"> |
|
|
Submit Project |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="detail-modal"> |
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-ubcBlue" id="detail-title">Project Title</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="close-detail"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-gray-200 rounded-lg h-64 flex items-center justify-center"> |
|
|
<i class="fas fa-image text-5xl text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="bg-ubcBlue text-white p-4 rounded-lg"> |
|
|
<h4 class="font-bold mb-2">Project Details</h4> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<p class="text-sm opacity-80">Creator</p> |
|
|
<p class="font-medium" id="detail-creator">John Doe</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-80">Department</p> |
|
|
<p class="font-medium" id="detail-department">Computer Science</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-80">Year</p> |
|
|
<p class="font-medium" id="detail-year">2023</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm opacity-80">Type</p> |
|
|
<p class="font-medium" id="detail-type">Research</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-lg mb-2 text-ubcBlue">Description</h4> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-lg mb-2 text-ubcBlue">Technologies Used</h4> |
|
|
<div class="flex flex-wrap gap-2" id="detail-tech"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="font-bold text-lg mb-2 text-ubcBlue">Project Links</h4> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fab fa-github mr-2"></i> GitHub |
|
|
</a> |
|
|
<a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-globe mr-2"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> Research Paper |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-200"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="bg-ubcBlue text-white py-2 px-6 rounded-lg hover:bg-blue-900 transition font-bold"> |
|
|
<i class="fas fa-envelope mr-2"></i> Contact Creator |
|
|
</button> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
</button> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
|
|
<i class="fas fa-bookmark"></i> |
|
|
</button> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 p-2 rounded-full"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-ubcBlue text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">UBC AI Showcase</h4> |
|
|
<p class="text-sm opacity-80">Connecting students and alumni through artificial intelligence innovation at the University of British Columbia.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Browse Projects</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Submit a Project</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Resources</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Connect</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">AI Club at UBC</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Computer Science Dept</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Engineering Dept</a></li> |
|
|
<li><a href="#" class="text-sm opacity-80 hover:opacity-100 transition">Data Science Institute</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Stay Updated</h4> |
|
|
<p class="text-sm opacity-80 mb-4">Subscribe to our newsletter for the latest projects and events.</p> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Your email" class="flex-grow p-2 rounded-l-lg text-gray-800"> |
|
|
<button class="bg-ubcYellow text-ubcBlue px-4 rounded-r-lg font-bold"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-xl hover:text-ubcYellow transition"><i class="fab fa-github"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-sm opacity-80 text-center"> |
|
|
<p>© 2023 UBC AI Projects Showcase. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const projects = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "AI-Powered Campus Navigation", |
|
|
description: "A computer vision system that helps visually impaired students navigate UBC campus using real-time object detection and pathfinding algorithms.", |
|
|
creator: "Emily Zhang", |
|
|
department: "Computer Science", |
|
|
year: "2023", |
|
|
type: "Application", |
|
|
technologies: ["Python", "TensorFlow", "OpenCV", "React"], |
|
|
image: null, |
|
|
likes: 24, |
|
|
saved: false |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Predicting Student Success", |
|
|
description: "Machine learning model that analyzes academic patterns to predict student success and recommend intervention strategies for at-risk students.", |
|
|
creator: "Raj Patel", |
|
|
department: "Data Science", |
|
|
year: "2022", |
|
|
type: "Research", |
|
|
technologies: ["Python", "Scikit-learn", "Pandas", "Flask"], |
|
|
image: null, |
|
|
likes: 18, |
|
|
saved: true |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "Sustainable Energy Optimization", |
|
|
description: "AI system that optimizes energy usage across UBC buildings using reinforcement learning and IoT sensor data.", |
|
|
creator: "Sophia Chen", |
|
|
department: "Engineering", |
|
|
year: "2021", |
|
|
type: "Research", |
|
|
technologies: ["PyTorch", "Node.js", "MongoDB", "D3.js"], |
|
|
image: null, |
|
|
likes: 32, |
|
|
saved: false |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
title: "Automated Lecture Summarizer", |
|
|
description: "NLP application that processes lecture recordings to generate concise summaries and key concept flashcards for students.", |
|
|
creator: "Michael Johnson", |
|
|
department: "Computer Science", |
|
|
year: "2023", |
|
|
type: "Application", |
|
|
technologies: ["Python", "Hugging Face", "FastAPI", "Next.js"], |
|
|
image: null, |
|
|
likes: 15, |
|
|
saved: false |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
title: "Campus Safety AI", |
|
|
description: "Real-time monitoring system that uses computer vision to detect safety hazards and alert campus security.", |
|
|
creator: "Aisha Mohammed", |
|
|
department: "Engineering", |
|
|
year: "2022", |
|
|
type: "Startup", |
|
|
technologies: ["TensorFlow", "React Native", "Firebase", "AWS"], |
|
|
image: null, |
|
|
likes: 29, |
|
|
saved: true |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
title: "AI Research Paper Recommender", |
|
|
description: "Personalized recommendation system that suggests relevant research papers to UBC students based on their academic interests.", |
|
|
creator: "David Kim", |
|
|
department: "Computer Science", |
|
|
year: "2021", |
|
|
type: "Open Source", |
|
|
technologies: ["Python", "BERT", "Elasticsearch", "Vue.js"], |
|
|
image: null, |
|
|
likes: 21, |
|
|
saved: false |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const projectsContainer = document.getElementById('projects-container'); |
|
|
const projectModal = document.getElementById('project-modal'); |
|
|
const addProjectBtn = document.getElementById('add-project-btn'); |
|
|
const closeModalBtn = document.getElementById('close-modal'); |
|
|
const projectForm = document.getElementById('project-form'); |
|
|
const techInput = document.getElementById('tech-input'); |
|
|
const addTechBtn = document.getElementById('add-tech-btn'); |
|
|
const techTagsContainer = document.getElementById('tech-tags-container'); |
|
|
const detailModal = document.getElementById('detail-modal'); |
|
|
const closeDetailBtn = document.getElementById('close-detail'); |
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
|
|
|
const sampleTechs = ["Python", "TensorFlow", "PyTorch", "Scikit-learn", "OpenCV", "NLTK", "React", "Node.js", "Flask", "Django", "AWS", "Azure", "Docker", "Kubernetes"]; |
|
|
|
|
|
|
|
|
function renderProjects() { |
|
|
projectsContainer.innerHTML = ''; |
|
|
|
|
|
projects.forEach(project => { |
|
|
const projectCard = document.createElement('div'); |
|
|
projectCard.className = 'project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition'; |
|
|
projectCard.innerHTML = ` |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
${project.image ? |
|
|
`<img src="${project.image}" alt="${project.title}" class="w-full h-full object-cover">` : |
|
|
`<i class="fas fa-project-diagram text-5xl text-gray-400"></i>`} |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-ubcBlue">${project.title}</h3> |
|
|
<button class="text-gray-400 hover:text-ubcBlue transition ${project.saved ? 'text-ubcYellow' : ''}"> |
|
|
<i class="fas fa-bookmark"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-2">${project.description}</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
${project.technologies.map(tech => |
|
|
`<span class="tag bg-gray-100 text-gray-800 py-1 px-2 rounded-full text-xs">${tech}</span>` |
|
|
).join('')} |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-graduate mr-1 text-ubcBlue"></i> |
|
|
<span>${project.creator}</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="flex items-center"> |
|
|
<i class="fas fa-heart mr-1 text-red-500"></i> |
|
|
<span>${project.likes}</span> |
|
|
</span> |
|
|
<button class="text-ubcBlue hover:text-blue-900 transition view-detail" data-id="${project.id}"> |
|
|
View <i class="fas fa-chevron-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
projectsContainer.appendChild(projectCard); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.view-detail').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const projectId = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
showProjectDetail(projectId); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showProjectDetail(projectId) { |
|
|
const project = projects.find(p => p.id === projectId); |
|
|
if (!project) return; |
|
|
|
|
|
|
|
|
document.getElementById('detail-title').textContent = project.title; |
|
|
document.getElementById('detail-creator').textContent = project.creator; |
|
|
document.getElementById('detail-department').textContent = project.department; |
|
|
document.getElementById('detail-year').textContent = project.year; |
|
|
document.getElementById('detail-type').textContent = project.type; |
|
|
document.getElementById('detail-description').textContent = project.description; |
|
|
|
|
|
|
|
|
const techContainer = document.getElementById('detail-tech'); |
|
|
techContainer.innerHTML = ''; |
|
|
project.technologies.forEach(tech => { |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag bg-gray-100 text-gray-800 py-1 px-3 rounded-full text-sm'; |
|
|
tag.textContent = tech; |
|
|
techContainer.appendChild(tag); |
|
|
}); |
|
|
|
|
|
|
|
|
detailModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function addTechTag() { |
|
|
const tech = techInput.value.trim(); |
|
|
if (tech && !techTagsContainer.querySelector(`[data-tech="${tech}"]`)) { |
|
|
const tag = document.createElement('div'); |
|
|
tag.className = 'tag bg-gray-100 text-gray-800 py-1 px-3 rounded-full text-sm flex items-center'; |
|
|
tag.setAttribute('data-tech', tech); |
|
|
tag.innerHTML = ` |
|
|
${tech} |
|
|
<button type="button" class="ml-2 text-gray-500 hover:text-gray-700 remove-tech"> |
|
|
<i class="fas fa-times text-xs"></i> |
|
|
</button> |
|
|
`; |
|
|
techTagsContainer.appendChild(tag); |
|
|
techInput.value = ''; |
|
|
|
|
|
|
|
|
tag.querySelector('.remove-tech').addEventListener('click', () => { |
|
|
tag.remove(); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
addProjectBtn.addEventListener('click', () => { |
|
|
projectModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModalBtn.addEventListener('click', () => { |
|
|
projectModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
closeDetailBtn.addEventListener('click', () => { |
|
|
detailModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
addTechBtn.addEventListener('click', addTechTag); |
|
|
|
|
|
techInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
e.preventDefault(); |
|
|
addTechTag(); |
|
|
} |
|
|
}); |
|
|
|
|
|
projectForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
alert('Project submitted successfully!'); |
|
|
projectModal.classList.add('hidden'); |
|
|
projectForm.reset(); |
|
|
techTagsContainer.innerHTML = ''; |
|
|
}); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === projectModal) { |
|
|
projectModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === detailModal) { |
|
|
detailModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
renderProjects(); |
|
|
|
|
|
|
|
|
sampleTechs.slice(0, 5).forEach(tech => { |
|
|
techInput.value = tech; |
|
|
addTechTag(); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
