diff --git a/src/app/(Administrador)/pregunta10/pregunta10.css b/src/app/(Administrador)/pregunta10/pregunta10.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/(Administrador)/pregunta10/pregunta10.tsx b/src/app/(Administrador)/pregunta10/pregunta10.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/(Administrador)/pregunta7/page.tsx b/src/app/(Administrador)/pregunta7/page.tsx new file mode 100644 index 0000000..ee61c4d --- /dev/null +++ b/src/app/(Administrador)/pregunta7/page.tsx @@ -0,0 +1,89 @@ +"use client"; +import React, { useState } from "react"; +import "./pregunta7.css"; + +export default function Pregunta9() { + + const [datos, setDatos] = useState([ + { nombre: "Impresión", valores: ["", "", "", ""] }, + { nombre: "Digitilización", valores: ["", "", "", ""] }, + + ]); + + + const [garantia, setGarantia] = useState({ + escritorio: "", + portatil: "", + altoRendimiento: "", + }); + + // Función para actualizar datos de Pregunta 9 + const handleChange = (filaIndex: number, colIndex: number, value: string) => { + const nuevosDatos = [...datos]; + nuevosDatos[filaIndex].valores[colIndex] = value; + setDatos(nuevosDatos); + }; + + // Función para calcular total de cada fila en Pregunta 9 + const calcularTotal = (valores: string[]) => + valores.reduce((acc, val) => acc + (Number(val) || 0), 0); + + return ( +
+ {/* Pregunta 7 */} +
Censo de equipos periféricos - Estado del equipo periférico (impresion y digitalización.)
+ + +
+ 7. Calcule porcentualmente (%) la antiguedad que tienen los equipos periféricos del área universitaria. * + (Requerido en el caso de contar con Equipo de impresión o digitalización.) +
+ +
+ + + + + + + + + + + + + {datos.map((fila, filaIndex) => { + const total = calcularTotal(fila.valores); + return ( + + + {fila.valores.map((valor, colIndex) => ( + + ))} + + + ); + })} + +
% Antiguedad de los equiposMenor a 2 añosEntre 2 y 3 añosEntre 4 y 5 añosMayor a 6 añosTotal
{fila.nombre} +
+ + handleChange(filaIndex, colIndex, e.target.value) + } + /> + % +
+
100 ? "total-error" : "" + }`} + > + {total.toFixed(2)}% +
+
+
+ ); +} diff --git a/src/app/(Administrador)/pregunta7/pregunta7.css b/src/app/(Administrador)/pregunta7/pregunta7.css new file mode 100644 index 0000000..664490e --- /dev/null +++ b/src/app/(Administrador)/pregunta7/pregunta7.css @@ -0,0 +1,134 @@ +.contenedor-pregunta { + padding: 20px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9fafc; +} + +.contenedor-censo{ +background-color: #001f3f; +color: white; +} + + +.pregunta-cuadro { + background-color: #f5f5f5; + border-left: 6px solid #001f3f; + padding: 15px; + border-radius: 8px; + font-size: 16px; + margin-bottom: 25px; +} + + +.tabla-contenedor { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow-x: auto; +} + +/* Tabla */ +.tabla { + width: 100%; + border-collapse: collapse; + text-align: center; + color: black; +} + +.tabla th, +.tabla td { + border: 1px solid #ddd; + padding: 12px; + +} + +.tabla th { + color: white; + font-weight: 600; + font-size: 15px; +} + +.tabla td { + font-size: 14px; +} + +/* Colores personalizados */ +.azul-marino { + background-color: #002855; + color: white; +} + +.rosa-fuerte { + background-color: #dc1557; + color: white; +} + +/* Contenedor input */ +.input-contenedor { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +/* Input */ +.input-contenedor input { + width: 40%; + padding: 6px 25px 6px 6px; + border: 2px solid #002855; + border-radius: 6px; + font-size: 14px; + color: #333; + text-align: center; + outline: none; + background-color: rgb(232, 226, 226); + box-sizing: border-box; +} + + +.input-contenedor input::-webkit-inner-spin-button, +.input-contenedor input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Focus del input */ +.input-contenedor input:focus { + border-color: #001f3f; + box-shadow: 0 0 6px rgba(0, 47, 95, 0.3); +} + +/* Placeholder gris claro */ +.input-contenedor input::placeholder { + color: #bbb; + opacity: 1; +} + + +.input-contenedor .porcentaje { + position: absolute; + + right: 8px; + color: #555; + font-weight: bold; + pointer-events: none; + font-size: 14px; + top: 50%; + transform: translateY(-50%); +} + +/* Celda del total */ +.total-celda { + font-weight: bold; + color: #002855; + background-color: #eef2f6; +} + +/* Total > 100% */ +.total-error { + background-color: #ffcccc; + color: #a80000; +} +