Line 1: | Line 1: | ||
− | <html | + | <!DOCTYPE html> |
− | < | + | <html> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<head> | <head> | ||
− | + | <meta charset="UTF-8"> | |
− | <meta | + | <title></title> |
− | < | + | <link rel="stylesheet" href="css/style.css"> |
− | + | <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> | |
− | + | <script type="text/javascript" src="js/font.js"></script> | |
− | <link | + | |
− | + | ||
− | <script | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <script type="text/javascript" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</head> | </head> | ||
<body> | <body> | ||
− | < | + | <!--等待加载页面--> |
− | < | + | <div class="loading1"> |
− | < | + | <img src="images/logo.png"/> |
− | <div | + | <div class="loading"> |
− | + | <span></span> | |
+ | <span></span> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | <span></span> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <!--menu--> | |
− | + | <div class="header-box"> | |
− | + | <div class="header"> | |
− | + | <!-- start h_menu4 --> | |
− | + | <div class="h_menu4"> | |
− | + | <a class="toggleMenu" href="">Menu</a> | |
− | + | <ul id="top_ul_my" class="nav"> | |
− | + | <script> | |
− | + | function getHover(number){ | |
− | + | var top_ul_my_lis = $("#top_ul_my").find(">li"); | |
+ | // console.log(top_ul_my_lis); | ||
+ | if(number == 0) top_ul_my_lis[0].setAttribute("class", "active hover"); | ||
+ | else top_ul_my_lis[0].setAttribute("class", "active"); | ||
− | + | for(var i = 1; i < top_ul_my_lis.length; i++){ | |
− | + | if(i == number) { | |
− | + | top_ul_my_lis[i].setAttribute("class", "hover"); | |
− | + | }else{ | |
− | + | top_ul_my_lis[i].setAttribute("class", ""); | |
− | + | } | |
− | + | } | |
− | + | } | |
− | + | </script> | |
− | + | <li class="active" onmouseover="getHover(0)"><a class="active" href="https://2016.igem.org/Team:TJUSLS_China/home">TJUSLS</a></li> | |
− | + | <li onmouseover="getHover(1)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Project" class="root">project</a> | |
− | + | <ul> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Description">Description</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Design">Design</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Experiments">Experiments</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Proof">Proof of Concept</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a></li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/PROJECT/PROTOCOLS">Protocols</a></li> | |
− | + | </ul> | |
− | + | </li> | |
+ | <li onmouseover="getHover(2)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Parts">PARTS</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Basic_Part">Basic Parts</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Composite_Part">Composite Parts</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Part_Collection">Part Collection</a></li> | ||
− | + | </ul> | |
+ | </li> | ||
+ | <li onmouseover="getHover(3)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Safety">SAFETY</a></li> | ||
+ | <li onmouseover="getHover(4)" class=""><a href="https://2016.igem.org/Team:TFJUSLS_China/Attributions">ATTRIBUTIONS</a> | ||
− | + | </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <li onmouseover="getHover(5)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Human_Practices">HUMAN PRACTICES</a> | |
− | + | <ul> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Silver">Silver</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/HP/Gold">Gold</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Integrated_Practices">Integrated Practices</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Engagement">Engagement</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li onmouseover="getHover(6)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">MODELING</a> | |
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">Modeling</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Software">Software</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li onmouseover="getHover(7)" class=""><a href="https://2016.igem.org/Team:TJUSLS_China/Team">TEAM</a> | ||
− | + | <ul> | |
− | + | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Team">Team</a></li> | |
+ | <li><a href="https://2016.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <!--<script type="text/javascript" src="https://2016.igem.org/Team:TJUSLS_China/home/home_nav?action=raw&ctype=text/javascript"></script>--> | ||
+ | </div> | ||
+ | <!-- end h_menu4 --> | ||
+ | <div class="clear"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--banner--> | ||
+ | <div class="banner-bg"> | ||
+ | <div class="banner" id="banner"> | ||
+ | <div class="lii"></div> | ||
+ | <ul class="bannerimg banner-scroll" id="scroll"> | ||
+ | <li class="active"><img src="images/banner1.jpg"/></li> | ||
+ | <li><img src="images/banner2.jpg"/></li> | ||
+ | <li><img src="images/banner3.jpg"/></li> | ||
+ | <li><img src="images/banner4.jpg"/></li> | ||
+ | <li><img src="images/banner5.jpg"/></li> | ||
+ | </ul> | ||
+ | <div class="banner-dot-box"> | ||
+ | <ul class="dot" id="dot"> | ||
+ | <li class="active">1</li> | ||
+ | <li>2</li> | ||
+ | <li>3</li> | ||
+ | <li>4</li> | ||
+ | <li>5</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="jiao"> | ||
+ | <a href="#" id="left"><div class="prev"><img src="images/prev.png"/></div></a> | ||
+ | <a href="#" id="right"><div class="next"><img src="images/next.png"/></div></a> | ||
+ | </div> | ||
</div> | </div> | ||
+ | <!--<div class="banner" id="banner"> | ||
+ | |||
+ | <div class="lii"></div> | ||
+ | <div class="bannerimg banner-scroll" id="scroll"> | ||
+ | <a href="#"><img src="images/banner1.jpg"></a> | ||
+ | <a href="#"><img src="images/banner2.jpg"></a> | ||
+ | <a href="#"><img src="images/banner3.jpg"></a> | ||
+ | <a href="#"><img src="images/banner4.jpg"></a> | ||
+ | <a href="#"><img src="images/banner5.jpg"></a> | ||
+ | </div> | ||
+ | <div class="banner-dot-box"> | ||
+ | <ul class="dot" id="dot"> | ||
+ | <li class="active">1</li> | ||
+ | <li>2</li> | ||
+ | <li>3</li> | ||
+ | <li>4</li> | ||
+ | <li>5</li> | ||
+ | <div style="clear: both"></div> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="jiao"> | ||
+ | <a href="#" id="left"><div class="prev"><img src="images/prev.png"/></div></a> | ||
+ | <a href="#" id="right"><div class="next"><img src="images/next.png"/></div></a> | ||
+ | </div> | ||
+ | </div>--> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <!--content--> | |
− | + | <div class="zz-content"> | |
− | + | <h1>Proof of Concept</h1> | |
− | + | <div class="zz-form"> | |
− | + | <div class="form-1"><img src="images/form1.jpg"/></div> | |
− | + | <div class="form-2"><img src="images/form2.jpg"/></div> | |
+ | <div class="form-3"><img src="images/form3.jpg"/></div> | ||
+ | <div class="form-4"><img src="images/form4.jpg"/></div> | ||
+ | <div class="form-5"><img src="images/form5.jpg"/></div> | ||
+ | <div class="form-6"><img src="images/form6.jpg"/></div> | ||
+ | <div class="clear"></div> | ||
+ | <div class="more"> | ||
+ | <img src="images/more.png"/> | ||
+ | <a href="#">Read more ></a> | ||
</div> | </div> | ||
− | + | </div> | |
− | <div class=" | + | <div class="software"> |
− | < | + | <div class="software-left"> |
− | <div class=" | + | <h2>Software</h2> |
− | < | + | <p>Our software can calculate peak area of any substance by the raw data of HPLC conveniently and accurately. It can display the image details saved at any period of time. It also can automatically identify substance peak and calculate the area. In addition, we can manually select the range of the area calculated. What’s more, in order to facilitate the analysis, it can store the results of calculations in a same file which contains the filename of the HPLC data.</p> |
− | + | <div class="more"> | |
− | + | <img src="images/more.png"/> | |
− | + | <a href="#">Read more ></a> | |
</div> | </div> | ||
</div> | </div> | ||
− | < | + | <div class="software-right"> |
+ | <img src="images/software.jpg"/> | ||
+ | </div> | ||
+ | <div class="clear"></div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="human"> |
− | + | <h2>Human Practice</h2> | |
− | + | <div class="humanBox"> | |
− | </ | + | <div class="human-info"> |
− | + | <img src="images/human1.jpg"/> | |
− | + | <div class="number">0.1</div> | |
− | <div class=" | + | <div class="name">Lmage name</div> |
− | + | <div class="introduce">Osat isati satisat isatisa tisatisa tis</div> | |
− | + | <div class="clear"></div> | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
</div> | </div> | ||
− | <div class=" | + | <div class="human-info"> |
− | <img src=" | + | <img src="images/human2.jpg"/> |
− | < | + | <div class="number">0.2</div> |
− | < | + | <div class="name">Lmage name</div> |
+ | <div class="introduce">Osat is atis atisa tisa tisatisat isat is</div> | ||
+ | <div class="clear"></div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="human-info"> |
− | <img src=" | + | <img src="images/human3.jpg"/> |
− | < | + | <div class="number">0.3</div> |
− | < | + | <div class="name">Lmage name</div> |
+ | <div class="introduce">Osati satisa tisat isati satisa tis atis</div> | ||
+ | <div class="clear"></div> | ||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
+ | </div> | ||
+ | <div class="more"> | ||
+ | <img src="images/more.png"/> | ||
+ | <a href="#">Read more ></a> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <div class="team"> | ||
+ | <h2>Team</h2> | ||
+ | <img src="images/team.png"/> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class="up"><img src="images/up.jpg"/></div> | |
− | <div class=" | + | <!--foot--> |
− | + | <div class="footer_bg"> | |
− | + | <div class="foot_wrap"> | |
− | + | <div class="footer"> | |
− | + | <div class="span_of_4"> | |
− | + | <div class="span1_of_4"> | |
− | + | <h2>recent posts</h2> | |
− | + | <ul class="f_nav1"> | |
− | + | <li><a href="">This is a sample blog post with an extra super long title</a></li> | |
− | + | <li><a href="">This is a sample blog post</a></li> | |
− | <div class=" | + | <li><a href="">This is another sample post</a></li> |
− | <div class=" | + | <li><a href="">This is yet anothe sample</a></li> |
− | <ul | + | <li><a href="">This is a fifth sample blog post</a></li> |
− | <li> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="span1_of_4"> |
− | <ul | + | <h2>recent comments</h2> |
− | <li> | + | <ul class="f_nav1"> |
− | + | <li><a href="">This is a sample blog post with an extra super long title</a></li> | |
− | + | <li><a href="">This is a sample blog post</a></li> | |
− | + | <li><a href="">This is another sample post</a></li> | |
− | + | <li><a href="">This is yet anothe sample</a></li> | |
− | + | <li><a href="">This is a fifth sample blog post</a></li> | |
− | + | ||
− | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="span1_of_4"> |
− | <ul | + | <h2>tag cloud</h2> |
− | <li> | + | <ul class="f_nav2"> |
− | + | <li><a href="">sample</a></li> | |
− | + | <li><a href="">tag</a></li> | |
− | + | <li><a href="">sample</a></li> | |
− | + | <li><a href="">sample</a></li> | |
− | + | <li><a href="">tag</a></li> | |
− | + | <li><a href="">sample</a></li> | |
− | + | <li><a href="">tag</a></li> | |
+ | <li><a href="">sample</a></li> | ||
+ | <li><a href="">tag</a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="span1_of_4"> |
− | < | + | <h2>Retina</h2> |
− | + | <p class="f_para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> | |
− | + | <div class="search"> | |
− | + | <form> | |
− | + | <input type="text" value="" placeholder="search..."> | |
− | + | <input type="submit" value=""> | |
− | + | </form> | |
− | + | </div> | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
</div> | </div> | ||
− | + | <div class="footer_btm"> | |
− | + | <div class="social-icons"> | |
− | + | ||
− | + | ||
− | + | ||
− | <div class=" | + | |
− | + | ||
− | <div class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<ul> | <ul> | ||
− | <li><a | + | <li><a href="#" target="_blank"> </a></li> |
− | <li><a href="" | + | <li><a href="#" target="_blank"></a></li> |
− | <li><a href="" | + | <li><a href="#" target="_blank"></a></li> |
− | <li><a href="">< | + | <li><a href="#" target="_blank"></a></li> |
− | <li><a href="">< | + | <li><a href="#" target="_blank"></a></li> |
+ | <li><a href="#" target="_blank"></a></li> | ||
+ | <li><a href="#" target="_blank"> </a></li> | ||
+ | <li><a href="#" target="_blank"></a></li> | ||
+ | <li><a href="#" target="_blank"></a></li> | ||
+ | <li><a href="#" target="_blank"></a></li> | ||
+ | <li><a href="#" target="_blank"></a></li> | ||
+ | <li><a href="#" target="_blank"></a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="copy"> |
− | + | <p class="w3-link">Copyright 2013 <span><a href="index.html"> TJUSLS</a></span>. Template by <a href="http://w3layouts.com/"> W3Layouts</a></p> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 10:59, 17 October 2016
<!DOCTYPE html>
Proof of Concept
Software
Our software can calculate peak area of any substance by the raw data of HPLC conveniently and accurately. It can display the image details saved at any period of time. It also can automatically identify substance peak and calculate the area. In addition, we can manually select the range of the area calculated. What’s more, in order to facilitate the analysis, it can store the results of calculations in a same file which contains the filename of the HPLC data.
Human Practice
0.1
Lmage name
Osat isati satisat isatisa tisatisa tis
0.2
Lmage name
Osat is atis atisa tisa tisatisat isat is
0.3
Lmage name
Osati satisa tisat isati satisa tis atis