|
|
| (15 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{:Team:Jilin_China/CSS}}
| |
| − | {{:Team:Jilin_China/Navbar}}
| |
| − | {{:Team:Jilin_China/Js}}
| |
| − | {{:Team:Jilin_China/Home_CSS}}
| |
| − | {{:Team:Jilin_China/Footer_CSS}}
| |
| − | <html>
| |
| − | <style>
| |
| | | | |
| − |
| |
| − | </style>
| |
| − | </html>
| |
| − |
| |
| − | <html>
| |
| − | <div class="s1" style="display:none;height:99999%;"></div>
| |
| − | <section class="ss1 home_banner">
| |
| − | <div class="banner_logo"></div>
| |
| − | <h1>The Collection of<br>Synthetic RNA-based Thermosensors<br>with Different Sensing Temperatures</h1>
| |
| − | </section>
| |
| − | <section class="ss2 home_design">
| |
| − | <div class="bacteria">
| |
| − |
| |
| − | <div class="stem-loop hot-induced">
| |
| − |
| |
| − | <input id="checked_1" type="checkbox" class="switch" />
| |
| − |
| |
| − | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599.75 278.7">
| |
| − | <defs>
| |
| − | <style>
| |
| − | .hot-induced .a, .b, .c, .f {
| |
| − | fill: none;
| |
| − | stroke-width: 11px;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .a {
| |
| − | stroke: #036;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .a,.hot-induced .b,.hot-induced .c,.hot-induced .f,.hot-induced .g {
| |
| − | stroke-linecap: round;
| |
| − | stroke-linejoin: round;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .b {
| |
| − | stroke: #060;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .c {
| |
| − | stroke: #600;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .d,.hot-induced .e,.hot-induced .h{
| |
| − | font-size: 17px;
| |
| − | font-family: Quicksand-Medium, Quicksand;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .d {
| |
| − | fill: #006837;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .e {
| |
| − | fill: #900;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .f {
| |
| − | stroke: #000;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .h {
| |
| − | fill: #930;
| |
| − | }
| |
| − |
| |
| − | .hot-induced .g {
| |
| − | fill: #fff794;
| |
| − | stroke: #fbb03b;
| |
| − | stroke-width: 7px;
| |
| − | }
| |
| − | .hot-induced .hydrogen-bond{
| |
| − | opacity:1;
| |
| − | transition: all 0.3s linear 1s;
| |
| − | }
| |
| − | .hot-induced #ribosome{
| |
| − | transform: translateY(-60px);
| |
| − | opacity:0;
| |
| − | transition: all 1s ease-out 0s;
| |
| − | }
| |
| − | .hot-induced #ribosome_text{
| |
| − | opacity:0;
| |
| − | transition: all 0.3s linear 0s;
| |
| − | }
| |
| − | .hot-induced #text{
| |
| − | transform: translateY(0px);
| |
| − | transition: all 1s ease-out;
| |
| − | }
| |
| − | .hot-induced #loop{
| |
| − | transform: translateY(0px);
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-induced #left,#right{
| |
| − | stroke-dasharray:130,500;
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-induced #left{
| |
| − | stroke-dashoffset:0;
| |
| − | stroke:red;
| |
| − | }
| |
| − | .hot-induced #right{
| |
| − | stroke-dashoffset:-277;
| |
| − | stroke:green;
| |
| − | }
| |
| − | .hot-induced #left_s,#right_s{
| |
| − | stroke-dasharray:60,500;
| |
| − | color:black;
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-induced #left_s{
| |
| − | stroke-dashoffset:-130;
| |
| − | }
| |
| − | .hot-induced #right_s{
| |
| − | stroke-dashoffset:-217;
| |
| − | }
| |
| − |
| |
| − | .svg_checked_hi .hydrogen-bond{
| |
| − | opacity:0;
| |
| − | transition: all 0.3s linear 0s;
| |
| − | }
| |
| − | .svg_checked_hi #ribosome{
| |
| − | transform: translateY(0px);
| |
| − | opacity:1;
| |
| − | transition: all 0.5s ease-out 2s;
| |
| − | }
| |
| − | .svg_checked_hi #ribosome_text{
| |
| − | opacity:1;
| |
| − | transition: all 0.5s ease-out 2s;
| |
| − | }
| |
| − | .svg_checked_hi #text{
| |
| − | transform: translateY(-60px);
| |
| − | }
| |
| − | .svg_checked_hi #loop{
| |
| − | transform: translateY(130px);
| |
| − | }
| |
| − | .svg_checked_hi #left{
| |
| − | stroke-dashoffset:-135;
| |
| − | }
| |
| − | .svg_checked_hi #right{
| |
| − | stroke-dashoffset:-142;
| |
| − | }
| |
| − | .svg_checked_hi #left_s,#right_s{
| |
| − | stroke-dasharray:60,500;
| |
| − | }
| |
| − | .svg_checked_hi #left_s{
| |
| − | stroke-dashoffset:-265;
| |
| − | }
| |
| − | .svg_checked_hi #right_s{
| |
| − | stroke-dashoffset:-82;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </defs>
| |
| − | <g>
| |
| − | <g class="hydrogen-bond">
| |
| − | <line class="a" x1="284.86" y1="144.21" x2="320.72" y2="144.21"/>
| |
| − | <line class="b" x1="284.86" y1="125.32" x2="320.72" y2="125.32"/>
| |
| − | <line class="c" x1="284.86" y1="163.09" x2="320.72" y2="163.09"/>
| |
| − | <line class="a" x1="284.86" y1="181.98" x2="320.72" y2="181.98"/>
| |
| − | <line class="b" x1="284.86" y1="200.87" x2="320.72" y2="200.87"/>
| |
| − | <line class="c" x1="284.86" y1="219.75" x2="320.72" y2="219.75"/>
| |
| − | </g>
| |
| − | <g id="text">
| |
| − | <text class="d" transform="translate(349.01 185.45)">SD Sequence</text>
| |
| − | <text class="e" transform="translate(123.8 185.45)">anti-SD Sequence</text>
| |
| − |
| |
| − | </g>
| |
| − |
| |
| − | <text id="ribosome_text" class="h" transform="translate(378.48 185.45)">Ribosome</text>
| |
| − |
| |
| − | <path id="loop" class="f" d="M327,101.42c0-21.25,19.2-20.39,19.2-52.51,0-24-16.62-43.41-43.42-43.41s-43.41,19.44-43.41,43.41c0,28.79,19.19,29.92,19.19,52.51"/>
| |
| − |
| |
| − | <g>
| |
| − | <path id="right_s" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
| |
| − | <path id="left_s" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
| |
| − | </g>
| |
| − | <g>
| |
| − | <path id="right" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
| |
| − | <path id="left" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
| |
| − | </g>
| |
| − |
| |
| − | <g id="ribosome">
| |
| − | <ellipse class="g" cx="417.04" cy="225.7" rx="35.56" ry="22.5"/>
| |
| − | <ellipse class="g" cx="417.04" cy="261.7" rx="23.44" ry="13.5"/>
| |
| − | </g>
| |
| − | </g>
| |
| − | </svg>
| |
| − | <p>Hot-induced 5'UTR</p>
| |
| − | </div>
| |
| − | <script type="text/javascript">
| |
| − | $("#checked_1").click(function(){
| |
| − | if($(this).is(':checked')){
| |
| − | $(".hot-induced").addClass("svg_checked_hi");
| |
| − | }else{
| |
| − | $(".hot-induced").removeClass("svg_checked_hi");
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | <div class="stem-loop hot-repressive">
| |
| − |
| |
| − | <input id="checked_2" type="checkbox" class="switch" />
| |
| − |
| |
| − |
| |
| − | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599.75 278.7">
| |
| − | <defs>
| |
| − | <style>
| |
| − | .hot-repressive .a, .b, .c, .f {
| |
| − | fill: none;
| |
| − | stroke-width: 11px;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .a {
| |
| − | stroke: #036;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .a,.hot-repressive .b,.hot-repressive .c,.hot-repressive .f,.hot-repressive .g {
| |
| − | stroke-linecap: round;
| |
| − | stroke-linejoin: round;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .b {
| |
| − | stroke: #060;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .c {
| |
| − | stroke: #600;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .d,.hot-repressive .e,.hot-repressive .h{
| |
| − | font-size: 17px;
| |
| − | font-family: Quicksand-Medium, Quicksand;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .d {
| |
| − | fill: #006837;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .e {
| |
| − | fill: #900;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .f {
| |
| − | stroke: #000;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .h {
| |
| − | fill: #930;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive .g {
| |
| − | fill: #fff794;
| |
| − | stroke: #fbb03b;
| |
| − | stroke-width: 7px;
| |
| − | }
| |
| − | .hot-repressive .hydrogen-bond{
| |
| − | opacity:1;
| |
| − | transition: all 0.3s linear 1s;
| |
| − | }
| |
| − | .hot-repressive #RNAse_E{
| |
| − | transform: translateY(-60px);
| |
| − | opacity:0;
| |
| − | transition: all 1s ease-out 0s;
| |
| − | }
| |
| − | .hot-repressive #ribosome_text{
| |
| − | opacity:0;
| |
| − | transition: all 0.3s linear 0s;
| |
| − | }
| |
| − | .hot-repressive #text{
| |
| − | transform: translateY(0px);
| |
| − | transition: all 1s ease-out;
| |
| − | }
| |
| − | .hot-repressive #loop{
| |
| − | transform: translateY(0px);
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-repressive #left,#right{
| |
| − | stroke-dasharray:130,500;
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-repressive #left{
| |
| − | stroke-dashoffset:0;
| |
| − | stroke:red;
| |
| − | }
| |
| − | .hot-repressive #right{
| |
| − | stroke-dashoffset:-277;
| |
| − | stroke:green;
| |
| − | }
| |
| − | .hot-repressive #left_s,#right_s{
| |
| − | stroke-dasharray:60,500;
| |
| − | color:black;
| |
| − | transition: all 2s ease-out;
| |
| − | }
| |
| − | .hot-repressive #left_s{
| |
| − | stroke-dashoffset:-130;
| |
| − | }
| |
| − | .hot-repressive #right_s{
| |
| − | stroke-dashoffset:-217;
| |
| − | }
| |
| − |
| |
| − | .hot-repressive.svg_checked .hydrogen-bond{
| |
| − | opacity:0;
| |
| − | transition: all 0.3s linear 0s;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #RNAse_E{
| |
| − | transform: translateY(0px);
| |
| − | opacity:1;
| |
| − | transition: all 0.5s ease-out 2s;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #ribosome_text{
| |
| − | opacity:1;
| |
| − | transition: all 0.5s ease-out 2s;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #text{
| |
| − | transform: translateY(-60px);
| |
| − | }
| |
| − | .hot-repressive.svg_checked #loop{
| |
| − | transform: translateY(130px);
| |
| − | }
| |
| − | .hot-repressive.svg_checked #left{
| |
| − | stroke-dashoffset:-135;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #right{
| |
| − | stroke-dashoffset:-142;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #left_s,#right_s{
| |
| − | stroke-dasharray:60,500;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #left_s{
| |
| − | stroke-dashoffset:-265;
| |
| − | }
| |
| − | .hot-repressive.svg_checked #right_s{
| |
| − | stroke-dashoffset:-82;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </defs>
| |
| − | <g>
| |
| − | <g class="hydrogen-bond">
| |
| − | <line class="a" x1="284.86" y1="144.21" x2="320.72" y2="144.21"/>
| |
| − | <line class="b" x1="284.86" y1="125.32" x2="320.72" y2="125.32"/>
| |
| − | <line class="c" x1="284.86" y1="163.09" x2="320.72" y2="163.09"/>
| |
| − | <line class="a" x1="284.86" y1="181.98" x2="320.72" y2="181.98"/>
| |
| − | <line class="b" x1="284.86" y1="200.87" x2="320.72" y2="200.87"/>
| |
| − | <line class="c" x1="284.86" y1="219.75" x2="320.72" y2="219.75"/>
| |
| − | </g>
| |
| − | <g id="text">
| |
| − | <text class="d" transform="translate(429.01 185.45)">RC</text>
| |
| − | <text class="e" transform="translate(123.8 185.45)">anti-RC</text>
| |
| − |
| |
| − | </g>
| |
| − |
| |
| − | <text id="ribosome_text" class="h" transform="translate(385.48 175.45)">RNAse E</text>
| |
| − |
| |
| − | <path id="loop" class="f" d="M327,101.42c0-21.25,19.2-20.39,19.2-52.51,0-24-16.62-43.41-43.42-43.41s-43.41,19.44-43.41,43.41c0,28.79,19.19,29.92,19.19,52.51"/>
| |
| − |
| |
| − | <g>
| |
| − | <path id="right_s" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
| |
| − | <path id="left_s" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
| |
| − | </g>
| |
| − | <g>
| |
| − | <path id="right" class="f" d="M594.25,247.5l-252.2.21a15,15,0,0,1-15-15V101.42"/>
| |
| − | <path id="left" class="f" d="M278.57,101.42V232.67a15,15,0,0,1-15.05,15H5.5"/>
| |
| − | </g>
| |
| − | <g id="RNAse_E">
| |
| − |
| |
| − | <path class="g" d="M417,187.26a40.56,40.56,0,0,0-39.11,51.23L417,229.77l-24.18,30.57A40.54,40.54,0,1,0,417,187.26Z"/>
| |
| − | <circle class="g" cx="402.84" cy="214.07" r="1.00"/>
| |
| − | </g>
| |
| − | </g>
| |
| − | </svg>
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function(){
| |
| − | $("#checked_2").click(function(){
| |
| − | if($(this).is(':checked')){
| |
| − | $(".hot-repressive").addClass("svg_checked");
| |
| − | }else{
| |
| − | $(".hot-repressive").removeClass("svg_checked");
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| − | </div>
| |
| − | <div class="stem-loop cold-induced">
| |
| − |
| |
| − | <input id="checked_3" type="checkbox" class="switch" />
| |
| − |
| |
| − | <svg class="svg_animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.12 206.26">
| |
| − | <defs>
| |
| − | <style>
| |
| − | .cold-induced .a,.cold-induced .b,.cold-induced .c {
| |
| − | fill: none;
| |
| − | stroke-linecap: round;
| |
| − | stroke-linejoin: round;
| |
| − | stroke-width: 11px;
| |
| − | }
| |
| − | .cold-induced .a {
| |
| − | stroke: #036;
| |
| − | }
| |
| − | .cold-induced .b {
| |
| − | stroke: #060;
| |
| − | }
| |
| − | .cold-induced .c {
| |
| − | stroke: #600;
| |
| − | }
| |
| − | .cold-induced .l{
| |
| − | fill: none;
| |
| − | stroke-linecap: round;
| |
| − | stroke-linejoin: round;
| |
| − | stroke: #000;
| |
| − | stroke-width: 11px;
| |
| − | }
| |
| − | .hydrogen-bond {
| |
| − | opacity: 1;
| |
| − | transition: all 0.3s ease 1s;
| |
| − | }
| |
| − | .rotate{
| |
| − | transition: all 1s ease;
| |
| − | transform: rotate(90deg);
| |
| − | }
| |
| − | .r1{
| |
| − | transform-origin: 41% 85.7%;
| |
| − | }
| |
| − | .r2{
| |
| − | transform-origin: 53% 17%;
| |
| − | }
| |
| − | .cold-induced.svg_checked .rotate{
| |
| − | transform: rotate(30deg);
| |
| − | }
| |
| − | .cold-induced.svg_checked .hydrogen-bond{
| |
| − | opacity:0;
| |
| − | transition: all 0.3s ease 0s;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </defs>
| |
| − | <g>
| |
| − | <path class="l rotate r1" d="M177.06,176.54a24.23,24.23,0,0,1-24.23,24.22H5.5"/>
| |
| − | <path class="l" d="M201.28,5.5a24.22,24.22,0,0,0-24.22,24.22V176.54a24.23,24.23,0,0,1-24.23,24.22"/>
| |
| − | <path class="l rotate r2" d="M348.62,5.5H201.28a24.22,24.22,0,0,0-24.22,24.22"/>
| |
| − | <g class="hydrogen-bond">
| |
| − | <line class="a" x1="219.21" y1="86.31" x2="183.35" y2="86.31"/>
| |
| − | <line class="b" x1="219.21" y1="67.42" x2="183.35" y2="67.42"/>
| |
| − | <line class="c" x1="219.21" y1="48.54" x2="183.35" y2="48.54"/>
| |
| − | </g>
| |
| − | <g class="hydrogen-bond">
| |
| − | <line class="a" x1="170.76" y1="150.31" x2="134.9" y2="150.31"/>
| |
| − | <line class="b" x1="170.76" y1="169.2" x2="134.9" y2="169.2"/>
| |
| − | <line class="c" x1="170.76" y1="131.42" x2="134.9" y2="131.42"/>
| |
| − | <line class="a" x1="170.76" y1="112.54" x2="134.9" y2="112.54"/>
| |
| − | </g>
| |
| − | </g>
| |
| − | </svg>
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function(){
| |
| − | $("#checked_3").click(function(){
| |
| − | if($(this).is(':checked')){
| |
| − | $(".cold-induced").addClass("svg_checked");
| |
| − | }else{
| |
| − | $(".cold-induced").removeClass("svg_checked");
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| − | </div>
| |
| − | <div class="stem-loop">
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | <section class="ss3">
| |
| − | </section>
| |
| − | <section class="ss4">
| |
| − | </section>
| |
| − | </html>
| |
| − | {{:Team:Jilin_China/Footer}}
| |
| − | {{:Team:Jilin_China/Home_Js}}
| |
