Difference between revisions of "Team:Tongji-Software"

 
(152 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<!doctype html>
+
<html>
−
<html lang="en" class="fullHeight">
+
</script>
−
<head>
+
 
−
    <meta charset="UTF-8">
+
−
    <title>demo</title>
+
−
    <link rel="stylesheet" type="text/css" href="sidebar.css">
+
−
</head>
+
  
 
<style>
 
<style>
−
/* 动画定义 */
+
/**************************************************************************************************************************************************************************************************/
−
@-webkit-keyframes move_right {
+
 
−
    from {
+
 
−
        opacity: 0;
+
 
−
    }
+
/**************************************************************************************************************************************************************************************************/
−
    to {
+
/* DEFAULT WIKI SETTINGS */
−
        opacity: 1;
+
/**************************************************************************************************************************************************************************************************/
−
        -webkit-transform: translateX(120px);
+
 
−
        transform: translateX(120px);
+
#home_logo, #sideMenu { display:none; }
−
    }
+
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 +
 
 +
body{
 +
  margin: 0;
 +
  background-color:#fff8e9;
 +
  color : #826767;
 +
  font-family: 'Khmer MN';
 
}
 
}
−
@keyframes move_right {
+
#contact h3{
−
    from {
+
font-family: 'Khmer MN';  
−
        opacity: 0;
+
−
    }
+
−
    to {
+
−
        opacity: 1;
+
−
        -webkit-transform: translateX(120px);
+
−
        transform: translateX(120px);
+
−
    }
+
 
}
 
}
−
@-webkit-keyframes move_left {
+
@font-face {  
−
    from {
+
  font-family: 'Khmer MN';  
−
        opacity: 1;
+
src: url('Khmer MN.eot');  
−
    }
+
src: local('Khmer MN Regular'), 
−
    to {
+
    local('Khmer MN'),     
−
        opacity: 0;
+
      url('Khmer MN.woff') format('woff'),     
−
        -webkit-transform: translateX(-120px);
+
    url('Khmer MN.ttf') format('truetype'), 
−
        transform: translateX(-120px);
+
      url('Khmer MN.svg#Khmer MN') format('svg');
−
    }
+
 
}
 
}
−
@keyframes move_left {
+
.background{
−
    from {
+
position:fixed;
−
        opacity: 1;
+
top:-200px;
−
    }
+
z-index: -1;
−
    to {
+
opacity: 0.8;
−
        opacity: 0;
+
−
        -webkit-transform: translateX(-120px);
+
−
        transform: translateX(-120px);
+
−
    }
+
 
}
 
}
−
@-webkit-keyframes move_up {
+
 
−
    from {
+
.big hr{
−
        opacity: 0;
+
color:#826767;
−
    }
+
width:60%;
−
    to {
+
margin:10px auto;
−
        opacity: 1;
+
border: 0;
−
        -webkit-transform: translateY(-250px);
+
height: 0;
−
        transform: translateY(-250px);
+
border-top:1px solid  #826767;
−
    }
+
border-bottom: 0.5px solid #826767;
 
}
 
}
−
@keyframes move_up {
+
#contact hr{
−
    from {
+
color:#826767;
−
        opacity: 0;
+
width:60%;
−
    }
+
margin:10px auto;
−
    to {
+
border: 0;
−
        opacity: 1;
+
height: 0;
−
        -webkit-transform: translateY(-250px);
+
border-top:1px solid  #826767;
−
        transform: translateY(-250px);
+
border-bottom: 0.5px solid #826767;
−
    }
+
 
}
 
}
−
/* 动画绑定 */
+
.big{
−
.move_right {
+
  position: absolute;
−
    -webkit-animation-name            : move_right;
+
  display: block;
−
    animation-name            : move_right;
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
−
    -webkit-animation-duration        : 1s;
+
  transition:0.4s;
−
    animation-duration        : 1s;
+
−
    -webkit-animation-iteration-count : 1;
+
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
 
}
 
}
−
.move_left {
+
.big :hover{
−
    -webkit-animation-name            : move_left;
+
/*position: absolute;*/
−
    animation-name            : move_left;
+
/* display: block;
−
    -webkit-animation-duration        : 1s;
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);*/
−
    animation-duration        : 1s;
+
  transition:0.4s;
−
    -webkit-animation-iteration-count : 1;
+
  transform:scale(1.2);  
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
 
}
 
}
−
.move_up {
+
 
−
    -webkit-animation-name            : move_up;
+
.big a{
−
    animation-name            : move_up;
+
  position: relative;
−
    -webkit-animation-duration        : 1s;
+
  display: block;
−
    animation-duration        : 1s;
+
  text-align: center;
−
    -webkit-animation-iteration-count : 1;
+
  vertical-align: baseline;
−
    animation-iteration-count : 1;
+
  top: 50%;
−
    -webkit-animation-fill-mode : forwards;
+
  cursor: pointer;
−
    animation-fill-mode : forwards;
+
  text-decoration: none;
 +
  color: #4c4040;
 +
  transition:0.4s;
 +
  margin-top:-10px;
 +
  font-size: 20px;
 
}
 
}
−
.fadeIn {
+
 
−
    -webkit-transform : translateX(120px);
+
.small{
−
    transform : translateX(120px);  
+
  position: absolute;
−
    opacity: 1;
+
  display: block;
 +
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 +
  height: 75px;
 +
  width: 75px;
 
}
 
}
−
.fadeInUp {
+
.small span{
−
    -webkit-transform : translateY(-250px);
+
  position: relative;
−
    transform : translateY(-250px);
+
  display: block;
−
    opacity: 1;
+
  text-align: center;
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  
+
  vertical-align: baseline;
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
  top: 9px;
 +
  font-size: 42px;
 
}
 
}
−
.fadeOutLeft {
+
 
−
    -webkit-transform : translateX(-120px);
+
#logo{
−
    transform : translateX(-120px);  
+
  background:#ffb6bc;
−
    opacity: 0.0;
+
  height: 180px;
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  
+
  width: 180px;
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
  left: 0px;
 +
  top: 0px;
 +
  z-index: 99;
 +
}
 +
#logo a{
 +
  position: relative;
 +
  top:30px;
 +
left：0px;
 +
  padding-left: 15px;
 +
  padding-top: 0px;
 
}
 
}
 +
 +
#logo a：hover{
 +
  transform:scale(1.2);
 +
  transition:0.4s;
 +
}
 +
 +
 +
#igem{
 +
  background:#aadffa;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 180px;
 +
  top: 0px;
 +
  font-weight: bold;
 +
  z-index: 98;
 +
}
 +
#igem a{
 +
  letter-spacing: 3px;
 +
  font-size: 16px;
 +
}
 +
#tj{
 +
  background:#ffe389;
 +
  height:90px;
 +
  width: 360px;
 +
  left: 180px;
 +
  top: 90px;
 +
  font-weight: bold;
 +
  z-index: 97;
 +
}
 +
#tj a{
 +
  margin-top: -15px;
 +
  font-size: 24px;
 +
  font-weight:bold;
 +
  letter-spacing: 2px;
 +
}
 +
#a{
 +
  background:#ffe389;
 +
  left: 375px;
 +
  top: 0px;
 +
  font-weight: bold;
 +
  z-index:96;
 +
  color: #f4c84d;
 +
}
 +
#l{
 +
  background:#aadffa;
 +
  left: 375px;
 +
  top: 75px;
 +
  font-weight: bold;
 +
  z-index:95;
 +
  color: #7cc9e8;
 +
}
 +
 +
 +
#project{
 +
  background:#aadffa;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 0px;
 +
  top: 180px;
 +
  font-weight: bold;
 +
  z-index: 94;
 +
}
 +
#project a{
 +
  font-size: 23px;
 +
  margin-top: -14px;
 +
  }
 +
#p{
 +
  background:#ffb6bc;
 +
  left: 150px;
 +
  top: 150px;
 +
  font-weight: bold;
 +
  z-index:93;
 +
  color: #f4929e;
 +
}
 +
#h{
 +
  background:#aadffa;
 +
  left: 150px;
 +
  top: 225px;
 +
  font-weight: bold;
 +
  z-index:92;
 +
  color: #7cc9e8;
 +
}
 +
 +
#medal{
 +
  background:#ffb6bc;
 +
  height: 180px;
 +
  width: 225px;
 +
  left: 270px;
 +
  top: 180px;
 +
  font-weight: bold;
 +
  z-index: 91;
 +
}
 +
#medal a{
 +
  font-size: 20px;
 +
  margin-top: -60px;
 +
  margin-bottom: 110px;
 +
}
 +
 +
 +
#notebook{
 +
  background:#ffe389;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 0px;
 +
  top: 270px;
 +
  font-weight:normal;
 +
  z-index: 92;
 +
}
 +
#aa{
 +
  background:#ffb6bc;
 +
  left: 225px;
 +
  top: 300px;
 +
  font-weight: bold;
 +
  z-index:89;
 +
  color: #f4929e;
 +
}
 +
 +
#human{
 +
  background:#aadffa;
 +
  height: 90px;
 +
  width: 315px;
 +
  left: 0px;
 +
  top: 360px;
 +
  font-weight: bold;
 +
  z-index: 88;
 +
}
 +
#collaborations{
 +
  background:#ffe389;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 315px;
 +
  top: 360px;
 +
  /*font-weight: bold;*/
 +
  z-index: 87;
 +
}
 +
#aaa{
 +
  background:#ffb6bc;
 +
  left: 450px;
 +
  top: 375px;
 +
  font-weight: bold;
 +
  z-index:86;
 +
  color: #f4929e;
 +
}
 +
 +
#modeling{
 +
  background:#ffb6bc;
 +
  height: 180px;
 +
  width: 405px;
 +
  left: 0px;
 +
  top: 450px;
 +
/*  font-weight: bold;*/
 +
  z-index: 85;
 +
}
 +
#modeling a{
 +
  font-size: 23px;
 +
  letter-spacing: 2px;
 +
  margin-top: -65px;
 +
  margin-bottom: 110px;
 +
}
 +
#n{
 +
  background:#ffe389;
 +
  left: 375px;
 +
  top: 450px;
 +
  font-weight: bold;
 +
  z-index:84;
 +
  color: #f4c84d;
 +
}
 +
#t{
 +
  background:#ffb6bc;
 +
  left: 375px;
 +
  top: 525px;
 +
  font-weight: bold;
 +
  z-index:83;
 +
  color: #f4929e;
 +
}
 +
 +
.bottom{
 +
  position: absolute;
 +
  display: block;
 +
  top: 500px;
 +
  width: 790px;
 +
  left:550px;
 +
  font-size: 19px;
 +
  font-weight: bold;
 +
}
 +
.bottom span{
 +
line-height:29px;
 +
color : #5b3d3d;
 +
word-spacing: 2px;
 +
}
 +
 +
.bottom a{
 +
font-size:32px;
 +
color:#e5838f;
 +
}
 +
 +
#contact{
 +
  position: absolute;
 +
  top:660px;
 +
  left:60px;
 +
  border-radius: 15px;
 +
  width: 90%;
 +
  height:auto;
 +
  background:rgba(255,255,255,0.4);
 +
/* border: 2.5px solid rgba(0,0,0,0.7);*/
 +
  z-index: 5;
 +
  text-align: center;
 +
  display: block;
 +
  margin-bottom: 100px;
 +
}
 +
 +
#contact h3{
 +
  font-size: 22px;
 +
  margin-top:35px;
 +
  margin-bottom:10px;
 +
  color : #5b3d3d;
 +
}
 +
 +
#contact span{
 +
  margin-top: 15px;
 +
  font-size: 19px;
 +
  color : #826767;
 +
}
 +
 +
#contact img{
 +
  margin-top: 10px;
 +
  transition: all 0.4s;
 +
  margin-bottom: 30px;
 +
}
 +
 +
#contact img:hover{
 +
  transform: scale(1.15);
 +
  transition: all 0.4s;
 +
}
 +
 +
.ant {
 +
  position: absolute;
 +
  top:620px;
 +
  left:990px;
 +
  z-index: 9;
 +
  transform: rotate(-90deg);
 +
}
 +
.video{
 +
  position: absolute;
 +
  left:0px;
 +
  top:0px;
 +
}
 +
  
 
</style>
 
</style>
  
  
−
<body class="fullHeight">
+
 
−
    <div class='sidebar fullHeight'>sidebar</div>
+
<body>
−
    <div class="controller">
+
<div class="background">
−
        <div>
+
    <img src="https://static.igem.org/mediawiki/2018/5/57/T--Tongji-Software--background.png" width="100%" >
−
            <button onclick="fadeIn()">淡进</button>
+
</div>
−
            <button onclick="fadeOut()">淡出</button>
+
  <div id="logo" class="big">  
−
        </div>
+
  <a href="http://118.31.56.237:8099/Alpha%20ant/"><img src="https://static.igem.org/mediawiki/2018/9/9d/T--Tongji-Software--logo4.png" width="80%"></a>
−
        <div>
+
</div>
−
            <button onclick="fadeInUp()">向上淡进</button>
+
<div id="igem" class="big">
−
            <button onclick="fadeOutLeft()">向左淡出</button>
+
<a href="">2018 iGEM</a>
−
         </div>
+
</div>
−
    </div>
+
<div id="tj" class="big">
−
    <script src="sidebarEffects.js"></script>
+
<a href="">Tongji-Software</a>
 +
</div>
 +
<div id="project" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Project"><b>PROJECT</b></a>
 +
</div>
 +
<div id="medal" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Model">MODEL</a>
 +
<hr/>
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Team">TEAM</a>
 +
</div>
 +
<div id="human" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Human_Practices">HUMAN PRACTICES</a>
 +
</div>
 +
<div id="collaborations" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Collaborations">COLLABORATIONS</a>
 +
</div>
 +
<div id="notebook" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Requirements">REQUIRMENTS</a>
 +
</div>
 +
 
 +
<div id="modeling" class="big">
 +
         <a href="https://2018.igem.org/Team:Tongji-Software/Medal">MEDAL</a>
 +
        <hr/>
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Attributions">ATTRIBUTIONS</a>
 +
</div>
 +
 
 +
 
 +
<div class="video">
 +
<video  muted  src="https://static.igem.org/mediawiki/2018/archive/a/ad/20181016164940%21T--Tongji-Software--background-video2.mp4" type="video/mp4"width="100%" height="auto" autoplay="autoplay"  loop="loop">
 +
</video>
 +
</div>
 +
<div class="bottom">
 +
<span><font style="font-size:37px">Alpha ant</font> is a computational tool for <b>pathway design</b> and <b>reconstruction</b>. With full consideration of metabolic burden and some useful functions, we provide an efficient and powerful pathway design guide.</br><a href="http://118.31.56.237:8099/Alpha%20ant/">Click HERE to use!</a></span>
 +
</div>
 +
<div id="contact">
 +
<h3>CONTACT</h3>
 +
<span>annecao@tongji.edu.cn</span><hr/>
 +
<h3>ADDRESS</h3>
 +
<span>1239# Siping Road</br>Tongji University,Shanghai China</span><hr/>
 +
<h3>GET IN TOUCH</h3>
 +
<a href="https://www.facebook.com/tongjiIGEMer/?ref=bookmarks"><img src="https://static.igem.org/mediawiki/2018/8/8c/T--Tongji-Software--facebook.png" width="5%"></a>
 +
</div>
 +
<img class="ant" src="https://static.igem.org/mediawiki/2018/d/de/T--Tongji-Software--ant2.png" width="8%">
 +
 
 
</body>
 
</body>
−
</html>
 

Latest revision as of 02:56, 18 October 2018

Alpha ant is a computational tool for pathway design and reconstruction. With full consideration of metabolic burden and some useful functions, we provide an efficient and powerful pathway design guide.
Click HERE to use!

CONTACT

annecao@tongji.edu.cn

ADDRESS

1239# Siping Road
Tongji University,Shanghai China

GET IN TOUCH