>>>>>>>>>>>>>>>>>>>>> CABEÇALHO <<<<<<<<<<<<<<<<<<<<<<<<

HTML:

<div class="status-header">
  <img
    src="https://images.seeklogo.com/logo-png/40/1/windows-11-icon-logo-png_seeklogo-406208.png"
    class="status-icon"
    alt="Windows Logo"
  >
  <div class="status-title">SERVIDORES WINDOWS</div>
  </div>
</div>


CSS:

.status-header {
  display: flex;
  align-items: center;
  background: #1E223C;
  color: white;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

.status-icon {
  height: 60px;
  width: auto;
  margin-left: 10px;
  margin-right: 15px;
}

.status-title {
  flex-grow: 1;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
}




>>>>>>>>>>>>>>>>>>>>> DISPONIBILIDADE <<<<<<<<<<<<<<<<<<<<<<<<

HTML:

<div class="availability-header">
  <img
    src="https://iili.io/3QHVyEN.png"
    class="availability-icon"
    alt="Disponibilidade"
  >
  <div class="availability-title">DISPONIBILIDADE</div>
  <div class="availability-badge {{#if (eq data.[0].[Last *] 1)}}up{{else}}down{{/if}}">
    {{#if (eq data.[0].[Last *] 1)}}UP{{else}}DOWN{{/if}}
  </div>
</div>


CSS:

.availability-header {
  display: flex;
  align-items: center;
  background: #1E223C;
  color: white;
  border-radius: 20px;
  padding: 20px 20px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.availability-icon {
  width: 43px;
  height: 43px;
  margin-left: 10px;
  margin-right: 15px;
  filter: invert(1) brightness(2);
}

.availability-title {
  flex-grow: 1;
  font-size: 16px;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 60px;
  border-radius: 50px;
  padding: 6px 22px;
  color: black;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

.availability-badge.up {
  background: #2ecc71;
}

.availability-badge.down {
  background: #e74c3c;
}