Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Groups | Campus Connect</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .group-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="flex-shrink-0 flex items-center"> | |
| <i data-feather="users" class="h-8 w-8 text-primary-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">Campus Connect</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-8"> | |
| <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a> | |
| <a href="explore.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Explore</a> | |
| <a href="events.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Events</a> | |
| <a href="messages.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Messages</a> | |
| <a href="groups.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary-500 text-sm font-medium">Groups</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Sign In</button> | |
| <button class="ml-4 bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Register</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Groups Content --> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Your Groups</h2> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| Create Group | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Group 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/1" alt="Group" class="w-full h-40 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-full p-2"> | |
| <i data-feather="users" class="h-5 w-5 text-primary-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">CS Coders Club</h3> | |
| <p class="text-sm text-gray-500">256 members</p> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">A community for computer science students to collaborate on projects and share knowledge.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Active | |
| </span> | |
| <a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-500"> | |
| View Group → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Group 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/2" alt="Group" class="w-full h-40 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-full p-2"> | |
| <i data-feather="users" class="h-5 w-5 text-primary-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">Entrepreneurs Club</h3> | |
| <p class="text-sm text-gray-500">189 members</p> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">For students interested in startups and business innovation.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Active | |
| </span> | |
| <a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-500"> | |
| View Group → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Group 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/3" alt="Group" class="w-full h-40 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-100 rounded-full p-2"> | |
| <i data-feather="users" class="h-5 w-5 text-primary-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">Biology Study Group</h3> | |
| <p class="text-sm text-gray-500">42 members</p> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">Weekly study sessions for biology students.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| New | |
| </span> | |
| <a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-500"> | |
| View Group → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Suggested Groups</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Suggested Group 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/4" alt="Group" class="w-full h-32 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-md font-medium text-gray-900">Photography Club</h3> | |
| <p class="mt-1 text-sm text-gray-500">78 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Join Group | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Suggested Group 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/5" alt="Group" class="w-full h-32 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-md font-medium text-gray-900">Debate Society</h3> | |
| <p class="mt-1 text-sm text-gray-500">112 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Join Group | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Suggested Group 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/6" alt="Group" class="w-full h-32 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-md font-medium text-gray-900">Volunteer Network</h3> | |
| <p class="mt-1 text-sm text-gray-500">156 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Join Group | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Suggested Group 4 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden group-card transition duration-300"> | |
| <img src="http://static.photos/education/640x360/7" alt="Group" class="w-full h-32 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-md font-medium text-gray-900">Film Appreciation</h3> | |
| <p class="mt-1 text-sm text-gray-500">64 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Join Group | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |