348 lines
14 KiB
HTML
348 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="css/index.css" />
|
|
<title>Secure Chat App</title>
|
|
</head>
|
|
<body>
|
|
<!-- Connection Status -->
|
|
<div
|
|
id="connectionStatus"
|
|
class="connection-status"
|
|
style="display: none"
|
|
></div>
|
|
|
|
<!-- Authentication Container -->
|
|
<div id="authContainer" class="auth-container">
|
|
<div class="auth-tabs">
|
|
<div class="auth-tab active" onclick="showTab('login')">
|
|
Login
|
|
</div>
|
|
<div class="auth-tab" onclick="showTab('register')">
|
|
Register
|
|
</div>
|
|
</div>
|
|
|
|
<div id="alert" class="alert" style="display: none"></div>
|
|
|
|
<!-- Login Form -->
|
|
<div id="loginForm" class="auth-form active">
|
|
<div class="form-group">
|
|
<label for="loginPhone">Phone Number</label>
|
|
<input
|
|
type="text"
|
|
id="loginPhone"
|
|
class="form-control"
|
|
placeholder="+1234567890"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="loginPassword">Password</label>
|
|
<input
|
|
type="password"
|
|
id="loginPassword"
|
|
class="form-control"
|
|
placeholder="Enter your password"
|
|
/>
|
|
</div>
|
|
<button class="btn" onclick="login()">Login</button>
|
|
</div>
|
|
|
|
<!-- Register Form -->
|
|
<div id="registerForm" class="auth-form">
|
|
<div class="form-group">
|
|
<label for="registerPhone">Phone Number</label>
|
|
<input
|
|
type="text"
|
|
id="registerPhone"
|
|
class="form-control"
|
|
placeholder="+1234567890"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="registerUsername">Username</label>
|
|
<input
|
|
type="text"
|
|
id="registerUsername"
|
|
class="form-control"
|
|
placeholder="Choose a username"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="registerPassword">Password</label>
|
|
<input
|
|
type="password"
|
|
id="registerPassword"
|
|
class="form-control"
|
|
placeholder="Choose a password (min 6 characters)"
|
|
/>
|
|
</div>
|
|
<button class="btn" onclick="register()">Register</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Container -->
|
|
<div class="chat-container" id="chatContainer">
|
|
<!-- Mobile Header -->
|
|
<div class="mobile-header">
|
|
<button class="menu-btn" onclick="toggleChatsPanel()">
|
|
☰
|
|
</button>
|
|
<div class="mobile-title" id="mobileChatTitle">Secure Chat</div>
|
|
<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">
|
|
<!-- Chats Panel -->
|
|
<div class="chats-panel" id="chatsPanel">
|
|
<div class="chats-header">
|
|
<h2>Chats</h2>
|
|
<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">
|
|
<div
|
|
class="chat-tab active"
|
|
onclick="showChatTab('existing')"
|
|
>
|
|
My Chats
|
|
</div>
|
|
<div class="chat-tab" onclick="showChatTab('search')">
|
|
New Chat
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Container -->
|
|
<div class="search-container" id="searchContainer">
|
|
<input
|
|
type="text"
|
|
id="searchInput"
|
|
class="search-input"
|
|
placeholder="Search by phone or username..."
|
|
/>
|
|
<div class="search-results" id="searchResults"></div>
|
|
</div>
|
|
|
|
<!-- Existing Chats List -->
|
|
<ul class="chat-list" id="chatsList">
|
|
<!-- Chats will be populated here -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Chat Panel -->
|
|
<div class="chat-panel">
|
|
<div class="chat-header">
|
|
<div class="chat-header-info">
|
|
<button class="back-btn" onclick="showChatsPanel()">
|
|
←
|
|
</button>
|
|
<div
|
|
class="chat-header-avatar"
|
|
id="currentUserAvatar"
|
|
>
|
|
<!-- Avatar will be populated here -->
|
|
</div>
|
|
<div class="chat-header-text">
|
|
<div
|
|
class="chat-header-username"
|
|
id="currentUsername"
|
|
>
|
|
Select a chat
|
|
</div>
|
|
<div
|
|
class="chat-header-phone"
|
|
id="currentUserPhone"
|
|
>
|
|
Choose someone to message
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Убрана кнопка профиля из заголовка чата -->
|
|
</div>
|
|
|
|
<div class="chat-messages-container">
|
|
<div class="chat-messages" id="chatMessages">
|
|
<div class="empty-state">
|
|
<h3>Welcome to Secure Chat</h3>
|
|
<p>Select a chat to start messaging</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-input-container">
|
|
<div class="chat-input-area">
|
|
<textarea
|
|
id="messageInput"
|
|
class="message-input"
|
|
placeholder="Type a message..."
|
|
disabled
|
|
rows="1"
|
|
></textarea>
|
|
<button
|
|
onclick="sendMessage()"
|
|
class="send-button"
|
|
id="sendButton"
|
|
disabled
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="profile-modal-overlay"
|
|
style="display: none"
|
|
>
|
|
<div class="modal">
|
|
<h3>Delete Message</h3>
|
|
<p>How would you like to delete this message?</p>
|
|
<div class="modal-buttons">
|
|
<button
|
|
class="modal-btn modal-btn-cancel"
|
|
onclick="closeDeleteModal()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="modal-btn modal-btn-delete-for-me"
|
|
onclick="deleteMessageForMe()"
|
|
>
|
|
Delete for me
|
|
</button>
|
|
<button
|
|
class="modal-btn modal-btn-delete"
|
|
onclick="deleteMessageForEveryone()"
|
|
>
|
|
Delete for everyone
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/index.js"></script>
|
|
<script src="js/window.js"></script>
|
|
<script src="js/theme.js"></script>
|
|
<script src="js/login.js"></script>
|
|
<script src="js/register.js"></script>
|
|
<script src="js/profilemodal.js"></script>
|
|
<script src="js/messages.js"></script>
|
|
<script src="js/chats.js"></script>
|
|
<script src="js/connection.js"></script>
|
|
<script src="js/deletemodal.js"></script>
|
|
<script src="js/search.js"></script>
|
|
<script src="js/avatar.js"></script>
|
|
</body>
|
|
</html>
|