diseno
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user