miguel
6f35eb77ae
- Add HomePage with open sessions grid, projects overview, and session composer - Add SettingsPage with tabs for General, SSH Keys, Tool Types, Tool Configs - Update navigation to Home, Projects, Settings - Redirect legacy routes (/sessions, /ssh-keys, /tool-types, /tool-configs) - Apply Inter font and warm editorial styling - Update tests for new dashboard and projects pages Quality gates: typecheck pass, lint pass, 15/15 tests pass Refs: openspec/changes/ui-redesign-home-settings
797 lines
30 KiB
HTML
797 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Headquarter - UI Preview</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #f4f1ea;
|
|
--panel: #fffef9;
|
|
--ink: #1d1d1b;
|
|
--muted: #5f5b55;
|
|
--brand: #275d4b;
|
|
--brand-strong: #154236;
|
|
--border: #d8d0c5;
|
|
--primary: #275d4b;
|
|
--primary-fg: #fffef9;
|
|
--color-primary: #275d4b;
|
|
--success: #2f8f62;
|
|
--success-light: rgba(47, 143, 98, 0.14);
|
|
--warning: #c08a1e;
|
|
--warning-light: rgba(192, 138, 30, 0.14);
|
|
--danger: #b94a3c;
|
|
--danger-light: rgba(185, 74, 60, 0.14);
|
|
--info: #4f7fb8;
|
|
--info-light: rgba(79, 127, 184, 0.14);
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
|
|
--font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
|
--font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
|
|
--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
|
|
--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* App Shell */
|
|
.shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shell-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.85rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
backdrop-filter: blur(7px);
|
|
}
|
|
|
|
.brand {
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.user-chip {
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
border-radius: 999px;
|
|
padding: 0.35rem 0.7rem;
|
|
font-size: 0.9rem;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ghost-button {
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
padding: 0.58rem 0.85rem;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.shell-body {
|
|
display: grid;
|
|
grid-template-columns: 230px 1fr;
|
|
min-height: calc(100vh - 57px);
|
|
}
|
|
|
|
.shell-nav {
|
|
border-right: 1px solid var(--border);
|
|
padding: 1rem 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 0.65rem 0.75rem;
|
|
border-radius: 10px;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: #ece7df;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.nav-item-active {
|
|
background: var(--brand);
|
|
color: #f7fff7;
|
|
}
|
|
|
|
.nav-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
background: var(--primary);
|
|
color: var(--primary-fg);
|
|
border-radius: 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.nav-section-title {
|
|
margin-top: 0.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: var(--font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.session-item {
|
|
font-size: 0.85rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.session-status {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--muted);
|
|
display: inline-block;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.session-status.running {
|
|
background: var(--success);
|
|
}
|
|
|
|
.shell-content {
|
|
padding: 1.25rem;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Common Components */
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stack-sm {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0;
|
|
font-size: var(--font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.primary-button {
|
|
background: var(--brand);
|
|
color: white;
|
|
border-radius: 10px;
|
|
border: 1px solid transparent;
|
|
padding: 0.58rem 0.85rem;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.primary-button:hover {
|
|
background: var(--brand-strong);
|
|
}
|
|
|
|
.secondary-button {
|
|
border-color: var(--border);
|
|
background: var(--panel);
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
padding: 0.58rem 0.85rem;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
/* Home Page */
|
|
.home-page {
|
|
max-width: 1240px;
|
|
}
|
|
|
|
.home-hero {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.home-hero-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.home-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.home-summary-card .card-label {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.home-summary-card .card-value {
|
|
margin: 0.45rem 0 0;
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.home-section h2,
|
|
.home-section h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.home-session-grid,
|
|
.home-project-grid {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
}
|
|
|
|
.session-card {
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.session-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.status-badge.running {
|
|
background: var(--success-light);
|
|
color: var(--success);
|
|
}
|
|
|
|
.status-badge.building {
|
|
background: var(--warning-light);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.status-badge.pending {
|
|
background: var(--info-light);
|
|
color: var(--info);
|
|
}
|
|
|
|
.recent-sessions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.recent-session-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.recent-session-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.create-session-form .form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.form-field input,
|
|
.form-field select,
|
|
.form-field textarea {
|
|
padding: 0.55rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
font: inherit;
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Settings Page */
|
|
.settings-page {
|
|
max-width: 1240px;
|
|
}
|
|
|
|
.settings-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.settings-tabs {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.settings-tab {
|
|
padding: 0.6rem 0.9rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
background: var(--panel);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings-tab.active {
|
|
background: var(--brand);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.settings-panel {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.settings-actions {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.success-text {
|
|
color: var(--success);
|
|
}
|
|
|
|
.error-text {
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* Preview Switcher */
|
|
.preview-switcher {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 0.5rem;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.preview-switcher button {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.preview-switcher button.active {
|
|
background: var(--brand);
|
|
color: white;
|
|
}
|
|
|
|
.page-preview {
|
|
display: none;
|
|
}
|
|
|
|
.page-preview.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 767px) {
|
|
.shell-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.shell-nav {
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.home-hero {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header class="shell-header">
|
|
<a href="#" class="brand">Headquarter</a>
|
|
<div class="header-actions">
|
|
<a href="#" class="user-chip">User</a>
|
|
<button class="ghost-button">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="shell-body">
|
|
<aside class="shell-nav" aria-label="Primary navigation">
|
|
<a href="#" class="nav-item nav-item-active">
|
|
<span>🏠</span> Home
|
|
<span class="nav-badge">3</span>
|
|
</a>
|
|
<a href="#" class="nav-item">
|
|
<span>📁</span> Projects
|
|
</a>
|
|
<a href="#" class="nav-item">
|
|
<span>⚙️</span> Settings
|
|
</a>
|
|
|
|
<div class="nav-divider"></div>
|
|
<div class="nav-section-title">Live sessions</div>
|
|
<a href="#" class="nav-item session-item">
|
|
<span class="session-status running"></span>
|
|
<span>Dev Environment</span>
|
|
</a>
|
|
<a href="#" class="nav-item session-item">
|
|
<span class="session-status running"></span>
|
|
<span>Jupyter Lab</span>
|
|
</a>
|
|
<a href="#" class="nav-item session-item">
|
|
<span class="session-status"></span>
|
|
<span>Code Server</span>
|
|
</a>
|
|
</aside>
|
|
|
|
<main class="shell-content">
|
|
<!-- HOME PAGE PREVIEW -->
|
|
<div id="home-preview" class="page-preview active">
|
|
<section class="stack home-page">
|
|
<header class="home-hero card">
|
|
<div class="stack-sm">
|
|
<p class="eyebrow">Workspace overview</p>
|
|
<h1>Home</h1>
|
|
<p class="muted">Open sessions, available projects, and the fastest path back into work.</p>
|
|
</div>
|
|
<div class="home-hero-actions">
|
|
<button class="primary-button">New Project</button>
|
|
<button class="secondary-button">Settings</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="home-summary-grid">
|
|
<article class="card home-summary-card">
|
|
<p class="card-label">Open sessions</p>
|
|
<p class="card-value">3</p>
|
|
</article>
|
|
<article class="card home-summary-card">
|
|
<p class="card-label">Projects</p>
|
|
<p class="card-value">5</p>
|
|
</article>
|
|
<article class="card home-summary-card">
|
|
<p class="card-label">Repositories</p>
|
|
<p class="card-value">12</p>
|
|
</article>
|
|
</div>
|
|
|
|
<section class="card stack home-section">
|
|
<div class="page-header">
|
|
<div>
|
|
<p class="eyebrow">Open sessions</p>
|
|
<h2>3</h2>
|
|
</div>
|
|
</div>
|
|
<div class="home-session-grid">
|
|
<article class="card session-card">
|
|
<div class="stack-sm">
|
|
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
|
<h3>Dev Environment</h3>
|
|
<span class="status-badge running">running</span>
|
|
</div>
|
|
<p class="muted">Acme Corp · main</p>
|
|
<p class="muted">VS Code Server</p>
|
|
</div>
|
|
<div class="session-actions">
|
|
<button class="secondary-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Open</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Tunnel</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Stop</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; color: var(--danger);">Delete</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="card session-card">
|
|
<div class="stack-sm">
|
|
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
|
<h3>Jupyter Lab</h3>
|
|
<span class="status-badge running">running</span>
|
|
</div>
|
|
<p class="muted">Data Science · experiments</p>
|
|
<p class="muted">Jupyter Notebook</p>
|
|
</div>
|
|
<div class="session-actions">
|
|
<button class="secondary-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Open</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Tunnel</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Stop</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; color: var(--danger);">Delete</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="card session-card">
|
|
<div class="stack-sm">
|
|
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
|
<h3>Database Console</h3>
|
|
<span class="status-badge building">building</span>
|
|
</div>
|
|
<p class="muted">Backend API · staging</p>
|
|
<p class="muted">PostgreSQL Client</p>
|
|
</div>
|
|
<div class="session-actions">
|
|
<button class="secondary-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Open</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Tunnel</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Stop</button>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; color: var(--danger);">Delete</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card stack home-section">
|
|
<div class="page-header">
|
|
<div>
|
|
<p class="eyebrow">Available projects</p>
|
|
<h2>5</h2>
|
|
</div>
|
|
<button class="secondary-button">View all</button>
|
|
</div>
|
|
<div class="home-project-grid">
|
|
<article class="card" style="box-shadow: 0 1px 0 rgba(0,0,0,0.02);">
|
|
<div class="stack-sm">
|
|
<h3>Acme Corp</h3>
|
|
<p class="muted">Main product development</p>
|
|
</div>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; margin-top: 0.5rem;">Open Workspace</button>
|
|
</article>
|
|
|
|
<article class="card" style="box-shadow: 0 1px 0 rgba(0,0,0,0.02);">
|
|
<div class="stack-sm">
|
|
<h3>Data Science</h3>
|
|
<p class="muted">ML experiments and notebooks</p>
|
|
</div>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; margin-top: 0.5rem;">Open Workspace</button>
|
|
</article>
|
|
|
|
<article class="card" style="box-shadow: 0 1px 0 rgba(0,0,0,0.02);">
|
|
<div class="stack-sm">
|
|
<h3>Backend API</h3>
|
|
<p class="muted">REST API services</p>
|
|
</div>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem; margin-top: 0.5rem;">Open Workspace</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card stack home-section">
|
|
<div class="page-header">
|
|
<div>
|
|
<p class="eyebrow">Quick create</p>
|
|
<h2>Start a session</h2>
|
|
</div>
|
|
</div>
|
|
<form class="stack create-session-form">
|
|
<div class="form-row">
|
|
<label class="form-field">
|
|
Project
|
|
<select>
|
|
<option>Select project...</option>
|
|
<option>Acme Corp</option>
|
|
<option>Data Science</option>
|
|
</select>
|
|
</label>
|
|
<label class="form-field">
|
|
Repository
|
|
<select disabled>
|
|
<option>Select repository...</option>
|
|
</select>
|
|
</label>
|
|
<label class="form-field">
|
|
Tool type
|
|
<select>
|
|
<option>Select tool...</option>
|
|
<option>VS Code Server</option>
|
|
<option>Jupyter Lab</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<label class="form-field">
|
|
Display name
|
|
<input type="text" placeholder="My Development Environment">
|
|
</label>
|
|
<div class="form-actions">
|
|
<button class="primary-button" type="submit">Create Session</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card stack home-section">
|
|
<div class="page-header">
|
|
<div>
|
|
<p class="eyebrow">Recent sessions</p>
|
|
<h2>2</h2>
|
|
</div>
|
|
</div>
|
|
<div class="recent-sessions-list">
|
|
<article class="recent-session-item">
|
|
<div style="display: flex; flex-direction: column; gap: 0.25rem;">
|
|
<span class="recent-session-name">Old Dev Box</span>
|
|
<span class="muted">Acme Corp · VS Code Server</span>
|
|
</div>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Open</button>
|
|
</article>
|
|
<article class="recent-session-item">
|
|
<div style="display: flex; flex-direction: column; gap: 0.25rem;">
|
|
<span class="recent-session-name">ML Training</span>
|
|
<span class="muted">Data Science · Jupyter Lab</span>
|
|
</div>
|
|
<button class="ghost-button" style="font-size: 0.85rem; padding: 0.42rem 0.7rem;">Open</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- SETTINGS PAGE PREVIEW -->
|
|
<div id="settings-preview" class="page-preview">
|
|
<section class="stack settings-page">
|
|
<header class="settings-header card stack-sm">
|
|
<div>
|
|
<p class="eyebrow">Configuration</p>
|
|
<h1>Settings</h1>
|
|
</div>
|
|
<p class="muted">General preferences, SSH keys, tool types, and tool configs live here.</p>
|
|
</header>
|
|
|
|
<nav class="settings-tabs" aria-label="Settings sections">
|
|
<a href="#" class="settings-tab active">General</a>
|
|
<a href="#" class="settings-tab">SSH Keys</a>
|
|
<a href="#" class="settings-tab">Tool Types</a>
|
|
<a href="#" class="settings-tab">Tool Configs</a>
|
|
</nav>
|
|
|
|
<div class="settings-panel card">
|
|
<div class="stack">
|
|
<h2>General</h2>
|
|
<label class="form-field">
|
|
Theme
|
|
<select>
|
|
<option>System</option>
|
|
<option>Light</option>
|
|
<option>Dark</option>
|
|
</select>
|
|
</label>
|
|
<label class="form-field">
|
|
Git user name
|
|
<input type="text" placeholder="Your git commit name" value="John Doe">
|
|
</label>
|
|
<label class="form-field">
|
|
Git user email
|
|
<input type="email" placeholder="your.email@example.com" value="john@example.com">
|
|
</label>
|
|
<label class="form-field">
|
|
Default editor
|
|
<input type="text" placeholder="e.g., vscode, vim, cursor" value="vscode">
|
|
</label>
|
|
<div class="settings-actions">
|
|
<button class="primary-button">Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-switcher">
|
|
<button class="active" onclick="showPage('home')">Home</button>
|
|
<button onclick="showPage('settings')">Settings</button>
|
|
</div>
|
|
|
|
<script>
|
|
function showPage(page) {
|
|
document.querySelectorAll('.page-preview').forEach(p => p.classList.remove('active'));
|
|
document.querySelectorAll('.preview-switcher button').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(page + '-preview').classList.add('active');
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|