redesign
This commit is contained in:
parent
1fb689fb8f
commit
24e6ac26f1
7 changed files with 2354 additions and 197 deletions
222
index.html
222
index.html
|
|
@ -1,27 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Simple Chat</title>
|
||||
<title>AetherChat</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
|
||||
#chat { height: 400px; border: 1px solid #ccc; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
|
||||
#controls { display: flex; gap: 10px; }
|
||||
#message { flex-grow: 1; padding: 5px; }
|
||||
button { padding: 5px 15px; }
|
||||
: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>Simple Chat</h1>
|
||||
<div id="chat"></div>
|
||||
<div id="controls">
|
||||
<input type="text" id="message" placeholder="Type a message..." autofocus>
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
<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`);
|
||||
|
|
@ -29,24 +198,32 @@
|
|||
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 = () => {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = "System: Connected to chat server";
|
||||
div.style.color = "green";
|
||||
chatCheck.appendChild(div);
|
||||
addSystemMessage("Connected to the Aether-Net.");
|
||||
};
|
||||
|
||||
|
||||
ws.onclose = () => {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = "System: Disconnected";
|
||||
div.style.color = "red";
|
||||
chatCheck.appendChild(div);
|
||||
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) {
|
||||
|
|
@ -60,4 +237,5 @@
|
|||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue