Evolution API WhatsApp MCP Server
by luiso2
- mcp-evolution-api
- public
login.html•8.94 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Evolution API MCP Server</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--cream: #eaf8bfff;
--cerulean: #006992ff;
--indigo-dye: #27476eff;
--oxford-blue: #001d4aff;
}
body {
background: linear-gradient(135deg, var(--cream) 0%, var(--cerulean) 50%, var(--indigo-dye) 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.login-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 29, 74, 0.2);
padding: 3rem;
width: 100%;
max-width: 450px;
border: 1px solid rgba(0, 105, 146, 0.2);
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header h1 {
color: var(--oxford-blue);
font-weight: 700;
margin-bottom: 0.5rem;
}
.login-header p {
color: var(--indigo-dye);
font-size: 0.95rem;
}
.form-floating {
margin-bottom: 1.5rem;
}
.form-control {
border: 2px solid rgba(39, 71, 110, 0.2);
border-radius: 12px;
padding: 1rem;
font-size: 1rem;
transition: all 0.3s ease;
color: var(--oxford-blue);
}
.form-control:focus {
border-color: var(--cerulean);
box-shadow: 0 0 0 0.2rem rgba(0, 105, 146, 0.25);
outline: none;
}
.form-label {
color: var(--indigo-dye);
}
.btn-login {
background: linear-gradient(135deg, var(--cerulean) 0%, var(--indigo-dye) 100%);
border: none;
border-radius: 12px;
padding: 1rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--cream);
width: 100%;
transition: all 0.3s ease;
margin-top: 1rem;
}
.btn-login:hover {
background: linear-gradient(135deg, var(--indigo-dye) 0%, var(--oxford-blue) 100%);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 105, 146, 0.3);
color: var(--cream);
}
.btn-login:disabled {
opacity: 0.7;
transform: none;
}
.alert {
border-radius: 12px;
border: none;
margin-bottom: 1.5rem;
}
.allowed-emails {
background: rgba(234, 248, 191, 0.2);
border-radius: 12px;
padding: 1rem;
margin-top: 1.5rem;
border-left: 4px solid var(--cerulean);
}
.allowed-emails h6 {
color: var(--cerulean);
font-weight: 600;
margin-bottom: 0.5rem;
}
.allowed-emails ul {
margin: 0;
padding-left: 1.2rem;
}
.allowed-emails li {
color: var(--indigo-dye);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.loading-spinner {
display: none;
}
.logo {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--cerulean) 0%, var(--indigo-dye) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: var(--cream);
font-size: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 105, 146, 0.3);
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<div class="logo">
<i class="fas fa-robot"></i>
</div>
<h1>Bienvenido</h1>
<p>Ingresa tu correo autorizado para acceder al sistema</p>
</div>
<div id="alert-container"></div>
<form id="loginForm">
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="Correo electrónico" required>
<label for="email"><i class="fas fa-envelope me-2"></i>Correo electrónico</label>
</div>
<button type="submit" class="btn btn-login" id="loginBtn">
<span class="loading-spinner">
<i class="fas fa-spinner fa-spin me-2"></i>
</span>
<span class="btn-text">Iniciar Sesión</span>
</button>
</form>
</div>
<script>
// Correos autorizados
const ALLOWED_EMAILS = [
'lbencomo94@gmail.com',
'vargascorporate@gmail.com'
];
// Verificar si ya está logueado
document.addEventListener('DOMContentLoaded', function() {
const loggedUser = localStorage.getItem('loggedUser');
if (loggedUser && ALLOWED_EMAILS.includes(loggedUser)) {
window.location.href = '/index.html';
}
});
// Manejar el formulario de login
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value.trim().toLowerCase();
const loginBtn = document.getElementById('loginBtn');
const btnText = loginBtn.querySelector('.btn-text');
const spinner = loginBtn.querySelector('.loading-spinner');
// Mostrar loading
loginBtn.disabled = true;
spinner.style.display = 'inline';
btnText.textContent = 'Verificando...';
// Simular delay de verificación
setTimeout(() => {
if (ALLOWED_EMAILS.includes(email)) {
// Login exitoso
localStorage.setItem('loggedUser', email);
showAlert('¡Bienvenido! Redirigiendo al dashboard...', 'success');
setTimeout(() => {
window.location.href = '/index.html';
}, 1500);
} else {
// Login fallido
showAlert('Correo no autorizado. Solo se permiten los correos listados abajo.', 'danger');
// Resetear botón
loginBtn.disabled = false;
spinner.style.display = 'none';
btnText.textContent = 'Iniciar Sesión';
}
}, 1000);
});
// Función para mostrar alertas
function showAlert(message, type) {
const alertContainer = document.getElementById('alert-container');
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
alertDiv.innerHTML = `
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
alertContainer.innerHTML = '';
alertContainer.appendChild(alertDiv);
// Auto-hide después de 5 segundos
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.remove();
}
}, 5000);
}
// Auto-completar email al hacer click en los correos permitidos
document.querySelectorAll('.allowed-emails li').forEach(li => {
li.style.cursor = 'pointer';
li.addEventListener('click', function() {
document.getElementById('email').value = this.textContent;
document.getElementById('email').focus();
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Latest Blog Posts
- 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/luiso2/mcp-evolution-api'
If you have feedback or need assistance with the MCP directory API, please join our Discord server