Skip to content

Commit 67bf59a

Browse files
niechenniechen
committed
Update index.html
1 parent 0ba33b6 commit 67bf59a

File tree

1 file changed

+227
-64
lines changed

1 file changed

+227
-64
lines changed

‎index.html‎

Lines changed: 227 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,98 +4,261 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>MCPM - Model Context Protocol Package Manager</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
710
<style>
11+
:root {
12+
--bg-color: #0f1117;
13+
--bg-accent: #1a1d25;
14+
--text-primary: #e2e8f0;
15+
--text-secondary: #a0aec0;
16+
--accent-color: #7c3aed;
17+
--accent-light: #8b5cf6;
18+
--accent-dark: #6d28d9;
19+
--success: #10b981;
20+
--code-bg: #1e1e2e;
21+
--card-border: #2d3748;
22+
}
23+
24+
* {
25+
margin: 0;
26+
padding: 0;
27+
box-sizing: border-box;
28+
}
29+
830
body {
9-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
31+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
1032
line-height: 1.6;
11-
color: #333;
12-
max-width: 800px;
33+
color: var(--text-primary);
34+
background-color: var(--bg-color);
35+
background-image:
36+
radial-gradient(circle at 25% 25%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
37+
radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
38+
margin: 0;
39+
padding: 0;
40+
min-height: 100vh;
41+
}
42+
43+
.container {
44+
max-width: 900px;
1345
margin: 0 auto;
14-
padding: 20px;
46+
padding: 2rem;
47+
}
48+
49+
header {
50+
text-align: center;
51+
padding: 3rem 0;
52+
border-bottom: 1px solid rgba(124, 58, 237, 0.2);
53+
margin-bottom: 3rem;
1554
}
55+
1656
h1 {
17-
font-size: 2.5em;
18-
margin-bottom: 10px;
57+
font-size: 3.5rem;
58+
font-weight: 700;
59+
margin-bottom: 0.5rem;
60+
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
61+
-webkit-background-clip: text;
62+
background-clip: text;
63+
color: transparent;
64+
letter-spacing: -0.05em;
1965
}
66+
2067
.tagline {
21-
font-size: 1.2em;
22-
color: #666;
23-
margin-bottom: 30px;
68+
font-size: 1.5rem;
69+
color: var(--text-secondary);
70+
margin-bottom: 1rem;
71+
font-weight: 300;
2472
}
73+
2574
.coming-soon {
26-
background-color: #f5f5f5;
27-
border-radius: 8px;
28-
padding: 20px;
29-
margin: 30px 0;
75+
background-color: var(--bg-accent);
76+
border: 1px solid var(--card-border);
77+
border-radius: 12px;
78+
padding: 2rem;
79+
margin: 2rem 0;
80+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
81+
}
82+
83+
h2 {
84+
font-size: 1.8rem;
85+
margin-bottom: 1.5rem;
86+
color: var(--text-primary);
87+
position: relative;
88+
display: inline-block;
3089
}
90+
91+
h2::after {
92+
content: '';
93+
position: absolute;
94+
bottom: -8px;
95+
left: 0;
96+
height: 3px;
97+
width: 60px;
98+
background: linear-gradient(90deg, var(--accent-color), transparent);
99+
border-radius: 3px;
100+
}
101+
31102
.features {
32-
margin: 40px 0;
103+
margin: 4rem 0;
104+
display: grid;
105+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
106+
gap: 2rem;
33107
}
108+
34109
.feature {
35-
margin-bottom: 20px;
110+
background-color: var(--bg-accent);
111+
border: 1px solid var(--card-border);
112+
border-radius: 12px;
113+
padding: 1.5rem;
114+
transition: transform 0.2s, box-shadow 0.2s;
115+
}
116+
117+
.feature:hover {
118+
transform: translateY(-5px);
119+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
36120
}
121+
122+
h3 {
123+
font-size: 1.3rem;
124+
margin-bottom: 1rem;
125+
display: flex;
126+
align-items: center;
127+
color: var(--accent-light);
128+
}
129+
130+
h3 span {
131+
margin-right: 0.5rem;
132+
font-size: 1.5rem;
133+
}
134+
37135
code {
38-
background-color: #f5f5f5;
39-
padding: 2px 5px;
40-
border-radius: 3px;
41-
font-family: monospace;
136+
background-color: var(--code-bg);
137+
padding: 0.75rem 1rem;
138+
border-radius: 8px;
139+
font-family: 'Fira Code', monospace;
140+
display: block;
141+
margin: 1rem 0;
142+
overflow-x: auto;
143+
border-left: 3px solid var(--accent-color);
42144
}
145+
146+
.clients {
147+
background-color: var(--bg-accent);
148+
border: 1px solid var(--card-border);
149+
border-radius: 12px;
150+
padding: 2rem;
151+
margin: 2rem 0;
152+
}
153+
154+
ul {
155+
list-style-type: none;
156+
margin: 1rem 0;
157+
}
158+
159+
li {
160+
padding: 0.5rem 0;
161+
display: flex;
162+
align-items: center;
163+
}
164+
165+
li::before {
166+
content: '▹';
167+
color: var(--accent-color);
168+
margin-right: 1rem;
169+
}
170+
43171
footer {
44-
margin-top: 50px;
45-
color: #666;
46-
font-size: 0.9em;
172+
margin-top: 5rem;
173+
color: var(--text-secondary);
174+
font-size: 0.9rem;
175+
text-align: center;
176+
padding: 2rem 0;
177+
border-top: 1px solid rgba(124, 58, 237, 0.1);
178+
}
179+
180+
a {
181+
color: var(--accent-light);
182+
text-decoration: none;
183+
transition: color 0.2s;
184+
}
185+
186+
a:hover {
187+
color: var(--accent-color);
188+
text-decoration: underline;
189+
}
190+
191+
.command-prompt {
192+
color: var(--success);
193+
font-weight: 600;
194+
}
195+
196+
@media (max-width: 768px) {
197+
.features {
198+
grid-template-columns: 1fr;
199+
}
200+
201+
h1 {
202+
font-size: 2.5rem;
203+
}
204+
205+
.tagline {
206+
font-size: 1.2rem;
207+
}
47208
}
48209
</style>
49210
</head>
50211
<body>
51-
<header>
52-
<h1>MCPM</h1>
53-
<div class="tagline">The Model Context Protocol Package Manager</div>
54-
</header>
212+
<div class="container">
213+
<header>
214+
<h1>MCPM</h1>
215+
<div class="tagline">The Model Context Protocol Package Manager</div>
216+
</header>
55217

56-
<div class="coming-soon">
57-
<h2>🚀 Coming Soon</h2>
58-
<p>We're building a Homebrew-like service for managing Model Context Protocol (MCP) servers and clients. Stay tuned!</p>
59-
</div>
218+
<div class="coming-soon">
219+
<h2>🚀 Coming Soon</h2>
220+
<p>We're building a Homebrew-like service for managing Model Context Protocol (MCP) servers and clients. Stay tuned for a seamless installation and management experience.</p>
221+
</div>
60222

61-
<div class="features">
62223
<h2>What to Expect</h2>
63-
64-
<div class="feature">
65-
<h3>🧩 Simple Client Installation</h3>
66-
<p>Install Model Context Protocol clients with a single command:</p>
67-
<code>mcpm install claude-desktop</code>
68-
</div>
69-
70-
<div class="feature">
71-
<h3>🔄 Easy Updates</h3>
72-
<p>Keep your clients up to date effortlessly:</p>
73-
<code>mcpm update</code>
74-
</div>
75-
76-
<div class="feature">
77-
<h3>🔍 Client Discovery</h3>
78-
<p>Find available Model Context Protocol clients:</p>
79-
<code>mcpm search</code>
224+
<div class="features">
225+
<div class="feature">
226+
<h3><span>🧩</span> Simple Client Installation</h3>
227+
<p>Install Model Context Protocol clients with a single command:</p>
228+
<code><span class="command-prompt">$</span> mcpm install claude-desktop</code>
229+
</div>
230+
231+
<div class="feature">
232+
<h3><span>🔄</span> Easy Updates</h3>
233+
<p>Keep your clients up to date effortlessly:</p>
234+
<code><span class="command-prompt">$</span> mcpm update</code>
235+
</div>
236+
237+
<div class="feature">
238+
<h3><span>🔍</span> Client Discovery</h3>
239+
<p>Find available Model Context Protocol clients:</p>
240+
<code><span class="command-prompt">$</span> mcpm search</code>
241+
</div>
242+
243+
<div class="feature">
244+
<h3><span>⚙️</span> Server Management</h3>
245+
<p>Streamlined configuration and management for Model Context Protocol servers:</p>
246+
<code><span class="command-prompt">$</span> mcpm server config</code>
247+
</div>
80248
</div>
81-
82-
<div class="feature">
83-
<h3>⚙️ Server Management</h3>
84-
<p>Streamlined configuration and management for Model Context Protocol servers.</p>
249+
250+
<div class="clients">
251+
<h2>Supported Clients</h2>
252+
<p>Our initial release will include support for:</p>
253+
<ul>
254+
<li><strong>Claude Desktop</strong> - Anthropic's Model Context Protocol client</li>
255+
<li><em>More Model Context Protocol clients coming soon...</em></li>
256+
</ul>
85257
</div>
86-
</div>
87258

88-
<div>
89-
<h2>Supported Clients</h2>
90-
<p>Our initial release will include support for:</p>
91-
<ul>
92-
<li><strong>Claude Desktop</strong> - Anthropic's Model Context Protocol client</li>
93-
<li><em>More clients coming soon...</em></li>
94-
</ul>
259+
<footer>
260+
<p>© 2025 MCPM Project | <a href="https://github.com/pathintegral-xyz/mcpm.sh">GitHub</a></p>
261+
</footer>
95262
</div>
96-
97-
<footer>
98-
<p>© 2025 MCPM Project | <a href="https://github.com/pathintegral-xyz/mcpm.sh">GitHub</a></p>
99-
</footer>
100263
</body>
101264
</html>

0 commit comments

Comments
 (0)