Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AT Connect - Social Network</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 150px; | |
| } | |
| .wave-shape .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: #ef4444; | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } | |
| .online-dot { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 12px; | |
| height: 12px; | |
| background-color: #10b981; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-users text-2xl"></i> | |
| <span class="text-xl font-bold">AT Connect</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fas fa-home mr-1"></i> Home</a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fas fa-user-friends mr-1"></i> Network</a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fas fa-bell mr-1"></i> Notifications</a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fas fa-envelope mr-1"></i> Messages</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-badge">3</span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover border-2 border-white"> | |
| <span class="online-dot"></span> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white relative"> | |
| <div class="container mx-auto px-4 py-16 md:py-24"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Connect with Professionals</h1> | |
| <p class="text-xl mb-8 opacity-90">Join AT Connect to build your professional network, discover opportunities, and grow your career.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition shadow-lg"> | |
| Sign Up Now | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-full font-semibold transition shadow-lg"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-24 h-24 rounded-full object-cover border-4 border-indigo-100"> | |
| <span class="online-dot"></span> | |
| </div> | |
| <h3 class="text-xl font-bold">Sarah Johnson</h3> | |
| <p class="text-gray-500 mb-4">UX Designer @ TechCorp</p> | |
| <div class="w-full border-t border-gray-200 pt-4"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span>Connections</span> | |
| <span class="font-semibold">1,243</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Posts</span> | |
| <span class="font-semibold">87</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-users mr-2 text-indigo-500"></i> My Groups | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-code text-indigo-500 text-sm"></i> | |
| </div> | |
| <span>Web Developers</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-paint-brush text-blue-500 text-sm"></i> | |
| </div> | |
| <span>Creative Designers</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-green-500 text-sm"></i> | |
| </div> | |
| <span>Digital Marketers</span> | |
| </li> | |
| </ul> | |
| <button class="mt-4 text-indigo-500 text-sm font-semibold hover:text-indigo-700 transition"> | |
| See all groups <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-hashtag mr-2 text-purple-500"></i> Trending Hashtags | |
| </h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">#</span> | |
| <span class="font-medium">webdesign</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">#</span> | |
| <span class="font-medium">remotejobs</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">#</span> | |
| <span class="font-medium">technews</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">#</span> | |
| <span class="font-medium">careergrowth</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="lg:w-2/4"> | |
| <!-- Create Post --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <div class="flex items-start mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <input type="text" placeholder="What's on your mind?" class="bg-gray-100 rounded-full px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-indigo-200"> | |
| </div> | |
| <div class="flex justify-between border-t pt-4"> | |
| <button class="flex items-center text-gray-500 hover:text-indigo-500 transition"> | |
| <i class="fas fa-image text-lg mr-2"></i> Photo | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-indigo-500 transition"> | |
| <i class="fas fa-video text-lg mr-2"></i> Video | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-indigo-500 transition"> | |
| <i class="fas fa-calendar-alt text-lg mr-2"></i> Event | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-indigo-500 transition"> | |
| <i class="fas fa-newspaper text-lg mr-2"></i> Article | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 1 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div> | |
| <h4 class="font-semibold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Product Manager @ InnovateTech · 2h ago</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-4">Just launched our new product! 🚀 After months of hard work with an amazing team, we're excited to share what we've built. Check it out and let me know your thoughts!</p> | |
| <div class="bg-gray-100 rounded-xl p-4 mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-box-open text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">ProductX</h4> | |
| <p class="text-gray-500 text-sm">innovate.tech/products/x</p> | |
| </div> | |
| </div> | |
| <p class="text-sm">The all-in-one solution for your productivity needs. Streamline your workflow with our AI-powered tools.</p> | |
| </div> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-3 mb-4"> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="far fa-thumbs-up mr-1"></i> Like | |
| </button> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="far fa-comment mr-1"></i> Comment | |
| </button> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover mr-3"> | |
| <div class="flex-1"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-indigo-200"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div> | |
| <h4 class="font-semibold">Jessica Williams</h4> | |
| <p class="text-gray-500 text-sm">Senior Developer @ CodeCraft · 5h ago</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mb-4">Sharing some insights from my journey as a developer. Here are 5 lessons I wish I knew when I started coding:</p> | |
| <ol class="list-decimal list-inside mb-4 space-y-2"> | |
| <li>Focus on fundamentals before frameworks</li> | |
| <li>Build projects, not just tutorials</li> | |
| <li>Learn how to debug effectively</li> | |
| <li>Contribute to open source</li> | |
| <li>Network with other developers</li> | |
| </ol> | |
| <div class="flex justify-between text-gray-500 border-t border-b py-3 mb-4"> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="far fa-thumbs-up mr-1"></i> Like | |
| </button> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="far fa-comment mr-1"></i> Comment | |
| </button> | |
| <button class="flex items-center hover:text-indigo-500 transition"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <div class="flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover mr-3"> | |
| <div class="flex-1"> | |
| <input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-indigo-200"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-bell mr-2 text-red-500"></i> Notifications | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user-plus text-indigo-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-semibold">David Kim</span> sent you a connection request</p> | |
| <p class="text-xs text-gray-500">30 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-comment text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-semibold">Lisa Park</span> commented on your post</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-thumbs-up text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-semibold">12 people</span> liked your recent update</p> | |
| <p class="text-xs text-gray-500">5 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-indigo-500 text-sm font-semibold hover:text-indigo-700 transition"> | |
| See all notifications <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 card-hover"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2 text-yellow-500"></i> Upcoming Events | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex flex-col items-center justify-center mr-3"> | |
| <span class="font-bold text-purple-700">MAY</span> | |
| <span class="text-lg font-bold">15</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Tech Conference 2023</h4> | |
| <p class="text-sm text-gray-500">Virtual Event · 10:00 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex flex-col items-center justify-center mr-3"> | |
| <span class="font-bold text-blue-700">MAY</span> | |
| <span class="text-lg font-bold">20</span> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">UX Design Workshop</h4> | |
| <p class="text-sm text-gray-500">Design Hub · 2:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-indigo-500 text-sm font-semibold hover:text-indigo-700 transition"> | |
| View all events <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-user-plus mr-2 text-green-500"></i> People You May Know | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">Robert Taylor</h4> | |
| <p class="text-xs text-gray-500">Marketing Director</p> | |
| </div> | |
| <button class="text-indigo-500 hover:text-indigo-700"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">Emily Chen</h4> | |
| <p class="text-xs text-gray-500">Data Scientist</p> | |
| </div> | |
| <button class="text-indigo-500 hover:text-indigo-700"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="font-semibold">James Wilson</h4> | |
| <p class="text-xs text-gray-500">Product Designer</p> | |
| </div> | |
| <button class="text-indigo-500 hover:text-indigo-700"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-indigo-500 text-sm font-semibold hover:text-indigo-700 transition"> | |
| See all suggestions <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-users mr-2"></i> AT Connect | |
| </h3> | |
| <p class="text-gray-400">Connecting professionals worldwide to share knowledge, opportunities, and grow together.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Safety</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community Guidelines</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-500 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-400 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 text-sm">Download our mobile app</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <button class="bg-black text-white px-3 py-1 rounded text-sm flex items-center"> | |
| <i class="fab fa-apple mr-1"></i> App Store | |
| </button> | |
| <button class="bg-black text-white px-3 py-1 rounded text-sm flex items-center"> | |
| <i class="fab fa-google-play mr-1"></i> Play Store | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 AT Connect. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for demonstration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle would go here | |
| console.log('AT Connect is ready!'); | |
| // Example: Add click event to like buttons | |
| document.querySelectorAll('.far.fa-thumbs-up').forEach(button => { | |
| button.addEventListener('click', function() { | |
| if (this.classList.contains('far')) { | |
| this.classList.remove('far'); | |
| this.classList.add('fas', 'text-indigo-500'); | |
| } else { | |
| this.classList.remove('fas', 'text-indigo-500'); | |
| this.classList.add('far'); | |
| } | |
| }); | |
| }); | |
| // Example: Add connection request | |
| document.querySelectorAll('.fa-user-plus').forEach(button => { | |
| button.addEventListener('click', function() { | |
| if (this.classList.contains('fa-user-plus')) { | |
| this.classList.remove('fa-user-plus'); | |
| this.classList.add('fa-check', 'text-green-500'); | |
| this.parentNode.textContent = 'Pending'; | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=MyAbiliyAI/at-connect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |