Team:GeorgiaTech/Safety

From 2013.igem.org

(Difference between revisions)
m
Line 1: Line 1:
-
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
+
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
     <head>
     <head>
-
<style type="text/css">
+
        <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
 +
        <script src ="https://2013.igem.org/Team:GeorgiaTech/mainPage?action=raw" type="text/javascript"></script>
 +
        <script src ="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type ="text/javascript"></script>
 +
        <script src="https://2013.igem.org/Team:GeorgiaTech/jquery.sidr.min?action=raw" type ="text/javascript"></script>
 +
        <link rel="stylesheet" href="https://2013.igem.org/Team:GeorgiaTech/jquery.sidr.light?action=raw&ctype=text/css"></link>
 +
        <!-link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css"></link>
 +
        <!-link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css"></link>
 +
    <style type="text/css">
 +
       
table#toc {
table#toc {
-
display:none;
+
                    display:none;
}
}
-
/*
+
 
-
#footer-box {
+
/*#footer-box {
display:none;
display:none;
-
}
+
}*/
-
*/ </style>
+
</style>
-
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+
-
        <script type="text/javascript" src ="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type ="text/javascript"></script>
+
-
        <script src="jquery.sidr.min.js" type ="text/javascript"></script>
+
-
        <script>
+
-
$(document).ready(function() {
+
-
 
+
-
    $("#logo").load(reset);
+
-
 
+
-
    //Binds the functions to the masks
+
-
    $("#logoMask").hover(
+
-
            function() {
+
-
                $("#gtLogo").show();
+
-
                $("#menuText").show();
+
-
            },
+
-
            function() {
+
-
                $("#gtLogo, #menuText").fadeOut();
+
-
            }
+
-
    );
+
-
        $('#logoMask').sidr();
+
-
});
+
-
//Resets the positions of all the images
+
-
function reset() {
+
-
    //Calls when the logo is fully loaded.
+
-
    var width = $(window).width();
+
-
    $("p").addClass("text");
+
-
    var pos = $("#logo").offset();
+
-
    $("#gtLogo").css({
+
-
        width: "39.7%",
+
-
        position: "absolute",
+
-
        top: (pos.top + 100) + "px",
+
-
        left: pos.left + "px"
+
-
    });
+
-
    $("#bigCell, #bigCellRest").css({
+
-
        width: "39.7%",
+
-
        position: "fixed",
+
-
        top: (pos.top + 100) + "px",
+
-
        left: pos.left + "px"
+
-
    });
+
-
    //Sets the properties of the mask that is over GT logo.
+
-
    $("#logoMask").css({
+
-
        'cursor': "pointer",
+
-
        position: "absolute",
+
-
        top: (pos.top + 100 + $("#logo").outerHeight() * 0.1) + "px",
+
-
        left: (pos.left + $("#logo").outerWidth() * 0.2) + "px"
+
-
    });
+
-
    $("#logoMask").height($("#logo").outerHeight() * 0.7 + "px");
+
-
    $("#logoMask").width($("#logo").outerWidth() * 0.8 + "px");
+
-
    $("#logoMask").children($("a")).css({
+
-
        'position': "absolute",
+
-
        'padding-left': $("#logoMask").outerWidth() + "px",
+
-
        'padding-right': $("#logoMask").outerWidth() + +"px",
+
-
        'padding-top': $("#logoMask").outerHeight() / 2 + "px",
+
-
        'padding-bottom': $("#logoMask").outerHeight() / 2 + "px"
+
-
    });
+
-
 
+
-
    //Sets the properties of the big cell mask
+
-
    $("#bigCellMask").css({
+
-
        'cursor': "pointer",
+
-
        'position': "absolute",
+
-
        'top': (pos.top + 100) + "px",
+
-
        'left': (pos.left) + "px"
+
-
    });
+
-
 
+
-
    $("#bigCellMask").show();
+
-
 
+
-
    $("#bigCellMask").height($("#logo").outerHeight() * 0.3 + "px");
+
-
    $("#bigCellMask").width($("#logo").outerWidth() * 0.5 + "px");
+
-
    $("#bigCellMask").children($("a")).css({
+
-
        'position': "absolute",
+
-
        'padding-left': $("#bigCellMask").outerWidth() + "px",
+
-
        'padding-right': $("#bigCellMask").outerWidth() + +"px",
+
-
        'padding-top': $("#bigCellMask").outerHeight() / 2 + "px",
+
-
        'padding-bottom': $("#bigCellMask").outerHeight() / 2 + "px"
+
-
    });
+
-
 
+
-
    $("#bigCellText").css({
+
-
        'position': "absolute",
+
-
        'top': (pos.top + 100) + "px",
+
-
        'left': (pos.left - 180) + "px"
+
-
    });
+
-
    $("#menuText").css({
+
-
        'position': "absolute",
+
-
        'top': (pos.top + 100) + "px",
+
-
        'left': (pos.left + width*0.35) + "px" 
+
-
    });
+
-
    $("#bigCellMask").hover(
+
-
            function() {
+
-
        pos = $("#logo").offset();
+
-
            $("#bigCell, #bigCellRest").css({
+
-
        width: "39.7%",
+
-
        position: "fixed",
+
-
        top: (pos.top + 100) + "px",
+
-
        left: pos.left + "px"
+
-
    });
+
-
                $("#logo, #logoMask").hide();
+
-
                $("#bigCell, #bigCellRest").show();
+
-
                $("#bigCell").transition({rotate: "+=10"}, 1000);
+
-
                $("#bigCellText").fadeIn();
+
-
            },
+
-
            function() {
+
-
                $("#bigCell").css({rotate: "-=10"});
+
-
                $("#bigCell, #bigCellRest").hide();
+
-
                $("#logo, #logoMask").show();
+
-
                $("#bigCellText").fadeOut();
+
-
            }
+
-
    );
+
-
 
+
-
    $("#bigCellMask").click(function() {
+
-
        if (!$("#objective").is(":visible")) {
+
-
            $("#sidr").show();
+
-
            $("#bigCellMask").unbind("mouseleave");
+
-
            $("#bigCellMask").unbind("mouseenter");
+
-
            $("#bigCell").transition({scale:0.7, rotate: "-=10", x: -width * 0.4, y: -100}, 860, 'ease');
+
-
            $("#bigCellMask, #bigCellRest").transition({scale:0.7, x: -width * 0.4, y:-100}, 1000, 'ease');
+
-
 
+
-
            $("#bigCellText").transition({x: width * 0.4, y: '-100'}, 1000, 'ease');
+
-
            $("#objective").css({
+
-
                position: "absolute",
+
-
                top: "150 px",
+
-
                left: (width * 0.5) + "px",
+
-
                width: width*0.4 + "px"
+
-
            });
+
-
            $("#objective").show();
+
-
        } else {
+
-
            $("#objective").hide();
+
-
            $("#bigCell, #bigCellRest").fadeOut();
+
-
            $("logo").delay("5000").fadeIn();
+
-
            location.reload();
+
-
        }
+
-
    });
+
-
}
+
-
 
