Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SocialConnect - Connect with Friends</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .story-item { | |
| flex: 0 0 auto; | |
| width: 110px; | |
| } | |
| .post-actions:hover .post-action-text { | |
| color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex items-center justify-between h-14"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <h1 class="text-blue-600 font-bold text-2xl">SocialConnect</h1> | |
| </div> | |
| <!-- Search --> | |
| <div class="hidden md:flex items-center bg-gray-100 rounded-full px-3 py-2 flex-1 mx-4 max-w-xl"> | |
| <i data-feather="search" class="text-gray-500 mr-2"></i> | |
| <input type="text" placeholder="Search SocialConnect" class="bg-transparent border-none outline-none w-full"> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="flex items-center space-x-2 md:space-x-6"> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="home" class="w-6 h-6 text-blue-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="tv" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="shopping-bag" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="users" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="bell" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <img src="http://static.photos/people/40x40/1" alt="Profile" class="w-8 h-8 rounded-full"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Search --> | |
| <div class="md:hidden bg-white shadow-sm fixed top-14 left-0 right-0 z-40 p-2"> | |
| <div class="flex items-center bg-gray-100 rounded-full px-3 py-2"> | |
| <i data-feather="search" class="text-gray-500 mr-2"></i> | |
| <input type="text" placeholder="Search SocialConnect" class="bg-transparent border-none outline-none w-full"> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="max-w-6xl mx-auto pt-20 pb-4 px-4 flex flex-col md:flex-row"> | |
| <!-- Left Sidebar --> | |
| <aside class="hidden md:block w-64 pr-4 sticky top-20 h-screen overflow-y-auto custom-scrollbar"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <img src="http://static.photos/people/40x40/1" alt="Profile" class="w-8 h-8 rounded-full mr-3"> | |
| <span class="font-medium">Your Profile</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="users" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Friends</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="message-square" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Messenger</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="flag" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Pages</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="calendar" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Events</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="clock" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Memories</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="bookmark" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Saved</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="settings" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| </aside> | |
| <!-- Center Content --> | |
| <div class="flex-1 md:mx-4"> | |
| <!-- Stories --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4"> | |
| <div class="flex space-x-2 overflow-x-auto pb-2 custom-scrollbar"> | |
| <!-- Create Story --> | |
| <div class="story-item relative rounded-lg overflow-hidden bg-gray-100"> | |
| <div class="h-40 bg-gradient-to-b from-gray-200 to-gray-300"></div> | |
| <div class="absolute top-0 left-0 right-0 p-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mx-auto"> | |
| <i data-feather="plus" class="text-white"></i> | |
| </div> | |
| </div> | |
| <div class="p-2 text-center"> | |
| <p class="text-sm font-medium">Create Story</p> | |
| </div> | |
| </div> | |
| <!-- Stories --> | |
| <div class="story-item relative rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/travel/110x160/1" alt="Story" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 left-2"> | |
| <img src="http://static.photos/people/40x40/2" alt="User" class="w-10 h-10 rounded-full border-4 border-blue-500"> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-white text-sm font-medium">John Doe</p> | |
| </div> | |
| </div> | |
| <div class="story-item relative rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/travel/110x160/2" alt="Story" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 left-2"> | |
| <img src="http://static.photos/people/40x40/3" alt="User" class="w-10 h-10 rounded-full border-4 border-blue-500"> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-white text-sm font-medium">Jane Smith</p> | |
| </div> | |
| </div> | |
| <div class="story-item relative rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/travel/110x160/3" alt="Story" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 left-2"> | |
| <img src="http://static.photos/people/40x40/4" alt="User" class="w-10 h-10 rounded-full border-4 border-blue-500"> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-white text-sm font-medium">Mike Johnson</p> | |
| </div> | |
| </div> | |
| <div class="story-item relative rounded-lg overflow-hidden"> | |
| <img src="http://static.photos/travel/110x160/4" alt="Story" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 left-2"> | |
| <img src="http://static.photos/people/40x40/5" alt="User" class="w-10 h-10 rounded-full border-4 border-blue-500"> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-white text-sm font-medium">Sarah Williams</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full mr-2"> | |
| <input type="text" placeholder="What's on your mind?" class="bg-gray-100 rounded-full px-4 py-2 flex-1 outline-none"> | |
| </div> | |
| <div class="border-t border-gray-200 pt-3"> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="video" class="text-red-500 mr-2"></i> | |
| <span>Live Video</span> | |
| </button> | |
| <button class="flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="image" class="text-green-500 mr-2"></i> | |
| <span>Photo/Video</span> | |
| </button> | |
| <button class="flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="smile" class="text-yellow-500 mr-2"></i> | |
| <span>Feeling/Activity</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4"> | |
| <!-- Post Header --> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/40x40/6" alt="User" class="w-10 h-10 rounded-full mr-2"> | |
| <div> | |
| <p class="font-medium">Alex Turner</p> | |
| <p class="text-gray-500 text-xs">2 hrs ago · <i data-feather="globe" class="w-3 h-3 inline"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 rounded-full p-1"> | |
| <i data-feather="more-horizontal"></i> | |
| </button> | |
| </div> | |
| <!-- Post Content --> | |
| <p class="mb-3">Just had an amazing day at the beach! The weather was perfect and the water was so refreshing. Can't wait to go back again soon! 🏖️</p> | |
| <img src="http://static.photos/travel/640x360/1" alt="Post" class="w-full rounded-lg mb-3"> | |
| <!-- Post Stats --> | |
| <div class="flex items-center justify-between text-gray-500 text-sm mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white mr-1"> | |
| <i data-feather="thumbs-up" class="w-3 h-3"></i> | |
| </div> | |
| <span>124</span> | |
| </div> | |
| <div> | |
| <span>23 comments · 5 shares</span> | |
| </div> | |
| </div> | |
| <!-- Post Actions --> | |
| <div class="border-t border-gray-200 pt-2"> | |
| <div class="flex justify-between"> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="thumbs-up" class="mr-2"></i> | |
| <span class="post-action-text">Like</span> | |
| </button> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="message-square" class="mr-2"></i> | |
| <span class="post-action-text">Comment</span> | |
| </button> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="share-2" class="mr-2"></i> | |
| <span class="post-action-text">Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another Post --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4"> | |
| <!-- Post Header --> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/40x40/7" alt="User" class="w-10 h-10 rounded-full mr-2"> | |
| <div> | |
| <p class="font-medium">Emma Watson</p> | |
| <p class="text-gray-500 text-xs">5 hrs ago · <i data-feather="users" class="w-3 h-3 inline"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 rounded-full p-1"> | |
| <i data-feather="more-horizontal"></i> | |
| </button> | |
| </div> | |
| <!-- Post Content --> | |
| <p class="mb-3">Check out this delicious recipe I tried today! It's a vegan chocolate cake that's super easy to make and tastes incredible. Recipe in the comments! 🍫</p> | |
| <img src="http://static.photos/food/640x360/1" alt="Post" class="w-full rounded-lg mb-3"> | |
| <!-- Post Stats --> | |
| <div class="flex items-center justify-between text-gray-500 text-sm mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white mr-1"> | |
| <i data-feather="thumbs-up" class="w-3 h-3"></i> | |
| </div> | |
| <span>89</span> | |
| </div> | |
| <div> | |
| <span>42 comments · 8 shares</span> | |
| </div> | |
| </div> | |
| <!-- Post Actions --> | |
| <div class="border-t border-gray-200 pt-2"> | |
| <div class="flex justify-between"> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="thumbs-up" class="mr-2"></i> | |
| <span class="post-action-text">Like</span> | |
| </button> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="message-square" class="mr-2"></i> | |
| <span class="post-action-text">Comment</span> | |
| </button> | |
| <button class="post-actions flex items-center justify-center flex-1 text-gray-600 hover:bg-gray-100 rounded-lg py-1"> | |
| <i data-feather="share-2" class="mr-2"></i> | |
| <span class="post-action-text">Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <aside class="hidden lg:block w-80 pl-4 sticky top-20 h-screen overflow-y-auto custom-scrollbar"> | |
| <!-- Sponsored --> | |
| <div class="mb-4"> | |
| <h3 class="text-gray-500 font-medium mb-2">Sponsored</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/retail/120x120/1" alt="Ad" class="w-32 h-20 rounded-lg object-cover mr-2"> | |
| <div> | |
| <p class="font-medium">Summer Sale - 50% Off</p> | |
| <p class="text-gray-500 text-sm">fashionstore.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/retail/120x120/2" alt="Ad" class="w-32 h-20 rounded-lg object-cover mr-2"> | |
| <div> | |
| <p class="font-medium">New Smartphone Launch</p> | |
| <p class="text-gray-500 text-sm">techgadgets.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Birthdays --> | |
| <div class="mb-4"> | |
| <h3 class="text-gray-500 font-medium mb-2">Birthdays</h3> | |
| <div class="flex items-center"> | |
| <i data-feather="gift" class="text-blue-500 mr-2"></i> | |
| <p><span class="font-medium">Sarah Johnson</span> and <span class="font-medium">2 others</span> have birthdays today.</p> | |
| </div> | |
| </div> | |
| <!-- Contacts --> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-gray-500 font-medium">Contacts</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:bg-gray-200 rounded-full p-1"> | |
| <i data-feather="video" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-500 hover:bg-gray-200 rounded-full p-1"> | |
| <i data-feather="search" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-500 hover:bg-gray-200 rounded-full p-1"> | |
| <i data-feather="more-horizontal" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/8" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>Michael Brown</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/9" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>Lisa Ray</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/10" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>David Miller</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/11" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>Sophia Wilson</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/12" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>Robert Taylor</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/40x40/13" alt="User" class="w-8 h-8 rounded-full mr-2"> | |
| <div class="absolute bottom-0 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <span>Olivia Martinez</span> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Mobile Bottom Navigation --> | |
| <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-2 z-50"> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="home" class="w-6 h-6 text-blue-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="users" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="tv" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="bell" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full hover:bg-gray-200"> | |
| <i data-feather="menu" class="w-6 h-6 text-gray-600"></i> | |
| </a> | |
| </nav> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Adjust main content padding for mobile bottom nav | |
| if (window.innerWidth < 768) { | |
| document.querySelector('main').style.paddingBottom = '60px'; | |
| } | |
| </script> | |
| </body> | |
| </html> | |