Skip to content

Commit 7b05fab

Browse files
KrisSimonKrisSimon
committed
Redesign UI with modern glassmorphic styling
- Add dark/light mode support with CSS custom properties - Implement glassmorphism effects with backdrop-filter - Add LED-style status indicator for WebSocket connection - Modernize typography and spacing - Improve form styling with smooth animations
1 parent 8bc7576 commit 7b05fab

3 files changed

Lines changed: 347 additions & 54 deletions

File tree

‎templates/index.html‎

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,54 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="color-scheme" content="light dark">
47
<title>StatusPost</title>
58
<link rel="stylesheet" href="/static/style.css">
69
</head>
710
<body>
8-
<h1>StatusPost</h1>
9-
<div class="form">
10-
<form id="f">
11-
<input type="text" id="msg" placeholder="Message..." required>
12-
<button type="submit">Post</button>
13-
</form>
14-
</div>
15-
<div id="status" class="disconnected">Connecting...</div>
16-
<div id="messages">
11+
<div class="container">
12+
<header>
13+
<h1>StatusPost</h1>
14+
<p class="tagline">Real-time updates, beautifully simple</p>
15+
</header>
16+
17+
<main>
18+
<div class="card compose">
19+
<form id="f">
20+
<input type="text" id="msg" placeholder="What's on your mind?" autocomplete="off" required>
21+
<button type="submit">
22+
<span>Post</span>
23+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24+
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
25+
</svg>
26+
</button>
27+
</form>
28+
</div>
29+
30+
<div class="status-bar">
31+
<div id="status" class="status disconnected">
32+
<span class="status-dot"></span>
33+
<span class="status-text">Connecting...</span>
34+
</div>
35+
</div>
36+
37+
<div id="messages" class="messages">
1738
{{ for each <msg> in <recent-messages> { }}
18-
<div class="message">
19-
<div class="time">{{ <msg: createdAt> | date: "dd.MM.yyyy HH:mm" }}</div>
20-
<div>{{ <msg: message> }}</div>
21-
</div>
39+
<article class="card message">
40+
<time class="time">{{ <msg: createdAt> | date: "dd.MM.yyyy HH:mm" }}</time>
41+
<p class="content">{{ <msg: message> }}</p>
42+
</article>
2243
{{ } }}
44+
</div>
45+
</main>
46+
47+
<footer>
48+
<p>Powered by <a href="https://arolang.github.io/aro/" target="_blank">ARO</a></p>
49+
</footer>
2350
</div>
51+
2452
<script src="/static/app.js"></script>
2553
</body>
2654
</html>

‎templates/static/app.js‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,43 @@
1-
var m = document.getElementById('messages');
2-
var s = document.getElementById('status');
3-
var f = document.getElementById('f');
4-
var i = document.getElementById('msg');
1+
(function() {
2+
'use strict';
3+
var messages = document.getElementById('messages');
4+
var status = document.getElementById('status');
5+
var statusText = status.querySelector('.status-text');
6+
var form = document.getElementById('f');
7+
var input = document.getElementById('msg');
58

6-
function fmt(t) {
7-
var d = new Date(t);
8-
var pad = function(n) { return n < 10 ? '0' + n : n; };
9-
return pad(d.getUTCDate()) + '.' + pad(d.getUTCMonth() + 1) + '.' + d.getUTCFullYear() + ' ' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes());
10-
}
11-
function esc(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
9+
function fmt(t) {
10+
var d = new Date(t);
11+
var pad = function(n) { return n < 10 ? '0' + n : n; };
12+
return pad(d.getDate()) + '.' + pad(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
13+
}
1214

13-
function add(msg) {
14-
var d = document.createElement('div');
15-
d.className = 'message';
16-
d.innerHTML = '<div class="time">' + fmt(msg.createdAt) + '</div><div>' + esc(msg.message) + '</div>';
17-
m.insertBefore(d, m.firstChild);
18-
}
15+
function esc(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
1916

20-
var ws;
21-
function connect() {
22-
ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + location.host + '/ws');
23-
ws.onopen = function() { s.textContent = 'Connected'; s.className = 'connected'; };
24-
ws.onmessage = function(e) { try { add(JSON.parse(e.data)); } catch(err) {} };
25-
ws.onclose = function() { s.textContent = 'Disconnected'; s.className = 'disconnected'; setTimeout(connect, 3000); };
26-
}
27-
connect();
17+
function add(msg) {
18+
var el = document.createElement('article');
19+
el.className = 'card message';
20+
el.innerHTML = '<time class="time">' + fmt(msg.createdAt) + '</time><p class="content">' + esc(msg.message) + '</p>';
21+
messages.insertBefore(el, messages.firstChild);
22+
}
2823

29-
f.onsubmit = function(e) {
30-
e.preventDefault();
31-
var msg = i.value.trim();
32-
if (!msg) return;
33-
fetch('/messages', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'message=' + encodeURIComponent(msg) });
34-
i.value = '';
35-
};
24+
var ws, delay = 1000;
25+
function connect() {
26+
ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + location.host + '/ws');
27+
ws.onopen = function() { status.className = 'status connected'; statusText.textContent = 'Connected'; delay = 1000; };
28+
ws.onmessage = function(e) { try { add(JSON.parse(e.data)); } catch(err) {} };
29+
ws.onclose = function() { status.className = 'status disconnected'; statusText.textContent = 'Reconnecting...'; setTimeout(connect, delay); delay = Math.min(delay * 2, 30000); };
30+
ws.onerror = function() { ws.close(); };
31+
}
32+
connect();
33+
34+
form.onsubmit = function(e) {
35+
e.preventDefault();
36+
var msg = input.value.trim();
37+
if (!msg) return;
38+
fetch('/messages', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'message=' + encodeURIComponent(msg) });
39+
input.value = '';
40+
};
41+
42+
input.focus();
43+
})();

0 commit comments

Comments
 (0)