Difference between revisions of "Team:USTC"

 
(47 intermediate revisions by 4 users not shown)
Line 9: Line 9:
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
     function showModal(){
 
     function showModal(){
     $('.ui.modal')
+
     $('#HomePageCoverModal')
 
     .modal({
 
     .modal({
 
     dimmerSettings:{
 
     dimmerSettings:{
Line 89: Line 89:
 
     and (max-width : 1024px)
 
     and (max-width : 1024px)
 
     and (orientation : landscape) {
 
     and (orientation : landscape) {
     div#main_page_content{
+
      
    margin-top:40px;
+
    }
+
    div#menuForComputer{
+
    display:none;
+
    width:0;
+
    height:0;
+
    }
+
    #ui_article{
+
    width:63%;
+
    }
+
 
     }
 
     }
 
     @media only screen
 
     @media only screen
 
     and (max-width : 1024px)
 
     and (max-width : 1024px)
 
     and (orientation : portrait) {
 
     and (orientation : portrait) {
     div#main_page_content{
+
      
    margin-top:40px;
+
    }
+
    div#menuForComputer{
+
    display:none;
+
    width:0;
+
    height:0;
+
    }
+
 
     }
 
     }
 
     </style>
 
     </style>
Line 164: Line 147:
 
         <div class="header">Team</div>
 
         <div class="header">Team</div>
 
         <div class="menu">
 
         <div class="menu">
           <a class="item" href=" https://2016.igem.org/Team:USTC/Team"> Members  </a>
+
           <a class="item" href="https://2016.igem.org/Team:USTC/Team"> Members  </a>
           <a class="item" href=" https://2016.igem.org/Team:USTC/Team"> Sponsor  </a>
+
           <a class="item" href="https://2016.igem.org/Team:USTC/Team/Sponsor"> Sponsor  </a>
           <a class="item" href=" https://2016.igem.org/Team:USTC/Team"> About USTC  </a>
+
           <a class="item" href="https://2016.igem.org/Team:USTC/Team/AboutUSTC"> About USTC  </a>
           <a class="item" href=" https://2016.igem.org/Team:USTC/Team"> Acknowledgements  </a>
+
           <a class="item" href="https://2016.igem.org/Team:USTC/Team/Acknowledgements"> Acknowledgements  </a>
           <a class="item" href=" https://2016.igem.org/Team:USTC/Team"> Gallery  </a>
+
           <a class="item" href="https://2016.igem.org/Team:USTC/Team/Gallery"> Gallery  </a>
 
           <a class="item" href="https://2016.igem.org/Team:USTC/Collaborations"> Collaborations </a>
 
           <a class="item" href="https://2016.igem.org/Team:USTC/Collaborations"> Collaborations </a>
 
         </div>
 
         </div>
Line 178: Line 161:
 
     <div class="pusher" style="display:none;">
 
     <div class="pusher" style="display:none;">
 
        
 
        
       <div class="ui modal" >
+
       <div class="ui modal" id="HomePageCoverModal">
 
          
 
          
 
         <img id="HomePageCover" class="ui fluid image" src="https://static.igem.org/mediawiki/2016/f/f6/T--USTC--HomePageCover.jpg" >
 
         <img id="HomePageCover" class="ui fluid image" src="https://static.igem.org/mediawiki/2016/f/f6/T--USTC--HomePageCover.jpg" >
Line 186: Line 169:
 
       <div class="ui menu top fixed" id="menuForTablet" style="background-color: #FBBD08; top:21px;">
 
       <div class="ui menu top fixed" id="menuForTablet" style="background-color: #FBBD08; top:21px;">
 
         <div class="ui fluid container">
 
         <div class="ui fluid container">
           <a class="item" id="sidebarMenuTrigger">Navigation<i class="right arrow icon"></i></a>
+
           <a class="item" id="sidebarMenuTrigger">Navigation<i class="bullseye icon"></i></a>
 +
          <div class="right item">Click boxs in the map for more<i class="arrow circle down icon"></i></div>
 
           <div class="right item">A Prion's Life</div>
 
           <div class="right item">A Prion's Life</div>
 
         </div>
 
         </div>
Line 194: Line 178:
 
         <img class="ui fluid image" src="https://static.igem.org/mediawiki/2016/e/e5/T--USTC--MainPagePicture.png" id="MainPagePicture" onload="showModal()" usemap="#MainPagePic" />
 
         <img class="ui fluid image" src="https://static.igem.org/mediawiki/2016/e/e5/T--USTC--MainPagePicture.png" id="MainPagePicture" onload="showModal()" usemap="#MainPagePic" />
 
         <map name="MainPagePic" id="MainPagePic">
 
         <map name="MainPagePic" id="MainPagePic">
         <area shape="rect" coords="640,20,880,95" href="#" alt="Project" />
+
         <area shape="rect" coords="640,20,880,95" href="#" alt="Project" id="Project" />
        <area shape="rect" coords="480,208,595,455" href="#" alt="Team" />
+
          <area shape="rect" coords="480,208,595,455" href="#" alt="Team" id="Team" />
        <area shape="rect" coords="120,208,232,432" href="#" alt="Awards" />
+
            <area shape="rect" coords="120,208,232,432" href="#" alt="Awards" id="Awards" />
        <area shape="rect" coords="480,490,725,568" href="#" alt="HumanPractice" />
+
              <area shape="rect" coords="480,490,725,568" href="#" alt="HumanPractice" id="HumanPractice" />
        <area shape="rect" coords="1050,98,1170,321" href="#" alt="Parts" />
+
                <area shape="rect" coords="1050,98,1170,321" href="#" alt="Parts" id="Parts" />
          </map>
+
                  </map>
         
+
                 
         
+
                  <div class="ui modal" id="ProjectModal">
      </div><!--End of ui basic segment id="main_page_content"-->
+
                    <i class="close icon"></i>
         
+
                    <div class="header">
         
+
                      Project
         
+
                    </div>
          <div style="background-color:#44a17d; color:rgba(255, 255, 255, 0.9); margin-top: -20px;">
+
                    <div class="image content">
            <div class="ui center aligned container" style="padding-top: 20px;">
+
                      <div class="ui large image">
              2016 is our 10th year participating iGEM, which is also the 10th anniversary of iGEM itself.<br/><br/>
+
                        <img class="ui large image" src="https://static.igem.org/mediawiki/2016/5/51/T--USTC--DuiFuTuAn.jpg">
             
+
                      </div>
              We designed this special homepage to commemorate this special year. <br/><br/>
+
                      <div class="description">
             
+
                        <div class="ui container">
              Two Chinese characters "十年" on the bottom left corner means "ten years".<br/><br/>
+
                          <p >Hello~ Let me introduce myself first. I am Super Nemo, the mascot of Team USTC. As you can see, my body is just like the structure of the yeast prion Sup35 that Team USTC focused on. <br/>There is no need for any panics in the yeast prion because it is totally human-friendly. As one kind of yeast prion, Sup35 can aggregate at a certain temperature range, and protein denaturant Guanidine Hydrochloride (GdnHCL) can eliminate the aggregation. Based on the properties, we designed two systems--Propri-ontein and Pro Priontein. Want to know more? Welcome in!</p>
             
+
                        </div>
              Live long and prosper!
+
                        <div class="ui link list">
             
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Description">Description</a>
            </div>
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Design">Design</a>
           
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Proof">Proof of concept</a>
            <div class="ui divider"></div>
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Results">Results</a>
            <div class="ui grid">
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Notebook">Notebook</a>
             
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Spin_off">Spin-off</a>
              <div class="ui three wide column">
+
                        </div>
              </div>
+
                      </div>
              <div class="ui five wide column">
+
                    </div>
                <h3 class="ui header" style="color:rgba(255, 255, 255, 0.9);">Contact us</h3>
+
                  </div>
                <div class="ui massive link list" style="color:rgba(255, 255, 255, 0.9);">
+
                  <div class="ui modal" id="TeamModal">
                  <a class="item" href="mailto:yukae@mail.ustc.edu.cn">
+
                    <i class="close icon"></i>
                    <i class="mail icon" style="color:rgba(255, 255, 255, 0.9);"></i>
+
                    <div class="header">
                    <div class="content" style="color:rgba(255, 255, 255, 0.9);">e-mail</div>
+
                      Team
                  </a>
+
                    </div>
                  <a class="item" href="https://www.facebook.com/ustcigem">
+
                    <div class="image content">
                    <i class="facebook icon" style="color:rgba(255, 255, 255, 0.9);"></i>
+
                      <div class="ui large image">
                    <div class="content" style="color:rgba(255, 255, 255, 0.9);">Facebook</div>
+
                        <img class="ui large image" src="https://static.igem.org/mediawiki/2016/5/51/T--USTC--DuiFuTuAn.jpg">
                  </a>
+
                      </div>
                  <a class="item" href="http://weibo.com/3929719655/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1">
+
                      <div class="description">
                    <i class="weibo icon" style="color:rgba(255, 255, 255, 0.9);"></i>
+
                        <div class="ui container">
                    <div class="content" style="color:rgba(255, 255, 255, 0.9);">Weibo</div>
+
                          <p >We always say, "the fire burns high when everybody adds wood to it." Having kept eyes on our members all the way, Nemo find the saying suitable for our team. Definite divisions of work made our project proceeded smoothly and the spirit of unity gave us continuous confidence. Those who provided us with experiment materials and suggestions boosted our project, and the sponsorship from our school and Deutsche Bank cleared our worry for finace. Without all of these, we would never have our present success. I, Super Nemo, show my sincere gratitude for all of you on behalf of Team USTC!</p>
                  </a>
+
                        </div>
                </div>
+
                        <div class="ui link list">
              </div>
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Team"> Members  </a>
              <div class="ui two wide column">
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Team/Sponsor"> Sponsor  </a>
              </div>
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Team/AboutUSTC"> About USTC  </a>
              <div class="ui five wide column">
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Team/Acknowledgements"> Acknowledgements  </a>
                <h3 class="ui header" style="color:rgba(255, 255, 255, 0.9);">Sponsors</h3>
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Team/Gallery"> Gallery  </a>
                <img class="ui small image" src="https://static.igem.org/mediawiki/2016/c/cc/T--USTC--DeutscheBank.png">
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Collaborations"> Collaborations </a>
                <img class="ui small image" src="https://static.igem.org/mediawiki/2016/1/18/T--USTC--USTCXiaohui.png">
+
                        </div>
                <img class="ui small image" src="https://static.igem.org/mediawiki/2016/4/45/T--USTC--USTCJiaowuchu.png">
+
                      </div>
              </div>
+
                    </div>
             
+
                  </div>
            </div>
+
                  <div class="ui modal" id="AwardsModal">
            <div class="ui divider"></div>
+
                    <i class="close icon"></i>
            <div class="center aligned container">
+
                    <div class="header">
              <img class="ui centered tiny image" src="https://static.igem.org/mediawiki/2016/6/6b/T--USTC--MascotLogo.png">
+
                      Awards
              <div class="ui list">
+
                    </div>
                <div class="item">Designed by 2016 iGEM Team:USTC<br>Under CC License<br>Based on Semantic-UI</div>
+
                    <div class="image content">
              </div>
+
                      <div class="ui large image">
            </div>
+
                        <img class="ui large image" src="https://static.igem.org/mediawiki/2016/5/51/T--USTC--DuiFuTuAn.jpg">
           
+
                      </div>
          </div>
+
                      <div class="description">
          </div><!--end of pusher-->
+
                        <div class="ui header">Marvellous Model</div>
         
+
                        <div class="ui container">
          <script>
+
                          <p >We have also done marvellous <strong>modelling</strong> work. Nemo extraordinarily admired for modelling group! Our modelling mainly consists of three parts. One of them models the chemical reaction in the system to show the effect of GdnHCl and heat shock; the second part focuses on binding reactions involving two systems, binding of AD and BD of GAL4 promoters, and binding of sfGFP1-10 and sfGFP11. The last part models the application of our products in hardware. And we have opened our codes, so you can see how brilliant our modelling work is more directly!</p>
          $(document).ready(function(){
+
                        </div>
          $('.ui.sticky.basic.menu').sticky({
+
                        <div class="ui link list">
          context: '#main_page_content'
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Model">Model</a>
          });
+
                        </div>
         
+
                      </div>
          $('#HomePageCover').click(function(){
+
                    </div>
          $(".ui.modal")
+
                  </div>
          .modal('hide')
+
                  <div class="ui modal" id="HumanPracticeModal">
          });
+
                    <i class="close icon"></i>
         
+
                    <div class="header">
         
+
                      Human Practice
          });//End of $(document).ready(function())
+
                    </div>
         
+
                    <div class="image content">
          $(window).load(function(){
+
                      <div class="ui large image">
          $("div.pusher").prependTo("body");
+
                        <img class="ui large image" src="https://static.igem.org/mediawiki/2016/5/51/T--USTC--DuiFuTuAn.jpg">
          $("div.sidebar").prependTo("body");
+
                      </div>
          $("div#sideMenu").prependTo("div.pusher");
+
                      <div class="description">
         
+
                        <div class="ui container">
          });
+
                          <p >As the mascot of Team USTC, I have been quite busy in the last few months because I would show up every time our team carried out human practices. We held a poster presentation for public; designed an experiment for kids to help them get hands on biology; and we held "Plastic for Plants", gave a lecture for high school students and introduced iGEM to freshmen. We consulted Dr. Dong Men for help, attended The 4th iGEM Competition Asia Conference in Taiwan and communicated with Team HFUT. Last but not least, a questionnaire helped us a lot to know public's attitudes. Exhausted, nevertheless I am delighted!</p>
          $("#sidebarMenuTrigger").click(function(){
+
                        </div>
          $(".ui.sidebar.menu")
+
                        <div class="ui link list">
          .sidebar('setting', 'transition', 'overlay')
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Silver">Silver</a>
          .sidebar('setting', 'mobileTransition', 'overlay')
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Gold">Gold</a>
          .sidebar('toggle');
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Integrated_Practices">Integrated Practices</a>
          });
+
                          <a class="item" href="https://2016.igem.org/Team:USTC/Engagement">Engagement</a>
          </script>
+
                        </div>
        </body>
+
                      </div>
      </html>
+
                    </div>
 +
                  </div>
 +
                  <div class="ui modal" id="PartsModal">
 +
                    <i class="close icon"></i>
 +
                    <div class="header">
 +
                      Parts
 +
                    </div>
 +
                    <div class="image content">
 +
                      <div class="ui large image">
 +
                        <img class="ui large image" src="https://static.igem.org/mediawiki/2016/5/51/T--USTC--DuiFuTuAn.jpg">
 +
                      </div>
 +
                      <div class="description">
 +
                        <div class="ui container">
 +
                          <p >As an old Chinese saying goes, "Forefathers plant trees and posterities enjoy the shades." We have conquered so many barriers during building our circuits to accomplish our project, so that we would like to share some useful parts therefore the latter teams can get hands on them to save valuable time. We created three basic parts, and six composite parts to test the fluorescence intensity in different situations and the aggregation ability of SUP35. Want more details? Help yourself!</p>
 +
                        </div>
 +
                        <div class="ui link list">
 +
                          <a class="item" href="https://2016.igem.org/Team:USTC/Basic_Part">Basic Parts</a>
 +
                          <a class="item" href="https://2016.igem.org/Team:USTC/Composite_Part">Composite Parts</a>
 +
                          <a class="item" href="https://2016.igem.org/Team:USTC/Part_Collection">Part Collection</a>
 +
                        </div>
 +
                      </div>
 +
                    </div>
 +
                  </div>
 +
                 
 +
                 
 +
                  </div><!--End of ui basic segment id="main_page_content"-->
 +
                 
 +
                 
 +
                 
 +
                  <div style="background-color:#44a17d; color:rgba(255, 255, 255, 0.9); margin-top: -20px;">
 +
                    <div class="ui center aligned container" style="padding-top: 20px;">
 +
                      2016 is our 10th year participating in iGEM.<br/><br/>
 +
                     
 +
                      We designed this special homepage to commemorate this special year. <br/><br/>
 +
                     
 +
                      Two Chinese characters "十年" on the bottom left corner means "ten years".<br/><br/>
 +
                     
 +
                      Live long and prosper!
 +
                     
 +
                    </div>
 +
                   
 +
                    <div class="ui divider"></div>
 +
                    <div class="ui grid">
 +
                     
 +
                      <div class="ui three wide column">
 +
                      </div>
 +
                      <div class="ui five wide column">
 +
                        <h3 class="ui header" style="color:rgba(255, 255, 255, 0.9);">Contact us</h3>
 +
                        <div class="ui massive link list" style="color:rgba(255, 255, 255, 0.9);">
 +
                          <a class="item" href="mailto:yukae@mail.ustc.edu.cn">
 +
                            <i class="mail icon" style="color:rgba(255, 255, 255, 0.9);"></i>
 +
                            <div class="content" style="color:rgba(255, 255, 255, 0.9);">e-mail</div>
 +
                          </a>
 +
                          <a class="item" href="https://www.facebook.com/ustcigem">
 +
                            <i class="facebook icon" style="color:rgba(255, 255, 255, 0.9);"></i>
 +
                            <div class="content" style="color:rgba(255, 255, 255, 0.9);">Facebook</div>
 +
                          </a>
 +
                          <a class="item" href="http://weibo.com/3929719655/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1">
 +
                            <i class="weibo icon" style="color:rgba(255, 255, 255, 0.9);"></i>
 +
                            <div class="content" style="color:rgba(255, 255, 255, 0.9);">Weibo</div>
 +
                          </a>
 +
                        </div>
 +
                      </div>
 +
                      <div class="ui two wide column">
 +
                      </div>
 +
                      <div class="ui five wide column">
 +
                        <h3 class="ui header" style="color:rgba(255, 255, 255, 0.9);">Sponsors</h3>
 +
                        <img class="ui small image" src="https://static.igem.org/mediawiki/2016/c/cc/T--USTC--DeutscheBank.png">
 +
                        <img class="ui small image" src="https://static.igem.org/mediawiki/2016/1/18/T--USTC--USTCXiaohui.png">
 +
                        <img class="ui small image" src="https://static.igem.org/mediawiki/2016/4/45/T--USTC--USTCJiaowuchu.png">
 +
                      </div>
 +
                     
 +
                    </div>
 +
                    <div class="ui divider"></div>
 +
                    <div class="center aligned container">
 +
                      <img class="ui centered tiny image" src="https://static.igem.org/mediawiki/2016/6/6b/T--USTC--MascotLogo.png">
 +
                      <div class="ui list">
 +
                        <div class="item">Designed by 2016 iGEM Team:USTC<br>Under CC License<br>Based on Semantic-UI</div>
 +
                      </div>
 +
                    </div>
 +
                   
 +
                  </div>
 +
                  </div><!--end of pusher-->
 +
                 
 +
                  <script>
 +
                  $(document).ready(function(){
 +
                  $('.ui.sticky.basic.menu').sticky({
 +
                  context: '#main_page_content'
 +
                  });
 +
                 
 +
                  $('#HomePageCover').click(function(){
 +
                  $("#HomePageCoverModal")
 +
                  .modal('hide')
 +
                  });
 +
                  $('#Project').click(function(){
 +
                  $("#ProjectModal")
 +
                  .modal('show')
 +
                  });
 +
                  $('#Team').click(function(){
 +
                  $("#TeamModal")
 +
                  .modal('show')
 +
                  });
 +
                  $('#Awards').click(function(){
 +
                  $("#AwardsModal")
 +
                  .modal('show')
 +
                  });
 +
                  $('#HumanPractice').click(function(){
 +
                  $("#HumanPracticeModal")
 +
                  .modal('show')
 +
                  });
 +
                  $('#Parts').click(function(){
 +
                  $("#PartsModal")
 +
                  .modal('show')
 +
                  });
 +
                 
 +
                  $(window).resize(function(){
 +
                  var windowWidth;
 +
                  windowWidth = document.documentElement.clientWidth;
 +
                  $('#Project').attr("coords",("'" + (640*windowWidth/1280) + "," + (20*windowWidth/1280) + "," + (880*windowWidth/1280) + "," + (95*windowWidth/1280) +"'"));
 +
                  $('#Team').attr("coords",("'" + (480*windowWidth/1280) + "," + (208*windowWidth/1280) + "," + (595*windowWidth/1280) + "," + (455*windowWidth/1280) +"'"));
 +
                  $('#Awards').attr("coords",("'" + (120*windowWidth/1280) + "," + (208*windowWidth/1280) + "," + (232*windowWidth/1280) + "," + (432*windowWidth/1280) +"'"));
 +
                  $('#HumanPractice').attr("coords",("'" + (480*windowWidth/1280) + "," + (490*windowWidth/1280) + "," + (725*windowWidth/1280) + "," + (568*windowWidth/1280) +"'"));
 +
                  $('#Parts').attr("coords",("'" + (1050*windowWidth/1280) + "," + (98*windowWidth/1280) + "," + (1170*windowWidth/1280) + "," + (321*windowWidth/1280) +"'"));
 +
                  });
 +
                 
 +
                  });//End of $(document).ready(function())
 +
                 
 +
                  $(window).load(function(){
 +
                  $("div.pusher").prependTo("body");
 +
                  $("div.sidebar").prependTo("body");
 +
                  $("div#sideMenu").prependTo("div.pusher");
 +
                  var windowWidth;
 +
                  windowWidth = document.documentElement.clientWidth;
 +
                  $('#Project').attr("coords",("'" + (640*windowWidth/1280) + "," + (20*windowWidth/1280) + "," + (880*windowWidth/1280) + "," + (95*windowWidth/1280) +"'"));
 +
                  $('#Team').attr("coords",("'" + (480*windowWidth/1280) + "," + (208*windowWidth/1280) + "," + (595*windowWidth/1280) + "," + (455*windowWidth/1280) +"'"));
 +
                  $('#Awards').attr("coords",("'" + (120*windowWidth/1280) + "," + (208*windowWidth/1280) + "," + (232*windowWidth/1280) + "," + (432*windowWidth/1280) +"'"));
 +
                  $('#HumanPractice').attr("coords",("'" + (480*windowWidth/1280) + "," + (490*windowWidth/1280) + "," + (725*windowWidth/1280) + "," + (568*windowWidth/1280) +"'"));
 +
                  $('#Parts').attr("coords",("'" + (1050*windowWidth/1280) + "," + (98*windowWidth/1280) + "," + (1170*windowWidth/1280) + "," + (321*windowWidth/1280) +"'"));
 +
                 
 +
                  });
 +
                  $("#sidebarMenuTrigger").click(function(){
 +
                  $(".ui.sidebar.menu")
 +
                  .sidebar('setting', 'transition', 'overlay')
 +
                  .sidebar('setting', 'mobileTransition', 'overlay')
 +
                  .sidebar('toggle');
 +
                  });
 +
                  </script>
 +
                </body>
 +
              </html>

Latest revision as of 06:25, 19 November 2016

Modeling