dual.html

<!doctype html>
<html lang="en">
<head>
  <title>1MRU x2 - UglyMol</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <meta name="theme-color" content="#333333">
  <style>
   body {  background-color: #888; font-family: sans-serif; }
   canvas { display: block; }
   #viewer1, #viewer2 { position:absolute; top:0; width:49.6%; height:100%; }
   #viewer1 { left: 0; }
   #viewer2 { right: 0; }
   #hud {
     font-size: 14px;
     color: #ddd;
     background-color: rgba(0,0,0,0.6);
     text-align: center;
     position: absolute;
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
     padding: 2px 8px;
     border-radius: 5px;
     z-index: 9;
     white-space: pre-line;
   }
   #hud u { padding: 0 8px; text-decoration: none;
            border: solid; border-width: 1px 0; }
   #hud s { padding: 0 8px; text-decoration: none; opacity: 0.5; }
   #help {
     display: none;
     font-size: 16px;
     color: #eee;
     background-color: rgba(0,0,0,0.7);
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     cursor: default;
     padding: 5px;
     border-radius: 5px;
     z-index: 9;
     white-space: pre-line;
   }
   a { color: #59C; }
   #viewer1 b, #viewer2 b { color: #fff; background-color: rgba(0,0,0,0.6); }
   #viewer1 b { position: absolute; bottom: 30px; left: 30px; }
   #viewer2 b { position: absolute; bottom: 30px; right: 30px; }
  </style>

  <script src="uglymol.js"></script>

</head>
<body>
  <div id="viewer1"><b>PDB original</b></div>
  <div id="viewer2"><b>PDB_REDO</b></div>
  <header id="hud">Welcome to UglyMol. Press H for help.</header>
  <footer id="help"></footer>
  <script>
    V1 = new UM.Viewer({viewer: "viewer1", focusable: true});
    V1.load_pdb("data/1mru.pdb");
    V2 = new UM.Viewer({viewer: "viewer2", focusable: true, share_view: V1});
    V2.load_pdb_and_ccp4_maps("data/pdb_redo/1mru_final.pdb",
                              "data/pdb_redo/1mru.map",
                              "data/pdb_redo/1mru_diff.map", function () {
      V1.load_ccp4_maps("data/1mru.map", "data/1mru_diff.map");
    });
    V1.renderer.domElement.focus();
  </script>
</body>
</html>