Brian Krabach
8234e2ec05
- Move coordinator/, frontend/, Caddyfile, pyproject.toml, requirements.txt, docs/ into muxplex/ subdir in prep for packaging/sharing - Add brand assets to frontend/: favicon.ico, pwa-192/512.png, apple-touch-icon.png, wordmark-on-dark.svg - Update app: title → muxplex, header → wordmark SVG, brand color tokens in style.css, manifest.json updated with muxplex name and brand icons - Add design system: assets/branding/tokens.css (101 CSS custom properties), tokens.json (127 tokens), DESIGN-SYSTEM.md (856-line spec) - Add assets/branding/: SVG sources, rendered PNGs (icons, favicons, PWA, OG) - Add scripts/render-brand-assets.py for reproducible PNG generation - Add muxplex/README.md
75 lines
4.3 KiB
HTML
75 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta name="theme-color" content="#0D1117" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<title>muxplex</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ── Overview view ─────────────────────────────────────────────── -->
|
|
<div id="view-overview" class="view view--active">
|
|
<header class="app-header">
|
|
<h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
|
|
<span id="connection-status"></span>
|
|
</header>
|
|
<div id="session-grid" class="session-grid" role="list"></div>
|
|
<div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
|
|
</div>
|
|
|
|
<!-- ── Expanded (terminal) view ────────────────────────────────────── -->
|
|
<div id="view-expanded" class="view hidden">
|
|
<header class="expanded-header">
|
|
<button id="back-btn" class="back-btn" aria-label="Back">←</button>
|
|
<span id="expanded-session-name" class="expanded-session-name"></span>
|
|
<button id="palette-trigger" class="palette-trigger" aria-label="Open command palette">⌘K</button>
|
|
</header>
|
|
<div id="terminal-container" class="terminal-container"></div>
|
|
<div id="reconnect-overlay" class="reconnect-overlay hidden" aria-live="polite">Reconnecting…</div>
|
|
</div>
|
|
|
|
<!-- ── Command palette ─────────────────────────────────────────────── -->
|
|
<div id="command-palette" class="command-palette hidden" role="dialog" aria-modal="true" aria-label="Switch session">
|
|
<div class="command-palette__backdrop" id="palette-backdrop"></div>
|
|
<div class="command-palette__dialog">
|
|
<input id="palette-input" class="command-palette__input" type="text"
|
|
placeholder="Jump to session…" autocomplete="off" spellcheck="false">
|
|
<ul id="palette-list" class="command-palette__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Bottom sheet (session switcher) ─────────────────────────────── -->
|
|
<div id="bottom-sheet" class="bottom-sheet hidden" role="dialog" aria-modal="true" aria-label="Switch session">
|
|
<div class="bottom-sheet__backdrop" id="sheet-backdrop"></div>
|
|
<div class="bottom-sheet__panel">
|
|
<div class="bottom-sheet__handle" aria-hidden="true"></div>
|
|
<ul id="sheet-list" class="bottom-sheet__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Session pill (persistent overlay button) ───────────────────── -->
|
|
<button id="session-pill" class="session-pill hidden" aria-label="Switch session">
|
|
<span id="session-pill-label" class="session-pill__label"></span>
|
|
<span id="session-pill-bell" class="session-pill__bell hidden" aria-hidden="true">🔔</span>
|
|
</button>
|
|
|
|
<!-- ── Toast notification ─────────────────────────────────────────── -->
|
|
<div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<!-- ── Scripts ────────────────────────────────────────────────────── -->
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
|
|
<script src="/app.js" defer></script>
|
|
<script src="/terminal.js" defer></script>
|
|
</body>
|
|
</html>
|