Difference between revisions of "Team:SKLBC-DGSYZX"

 
(20 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<title>Home</title>
 
<title>Home</title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
        <meta charset="utf-8">
 +
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
        <title>Home</title>
 +
        <link rel="shortcut icon" href="http://snapsvg.io/assets/favicon.ico?v=1">
 +
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 +
        <script type="text/javascript" async="" src="./Snap.svg - Home_files/ga.js"></script><script src="http://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script>
 +
        <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/master.css">
 +
        <script src="./Snap.svg - Home_files/snap.svg-min.js"></script>
 +
        <script type="text/javascript">
 +
    var _gaq = _gaq || [];
 +
    _gaq.push(['_setAccount', 'UA-44948757-1']);
 +
    _gaq.push(['_trackPageview']);
 +
 +
    (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
    })();
 +
   
 +
    function trackOutboundLink(link, category, action) {
 +
        try {
 +
        _gaq.push(['_trackEvent', category , action]);
 +
        } catch(err){}
 +
       
 +
        setTimeout(function() {
 +
        document.location.href = link.href;
 +
        }, 100);
 +
    }
 +
</script>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<meta name="keywords" content="Technical Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
 
−
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
−
<a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/index.html"></a></p><center><div id="kepala"><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/index.html"><img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/title.png" style="height:121px;width:100%;"></a></div></center>
+
<a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/index.html"></a></p>
 
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/bootstrap.css" rel='stylesheet' type='text/css' />
 
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/bootstrap.css" rel='stylesheet' type='text/css' />
Line 15: Line 43:
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 
<!-- Custom Theme files -->
 
<!-- Custom Theme files -->
−
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/css/style.css" rel='stylesheet' type='text/css' />
+
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/style.css" rel='stylesheet' type='text/css' />
 
<!-- Custom Theme files -->
 
<!-- Custom Theme files -->
 
<!--webfont-->
 
<!--webfont-->
 
