Difference between revisions of "Team:TUST China"

 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{TUST China/nav}}
 
{{TUST China/nav}}
−
{{TUST China}}
+
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
+
    <meta charset="UTF-8">
−
body{
+
    <title>main</title>
−
color:blue;!important;
+
 
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:TUST_China/css/mainbackground?action=raw&ctype=text/css" />
 +
 
 +
 
 +
    <style>
 +
.tustfoot{
 +
    position: absolute;
 +
    z-index: 99;
 +
   
 +
    top: 272vw!important;
 +
    display: block;
 
}
 
}
−
</style>
+
.quan{
−
</head>
+
    position: absolute;
 +
    display: block;
 +
    opacity: 0.9;
 +
    z-index: 99;
 +
    top: 300px;
 +
}
 +
.tustfoot{
 +
display:block;
 +
position:absolute;
 +
top:2100%;
 +
}
 +
 
 +
#main-btn{
 +
            position: absolute;
 +
            z-index: 1;
 +
            width: 10%;
 +
            opacity: 0.7;
 +
            font-size: 1.1vw;
 +
            top: 600px;
 +
            left: 50%;
 +
            -webkit-transform: translateX(-50%);
 +
            -moz-transform: translateX(-50%);
 +
            -ms-transform: translateX(-50%);
 +
            -o-transform: translateX(-50%);
 +
            transform: translateX(-50%);
 +
            color: #000;
 +
            background-color: #FFFFCC;
 +
            z-index: 10;
 +
 
 +
        }
 +
#mainbackground3d {
 +
 
 +
            position: absolute;
 +
 
 +
            height: 800px;
 +
 
 +
            width: 103%;
 +
            z-index: 9;
 +
 
 +
        }
 +
  #top_title{display:none;}
 +
    #top_title{display:none;}
 +
    #content{margin:0px;padding:0px; width:100%; }
 +
#HQ_page p{height:auto}
 +
        body {
 +
 
 +
 
 +
            background-color:#fff;
 +
            margin: 0;
 +
 
 +
        }
 +
 
 +
          </style>
 +
<script>
 +
 
 +
$(function () {
 +
 
 +
 
 +
 
 +
            var city_top = 810;
 +
 
 +
            $('#main-btn').click(function () {
 +
 
 +
                $('html,body').animate({scrollTop:city_top},810);
 +
 
 +
            })
 +
 
 +
        })
 +
     
 +
       
 +
</script>
 +
</head><body>
 +
<script type="text/javascript" src="https://2018.igem.org/Template:TUST_China/js/mainbackground?action=raw&ctype=text/javascript"></script>
 +
 
 +
<button id="main-btn" class="btn" onclick="sild()">Read<br>More</button>
 +
<div id="mainbackground3d" class="mainbackground3d" style="top:-2px;">
 +
 
 +
    <div id="output" class="mainbackground3d">
 +
 
 +
        <div class="DNA-container" id="first">
 +
 
 +
            <div class="wave">
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
            </div>
 +
 
 +
        </div>
 +
        <div class="DNA-container" id="second">
 +
 
 +
            <div class="wave">
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
            </div>
 +
 
 +
        </div>
 +
        <div class="DNA-container" id="three">
 +
 
 +
            <div class="wave">
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
                <div class="dot"></div>
 +
            </div>
 +
 
 +
        </div>
 +
    </div>
 +
    <div class="main-DNA-container">
 +
        <div class="first-content"> </div>
 +
    </div>
 +
</div>
 +
<center><div class="quan"><img src="https://static.igem.org/mediawiki/2018/2/2f/T--TUST_China--title.png" width="90%" height="auto" style="opacity: 0.9;"></div></center>
 +
<div>
 +
 +
  <img src="https://static.igem.org/mediawiki/2018/2/29/T--TUST_China--mainzhubai.png" width="103%" style="left: -5px;top:790px;position: absolute"/>
 +
</div>
 +
 
 +
