RadouxArthur (Talk | contribs) |
|||
(63 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<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; | ||
+ | } | ||
+ | #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%; | ||
+ | } | ||
− | </div> | + | </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> | + | <li><a ><span>Human practice</span></a></li> |
− | <li> <a | + | <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> | </div> | ||
+ | <style> | ||
+ | .spinner { | ||
+ | width: 40px; | ||
− | + | margin: 100px auto; | |
− | + | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; | |
− | + | animation: sk-rotateplane 1.2s infinite ease-in-out; | |
+ | } | ||
+ | @-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> | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | <!-- 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 | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </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')) { | |
− | <div | + | 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