forked from snxraven/LinkUp-P2P-Chat
87 lines
3.1 KiB
HTML
87 lines
3.1 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</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>
|
|
Topic: <span id="chat-room-topic"></span>
|
|
</div>
|
|
<div>
|
|
Peers: <span id="peers-count">0</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>
|
|
<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');
|
|
messageInput.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault();
|
|
document.getElementById('message-form').dispatchEvent(new Event('submit'));
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|