This commit is contained in:
Felipe
2025-02-06 17:36:59 -05:00
parent 6442e46f13
commit 3df5502026
7 changed files with 89 additions and 7 deletions
+4 -5
View File
@@ -1,5 +1,5 @@
<!-- Container Principal -->
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full ">
<h1 class="text-2xl font-bold mb-4">Oficina Virtual</h1>
<div class="justify-between w-full md:flex">
@@ -12,11 +12,10 @@
<p> Volver a la pagina principal </p>
</button>
</a>
<!-- Agregar el GIF de carga -->
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
</div>
</div>
</div>
</div>
+59
View File
@@ -0,0 +1,59 @@
<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>