ts/index.html

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {
        margin: 0;
        height: 100%;
        overflow: hidden
    }

    .gui { position: absolute; top: 2px; left: 7px }

.grid-container {
  display: grid;
  grid-template-rows: 70px auto 70px;
  grid-template-columns: auto auto 240px;
  gap: 0px;
  padding: 0px;
  height: 99%;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0px 0;
  font-size: 14px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.item3 {
  grid-column-start: 1;
  grid-column-end: 3;
}


.dg.main.taller-than-window .close-button {
    border-top: 1px solid #ddd;
}

.dg.main .close-button {
    background-color: #ccc;
}
 
.dg.main .close-button:hover {
    background-color: #ddd;
}

.dg {
    color: #555;
    text-shadow: none !important;
}

.dg.main::-webkit-scrollbar {
    background: #fafafa;
}

.dg.main::-webkit-scrollbar-thumb {
    background: #bbb;
}
 
.dg li:not(.folder) {
    background: #fafafa;
    border-bottom: 1px solid #ddd;
}
 
.dg li.save-row .button {
    text-shadow: none !important;
}

.dg li.title {
    background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
}

.dg .cr.function:hover,.dg .cr.boolean:hover {
    background: #fff;
}
 
.dg .c input[type=text] {
    background: #e9e9e9;
}
 
.dg .c input[type=text]:hover {
    background: #eee;
}
 
.dg .c input[type=text]:focus {
    background: #eee;
    color: #555;
}
 
.dg .c .slider {
    background: #e9e9e9;
}

.dg .c .slider:hover {
    background: #eee;

}

</style>
<link rel="stylesheet" href="./styles.css">

<meta name="viewport" content="width=device-width">
</head>
 
    <body>
        <div class="grid-container" ID="gridcells">
          <div class="item1" id="cdiv" style="-webkit-text-fill-color:rgb(44, 44, 226); background-color:azure; text-align:left"></div>
          <div class="item2" id="projection" style="background-color:rgb(200, 247, 188)"></div>

          <div class="item3" id="canvasdiv" style="display:block;background-color:rgb(170, 56, 56)" >
            <canvas id="c" style="width:100%" style="height:100%" tabindex="1"></canvas>
          </div>

          <div id="linksdiv" style="background-color:azure; background-color:azure; padding-left: 5px; text-align: left;" class="item5">
        </div>
        <div id="app" style="background-color:cornsilk">Title</div>
        <div id="eye"></div>  
        <div id="comment"></div>  
    </div>

    <!------------------------------------------------------------------------------------------------------------------------->
    <script language="Javascript">


        var canvasdiv = document.getElementById("canvasdiv");
        var canvas = document.getElementById("c");
        var linksdiv = document.getElementById("linksdiv");
        var projdiv = document.getElementById("projection");
        var cdivdiv = document.getElementById("cdiv");
        var appdiv = document.getElementById("app");
        var eyediv = document.getElementById("eye");
        
        function lnk(appendlink, appenddescrip)
        { return '<a href="'+appendlink+'">'+appenddescrip+'</a><br/>'; }

        cdivdiv.innerHTML = "";
        appdiv.innerHTML = "";
        eyediv.innerHTML = "";
        projdiv.innerHTML = "";
        var str = `
        <p>
        <b>Stills based on .OBJ</b><br>
        `;
        var commonhtml =  "index.html";           // this html (do not use dist\ parcel's)
        str+=lnk(commonhtml+"?cube&radius0=12&hx=-40&hy=20","Textured cubes");
        str+=lnk(commonhtml+"?koenigsegg&radius0=85&hx=3&hy=25","Koenigsegg");
        str+=lnk(commonhtml+"?rubik&radius0=25&hx=60&hy=20","Blue Rubik");
        str+=lnk(commonhtml+"?building&radius0=65&hx=-55&hy=25&hxl=-0.61&difflight=1&speclight=0","Building");
        str+=lnk(commonhtml+"?chair&radius0=31&hx=45&hy=25","Chair");
        str+=lnk(commonhtml+"?chair2&radius0=198&hx=0&hy=0&cam=zup","Chair 2");
        str+=lnk(commonhtml+"?stone&radius0=8&hx=45&hy=30","Stone");
        str+=lnk(commonhtml+"?plane&radius0=25&hx=45&hy=25","Plane");
        //str+=lnk(commonhtml+"?greenhouse","Greenhouse");
        str+=`
        <p>
        <b>Experimental</b><br>
        `;
      //  str+=lnk(commonhtml+"?whalesapp&radius0=26&hx=1.0&hy=0.2&stride=180&numrows=6","Triangle mesh");
      // str+=lnk(commonhtml+"?skyboxcube&radius0=20&hx=0&hy=0&env=1","Greggs Skycube with cam");
      //  str+=lnk(commonhtml+"?drawinstanced&radius0=60&hx=0&hy=0","Gregg's Instanced");
      //  str+=lnk(commonhtml+"?variousfish&radius0=120&hx=1.6&hy=0&mesh=strip&stride=180&numrows=39&fish=1","Various Fish shapes");
        str+=lnk(commonhtml+"?cloth&texture=Red%20Square&radius0=143&hx=45&hy=-20&env=-1","Curtain cloth simulation");
        str+=lnk(commonhtml+"?canvas3dtexture&radius0=60&hx=0&hy=0","3d on tex Gregg#3");
        str+=lnk("?drawimagespace&backcolorchoice=1","Image space");
        str+=lnk(commonhtml+"?animation9&radius0=40&hx=-45&hy=0.0&backcolorchoice=1&env=1","Multiple scenes culling");
        str+=lnk(commonhtml+"?cat&radius0=350&hx=-300&hy=-50&hxl=-1.4&hyl=-0.77&difflight=0.8&cam=zup&env=1","Funny cat camera");
        str+=`
        <p>
        <b>Scenes and compound scenes</b><br>
        `;
        str+=lnk(commonhtml+"?animation8&radius0=140&hx=100&hy=10&env=2","Zelensky whale patrol");
        //str+=lnk(commonhtml+"?animation6&radius0=60&hx=0&hy=0&speed=0.01","Skybox only scene");
        str+=lnk(commonhtml+"?animation4&radius0=20&hx=0&hy=0&env=1","Skycube Scene");
        str+=lnk(commonhtml+"?animation10&radius0=270&hx=273&hy=15&fish=1&env=3","Fish trajectory");
        str+=lnk(commonhtml+"?animation3=0&radius0=50&hx=0&hy=0","Lighted F with 3dcubes");
        str+=lnk(commonhtml+"?animation1&radius0=200&hx=225&hy=20&fov=32&env=0","Cube placed on grid");
     //   str+=lnk(commonhtml+"?animationi&radius0=180&hx=3.9&hy=1.1&fov=32","Instanced scene");
        str+=lnk(commonhtml+"?animation5&radius0=50&hx=20&hy=10&env=1","Many Textures Scene");
     //   str+=lnk(commonhtml+"?animation6&radius0=60&hx=0.7&hy=0.0","ObjectList Scene");
        str+=lnk(commonhtml+"?animation7&plane&radius0=123&hx=-100&hy=15&backcolorchoice=1&env=2","Blockguy chased by plane");
        str+=lnk(commonhtml+"?animation2&radius0=40&hx=-45&hy=0.0&backcolorchoice=1&env=2","Blockguy chasing 3dcubes");
     //   str+=lnk(commonhtml+"?animation8&radius0=83&hx=-1.8&hy=0.2&backcolorchoice=1","3d on tex Scene2");
     //   str+=lnk(commonhtml+"?animation9&radius0=83&hx=-1.8&hy=0.2&backcolorchoice=1","Compound Scene 1-2");
        //str+=lnk(commonhtml+"?objectlist","Gregg's ObjectList");
        
        linksdiv.innerHTML =  str + "<p>";        
    
    </script>    

<!--Use this while debugging, and before a Parcel fresh build -->
<script src="src/indexAnimations.js" type="module"></script>

<!--For  a fresh build, stop debugging, clear out \Dist locally, then start debugging, invoking Parcel build. 
    the compiled result entry according to my current Parcel.mdb will be dist/index.5710aea2.js  -->

<!--Use this for index.html on GitHib -->
<!-- script src="dist/index.5710aea2.js"></script -->

<!--Or.. use this for index.html on GitHibto keep the load dynamic.. -->
<script language="Javascript">  
  var commonjsparcel = "index.5710aea2.js";       
  document.addEventListener('DOMContentLoaded', () => {
      document.head.appendChild(document.createElement('script'))
           .src = "dist" + "/" + commonjsparcel;
      });
</script>


</body>
</html>
      