|
<!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/[email protected]/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> <button onclick="location.reload()">Reload (beta)</button> <button onclick="location.href = 'https://google.com'">Google</button> <button onclick="location.href = 'https://bing.com'">Bing</button> </button><button onclick="" disabled>Restart server</button> <button onclick="alert('12-12-3500')">Nitro Expiry Date</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'); |
|
|
|
|
|
window.onload = () => { |
|
usernameForm.style.display = 'block'; |
|
}; |
|
|
|
|
|
setUsernameButton.addEventListener('click', () => { |
|
const username = usernameInput.value.trim(); |
|
if (username) { |
|
socket.emit('set username', username); |
|
usernameForm.style.display = 'none'; |
|
form.style.display = 'block'; |
|
} |
|
}); |
|
|
|
|
|
form.addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
if (input.value) { |
|
socket.emit('chat message', input.value); |
|
input.value = ''; |
|
} |
|
}); |
|
|
|
|
|
socket.on('chat message', function(data) { |
|
const item = document.createElement('li'); |
|
item.innerText = `${data.username} (Nitro member): ${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> |
