Scribd
Upload
6 views27 pages

Connect with Friends Login Page

Uploaded by

mb446766
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views27 pages

Connect with Friends Login Page

Uploaded by

mb446766
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><Mark></Mark> - Connect with Friends</title>
<script src="[Link]
<link rel="stylesheet" href="[Link]
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.post-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.video-call-effect {
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
}
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #667eea;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Auth Modal -->
<div id="authModal" class="fixed inset-0 flex items-center justify-center z-50 modal" style="display: none;">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="bg-white rounded-lg shadow-xl z-10 w-full max-w-md">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-xl font-semibold text-gray-800" id="authModalTitle">Login</h3>
<button onclick="closeAuthModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div id="loginForm">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="loginEmail">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-
none focus:shadow-outline" id="loginEmail" type="email" placeholder="Email">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="loginPassword">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight
focus:outline-none focus:shadow-outline" id="loginPassword" type="password" placeholder="Password">
</div>
<div class="flex items-center justify-between mb-4">
<button onclick="login()" class="gradient-bg hover:opacity-90 text-white font-bold py-2 px-4 rounded
focus:outline-none focus:shadow-outline w-full">
Login
</button>
</div>
<p class="text-center text-gray-600 text-sm">
Don't have an account?
<a href="#" onclick="showRegisterForm()" class="text-blue-500 hover:text-blue-700">Register here</a>
</p>
</div>

<div id="registerForm" style="display: none;">


<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="registerName">Full Name</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-
none focus:shadow-outline" id="registerName" type="text" placeholder="Full Name">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="registerEmail">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-
none focus:shadow-outline" id="registerEmail" type="email" placeholder="Email">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="registerPassword">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight
focus:outline-none focus:shadow-outline" id="registerPassword" type="password" placeholder="Password">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="registerConfirmPassword">Confirm
Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight
focus:outline-none focus:shadow-outline" id="registerConfirmPassword" type="password" placeholder="Confirm Password">
</div>
<div class="flex items-center justify-between mb-4">
<button onclick="register()" class="gradient-bg hover:opacity-90 text-white font-bold py-2 px-4 rounded
focus:outline-none focus:shadow-outline w-full">
Register
</button>
</div>
<p class="text-center text-gray-600 text-sm">
Already have an account?
<a href="#" onclick="showLoginForm()" class="text-blue-500 hover:text-blue-700">Login here</a>
</p>
</div>
</div>
</div>
</div>

<!-- Call Modal -->


<div id="callModal" class="fixed inset-0 flex items-center justify-center z-50 modal" style="display: none;">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="bg-white rounded-lg shadow-xl z-10 w-full max-w-4xl">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-xl font-semibold text-gray-800">Video Call</h3>
<button onclick="closeCallModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="relative bg-gray-200 rounded-lg overflow-hidden h-64">
<video id="remoteVideo" autoplay class="w-full h-full object-cover"></video>
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2">
<span id="remoteUserName">Sarah Johnson</span>
</div>
</div>
<div class="relative bg-gray-200 rounded-lg overflow-hidden h-64">
<video id="localVideo" autoplay muted class="w-full h-full object-cover"></video>
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2">
<span>You</span>
</div>
</div>
</div>

<div class="mt-6">
<h4 class="text-lg font-semibold mb-3">Video Effects</h4>
<div class="grid grid-cols-3 md:grid-cols-6 gap-3">
<button onclick="applyEffect('none')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-user text-xl mb-1"></i>
<span class="text-xs">Normal</span>
</button>
<button onclick="applyEffect('blur')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-eye-slash text-xl mb-1"></i>
<span class="text-xs">Blur</span>
</button>
<button onclick="applyEffect('sepia')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-sun text-xl mb-1"></i>
<span class="text-xs">Sepia</span>
</button>
<button onclick="applyEffect('grayscale')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-moon text-xl mb-1"></i>
<span class="text-xs">Grayscale</span>
</button>
<button onclick="applyEffect('invert')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-adjust text-xl mb-1"></i>
<span class="text-xs">Invert</span>
</button>
<button onclick="applyEffect('pixelate')" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2 flex flex-col items-
center">
<i class="fas fa-th-large text-xl mb-1"></i>
<span class="text-xs">Pixelate</span>
</button>
</div>
</div>

<div class="mt-6 flex justify-center space-x-4">


