ali2210/WizDwarf

View on GitHub
cysteine.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/cysteine.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:45pc;width: 80pc;font-size: large;">
            <div class="card-header"> Cysteine </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="Cysteine_Dioxygenase" src="/models/2IC1.glb"></a-asset-item>
                  </a-assets>
                  <a-entity gltf-model="#Cysteine_Dioxygenase" animation-mixer position="10 22 -90"></a-entity>
                </a-scene> 
                  <table>
                      <tr>
                          <th> Group, </th>
                          <th> Alien-Protein-code, </th>
                          <th> Agent, </th>
                          <th> Formula, </th> 
                      </tr>
                      <tr>
                          <td>  </td>
                          <td>  </td>
                          <td> Neutral, </td>
                          <td>
                            <a class="jmol" href="https://chemapps.stolaf.edu/jmol/jmol.php?model=C%28%5BC%40%40H%5D%28C%28%3DO%29%5BO-%5D%29%5BNH3%2B%5D%29S" title="Chemical structure of Cysteine molecule. In Cysteine compound Hydrogen atoms are abudant.">
                              C<small class="subscript">3-</small>H<small class="subscript">7-</small>NO<small class="subscript">2-</small>S
                            </a> 
                          </td>
                      </tr>
                      <tr>
                          <th> Weight, </th>
                          <th> Nature, </th>
                          <th> Role, </th>
                          <th> Sidechain, </th>
                      </tr>
                      <tr>
                          <td>
                                 121.15 g·mol−1, 
                          </td>
                          <td>
                                Hydrophile, 
                          </td>
                          <td>
                                <li> Precursor to the antioxidant glutathione. </li>
                                <li> Precursor to iron-sulfur clusters. </li>
                                <li> Metal ion binding. </li>
                                <li> Roles in protein structure. </li>
                                Free cysteine residues do occur in proteins, most are covalently bonded to other cysteine residues to form disulfide bonds, which play an important role in the folding and stability of some proteins, usually proteins secreted to the extracellular medium.
                                Protein disulfide isomerases catalyze the proper formation of disulfide bonds; the cell transfers dehydroascorbic acid to the endoplasmic reticulum, which oxidizes the environment. In this environment, cysteines are, in general, oxidized to cystine and are no longer functional as a nucleophiles.
                                Aside from its oxidation to cystine, cysteine participates in numerous post-translational modifications.
                                The nucleophilic sulfhydryl group allows cysteine to conjugate to other groups, e.g., in prenylation. Ubiquitin ligases transfer ubiquitin to its pendant, proteins, and caspases, which engage in proteolysis in the apoptotic cycle.
                                Inteins often function with the help of a catalytic cysteine.
                                These roles are typically limited to the intracellular milieu, where the environment is reducing, and cysteine is not oxidized to cystine.
                          </td>
                          <td> 
                                Thiol ,
                          </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>