Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Campus Connect - Social Feed</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <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: { | |
| campus: { | |
| blue: '#1877F2', | |
| dark: '#1c1e21', | |
| gray: '#f0f2f5', | |
| text: '#050505', | |
| secondary: '#65676b' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom Scrollbar for a polished feel */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c1c1c1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a8a8a8; | |
| } | |
| /* Animations */ | |
| @keyframes like-bounce { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.3); } | |
| 100% { transform: scale(1); } | |
| } | |
| .animate-like { | |
| animation: like-bounce 0.3s ease-in-out; | |
| } | |
| .story-ring { | |
| background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-campus-gray text-campus-text font-sans antialiased overflow-hidden h-screen flex flex-col"> | |
| <!-- Top Navigation Bar --> | |
| <nav class="bg-white shadow-sm h-16 flex items-center justify-between px-4 sticky top-0 z-50"> | |
| <!-- Left: Logo & Search --> | |
| <div class="flex items-center gap-4 flex-1"> | |
| <a href="#" class="text-campus-blue text-3xl"><i class="fa-brands fa-facebook"></i></a> | |
| <div class="relative hidden md:block"> | |
| <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i> | |
| <input type="text" placeholder="Search Campus Connect" class="bg-campus-gray rounded-full py-2 pl-10 pr-4 w-64 focus:outline-none focus:ring-2 focus:ring-campus-blue transition-all"> | |
| </div> | |
| </div> | |
| <!-- Center: Main Nav Icons --> | |
| <div class="flex items-center justify-center gap-2 md:gap-8 flex-1 h-full"> | |
| <button class="h-full px-4 md:px-8 border-b-4 border-campus-blue text-campus-blue hover:bg-gray-100 transition-colors relative group"> | |
| <i class="fa-solid fa-house text-xl"></i> | |
| <span class="absolute top-1 right-2 bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full hidden group-hover:block">1</span> | |
| </button> | |
| <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors"> | |
| <i class="fa-solid fa-tv text-xl"></i> | |
| </button> | |
| <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors"> | |
| <i class="fa-solid fa-store text-xl"></i> | |
| </button> | |
| <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors"> | |
| <i class="fa-solid fa-users text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Right: User Actions --> | |
| <div class="flex items-center justify-end gap-3 flex-1"> | |
| <div class="bg-gray-200 rounded-full p-2 hover:bg-gray-300 cursor-pointer transition relative"> | |
| <i class="fa-solid fa-bell text-gray-800"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">3</span> | |
| </div> | |
| <div class="bg-gray-200 rounded-full p-2 hover:bg-gray-300 cursor-pointer transition"> | |
| <i class="fa-solid fa-comment-dots text-gray-800"></i> | |
| </div> | |
| <div class="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-1 rounded-full transition pr-3"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="User" class="w-9 h-9 rounded-full object-cover border border-gray-300"> | |
| <span class="font-semibold text-sm hidden lg:block">Alex</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Layout --> | |
| <div class="flex flex-1 overflow-hidden max-w-[1600px] mx-auto w-full"> | |
| <!-- Left Sidebar --> | |
| <aside class="hidden lg:flex flex-col w-1/4 pt-6 px-4 overflow-y-auto pb-20"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-9 h-9 rounded-full" alt="Profile"> | |
| <span class="font-semibold">Alex Johnson</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition text-campus-blue"> | |
| <i class="fa-solid fa-user-group w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i> | |
| <span class="font-medium">Friends</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <i class="fa-solid fa-clock-rotate-left w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i> | |
| <span class="font-medium">Memories</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <i class="fa-solid fa-bookmark w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i> | |
| <span class="font-medium">Saved</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <i class="fa-solid fa-flag w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i> | |
| <span class="font-medium">Pages</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <i class="fa-solid fa-calendar-day w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i> | |
| <span class="font-medium">Events</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="mt-6 border-t border-gray-300 pt-4"> | |
| <h3 class="text-gray-500 font-semibold text-sm mb-3 px-2">Your Shortcuts</h3> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <div class="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fa-solid fa-graduation-cap"></i> | |
| </div> | |
| <span class="font-medium text-sm">Study Grads</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <div class="w-9 h-9 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fa-solid fa-martini-glass-citrus"></i> | |
| </div> | |
| <span class="font-medium text-sm">Friday Night Mixer</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fa-solid fa-futbol"></i> | |
| </div> | |
| <span class="font-medium text-sm">Intramural Soccer</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </aside> | |
| <!-- Main Feed Area --> | |
| <main class="flex-1 flex flex-col items-center overflow-y-auto pt-6 px-0 md:px-4 pb-10 w-full max-w-2xl mx-auto"> | |
| <!-- Stories Section --> | |
| <div class="w-full flex gap-2 overflow-x-auto pb-4 px-2 no-scrollbar mb-4"> | |
| <!-- Create Story --> | |
| <div class="relative flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm overflow-hidden cursor-pointer group border border-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-3/4 object-cover group-hover:scale-105 transition duration-300"> | |
| <div class="absolute bottom-0 w-full h-1/2 bg-white flex flex-col items-center justify-end pb-3"> | |
| <div class="absolute -top-5 bg-campus-blue text-white rounded-full w-8 h-8 flex items-center justify-center border-4 border-white"> | |
| <i class="fa-solid fa-plus"></i> | |
| </div> | |
| <span class="font-semibold text-xs">Create Story</span> | |
| </div> | |
| </div> | |
| <!-- Story 1 --> | |
| <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group"> | |
| <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75"> | |
| <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Sarah M.</span> | |
| </div> | |
| <!-- Story 2 --> | |
| <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group"> | |
| <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75"> | |
| <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring"> | |
| <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Mike T.</span> | |
| </div> | |
| <!-- Story 3 --> | |
| <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group"> | |
| <img src="https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75"> | |
| <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover"> | |
| </div> | |
| <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Jessica L.</span> | |
| </div> | |
| </div> | |
| <!-- Create Post Widget --> | |
| <div class="w-full bg-white rounded-xl shadow-sm p-4 mb-4"> | |
| <div class="flex gap-3 items-center mb-3"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover"> | |
| <input type="text" placeholder="What's on your mind, Alex?" class="bg-gray-100 hover:bg-gray-200 transition flex-1 rounded-full py-2 px-4 focus:outline-none cursor-text"> | |
| </div> | |
| <div class="border-t border-gray-200 pt-3 flex justify-between"> | |
| <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center"> | |
| <i class="fa-solid fa-video text-red-500"></i> | |
| <span class="text-gray-500 font-medium text-sm">Live Video</span> | |
| </button> | |
| <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center"> | |
| <i class="fa-solid fa-images text-green-500"></i> | |
| <span class="text-gray-500 font-medium text-sm">Photo/Video</span> | |
| </button> | |
| <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center"> | |
| <i class="fa-regular fa-face-smile text-yellow-500"></i> | |
| <span class="text-gray-500 font-medium text-sm">Feeling</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feed Post --> | |
| <div class="w-full bg-white rounded-xl shadow-sm mb-4 overflow-hidden"> | |
| <!-- Post Header --> | |
| <div class="p-4 flex justify-between items-start"> | |
| <div class="flex gap-3"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover border border-gray-200"> | |
| <div class="absolute -bottom-1 -right-1 bg-blue-500 w-3 h-3 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-sm hover:underline cursor-pointer">Marcus Chen</h4> | |
| <div class="flex items-center gap-1 text-xs text-gray-500"> | |
| <span>2 hrs</span> | |
| <span>·</span> | |
| <i class="fa-solid fa-earth-americas"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 w-8 h-8 rounded-full flex items-center justify-center transition"> | |
| <i class="fa-solid fa-ellipsis"></i> | |
| </button> | |
| </div> | |
| <!-- Post Content --> | |
| <div class="px-4 pb-3"> | |
| <p class="text-sm mb-3">Finally finished our group project! Couldn't have done it without this amazing crew. Late nights at the library paid off! 📚✨ <span class="text-campus-blue cursor-pointer hover:underline">#StudyGrads</span> <span class="text-campus-blue cursor-pointer hover:underline">#UniversityLife</span></p> | |
| </div> | |
| <!-- Post Image (The Core Request) --> | |
| <div class="w-full relative group cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=90" alt="Students on Campus Quad" class="w-full h-auto max-h-[600px] object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-5 transition duration-300"></div> | |
| </div> | |
| <!-- Post Stats --> | |
| <div class="px-4 py-2 flex justify-between items-center border-b border-gray-100"> | |
| <div class="flex items-center gap-1"> | |
| <div class="flex -space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs border border-white z-20"><i class="fa-solid fa-thumbs-up"></i></div> | |
| <div class="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center text-xs border border-white z-10"><i class="fa-solid fa-heart"></i></div> | |
| </div> | |
| <span class="text-sm text-gray-500 hover:underline cursor-pointer ml-1" id="like-count-1">124</span> | |
| </div> | |
| <div class="flex gap-3 text-sm text-gray-500"> | |
| <span class="hover:underline cursor-pointer">12 Comments</span> | |
| <span class="hover:underline cursor-pointer">5 Shares</span> | |
| </div> | |
| </div> | |
| <!-- Post Actions --> | |
| <div class="px-2 py-1 flex justify-between"> | |
| <button onclick="toggleLike(this)" class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-regular fa-thumbs-up text-xl group-hover:text-campus-blue transition-colors"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-regular fa-comment text-xl group-hover:text-gray-700 transition-colors"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-solid fa-share text-xl group-hover:text-green-600 transition-colors"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Second Post (Event) --> | |
| <div class="w-full bg-white rounded-xl shadow-sm mb-4 overflow-hidden"> | |
| <div class="p-4 flex justify-between items-start"> | |
| <div class="flex gap-3"> | |
| <img src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-bold text-sm hover:underline cursor-pointer">Campus Events</h4> | |
| <div class="flex items-center gap-1 text-xs text-gray-500"> | |
| <span>Sponsored</span> | |
| <span>·</span> | |
| <i class="fa-solid fa-earth-americas"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 w-8 h-8 rounded-full flex items-center justify-center transition"> | |
| <i class="fa-solid fa-ellipsis"></i> | |
| </button> | |
| </div> | |
| <div class="px-4 pb-3"> | |
| <p class="text-sm mb-3">Don't miss the Friday Night Mixer this week! Live music, food trucks, and great company. See you there! 🎉</p> | |
| </div> | |
| <div class="w-full bg-gray-100 border-t border-b border-gray-200 flex flex-col"> | |
| <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" class="w-full h-64 object-cover"> | |
| <div class="p-3 bg-white"> | |
| <div class="text-xs text-gray-500 uppercase font-semibold">Student Union</div> | |
| <div class="font-bold text-lg">Friday Night Mixer</div> | |
| <div class="text-sm text-gray-500">Fri, Oct 24, 8:00 PM – 11:00 PM</div> | |
| </div> | |
| </div> | |
| <div class="px-2 py-1 flex justify-between border-t border-gray-100"> | |
| <button onclick="toggleLike(this)" class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-regular fa-thumbs-up text-xl group-hover:text-campus-blue transition-colors"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-regular fa-comment text-xl group-hover:text-gray-700 transition-colors"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group"> | |
| <i class="fa-solid fa-share text-xl group-hover:text-green-600 transition-colors"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Sidebar (Contacts) --> | |
| <aside class="hidden xl:block w-1/4 pt-6 px-4 overflow-y-auto pb-20"> | |
| <div class="flex justify-between items-center mb-4 px-2"> | |
| <h3 class="font-semibold text-gray-500 text-sm">Contacts</h3> | |
| <div class="flex gap-2 text-gray-500"> | |
| <i class="fa-solid fa-video hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i> | |
| <i class="fa-solid fa-magnifying-glass hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i> | |
| <i class="fa-solid fa-ellipsis hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <span class="font-medium text-sm">Emily Zhang</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <span class="font-medium text-sm">David Kim</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-gray-400 border-2 border-white rounded-full"></div> | |
| </div> | |
| <span class="font-medium text-sm">Sarah Jenkins</span> | |
| <span class="text-xs text-gray-400 ml-auto">1h</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <span class="font-medium text-sm">Chris Evans</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="mt-6 border-t border-gray-300 pt-4"> | |
| <h3 class="font-semibold text-gray-500 text-sm mb-3 px-2">Group Conversations</h3> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fa-solid fa-users text-gray-600 text-xs"></i> | |
| </div> | |
| <span class="font-medium text-sm">CS 101 Study Group</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fa-solid fa-plus text-gray-600 text-xs"></i> | |
| </div> | |
| <span class="font-medium text-sm">Create New Group</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </aside> | |
| </div> | |
| <!-- Floating Chat Widget (Visual Only) --> | |
| <div class="fixed bottom-0 right-4 bg-white w-80 shadow-lg rounded-t-lg border border-gray-200 hidden md:flex flex-col z-50"> | |
| <div class="flex items-center justify-between p-2 bg-gray-100 rounded-t-lg cursor-pointer hover:bg-gray-200 transition"> | |
| <div class="flex items-center gap-2"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <span class="font-semibold text-sm">Emily Zhang</span> | |
| </div> | |
| <div class="flex gap-2 text-gray-500"> | |
| <i class="fa-solid fa-video hover:bg-gray-300 p-1 rounded-full text-xs"></i> | |
| <i class="fa-solid fa-phone hover:bg-gray-300 p-1 rounded-full text-xs"></i> | |
| <i class="fa-solid fa-xmark hover:bg-gray-300 p-1 rounded-full text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="h-64 bg-white p-2 overflow-y-auto flex flex-col gap-2"> | |
| <div class="self-start bg-gray-100 p-2 rounded-lg rounded-tl-none text-sm max-w-[80%]">Hey! Are you coming to the mixer?</div> | |
| <div class="self-end bg-campus-blue text-white p-2 rounded-lg rounded-tr-none text-sm max-w-[80%]">Yeah, I'll be there around 8!</div> | |
| </div> | |
| <div class="p-2 border-t border-gray-200 flex gap-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-circle-plus"></i></button> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-image"></i></button> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-note-sticky"></i></button> | |
| <input type="text" placeholder="Aa" class="bg-gray-100 rounded-full px-3 py-1 text-sm flex-1 focus:outline-none"> | |
| <button class="text-campus-blue"><i class="fa-solid fa-thumbs-up"></i></button> | |
| </div> | |
| </div> | |
| <script> | |
| // Interactive Like Button Logic | |
| function toggleLike(btn) { | |
| const icon = btn.querySelector('i'); | |
| const text = btn.querySelector('span'); | |
| // Toggle State | |
| if (icon.classList.contains('fa-regular')) { | |
| // Like | |
| icon.classList.remove('fa-regular'); | |
| icon.classList.add('fa-solid', 'text-campus-blue', 'animate-like'); | |
| text.classList.add('text-campus-blue'); | |
| // Remove animation class after it plays so it can play again | |
| setTimeout(() => { | |
| icon.classList.remove('animate-like'); | |
| }, 300); | |
| // Update count (Simulated) | |
| const countSpan = document.getElementById('like-count-1'); | |
| if(countSpan) { | |
| let count = parseInt(countSpan.innerText); | |
| countSpan.innerText = count + 1; | |
| } | |
| } else { | |
| // Unlike | |
| icon.classList.remove('fa-solid', 'text-campus-blue'); | |
| icon.classList.add('fa-regular'); | |
| text.classList.remove('text-campus-blue'); | |
| // Update count (Simulated) | |
| const countSpan = document.getElementById('like-count-1'); | |
| if(countSpan) { | |
| let count = parseInt(countSpan.innerText); | |
| countSpan.innerText = count - 1; | |
| } | |
| } | |
| } | |
| // Simple Search Focus Effect | |
| const searchInput = document.querySelector('input[type="text"]'); | |
| if(searchInput) { | |
| searchInput.addEventListener('focus', () => { | |
| searchInput.parentElement.classList.add('ring-2', 'ring-campus-blue', 'rounded-full'); | |
| }); | |
| searchInput.addEventListener('blur', () => { | |
| searchInput.parentElement.classList.remove('ring-2', 'ring-campus-blue', 'rounded-full'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |