Difference between revisions of "Team:Judd UK"

(Replaced content with "{{Team:Judd_UK/TEMPLATE}}")
Line 1: Line 1:
−
{{Team:Judd_UK/TEMPLATE}}
+
<html>
 +
<!--
 +
* Judd iGEM Wiki Main HTML Page
 +
*
 +
* Copyright Aleksandur Murfitt
 +
* Released under the MIT license
 +
*
 +
* https://2017.igem.org/Judd_UK/license
 +
*
 +
* Date: 2017-10-01T12:38Z
 +
-->
 +
<div class="JC">
 +
   
 +
    <script src="/Template:Judd_UK/pagelist?action=raw&ctype=text/javascript" async></script>
 +
    <link rel="stylesheet" href="/Template:Judd_UK/Stylesheets/main?action=raw&ctype=text/css">
 +
    <script src="/Template:Judd_UK/Scripts/wiki?action=raw&ctype=text/javascript" async></script>
 +
<script src="/Template:Judd_UK/Scripts/BSS?action=raw&ctype=text/javascript" defer></script>
 +
<link rel="stylesheet" href="/Template:Judd_UK/Stylesheets/BSS?action=raw&ctype=text/css">
 +
    <style id="topstyles"></style>
 +
    <div id="loadbar"></div>
 +
    <header id="Header">
 +
        <img id="handle" href="#" onclick="editable()" src="/wiki/images/c/c8/T--Judd_UK--iGEMLogo-Handle.png" />
 +
        <img id="sprite" href="#" onclick="editable()" src="/wiki/images/9/9e/T--Judd_UK--iGEMLogo-sprite.png" />
 +
        <img id="main-img" href="#"onclick="editable()" alt="iGEM Logo" src="/wiki/images/8/85/T--Judd_UK--iGEMLogo-small.png" />
 +
        <span id="O1">
 +
                <a href="£Page-13">Home</a>
 +
        </span>
 +
        <div id="D2" class="D"></div>
 +
        <span id="O2">
 +
                <a>Project</a>
 +
                <ul style="left:-25%"></ul>
 +
        </span>
 +
        <div id="D3" class="D"></div>
 +
        <span id="O3">
 +
                <a>Human Practices</a>
 +
                <ul style="left:25%"></ul>
 +
        </span>
 +
        <div id="D4" class="D"></div>
 +
        <span id="O4">
 +
                <a>Team</a>
 +
                <ul style="left:75%"></ul>
 +
        </span>
 +
    </header>
 +
    <div id="content-container">
 +
        <div id="content-index">
 +
            <h4>Contents</h4>
 +
            <ol>
 +
            </ol>
 +
        </div>
 +
        <div id="content-body">
 +
<div>
 +
<div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;">
 +
<h1 data-typer='"Iron deficiency affects more people than <b>any</b> other condition, constituting a public health condition of epidemic proportions" - <b>WHO</b>' data-delay="0"></h1>
 +
<h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
 +
<h1 data-later="Here's what we're doing about it" style="display:none"></h1>
 +
</div>
 +
<style id="homestyles">
 +
.JC #content-container{
 +
visibility:visible!important;}
 +
.JC #content-index{
 +
display:none!important}
 +
div.JC{
 +
transition:background-color 1s ease-in;
 +
background-color:#111!important;
 +
}
 +
#Header{
 +
opacity:0;
 +
transition:opacity 1s ease;
 +
}
 +
#Footer{
 +
opacity:0
 +
}
 +
#intro>h1,#intro>h1>b{
 +
text-align:left;
 +
border:none!important;
 +
font-size:40px!important;
 +
line-height:68.1167px!important;
 +
font-family:'Open Sans'!important;
 +
color:#bbb;
 +
margin:0!important;
 +
transition:color 1s ease-in;
 +
}
 +
#intro>h1>b{
 +
font-weight:400!important;
 +
color:#ff6427;
 +
}
 +
[data-typer]:after,[data-later]:after {
 +
  content:"";
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
  width:1px;
 +
  height:1em;
 +
  background: #bbb;
 +
          animation: caretPulsate 1s linear infinite;
 +
  -webkit-animation: caretPulsate 1s linear infinite;
 +
}
 +
[data-typer]~[data-typer]:after{
 +
width:0;
 +
animation:none;
 +
-webkit-animation:none;
 +
}
 +
@keyframes caretPulsate {
 +
  0%  {opacity:1;}
 +
  50%  {opacity:1;}
 +
  60%  {opacity:0;}
 +
  100% {opacity:0;}
 +
}
 +
@-webkit-keyframes caretPulsate {
 +
  0%  {opacity:1;}
 +
  50%  {opacity:1;}
 +
  60%  {opacity:0;}
 +
  100% {opacity:0;}
 +
}
 +
</style>
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
 +
<script>
 +
setTimeout(function(){
 +
qsa = document.querySelectorAll.bind(document);
 +
  var pauseMax = 80,
 +
    pauseMin = 40,
 +
    cht = 0;
 +
qsa("[data-typer]").forEach(
 +
function(e,i){setTimeout(function typeItt() {
 +
    if (cht > e.dataset.typer.length)return;
 +
    if(e.dataset.typer[cht]!="<")
 +
    e.innerHTML = e.dataset.typer.substring(0, cht++);
 +
    else e.innerHTML=e.dataset.typer.substring(0, cht+=3);
 +
    setTimeout(typeItt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
 +
},e.dataset.delay);
 +
if(qsa("[data-typer]").length > i+1)
 +
  setTimeout(function(){
 +
    e.removeAttribute("data-typer");
 +
    cht=0
 +
},qsa("[data-typer]")[i+1].dataset.delay-10);
 +
});
 +
var ch=0;
 +
function typeIt() {
 +
            if (ch > qs("[data-later]").dataset.later.length){ setTimeout(function(){qs("#intro").style.opacity = "0"; qs("#afterintro").style.opacity="1";setTimeout(function(){qs("#intro").remove();
 +
makeBSS(".homeshow");},500);},1000); return;}
 +
            if (qs("[data-later]").dataset.later[ch] != "<")
 +
                qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch++);
 +
            else qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch += 3);
 +
            setTimeout(typeIt, ~~ (Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
 +
        }
 +
setTimeout(function() {
 +
    qs("#Header").style.opacity = "1";
 +
    qs("div.JC").style.cssText += 'background-color:#FFF !important';
 +
    qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) {
 +
        e.style.color = "#FFF"
 +
    });
 +
    setTimeout(function() {
 +
        qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) {
 +
            e.style.display = "none"
 +
        });
 +
        qs("[data-later]").style.cssText = "display:inline!important;color:#2764ff";
 +
 
 +
        typeIt();
 +
    }, 1000);
 +
}, (178 + 71) * 65 + (2 * 1500));
 +
},500);
 +
</script>
 +
<div id="afterintro" style="opacity:0;transition:opacity .5s;">
 +
<div id="slides">
 +
        <img class="slide showing" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
    </div>
 +
    <footer id="Footer">
 +
        <h4>Designed by Aleksandur Murfitt</h4>
 +
    </footer>
 +
    <template></template>
 +
    <div id="content-template" style="display:none"></div>
 +
</div>
 +
</html>

Revision as of 14:30, 1 November 2017

Contents

Designed by Aleksandur Murfitt