<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LinkUp</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="module" src="./app.js"></script> <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script> </head> <body> <header> <pear-ctrl></pear-ctrl> <div id="linkup-text">LinkUp | Peers: <span id="peers-count">0</span></div> </header> <main> <div id="sidebar"> <ul id="room-list"> <!-- Room list will be populated dynamically --> </ul> <button id="toggle-setup-btn">Create/Join Room</button> </div> <div id="content"> <div id="register" class="hidden"> <form id="register-form"> <input required id="reg-username" type="text" placeholder="Username" /> <input type="file" id="avatar-file" accept="image/*" style="display: none;" /> <button type="button" id="select-avatar">Select Avatar</button> <input type="submit" value="Register" /> </form> </div> <div id="setup" class="hidden"> <div id="user-info"> <!-- User info will be populated dynamically --> </div> <button id="create-chat-room">Create Room</button> <div id="or">- or -</div> <div id="join-chat-room-container"> <label for="connection-topic">Topic:</label> <input type="text" id="join-chat-room-topic" placeholder="connection topic"> <button id="join-chat-room">Join Room</button> </div> </div> <div id="chat" class="hidden"> <div id="header"> <div id="details"> <div style="display: inline;"> <strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a> <span id="chat-room-topic" style="display: none;"></span> </div> </div> <div id="user-list"> <!-- User list will be populated here --> </div> </div> <div id="messages-container"> <div id="messages"></div> </div> <form id="message-form"> <textarea id="message" rows="4"></textarea> <input type="file" id="file-input" style="display:none;"> <button type="button" id="attach-file">Attach File</button> <button type="button" id="talk-btn">Talk</button> <!-- New Talk button --> <input type="submit" value="Send" /> </form> <button id="remove-room-btn">Leave Room</button> </div> <div id="loading" class="hidden">Loading ...</div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function() { const messageInput = document.getElementById('message'); const copyTopicLink = document.getElementById('copy-topic-link'); const chatRoomTopic = document.getElementById('chat-room-topic'); if (messageInput) { messageInput.addEventListener('keydown', function(event) { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); document.getElementById('message-form').dispatchEvent(new Event('submit')); } }); } if (copyTopicLink) { copyTopicLink.addEventListener('click', function(event) { event.preventDefault(); if (chatRoomTopic) { const topic = chatRoomTopic.innerText; navigator.clipboard.writeText(topic).then(() => { console.log('Topic copied to clipboard:', topic); }).catch(err => { console.error('Failed to copy topic:', err); }); } else { console.error('Element #chat-room-topic not found'); } }); } const switchRoom = (topic) => { console.log('Switching to room:', topic); // Debugging log const chatRoomTopic = document.querySelector('#chat-room-topic'); const chatRoomName = document.querySelector('#chat-room-name'); if (chatRoomTopic) { chatRoomTopic.innerText = topic; // Set full topic here } else { console.error('Element #chat-room-topic not found'); } // Show chat UI elements document.querySelector('#chat').classList.remove('hidden'); document.querySelector('#setup').classList.add('hidden'); }; const roomList = document.querySelector('#room-list'); if (roomList) { roomList.addEventListener('click', function(event) { const roomItem = event.target.closest('li'); if (roomItem) { switchRoom(roomItem.dataset.topic); } }); } }); </script> </body> </html>