Team:Hong Kong HKU

From 2014.igem.org

(Difference between revisions)
Line 65: Line 65:
-
body {
+
#background {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
     background: #FFFFFF;  /*75B1EC*/
     background: #FFFFFF;  /*75B1EC*/
}
}
Line 199: Line 202:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
-
    text-align: center;
 
-
    font-size: 80px;
 
-
    font-family: "Trebuchet MS";
 
-
 
}
}
Line 239: Line 238:
</style>
</style>
<body>
<body>
-
<div id="present-window">
+
<div id="background">
-
    <div id="pages">
+
 
-
        <ul>
+
    <div id="present-window">
-
            <li class="page">
+
        <div id="pages">
-
            <style>
+
            <ul>
-
            #page-1 {
+
                <li class="page">
-
                top: 50%;
+
                <style>
-
                 height: 100%;
+
                .vertical-align-wrapper {
-
            }
+
                    position: absolute;
-
            </style>
+
                    height: 100%;
-
            <div class="page-content" id="page-1"><br><br><br><br><br><br><br><br>This page is currently under construction.</div>
+
                    width: 100%;
 +
                    left: 0;
 +
                    top: 0;
 +
                    font-size: 0;
 +
                    text-align: center;
 +
                }
 +
                .vertical-align-wrapper:before {
 +
                    content: '';
 +
                    display: inline-block;
 +
                    vertical-align: middle ;
 +
                    height: 100%;
 +
                 }
 +
                .vertical-align {
 +
                    text-align: center;
 +
                    line-height: 100%;
 +
                    display: inline-block;
 +
                    vertical-align: middle;
 +
                }
 +
                h1 {
 +
                    font-size: 5rem;
 +
                    font-family: "Trebuchet MS";
 +
                    line-height: 100%;
 +
                }
 +
                </style>
 +
                <div class="page-content">
 +
                    Testing
 +
                    <div class="vertical-align-wrapper">
 +
                        <div class="vertical-align">
 +
                            <h1>This page is currently under construction.</h1>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                </li>
 +
                <li class="page">
 +
                    Still testing...
 +
                    <div class="vertical-align-wrapper">
 +
                        <div class="vertical-align">
 +
                            <h1>Keep Calm and Revise.</h1>
 +
                        </div>
 +
                    </div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page3</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page4</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page5</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page6</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page7</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page8</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page9</div>
 +
                </li>
 +
                <li class="page">
 +
                <div class="page-content">Page10</div>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
        <div id="present-prev-page">
 +
            <span class="page-nav-icon">&lt;</span>
 +
        </div>
 +
        <div id="present-next-page">
 +
            <span class="page-nav-icon">&gt;</span>
 +
        </div>
 +
    </div>
 +
 
 +
    <div id="menu">
 +
        <div id="menu-title">
 +
            HKU iGEM 2014
 +
            <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a>
 +
        </div>
 +
        <div id="menu-icon">
 +
            ☰
 +
        </div>
 +
 
 +
        <ul class="main-menu">
 +
            <li>
 +
            <span class="title">E. CAPSI</span>
 +
            <ul class="sub-menu">
 +
                <li class="menu-button" data-page=0>M1: Phosphate Removal</li>
 +
                <li class="menu-button" data-page=1>M2: Polyphosphate Kinase</li>
 +
                <li class="menu-button" data-page=2>M3: Micro-compartment</li>
 +
                <li class="menu-button" data-page=3>Modelling</li>
 +
                <li class="menu-button" data-page=4>References</li>
 +
            </ul>
             </li>
             </li>
-
             <li class="page">
+
             <li>
-
             <div class="page-content"><br><br><br><br><br><br><br><br>Keep Calm and Revise.</div>
+
            <span class="title">HUMAN PRACTICE</span>
 +
             <ul class="sub-menu">
 +
                <li class="menu-button" data-page=5>Lab Safety</li>
 +
                <li class="menu-button" data-page=6>Public Promotion</li>
 +
                <li class="menu-button" data-page=7>Public Promotion</li>
 +
                <li class="menu-button" data-page=8>Collaborations</li>
 +
                <li class="menu-button" data-page=9>Future Applications</li>
 +
            </ul>
             </li>
             </li>
-
             <li class="page">
+
             <li>
-
             <div class="page-content">Page3</div>
+
            <span class="title">ACHIEVEMENTS</span>
 +
             <ul class="sub-menu">
 +
                <li class="menu-button" data-page=0>BioBricks</li>
 +
                <li class="menu-button" data-page=0>Results</li>
 +
                <li class="menu-button" data-page=0>Judging Criteria</li>
 +
            </ul>
             </li>
             </li>
-
             <li class="page">
+
             <li>
-
             <div class="page-content">Page4</div>
+
            <span class="title">EXTRAS</span>
 +
             <ul class="sub-menu">
 +
                <li class="menu-button" data-page=0>Protocols</li>
 +
                <li class="menu-button" data-page=0>Lab Note - Our Diary</li>
 +
                <li class="menu-button" data-page=0>Photo Gallery</li>
 +
            </ul>
             </li>
             </li>
-
             <li class="page">
+
             <li>
-
             <div class="page-content">Page5</div>
+
             <span>TEAM</span>
-
             </li>
+
             <ul class="sub-menu">
-
            <li class="page">
+
                <li class="menu-button" data-page=0>Our Profile</li>
-
            <div class="page-content">Page6</div>
+
                <li class="menu-button" data-page=0>People</li>
-
            </li>
+
                <li class="menu-button" data-page=0>Attributions</li>
-
            <li class="page">
+
                <li class="menu-button" data-page=0>Supporters</li>
-
            <div class="page-content">Page7</div>
+
             </ul>
-
            </li>
+
-
            <li class="page">
+
-
            <div class="page-content">Page8</div>
+
-
            </li>
+
-
            <li class="page">
+
-
            <div class="page-content">Page9</div>
+
-
            </li>
+
-
             <li class="page">
+
-
            <div class="page-content">Page10</div>
+
             </li>
             </li>
         </ul>
         </ul>
     </div>
     </div>
-
    <div id="present-prev-page">
 
-
        <span class="page-nav-icon">&lt;</span>
 
-
    </div>
 
-
    <div id="present-next-page">
 
-
        <span class="page-nav-icon">&gt;</span>
 
-
    </div>
 
-
</div>
 
-
<div id="menu">
+
     <div id="sponsor">
-
     <div id="menu-title">
+
-
        HKU iGEM 2014
+
-
        <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a>
+
     </div>
     </div>
-
    <div id="menu-icon">
 
-
        ☰
 
-
    </div>
 
-
 
-
    <ul class="main-menu">
 
-
        <li>
 
-
        <span class="title">E. CAPSI</span>
 
-
        <ul class="sub-menu">
 
-
            <li class="menu-button" data-page=0>M1: Phosphate Removal</li>
 
-
            <li class="menu-button" data-page=1>M2: Polyphosphate Kinase</li>
 
-
            <li class="menu-button" data-page=2>M3: Micro-compartment</li>
 
-
            <li class="menu-button" data-page=3>Modelling</li>
 
-
            <li class="menu-button" data-page=4>References</li>
 
-
        </ul>
 
-
        </li>
 
-
        <li>
 
-
        <span class="title">HUMAN PRACTICE</span>
 
-
        <ul class="sub-menu">
 
-
            <li class="menu-button" data-page=5>Lab Safety</li>
 
-
            <li class="menu-button" data-page=6>Public Promotion</li>
 
-
            <li class="menu-button" data-page=7>Public Promotion</li>
 
-
            <li class="menu-button" data-page=8>Collaborations</li>
 
-
            <li class="menu-button" data-page=9>Future Applications</li>
 
-
        </ul>
 
-
        </li>
 
-
        <li>
 
-
        <span class="title">ACHIEVEMENTS</span>
 
-
        <ul class="sub-menu">
 
-
            <li class="menu-button" data-page=0>BioBricks</li>
 
-
            <li class="menu-button" data-page=0>Results</li>
 
-
            <li class="menu-button" data-page=0>Judging Criteria</li>
 
-
        </ul>
 
-
        </li>
 
-
        <li>
 
-
        <span class="title">EXTRAS</span>
 
-
        <ul class="sub-menu">
 
-
            <li class="menu-button" data-page=0>Protocols</li>
 
-
            <li class="menu-button" data-page=0>Lab Note - Our Diary</li>
 
-
            <li class="menu-button" data-page=0>Photo Gallery</li>
 
-
        </ul>
 
-
        </li>
 
-
        <li>
 
-
        <span>TEAM</span>
 
-
        <ul class="sub-menu">
 
-
            <li class="menu-button" data-page=0>Our Profile</li>
 
-
            <li class="menu-button" data-page=0>People</li>
 
-
            <li class="menu-button" data-page=0>Attributions</li>
 
-
            <li class="menu-button" data-page=0>Supporters</li>
 
-
        </ul>
 
-
        </li>
 
-
    </ul>
 
-
</div>
 
-
 
-
<div id="sponsor">
 
