|
@@ -0,0 +1,284 @@
|
|
|
|
|
+<!-- COPYRIGHT (C) AMY <RAIN@SKULD.NETWORK> & IDK THIS IS MOSTLY WRITTEN WITH COPILOT LOL -->
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>Chatroom</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+
|
|
|
|
|
+:root {
|
|
|
|
|
+ --col-1: #2f3136;
|
|
|
|
|
+ --col-2: #36393f;
|
|
|
|
|
+ --col-3: #40444b;
|
|
|
|
|
+ --col-accent: #7289da;
|
|
|
|
|
+ --col-text-1: rgb(200, 200, 200);
|
|
|
|
|
+ --col-text-2: white;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+html {
|
|
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ background-color: var(--col-1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+body {
|
|
|
|
|
+ background-color: var(--col-1);
|
|
|
|
|
+ color: var(--col-text-1);
|
|
|
|
|
+
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.panel-host {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.panel {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ padding: 1em;
|
|
|
|
|
+
|
|
|
|
|
+ background-color: var(--col-1);
|
|
|
|
|
+
|
|
|
|
|
+ border-style: solid;
|
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
|
+ border-color: var(--col-3);
|
|
|
|
|
+ border-width: 0 0.1em 0 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+#user-list,
|
|
|
|
|
+#channel-list {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ min-width: 15%;
|
|
|
|
|
+ max-width: 15%;
|
|
|
|
|
+ width: 15%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+#chat-area {
|
|
|
|
|
+ flex-grow: 5;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+#messages {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column-reverse;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h2 {
|
|
|
|
|
+ margin: 0 0 1em 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+button {
|
|
|
|
|
+ background-color: var(--col-accent);
|
|
|
|
|
+ color: var(--col-text-2);
|
|
|
|
|
+
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 0.3em;
|
|
|
|
|
+ padding: 0.5em;
|
|
|
|
|
+
|
|
|
|
|
+ font-size: inherit;
|
|
|
|
|
+
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+ -webkit-user-select: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+#textentry {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+#textentry input {
|
|
|
|
|
+ font-size: inherit;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 0.5em;
|
|
|
|
|
+ margin-right: 0.5em;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 0.3em;
|
|
|
|
|
+
|
|
|
|
|
+ background-color: var(--col-3);
|
|
|
|
|
+ color: var(--col-text-1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message {
|
|
|
|
|
+ margin-bottom: 0.5em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.channel-item {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ padding: 0.25em 0.5em;
|
|
|
|
|
+ border-radius: 0.3em;
|
|
|
|
|
+ margin-bottom: 0.2em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.channel-item:hover {
|
|
|
|
|
+ background-color: var(--col-3);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.channel-item.active {
|
|
|
|
|
+ background-color: var(--col-accent);
|
|
|
|
|
+ color: var(--col-text-2);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="panel-host" style="flex-direction: column;">
|
|
|
|
|
+ <!-- <div class="panel-host">
|
|
|
|
|
+ <div class="panel">
|
|
|
|
|
+ <button onclick=switchTheme()>Appearance</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ <div class="panel-host">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="panel" id="channel-list">
|
|
|
|
|
+ <h2>Channels</h2>
|
|
|
|
|
+ <!-- Add channel list here -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="panel" id="user-list">
|
|
|
|
|
+ <h2>Users</h2>
|
|
|
|
|
+ <!-- Add user list here -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="panel" id="chat-area">
|
|
|
|
|
+ <h2>Messages</h2>
|
|
|
|
|
+ <div id="messages">
|
|
|
|
|
+ <!-- Add messages here -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="textentry">
|
|
|
|
|
+ <input id="message-input" type="text" placeholder="Message #channel-name">
|
|
|
|
|
+ <button onclick="submitMessage()">Send</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+
|
|
|
|
|
+/// (time, channel, username, content)
|
|
|
|
|
+messages = [];
|
|
|
|
|
+selectedChannel = null;
|
|
|
|
|
+
|
|
|
|
|
+function randomNumericString(length) {
|
|
|
|
|
+ let v = 10 ** length;
|
|
|
|
|
+ return Math.floor(Math.random() * v * 0.9 + v * 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function switchTheme() {
|
|
|
|
|
+ const e = document.querySelector('body');
|
|
|
|
|
+ e.setAttribute('data-theme', e.getAttribute('data-theme') === 'light' ? 'dark' : 'light');
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function simulateReceivingMessages() {
|
|
|
|
|
+ // Simulate receiving messages
|
|
|
|
|
+ setInterval(() => {
|
|
|
|
|
+ const channels = ["root", "general", "random"];
|
|
|
|
|
+ const channel = channels[Math.floor(Math.random() * channels.length)];
|
|
|
|
|
+ const username = `User${randomNumericString(4)}`;
|
|
|
|
|
+ const message = `Hello ${channel} from ${username}!`;
|
|
|
|
|
+ messages.push([Date.now(), channel, username, message]);
|
|
|
|
|
+ }, 100);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function visualUpdate() {
|
|
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
|
|
+ messagesDiv.innerHTML = "";
|
|
|
|
|
+ const visibleMessages = selectedChannel
|
|
|
|
|
+ ? messages.filter(m => m[1] === selectedChannel)
|
|
|
|
|
+ : messages;
|
|
|
|
|
+ for (const [time, channel, username, message] of visibleMessages.slice().reverse()) {
|
|
|
|
|
+ const messageDiv = document.createElement('div');
|
|
|
|
|
+ messageDiv.classList.add('message');
|
|
|
|
|
+ const timeString = new Date(time).toLocaleTimeString();
|
|
|
|
|
+ messageDiv.textContent = `[${timeString}] ${username}: ${message}`;
|
|
|
|
|
+ messagesDiv.appendChild(messageDiv);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // Update channels
|
|
|
|
|
+ const channelList = document.querySelector('#channel-list');
|
|
|
|
|
+ const channels = new Set(messages.map(m => m[1]));
|
|
|
|
|
+ channelList.innerHTML = "<h2>Channels</h2>";
|
|
|
|
|
+
|
|
|
|
|
+ const allChannelsDiv = document.createElement('div');
|
|
|
|
|
+ allChannelsDiv.classList.add('channel-item');
|
|
|
|
|
+ if (!selectedChannel) {
|
|
|
|
|
+ allChannelsDiv.classList.add('active');
|
|
|
|
|
+ }
|
|
|
|
|
+ allChannelsDiv.textContent = '#all';
|
|
|
|
|
+ allChannelsDiv.onclick = () => {
|
|
|
|
|
+ selectedChannel = null;
|
|
|
|
|
+ visualUpdate();
|
|
|
|
|
+ };
|
|
|
|
|
+ channelList.appendChild(allChannelsDiv);
|
|
|
|
|
+
|
|
|
|
|
+ for (const channel of channels) {
|
|
|
|
|
+ const channelDiv = document.createElement('div');
|
|
|
|
|
+ channelDiv.classList.add('channel-item');
|
|
|
|
|
+ if (channel === selectedChannel) {
|
|
|
|
|
+ channelDiv.classList.add('active');
|
|
|
|
|
+ }
|
|
|
|
|
+ channelDiv.textContent = `#${channel}`;
|
|
|
|
|
+ channelDiv.onclick = () => {
|
|
|
|
|
+ selectedChannel = channel;
|
|
|
|
|
+ visualUpdate();
|
|
|
|
|
+ };
|
|
|
|
|
+ channelList.appendChild(channelDiv);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // Update users
|
|
|
|
|
+ const userList = document.querySelector('#user-list');
|
|
|
|
|
+ const users = new Set(messages.map(m => m[2]));
|
|
|
|
|
+ userList.innerHTML = "<h2>Users</h2>";
|
|
|
|
|
+ for (const user of users) {
|
|
|
|
|
+ const userDiv = document.createElement('div');
|
|
|
|
|
+ userDiv.textContent = user;
|
|
|
|
|
+ userList.appendChild(userDiv);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function submitMessage() {
|
|
|
|
|
+ const input = document.querySelector('#message-input');
|
|
|
|
|
+ const message = input.value.trim();
|
|
|
|
|
+ if (message) {
|
|
|
|
|
+ messages.push([Date.now(), "root", "You", message]);
|
|
|
|
|
+ input.value = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ visualUpdate();
|
|
|
|
|
+
|
|
|
|
|
+ // Scroll to bottom
|
|
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
|
|
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function main() {
|
|
|
|
|
+ setInterval(() => {
|
|
|
|
|
+ // Don't update if user has scrolled up
|
|
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
|
|
+ if (messagesDiv.scrollTop + messagesDiv.clientHeight < messagesDiv.clientHeight) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ visualUpdate();
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+simulateReceivingMessages();
|
|
|
|
|
+
|
|
|
|
|
+main();
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|
