130 lines
4.9 KiB
HTML
130 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VibeChat — Мессенджер</title>
|
||
<link rel="stylesheet" href="app.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="user-info" onclick="openSettings()">
|
||
<img src="" alt="" class="user-avatar" id="currentUserAvatar">
|
||
<span class="user-name" id="currentUserName"></span>
|
||
</div>
|
||
<button class="btn-new-chat" onclick="showNewChatModal()">+</button>
|
||
</div>
|
||
|
||
<div class="search-box">
|
||
<input type="text" placeholder="Поиск" id="searchInput" oninput="filterChats()">
|
||
</div>
|
||
|
||
<div class="chat-list" id="chatList">
|
||
<!-- Chats will be loaded here -->
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Chat Area -->
|
||
<main class="chat-area">
|
||
<div class="chat-header" id="chatHeader">
|
||
<div class="chat-header-info">
|
||
<img src="" alt="" class="chat-header-avatar" id="chatHeaderAvatar">
|
||
<div>
|
||
<h3 id="chatHeaderName"></h3>
|
||
<p id="chatHeaderStatus" class="status"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="messages-container" id="messagesContainer">
|
||
<div class="empty-chat" id="emptyChat">
|
||
<div class="empty-icon">💬</div>
|
||
<h3>Выберите чат</h3>
|
||
<p>Чтобы начать общение, выберите чат из списка слева</p>
|
||
</div>
|
||
<div class="messages-list" id="messagesList" style="display:none">
|
||
<!-- Messages will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-input-container" id="messageInputContainer" style="display:none">
|
||
<button class="btn-emoji" onclick="toggleEmojiPicker()">😀</button>
|
||
<div class="emoji-picker" id="emojiPicker">
|
||
<div class="emoji-grid">
|
||
${['😀','😂','😍','🥰','😎','🤔','👍','❤️','🔥','🎉','👋','🙏','💯','✨','🚀','💪','🎯','✅','📌','🔔'].map(e => `<span class="emoji-item" onclick="insertEmoji('${e}')">${e}</span>`).join('')}
|
||
</div>
|
||
</div>
|
||
<input type="text" class="message-input" id="messageInput" placeholder="Напишите сообщение..." onkeypress="handleKeyPress(event)">
|
||
<button class="btn-send" onclick="sendMessage()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- New Chat Modal -->
|
||
<div id="newChatModal" class="modal">
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeNewChatModal()">×</button>
|
||
<h2>Новый чат</h2>
|
||
|
||
<div class="modal-tabs">
|
||
<button class="tab active" onclick="switchTab('chat')">Чат</button>
|
||
<button class="tab" onclick="switchTab('group')">Группа</button>
|
||
<button class="tab" onclick="switchTab('channel')">Канал</button>
|
||
</div>
|
||
|
||
<div id="chatTab">
|
||
<div class="user-list" id="userList">
|
||
<!-- Users will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div id="groupTab" style="display:none">
|
||
<input type="text" id="groupName" placeholder="Название группы" class="modal-input">
|
||
<button class="btn-submit" onclick="createGroup()">Создать группу</button>
|
||
</div>
|
||
|
||
<div id="channelTab" style="display:none">
|
||
<input type="text" id="channelName" placeholder="Название канала" class="modal-input">
|
||
<button class="btn-submit" onclick="createChannel()">Создать канал</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Modal -->
|
||
<div id="settingsModal" class="modal">
|
||
<div class="modal-content settings-content">
|
||
<button class="modal-close" onclick="closeSettings()">×</button>
|
||
<h2>Настройки</h2>
|
||
|
||
<div class="settings-avatar">
|
||
<img src="" alt="" id="settingsAvatar">
|
||
<button class="btn-change-avatar" onclick="changeAvatar()">Изменить</button>
|
||
</div>
|
||
|
||
<form onsubmit="updateProfile(event)">
|
||
<div class="form-group">
|
||
<label>Имя пользователя</label>
|
||
<input type="text" id="settingsUsername" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>О себе</label>
|
||
<textarea id="settingsBio" rows="3" placeholder="Расскажите о себе"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn-submit">Сохранить</button>
|
||
</form>
|
||
|
||
<button class="btn-logout" onclick="logout()">Выйти из аккаунта</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|