first stable

1 files changed, 424 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..2d095a4
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,424 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --bg: #1a1b1e;
+    --bg-card: #25262b;
+    --bg-input: #2c2e33;
+    --fg: #c1c2c5;
+    --fg-muted: #909296;
+    --accent: #4c9aff;
+    --ok: #51cf66;
+    --warn: #fcc419;
+    --err: #ff6b6b;
+    --border: #373a40;
+    --radius: 8px;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg);
+    color: var(--fg);
+    line-height: 1.5;
+    min-height: 100vh;
+}
+
+/* Navigation */
+nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+nav .brand {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--accent);
+}
+
+nav .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+nav a {
+    color: var(--fg);
+    text-decoration: none;
+    font-size: 0.9rem;
+}
+
+nav a:hover {
+    color: var(--accent);
+}
+
+nav .nav-user {
+    color: var(--fg-muted);
+    font-size: 0.85rem;
+}
+
+/* Buttons */
+.btn, button {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-input);
+    color: var(--fg);
+    cursor: pointer;
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: background 0.15s;
+}
+
+.btn:hover, button:hover {
+    background: var(--border);
+}
+
+.btn-ok, button.btn-ok {
+    background: var(--ok);
+    color: #000;
+    border-color: var(--ok);
+}
+
+.btn-ok:hover {
+    opacity: 0.85;
+}
+
+.btn-danger, button.btn-danger {
+    background: var(--err);
+    color: #000;
+    border-color: var(--err);
+}
+
+.btn-danger:hover {
+    opacity: 0.85;
+}
+
+.btn-sm {
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8rem;
+}
+
+.btn-link {
+    background: none;
+    border: none;
+    color: var(--fg-muted);
+    cursor: pointer;
+    padding: 0;
+}
+
+.btn-link:hover {
+    color: var(--err);
+}
+
+/* Cards */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+}
+
+.card-ok {
+    border-color: var(--ok);
+}
+
+.card-err {
+    border-color: var(--err);
+}
+
+.card-muted {
+    opacity: 0.7;
+}
+
+.card-active {
+    border-color: var(--accent);
+    position: relative;
+}
+
+.active-badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: var(--accent);
+    color: #000;
+    font-size: 0.7rem;
+    font-weight: 700;
+    padding: 0.15rem 0.5rem;
+    border-radius: 100px;
+}
+
+/* Forms */
+form.form-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+form.form-col:not(.form-wide) {
+    max-width: 600px;
+}
+
+form.form-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.9rem;
+    color: var(--fg-muted);
+}
+
+label:has(input[type="radio"]),
+label:has(input[type="checkbox"]) {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--fg);
+}
+
+input, select, textarea {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-input);
+    color: var(--fg);
+    font-size: 0.9rem;
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+}
+
+legend {
+    font-weight: 600;
+    padding: 0 0.5rem;
+    color: var(--fg-muted);
+    font-size: 0.85rem;
+}
+
+small {
+    color: var(--fg-muted);
+    font-size: 0.8rem;
+}
+
+/* Layout */
+main {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+h1, h2, h3 {
+    color: var(--fg);
+    margin-bottom: 0.75rem;
+}
+
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.instance-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.tab-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1rem;
+}
+
+/* Status badges */
+.status-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 100px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.status-running {
+    background: var(--ok);
+    color: #000;
+}
+
+.status-starting {
+    background: var(--warn);
+    color: #000;
+}
+
+.status-stopped {
+    background: var(--fg-muted);
+    color: #000;
+}
+
+.status-error, .status-not_found {
+    background: var(--err);
+    color: #000;
+}
+
+.status-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 0.75rem 0;
+}
+
+/* Tags */
+.tag {
+    display: inline-block;
+    padding: 0.1rem 0.5rem;
+    border-radius: 100px;
+    font-size: 0.75rem;
+    background: var(--border);
+    color: var(--fg-muted);
+}
+
+.tag-admin {
+    background: var(--warn);
+    color: #000;
+}
+
+/* Instance meta */
+.instance-meta, .meta {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    font-size: 0.85rem;
+    color: var(--fg-muted);
+    margin-bottom: 0.5rem;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.75rem;
+}
+
+.players {
+    font-size: 0.9rem;
+    color: var(--accent);
+}
+
+/* Player list */
+.player-list {
+    list-style: none;
+    margin-top: 0.5rem;
+}
+
+.player-list li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.9rem;
+}
+
+/* Table */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+.table th, .table td {
+    text-align: left;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.table th {
+    color: var(--fg-muted);
+    font-weight: 600;
+}
+
+/* Flash messages */
+.flash {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+}
+
+.flash-err {
+    background: color-mix(in srgb, var(--err) 15%, transparent);
+    border: 1px solid var(--err);
+    color: var(--err);
+}
+
+.flash-ok {
+    background: color-mix(in srgb, var(--ok) 15%, transparent);
+    border: 1px solid var(--ok);
+    color: var(--ok);
+}
+
+.flash-warn {
+    background: color-mix(in srgb, var(--warn) 15%, transparent);
+    border: 1px solid var(--warn);
+    color: var(--warn);
+}
+
+/* Login page */
+.login-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    max-width: 380px;
+}
+
+.login-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.login-form button {
+    margin-top: 0.5rem;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    nav {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .instance-grid {
+        grid-template-columns: 1fr;
+    }
+}