<button onclick="toggleMute()" id="muteBtn" class="bg-red-500 hover:bg-red-600 text-white rounded-full p-3">
<i class="fas fa-microphone"></i>
</button>
<button onclick="toggleVideo()" id="videoBtn" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3">
<i class="fas fa-video"></i>
</button>
<button onclick="endCall()" class="bg-gray-500 hover:bg-gray-600 text-white rounded-full p-3">
<i class="fas fa-phone-slash"></i>
</button>
</div>
</div>
</div>
</div>

<!-- Create Post Modal -->


<div id="createPostModal" class="fixed inset-0 flex items-center justify-center z-50 modal" style="display: none;">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="bg-white rounded-lg shadow-xl z-10 w-full max-w-2xl">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-xl font-semibold text-gray-800">Create Post</h3>
<button onclick="closeCreatePostModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div class="mb-4">
<textarea id="postContent" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-
tight focus:outline-none focus:shadow-outline" rows="3" placeholder="What's on your mind?"></textarea>
</div>
<div class="mb-4">
<div id="mediaPreview" class="mb-3 hidden">
<img id="imagePreview" src="#" alt="Preview" class="max-h-64 rounded-lg hidden">
<video id="videoPreview" controls class="max-h-64 rounded-lg hidden"></video>
</div>
<div class="flex space-x-2">
<label class="cursor-pointer bg-gray-200 hover:bg-gray-300 rounded-lg p-2">
<i class="fas fa-image text-blue-500"></i>
<input type="file" id="imageUpload" accept="image/*" class="hidden" onchange="previewMedia(this,
'image')">
</label>
<label class="cursor-pointer bg-gray-200 hover:bg-gray-300 rounded-lg p-2">
<i class="fas fa-video text-purple-500"></i>
<input type="file" id="videoUpload" accept="video/*" class="hidden" onchange="previewMedia(this, 'video')">
</label>
<button onclick="removeMedia()" id="removeMediaBtn" class="bg-gray-200 hover:bg-gray-300 rounded-lg p-2
hidden">
<i class="fas fa-trash text-red-500"></i>
</button>
</div>
</div>
<div class="flex justify-end">
<button onclick="createPost()" class="gradient-bg hover:opacity-90 text-white font-bold py-2 px-6 rounded
focus:outline-none focus:shadow-outline">
Post
</button>
</div>
</div>
</div>
</div>

<!-- Main App Layout -->


<div class="min-h-screen">
<!-- Header -->
<header 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-infinity text-2xl"></i>
<h1 class="text-2xl font-bold"><MArk></MArk></h1>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="hover:text-gray-200"><i class="fas fa-home mr-1"></i> Home</a>
<a href="#" class="hover:text-gray-200"><i class="fas fa-user-friends mr-1"></i> Friends</a>
<a href="#" class="hover:text-gray-200"><i class="fas fa-bell mr-1"></i> Notifications</a>
<a href="#" class="hover:text-gray-200"><i class="fas fa-envelope mr-1"></i> Messages</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="bg-white bg-opacity-20 rounded-full py-1 px-4 text-white
placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 w-40 md:w-
64">
<i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-white opacity-70"></i>
</div>
<div id="userMenu" class="relative hidden">
<button onclick="toggleUserMenu()" class="flex items-center space-x-2 focus:outline-none">
<img id="userAvatar" src="[Link] alt="User" class="w-8 h-8
rounded-full border-2 border-white">
<span id="userName" class="font-medium">John Doe</span>
</button>
<div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-user mr-2"></i>
Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-cog mr-2"></i>
Settings</a>
<a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas
fa-sign-out-alt mr-2"></i> Logout</a>
</div>
</div>
<button id="loginBtn" onclick="openAuthModal('login')" class="bg-white text-blue-600 hover:bg-gray-100 font-
medium py-1 px-4 rounded-full">
Login
</button>
</div>
</div>
</div>
</header>

<!-- Mobile Navigation -->


<div class="md:hidden bg-white shadow-md fixed bottom-0 left-0 right-0 z-40">
<div class="flex justify-around py-2">
<a href="#" class="flex flex-col items-center text-blue-600">
<i class="fas fa-home text-xl"></i>
<span class="text-xs">Home</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-600">
<i class="fas fa-search text-xl"></i>
<span class="text-xs">Search</span>
</a>
<button onclick="openCreatePostModal()" class="flex flex-col items-center text-gray-600">
<div class="gradient-bg text-white rounded-full p-2 -mt-6 shadow-lg">
<i class="fas fa-plus text-xl"></i>
</div>
<span class="text-xs mt-2">Create</span>
</button>
<a href="#" class="flex flex-col items-center text-gray-600">
<i class="fas fa-bell text-xl"></i>
<span class="text-xs">Notifications</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-600">
<i class="fas fa-user text-xl"></i>
<span class="text-xs">Profile</span>
</a>
</div>
</div>

