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 -->
   <table style="width: 100%; border-collapse: collapse;">
   <div style="display: flex; align-items: center; margin: 5px 0;">
     <!-- PS -->
     <span style="width: 30%;">PS:</span>
    <tr>
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
      <td style="width: 80px; text-align: left; padding: 5px;">PS:</td>
      <div style="width: 78%; background: #ff5959; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
      <td>
        78
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
      </div>
          <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%;">
    </div>
            {{{PS|50}}}
  </div>
          </div>
  <!-- Ataque -->
        </div>
  <div style="display: flex; align-items: center;; margin: 5px 0;">
      </td>
    <span style="width: 30%;">Ataque:</span>
    </tr>
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
 
      <div style="width: 84%; background: #f5ac78; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
    <!-- Ataque -->
        84
    <tr>
      </div>
      <td style="width: 80px; text-align: left; padding: 5px;">Ataque:</td>
    </div>
      <td>
  </div>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
  <!-- Defensa -->
          <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%;">
  <div style="display: flex; align-items: center; margin: 5px 0;">
            {{{Ataque|50}}}
    <span style="width: 30%;">Defensa:</span>
          </div>
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
        </div>
      <div style="width: 70%; background: #fae078; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
      </td>
        70
    </tr>
      </div>
 
    </div>
    <!-- Defensa -->
  </div>
    <tr>
  <!-- Ataque Especial -->
      <td style="width: 80px; text-align: left; padding: 5px;">Defensa:</td>
  <div style="display: flex; align-items: center; margin: 5px 0;">
      <td>
    <span style="width: 30%;">At. Esp.:</span>
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
          <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%;">
      <div style="width: 90%; background: #9db7f5; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
            {{{Defensa|50}}}
        90
          </div>
      </div>
        </div>
    </div>
      </td>
  </div>
    </tr>
  <!-- Defensa Especial -->
 
  <div style="display: flex; align-items: center; margin: 5px 0;">
    <!-- Ataque Especial -->
    <span style="width: 30%;">Def. Esp.:</span>
    <tr>
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
      <td style="width: 80px; text-align: left; padding: 5px;">At. Esp.:</td>
      <div style="width: 85%; background: #a7db8d; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
      <td>
        85
        <div style="background: #ddd; height: 20px; border-radius: 4px; overflow: hidden; position: relative;">
      </div>
          <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%;">
    </div>
            {{{AtEsp|50}}}
  </div>
          </div>
  <!-- Velocidad -->
        </div>
  <div style="display: flex; align-items: center; margin: 5px 0;">
      </td>
    <span style="width: 30%;">Velocidad:</span>
    </tr>
    <div style="width: 60%; background: #ddd; border-radius: 4px; overflow: hidden;">
 
      <div style="width: 60%; background: #fa92b2; text-align: center; color: white; padding: 3px 0; transition: background 0.3s;">
    <!-- Defensa Especial -->
         60
    <tr>
       </div>
      <td style="width: 80px; text-align: left; padding: 5px;">Def. Esp.:</td>
     </div>
      <td>
   </div>
        <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>

Revisión del 21:08 28 ene 2025

Estadísticas Base

   PS:
       78
   Ataque:
       84
   Defensa:
       70
   At. Esp.:
       90
   Def. Esp.:
       85
   Velocidad:
       60