diff --git a/webapp/templates/dashboard.html b/webapp/templates/dashboard.html index e8d2cc2..7c52d2d 100644 --- a/webapp/templates/dashboard.html +++ b/webapp/templates/dashboard.html @@ -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; } } @@ -2116,150 +2236,110 @@
-
-

Get Started

-

- Set up your data analyst workspace in 5 steps. -

+ {% if not username_available %} +
+ ! +
+

Username Not Available

+

{{ username_error }}

+

Your email generates username {{ username }}, which cannot be used. Contact an administrator.

+
+
+ {% endif %} - {% if not username_available %} -
- ! -
-

Username Not Available

-

{{ username_error }}

-

Your email generates username {{ username }}, which cannot be used.

-

Contact an administrator to create your account manually.

+
+
+

Get Started

+ Set up your workspace in 5 steps +
+ + {# ── Steps 1-3: Terminal commands ── #} +
+
+ 1 + Create folder + 2 + Generate SSH key + 3 + Copy public key + Run these in your terminal +
+
+
+ + + +
+
+
+ $ + mkdir -p data-analyst && cd data-analyst + +
+
+ $ + ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N '' + +
+
+ $ + cat ~/.ssh/data_analyst_server.pub + +
+
+ # Copy the output above and paste it below +
+
+
+
+ + {# ── Step 4: Register ── #} + {% if username_available %} +
+
+ 4 + Create your account + + Username: {{ username }} + +
+
+
+
+
+ + +
+ +
+
{% endif %} -
- {# ── Step 1: Create folder ── #} -
- 1 -
- Create your project folder -
-
-

Open your terminal:

-
- mkdir -p data-analyst && cd data-analyst - -
-
+ {# ── Step 5: Claude Code ── #} +
+
+ 5 + Start Claude Code
- - {# ── Step 2: SSH key ── #} -
- 2 -
- Generate SSH key -
-
-
- ssh-keygen -t ed25519 -f ~/.ssh/data_analyst_server -N '' - -
-
-
- - {# ── Step 3: Copy public key ── #} -
- 3 -
- Copy your public key -
-
-
- cat ~/.ssh/data_analyst_server.pub - -
-
-
- - {# ── Step 4: Create account (inline registration) ── #} -
- 4 -
- Create your account -
-
- {% if username_available %} -
-
- Your username: - {{ username }} -
-
-
- - -
-
-
- Username: - {{ username }} -
- -
-
-
- {% endif %} -
-
- - {# ── Step 5: Claude Code ── #} -
- 5 -
- Start Claude Code -
-
-

Launch Claude Code in your project folder and paste the setup instructions:

-
- claude - -
- -
- Claude Code will: configure SSH, download data & docs via rsync, - set up Python + DuckDB, and create your project context. -
-
+
+ claude + + Paste into Claude Code — it will configure SSH, sync data, and set up DuckDB
-
+
{{ config.INSTANCE_NAME }} - need help? Contact your platform team.
@@ -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 }};