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 class="estadisticas">
<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);">
   <table>
  <h3 style="text-align: center; color: #333; margin-top: 0;">Estadísticas Base</h3>
 
   <table style="width: 100%; border-collapse: collapse;">
    <!-- PS -->
     <tr>
     <tr>
       <td>PS</td>
       <td style="width: 80px; text-align: left; padding: 5px;">PS:</td>
       <td>{{PS}}</td>
       <td>
      <td><div class="barra" style="width: {{PS}}px;"></div></td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{PS|50}}}%; background: {{#ifexpr: {{{PS|50}}} < 50 | #ff5959 | {{#ifexpr: {{{PS|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{PS|50}}}
          </div>
        </div>
      </td>
     </tr>
     </tr>
     </table>
 
     <!-- Ataque -->
    <tr>
      <td style="width: 80px; text-align: left; padding: 5px;">Ataque:</td>
      <td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{Ataque|50}}}%; background: {{#ifexpr: {{{Ataque|50}}} < 50 | #ff5959 | {{#ifexpr: {{{Ataque|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{Ataque|50}}}
          </div>
        </div>
      </td>
    </tr>
 
    <!-- Defensa -->
    <tr>
      <td style="width: 80px; text-align: left; padding: 5px;">Defensa:</td>
      <td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{Defensa|50}}}%; background: {{#ifexpr: {{{Defensa|50}}} < 50 | #ff5959 | {{#ifexpr: {{{Defensa|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{Defensa|50}}}
          </div>
        </div>
      </td>
    </tr>
 
    <!-- Ataque Especial -->
    <tr>
      <td style="width: 80px; text-align: left; padding: 5px;">At. Esp.:</td>
      <td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{AtEsp|50}}}%; background: {{#ifexpr: {{{AtEsp|50}}} < 50 | #ff5959 | {{#ifexpr: {{{AtEsp|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{AtEsp|50}}}
          </div>
        </div>
      </td>
    </tr>
 
    <!-- Defensa Especial -->
    <tr>
      <td style="width: 80px; text-align: left; padding: 5px;">Def. Esp.:</td>
      <td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{DefEsp|50}}}%; background: {{#ifexpr: {{{DefEsp|50}}} < 50 | #ff5959 | {{#ifexpr: {{{DefEsp|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{DefEsp|50}}}
          </div>
        </div>
      </td>
    </tr>
 
    <!-- Velocidad -->
    <tr>
      <td style="width: 80px; text-align: left; padding: 5px;">Velocidad:</td>
      <td>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
          <div style="width: {{{Velocidad|50}}}%; background: {{#ifexpr: {{{Velocidad|50}}} < 50 | #ff5959 | {{#ifexpr: {{{Velocidad|50}}} < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
            {{{Velocidad|50}}}
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
</div>
<style>
  /* Estilos CSS */
  .estadisticas {
    /* Estilos para el contenedor de las estadísticas */
  }
  table {
    /* Estilos para la tabla */
  }
  /* ... */
</style>

Revisión del 20:49 28 ene 2025

Estadísticas Base

PS:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50
Ataque:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50
Defensa:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50
At. Esp.:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50
Def. Esp.:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50
Velocidad:
         <div style="width: 50%; background: {{#ifexpr: 50 < 50 | #ff5959 | {{#ifexpr: 50 < 80 | #fae078 | #a7db8d}}}}; color: white; text-align: center; line-height: 20px; border-radius: 4px; height: 100%;">
           50