feat: add initial client shell
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
let serverAddress = 'http://127.0.0.1:8787';
|
||||
let connectionState = 'Not connected';
|
||||
let serverVersion = '—';
|
||||
|
||||
async function checkServer() {
|
||||
connectionState = 'Connecting…';
|
||||
try {
|
||||
const response = await fetch(`${serverAddress}/api/v1/server/info`);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const info: { server_version: string } = await response.json();
|
||||
serverVersion = info.server_version;
|
||||
connectionState = 'Connected';
|
||||
} catch {
|
||||
connectionState = 'Server unavailable';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta name="theme-color" content="#2575e6" />
|
||||
</svelte:head>
|
||||
|
||||
<main class="shell">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">TRIXIE</p>
|
||||
<h1>Twitch control center</h1>
|
||||
</div>
|
||||
<span class:connected={connectionState === 'Connected'} class="status">{connectionState}</span>
|
||||
</header>
|
||||
|
||||
<section class="hero panel">
|
||||
<div>
|
||||
<p class="eyebrow">SERVER CONNECTION</p>
|
||||
<h2>Ready to build the dashboard</h2>
|
||||
<p class="muted">The client and server now share a versioned readiness contract.</p>
|
||||
</div>
|
||||
<div class="connection-form">
|
||||
<label for="server-address">Server address</label>
|
||||
<div class="input-row">
|
||||
<input id="server-address" bind:value={serverAddress} spellcheck="false" />
|
||||
<button on:click={checkServer}>Test connection</button>
|
||||
</div>
|
||||
<small>Server version: {serverVersion}</small>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard-grid">
|
||||
<article class="panel card"><span class="icon">◈</span><h3>Live dashboard</h3><p>Stream preview, activity, chat, and controls will live here.</p></article>
|
||||
<article class="panel card"><span class="icon">⌁</span><h3>Bot and plugins</h3><p>Modular commands and safe WASM extensions are planned next.</p></article>
|
||||
<article class="panel card"><span class="icon">◎</span><h3>Overlays</h3><p>Browser-source alerts will be editable and previewable.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
@@ -0,0 +1,8 @@
|
||||
import './styles.css';
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')!,
|
||||
});
|
||||
|
||||
export default app;
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
:root {
|
||||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
color: #f3f5fb;
|
||||
background: #10131a;
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 85% 0%, #17325e 0, #10131a 42rem);
|
||||
}
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 0.7rem 1rem;
|
||||
color: white;
|
||||
background: #2575e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #4189ed;
|
||||
}
|
||||
.shell {
|
||||
width: min(1180px, calc(100% - 3rem));
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.topbar,
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.topbar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.eyebrow {
|
||||
margin: 0 0 0.35rem;
|
||||
color: #78aef5;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.6rem, 3vw, 2.4rem);
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(1.4rem, 3vw, 2.1rem);
|
||||
}
|
||||
.status {
|
||||
border: 1px solid #3a4354;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.8rem;
|
||||
color: #a9b1c2;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.status.connected {
|
||||
border-color: #2f9d70;
|
||||
color: #77e0ae;
|
||||
}
|
||||
.panel {
|
||||
border: 1px solid #2b3342;
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 29, 39, 0.88);
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
.muted,
|
||||
small {
|
||||
color: #9aa5b8;
|
||||
}
|
||||
.connection-form {
|
||||
align-self: center;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #c9d2e3;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
border: 1px solid #3a4354;
|
||||
border-radius: 8px;
|
||||
padding: 0.7rem 0.8rem;
|
||||
color: #f3f5fb;
|
||||
background: #10131a;
|
||||
}
|
||||
.input-row {
|
||||
justify-content: stretch;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.card {
|
||||
min-height: 180px;
|
||||
padding: 1.4rem;
|
||||
}
|
||||
.card p {
|
||||
color: #9aa5b8;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
color: #5d9bf0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.shell {
|
||||
width: min(100% - 1.5rem, 600px);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.hero,
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.hero {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.topbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user