RadouxArthur (Talk | contribs) |
|||
(19 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
<style> | <style> | ||
body { | body { | ||
− | + | width: 1200px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
background-color: rgb(217,217,217); | background-color: rgb(217,217,217); | ||
margin: auto; | margin: auto; | ||
font-family: 'Roboto', Helvetica, SansSerif; | font-family: 'Roboto', Helvetica, SansSerif; | ||
+ | padding: 0; | ||
+ | color: black; | ||
+ | background-color:rgb(217,217,217); | ||
+ | word-wrap: break-word; | ||
} | } | ||
Line 25: | Line 24: | ||
z-index: 1000; | z-index: 1000; | ||
font-family: 'PT Sans', sans-serif; | 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; | ||
} | } | ||
Line 34: | Line 74: | ||
height: 100%; | height: 100%; | ||
} | } | ||
− | + | .waiteranimationdiv { | |
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 100%; | ||
+ | } | ||
</style> | </style> | ||
Line 65: | Line 109: | ||
</div> | </div> | ||
</nav> | </nav> | ||
− | <div class="container"><img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png"> Loading, please wait</div> | + | <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> | </div> | ||
Line 95: | Line 139: | ||
} | } | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</style> | </style> | ||
Line 114: | Line 154: | ||
<script> | <script> | ||
$('#top_title').remove(); | $('#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 139: | Line 184: | ||
$('#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
Loading, please wait