<link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
−
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/js/jquery-1.11.1.min.js"></script>
+
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery-1.11.1.min.js"></script>
−
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/js/jquery.min.js"></script>
+
<script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.min.js"></script>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
     $(document).ready(function(){
 
     $(document).ready(function(){
Line 44: Line 72:
 
     </script>
 
     </script>
 
<!------ Light Box ------>
 
<!------ Light Box ------>
−
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/css/swipebox.css">
+
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/swipebox.css">
−
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/js/jquery.swipebox.min.js"></script>  
+
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.swipebox.min.js"></script>  
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
jQuery(function($) {
 
jQuery(function($) {
Line 53: Line 81:
 
<!------ Eng Light Box ------>    
 
<!------ Eng Light Box ------>    
 
<!-- Prettify -->
 
<!-- Prettify -->
−
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/css/owl.carousel.css" rel="stylesheet">
+
<link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/owl.carousel.css" rel="stylesheet">
−
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/js/owl.carousel.js"></script>
+
<script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/owl.carousel.js"></script>
 
<script>
 
<script>
 
$(document).ready(function() {
 
$(document).ready(function() {
Line 68: Line 96:
 
<!----- //End-Share-instantly-slider---->
 
<!----- //End-Share-instantly-slider---->
 
<!----font-Awesome----->
 
<!----font-Awesome----->
−
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/fonts/css/font-awesome.min.css">
+
<link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/fonts/css/font-awesome.min.css">
 
<!----font-Awesome----->
 
<!----font-Awesome----->
 
</head>
 
</head>
−
<body class="body">
 
−
<div class="menu">
 
−
  <ul class="first">
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/index.html">Home</a></li>
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/project.html">Project</a></li>
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/user guide.html">user guide</a></li>
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/human practices.html">human practices</a></li>
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/medal.html">medal</a></li>
 
−
    <li><a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/team.html">team</a></li>
 
−
  </ul>
 
−
</div>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<div class="text-center">
 
−
<div class="container">
 
−
    <div class="grid_3">
 
−
    <img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/syn.jpg" style="width:100%;max-width:1200px" alt=""/>
 
−
    <br>
 
−
    <br>
 
−
</div>
 
−
<div class="clearfix"> </div>
 
−
  </div>
 
−
</div>
 
−
</div>
 
−
<br>
 
  
−
<div class="footer">
+
<body style="background-color:white">
−
<div class="container">
+
<header id="header" style="height: inherit;">
−
         <div class="copy">
+
    <div class="wrap">
−
            <p>Copyright &copy; 2015 SKLBC-GDSYZX. All rights reserved.</p>
+
        <a href="./Snap.svg - Home_files/Snap.svg - Home.html" class="logo">
−
    </div>
+
            <img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/synn.jpg" alt="">
−
</div>
+
            <span class="header">Synsketch</span>
−
</div>
+
        </a>
−
<div id="goToTop"><a href="#">top</a></div>
+
        <nav>
−
</body>
+
           
−
</html>
+
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX" class=" selected">Home</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" class="">Project</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" class="">Notebook</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" class="">Attributions</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" class="">Collaborations</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" class="">Human Pratices</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" class="">Parts</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Safety" class="">Safety</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" class="">Software</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" class="">Entrepreneurship</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Team" class="">Team</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" class="">Medals and Prizes</a>
 +
           
 +
            <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Design" class="">Design</a>
 +
           
 +
        </nav>
 +
    </div>
 +
</header>
 +
<br><br>
 +
        <article>
 +
<section class="" style="background: #87cefa">
 +
    <div class="wrap saw reverse a">
 +
         <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" style="font-size: 100px;color: white;">Project</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #ffb6c1">
 +
    <div class="wrap saw reverse b">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" style="font-size: 100px;color: white;">Notebook</a>
 +
</section>
 +
 
 +
<section class="" style="background: #696969">
 +
    <div class="wrap saw reverse c">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" style="font-size: 100px;color: white;">Attributions</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #00fa9a">
 +
    <div class="wrap saw reverse d">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" style="font-size: 100px;color: white;">Collaborations</a>
 +
</section><section class="" style="background: #bc8f8f">
 +
    <div class="wrap saw reverse e">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" style="font-size: 100px;color: white;">Human Pratices</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #9370db">
 +
    <div class="wrap saw reverse f">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" style="font-size: 100px;color: white;">Parts</a>
 +
</section>
 +
 
 +
<section class="" style="background: #ffa071">
 +
    <div class="wrap saw reverse i">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" style="font-size: 100px;color: white;">Software</a>
 +
       
 +
    </div>
 +
</section>
 +
 
 +
<section class="secondary" style="background: #ffb6c1">
 +
    <div class="wrap saw reverse j">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" style="font-size: 100px;color: white;">Entrepreneurship</a>
 +
</section>
 +
 
 +
<section class="" style="background: #dda0dd">
 +
    <div class="wrap saw reverse k">
 +
        <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" style="font-size: 100px;color: white;">Medals and Prizes</h>
 +
    </div>
 +
</section>
 +
 
 +
 
 +
 
 +
<script>
 +
    var logo = Snap.select("#snap-logo").attr({opacity:0});
 +
    window.onload = function () {
 +
 
 +
        var parts = [
 +
                ['top', 0, 20],
 +
                ['left', 20, 0],
 +
                ['bottom', 0, -20],
 +
                ['right', -20, 0]
 +
            ],
 +
            components = [],
 +
            i = 0,
 +
            k = 0,
 +
            isLogoAnimated = false,
 +
            isCrocAnimated = false,
 +
            isCroc2Animated = false;
 +
 
 +
        for (i = 0; i < parts.length; i++) {
 +
            var el = parts[i]
 +
                elid = el[0];
 +
                element = logo.select("#" + elid);
 +
            element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
 +
            components.push(element);
 +
        }
 +
 
 +
        function animateEach() {
 +
            if (!components[k]) return;
 +
            components[k].animate({
 +
                transform: "t" + (0) + "," + (0),
 +
                opacity: 1
 +
            }, 250, mina.easeout);
 +
            setTimeout(animateEach, 150);
 +
            k++;
 +
        };
 +
 
 +
 
 +
        // crocodile
 +
 
 +
        var croc = Snap.select("#crocodile"),
 +
            head = croc.select("#upper-head"),
 +
            jaw = croc.select("#upper-jaw"),
 +
            symbol = croc.select("#symbol"),
 +
            clearId = [],
 +
            scrollTop = 0;
 +
           
 +
        var pivots = [
 +
            [44, 147],
 +
            [92, 126]
 +
        ];
 +
 
 +
        function clearTimer() {
 +
            for (var i = 0; i < clearId.length; i++) {
 +
                clearTimeout(clearId[i]);
 +
            }
 +
            clearId = [];
 +
        }
 +
 
 +
        function close() {
 +
            clearTimer();
 +
 
 +
            head.animate({
 +
                transform: "r" + [8, pivots[0][0], pivots[0][1]]
 +
            }, 500, mina.backin);
 +
           
 +
            jaw.animate({
 +
                transform: "r" + [37, pivots[1][0], pivots[1][1]]
 +
            }, 500, mina.backin);
 +
 
 +
            clearId.push( setTimeout(function() {
 +
                symbol.animate({
 +
                    transform: "t" + (-70) + "," + (40) + "r" + (40)
 +
                }, 100);
 +
            }, 400));
 +
        }
 +
 
 +
        function open() {
 +
            clearTimer();
 +
 
 +
            head.animate({
 +
                transform: "r" + [0, pivots[0][0], pivots[0][1]]
 +
            }, 700, mina.elastic);
 +
           
 +
            jaw.animate({
 +
                transform: "r" + [0, pivots[1][0], pivots[1][1]]
 +
            }, 700, mina.elastic);
 +
 
 +
            symbol.animate({
 +
                transform: "t" + (0) + "," + (0) + "r" + (0)
 +
            }, 500, mina.elastic);
 +
        }
 +
 
 +
 
 +
        croc.hover(open,
 +
            function() {
 +
                clearId.push(setTimeout(close, 200));
 +
        });
 +
 
 +
 
 +
        // crocodile-2
 +
 
 +
        var diagramgroup = Snap.select("#crocodile-2"),
 +
            elements = {},
 +
            elementkeys = ['map', 'pie', 'eye'],
 +
            diagramtimer = [],
 +
            animating = {},
 +
            cleartimers = {},
 +
            i = 0, j = 0;
 +
 
 +
        function show(key) {
 +
            if (animating[key]) return;
 +
            clearTimeout(cleartimers[key]);
 +
            animating[key] = true;
 +
            var element = elements[key],
 +
            x = element[0].getBBox().x,
 +
            offset = x/2 + 25;
 +
            element[0].attr({
 +
                transform: "t"+offset+",80s0.5,0.5,0,0"
 +
            });
 +
            setTimeout(function() {
 +
                    element[0].animate({opacity:1,transform:"t0,0s1,1,0,0"}, 500, mina.elastic);
 +
            }, 50);
 +
            element[1].animate({opacity:0.25}, 400);
 +
            setTimeout(function(){animating[key] = false}, 550);
 +
        }
 +
 
 +
        function showAll() {
 +
            j = 0;
 +
            function cycle() {
 +
                show(elementkeys[j]);
 +
                j++;
 +
                if (j < elementkeys.length) setTimeout(cycle, 200);
 +
            }
 +
            cycle();
 +
        }
 +
 
 +
        function hoverIn() {
 +
            show( this.node.id.replace('hit-', '') );
 +
        }
 +
 
 +
 
 +
        for (i = 0; i < elementkeys.length; i++) {
 +
            var key = elementkeys[i],
 +
            diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}),
 +
            path = diagramgroup.select("#path-" + key).attr({opacity:0}),
 +
            hitarea = diagramgroup.select("#hit-" + key);
 +
            hitarea.hover(hoverIn);
 +
            elements[key] = [diagram, path];
 +
        }
 +
 
 +
 
 +
        // scroll events
 +
 
 +
        function checkScroll(e) {
 +
            // alert(window.scrollY);
 +
            if (isLogoAnimated && isCrocAnimated && isCroc2Animated) return;
 +
            var scrollY = window.scrollY || window.pageYOffset;
 +
            if (scrollY > 250 && scrollY < 600 && !isCrocAnimated) {
 +
                clearId.push( setTimeout(close, 200) );
 +
                isCrocAnimated = true;
 +
            }
 +
 
 +
            if (scrollY < 200 && !isLogoAnimated) {         
 +
                logo.attr({opacity:1});
 +
                setTimeout(animateEach, 100);
 +
                isLogoAnimated = true;
 +
            }
 +
 
 +
            if (scrollY > 800 && scrollY < 1100 && !isCroc2Animated) {
 +
                setTimeout(showAll, 100);
 +
                isCroc2Animated = true;
 +
            }
 +
        };
 +
 
 +
        window.onscroll = checkScroll;
 +
        setTimeout(checkScroll, 50);
 +
 
 +
    };
 +
    </script>
 +
 
 +
        </article>
 +
 
 +
   
 +
 
 +
</body></html>

Latest revision as of 08:28, 18 September 2015

Home Home



Project
Notebook
Attributions
Collaborations
Human Pratices
Parts
Software
Entrepreneurship
Medals and Prizes