File size: 3,335 Bytes
2acacdc 45cdc9b 2acacdc 9d1d950 2acacdc 87e4b34 9c104b9 625764e 81212a4 1364861 81212a4 96ab0ff 2acacdc 6e96f8b 728a741 6e96f8b 9d1d950 2acacdc 9d1d950 bd6a513 2acacdc 9d1d950 2acacdc 9d1d950 2acacdc 9d1d950 2acacdc 9d1d950 2acacdc bd6a513 2acacdc ce9319b 2acacdc 1364861 786de80 2acacdc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HugVPS Chat - Connected to server</title>
<style>
ul { list-style-type: none; padding: 0; }
li { padding: 8px; margin-bottom: 10px; background: #f1f1f1; }
#username-form { display: none; }
</style>
<style>* { font-family: arial; }</style>
<script src="https://unpkg.com/@phuocng/fake-numbers@1.0.0/umd/fake-numbers.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/7.css">
<meta property="og:title" content="HugVPS Chat" />
<meta property="og:description" content="HugVPS Chat is a chat platform like discord but with less features and you don't need a account. Privacy is important!" />
<meta property="og:url" content="https://hugvps-chat.hf.space" />
<meta property="og:type" content="website" />
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="title-bar">
<div class="title-bar-text">HugVPS-Chat.exe</div>
<div class="title-bar-controls">
<button aria-label="Close"></button>
</div>
</div>
<h1>HugVPS Chat</h1>
<div id="username-form">
<input id="username" placeholder="Enter your username" />
<button id="set-username">Set Username</button>
</div>
<ul id="messages"></ul>
<form id="form" action="" style="display: none;">
<input id="input" autocomplete="off" placeholder="Type your message..." />
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const usernameForm = document.getElementById('username-form');
const messages = document.getElementById('messages');
const form = document.getElementById('form');
const input = document.getElementById('input');
const usernameInput = document.getElementById('username');
const setUsernameButton = document.getElementById('set-username');
// Show username form on page load
window.onload = () => {
usernameForm.style.display = 'block';
};
// Set username
setUsernameButton.addEventListener('click', () => {
const username = usernameInput.value.trim();
if (username) {
socket.emit('set username', username);
usernameForm.style.display = 'none';
form.style.display = 'block';
}
});
// Handle message submission
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
// Listen for chat messages
socket.on('chat message', function(data) {
const item = document.createElement('li');
item.innerText = `${data.username} said: ${data.message}`;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
twemoji.parse(document.body);
});
twemoji.parse(document.body);
console.log("[CHAT] Connected to socket.io server")
</script>
</body>
</html> |