ali2210/WizDwarf

View on GitHub
alanine.html

Summary

Maintainability
Test Coverage

<!-- This codebase desgin according to mozilla open source license.
Redistribution , contribution and improve codebase under license 
convensions. @contact Ali Hassan AliMatrixCode@protonmail.com  -->

<!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/alanine.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:45pc;width: 80pc;font-size: large;">
            <div class="card-header"> Alanine </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="Alanine_Aminotransferase" src="/models/3IHJ.glb"></a-asset-item>
                  </a-assets>
                  <a-entity gltf-model="#Alanine_Aminotransferase" animation-mixer position="30 44 -150" rotation="100 0 20"></a-entity>
                </a-scene>
                  <table>
                      <tr>
                          <th> Group, </th>
                          <th> Alien-Protein-code, </th>
                          <th> Agent, </th>
                          <th> Formula, </th> 
                      </tr>
                      <tr>
                          <td> Amine group & carboxylic acid group, </td>
                          <td> ALT  </td>
                          <td> Neutral, </td>
                          <td> 
                            <a class="jmol" href="https://chemapps.stolaf.edu/jmol/jmol.php?model=C%5BC%40%40H%5D%28C%28%3DO%29%5BO-%5D%29%5BNH3%2B%5D" title="Chemical structure of alanine molecule. Alanine belong to Methyl group. In Alanine compound Hydrogen atoms are abudant.">
                              C<small class="subscript">3-</small>H<small class="subscript">7-</small>NO<small class="subscript">2</small>
                            </a>
                          </td>
                          
                      </tr>
                      <tr>
                          <th> Weight, </th>
                          <th> Nature, </th>
                          <th> Role, </th>
                          <th> Sidechain, </th>
                      </tr>
                      <tr>
                          <td>
                                89.094 g·mol−1, 
                          </td>
                          <td>
                                Non-polar & Aliphatic, 
                          </td>
                          <td>
                            The L-isomer of alanine (left-handed) is the one that is incorporated into proteins.
                            The right-handed form, D-alanine, occurs in polypeptides in some bacterial cell walls and in some peptide antibiotics, and occurs in the tissues of many crustaceans and molluscs as an osmolyte.
                            Alanine is also very abundant (over-represented) in low complexity regions of proteins.
                            Alanine can be synthesized from pyruvate and branched chain amino acids such as valine, leucine, and isoleucine.
                            In mammals, alanine plays a key role in glucose–alanine cycle between tissues and liver.
                            The alanine enters the bloodstream, and is transported to the liver.
                            Glutamate in the liver enters mitochondria and is broken down by glutamate dehydrogenase into α-ketoglutarate and ammonium, which in turn participates in the urea cycle to form urea which is excreted through the kidneys.
                            Alterations in the alanine cycle that increase the levels of serum alanine aminotransferase (ALT) are linked to the development of type II diabetes.
                          </td>
                          <td> 
                                Methyl group,
                          </td>
                      </tr>
                  </table>
              </p>
            </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>