ultimos cambios

src/clasificacion/clasificacion.css

@@ -2,6 +2,7 @@ body {
     margin: 0;
     padding: 0;
     height: 1000px;
+    width: 100%;
     display: flex;
     flex-direction: column;
 }
@@ -32,7 +33,7 @@ body {
     text-align: center;
     background-color: #38003C; 
     margin-bottom: 0px;
-    height: 20%;
+    width: 100%;
   }
 
 h1 {
@@ -47,7 +48,7 @@ h4 {
     color: #00FF85;
     font-size: 25px;
     margin-top: 10px;
-    padding-bottom: 30px;
+    
 }
 
 h3 {
@@ -100,7 +101,6 @@ h3 {
 }
 
 .table {
-    width: 100%;
     height: 100%;
     border-collapse: collapse;
     margin-top: 20px;
@@ -114,9 +114,10 @@ h3 {
     display: flex;
     justify-content: space-between;
     margin-top: 25px;
-    margin-left: 200px;
-    margin-right: 200px;
+    margin-left: 150px;
     border-radius: 30px;
+    height: 15%;
+    width: 80%;
 }
 
 
@@ -128,6 +129,7 @@ h3 {
 
 #season {
     margin-right: 50px;
+    margin-left: 50px;
     margin-top: 60px;
     font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif;
     font-size: 35px;
@@ -151,6 +153,7 @@ h3 {
     align-items: center;
     height: 100%;
     margin-top: 20px;
+    width: 80%;
 }
 
 svg {
@@ -171,6 +174,7 @@ svg {
     display: flex;
     justify-content: center;
     align-items: center;
+    width: 100%;
 }
 
 

src/equipo/equipo.css

@@ -32,7 +32,7 @@ body {
     text-align: center;
     background-color: #38003C; 
     margin-bottom: 0px;
-    height: 20%;
+    width: 100%;
   }
 
 h1 {
@@ -47,7 +47,6 @@ h4 {
     color: #00FF85;
     font-size: 25px;
     margin-top: 10px;
-    padding-bottom: 30px;
 }
 
 h3 {
@@ -241,7 +240,7 @@ option {
     
     margin-left: 100px;
     margin-right: 100px;
-    
+    width: 85%;
 }
 
 #teamTitle {
@@ -274,6 +273,7 @@ option {
     justify-content: center;
     align-items: center;
     margin: 0 auto;
+    margin-top: 70px;
 }
 
 
@@ -307,3 +307,7 @@ option {
       font-weight: 500;
     color: #081F2C;
   }
+
+#svg{
+    margin-left: 100px;
+}
\ No newline at end of file

src/equipo/equipo.html

@@ -34,7 +34,8 @@
                     <h2 id="subHeaderTitle">stats Equipo</h2>
                     <div class="inputs">
                         <label for="seasonInput">Temporada (Año de fin)</label>
-                        <input type="text" id="seasonInput" name="season" value="2024" oninput="onChangeSeason()">
+                        <input type="number" id="seasonInput" name="season" value="2024"  min="1993" max="2024" oninput="onChangeSeason()">
+                        <div id="error-message" style="color: red; display: none; margin-top: 100px; position: absolute; font-family: aptos";">La temporada debe ser mayor o igual a 1993.</div>
                     </div>
                     <div class="inputs">
                         <label for="teamSelect">Equipo</label>

src/equipo/equipo.js

@@ -11,6 +11,14 @@ document.addEventListener('DOMContentLoaded', function() {
     // Actualiza el select de equipos
     function onChangeSeason() {
         var selectedSeason = document.getElementById("seasonInput").value;
+        var errorMessage = document.getElementById("error-message");
+
+        if (selectedSeason < 1993 || selectedSeason > 2024) {
+            errorMessage.style.display = "block";
+            return; // Salir de la función si hay un error
+        } else {
+            errorMessage.style.display = "none";
+        }
 
         d3.csv("/data/premier-tables.csv").then(function(data) {
             data.forEach(function(d) {
@@ -58,8 +66,8 @@ document.addEventListener('DOMContentLoaded', function() {
         ];
     
         var config = {
-            w: 500,
-            h: 500,
+            w: 450,
+            h: 450,
             maxValue: filteredData[0].maxValue,
             levels: 4,
             ExtraWidthX: 200

src/ui/radarChart.js

@@ -41,6 +41,15 @@ var RadarChart = {
         .append("g")
         .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
 
+        g.append("text")
+        .attr("x", (cfg.w / 2))             
+        .attr("y", -cfg.TranslateY / 2-30)
+        .attr("text-anchor", "middle")  
+        .style("font-size", "16px")
+        .style("font-family", "aptos") 
+        .style("font-weight", "bold")
+        .text("Rendimiento en temporada");
+
 		var tooltip;
       
       //Circular segments