Difference between revisions of "Team:Tongji-Software"

 
(143 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="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software//lib/T--Tongji-Software--sidebar.css&action=raw&ctype=text/css">
+
−
</head>
+
 
<style>
 
<style>
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 14: Line 11:
 
/* DEFAULT WIKI SETTINGS */
 
/* DEFAULT WIKI SETTINGS */
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
−
 
  
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
Line 21: Line 17:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#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';
 +
}
 +
#contact h3{
 +
font-family: 'Khmer MN';
 +
}
 +
@font-face {
 +
  font-family: 'Khmer MN';
 +
src: url('Khmer MN.eot');
 +
src: local('Khmer MN Regular'), 
 +
    local('Khmer MN'),     
 +
      url('Khmer MN.woff') format('woff'),     
 +
    url('Khmer MN.ttf') format('truetype'), 
 +
      url('Khmer MN.svg#Khmer MN') format('svg');
 +
}
 +
.background{
 +
position:fixed;
 +
top:-200px;
 +
z-index: -1;
 +
opacity: 0.8;
 +
}
  
−
/* 动画定义 */
+
.big hr{
−
@-webkit-keyframes move_right {
+
color:#826767;
−
    from {
+
width:60%;
−
        opacity: 0;
+
margin:10px auto;
−
    }
+
border: 0;
−
    to {
+
height: 0;
−
        opacity: 1;
+
border-top:1px solid  #826767;
−
        -webkit-transform: translateX(120px);
+
border-bottom: 0.5px solid #826767;
−
        transform: translateX(120px);
+
−
    }
+
 
}
 
}
−
@keyframes move_right {
+
#contact hr{
−
    from {
+
color:#826767;
−
        opacity: 0;
+
width:60%;
−
    }
+
margin:10px auto;
−
    to {
+
border: 0;
−
        opacity: 1;
+
height: 0;
−
        -webkit-transform: translateX(120px);
+
border-top:1px solid  #826767;
−
        transform: translateX(120px);
+
border-bottom: 0.5px solid #826767;
−
    }
+
 
}
 
}
−
@-webkit-keyframes move_left {
+
.big{
−
    from {
+
  position: absolute;
−
        opacity: 1;
+
  display: block;
−
    }
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
−
    to {
+
  transition:0.4s;
−
        opacity: 0;
+
−
        -webkit-transform: translateX(-120px);
+
−
        transform: translateX(-120px);
+
−
    }
+
 
}
 
}
−
@keyframes move_left {
+
.big :hover{
−
    from {
+
/*position: absolute;*/
−
        opacity: 1;
+
/* display: block;
−
    }
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);*/
−
    to {
+
  transition:0.4s;
−
        opacity: 0;
+
  transform:scale(1.2);  
−
        -webkit-transform: translateX(-120px);
+
−
        transform: translateX(-120px);
+
−
    }
+
 
}
 
}
−
@-webkit-keyframes move_up {
+
 
−
    from {
+
.big a{
−
        opacity: 0;
+
  position: relative;
−
    }
+
  display: block;
−
    to {
+
  text-align: center;
−
        opacity: 1;
+
  vertical-align: baseline;
−
        -webkit-transform: translateY(-250px);
+
  top: 50%;
−
        transform: translateY(-250px);
+
  cursor: pointer;
−
    }
+
  text-decoration: none;
 +
  color: #4c4040;
 +
  transition:0.4s;
 +
  margin-top:-10px;
 +
  font-size: 20px;
 +
}
 +
 
 +
.small{
 +
  position: absolute;
 +
  display: block;
 +
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 +
  height: 75px;
 +
  width: 75px;
 
}
 
}
−
@keyframes move_up {
+
.small span{
−
    from {
+
  position: relative;
−
        opacity: 0;
+
  display: block;
−
    }
+
  text-align: center;
−
    to {
+
  vertical-align: baseline;
−
        opacity: 1;
+
  top: 9px;
−
        -webkit-transform: translateY(-250px);
+
  font-size: 42px;
−
        transform: translateY(-250px);
+
−
    }
+
 
}
 
}
  
−
/* 动画绑定 */
+
#logo{
−
.move_right {
+
  background:#ffb6bc;
−
    -webkit-animation-name            : move_right;
+
  height: 180px;
−
    animation-name            : move_right;
+
  width: 180px;
−
    -webkit-animation-duration        : 1s;
+
  left: 0px;
−
    animation-duration        : 1s;
+
  top: 0px;
−
    -webkit-animation-iteration-count : 1;
+
  z-index: 99;
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
 
}
 
}
−
.move_left {
+
#logo a{
−
    -webkit-animation-name            : move_left;
+
  position: relative;
−
    animation-name            : move_left;
+
  top:30px;
−
    -webkit-animation-duration        : 1s;
+
left：0px;
−
    animation-duration        : 1s;
+
  padding-left: 15px;
−
    -webkit-animation-iteration-count : 1;
+
  padding-top: 0px;
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
 
}
 
}
−
.move_up {
+
 
−
    -webkit-animation-name            : move_up;
+
#logo a：hover{
−
    animation-name            : move_up;
+
  transform:scale(1.2);
−
    -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;
+
 
}
 
}
−
.fadeIn {
+
 
−
    -webkit-transform : translateX(120px);
+
 
−
    transform : translateX(120px);  
+
#igem{
−
    opacity: 1;
+
  background:#aadffa;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 180px;
 +
  top: 0px;
 +
  font-weight: bold;
 +
  z-index: 98;
 
}
 
}
−
.fadeInUp {
+
#igem a{
−
    -webkit-transform : translateY(-250px);
+
  letter-spacing: 3px;
−
    transform : translateY(-250px);
+
  font-size: 16px;
−
    opacity: 1;
+
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
+
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
 
}
 
}
−
.fadeOutLeft {
+
#tj{
−
    -webkit-transform : translateX(-120px);
+
  background:#ffe389;
−
    transform : translateX(-120px);  
+
  height:90px;
−
    opacity: 0.0;
+
  width: 360px;
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  
+
  left: 180px;
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
  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;
 
}
 
}
−
</style>
 
−
<body class="fullHeight">
 
−
    <div class='sidebar fullHeight'>sidebar</div>
 
−
    <div class="controller">
 
−
        <div>
 
−
            <button onclick="fadeIn()">淡进</button>
 
−
            <button onclick="fadeOut()">淡出</button>
 
−
        </div>
 
−
        <div>
 
−
            <button onclick="fadeInUp()">向上淡进</button>
 
−
            <button onclick="fadeOutLeft()">向左淡出</button>
 
−
        </div>
 
−
    </div>
 
−
    <script src="sidebarEffects.js"></script>
 
−
</body>
 
  
−
<script>
 
−
var sidebarEl = document.querySelector(".sidebar");
 
  
−
function fadeIn (e) {
+
#project{
−
    sidebarEl.className = 'sidebar fullHeight';
+
  background:#aadffa;
−
    sidebarEl.style.top = '0px';
+
  height: 90px;
−
    sidebarEl.style.left = '0px';
+
  width: 270px;
−
    sidebarEl.classList.add('move_right');
+
  left: 0px;
 +
  top: 180px;
 +
  font-weight: bold;
 +
  z-index: 94;
 
}
 
}
−
function fadeOut (e) {
+
#project a{
−
    sidebarEl.className = 'sidebar fullHeight';
+
  font-size: 23px;
−
    sidebarEl.style.left = '120px';
+
  margin-top: -14px;
−
    sidebarEl.classList.add('move_left');
+
  }
 +
#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;
 
}
 
}
−
function fadeInUp(e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.top = '250px';
 
−
    sidebarEl.style.left = '120px';
 
−
    sidebarEl.classList.add('move_up');
 
  
 +
#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;
 
}
 
}
−
function fadeOutLeft(e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.top = '0px';
 
−
    sidebarEl.style.left = '120px';
 
−
    sidebarEl.classList.add('move_left');
 
  
 +
 +
#notebook{
 +
  background:#ffe389;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 0px;
 +
  top: 270px;
 +
  font-weight:normal;
 +
  z-index: 92;
 
}
 
}
−
</script>
+
#aa{
−
</html>
+
  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>
 +
 
 +
 
 +
 
 +
<body>
 +
<div class="background">
 +
    <img src="https://static.igem.org/mediawiki/2018/5/57/T--Tongji-Software--background.png" width="100%" >
 +
</div>
 +
  <div id="logo" class="big">
 +
  <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 id="igem" class="big">
 +
<a href="">2018 iGEM</a>
 +
</div>
 +
<div id="tj" class="big">
 +
<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>

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