Umbrella MCP Server
success-page.ts•6.03 kB
export function generateSuccessPage(userEmail: string): string {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Authentication Successful - Umbrella MCP</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
width: 100%;
max-width: 450px;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.checkmark {
width: 40px;
height: 40px;
stroke: white;
stroke-width: 3;
fill: none;
animation: checkmark 0.5s ease-out 0.3s both;
}
@keyframes checkmark {
from {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
to {
stroke-dasharray: 50;
stroke-dashoffset: 0;
}
}
h1 {
text-align: center;
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
.user-email {
text-align: center;
color: #667eea;
font-weight: 600;
margin-bottom: 20px;
word-break: break-all;
}
.message {
text-align: center;
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.instructions {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: padding-box;
border: 2px solid transparent;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
position: relative;
}
.instructions::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
z-index: -1;
}
.instructions-inner {
background: rgba(255, 255, 255, 0.98);
border-radius: 6px;
padding: 15px;
}
.instruction-title {
color: #667eea;
font-weight: 600;
margin-bottom: 10px;
font-size: 16px;
}
.instruction-list {
color: #555;
padding-left: 20px;
line-height: 1.8;
}
.instruction-list li {
margin-bottom: 8px;
}
.note {
background: #f8f9fa;
border-left: 3px solid #667eea;
padding: 12px;
margin-top: 20px;
border-radius: 4px;
}
.note-title {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.note-text {
color: #666;
font-size: 14px;
line-height: 1.5;
}
.close-button {
display: block;
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 20px;
transition: transform 0.2s;
}
.close-button:hover {
transform: translateY(-1px);
}
.branding {
text-align: center;
margin-top: 20px;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="success-icon">
<svg class="checkmark" viewBox="0 0 24 24">
<path d="M5 13l4 4L19 7" />
</svg>
</div>
<h1>Authentication Successful!</h1>
<div class="user-email">${userEmail}</div>
<div class="message" id="redirect-message">
Redirecting now...
</div>
<div class="instructions" id="instructions-section" style="display: none;">
<div class="instructions-inner">
<div class="instruction-title">✨ You're all set!</div>
<ul class="instruction-list">
<li>Return to Claude Desktop</li>
<li>Your authentication is complete!</li>
</ul>
</div>
</div>
<div class="note" id="tips-section" style="display: none;">
<div class="note-title">💡 Quick Tips:</div>
<div class="note-text">
Try asking: "Show me my AWS costs for last month" or "What are my top spending services?"
</div>
</div>
<button class="close-button" id="close-button" onclick="window.close()" style="display: none;">
Minimize This Window
</button>
<div class="branding">
Umbrella Cost MCP Server v2.0
</div>
</div>
<script>
// Show the close instructions after 1 second
setTimeout(() => {
document.getElementById('redirect-message').innerText = 'You can minimize this window and start chatting with Umbrella!';
document.getElementById('instructions-section').style.display = 'block';
document.getElementById('tips-section').style.display = 'block';
document.getElementById('close-button').style.display = 'block';
}, 1000);
// Auto-close after 10 seconds
setTimeout(() => {
window.close();
}, 10000);
</script>
</body>
</html>`;
}
Latest Blog Posts
- Federated Learning with MCP: Building Privacy-Preserving Agents Across Distributed EdgesBy Om-Shree-0709 on .SecuremcpLearning
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/daviddraiumbrella/invoice-monitoring'
If you have feedback or need assistance with the MCP directory API, please join our Discord server