Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SocialFace - Connect with Friends</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"> | |
| <style> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Story ring gradient */ | |
| .story-ring { | |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |
| } | |
| /* Custom animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| /* Dark mode toggle */ | |
| .dark-mode { | |
| background-color: #1a1a1a; | |
| color: #f0f0f0; | |
| } | |
| .dark-mode .post { | |
| background-color: #2d2d2d; | |
| border-color: #444; | |
| } | |
| .dark-mode .sidebar { | |
| background-color: #242424; | |
| } | |
| .dark-mode .search-bar { | |
| background-color: #3a3a3a; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50 dark:bg-gray-800"> | |
| <div class="container mx-auto px-4 py-2 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <i class="fab fa-facebook text-blue-600 text-3xl mr-2 dark:text-blue-400"></i> | |
| <span class="text-xl font-bold text-blue-600 dark:text-blue-400">SocialFace</span> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="hidden md:flex flex-1 mx-4"> | |
| <div class="relative w-full max-w-xl"> | |
| <input type="text" placeholder="Search SocialFace" | |
| class="w-full py-2 px-4 pl-10 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500 dark:text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex items-center space-x-2 md:space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-home text-2xl text-gray-700 dark:text-gray-300"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-tv text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-store text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-users text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i class="fas fa-gamepad text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <!-- Profile and Menu --> | |
| <div class="flex items-center ml-2"> | |
| <div class="relative"> | |
| <button id="profile-menu" class="flex items-center space-x-1 focus:outline-none"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <i class="fas fa-caret-down text-gray-700 dark:text-gray-300"></i> | |
| </button> | |
| <!-- Dropdown Menu --> | |
| <div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 dark:bg-gray-700"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"> | |
| <i class="fas fa-user mr-2"></i> Profile | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"> | |
| <i class="fas fa-moon mr-2"></i> Dark Mode | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-4 flex flex-col md:flex-row"> | |
| <!-- Left Sidebar --> | |
| <aside class="w-full md:w-1/4 lg:w-1/5 pr-0 md:pr-4 mb-4 md:mb-0"> | |
| <div class="bg-white rounded-lg shadow p-4 sticky top-20 dark:bg-gray-800"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="font-medium dark:text-gray-300">John Doe</span> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-user-friends text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Friends</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-flag text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Pages</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-users text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Groups</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-store text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Marketplace</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-video text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Watch</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-calendar-alt text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Events</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-bookmark text-blue-500 w-6 text-center dark:text-blue-400"></i> | |
| <span class="dark:text-gray-300">Saved</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="border-t border-gray-200 mt-4 pt-4 dark:border-gray-700"> | |
| <h3 class="font-medium text-gray-500 mb-2 dark:text-gray-400">Your Shortcuts</h3> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="w-6 h-6 rounded overflow-hidden"> | |
| <img src="https://picsum.photos/200" alt="Group" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="dark:text-gray-300">Travel Enthusiasts</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="w-6 h-6 rounded overflow-hidden"> | |
| <img src="https://picsum.photos/201" alt="Group" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="dark:text-gray-300">Tech News</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Feed --> | |
| <section class="w-full md:w-2/4 lg:w-3/5 mb-4 md:mb-0 md:px-4"> | |
| <!-- Stories --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4 overflow-x-auto dark:bg-gray-800"> | |
| <div class="flex space-x-2"> | |
| <!-- Create Story --> | |
| <div class="flex-shrink-0 w-28 h-48 rounded-lg relative overflow-hidden bg-gray-100 dark:bg-gray-700"> | |
| <img src="https://picsum.photos/300/400" alt="Story" class="w-full h-32 object-cover"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm font-medium text-center dark:text-gray-300">Create Story</p> | |
| </div> | |
| </div> | |
| <!-- Stories from friends --> | |
| <div class="flex-shrink-0 w-28 h-48 rounded-lg relative overflow-hidden"> | |
| <img src="https://picsum.photos/301/400" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full story-ring flex items-center justify-center p-0.5"> | |
| <div class="w-full h-full rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-sm font-medium text-white">Sarah Johnson</p> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-28 h-48 rounded-lg relative overflow-hidden"> | |
| <img src="https://picsum.photos/302/400" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full story-ring flex items-center justify-center p-0.5"> | |
| <div class="w-full h-full rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-sm font-medium text-white">Mike Peterson</p> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-28 h-48 rounded-lg relative overflow-hidden"> | |
| <img src="https://picsum.photos/303/400" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full story-ring flex items-center justify-center p-0.5"> | |
| <div class="w-full h-full rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-sm font-medium text-white">Emma Wilson</p> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-28 h-48 rounded-lg relative overflow-hidden"> | |
| <img src="https://picsum.photos/304/400" alt="Story" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full story-ring flex items-center justify-center p-0.5"> | |
| <div class="w-full h-full rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-2 left-2 right-2"> | |
| <p class="text-sm font-medium text-white">David Kim</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-lg shadow mb-4 p-4 dark:bg-gray-800"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <input type="text" placeholder="What's on your mind?" | |
| class="flex-1 py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"> | |
| </div> | |
| <div class="border-t border-gray-200 pt-3 flex justify-between dark:border-gray-700"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:bg-gray-100 px-4 py-1 rounded-lg dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-video text-red-500"></i> | |
| <span>Live Video</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:bg-gray-100 px-4 py-1 rounded-lg dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-images text-green-500"></i> | |
| <span>Photo/Video</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:bg-gray-100 px-4 py-1 rounded-lg dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-smile text-yellow-500"></i> | |
| <span>Feeling/Activity</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="space-y-4"> | |
| <!-- Post 1 --> | |
| <div class="bg-white rounded-lg shadow post dark:bg-gray-800 dark:border-gray-700"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">2 hrs ago · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 p-2 rounded-full dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3 dark:text-gray-300">Just visited this amazing place! The views were breathtaking. Can't wait to go back again soon! 😍 #travel #adventure</p> | |
| <div class="rounded-lg overflow-hidden mb-3"> | |
| <img src="https://picsum.photos/800/500" alt="Post" class="w-full h-auto"> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-500 border-b border-gray-200 pb-2 dark:border-gray-700"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| <span class="text-sm dark:text-gray-400">120</span> | |
| </div> | |
| <div class="text-sm dark:text-gray-400"> | |
| <span>24 comments</span> | |
| <span class="ml-2">5 shares</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between pt-2"> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Comments --> | |
| <div class="bg-gray-50 p-4 border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600"> | |
| <div class="flex items-center space-x-2 mb-3"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1 relative"> | |
| <input type="text" placeholder="Write a comment..." | |
| class="w-full py-2 px-4 bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm dark:bg-gray-600 dark:text-white"> | |
| <div class="absolute right-3 top-2 flex space-x-1 text-gray-400"> | |
| <i class="fas fa-smile"></i> | |
| <i class="fas fa-camera"></i> | |
| <i class="fas fa-gift"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Comment 1 --> | |
| <div class="flex space-x-2"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 flex-1 dark:bg-gray-600"> | |
| <p class="font-medium text-sm dark:text-gray-300">Mike Peterson</p> | |
| <p class="text-sm dark:text-gray-300">Wow! Where is this place? Looks amazing!</p> | |
| <div class="flex items-center space-x-3 text-xs text-gray-500 mt-1 dark:text-gray-400"> | |
| <span>Like</span> | |
| <span>Reply</span> | |
| <span>2h</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comment 2 --> | |
| <div class="flex space-x-2"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 flex-1 dark:bg-gray-600"> | |
| <p class="font-medium text-sm dark:text-gray-300">Emma Wilson</p> | |
| <p class="text-sm dark:text-gray-300">I've been there last summer! The sunset views are incredible 😊</p> | |
| <div class="flex items-center space-x-3 text-xs text-gray-500 mt-1 dark:text-gray-400"> | |
| <span>Like</span> | |
| <span>Reply</span> | |
| <span>1h</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="bg-white rounded-lg shadow post dark:bg-gray-800 dark:border-gray-700"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">David Kim</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">5 hrs ago · <i class="fas fa-user-friends"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 hover:bg-gray-100 p-2 rounded-full dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-3 dark:text-gray-300">Check out this new tech gadget I just got! The features are insane and it's so user-friendly. What do you guys think about it?</p> | |
| <div class="rounded-lg overflow-hidden mb-3 border border-gray-200 dark:border-gray-700"> | |
| <img src="https://picsum.photos/800/400" alt="Post" class="w-full h-auto"> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-500 border-b border-gray-200 pb-2 dark:border-gray-700"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| <span class="text-sm dark:text-gray-400">85</span> | |
| </div> | |
| <div class="text-sm dark:text-gray-400"> | |
| <span>12 comments</span> | |
| <span class="ml-2">3 shares</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between pt-2"> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center justify-center space-x-2 w-full py-1 rounded-lg hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right Sidebar --> | |
| <aside class="w-full md:w-1/4 lg:w-1/5"> | |
| <div class="bg-white rounded-lg shadow p-4 sticky top-20 dark:bg-gray-800"> | |
| <!-- Sponsored --> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-500 mb-2 dark:text-gray-400">Sponsored</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg dark:hover:bg-gray-700"> | |
| <div class="w-32 h-20 rounded overflow-hidden"> | |
| <img src="https://picsum.photos/200/120" alt="Ad" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium dark:text-gray-300">Summer Sale - 50% Off</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">example.com</p> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg dark:hover:bg-gray-700"> | |
| <div class="w-32 h-20 rounded overflow-hidden"> | |
| <img src="https://picsum.photos/201/120" alt="Ad" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium dark:text-gray-300">New Smartphone Launch</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">techstore.com</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Birthdays --> | |
| <div class="mb-6"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <i class="fas fa-birthday-cake text-blue-500 dark:text-blue-400"></i> | |
| <h3 class="font-medium dark:text-gray-300">Birthdays</h3> | |
| </div> | |
| <p class="text-sm dark:text-gray-300"><span class="font-medium">Sarah Johnson</span> and <span class="font-medium">2 others</span> have birthdays today.</p> | |
| </div> | |
| <!-- Contacts --> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium text-gray-500 dark:text-gray-400">Contacts</h3> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center dark:hover:bg-gray-700"> | |
| <i class="fas fa-video text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center dark:hover:bg-gray-700"> | |
| <i class="fas fa-search text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center dark:hover:bg-gray-700"> | |
| <i class="fas fa-ellipsis-h text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-2 max-h-96 overflow-y-auto"> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-500 border-2 border-white dark:border-gray-800"></div> | |
| </div> | |
| <span class="dark:text-gray-300">Sarah Johnson</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-500 border-2 border-white dark:border-gray-800"></div> | |
| </div> | |
| <span class="dark:text-gray-300">Mike Peterson</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-gray-500 border-2 border-white dark:border-gray-800"></div> | |
| </div> | |
| <span class="dark:text-gray-300">Emma Wilson</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-500 border-2 border-white dark:border-gray-800"></div> | |
| </div> | |
| <span class="dark:text-gray-300">David Kim</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Friend" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-gray-500 border-2 border-white dark:border-gray-800"></div> | |
| </div> | |
| <span class="dark:text-gray-300">Lisa Wong</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg dark:bg-gray-800"> | |
| <div class="flex justify-around py-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-home text-2xl text-blue-500 dark:text-blue-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-users text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-bell text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-envelope text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-bars text-2xl text-gray-500 dark:text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle dropdown menu | |
| document.getElementById('profile-menu').addEventListener('click', function() { | |
| document.getElementById('dropdown-menu').classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const dropdown = document.getElementById('dropdown-menu'); | |
| const button = document.getElementById('profile-menu'); | |
| if (!button.contains(event.target) && !dropdown.contains(event.target)) { | |
| dropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Dark mode toggle | |
| const darkModeToggle = document.createElement('button'); | |
| darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| darkModeToggle.className = 'p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700'; | |
| darkModeToggle.addEventListener('click', function() { | |
| document.body.classList.toggle('dark-mode'); | |
| if (document.body.classList.contains('dark-mode')) { | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| localStorage.setItem('darkMode', 'enabled'); | |
| } else { | |
| darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| localStorage.setItem('darkMode', 'disabled'); | |
| } | |
| }); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'enabled') { | |
| document.body.classList.add('dark-mode'); | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| } | |
| // Add dark mode toggle to dropdown menu | |
| const darkModeMenuItem = document.querySelector('#dropdown-menu a:nth-child(3)'); | |
| darkModeMenuItem.parentNode.replaceChild(darkModeToggle, darkModeMenuItem); | |
| // Add fade-in animation to posts when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.post').forEach(post => { | |
| observer.observe(post); | |
| }); | |
| </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=Adelmario/super-espa-o" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |