ngl.html

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

    <script src="https://unpkg.com/ngl@0.10.4/dist/ngl.js"></script>
    <script lang="javascript"></script>
  </head>
  <body>
    <div id="viewport" style="width: 100%; height: 100%"></div>
    <script>
      // Create NGL Stage object
      var stage = new NGL.Stage("viewport");

      // Handle window resizing
      window.addEventListener(
        "resize",
        function (event) {
          stage.handleResize();
        },
        false
      );

      // Load PDB entry 1CRN
      stage.loadFile("1.cif", {
        defaultRepresentation: true,
      });
    </script>
  </body>
</html>