Añadir index.html
This commit is contained in:
147
index.html
Normal file
147
index.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Acceso Operarios - IntegraRepara</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
||||
|
||||
<div class="absolute top-[-10%] left-[-10%] w-64 h-64 bg-blue-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
|
||||
<div class="absolute bottom-[-10%] right-[-10%] w-64 h-64 bg-emerald-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
|
||||
|
||||
<div class="w-full max-w-sm z-10 fade-in">
|
||||
|
||||
<div class="text-center mb-10">
|
||||
<div class="w-20 h-20 bg-white rounded-[1.5rem] shadow-xl shadow-blue-500/10 border border-slate-100 flex items-center justify-center mx-auto mb-5">
|
||||
<i data-lucide="wrench" class="w-10 h-10 text-blue-600"></i>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black tracking-tight text-slate-800 uppercase">App Operario</h1>
|
||||
<p class="text-sm font-medium text-slate-500 mt-2">Introduce tus credenciales de acceso</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" onsubmit="doLogin(event)" class="bg-white/80 backdrop-blur-xl p-8 rounded-[2rem] shadow-2xl shadow-slate-200/50 border border-white space-y-6">
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Email o Teléfono</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-lucide="user" class="w-5 h-5 text-slate-400"></i>
|
||||
</div>
|
||||
<input type="text" id="userInput" required placeholder="Ej: 600123456" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Contraseña</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-lucide="lock" class="w-5 h-5 text-slate-400"></i>
|
||||
</div>
|
||||
<input type="password" id="passInput" required placeholder="••••••••" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="errorMsg" class="hidden bg-rose-50 border border-rose-200 text-rose-600 text-xs font-bold p-3 rounded-xl text-center flex items-center justify-center gap-2">
|
||||
<i data-lucide="alert-circle" class="w-4 h-4"></i> <span>Datos incorrectos</span>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="btnSubmit" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)] hover:bg-blue-700 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-2">
|
||||
Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<p class="text-center text-[10px] font-bold text-slate-400 mt-8 uppercase tracking-widest">
|
||||
Tecnología IntegraRepara
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||||
? 'http://localhost:3000'
|
||||
: 'https://integrarepara-api.integrarepara.es';
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
lucide.createIcons();
|
||||
// Si ya tiene sesión iniciada, lo mandamos directo dentro de la app
|
||||
if (localStorage.getItem("token") && localStorage.getItem("role") === "operario") {
|
||||
window.location.href = "operario.html";
|
||||
}
|
||||
});
|
||||
|
||||
async function doLogin(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('btnSubmit');
|
||||
const err = document.getElementById('errorMsg');
|
||||
|
||||
const user = document.getElementById('userInput').value.trim();
|
||||
const pass = document.getElementById('passInput').value;
|
||||
|
||||
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';
|
||||
btn.disabled = true;
|
||||
err.classList.add('hidden');
|
||||
lucide.createIcons();
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: user, password: pass })
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.ok) {
|
||||
// Guardamos la llave de acceso
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('role', data.role);
|
||||
localStorage.setItem('userName', data.name);
|
||||
|
||||
// Comprobamos que sea un operario
|
||||
if(data.role === 'operario') {
|
||||
btn.innerHTML = '<i data-lucide="check" class="w-5 h-5 mx-auto"></i>';
|
||||
lucide.createIcons();
|
||||
btn.classList.replace('bg-blue-600', 'bg-emerald-500');
|
||||
|
||||
// Redirigimos a la app (al archivo que me pasaste antes)
|
||||
setTimeout(() => { window.location.href = "operario.html"; }, 800);
|
||||
} else {
|
||||
// Si se cuela un administrador, le avisamos o lo mandamos a su panel
|
||||
err.querySelector('span').innerText = "Esta app es solo para operarios";
|
||||
err.classList.remove('hidden');
|
||||
localStorage.clear();
|
||||
}
|
||||
} else {
|
||||
err.querySelector('span').innerText = data.error || "Credenciales incorrectas";
|
||||
err.classList.remove('hidden');
|
||||
}
|
||||
} catch (error) {
|
||||
err.querySelector('span').innerText = "Error de conexión con el servidor";
|
||||
err.classList.remove('hidden');
|
||||
} finally {
|
||||
if(!res?.ok || !data?.ok) {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = 'Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>';
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user