|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SocialSphere | Connect with Friends</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/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; |
|
|
} |
|
|
.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; |
|
|
} |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans antialiased"> |
|
|
|
|
|
<nav class="bg-white shadow-sm fixed w-full z-10"> |
|
|
<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"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<h1 class="text-xl font-bold gradient-text">SocialSphere</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="hidden md:ml-6 md:flex md:space-x-8"> |
|
|
<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
<i data-feather="home" class="mr-1"></i> Home |
|
|
</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
<i data-feather="users" class="mr-1"></i> Friends |
|
|
</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
<i data-feather="bell" class="mr-1"></i> Notifications |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search SocialSphere" class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white w-64"> |
|
|
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i data-feather="message-circle"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button type="button" class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile"> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto pt-20 pb-10 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6"> |
|
|
|
|
|
<div class="md:col-span-3"> |
|
|
<div class="bg-white rounded-lg shadow p-4 sticky top-24"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile"> |
|
|
<span class="ml-3 font-medium">John Doe</span> |
|
|
</div> |
|
|
<nav class="space-y-2"> |
|
|
<a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
<span class="ml-3">Profile</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
|
|
<i data-feather="users" class="w-5 h-5"></i> |
|
|
<span class="ml-3">Friends</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
|
|
<i data-feather="image" class="w-5 h-5"></i> |
|
|
<span class="ml-3">Photos</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
|
|
<i data-feather="calendar" class="w-5 h-5"></i> |
|
|
<span class="ml-3">Events</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
|
|
<i data-feather="bookmark" class="w-5 h-5"></i> |
|
|
<span class="ml-3">Saved</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-6 space-y-4"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile"> |
|
|
<input type="text" placeholder="What's on your mind?" class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"> |
|
|
</div> |
|
|
<div class="flex justify-between mt-4 pt-4 border-t"> |
|
|
<button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg"> |
|
|
<i data-feather="video" class="text-red-500 mr-2"></i> Live Video |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg"> |
|
|
<i data-feather="image" class="text-green-500 mr-2"></i> Photo/Video |
|
|
</button> |
|
|
<button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg"> |
|
|
<i data-feather="smile" class="text-yellow-500 mr-2"></i> Feeling/Activity |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 overflow-hidden"> |
|
|
<div class="flex space-x-2 overflow-x-auto pb-2 custom-scrollbar"> |
|
|
<div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/1" alt="Story"> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile"> |
|
|
</div> |
|
|
<p class="text-white text-sm font-medium">Create Story</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/2" alt="Story"> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/43" alt="Profile"> |
|
|
</div> |
|
|
<p class="text-white text-sm font-medium">Jane Smith</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/3" alt="Story"> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile"> |
|
|
</div> |
|
|
<p class="text-white text-sm font-medium">Mike Johnson</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/4" alt="Story"> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/45" alt="Profile"> |
|
|
</div> |
|
|
<p class="text-white text-sm font-medium">Sarah Williams</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow" data-aos="fade-up"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/43" alt="Profile"> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">Jane Smith</p> |
|
|
<p class="text-gray-500 text-sm">2 hrs ago · <i data-feather="globe" class="w-3 h-3 inline"></i></p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="more-horizontal"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3">Just visited this amazing place! The views were breathtaking. Can't wait to go back again soon!</p> |
|
|
<img class="mt-3 w-full rounded-lg" src="http://static.photos/travel/640x360/5" alt="Post"> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t border-b"> |
|
|
<div class="flex items-center justify-between text-gray-500"> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="thumbs-up" class="w-4 h-4"></i> |
|
|
<span>Like</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="message-square" class="w-4 h-4"></i> |
|
|
<span>Comment</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="share-2" class="w-4 h-4"></i> |
|
|
<span>Share</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile"> |
|
|
<input type="text" placeholder="Write a comment..." class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow" data-aos="fade-up"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile"> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">Mike Johnson</p> |
|
|
<p class="text-gray-500 text-sm">5 hrs ago · <i data-feather="users" class="w-3 h-3 inline"></i></p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="more-horizontal"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3">Check out this new recipe I tried today! It turned out amazing and was super easy to make.</p> |
|
|
<div class="mt-3 grid grid-cols-2 gap-2"> |
|
|
<img class="w-full rounded-lg" src="http://static.photos/food/320x240/6" alt="Food"> |
|
|
<img class="w-full rounded-lg" src="http://static.photos/food/320x240/7" alt="Food"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t border-b"> |
|
|
<div class="flex items-center justify-between text-gray-500"> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="thumbs-up" class="w-4 h-4"></i> |
|
|
<span>Like</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="message-square" class="w-4 h-4"></i> |
|
|
<span>Comment</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded"> |
|
|
<i data-feather="share-2" class="w-4 h-4"></i> |
|
|
<span>Share</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile"> |
|
|
<input type="text" placeholder="Write a comment..." class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-3 space-y-4"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h3 class="font-medium text-gray-900 mb-3">Sponsored</h3> |
|
|
<div class="space-y-3"> |
|
|
<a href="#" class="flex items-start"> |
|
|
<img class="h-20 w-20 rounded-lg object-cover" src="http://static.photos/retail/200x200/1" alt="Ad"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Summer Sale - Up to 50% Off</p> |
|
|
<p class="text-xs text-gray-500">example.com</p> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="flex items-start"> |
|
|
<img class="h-20 w-20 rounded-lg object-cover" src="http://static.photos/retail/200x200/2" alt="Ad"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">New Collection Just Dropped</p> |
|
|
<p class="text-xs text-gray-500">fashionbrand.com</p> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h3 class="font-medium text-gray-900 mb-3">Birthdays</h3> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="gift" class="text-pink-500 mr-2"></i> |
|
|
<p class="text-sm"><span class="font-medium">Sarah Williams</span> and <span class="font-medium">2 others</span> have birthdays today.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<h3 class="font-medium text-gray-900">Contacts</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="video" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="search" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="more-horizontal" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3 max-h-96 overflow-y-auto custom-scrollbar"> |
|
|
<div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/45" alt="Profile"> |
|
|
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span> |
|
|
</div> |
|
|
<span class="ml-3 text-sm">Sarah Williams</span> |
|
|
</div> |
|
|
<div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/46" alt="Profile"> |
|
|
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span> |
|
|
</div> |
|
|
<span class="ml-3 text-sm">David Brown</span> |
|
|
</div> |
|
|
<div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/47" alt="Profile"> |
|
|
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-gray-500 border border-white"></span> |
|
|
</div> |
|
|
<span class="ml-3 text-sm">Emily Davis</span> |
|
|
</div> |
|
|
<div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/48" alt="Profile"> |
|
|
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span> |
|
|
</div> |
|
|
<span class="ml-3 text-sm">Robert Wilson</span> |
|
|
</div> |
|
|
<div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/49" alt="Profile"> |
|
|
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-gray-500 border border-white"></span> |
|
|
</div> |
|
|
<span class="ml-3 text-sm">Jennifer Lee</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
</script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
|
|
|
