Skip to content

Commit 1ea6f47

Browse files
JoJoJoJoJoJoJoJoJoJoJoJoJoJo
committed
feat: convert installation methods to tab
1 parent 6ecdbc2 commit 1ea6f47

File tree

1 file changed

+91
-9
lines changed

1 file changed

+91
-9
lines changed

‎pages/index.html‎

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,48 @@
219219
font-size: 1.2rem;
220220
}
221221
}
222+
223+
.install-tabs {
224+
margin: 2rem 0;
225+
}
226+
227+
.install-tabs .tabs {
228+
display: flex;
229+
border-bottom: 2px solid var(--accent-color);
230+
margin-bottom: 0;
231+
}
232+
233+
.install-tabs .tab-button {
234+
padding: 0.7rem 1.5rem;
235+
border: none;
236+
background-color: var(--bg-accent);
237+
color: var(--text-primary);
238+
cursor: pointer;
239+
transition: all 0.2s ease;
240+
margin-right: 4px;
241+
font-weight: 500;
242+
}
243+
244+
.install-tabs .tab-button:hover {
245+
background-color: rgba(92, 217, 81, 0.2);
246+
}
247+
248+
.install-tabs .tab-button.active {
249+
background-color: var(--accent-color);
250+
color: var(--text-secondary);
251+
}
252+
253+
.install-tabs .tab-content {
254+
display: none;
255+
padding: 1.5rem;
256+
border: 1px solid var(--card-border);
257+
border-top: none;
258+
background-color: var(--bg-accent);
259+
}
260+
261+
.install-tabs .tab-content.active {
262+
display: block;
263+
}
222264
</style>
223265
</head>
224266
<body>
@@ -258,15 +300,36 @@ <h1>MCP Manager</h1>
258300

259301
<div class="coming-soon">
260302
<h2>Quick Installation</h2>
261-
<p>Install MCPM with a single command:</p>
262-
<div class="code-block">
263-
<code><span class="command-prompt">$</span> curl -sSL https://mcpm.sh/install | bash</code>
264-
<button class="copy-button" data-command="curl -sSL https://mcpm.sh/install | bash"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
265-
</div>
266-
<p>or install from pypi:</p>
267-
<div class="code-block">
268-
<code><span class="command-prompt">$</span> pip install mcpm</code>
269-
<button class="copy-button" data-command="pip install mcpm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
303+
<div class="install-tabs">
304+
<div class="tabs">
305+
<button class="tab-button active" data-tab="pipx">pipx</button>
306+
<button class="tab-button" data-tab="pip">pip</button>
307+
<button class="tab-button" data-tab="script">Script</button>
308+
</div>
309+
310+
<div class="tab-content active" id="pipx-tab">
311+
<p>Install with pipx:</p>
312+
<div class="code-block">
313+
<code><span class="command-prompt">$</span> pipx install mcpm</code>
314+
<button class="copy-button" data-command="pipx install mcpm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
315+
</div>
316+
</div>
317+
318+
<div class="tab-content" id="pip-tab">
319+
<p>Install with pip:</p>
320+
<div class="code-block">
321+
<code><span class="command-prompt">$</span> pip install mcpm</code>
322+
<button class="copy-button" data-command="pip install mcpm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
323+
</div>
324+
</div>
325+
326+
<div class="tab-content" id="script-tab">
327+
<p>Install with a single command:</p>
328+
<div class="code-block">
329+
<code><span class="command-prompt">$</span> curl -sSL https://mcpm.sh/install | bash</code>
330+
<button class="copy-button" data-command="curl -sSL https://mcpm.sh/install | bash"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
331+
</div>
332+
</div>
270333
</div>
271334
<p>Model Context Protocol Manager (MCPM) is a Homebrew-like service for managing Model Context Protocol (MCP) servers across clients.</p>
272335
</div>
@@ -489,6 +552,25 @@ <h2>Supported Clients</h2>
489552
// Fix for SVG animation in some browsers
490553
setInterval(updateCursor, 100);
491554
}
555+
556+
// Tabbed installation section
557+
const tabButtons = document.querySelectorAll('.tab-button');
558+
const tabContents = document.querySelectorAll('.tab-content');
559+
560+
tabButtons.forEach(button => {
561+
button.addEventListener('click', function() {
562+
const tabId = this.getAttribute('data-tab');
563+
const tabContent = document.getElementById(`${tabId}-tab`);
564+
565+
// Remove active class from all buttons and contents
566+
tabButtons.forEach(button => button.classList.remove('active'));
567+
tabContents.forEach(content => content.classList.remove('active'));
568+
569+
// Add active class to the selected button and content
570+
this.classList.add('active');
571+
tabContent.classList.add('active');
572+
});
573+
});
492574
});
493575
</script>
494576
</body>

0 commit comments

Comments
 (0)