59 lines
3.2 KiB
HTML
59 lines
3.2 KiB
HTML
<div class="max-w-md mx-auto mt-10 bg-gradient-to-br from-green-50 to-green-50 p-7 rounded-xl shadow-2xl text-center transform transition-all">
|
|
<div class="flex justify-start mb-6">
|
|
<img src="/img/logousite.webp" alt="Logo de la empresa" class="w-20">
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="w-24 h-24 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-6 shadow-lg">
|
|
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Bienvenido</h2>
|
|
<form id="loginForm" class="space-y-4">
|
|
<div class="relative">
|
|
<input type="email" id="email" placeholder="Email" class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-all" required>
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="password" id="password" placeholder="Password" class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-all" required>
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
|
</svg>
|
|
</div>
|
|
<button type="submit" class="w-full bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-lg font-semibold hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105">
|
|
Login
|
|
</button>
|
|
</form>
|
|
<div class="mt-4 text-sm text-gray-600 hover:text-green-500 transition-all">
|
|
<a href="#">¿Olvidaste tu contraseña?</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const email = document.getElementById('email').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
alert('Login exitoso');
|
|
window.location.href = '/dashboard';
|
|
} else {
|
|
alert('Error: ' + result.message);
|
|
}
|
|
});
|
|
</script> |