PDBe Molstar plugin - AlphaFold view - v3.2.0

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <title>PDBe Molstar - Helper functions</title>

    <!-- Molstar CSS & JS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.2.0/build/pdbe-molstar-light.css"
    />
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.2.0/build/pdbe-molstar-plugin.js"
    ></script>

    <style>
      #myViewer {
        float: left;
        width: 700px;
        height: 400px;
        position: relative;
        margin: 20px;
      }
      .msp-plugin ::-webkit-scrollbar-thumb {
        background-color: #474748 !important;
        border-radius: 10px;
      }
    </style>
  </head>

  <body>
    <h3>PDBe Mol* JS Plugin Demo - AlphaFold View</h3>

    <!-- Molstar container -->
    <div id="myViewer"></div>

    <script>
      // Create plugin instance
      const viewerInstance = new PDBeMolstarPlugin();

      // Set options
      const options = {
        customData: {
          url: 'https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v1.cif',
          format: 'cif',
        },
        alphafoldView: true,
        bgColor: { r: 255, g: 255, b: 255 },
        hideCanvasControls: [
          'selection',
          'animation',
          'controlToggle',
          'controlInfo',
        ],
        sequencePanel: true,
        landscape: true,
      };

      // Get element from HTML/Template to place the viewer
      const viewerContainer = document.getElementById('myViewer');

      // Call render method to display the 3D view
      viewerInstance.render(viewerContainer, options);
    </script>
  </body>
</html>