Difference between revisions of "Team:GO Paris-Saclay"

 
(35 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
Loading, please wait
 
 
<html>
 
<html>
 +
<!-- predisplay while loading -->
 +
<style>
 +
body {
 +
  width: 1200px;
 +
  background-color: rgb(217,217,217);
 +
  margin: auto;
 +
  font-family: 'Roboto', Helvetica, SansSerif;
 +
  padding: 0;
 +
  color: black;
 +
  background-color:rgb(217,217,217);
 +
  word-wrap: break-word;
 +
}
  
 +
#cssmenu {
 +
  background: white;
 +
  margin-top: 25px;
 +
  width: 100%;
 +
  padding: 0;
 +
  line-height: 1;
 +
  display: block;
 +
  position: relative;
 +
  top: 0em;
 +
  z-index: 1000;
 +
  font-family: 'PT Sans', sans-serif;
  
−
<style>
 
−
@keyframes spinner {
 
−
    0% {
 
−
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
 
−
    }
 
−
    100% {
 
−
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
 
−
    }
 
 
}
 
}
  
 +
#cssmenu ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: block;
 +
  z-index: 1000;
 +
}
 +
#cssmenu ul:after,
 +
#cssmenu:after {
 +
  content: " ";
 +
  display: block;
 +
  font-size: 0;
 +
  height: 0;
 +
  clear: both;
 +
  visibility: hidden;
 +
}
 +
#cssmenu ul li {
 +
  margin: 0;
 +
  margin-right: 5px;
 +
  padding: 0;
 +
  display: block;
 +
  position: relative;
 +
  z-index: 1000;
 +
 +
}
 +
#cssmenu ul li a {
 +
  text-decoration: none;
 +
  display: block;
 +
  margin: 0;
 +
  -webkit-transition: color .2s ease;
 +
  -moz-transition: color .2s ease;
 +
  -ms-transition: color .2s ease;
 +
  -o-transition: color .2s ease;
 +
  transition: color .2s ease;
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  z-index: 1000;
 +
 +
}
 +
 +
.container {
 +
  position: relative;
 +
  margin: auto;
 +
  background-color: white;
 +
  height: 100%;
 +
}
 +
.waiteranimationdiv {
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 100%;
 +
}
 +
 +
</style>
 +
<div id="removeme">
 +
<nav>
 +
  <div id='cssmenu'>
 +
    <ul>
 +
      <li></li>
 +
      <li><a><span>Project</span></a>
 +
       
 +
      </li>
 +
 +
      <li><a><span>Lab</span></a>
 +
       
 +
      </li>
 +
 +
      <li><a><span>Parts</span></a>
 +
      </li>
 +
      <li><a ><span>Model</span></a>
 +
       
 +
      </li>
 +
 +
      <li><a ><span>Contribution</span></a>
 +
       
 +
      </li>
 +
      <li><a ><span>Human practice</span></a></li>
 +
      <li><a ><span>Acknowledgement</span></a>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
</nav>
 +
<div class="container"><div class="waiteranimationdiv"><img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png"> Loading, please wait <progress id="progress" value="0"></progress><span id="progdisplay"></span></div></div>
 +
</div>
 +
 +
<style>
 
.spinner {
 
.spinner {
−
    // The height here is just for demo purposes
+
  width: 40px;
−
    height: 100vh;
+
−
    opacity: 1;
+
−
    position: relative;
+
−
    transition: opacity linear 0.1s;   
+
  
−
    &::before {
+
  margin: 100px auto;
−
        animation: 2s linear infinite spinner;
+
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
−
        border: solid 3px #eee;
+
  animation: sk-rotateplane 1.2s infinite ease-in-out;
−
        border-bottom-color: #EF6565;
+
−
        border-radius: 50%;
+
−
        content: "";
+
−
        height: 40px;
+
−
        left: 50%;
+
−
        opacity: inherit;
+
−
        position: absolute;
+
−
        top: 50%;
+
−
        transform: translate3d(-50%, -50%, 0);
+
−
        transform-origin: center;
+
−
        width: 40px;
+
−
        will-change: transform;
+
−
    }
+
 
}
 
}
 +
 +
@-webkit-keyframes sk-rotateplane {
 +
  0% { -webkit-transform: perspective(120px) }
 +
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 +
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
 +
}
 +
 +
@keyframes sk-rotateplane {
 +
  0% {
 +
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 +
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
 +
  } 50% {
 +
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 +
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
 +
  } 100% {
 +
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 +
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 +
  }
 +
}
 +
 
</style>
 
</style>
−
<img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png>
+
 
 +
<!-- end predisplay -->
 +
 
 +
  <meta charset="utf-8">
 +
  <base href="https://2018.igem.org/Team:GO_Paris-Saclay">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
<div id="bigmaindiv">
 +
<app-root></app-root>
 +
</div>
 +
 
 +
<script>
 +
$('#top_title').remove();
 +
var progressBar = document.getElementById("progress");
 +
var display = document.getElementById("progdisplay");
 +
 
 +
function reqListener () {
 +
  var b64_csstext = this.responseText;
 +
  console.log("Received CSS results");
 +
  var css_text = atob(b64_csstext);
 +
  $('head').append("<style>"+css_text+"</style>");
 +
}
 +
 
 +
var oReq = new XMLHttpRequest();
 +
oReq.addEventListener("load", reqListener);
 +
oReq.open("GET", "https://static.igem.org/mediawiki/2018/2/22/T--GO_Paris-Saclay--maincss.txt");
 +
console.log("Sending CSS XHR...");
 +
oReq.send();
 +
 
 +
 
 +
function JSreqLoader () {
 +
  var b64_text = this.responseText;
 +
  console.log("Received JS results");
 +
 
 +
  var js_text = atob(b64_text);
 +
eval(js_text);
 +
 
 +
 
 +
setTimeout(function(){
 +
    $(".body").append($("#bigmaindiv"));
 +
 
 +
$('#removeme').remove();
 +
$('#bigmaindiv').insertBefore('#content'); }, 0);
 +
setTimeout(function(){
 +
    $('#cssmenu').prepend('<div id="menu-button">Menu</div>');
 +
    $('#cssmenu #menu-button').on('click', function(){
 +
      var menu = $(this).next('ul');
 +
      if (menu.hasClass('open')) {
 +
        menu.removeClass('open');
 +
      }
 +
      else {
 +
        menu.addClass('open');
 +
      }
 +
    });
 +
},1000);
 +
}
 +
 
 +
 
 +
const req = new XMLHttpRequest();
 +
req.addEventListener("load", JSreqLoader);
 +
 
 +
req.open('GET', 'https://static.igem.org/mediawiki/2018/e/ee/T--GO_Paris-Saclay--mainscript.txt', true);
 +
console.log("Sending JS XHR...");
 +
req.onprogress = function(e) {
 +
    if (e.lengthComputable) {
 +
        progressBar.max = e.total;
 +
        progressBar.value = e.loaded;
 +
        display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
 +
    }
 +
};
 +
req.send(null);
 +
 
 +
</script>
 +
<script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({
 +
    tex2jax: {
 +
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
 +
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 +
        processEscapes: true,
 +
        processEnvironments: true
 +
    },
 +
    // Center justify equations in code and markdown cells. Elsewhere
 +
    // we use CSS to left justify single line equations in code cells.
 +
    displayAlign: 'center',
 +
    "HTML-CSS": {
 +
        styles: {'.MathJax_Display': {"margin": 0}},
 +
        linebreaks: { automatic: true }
 +
    }
 +
});
 +
</script>
 
</html>
 
</html>

Latest revision as of 22:07, 13 October 2018