ali2210/WizDwarf

View on GitHub
phenylalanine.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/phenylalanine.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-success mb-3" style="max-width: 90rem;max-height: 70rem;position: relative;left: 70px;height: 40pc;width: 80pc;font-size: larger;">
            <div class="card-header"> Phenylalanine </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="PHENYLALANINE_HYDROXYLASE" src="/models/2PAH.glb"></a-asset-item>
                  </a-assets>
                  <a-entity gltf-model="#PHENYLALANINE_HYDROXYLASE" animation-mixer position="30 40 -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> Benzyl-group which is subsuite of methyl-group of alanine. </td>
                          <td> PKU, </td>
                          <td> Neutral, </td>
                          <td> 
                            <a class="jmol" href="https://chemapps.stolaf.edu/jmol/jmol.php?model=%5BNH3%2B%5D%5BC%40%40H%5D%28CC1%3DCC%3DCC%3DC1%29C%28%5BO-%5D%29%3DO" title="Chemical structure of Phenylalanine molecule. In Phenylalanine compound Hydrogen atoms are abudant.">  
                              C<small class="subscript">9-</small>H<small class="subscript">11-</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>
                                165.192 g·mol−1, 
                          </td>
                          <td>
                              Non-polar & Hydrobophic, 
                          </td>
                          <td>
                            The L-isomer is used to biochemically form proteins, coded for by DNA.
                            Phenylalanine is a precursor for tyrosine, the monoamine neurotransmitters dopamine, norepinephrine (noradrenaline), and epinephrine (adrenaline), and the skin pigment melanin.
                            Phenylalanine uses the same active transport channel as tryptophan to cross the blood–brain barrier.
                            Phenylalanine is the starting compound used in the synthesis of flavonoids. Lignan is derived from phenylalanine and from tyrosine. Phenylalanine is converted to cinnamic acid by the enzyme phenylalanine ammonia-lyase.
                            -Phenylalanine also inhibits neurotransmitter release at glutamatergic synapses in hippocampus and cortex with IC50 of 980 μM, a brain concentration seen in classical phenylketonuria, whereas D-phenylalanine has a significantly smaller effect.
                          </td>
                          <td> 
                              Benzyl-group,
                          </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>