diff --git a/index.html b/index.html
index a796d66b1f35275ec18cb3226ba64294f8587595..78a71265fa81932bdccfb5a9b2c5769be4137776 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,9 @@
<!DOCTYPE html>
-<html lang="es">
+<html>
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Estructura con IDs</title>
+ <title>Estadisticas C.D.ABANTO</title>
<link rel="stylesheet" href="styles.css">
+ <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="contenedor-superior">
@@ -19,9 +18,10 @@
<div id="contenedor-principal">
<div id="resto-pantalla"></div>
<div id="vertical-derecha">
- <div id="div-superior">Datos Temporada</div>
+ <div id="div-superior" onclick="mostrarVisualizacion()">Datos Temporada</div>
<div id="div-inferior">Rendimiento Jugadores</div>
</div>
</div>
+ <script src="script.js"></script>
</body>
</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..c368e84b8be20944cc5d4b6c05063712600bc32a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,95 @@
+// Función para restaurar el div #resto-pantalla a su forma original
+function restaurarFormaOriginal() {
+ d3.select("#resto-pantalla")
+ .style("display", "flex") // Vuelve al diseño original
+ .style("flex-direction", "row") // Configuración predeterminada de flexbox
+ .selectAll(".sector")
+ .remove(); // Elimina todos los sectores dentro del div
+}
+
+// Nueva función: datosTemporada (antes dividirEnSectores)
+function datosTemporada() {
+ const restoPantalla = d3.select("#resto-pantalla");
+
+ // Limpia cualquier contenido previo
+ restoPantalla.selectAll("*").remove();
+
+ // Configuración de cuadrÃcula
+ restoPantalla
+ .style("display", "grid") // Cambia a diseño de cuadrÃcula
+ .style("grid-template-columns", "1fr 1fr") // Dos columnas iguales
+ .style("grid-template-rows", "1fr 1fr") // Dos filas iguales
+ .style("gap", "0"); // Sin espacio entre sectores
+
+ // Datos para los cuatro sectores con tÃtulos
+ const data = [
+ { title: "Victorias/Derrotas", content: "" },
+ { title: "Número total de puntos", content: "" },
+ { title: "Posición Final", content: "" },
+ { title: "Porcentaje de tiro", content: "" },
+ ];
+
+ // Crear los sectores con tÃtulos
+ restoPantalla
+ .selectAll(".sector")
+ .data(data)
+ .enter()
+ .append("div")
+ .attr("class", "sector") // Clase para estilos en CSS
+ .style("border", "1px solid black") // Opcional, para mejor visualización
+ .style("background-color", "#4FC3F7") // Color de fondo
+ .style("display", "flex") // Centra el contenido del sector
+ .style("flex-direction", "column") // Alineación en columna para tÃtulo y contenido
+ .style("align-items", "flex-start") // Alineación horizontal del tÃtulo a la izquierda
+ .style("justify-content", "flex-start") // Alineación vertical al principio
+ .style("padding", "10px") // Espaciado interno
+ .each(function (d) {
+ // Agregar tÃtulo en la parte superior izquierda
+ d3.select(this)
+ .append("div")
+ .attr("class", "sector-title")
+ .style("font-weight", "bold")
+ .style("font-size", "1.2em")
+ .style("margin-bottom", "10px")
+ .text(d.title);
+
+ // Espacio reservado para contenido adicional (puedes agregar contenido dinámico aquÃ)
+ d3.select(this)
+ .append("div")
+ .attr("class", "sector-content")
+ .style("flex", "1") // Ocupa el resto del espacio
+ .text(d.content);
+ });
+}
+
+
+// Función para mostrar la estructura de rendimiento de jugadores
+function rendimientoJugadores() {
+ const restoPantalla = d3.select("#resto-pantalla");
+
+ // Limpia cualquier contenido previo
+ restoPantalla.selectAll("*").remove();
+
+ // Crear div a la izquierda (de arriba a abajo)
+ restoPantalla
+ .append("div")
+ .attr("id", "lado-izquierdo");
+
+ // Crear div a la derecha (resto del espacio)
+ restoPantalla
+ .append("div")
+ .attr("id", "lado-derecho");
+}
+
+
+// Evento para el click en el div superior
+d3.select("#div-superior").on("click", () => {
+ restaurarFormaOriginal(); // Asegúrate de empezar desde la forma original
+ datosTemporada(); // Divide en sectores y añade tÃtulos
+});
+
+// Evento para el click en el div inferior
+d3.select("#div-inferior").on("click", () => {
+ restaurarFormaOriginal(); // Vuelve a la forma original
+ rendimientoJugadores(); // Estructura para rendimiento de jugadores
+});
diff --git a/styles.css b/styles.css
index c3b02ac127992b2453ab2d74c2af5af7e4415566..2d5ddac0a1ddc8b1f232274d315afcc9b1c82b2f 100644
--- a/styles.css
+++ b/styles.css
@@ -78,11 +78,65 @@ body {
margin-right: 10px;
color: white;
font-size: 1.5em;
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex; /* Establece flex para dividir en fila */
+ flex-direction: row; /* Divide los hijos en una fila horizontal */
+ align-items: stretch; /* Los hijos ocupan toda la altura */
+ justify-content: stretch; /* Los hijos ocupan todo el ancho */
+ border: 1px solid black;
+ overflow: hidden; /* Evita que el contenido exceda el tamaño del contenedor */
+ box-sizing: border-box; /* Asegura que padding y bordes se incluyan en el tamaño */
+ width: 100%; /* Asegura que no exceda el ancho del contenedor principal */
+ .sector {
+ width: 100%; /* Ancho completo */
+ height: 100%; /* Alto completo */
+ display: flex; /* Centra el contenido */
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2em;
+ font-weight: bold;
+ border: 1px solid black; /* Opcional, para mejor visualización */
+ }
+ .sector-title {
+ font-size: 1.2em;
+ font-weight: bold;
+ color: black;
+ }
+
+ .sector-content {
+ font-size: 1em;
+ color: black;
+ margin-top: 10px; /* Espacio entre tÃtulo y contenido */
+ }
+
+}
+
+/* Div izquierdo (ocupa de arriba a abajo) */
+#lado-izquierdo {
+ flex: 1; /* Ocupa el 30% del espacio */
+ background-color: #D1C4E9; /* Fondo lila claro */
+ border: 1px solid black; /* Borde de separación */
+ display: flex; /* Si tiene contenido, lo organiza con flex */
+ flex-direction: column; /* Coloca los elementos en columna */
+ height: 100%; /* Asegura que ocupe toda la altura */
+ padding: 10px; /* Espaciado interno */
+ box-sizing: border-box; /* Incluye padding en el tamaño total */
+ max-width: 30%; /* Garantiza que no exceda el 30% del ancho */
}
+/* Div derecho (ocupa el resto del espacio) */
+#lado-derecho {
+ flex: 3; /* Ocupa el 70% restante del espacio */
+ background-color: #FFFFFF; /* Fondo blanco */
+ border: 1px solid black;
+ display: flex; /* Si tiene contenido, lo organiza con flex */
+ flex-direction: column; /* Coloca los elementos en columna */
+ height: 100%; /* Asegura que ocupe toda la altura */
+ padding: 10px; /* Espaciado interno */
+ box-sizing: border-box; /* Incluye padding en el tamaño total */
+ max-width: 70%; /* Garantiza que no exceda el 70% del ancho */
+}
+
+
/* Div vertical derecho */
#vertical-derecha {
background-color: #0288D1;
@@ -109,4 +163,4 @@ body {
#div-superior:hover, #div-inferior:hover {
background-color: #B3E5FC;
color: #0288D1;
-}
+}
\ No newline at end of file