loader.html

<style>
  .main_body {
    background: black;
  }

  .titolo_box_scheda,
  .title {
    background: black !important;
    border: none !important;
    border-top: 1px solid white !important;
    border-bottom: 1px solid white !important;
    border-radius: 0px 0px 0px 0px !important;
  }

  .body_box {
    border: none !important;
  }

  .ritratto {
    border: 1px solid white !important;
  }

  .profilo,
  .primo_box,
  .secondo_box,
  .terzo_box {
    border: none !important;
  }

  ::-webkit-scrollbar {
    background: black !important;
  }
</style>
<script type="text/javascript">
  const minigame_stylesheet_url = "https://raw.githubusercontent.com/Serp1co/ct-custom-page/main/section.css";
  const minigame_script_url = "https://raw.githubusercontent.com/Serp1co/ct-custom-page/main/section.js";
  const minigame_html_url = "https://raw.githubusercontent.com/Serp1co/ct-custom-page/main/section.html";


  let loader_interval = setInterval(
      () => (document.querySelector("load-await").innerHTML += " . "),
      100
    );

  const process_response = function (response) {
    if (response.ok) return response.text();
    else
      throw {
        "status_code: ": response.status,
        "status_description": response.statusText,
      };
  };

  async function fetch_resource(url, type, tag) {
    await fetch(url)
      .then((response) => process_response(response))
      .then((data) => {
        let html = document.createElement(type);
        style.innerHTML = html;
        document.querySelector(tag).appendChild(html);
      })
      .catch((exception) =>
        console.error("couldn't fetch data" + JSON.stringify(exception))
      );
  }

  async function setup_resources() {
    await fetch_resource(minigame_stylesheet_url, "style", "custom-styles");
    await fetch_resource(minigame_script_url, "script", "custom-scripts");
    await fetch_resource(audioplayer_script_url, "script", "custom-scripts");
  };

  async function setup_dom() {
    await fetch_resource(minigame_html_url, "div", "custom-section");
  };

  window.onload = async function () {
    await setup().then(()=> {
        clearInterval(loader_interval);
        document.querySelector("load-await").remove();
    })
  };
  
  async function setup () {
    await fetch(minigame_stylesheet_url)
      .then((response) => process_response(response))
      .then((data) => {
        let style = document.createElement("style");
        style.innerHTML = data;
        document.querySelector("custom-styles").appendChild(style);
      })
      .catch((exception) =>
        console.log("couldn't fetch css data. " + JSON.stringify(exception))
      );
    await fetch(minigame_script_url)
      .then((response) => process_response(response))
      .then((data) => {
        let script = document.createElement("script");
        script.innerHTML = data;
        document.querySelector("custom-scripts").appendChild(script);
      })
      .catch((exception) =>
        console.log("couldn't fetch js data. " + JSON.stringify(exception))
      );
    await fetch(minigame_html_url)
      .then((response) => process_response(response))
      .then((data) => {
        let style = document.createElement("div");
        style.innerHTML = data;
        document.querySelector("custom-section").appendChild(style);
      })
      .catch((exception) =>
        console.log("couldn't fetch html data. " + JSON.stringify(exception))
      );
  };

</script>
<div>
  <button onclick="switch_audio('loop_1')">loop1</button>
  <button onclick="switch_audio('loop_2')">loop2</button>
  <button onclick="switch_audio('loop_3')">loop3</button>
  <audio id="loop_1" class="audio on" autoplay="" preload="" loop="">
    <source src="https://audio.jukehost.co.uk/jdWaU4FggWzEnDzqrXbwVt5p1ZByzlqq" />
  </audio>
  <audio id="loop_2" class="audio off" preload="" loop="">
    <source src="https://audio.jukehost.co.uk/1RLMWXMhzmy4NyKje72QygsKrL4dqQJ9" />
  </audio>
  <audio id="loop_3" class="audio off" preload="" loop="">
    <source src="https://audio.jukehost.co.uk/wCUNMulbMuR4u7hwMvnd5FjarS1mELvZ" />
  </audio>
</div>
<load-await> Loading. </load-await>
<custom-styles> </custom-styles>
<custom-section> </custom-section>
<custom-scripts> </custom-scripts>