Redesign onboarding: compact single-screen layout with terminal block
- Merge steps 1-3 into a single dark terminal block with copy buttons - Inline registration form with single-row layout for step 4 - Compact step 5 with Claude Code command and copy button on one line - Full-width layout (960px) instead of narrow 640px column - Everything fits on one screen without scrolling
This commit is contained in:
Petr
parent
9c4208bb89
commit
45454ab86a
1 changed files with 330 additions and 239 deletions
|
|
@ -1267,124 +1267,255 @@
|
|||
|
||||
/* ── New User Layout ── */
|
||||
.new-user-grid {
|
||||
max-width: 640px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.setup-card {
|
||||
padding: 36px 40px;
|
||||
padding: 32px 36px;
|
||||
}
|
||||
|
||||
.setup-card h3 {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 6px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setup-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.setup-steps {
|
||||
.setup-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
padding-left: 44px;
|
||||
padding-bottom: 24px;
|
||||
position: relative;
|
||||
border-left: 2px solid var(--border);
|
||||
margin-left: 13px;
|
||||
.setup-header .setup-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.step-item:last-child {
|
||||
border-left-color: transparent;
|
||||
padding-bottom: 0;
|
||||
/* ── Onboarding sections ── */
|
||||
.onboard-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.onboard-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.onboard-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.onboard-label .step-num {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.onboard-label strong {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-item.step-done .step-number {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.step-header strong {
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step-body {
|
||||
margin-top: 8px;
|
||||
.onboard-label .step-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ── Terminal block (steps 1-3 combined) ── */
|
||||
.terminal-block {
|
||||
background: #1e1e2e;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.terminal-bar {
|
||||
background: #313244;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.terminal-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.terminal-dot.r { background: #f38ba8; }
|
||||
.terminal-dot.y { background: #f9e2af; }
|
||||
.terminal-dot.g { background: #a6e3a1; }
|
||||
|
||||
.terminal-lines {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
color: #cdd6f4;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.terminal-line .prompt {
|
||||
color: #a6e3a1;
|
||||
margin-right: 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.terminal-line .cmd {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.terminal-line .comment {
|
||||
color: #6c7086;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.terminal-line .btn-copy-term {
|
||||
padding: 2px 6px;
|
||||
background: transparent;
|
||||
border: 1px solid #45475a;
|
||||
color: #6c7086;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
margin-left: 8px;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.terminal-line .btn-copy-term:hover {
|
||||
border-color: #89b4fa;
|
||||
color: #89b4fa;
|
||||
}
|
||||
|
||||
.terminal-line .btn-copy-term.copied {
|
||||
border-color: #a6e3a1;
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
/* ── Registration inline (step 4) ── */
|
||||
.reg-inline {
|
||||
background: var(--background);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.reg-inline .reg-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.reg-inline .reg-field {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.reg-inline .reg-field label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.reg-inline .reg-field textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.reg-inline .reg-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 115, 209, 0.1);
|
||||
}
|
||||
|
||||
.reg-inline .reg-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.code-block-wrapper {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
.reg-inline .username-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background: rgba(0, 115, 209, 0.08);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
display: block;
|
||||
.reg-inline .btn-register {
|
||||
padding: 8px 20px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reg-inline .btn-register:hover {
|
||||
background: #005BA3;
|
||||
}
|
||||
|
||||
/* ── Claude Code section (step 5) ── */
|
||||
.claude-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.claude-section .code-inline {
|
||||
background: var(--background);
|
||||
padding: 12px 16px;
|
||||
padding-right: 40px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.btn-copy-code {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-copy-code:hover {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.btn-copy-code.copied {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.btn-copy-v2 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
|
|
@ -1400,44 +1531,18 @@
|
|||
background: var(--success);
|
||||
}
|
||||
|
||||
.claude-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
margin-top: 24px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Inline registration in step 4 ── */
|
||||
.step-registration {
|
||||
background: var(--background);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.step-registration .info-box-v2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-registration .form-group-v2 textarea {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.step-registration .form-row-v2 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.step-success-msg {
|
||||
margin-top: 12px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(16, 183, 127, 0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--success);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Registration Card ── */
|
||||
.registration-card h3 {
|
||||
font-size: 18px;
|
||||
|
|
@ -1634,8 +1739,23 @@
|
|||
padding: 28px 24px;
|
||||
}
|
||||
|
||||
.new-user-grid {
|
||||
max-width: 100%;
|
||||
.onboard-label {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.onboard-label .step-hint {
|
||||
width: 100%;
|
||||
margin-left: 30px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.claude-section {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.claude-hint {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2116,150 +2236,110 @@
|
|||
|
||||
<main class="main">
|
||||
<div class="new-user-grid">
|
||||
<div class="card setup-card">
|
||||
<h3>Get Started</h3>
|
||||
<p class="setup-description">
|
||||
Set up your data analyst workspace in 5 steps.
|
||||
</p>
|
||||
{% if not username_available %}
|
||||
<div class="alert-v2 alert-error-v2" style="margin-bottom: 16px;">
|
||||
<span class="alert-icon">!</span>
|
||||
<div>
|
||||
<h4>Username Not Available</h4>
|
||||
<p>{{ username_error }}</p>
|
||||
<p>Your email generates username <code>{{ username }}</code>, which cannot be used. Contact an administrator.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not username_available %}
|
||||
<div class="alert-v2 alert-error-v2" style="margin-bottom: 24px;">
|
||||
<span class="alert-icon">!</span>
|
||||
<div>
|
||||
<h4>Username Not Available</h4>
|
||||
<p>{{ username_error }}</p>
|
||||
<p>Your email generates username <code>{{ username }}</code>, which cannot be used.</p>
|
||||
<p>Contact an administrator to create your account manually.</p>
|
||||
<div class="card setup-card">
|
||||
<div class="setup-header">
|
||||
<h3>Get Started</h3>
|
||||
<span class="setup-subtitle">Set up your workspace in 5 steps</span>
|
||||
</div>
|
||||
|
||||
{# ── Steps 1-3: Terminal commands ── #}
|
||||
<div class="onboard-section">
|
||||
<div class="onboard-label">
|
||||
<span class="step-num">1</span>
|
||||
<strong>Create folder</strong>
|
||||
<span class="step-num" style="margin-left: 12px;">2</span>
|
||||
<strong>Generate SSH key</strong>
|
||||
<span class="step-num" style="margin-left: 12px;">3</span>
|
||||
<strong>Copy public key</strong>
|
||||
<span class="step-hint">Run these in your terminal</span>
|
||||
</div>
|
||||
<div class="terminal-block">
|
||||
<div class="terminal-bar">
|
||||
<span class="terminal-dot r"></span>
|
||||
<span class="terminal-dot y"></span>
|
||||
<span class="terminal-dot g"></span>
|
||||
</div>
|
||||
<div class="terminal-lines">
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">mkdir -p data-analyst && cd data-analyst</span>
|
||||
<button onclick="copyTermLine(this, 'mkdir -p data-analyst && cd data-analyst')" class="btn-copy-term">copy</button>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N ''</span>
|
||||
<button onclick="copyTermLine(this, "ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N ''")" class="btn-copy-term">copy</button>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="prompt">$</span>
|
||||
<span class="cmd">cat ~/.ssh/data_analyst_server.pub</span>
|
||||
<button onclick="copyTermLine(this, 'cat ~/.ssh/data_analyst_server.pub')" class="btn-copy-term">copy</button>
|
||||
</div>
|
||||
<div class="terminal-line">
|
||||
<span class="comment"># Copy the output above and paste it below</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 4: Register ── #}
|
||||
{% if username_available %}
|
||||
<div class="onboard-section">
|
||||
<div class="onboard-label">
|
||||
<span class="step-num">4</span>
|
||||
<strong>Create your account</strong>
|
||||
<span class="step-hint">
|
||||
Username: <span class="username-tag" style="font-family: var(--font-mono); font-weight: 600; color: var(--primary);">{{ username }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="reg-inline">
|
||||
<form action="{{ url_for('register') }}" method="post">
|
||||
<div class="reg-row">
|
||||
<div class="reg-field">
|
||||
<label for="ssh_key">Paste your SSH public key</label>
|
||||
<textarea name="ssh_key" id="ssh_key" rows="1"
|
||||
placeholder="ssh-ed25519 AAAA... or ssh-rsa AAAA..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-register">Create Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="setup-steps">
|
||||
{# ── Step 1: Create folder ── #}
|
||||
<div class="step-item">
|
||||
<span class="step-number">1</span>
|
||||
<div class="step-header">
|
||||
<strong>Create your project folder</strong>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p>Open your terminal:</p>
|
||||
<div class="code-block-wrapper">
|
||||
<code class="code-block">mkdir -p data-analyst && cd data-analyst</code>
|
||||
<button onclick="copyCode(this, 'mkdir -p data-analyst && cd data-analyst')" class="btn-copy-code">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{# ── Step 5: Claude Code ── #}
|
||||
<div class="onboard-section">
|
||||
<div class="onboard-label">
|
||||
<span class="step-num">5</span>
|
||||
<strong>Start Claude Code</strong>
|
||||
</div>
|
||||
|
||||
{# ── Step 2: SSH key ── #}
|
||||
<div class="step-item">
|
||||
<span class="step-number">2</span>
|
||||
<div class="step-header">
|
||||
<strong>Generate SSH key</strong>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="code-block-wrapper">
|
||||
<code class="code-block">ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N ''</code>
|
||||
<button onclick="copyCode(this, "ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N ''")" class="btn-copy-code">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 3: Copy public key ── #}
|
||||
<div class="step-item">
|
||||
<span class="step-number">3</span>
|
||||
<div class="step-header">
|
||||
<strong>Copy your public key</strong>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="code-block-wrapper">
|
||||
<code class="code-block">cat ~/.ssh/data_analyst_server.pub</code>
|
||||
<button onclick="copyCode(this, 'cat ~/.ssh/data_analyst_server.pub')" class="btn-copy-code">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 4: Create account (inline registration) ── #}
|
||||
<div class="step-item">
|
||||
<span class="step-number">4</span>
|
||||
<div class="step-header">
|
||||
<strong>Create your account</strong>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
{% if username_available %}
|
||||
<div class="step-registration">
|
||||
<div class="info-box-v2">
|
||||
<strong>Your username:</strong>
|
||||
<span class="username-preview">{{ username }}</span>
|
||||
</div>
|
||||
<form action="{{ url_for('register') }}" method="post" class="form-v2">
|
||||
<div class="form-group-v2">
|
||||
<label for="ssh_key">Paste your SSH public key here</label>
|
||||
<textarea name="ssh_key" id="ssh_key" rows="2"
|
||||
placeholder="ssh-ed25519 AAAA... or ssh-rsa AAAA..." required></textarea>
|
||||
</div>
|
||||
<div class="form-row-v2">
|
||||
<div class="form-info-v2">
|
||||
<span>Username:</span>
|
||||
<code>{{ username }}</code>
|
||||
</div>
|
||||
<button type="submit" class="btn-v2 btn-primary-v2">Create Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Step 5: Claude Code ── #}
|
||||
<div class="step-item">
|
||||
<span class="step-number">5</span>
|
||||
<div class="step-header">
|
||||
<strong>Start Claude Code</strong>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<p>Launch Claude Code in your project folder and paste the setup instructions:</p>
|
||||
<div class="code-block-wrapper" style="margin-bottom: 12px;">
|
||||
<code class="code-block">claude</code>
|
||||
<button onclick="copyCode(this, 'claude')" class="btn-copy-code">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button onclick="copyBootstrapInstructions()" class="btn-copy-v2" id="bootstrapCopyBtn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
Copy Setup Instructions
|
||||
</button>
|
||||
<div class="helper-text" style="margin-top: 16px;">
|
||||
<strong>Claude Code will:</strong> configure SSH, download data & docs via rsync,
|
||||
set up Python + DuckDB, and create your project context.
|
||||
</div>
|
||||
</div>
|
||||
<div class="claude-section">
|
||||
<span class="code-inline">claude</span>
|
||||
<button onclick="copyBootstrapInstructions()" class="btn-copy-v2" id="bootstrapCopyBtn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
Copy Setup Instructions
|
||||
</button>
|
||||
<span class="claude-hint">Paste into Claude Code — it will configure SSH, sync data, and set up DuckDB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="support-banner" style="margin-top: 24px;">
|
||||
<div class="support-banner" style="margin-top: 16px;">
|
||||
{{ config.INSTANCE_NAME }} - need help? Contact your platform team.
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -2300,6 +2380,17 @@
|
|||
});
|
||||
}
|
||||
|
||||
function copyTermLine(button, text) {
|
||||
copyToClipboard(text).then(function() {
|
||||
button.textContent = 'done';
|
||||
button.classList.add('copied');
|
||||
setTimeout(function() {
|
||||
button.textContent = 'copy';
|
||||
button.classList.remove('copied');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function copyBootstrapInstructions() {
|
||||
var username = {{ username | tojson }};
|
||||
var serverHost = {{ server_host | tojson }};
|
||||
|
|
|
|||
Loading…
Reference in a new issue