Difference between revisions of "Team:CSMU NCHU Taiwan/Software"

Line 1: Line 1:
−
{{CSMU_NCHU_Taiwan}}
+
{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
 
<html>
 
<html>
  
−
 
+
<!--
 
<div class="clear"></div>
 
<div class="clear"></div>
  
Line 33: Line 33:
 
</ul>
 
</ul>
  
−
</div>
+
</div> -->
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>software</title>
 +
  </head>
 +
 
 +
<style type="text/css">
 +
 
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
 +
 
 +
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
 +
 
 +
 
 +
.bg-container {
 +
  overflow: hidden;
 +
  position: relative;
 +
  max-height: 200vh; }
 +
  .bg-container > img {
 +
    width: 100%;
 +
    margin-top: -45px; }
 +
 
 +
.my-main-container {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 50px 7%;
 +
  min-height: 200vh;
 +
  overflow: hidden; }
 +
 
 +
.main-content {
 +
  background-color: white;
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  min-height: 180vh;
 +
  z-index: 10; }
 +
 
 +
.m-text-area h1 {
 +
    font-size: 60px;
 +
    font-weight: 700;
 +
    font-family: 'Arizonia' !important;
 +
    text-align: center;
 +
    margin-bottom: 1rem; }
 +
.m-text-area p {
 +
    font-size: 22px;
 +
    font-weight: 500; }
 +
 
 +
.m-block img {
 +
  width: 100%; }
 +
 
 +
.path-btns {
 +
  position: fixed;
 +
  width: 250px;
 +
  top: 200px;
 +
  left: 225px; }
 +
  .path-btns .path-dot {
 +
    width: 25px;
 +
    height: 25px;
 +
    border-radius: 50%;
 +
    position: absolute;
 +
    background-color: #fff;
 +
    top: 5px;
 +
    left: 27px;
 +
    border: 5px solid #385e66;
 +
    cursor: pointer; }
 +
    .path-btns .path-dot.active {
 +
      background-color: #385e66; }
 +
    .path-btns .path-dot:hover {
 +
      transition: all .3s;
 +
      transform: scale(1.2); }
 +
 
 +
 
 +
.path {
 +
  height: 65px;
 +
  display: flex; }
 +
  .path .pathSvg {
 +
    display: block; }
 +
  .path .pathWord {
 +
    padding-right: 10%; }
 +
  .path .path-btn {
 +
    cursor: pointer;
 +
    fill: #fff; }
 +
    .path .path-btn.path-active {
 +
      fill: #385e66; }
 +
  .path .path-word-sm {
 +
    font-size: 12px; }
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
}
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
 +
 
 +
.text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important; }
 +
 
 +
.m-text-area {
 +
  padding-left: 225px; }
 +
  .m-text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important; }
 +
 
 +
 
 +
</style>
 +
 
 +
<body>
 +
    <div class="bg-container" style="max-height:none;">
 +
      <img src="https://static.igem.org/mediawiki/2017/4/4d/T--CSMU_NCHU_Taiwan--safety.png">
 +
      <div class="my-main-container">
 +
        <div class="main-content">
 +
          <div class="m-text-area">
 +
            <h1>Software tools</h1>
 +
            <div id="app-NCBI" class="m-block" >
 +
                <h2 class="m-subtitle">NCBI</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">To search ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-RaptorX" class="m-block" >
 +
                <h2 class="m-subtitle">RaptorX</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">A web ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <p>A. ...</p>
 +
                <!-- <img src=""> -->
 +
                <p>B. ...</p>
 +
                <!-- <img src=""> -->
 +
                <p>C. ...</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-Uniprot" class="m-block" >
 +
                <h2 class="m-subtitle">Uniprot</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">Free use ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-Pymol" class="m-block" >
 +
                <h2 class="m-subtitle">Pymol</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">Can visualize ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-Swiss" class="m-block" >
 +
                <h2 class="m-subtitle">Swiss Model</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">To search ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-PMV" class="m-block" >
 +
                <h2 class="m-subtitle">PMV-1.5.7rc1</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">Protein model ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-PubChem" class="m-block" >
 +
                <h2 class="m-subtitle">PubChem</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">Allows downloading ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
            <div id="app-PyRx" class="m-block" >
 +
                <h2 class="m-subtitle">PyRx</h2>
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1a/T--CSMU_NCHU_Taiwan--app-line.png" style="width: 60%; transform: translate(35%, -150%);">
 +
                <p style="text-align: center;">To search ... </p>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 +
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 +
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 +
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 +
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 +
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
                <p>A. ...</p>
 +
                <!-- <img src=""> -->
 +
                <p>B. ...</p>
 +
                <!-- <img src=""> -->
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="path-tags">
 +
        <ul>
 +
          <span>Software tools</span>
 +
          <img src="https://static.igem.org/mediawiki/2017/2/26/T--CSMU_NCHU_Taiwan--app-tag.png" style="position: fixed; top: 190px; width: 170px;">
 +
          <li id="NCBI-btn" class="tag-btn">- NCBI</li>
 +
          <li id="RaptorX-btn" class="tag-btn">- RaptorX</li>
 +
          <li id="Uniprot-btn" class="tag-btn">- Uniprot</li>
 +
          <li id="Pymol-btn" class="tag-btn">- Pymol</li>
 +
          <li id="Swiss-btn" class="tag-btn">- Swiss</li>
 +
          <li id="PMV-btn" class="tag-btn">- PMV</li>
 +
          <li id="PubChem-btn" class="tag-btn">- PubChem</li>
 +
          <li id="PyRx-btn" class="tag-btn">- PyRx</li>
 +
        </ul>
 +
        <br>
 +
        <p>APP</p>
 +
      </div>
 +
    </div>
 +
  </body>
 +
  <script type="text/javascript">
 +
    $(document).ready(function(){
 +
      console.log('hi')
 +
 
 +
      $("ul>li#NCBI-btn").click(function() {
 +
      console.log('click')
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-NCBI").offset().top
 +
        }, 500);
 +
      });
 +
      $("#RaptorX-btn").click(function() {
 +
      console.log('click')
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-RaptorX").offset().top
 +
        }, 500);
 +
      });
 +
      $("#Uniprot-btn").click(function() {
 +
      console.log('click')
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-Uniprot").offset().top
 +
        }, 500);
 +
      });
 +
      $("#Pymol-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-Pymol").offset().top
 +
        }, 500);
 +
      });
 +
      $("#Swiss-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-Swiss").offset().top
 +
        }, 500);
 +
      });
 +
      $("#PMV-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-PMV").offset().top
 +
        }, 500);
 +
      });
 +
      $("#PubChem-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-PubChem").offset().top
 +
        }, 500);
 +
      });
 +
      $("#PyRx-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#app-PyRx").offset().top
 +
        }, 500);
 +
      });
 +
  });
 +
 
 +
  </script>
 +
 
  
 
</html>
 
</html>

Revision as of 17:54, 25 October 2017

HOME
software

Software tools

NCBI

To search ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

RaptorX

A web ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A. ...

B. ...

C. ...

Uniprot

Free use ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pymol

Can visualize ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Swiss Model

To search ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PMV-1.5.7rc1

Protein model ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PubChem

Allows downloading ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PyRx

To search ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A. ...

B. ...

    Software tools
  • - NCBI
  • - RaptorX
  • - Uniprot
  • - Pymol
  • - Swiss
  • - PMV
  • - PubChem
  • - PyRx

APP