Mackin7's picture
Add 2 files
4d26fcc verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Messenger by Matthew Eyesan</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>
/* Custom CSS for animations and special effects */
.important-message {
background: linear-gradient(135deg, #fef08a 0%, #93c5fd 100%);
animation: pulse 2s infinite, rotate 5s infinite;
transform-origin: center;
box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
border-left: 4px solid #3b82f6;
}
@keyframes pulse {
0% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); }
100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
}
@keyframes rotate {
0% { transform: rotate(-1deg); }
50% { transform: rotate(1deg); }
100% { transform: rotate(-1deg); }
}
.profile-pic {
transition: all 0.3s ease;
}
.profile-pic:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.message-container {
scroll-behavior: smooth;
}
.old-message {
opacity: 0.6;
filter: grayscale(30%);
}
.active-tab {
border-bottom: 3px solid #3b82f6;
font-weight: 600;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
<div class="w-full max-w-4xl h-[90vh] bg-white rounded-xl shadow-xl overflow-hidden flex">
<!-- Left sidebar - Contacts -->
<div class="w-1/3 border-r border-gray-200 bg-gray-50 flex flex-col">
<!-- User profile header -->
<div class="p-4 bg-blue-600 text-white flex items-center space-x-3">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full profile-pic cursor-pointer">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div>
<h3 class="font-semibold">Matthew Eyesan</h3>
<p class="text-xs opacity-80">Online</p>
</div>
</div>
<!-- Search bar -->
<div class="p-3 border-b border-gray-200">
<div class="relative">
<input type="text" placeholder="Search messages" class="w-full pl-10 pr-4 py-2 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<!-- Filter tabs -->
<div class="flex border-b border-gray-200">
<button class="flex-1 py-3 text-sm font-medium text-center active-tab">All</button>
<button class="flex-1 py-3 text-sm font-medium text-center text-gray-500 filter-tab" data-filter="important">Important</button>
<button class="flex-1 py-3 text-sm font-medium text-center text-gray-500 filter-tab" data-filter="unread">Unread</button>
</div>
<!-- Contacts list -->
<div class="flex-1 overflow-y-auto">
<div class="divide-y divide-gray-200">
<!-- Contact 1 -->
<div class="p-3 flex items-center space-x-3 hover:bg-gray-100 cursor-pointer border-l-4 border-blue-500">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-12 h-12 rounded-full">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<h4 class="font-medium">Sarah Johnson</h4>
<span class="text-xs text-gray-500">10:30 AM</span>
</div>
<p class="text-sm text-gray-600 truncate">Hey, did you see the new project specs?</p>
</div>
</div>
<!-- Contact 2 -->
<div class="p-3 flex items-center space-x-3 hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Mike" class="w-12 h-12 rounded-full">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<h4 class="font-medium">Mike Chen</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-sm text-gray-600 truncate">Meeting at 2pm tomorrow</p>
</div>
</div>
<!-- Contact 3 (with important message) -->
<div class="p-3 flex items-center space-x-3 hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Lisa" class="w-12 h-12 rounded-full">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<h4 class="font-medium">Lisa Wong</h4>
<span class="text-xs text-gray-500">Mon</span>
</div>
<p class="text-sm text-gray-600 truncate"><i class="fas fa-exclamation-circle text-yellow-400 mr-1"></i> URGENT: Client feedback needed</p>
</div>
</div>
<!-- Contact 4 (old message) -->
<div class="p-3 flex items-center space-x-3 hover:bg-gray-100 cursor-pointer old-contact">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="David" class="w-12 h-12 rounded-full">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<h4 class="font-medium">David Miller</h4>
<span class="text-xs text-gray-500">Last week</span>
</div>
<p class="text-sm text-gray-600 truncate">Thanks for your help!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Right side - Chat area -->
<div class="flex-1 flex flex-col">
<!-- Chat header -->
<div class="p-4 border-b border-gray-200 flex items-center justify-between bg-white">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold">Sarah Johnson</h3>
<p class="text-xs text-gray-500">Online</p>
</div>
</div>
<div class="flex space-x-4 text-gray-500">
<button class="hover:text-blue-500"><i class="fas fa-phone"></i></button>
<button class="hover:text-blue-500"><i class="fas fa-video"></i></button>
<button class="hover:text-blue-500"><i class="fas fa-info-circle"></i></button>
</div>
</div>
<!-- Messages container -->
<div class="flex-1 overflow-y-auto p-4 bg-gray-50 message-container" id="messageContainer">
<!-- Date divider -->
<div class="text-center my-4">
<span class="px-3 py-1 bg-gray-200 rounded-full text-xs text-gray-600">Today</span>
</div>
<!-- Message from Sarah -->
<div class="flex mb-4">
<div class="flex-shrink-0 mr-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full">
</div>
<div class="max-w-xs lg:max-w-md">
<div class="bg-white p-3 rounded-lg shadow-sm">
<p>Hey Matthew! How's the project going?</p>
<p class="text-xs text-gray-500 mt-1">10:30 AM</p>
</div>
</div>
</div>
<!-- Message from me -->
<div class="flex mb-4 justify-end">
<div class="max-w-xs lg:max-w-md">
<div class="bg-blue-100 p-3 rounded-lg shadow-sm">
<p>Going well! Just finished the UI components.</p>
<p class="text-xs text-gray-500 mt-1 text-right">10:32 AM</p>
</div>
</div>
</div>
<!-- Important message from Sarah -->
<div class="flex mb-4">
<div class="flex-shrink-0 mr-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full">
</div>
<div class="max-w-xs lg:max-w-md">
<div class="p-3 rounded-lg shadow-sm important-message">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-blue-600 mr-2"></i>
<p class="font-semibold">IMPORTANT:</p>
</div>
<p class="mt-1">The client wants to move the deadline up to Friday!</p>
<p class="text-xs text-gray-600 mt-1">10:33 AM</p>
</div>
</div>
</div>
<!-- Date divider -->
<div class="text-center my-4">
<span class="px-3 py-1 bg-gray-200 rounded-full text-xs text-gray-600">Yesterday</span>
</div>
<!-- Old message from me -->
<div class="flex mb-4 justify-end old-message">
<div class="max-w-xs lg:max-w-md">
<div class="bg-blue-100 p-3 rounded-lg shadow-sm">
<p>I'll adjust the timeline and let the team know.</p>
<p class="text-xs text-gray-500 mt-1 text-right">Yesterday, 4:22 PM</p>
</div>
</div>
</div>
<!-- Old message from Sarah -->
<div class="flex mb-4 old-message">
<div class="flex-shrink-0 mr-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full">
</div>
<div class="max-w-xs lg:max-w-md">
<div class="bg-white p-3 rounded-lg shadow-sm">
<p>Thanks Matthew! You're a lifesaver.</p>
<p class="text-xs text-gray-500 mt-1">Yesterday, 4:25 PM</p>
</div>
</div>
</div>
</div>
<!-- Message input -->
<div class="p-4 border-t border-gray-200 bg-white">
<div class="flex items-center space-x-2">
<button class="text-gray-500 hover:text-blue-500"><i class="far fa-smile"></i></button>
<button class="text-gray-500 hover:text-blue-500"><i class="fas fa-paperclip"></i></button>
<input type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="text-gray-500 hover:text-blue-500"><i class="fas fa-microphone"></i></button>
<button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<script>
// Filter messages functionality
document.querySelectorAll('.filter-tab').forEach(tab => {
tab.addEventListener('click', function() {
// Update active tab UI
document.querySelector('.active-tab').classList.remove('active-tab');
this.classList.add('active-tab');
const filter = this.dataset.filter;
// Filter contacts based on selection
document.querySelectorAll('.old-contact').forEach(contact => {
contact.style.display = 'flex';
});
if (filter === 'important') {
document.querySelectorAll('.old-contact').forEach(contact => {
if (!contact.querySelector('.fa-exclamation-circle')) {
contact.style.display = 'none';
}
});
} else if (filter === 'unread') {
document.querySelectorAll('.old-contact').forEach(contact => {
if (!contact.querySelector('.bg-green-500')) {
contact.style.display = 'none';
}
});
}
});
});
// Auto-scroll to bottom of messages
const messageContainer = document.getElementById('messageContainer');
messageContainer.scrollTop = messageContainer.scrollHeight;
// Highlight important messages more prominently
setInterval(() => {
const importantMessages = document.querySelectorAll('.important-message');
importantMessages.forEach(msg => {
msg.style.animation = 'pulse 2s infinite, rotate 5s infinite';
});
}, 1000);
// Simulate new message arrival
setTimeout(() => {
const messageContainer = document.getElementById('messageContainer');
const newMessage = document.createElement('div');
newMessage.className = 'flex mb-4';
newMessage.innerHTML = `
<div class="flex-shrink-0 mr-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full">
</div>
<div class="max-w-xs lg:max-w-md">
<div class="bg-white p-3 rounded-lg shadow-sm">
<p>Also, don't forget about the team meeting at 3pm today!</p>
<p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
</div>
</div>
`;
messageContainer.appendChild(newMessage);
messageContainer.scrollTop = messageContainer.scrollHeight;
}, 3000);
</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=Mackin7/facebook-messenger-filter-and-animated-messages" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>