index.qmd

# Cover {.unnumbered}

<!-- load dot lotti js code -->
<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>


<!-- the riksha file is obtained through:https://lottiefiles.com/103030-rickshaw-from-pakistan
and https://lottiefiles.com/ranaadeelfarrukh -->
<dotlottie-player
  id="lotti_Main_Page"
  autoplay
  loop
  mode="bounce"
  src="./Data/7_Animation/Riksha.lottie"
  style="width: 100% height:90%">
</dotlottie-player>

<div id="iframe_Tornado" style="display:none;"></div>

<script>
function createIframe() {
    const iframe = document.createElement("iframe");
    iframe.src = "./Data/6_Html_Data/0_Viz/mPV_16.78.html";
    iframe.frameBorder = "0";
    iframe.width = "100%";
    iframe.height = "600";
    return iframe;
}

function hide_Riksha() {

    // get lottify riksha
    const player = document.getElementById('lotti_Main_Page');

    // get iframe container
    const content = document.getElementById("iframe_Tornado");

    // hide riksha
    player.style.display = "none";
 
    // show iframe container
    content.style.display = "block";
}

// wait until the whole page has loaded once
window.addEventListener("load", function() {
    console.log("whole page has loaded");

    // create and insert iframe
    const content = document.getElementById("iframe_Tornado");
    const iframe = createIframe();
    content.appendChild(iframe);

    // hide riksha and show iframe when iframe content has loaded
    iframe.addEventListener("load", function() {
        console.log("iframe has loaded");

        setTimeout(function() {
            // code to be executed after 2.3 seconds
            hide_Riksha();

            }, 3300);

    });
});
</script>