RadouxArthur (Talk | contribs) |
|||
(28 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | <div id="removeme"><img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png"> Loading, please wait</div> | + | <!-- 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; | ||
+ | |||
+ | } | ||
+ | |||
+ | #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> | <style> | ||
Line 29: | Line 139: | ||
} | } | ||
} | } | ||
+ | |||
</style> | </style> | ||
+ | |||
+ | <!-- end predisplay --> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
Line 40: | Line 153: | ||
<script> | <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..."); | console.log("Sending CSS XHR..."); | ||
− | + | oReq.send(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function JSreqLoader () { | |
− | + | var b64_text = this.responseText; | |
− | + | console.log("Received JS results"); | |
− | console.log("Received JS results"); | + | |
− | + | var js_text = atob(b64_text); | |
− | var js_text = atob(b64_text); | + | |
eval(js_text); | eval(js_text); | ||
Line 62: | Line 182: | ||
$(".body").append($("#bigmaindiv")); | $(".body").append($("#bigmaindiv")); | ||
− | |||
$('#removeme').remove(); | $('#removeme').remove(); | ||
$('#bigmaindiv').insertBefore('#content'); }, 0); | $('#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
![](https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png)