Diferencia entre revisiones de «Plantilla:BarraEstadistica»

De Unión PokéPRO - Wiki
Ir a la navegaciónIr a la búsqueda
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 10 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
   <!-- PS -->
   <!-- PS -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">PS:       </span>
     <span style="width: 30%; text-align: left;">PS:       </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="78" style="width: 78%; text-align: center; line-height: 20px; border-radius: 4px;">78</div>
       <div style="width: {{{PS}}}%; background-color: #a7db8d; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{PS}}}
      </div>
     </div>
     </div>
   </div>
   </div>
Línea 12: Línea 14:
   <!-- Ataque -->
   <!-- Ataque -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">Ataque:   </span>
     <span style="width: 30%; text-align: left;">Ataque:   </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="84" style="width: 84%; text-align: center; line-height: 20px; border-radius: 4px;">84</div>
       <div style="width: {{{Ataque}}}%; background-color: #fae078; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{Ataque}}}
      </div>
     </div>
     </div>
   </div>
   </div>
Línea 20: Línea 24:
   <!-- Defensa -->
   <!-- Defensa -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">Defensa: </span>
     <span style="width: 30%; text-align: left;">Defensa:   </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="70" style="width: 70%; text-align: center; line-height: 20px; border-radius: 4px;">70</div>
       <div style="width: {{{Defensa}}}%; background-color: #f0e130; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{Defensa}}}
      </div>
     </div>
     </div>
   </div>
   </div>
Línea 28: Línea 34:
   <!-- Ataque Especial -->
   <!-- Ataque Especial -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">At. Esp.: </span>
     <span style="width: 30%; text-align: left;">At. Esp.: </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="90" style="width: 90%; text-align: center; line-height: 20px; border-radius: 4px;">90</div>
       <div style="width: {{{AtEsp}}}%; background-color: #76c7c0; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{AtEsp}}}
      </div>
     </div>
     </div>
   </div>
   </div>
Línea 36: Línea 44:
   <!-- Defensa Especial -->
   <!-- Defensa Especial -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">Def. Esp.:</span>
     <span style="width: 30%; text-align: left;">Def. Esp.: </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="85" style="width: 85%; text-align: center; line-height: 20px; border-radius: 4px;">85</div>
       <div style="width: {{{DefEsp}}}%; background-color: #9b7fdd; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{DefEsp}}}
      </div>
     </div>
     </div>
   </div>
   </div>
Línea 44: Línea 54:
   <!-- Velocidad -->
   <!-- Velocidad -->
   <div style="display: flex; align-items: center; margin: 8px 0;">
   <div style="display: flex; align-items: center; margin: 8px 0;">
     <span style="width: 30%; text-align: left;">Velocidad:</span>
     <span style="width: 30%; text-align: left;">Velocidad: </span>
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
     <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;">
       <div class="stat-bar" data-value="60" style="width: 60%; text-align: center; line-height: 20px; border-radius: 4px;">60</div>
       <div style="width: {{{Velocidad}}}%; background-color: #ff5959; color: white; text-align: center; line-height: 20px; border-radius: 4px;">
        {{{Velocidad}}}
      </div>
     </div>
     </div>
   </div>
   </div>
</div>
</div>
<script>
  // Función para cambiar el color de las barras según su valor
  document.querySelectorAll('.stat-bar').forEach(function(bar) {
    var value = parseInt(bar.getAttribute('data-value'));  // Obtiene el valor de la estadística
    if (value < 50) {
      bar.style.backgroundColor = '#ff5959';  // Rojo
    } else if (value >= 50 && value < 100) {
      bar.style.backgroundColor = '#fae078';  // Naranja
    } else {
      bar.style.backgroundColor = '#a7db8d';  // Verde
    }
  });
</script>

Revisión actual - 22:48 28 ene 2025

Estadísticas Base

   PS:        

       {{{PS}}}

   Ataque:    

       {{{Ataque}}}

   Defensa:   

       {{{Defensa}}}

   At. Esp.:  

       {{{AtEsp}}}

   Def. Esp.: 

       {{{DefEsp}}}

   Velocidad: 

       {{{Velocidad}}}
Obtenido de «http://unionpokepro.com/wiki/index.php?title=Plantilla:BarraEstadistica&oldid=1438»