57 lines
3.3 KiB
HTML
57 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IntegraRepara - Gestión Inteligente</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
/* Animaciones suaves */
|
|
.fade-in { animation: fadeIn 0.5s ease-in-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.hidden { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans text-gray-800">
|
|
|
|
<nav class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center shadow-sm">
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-blue-600 text-white p-2 rounded-lg font-bold">IR</div>
|
|
<span class="text-xl font-bold tracking-tight text-gray-900">IntegraRepara</span>
|
|
</div>
|
|
<div>
|
|
<button onclick="showLogin()" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Iniciar Sesión</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="min-h-[calc(100vh-80px)] flex items-center justify-center p-4">
|
|
|
|
<div class="max-w-4xl w-full bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row fade-in">
|
|
|
|
<div class="md:w-1/2 bg-slate-900 text-white p-8 flex flex-col justify-center relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-600 to-slate-900 opacity-50"></div>
|
|
<div class="relative z-10">
|
|
<h2 class="text-3xl font-bold mb-4">Gestiona tu negocio de reparaciones</h2>
|
|
<p class="text-slate-300 mb-6">Automatiza citas, gestiona clientes y notifica por WhatsApp automáticamente. Todo en un solo lugar.</p>
|
|
<div class="flex gap-2 text-sm text-blue-200">
|
|
<span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4"></i> WhatsApp API</span>
|
|
<span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4"></i> Facturación</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-1/2 p-8 md:p-12 relative">
|
|
|
|
<div id="loginForm" class="space-y-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">Bienvenido de nuevo</h2>
|
|
<p class="text-gray-500 text-sm">Introduce tus datos para acceder al panel.</p>
|
|
|
|
<form onsubmit="handleLogin(event)" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input type="email" id="loginEmail" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
|
|
<input type="password" id="loginPass" required class="w |