Uriel JarethandClaude Opus 5
0b9c9c1dc2
Base de conocimiento para el personal del Instituto Santiago Tapia: oferta educativa (en tarjetas y en tabla), requisitos y titulacion, becas y fechas de inscripcion, links de clases de Google Meet, preguntas frecuentes, mensajes listos y datos del instituto. Acceso con Magic Login: enlace de un solo uso, 15 minutos de vigencia, y en la base solo se guarda el SHA-256 del token. El canje es atomico, asi que dos canjes simultaneos del mismo enlace no pueden crear dos sesiones. Tres roles con 19 permisos. El catalogo lo edita direccion; los links de clases, direccion y administracion; el resto del equipo consulta. El menu se pinta con lo que el servidor autoriza y cada endpoint exige la misma clave, asi que no hay pantallas alcanzables escribiendo la direccion a mano. Toda edicion pasa por una lista blanca de campos validados y queda en la bitacora. Un precio vacio no se guarda como cero, un link que no es una direccion se rechaza, y no se puede marcar una validez oficial como confirmada sin numero de acuerdo. Pensado para leerse comodo: texto de 17 px, contraste AA, areas de toque de 44 px, tema claro y bloques plegados en telefono. La oferta, los costos, las becas, los requisitos y el contacto son los reales del instituto, tomados del CSV de oferta educativa y de la base de conocimiento. Los usuarios de acceso y los links de Meet son de demostracion. Verificado: 103 comprobaciones de API y 51 pruebas en WebKit escritorio y iPhone 13. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
87 lines
3.6 KiB
HTML
87 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="es-MX">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Entrar · Portal interno INSTA</title>
|
|
<meta name="description" content="Portal interno del Instituto Santiago Tapia. Acceso con enlace de un solo uso.">
|
|
<meta name="color-scheme" content="light">
|
|
<link rel="icon" href="/assets/insta-logo.webp">
|
|
<link rel="stylesheet" href="/css/insta.css">
|
|
</head>
|
|
<body>
|
|
<main class="entrada">
|
|
<!-- Lienzo izquierdo: la promesa del instituto, que es también la del portal -->
|
|
<section class="entrada__lienzo">
|
|
<a class="rotulo" href="https://institutosantiagotapia.com" rel="noreferrer">
|
|
<img src="/assets/insta-logo.webp" width="44" height="28" alt="">
|
|
<span class="rotulo__texto">
|
|
<span class="rotulo__nombre">Instituto Santiago Tapia</span>
|
|
<span class="rotulo__sub">Portal interno</span>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="entrada__promesa">
|
|
<h1>Trabajar y estudiar<br><em>es posible</em>.</h1>
|
|
<p>
|
|
Informar bien también. Aquí está la oferta educativa, los costos, las becas, las
|
|
fechas y los links de clase en un solo lugar, para que nadie tenga que adivinar un
|
|
dato mientras está atendiendo a alguien.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="entrada__hechos">
|
|
<span class="entrada__hecho"><b>2015</b><span>Desde</span></span>
|
|
<span class="entrada__hecho"><b>1,500+</b><span>Certificados</span></span>
|
|
<span class="entrada__hecho"><b>8</b><span>Programas</span></span>
|
|
<span class="entrada__hecho"><b>Morelia</b><span>Michoacán</span></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Acceso: Magic Login -->
|
|
<section class="entrada__acceso">
|
|
<div class="acceso">
|
|
<span class="ceja">Acceso al portal</span>
|
|
<h2>Entra con un enlace de un solo uso</h2>
|
|
<p class="acceso__nota">
|
|
No hay contraseñas que recordar ni compartir. Escribe tu correo institucional y
|
|
te llega un enlace que sirve una vez y caduca en <span id="vigencia">15</span> minutos.
|
|
</p>
|
|
|
|
<div id="error-entrada" hidden></div>
|
|
|
|
<span class="separador" id="titulo-roles">Acceso rápido de la demo</span>
|
|
<div class="acceso__roles" id="roles" role="group" aria-labelledby="titulo-roles">
|
|
<div class="cargando"><div class="hueso" style="height:62px"></div><div class="hueso" style="height:62px"></div><div class="hueso" style="height:62px"></div></div>
|
|
</div>
|
|
|
|
<span class="separador">o con tu correo</span>
|
|
|
|
<form id="forma" novalidate>
|
|
<div class="campo">
|
|
<label for="email">Correo institucional</label>
|
|
<input type="email" id="email" name="email" autocomplete="email"
|
|
placeholder="[email protected]" required>
|
|
</div>
|
|
<button class="boton boton--bloque" type="submit" id="enviar" style="margin-top:12px">
|
|
Enviar mi enlace de acceso
|
|
</button>
|
|
</form>
|
|
|
|
<div id="resultado"></div>
|
|
|
|
<p class="pie-demo">
|
|
<strong>Esto es una demo.</strong> Los tres accesos rápidos son usuarios de
|
|
demostración, no personal real del instituto. En producción el enlace llega por
|
|
correo; aquí se muestra en pantalla para que puedas verlo funcionar.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="brindis" id="brindis" role="status" aria-live="polite"><span class="brindis__marca"></span><span id="brindis-txt"></span></div>
|
|
|
|
<script type="module" src="/js/entrada.mjs"></script>
|
|
</body>
|
|
</html>
|