connectpro / index.html
ghazaliwakeel's picture
Add 3 files
2624956 verified
Raw History Blame Contribute Delete
35.8 kB
<!DOCTYPE html>
<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> (
&lt;<span class="text-red-300">div</span>&gt;
&lt;<span class="text-red-300">Suspense</span> <span class="text-purple-300">fallback</span>=<span class="text-green-300">"Loading..."</span>&gt;
&lt;<span class="text-red-300">Component</span> <span class="text-purple-300">resource</span>={resource} /&gt;
&lt;/<span class="text-red-300">Suspense</span>&gt;
&lt;/<span class="text-red-300">div</span>&gt;
);
}</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>