<script>
 +
 
 +
    (function(){
 +
 
 +
 
 +
 
 +
        //------------------------------
 +
 
 +
        // Mesh Properties
 +
 
 +
        //------------------------------
 +
 
 +
        var MESH = {
 +
 
 +
            width: 1.2,
 +
 
 +
            height: 1.2,
 +
 
 +
            depth: 10,
 +
 
 +
            segments: 16,
 +
 
 +
            slices: 8,
 +
 
 +
            xRange: 0.8,
 +
 
 +
            yRange: 0.1,
 +
 
 +
            zRange: 1.0,
 +
 
 +
            ambient: '#170088',
 +
 
 +
            diffuse: '#00ff3c',
 +
 
 +
            speed: 0.002
 +
 
 +
        };
 +
 
 +
 
 +
 
 +
        //------------------------------
 +
 
 +
        // Light Properties
 +
 
 +
        //------------------------------
 +
 
 +
        var LIGHT = {
 +
 
 +
            count: 3,
 +
 
 +
            xyScalar: 1,
 +
 
 +
            zOffset: 100,
 +
 
 +
            ambient: '#880066',
 +
 
 +
            diffuse: '#FF8800',
 +
 
 +
            speed: 0.001,
 +
 
 +
            gravity: 1200,
 +
 
 +
            dampening: 0.95,
 +
 
 +
            minLimit: 10,
 +
 
 +
            maxLimit: null,
 +
 
 +
            minDistance: 20,
 +
 
 +
            maxDistance: 400,
 +
 
 +
            autopilot: false,
 +
 
 +
            draw: true,
 +
 
 +
            bounds: FSS.Vector3.create(),
 +
 
 +
            step: FSS.Vector3.create(
 +
 
 +
                Math.randomInRange(0.2, 1.0),
 +
 
 +
                Math.randomInRange(0.2, 1.0),
 +
 
 +
                Math.randomInRange(0.2, 1.0)
 +
 
 +
            )
 +
 
 +
        };
 +
 
 +
 
 +
 
 +
        //------------------------------
 +
 
 +
        // Render Properties
 +
 
 +
        //------------------------------
 +
 
 +
        var WEBGL = 'webgl';
 +
 
 +
        var CANVAS = 'canvas';
 +
 
 +
        var SVG = 'svg';
 +
 
 +
        var RENDER = {
 +
 
 +
            renderer: SVG
 +
 
 +
        };
 +
 
 +
 
 +
 
 +
        //------------------------------
 +
 
 +
        // Global Properties
 +
 
 +
        //------------------------------
 +
 
 +
        var now, start = Date.now();
 +
 
 +
        var center = FSS.Vector3.create();
 +
 
 +
        var attractor = FSS.Vector3.create();
 +
 
 +
        var mainbackground3d = document.getElementById('mainbackground3d');
 +
 
 +
        var controls = document.getElementById('controls');
 +
 
 +
        var output = document.getElementById('output');
 +
 
 +
        var ui = document.getElementById('ui');
 +
 
 +
        var renderer, scene, mesh, geometry, material;
 +
 
 +
        var webglRenderer, canvasRenderer, svgRenderer;
 +
 
 +
 
 +
 
 +
 
 +
 
 +
        //------------------------------
 +
 
 +
        // Methods
 +
 
 +
        //------------------------------
 +
 
 +
        function initialise() {
 +
 
 +
            createRenderer();
 +
 
 +
            createScene();
 +
 
 +
            createMesh();
 +
 
 +
            createLights();
 +
 
 +
            addEventListeners();
 +
 
 +
 
 +
 
 +
            resize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
 +
 
 +
            animate();
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function createRenderer() {
 +
 
 +
            webglRenderer = new FSS.WebGLRenderer();
 +
 
 +
            canvasRenderer = new FSS.CanvasRenderer();
 +
 
 +
            svgRenderer = new FSS.SVGRenderer();
 +
 
 +
            setRenderer(RENDER.renderer);
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function setRenderer(index) {
 +
 
 +
            if (renderer) {
 +
 
 +
                output.removeChild(renderer.element);
 +
 
 +
            }
 +
 
 +
            switch(index) {
 +
 
 +
                case WEBGL:
 +
 
 +
                    renderer = webglRenderer;
 +
 
 +
                    break;
 +
 
 +
                case CANVAS:
 +
 
 +
                    renderer = canvasRenderer;
 +
 
 +
                    break;
 +
 
 +
                case SVG:
 +
 
 +
                    renderer = svgRenderer;
 +
 
 +
                    break;
 +
 
 +
            }
 +
 
 +
            renderer.setSize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
 +
 
 +
            output.appendChild(renderer.element);
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function createScene() {
 +
 
 +
            scene = new FSS.Scene();
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function createMesh() {
 +
 
 +
            scene.remove(mesh);
 +
 
 +
            renderer.clear();
 +
 
 +
            geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices);
 +
 
 +
            material = new FSS.Material(MESH.ambient, MESH.diffuse);
 +
 
 +
            mesh = new FSS.Mesh(geometry, material);
 +
 
 +
            scene.add(mesh);
 +
 
 +
 
 +
 
 +
            // Augment vertices for animation
 +
 
 +
            var v, vertex;
 +
 
 +
            for (v = geometry.vertices.length - 1; v >= 0; v--) {
 +
 
 +
                vertex = geometry.vertices[v];
 +
 
 +
                vertex.anchor = FSS.Vector3.clone(vertex.position);
 +
 
 +
                vertex.step = FSS.Vector3.create(
 +
 
 +
                    Math.randomInRange(0.2, 1.0),
 +
 
 +
                    Math.randomInRange(0.2, 1.0),
 +
 
 +
                    Math.randomInRange(0.2, 1.0)
 +
 
 +
                );
 +
 
 +
                vertex.time = Math.randomInRange(0, Math.PIM2);
 +
 
 +
            }
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function createLights() {
 +
 
 +
            var l, light;
 +
 
 +
            for (l = scene.lights.length - 1; l >= 0; l--) {
 +
 
 +
                light = scene.lights[l];
 +
 
 +
                scene.remove(light);
 +
 
 +
            }
 +
 
 +
            renderer.clear();
 +
 
 +
            for (l = 0; l < LIGHT.count; l++) {
 +
 
 +
                light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse);
 +
 
 +
                light.ambientHex = light.ambient.format();
 +
 
 +
                light.diffuseHex = light.diffuse.format();
 +
 
 +
                scene.add(light);
 +
 
 +
 
 +
 
 +
                // Augment light for animation
 +
 
 +
                light.mass = Math.randomInRange(0.5, 1);
 +
 
 +
                light.velocity = FSS.Vector3.create();
 +
 
 +
                light.acceleration = FSS.Vector3.create();
 +
 
 +
                light.force = FSS.Vector3.create();
 +
 
 +
 
 +
 
 +
                // Ring SVG Circle
 +
 
 +
                light.ring = document.createElementNS(FSS.SVGNS, 'circle');
 +
 
 +
                light.ring.setAttributeNS(null, 'stroke', light.ambientHex);
 +
 
 +
                light.ring.setAttributeNS(null, 'stroke-width', '0.5');
 +
 
 +
                light.ring.setAttributeNS(null, 'fill', 'none');
 +
 
 +
                light.ring.setAttributeNS(null, 'r', '10');
 +
 
 +
 
 +
 
 +
                // Core SVG Circle
 +
 
 +
                light.core = document.createElementNS(FSS.SVGNS, 'circle');
 +
 
 +
                light.core.setAttributeNS(null, 'fill', light.diffuseHex);
 +
 
 +
                light.core.setAttributeNS(null, 'r', '4');
 +
 
 +
            }
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function resize(width, height) {
 +
 
 +
            renderer.setSize(width, height);
 +
 
 +
            FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight);
 +
 
 +
            createMesh();
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function animate() {
 +
 
 +
            now = Date.now() - start;
 +
 
 +
            update();
 +
 
 +
            render();
 +
 
 +
            requestAnimationFrame(animate);
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function update() {
 +
 
 +
            var ox, oy, oz, l, light, v, vertex, offset = MESH.depth/2;
 +
 
 +
 
 +
 
 +
            // Update Bounds
 +
 
 +
            FSS.Vector3.copy(LIGHT.bounds, center);
 +
 
 +
            FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar);
 +
 
 +
 
 +
 
 +
            // Update Attractor
 +
 
 +
            FSS.Vector3.setZ(attractor, LIGHT.zOffset);
 +
 
 +
 
 +
 
 +
            // Overwrite the Attractor position
 +
 
 +
            if (LIGHT.autopilot) {
 +
 
 +
                ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed);
 +
 
 +
                oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed);
 +
 
 +
                FSS.Vector3.set(attractor,
 +
 
 +
                    LIGHT.bounds[0]*ox,
 +
 
 +
                    LIGHT.bounds[1]*oy,
 +
 
 +
                    LIGHT.zOffset);
 +
 
 +
            }
 +
 
 +
 
 +
 
 +
            // Animate Lights
 +
 
 +
            for (l = scene.lights.length - 1; l >= 0; l--) {
 +
 
 +
                light = scene.lights[l];
 +
 
 +
 
 +
 
 +
                // Reset the z position of the light
 +
 
 +
                FSS.Vector3.setZ(light.position, LIGHT.zOffset);
 +
 
 +
 
 +
 
 +
                // Calculate the force Luke!
 +
 
 +
                var D = Math.clamp(FSS.Vector3.distanceSquared(light.position, attractor), LIGHT.minDistance, LIGHT.maxDistance);
 +
 
 +
                var F = LIGHT.gravity * light.mass / D;
 +
 
 +
                FSS.Vector3.subtractVectors(light.force, attractor, light.position);
 +
 
 +
                FSS.Vector3.normalise(light.force);
 +
 
 +
                FSS.Vector3.multiplyScalar(light.force, F);
 +
 
 +
 
 +
 
 +
                // Update the light position
 +
 
 +
                FSS.Vector3.set(light.acceleration);
 +
 
 +
                FSS.Vector3.add(light.acceleration, light.force);
 +
 
 +
                FSS.Vector3.add(light.velocity, light.acceleration);
 +
 
 +
                FSS.Vector3.multiplyScalar(light.velocity, LIGHT.dampening);
 +
 
 +
                FSS.Vector3.limit(light.velocity, LIGHT.minLimit, LIGHT.maxLimit);
 +
 
 +
                FSS.Vector3.add(light.position, light.velocity);
 +
 
 +
            }
 +
 
 +
 
 +
 
 +
            // Animate Vertices
 +
 
 +
            for (v = geometry.vertices.length - 1; v >= 0; v--) {
 +
 
 +
                vertex = geometry.vertices[v];
 +
 
 +
                ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed);
 +
 
 +
                oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed);
 +
 
 +
                oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed);
 +
 
 +
                FSS.Vector3.set(vertex.position,
 +
 
 +
                    MESH.xRange*geometry.segmentWidth*ox,
 +
 
 +
                    MESH.yRange*geometry.sliceHeight*oy,
 +
 
 +
                    MESH.zRange*offset*oz - offset);
 +
 
 +
                FSS.Vector3.add(vertex.position, vertex.anchor);
 +
 
 +
            }
 +
 
 +
 
 +
 
 +
            // Set the Geometry to dirty
 +
 
 +
            geometry.dirty = true;
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function render() {
 +
 
 +
            renderer.render(scene);
 +
 
 +
 
 +
 
 +
            // Draw Lights
 +
 
 +
            if (LIGHT.draw) {
 +
 
 +
                var l, lx, ly, light;
 +
 
 +
                for (l = scene.lights.length - 1; l >= 0; l--) {
 +
 
 +
                    light = scene.lights[l];
 +
 
 +
                    lx = light.position[0];
 +
 
 +
                    ly = light.position[1];
 +
 
 +
                    switch(RENDER.renderer) {
 +
 
 +
                        case CANVAS:
 +
 
 +
                            renderer.context.lineWidth = 0.5;
 +
 
 +
                            renderer.context.beginPath();
 +
 
 +
                            renderer.context.arc(lx, ly, 10, 0, Math.PIM2);
 +
 
 +
                            renderer.context.strokeStyle = light.ambientHex;
 +
 
 +
                            renderer.context.stroke();
 +
 
 +
                            renderer.context.beginPath();
 +
 
 +
                            renderer.context.arc(lx, ly, 4, 0, Math.PIM2);
 +
 
 +
                            renderer.context.fillStyle = light.diffuseHex;
 +
 
 +
                            renderer.context.fill();
 +
 
 +
                            break;
 +
 
 +
                        case SVG:
 +
 
 +
                            lx += renderer.halfWidth;
 +
 
 +
                            ly = renderer.halfHeight - ly;
 +
 
 +
                            light.core.setAttributeNS(null, 'fill', light.diffuseHex);
 +
 
 +
                            light.core.setAttributeNS(null, 'cx', lx);
 +
 
 +
                            light.core.setAttributeNS(null, 'cy', ly);
 +
 
 +
                            renderer.element.appendChild(light.core);
 +
 
 +
                            light.ring.setAttributeNS(null, 'stroke', light.ambientHex);
 +
 
 +
                            light.ring.setAttributeNS(null, 'cx', lx);
 +
 
 +
                            light.ring.setAttributeNS(null, 'cy', ly);
 +
 
 +
                            renderer.element.appendChild(light.ring);
 +
 
 +
                            break;
 +
 
 +
                    }
 +
 
 +
                }
 +
 
 +
            }
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function addEventListeners() {
 +
 
 +
            window.addEventListener('resize', onWindowResize);
 +
 
 +
            mainbackground3d.addEventListener('click', onMouseClick);
 +
 
 +
            mainbackground3d.addEventListener('mousemove', onMouseMove);
 +
 
 +
        }
 +
 
 +
        //------------------------------
 +
 
 +
        // Callbacks
 +
 
 +
        //------------------------------
 +
 
 +
        function onMouseClick(event) {
 +
 
 +
            FSS.Vector3.set(attractor, event.x, renderer.height - event.y);
 +
 
 +
            FSS.Vector3.subtract(attractor, center);
 +
 
 +
            LIGHT.autopilot = !LIGHT.autopilot;
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function onMouseMove(event) {
 +
 
 +
            FSS.Vector3.set(attractor, event.x, renderer.height - event.y);
 +
 
 +
            FSS.Vector3.subtract(attractor, center);
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
        function onWindowResize(event) {
 +
 
 +
            resize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
 +
 
 +
            render();
 +
 
 +
        }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
        // Let there be light!
 +
 
 +
        initialise();
 +
 
 +
 
 +
 
 +
    })();
 +
 
  
−
<body>
 
  
−
<h1>Project introduction：</h1>
+
</script>
−
<p>  Tetracycline is a kind of antibiotic substance separated from the culture solution of Streptomyces aureofa-ciens, which belong to the common broad-spectrum antibiotic and have a great effect on many types of microorganism, including gram-negative bacteria, gram-positive bacteria, rickettsia, filterable virus, spirochaeta and protozoa.</p>
+
−
<p>  Recently, serious environment problems caused by Pharmaceuticals and Personal Care Products (PPCPs) massive abusing have attracted extensive attention in the world. Tetracycline antibiotics are the most frequently detected contamination in the PPCPs materials. As a kind of broad-spectrum antibiotic, all of the tetracycline antibiotic structures contain a naphthacene basic skeleton, including tetracycline, oxytetracycline, aureomycin and some other semi-synthetic derivatives. Tetracycline antibiotics are widely used worldwide because of their low price, especially in China, most of the comsumption would appear in the livestock industry, what is more, the number of the consumption and sale in this class of antibiotics would in the lead. The improper use of tetracycline would cause endogenous permanently discolored teeth, which usually called tetracycline stained teeth. Tetracycline antibiotics are often difficult to completely absorbed by the intestines of animals, and then almost 30% to 90% of those would be excreted as the parent compound form into the environment.</p>
+
  
−
<p>  It is our key target to detect and degradate the tetracycline antibiotics in the nuatural environmet, including hydrographic basin, farm water or in soil. For that to happen, we have constructed two main working plasmid, detecting device and degradation device, which can achieve that sensitive detecting and then degradating the tetracycline immediately. In our project, we plan to use double ezymes system to degradate the tetracycline together, those are liginin peroxidases and manganese perioxidases. Finally, we want to develop a special tiny box to prevent our bacterial escaping from our working place and then improve the detecting and dagradating efficiency.</p>
 
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{TUST China/foot}}

Latest revision as of 01:50, 18 October 2018

nav

main

foot