added config file support

web/index.html

@@ -204,14 +204,38 @@
             font-size: 18px;
         }
         
-        .theme-toggle {
+        .profile-header-btn {
             background: none;
             border: none;
-            color: var(--text-primary);
-            font-size: 18px;
             cursor: pointer;
             padding: 5px;
-            margin-left: 10px;
+            border-radius: 50%;
+            transition: background 0.3s ease;
+        }
+        
+        .profile-header-btn:hover {
+            background: var(--bg-tertiary);
+        }
+        
+        .profile-header-avatar {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            object-fit: cover;
+            background: var(--bg-tertiary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 600;
+        }
+        
+        .profile-header-avatar img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
         }
         
         .chats-panel { 
@@ -464,41 +488,6 @@
             color: var(--text-secondary); 
         }
         
-        .header-actions { 
-            display: flex; 
-            align-items: center; 
-            gap: 8px; 
-        }
-        
-        .avatar-upload-btn { 
-            padding: 6px 10px; 
-            background: var(--primary-color); 
-            color: white; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 11px; 
-            white-space: nowrap;
-        }
-        
-        .avatar-upload-btn:hover { 
-            background: var(--primary-hover); 
-        }
-        
-        .logout-btn { 
-            padding: 6px 12px; 
-            background: var(--error-color); 
-            color: white; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 12px; 
-        }
-        
-        .logout-btn:hover { 
-            background: #c0392b; 
-        }
-        
         .chat-messages { 
             flex: 1; 
             padding: 15px; 
@@ -699,8 +688,8 @@
             color: var(--error-color); 
         }
         
-        /* Стили для модального окна удаления */
-        .modal-overlay { 
+        /* Стили для модального окна профиля */
+        .profile-modal-overlay { 
             position: fixed; 
             top: 0; 
             left: 0; 
@@ -713,68 +702,186 @@
             z-index: 1000; 
         }
         
-        .modal { 
+        .profile-modal { 
             background: var(--bg-primary); 
-            border-radius: 10px; 
-            padding: 20px; 
-            max-width: 350px; 
+            border-radius: 15px; 
+            padding: 0;
+            max-width: 400px; 
             width: 90%; 
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
             margin: 20px;
+            overflow: hidden;
         }
         
-        .modal h3 { 
-            margin-bottom: 12px; 
-            color: var(--text-primary); 
+        .profile-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+            padding: 30px 20px;
+            text-align: center;
+            color: white;
+            position: relative;
+        }
+        
+        .profile-avatar-large {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            margin: 0 auto 15px;
+            background: rgba(255, 255, 255, 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 36px;
+            font-weight: 600;
+            border: 4px solid white;
+            position: relative;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        
+        .profile-avatar-large:hover {
+            transform: scale(1.05);
+        }
+        
+        .profile-avatar-large img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+        
+        .avatar-upload-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            color: white;
+            font-size: 12px;
+            text-align: center;
+            padding: 10px;
+        }
+        
+        .profile-avatar-large:hover .avatar-upload-overlay {
+            opacity: 1;
+        }
+        
+        .profile-name {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .profile-phone {
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        
+        .profile-content {
+            padding: 25px;
+        }
+        
+        .profile-section {
+            margin-bottom: 25px;
+        }
+        
+        .profile-section-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .profile-section-title i {
             font-size: 18px;
         }
         
-        .modal p { 
-            margin-bottom: 18px; 
-            color: var(--text-secondary); 
+        .profile-info {
+            background: var(--bg-secondary);
+            border-radius: 10px;
+            padding: 15px;
+        }
+        
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .info-item:last-child {
+            border-bottom: none;
+        }
+        
+        .info-label {
             font-size: 14px;
+            color: var(--text-secondary);
         }
         
-        .modal-buttons { 
-            display: flex; 
-            gap: 8px; 
-            justify-content: flex-end; 
-            flex-wrap: wrap;
+        .info-value {
+            font-size: 14px;
+            color: var(--text-primary);
+            font-weight: 500;
         }
         
-        .modal-btn { 
-            padding: 8px 16px; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 14px; 
+        .profile-actions {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
         }
         
-        .modal-btn-cancel { 
-            background: var(--bg-tertiary); 
-            color: var(--text-primary); 
+        .profile-btn {
+            padding: 12px 16px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
         
-        .modal-btn-cancel:hover { 
-            background: var(--border-color); 
+        .profile-btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+            color: white;
         }
         
-        .modal-btn-delete { 
-            background: var(--error-color); 
-            color: white; 
+        .profile-btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
         }
         
-        .modal-btn-delete:hover { 
-            background: #c0392b; 
+        .profile-btn-danger {
+            background: var(--error-color);
+            color: white;
         }
         
-        .modal-btn-delete-for-me { 
-            background: var(--primary-color); 
-            color: white; 
+        .profile-btn-danger:hover {
+            background: #c0392b;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
         }
         
-        .modal-btn-delete-for-me:hover { 
-            background: var(--primary-hover); 
+        .profile-btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+        
+        .profile-btn-secondary:hover {
+            background: var(--border-color);
         }
         
         /* Стили для скрытого input file */
@@ -876,17 +983,6 @@
                 display: block;
             }
             
-            .header-actions {
-                flex-wrap: wrap;
-                justify-content: flex-end;
-            }
-            
-            .avatar-upload-btn,
-            .logout-btn {
-                font-size: 12px;
-                padding: 6px 8px;
-            }
-            
             .message {
                 max-width: 90%;
                 margin: 6px 0;
@@ -1013,16 +1109,6 @@
                 padding: 10px 12px;
             }
             
-            .header-actions {
-                gap: 5px;
-            }
-            
-            .avatar-upload-btn,
-            .logout-btn {
-                font-size: 11px;
-                padding: 5px 6px;
-            }
-            
             .chat-input-area {
                 gap: 6px;
             }
@@ -1126,7 +1212,11 @@
         <div class="mobile-header">
             <button class="menu-btn" onclick="toggleChatsPanel()">☰</button>
             <div class="mobile-title" id="mobileChatTitle">Secure Chat</div>
-            <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
+            <button class="profile-header-btn" onclick="openProfileModal()">
+                <div class="profile-header-avatar" id="profileHeaderAvatar">
+                    <!-- Avatar will be populated here -->
+                </div>
+            </button>
         </div>
         
         <div class="desktop-layout">
@@ -1134,7 +1224,11 @@
             <div class="chats-panel" id="chatsPanel">
                 <div class="chats-header">
                     <h2>Chats</h2>
-                    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
+                    <button class="profile-header-btn" onclick="openProfileModal()">
+                        <div class="profile-header-avatar" id="profileHeaderAvatarDesktop">
+                            <!-- Avatar will be populated here -->
+                        </div>
+                    </button>
                 </div>
                 
                 <div class="chats-tabs">
@@ -1167,11 +1261,7 @@
                             <div class="chat-header-phone" id="currentUserPhone">Choose someone to message</div>
                         </div>
                     </div>
-                    <div class="header-actions">
-                        <input type="file" id="avatarInput" class="avatar-input" accept="image/*">
-                        <button class="avatar-upload-btn" onclick="document.getElementById('avatarInput').click()">Upload Avatar</button>
-                        <button class="logout-btn" onclick="logout()">Logout</button>
-                    </div>
+                    <!-- Убрана кнопка профиля из заголовка чата -->
                 </div>
                 
                 <div class="chat-messages-container">
@@ -1193,6 +1283,67 @@
         </div>
     </div>
 
+    <!-- Profile Modal -->
+    <div id="profileModal" class="profile-modal-overlay" style="display: none;">
+        <div class="profile-modal">
+            <div class="profile-header">
+                <input type="file" id="avatarInput" class="avatar-input" accept="image/*">
+                <div class="profile-avatar-large" id="profileModalAvatar" onclick="document.getElementById('avatarInput').click()">
+                    <!-- Large avatar will be populated here -->
+                    <div class="avatar-upload-overlay">
+                        Change Photo
+                    </div>
+                </div>
+                <div class="profile-name" id="profileModalName">User</div>
+                <div class="profile-phone" id="profileModalPhone">+1234567890</div>
+            </div>
+            
+            <div class="profile-content">
+                <div class="profile-section">
+                    <div class="profile-section-title">
+                        📱 Account Information
+                    </div>
+                    <div class="profile-info">
+                        <div class="info-item">
+                            <div class="info-label">Username</div>
+                            <div class="info-value" id="profileModalUsername">user123</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">Phone Number</div>
+                            <div class="info-value" id="profileModalPhoneNumber">+1234567890</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-label">Status</div>
+                            <div class="info-value">Online</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="profile-section">
+                    <div class="profile-section-title">
+                        ⚙️ Settings
+                    </div>
+                    <div class="profile-actions">
+                        <button class="profile-btn profile-btn-secondary" onclick="toggleTheme()">
+                            🌓 Switch Theme
+                        </button>
+                        <button class="profile-btn profile-btn-primary" onclick="changePhoneNumber()">
+                            📞 Change Phone Number
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="profile-section">
+                    <div class="profile-actions">
+                        <button class="profile-btn profile-btn-danger" onclick="logout()">
+                            🚪 Logout
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal for delete confirmation -->
     <div id="deleteModal" class="modal-overlay" style="display: none;">
         <div class="modal">
@@ -1212,6 +1363,7 @@
         let currentToken = '';
         let currentRecipient = '';
         let currentUserAvatar = '';
+        let currentUserPhone = '';
         let chats = [];
         let searchResults = [];
         let messageHistory = {};
@@ -1231,8 +1383,10 @@
         window.addEventListener('DOMContentLoaded', function() {
             const savedToken = localStorage.getItem('chatToken');
             const savedUsername = localStorage.getItem('chatUsername');
+            const savedPhone = localStorage.getItem('chatUserPhone');
             
             if (savedToken && savedUsername) {
+                currentUserPhone = savedPhone;
                 validateToken(savedToken, savedUsername);
             }
             
@@ -1272,6 +1426,70 @@
             }
         }
         
+        function openProfileModal() {
+            updateProfileModal();
+            document.getElementById('profileModal').style.display = 'flex';
+            document.body.classList.add('modal-open');
+        }
+        
+        function closeProfileModal() {
+            document.getElementById('profileModal').style.display = 'none';
+            document.body.classList.remove('modal-open');
+        }
+        
+        function updateProfileModal() {
+            // Update profile modal content
+            document.getElementById('profileModalName').textContent = currentUser;
+            document.getElementById('profileModalUsername').textContent = currentUser;
+            document.getElementById('profileModalPhone').textContent = currentUserPhone;
+            document.getElementById('profileModalPhoneNumber').textContent = currentUserPhone;
+            
+            // Update large avatar in modal
+            const modalAvatar = document.getElementById('profileModalAvatar');
+            if (currentUserAvatar) {
+                modalAvatar.innerHTML = `<img src="${currentUserAvatar}" alt="${currentUser}">`;
+            } else {
+                modalAvatar.innerHTML = currentUser.charAt(0).toUpperCase();
+            }
+            
+            // Add the upload overlay
+            modalAvatar.innerHTML += '<div class="avatar-upload-overlay">Change Photo</div>';
+        }
+        
+        function updateAllAvatars() {
+            const avatarContent = currentUserAvatar ? 
+                `<img src="${currentUserAvatar}" alt="${currentUser}">` : 
+                currentUser.charAt(0).toUpperCase();
+            
+            // Update all avatar locations (убран profileHeaderAvatarMain)
+            const avatarLocations = [
+                'profileHeaderAvatar',
+                'profileHeaderAvatarDesktop',
+                'currentUserAvatar'
+            ];
+            
+            avatarLocations.forEach(id => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = avatarContent;
+                }
+            });
+            
+            // Update profile modal avatar
+            updateProfileModal();
+        }
+        
+        function changePhoneNumber() {
+            const newPhone = prompt('Enter your new phone number:', currentUserPhone);
+            if (newPhone && newPhone.trim() !== '') {
+                // In a real app, you would send this to the server
+                currentUserPhone = newPhone.trim();
+                localStorage.setItem('chatUserPhone', currentUserPhone);
+                updateProfileModal();
+                showAlert('Phone number updated successfully!', 'success');
+            }
+        }
+        
         function showTab(tabName) {
             document.querySelectorAll('.auth-tab').forEach(tab => tab.classList.remove('active'));
             document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active'));
@@ -1379,13 +1597,7 @@
         
         function updateUserProfile() {
             document.getElementById('currentUsername').textContent = currentUser;
-            
-            const avatarElement = document.getElementById('currentUserAvatar');
-            if (currentUserAvatar) {
-                avatarElement.innerHTML = `<img src="${currentUserAvatar}" alt="${currentUser}">`;
-            } else {
-                avatarElement.innerHTML = currentUser.charAt(0).toUpperCase();
-            }
+            updateAllAvatars();
         }
         
         async function loadChats() {
@@ -1498,7 +1710,7 @@
                 const data = await response.json();
                 if (data.success) {
                     currentUserAvatar = data.avatar_url;
-                    updateUserProfile();
+                    updateAllAvatars();
                     showAlert('Avatar uploaded successfully!', 'success');
                     loadChats(); // Refresh chats to show updated avatar
                 } else {
@@ -1704,9 +1916,11 @@
                 if (data.success) {
                     localStorage.setItem('chatToken', data.token);
                     localStorage.setItem('chatUsername', data.username);
+                    localStorage.setItem('chatUserPhone', phone);
                     
                     currentUser = data.username;
                     currentToken = data.token;
+                    currentUserPhone = phone;
                     
                     document.getElementById('authContainer').style.display = 'none';
                     document.getElementById('chatContainer').style.display = 'flex';
@@ -1745,9 +1959,11 @@
                 if (data.success) {
                     localStorage.setItem('chatToken', data.token);
                     localStorage.setItem('chatUsername', data.username);
+                    localStorage.setItem('chatUserPhone', phone);
                     
                     currentUser = data.username;
                     currentToken = data.token;
+                    currentUserPhone = phone;
                     
                     // Get user profile to load avatar
                     const profileResponse = await fetch('/api/profile', {
@@ -1776,6 +1992,7 @@
         function logout() {
             localStorage.removeItem('chatToken');
             localStorage.removeItem('chatUsername');
+            localStorage.removeItem('chatUserPhone');
             
             if (ws) {
                 ws.close();
@@ -1788,6 +2005,7 @@
             currentToken = '';
             currentRecipient = '';
             currentUserAvatar = '';
+            currentUserPhone = '';
             chats = [];
             searchResults = [];
             messageHistory = {};
@@ -2147,7 +2365,13 @@
             }
         });
         
-        // Close modal when clicking outside
+        // Close modals when clicking outside
+        document.getElementById('profileModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeProfileModal();
+            }
+        });
+        
         document.getElementById('deleteModal').addEventListener('click', function(e) {
             if (e.target === this) {
                 closeDeleteModal();