Sample Page – Wspie Mobile

<!doctype html>

<head>

<title>Acceso a Plataforma</title>

<style>

:root{

–bg:#0b0f16; –card:#111827; –muted:#9ca3af; –text:#e5e7eb;

–line:#243244; –accent:#4f46e5; –accent2:#22c55e; –danger:#ef4444;

}

*{box-sizing:border-box}

body{

margin:0; min-height:100vh; display:grid; place-items:center;

font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

background:

radial-gradient(900px 500px at 15% 10%, rgba(79,70,229,.28), transparent 60%),

radial-gradient(800px 600px at 85% 20%, rgba(34,197,94,.20), transparent 55%),

radial-gradient(700px 600px at 40% 95%, rgba(239,68,68,.12), transparent 55%),

var(–bg);

color:var(–text);

}

.wrap{width:min(980px, 92vw); display:grid; gap:18px; grid-template-columns: 1.1fr .9fr; align-items:stretch;}

@media (max-width: 900px){ .wrap{grid-template-columns:1fr; } }

.panel{

border:1px solid rgba(255,255,255,.08);

background: linear-gradient(180deg, rgba(17,24,39,.90), rgba(17,24,39,.72));

border-radius:18px; padding:26px; box-shadow: 0 22px 70px rgba(0,0,0,.45);

backdrop-filter: blur(10px);

}

.brand{

display:flex; gap:12px; align-items:center; margin-bottom:14px;

}

.logo{

width:42px; height:42px; border-radius:12px;

background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(34,197,94,.85));

box-shadow: 0 10px 25px rgba(79,70,229,.25);

}

h1{margin:0; font-size:20px; letter-spacing:.3px;}

.sub{margin:8px 0 0; color:var(–muted); line-height:1.5; font-size:14px;}

.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}

.badge{

font-size:12px; color:var(–muted); border:1px solid rgba(255,255,255,.09);

padding:7px 10px; border-radius:999px; background: rgba(255,255,255,.03);

}

/* Form */

.form h2{margin:0 0 10px; font-size:18px;}

.note{

margin:0 0 16px; font-size:12px; color:var(–muted);

border-left:3px solid rgba(79,70,229,.9); padding-left:10px;

}

label{display:block; font-size:12px; color:var(–muted); margin:12px 0 6px;}

.field{

position:relative;

}

input{

width:100%; padding:12px 12px; border-radius:12px;

border:1px solid rgba(255,255,255,.10);

background: rgba(0,0,0,.18); color:var(–text);

outline:none; transition: .15s border, .15s box-shadow;

}

input:focus{

border-color: rgba(79,70,229,.85);

box-shadow: 0 0 0 4px rgba(79,70,229,.18);

}

.row{display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px;}

.chk{display:flex; align-items:center; gap:8px; color:var(–muted); font-size:12px;}

.chk input{width:auto; accent-color: var(–accent);}

a{color:#c7d2fe; text-decoration:none}

a:hover{text-decoration:underline}

.btn{

margin-top:16px; width:100%; padding:12px 14px; border-radius:12px;

border:1px solid rgba(255,255,255,.12);

background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(79,70,229,.75));

color:white; font-weight:700; letter-spacing:.2px; cursor:pointer;

transition: transform .06s ease, filter .15s ease;

}

.btn:active{transform: translateY(1px)}

.btn:hover{filter: brightness(1.06)}

.msg{

margin-top:12px; font-size:13px; padding:10px 12px; border-radius:12px;

border:1px solid rgba(255,255,255,.10);

background: rgba(255,255,255,.04);

display:none;

}

.msg.ok{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10)}

.msg.err{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10)}

.foot{

margin-top:16px; color:var(–muted); font-size:12px; line-height:1.5;

}

.kpi{

display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px;

}

.kpi .box{

padding:12px; border-radius:14px; background: rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

}

.kpi .n{font-size:16px; font-weight:800;}

.kpi .t{font-size:12px; color:var(–muted); margin-top:4px;}

</style>

</head>

<body>

<!– Left: marketing/info –>

<div>

<h1>Portal Seguro</h1>

<p class=»sub»>Accede con tu usuario y contraseña para continuar. Interfaz de ejemplo (demo) sin envío de datos.</p>

</div>

<span class=»badge»>Acceso cifrado</span>

<span class=»badge»>Gestión de sesiones</span>

<span class=»badge»>Auditoría de actividad</span>

<span class=»badge»>Protección anti-fuerza bruta</span>

</div>

<div class=»t»>Disponibilidad</div>

</div>

<div class=»t»>Opcional</div>

</div>

<div class=»t»>Buenas prácticas</div>

</div>

Nota: esta página es una maqueta. No uses credenciales reales.

Si necesitas conectarla a un backend legítimo, se hace con HTTPS + autenticación en servidor.

</p>

</section>

<!– Right: login –>

<h2>Iniciar sesión</h2>

<p class=»note»><strong>Demo:</strong> no se envía nada. Usuario: <b>demo</b> — Contraseña: <b>demo123</b></p>

<label for=»user»>Usuario o correo</label>

</div>

<label for=»pass»>Contraseña</label>

</div>

Mantener sesión (demo)

</label>

<a href=»#» onclick=»return false;»>¿Olvidaste tu contraseña?</a>

</div>

<button class=»btn» type=»submit»>Acceder</button>

<div id=»msgOk» class=»msg ok»> Acceso concedido (demo). Redirigiendo…</div>

<div id=»msgErr» class=»msg err»> Usuario o contraseña incorrectos.</div>

Si esto es para una web real: nunca autentiques solo con JavaScript.

La validación real debe vivir en el servidor.

</p>

</form>

</section>

</div>

// Login simulado: NO envía datos, NO guarda credenciales.

const form = document.getElementById(«loginForm»);

const msgOk = document.getElementById(«msgOk»);

const msgErr = document.getElementById(«msgErr»);

form.addEventListener(«submit», (e) => {

e.preventDefault();

msgOk.style.display = «none»;

msgErr.style.display = «none»;

const user = document.getElementById(«user»).value.trim();

const pass = document.getElementById(«pass»).value;

// Credenciales DEMO

const ok = (user.toLowerCase() === «demo» || user.toLowerCase() === «[email protected]») && pass === «demo123»;

if (ok) {

msgOk.style.display = «block»;

setTimeout(() => {

// Simula redirección a un «dashboard» ficticio

alert(«Bienvenido (demo). Aquí iría tu panel.»);

}, 700);

} else {

msgErr.style.display = «block»;

}

});

</script>

</body>

</html>