Diferencia entre revisiones de «Plantilla:BarraEstadistica»
De Unión PokéPRO - Wiki
Ir a la navegaciónIr a la búsqueda
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
<div style="width: 400px; font-family: Arial, sans-serif; border: 1px solid #ccc; border-radius: 8px; padding: 10px; background: #f9f9f9; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);"> | <div style="width: 400px; font-family: Arial, sans-serif; border: 1px solid #ccc; border-radius: 8px; padding: 10px; background: #f9f9f9; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);"> | ||
<h3 style="text-align: center; color: #333; margin-top: 0;">Estadísticas Base</h3> | <h3 style="text-align: center; color: #333; margin-top: 0;">Estadísticas Base</h3> | ||
<!-- PS --> | <!-- PS --> | ||
<div style="display: flex; align-items: center; margin: | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">PS: </span> | <span style="width: 30%; text-align: left;">PS: </span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 78% | <div class="stat-bar" data-value="78" style="width: 78%; text-align: center; line-height: 20px; border-radius: 4px;">78</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Ataque --> | <!-- Ataque --> | ||
<div style="display: flex; align-items: center | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">Ataque: </span> | <span style="width: 30%; text-align: left;">Ataque: </span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 84% | <div class="stat-bar" data-value="84" style="width: 84%; text-align: center; line-height: 20px; border-radius: 4px;">84</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Defensa --> | <!-- Defensa --> | ||
<div style="display: flex; align-items: center; margin: | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">Defensa: </span> | <span style="width: 30%; text-align: left;">Defensa: </span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 70% | <div class="stat-bar" data-value="70" style="width: 70%; text-align: center; line-height: 20px; border-radius: 4px;">70</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Ataque Especial --> | <!-- Ataque Especial --> | ||
<div style="display: flex; align-items: center; margin: | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">At. Esp. :</span> | <span style="width: 30%; text-align: left;">At. Esp.: </span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 90% | <div class="stat-bar" data-value="90" style="width: 90%; text-align: center; line-height: 20px; border-radius: 4px;">90</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Defensa Especial --> | <!-- Defensa Especial --> | ||
<div style="display: flex; align-items: center; margin: | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">Def. Esp.:</span> | <span style="width: 30%; text-align: left;">Def. Esp.:</span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 85% | <div class="stat-bar" data-value="85" style="width: 85%; text-align: center; line-height: 20px; border-radius: 4px;">85</div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Velocidad --> | <!-- Velocidad --> | ||
<div style="display: flex; align-items: center; margin: | <div style="display: flex; align-items: center; margin: 8px 0;"> | ||
<span style="width: 30%;">Velocidad:</span> | <span style="width: 30%; text-align: left;">Velocidad:</span> | ||
<div style="width: | <div style="width: 65%; background: #ddd; border-radius: 4px; height: 20px; display: flex; align-items: center;"> | ||
<div style="width: 60% | <div class="stat-bar" data-value="60" style="width: 60%; text-align: center; line-height: 20px; border-radius: 4px;">60</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 del 21:20 28 ene 2025
Estadísticas Base
PS:
Ataque:
Defensa:
At. Esp.:
Def. Esp.:
Velocidad:
<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>
