Create style.css

static/style.css

@@ -0,0 +1,338 @@
+/* =========================================================
+   BASYX V11 UI SYSTEM
+   Industrial Dark OS Theme
+========================================================= */
+
+:root {
+  --void: #080808;
+  --surface: #0f0f0f;
+  --panel: #161616;
+  --panel-2: #121212;
+
+  --border: #232323;
+  --border-2: #2c2c2c;
+
+  --accent: #e8ff47;
+  --accent-dim: #b8cc30;
+
+  --text: #e8e8e8;
+  --text-dim: #888888;
+
+  --muted: #555555;
+  --danger: #ef4444;
+  --warn: #f59e0b;
+  --ok: #22c55e;
+
+  --radius: 6px;
+
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
+  --font-display: Bebas Neue, sans-serif;
+  --font-body: system-ui, -apple-system, Segoe UI, Roboto;
+}
+
+/* =========================================================
+   BASE RESET
+========================================================= */
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--void);
+  color: var(--text);
+  font-family: var(--font-body);
+  height: 100%;
+}
+
+h1, h2, h3 {
+  margin: 0;
+}
+
+/* =========================================================
+   SIDEBAR
+========================================================= */
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 220px;
+  height: 100vh;
+  background: #0b0b0b;
+  border-right: 1px solid var(--border);
+  padding: 16px;
+  overflow-y: auto;
+  transition: transform 0.25s ease;
+}
+
+.brand {
+  font-family: var(--font-display);
+  font-size: 28px;
+  color: var(--accent);
+  margin-bottom: 18px;
+  letter-spacing: 1px;
+}
+
+.nav-group-title {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin: 16px 0 6px;
+  letter-spacing: 1px;
+}
+
+.nav-item {
+  padding: 10px 12px;
+  cursor: pointer;
+  color: var(--text-dim);
+  border-left: 2px solid transparent;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+}
+
+.nav-item:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.nav-item.active {
+  border-left: 2px solid var(--accent);
+  color: var(--accent);
+  background: rgba(232, 255, 71, 0.06);
+}
+
+/* =========================================================
+   MAIN LAYOUT
+========================================================= */
+
+.main {
+  margin-left: 220px;
+  padding: 24px;
+}
+
+/* =========================================================
+   SECTIONS
+========================================================= */
+
+.section {
+  display: none;
+  animation: fadeIn 0.25s ease;
+}
+
+.section.active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* =========================================================
+   PANELS
+========================================================= */
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 18px;
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+}
+
+.panel h2 {
+  font-family: var(--font-display);
+  letter-spacing: 1px;
+  color: var(--accent);
+  margin-bottom: 12px;
+}
+
+/* =========================================================
+   INPUT SYSTEM
+========================================================= */
+
+input, textarea, select {
+  width: 100%;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #111;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  outline: none;
+}
+
+input:focus {
+  border-color: var(--accent);
+}
+
+/* =========================================================
+   BUTTONS
+========================================================= */
+
+button {
+  padding: 12px 14px;
+  border: none;
+  cursor: pointer;
+  background: var(--accent);
+  color: #000;
+  font-weight: 700;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  margin-top: 10px;
+}
+
+button:hover {
+  filter: brightness(1.05);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =========================================================
+   PRE / OUTPUT
+========================================================= */
+
+pre {
+  background: #0b0b0b;
+  border: 1px solid var(--border);
+  padding: 12px;
+  border-radius: var(--radius);
+  overflow: auto;
+  color: var(--text);
+  font-family: var(--font-mono);
+}
+
+/* =========================================================
+   VIDEO OUTPUT
+========================================================= */
+
+video {
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: #000;
+}
+
+/* =========================================================
+   CARDS (future UI expansion)
+========================================================= */
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+}
+
+/* =========================================================
+   STATUS BADGES
+========================================================= */
+
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+.badge.ok {
+  color: var(--ok);
+  border-color: var(--ok);
+}
+
+.badge.warn {
+  color: var(--warn);
+  border-color: var(--warn);
+}
+
+.badge.error {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+/* =========================================================
+   STAT CARDS
+========================================================= */
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin: 12px 0;
+}
+
+.stat-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 14px;
+  border-radius: var(--radius);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.stat-value {
+  font-size: 34px;
+  font-family: var(--font-display);
+  color: var(--accent);
+}
+
+/* =========================================================
+   LOADING STATE
+========================================================= */
+
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* =========================================================
+   MOBILE
+========================================================= */
+
+@media (max-width: 768px) {
+
+  .sidebar {
+    transform: translateX(-100%);
+    position: fixed;
+    z-index: 50;
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .main {
+    margin-left: 0;
+    padding: 16px;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+}