Skip to content

Commit 7855c47

Browse files
davila7claude
davila7
and
claude
committed
Reorganize modal structure with clear sections and simplified layout
Modal Structure: ✅ Basic Installation - Install component locally with brief description ✅ Global Agent (Claude Code SDK) - For agents only, with usage and features ✅ Run in E2B Sandbox (Cloud Execution) NEW - Cloud execution with simplified setup E2B Sandbox Improvements: - Added NEW badge to highlight the feature - Simplified API key setup section with .env example - Cleaner command structure without multiple methods - Improved API key links styling with hover effects - Better responsive design for mobile devices Visual Enhancements: - Clear section dividers and consistent spacing - Improved typography and color hierarchy - Better organized content flow matching the screenshot - Enhanced readability with proper descriptions This matches the exact structure requested based on the modal screenshot. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 1ec2031 commit 7855c47

File tree

2 files changed

+126
-64
lines changed

2 files changed

+126
-64
lines changed

‎docs/css/styles.css‎

Lines changed: 90 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2532,53 +2532,75 @@ body {
25322532
text-decoration: underline;
25332533
}
25342534

2535-
/* E2B Modal API Setup Styles */
2536-
.e2b-api-setup {
2537-
margin: 1.5rem 0;
2538-
background: var(--bg-terminal);
2539-
border: 1px solid var(--border-primary);
2540-
border-radius: 8px;
2541-
padding: 1.2rem;
2535+
/* Modal Section Styles */
2536+
.basic-installation-section,
2537+
.global-agent-section,
2538+
.e2b-sandbox-section {
2539+
margin-top: 1.5rem;
2540+
padding-top: 1.5rem;
2541+
border-top: 1px solid var(--border-secondary);
25422542
}
25432543

2544-
.api-setup-title {
2545-
color: var(--text-primary);
2544+
.basic-installation-section {
2545+
margin-top: 0;
2546+
padding-top: 0;
2547+
border-top: none;
2548+
}
2549+
2550+
.installation-description,
2551+
.global-agent-description,
2552+
.e2b-description {
2553+
color: var(--text-secondary);
25462554
font-size: 0.9rem;
2547-
font-weight: 600;
2548-
margin-bottom: 1rem;
2549-
display: flex;
2550-
align-items: center;
2551-
gap: 0.5rem;
2555+
margin: 0.5rem 0 1rem 0;
2556+
font-style: italic;
25522557
}
25532558

2554-
.api-methods {
2555-
display: flex;
2556-
flex-direction: column;
2557-
gap: 1.5rem;
2559+
/* E2B Sandbox NEW Badge */
2560+
.new-badge {
2561+
background: linear-gradient(135deg, #4682B4 0%, #6495ED 100%);
2562+
color: white;
2563+
font-size: 0.6rem;
2564+
font-weight: 600;
2565+
padding: 2px 6px;
2566+
border-radius: 3px;
2567+
margin-left: 0.5rem;
2568+
letter-spacing: 0.5px;
2569+
vertical-align: middle;
25582570
}
25592571

2560-
.api-method {
2561-
background: rgba(255, 255, 255, 0.02);
2562-
border: 1px solid var(--border-secondary);
2572+
/* E2B Modal API Setup Styles - Simplified */
2573+
.e2b-api-setup {
2574+
margin: 1rem 0;
2575+
background: var(--bg-terminal);
2576+
border: 1px solid var(--border-primary);
25632577
border-radius: 6px;
25642578
padding: 1rem;
25652579
}
25662580

2567-
.method-title {
2568-
color: var(--text-accent);
2581+
.e2b-api-setup h5 {
2582+
color: var(--text-primary);
25692583
font-size: 0.85rem;
25702584
font-weight: 600;
2571-
margin-bottom: 0.8rem;
2572-
padding-bottom: 0.5rem;
2573-
border-bottom: 1px solid var(--border-secondary);
2585+
margin: 0 0 0.8rem 0;
2586+
}
2587+
2588+
.env-setup-simple {
2589+
margin-bottom: 1rem;
2590+
}
2591+
2592+
.env-comment {
2593+
color: var(--text-secondary);
2594+
font-size: 0.8rem;
2595+
margin-bottom: 0.5rem;
2596+
font-style: italic;
25742597
}
25752598

25762599
.env-example {
25772600
background: var(--bg-primary);
25782601
border: 1px solid var(--border-primary);
25792602
border-radius: 4px;
25802603
padding: 0.8rem;
2581-
margin-bottom: 0.8rem;
25822604
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
25832605
}
25842606

@@ -2591,19 +2613,52 @@ body {
25912613
margin: 0;
25922614
}
25932615

2594-
/* Responsive adjustments for modal API setup */
2616+
/* API Key Links */
2617+
.api-key-links {
2618+
display: flex;
2619+
gap: 1rem;
2620+
margin-top: 0.5rem;
2621+
flex-wrap: wrap;
2622+
}
2623+
2624+
.api-key-link {
2625+
display: inline-flex;
2626+
align-items: center;
2627+
gap: 0.5rem;
2628+
padding: 0.6rem 1rem;
2629+
background: rgba(70, 130, 180, 0.1);
2630+
border: 1px solid rgba(70, 130, 180, 0.3);
2631+
border-radius: 6px;
2632+
color: var(--text-primary);
2633+
text-decoration: none;
2634+
font-size: 0.8rem;
2635+
font-weight: 500;
2636+
transition: all 0.2s ease;
2637+
}
2638+
2639+
.api-key-link:hover {
2640+
background: rgba(70, 130, 180, 0.2);
2641+
border-color: rgba(70, 130, 180, 0.5);
2642+
transform: translateY(-1px);
2643+
}
2644+
2645+
.api-key-link span {
2646+
font-size: 0.9rem;
2647+
}
2648+
2649+
/* Responsive adjustments */
25952650
@media (max-width: 768px) {
2596-
.api-method {
2597-
padding: 0.8rem;
2598-
}
2599-
26002651
.env-example code {
26012652
font-size: 0.75rem;
26022653
}
26032654

2604-
.api-method .command-line code {
2605-
font-size: 0.7rem;
2606-
word-break: break-all;
2655+
.api-key-links {
2656+
flex-direction: column;
2657+
gap: 0.5rem;
2658+
}
2659+
2660+
.api-key-link {
2661+
justify-content: center;
26072662
}
26082663
}
26092664

‎docs/js/modal-helpers.js‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -76,19 +76,27 @@ function createComponentModalHTML(component) {
7676
<div class="component-description">${component.type === 'mcp' ? (component.description || description) : description}</div>
7777
7878
<div class="installation-section">
79-
<h4>📦 Installation</h4>
80-
<div class="command-line">
81-
<code>${installCommand}</code>
82-
<button class="copy-btn" data-command="${installCommand.replace(/"/g, '&quot;')}" onclick="copyToClipboard(this.dataset.command)">Copy</button>
79+
<!-- Basic Installation -->
80+
<div class="basic-installation-section">
81+
<h4>📦 Basic Installation</h4>
82+
<p class="installation-description">Install this ${component.type} locally in your project. Works with your existing Claude Code setup.</p>
83+
<div class="command-line">
84+
<code>${installCommand}</code>
85+
<button class="copy-btn" data-command="${installCommand.replace(/"/g, '&quot;')}" onclick="copyToClipboard(this.dataset.command)">Copy</button>
86+
</div>
8387
</div>
88+
8489
${globalAgentCommand ? `
90+
<!-- Global Agent (Claude Code SDK) -->
8591
<div class="global-agent-section">
8692
<h4>🌍 Global Agent (Claude Code SDK)</h4>
87-
<p class="global-agent-description">Create a global AI agent accessible from anywhere with zero configuration</p>
93+
<p class="global-agent-description">Create a global AI agent accessible from anywhere with zero configuration. Perfect for automation and CI/CD workflows.</p>
94+
8895
<div class="command-line">
8996
<code>${globalAgentCommand}</code>
9097
<button class="copy-btn" data-command="${globalAgentCommand.replace(/"/g, '&quot;')}" onclick="copyToClipboard(this.dataset.command)">Copy</button>
9198
</div>
99+
92100
<div class="global-agent-usage">
93101
<div class="usage-example">
94102
<div class="usage-title">After installation, use from anywhere:</div>
@@ -105,33 +113,25 @@ function createComponentModalHTML(component) {
105113
</div>
106114
</div>` : ''}
107115
116+
<!-- Run in E2B Sandbox (Cloud Execution) -->
108117
<div class="e2b-sandbox-section">
109-
<h4>☁️ Run in E2B Sandbox (Cloud Execution)</h4>
110-
<p class="e2b-description">Execute Claude Code with this ${component.type} in an isolated cloud environment using E2B. Perfect for testing without affecting your local system.</p>
118+
<h4>☁️ Run in E2B Sandbox (Cloud Execution) <span class="new-badge">NEW</span></h4>
119+
<p class="e2b-description">Execute Claude Code with this ${component.type} in an isolated cloud environment using E2B. Perfect for testing complex projects without affecting your local system.</p>
111120
112121
<div class="e2b-api-setup">
113-
<div class="api-setup-title">🔑 Setup API Keys (Choose one method):</div>
114-
<div class="api-methods">
115-
<div class="api-method">
116-
<div class="method-title">Method 1: Environment Variables (.env file)</div>
117-
<div class="env-example">
118-
<code>E2B_API_KEY=your_e2b_key_here</code>
119-
<code>ANTHROPIC_API_KEY=your_anthropic_key_here</code>
120-
</div>
121-
<div class="command-line">
122-
<code>npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --prompt "your development task"</code>
123-
<button class="copy-btn" data-command="npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --prompt &quot;your development task&quot;" onclick="copyToClipboard(this.dataset.command)">Copy</button>
124-
</div>
125-
</div>
126-
127-
<div class="api-method">
128-
<div class="method-title">Method 2: Command Line Parameters</div>
129-
<div class="command-line">
130-
<code>npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --e2b-api-key your_e2b_key --anthropic-api-key your_anthropic_key --prompt "your development task"</code>
131-
<button class="copy-btn" data-command="npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --e2b-api-key your_e2b_key --anthropic-api-key your_anthropic_key --prompt &quot;your development task&quot;" onclick="copyToClipboard(this.dataset.command)">Copy</button>
132-
</div>
122+
<h5>🔑 Setup API Keys</h5>
123+
<div class="env-setup-simple">
124+
<div class="env-comment">Add to your .env file:</div>
125+
<div class="env-example">
126+
<code>E2B_API_KEY=your_e2b_key_here</code>
127+
<code>ANTHROPIC_API_KEY=your_anthropic_key_here</code>
133128
</div>
134129
</div>
130+
131+
<div class="command-line">
132+
<code>npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --prompt "your development task"</code>
133+
<button class="copy-btn" data-command="npx claude-code-templates@latest --sandbox e2b --${component.type}=${component.type === 'template' ? component.name : componentPath} --prompt &quot;your development task&quot;" onclick="copyToClipboard(this.dataset.command)">Copy</button>
134+
</div>
135135
</div>
136136
137137
<div class="e2b-features">
@@ -140,10 +140,17 @@ function createComponentModalHTML(component) {
140140
<div class="feature">📁 Automatic file download and organization</div>
141141
<div class="feature">🔍 Real-time execution monitoring</div>
142142
</div>
143+
143144
<div class="e2b-requirements">
144145
<div class="requirements-title">Get API Keys:</div>
145-
<div class="requirement">• E2B API key from <a href="https://e2b.dev/dashboard" target="_blank">e2b.dev/dashboard</a></div>
146-
<div class="requirement">• Anthropic API key from <a href="https://console.anthropic.com" target="_blank">console.anthropic.com</a></div>
146+
<div class="api-key-links">
147+
<a href="https://e2b.dev/dashboard" target="_blank" class="api-key-link">
148+
<span>🔑</span> E2B API Key
149+
</a>
150+
<a href="https://console.anthropic.com" target="_blank" class="api-key-link">
151+
<span>🔑</span> Anthropic API Key
152+
</a>
153+
</div>
147154
</div>
148155
</div>
149156
</div>

0 commit comments

Comments
 (0)