Difference between revisions of "Team:XJTU-China/Description"
| Line 1: | Line 1: | ||
{{XJTU-China/style}} | {{XJTU-China/style}} | ||
| − | |||
<html lang="en" dir="ltr"> | <html lang="en" dir="ltr"> | ||
<head> | <head> | ||
| − | <title> | + | <title>Team:XJTU-China</title> |
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | <meta name="keywords" content=" | + | <meta name="keywords" content="2021iGEM,Xi'an Jiaotong University,XJTU-China,XJTU,Tryptophan, |
Trp,Biosynthesis,E.coli"> | Trp,Biosynthesis,E.coli"> | ||
| − | <meta name="description" content="Welcome to 2021 XJTU-China"> | + | <meta name="description" |
| + | content="Welcome to 2021 XJTU-China! This page is the home page of 2021 XJTU-China's project. We are devoted to enhance the living quality of every insomnia sufferer by a simple gene circuit to overproduce a sleep-aid matter: tryptophan."> | ||
<meta name="viewport" | <meta name="viewport" | ||
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> | content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> | ||
| Line 19: | Line 19: | ||
<!-- <link rel="stylesheet" type="text/css" | <!-- <link rel="stylesheet" type="text/css" | ||
href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/style&action=raw&ctype=text/css" /> --> | href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/style&action=raw&ctype=text/css" /> --> | ||
| − | |||
| − | |||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
<!--banner--> | <!--banner--> | ||
| − | <div class="container row | + | <div class="container row"> |
| − | <div class=" | + | <main> |
| − | + | <!-- Initial markup --> | |
| + | <div class="segmenter" | ||
| + | style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg)"></div> | ||
| + | <h2 class="trigger-headline trigger-headline--hidden"> | ||
| + | <span class="bannerHeader">Hin./ious</span> | ||
| + | </h2> | ||
| + | </main> | ||
</div> | </div> | ||
<!--//banner--> | <!--//banner--> | ||
| − | |||
<!--about--> | <!--about--> | ||
| − | <section | + | <section> |
| − | <div class="container | + | <div class="container d-flex flex-column justify-content-center align-items-center"> |
| − | <div class="row | + | <div class="row"> |
| − | <div class=" | + | <div class="col-lg-2"></div> |
| − | + | <div class="xjtuText col-lg-8"> | |
| − | + | <hgroup> | |
| − | + | <h1>Brief Intro.</h1> | |
| − | < | + | <h2>a tryptophan producer</h2> |
| − | + | </hgroup> | |
| − | + | <p class="green"> | |
| − | + | Synthetic biology is a science discipline that differs a lot from the others. Usually, you | |
| − | + | would | |
| − | + | use | |
| − | + | the scientific method to obtain results in the majority of life sciences, centering your | |
| − | + | work on | |
| − | + | making observations and performing experiments. However, synthetic biology goes beyond that, | |
| − | + | it | |
| − | < | + | is |
| − | <p class=" | + | all about constructing something new from parts (biological parts if you may). That is why, |
| − | + | sometimes the engineering design process <b>fits</b> better with these projects, since a | |
| − | + | product | |
| − | + | has | |
| − | + | to be | |
| − | + | built, a machine that performs a task, where it is more important what it does rather than | |
| − | + | how, | |
| − | To close the menu, the menu icon needs to be clicked again. | + | yet |
| − | This menu is inspired by the left side menu found on YouTube. When clicking on the menu label | + | still has to be tested. Funnily enough, that's why iGEM stands for genetically engineered |
| + | machines. | ||
| + | </p> | ||
| + | <p class="brown">To close the menu, the menu icon needs to be clicked again. This menu is inspired | ||
| + | by the left | ||
| + | side | ||
| + | menu found on YouTube. When <b>clicking on the menu</b> label and icon, the main menu | ||
| + | appears | ||
| + | beneath and | ||
| + | the menu icon slides to the right side while the label slides up. To close the menu, the | ||
| + | menu | ||
| + | icon | ||
| + | needs to be clicked again. This menu is inspired by the left side menu found on YouTube. | ||
| + | When | ||
| + | clicking on the menu label and icon, the main menu appears beneath and the menu icon slides | ||
| + | to | ||
| + | the | ||
| + | right side while the label slides up. To close the menu, the menu icon needs to be clicked | ||
| + | again. | ||
| + | This menu is inspired by the left side menu found on YouTube. When clicking on the menu | ||
| + | label | ||
and | and | ||
| − | icon, | + | icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by |
| − | + | the | |
| − | + | left | |
| − | + | side menu found on YouTube. When clicking on the menu label and icon, | |
| + | </p> | ||
| + | <p class="green">the main menu appears beneath and the menu icon slides to the right side while the | ||
label | label | ||
| − | + | slides | |
| − | + | up.o | |
| − | + | be clicked again. This menu is inspired by the left side menu found on YouTube. When | |
| − | up. | + | clicking on |
| − | + | the | |
| − | + | menu label and icon, the main menu appears beneath and the menu icon slides to the right | |
| − | + | side | |
| − | + | while | |
| − | + | the label slides up. To close the menu, the menu icon needs to be clicked again. This menu | |
| − | + | is | |
| − | + | inspired by the left side menu found on YouTube. When clicking on the menu label and icon, | |
| − | + | the | |
| − | + | main | |
| − | + | menu appears beneath and the menu icon slides to the right side while the label slides up. | |
| − | + | To | |
| − | + | close | |
| − | + | the menu, the menu icon needs to be clicked again. This menu is inspired by the left side | |
| − | + | menu | |
| − | + | found | |
| − | + | on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the | |
| − | + | menu | |
| − | + | icon slides to the right side while the label slides up. the main menu appears beneath and | |
| − | + | the | |
| − | + | menu | |
| − | + | icon slides to the right side while the label slides up. To close the menu, the menu icon | |
| − | + | needs | |
| − | + | to | |
| − | + | be clicked again. This menu is inspired by the left side menu found on YouTube. When | |
| − | + | clicking on | |
| − | + | the | |
| − | + | menu label and icon, the main menu appears beneath and the menu icon slides to the right | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | To | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | the | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
side | side | ||
| − | menu found on YouTube. When clicking on the menu label and | + | while |
| − | + | the label slides up.ide menu found on YouTube. When clicking on the menu label and icon, To | |
| − | the main menu appears beneath and the menu icon slides to the right side while the label slides | + | close |
| − | + | the menu, the menu icon needs to be clicked again. This menu is inspired by the left side | |
| − | + | menu | |
| + | found | ||
| + | on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the | ||
| + | menu | ||
| + | icon slides to the right side while the label slides up.</p> | ||
| + | </div> | ||
| + | <div class="col-lg-2"></div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="linkBox col-lg-3 col-md-6 col-sm-12"> | ||
| + | <div class="linkBox-items"> | ||
| + | <span class="fa fa-flask" aria-hidden="true"></span> | ||
| + | <h4 class="shadow-lg"> Wetlab</h4> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="linkBox col-lg-3 col-md-6 col-sm-12"> | ||
| + | <div class="linkBox-items"> | ||
| + | <span class="fa fa-area-chart" aria-hidden="true"></span> | ||
| + | <h4> Modelling</h4> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="linkBox col-lg-3 col-md-6 col-sm-12"> | ||
| + | <div class="linkBox-items"> | ||
| + | <span class="fa fa-globe" aria-hidden="true"></span> | ||
| + | <h4> Human Practices</h4> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="linkBox col-lg-3 col-md-6 col-sm-12"> | ||
| + | <div class="linkBox-items"> | ||
| + | <span class="fa fa-user" aria-hidden="true"></span> | ||
| + | <h4> Team</h4> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 204: | Line 163: | ||
</section> | </section> | ||
<!--//about--> | <!--//about--> | ||
| − | + | <!--highlights--> | |
| + | <section class="align-padding-50-80"> | ||
| + | <div class="xjtuText text-center"> | ||
| + | <h1>highlights | ||
| + | </h1> | ||
| + | <h2>A lot of wonderful works<h2> | ||
| + | </div> | ||
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="grid"> | ||
| + | <figure class="effect-zoe"> | ||
| + | <img src="https://static.igem.org/mediawiki/2021/b/b9/T--XJTU-China--25.jpg" alt="img25" /> | ||
| + | <figcaption> | ||
| + | <div class="container d-flex align-items-center"> | ||
| + | <h2 class="mr-auto"><span>XJTU</span>-China</h2> | ||
| + | <span class="lottieBtn viewBtn"></span> | ||
| + | <span class="lottieBtn hitLikeBtn"></span> | ||
| + | </div> | ||
| + | <p class="description">Perhaps you have no idea who is Hincious. | ||
| + | </p> | ||
| + | </figcaption> | ||
| + | </figure> | ||
| + | <figure class="effect-zoe"> | ||
| + | <img src="https://static.igem.org/mediawiki/2021/a/a1/T--XJTU-China--26.jpg" alt="img26" /> | ||
| + | <figcaption> | ||
| + | <div class="container d-flex align-items-center"> | ||
| + | <h2 class="mr-auto"><span>XJTU</span>-China</h2> | ||
| + | <span class="lottieBtn viewBtn"></span> | ||
| + | <span class="lottieBtn hitLikeBtn"></span> | ||
| + | </div> | ||
| + | <p class="description">Perhaps you have no idea who is Hincious. | ||
| + | </p> | ||
| + | </figcaption> | ||
| + | </figure> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| + | <!--//highlights--> | ||
<!--JS--> | <!--JS--> | ||
<script type="text/javascript" | <script type="text/javascript" | ||
src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/jquery&action=raw&ctype=text/javascript"></script> | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/jquery&action=raw&ctype=text/javascript"></script> | ||
| + | <script type="text/javascript" | ||
| + | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/lottie&action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript" | <script type="text/javascript" | ||
src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrapJS&action=raw&ctype=text/javascript"></script> | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrapJS&action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript" | <script type="text/javascript" | ||
| − | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/ | + | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_anime&action=raw&ctype=text/javascript"></script> |
| − | < | + | <script type="text/javascript" |
| − | + | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_imgloaded&action=raw&ctype=text/javascript"></script> | |
| + | <script type="text/javascript" | ||
| + | src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_main&action=raw&ctype=text/javascript"></script> | ||
<!--Temporary script--> | <!--Temporary script--> | ||
| − | <!-- | + | <!--viewBtn--> |
<script> | <script> | ||
| − | + | var viewBtn = $('.viewBtn'); | |
| − | + | var n = viewBtn.length; | |
| − | + | var animData = new Array(n); | |
| − | + | var animation = new Array(n); | |
| − | + | for (i = 0; i < n; i++) { | |
| − | + | animData[i] = { | |
| − | + | container: viewBtn[i], // the dom element that will contain the animation | |
| − | } | + | renderer: 'svg', |
| + | loop: true, | ||
| + | autoplay: true, | ||
| + | path: 'https://static.igem.org/mediawiki/2021/1/14/T--XJTU-China--viewBtn.txt' // the path to the animation json | ||
| + | } | ||
| + | animation[i] = lottie.loadAnimation(animData[i]); | ||
| + | animation[i].setSpeed(1.2); | ||
| + | } | ||
</script> | </script> | ||
| − | <!-- | + | <!--hitLikeBtn&toggle--> |
<script> | <script> | ||
| − | $( | + | var hitLikeBtn = $('.hitLikeBtn'); |
| − | + | var n = hitLikeBtn.length; | |
| − | + | var animData = new Array(n); | |
| − | + | var animation = new Array(n); | |
| − | + | for (i = 0; i < n; i++) { | |
| − | + | animData[i] = { | |
| − | + | container: hitLikeBtn[i], // the dom element that will contain the animation | |
| − | + | renderer: 'svg', | |
| − | + | loop: false, | |
| − | + | autoplay: false, | |
| − | + | path: 'https://static.igem.org/mediawiki/2021/a/a9/T--XJTU-China--hitLikeBtn.txt' // the path to the animation json | |
| − | + | } | |
| − | + | animation[i] = lottie.loadAnimation(animData[i]); | |
| − | + | } | |
| − | + | hitLikeBtn.click(function () { | |
| − | + | var index = hitLikeBtn.index(this); | |
| − | + | var flag = this.classList.toggle('isLike'); | |
| − | + | if (flag) { | |
| − | + | animation[index].playSegments([0, 19], true); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | var | + | |
| − | var | + | |
| − | + | ||
| − | + | ||
| − | if ( | + | |
| − | + | ||
} | } | ||
else { | else { | ||
| − | + | animation[index].goToAndStop(0, true); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | }) | + | } |
| + | ) | ||
</script> | </script> | ||
| − | + | <!--segmentEffectOfBanner--> | |
| − | <!-- | + | <script> |
| − | + | (function () { | |
| − | + | var headline = document.querySelector('.trigger-headline'), | |
| − | + | trigger = document.querySelector('.btn--trigger'), | |
| − | + | face = document.querySelector('.segmenter'), | |
| − | + | segmenter = new Segmenter(face, { | |
| − | + | pieces: 8, | |
| − | + | positions: [{ | |
| − | + | top: 0, | |
| − | + | left: 0, | |
| − | + | width: 100, | |
| − | + | height: 100 | |
| − | + | }, { | |
| − | + | top: 0, | |
| − | + | left: 0, | |
| − | + | width: 100, | |
| − | + | height: 100 | |
| − | + | }, { | |
| − | + | top: 0, | |
| − | + | left: 0, | |
| − | + | width: 100, | |
| − | + | height: 100 | |
| − | + | }, { | |
| − | + | top: 0, | |
| − | + | left: 0, | |
| + | width: 100, | ||
| + | height: 100 | ||
| + | }, { | ||
| + | top: 0, | ||
| + | left: 0, | ||
| + | width: 100, | ||
| + | height: 100 | ||
| + | }, { | ||
| + | top: 0, | ||
| + | left: 0, | ||
| + | width: 100, | ||
| + | height: 100 | ||
| + | }, { | ||
| + | top: 0, | ||
| + | left: 0, | ||
| + | width: 100, | ||
| + | height: 100 | ||
| + | }, { | ||
| + | top: 0, | ||
| + | left: 0, | ||
| + | width: 100, | ||
| + | height: 100 | ||
| + | }], | ||
| + | shadows: false, | ||
| + | parallax: true, | ||
| + | parallaxMovement: { | ||
| + | min: 10, | ||
| + | max: 20 | ||
| + | }, | ||
| + | animation: { | ||
| + | duration: 2500, | ||
| + | easing: 'easeOutExpo', | ||
| + | delay: 0, | ||
| + | opacity: .1, | ||
| + | translateZ: { | ||
| + | min: 5, | ||
| + | max: 25 | ||
| + | } | ||
| + | }, | ||
| + | onReady: function () { | ||
| + | segmenter.animate(); | ||
| + | headline.classList.remove('trigger-headline--hidden'); | ||
| + | } | ||
| + | }); | ||
| + | })(); | ||
| + | </script> | ||
| + | <!--Hin./ious--> | ||
| + | <script> | ||
| + | window.onload = function () { | ||
| + | // 获取div节点的dom对象 | ||
| + | var divNode = document.querySelector('.bannerHeader'); | ||
| + | // 需要写入页面的字符串，这里的字符内容就是待会要写入网页的内容 | ||
| + | var codingStr = "Hin./ious"; | ||
| + | // 字符串索引 | ||
| + | var j = 0; | ||
| + | // 创建循环定时器，通过循环定时器每200毫米执行里面的回调函数 | ||
| + | var coding = setInterval(function () { | ||
| + | // slice()方法是截取字符串指定位置的方法 | ||
| + | // 第一个参数是起始位置的索引，第二个参数是结束位置的索引（不包含结束位置） | ||
| + | // 最后返回的就是截取的字串 | ||
| + | // 最后是模拟光标的效果 | ||
| + | divNode.innerHTML = codingStr.slice(0, j) + '_'; | ||
| + | j++; | ||
| + | // 如果索引大于了字符串的长度，把最后的光标删除并清除计时器 | ||
| + | if (j > codingStr.length) { | ||
| + | divNode.innerHTML = codingStr.slice(0, j); | ||
| + | clearInterval(coding); | ||
} | } | ||
| − | + | }, 200) | |
| − | }) | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | </script> | |
| − | </script | + | |
| − | + | ||
</body> | </body> | ||
Revision as of 04:38, 9 July 2021
Brief Intro.
a tryptophan producer
Synthetic biology is a science discipline that differs a lot from the others. Usually, you would use the scientific method to obtain results in the majority of life sciences, centering your work on making observations and performing experiments. However, synthetic biology goes beyond that, it is all about constructing something new from parts (biological parts if you may). That is why, sometimes the engineering design process fits better with these projects, since a product has to be built, a machine that performs a task, where it is more important what it does rather than how, yet still has to be tested. Funnily enough, that's why iGEM stands for genetically engineered machines.
To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,
the main menu appears beneath and the menu icon slides to the right side while the label slides up.o be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.ide menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.
Wetlab
Modelling
Human Practices
Team
highlights
A lot of wonderful works
XJTU-China
Perhaps you have no idea who is Hincious.
XJTU-China
Perhaps you have no idea who is Hincious.