Spaces:
Running
Running
Download index.html from Softechgoal/connectpro: direct link, hf CLI and curl.
- Browser
- Download file 35.8 kB
-
https://huggingface.co/spaces/Softechgoal/connectpro/resolve/main/index.html
- Command line
-
hf download hf://spaces/Softechgoal/connectpro/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Softechgoal/connectpro/resolve/main/index.html
35.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ConnectPro - Professional 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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%); | |
| } | |
| .post-card { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .post-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .nav-item.active { | |
| color: #3b82f6; | |
| border-bottom: 3px solid #3b82f6; | |
| } | |
| .connection-strength { | |
| position: relative; | |
| height: 4px; | |
| background-color: #e5e7eb; | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .connection-strength::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| background-color: #3b82f6; | |
| border-radius: 2px; | |
| } | |
| .connection-strength.strong::after { | |
| width: 80%; | |
| } | |
| .connection-strength.medium::after { | |
| width: 50%; | |
| } | |
| .connection-strength.weak::after { | |
| width: 30%; | |
| } | |
| .notification-dot { | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| width: 12px; | |
| height: 12px; | |
| background-color: #ef4444; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| } | |
| .trending-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .trending-tag:hover { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-network-wired text-2xl text-blue-500 mr-2"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Connect<span class="text-blue-500">Pro</span></h1> | |
| </div> | |
| <div class="hidden md:flex flex-1 mx-8"> | |
| <div class="relative w-full max-w-xl"> | |
| <input type="text" placeholder="Search for people, jobs, or posts..." | |
| class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 relative"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="notification-dot"></span> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-envelope text-gray-600"></i> | |
| </button> | |
| <div class="flex items-center space-x-2 cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover"> | |
| <span class="hidden md:inline text-sm font-medium">John D.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6"> | |
| <!-- Left Sidebar --> | |
| <aside class="w-full md:w-64 flex-shrink-0"> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4 sticky top-20"> | |
| <div class="flex flex-col items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-16 h-16 rounded-full object-cover mb-2"> | |
| <h3 class="font-semibold text-gray-800">John Doe</h3> | |
| <p class="text-sm text-gray-500">Senior UX Designer @TechCorp</p> | |
| </div> | |
| <div class="border-t border-gray-200 pt-3"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-500">Profile views</span> | |
| <span class="font-medium">124</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-500">Post impressions</span> | |
| <span class="font-medium">2,456</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-500">Connections</span> | |
| <span class="font-medium">843</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4 sticky top-96"> | |
| <h3 class="font-semibold text-gray-800 mb-3">My Network</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center text-sm hover:text-blue-500 cursor-pointer"> | |
| <i class="fas fa-user-friends mr-3 text-gray-500"></i> | |
| <span>Connections</span> | |
| </li> | |
| <li class="flex items-center text-sm hover:text-blue-500 cursor-pointer"> | |
| <i class="fas fa-users mr-3 text-gray-500"></i> | |
| <span>Groups</span> | |
| </li> | |
| <li class="flex items-center text-sm hover:text-blue-500 cursor-pointer"> | |
| <i class="fas fa-building mr-3 text-gray-500"></i> | |
| <span>Companies</span> | |
| </li> | |
| <li class="flex items-center text-sm hover:text-blue-500 cursor-pointer"> | |
| <i class="fas fa-calendar-alt mr-3 text-gray-500"></i> | |
| <span>Events</span> | |
| </li> | |
| <li class="flex items-center text-sm hover:text-blue-500 cursor-pointer"> | |
| <i class="fas fa-hashtag mr-3 text-gray-500"></i> | |
| <span>Followed Hashtags</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <h3 class="font-semibold text-gray-800 mb-3">Recent Jobs</h3> | |
| <div class="space-y-3"> | |
| <div class="border-l-2 border-blue-500 pl-3"> | |
| <h4 class="font-medium text-sm">Senior Product Designer</h4> | |
| <p class="text-xs text-gray-500">DesignHub • San Francisco</p> | |
| </div> | |
| <div class="border-l-2 border-green-500 pl-3"> | |
| <h4 class="font-medium text-sm">UX Researcher</h4> | |
| <p class="text-xs text-gray-500">UserFirst • Remote</p> | |
| </div> | |
| <div class="border-l-2 border-purple-500 pl-3"> | |
| <h4 class="font-medium text-sm">Frontend Developer</h4> | |
| <p class="text-xs text-gray-500">WebTech • New York</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-sm text-blue-500 font-medium hover:underline"> | |
| Show all jobs (12+) | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Feed --> | |
| <div class="flex-1"> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <input type="text" placeholder="Start a post..." class="flex-1 px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-50 cursor-pointer"> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center text-sm text-gray-500 hover:bg-gray-100 px-3 py-1 rounded"> | |
| <i class="fas fa-image text-blue-500 mr-2"></i> | |
| <span>Photo</span> | |
| </button> | |
| <button class="flex items-center text-sm text-gray-500 hover:bg-gray-100 px-3 py-1 rounded"> | |
| <i class="fas fa-video text-green-500 mr-2"></i> | |
| <span>Video</span> | |
| </button> | |
| <button class="flex items-center text-sm text-gray-500 hover:bg-gray-100 px-3 py-1 rounded"> | |
| <i class="fas fa-calendar-alt text-purple-500 mr-2"></i> | |
| <span>Event</span> | |
| </button> | |
| <button class="flex items-center text-sm text-gray-500 hover:bg-gray-100 px-3 py-1 rounded"> | |
| <i class="fas fa-newspaper text-orange-500 mr-2"></i> | |
| <span>Article</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Trending Section --> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold text-gray-800">Trending in your network</h3> | |
| <button class="text-sm text-blue-500 hover:underline">See all</button> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="trending-tag text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full cursor-pointer"> | |
| #RemoteWork | |
| </span> | |
| <span class="trending-tag text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full cursor-pointer"> | |
| #TechJobs | |
| </span> | |
| <span class="trending-tag text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full cursor-pointer"> | |
| #UXDesign | |
| </span> | |
| <span class="trending-tag text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full cursor-pointer"> | |
| #CareerGrowth | |
| </span> | |
| <span class="trending-tag text-xs px-3 py-1 bg-gray-100 text-gray-700 rounded-full cursor-pointer"> | |
| #StartupLife | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Posts --> | |
| <div class="space-y-4"> | |
| <!-- Post 1 --> | |
| <div class="post-card bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full object-cover"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Sarah Johnson</h3> | |
| <p class="text-xs text-gray-500">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="text-gray-700 mb-3"> | |
| Just wrapped up an amazing product launch! 🚀 After months of hard work with our incredible team, we've finally released the new version of our flagship app with AI-powered features. The response has been overwhelming! | |
| </p> | |
| <div class="bg-gray-50 rounded-lg p-3 mb-3"> | |
| <h4 class="font-medium text-sm mb-1">InnovateTech AI Suite</h4> | |
| <p class="text-xs text-gray-500 mb-2">The most comprehensive AI tools for businesses, now with enhanced analytics and automation capabilities.</p> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" | |
| alt="Product" class="w-full rounded-lg object-cover h-48"> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="flex -space-x-1"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-5 h-5 rounded-full border border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-5 h-5 rounded-full border border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/44.jpg" class="w-5 h-5 rounded-full border border-white"> | |
| </div> | |
| <span>42 reactions • 8 comments</span> | |
| </div> | |
| <span>12 shares</span> | |
| </div> | |
| <div class="border-t border-gray-200 mt-3 pt-3 flex justify-between"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-blue-500"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-green-500"> | |
| <i class="far fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-500"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-red-500"> | |
| <i class="far fa-bookmark"></i> | |
| <span>Save</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="post-card bg-white rounded-xl shadow-sm p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile" class="w-12 h-12 rounded-full object-cover"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Michael Chen</h3> | |
| <p class="text-xs text-gray-500">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="text-gray-700 mb-3"> | |
| Sharing some insights from my recent experience with React 18 and the new concurrent features. The automatic batching and transitions are game-changers for performance optimization! | |
| Here's a code snippet showing how I implemented it: | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-3 mb-3 overflow-x-auto"> | |
| <pre class="text-xs text-gray-300 font-mono"> | |
| <span class="text-blue-300">function</span> <span class="text-yellow-300">App</span>() { | |
| <span class="text-blue-300">const</span> [resource, setResource] = <span class="text-yellow-300">useState</span>(<span class="text-green-300">null</span>); | |
| <span class="text-blue-300">function</span> <span class="text-yellow-300">handleClick</span>() { | |
| <span class="text-yellow-300">startTransition</span>(() => { | |
| <span class="text-gray-500">// Urgent updates</span> | |
| setResource(<span class="text-green-300">fetchResource</span>()); | |
| }); | |
| } | |
| <span class="text-blue-300">return</span> ( | |
| <<span class="text-red-300">div</span>> | |
| <<span class="text-red-300">Suspense</span> <span class="text-purple-300">fallback</span>=<span class="text-green-300">"Loading..."</span>> | |
| <<span class="text-red-300">Component</span> <span class="text-purple-300">resource</span>={resource} /> | |
| </<span class="text-red-300">Suspense</span>> | |
| </<span class="text-red-300">div</span>> | |
| ); | |
| }</pre> | |
| </div> | |
| <p class="text-gray-700 mb-3"> | |
| Would love to hear how others are leveraging these new features in their projects! | |
| </p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="flex -space-x-1"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-5 h-5 rounded-full border border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-5 h-5 rounded-full border border-white"> | |
| </div> | |
| <span>28 reactions • 14 comments</span> | |
| </div> | |
| <span>5 shares</span> | |
| </div> | |
| <div class="border-t border-gray-200 mt-3 pt-3 flex justify-between"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-blue-500"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>Like</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-green-500"> | |
| <i class="far fa-comment"></i> | |
| <span>Comment</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-500"> | |
| <i class="fas fa-share"></i> | |
| <span>Share</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-red-500"> | |
| <i class="far fa-bookmark"></i> | |
| <span>Save</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <aside class="w-full md:w-80 flex-shrink-0"> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4 sticky top-20"> | |
| <h3 class="font-semibold text-gray-800 mb-3">People you may know</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-medium text-sm">Lisa Wong</h4> | |
| <p class="text-xs text-gray-500">Marketing Director</p> | |
| <div class="connection-strength medium mt-1"></div> | |
| </div> | |
| </div> | |
| <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded-full hover:bg-blue-600"> | |
| Connect | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-medium text-sm">David Kim</h4> | |
| <p class="text-xs text-gray-500">Data Scientist</p> | |
| <div class="connection-strength strong mt-1"></div> | |
| </div> | |
| </div> | |
| <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded-full hover:bg-blue-600"> | |
| Connect | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-medium text-sm">Maria Garcia</h4> | |
| <p class="text-xs text-gray-500">HR Manager</p> | |
| <div class="connection-strength weak mt-1"></div> | |
| </div> | |
| </div> | |
| <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded-full hover:bg-blue-600"> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-sm text-blue-500 font-medium hover:underline"> | |
| See more suggestions | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4"> | |
| <h3 class="font-semibold text-gray-800 mb-3">Upcoming events</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-2 text-center w-12 flex-shrink-0"> | |
| <div class="font-bold text-sm">JUN</div> | |
| <div class="text-lg font-bold">15</div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">Tech Leadership Summit</h4> | |
| <p class="text-xs text-gray-500">Virtual • 10:00 AM</p> | |
| <span class="text-xs text-blue-500">32 attendees</span> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-green-100 text-green-800 rounded-lg p-2 text-center w-12 flex-shrink-0"> | |
| <div class="font-bold text-sm">JUN</div> | |
| <div class="text-lg font-bold">22</div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">UX Design Workshop</h4> | |
| <p class="text-xs text-gray-500">San Francisco • 2:00 PM</p> | |
| <span class="text-xs text-blue-500">18 attendees</span> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg p-2 text-center w-12 flex-shrink-0"> | |
| <div class="font-bold text-sm">JUL</div> | |
| <div class="text-lg font-bold">05</div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-sm">Networking Mixer</h4> | |
| <p class="text-xs text-gray-500">Downtown Club • 6:00 PM</p> | |
| <span class="text-xs text-blue-500">45 attendees</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-sm text-blue-500 font-medium hover:underline"> | |
| View all events | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-4"> | |
| <h3 class="font-semibold text-gray-800 mb-3">News & Updates</h3> | |
| <div class="space-y-3"> | |
| <div class="border-l-2 border-blue-500 pl-3"> | |
| <h4 class="font-medium text-sm">Remote work policies changing in 2023</h4> | |
| <p class="text-xs text-gray-500">TechCrunch • 2h ago</p> | |
| </div> | |
| <div class="border-l-2 border-green-500 pl-3"> | |
| <h4 class="font-medium text-sm">New AI tools for developers</h4> | |
| <p class="text-xs text-gray-500">The Verge • 5h ago</p> | |
| </div> | |
| <div class="border-l-2 border-purple-500 pl-3"> | |
| <h4 class="font-medium text-sm">Salary trends in tech industry</h4> | |
| <p class="text-xs text-gray-500">Forbes • 1d ago</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 text-sm text-blue-500 font-medium hover:underline"> | |
| See more news | |
| </button> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Bottom Navigation (Mobile) --> | |
| <nav class="md:hidden bg-white fixed bottom-0 left-0 right-0 shadow-lg border-t border-gray-200"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="nav-item active py-3 px-6 flex flex-col items-center text-blue-500"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </a> | |
| <a href="#" class="nav-item py-3 px-6 flex flex-col items-center text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-network-wired text-xl mb-1"></i> | |
| <span class="text-xs">Network</span> | |
| </a> | |
| <a href="#" class="nav-item py-3 px-6 flex flex-col items-center text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-briefcase text-xl mb-1"></i> | |
| <span class="text-xs">Jobs</span> | |
| </a> | |
| <a href="#" class="nav-item py-3 px-6 flex flex-col items-center text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-comment-dots text-xl mb-1"></i> | |
| <span class="text-xs">Messages</span> | |
| </a> | |
| <a href="#" class="nav-item py-3 px-6 flex flex-col items-center text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-user text-xl mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Create Post Modal (hidden by default) --> | |
| <div id="createPostModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold text-lg">Create a post</h3> | |
| <button onclick="closePostModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-medium">John Doe</h4> | |
| <div class="flex space-x-1 text-xs text-gray-500"> | |
| <button class="flex items-center hover:bg-gray-100 px-2 py-1 rounded"> | |
| <i class="fas fa-globe-americas mr-1"></i> | |
| <span>Anyone</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <textarea placeholder="What's on your mind?" class="w-full border-0 focus:ring-0 resize-none mb-4" rows="4"></textarea> | |
| <div class="border border-dashed border-gray-300 rounded-lg p-4 mb-4 flex flex-col items-center justify-center"> | |
| <i class="fas fa-images text-2xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Add photo/video</p> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-4"> | |
| <button class="flex items-center text-gray-500 hover:bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-image text-blue-500 mr-2"></i> | |
| <span>Photo</span> | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-video text-green-500 mr-2"></i> | |
| <span>Video</span> | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-link text-orange-500 mr-2"></i> | |
| <span>Link</span> | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:bg-gray-100 px-3 py-2 rounded-lg"> | |
| <i class="fas fa-poll text-purple-500 mr-2"></i> | |
| <span>Poll</span> | |
| </button> | |
| </div> | |
| <button class="w-full mt-4 bg-blue-500 text-white py-2 rounded-lg font-medium hover:bg-blue-600"> | |
| Post | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Show post modal | |
| function showPostModal() { | |
| document.getElementById('createPostModal').classList.remove('hidden'); | |
| } | |
| // Close post modal | |
| function closePostModal() { | |
| document.getElementById('createPostModal').classList.add('hidden'); | |
| } | |
| // Like button functionality | |
| document.querySelectorAll('.post-card').forEach(post => { | |
| const likeBtn = post.querySelector('.fa-thumbs-up').parentElement; | |
| let liked = false; | |
| likeBtn.addEventListener('click', function() { | |
| liked = !liked; | |
| if (liked) { | |
| this.innerHTML = '<i class="fas fa-thumbs-up text-blue-500"></i><span>Like</span>'; | |
| } else { | |
| this.innerHTML = '<i class="far fa-thumbs-up"></i><span>Like</span>'; | |
| } | |
| }); | |
| }); | |
| // Save button functionality | |
| document.querySelectorAll('.post-card').forEach(post => { | |
| const saveBtn = post.querySelector('.fa-bookmark').parentElement; | |
| let saved = false; | |
| saveBtn.addEventListener('click', function() { | |
| saved = !saved; | |
| if (saved) { | |
| this.innerHTML = '<i class="fas fa-bookmark text-red-500"></i><span>Saved</span>'; | |
| } else { | |
| this.innerHTML = '<i class="far fa-bookmark"></i><span>Save</span>'; | |
| } | |
| }); | |
| }); | |
| // Mobile search toggle | |
| const mobileSearch = document.createElement('div'); | |
| mobileSearch.className = 'fixed inset-0 bg-white z-50 p-4 hidden'; | |
| mobileSearch.innerHTML = ` | |
| <div class="flex items-center mb-4"> | |
| <button onclick="closeMobileSearch()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="relative flex-1"> | |
| <input type="text" placeholder="Search ConnectPro..." | |
| class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h3 class="font-semibold text-gray-800">Recent searches</h3> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| <span>UX Design jobs</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| <span>React developers</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| <span>Tech events</span> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileSearch); | |
| function openMobileSearch() { | |
| mobileSearch.classList.remove('hidden'); | |
| } | |
| function closeMobileSearch() { | |
| mobileSearch.classList.add('hidden'); | |
| } | |
| // Connect buttons | |
| document.querySelectorAll('[class*="connection-strength"]').forEach(connection => { | |
| const connectBtn = connection.closest('.flex').querySelector('button'); | |
| let connected = false; | |
| connectBtn.addEventListener('click', function() { | |
| connected = !connected; | |
| if (connected) { | |
| this.innerHTML = '<i class="fas fa-check mr-1"></i><span>Pending</span>'; | |
| this.className = 'text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded-full'; | |
| } else { | |
| this.innerHTML = 'Connect'; | |
| this.className = 'text-xs bg-blue-500 text-white px-3 py-1 rounded-full hover:bg-blue-600'; | |
| } | |
| }); | |
| }); | |
| </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=ghazaliwakeel/connectpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |