Team:SJTU-Software/Project/Demo

From 2014.igem.org

(Difference between revisions)
 
(153 intermediate revisions not shown)
Line 7: Line 7:
<p>
<p>
-
<style type="text/css"> body {background-image:url(https://static.igem.org/mediawiki/2014/5/57/Sjtu_software_background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style>
+
<style type="text/css"> body {background-color:#BEBEBE; background-attachment:fixed; width:1366px;height:auto;align:center} </style>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script>
<style type="text/css">
<style type="text/css">
 +
ul.expmenu { width: 200px; }
ul.expmenu { width: 200px; }
ul.expmenu * { list-style: none; }
ul.expmenu * { list-style: none; }
Line 125: Line 126:
.container {
.container {
     height: 5px;
     height: 5px;
-
     margin: 22px auto 4% auto;
+
     margin: 1.6% auto 3.9% auto;
-
     width: 957px;
+
     width: 71%;
     align: center;
     align: center;
}
}
Line 135: Line 136:
}
}
#nav {
#nav {
-
     background: url('https://static.igem.org/mediawiki/2014/1/17/Sjtu_software_menu_bg.png')no-repeat scroll 0 0 transparent ;
+
     background: url('https://static.igem.org/mediawiki/2014/c/c7/Sjtu_software_menu_bg2.png')no-repeat scroll 0 0 transparent ;
     clear: both;
     clear: both;
     font-size: 16px;
     font-size: 16px;
     height: 58px;
     height: 58px;
-
     padding: 0 0 0 9px;
+
     padding: 0 0 0 0px;
     position: relative;
     position: relative;
-
     width: 957px;
+
     width: 100%;
}
}
#nav ul {
#nav ul {
Line 223: Line 224:
     background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent;
     background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent;
     height: 16px;
     height: 16px;
-
     left: 111px;
+
     left: 93px;
     position: absolute;
     position: absolute;
     top: 0px;
     top: 0px;
Line 243: Line 244:
#nav li:nth-of-type(1):hover ~ #lavalamp {
#nav li:nth-of-type(1):hover ~ #lavalamp {
-
     left: 17px;
+
     left: 6px;
}
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
#nav li:nth-of-type(2):hover ~ #lavalamp {
-
     left: 111px;
+
     left: 93px;
}
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
#nav li:nth-of-type(3):hover ~ #lavalamp {
-
     left: 218px;
+
     left: 195px;
}
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
#nav li:nth-of-type(4):hover ~ #lavalamp {
-
     left: 335px;
+
     left: 310px;
}
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
#nav li:nth-of-type(5):hover ~ #lavalamp {
-
     left: 440px;
+
     left: 415px;
}
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
#nav li:nth-of-type(6):hover ~ #lavalamp {
Line 265: Line 266:
#nav li:nth-of-type(8):hover ~ #lavalamp {
#nav li:nth-of-type(8):hover ~ #lavalamp {
     left: 647px;
     left: 647px;
 +
}
 +
</style>
 +
 +
<style type="text/css">
 +
.firstHeading {
 +
width: 0px;
 +
        height: 0px;
 +
margin: -38px auto;
 +
padding-top: 0px;
 +
margin-bottom: 0px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
 +
 +
/*returnTop*/
 +
p#back-to-top{
 +
    position:fixed;
 +
    display:none;
 +
    bottom:50px;
 +
    right:30px;
 +
}
 +
p#back-to-top a{
 +
    text-align:center;
 +
    text-decoration:none;
 +
    color:#d1d1d1;
 +
    display:block;
 +
    width:112px;
 +
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
 +
    -moz-transition:color 1s;
 +
    -webkit-transition:color 1s;
 +
    -o-transition:color 1s;
 +
}
 +
p#back-to-top a:hover{
 +
    color:#979797;
 +
}
 +
p#back-to-top a span{
 +
    background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px;
 +
    border-radius:6px;
 +
    display:block;
 +
    height:40px;
 +
    width:112px;
 +
    margin-bottom:5px;
 +
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
 +
    -moz-transition:background 1s;
 +
    -webkit-transition:background 1s;
 +
    -o-transition:background 1s;
 +
}
 +
#back-to-top a:hover span{
 +
    background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px;
}
}
</style>
</style>
Line 336: Line 385:
</script>
</script>
   </head>
   </head>
-
<body class="background">
+
<body class="background"  bgcolor="yellow">
-
                 
+
            <a href="http://www.igem.org/Main_Page" target=blank><img src="https://static.igem.org/mediawiki/2014/6/60/Igemlogo_300px.png" style="width:100px; height:100px; position:fixed; top:10px; right:50px;"></img></a>
-
  <div class="container" style="position:relative;z-index:3">
+
  <div class="container" style="position:relative;z-index:3" >
-
 
+
             <ul id="nav">
             <ul id="nav">
-
                 <li><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li>
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software"><font face="Jokerman">Home</font></a></li>
-
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Software</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview">Overview</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Overview</font></a></li>
-
                         <li><a href="#">Tutorial</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman">Tutorial</font></a></li>
-
                         <li><a href="#">User Study</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman">User Study</font></a></li>
-
                         <li><a href="#">Demo</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman">Demo</font></a></li>
-
                         <li><a href="#">Download</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman">Download</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="#">Document</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Document</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="#">Database</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Database</font></a></li>
-
                         <li><a href="#">A M</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel"><font face="Jokerman">Assessment Model</font></a></li>
-
                         <li><a href="#">C D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Conponent"><font face="Jokerman">Conponents</font></a></li>
-
                         <li><a href="#">F D</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/FutureDevelopment"><font face="Jokerman">For Future</font></a></li>
-
                         <li><a href="#">E S S</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Event"><font face="Jokerman">Events</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a class="hsubs" href="#">Requirement</a>
+
                 <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Requirement</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="#">Medal</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Medal</font></a></li>
-
                         <li><a href="#">Collaboration</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Acknowledgement"><font face="Jokerman">Acknowledgement</font></a></li>
 +
                       
 +
                        <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice"><font face="Jokerman">Human Practice</font></a></li>
                     </ul>
                     </ul>
                 </li>
                 </li>
-
                 <li><a href="#">Team</a>
+
                 <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Team</font></a>
                     <ul class="subs">
                     <ul class="subs">
-
                         <li><a href="#">Member</a></li>
+
                         <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Member</font></a></li>
-
                        <li><a href="#">Join Us</a></li>
+
                     
-
                        <li><a href="#">Sponsor</a></li>
+
                     </ul>
                     </ul>
                 </li>
                 </li>
Line 378: Line 427:
         </div>
         </div>
-
 
<div align="center">
<div align="center">
-
     <div class="container2" style="height:975px;width:71%;">
+
     <div class="container2" style="height:1150px;width:71%;margin:4.3% 0 0 0">
-
           <div align=center>
+
           <div align=left>
-
           <div  class="container2" style="height:150px;width:20%;background-color:#408080;float:left; display:inline" >
+
           <div  class="container2" style="height:1150px;width:28%;background-color:#636363;float:left; display:inline" >
-
            <img  style="width:100px;margin:15% 5% auto" src="https://static.igem.org/mediawiki/2014/6/6d/Sjtu_software_demo.jpg"></img>
+
          <div id="content" >
 +
<ul id="expmenu-freebie" style="position:fixed;" >
 +
<li>
 +
<!-- Start Freebie -->
 +
<ul class="expmenu" >
 +
<li>
 +
<div class="header" >
 +
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Overview" ><font face="Jokerman" color=#ffffff>Overview</font></a></span>
 +
<span class="arrow up"></span>
 +
</div>
 +
 +
</li>
 +
<li>
 +
<div class="header">
 +
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman" color=#ffffff>Tutorial</font></a></span>
 +
<span class="arrow up"></span>
 +
</div>
 +
 +
</li>
 +
<li>
 +
<div class="header">
 +
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman" color=#ffffff>User Study</font></a></span>
 +
<span class="arrow down"></span>
 +
</div>
 +
 +
</li>
 +
<li>
 +
<div class="header">
 +
<span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman" color=#ffffff>Demo</font></a></span>
 +
</div>
 +
</li>
 +
                                        <li>
 +
<div class="header">
 +
<span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman" color=#ffffff>Download</font></a></span>
 +
</div>
 +
</li>
 +
</ul>
 +
<!-- End Freebie -->
 +
</li>
 +
</ul>
 +
  </div>
 +
          </div>  
            
            
-
          </div>
 
-
          <div  class="container2" style="height:150px;width:80%;background-color:#408080;float:left; display:inline" >
 
              
              
-
           <p class="text"  style="margin:8% 5% auto 0"><font face="Microsoft YaHei" size="10px"  color="#FFFFFF">Demo of EASYBBK</font></p>
+
           <div  class="container2" style="height:1150px;width:72%;background-color:#E0E0E0; float:left;display:inline" >
-
          </div>
+
          <div align=center >
-
            <div  class="container2" style="height:10px;width:100%;background-color:#BEBEBE;float:left; display:inline" >
+
-
            </div>
+
    <div  class="container2" style="height:1150px;width:100%;background-color: #ECC2FF;margin:0 0 0 0 ">
-
          <div  class="container2" style="height:400px;width:50%;background-color:#C4E1FF;float:left; display:inline" >
+
<div align=left  >
-
          <embed src="http://player.youku.com/player.php/sid/XMjI0MDIwNDc2/v.swf" style="padding:10% 0 0 0;" quality="high" width="360" height="300" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed>
+
                          <br>
-
          </div>
+
                          <br>
-
<div  class="container2" style="height:400px;width:50%;background-color:#C4E1FF;float:left; display:inline" >
+
 
-
          <p class="text"  style="margin:8% 5% auto 0"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">Introduction</font></p>
+
                          <div  class="container2" style="margin:-4% 0 0 0;height:1020px;width:100%;float:left; display:inline" >
-
          </div>
+
                          <p class="text"  style="margin:5% 60px auto"><font face="Helvetica" size="5px"  color="#242424">EASY BBK's Demo:</font></p>
-
          <div  class="container2" style="height:10px;width:100%;background-color:#BEBEBE;float:left; display:inline" >
+
-
            </div>
+
-
          <div  class="container2" style="height:400px;width:50%;background-color:#C4E1FF;float:left; display:inline" >
+
                            <p class="text" style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">This demo guides you to the function "search" and "compare":<br><br>
-
          <iframe width="360" height="300" src="//www.youtube.com/embed/1VDxFu7wZMs" style="padding:10% 0 0 0;" frameborder="0" allowfullscreen></iframe>
+
 
-
          </div>
+
</font></p>
-
<div class="container2" style="height:400px;width:50%;background-color:#C4E1FF;float:left; display:inline" >
+
<iframe width="480" height="380" style="padding:2% 0 0 10%;" src="//www.youtube.com/embed/YILWQxhKEMQ" frameborder="0" allowfullscreen></iframe>
-
          <p class="text"  style="margin:8% 5% auto 0"><font face="Microsoft YaHei" size="4px"  color="#FFFFFF">Introduction</font></p>
+
 
-
          </div>  
+
 
-
            
+
 
 +
 
 +
  <p class="text" style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">This demo guides you to the function "present" and "upload":<br><br>
 +
 
 +
 
 +
</font></p>
 +
<iframe width="480px" height="380px" src="//www.youtube.com/embed/5ashyg6DfBw" style="padding:2% 0 0 10%;" frameborder="0" allowfullscreen></iframe>
 +
 
 +
<p class="text"  style="margin:3% 60px auto"><font face="Helvetica" size="3px"  color="#242424">If you want more detailed information, please click this link for user tutorial: <a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial" target=blank>https://2014.igem.org/Team:SJTU-Software/Project/Tutorial</a><br><br>
 +
 
 +
 
 +
</font></p>
 +
  </div>                        
 +
 +
</div>                         
 +
                      </div>
 +
</div>
 +
 
 +
 +
 
 +
     
 +
    </div>            
           </div>
           </div>
     </div>
     </div>
-
</div>    
+
</div>
 +
 
 +
   
      
      
<div align=center>
<div align=center>
-
     <div  class="container2" style="height:170px;width:71%;background-color: #272727;" >
+
     <div  class="container2" style="height:150px;width:71%;background-color: #272727;margin:0.5%;" >
-
<div align=left style="margin:-3px ">
+
          <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
 +
<div  style=" float:left;margin:3% auto auto 4%;">     
 +
<a href="http://www.sjtu.edu.cn"target="_blank">   
 +
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div>
 +
 
 +
 
 +
<div  style="float:left;margin:3% auto auto 4%;">   
 +
<a href="http://life.sjtu.edu.cn"target="_blank">       
 +
<img  style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/09/Sjtu_software_Life-logo.png"></img></a></div>
 +
 
 +
<div  style=" float:left;margin:3% auto auto 4%;">
 +
<a href="http://www.seiee.sjtu.edu.cn/"target="_blank">       
 +
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div>
 +
         
 +
 
 +
 
 +
<div  style="float:left;margin:3% auto auto 4%;">
 +
<a href="http://bme.sjtu.edu.cn/"target="_blank">
 +
<img  style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/3/31/Sjtu_software_sbe.jpg"></img></a></div>
 +
 
 +
<div  style=" float:left;margin:3% auto auto 4%;">
 +
<a href="http://skmml.sjtu.edu.cn/"target="_blank">         
 +
<img  style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div>
 +
 
 +
 
 +
 
 +
 
 +
            <div  class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" >
 +
<div align=center style="margin:-10px ">
                           <br>
                           <br>
                           <br>
                           <br>
-
  <p class="container2"  style="margin:0 60px auto"><font face="SimSun" size="4px"  color="#FFFFFF">SJTU-Software</font></p>
+
  <p class="container2"  style="margin:0% 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">iGemdry2014@163.com</font></p>
-
                           <p class="container2" style="margin:0 60px auto"><font face="SimSun" size="4px"  color="#FFFFFF">Shanghai Jiao Tong University</font></p>
+
                           <p class="container2" style="margin:0 5% auto"><font face="MoolBoran" size="5px"  color="#FFFFFF">SJTU-Software,Shanghai,China</font></p>
-
                          <p class="container2" style="margin:0 60px auto"> <font face="SimSun" size="4px"  color="#FFFFFF">800, Dongchuan Road</font></p>
+
                            
-
                           <p class="container2" style="margin:0 60px auto"> <font face="SimSun" size="4px"  color="#FFFFFF">200240 Shanghai, China</font></p>
+
                            
                            
                         </div>
                         </div>
-
</div>
+
          </div>
</div>
</div>
 +
</div>
 +
   
     <p id="back-to-top"><a href="#top"><span></span><img style="width:100%;height:100%" src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" />back to top</a></p>
     <p id="back-to-top"><a href="#top"><span></span><img style="width:100%;height:100%" src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" />back to top</a></p>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
Line 452: Line 589:
     });
     });
</script>
</script>
 +

Latest revision as of 20:06, 17 October 2014




EASY BBK's Demo:

This demo guides you to the function "search" and "compare":

This demo guides you to the function "present" and "upload":

If you want more detailed information, please click this link for user tutorial: https://2014.igem.org/Team:SJTU-Software/Project/Tutorial



iGemdry2014@163.com

SJTU-Software,Shanghai,China

back to top

Retrieved from "http://2014.igem.org/Team:SJTU-Software/Project/Demo"