forked from snxraven/LinkUp-P2P-Chat
133 lines
4.9 KiB
HTML
133 lines
4.9 KiB
HTML
<!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>
|