<!-- Main Content -->


<main class="container mx-auto px-4 py-6 pb-20 md:pb-6">
<div class="flex flex-col md:flex-row gap-6">
<!-- Left Sidebar -->
<div class="w-full md:w-1/4 lg:w-1/5 space-y-4">
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center space-x-3 mb-4">
<img id="sidebarAvatar" src="[Link] alt="User" class="w-12 h-12
rounded-full border-2 border-blue-500">
<div>
<h3 id="sidebarName" class="font-semibold">John Doe</h3>
<p class="text-gray-500 text-sm">@johndoe</p>
</div>
</div>
<div class="space-y-2">
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-user-friends w-5"></i>
<span>Friends</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-users w-5"></i>
<span>Groups</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-store w-5"></i>
<span>Marketplace</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-bookmark w-5"></i>
<span>Saved</span>
</a>
</div>
</div>

<div class="bg-white rounded-lg shadow p-4">


<h3 class="font-semibold mb-3">Shortcuts</h3>
<div class="space-y-2">
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-utensils w-5"></i>
<span>Food Lovers</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-gamepad w-5"></i>
<span>Gaming Zone</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600">
<i class="fas fa-music w-5"></i>
<span>Music Fans</span>
</a>
</div>
</div>
</div>
<!-- Main Feed -->
<div class="w-full md:w-2/4 lg:w-3/5 space-y-4">
<!-- Create Post -->
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center space-x-3">
<img id="feedAvatar" src="[Link] alt="User" class="w-10 h-10
rounded-full">
<button onclick="openCreatePostModal()" class="flex-1 bg-gray-100 hover:bg-gray-200 rounded-full py-2 px-4
text-left text-gray-500">
What's on your mind?
</button>
</div>
<div class="flex justify-between mt-3 pt-3 border-t">
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1 px-2
flex-1">
<i class="fas fa-video text-red-500"></i>
<span>Live Video</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1 px-2
flex-1">
<i class="fas fa-image text-green-500"></i>
<span>Photo/Video</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1 px-2
flex-1">
<i class="fas fa-smile text-yellow-500"></i>
<span>Feeling/Activity</span>
</button>
</div>
</div>

<!-- Stories -->


<div class="bg-white rounded-lg shadow p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Stories</h3>
<a href="#" class="text-blue-500 text-sm">See All</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
<div class="relative rounded-lg overflow-hidden h-48 bg-gradient-to-br from-blue-400 to-purple-500">
<div class="absolute inset-0 flex flex-col items-center justify-center text-white">
<div class="bg-blue-500 rounded-full p-2 mb-2">
<i class="fas fa-plus"></i>
</div>
<span class="text-sm font-medium">Create Story</span>
</div>
</div>
<div class="relative rounded-lg overflow-hidden h-48">
<img src="[Link] alt="Story" class="w-full h-full object-cover">
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
<div class="absolute top-2 left-2 border-2 border-blue-500 rounded-full">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
</div>
<span class="text-white text-sm font-medium block mt-6">Sarah's Day</span>
</div>
</div>
<div class="relative rounded-lg overflow-hidden h-48">
<img src="[Link] alt="Story" class="w-full h-full object-cover">
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
<div class="absolute top-2 left-2 border-2 border-blue-500 rounded-full">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
</div>
<span class="text-white text-sm font-medium block mt-6">Mike's Trip</span>
</div>
</div>
<div class="relative rounded-lg overflow-hidden h-48 hidden md:block">
<img src="[Link] alt="Story" class="w-full h-full object-cover">
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
<div class="absolute top-2 left-2 border-2 border-blue-500 rounded-full">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
</div>
<span class="text-white text-sm font-medium block mt-6">Emma's Party</span>
</div>
</div>
</div>
</div>

<!-- Posts -->


