Difference between revisions of "Team:NUDT CHINA/Experiments"

(Prototype team page)
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
<html>
+
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <link rel="stylesheet" href="basic.css">
 +
    <style type="text/css">
 +
p {font-variant: stacked-fractions;
 +
font-size: large;}
 +
.pure-g p{font-variant: stacked-fractions;
 +
font-size: large;}
 +
.main-title{padding-top:50%; padding-bottom:50%;width:100%;}
 +
.main{width:90%;}
 +
.main-title::before {
 +
content: '';
 +
width: 20vw;
 +
height: 20vw;
 +
min-width: 3.5em;
 +
min-height: 3.5em;
 +
background: url(https://static.igem.org/mediawiki/2017/f/fe/T-NUDT_CHINA-BigTitle.svg) no-repeat center center;
 +
background-size: cover;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
border-radius: 50%;
 +
z-index: 3;
 +
-webkit-transform: translate3d(-50%,-50%,0);
 +
transform: translate3d(-50%,-50%,0);}
 +
.large-header {
 +
background-image: url('https://static.igem.org/mediawiki/2017/9/90/T-NUDT_CHINA-bigheader-Experiment.jpg');}
  
<div class="column full_size">
+
    </style>
 +
</head>
 +
 
 +
  <div id="layout">
 +
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
      <div id="menu">
 +
        <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a  href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="main">
 +
        <div id="large-header" class="large-header">
 +
                    <canvas id="demo-canvas"></canvas>
 +
                    <h1 class="main-title">Experiment</span></h1>
 +
                </div>
 +
       
  
<h1>Experiments</h1>
+
        <div class="content" style="width: 74%">
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
     
  
<p>
+
<style>
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.  
+
p a{    font-size: x-large;}
</p>
+
</style>
 +
<p><a href="https://static.igem.org/mediawiki/2017/6/69/T-NUDT_CHINA-EXPERIMENT1.pdf">Protocol for Annealing</a></p>
 +
<p><a href="https://static.igem.org/mediawiki/2017/e/e5/T-NUDT_CHINA-EXPERIMENT3.pdf">Protocol for Ligation</a></p>
 +
<p><a href="https://static.igem.org/mediawiki/2017/5/55/T-NUDT_CHINA-EXPERIMENT5.pdf">Protocol for CCK8 (Cell Counting kit-8)</a></p>
  
</div>
+
<p><a href="https://static.igem.org/mediawiki/2017/2/2e/T-NUDT_CHINA-EXPERIMENT6.pdf">Protocol for Lipofectamine&reg; 2000 Transfection</a></p>
  
<div class="column half_size">
+
<p><a href="https://static.igem.org/mediawiki/2017/3/3d/T-NUDT_CHINA-EXPERIMENT7.pdf">Protocol for Transwell cell migration</a></p>
<h5>What should this page contain?</h5>
+
<ul>
+
<li> Protocols </li>
+
<li> Experiments </li>
+
<li> Documentation of the development of your project </li>
+
</ul>
+
  
</div>
+
<p><a href="https://static.igem.org/mediawiki/2017/c/c9/T-NUDT_CHINA-EXPERIMENT8.pdf">Protocol for Western blotting</a></p>
  
<div class="column half_size">
+
<p><a href="https://static.igem.org/mediawiki/2017/7/7e/T-NUDT_CHINA-EXPERIMENT9.pdf">Protocol for cell culture and subculture</a></p>
<h5>Inspiration</h5>
+
<ul>
+
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
</ul>
+
</div>
+
  
 +
<p><a href="https://static.igem.org/mediawiki/2017/2/24/T-NUDT_CHINA-EXPERIMENT2.pdf">Protocol for Asymmetrical PCR</a></p>
  
<div class="clear"></div>
+
<p><a href="https://static.igem.org/mediawiki/2017/9/91/T-NUDT_CHINA-EXPERIMENT19.PDF">Protocol for PCR with PrimeStar HS DNA polymerase</a></p>
  
 +
<p><a href="https://static.igem.org/mediawiki/2017/d/df/T-NUDT_CHINA-EXPERIMENT13.pdf">Protocol for Phosphorylation Modification</a></p>
  
<div class="column half_size">
+
<p><a href="https://static.igem.org/mediawiki/2017/d/d3/T-NUDT_CHINA-EXPERIMENT20.PDF">Protocol for colony PCR</a></p>
  
 +
<p><a href="https://static.igem.org/mediawiki/2017/d/d0/T-NUDT_CHINA-EXPERIMENT21.PDF">Protocol for Agarose Gel Electrophoresis</a></p>
  
 +
<p><a href="https://static.igem.org/mediawiki/2017/0/09/T-NUDT_CHINA-EXPERIMENT22.PDF">Protocol for double digestion</a></p>
  
 +
<p><a href="https://static.igem.org/mediawiki/2017/4/40/T-NUDT_CHINA-EXPERIMENT23.PDF">Protocol for Gel Purification with OMEGA Gel Extraction Kit</a></p>
 +
 +
<p><a href="https://static.igem.org/mediawiki/2017/3/3e/T-NUDT_CHINA-EXPERIMENT25.PDF">Protocol for mini-prep with OMEGA E.Z.N.A.&reg; Plasmid DNA Mini Kit I.</a></p>
 +
 +
<p><a href="https://static.igem.org/mediawiki/2017/2/2f/T-NUDT_CHINA-EXPERIMENT26.PDF">Protocol for transformation with ligation reaction system with TIANGEN DH5a competent cell</a></p>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
</div>
 
</div>
 +
</div></div>
 +
 +
<script type="text/javascript">
 +
function send(num) {
 +
  var openClass = 'is-open';
 +
var add1=document.getElementById(num);
 +
var add2=document.getElementById('Lay'+num);
 +
addClass(add1,openClass);
 +
addClass(add2,openClass);
 +
function hasClass(element,csName){
 +
      return  element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
    };
 +
function addClass(element,csName){
 +
       if(!hasClass(element,csName)){
 +
 +
         element.className+=' '+csName;
 +
 +
      }
 +
};}
 +
function show(num) {
 +
var openClass = 'is-open';
 +
var remove1=document.getElementById(num);
 +
var remove2=document.getElementById('Lay'+num);
 +
deleteClass(remove1,openClass);
 +
deleteClass(remove2,openClass);
 +
function hasClass(element,csName){
 +
      return  element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
    };
 +
  function deleteClass(element,csName){   
 +
if (hasClass(element,csName)) {
 +
        var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)");
 +
        element.className = element.className.replace(reg, " ");
 +
    }
 +
};
 +
}
 +
 +