</div>
</div>
<script>
<script>
(function() {
(function() {
-
    function AND(a,b) {
+
function AND(a,b) {
-
        if (a) {
+
if (a) {
-
            if (b) {
+
if (b) {
-
                return true;
+
return true;
-
            }
+
}
-
        }
+
}
-
        return false;
+
return false;
-
    }
+
}
-
    var pages = document.querySelectorAll(".page");
+
var pages = document.querySelectorAll(".page");
-
    var page_current = 0;
+
var page_current = 0;
-
    function pageJumpTo(to_page) {
+
function pageJumpTo(to_page) {
-
        if (AND(to_page >= 0, to_page < pages.length)) {
+
if (AND(to_page >= 0, to_page < pages.length)) {
-
            for (var i = 0; i < pages.length; i++) {
+
for (var i = 0; i < pages.length; i++) {
-
                pages[i].style.left = 100*(i-to_page) + '%';
+
pages[i].style.left = 100*(i-to_page) + '%';
-
            }
+
}
-
            page_current = to_page;
+
page_current = to_page;
-
        }
+
}
-
    }
+
}
-
    document.querySelector("#present-prev-page").onclick = function() {
+
document.querySelector("#present-prev-page").onclick = function() {
-
        pageJumpTo(page_current - 1);
+
pageJumpTo(page_current - 1);
-
    };
+
};
-
    document.querySelector("#present-next-page").onclick = function() {
+
document.querySelector("#present-next-page").onclick = function() {
-
        pageJumpTo(page_current + 1);
+
    pageJumpTo(page_current + 1);
-
    };
+
};
-
    pageJumpTo(0);
+
pageJumpTo(0);
-
    var buttons = document.querySelectorAll(".menu-button");
+
var buttons = document.querySelectorAll(".menu-button");
-
    function makeButton(page) {
+
function makeButton(page) {
-
        return function() {
+
    return function() {
-
            pageJumpTo(page);
+
        pageJumpTo(page);
-
        };
+
    };
-
    }
+
}
-
    for (var i = 0; i < buttons.length; i++) {
+
for (var i = 0; i < buttons.length; i++) {
-
        var page = parseInt(buttons[i].getAttribute("data-page"));
+
    var page = parseInt(buttons[i].getAttribute("data-page"));
-
        buttons[i].onclick = makeButton(page);
+
    buttons[i].onclick = makeButton(page);
-
    }
+
}
-
    var main_menus = document.querySelectorAll("ul.main-menu>li");
+
var main_menus = document.querySelectorAll("ul.main-menu>li");
-
    function menuOpen(index) {
+
function menuOpen(index) {
-
        for (var i = 0; i < main_menus.length; i++) {
+
    for (var i = 0; i < main_menus.length; i++) {
-
            var sub_menu = main_menus[i].querySelector(".sub-menu");
+
        var sub_menu = main_menus[i].querySelector(".sub-menu");
-
            if (i === index) {
+
        if (i === index) {
-
                sub_menu.style.height = '10rem';
+
            sub_menu.style.height = '10rem';
-
            } else {
+
        } else {
-
                sub_menu.style.height = '0';
+
            sub_menu.style.height = '0';
-
            }
+
        }
-
        }
+
    }
-
    }
+
}
-
    function makeMenuOpenFunc(index) {
+
function makeMenuOpenFunc(index) {
-
        return function() {
+
    return function() {
-
            menuOpen(index);
+
        menuOpen(index);
-
        };
+
    };
-
    }
+
}
-
    for (var i = 0; i < main_menus.length; i++) {
+
for (var i = 0; i < main_menus.length; i++) {
-
        main_menus[i].onclick = makeMenuOpenFunc(i);
+
    main_menus[i].onclick = makeMenuOpenFunc(i);
-
    }
+
}
-
    menuOpen(0);
+
menuOpen(0);
-
    document.onkeydown = function(e) {
+
document.onkeydown = function(e) {
-
      switch (e.keyCode) {
+
    switch (e.keyCode) {
-
        case 37:
+
        case 37:
-
            pageJumpTo(page_current - 1);
+
            pageJumpTo(page_current - 1);
-
            break;
+
            break;
-
        case 39:
+
        case 39:
-
            pageJumpTo(page_current + 1);
+
            pageJumpTo(page_current + 1);
-
            break;
+
            break;
-
      }
+
    }
-
    };
+
};
})();
})();
</script>
</script>

Revision as of 08:58, 22 August 2014

<!DOCTYPE html> HKU IGEM Team

  • Testing

    This page is currently under construction.

  • Still testing...

    Keep Calm and Revise.

  • Page3
  • Page4
  • Page5
  • Page6
  • Page7
  • Page8
  • Page9
  • Page10
<
>

Retrieved from "http://2014.igem.org/Team:Hong_Kong_HKU"