Team:Waterloo

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
 
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
<head>
-
This is a template page. READ THESE INSTRUCTIONS.
+
    <style type="text/css">
-
</div>
+
        .layer {
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
            position: absolute;
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
            height: 800px;
-
</div>
+
            width: 12000px;
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
        }
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
+
        #layer0 {
 +
            z-index: 1;
 +
 
 +
            background: rgb(179,220,237); /* Old browsers */
 +
            background: -moz-linear-gradient(top,  rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%); /* FF3.6+ */
 +
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,220,237,1)), color-stop(50%,rgba(41,184,229,1)), color-stop(100%,rgba(188,224,238,1))); /* Chrome,Safari4+ */
 +
            background: -webkit-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Chrome10+,Safari5.1+ */
 +
            background: -o-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Opera 11.10+ */
 +
            background: -ms-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* IE10+ */
 +
            background: linear-gradient(to bottom,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* W3C */
 +
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
 +
        }
 +
        #layer1{
 +
            z-index: 10;
 +
        }
 +
        #layer1 img {
 +
            position: absolute;
 +
        }
 +
        #layer2 {
 +
            z-index: 20;
 +
        }
 +
        #pageContainer {
 +
        }
 +
        .page {
 +
            /*background-color: white;*/
 +
            height: 800px;
 +
            width: 775px;
 +
            display: inline-block;
 +
            padding: 0 100px 0 100px;
 +
        }
 +
        .pageBar {
 +
            background-color: white;
 +
            width: 250px;
 +
            height: 730px;
 +
            padding: 60px 30px 10px 30px;
 +
        }
 +
        #p0 .pageBar {
 +
 
 +
            background: #7abcff; /* Old browsers */
 +
            background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 +
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
 +
            background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
 +
            background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
 +
            background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
 +
            background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
 +
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
 +
        }
 +
        .pageBar h1 {
 +
            margin-left: auto;
 +
            margin-right: auto;
 +
            border-bottom: 0;
 +
        }
 +
        .placeHolder {
 +
            height: 800px;
 +
        }
 +
        #navBar {
 +
            /*color: #1b2c8a;*/
 +
            /*background-color: #bbbbbb;*/
 +
        }
 +
        #otp {
 +
            width: 100%;
 +
            height: 100%;
 +
        }
 +
    </style>
 +
 
 +
    <script type="text/javascript">
 +
        var pages = {
 +
          '#/Home': 0,
 +
          '#/Team': 1,
 +
          '#/Profile': 2,
 +
          '#/Project': 3,
 +
          '#/Parts': 4,
 +
          '#/Modeling': 5,
 +
          '#/Notebook': 6,
 +
          '#/Safety': 7,
 +
          '#/Attributions': 8
 +
        };
 +
        var layer_factors = [0, 0.8, 1];
 +
        var page_idx = 0;
 +
        var PAGE_WIDTH = 970;
 +
        var NUM_PAGES = 9;
 +
        var NUM_LAYERS = 3;
 +
 
 +
        jQuery.easing.easeOutCubic = function(x, t, b, c, d) {
 +
            return c*((t=t/d-1)*t*t + 1) + b;
 +
        };
 +
        function trans(idx) {
 +
            var new_left = - idx * PAGE_WIDTH;
 +
            for (var layer = 0; layer < NUM_LAYERS; layer++) {
 +
                $('#layer' + layer).animate({left: new_left * layer_factors[layer]}, 500, 'easeOutCubic');
 +
            }
 +
        }
 +
        function checkHash() {
 +
            var hash = window.location.hash;
 +
            console.log(hash);
 +
            var idx = pages[hash];
 +
            if (idx == undefined) {
 +
                window.location.hash = '#/Home';
 +
                return;
 +
            }
 +
 
 +
            trans(idx);
 +
        }
 +
        $(window).bind('hashchange', function(e) {
 +
            checkHash();
 +
        });
 +
        $(document).ready(function() {
 +
            checkHash();
 +
 
 +
            /*
 +
            for (var i = 0; i < NUM_PAGES; i++) {
 +
                var elem = $('#p' + i);
 +
                //elem.css('left', i * PAGE_WIDTH);
 +
                elem.click(function(fixed_i) {
 +
                    console.log(fixed_i);
 +
                    trans(fixed_i);
 +
                }.bind(null, i));
 +
            }
 +
            */
 +
        });
 +
 
 +
    </script>
 +
</head>
 +
 
 +
<body>
 +
 
 +
<div id="navBar">
 +
    <table cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center">
 +
    <tbody>
 +
    <tr>
 +
      <td align="center"><a href="#/Home">Home</a></td>
 +
      <td align="center"><a href="#/Team">Team</a></td>
 +
      <!-- <td align="center"><a href="#/Profile">Waterloo Official Team Profile</a></td> -->
 +
      <td align="center"><a href="https://igem.org/Team.cgi?year=2013&team_name=Waterloo">Waterloo Official Team Profile</a></td>
 +
      <td align="center"><a href="#/Project">Project</a></td>
 +
      <td align="center"><a href="#/Parts">Parts Submitted to the Registry</a></td>
 +
      <td align="center"><a href="#/Modeling">Modeling</a></td>
 +
      <td align="center"><a href="#/Notebook">Notebook</a></td>
 +
      <td align="center"><a href="#/Safety">Safety</a></td>
 +
      <td align="center"><a href="#/Attributions">Attributions</a></td>
 +
    </tr>
 +
    </tbody>
 +
    </table>
</div>
</div>
 +
 +
<div id="pageContainer">
 +
    <!-- Pages -->
 +
    <div id="layer2" class="layer">
 +
        <span id="p0" class="page">
 +
            <div class="pageBar">
 +
                <h1>Home</h1>
 +
                <a href="#/Team">Go to Team</a>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p1" class="page">
 +
            <div class="pageBar">
 +
                <h1>Team</h1>
 +
                <a href="#/Home">Go to Home</a>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p2" class="page">
 +
            <div class="pageBar">
 +
                <h1>Official Team Profile</h1>
 +
                <!-- <iframe id="otp"src="https://igem.org/Team.cgi?year=2013&team_name=Waterloo"/> -->
 +
            </div>
 +
        </span>
 +
 +
        <span id="p3" class="page">
 +
            <div class="pageBar">
 +
                <h1>Project</h1>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p4" class="page">
 +
            <div class="pageBar">
 +
                <h1>Parts</h1>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p5" class="page">
 +
            <div class="pageBar">
 +
                <h1>Modeling</h1>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p6" class="page">
 +
            <div class="pageBar">
 +
                <h1>Notebook</h1>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p7" class="page">
 +
            <div class="pageBar">
 +
                <h1>Safety</h1>
 +
            </div>
 +
        </span>
 +
 +
        <span id="p8" class="page">
 +
            <div class="pageBar">
 +
                <h1>Attributions</h1>
 +
            </div>
 +
        </span>
 +
    </div>
 +
 +
    <div id="layer1" class="layer">
 +
        <img src="http://placekitten.com/300/800" style="left: 600px;" />
 +
    </div>
 +
</div>
</div>
 +
 +
<!-- Placeholder  -->
 +
<div class="placeHolder">&nbsp;</div>
 +
 +
</body>
 +
</html>
</html>
Line 18: Line 233:
 +
<!--
{|align="justify"
{|align="justify"
Line 30: Line 246:
|align="center"|[[Team:Waterloo | Team Waterloo]]
|align="center"|[[Team:Waterloo | Team Waterloo]]
|}
|}
 +
 +
-->
<!--- The Mission, Experiments --->
<!--- The Mission, Experiments --->
 +
<!--
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
!align="center"|[[Team:Waterloo|Home]]
!align="center"|[[Team:Waterloo|Home]]
Line 45: Line 264:
|}
|}
 +
-->

Revision as of 23:07, 22 June 2013


Home

Go to Team

Team

Go to Home

Official Team Profile

Project

Parts

Modeling

Notebook

Safety

Attributions
 




Retrieved from "http://2013.igem.org/Team:Waterloo"