Team:Waterloo

From 2013.igem.org

(Difference between revisions)
(Redesigned with animations. Still a work in progress. - Alex K)
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 *** -->
 
<html>
<html>
Line 9: Line 7:
             position: absolute;
             position: absolute;
             height: 800px;
             height: 800px;
-
             width: 12000px;
+
             width: 18000px;
         }
         }
         #layer0 {
         #layer0 {
Line 37: Line 35:
             /*background-color: white;*/
             /*background-color: white;*/
             height: 800px;
             height: 800px;
-
             width: 775px;
+
             width: 1905px;
-
             display: inline-block;
+
             /*display: inline-block;*/
-
             padding: 0 100px 0 100px;
+
            float: left;
 +
             padding: 0;
         }
         }
         .pageBar {
         .pageBar {
-
            background-color: white;
+
             width: 350px;
-
             width: 250px;
+
             height: 730px;
             height: 730px;
 +
            margin-left: 350px;
             padding: 60px 30px 10px 30px;
             padding: 60px 30px 10px 30px;
-
        }
+
            color: white;
-
        #p0 .pageBar {
+
 
 +
            background: rgb(249,164,30); /* Old browsers */
 +
            background: -moz-linear-gradient(-45deg,  rgba(249,164,30,1) 0%, rgba(247,184,89,1) 100%); /* FF3.6+ */
 +
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,164,30,1)), color-stop(100%,rgba(247,184,89,1))); /* Chrome,Safari4+ */
 +
            background: -webkit-linear-gradient(-45deg,  rgba(249,164,30,1) 0%,rgba(247,184,89,1) 100%); /* Chrome10+,Safari5.1+ */
 +
            background: -o-linear-gradient(-45deg,  rgba(249,164,30,1) 0%,rgba(247,184,89,1) 100%); /* Opera 11.10+ */
 +
            background: -ms-linear-gradient(-45deg,  rgba(249,164,30,1) 0%,rgba(247,184,89,1) 100%); /* IE10+ */
 +
            background: linear-gradient(135deg,  rgba(249,164,30,1) 0%,rgba(247,184,89,1) 100%); /* W3C */
 +
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a41e', endColorstr='#f7b859',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-
            background: #7abcff; /* Old browsers */
+
        }
-
            background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
+
        .pageLinks {
-
             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
+
             margin: 40px 0 10px 0;
-
            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 {
         .pageBar h1 {
Line 62: Line 64:
             margin-right: auto;
             margin-right: auto;
             border-bottom: 0;
             border-bottom: 0;
 +
            color: white;
 +
            font-size: 30px;
 +
            font-weight: bold;
 +
            font-family: Verdana, sans-serif;
 +
        }
 +
        .pageBar a {
 +
            font-size: 24px;
 +
            font-family: Verdana, sans-serif;
 +
            color: white;
 +
            display: block;
 +
            margin: 10px 0 10px 0;
 +
        }
 +
        .pageBar p {
 +
            font-size: 14px;
         }
         }
         .placeHolder {
         .placeHolder {
Line 73: Line 89:
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
 +
        }
 +
 +
        #p0 .pageBar {
 +
        }
 +
        #p1 .pageBar {
 +
        }
 +
        #p2 .pageBar {
 +
            margin-left: 800px;
 +
        }
 +
        #p3 .pageBar {
 +
            margin-left: 1200px;
 +
        }
 +
        #p4 .pageBar {
 +
            margin-left: 100px;
 +
        }
 +
        #p5 .pageBar {
 +
            margin-left: 1000px;
         }
         }
     </style>
     </style>
Line 80: Line 113:
           '#/Home': 0,
           '#/Home': 0,
           '#/Team': 1,
           '#/Team': 1,
-
           '#/Profile': 2,
+
           '#/Project': 2,
-
           '#/Project': 3,
+
           '#/Parts': 3,
-
           '#/Parts': 4,
+
           '#/Modeling': 4,
-
           '#/Modeling': 5,
+
           '#/Notebook': 5,
-
           '#/Notebook': 6,
+
           '#/Safety': 6,
-
           '#/Safety': 7,
+
           '#/Attributions': 7
-
          '#/Attributions': 8
+
         };
         };
         var layer_factors = [0, 0.8, 1];
         var layer_factors = [0, 0.8, 1];
 +
        var LAYER_OFFSET = -465;
         var page_idx = 0;
         var page_idx = 0;
-
         var PAGE_WIDTH = 970;
+
         var PAGE_WIDTH = 1905;
-
         var NUM_PAGES = 9;
+
         var NUM_PAGES = 8;
         var NUM_LAYERS = 3;
         var NUM_LAYERS = 3;
Line 100: Line 133:
             var new_left = - idx * PAGE_WIDTH;
             var new_left = - idx * PAGE_WIDTH;
             for (var layer = 0; layer < NUM_LAYERS; layer++) {
             for (var layer = 0; layer < NUM_LAYERS; layer++) {
-
                 $('#layer' + layer).animate({left: new_left * layer_factors[layer]}, 500, 'easeOutCubic');
+
                var new_left_layer = new_left * layer_factors[layer] + LAYER_OFFSET;
 +
                 $('#layer' + layer).animate({left: new_left_layer}, 500, 'easeOutCubic');
             }
             }
         }
         }
Line 119: Line 153:
         $(document).ready(function() {
         $(document).ready(function() {
             checkHash();
             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));
 
-
            }
 
-
            */
 
         });
         });
Line 143: Line 166:
       <td align="center"><a href="#/Home">Home</a></td>
       <td align="center"><a href="#/Home">Home</a></td>
       <td align="center"><a href="#/Team">Team</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="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="#/Project">Project</a></td>
Line 162: Line 184:
             <div class="pageBar">
             <div class="pageBar">
                 <h1>Home</h1>
                 <h1>Home</h1>
-
                 <a href="#/Team">Go to Team</a>
+
                 <p>
 +
                    You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
 +
                </p>
 +
                <img title="Team picture" src="http://placekitten.com/250/160" />
 +
                <p>
 +
                    Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)
 +
                </p>
 +
                <img title="Another picture" src="http://placekitten.com/100/100" />
 +
                <div class="pageLinks">
 +
                    <a href="#/Team">&gt; Team</a>
 +
                    <a href="#/Project">&gt; Project</a>
 +
                    <a href="#/Parts">&gt; Parts</a>
 +
                    <a href="https://igem.org/Team.cgi?year=2013&team_name=Waterloo">&gt; Profile</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 169: Line 204:
             <div class="pageBar">
             <div class="pageBar">
                 <h1>Team</h1>
                 <h1>Team</h1>
-
                 <a href="#/Home">Go to Home</a>
+
                 <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Project">&gt; Project</a>
 +
                    <a href="#/Parts">&gt; Parts</a>
 +
                    <a href="#/Modeling">&gt; Modeling</a>
 +
                    <a href="https://igem.org/Team.cgi?year=2013&team_name=Waterloo">&gt; Profile</a>
 +
                    <a href="#/Attributions">&gt; Attributions</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 175: Line 219:
         <span id="p2" class="page">
         <span id="p2" class="page">
             <div class="pageBar">
             <div class="pageBar">
-
                 <h1>Official Team Profile</h1>
+
                 <h1>Project</h1>
-
                 <!-- <iframe id="otp"src="https://igem.org/Team.cgi?year=2013&team_name=Waterloo"/> -->
+
                 <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Parts">&gt; Parts</a>
 +
                    <a href="#/Modeling">&gt; Modeling</a>
 +
                    <a href="#/Notebook">&gt; Notebook</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 182: Line 233:
         <span id="p3" class="page">
         <span id="p3" class="page">
             <div class="pageBar">
             <div class="pageBar">
-
                 <h1>Project</h1>
+
                 <h1>Parts</h1>
 +
                <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Modeling">&gt; Modeling</a>
 +
                    <a href="#/Notebook">&gt; Notebook</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 188: Line 246:
         <span id="p4" class="page">
         <span id="p4" class="page">
             <div class="pageBar">
             <div class="pageBar">
-
                 <h1>Parts</h1>
+
                 <h1>Modeling</h1>
 +
                <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Notebook">&gt; Notebook</a>
 +
                    <a href="#/Safety">&gt; Safety</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 194: Line 259:
         <span id="p5" class="page">
         <span id="p5" class="page">
             <div class="pageBar">
             <div class="pageBar">
-
                 <h1>Modeling</h1>
+
                 <h1>Notebook</h1>
 +
                <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Safety">&gt; Safety</a>
 +
                    <a href="#/Attributions">&gt; Attributions</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 200: Line 272:
         <span id="p6" class="page">
         <span id="p6" class="page">
             <div class="pageBar">
             <div class="pageBar">
-
                 <h1>Notebook</h1>
+
                 <h1>Safety</h1>
 +
                <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Attributions">&gt; Attributions</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
         <span id="p7" class="page">
         <span id="p7" class="page">
-
            <div class="pageBar">
 
-
                <h1>Safety</h1>
 
-
            </div>
 
-
        </span>
 
-
 
-
        <span id="p8" class="page">
 
             <div class="pageBar">
             <div class="pageBar">
                 <h1>Attributions</h1>
                 <h1>Attributions</h1>
 +
                <p>
 +
                    This page is still in progress
 +
                </p>
 +
                <div class="pageLinks">
 +
                    <a href="#/Home">&gt; Home</a>
 +
                </div>
             </div>
             </div>
         </span>
         </span>
Line 218: Line 296:
     <div id="layer1" class="layer">
     <div id="layer1" class="layer">
-
         <img src="http://placekitten.com/300/800" style="left: 600px;" />
+
         <img src="http://placekitten.com/1000/800" style="left: 1000px;" />
 +
        <img src="http://placekitten.com/600/800" style="left: 2500px;" />
 +
        <img src="http://placekitten.com/600/800" style="left: 8000px;" />
 +
    </div>
 +
 
 +
    <div id="layer0" class="layer">
     </div>
     </div>
Line 229: Line 312:
</html>
</html>
-
 
-
<!-- *** End of the alert box *** -->
 
-
 
-
 
-
<!--
 
-
 
-
{|align="justify"
 
-
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
 
-
|[[Image:Waterloo_logo.png|200px|right|frame]]
 
-
|-
 
-
|
 
-
''Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)''
 
-
|[[Image:Waterloo_team.png|right|frame|Your team picture]]
 
-
|-
 
-
|
 
-
|align="center"|[[Team:Waterloo | Team Waterloo]]
 
-
|}
 
-
 
-
-->
 
-
 
-
<!--- The Mission, Experiments --->
 
-
 
-
<!--
 
-
{| 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/Team|Team]]
 
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Waterloo Official Team Profile]
 
-
!align="center"|[[Team:Waterloo/Project|Project]]
 
-
!align="center"|[[Team:Waterloo/Parts|Parts Submitted to the Registry]]
 
-
!align="center"|[[Team:Waterloo/Modeling|Modeling]]
 
-
!align="center"|[[Team:Waterloo/Notebook|Notebook]]
 
-
!align="center"|[[Team:Waterloo/Safety|Safety]]
 
-
!align="center"|[[Team:Waterloo/Attributions|Attributions]]
 
-
 
-
|}
 
-
-->
 

Revision as of 00:11, 23 June 2013

Home

You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.

Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)

> Team > Project > Parts > Profile

Team

This page is still in progress

> Project > Parts > Modeling > Profile > Attributions

Project

This page is still in progress

> Parts > Modeling > Notebook

Parts

This page is still in progress

> Modeling > Notebook

Modeling

This page is still in progress

> Notebook > Safety

Notebook

This page is still in progress

> Safety > Attributions

Safety

This page is still in progress

> Attributions

Attributions

This page is still in progress

> Home
 

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