Редактирование: Шаблон:HeroSkills

<div class="ability-card" style="border: 1px solid #333; background-color: #1b1b1b; border-radius: 8px; padding: 10px; width: 500px;">
  <!-- Header with Ability Name and Type -->
  <div class="ability-header" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 5px;">
    <div style="color: #fff; font-size: 20px; font-weight: bold;">{{{ability_name}}}</div>
    <div style="color: #fff; text-transform: uppercase; background-color: #444; padding: 2px 6px; border-radius: 5px;">{{{ability_type}}}</div>
  </div>

  <!-- Effect Type -->
  <div class="effect-type" style="color: #999; margin-top: 10px;">
    <strong>Effect Type: </strong>{{{effect_type}}}
  </div>

  <!-- Damage and Other Statistics -->
  <div class="ability-stats" style="margin-top: 10px;">
    <div style="color: #fff;">
      <strong>Damage: </strong>{{{damage}}} per shot
    </div>
    <div style="color: #fff;">
      <strong>Falloff Range: </strong>{{{falloff_range}}} meters
    </div>
    <div style="color: #fff;">
      <strong>Headshot: </strong>{{{headshot}}}
    </div>
    <div style="color: #fff;">
      <strong>Rate of Fire: </strong>{{{rate_of_fire}}} shots per second
    </div>
    <div style="color: #fff;">
      <strong>Ammo: </strong>{{{ammo}}}
    </div>
    <div style="color: #fff;">
      <strong>Reload Time: </strong>{{{reload_time}}} seconds
    </div>
    <div style="color: #fff;">
      <strong>Spread Angle: </strong>{{{spread_angle}}} degrees
    </div>
    <div style="color: #fff;">
      <strong>Projectile Radius: </strong>{{{projectile_radius}}} meters
    </div>
  </div>

  <!-- Additional Info -->
  <div class="ability-additional-info" style="margin-top: 10px; color: #ccc;">
    <strong>Details:</strong>
    <ul>
      <li>{{{detail_1}}}</li>
      <li>{{{detail_2}}}</li>
      <li>{{{detail_3}}}</li>
      <li>{{{detail_4}}}</li>
    </ul>
  </div>
</div>