Difference between revisions of "Team:Judd UK/berhfudf"

 
(103 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
-->
 
-->
 
<div class="JC">
 
<div class="JC">
 +
   
 
     <script src="/Template:Judd_UK/pagelist?action=raw&ctype=text/javascript" async></script>
 
     <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">
 
     <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/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>
 
     <style id="topstyles"></style>
 
     <div id="loadbar"></div>
 
     <div id="loadbar"></div>
Line 46: Line 49:
 
         </div>
 
         </div>
 
         <div id="content-body">
 
         <div id="content-body">
−
<div data-wiki="false">
+
<div>
−
<style>
+
  <div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;">
−
.JC #content-container{
+
    <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>
−
visibility:visible;}
+
    <h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
−
.JC #content-index{
+
    <h1 data-later="Here's what we're doing about it" style="display:none"></h1>
−
display:none}
+
  </div>
−
.JC{
+
  <style id="homestyles">
−
background-color:#111!important;
+
    .JC #content-container{
−
}
+
    visibility:visible!important;}
−
#Header{
+
    .JC #content-index{
−
opacity:0
+
    display:none!important}
−
}
+
    div.JC{
−
#Footer{
+
    transition:background-color 1s ease-in;
−
opacity:0
+
    background-color:#111!important;
−
}
+
    }
−
div>h1,div>h1>b{
+
    #Header{
−
text-align:left;
+
    opacity:0;
−
border:none!important;
+
    transition:opacity 1s ease;
−
font-size:50px!important;
+
    }
−
line-height:68.1167px!important;
+
    #Footer{
−
font-family:'Open Sans'!important;
+
    opacity:0
−
color:#bbb;
+
    }
−
margin:0!important;
+
    #intro>h1,#intro>h1>b{
−
}
+
    text-align:left;
−
div>h1>b{
+
    border:none!important;
−
font-weight:400!important;
+
    font-size:40px!important;
−
color:#ff6427;
+
    line-height:68.1167px!important;
−
}
+
    font-family:'Open Sans'!important;
−
[data-typer]:after {
+
    color:#bbb;
−
  content:"";
+
    margin:0!important;
−
  display: inline-block;
+
    transition:color 1s ease-in;
−
  vertical-align: middle;
+
    }
−
  width:1px;
+
    #intro>h1>b{
−
  height:1em;
+
    font-weight:400!important;
−
  background: #bbb;
+
    color:#ff6427;
−
          animation: caretPulsate 1s linear infinite;  
+
    }
−
  -webkit-animation: caretPulsate 1s linear infinite;  
+
    [data-typer]:after,[data-later]:after {
−
}
+
    content:"";
−
@keyframes caretPulsate {
+
    display: inline-block;
−
  0%  {opacity:1;}
+
    vertical-align: middle;
−
  50%  {opacity:1;}
+
    width:1px;
−
  60%  {opacity:0;}
+
    height:1em;
−
  100% {opacity:0;}
+
    background: #bbb;
−
}
+
    animation: caretPulsate 1s linear infinite;  
−
@-webkit-keyframes caretPulsate {
+
    -webkit-animation: caretPulsate 1s linear infinite;  
−
  0%  {opacity:1;}
+
    }
−
  50%  {opacity:1;}
+
    [data-typer]~[data-typer]:after{
−
  60%  {opacity:0;}
+
    width:0;
−
  100% {opacity:0;}
+
    animation:none;
−
}
+
    -webkit-animation:none;
−
</style>
+
    }
−
<h1 data-typer="More than <b>2 million</b> people suffer from anaemia." data-delay="0"></h1>
+
    @keyframes caretPulsate {
−
<h1 data-typer="<b>142500</b> of them will not see the end of this year."data-delay="4740"></h1>
+
    0%  {opacity:1;}
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">  
+
    50%  {opacity:1;}
−
<script>
+
    60%  {opacity:0;}
−
function typeIt(typer) {
+
    100% {opacity:0;}
−
     if (ch > tot) return;
+
    }
−
    if(txt[ch]!="<")
+
    @-webkit-keyframes caretPulsate {
−
    typer.html(txt.substring(0, ch++));
+
    0%  {opacity:1;}
−
    else typer.html(txt.substring(0, ch+=3));
+
    50%  {opacity:1;}
−
    setTimeout(typeIt(typer), ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
+
    60%  {opacity:0;}
−
  }
+
    100% {opacity:0;}
−
$("[data-typer]").attr("data-typer", function(i, txt) {
+
    }
−
 
+
  </style>
−
  var $typer = $(this),
+
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
−
    tot = txt.length,
+
  <script>
−
    pauseMax = 80,
+
    setTimeout(function(){
−
    pauseMin = 40,
+
     qsa = document.querySelectorAll.bind(document);
−
    ch = 0;
+
      var pauseMax = 80,
−
  setTimeout(typeIt($typer),$typer.data("delay"));
+
        pauseMin = 40,
−
 
+
        cht = 0;
−
});
+
    qsa("[data-typer]").forEach(
−
</script>
+
    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>
 
</div>
−
    </div>
 
 
     <footer id="Footer">
 
     <footer id="Footer">
 
         <h4>Designed by Aleksandur Murfitt</h4>
 
         <h4>Designed by Aleksandur Murfitt</h4>
 
     </footer>
 
     </footer>
−
    <div id="ting"></div>
 
 
     <template></template>
 
     <template></template>
 
     <div id="content-template" style="display:none"></div>
 
     <div id="content-template" style="display:none"></div>
−
    <script>
 
−
    function editable(){
 
−
    qs(".JC #content-body").contentEditable = 'true';
 
−
    qs(".JC #content-body").oninput = function(){
 
−
        qs('textarea').value = "<div" + (qs("#content-index").style.display=="none"?' data-wiki="false" data-templated="false"':"")+">" + qs('.JC #content-body').innerHTML+"<\/div><html><script>window.location='/Team:Judd_UK/" + page.replace("*", "/") + "'<\/script><\/html>";
 
−
        qsa("img").forEach(function(e){e.oncontextmenu = function(o){o.target.classList.toggle("left");o.preventDefault()}});
 
−
        if(qs(".JC #content-body").innerHTML.includes("#TABLE!")){
 
−
        qs(".JC #content-body").innerHTML = qs(".JC #content-body").innerHTML.replace("#TABLE!","<table style='width:100%'><tr><td>Heading 1</td><td>Heading 2</td><td>Heading 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr></table>");}
 
−
    };
 
−
    var safety = page;
 
−
    AJAX('https://2017.igem.org/Team:Judd_UK/Pages/' + safety +'?action=edit', function(e){
 
−
        qs('#ting').innerHTML=e.responseText;
 
−
        qs('textarea').rows = "10";
 
−
        qs('#wpSummary').style.display = "none";
 
−
        qs('.editCheckboxes').style.display = "none";
 
−
        qs('#editpage-copywarn').style.display = "none";
 
−
        qs('#wpPreview').style.display = "none";
 
−
        qs('#wpDiff').style.display = "none";
 
−
        qs('.cancelLink').style.display = "none";
 
−
        qs('.editHelp').style.display = "none";
 
−
        qsa("label")[1].innerHTML="Editing " + safety;
 
−
        qsa("img").forEach(function(e){e.oncontextmenu = function(o){o.target.classList.toggle("left");o.preventDefault()}});
 
−
        qs("textarea").oninput = function(){
 
−
            qs('.JC #content-body').innerHTML = qs('textarea').value;
 
−
            qsa("img").forEach(function(e){e.oncontextmenu = function(o){o.target.classList.toggle("left");o.preventDefault()}});
 
−
        };
 
−
        document.body.onkeydown = function(e){if (e.keyCode == 27){html.innerHTML = qs("textarea").value;renderPage();qs("#ting").contentEditable="true"}}
 
−
    })
 
−
    }
 
−
    </script>
 
 
</div>
 
</div>
 
</html>
 
</html>

Latest revision as of 14:42, 1 November 2017

Contents

Designed by Aleksandur Murfitt