bpforms/web/alphabet.html
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BpForms: toolkit for concretely describing non-canonical DNA, RNA, and proteins</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-icon-fonts@0.1.1/foundation-icons.css"
integrity="sha256-CWltC/W+elkkUKhitcztPiSfE3AEpzAvrkmEqB68Lx0="
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/css/foundation.min.css"
integrity="sha256-xpOKVlYXzQ3P03j397+jWFZLMBXLES3IiryeClgU5og= sha384-gP4DhqyoT9b1vaikoHi9XQ8If7UNLO73JFOOlQV1RATrA7D0O7TjJZifac6NwPps sha512-AKwIib1E+xDeXe0tCgbc9uSvPwVYl6Awj7xl0FoaPFostZHOuDQ1abnDNCYtxL/HWEnVOMrFyf91TDgLPi9pNg=="
crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1><i>BpForms</i>: toolkit for concretely describing non-canonical DNA, RNA, and proteins</h1>
</div>
</div>
<div class="grid-x grid-padding-x blue">
<div class="large-12 cell">
<h2 id="alphabet_heading"></h2>
<p id="alphabet_description"></p>
<p>To suggest new residues or modifications to existing residues, please use this GitHub issue template <a href="https://github.com/KarrLab/bpforms/issues/new?assignees=&labels=alphabet&template=create-or-modify-residues.md&title=Create%2FModify+residues"><i class="fi-link"></i></a>, submit a GitHub pull request <a href="https://github.com/karrlab/bpforms/pulls"><i class="fi-link"></i></a>, or contact us by email <a href="mailto:info@karrlab.org"><i class="fi-mail"></i></a>.</p>
</div>
<div class="large-3 cell monomer-legend">
<b>Atom/bond legend</b><br/>
See help <a href="index.html#inline_monomers"><i class="fi-info"></i></a> for more information
</div>
<div class="large-3 cell monomer-legend" id="monomer-legend-left">
<span style="color: rgb(000, 000, 255)">X-</span> Left bonding site<br/>
<span style="color: rgb(192, 192, 255)">X-</span> Displaced by left bonding
</div>
<div class="large-3 cell monomer-legend" id="monomer-legend-right">
<span style="color: rgb(000, 255, 000)">X-</span> Right bonding site<br/>
<span style="color: rgb(192, 255, 192)">X-</span> Displaced by right bonding
</div>
</div>
<div class="grid-x grid-margin-x grid-margin-y medium-up-4" id="alphabet_container">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js"
integrity="sha256-/PFxCnsMh+nTuM0k3VJCRch1gwnCfKjaP8rJNq5SoBg= sha384-9ksAFjQjZnpqt6VtpjMjlp2S0qrGbcwF/rvrLUg2vciMhwc1UJJeAAOLuJ96w+Nj sha512-UMSn6RHqqJeJcIfV1eS2tPKCjzaHkU/KqgAnQ7Nzn0mLicFxaVhm9vq7zG5+0LALt15j1ljlg8Fp9PT1VGNmDw=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script src="js/app_alphabet.js"></script>
</body>
</html>