</script>
 +
<script type="text/javascript">
 +
( function(window,document){
 +
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
 +
 +
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
 +
 +
        for(; i < length; i++) {
 +
          if (classes[i] === className) {
 +
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
 +
 +
        element.className = classes.join(' ');
 +
    }
 +
 +
    function toggleAll(e) {
 +
        var active = 'active';
 +
 +
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
 +
 +
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
 +
 +
    content.onclick = function(e) {
 +
        if (menu.className.indexOf('active') !== -1) {
 +
            toggleAll(e);
 +
        }
 +
    };
 +
 +
}(this, this.document));
 +
</script>
 +
 +
<script type="text/javascript" >
 +
    function Show(tagId) {
 +
    if (document.getElementById(tagId).style.display=="none") {
 +
    document.getElementById(tagId).style.display="block";
 +
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
<script type="text/javascript" >
 +
(function() {
 +
 +
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
 +
 +
    // Main
 +
    initHeader();
 +
    addListeners();
 +
 +
    function initHeader() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        target = {x: 0, y: height};
 +
 +
        largeHeader = document.getElementById('large-header');
 +
        largeHeader.style.height = height+'px';
 +
 +
        canvas = document.getElementById('demo-canvas');
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
        ctx = canvas.getContext('2d');
 +
 +
        // create particles
 +
        circles = [];
 +
        for(var x = 0; x < width*0.5; x++) {
 +
            var c = new Circle();
 +
            circles.push(c);
 +
        }
 +
        animate();
 +
    }
 +
 +
    // Event handling
 +
    function addListeners() {
 +
        window.addEventListener('scroll', scrollCheck);
 +
        window.addEventListener('resize', resize);
 +
    }
 +
 +
    function scrollCheck() {
 +
        if(document.body.scrollTop > height) animateHeader = false;
 +
        else animateHeader = true;
 +
    }
 +
 +
    function resize() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        largeHeader.style.height = height+'px';
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
    }
 +
 +
    function animate() {
 +
        if(animateHeader) {
 +
            ctx.clearRect(0,0,width,height);
 +
            for(var i in circles) {
 +
                circles[i].draw();
 +
            }
 +
        }
 +
        requestAnimationFrame(animate);
 +
    }
 +
 +
    // Canvas manipulation
 +
    function Circle() {
 +
        var _this = this;
 +
 +
        // constructor
 +
        (function() {
 +
            _this.pos = {};
 +
            init();
 +
            console.log(_this);
 +
        })();
 +
 +
        function init() {
 +
            _this.pos.x = Math.random()*width;
 +
            _this.pos.y = height+Math.random()*100;
 +
            _this.alpha = 0.1+Math.random()*0.3;
 +
            _this.scale = 0.1+Math.random()*0.3;
 +
            _this.velocity = Math.random();
 +
        }
 +
 +
        this.draw = function() {
 +
            if(_this.alpha <= 0) {
 +
                init();
 +
            }
 +
            _this.pos.y -= _this.velocity;
 +
            _this.alpha -= 0.0005;
 +
            ctx.beginPath();
 +
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
 +
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
 +
            ctx.fill();
 +
        };
 +
    }
  
 +
})();
 +
</script>
 +
</body>
 
</html>
 
</html>

Latest revision as of 00:39, 2 November 2017