Simplify
This commit is contained in:
176
web/index.html
176
web/index.html
@@ -3,67 +3,105 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sova Jam</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwindcss.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: { mono: ['"JetBrains Mono"', 'monospace'] },
|
||||
}
|
||||
}
|
||||
<title>sova-jam</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
background: #0a0a0a;
|
||||
color: #888;
|
||||
padding: 2rem;
|
||||
max-width: 540px;
|
||||
}
|
||||
</script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
a { color: #888; }
|
||||
a:hover { color: #ccc; }
|
||||
code {
|
||||
color: #ccc;
|
||||
background: #141414;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #ccc;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h1 span { color: #555; }
|
||||
.section {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.label { color: #555; }
|
||||
.val { color: #ccc; }
|
||||
.val.dim { color: #555; }
|
||||
.val.on { color: #6a9; }
|
||||
.val.off { color: #a55; }
|
||||
.val.tempo { font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; }
|
||||
#peers { list-style: none; }
|
||||
#peers li { color: #aaa; }
|
||||
#peers li::before { content: "~ "; color: #444; }
|
||||
#peers .empty { color: #333; font-style: italic; }
|
||||
#peers .empty::before { content: ""; }
|
||||
ol { list-style: none; counter-reset: step; }
|
||||
ol li { counter-increment: step; }
|
||||
ol li::before {
|
||||
content: counter(step) ". ";
|
||||
color: #444;
|
||||
}
|
||||
footer {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
padding-top: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral-950 text-neutral-200 font-mono min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<body>
|
||||
|
||||
<main class="w-full max-w-lg space-y-8">
|
||||
<header class="text-center space-y-2">
|
||||
<h1 class="text-4xl font-bold text-white tracking-tight">Sova Jam</h1>
|
||||
<p class="text-neutral-500 text-sm">live coding session</p>
|
||||
</header>
|
||||
<h1>sova-jam <span>/ live session</span></h1>
|
||||
|
||||
<section id="status" class="border border-neutral-800 p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-neutral-500 text-xs uppercase tracking-widest">Server</span>
|
||||
<span id="server-status" class="text-xs px-2 py-0.5 border border-neutral-700 text-neutral-400">connecting...</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-neutral-500 text-xs uppercase tracking-widest">Tempo</span>
|
||||
<span id="tempo" class="text-2xl font-bold text-white tabular-nums">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-neutral-500 text-xs uppercase tracking-widest">Playback</span>
|
||||
<span id="playback" class="text-sm text-neutral-400">--</span>
|
||||
</div>
|
||||
</section>
|
||||
<div class="section">
|
||||
<div class="row">
|
||||
<span class="label">server</span>
|
||||
<span id="server-status" class="val dim">...</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">tempo</span>
|
||||
<span id="tempo" class="val tempo">--</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">playback</span>
|
||||
<span id="playback" class="val dim">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="border border-neutral-800 p-6 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-neutral-500 text-xs uppercase tracking-widest">Musicians</span>
|
||||
<span id="peer-count" class="text-xs text-neutral-600">0</span>
|
||||
</div>
|
||||
<ul id="peers" class="space-y-1">
|
||||
<li class="text-neutral-600 text-sm italic">No musicians connected</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="section">
|
||||
<div class="row">
|
||||
<span class="label">peers</span>
|
||||
<span id="peer-count" class="val dim">0</span>
|
||||
</div>
|
||||
<ul id="peers">
|
||||
<li class="empty">none</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section class="border border-neutral-800 p-6 space-y-3">
|
||||
<h2 class="text-neutral-500 text-xs uppercase tracking-widest">How to join</h2>
|
||||
<ol class="text-sm text-neutral-400 space-y-2 list-decimal list-inside">
|
||||
<li>Download <a href="https://github.com/sova-org/Sova" class="text-blue-400 hover:text-blue-300 underline">Sova</a></li>
|
||||
<li>Connect to <code class="text-white bg-neutral-900 px-1.5 py-0.5">this server's address</code> on port <code class="text-white bg-neutral-900 px-1.5 py-0.5">8080</code></li>
|
||||
<li>Enter the session password</li>
|
||||
<li>Start coding music</li>
|
||||
</ol>
|
||||
</section>
|
||||
<div class="section">
|
||||
<div class="row"><span class="label">join</span></div>
|
||||
<ol>
|
||||
<li>get <a href="https://github.com/sova-org/Sova">sova</a></li>
|
||||
<li>connect to <code>host</code> port <code>8080</code></li>
|
||||
<li>enter session password</li>
|
||||
<li>start coding</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<footer class="text-center text-neutral-700 text-xs">
|
||||
powered by <a href="https://github.com/sova-org/Sova" class="hover:text-neutral-500">sova</a>
|
||||
</footer>
|
||||
</main>
|
||||
<footer>sova-jam · <a href="https://github.com/sova-org/Sova">src</a></footer>
|
||||
|
||||
<script>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
@@ -72,31 +110,29 @@
|
||||
ws.onmessage = (e) => {
|
||||
const s = JSON.parse(e.data);
|
||||
|
||||
$("server-status").textContent = s.connected ? "connected" : "disconnected";
|
||||
$("server-status").className = s.connected
|
||||
? "text-xs px-2 py-0.5 border border-green-800 text-green-400"
|
||||
: "text-xs px-2 py-0.5 border border-red-900 text-red-400";
|
||||
const st = $("server-status");
|
||||
st.textContent = s.connected ? "connected" : "disconnected";
|
||||
st.className = "val " + (s.connected ? "on" : "off");
|
||||
|
||||
$("tempo").textContent = s.tempo.toFixed(1) + " bpm";
|
||||
$("playback").textContent = s.isPlaying ? "playing" : "stopped";
|
||||
$("playback").className = s.isPlaying
|
||||
? "text-sm text-green-400"
|
||||
: "text-sm text-neutral-500";
|
||||
$("tempo").textContent = s.tempo.toFixed(1);
|
||||
|
||||
const pb = $("playback");
|
||||
pb.textContent = s.isPlaying ? "playing" : "stopped";
|
||||
pb.className = "val " + (s.isPlaying ? "on" : "dim");
|
||||
|
||||
const peersEl = $("peers");
|
||||
$("peer-count").textContent = s.peers.length;
|
||||
const peersEl = $("peers");
|
||||
if (s.peers.length === 0) {
|
||||
peersEl.innerHTML = '<li class="text-neutral-600 text-sm italic">No musicians connected</li>';
|
||||
peersEl.innerHTML = '<li class="empty">none</li>';
|
||||
} else {
|
||||
peersEl.innerHTML = s.peers
|
||||
.map(p => `<li class="text-sm text-neutral-300 border-l-2 border-neutral-700 pl-3">${esc(p)}</li>`)
|
||||
.join("");
|
||||
peersEl.innerHTML = s.peers.map(p => `<li>${esc(p)}</li>`).join("");
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
$("server-status").textContent = "disconnected";
|
||||
$("server-status").className = "text-xs px-2 py-0.5 border border-red-900 text-red-400";
|
||||
const st = $("server-status");
|
||||
st.textContent = "disconnected";
|
||||
st.className = "val off";
|
||||
setTimeout(() => location.reload(), 5000);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user