workspace / index.html
pacman1337's picture
Create index.html
b93c99f verified
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GPU Workspace</title>
<style>
:root {
--bg: #0b1220;
--panel: #121c31;
--text: #e8efff;
--muted: #9fb2d9;
--acc1: #33d1ff;
--acc2: #8bff8a;
--border: #2b3d63;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
background: radial-gradient(circle at 10% 10%, #17335f 0%, var(--bg) 60%);
color: var(--text);
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.card {
width: min(900px, 100%);
background: linear-gradient(180deg, rgba(18,28,49,.95), rgba(11,18,32,.95));
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
h1 {
margin: 0 0 10px;
font-size: 32px;
line-height: 1.1;
}
p { margin: 0 0 14px; color: var(--muted); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 20px 0;
}
a.btn {
display: block;
text-decoration: none;
color: var(--text);
background: #172747;
border: 1px solid #2f4a78;
border-radius: 12px;
padding: 14px;
font-weight: 600;
text-align: center;
}
a.btn:hover { border-color: var(--acc1); }
code {
display: inline-block;
padding: 2px 8px;
border-radius: 8px;
background: #0e1930;
border: 1px solid #2a3f66;
color: var(--acc2);
margin: 0 4px;
}
ul { margin: 12px 0 0; color: var(--muted); }
</style>
</head>
<body>
<main class="card">
<h1>GPU Workspace Control Panel</h1>
<p>Semua service lewat satu port HF. Pilih mode kerja lu di bawah ini.</p>
<div class="grid">
<a class="btn" href="/desktop/" target="_blank" rel="noopener noreferrer">Desktop (noVNC)</a>
<a class="btn" href="/vscode/" target="_blank" rel="noopener noreferrer">VS Code Server</a>
<a class="btn" href="/jupyter/" target="_blank" rel="noopener noreferrer">JupyterLab</a>
<a class="btn" href="/api/gpu" target="_blank" rel="noopener noreferrer">Check GPU API</a>
<a class="btn" href="/api/health" target="_blank" rel="noopener noreferrer">API Health</a>
<a class="btn" href="/healthz" target="_blank" rel="noopener noreferrer">Nginx Health</a>
</div>
<p>Security:</p>
<ul>
<li>Ubah variable <code>VSCODE_PASSWORD</code> di Settings - Variables.</li>
<li>Ubah variable <code>JUPYTER_TOKEN</code> di Settings - Variables.</li>
<li>Kalau mau private total, set Space visibility ke <code>Private</code>.</li>
</ul>
</main>
</body>
</html>