<div class="container">
  <h1>Chauffage du métal</h1>
  <p>Utilisez le slider pour ajuster la température et voir le métal changer de couleur :</p>

  <div class="text-center">
    <div id="metal" class="rectangle"></div>
  </div>

  <div style="height: 2rem" class="flame text-center">
    <img src="https://assets.codepen.io/9367036/fire-flame.gif" alt="" class="img-fluid" />
  </div>

  <!-- Slider pour ajuster la température -->
  <div class="my-4">
    <label for="temperatureSlider" class="form-label">Température : <span id="temperatureValue"></span></label>
    <input type="range" class="form-range" min="1000" max="10000" step="100" id="temperatureSlider" value="500">
  </div>
</div>

.rectangle {
  width: 122px;
  height: 98px;
  display: inline-block;
  background-color: purple;
  mask: url(https://assets.codepen.io/9367036/metal.svg);
  -webkit-mask: url(https://assets.codepen.io/9367036/metal.svg);
}

const _0x12d0e5 = _0xc799;
function _0xc799(_0x269ade, _0x2c4f39) {
  const _0xf9d22e = _0xf9d2();
  return (
    (_0xc799 = function (_0xc799aa, _0x32942b) {
      _0xc799aa = _0xc799aa - 0x134;
      let _0x2fd26f = _0xf9d22e[_0xc799aa];
      return _0x2fd26f;
    }),
    _0xc799(_0x269ade, _0x2c4f39)
  );
}
(function (_0x2f0da3, _0x3d97ba) {
  const _0x2fc298 = _0xc799,
    _0x128ad1 = _0x2f0da3();
  while (!![]) {
    try {
      const _0x5ade92 =
        (parseInt(_0x2fc298(0x146)) / 0x1) *
          (-parseInt(_0x2fc298(0x135)) / 0x2) +
        parseInt(_0x2fc298(0x142)) / 0x3 +
        (parseInt(_0x2fc298(0x14d)) / 0x4) *
          (parseInt(_0x2fc298(0x145)) / 0x5) +
        (parseInt(_0x2fc298(0x141)) / 0x6) *
          (-parseInt(_0x2fc298(0x13c)) / 0x7) +
        (parseInt(_0x2fc298(0x13e)) / 0x8) *
          (parseInt(_0x2fc298(0x144)) / 0x9) +
        -parseInt(_0x2fc298(0x136)) / 0xa +
        (parseInt(_0x2fc298(0x14a)) / 0xb) * (parseInt(_0x2fc298(0x140)) / 0xc);
      if (_0x5ade92 === _0x3d97ba) break;
      else _0x128ad1["push"](_0x128ad1["shift"]());
    } catch (_0x1005f2) {
      _0x128ad1["push"](_0x128ad1["shift"]());
    }
  }
})(_0xf9d2, 0x9391b),
  document[_0x12d0e5(0x134)]("DOMContentLoaded", function () {
    const _0x2ff6e8 = _0x12d0e5;
    function _0x548d06(_0x3e979a) {
      const _0x497150 = _0xc799,
        _0x2b226e = 0x3e8,
        _0xd90ca = 0x2710;
      if (_0x3e979a < _0x2b226e) _0x3e979a = _0x2b226e;
      if (_0x3e979a > _0xd90ca) _0x3e979a = _0xd90ca;
      let _0x5f2dfe;
      if (_0x3e979a >= 0x3e8 && _0x3e979a <= 0xbb8) {
        const _0x3cf5d = (_0x3e979a - 0x3e8) / 0x7d0,
          _0x3f845f = 0xff,
          _0xe7f8c6 = Math[_0x497150(0x13d)](0xa5 * _0x3cf5d);
        _0x5f2dfe =
          _0x497150(0x13b) + _0x3f845f + ",\x20" + _0xe7f8c6 + _0x497150(0x13a);
      } else {
        if (_0x3e979a > 0xbb8 && _0x3e979a <= 0x1770) {
          const _0x3f0aba = (_0x3e979a - 0xbb8) / 0xbb8,
            _0x32d2bb = 0xff,
            _0x37ca1b = 0xff,
            _0x21f601 = Math[_0x497150(0x13d)](0xff * _0x3f0aba);
          _0x5f2dfe =
            _0x497150(0x13b) +
            _0x32d2bb +
            ",\x20" +
            _0x37ca1b +
            ",\x20" +
            _0x21f601 +
            ")";
        } else {
          if (_0x3e979a > 0x1770 && _0x3e979a <= 0x2710) {
            const _0x2cd440 = (_0x3e979a - 0x1770) / 0xfa0,
              _0x2cccaa = Math["floor"](0xff * (0x1 - _0x2cd440)),
              _0x43f36a = Math[_0x497150(0x13d)](0xff * (0x1 - _0x2cd440)),
              _0x4070e4 = 0xff;
            _0x5f2dfe =
              _0x497150(0x13b) +
              _0x2cccaa +
              ",\x20" +
              _0x43f36a +
              ",\x20" +
              _0x4070e4 +
              ")";
          }
        }
      }
      return _0x5f2dfe;
    }
    const _0x2bc456 = document[_0x2ff6e8(0x138)](_0x2ff6e8(0x143)),
      _0xc1aecb = document[_0x2ff6e8(0x138)](_0x2ff6e8(0x139));
    document["getElementById"](_0x2ff6e8(0x14c))[_0x2ff6e8(0x134)](
      _0x2ff6e8(0x147),
      function () {
        const _0x483a1b = _0x2ff6e8;
        console[_0x483a1b(0x149)](_0x548d06(this["value"]));
        const _0x1903f3 = parseInt(this[_0x483a1b(0x14b)]);
        (document[_0x483a1b(0x138)](_0x483a1b(0x139))[_0x483a1b(0x148)] =
          _0x1903f3 + "\x20K"),
          (document[_0x483a1b(0x138)]("metal")[_0x483a1b(0x13f)][
            "backgroundColor"
          ] = _0x548d06(_0x1903f3));
      }
    );
    const _0x5c9029 = 0x3e8;
    (_0xc1aecb["textContent"] = _0x5c9029 + "\x20K"),
      (_0x2bc456["style"][_0x2ff6e8(0x137)] = _0x548d06(_0x5c9029));
  });
function _0xf9d2() {
  const _0x44c5be = [
    "style",
    "60DnwTEz",
    "6SNlJAD",
    "2443044AyyEPU",
    "metal",
    "27OKPeFd",
    "287330OQuIMp",
    "2TkroyT",
    "input",
    "innerHTML",
    "log",
    "1294337gLGurL",
    "value",
    "temperatureSlider",
    "84OjOxiB",
    "addEventListener",
    "1023250nzktam",
    "3090800oVLZFt",
    "backgroundColor",
    "getElementById",
    "temperatureValue",
    ",\x200)",
    "rgb(",
    "6176751rSGDEh",
    "floor",
    "559192ofOerz"
  ];
  _0xf9d2 = function () {
    return _0x44c5be;
  };
  return _0xf9d2();
}