+
-
$(window).bind('resize', function() {
+
-
location.reload();
+
-
}); </script>
+
-
        <link rel="stylesheet" href="stylesheets/jquery.sidr.light.css"></link>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css"/>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css">
+
         <style type="text/css">
         <style type="text/css">
             .logo{
             .logo{
Line 159: Line 27:
                 padding-top:100px;
                 padding-top:100px;
                 width:40%;
                 width:40%;
 +
            }
 +
            .smallLogo{
 +
                display: block;
 +
                margin-left:auto;
 +
                margin-right:auto;
 +
                width:60%;
 +
                padding-top:20px;
             }
             }
             .text{
             .text{
Line 168: Line 43:
             .textLarge{
             .textLarge{
-
                display:block;
 
-
                font-family:Helvetica, Arial, sans-serif;
 
                 font-size: xx-large;
                 font-size: xx-large;
                 font-weight: bold;
                 font-weight: bold;
             }
             }
 +
            .textMenu{
 +
                display:block;
 +
                font-family:Helvetica, Arial, sans-serif;
 +
                font-size: 23px;
 +
            }
 +
            #box
 +
            {
 +
                margin-left:25%;
 +
                top:10%;
 +
                background: #FFF;
 +
                border: 5px;
 +
                text-align: center;
 +
                position: absolute;
 +
                display: none;
 +
            }
 +
 +
            #screen
 +
            {
 +
                position: absolute;
 +
                left: 0;
 +
                top: 0;
 +
                background: #696969;
 +
            }
         </style>
         </style>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Line 180: Line 76:
     <body style="text-align: left">
     <body style="text-align: left">
-
        <script src ="Team:GeorgiaTech/mainPage.js?action=raw"></script>
 
-
 
         <img id = "logo" src = "https://static.igem.org/mediawiki/2013/f/f0/GeorgiaTech_team.png" class = "logo" alt ="GT iGEM logo"></img>
         <img id = "logo" src = "https://static.igem.org/mediawiki/2013/f/f0/GeorgiaTech_team.png" class = "logo" alt ="GT iGEM logo"></img>
         <img id = "gtLogo" src = "https://static.igem.org/mediawiki/2013/e/e5/LogoGT%280.01degree%29.png" style = "display:none" alt ="GT logo"></img>
         <img id = "gtLogo" src = "https://static.igem.org/mediawiki/2013/e/e5/LogoGT%280.01degree%29.png" style = "display:none" alt ="GT logo"></img>
Line 189: Line 83:
         <div id = "logoMask" style = " background: transparent"><a href ="#sidr"></a></div>
         <div id = "logoMask" style = " background: transparent"><a href ="#sidr"></a></div>
         <div id = "bigCellMask" style =" background: transparent"></div>
         <div id = "bigCellMask" style =" background: transparent"></div>
-
         <div id ="bigCellText" style ="background: transparent; display: none"><p class ="textLarge">Objective</p></div>
+
         <div id ="bigCellText" style ="background: transparent; display: none"><p class ="textLarge">Our Video</p></div>
-
         <div id ="menuText" style ="background: transparent; display: none"><p class ="textLarge">Menu</p></div>
+
         <div id ="menu" style ="display:none; position:absolute" ><p class =" textLarge">Menu</p></div>
-
        <a href ="http://youtu.be/fVT7BjmMHDQ">wqweqwe</a>
+
         <div style ="display:block">
         <div style ="display:block">
             <p id ="objective" style="display:none">
             <p id ="objective" style="display:none">
Line 217: Line 110:
         <div id="sidr">
         <div id="sidr">
             <!-- Your content -->
             <!-- Your content -->
-
             <ul>
+
             <ul class =" textMenu" >
-
                 <li class="active"><a href="https://2013.igem.org/Team:GeorgiaTech" style ="font-size: x-large">Home</a></li>
+
                 <li class="active">
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Team">Team</a></li>
+
                    <a href="https://2013.igem.org/Team:GeorgiaTech" style ="font-size:80px; padding-top:8px;padding-bottom:8px">
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Project">Project</a></li>
+
                        <img src = "https://static.igem.org/mediawiki/2013/f/f0/GeorgiaTech_team.png" class = "smallLogo" alt ="GT iGEM logo"></img>Home
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Parts">Parts</a></li>
+
                    </a>
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Safety">Safety</a></li>
+
                </li>
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Attributions">Attributions</a></li>
+
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Team" style ="padding-top:8px;padding-bottom:8px">Team</a></li>
-
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Parts">High School Project</a></li>
+
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Project" style ="padding-top:8px;padding-bottom:8px">Project</a></li>
 +
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Parts" style ="padding-top:8px;padding-bottom:8px">Parts</a></li>
 +
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Safety" style ="padding-top:8px;padding-bottom:8px">Safety</a></li>
 +
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Attributions" style ="padding-top:8px;padding-bottom:8px">Attributions</a></li>
 +
                 <li><a href="https://2013.igem.org/Team:GeorgiaTech/Parts" style ="padding-top:8px;padding-bottom:8px">High School Project</a></li>
 +
                <li><a id ="return" href="#" style ="padding-top:8px;padding-bottom:8px">RETURN</a></li>
 +
 
             </ul>
             </ul>
         </div>
         </div>
-
 
+
        <div id='screen' style="cursor: pointer">
 +
        </div>
 +
        <iframe id="box" width="630" height="473" src="//www.youtube.com/embed/fVT7BjmMHDQ" frameborder="0" style="display:none"></iframe>
     </body>
     </body>
</html>
</html>

Revision as of 20:37, 27 September 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Georgia Tech iGEM

Retrieved from "http://2013.igem.org/Team:GeorgiaTech/Safety"