<div id="postsContainer" class="space-y-4">
<!-- Sample Post 1 -->
<div class="bg-white rounded-lg shadow post-card">
<div class="p-4">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-3">
<img src="[Link] alt="User" class="w-10 h-10 rounded-
full">
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">2 hrs ago · <i class="fas fa-globe-americas"></i></p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="mt-3">
<p>Just visited this amazing place! The view was breathtaking. Can't wait to go back again soon. #travel
#adventure</p>
</div>
<div class="mt-3">
<img src="[Link] alt="Post" class="w-full rounded-lg">
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t text-gray-500">
<div class="flex items-center space-x-2">
<div class="flex items-center">
<div class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
<i class="fas fa-thumbs-up"></i>
</div>
<div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white text-xs -ml-1">
<i class="fas fa-heart"></i>
</div>
</div>
<span>125</span>
</div>
<div>
<span>24 comments · 5 shares</span>
</div>
</div>
<div class="flex justify-between mt-2 pt-2 border-t">
<button onclick="toggleLike(this)" class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-
gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-thumbs-up"></i>
<span>Like</span>
</button>
<button onclick="toggleCommentSection(this)" class="flex items-center justify-center space-x-2 text-gray-
600 hover:bg-gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-comment"></i>
<span>Comment</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1
px-2 flex-1">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comment-section hidden mt-3 pt-3 border-t">
<div class="flex items-start space-x-2 mb-3">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full mt-
1">
<div class="flex-1 bg-gray-100 rounded-lg p-2">
<div class="flex justify-between items-start">
<h5 class="font-medium">John Doe</h5>
<span class="text-xs text-gray-500">Just now</span>
</div>
<p class="text-sm">Wow! Where is this place? Looks amazing!</p>
<div class="flex space-x-3 mt-1 text-xs text-gray-500">
<button>Like</button>
<button>Reply</button>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
<div class="flex-1 flex items-center">
<input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-2 px-4 w-full
focus:outline-none">
<button class="ml-2 text-blue-500">
<i class="far fa-smile"></i>
</button>
</div>
</div>
</div>
</div>
</div>

<!-- Sample Post 2 -->


<div class="bg-white rounded-lg shadow post-card">
<div class="p-4">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-3">
<img src="[Link] alt="User" class="w-10 h-10 rounded-full">
<div>
<h4 class="font-semibold">Mike Peterson</h4>
<p class="text-gray-500 text-sm">5 hrs ago · <i class="fas fa-user-friends"></i></p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="mt-3">
<p>Check out this new recipe I tried! It turned out amazing. Let me know if you want the recipe.</p>
</div>
<div class="mt-3">
<video controls class="w-full rounded-lg">
<source src="[Link]
type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t text-gray-500">
<div class="flex items-center space-x-2">
<div class="flex items-center">
<div class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
<i class="fas fa-thumbs-up"></i>
</div>
</div>
<span>89</span>
</div>
<div>
<span>15 comments · 2 shares</span>
</div>
</div>
<div class="flex justify-between mt-2 pt-2 border-t">
<button onclick="toggleLike(this)" class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-
gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-thumbs-up"></i>
<span>Like</span>
</button>
<button onclick="toggleCommentSection(this)" class="flex items-center justify-center space-x-2 text-gray-
600 hover:bg-gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-comment"></i>
<span>Comment</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1
px-2 flex-1">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comment-section hidden mt-3 pt-3 border-t">
<div class="flex items-start space-x-2 mb-3">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full
mt-1">
<div class="flex-1 bg-gray-100 rounded-lg p-2">
<div class="flex justify-between items-start">
<h5 class="font-medium">Emma Wilson</h5>
<span class="text-xs text-gray-500">2 hrs ago</span>
</div>
<p class="text-sm">Looks delicious! Please share the recipe.</p>
<div class="flex space-x-3 mt-1 text-xs text-gray-500">
<button>Like</button>
<button>Reply</button>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
<div class="flex-1 flex items-center">
<input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-2 px-4 w-full
focus:outline-none">
<button class="ml-2 text-blue-500">
<i class="far fa-smile"></i>
</button>
</div>
</div>
</div>
</div>
</div>

<!-- Sample Post 3 - Voice Call Invitation -->


