<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DGAE | Resultados de Admisión UNAM</title>
<style>
/* Paleta de Colores UNAM */
:root {
--unam-azul: #002b7a;
--unam-oro: #d4af37;
--fondo: #f4f6f9;
--texto-oscuro: #333333;
--borde: #cccccc;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: var(--fondo);
margin: 0;
padding: 0;
color: var(--texto-oscuro);
}
/* Encabezado Institucional */
header {
background-color: var(--unam-azul);
color: white;
padding: 20px;
text-align: center;
border-bottom: 5px solid var(--unam-oro);
}
header h1 {
margin: 0;
font-size: 24px;
letter-spacing: 1px;
}
header p {
margin: 5px 0 0 0;
font-size: 14px;
color: #e0e0e0;
}
/* Navegación entre vistas */
.nav-tabs {
display: flex;
justify-content: center;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.nav-tabs button {
background: none;
border: none;
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
color: var(--unam-azul);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.nav-tabs button:hover, .nav-tabs button.activo {
background-color: #f0f0f0;
border-bottom: 3px solid var(--unam-oro);
}
/* Contenedor Principal */
.contenedor {
max-width: 800px;
margin: 30px auto;
padding: 20px;
}
.tarjeta {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-top: 4px solid var(--unam-azul);
}
.tarjeta h2 {
color: var(--unam-azul);
margin-top: 0;
border-bottom: 2px solid var(--unam-oro);
padding-bottom: 10px;
}
/* Formularios */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.grupo-form {
display: flex;
flex-direction: column;
}
.grupo-form.ancho-completo {
grid-column: span 2;
}
.grupo-form label {
margin-bottom: 5px;
font-weight: bold;
font-size: 14px;
}
.grupo-form input, .grupo-form select {
padding: 10px;
border: 1px solid var(--borde);
border-radius: 4px;
font-size: 15px;
}
.grupo-form input:focus, .grupo-form select:focus {
outline: none;
border-color: var(--unam-azul);
}
.btn {
background-color: var(--unam-azul);
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
width: 100%;
transition: background 0.3s;
}
.btn:hover {
background-color: #001a4d;
}
.btn-oro {
background-color: var(--unam-oro);
color: var(--unam-azul);
}
.btn-oro:hover {
background-color: #b5952f;
}
/* Resultados (Boleta) */
#resultado-boleta {
display: none;
text-align: center;
margin-top: 20px;
}
.boleta-aceptado {
background-color: #e8f4fd;
border: 2px solid var(--unam-azul);
padding: 20px;
border-radius: 8px;
text-align: left;
}
.boleta-rechazado {
background-color: #fde8e8;
border: 2px solid #b30000;
padding: 20px;
border-radius: 8px;
}
.estado-titulo {
font-size: 22px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
}
.aceptado-texto { color: var(--unam-azul); }
.rechazado-texto { color: #b30000; }
.dato-boleta {
margin-bottom: 10px;
font-size: 16px;
}
/* Tabla Panel Admin */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
border: 1px solid var(--borde);
padding: 10px;
text-align: left;
font-size: 14px;
}
table th {
background-color: var(--unam-azul);
color: white;
}
.btn-eliminar {
background-color: #b30000;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
/* Ocultar vistas */
.oculto {
display: none;
}
</style>
</head>
<body>
<header>
<h1>Universidad Nacional Autónoma de México</h1>
<p>Dirección General de Administración Escolar - Resultados del Concurso de Selección</p>
</header>
<div class="nav-tabs">
<button id="tab-consulta" class="activo" onclick="cambiarVista('consulta')">Consultar Resultados</button>
<button id="tab-admin" onclick="cambiarVista('admin')">Panel de Administración</button>
</div>
<div class="contenedor">
<div id="vista-consulta" class="tarjeta">
<h2>Acceso a Boleta-Credencial</h2>
<form id="form-consulta" onsubmit="buscarAspirante(event)">
<div class="form-grid">
<div class="grupo-form">
<label for="buscar-folio">Número de Folio (Boleta):</label>
<input type="text" id="buscar-folio" required placeholder="Ej. 123456">
</div>
<div class="grupo-form">
<label for="buscar-fecha">Fecha de Nacimiento:</label>
<input type="date" id="buscar-fecha" required>
</div>
</div>
<button type="submit" class="btn">Ingresar</button>
</form>
<div id="resultado-boleta">
<div id="boleta-contenido"></div>
<button type="button" class="btn btn-oro" style="margin-top: 20px;" onclick="reiniciarConsulta()">Hacer otra consulta</button>
</div>
</div>
<div id="vista-admin" class="tarjeta oculto">
<h2>Registrar Nuevo Aspirante</h2>
<form id="form-admin" onsubmit="guardarAspirante(event)">
<div class="form-grid">
<div class="grupo-form">
<label>Número de Folio:</label>
<input type="text" id="admin-folio" required>
</div>
<div class="grupo-form">
<label>Fecha de Nacimiento:</label>
<input type="date" id="admin-fecha" required>
</div>
<div class="grupo-form">
<label>Estado del Resultado:</label>
<select id="admin-estado" required>
<option value="SELECCIONADO">Seleccionado</option>
<option value="NO SELECCIONADO">No Seleccionado</option>
</select>
</div>
<div class="grupo-form">
<label>Plantel / Facultad:</label>
<input type="text" id="admin-plantel" placeholder="Ej. FES Aragón">
</div>
<div class="grupo-form ancho-completo">
<label>Carrera Asignada (Solo si fue seleccionado):</label>
<input type="text" id="admin-carrera" placeholder="Ej. Derecho">
</div>
</div>
<button type="submit" class="btn btn-oro">Guardar Registro en Base de Datos</button>
</form>
<h2 style="margin-top: 40px;">Base de Datos Actual</h2>
<table>
<thead>
<tr>
<th>Folio</th>
<th>Nacimiento</th>
<th>Estado</th>
<th>Plantel</th>
<th>Carrera</th>
<th>Acción</th>
</tr>
</thead>
<tbody id="tabla-aspirantes">
</tbody>
</table>
</div>
</div>
<script>
const DB_KEY = 'unam_aspirantes_db';
// Inicializar base de datos con un ejemplo si está vacía
if (!localStorage.getItem(DB_KEY)) {
const ejemplo = [{
folio: "123456",
fecha: "2000-01-01",
estado: "SELECCIONADO",
plantel: "Facultad de Contaduría y Administración",
carrera: "Administración"
}];
localStorage.setItem(DB_KEY, JSON.stringify(ejemplo));
}
// Navegación entre pestañas
function cambiarVista(vista) {
document.getElementById('vista-consulta').classList.add('oculto');
document.getElementById('vista-admin').classList.add('oculto');
document.getElementById('tab-consulta').classList.remove('activo');
document.getElementById('tab-admin').classList.remove('activo');
if (vista === 'consulta') {
document.getElementById('vista-consulta').classList.remove('oculto');
document.getElementById('tab-consulta').classList.add('activo');
} else {
document.getElementById('vista-admin').classList.remove('oculto');
document.getElementById('tab-admin').classList.add('activo');
cargarTabla(); // Actualizar la tabla al entrar al admin
}
}
// --- LÓGICA DEL PANEL DE ADMINISTRACIÓN ---
function obtenerAspirantes() {
return JSON.parse(localStorage.getItem(DB_KEY)) || [];
}
function guardarAspirante(e) {
e.preventDefault(); // Evitar que la página recargue
const nuevoAspirante = {
folio: document.getElementById('admin-folio').value.trim(),
fecha: document.getElementById('admin-fecha').value,
estado: document.getElementById('admin-estado').value,
plantel: document.getElementById('admin-plantel').value.trim() || 'N/A',
carrera: document.getElementById('admin-carrera').value.trim() || 'N/A'
};
let aspirantes = obtenerAspirantes();
// Comprobar si el folio ya existe
const existe = aspirantes.findIndex(a => a.folio === nuevoAspirante.folio);
if(existe >= 0) {
aspirantes[existe] = nuevoAspirante; // Actualiza
alert("Registro actualizado correctamente.");
} else {
aspirantes.push(nuevoAspirante); // Crea nuevo
alert("Aspirante registrado correctamente.");
}
localStorage.setItem(DB_KEY, JSON.stringify(aspirantes));
document.getElementById('form-admin').reset();
cargarTabla();
}
function cargarTabla() {
const aspirantes = obtenerAspirantes();
const tbody = document.getElementById('tabla-aspirantes');
tbody.innerHTML = '';
aspirantes.forEach(asp => {
const fila = `<tr>
<td>${asp.folio}</td>
<td>${asp.fecha}</td>
<td><b>${asp.estado}</b></td>
<td>${asp.plantel}</td>
<td>${asp.carrera}</td>
<td><button class="btn-eliminar" onclick="eliminarAspirante('${asp.folio}')">Borrar</button></td>
</tr>`;
tbody.innerHTML += fila;
});
}
function eliminarAspirante(folio) {
if(confirm("¿Estás seguro de borrar este registro?")) {
let aspirantes = obtenerAspirantes();
aspirantes = aspirantes.filter(asp => asp.folio !== folio);
localStorage.setItem(DB_KEY, JSON.stringify(aspirantes));
cargarTabla();
}
}
// --- LÓGICA DE CONSULTA (ALUMNO) ---
function buscarAspirante(e) {
e.preventDefault();
const folioBuscado = document.getElementById('buscar-folio').value.trim();
const fechaBuscada = document.getElementById('buscar-fecha').value;
const aspirantes = obtenerAspirantes();
// Buscar coincidencia exacta
const aspirante = aspirantes.find(a => a.folio === folioBuscado && a.fecha === fechaBuscada);
document.getElementById('form-consulta').style.display = 'none';
const contenedorResultado = document.getElementById('resultado-boleta');
const boleta = document.getElementById('boleta-contenido');
contenedorResultado.style.display = 'block';
if (aspirante) {
if (aspirante.estado === 'SELECCIONADO') {
boleta.innerHTML = `
<div class="boleta-aceptado">
<div class="estado-titulo aceptado-texto">ASPIRANTE SELECCIONADO</div>
<div class="dato-boleta"><strong>Folio:</strong> ${aspirante.folio}</div>
<div class="dato-boleta"><strong>Plantel Asignado:</strong> ${aspirante.plantel}</div>
<div class="dato-boleta"><strong>Carrera:</strong> ${aspirante.carrera}</div>
<div class="dato-boleta"><strong>Sistema:</strong> Escolarizado</div>
<hr style="border:1px solid #002b7a; margin: 15px 0;">
<p style="font-size:14px;">Imprime tu Comprobante de Asignación y sigue las instrucciones de la DGAE para tu inscripción.</p>
</div>
`;
} else {
boleta.innerHTML = `
<div class="boleta-rechazado">
<div class="estado-titulo rechazado-texto">ASPIRANTE NO SELECCIONADO</div>
<p>Lo sentimos, no obtuviste el puntaje mínimo requerido para ingresar a la carrera solicitada o no hubo cupo disponible.</p>
<div class="dato-boleta"><strong>Folio:</strong> ${aspirante.folio}</div>
<button class="btn btn-oro" style="margin-top:10px;">Ver Diagnóstico del Examen</button>
</div>
`;
}
} else {
boleta.innerHTML = `
<div class="boleta-rechazado">
<div class="estado-titulo rechazado-texto">DATOS NO ENCONTRADOS</div>
<p>El folio o la fecha de nacimiento no coinciden con ningún registro en la base de datos de este concurso.</p>
</div>
`;
}
}
function reiniciarConsulta() {
document.getElementById('buscar-folio').value = '';
document.getElementById('buscar-fecha').value = '';
document.getElementById('resultado-boleta').style.display = 'none';
document.getElementById('form-consulta').style.display = 'block';
}
// Cargar tabla al iniciar si se carga por defecto en admin (no es el caso, pero por seguridad)
cargarTabla();
</script>
</body>
</html>
