Hugging Face's logo

Spaces:
QWAw
/
ubc-space
Running

App Files Community
ubc-space / index.html
QWAw's picture
QWAw
Add 2 files
0a7e395 verified
raw
history blame contribute delete
39.6 kB
 <!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 -->
<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>
<!-- Mobile Menu -->
<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>
<!-- Hero Section -->
<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 Content -->
<main class="container mx-auto px-4 py-12">
<!-- Search and Filter Section -->
<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>
<!-- Projects Grid -->
<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">
<!-- Project cards will be dynamically inserted here -->
</div>
</div>
<!-- Stats Section -->
<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>
<!-- Testimonials -->
<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>
<!-- Add Project Modal -->
<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">
<!-- Tags will be added here -->
</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>
<!-- Project Detail Modal -->
<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">
<!-- Technologies will be added here -->
</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 -->
<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>
// Sample project data
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
}
];
// DOM Elements
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');
// Sample technologies for tags
const sampleTechs = ["Python", "TensorFlow", "PyTorch", "Scikit-learn", "OpenCV", "NLTK", "React", "Node.js", "Flask", "Django", "AWS", "Azure", "Docker", "Kubernetes"];
// Render projects
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);
});
// Add event listeners to view detail buttons
document.querySelectorAll('.view-detail').forEach(button => {
button.addEventListener('click', (e) => {
const projectId = parseInt(e.currentTarget.getAttribute('data-id'));
showProjectDetail(projectId);
});
});
}
// Show project detail modal
function showProjectDetail(projectId) {
const project = projects.find(p => p.id === projectId);
if (!project) return;
// Update modal content
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;
// Update technologies
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);
});
// Show modal
detailModal.classList.remove('hidden');
}
// Add technology tag
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 = '';
// Add event listener to remove button
tag.querySelector('.remove-tech').addEventListener('click', () => {
tag.remove();
});
}
}
// Event Listeners
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();
// Here you would normally send the form data to a server
alert('Project submitted successfully!');
projectModal.classList.add('hidden');
projectForm.reset();
techTagsContainer.innerHTML = '';
});
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close modals when clicking outside
window.addEventListener('click', (e) => {
if (e.target === projectModal) {
projectModal.classList.add('hidden');
}
if (e.target === detailModal) {
detailModal.classList.add('hidden');
}
});
// Initialize
renderProjects();
// Add some sample tech tags to the form
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>