<div class="bg-white rounded-lg shadow post-card">
<div class="p-4">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-3">
<img src="[Link] alt="User" class="w-10 h-10 rounded-
full">
<div>
<h4 class="font-semibold">Emma Wilson</h4>
<p class="text-gray-500 text-sm">Yesterday at 8:30 PM · <i class="fas fa-user-friends"></i></p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="mt-3">
<p>Let's catch up! I'm available for a voice call.</p>
</div>
<div class="mt-3 bg-blue-50 rounded-lg p-4 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-blue-100 rounded-full p-3 text-blue-600">
<i class="fas fa-phone-alt text-xl"></i>
</div>
<div>
<h5 class="font-medium">Voice Call</h5>
<p class="text-sm text-gray-600">Tap to join the call</p>
</div>
</div>
<button onclick="startVoiceCall('Emma Wilson')" class="bg-blue-500 hover:bg-blue-600 text-white rounded-
full px-4 py-2">
Join
</button>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t text-gray-500">
<div class="flex items-center space-x-2">
<span>12 likes</span>
</div>
<div>
<span>8 comments</span>
</div>
</div>
<div class="flex justify-between mt-2 pt-2 border-t">
<button onclick="toggleLike(this)" class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-
gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-thumbs-up"></i>
<span>Like</span>
</button>
<button onclick="toggleCommentSection(this)" class="flex items-center justify-center space-x-2 text-gray-
600 hover:bg-gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-comment"></i>
<span>Comment</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1
px-2 flex-1">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comment-section hidden mt-3 pt-3 border-t">
<div class="flex items-center space-x-2">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
<div class="flex-1 flex items-center">
<input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-2 px-4 w-full
focus:outline-none">
<button class="ml-2 text-blue-500">
<i class="far fa-smile"></i>
</button>
</div>
</div>
</div>
</div>
</div>

<!-- Sample Post 4 - Video Call Invitation -->


<div class="bg-white rounded-lg shadow post-card">
<div class="p-4">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-3">
<img src="[Link] alt="User" class="w-10 h-10 rounded-full">
<div>
<h4 class="font-semibold">David Kim</h4>
<p class="text-gray-500 text-sm">Yesterday at 6:15 PM · <i class="fas fa-globe-americas"></i></p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="mt-3">
<p>Group video call tonight at 9 PM! Let's all catch up with video effects!</p>
</div>
<div class="mt-3 bg-purple-50 rounded-lg p-4 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-purple-100 rounded-full p-3 text-purple-600">
<i class="fas fa-video text-xl"></i>
</div>
<div>
<h5 class="font-medium">Video Call</h5>
<p class="text-sm text-gray-600">Tonight at 9:00 PM</p>
</div>
</div>
<button onclick="startVideoCall('David Kim')" class="gradient-bg hover:opacity-90 text-white rounded-full
px-4 py-2">
Join
</button>
</div>
<div class="mt-2 flex items-center text-sm text-gray-600">
<div class="flex -space-x-2">
<img src="[Link] alt="User" class="w-6 h-6 rounded-full
border-2 border-white">
<img src="[Link] alt="User" class="w-6 h-6 rounded-full
border-2 border-white">
<img src="[Link] alt="User" class="w-6 h-6 rounded-full
border-2 border-white">
</div>
<span class="ml-2">Sarah, Mike, and 5 others are going</span>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t text-gray-500">
<div class="flex items-center space-x-2">
<div class="flex items-center">
<div class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">
<i class="fas fa-thumbs-up"></i>
</div>
<div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white text-xs -ml-1">
<i class="fas fa-heart"></i>
</div>
</div>
<span>42</span>
</div>
<div>
<span>18 comments · 7 shares</span>
</div>
</div>
<div class="flex justify-between mt-2 pt-2 border-t">
<button onclick="toggleLike(this)" class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-
gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-thumbs-up"></i>
<span>Like</span>
</button>
<button onclick="toggleCommentSection(this)" class="flex items-center justify-center space-x-2 text-gray-
600 hover:bg-gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-comment"></i>
<span>Comment</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1
px-2 flex-1">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comment-section hidden mt-3 pt-3 border-t">
<div class="flex items-start space-x-2 mb-3">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full
mt-1">
<div class="flex-1 bg-gray-100 rounded-lg p-2">
<div class="flex justify-between items-start">
<h5 class="font-medium">Sarah Johnson</h5>
<span class="text-xs text-gray-500">1 hr ago</span>
</div>
<p class="text-sm">Can't wait! I'll bring some fun video effects!</p>
<div class="flex space-x-3 mt-1 text-xs text-gray-500">
<button>Like</button>
<button>Reply</button>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<img src="[Link] alt="User" class="w-8 h-8 rounded-full">
<div class="flex-1 flex items-center">
<input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-2 px-4 w-full
focus:outline-none">
<button class="ml-2 text-blue-500">
<i class="far fa-smile"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Right Sidebar -->


