Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> | |
| <meta http-equiv="Pragma" content="no-cache"> | |
| <meta http-equiv="Expires" content="0"> | |
| <title>Chat - WhatsApp Clone</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/style.css') }}?v=20250722075000" rel="stylesheet"> | |
| </head> | |
| <body class="chat-page"> | |
| <!-- Mobile Overlay --> | |
| <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleMobileSidebar()"></div> | |
| <div class="container-fluid h-100 p-0"> | |
| <div class="row h-100 g-0"> | |
| <!-- Mobile Header (visible only on mobile) --> | |
| <div class="mobile-header d-md-none"> | |
| <button class="mobile-menu-btn" onclick="toggleMobileSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="fw-bold">WhatsApp Clone</div> | |
| <div></div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="col-md-4 col-lg-3 sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="d-flex align-items-center justify-content-between"> | |
| <div class="d-flex align-items-center"> | |
| <div class="avatar bg-success me-3"> | |
| {{ user.name[0].upper() }} | |
| </div> | |
| <div data-user-id="{{ user.user_id }}"> | |
| <div class="fw-bold">{{ user.name }}</div> | |
| <small class="text-muted">{{ user.unique_id }}</small> | |
| </div> | |
| </div> | |
| <div class="dropdown"> | |
| <button class="btn btn-link text-muted" data-bs-toggle="dropdown"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="/settings"><i class="fas fa-cog me-2"></i>Settings</a></li> | |
| <li><a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt me-2"></i>Logout</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="search-box"> | |
| <div class="input-group"> | |
| <span class="input-group-text"><i class="fas fa-search"></i></span> | |
| <input type="text" class="form-control" placeholder="Search conversations..."> | |
| </div> | |
| </div> | |
| <div class="new-chat-btn"> | |
| <button class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#newChatModal"> | |
| <i class="fas fa-plus me-2"></i>New Chat | |
| </button> | |
| </div> | |
| <div class="conversations-list" id="conversationsList"> | |
| <!-- Conversations will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- Chat Area --> | |
| <div class="col-md-8 col-lg-9 chat-area"> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <div class="text-center"> | |
| <i class="fas fa-comments text-muted mb-3" style="font-size: 4rem;"></i> | |
| <h4 class="text-muted">Welcome to WhatsApp Clone</h4> | |
| <p class="text-muted">Select a conversation to start messaging</p> | |
| <div class="mt-4"> | |
| <i class="fas fa-file text-muted me-3"></i> | |
| <i class="fas fa-microphone text-muted me-3"></i> | |
| <i class="fas fa-image text-muted"></i> | |
| </div> | |
| <small class="text-muted d-block mt-2">Share files, voice messages, and more</small> | |
| </div> | |
| </div> | |
| <div class="chat-container" id="chatContainer" style="display: none;"> | |
| <div class="chat-header" id="chatHeader"> | |
| <!-- Chat header will be loaded here --> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <!-- Messages will be loaded here --> | |
| </div> | |
| <div class="chat-input"> | |
| <div class="chat-input-toolbar mb-2"> | |
| <button type="button" class="btn btn-sm btn-outline-success me-2" onclick="openFileUpload()"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button type="button" class="btn btn-sm btn-outline-success me-2" onclick="openImageUpload()"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button type="button" class="btn btn-sm btn-outline-success" id="audioButton" onclick="toggleAudioRecording()"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <form id="messageForm" class="d-flex"> | |
| <input type="text" class="form-control" id="messageInput" placeholder="Type a message..." autocomplete="off"> | |
| <button type="submit" class="btn btn-success ms-2"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <!-- Hidden file inputs --> | |
| <input type="file" id="fileInput" style="display: none;" multiple> | |
| <input type="file" id="imageInput" style="display: none;" accept="image/*" multiple> | |
| <!-- Audio recording UI --> | |
| <div id="audioRecording" class="audio-recording-ui" style="display: none;"> | |
| <div class="d-flex align-items-center justify-content-between p-3 bg-light rounded"> | |
| <div class="d-flex align-items-center"> | |
| <div class="recording-indicator me-3"> | |
| <i class="fas fa-microphone text-danger"></i> | |
| </div> | |
| <div> | |
| <div class="fw-bold">Recording...</div> | |
| <small class="text-muted" id="recordingTime">00:00</small> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="button" class="btn btn-outline-secondary me-2" onclick="cancelAudioRecording()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button type="button" class="btn btn-success" onclick="stopAudioRecording()"> | |
| <i class="fas fa-stop"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Chat Modal --> | |
| <div class="modal fade" id="newChatModal" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Start New Chat</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="d-grid gap-2"> | |
| <button class="btn btn-outline-success" onclick="startPrivateChat()"> | |
| <i class="fas fa-user me-2"></i>Private Chat | |
| </button> | |
| <button class="btn btn-outline-success" onclick="startGroupChat()"> | |
| <i class="fas fa-users me-2"></i>Group Chat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Private Chat Modal --> | |
| <div class="modal fade" id="privateChatModal" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Start Private Chat</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="privateChatForm"> | |
| <div class="mb-3"> | |
| <label for="userIdInput" class="form-label">User ID</label> | |
| <input type="text" class="form-control" id="userIdInput" placeholder="Enter user's unique ID" required> | |
| </div> | |
| <div id="userPreview" style="display: none;" class="alert alert-info"> | |
| <!-- User preview will be shown here --> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="button" class="btn btn-outline-success" onclick="findUser()"> | |
| <i class="fas fa-search me-2"></i>Find User | |
| </button> | |
| <button type="submit" class="btn btn-success" id="startChatBtn" style="display: none;"> | |
| <i class="fas fa-comments me-2"></i>Start Chat | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Group Chat Modal --> | |
| <div class="modal fade" id="groupChatModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Create Group Chat</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="groupChatForm"> | |
| <div class="mb-3"> | |
| <label for="groupNameInput" class="form-label">Group Name</label> | |
| <input type="text" class="form-control" id="groupNameInput" placeholder="Enter group name" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label">Add Members (1-9 members)</label> | |
| <div id="groupMembers"> | |
| <div class="input-group mb-2"> | |
| <input type="text" class="form-control member-input" placeholder="Enter user ID"> | |
| <button type="button" class="btn btn-outline-success" onclick="addMemberField()"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="d-grid"> | |
| <button type="submit" class="btn btn-success"> | |
| <i class="fas fa-users me-2"></i>Create Group | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}?v=20250722073000"></script> | |
| <script src="{{ url_for('static', filename='js/audio.js') }}?v=20250722073000"></script> | |
| <script src="{{ url_for('static', filename='js/files.js') }}?v=20250722073000"></script> | |
| <script src="{{ url_for('static', filename='js/chat.js') }}?v=20250722073000"></script> | |
| <!-- Make functions available globally for onclick handlers --> | |
| <script> | |
| // Set current user data for JavaScript | |
| window.currentUserId = '{{ user.user_id }}'; | |
| window.currentUserName = '{{ user.name }}'; | |
| window.toggleMobileSidebar = toggleMobileSidebar; | |
| window.startPrivateChat = startPrivateChat; | |
| window.startGroupChat = startGroupChat; | |
| window.findUser = findUser; | |
| window.addMemberField = addMemberField; | |
| window.removeMemberField = removeMemberField; | |
| window.selectConversation = selectConversation; | |
| window.openFileUpload = openFileUpload; | |
| window.openImageUpload = openImageUpload; | |
| window.toggleAudioRecording = toggleAudioRecording; | |
| window.cancelAudioRecording = cancelAudioRecording; | |
| window.stopAudioRecording = stopAudioRecording; | |
| </script> | |
| </body> | |
| </html> | |