Hugging Face's logo

Spaces:
kumar4dishant
/
hh
Running

App Files Community
hh / index.html
kumar4dishant's picture
kumar4dishant
Add 3 files
57ab6d2 verified
Raw History Blame Contribute Delete
17.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VibeConnect - Social Messaging App</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">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
light: '#FF5F6D',
dark: '#FF4757'
},
secondary: {
light: '#FFC371',
dark: '#FFA502'
},
accent: {
light: '#12D8FA',
dark: '#1E90FF'
},
dark: {
light: '#1A1A2E',
dark: '#0F0F1B'
},
light: {
light: '#F9F9F9',
dark: '#1E1E1E'
},
success: {
light: '#4BB543',
dark: '#2ECC71'
},
warning: {
light: '#FFCC00',
dark: '#F39C12'
},
danger: {
light: '#FF3333',
dark: '#E74C3C'
},
instagram: {
light: '#E1306C',
dark: '#C13584'
},
whatsapp: {
light: '#25D366',
dark: '#128C7E'
},
bg: {
light: '#FFFFFF',
dark: '#121212'
},
text: {
light: '#333333',
dark: '#E0E0E0'
},
muted: {
light: '#777777',
dark: '#AAAAAA'
}
}
}
}
}
</script>
<style>
.gradient-bg {
background: linear-gradient(135deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
}
.gradient-bg-light {
--tw-gradient-from: #FF5F6D;
--tw-gradient-to: #FFC371;
}
.gradient-bg-dark {
--tw-gradient-from: #FF4757;
--tw-gradient-to: #FF7F50;
}
.instagram-gradient {
background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}
.story-ring {
background: linear-gradient(45deg, var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to));
}
.story-ring-light {
--tw-gradient-from: #FF5F6D;
--tw-gradient-via: #FFC371;
--tw-gradient-to: #12D8FA;
}
.story-ring-dark {
--tw-gradient-from: #FF4757;
--tw-gradient-via: #FF7F50;
--tw-gradient-to: #1E90FF;
}
.chat-bubble-left {
border-radius: 1.125rem 1.125rem 1.125rem 0;
}
.chat-bubble-right {
border-radius: 1.125rem 1.125rem 0 1.125rem;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.lock-icon {
position: absolute;
top: -4px;
right: -4px;
background: #FF4757;
color: white;
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
border: 2px solid;
}
.lock-icon-light {
border-color: white;
}
.lock-icon-dark {
border-color: #1E1E1E;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: var(--tw-bg-opacity);
padding: 2rem;
border-radius: 0.5rem;
width: 90%;
max-width: 400px;
}
.fingerprint-btn {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
cursor: pointer;
transition: all 0.3s;
}
.fingerprint-btn:hover {
transform: scale(1.05);
}
.password-input {
letter-spacing: 0.2em;
font-family: monospace;
}
.tab-active {
position: relative;
}
.tab-active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background-color: currentColor;
}
</style>
</head>
<body class="bg-bg-light text-text-light dark:bg-bg-dark dark:text-text-dark font-sans transition-colors duration-200">
<!-- Theme Toggle Button -->
<button id="themeToggle" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full shadow-lg bg-primary-light dark:bg-primary-dark text-white flex items-center justify-center">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:block"></i>
</button>
<!-- Main App Container -->
<div class="flex h-screen overflow-hidden">
<!-- Left Sidebar - Contacts/Chats -->
<div class="w-1/4 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-dark hidden md:flex flex-col">
<!-- User Profile Header -->
<div class="p-4 gradient-bg gradient-bg-light dark:gradient-bg-dark text-white flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover">
</div>
<span class="font-bold">Sarah Johnson</span>
</div>
<div class="flex space-x-4">
<button class="text-white hover:text-gray-200" id="newChatBtn">
<i class="fas fa-comment-alt"></i>
</button>
<button class="text-white hover:text-gray-200" id="themeToggleSidebar">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:block"></i>
</button>
<div class="relative">
<button class="text-white hover:text-gray-200" id="menuBtn">
<i class="fas fa-ellipsis-v"></i>
</button>
<div id="menuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Archived</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
</div>
</div>
</div>
</div>
<!-- Search Bar -->
<div class="p-3 bg-gray-50 dark:bg-gray-800">
<div class="relative">
<input type="text" placeholder="Search or start new chat" class="w-full py-2 px-4 pl-10 bg-white dark:bg-gray-700 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark">
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
</div>
</div>
<!-- Chats List -->
<div class="flex-1 overflow-y-auto scrollbar-hide">
<!-- Normal Chat -->
<div class="p-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center chat-item" data-chat="normal">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover">
</div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-success-light dark:bg-success-dark rounded-full border-2 border-white dark:border-gray-800"></span>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold">Michael Chen</span>
<span class="text-xs text-gray-500 dark:text-gray-400">12:30 PM</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">Hey, how are you doing?</p>
<span class="w-5 h-5 bg-primary-light dark:bg-primary-dark text-white rounded-full flex items-center justify-center text-xs">3</span>
</div>
</div>
</div>
<!-- Private Chat (Locked) -->
<div class="p-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center chat-item" data-chat="private" data-locked="true">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover grayscale">
</div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-success-light dark:bg-success-dark rounded-full border-2 border-white dark:border-gray-800"></span>
<div class="lock-icon lock-icon-light dark:lock-icon-dark">
<i class="fas fa-lock"></i>
</div>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold">Jessica Wong</span>
<span class="text-xs text-gray-500 dark:text-gray-400">10:15 AM</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">🔒 Private message</p>
<i class="fas fa-check-double text-accent-light dark:text-accent-dark"></i>
</div>
</div>
</div>
<!-- Private Chat (Unlocked) -->
<div class="p-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center chat-item" data-chat="private" data-locked="false">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover">
</div>
<div class="lock-icon lock-icon-light dark:lock-icon-dark bg-success-light dark:bg-success-dark">
<i class="fas fa-unlock"></i>
</div>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold">David Kim</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">Meeting at 2pm tomorrow</p>
<i class="fas fa-check text-gray-400"></i>
</div>
</div>
</div>
<div class="p-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center chat-item" data-chat="normal">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover">
</div>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold">Emma Wilson</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">Thanks for the help!</p>
<i class="fas fa-check-double text-gray-400"></i>
</div>
</div>
</div>
<div class="p-3 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-center chat-item" data-chat="normal">
<div class="relative">
<div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover">
</div>
</div>
<div class="ml-3 flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold">Group: Weekend Plans</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Monday</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">Alex: I'll bring the drinks</p>
<i class="fas fa-check-double text-gray-400"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col">
<!-- Mobile Header -->
<div class="md:hidden p-4 gradient-bg gradient-bg-light dark:gradient-bg-dark text-white flex items-center justify-between">
<div class="flex items-center space-x-3">
<button id="backButton" class="text-white">
<i class="fas fa-arrow-left"></i>
</button>
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-6 h-6 rounded-full object-cover">
</div>
<span class="font-bold">Michael Chen</span>
</div>
<div class="flex space-x-4">
<button class="text-white">
<i class="fas fa-video"></i>
</button>
<button class="text-white">
<i class="fas fa-phone"></i>
</button>
<button class="text-white">
<i class="fas fa-ellipsis-v"></i>
</button>
</html>