<div class="w-full md:w-1/4 lg:w-1/5 space-y-4">
<div class="bg-white rounded-lg shadow p-4">
<h3 class="font-semibold mb-3">Sponsored</h3>
<div class="space-y-4">
<div>
<img src="[Link] alt="Ad" class="w-full rounded-lg mb-2">
<h4 class="font-medium">Summer Sale - 50% Off</h4>
<p class="text-sm text-gray-600">[Link]</p>
</div>
<div>
<img src="[Link] alt="Ad" class="w-full rounded-lg mb-2">
<h4 class="font-medium">New Smartphone Launch</h4>
<p class="text-sm text-gray-600">[Link]</p>
</div>
</div>
</div>

<div class="bg-white rounded-lg shadow p-4">


<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Birthdays</h3>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-birthday-cake text-blue-500 text-xl"></i>
<p class="text-sm"><span class="font-medium">Mike Peterson</span> and <span class="font-medium">2
others</span> have birthdays today.</p>
</div>
</div>

<div class="bg-white rounded-lg shadow p-4">


<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Contacts</h3>
<div class="flex space-x-2">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-video"></i>
</button>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-search"></i>
</button>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center space-x-3 hover:bg-gray-100 p-1 rounded-lg cursor-pointer"
onclick="startVideoCall('Sarah Johnson')">
<div class="relative">
<img src="[Link] alt="User" class="w-9 h-9 rounded-full">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<span>Sarah Johnson</span>
</div>
<div class="flex items-center space-x-3 hover:bg-gray-100 p-1 rounded-lg cursor-pointer"
onclick="startVoiceCall('Mike Peterson')">
<div class="relative">
<img src="[Link] alt="User" class="w-9 h-9 rounded-full">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<span>Mike Peterson</span>
</div>
<div class="flex items-center space-x-3 hover:bg-gray-100 p-1 rounded-lg cursor-pointer"
onclick="startVideoCall('Emma Wilson')">
<div class="relative">
<img src="[Link] alt="User" class="w-9 h-9 rounded-full">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<span>Emma Wilson</span>
</div>
<div class="flex items-center space-x-3 hover:bg-gray-100 p-1 rounded-lg cursor-pointer"
onclick="startVideoCall('David Kim')">
<div class="relative">
<img src="[Link] alt="User" class="w-9 h-9 rounded-full">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<span>David Kim</span>
</div>
<div class="flex items-center space-x-3 hover:bg-gray-100 p-1 rounded-lg cursor-pointer"
onclick="startVoiceCall('Lisa Wong')">
<div class="relative">
<img src="[Link] alt="User" class="w-9 h-9 rounded-full">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<span>Lisa Wong</span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

