| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Facebook Clone</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> |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Roboto', sans-serif; |
| background-color: #f0f2f5; |
| } |
| |
| .navbar { |
| background-color: #ffffff; |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| } |
| |
| .search-bar { |
| background-color: #f0f2f5; |
| border-radius: 50px; |
| } |
| |
| .search-bar:focus-within { |
| background-color: #e4e6eb; |
| } |
| |
| .icon-button { |
| color: #65676b; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .icon-button:hover { |
| background-color: #f0f2f5; |
| } |
| |
| .active-icon { |
| color: #1877f2; |
| border-bottom: 3px solid #1877f2; |
| border-radius: 0; |
| } |
| |
| .story-card { |
| position: relative; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); |
| } |
| |
| .story-card::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 40%; |
| background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); |
| } |
| |
| .post-card { |
| background-color: #ffffff; |
| border-radius: 8px; |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| } |
| |
| .reaction-button { |
| color: #65676b; |
| font-weight: 500; |
| padding: 8px; |
| border-radius: 5px; |
| } |
| |
| .reaction-button:hover { |
| background-color: #f0f2f5; |
| } |
| |
| .sidebar-item { |
| padding: 8px; |
| border-radius: 8px; |
| } |
| |
| .sidebar-item:hover { |
| background-color: #e4e6eb; |
| } |
| |
| .create-post-input { |
| background-color: #f0f2f5; |
| border-radius: 20px; |
| } |
| |
| .create-post-input:hover { |
| background-color: #e4e6eb; |
| } |
| |
| .online-indicator { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| width: 10px; |
| height: 10px; |
| background-color: #31a24c; |
| border-radius: 50%; |
| border: 2px solid #ffffff; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="navbar fixed top-0 left-0 right-0 z-50 h-14 flex items-center px-4"> |
| <div class="flex items-center w-full max-w-6xl mx-auto"> |
| |
| <div class="flex items-center"> |
| <i class="fab fa-facebook text-3xl text-blue-600 mr-2"></i> |
| <div class="search-bar flex items-center px-3 py-2 ml-2"> |
| <i class="fas fa-search text-gray-500 mr-2"></i> |
| <input type="text" placeholder="Search Facebook" class="bg-transparent outline-none w-40 md:w-60"> |
| </div> |
| </div> |
| |
| |
| <div class="hidden md:flex flex-1 justify-center space-x-1 mx-4"> |
| <a href="#" class="icon-button active-icon"> |
| <i class="fas fa-home text-2xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-tv text-2xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-store text-2xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-users text-2xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-gamepad text-2xl"></i> |
| </a> |
| </div> |
| |
| |
| <div class="flex items-center justify-end space-x-2"> |
| <button class="icon-button"> |
| <i class="fas fa-bell text-xl"></i> |
| </button> |
| <button class="icon-button"> |
| <i class="fas fa-comment-dots text-xl"></i> |
| </button> |
| <button class="icon-button"> |
| <i class="fas fa-user-circle text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="pt-14 pb-4 flex"> |
| |
| <div class="hidden md:block w-80 fixed left-0 top-14 h-screen overflow-y-auto p-2"> |
| <div class="space-y-1"> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gray-300 mr-2"></div> |
| <span>Your Profile</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-user-friends"></i> |
| </div> |
| <span>Friends</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <span>Memories</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-bookmark"></i> |
| </div> |
| <span>Saved</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-flag"></i> |
| </div> |
| <span>Pages</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-calendar"></i> |
| </div> |
| <span>Events</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-users"></i> |
| </div> |
| <span>Groups</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-video"></i> |
| </div> |
| <span>Watch</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-store"></i> |
| </div> |
| <span>Marketplace</span> |
| </a> |
| </div> |
| |
| <div class="border-t border-gray-300 my-2 pt-2"> |
| <h3 class="text-gray-500 font-semibold px-2 mb-1">Your shortcuts</h3> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gray-300 mr-2"></div> |
| <span>React Developers</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gray-300 mr-2"></div> |
| <span>JavaScript Group</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gray-300 mr-2"></div> |
| <span>Tech News</span> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 md:mx-80 lg:mx-96 px-2 md:px-4"> |
| |
| <div class="bg-white rounded-lg p-4 mb-4"> |
| <div class="flex space-x-2 overflow-x-auto pb-2"> |
| |
| <div class="story-card flex-shrink-0 w-28 h-48 bg-gray-100 relative"> |
| <div class="absolute top-0 left-0 right-0 h-3/4 bg-gray-300"></div> |
| <div class="absolute bottom-0 left-0 right-0 h-1/4 bg-white flex flex-col items-center justify-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white -mt-4"> |
| <i class="fas fa-plus"></i> |
| </div> |
| <span class="text-xs font-semibold mt-2">Create Story</span> |
| </div> |
| </div> |
| |
| |
| <div class="story-card flex-shrink-0 w-28 h-48 relative"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Story" class="w-full h-full object-cover"> |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-blue-500"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full rounded-full"> |
| </div> |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-semibold z-10">Jane Smith</span> |
| </div> |
| |
| <div class="story-card flex-shrink-0 w-28 h-48 relative"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Story" class="w-full h-full object-cover"> |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-blue-500"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full rounded-full"> |
| </div> |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-semibold z-10">John Doe</span> |
| </div> |
| |
| <div class="story-card flex-shrink-0 w-28 h-48 relative"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Story" class="w-full h-full object-cover"> |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-blue-500"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-full h-full rounded-full"> |
| </div> |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-semibold z-10">Sarah Johnson</span> |
| </div> |
| |
| <div class="story-card flex-shrink-0 w-28 h-48 relative"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Story" class="w-full h-full object-cover"> |
| <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-blue-500"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-full h-full rounded-full"> |
| </div> |
| <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-semibold z-10">Mike Brown</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="post-card p-4 mb-4"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-2"> |
| <input type="text" placeholder="What's on your mind?" class="create-post-input flex-1 px-4 py-2 outline-none"> |
| </div> |
| <div class="border-t border-gray-300 pt-3 flex justify-between"> |
| <button class="flex items-center text-gray-500 font-medium px-2 py-1 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-video text-red-500 mr-1"></i> Live Video |
| </button> |
| <button class="flex items-center text-gray-500 font-medium px-2 py-1 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-images text-green-500 mr-1"></i> Photo/Video |
| </button> |
| <button class="flex items-center text-gray-500 font-medium px-2 py-1 rounded-lg hover:bg-gray-100"> |
| <i class="fas fa-smile text-yellow-500 mr-1"></i> Feeling/Activity |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="post-card p-4 mb-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <div class="flex items-center"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-2"> |
| <div class="online-indicator"></div> |
| </div> |
| <div> |
| <div class="font-semibold">Jane Smith</div> |
| <div class="text-gray-500 text-xs">2 hrs ago · <i class="fas fa-globe-americas"></i></div> |
| </div> |
| </div> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| <p class="mb-3">Just visited this amazing place! The views were breathtaking. #travel #adventure</p> |
| |
| <img src="https://source.unsplash.com/random/600x400/?nature" alt="Post" class="w-full rounded-lg mb-3"> |
| |
| <div class="flex justify-between text-gray-500 text-sm mb-2"> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs mr-1"> |
| <i class="fas fa-thumbs-up"></i> |
| </div> |
| <span>245</span> |
| </div> |
| <div> |
| <span class="mr-2">42 comments</span> |
| <span>12 shares</span> |
| </div> |
| </div> |
| |
| <div class="border-t border-b border-gray-300 py-1 flex justify-between"> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="far fa-thumbs-up mr-1"></i> Like |
| </button> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="far fa-comment mr-1"></i> Comment |
| </button> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="fas fa-share mr-1"></i> Share |
| </button> |
| </div> |
| |
| <div class="pt-3"> |
| <div class="flex items-start mb-2"> |
| <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="bg-gray-100 rounded-2xl px-3 py-2 flex-1"> |
| <div class="font-semibold text-sm">You</div> |
| <p class="text-sm">Looks amazing! Where is this?</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="flex-1 flex items-center"> |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-2xl px-3 py-2 text-sm outline-none flex-1"> |
| <div class="flex space-x-2 ml-2"> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="far fa-smile"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-camera"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-gift"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="post-card p-4 mb-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-2"> |
| <div> |
| <div class="font-semibold">John Doe</div> |
| <div class="text-gray-500 text-xs">Yesterday at 5:30 PM · <i class="fas fa-user-friends"></i></div> |
| </div> |
| </div> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| <p class="mb-3">Check out this cool tech gadget I just got! It's revolutionizing the way I work.</p> |
| |
| <div class="bg-gray-100 rounded-lg p-3 mb-3 flex"> |
| <div class="w-20 h-20 bg-gray-300 rounded mr-3"></div> |
| <div> |
| <div class="font-semibold">The Ultimate Productivity Tool</div> |
| <div class="text-gray-500 text-sm">techgadgets.com</div> |
| <div class="text-sm mt-1">This device helps you stay focused and productive throughout your workday with advanced features.</div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between text-gray-500 text-sm mb-2"> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs mr-1"> |
| <i class="fas fa-thumbs-up"></i> |
| </div> |
| <span>189</span> |
| </div> |
| <div> |
| <span class="mr-2">36 comments</span> |
| <span>8 shares</span> |
| </div> |
| </div> |
| |
| <div class="border-t border-b border-gray-300 py-1 flex justify-between"> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="far fa-thumbs-up mr-1"></i> Like |
| </button> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="far fa-comment mr-1"></i> Comment |
| </button> |
| <button class="reaction-button flex-1 flex items-center justify-center"> |
| <i class="fas fa-share mr-1"></i> Share |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hidden lg:block w-80 fixed right-0 top-14 h-screen overflow-y-auto p-4"> |
| <div class="mb-4"> |
| <h3 class="font-semibold text-gray-500 mb-2">Sponsored</h3> |
| <div class="flex items-center mb-3"> |
| <div class="w-32 h-20 bg-gray-300 rounded-lg mr-2"></div> |
| <div> |
| <div class="font-semibold text-sm">Try our new product</div> |
| <div class="text-gray-500 text-xs">example.com</div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-32 h-20 bg-gray-300 rounded-lg mr-2"></div> |
| <div> |
| <div class="font-semibold text-sm">Summer Sale 50% off</div> |
| <div class="text-gray-500 text-xs">shopping.com</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-300 pt-3 mb-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <h3 class="font-semibold text-gray-500">Birthdays</h3> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-birthday-cake"></i> |
| </div> |
| <div class="text-sm"> |
| <span class="font-semibold">Alex Johnson</span> and <span class="font-semibold">2 others</span> have birthdays today. |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-300 pt-3"> |
| <div class="flex justify-between items-center mb-3"> |
| <h3 class="font-semibold text-gray-500">Contacts</h3> |
| <div class="flex space-x-2"> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-video"></i> |
| </button> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button class="icon-button w-8 h-8"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="space-y-2"> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="online-indicator"></div> |
| </div> |
| <span class="font-medium">Sarah Johnson</span> |
| </div> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="online-indicator"></div> |
| </div> |
| <span class="font-medium">Mike Brown</span> |
| </div> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="online-indicator"></div> |
| </div> |
| <span class="font-medium">Emily Davis</span> |
| </div> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| </div> |
| <span class="font-medium">David Wilson</span> |
| </div> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| </div> |
| <span class="font-medium">Jessica Lee</span> |
| </div> |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100"> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile" class="w-8 h-8 rounded-full mr-2"> |
| <div class="online-indicator"></div> |
| </div> |
| <span class="font-medium">Robert Taylor</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300 flex justify-around py-2"> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-home text-xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-users text-xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-video text-xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-bell text-xl"></i> |
| </a> |
| <a href="#" class="icon-button"> |
| <i class="fas fa-bars text-xl"></i> |
| </a> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const mobileMenuButton = document.querySelector('.icon-button i.fa-bars'); |
| if (mobileMenuButton) { |
| mobileMenuButton.addEventListener('click', function() { |
| alert('Mobile menu would open here'); |
| }); |
| } |
| |
| |
| const likeButtons = document.querySelectorAll('.reaction-button'); |
| likeButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| if (this.querySelector('.far.fa-thumbs-up')) { |
| this.innerHTML = '<i class="fas fa-thumbs-up mr-1 text-blue-500"></i> Like'; |
| } |
| }); |
| }); |
| |
| |
| const createPostInput = document.querySelector('.create-post-input'); |
| if (createPostInput) { |
| createPostInput.addEventListener('click', function() { |
| alert('Post creation modal would open here'); |
| }); |
| } |
| |
| |
| setInterval(() => { |
| const onlineIndicators = document.querySelectorAll('.online-indicator'); |
| onlineIndicators.forEach(indicator => { |
| if (Math.random() > 0.7) { |
| indicator.style.backgroundColor = '#31a24c'; |
| } else { |
| indicator.style.backgroundColor = '#bdbdbd'; |
| } |
| }); |
| }, 5000); |
| }); |
| </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=Fdgg55/facebook" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
