Difference between revisions of "Team:Tianjin/Engagement"

Line 6: Line 6:
 
" rel="stylesheet">
 
" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Montserrat:300i,400,400i,500i,600i,700,700i|PT+Sans:400,400i,700" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Montserrat:300i,400,400i,500i,600i,700,700i|PT+Sans:400,400i,700" rel="stylesheet">
 +
<link href="http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700" rel="stylesheet">
 +
 +
<link href="https://2017.igem.org/Team:Tianjin/Resources/CSS:titledemo?action=raw&ctype=text/css
 +
" rel="stylesheet">
 +
<link href="https://2017.igem.org/Team:Tianjin/Resources/CSS:titlelinkstyle?action=raw&ctype=text/css
 +
" rel="stylesheet">
 +
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
/* OVERRIDE IGEM SETTINGS */
 
/* OVERRIDE IGEM SETTINGS */
Line 130: Line 137:
 
     margin-bottom:1.1em
 
     margin-bottom:1.1em
 
}
 
}
 +
</style>
 +
<style> /* Firefox seems to have issues loading the clip path from inside the CSS */
 +
.link--urpi::before {
 +
-webkit-clip-path: url(#cp_up);
 +
clip-path: url(#cp_up);
 +
}
 +
 +
.link--urpi::after {
 +
-webkit-clip-path: url(#cp_down);
 +
clip-path: url(#cp_down);
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
Line 139: Line 157:
  
 
<div  class="page">
 
<div  class="page">
 +
      <div class="container">
 +
<div class="grid">
 +
<div class="grid__item color-1">
 +
<a class="link link--kukuri" href="#" data-letters="Engagemengt">Engagemengt</a>
 +
</div>
 +
</div>
  
 +
</div>
  
  
Line 171: Line 196:
  
  
 +
<script>
 +
window.requestAnimFrame = (function(callback) {
 +
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
 +
function(callback) {
 +
window.setTimeout(callback, 1000 / 60);
 +
};
 +
})();
 +
 +
var requestId, jolttime;
 +
 +
var c = document.getElementById('canv');
 +
var $ = c.getContext('2d');
 +
 +
var s = 18; //grid square size
 +
var mv = 10; //moving areas
 +
var sp = 1; //move speed
 +
var clm = 23; //columns
 +
var rw = 10; //rows
 +
var x = []; //x array
 +
var y = []; //y array
 +
var X = []; //starting X array
 +
var Y = []; //starting Y array
 +
 +
c.width  = c.offsetWidth;
 +
c.height = c.offsetHeight;
 +
 +
for (var i = 0; i < clm * rw; i++) {
 +
x[i] = ((i % clm) - 0.5) * s;
 +
y[i] = (Math.floor(i / clm) - 0.5) * s;
 +
X[i] = x[i];
 +
Y[i] = y[i];
 +
}
 +
var t = 0;
 +
 +
function jolt() {
 +
$.fillRect(0, 0, c.width, c.height);
 +
 +
for (var i = 0; i < clm * rw; i++) {
 +
if (i % clm != clm - 1 && i < clm * (rw - 1) - 1) {
 +
$.fillStyle = "hsla(0,0,0,1)";
 +
$.strokeStyle = "#95D384";
 +
$.lineWidth = 1;
 +
$.beginPath();
 +
$.moveTo(x[i], y[i]);
 +
$.lineTo(x[i + 1], y[i + 1]);
 +
$.lineTo(x[i + clm + 1], y[i + clm + 1]);
 +
$.lineTo(x[i + clm], y[i + clm]);
 +
$.closePath();
 +
$.stroke();
 +
$.fill();
 +
}
 +
}
 +
for (var i = 0; i < rw * clm; i++) {
 +
if ((x[i] < X[i] + mv) && (x[i] > X[i] - mv) && (y[i] < Y[i] + mv) && (y[i] > Y[i] - mv)) {
 +
x[i] = x[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
 +
y[i] = y[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
 +
} else if (x[i] >= X[i] + mv) {
 +
x[i] = x[i] - sp;
 +
} else if (x[i] <= X[i] - mv) {
 +
x[i] = x[i] + sp;
 +
} else if (y[i] >= Y[i] + mv) {
 +
y[i] = y[i] - sp;
 +
} else if (y[i] <= Y[i] + mv) {
 +
y[i] = y[i] + sp;
 +
}
 +
}
 +
//controls time of electric shake> when counter equals 0, it will reset for 5s then start again.
 +
if (t % c.width == 0) {
 +
jolttime = setTimeout('jolt()', 5);
 +
t++;
 +
} else {
 +
jolttime = setTimeout('jolt()', 5);
 +
t++;
 +
}
 +
}
 +
 +
function start() {
 +
if (!requestId) {
 +
requestId = window.requestAnimFrame(jolt);
 +
}
 +
}
 +
 +
function stop() {
 +
if (requestId) {
 +
clearTimeout(jolttime);
 +
window.cancelAnimationFrame(requestId);
 +
requestId = undefined;
 +
}
 +
}
  
 +
document.querySelector('a.link--asiri').addEventListener('mouseenter', start);
 +
document.querySelector('a.link--asiri').addEventListener('mouseleave', stop);
 +
</script>
 +
<script>
 +
// For Demo purposes only (show hover effect on mobile devices)
 +
[].slice.call( document.querySelectorAll('.grid a') ).forEach( function(el) {
 +
el.onclick = function() { return false; }
 +
} );
 +
</script>
  
 +
</body>
 
</html>
 
</html>
 
{{:Team:Tianjin/Templates/footer}}
 
{{:Team:Tianjin/Templates/footer}}

Revision as of 09:28, 3 October 2017

/* OVERRIDE IGEM SETTINGS */

Engagemengt

Engagement

Description Saccharomyces cerevisiae is a single-celled organism with three types, called a, α, and a/α. In Saccharomyces cerevisiae, three cell types differ from each other in their DNA content at the MAT locus which specifies the cell types. In nature, the two haploid cell types (a and α) of this kind of budding yeast are able to interconvert in a reversible manner by DNA-rearrangement with a DSB at the MAT locus, and this process is called mating-type switching.

This year, we are planning to utilize the natural phenomenon of mating-type switching to create a new concept called mating switcher for functional transformation and safeguards in Saccharomyces cerevisiae with gene-editing technique’s help. We will take this new kind of switcher into some very interesting applications, including heavy metal treatment and cell signal swiching, to improve the maneuverability of this yeast. Moreover, we will discuss the possibility of this concept’s utilization in other eukarya.