ali2210/WizDwarf

View on GitHub
methionine.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/css/methionine.css">
  <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"
    integrity="sha512-aPhrlLlp7Mr8g+MVw6/wMD8PjqqzRNhSM8pHDyyJPmUTJMzKxMmxrjauzQforOaAegN3CIKUTKXJyLwFD57RtA=="
    crossorigin="anonymous"></script>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <title>Wizdwarfs</title>
</head>

<body>
  <div class='main-dashboard-div'>
    <nav class="navbar navbar-expand-md navbar-light custom-navbar" style=" background-color: #ededed;display: flex;">
          <a class="navbar-brand" href="/">
            <img src="/images/logo.png" alt="Logo" class="logo">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown" style="position: absolute;left: 37pc;">
            <ul class="navbar-nav">
              <li class="nav-item active pl-3">
                <a class="nav-link" href="/dashboard">
                  <i class="fa fa-home icon-light" aria-hidden="true"></i>
                </a>
              </li>
              <li class="nav-item dropdown pl-3">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item active" href="#" title="Private Conversation"><i class="fa fa-envelope-o" aria-hidden="true"></i> Private </a>
                  <a class="dropdown-item" href="#" title="Gossips"> <i class="fa fa-comments-o" aria-hidden="true"></i> Public </a>
                </div>
              </li>
              <li class="nav-item dropdown pl-3">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item active" href="/dashboard/profile" title="Edit Profile"><i class="fa fa-sliders" aria-hidden="true"></i>
                      Edit Your Profile
          </a>
          <a class="dropdown-item" href="#" title="Custom Settings "><i class="fa fa-cogs" aria-hidden="true"></i>
            Preferences
          </a>
                  <a class="dropdown-item" href="/logout" title="Lock the account"><i class="fa fa-sign-out icon icon-light"
                      aria-hidden="true"></i>Logout</a>
                  </div>
              </li>
            </ul>
          </div>
    </nav>
  </div>
    <div class="proteins-card">
        <div class="card text-white bg-danger mb-3" style="max-width: 90rem;max-height: 70rem;position: relative;left: 70px;height: 40pc;width: 80pc;font-size: larger;">
            <div class="card-header"> Methionine </div>
            <div class="card-body">
              <h5 class="card-title"> <i class="fa fa-info-circle" aria-hidden="true" title="information about amino-acid"></i>
              </h5>
              <p class="card-text"> 
                <a-scene>
                  <a-assets>
                      <a-asset-item id="Aspartate-semialdehyde_dehydrogenase" src="/models/1T4B.glb"></a-asset-item>
                  </a-assets>
                  <a-entity gltf-model="#Aspartate-semialdehyde_dehydrogenase" animation-mixer position="30 44 -150" rotation="100 0 70"></a-entity>
                </a-scene>  
                <table>
                      <tr>
                          <th> Group, </th>
                          <th> Alien-Protein-code, </th>
                          <th> Agent, </th>
                          <th> Formula, </th> 
                      </tr>
                      <tr>
                          <td> Carboxyl group </td>
                          <td>  </td>
                          <td> Neutral, </td>
                          <td> 
                            <a class="jmol" href="https://chemapps.stolaf.edu/jmol/jmol.php?model=CSCC%5BC%40H%5D%28%5BNH3%2B%5D%29C%28%3DO%29%5BO-%5D" title="Chemical structure of Methionine molecule. In Methionine compound Hydrogen atoms are abudant."> 
                              C<small class="subscript">5-</small>H<small class="subscript">11-</small>NO<small class="subscript">2</small>-S</td>
                            </a>
                      </tr>
                      <tr>
                          <th> Weight, </th>
                          <th> Nature, </th>
                          <th> Role, </th>
                          <th> Sidechain, </th>
                      </tr>
                      <tr>
                          <td>
                                149.21 g·mol−1, 
                          </td>
                          <td>
                                Non-polar and  Aliphatic, 
                          </td>
                          <td>
                                Amino acids such as cysteine and taurine, versatile compounds such as SAM-e, and the important antioxidant glutathione, methionine plays a critical role in the metabolism and health of many species, including humans.
                                Methionine is also an important part of angiogenesis, the growth of new blood vessels.
                                Supplementation may benefit those suffering from copper poisoning.
                                Overconsumption of methionine, the methyl group donor in DNA methylation, is related to cancer growth.
                                Homoserine is then activated with a phosphate, succinyl or an acetyl group on the hydroxyl.
                                <ul>
                                  <li> Trans-sulfurylation pathway </li>
                                  <li> Catabolism </li>
                                  <li> Regeneration </li>
                                  <li> Reverse-transulfurylation pathway</li>
                                  <li> Ethylene synthesis </li>
                                </ul>
                                                                 
                          </td>
                          <td> 
                                S-methyl thioether,
                          </td>
                      </tr>
                  </table>
              </p>
            </div>
          </div>
    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</body>
</html>