configuracion de module en scss y reporte
This commit is contained in:
jls846
@@ -1,15 +1,125 @@
|
||||
"use client"
|
||||
import React from "react";
|
||||
import Pregunta1 from "@/components/Preguanta1";
|
||||
import Pregunta2 from "@/components/Pregunta2";
|
||||
"use client";
|
||||
|
||||
export default function Page(){
|
||||
return(
|
||||
<>
|
||||
<h1>Reporte General de Preguntas</h1>
|
||||
<Pregunta1/>
|
||||
<Pregunta2/>
|
||||
</>
|
||||
import { useState } from "react";
|
||||
import "../../styles/layout/pregunta1.scss";
|
||||
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: number;
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
type PlatformKey =
|
||||
| "pc-desktop"
|
||||
| "apple-desktop"
|
||||
| "pc-laptop"
|
||||
| "apple-laptop"
|
||||
| "servers";
|
||||
|
||||
type PlatformData = Record<PlatformKey, OsEntry[]>;
|
||||
|
||||
const MOCK_DATA: PlatformData = {
|
||||
"pc-desktop": [
|
||||
{ os: "Windows 11", count: 408 },
|
||||
{ os: "Windows 10", count: 1171 },
|
||||
{ os: "Windows 7/8", count: 177 },
|
||||
{ os: "Windows XP/Vista", count: 43 },
|
||||
{ os: "Linux", count: 45 },
|
||||
{ os: "Total", count: 1844, isTotal: true },
|
||||
],
|
||||
"apple-desktop": [
|
||||
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
|
||||
{
|
||||
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
|
||||
count: 180,
|
||||
},
|
||||
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
|
||||
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
|
||||
{ os: "Total", count: 480, isTotal: true },
|
||||
],
|
||||
"pc-laptop": [
|
||||
{ os: "Windows 11", count: 40 },
|
||||
{ os: "Windows 10", count: 171 },
|
||||
{ os: "Windows 7/8", count: 17 },
|
||||
{ os: "Windows XP/Vista", count: 3 },
|
||||
{ os: "Linux", count: 5 },
|
||||
{ os: "Total", count: 236, isTotal: true },
|
||||
],
|
||||
"apple-laptop": [
|
||||
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
|
||||
{
|
||||
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
|
||||
count: 180,
|
||||
},
|
||||
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
|
||||
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
|
||||
{ os: "Total", count: 480, isTotal: true },
|
||||
],
|
||||
servers: [
|
||||
{
|
||||
os: "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
|
||||
count: 120,
|
||||
},
|
||||
{ os: "Unix (AIX, Mac OS Server, Solaris, etc.)", count: 80 },
|
||||
{ os: "Windows Server 2022/2023", count: 50 },
|
||||
{ os: "Windows Server 2016/2019", count: 80 },
|
||||
{ os: "Windows Server 2008/2012", count: 50 },
|
||||
{ os: "Windows Server 2000/2003", count: 12 },
|
||||
{ os: "Total", count: 392, isTotal: true },
|
||||
],
|
||||
};
|
||||
|
||||
const PLATFORM_LABELS: Record<PlatformKey, string> = {
|
||||
"pc-desktop": "Computadoras de escritorio Plataforma PC",
|
||||
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
|
||||
"pc-laptop": "Computadoras portátiles Plataforma PC",
|
||||
"apple-laptop": "Computadoras portátiles Plataforma Apple",
|
||||
servers: "Servidores de alto rendimiento",
|
||||
};
|
||||
|
||||
export default function Pregunta1() {
|
||||
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
|
||||
|
||||
const currentData = MOCK_DATA[activeTab];
|
||||
|
||||
return (
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
{/* Tabs */}
|
||||
<div className="tabs">
|
||||
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(key as PlatformKey)}
|
||||
aria-selected={activeTab === key}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? "total-row" : ""}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,82 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Pregunta1 from "@/components/Preguanta1"; // Asegúrate que el nombre del archivo sea correcto
|
||||
import Pregunta2 from "@/components/Pregunta2";
|
||||
import Pregunta9 from "@/components/Pregunta9";
|
||||
import { useState } from "react";
|
||||
import Pregunta1 from "@/components/Equipo_Computo/Pregunta1";
|
||||
import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1";
|
||||
import Pregunta2 from "@/components/Equipo_Computo/Pregunta2";
|
||||
import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1";
|
||||
import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
|
||||
import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1";
|
||||
import Pregunta3_2 from "@/components/Equipo_Computo/Pregunta3_2";
|
||||
import Pregunta3_3 from "@/components/Equipo_Computo/Pregunta3_3";
|
||||
import Pregunta3_4 from "@/components/Equipo_Computo/Pregunta3_4";
|
||||
import Pregunta3_5 from "@/components/Equipo_Computo/Pregunta3_5";
|
||||
import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
|
||||
import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
|
||||
import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
|
||||
import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
|
||||
import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
|
||||
import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
|
||||
import "../../styles/layout/reporte.scss";
|
||||
|
||||
type PreguntaKey =
|
||||
| "pregunta1_1"
|
||||
| "pregunta1"
|
||||
| "pregunta1EP"
|
||||
| "pregunta2"
|
||||
| "pregunta2_1"
|
||||
| "pregunta2EP"
|
||||
| "pregunta3"
|
||||
| "pregunta3_1"
|
||||
| "pregunta3_2"
|
||||
| "pregunta3_3"
|
||||
| "pregunta3_4"
|
||||
| "pregunta3_5"
|
||||
| "pregunta4EP"
|
||||
| "pregunta7"
|
||||
| "pregunta7EP"
|
||||
| "pregunta9";
|
||||
|
||||
const LABELS: Record<PreguntaKey, string> = {
|
||||
pregunta1_1: "Pregunta 1.1 ",
|
||||
pregunta1: "Pregunta 1",
|
||||
pregunta1EP: "Pregunta 1 EP",
|
||||
pregunta2: "Pregunta 2",
|
||||
pregunta2_1: "Pregunta 2.1",
|
||||
pregunta2EP: "Pregunta 2 EP",
|
||||
pregunta3: "Pregunta 3",
|
||||
pregunta3_1: "Pregunta 3.1",
|
||||
pregunta3_2: "Pregunta 3.2",
|
||||
pregunta3_3: "Pregunta 3.3",
|
||||
pregunta3_4: "Pregunta 3.4",
|
||||
pregunta3_5: "Pregunta 3.5",
|
||||
pregunta4EP: "Pregunta 4 EP",
|
||||
pregunta7: "Pregunta 7",
|
||||
pregunta7EP: "Pregunta 7 EP",
|
||||
pregunta9: "Pregunta 9",
|
||||
};
|
||||
|
||||
// Mapeo de fondo por pregunta (puedes personalizarlo)
|
||||
const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
|
||||
pregunta1: "bg-blue",
|
||||
pregunta1_1: "bg-gray",
|
||||
pregunta1EP: "bg-gray",
|
||||
pregunta2: "bg-gray",
|
||||
pregunta2_1: "bg-gray",
|
||||
pregunta2EP: "bg-gray",
|
||||
pregunta3: "bg-gray",
|
||||
pregunta3_1: "bg-gray",
|
||||
pregunta3_2: "bg-gray",
|
||||
pregunta3_3: "bg-gray",
|
||||
pregunta3_4: "bg-gray",
|
||||
pregunta3_5: "bg-gray",
|
||||
pregunta4EP: "bg-gray",
|
||||
pregunta7: "bg-gray",
|
||||
pregunta7EP: "bg-gray",
|
||||
pregunta9: "bg-blue",
|
||||
};
|
||||
|
||||
export default function Reporte() {
|
||||
const [isOpen1, setIsOpen1] = useState(true);
|
||||
const [isOpen2, setIsOpen2] = useState(true);
|
||||
const [isOpen9, setIsOpen9] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<PreguntaKey>("pregunta1");
|
||||
|
||||
const renderPregunta = () => {
|
||||
switch (activeTab) {
|
||||
case "pregunta1_1":
|
||||
return <Pregunta1_1 />;
|
||||
case "pregunta1":
|
||||
return <Pregunta1 />;
|
||||
case "pregunta1EP":
|
||||
return <Pregunta1EP />;
|
||||
case "pregunta2":
|
||||
return <Pregunta2 />;
|
||||
case "pregunta2_1":
|
||||
return <Pregunta2_1 />;
|
||||
case "pregunta2EP":
|
||||
return <Pregunta2EP />;
|
||||
case "pregunta3":
|
||||
return <Pregunta3 />;
|
||||
case "pregunta3_1":
|
||||
return <Pregunta3_1 />;
|
||||
case "pregunta3_2":
|
||||
return <Pregunta3_2 />;
|
||||
case "pregunta3_3":
|
||||
return <Pregunta3_3 />;
|
||||
case "pregunta3_4":
|
||||
return <Pregunta3_4 />;
|
||||
case "pregunta3_5":
|
||||
return <Pregunta3_5 />;
|
||||
case "pregunta4EP":
|
||||
return <Pregunta4EP />;
|
||||
case "pregunta7":
|
||||
return <Pregunta7 />;
|
||||
case "pregunta7EP":
|
||||
return <Pregunta7EP />;
|
||||
case "pregunta9":
|
||||
return <Pregunta9 />;
|
||||
default:
|
||||
return (
|
||||
<div className="p-6 text-center text-gray-500">
|
||||
Contenido no disponible aún.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const currentBgClass = TAB_BACKGROUNDS[activeTab] || "bg-gray";
|
||||
|
||||
return (
|
||||
<div className="reporte-container">
|
||||
<div className="reporte-contenido">
|
||||
{/* Pregunta 1 */}
|
||||
<div className="bloque-pregunta">
|
||||
<div className="accordion-header-wrapper">
|
||||
<button
|
||||
className="accordion-header"
|
||||
onClick={() => setIsOpen1(!isOpen1)}
|
||||
aria-expanded={isOpen1}
|
||||
aria-controls="accordion-pregunta1"
|
||||
>
|
||||
<span>Estadísticas de Plataformas</span>
|
||||
<span className={`toggle-icon ${isOpen1 ? "open" : ""}`}>▼</span>
|
||||
</button>
|
||||
<div className="scanView_reporte">
|
||||
|
||||
<div className="container_reporte">
|
||||
|
||||
|
||||
<div className="main-content_reporte">
|
||||
<div className="tabs_reporte">
|
||||
{Object.entries(LABELS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`tab_reporte ${activeTab === key ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(key as PreguntaKey)}
|
||||
aria-selected={activeTab === key}
|
||||
role="tab"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
id="accordion-pregunta1"
|
||||
className={`accordion-content ${isOpen1 ? "open" : ""}`}
|
||||
aria-hidden={!isOpen1}
|
||||
>
|
||||
<Pregunta1 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 2 */}
|
||||
<div className="bloque-pregunta">
|
||||
<div className="accordion-header-wrapper">
|
||||
<button
|
||||
className="accordion-header"
|
||||
onClick={() => setIsOpen2(!isOpen2)}
|
||||
aria-expanded={isOpen2}
|
||||
aria-controls="accordion-pregunta2"
|
||||
>
|
||||
<span>Pregunta 2</span> {/* ← Cambia el título */}
|
||||
<span className={`toggle-icon ${isOpen2 ? "open" : ""}`}>▼</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="accordion-pregunta2"
|
||||
className={`accordion-content ${isOpen2 ? "open" : ""}`}
|
||||
aria-hidden={!isOpen2}
|
||||
>
|
||||
<Pregunta2 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 9 */}
|
||||
<div className="bloque-pregunta">
|
||||
<div className="accordion-header-wrapper">
|
||||
<button
|
||||
className="accordion-header"
|
||||
onClick={() => setIsOpen9(!isOpen9)}
|
||||
aria-expanded={isOpen9}
|
||||
aria-controls="accordion-pregunta9"
|
||||
>
|
||||
<span>9. Calcule porcentualmente (%) la antigüedad que tienen los equipos de cómputo del área universitaria. *</span> {/* ← Título correcto */}
|
||||
<span className={`toggle-icon ${isOpen9 ? "open" : ""}`}>▼</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="accordion-pregunta9"
|
||||
className={`accordion-content ${isOpen9 ? "open" : ""}`}
|
||||
aria-hidden={!isOpen9}
|
||||
>
|
||||
<Pregunta9 />
|
||||
<div className={`data-table_reporte ${currentBgClass}`}>
|
||||
{renderPregunta()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
.editar{
|
||||
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.columna{
|
||||
display: flex ;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 2% 10% 20% 10%;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Estilos para los íconos de ayuda */
|
||||
.help-icon {
|
||||
color: #007bff;
|
||||
font-size: 12px;
|
||||
cursor: help;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +1,183 @@
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.accordion-content.open {
|
||||
max-height: 1000px; /* Ajusta si tienes más contenido */
|
||||
opacity: 1;
|
||||
}
|
||||
.accordion-header-wrapper {
|
||||
.scanView_reporte {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
background-color: #f5f5f5;
|
||||
border:none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-left: 6px solid #001f3f;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toggle-icon.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.reporte-page {
|
||||
.reporte-container {
|
||||
padding: 40px;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.titulo-reporte {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #002855;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.reporte-contenido {
|
||||
.container_reporte {
|
||||
width: calc(100% - 2%);
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.bloque-pregunta {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 25px;
|
||||
.header_reporte {
|
||||
padding: 16px 20px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.main-content_reporte {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs_reporte {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #f5f5f7;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ccc transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab_reporte {
|
||||
padding: 12px 22px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
border-radius: 10px 10px 0 0; /* como Example 3 */
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.25s ease;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #f4f4f4;
|
||||
border-color: #bbb;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
color: #9c27b0; /* tu color morado */
|
||||
border-color: #9c27b0; /* borde morado */
|
||||
font-weight: 600;
|
||||
box-shadow:
|
||||
0 -2px 6px rgba(0,0,0,0.05),
|
||||
inset 0 -3px 0 #fff; /* simula borde inferior */
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================
|
||||
CONTENIDO DEL TAB
|
||||
============================ */
|
||||
|
||||
.data-table_reporte {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f7;
|
||||
|
||||
border: none;
|
||||
min-height: 300px;
|
||||
animation: fadein 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
// ✅ Contenido del tab con fondo igual al tab activo
|
||||
.data-table_reporte {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
min-height: 0;// Separador entre tabs y contenido
|
||||
|
||||
// Aplicamos fondo azul cuando el tab activo es "pregunta1", "pregunta2", etc.
|
||||
// Puedes personalizar esto según necesites
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.data-row_reporte {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
transition: background 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.data-row_reporte:hover {
|
||||
background: #f1f1f1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.os-name_reporte {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.count-box_reporte {
|
||||
background: #ffffff;
|
||||
border: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
padding: 6px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.total-row_reporte {
|
||||
background: #eaf4ff !important;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 1px 0 rgba(0, 86, 179, 0.15);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== RESPONSIVE ======== */
|
||||
@media (max-width: 768px) {
|
||||
.scanView_reporte .container_reporte {
|
||||
width: calc(100% - 16px);
|
||||
max-width: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.scanView_reporte .tabs_reporte {
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.scanView_reporte .tab_reporte {
|
||||
min-width: 120px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import styles from "./pregunta1.module.scss";
|
||||
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: number;
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
type PlatformKey =
|
||||
| "pc-desktop"
|
||||
| "apple-desktop"
|
||||
| "pc-laptop"
|
||||
| "apple-laptop"
|
||||
| "servers";
|
||||
|
||||
type PlatformData = Record<PlatformKey, OsEntry[]>;
|
||||
|
||||
const MOCK_DATA: PlatformData = {
|
||||
"pc-desktop": [
|
||||
{ os: "Windows 11", count: 408 },
|
||||
{ os: "Windows 10", count: 1171 },
|
||||
{ os: "Windows 7/8", count: 177 },
|
||||
{ os: "Windows XP/Vista", count: 43 },
|
||||
{ os: "Linux", count: 45 },
|
||||
{ os: "Total", count: 1844, isTotal: true },
|
||||
],
|
||||
"apple-desktop": [
|
||||
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
|
||||
{
|
||||
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
|
||||
count: 180,
|
||||
},
|
||||
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
|
||||
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
|
||||
{ os: "Total", count: 480, isTotal: true },
|
||||
],
|
||||
"pc-laptop": [
|
||||
{ os: "Windows 11", count: 40 },
|
||||
{ os: "Windows 10", count: 171 },
|
||||
{ os: "Windows 7/8", count: 17 },
|
||||
{ os: "Windows XP/Vista", count: 3 },
|
||||
{ os: "Linux", count: 5 },
|
||||
{ os: "Total", count: 236, isTotal: true },
|
||||
],
|
||||
"apple-laptop": [
|
||||
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
|
||||
{
|
||||
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
|
||||
count: 180,
|
||||
},
|
||||
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
|
||||
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
|
||||
{ os: "Total", count: 480, isTotal: true },
|
||||
],
|
||||
servers: [
|
||||
{
|
||||
os: "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
|
||||
count: 120,
|
||||
},
|
||||
{ os: "Unix (AIX, Mac OS Server, Solaris, etc.)", count: 80 },
|
||||
{ os: "Windows Server 2022/2023", count: 50 },
|
||||
{ os: "Windows Server 2016/2019", count: 80 },
|
||||
{ os: "Windows Server 2008/2012", count: 50 },
|
||||
{ os: "Windows Server 2000/2003", count: 12 },
|
||||
{ os: "Total", count: 392, isTotal: true },
|
||||
],
|
||||
};
|
||||
|
||||
const PLATFORM_LABELS: Record<PlatformKey, string> = {
|
||||
"pc-desktop": "Computadoras de escritorio Plataforma PC",
|
||||
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
|
||||
"pc-laptop": "Computadoras portátiles Plataforma PC",
|
||||
"apple-laptop": "Computadoras portátiles Plataforma Apple",
|
||||
servers: "Servidores de alto rendimiento",
|
||||
};
|
||||
|
||||
export default function Pregunta1() {
|
||||
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
|
||||
|
||||
const currentData = MOCK_DATA[activeTab];
|
||||
|
||||
return (
|
||||
<div className={styles.scanView_P1}>
|
||||
<div className={styles.container_P1}>
|
||||
<div className={styles.header_P1}>
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className={styles["main-content_P1"]}>
|
||||
{/* Tabs */}
|
||||
<div className={styles.tabs_P1}>
|
||||
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`${styles.tab_P1} ${
|
||||
activeTab === key ? styles.active_P1 : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab(key as PlatformKey)}
|
||||
aria-selected={activeTab === key}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className={styles["data-table-wrapper_P1"]}>
|
||||
<div className={styles["data-table_P1"]}>
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles["data-row_P1"]} ${
|
||||
item.isTotal ? styles["total-row_P1"] : ""
|
||||
}`}
|
||||
>
|
||||
<div className={styles["os-name_P1"]}>{item.os}</div>
|
||||
<div className={styles["count-box_P1"]}>{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
import "./pregunta1_1.module.scss"
|
||||
|
||||
export default function Pregunta1_1() {
|
||||
return (
|
||||
<section>
|
||||
<div>
|
||||
<h1>Censo Equipos de computo</h1>
|
||||
<p className="instructions">
|
||||
Desglosa en cada renglon el número de equipos de cómputo dedicado por
|
||||
cada categoría enlistada, de acuerdo con el perfil del usuario al que
|
||||
se destina su uso primordialmente.
|
||||
</p>
|
||||
|
||||
<div className="container">
|
||||
|
||||
{/* ===================== */}
|
||||
{/* 1. COMPUTADORAS DE ESCRITORIO */}
|
||||
{/* ===================== */}
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Computadoras de escritorio</th>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Tecnicos Academicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{/* Windows */}
|
||||
<tr>
|
||||
<th>Windows</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Linux */}
|
||||
<tr>
|
||||
<th>Linux</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Mac OS */}
|
||||
<tr>
|
||||
<th>Mac OS</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Totales */}
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>10</th>
|
||||
<th>10</th>
|
||||
<th>10</th>
|
||||
<th>10</th>
|
||||
<th>10</th>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* ===================== */}
|
||||
{/* 2. COMPUTADORAS PORTÁTILES */}
|
||||
{/* ===================== */}
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Computadoras portátiles</th>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Tecnicos Academicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{/* Windows */}
|
||||
<tr>
|
||||
<th>Windows</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Chromebook */}
|
||||
<tr>
|
||||
<th>Chromebook</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Mac OS */}
|
||||
<tr>
|
||||
<th>Mac OS</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Totales */}
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* ===================== */}
|
||||
{/* 3. TABLETAS */}
|
||||
{/* ===================== */}
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tabletas</th>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Tecnicos Academicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{/* Android */}
|
||||
<tr>
|
||||
<th>Android</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* iPad IOS */}
|
||||
<tr>
|
||||
<th>iPad iOS</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
{/* Totales */}
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* ===================== */}
|
||||
{/* 4. ALTO RENDIMIENTO */}
|
||||
{/* ===================== */}
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Alto Rendimiento</th>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Tecnicos Academicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th>Servidores</th>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<td><input type="number" className="numero" /></td>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
|
||||
<th>10</th>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta2_1.module.scss"; // 👈 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,366 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3.css";
|
||||
|
||||
export default function Pregunta3() {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const tabs = [
|
||||
"Computadoras de escritorio Plataforma PC",
|
||||
"Computadoras de escritorio Plataforma Apple",
|
||||
"Computadoras portátiles Plataforma PC",
|
||||
"Computadoras portátiles Plataforma Apple",
|
||||
"Alto rendimiento Servidores",
|
||||
];
|
||||
|
||||
// === DATOS DE CADA TABLA ===
|
||||
const data = [
|
||||
// === 1. PC Escritorio ===
|
||||
{
|
||||
color: "#16a34a",
|
||||
headerColor: "#15803d",
|
||||
rows: [
|
||||
{
|
||||
tipo: "Core i9 / Ryzen 9",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Core i7 / Ryzen 7",
|
||||
alumnos: "15",
|
||||
profesores: "8",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "23",
|
||||
},
|
||||
{
|
||||
tipo: "Core i5 / Ryzen 5",
|
||||
alumnos: "10",
|
||||
profesores: "5",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "2",
|
||||
total: "17",
|
||||
},
|
||||
],
|
||||
total: {
|
||||
alumnos: "25",
|
||||
profesores: "13",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "2",
|
||||
total: "40",
|
||||
},
|
||||
},
|
||||
// === 2. Apple Escritorio ===
|
||||
{
|
||||
color: "#a855f7",
|
||||
headerColor: "#7e22ce",
|
||||
rows: [
|
||||
{
|
||||
tipo: "Familia M3",
|
||||
alumnos: "10",
|
||||
profesores: "2",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "12",
|
||||
},
|
||||
{
|
||||
tipo: "Familia M2",
|
||||
alumnos: "5",
|
||||
profesores: "3",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "8",
|
||||
},
|
||||
],
|
||||
total: {
|
||||
alumnos: "15",
|
||||
profesores: "5",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "20",
|
||||
},
|
||||
},
|
||||
// === 3. PC Portátiles ===
|
||||
{
|
||||
color: "#22c55e",
|
||||
headerColor: "#15803d",
|
||||
rows: [
|
||||
{
|
||||
tipo: "Core i5 (12a generación)",
|
||||
alumnos: "12",
|
||||
profesores: "5",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "17",
|
||||
},
|
||||
{
|
||||
tipo: "Core i7 (13a generación)",
|
||||
alumnos: "6",
|
||||
profesores: "4",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "11",
|
||||
},
|
||||
],
|
||||
total: {
|
||||
alumnos: "18",
|
||||
profesores: "9",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "28",
|
||||
},
|
||||
},
|
||||
// === 4. Apple Portátiles ===
|
||||
{
|
||||
color: "#9333ea",
|
||||
headerColor: "#7e22ce",
|
||||
rows: [
|
||||
{
|
||||
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: "i5 o equivalentes (12a generación en adelante)",
|
||||
alumnos: "",
|
||||
profesores: "14",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "",
|
||||
total: "14",
|
||||
},
|
||||
],
|
||||
total: {
|
||||
alumnos: "35",
|
||||
profesores: "31",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "5",
|
||||
total: "71",
|
||||
},
|
||||
},
|
||||
// === 5. Servidores ===
|
||||
{
|
||||
color: "#2563eb",
|
||||
headerColor: "#1e40af",
|
||||
rows: [
|
||||
{
|
||||
tipo: "Xeon E3, E5, E7",
|
||||
alumnos: "19",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "16",
|
||||
administrativos: "",
|
||||
total: "35",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 6a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Phi",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
},
|
||||
],
|
||||
total: {
|
||||
alumnos: "19",
|
||||
profesores: "0",
|
||||
tecnicos: "0",
|
||||
investigadores: "16",
|
||||
administrativos: "2",
|
||||
total: "37",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="pregunta-page">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5 - 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">
|
||||
{tabs.map((tab, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`tab ${activeTab === index ? "active" : "inactive"}`}
|
||||
style={
|
||||
activeTab === index
|
||||
? {
|
||||
borderBottomColor: data[index].color,
|
||||
color: data[index].color,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={() => setActiveTab(index)}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-container">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="header-procesador"
|
||||
style={{ backgroundColor: data[activeTab].color }}
|
||||
>
|
||||
Tipo de procesador
|
||||
</th>
|
||||
<th
|
||||
colSpan={5}
|
||||
className="header-poblacion"
|
||||
style={{ backgroundColor: data[activeTab].headerColor }}
|
||||
>
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="header-total"
|
||||
style={{ backgroundColor: data[activeTab].color }}
|
||||
>
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data[activeTab].rows.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<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={data[activeTab].total.alumnos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.profesores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.tecnicos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.investigadores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{data[activeTab].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,248 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3_1.css";
|
||||
|
||||
export default function pregunta3_1() {
|
||||
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 */}
|
||||
<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 */}
|
||||
<div className="tabla-wrapper">
|
||||
<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>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Técnicos Académicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input 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 value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input 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,270 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3_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,271 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3_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,257 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3_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="pregunta3-container">
|
||||
<h1 className="pregunta3-titulo">PREGUNTA 3 (4/5)</h1>
|
||||
|
||||
<div className="pregunta3-descripcion">
|
||||
<p>
|
||||
<strong>3.</strong> Desglose la cantidad de población beneficiada por
|
||||
plataforma y tipo de procesador:
|
||||
</p>
|
||||
<span className="subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tabs">
|
||||
<button className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</button>
|
||||
<button className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</button>
|
||||
<button className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</button>
|
||||
<button className="tab active">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</button>
|
||||
<button className="tab inactive">Alto rendimiento Servidores</button>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-wrapper">
|
||||
<table className="tabla-pregunta3">
|
||||
<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>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Técnicos Académicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>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="celda-total">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td>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="celda-total final">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="boton-siguiente">
|
||||
<Link href="/pregunta3.5" className="next">
|
||||
Pregunta 3 (5/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./pregunta3_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} className="tabla-fila">
|
||||
<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,89 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import "./pregunta7.css";
|
||||
|
||||
export default function Pregunta7() {
|
||||
const [datos, setDatos] = useState([
|
||||
{ nombre: "Impresión", valores: ["", "", "", ""] },
|
||||
{ nombre: "Digitalización", valores: ["", "", "", ""] },
|
||||
]);
|
||||
|
||||
const [garantia, setGarantia] = useState({
|
||||
escritorio: "",
|
||||
portatil: "",
|
||||
altoRendimiento: "",
|
||||
});
|
||||
|
||||
// Función para actualizar datos de Pregunta 7
|
||||
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 7
|
||||
const calcularTotal = (valores: string[]) =>
|
||||
valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
|
||||
|
||||
return (
|
||||
<div className="contenedor-pregunta">
|
||||
{/* Pregunta 7 */}
|
||||
<div className="contenedor-censo">
|
||||
Censo de equipos periféricos - Estado del equipo periférico (impresión y
|
||||
digitalización.)
|
||||
</div>
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
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.)
|
||||
</div>
|
||||
|
||||
<div className="tabla-contenedor">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">% Antiguedad de los equipos</th>
|
||||
<th className="rosa-fuerte">Menor a 2 años</th>
|
||||
<th className="rosa-fuerte">Entre 2 y 3 años</th>
|
||||
<th className="rosa-fuerte">Entre 4 y 5 años</th>
|
||||
<th className="rosa-fuerte">Mayor a 6 años</th>
|
||||
<th className="azul-marino">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{datos.map((fila, filaIndex) => {
|
||||
const total = calcularTotal(fila.valores);
|
||||
return (
|
||||
<tr key={filaIndex}>
|
||||
<td>{fila.nombre}</td>
|
||||
{fila.valores.map((valor, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
<div className="input-contenedor">
|
||||
<input
|
||||
type="number"
|
||||
value={valor}
|
||||
onChange={(e) =>
|
||||
handleChange(filaIndex, colIndex, e.target.value)
|
||||
}
|
||||
/>
|
||||
<span className="porcentaje">%</span>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`total-celda ${
|
||||
total > 100 ? "total-error" : ""
|
||||
}`}
|
||||
>
|
||||
{total.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
.dashboardContainer_P1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.scanView_P1 {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.container_P1 {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header_P1 {
|
||||
padding: 16px 20px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 15px;
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content_P1 {
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs_P1 {
|
||||
width: 230px;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.tab_P1 {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab_P1:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.active_P1 {
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #0056b3;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-table-wrapper_P1 {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-table_P1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-row_P1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #f9f9f9;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.data-row_P1:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.os-name_P1 {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-box_P1 {
|
||||
background: #ffffff;
|
||||
border: 1px solid #0056b3;
|
||||
padding: 6px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.total-row_P1 {
|
||||
background: #eaf4ff;
|
||||
font-weight: bold;
|
||||
|
||||
.count-box_P1 {
|
||||
color: #0056b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.scanView_P1 .tabs_P1 {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.scanView_P1 .tab_P1 {
|
||||
font-size: 12px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
+16
-21
@@ -50,18 +50,18 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: auto 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
padding: 12px 16px; /* ← CORREGIDO: "auto" no es válido */
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #f0f0f0;
|
||||
@@ -127,18 +127,13 @@
|
||||
|
||||
/* ======== RESPONSIVE ======== */
|
||||
@media (max-width: 700px) {
|
||||
.scanView .main-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scanView .tabs {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.scanView .tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -93,7 +93,6 @@
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #0056b3;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/* Contenedor principal del reporte */
|
||||
.reporte-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
padding: 20px;
|
||||
max-width: 1400px;
|
||||
margin: 0 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Panel izquierdo */
|
||||
.panel-izquierdo {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Panel derecho */
|
||||
.panel-derecho {
|
||||
width: 320px;
|
||||
min-width: 280px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.titulo-reporte {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* Buscador */
|
||||
.formBuscar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabla de reporte */
|
||||
.tabla-rec {
|
||||
border: 2px solid #0056b3;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Filtro */
|
||||
.filtro-rec {
|
||||
border: 2px solid #0056b3;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
font-family: Arial, sans-serif;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.titulo-rec {
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-top: 4px;
|
||||
border: 1px solid #0056b3;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Botones del filtro */
|
||||
.botones-filtro {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
|
||||
.aplicar,
|
||||
.limpiar {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplicar {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.limpiar {
|
||||
background-color: #ffb700;
|
||||
color: #0056b3;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Botón descargar */
|
||||
.boton-descargar {
|
||||
margin-top: 25px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/* === CONTENEDOR GENERAL === */
|
||||
.pregunta-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pregunta-container {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #1e3a8a;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.6rem;
|
||||
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 {
|
||||
font-weight: 600;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-container {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tabla th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla .sub-header {
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
|
||||
.tabla td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla tr:hover td {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.total-celda {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
|
||||
.fila-total td {
|
||||
background-color: #e0e7ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
margin-top: 1rem;
|
||||
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;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 4rem;
|
||||
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,171 @@
|
||||
/* === CONTENEDOR GENERAL === */
|
||||
.pregunta-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.pregunta-container {
|
||||
width: 90%;
|
||||
max-width: 1100px;
|
||||
background-color: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* === TITULOS === */
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #0a2d6e;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
border-bottom: 3px solid #d1d5db;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-right: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1e40af;
|
||||
border: 2px solid #1e40af;
|
||||
border-bottom: none;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-wrapper {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tabla-pc {
|
||||
border-collapse: collapse;
|
||||
width: 95%;
|
||||
text-align: center;
|
||||
font-size: 0.83rem;
|
||||
}
|
||||
|
||||
.tabla-pc th,
|
||||
.tabla-pc td {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.header-procesador,
|
||||
.header-total {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-poblacion {
|
||||
background-color: #9333ea;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-pc th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tipo-procesador {
|
||||
text-align: left;
|
||||
background-color: #f9fafb;
|
||||
font-weight: 600;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.tabla-pc input {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.total-celda {
|
||||
background-color: #e0f2fe;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.fila-total td {
|
||||
background-color: #bfdbfe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
margin-top: 1rem;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
text-align: right;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #1e3a8a;
|
||||
}
|
||||
@@ -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,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,166 @@
|
||||
/* === CONTENEDOR GENERAL === */
|
||||
.pregunta3-container {
|
||||
max-width: 1100px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.pregunta3-titulo {
|
||||
text-align: left;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #6d28d9;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pregunta3-descripcion p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* === TABS === */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0 1.5rem;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #f3f4f6;
|
||||
color: #7e22ce;
|
||||
border-bottom: 3px solid #9333ea;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
background: #f9fafb;
|
||||
color: #9333ea;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-wrapper {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 th,
|
||||
.tabla-pregunta3 td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.header-procesador,
|
||||
.header-total {
|
||||
background-color: #9333ea;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-poblacion {
|
||||
background-color: #7e22ce;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 th {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 input {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tipo-procesador {
|
||||
text-align: left;
|
||||
background-color: #faf5ff;
|
||||
font-weight: 500;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.celda-total {
|
||||
background-color: #f3e8ff;
|
||||
font-weight: 600;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
.fila-total td {
|
||||
background-color: #e9d5ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fila-total .celda-total.final {
|
||||
background-color: #d8b4fe;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-siguiente {
|
||||
text-align: right;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.next {
|
||||
background-color: #9333ea;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.next:hover {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
/* === ESTILOS PREGUNTA 3 (5/5) - Alto Rendimiento Servidores === */
|
||||
|
||||
.pregunta-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.pregunta-container {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 2rem 2.5rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #2563eb;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
border-bottom: 3px solid #2563eb;
|
||||
display: inline-block;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
/* === 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;
|
||||
box-shadow: inset 0 -2px 4px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #2563eb;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-servidores-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-servidores {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: #ffffff;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.tabla-fila:hover td {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tabla-servidores .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.7rem;
|
||||
background-color: #eff6ff;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f9fafb;
|
||||
text-align: center;
|
||||
color: #374151;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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,137 @@
|
||||
.contenedor-pregunta {
|
||||
padding: 20px;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.contenedor-censo{
|
||||
background-color: #002855;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "./pregunta1EP.module.scss";
|
||||
|
||||
interface EquiposImpresion {
|
||||
inyeccionTinta: string;
|
||||
laserPequenaBN: string;
|
||||
matrizPuntos: string;
|
||||
laserAltoVolumenBN: string;
|
||||
laserPequenaColor: string;
|
||||
multifuncionales: string;
|
||||
laserAltoVolumenColor: string;
|
||||
impresora3D: string;
|
||||
plotter: string;
|
||||
}
|
||||
|
||||
export default function Pregunta1EP() {
|
||||
const [equipos, setEquipos] = useState<EquiposImpresion>({
|
||||
inyeccionTinta: "7",
|
||||
laserPequenaBN: "186",
|
||||
matrizPuntos: "",
|
||||
laserAltoVolumenBN: "28",
|
||||
laserPequenaColor: "20",
|
||||
multifuncionales: "108",
|
||||
laserAltoVolumenColor: "18",
|
||||
impresora3D: "2",
|
||||
plotter: "11",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectar con API del backend
|
||||
useEffect(() => {
|
||||
// Cuando te den la API, descomenta y edita la URL 👇
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-impresion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
1. Desglose el número de equipos de impresión con que cuenta el área
|
||||
universitaria.
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
{/* Columna 1 */}
|
||||
<div className="item">
|
||||
<label htmlFor="inyeccionTinta">Inyección de tinta</label>
|
||||
<input
|
||||
type="text"
|
||||
id="inyeccionTinta"
|
||||
name="inyeccionTinta"
|
||||
value={equipos.inyeccionTinta}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaBN">Láser pequeña B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaBN"
|
||||
name="laserPequenaBN"
|
||||
value={equipos.laserPequenaBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="matrizPuntos">Matriz de puntos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="matrizPuntos"
|
||||
name="matrizPuntos"
|
||||
value={equipos.matrizPuntos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenBN">Láser de alto volumen B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenBN"
|
||||
name="laserAltoVolumenBN"
|
||||
value={equipos.laserAltoVolumenBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaColor">Láser pequeña Color</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaColor"
|
||||
name="laserPequenaColor"
|
||||
value={equipos.laserPequenaColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="multifuncionales">Multifuncionales</label>
|
||||
<input
|
||||
type="text"
|
||||
id="multifuncionales"
|
||||
name="multifuncionales"
|
||||
value={equipos.multifuncionales}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenColor">
|
||||
Láser de alto volumen Color
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenColor"
|
||||
name="laserAltoVolumenColor"
|
||||
value={equipos.laserAltoVolumenColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="impresora3D">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="impresora3D"
|
||||
name="impresora3D"
|
||||
value={equipos.impresora3D}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="plotter">Plotter</label>
|
||||
<input
|
||||
type="text"
|
||||
id="plotter"
|
||||
name="plotter"
|
||||
value={equipos.plotter}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styles from "./pregunta2EP.module.scss";
|
||||
|
||||
interface EquiposPoblacion {
|
||||
alumnos: string;
|
||||
profesores: string;
|
||||
tecnicosAcademicos: string;
|
||||
investigadores: string;
|
||||
administrativos: string;
|
||||
total: string;
|
||||
}
|
||||
|
||||
export default function Pregunta2EP() {
|
||||
const [equipos, setEquipos] = useState<EquiposPoblacion>({
|
||||
alumnos: "35",
|
||||
profesores: "43",
|
||||
tecnicosAcademicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "302",
|
||||
total: "380",
|
||||
});
|
||||
|
||||
// Listo para conectar al backend
|
||||
useEffect(() => {
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-poblacion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container_P2}>
|
||||
<div className={styles.header_P2}>
|
||||
<span className={styles.required_P2}>*</span>
|
||||
<small>(Requerido en el caso de contar con Equipo de impresión)</small>
|
||||
</div>
|
||||
|
||||
<div className={styles.row_P2}>
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="alumnos">Alumnos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="alumnos"
|
||||
name="alumnos"
|
||||
value={equipos.alumnos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="profesores">
|
||||
Profesores <span className={styles.helpIcon_P2}>?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="profesores"
|
||||
name="profesores"
|
||||
value={equipos.profesores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="tecnicosAcademicos">Técnicos Académicos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tecnicosAcademicos"
|
||||
name="tecnicosAcademicos"
|
||||
value={equipos.tecnicosAcademicos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="investigadores">
|
||||
Investigadores <span className={styles.helpIcon_P2}>?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="investigadores"
|
||||
name="investigadores"
|
||||
value={equipos.investigadores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="administrativos">
|
||||
Administrativos <span className={styles.helpIcon_P2}>?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="administrativos"
|
||||
name="administrativos"
|
||||
value={equipos.administrativos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.item_P2}>
|
||||
<label htmlFor="total">Total</label>
|
||||
<input
|
||||
type="text"
|
||||
id="total"
|
||||
name="total"
|
||||
value={equipos.total}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../app/styles/layout/pregunta4EP.scss";
|
||||
|
||||
interface EquiposDigitalizacion {
|
||||
digitalizadorCamaPlana: string;
|
||||
digitalizador3d: string;
|
||||
digitalizadorAlimentador: string;
|
||||
digitalizadorGranVolumen: string;
|
||||
}
|
||||
|
||||
export default function Pregunta4EP() {
|
||||
const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
|
||||
digitalizadorCamaPlana: "27",
|
||||
digitalizador3d: "",
|
||||
digitalizadorAlimentador: "108",
|
||||
digitalizadorGranVolumen: "1",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectar con el backend
|
||||
useEffect(() => {
|
||||
// Cuando tengas la API, descomenta y reemplaza la URL:
|
||||
/*
|
||||
fetch("https://tu-api-backend.com/api/equipos-digitalizacion")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setEquipos(data))
|
||||
.catch((err) => console.error("Error al obtener datos:", err));
|
||||
*/
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header-bar">
|
||||
Censo de equipos periféricos - Equipo de digitalización
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorCamaPlana">
|
||||
Digitalizador de cama plana para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorCamaPlana"
|
||||
name="digitalizadorCamaPlana"
|
||||
value={equipos.digitalizadorCamaPlana}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizador3d">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizador3d"
|
||||
name="digitalizador3d"
|
||||
value={equipos.digitalizador3d}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorAlimentador">
|
||||
Digitalizador con alimentador de hojas para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorAlimentador"
|
||||
name="digitalizadorAlimentador"
|
||||
value={equipos.digitalizadorAlimentador}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorGranVolumen">
|
||||
Digitalizador de gran volumen
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorGranVolumen"
|
||||
name="digitalizadorGranVolumen"
|
||||
value={equipos.digitalizadorGranVolumen}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../app/styles/layout/pregunta7.scss";
|
||||
|
||||
interface Dato {
|
||||
nombre: string;
|
||||
cantidad: number;
|
||||
}
|
||||
|
||||
const datosSimulados: Dato[] = [
|
||||
{ nombre: "AULA DE ROBÓTICA 101", cantidad: 18 },
|
||||
{ nombre: "LAB DE QUÍMICA 201", cantidad: 25 },
|
||||
{ nombre: "LAB DE FÍSICA 202", cantidad: 30 },
|
||||
{ nombre: "LAB DE PROGRAMACIÓN 301", cantidad: 40 },
|
||||
{ nombre: "AULA DE DISEÑO 102", cantidad: 22 },
|
||||
{ nombre: "LAB ELECTRÓNICA 204", cantidad: 35 },
|
||||
{ nombre: "LAB COMPUTACIÓN 305", cantidad: 28 },
|
||||
{ nombre: "AULA INTERACTIVA 106", cantidad: 15 },
|
||||
{ nombre: "LAB DE INNOVACIÓN 307", cantidad: 33 },
|
||||
{ nombre: "SALA DE CONFERENCIAS A", cantidad: 12 },
|
||||
{ nombre: "LAB DE MECATRÓNICA 308", cantidad: 45 },
|
||||
{ nombre: "LAB DE INTELIGENCIA ARTIFICIAL 309", cantidad: 38 },
|
||||
{ nombre: "LAB DE REDES 310", cantidad: 27 },
|
||||
{ nombre: "SALA MULTIMEDIA B", cantidad: 20 },
|
||||
{ nombre: "LAB DE BIOLOGÍA 205", cantidad: 26 },
|
||||
{ nombre: "LAB DE MECÁNICA 210", cantidad: 32 },
|
||||
{ nombre: "AULA DE INGLÉS 110", cantidad: 19 },
|
||||
{ nombre: "SALA DE DOCENTES", cantidad: 14 },
|
||||
{ nombre: "LAB DE BIG DATA 311", cantidad: 36 },
|
||||
{ nombre: "LAB DE CIBERSEGURIDAD 312", cantidad: 29 },
|
||||
];
|
||||
|
||||
export default function Pregunta7EP() {
|
||||
const [data, setData] = useState<Dato[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [recordsPerPage, setRecordsPerPage] = useState<number>(10);
|
||||
const [sortColumn, setSortColumn] = useState<keyof Dato | null>(null);
|
||||
const [sortAsc, setSortAsc] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
setData(datosSimulados);
|
||||
}, []);
|
||||
|
||||
const sortedData = React.useMemo(() => {
|
||||
if (!sortColumn) return data;
|
||||
return [...data].sort((a, b) => {
|
||||
if (a[sortColumn] < b[sortColumn]) return sortAsc ? -1 : 1;
|
||||
if (a[sortColumn] > b[sortColumn]) return sortAsc ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [data, sortColumn, sortAsc]);
|
||||
|
||||
const paginatedData = React.useMemo(() => {
|
||||
const start = (currentPage - 1) * recordsPerPage;
|
||||
return sortedData.slice(start, start + recordsPerPage);
|
||||
}, [sortedData, currentPage, recordsPerPage]);
|
||||
|
||||
const totalPages = Math.ceil(sortedData.length / recordsPerPage);
|
||||
|
||||
const handleSort = (column: keyof Dato) => {
|
||||
if (sortColumn === column) {
|
||||
setSortAsc(!sortAsc);
|
||||
} else {
|
||||
setSortColumn(column);
|
||||
setSortAsc(true);
|
||||
}
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const handleRecordsPerPageChange = (
|
||||
e: React.ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
setRecordsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const startItem = (currentPage - 1) * recordsPerPage + 1;
|
||||
const endItem = Math.min(startItem + recordsPerPage - 1, sortedData.length);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="controls">
|
||||
<div className="show-records">
|
||||
Mostrar
|
||||
<select value={recordsPerPage} onChange={handleRecordsPerPageChange}>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={25}>25</option>
|
||||
</select>
|
||||
registros
|
||||
</div>
|
||||
<div className="results-info">
|
||||
Mostrando {startItem} al {endItem} de {sortedData.length} resultados
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th onClick={() => handleSort("nombre")}>
|
||||
Nombre del laboratorio o aula
|
||||
{sortColumn === "nombre" && (
|
||||
<img
|
||||
src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
|
||||
alt="orden"
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
|
||||
<th onClick={() => handleSort("cantidad")}>
|
||||
Cantidad
|
||||
{sortColumn === "cantidad" && (
|
||||
<img
|
||||
src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
|
||||
alt="orden"
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{paginatedData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.nombre}</td>
|
||||
<td>{item.cantidad}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={page === currentPage ? "active" : ""}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
.dashboardContainer_P1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.scanView_P1 {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
|
||||
.container_P1 {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header_P1 {
|
||||
padding: 16px 20px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 15px;
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content_P1 {
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs_P1 {
|
||||
width: 230px;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.tab_P1 {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab_P1:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.active_P1 {
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #0056b3;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-table-wrapper_P1 {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-table_P1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-row_P1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #f9f9f9;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.data-row_P1:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.os-name_P1 {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-box_P1 {
|
||||
background: #ffffff;
|
||||
border: 1px solid #0056b3;
|
||||
padding: 6px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.total-row_P1 {
|
||||
background: #eaf4ff;
|
||||
font-weight: bold;
|
||||
|
||||
.count-box_P1 {
|
||||
color: #0056b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.scanView_P1 .tabs_P1 {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.scanView_P1 .tab_P1 {
|
||||
font-size: 12px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.container_P2 {
|
||||
max-width: 1000px;
|
||||
margin: 2% 10% 20% 10%;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f5ff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.helpIcon_P2 {
|
||||
color: #007bff;
|
||||
font-size: 12px;
|
||||
cursor: help;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.header_P2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
|
||||
.required_P2 {
|
||||
color: #d9534f;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.row_P2 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item_P2 {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.row_P2 {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import "../app/styles/layout/pregunta1.scss";
|
||||
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: string;
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
const MOCK_DATA = {
|
||||
"pc-desktop": [
|
||||
{ os: "Windows 11", count: "408" },
|
||||
{ os: "Windows 10", count: "1171" },
|
||||
{ os: "Windows 7/8", count: "177" },
|
||||
{ os: "Windows XP/Vista", count: "43" },
|
||||
{ os: "Linux", count: "45" },
|
||||
{ os: "Total", count: "1844", isTotal: true },
|
||||
],
|
||||
"apple-desktop": [
|
||||
{ os: "Mac OS X(13 - Ventura, 14 - Sonoma)", count: "205" },
|
||||
{
|
||||
os: "Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)",
|
||||
count: "180",
|
||||
},
|
||||
{ os: "Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)", count: "95" },
|
||||
{ os: "Mac OS X(Snow Leopard,Mountain Lion,Mavericks)", count: "6" },
|
||||
{ os: "Total", count: "480", isTotal: true },
|
||||
],
|
||||
"pc-laptop": [
|
||||
{ os: "Windows 11", count: "40" },
|
||||
{ os: "Windows 10", count: "171" },
|
||||
{ os: "Windows 7/8", count: "17" },
|
||||
{ os: "Windows XP/Vista", count: "3" },
|
||||
{ os: "Linux", count: "5" },
|
||||
{ os: "Total", count: "236", isTotal: true }, // corregido
|
||||
],
|
||||
"apple-laptop": [
|
||||
{ os: "Mac OS X(13 - Ventura, 14 - Sonoma)", count: "205" },
|
||||
{
|
||||
os: "Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)",
|
||||
count: "180",
|
||||
},
|
||||
{ os: "Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)", count: "95" },
|
||||
{ os: "Mac OS X(Snow Leopard,Mountain Lion,Mavericks)", count: "6" },
|
||||
{ os: "Total", count: "480", isTotal: true },
|
||||
],
|
||||
servers: [
|
||||
{
|
||||
os: "Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)",
|
||||
count: "120",
|
||||
},
|
||||
{ os: "Unix (AIX,MAC OS Server,Solaris,entre otros)", count: "80" },
|
||||
{ os: "Windows Server 2022/2023", count: "50" },
|
||||
{ os: "Windows Server 2016/2019", count: "80" },
|
||||
{ os: "Windows Server 2008/2012", count: "50" },
|
||||
{ os: "Windows Server 2000/2003", count: "12" },
|
||||
{ os: "Total", count: "392", isTotal: true }, // corregido también
|
||||
],
|
||||
};
|
||||
|
||||
const PLATFORM_LABELS: Record<string, string> = {
|
||||
"pc-desktop": "Computadoras de escritorio Plataforma PC",
|
||||
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
|
||||
"pc-laptop": "Computadoras portátiles Plataforma PC",
|
||||
"apple-laptop": "Computadoras portátiles Plataforma Apple",
|
||||
servers: "Servidores de alto rendimiento",
|
||||
};
|
||||
|
||||
const Pregunta1 = () => {
|
||||
const [activeTab, setActiveTab] =
|
||||
useState<keyof typeof MOCK_DATA>("pc-desktop");
|
||||
const currentData = MOCK_DATA[activeTab];
|
||||
|
||||
return (
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
<div className="tabs">
|
||||
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(key as keyof typeof MOCK_DATA)}
|
||||
aria-selected={activeTab === key}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? "total-row" : ""}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pregunta1;
|
||||
Reference in New Issue
Block a user