Hugging Face's logo

Spaces:
TakizawaAccount
/
https-t-me
Running

App Files Community
https-t-me / index.html
TakizawaAccount's picture
TakizawaAccount
Создай мессенджер бля общения и кинь файл сюда чтоб его можно было скачать - Initial Deployment
825c35a verified
Raw History Blame Contribute Delete
10.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatWave - Modern Messenger</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6366f1;
--primary-dark: #4f46e5;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb;
}
.chat-height {
height: calc(100vh - 160px);
}
.message-sent {
background-color: var(--primary);
color: white;
border-radius: 18px 18px 0 18px;
}
.message-received {
background-color: #e5e7eb;
color: #111827;
border-radius: 18px 18px 18px 0;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 border-r border-gray-200 bg-white">
<div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
<div class="flex items-center">
<i data-feather="message-square" class="text-indigo-500 mr-2"></i>
<span class="text-xl font-bold text-gray-800">ChatWave</span>
</div>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<!-- Search -->
<div class="px-4 py-3">
<div class="relative">
<input type="text" placeholder="Search contacts" class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
<i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<!-- Contacts list -->
<div class="flex-1 overflow-y-auto">
<div class="space-y-1 px-2">
<!-- Contact item -->
<div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer bg-indigo-50">
<div class="relative">
<img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full object-cover" alt="User">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Alex Johnson</h3>
<p class="text-xs text-gray-500">Hey, how are you?</p>
</div>
<div class="ml-auto text-xs text-gray-500">2 min</div>
</div>
<!-- More contacts -->
<div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="http://static.photos/people/200x200/2" class="w-10 h-10 rounded-full object-cover" alt="User">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Sarah Miller</h3>
<p class="text-xs text-gray-500">Meeting at 3pm</p>
</div>
<div class="ml-auto text-xs text-gray-500">1h</div>
</div>
<div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="http://static.photos/people/200x200/3" class="w-10 h-10 rounded-full object-cover" alt="User">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">David Wilson</h3>
<p class="text-xs text-gray-500">Sent the files</p>
</div>
<div class="ml-auto text-xs text-gray-500">5h</div>
</div>
<div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="http://static.photos/people/200x200/4" class="w-10 h-10 rounded-full object-cover" alt="User">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Emma Davis</h3>
<p class="text-xs text-gray-500">Thanks for your help!</p>
</div>
<div class="ml-auto text-xs text-gray-500">1d</div>
</div>
<div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
<div class="relative">
<img src="http://static.photos/people/200x200/5" class="w-10 h-10 rounded-full object-cover" alt="User">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-400 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Michael Brown</h3>
<p class="text-xs text-gray-500">Check this out</p>
</div>
<div class="ml-auto text-xs text-gray-500">2d</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main chat area -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Chat header -->
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
<div class="flex items-center">
<button class="md:hidden mr-2 text-gray-500">
<i data-feather="menu"></i>
</button>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full object-cover" alt="User">
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Alex Johnson</h3>
<p class="text-xs text-gray-500">Online</p>
</div>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-500 hover:text-gray-700">
<i data-feather="phone"></i>
</button>
<button class="text-gray-500 hover:text-gray-700">
<i data-feather="video"></i>
</button>
<button class="text-gray-500 hover:text-gray-700">
<i data-feather="more-vertical"></i>
</button>
</div>
</div>
<!-- Messages -->
<div class="flex-1 overflow-y-auto chat-height scrollbar-hide bg-gray-50 p-4">
<div class="space-y-3">
<!-- Received message -->
<div class="flex items-start">
<img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full object-cover mr-2" alt="User">
<div class="message-received px-4 py-2 max-w-xs">
<p>Hey there! How's it going?</p>
<p class="text-xs text-gray-600 mt-1">10:30 AM</p>
</div>
</div>
<!-- Sent message -->
<div class="flex justify-end">
<div class="message-sent px-4 py-2 max-w-xs">
<p>I'm doing great! Just finished that project we talked about.</p>
<p class="text-xs text-indigo-100 mt-1">10:32 AM</p>
</div>
</div>
<!-- Received message -->
<div class="flex items-start">
<img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full object-cover mr-2" alt="User">
<div class="message-received px-4 py-2 max-w-xs">
<p>That's awesome! Can you send me the files?</p>
<p class="text-xs text-gray
</body>
</html>