241 lines
No EOL
6.4 KiB
HTML
241 lines
No EOL
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>AetherChat</title>
|
|
<style>
|
|
:root {
|
|
--brass: #d4af37;
|
|
--copper: #b87333;
|
|
--leather: #2b1d0e;
|
|
--parchment: #f5e6d3;
|
|
--steam: #e0e0e0;
|
|
--gear-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background-color: #1a1a1a;
|
|
background-image:
|
|
radial-gradient(circle at 50% 50%, #2b1d0e 0%, #000 100%);
|
|
color: var(--parchment);
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--brass);
|
|
text-shadow: 2px 2px 4px #000;
|
|
border-bottom: 2px solid var(--copper);
|
|
padding-bottom: 10px;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#chat-container {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
background: rgba(43, 29, 14, 0.9);
|
|
border: 4px solid var(--copper);
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
0 0 15px var(--brass),
|
|
inset 0 0 20px #000;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Decorative screws */
|
|
#chat-container::before,
|
|
#chat-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--brass);
|
|
border-radius: 50%;
|
|
box-shadow: 1px 1px 2px #000;
|
|
}
|
|
|
|
#chat-container::before {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
#chat-container::after {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
#chat {
|
|
height: 500px;
|
|
overflow-y: scroll;
|
|
border: 2px inset var(--copper);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 15px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--brass) var(--leather);
|
|
}
|
|
|
|
#chat::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
#chat::-webkit-scrollbar-track {
|
|
background: var(--leather);
|
|
}
|
|
|
|
#chat::-webkit-scrollbar-thumb {
|
|
background-color: var(--brass);
|
|
border: 1px solid var(--copper);
|
|
}
|
|
|
|
.message {
|
|
background-color: var(--parchment);
|
|
color: #2b1d0e;
|
|
padding: 8px 12px;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--copper);
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
|
|
.message::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 10px;
|
|
border-width: 5px 5px 0;
|
|
border-style: solid;
|
|
border-color: var(--copper) transparent;
|
|
}
|
|
|
|
.system-msg {
|
|
font-style: italic;
|
|
color: var(--brass);
|
|
text-align: center;
|
|
margin: 5px 0;
|
|
font-size: 0.9em;
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.system-msg::after {
|
|
display: none;
|
|
}
|
|
|
|
#controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
background: #1a1a1a;
|
|
border: 1px solid var(--copper);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
flex-grow: 1;
|
|
padding: 10px;
|
|
background: var(--parchment);
|
|
border: 2px solid var(--leather);
|
|
color: #2b1d0e;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
background: linear-gradient(to bottom, var(--brass), var(--copper));
|
|
border: 2px solid #2b1d0e;
|
|
color: #2b1d0e;
|
|
padding: 10px 25px;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
box-shadow: 2px 2px 4px #000;
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
button:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>⚙ AetherChat ⚙</h1>
|
|
<div id="chat-container">
|
|
<div id="chat"></div>
|
|
<div id="controls">
|
|
<input type="text" id="message" placeholder="Transmit payload..." autofocus>
|
|
<button onclick="sendMessage()">Engage</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const chatCheck = document.getElementById("chat");
|
|
const messageInput = document.getElementById("message");
|
|
|
|
// Connect to WebSocket
|
|
const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
const ws = new WebSocket(`${proto}://${window.location.host}/ws`);
|
|
|
|
ws.onmessage = (event) => {
|
|
const div = document.createElement("div");
|
|
div.textContent = event.data;
|
|
div.className = "message";
|
|
|
|
if (event.data.startsWith("System:")) {
|
|
div.className += " system-msg";
|
|
}
|
|
|
|
chatCheck.appendChild(div);
|
|
chatCheck.scrollTop = chatCheck.scrollHeight;
|
|
};
|
|
|
|
ws.onopen = () => {
|
|
addSystemMessage("Connected to the Aether-Net.");
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
addSystemMessage("Connection severed. Check steam pressure.");
|
|
};
|
|
|
|
function addSystemMessage(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = `System: ${text}`;
|
|
div.className = "message system-msg";
|
|
chatCheck.appendChild(div);
|
|
chatCheck.scrollTop = chatCheck.scrollHeight;
|
|
}
|
|
|
|
function sendMessage() {
|
|
const msg = messageInput.value;
|
|
if (msg) {
|
|
ws.send(msg);
|
|
messageInput.value = "";
|
|
}
|
|
}
|
|
|
|
messageInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") sendMessage();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |