pregunta 3.1-3.5_solo estructura_falta organizar
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page1.css"; // Importamos los estilos
|
||||
|
||||
export default function Pregunta1() {
|
||||
return (
|
||||
<main className="pregunta-page pregunta1">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 1</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
1. Desglose el número de equipos de impresión con que cuenta el área
|
||||
universitaria.
|
||||
</p>
|
||||
|
||||
<div className="pregunta-grid">
|
||||
<div>
|
||||
<label>Inyección de tinta</label>
|
||||
<input value="7" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser pequeña B/N</label>
|
||||
<input value="186" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser de alto volumen B/N</label>
|
||||
<input value="28" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser de alto volumen Color</label>
|
||||
<input value="18" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser pequeña Color</label>
|
||||
<input value="20" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Multifuncionales</label>
|
||||
<input value="108" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Matriz de puntos</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>3D</label>
|
||||
<input value="2" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Plotter</label>
|
||||
<input value="11" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta2" className="boton siguiente">
|
||||
Ir a Pregunta 2 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/* === ESTILOS GENERALES === */
|
||||
.pregunta-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom, #ebf4ff, #ffffff);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* === CONTENEDOR === */
|
||||
.pregunta-container {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* === TÍTULO === */
|
||||
.pregunta-titulo {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #1e40af;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* === TEXTO === */
|
||||
.pregunta-texto {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* === GRID DE INPUTS === */
|
||||
.pregunta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.pregunta-grid label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.pregunta-grid input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
background-color: #f9fafb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pregunta-grid input:focus {
|
||||
border-color: #2563eb;
|
||||
outline: none;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-contenedor {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.boton {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #1e3a8a;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page2.css"; // 👈 Importamos los estilos
|
||||
|
||||
export default function Pregunta2() {
|
||||
return (
|
||||
<main className="pregunta-page pregunta2">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 2</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
Indique el número de equipos de impresión de acuerdo con la
|
||||
población universitaria al que se destina su uso primordialmente.
|
||||
</p>
|
||||
|
||||
<div className="pregunta-grid">
|
||||
<div>
|
||||
<label>Alumnos</label>
|
||||
<input value="35" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Profesores</label>
|
||||
<input value="43" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Técnicos Académicos</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Investigadores</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Administrativos</label>
|
||||
<input value="302" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Total</label>
|
||||
<input value="380" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-grupo">
|
||||
<Link href="/pregunta1" className="boton anterior">
|
||||
← Volver a Pregunta 1
|
||||
</Link>
|
||||
|
||||
<Link href="#" className="boton siguiente">
|
||||
Ir a Pregunta 3 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.pregunta-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom, #eef2ff, #ffffff);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.pregunta-container {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.pregunta-titulo {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #4338ca;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pregunta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.pregunta-grid label {
|
||||
display: block;
|
||||
color: #4b5563;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.pregunta-grid input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
background-color: #f9fafb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pregunta-grid input:focus {
|
||||
border-color: #6366f1;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.boton-grupo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.boton {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.boton.anterior {
|
||||
background-color: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.anterior:hover {
|
||||
background-color: #374151;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #312e81;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.1.css";
|
||||
|
||||
export default function Pregunta3() {
|
||||
const data = [
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 2",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 1",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i9 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "15",
|
||||
profesores: "16",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "52",
|
||||
total: "97",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "29",
|
||||
profesores: "16",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "52",
|
||||
total: "97",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "107",
|
||||
profesores: "3",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "8",
|
||||
total: "118",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "250",
|
||||
profesores: "59",
|
||||
tecnicos: "3",
|
||||
investigadores: "",
|
||||
administrativos: "904",
|
||||
total: "1216",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "3",
|
||||
profesores: "1",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "12",
|
||||
total: "16",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "36",
|
||||
profesores: "19",
|
||||
tecnicos: "2",
|
||||
investigadores: "",
|
||||
administrativos: "78",
|
||||
total: "137",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "264",
|
||||
profesores: "66",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "410",
|
||||
total: "740",
|
||||
},
|
||||
{
|
||||
tipo: "Pentium Gold",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Pentium Serie J, G",
|
||||
alumnos: "2",
|
||||
profesores: "3",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "3",
|
||||
total: "8",
|
||||
},
|
||||
{
|
||||
tipo: "Celeron Dual Core, Pentium Dual Core o anteriores",
|
||||
alumnos: "25",
|
||||
profesores: "40",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "56",
|
||||
total: "121",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "774",
|
||||
profesores: "227",
|
||||
tecnicos: "5",
|
||||
investigadores: "0",
|
||||
administrativos: "838",
|
||||
total: "1844",
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* Pestañas simuladas */}
|
||||
<div className="tab-container">
|
||||
<div className="tab active">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* Tabla principal */}
|
||||
<div className="tabla-pc-container">
|
||||
<table className="tabla-pc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma PC <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-2" className="boton siguiente">
|
||||
Pregunta 3 (2/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/* === ESTILOS PREGUNTA 3 (1/5) === */
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #1e3a8a;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1e40af;
|
||||
border-bottom: 3px solid #1e40af;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #1e40af;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-pc-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-pc {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-pc th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-pc .header-procesador,
|
||||
.tabla-pc .header-total {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
|
||||
.tabla-pc .header-poblacion {
|
||||
background-color: #9333ea;
|
||||
}
|
||||
|
||||
.tabla-pc .sub-header {
|
||||
background-color: #a855f7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-pc td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-pc .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-pc input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-pc .total-celda {
|
||||
background-color: #e0f2fe;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total td {
|
||||
background-color: #bfdbfe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.2.css";
|
||||
|
||||
export default function Pregunta3_2() {
|
||||
const data = [
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 2",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 1",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M4",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "2",
|
||||
total: "2",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M3",
|
||||
alumnos: "",
|
||||
profesores: "1",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "2",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M2",
|
||||
alumnos: "",
|
||||
profesores: "2",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "2",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M1",
|
||||
alumnos: "51",
|
||||
profesores: "1",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "52",
|
||||
},
|
||||
{
|
||||
tipo: "i9 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "11",
|
||||
profesores: "1",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "12",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "175",
|
||||
profesores: "5",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "26",
|
||||
total: "206",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "2",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "2",
|
||||
},
|
||||
{
|
||||
tipo: "Core2 Mac, Quad Core o anteriores",
|
||||
alumnos: "12",
|
||||
profesores: "3",
|
||||
tecnicos: "3",
|
||||
investigadores: "",
|
||||
administrativos: "3",
|
||||
total: "21",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "249",
|
||||
profesores: "14",
|
||||
tecnicos: "3",
|
||||
investigadores: "0",
|
||||
administrativos: "37",
|
||||
total: "303",
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (2/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab active">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-apple-container">
|
||||
<table className="tabla-apple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma Apple <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-3" className="boton siguiente">
|
||||
Pregunta 3 (3/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/* === ESTILOS PREGUNTA 3 (2/5) - Plataforma Apple === */
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #7e22ce;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #7e22ce;
|
||||
border-bottom: 3px solid #7e22ce;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #7e22ce;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-apple-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-apple {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-apple th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-apple .header-procesador,
|
||||
.tabla-apple .header-total {
|
||||
background-color: #9333ea;
|
||||
}
|
||||
|
||||
.tabla-apple .header-poblacion {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
|
||||
.tabla-apple .sub-header {
|
||||
background-color: #a855f7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-apple td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-apple .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #faf5ff;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.tabla-apple input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-apple .total-celda {
|
||||
background-color: #f3e8ff;
|
||||
font-weight: 600;
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total td {
|
||||
background-color: #e9d5ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total .total-celda {
|
||||
background-color: #d8b4fe;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #9333ea;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(147, 51, 234, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.3.css";
|
||||
|
||||
export default function Pregunta3_3() {
|
||||
const data = [
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 2",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 1",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i9 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "16",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "27",
|
||||
total: "43",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (11a generación)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "1",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "2",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "146",
|
||||
profesores: "34",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "42",
|
||||
total: "222",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "2",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "15",
|
||||
total: "19",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "12",
|
||||
total: "12",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "8",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "23",
|
||||
total: "31",
|
||||
},
|
||||
{
|
||||
tipo: "i3 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Pentium Dual Core o anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Celeron (equivalente 2018 hasta la fecha)",
|
||||
alumnos: "299",
|
||||
profesores: "8",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "4",
|
||||
total: "311",
|
||||
},
|
||||
{
|
||||
tipo: "Celeron anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core2 Duo, Quad Core, Pentium Dual Core o anteriores",
|
||||
alumnos: "4",
|
||||
profesores: "4",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "3",
|
||||
total: "11",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "445",
|
||||
profesores: "132",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "139",
|
||||
total: "716",
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (3/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab active">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-pc-container">
|
||||
<table className="tabla-pc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma PC <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-4" className="boton siguiente">
|
||||
Pregunta 3 (4/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/* === ESTILOS PREGUNTA 3 (3/5) - Portátiles Plataforma PC === */
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #dc2626;
|
||||
border-bottom: 3px solid #dc2626;
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #dc2626;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-pc-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-pc {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-pc th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-pc .header-procesador,
|
||||
.tabla-pc .header-total {
|
||||
background-color: #b91c1c;
|
||||
}
|
||||
|
||||
.tabla-pc .header-poblacion {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
.tabla-pc .sub-header {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-pc td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-pc .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #fef2f2;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.tabla-pc input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-pc .total-celda {
|
||||
background-color: #fee2e2;
|
||||
font-weight: 600;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total td {
|
||||
background-color: #fecaca;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total .total-celda {
|
||||
background-color: #fca5a5;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #b91c1c;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(220, 38, 38, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.4.css";
|
||||
|
||||
export default function Pregunta3_4() {
|
||||
const data = [
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 2",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core Ultra (i3, i5, i7) Serie 1",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M4",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M3",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M2",
|
||||
alumnos: "35",
|
||||
profesores: "3",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "38",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M1",
|
||||
alumnos: "",
|
||||
profesores: "5",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "6",
|
||||
},
|
||||
{
|
||||
tipo: "i9 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i7 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (13a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "14",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "14",
|
||||
},
|
||||
{
|
||||
tipo: "i5 o equivalentes (11a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "9",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "4",
|
||||
total: "13",
|
||||
},
|
||||
{
|
||||
tipo: "Core2 Mac, Quad Core o anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "35",
|
||||
profesores: "31",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "5",
|
||||
total: "71",
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (4/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab active">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-apple-container">
|
||||
<table className="tabla-apple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma Apple <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-5" className="boton siguiente">
|
||||
Pregunta 3 (5/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/* === ESTILOS PREGUNTA 3 (4/5) - Portátiles Plataforma Apple === */
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #a855f7;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #9333ea;
|
||||
border-bottom: 3px solid #9333ea;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #9333ea;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-apple-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-apple {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-apple th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-apple .header-procesador,
|
||||
.tabla-apple .header-total {
|
||||
background-color: #9333ea;
|
||||
}
|
||||
|
||||
.tabla-apple .header-poblacion {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
|
||||
.tabla-apple .sub-header {
|
||||
background-color: #a855f7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-apple td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-apple .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #faf5ff;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.tabla-apple input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-apple .total-celda {
|
||||
background-color: #f3e8ff;
|
||||
font-weight: 600;
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total td {
|
||||
background-color: #e9d5ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total .total-celda {
|
||||
background-color: #d8b4fe;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #9333ea;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(147, 51, 234, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.5.css";
|
||||
|
||||
export default function Pregunta3_5() {
|
||||
const data = [
|
||||
{
|
||||
tipo: "Xeon 6",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 3a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 4a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 5a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 6a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon E3, E5, E7",
|
||||
alumnos: "19",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "16",
|
||||
administrativos: "",
|
||||
total: "35",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Phi",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon o anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "19",
|
||||
profesores: "0",
|
||||
tecnicos: "0",
|
||||
investigadores: "16",
|
||||
administrativos: "2",
|
||||
total: "37",
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab active">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-servidores-container">
|
||||
<table className="tabla-servidores">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Servidores <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/" className="boton volver">
|
||||
← Volver al inicio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/* === ESTILOS PREGUNTA 3 (5/5) - Alto Rendimiento Servidores === */
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #2563eb;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #2563eb;
|
||||
border-bottom: 3px solid #2563eb;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #2563eb;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-servidores-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-servidores {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-servidores th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-servidores .header-procesador,
|
||||
.tabla-servidores .header-total {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.tabla-servidores .header-poblacion {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
.tabla-servidores .sub-header {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-servidores td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-servidores .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #eff6ff;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-servidores .total-celda {
|
||||
background-color: #dbeafe;
|
||||
font-weight: 600;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total td {
|
||||
background-color: #bfdbfe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.boton.volver {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton.volver:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.css"; // Asegúrate de que los estilos están en este archivo
|
||||
|
||||
export default function Pregunta3() {
|
||||
// Datos de ejemplo basados en las imágenes (especialmente la de la tabla final)
|
||||
const data = [
|
||||
{
|
||||
tipo: "Xeon 6",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 5a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 4a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "6",
|
||||
total: "6",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 3a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 2a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 1a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon E3, E5, E7",
|
||||
alumnos: "19",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "16",
|
||||
total: "35",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Phi",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon's anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "19",
|
||||
profesores: "0",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "24", // Suma de los valores de ejemplo
|
||||
total: "43", // Suma de los totales de ejemplo
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === Pestañas de Plataforma (Simulación) === */}
|
||||
<div className="tab-container">
|
||||
{/* Solo se muestra la pestaña 'Alto rendimiento Servidores' activa */}
|
||||
<div className="tab active">Alto rendimiento Servidores</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
{/* ... otras pestañas que no son visibles en la imagen de la tabla ... */}
|
||||
</div>
|
||||
|
||||
{/* === Contenido de la Tabla === */}
|
||||
<div className="tabla-servidores-container">
|
||||
<table className="tabla-servidores">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-servidores">
|
||||
Servidores
|
||||
<br />
|
||||
Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar el equivalente del procesador
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
{/* Se asume que este sería el botón de navegación final o de guardar */}
|
||||
<Link href="/siguiente-seccion" className="boton siguiente">
|
||||
Pregunta 4 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/* --- Estilos específicos para la Pregunta 3 (Tabla y Pestañas) --- */
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap; /* Para que las pestañas se mantengan en una fila */
|
||||
overflow-x: auto; /* Permite scroll horizontal si hay muchas pestañas */
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap; /* Previene el salto de línea en el texto de la pestaña */
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1e40af;
|
||||
border-bottom: 3px solid #1e40af;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #1e40af;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA DE SERVIDORES === */
|
||||
.tabla-servidores-container {
|
||||
overflow-x: auto; /* Permite scroll horizontal en la tabla */
|
||||
margin-bottom: 2rem;
|
||||
position: relative; /* Para posicionar el botón */
|
||||
}
|
||||
|
||||
.tabla-servidores {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
min-width: 900px; /* Asegura un ancho mínimo para que se vea bien */
|
||||
}
|
||||
|
||||
/* Encabezados */
|
||||
.tabla-servidores th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-servidores thead .header-servidores,
|
||||
.tabla-servidores thead .header-total {
|
||||
background-color: #3b82f6; /* Azul base para servidores/total */
|
||||
}
|
||||
|
||||
.tabla-servidores thead .header-poblacion {
|
||||
background-color: #ef4444; /* Rojo/Rosa para población (ajustar color si es necesario) */
|
||||
}
|
||||
|
||||
.tabla-servidores thead .sub-header {
|
||||
background-color: #f87171; /* Tono más claro para sub-encabezados de población */
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Celdas del cuerpo */
|
||||
.tabla-servidores td {
|
||||
padding: 0; /* Quitamos padding de la celda para controlarlo en el input */
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-servidores .tipo-procesador {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.3rem;
|
||||
border: none;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box; /* Asegura que el padding no cambie el ancho */
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"]:read-only {
|
||||
background-color: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.tabla-servidores .total-celda {
|
||||
background-color: #e0f2fe; /* Azul muy claro para las celdas de total */
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total td {
|
||||
background-color: #bfdbfe; /* Azul más intenso para la fila total */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* Botón Consultar */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem; /* Debajo de la tabla */
|
||||
right: 0;
|
||||
background-color: #10b981; /* Verde */
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
/* Ajuste para el contenedor de botones si ya existe */
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem; /* Asegura espacio debajo del botón 'Consultar' */
|
||||
}
|
||||
Reference in New Issue
Block a user