item_test.jinja

<svg
  width="360"
  height="360"
  viewBox="0 0 360 360"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
>
  <style>
    image {
      image-rendering: pixelated;
    }

    div {
      height: 100%;
      width: 100%;
    }

    meter {
      --optimum-color: #08ff00;
      --sub-optimum-color: #acff00;
      --sub-sub-optimum-color: #ff4d00;

      width: 100%;
      height: 100%;
    }

    meter {
      background: none;
      background-color: #000;

      border-bottom: 20px solid black;
      box-sizing: border-box;
    }

    meter::-webkit-meter-bar {
      background: none;
      background-color: #000;

      /* Outer background for Webkit */
      border-radius: 0px;
      border: none;

      height: 200%;
    }

    meter:-moz-meter-optimum::-moz-meter-bar {
      background: var(--optimum-color);
    }
    meter::-webkit-meter-optimum-value {
      background: var(--optimum-color);
    }

    meter:-moz-meter-sub-optimum::-moz-meter-bar {
      background: var(--sub-optimum-color);
    }
    meter::-webkit-meter-suboptimum-value {
      background: var(--sub-optimum-color);
    }

    meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: var(--sub-sub-optimum-color);
    }
    meter::-webkit-meter-even-less-good-value {
      background: var(--sub-sub-optimum-color);
    }
  </style>
  <image href="./slot.png" height="360" width="360" x="0" y="0" />
  <image href="{{ item_texture_url(item.id) }}" height="320" width="320" x="20" y="20" />
  <text
    x="80"
    y="340"
    style="font-size: 320px; font-family: ProggySmallTT; fill: #fcfcfc"
  >
    {{ item.count }}
  </text>
  <foreignObject width="240" height="40" x="60" y="280">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <meter
        min="0"
        max="100"
        low="33"
        high="66"
        optimum="77"
        value="{{ (item.max_durability / item.damage) * 100 }}"
      ></meter>
    </div>
  </foreignObject>
</svg>