<script>
// Auth Functions
let currentUser = null;
const users = [
{ name: "John Doe", email: "john@[Link]", password: "password123", avatar:
"[Link] username: "johndoe" }
];

function openAuthModal(type) {
[Link]('authModal').[Link] = 'flex';
if (type === 'login') {
showLoginForm();
} else {
showRegisterForm();
}
}

function closeAuthModal() {
[Link]('authModal').[Link] = 'none';
}

function showLoginForm() {
[Link]('loginForm').[Link] = 'block';
[Link]('registerForm').[Link] = 'none';
[Link]('authModalTitle').textContent = 'Login';
}

function showRegisterForm() {
[Link]('loginForm').[Link] = 'none';
[Link]('registerForm').[Link] = 'block';
[Link]('authModalTitle').textContent = 'Register';
}

function login() {
const email = [Link]('loginEmail').value;
const password = [Link]('loginPassword').value;

const user = [Link](u => [Link] === email && [Link] === password);
if (user) {
currentUser = user;
updateUIAfterLogin();
closeAuthModal();
showToast('Login successful!');
} else {
showToast('Invalid email or password', 'error');
}
}

function register() {
const name = [Link]('registerName').value;
const email = [Link]('registerEmail').value;
const password = [Link]('registerPassword').value;
const confirmPassword = [Link]('registerConfirmPassword').value;

if (password !== confirmPassword) {


showToast('Passwords do not match', 'error');
return;
}

if ([Link](u => [Link] === email)) {


showToast('Email already registered', 'error');
return;
}
const newUser = {
name,
email,
password,
avatar: `[Link] > 0.5 ? 'men' : 'women'}/${[Link]([Link]()
* 100)}.jpg`,
username: [Link]().replace(/\s/g, '') + [Link]([Link]() * 100)
};

[Link](newUser);
currentUser = newUser;
updateUIAfterLogin();
closeAuthModal();
showToast('Registration successful!');
}

function logout() {
currentUser = null;
[Link]('userMenu').[Link]('hidden');
[Link]('loginBtn').[Link]('hidden');
[Link]('sidebarAvatar').src = '[Link]
[Link]('sidebarName').textContent = 'John Doe';
[Link]('feedAvatar').src = '[Link]
showToast('Logged out successfully');
}

function updateUIAfterLogin() {
[Link]('userMenu').[Link]('hidden');
[Link]('loginBtn').[Link]('hidden');
[Link]('userAvatar').src = [Link];
[Link]('userName').textContent = [Link];
[Link]('sidebarAvatar').src = [Link];
[Link]('sidebarName').textContent = [Link];
[Link]('feedAvatar').src = [Link];
}

function toggleUserMenu() {
const dropdown = [Link]('userDropdown');
[Link]('hidden');
}

// Post Functions
function openCreatePostModal() {
if (!currentUser) {
openAuthModal('login');
showToast('Please login to create a post', 'error');
return;
}
[Link]('createPostModal').[Link] = 'flex';
}

function closeCreatePostModal() {
[Link]('createPostModal').[Link] = 'none';
[Link]('postContent').value = '';
[Link]('mediaPreview').[Link]('hidden');
[Link]('imagePreview').[Link]('hidden');
[Link]('videoPreview').[Link]('hidden');
[Link]('removeMediaBtn').[Link]('hidden');
[Link]('imageUpload').value = '';
[Link]('videoUpload').value = '';
}

function previewMedia(input, type) {


const file = [Link][0];
if (!file) return;

const reader = new FileReader();


[Link] = function(e) {
const preview = [Link]('mediaPreview');
[Link]('hidden');

if (type === 'image') {


const imagePreview = [Link]('imagePreview');
[Link] = [Link];
[Link]('hidden');
[Link]('videoPreview').[Link]('hidden');
} else {
const videoPreview = [Link]('videoPreview');
[Link] = [Link];
[Link]('hidden');
[Link]('imagePreview').[Link]('hidden');
}

[Link]('removeMediaBtn').[Link]('hidden');
};
[Link](file);
}

function removeMedia() {
[Link]('mediaPreview').[Link]('hidden');
[Link]('imagePreview').[Link]('hidden');
[Link]('videoPreview').[Link]('hidden');
[Link]('removeMediaBtn').[Link]('hidden');
[Link]('imageUpload').value = '';
[Link]('videoUpload').value = '';
}

function createPost() {
const content = [Link]('postContent').value;
if (!content && ![Link]('imagePreview').src && ![Link]('videoPreview').src) {
showToast('Post cannot be empty', 'error');
return;
}

const postsContainer = [Link]('postsContainer');


const newPost = [Link]('div');
[Link] = 'bg-white rounded-lg shadow post-card';
[Link] = `
<div class="p-4">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-3">
<img src="${[Link]}" alt="User" class="w-10 h-10 rounded-full">
<div>
<h4 class="font-semibold">${[Link]}</h4>
<p class="text-gray-500 text-sm">Just now · <i class="fas fa-globe-americas"></i></p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="mt-3">
<p>${content}</p>
</div>
${[Link]('imagePreview').src && !
[Link]('imagePreview').[Link]('hidden') ?
`<div class="mt-3">
<img src="${[Link]('imagePreview').src}" alt="Post" class="w-full rounded-lg">
</div>` : ''}
${[Link]('videoPreview').src && !
[Link]('videoPreview').[Link]('hidden') ?
`<div class="mt-3">
<video controls class="w-full rounded-lg">
<source src="${[Link]('videoPreview').src}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>` : ''}
<div class="flex justify-between items-center mt-3 pt-3 border-t text-gray-500">
<div class="flex items-center space-x-2">
<span>0 likes</span>
</div>
<div>
<span>0 comments</span>
</div>
</div>
<div class="flex justify-between mt-2 pt-2 border-t">
<button onclick="toggleLike(this)" class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100
rounded-lg py-1 px-2 flex-1">
<i class="far fa-thumbs-up"></i>
<span>Like</span>
</button>
<button onclick="toggleCommentSection(this)" class="flex items-center justify-center space-x-2 text-gray-600
hover:bg-gray-100 rounded-lg py-1 px-2 flex-1">
<i class="far fa-comment"></i>
<span>Comment</span>
</button>
<button class="flex items-center justify-center space-x-2 text-gray-600 hover:bg-gray-100 rounded-lg py-1 px-2
flex-1">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comment-section hidden mt-3 pt-3 border-t">
<div class="flex items-center space-x-2">
<img src="${[Link]}" alt="User" class="w-8 h-8 rounded-full">
<div class="flex-1 flex items-center">
<input type="text" placeholder="Write a comment..." class="bg-gray-100 rounded-full py-2 px-4 w-full
focus:outline-none">
<button class="ml-2 text-blue-500">
<i class="far fa-smile"></i>
</button>
</div>
</div>
</div>
</div>
`;

[Link](newPost, [Link]);
closeCreatePostModal();
showToast('Post created successfully!');
}

function toggleLike(button) {
if (!currentUser) {
openAuthModal('login');
showToast('Please login to like posts', 'error');
return;
}

const icon = [Link]('i');


const text = [Link]('span');

if ([Link]('far')) {
[Link]('far');
[Link]('fas', 'text-blue-500');
[Link] = 'Liked';
} else {
[Link]('fas', 'text-blue-500');
[Link]('far');
[Link] = 'Like';
}
}

function toggleCommentSection(button) {
if (!currentUser) {
openAuthModal('login');
showToast('Please login to comment', 'error');
return;
}

const post = [Link]('.post-card');


const commentSection = [Link]('.comment-section');
[Link]('hidden');
}

// Call Functions
function startVoiceCall(userName) {
if (!currentUser) {
openAuthModal('login');
showToast('Please login to make calls', 'error');
return;
}

[Link]('remoteUserName').textContent = userName;
[Link]('callModal').[Link] = 'flex';
[Link]('localVideo').[Link] = 'none';
showToast(`Starting voice call with ${userName}`);
}

function startVideoCall(userName) {
if (!currentUser) {
openAuthModal('login');
showToast('Please login to make calls', 'error');
return;
}

[Link]('remoteUserName').textContent = userName;
[Link]('callModal').[Link] = 'flex';
[Link]('localVideo').[Link] = 'block';

// Simulate getting video stream


[Link]({ video: true, audio: true })
.then(stream => {
[Link]('localVideo').srcObject = stream;
// In a real app, you would connect to the remote user's stream here
showToast(`Starting video call with ${userName}`);
})
.catch(err => {
[Link]('Error accessing media devices:', err);
showToast('Error accessing camera/microphone', 'error');
});
}

function closeCallModal() {
[Link]('callModal').[Link] = 'none';
const localVideo = [Link]('localVideo');
if ([Link]) {
[Link]().forEach(track => [Link]());
[Link] = null;
}
showToast('Call ended');
}

function toggleMute() {
const button = [Link]('muteBtn');
const icon = [Link]('i');

if ([Link]('fa-microphone')) {
[Link]('fa-microphone');
[Link]('fa-microphone-slash');
[Link]('bg-red-500', 'hover:bg-red-600');
[Link]('bg-gray-500', 'hover:bg-gray-600');
} else {
[Link]('fa-microphone-slash');
[Link]('fa-microphone');
[Link]('bg-gray-500', 'hover:bg-gray-600');
[Link]('bg-red-500', 'hover:bg-red-600');
}
}

function toggleVideo() {
const button = [Link]('videoBtn');
const icon = [Link]('i');
const localVideo = [Link]('localVideo');

if ([Link]('fa-video')) {
[Link]('fa-video');
[Link]('fa-video-slash');
[Link]('bg-blue-500', 'hover:bg-blue-600');
[Link]('bg-gray-500', 'hover:bg-gray-600');
[Link] = '0.5';
} else {
[Link]('fa-video-slash');
[Link]('fa-video');
[Link]('bg-gray-500', 'hover:bg-gray-600');
[Link]('bg-blue-500', 'hover:bg-blue-600');
[Link] = '1';
}
}

function endCall() {
closeCallModal();
}

function applyEffect(effect) {
const localVideo = [Link]('localVideo');
// In a real app, you would apply actual video effects here
showToast(`Applied ${effect} effect`);
}

// Utility Functions
function showToast(message, type = 'success') {
const toast = [Link]('div');
[Link] = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500'
: 'bg-red-500'} z-50`;
[Link] = message;
[Link](toast);

setTimeout(() => {
[Link]('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => [Link](), 300);
}, 3000);
}

// Close dropdowns when clicking outside


[Link]('click', function(event) {
if (![Link]('#userMenu') && ![Link]('userDropdown').[Link]('hidden')) {
[Link]('userDropdown').[Link]('hidden');
}
});
</script>
</body>
</html>

You might also like