Spaces:

Starchik1
/

Chat

Sleeping

App Files Files Community

Starchik1 commited on Nov 6

Commit

bcd5aaa

verified ·

1 Parent(s): 7aeb84b

Update main.py

Browse files

Files changed (1) hide show

main.py +579 -249

main.py CHANGED Viewed

@@ -15,6 +15,7 @@ socketio = SocketIO(app, cors_allowed_origins="*")
 users = {}
 messages = []
 voice_messages = {}
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
@@ -33,7 +34,7 @@ HTML_TEMPLATE = '''
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             height: 100vh;
             overflow: hidden;
         }
@@ -45,7 +46,6 @@ HTML_TEMPLATE = '''
             max-width: 100%;
             margin: 0 auto;
             background: white;
-            box-shadow: 0 0 20px rgba(0,0,0,0.1);
         }
         /* Login Screen */
@@ -77,6 +77,7 @@ HTML_TEMPLATE = '''
             border-radius: 25px;
             font-size: 16px;
             background: rgba(255,255,255,0.9);
         }
         .login-btn {
@@ -103,17 +104,43 @@ HTML_TEMPLATE = '''
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             padding: 15px;
-            text-align: center;
             position: relative;
         }
-        .online-users {
-            background: rgba(255,255,255,0.2);
-            padding: 10px;
-            margin-top: 10px;
-            border-radius: 15px;
             font-size: 14px;
             cursor: pointer;
         }
         .messages-container {
@@ -128,7 +155,7 @@ HTML_TEMPLATE = '''
             margin: 10px 0;
             padding: 12px 15px;
             border-radius: 18px;
-            max-width: 80%;
             word-wrap: break-word;
             position: relative;
             animation: fadeIn 0.3s ease-in;
@@ -171,7 +198,7 @@ HTML_TEMPLATE = '''
         .voice-message {
             display: flex;
             align-items: center;
-            padding: 8px 15px;
         }
         .voice-play-btn {
@@ -209,6 +236,7 @@ HTML_TEMPLATE = '''
             margin: 0 5px;
             font-size: 16px;
             outline: none;
         }
         .action-btn {
@@ -221,42 +249,196 @@ HTML_TEMPLATE = '''
             transition: background 0.2s;
             min-width: 44px;
             min-height: 44px;
         }
         .action-btn:active {
             background: rgba(0,0,0,0.1);
         }
-        .call-buttons {
             display: flex;
-            justify-content: center;
             padding: 10px;
-            background: white;
-            border-top: 1px solid #e0e0e0;
         }
-        .call-btn {
-            background: #4CAF50;
             color: white;
             border: none;
             border-radius: 50%;
-            width: 60px;
-            height: 60px;
-            margin: 0 15px;
             font-size: 24px;
             cursor: pointer;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-            transition: transform 0.2s;
         }
-        .call-btn:active {
-            transform: scale(0.95);
         }
-        .video-call-btn {
-            background: #FF5722;
         }
         .recording-overlay {
             position: fixed;
             top: 0;
@@ -287,49 +469,61 @@ HTML_TEMPLATE = '''
             100% { transform: scale(0.8); opacity: 1; }
         }
-        .user-list {
-            position: absolute;
-            top: 100%;
             left: 0;
-            right: 0;
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 10px;
-            margin: 5px;
             display: none;
-            z-index: 100;
-            max-height: 200px;
-            overflow-y: auto;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
         }
-        .user-item {
-            padding: 12px 15px;
-            border-bottom: 1px solid #eee;
-            cursor: pointer;
-            color: #333;
         }
-        .user-item:last-child {
-            border-bottom: none;
         }
-        .user-item:active {
-            background: #f0f0f0;
         }
-        .selected-user {
-            margin-top: 10px;
-            font-size: 14px;
-            background: rgba(255,255,255,0.3);
-            padding: 8px 12px;
-            border-radius: 15px;
         }
-        .call-info {
-            margin-top: 5px;
-            font-size: 12px;
-            opacity: 0.9;
         }
     </style>
 </head>
@@ -350,15 +544,15 @@ HTML_TEMPLATE = '''
     <!-- Main Chat Screen -->
     <div id="chatScreen" class="app-container chat-screen">
         <div class="header">
-            <h2>💬 Мессенджер</h2>
-            <div class="online-users" onclick="toggleUserList()">
-                Онлайн: <span id="onlineCount">0</span> пользователей
-                <div class="call-info">Нажмите для выбора</div>
             </div>
-            <div id="selectedUserInfo" class="selected-user" style="display: none;">
-                Выбрано: <span id="selectedUserName">-</span>
             </div>
-            <div id="userList" class="user-list"></div>
         </div>
         <div id="messagesContainer" class="messages-container">
@@ -367,18 +561,43 @@ HTML_TEMPLATE = '''
             </div>
         </div>
-        <div class="call-buttons">
-            <button class="call-btn" onclick="startAudioCall()" title="Аудиозвонок">📞</button>
-            <button class="call-btn video-call-btn" onclick="startVideoCall()" title="Видеозвонок">📹</button>
-        </div>
         <div class="input-area">
-            <button class="action-btn" onclick="toggleVoiceRecord()" title="Голосовое сообщение">🎤</button>
             <input type="text" id="messageInput" class="message-input" placeholder="Введите сообщение..." maxlength="500">
             <button class="action-btn" onclick="sendMessage()" title="Отправить">📤</button>
         </div>
     </div>
     <!-- Recording Overlay -->
     <div id="recordingOverlay" class="recording-overlay">
         <div class="recording-animation"></div>
@@ -386,6 +605,18 @@ HTML_TEMPLATE = '''
         <p>Нажмите для остановки</p>
     </div>
     <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
     <script>
         const socket = io();
@@ -397,8 +628,10 @@ HTML_TEMPLATE = '''
         let remoteStream = null;
         let peerConnection = null;
         let currentCall = null;
-        let selectedUser = null;
-        let onlineUsers = [];
         // WebRTC configuration
         const rtcConfig = {
@@ -421,8 +654,7 @@ HTML_TEMPLATE = '''
         socket.on('user_list_update', (data) => {
             document.getElementById('onlineCount').textContent = data.count;
-            onlineUsers = data.users || [];
-            updateUserList();
         });
         socket.on('new_message', (message) => {
@@ -434,32 +666,23 @@ HTML_TEMPLATE = '''
         });
         socket.on('incoming_call', (data) => {
-            if (confirm(`Входящий ${data.isVideo ? 'видео' : 'аудио'} звонок от ${data.from_user}. Принять?`)) {
-                socket.emit('call_answer', {
-                    call_id: data.call_id,
-                    answer: true,
-                    to_user: data.from_user,
-                    isVideo: data.isVideo
-                });
-                startCall(data.isVideo, false, data.from_user);
-            } else {
-                socket.emit('call_answer', {
-                    call_id: data.call_id,
-                    answer: false,
-                    to_user: data.from_user
-                });
-            }
         });
         socket.on('call_answered', (data) => {
             if (data.answer) {
-                startCall(data.isVideo, true, data.from_user);
             } else {
-                alert('Звонок отклонен');
-                endCall();
             }
         });
         socket.on('webrtc_offer', async (data) => {
             if (!peerConnection) {
                 await createPeerConnection(false);
@@ -467,9 +690,11 @@ HTML_TEMPLATE = '''
             await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
             const answer = await peerConnection.createAnswer();
             await peerConnection.setLocalDescription(answer);
             socket.emit('webrtc_answer', {
                 answer: answer,
-                to_user: data.from_user
             });
         });
@@ -522,7 +747,7 @@ HTML_TEMPLATE = '''
             container.appendChild(messageDiv);
             container.scrollTop = container.scrollHeight;
-            // Убираем placeholder если есть сообщения
             const placeholder = container.querySelector('div[style*="text-align: center"]');
             if (placeholder) {
                 placeholder.remove();
@@ -550,55 +775,45 @@ HTML_TEMPLATE = '''
             container.scrollTop = container.scrollHeight;
         }
-        function updateUserList() {
-            const userList = document.getElementById('userList');
-            userList.innerHTML = '';
-            if (onlineUsers.length === 0) {
-                const emptyItem = document.createElement('div');
-                emptyItem.className = 'user-item';
-                emptyItem.textContent = 'Нет других пользователей онлайн';
-                emptyItem.style.color = '#999';
-                emptyItem.style.cursor = 'default';
-                userList.appendChild(emptyItem);
                 return;
             }
-            onlineUsers.forEach(user => {
-                if (user !== currentUser.username) {
-                    const userItem = document.createElement('div');
-                    userItem.className = 'user-item';
-                    userItem.textContent = user;
-                    userItem.onclick = () => {
-                        selectedUser = user;
-                        document.getElementById('selectedUserName').textContent = user;
-                        document.getElementById('selectedUserInfo').style.display = 'block';
-                        userList.style.display = 'none';
-                    };
-                    userList.appendChild(userItem);
-                }
             });
         }
-        function toggleUserList() {
-            const userList = document.getElementById('userList');
-            if (onlineUsers.length <= 1) {
-                alert('Нет других пользователей онлайн');
-                return;
-            }
-            userList.style.display = userList.style.display === 'block' ? 'none' : 'block';
         }
         // Voice Messages
-        async function toggleVoiceRecord() {
-            if (!isRecording) {
-                await startRecording();
-            } else {
                 stopRecording();
             }
-        }
-        async function startRecording() {
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({
                     audio: {
@@ -642,7 +857,7 @@ HTML_TEMPLATE = '''
                 mediaRecorder.start();
                 isRecording = true;
-                // Показываем оверлей записи
                 document.getElementById('recordingOverlay').style.display = 'flex';
             } catch (error) {
@@ -664,145 +879,240 @@ HTML_TEMPLATE = '''
             audio.play().catch(e => console.error('Error playing audio:', e));
         }
-        // WebRTC Functions
-        async function createPeerConnection(isCaller) {
-            try {
-                peerConnection = new RTCPeerConnection(rtcConfig);
-                // Add local stream if available
-                if (localStream) {
-                    localStream.getTracks().forEach(track => {
-                        peerConnection.addTrack(track, localStream);
-                    });
-                }
-                // Handle incoming tracks
-                peerConnection.ontrack = (event) => {
-                    remoteStream = event.streams[0];
-                    // Можно добавить отображение удаленного видео
-                    console.log('Remote track received');
-                };
-                // Handle ICE candidates
-                peerConnection.onicecandidate = (event) => {
-                    if (event.candidate && selectedUser) {
-                        socket.emit('webrtc_ice_candidate', {
-                            candidate: event.candidate,
-                            to_user: selectedUser
-                        });
-                    }
-                };
-                return peerConnection;
-            } catch (error) {
-                console.error('Error creating peer connection:', error);
-                throw error;
-            }
         }
-        async function startAudioCall() {
-            if (!selectedUser) {
-                alert('Сначала выберите пользователя из списка онл��йн (нажмите на "Онлайн: X пользователей")');
-                toggleUserList();
-                return;
-            }
-            await startCall(false, true, selectedUser);
         }
-        async function startVideoCall() {
-            if (!selectedUser) {
-                alert('Сначала выберите пользователя из списка онлайн (нажмите на "Онлайн: X пользователей")');
-                toggleUserList();
-                return;
-            }
-            await startCall(true, true, selectedUser);
         }
-        async function startCall(isVideo, isCaller, targetUser) {
             try {
-                selectedUser = targetUser;
                 // Get local media stream
                 const constraints = {
                     audio: true,
                     video: isVideo ? {
-                        width: { ideal: 1280 },
-                        height: { ideal: 720 }
                     } : false
                 };
                 localStream = await navigator.mediaDevices.getUserMedia(constraints);
                 // Create peer connection
-                await createPeerConnection(isCaller);
-                if (isCaller) {
                     // Create and send offer
                     const offer = await peerConnection.createOffer();
                     await peerConnection.setLocalDescription(offer);
                     socket.emit('webrtc_offer', {
                         offer: offer,
-                        to_user: targetUser,
-                        isVideo: isVideo
                     });
-                    // Send call request
-                    socket.emit('call_request', {
-                        call_id: Date.now().toString(),
-                        from_user: currentUser.username,
-                        to_user: targetUser,
-                        isVideo: isVideo
                     });
                 }
-                alert(`${isVideo ? 'Видео' : 'Аудио'} звонок ${isCaller ? 'начат' : 'принят'} с ${targetUser}`);
-            } catch (error) {
-                console.error('Error starting call:', error);
-                alert(`Ошибка ${isVideo ? 'видео' : 'аудио'} звонка: ${error.message}`);
-                endCall();
             }
         }
         function endCall() {
             if (peerConnection) {
                 peerConnection.close();
                 peerConnection = null;
             }
             if (localStream) {
                 localStream.getTracks().forEach(track => track.stop());
                 localStream = null;
             }
-            remoteStream = null;
             currentCall = null;
         }
-        // Touch events for voice recording
-        let recordingTimer;
-        const voiceBtn = document.querySelector('.action-btn[title="Голосовое сообщение"]');
-        if (voiceBtn) {
-            voiceBtn.addEventListener('touchstart', function(e) {
-                e.preventDefault();
-                recordingTimer = setTimeout(() => {
-                    startRecording();
-                }, 500);
-            });
-            voiceBtn.addEventListener('touchend', function(e) {
-                e.preventDefault();
-                clearTimeout(recordingTimer);
-                if (isRecording) {
-                    stopRecording();
                 }
-            });
         }
-        // Click on recording overlay to stop
         document.getElementById('recordingOverlay').addEventListener('click', stopRecording);
-        // Keyboard events
         document.getElementById('messageInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
                 sendMessage();
@@ -815,17 +1125,15 @@ HTML_TEMPLATE = '''
             }
         });
-        // Close user list when clicking outside
         document.addEventListener('click', (e) => {
-            if (!e.target.closest('.online-users') && !e.target.closest('.user-list')) {
-                document.getElementById('userList').style.display = 'none';
             }
         });
-        // Initialize
-        window.onload = function() {
-            onlineUsers = [];
-        };
     </script>
 </body>
 </html>
@@ -838,7 +1146,6 @@ def index():
 @socketio.on('connect')
 def handle_connect():
     print(f'Client connected: {request.sid}')
-    # Send current user list to the newly connected client
     emit('user_list_update', {
         'count': len(users),
         'users': [user_data['username'] for user_data in users.values()]
@@ -848,6 +1155,12 @@ def handle_connect():
 def handle_disconnect():
     for user_id, user_data in list(users.items()):
         if user_data.get('sid') == request.sid:
             del users[user_id]
             break
@@ -909,15 +1222,23 @@ def handle_voice_message(data):
 @socketio.on('call_request')
 def handle_call_request(data):
-    target_user = data.get('to_user')
     target_sid = None
     for user_data in users.values():
-        if user_data['username'] == target_user:
             target_sid = user_data['sid']
             break
     if target_sid:
         emit('incoming_call', {
             'call_id': data['call_id'],
             'from_user': data['from_user'],
@@ -926,44 +1247,53 @@ def handle_call_request(data):
 @socketio.on('call_answer')
 def handle_call_answer(data):
-    target_user = data.get('to_user')
-    target_sid = None
-    for user_data in users.values():
-        if user_data['username'] == target_user:
-            target_sid = user_data['sid']
-            break
-    if target_sid:
-        emit('call_answered', {
-            'answer': data['answer'],
-            'from_user': data.get('from_user', current_user),
-            'isVideo': data.get('isVideo', False)
-        }, room=target_sid)
 @socketio.on('webrtc_offer')
 def handle_webrtc_offer(data):
-    target_user = data.get('to_user')
     target_sid = None
     for user_data in users.values():
-        if user_data['username'] == target_user:
             target_sid = user_data['sid']
             break
     if target_sid:
         emit('webrtc_offer', {
             'offer': data['offer'],
-            'from_user': data.get('from_user')
         }, room=target_sid)
 @socketio.on('webrtc_answer')
 def handle_webrtc_answer(data):
-    target_user = data.get('to_user')
     target_sid = None
     for user_data in users.values():
-        if user_data['username'] == target_user:
             target_sid = user_data['sid']
             break
@@ -975,11 +1305,11 @@ def handle_webrtc_answer(data):
 @socketio.on('webrtc_ice_candidate')
 def handle_webrtc_ice_candidate(data):
-    target_user = data.get('to_user')
     target_sid = None
     for user_data in users.values():
-        if user_data['username'] == target_user:
             target_sid = user_data['sid']
             break

 users = {}
 messages = []
 voice_messages = {}
+active_calls = {}
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f0f2f5;
             height: 100vh;
             overflow: hidden;
         }
             max-width: 100%;
             margin: 0 auto;
             background: white;
         }
         /* Login Screen */
             border-radius: 25px;
             font-size: 16px;
             background: rgba(255,255,255,0.9);
+            text-align: center;
         }
         .login-btn {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             padding: 15px;
             position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
+        .header-info {
+            flex: 1;
+        }
+        .header h2 {
+            margin-bottom: 5px;
+            font-size: 18px;
+        }
+        .online-info {
             font-size: 14px;
+            opacity: 0.9;
+        }
+        .call-buttons {
+            display: flex;
+            gap: 10px;
+        }
+        .header-btn {
+            background: rgba(255,255,255,0.2);
+            border: none;
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            color: white;
+            font-size: 18px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .messages-container {
             margin: 10px 0;
             padding: 12px 15px;
             border-radius: 18px;
+            max-width: 85%;
             word-wrap: break-word;
             position: relative;
             animation: fadeIn 0.3s ease-in;
         .voice-message {
             display: flex;
             align-items: center;
+            padding: 8px 0;
         }
         .voice-play-btn {
             margin: 0 5px;
             font-size: 16px;
             outline: none;
+            background: #f8f9fa;
         }
         .action-btn {
             transition: background 0.2s;
             min-width: 44px;
             min-height: 44px;
+            color: #007AFF;
         }
         .action-btn:active {
             background: rgba(0,0,0,0.1);
         }
+        /* Users List */
+        .users-sidebar {
+            position: fixed;
+            top: 0;
+            right: -300px;
+            width: 300px;
+            height: 100%;
+            background: white;
+            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+            transition: right 0.3s ease;
+            z-index: 1000;
             display: flex;
+            flex-direction: column;
+        }
+        .users-sidebar.open {
+            right: 0;
+        }
+        .sidebar-header {
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .close-sidebar {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+        }
+        .users-list {
+            flex: 1;
+            overflow-y: auto;
             padding: 10px;
         }
+        .user-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+        }
+        .user-item:active {
+            background: #f5f5f5;
+        }
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #007AFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            margin-right: 12px;
+        }
+        .user-info {
+            flex: 1;
+        }
+        .user-name {
+            font-weight: 500;
+            margin-bottom: 2px;
+        }
+        .user-status {
+            font-size: 12px;
+            color: #4CAF50;
+        }
+        .call-icon {
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            padding: 8px;
+            color: #007AFF;
+        }
+        /* Call Screen */
+        .call-screen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #1a1a1a;
+            z-index: 2000;
+            display: none;
+            flex-direction: column;
+        }
+        .video-container {
+            flex: 1;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .remote-video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .local-video {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 120px;
+            height: 160px;
+            border-radius: 10px;
+            border: 2px solid white;
+            object-fit: cover;
+        }
+        .call-info {
+            position: absolute;
+            top: 40px;
+            left: 0;
+            right: 0;
+            text-align: center;
             color: white;
+            z-index: 10;
+        }
+        .call-status {
+            font-size: 18px;
+            margin-bottom: 5px;
+        }
+        .call-timer {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .call-controls {
+            position: absolute;
+            bottom: 40px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            z-index: 10;
+        }
+        .call-control-btn {
+            background: rgba(255,255,255,0.2);
             border: none;
             border-radius: 50%;
+            width: 70px;
+            height: 70px;
+            color: white;
             font-size: 24px;
             cursor: pointer;
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
+        .end-call-btn {
+            background: #FF4444;
         }
+        .call-control-btn.active {
+            background: #4CAF50;
         }
+        /* Recording Overlay */
         .recording-overlay {
             position: fixed;
             top: 0;
             100% { transform: scale(0.8); opacity: 1; }
         }
+        /* Overlay */
+        .overlay {
+            position: fixed;
+            top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
             display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1500;
         }
+        .call-alert {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            text-align: center;
+            max-width: 300px;
+            width: 90%;
         }
+        .call-alert-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
         }
+        .alert-btn {
+            flex: 1;
+            padding: 12px;
+            border: none;
+            border-radius: 8px;
+            font-weight: bold;
+            cursor: pointer;
         }
+        .accept-btn {
+            background: #4CAF50;
+            color: white;
         }
+        .reject-btn {
+            background: #FF4444;
+            color: white;
+        }
+        .no-video {
+            background: #333;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
         }
     </style>
 </head>
     <!-- Main Chat Screen -->
     <div id="chatScreen" class="app-container chat-screen">
         <div class="header">
+            <div class="header-info">
+                <h2>💬 Мессенджер</h2>
+                <div class="online-info">
+                    <span id="onlineCount">0</span> пользователей онлайн
+                </div>
             </div>
+            <div class="call-buttons">
+                <button class="header-btn" onclick="toggleUsersSidebar()" title="Пользователи">👥</button>
             </div>
         </div>
         <div id="messagesContainer" class="messages-container">
             </div>
         </div>
         <div class="input-area">
+            <button class="action-btn" onclick="startVoiceRecording()" title="Голосовое сообщение">🎤</button>
             <input type="text" id="messageInput" class="message-input" placeholder="Введите сообщение..." maxlength="500">
             <button class="action-btn" onclick="sendMessage()" title="Отправить">📤</button>
         </div>
     </div>
+    <!-- Users Sidebar -->
+    <div id="usersSidebar" class="users-sidebar">
+        <div class="sidebar-header">
+            <h3>Пользователи онлайн</h3>
+            <button class="close-sidebar" onclick="toggleUsersSidebar()">✕</button>
+        </div>
+        <div id="usersList" class="users-list">
+            <!-- Users will be populated here -->
+        </div>
+    </div>
+    <!-- Call Screen -->
+    <div id="callScreen" class="call-screen">
+        <div class="video-container">
+            <div id="remoteVideoContainer" class="no-video remote-video">
+                <div>Нет видео</div>
+            </div>
+            <video id="localVideo" class="local-video" autoplay playsinline muted></video>
+            <div class="call-info">
+                <div class="call-status" id="callStatus">Звонок...</div>
+                <div class="call-timer" id="callTimer">00:00</div>
+            </div>
+            <div class="call-controls">
+                <button class="call-control-btn" id="muteBtn" onclick="toggleMute()">🎤</button>
+                <button class="call-control-btn" id="videoBtn" onclick="toggleVideo()">📹</button>
+                <button class="call-control-btn end-call-btn" onclick="endCall()">📞</button>
+            </div>
+        </div>
+    </div>
     <!-- Recording Overlay -->
     <div id="recordingOverlay" class="recording-overlay">
         <div class="recording-animation"></div>
         <p>Нажмите для остановки</p>
     </div>
+    <!-- Incoming Call Overlay -->
+    <div id="incomingCallOverlay" class="overlay">
+        <div class="call-alert">
+            <h3>Входящий звонок</h3>
+            <p id="callerName">...</p>
+            <div class="call-alert-buttons">
+                <button class="alert-btn reject-btn" onclick="rejectCall()">Отклонить</button>
+                <button class="alert-btn accept-btn" onclick="acceptCall()">Принять</button>
+            </div>
+        </div>
+    </div>
     <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
     <script>
         const socket = io();
         let remoteStream = null;
         let peerConnection = null;
         let currentCall = null;
+        let callStartTime = null;
+        let callTimerInterval = null;
+        let isMuted = false;
+        let isVideoEnabled = true;
         // WebRTC configuration
         const rtcConfig = {
         socket.on('user_list_update', (data) => {
             document.getElementById('onlineCount').textContent = data.count;
+            updateUsersList(data.users || []);
         });
         socket.on('new_message', (message) => {
         });
         socket.on('incoming_call', (data) => {
+            showIncomingCall(data.from_user, data.call_id, data.isVideo);
         });
         socket.on('call_answered', (data) => {
             if (data.answer) {
+                startCall(data.isVideo, false);
             } else {
+                alert('Пользователь отклонил звонок');
+                hideCallScreen();
             }
         });
+        socket.on('call_ended', () => {
+            alert('Звонок завершен');
+            endCall();
+        });
         socket.on('webrtc_offer', async (data) => {
             if (!peerConnection) {
                 await createPeerConnection(false);
             await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
             const answer = await peerConnection.createAnswer();
             await peerConnection.setLocalDescription(answer);
             socket.emit('webrtc_answer', {
                 answer: answer,
+                to_user: data.from_user,
+                call_id: data.call_id
             });
         });
             container.appendChild(messageDiv);
             container.scrollTop = container.scrollHeight;
+            // Remove placeholder if exists
             const placeholder = container.querySelector('div[style*="text-align: center"]');
             if (placeholder) {
                 placeholder.remove();
             container.scrollTop = container.scrollHeight;
         }
+        function updateUsersList(users) {
+            const usersList = document.getElementById('usersList');
+            usersList.innerHTML = '';
+            const otherUsers = users.filter(user => user !== currentUser.username);
+            if (otherUsers.length === 0) {
+                usersList.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">Нет других пользователей онлайн</div>';
                 return;
             }
+            otherUsers.forEach(user => {
+                const userItem = document.createElement('div');
+                userItem.className = 'user-item';
+                userItem.innerHTML = `
+                    <div class="user-avatar">${user.charAt(0).toUpperCase()}</div>
+                    <div class="user-info">
+                        <div class="user-name">${user}</div>
+                        <div class="user-status">online</div>
+                    </div>
+                    <button class="call-icon" onclick="startCallWithUser('${user}', false)" title="Аудиозвонок">📞</button>
+                    <button class="call-icon" onclick="startCallWithUser('${user}', true)" title="Видеозвонок">📹</button>
+                `;
+                usersList.appendChild(userItem);
             });
         }
+        function toggleUsersSidebar() {
+            const sidebar = document.getElementById('usersSidebar');
+            sidebar.classList.toggle('open');
         }
         // Voice Messages
+        async function startVoiceRecording() {
+            if (isRecording) {
                 stopRecording();
+                return;
             }
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({
                     audio: {
                 mediaRecorder.start();
                 isRecording = true;
+                // Show recording overlay
                 document.getElementById('recordingOverlay').style.display = 'flex';
             } catch (error) {
             audio.play().catch(e => console.error('Error playing audio:', e));
         }
+        // Call Functions
+        function startCallWithUser(targetUser, isVideo) {
+            currentCall = {
+                id: Date.now().toString(),
+                target: targetUser,
+                isVideo: isVideo,
+                isInitiator: true
+            };
+            socket.emit('call_request', {
+                call_id: currentCall.id,
+                from_user: currentUser.username,
+                to_user: targetUser,
+                isVideo: isVideo
+            });
+            showCallScreen(isVideo, `Звонок ${targetUser}...`);
+        }
+        function showIncomingCall(fromUser, callId, isVideo) {
+            currentCall = {
+                id: callId,
+                target: fromUser,
+                isVideo: isVideo,
+                isInitiator: false
+            };
+            document.getElementById('callerName').textContent = fromUser;
+            document.getElementById('incomingCallOverlay').style.display = 'flex';
         }
+        function acceptCall() {
+            document.getElementById('incomingCallOverlay').style.display = 'none';
+            socket.emit('call_answer', {
+                call_id: currentCall.id,
+                answer: true,
+                to_user: currentCall.target,
+                isVideo: currentCall.isVideo
+            });
+            startCall(currentCall.isVideo, true);
         }
+        function rejectCall() {
+            socket.emit('call_answer', {
+                call_id: currentCall.id,
+                answer: false,
+                to_user: currentCall.target
+            });
+            document.getElementById('incomingCallOverlay').style.display = 'none';
+            currentCall = null;
         }
+        async function startCall(isVideo, isInitiator) {
             try {
+                showCallScreen(isVideo, isInitiator ? 'Звонок...' : 'Разговор...');
                 // Get local media stream
                 const constraints = {
                     audio: true,
                     video: isVideo ? {
+                        width: { ideal: 640 },
+                        height: { ideal: 480 },
+                        frameRate: { ideal: 24 }
                     } : false
                 };
                 localStream = await navigator.mediaDevices.getUserMedia(constraints);
+                document.getElementById('localVideo').srcObject = localStream;
                 // Create peer connection
+                await createPeerConnection(isInitiator);
+                if (isInitiator) {
                     // Create and send offer
                     const offer = await peerConnection.createOffer();
                     await peerConnection.setLocalDescription(offer);
                     socket.emit('webrtc_offer', {
                         offer: offer,
+                        to_user: currentCall.target,
+                        call_id: currentCall.id
                     });
+                }
+                // Start call timer
+                startCallTimer();
+            } catch (error) {
+                console.error('Error starting call:', error);
+                alert(`Ошибка начала звонка: ${error.message}`);
+                endCall();
+            }
+        }
+        async function createPeerConnection(isInitiator) {
+            peerConnection = new RTCPeerConnection(rtcConfig);
+            // Add local stream tracks
+            localStream.getTracks().forEach(track => {
+                peerConnection.addTrack(track, localStream);
+            });
+            // Handle incoming stream
+            peerConnection.ontrack = (event) => {
+                remoteStream = event.streams[0];
+                const remoteVideo = document.getElementById('remoteVideoContainer');
+                if (event.track.kind === 'video') {
+                    // Create video element for remote stream
+                    const videoElement = document.createElement('video');
+                    videoElement.srcObject = remoteStream;
+                    videoElement.autoplay = true;
+                    videoElement.playsInline = true;
+                    videoElement.className = 'remote-video';
+                    remoteVideo.innerHTML = '';
+                    remoteVideo.appendChild(videoElement);
+                } else if (event.track.kind === 'audio') {
+                    // For audio only, show message
+                    if (!document.querySelector('.remote-video video')) {
+                        remoteVideo.innerHTML = '<div>Аудиозвонок</div>';
+                        remoteVideo.className = 'no-video remote-video';
+                    }
+                }
+            };
+            // Handle ICE candidates
+            peerConnection.onicecandidate = (event) => {
+                if (event.candidate && currentCall) {
+                    socket.emit('webrtc_ice_candidate', {
+                        candidate: event.candidate,
+                        to_user: currentCall.target
                     });
                 }
+            };
+            peerConnection.onconnectionstatechange = () => {
+                console.log('Connection state:', peerConnection.connectionState);
+                if (peerConnection.connectionState === 'connected') {
+                    document.getElementById('callStatus').textContent = 'Разговор';
+                }
+            };
+        }
+        function showCallScreen(isVideo, status) {
+            document.getElementById('callScreen').style.display = 'flex';
+            document.getElementById('callStatus').textContent = status;
+            const remoteVideo = document.getElementById('remoteVideoContainer');
+            if (!isVideo) {
+                remoteVideo.innerHTML = '<div>Аудиозвонок</div>';
+                remoteVideo.className = 'no-video remote-video';
+            }
+        }
+        function hideCallScreen() {
+            document.getElementById('callScreen').style.display = 'none';
+            document.getElementById('remoteVideoContainer').innerHTML = '<div>Нет видео</div>';
+            document.getElementById('remoteVideoContainer').className = 'no-video remote-video';
+            if (callTimerInterval) {
+                clearInterval(callTimerInterval);
+                callTimerInterval = null;
             }
         }
+        function startCallTimer() {
+            callStartTime = new Date();
+            callTimerInterval = setInterval(() => {
+                const now = new Date();
+                const diff = Math.floor((now - callStartTime) / 1000);
+                const minutes = Math.floor(diff / 60);
+                const seconds = diff % 60;
+                document.getElementById('callTimer').textContent =
+                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+            }, 1000);
+        }
         function endCall() {
             if (peerConnection) {
                 peerConnection.close();
                 peerConnection = null;
             }
             if (localStream) {
                 localStream.getTracks().forEach(track => track.stop());
                 localStream = null;
             }
+            if (currentCall) {
+                socket.emit('call_end', {
+                    to_user: currentCall.target,
+                    call_id: currentCall.id
+                });
+            }
+            hideCallScreen();
             currentCall = null;
+            isMuted = false;
+            isVideoEnabled = true;
         }
+        function toggleMute() {
+            if (localStream) {
+                const audioTracks = localStream.getAudioTracks();
+                if (audioTracks.length > 0) {
+                    isMuted = !isMuted;
+                    audioTracks[0].enabled = !isMuted;
+                    document.getElementById('muteBtn').classList.toggle('active', isMuted);
+                    document.getElementById('muteBtn').textContent = isMuted ? '🎤🚫' : '🎤';
+                }
+            }
+        }
+        function toggleVideo() {
+            if (localStream) {
+                const videoTracks = localStream.getVideoTracks();
+                if (videoTracks.length > 0) {
+                    isVideoEnabled = !isVideoEnabled;
+                    videoTracks[0].enabled = isVideoEnabled;
+                    document.getElementById('videoBtn').classList.toggle('active', !isVideoEnabled);
+                    document.getElementById('videoBtn').textContent = isVideoEnabled ? '📹' : '📹🚫';
+                    // Hide/show local video
+                    document.getElementById('localVideo').style.display = isVideoEnabled ? 'block' : 'none';
                 }
+            }
         }
+        // Event listeners
         document.getElementById('recordingOverlay').addEventListener('click', stopRecording);
         document.getElementById('messageInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') {
                 sendMessage();
             }
         });
+        // Close sidebar when clicking outside
         document.addEventListener('click', (e) => {
+            const sidebar = document.getElementById('usersSidebar');
+            if (sidebar.classList.contains('open') &&
+                !e.target.closest('.users-sidebar') &&
+                !e.target.closest('.header-btn')) {
+                sidebar.classList.remove('open');
             }
         });
     </script>
 </body>
 </html>
 @socketio.on('connect')
 def handle_connect():
     print(f'Client connected: {request.sid}')
     emit('user_list_update', {
         'count': len(users),
         'users': [user_data['username'] for user_data in users.values()]
 def handle_disconnect():
     for user_id, user_data in list(users.items()):
         if user_data.get('sid') == request.sid:
+            # End any active calls
+            for call_id, call_data in list(active_calls.items()):
+                if call_data['from_user'] == user_data['username'] or call_data['to_user'] == user_data['username']:
+                    emit('call_ended', room=call_data['to_sid'])
+                    del active_calls[call_id]
             del users[user_id]
             break
 @socketio.on('call_request')
 def handle_call_request(data):
+    target_username = data.get('to_user')
     target_sid = None
     for user_data in users.values():
+        if user_data['username'] == target_username:
             target_sid = user_data['sid']
             break
     if target_sid:
+        active_calls[data['call_id']] = {
+            'from_user': data['from_user'],
+            'to_user': target_username,
+            'from_sid': request.sid,
+            'to_sid': target_sid,
+            'is_video': data.get('isVideo', False)
+        }
         emit('incoming_call', {
             'call_id': data['call_id'],
             'from_user': data['from_user'],
 @socketio.on('call_answer')
 def handle_call_answer(data):
+    call_id = data.get('call_id')
+    if call_id in active_calls:
+        call_data = active_calls[call_id]
+        if data['answer']:
+            emit('call_answered', {
+                'answer': True,
+                'isVideo': call_data['is_video']
+            }, room=call_data['from_sid'])
+        else:
+            emit('call_answered', {
+                'answer': False
+            }, room=call_data['from_sid'])
+            del active_calls[call_id]
+@socketio.on('call_end')
+def handle_call_end(data):
+    call_id = data.get('call_id')
+    if call_id in active_calls:
+        call_data = active_calls[call_id]
+        emit('call_ended', room=call_data['to_sid'])
+        del active_calls[call_id]
 @socketio.on('webrtc_offer')
 def handle_webrtc_offer(data):
+    target_username = data.get('to_user')
     target_sid = None
     for user_data in users.values():
+        if user_data['username'] == target_username:
             target_sid = user_data['sid']
             break
     if target_sid:
         emit('webrtc_offer', {
             'offer': data['offer'],
+            'from_user': data.get('from_user'),
+            'call_id': data.get('call_id')
         }, room=target_sid)
 @socketio.on('webrtc_answer')
 def handle_webrtc_answer(data):
+    target_username = data.get('to_user')
     target_sid = None
     for user_data in users.values():
+        if user_data['username'] == target_username:
             target_sid = user_data['sid']
             break
 @socketio.on('webrtc_ice_candidate')
 def handle_webrtc_ice_candidate(data):
+    target_username = data.get('to_user')
     target_sid = None
     for user_data in users.values():
+        if user_data['username'] == target_username:
             target_sid = user_data['sid']
             break