diff options
| author | Jonathan Bauer | 2011-04-24 02:21:09 +0200 |
|---|---|---|
| committer | Jonathan Bauer | 2011-04-24 02:21:09 +0200 |
| commit | 5e05006fdd62ee804379faa1e759b85f8892eb32 (patch) | |
| tree | 057707792fa00e51efaba2a28ff749aa119e676d /src | |
| parent | few more comments in fbgui (diff) | |
| download | fbgui-5e05006fdd62ee804379faa1e759b85f8892eb32.tar.gz fbgui-5e05006fdd62ee804379faa1e759b85f8892eb32.tar.xz fbgui-5e05006fdd62ee804379faa1e759b85f8892eb32.zip | |
loading system page
Diffstat (limited to 'src')
| -rw-r--r-- | src/html/loadsystem.css | 98 | ||||
| -rw-r--r-- | src/html/loadsystem.html | 43 |
2 files changed, 141 insertions, 0 deletions
diff --git a/src/html/loadsystem.css b/src/html/loadsystem.css new file mode 100644 index 0000000..d0e8a90 --- /dev/null +++ b/src/html/loadsystem.css @@ -0,0 +1,98 @@ +html,body{ + height:100%; +} +body{ + margin:0; + padding:0; + background-color:black; + background-size:100%; +} +#top{ + position:absolute; + top:38%; + left:41%; +} +h1, p{ + margin:0; + padding:0.3em 0; + color:white; +} +#container{ + min-height:100%; + margin-bottom:-50px; +} +* html #container{ + height:100%; +} +#footer-spacer{ + height:0px; +} +#footer{ + height:30px; + text-align:center; +} +/* position the bars and balls correctly (rotate them and translate them outward)*/ +.bar1 { + -moz-transform:rotate(0deg) translate(0, -40px); + -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; +} +.bar2 { + -moz-transform:rotate(45deg) translate(0, -40px); + -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; +} +.bar3 { + -moz-transform:rotate(90deg) translate(0, -40px); + -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; +} +.bar4 { + -moz-transform:rotate(135deg) translate(0, -40px); + -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; +} +.bar5 { + -moz-transform:rotate(180deg) translate(0, -40px); + -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; +} +.bar6 { + -moz-transform:rotate(225deg) translate(0, -40px); + -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; +} +.bar7 { + -moz-transform:rotate(270deg) translate(0, -40px); + -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; +} +.bar8 { + -moz-transform:rotate(315deg) translate(0, -40px); + -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; +} +#div4 { + position:absolute; + left:50%; + top:50%; + margin-left:-50px; + margin-top:-50px; + width:100px; + height:100px; + -moz-border-radius:100px; + -webkit-border-radius:100px; + -moz-transform:scale(0.5); + -webkit-transform:scale(0.5); + -webkit-animation-name: rotateThis; + -webkit-animation-duration:2s; + -webkit-animation-iteration-count:infinite; + -webkit-animation-timing-function:linear; +} +#div4 div { + width:20px; + height:20px; + background:#fff; + -moz-border-radius:40px; + -webkit-border-radius:40px; + position:absolute; + left:40px; + top:40px; +} +/* add a shadow to the first */ +#div4 div { + -moz-box-shadow:black 0 0 4px; + -webkit-box-shadow:black 0 0 4px; +} diff --git a/src/html/loadsystem.html b/src/html/loadsystem.html new file mode 100644 index 0000000..f01ba5b --- /dev/null +++ b/src/html/loadsystem.html @@ -0,0 +1,43 @@ +<html> +<head> +<link rel="stylesheet" type="text/css" href="loadsystem.css"> +<script type="text/javascript"> +function gogo(){ + fbgui.trigger(); +} +//simple script to rotate all spinners 45 degrees on each tick +//this works differently from the css transforms, which is smooth +var count = 0; +function rotate() { + var elem4 = document.getElementById('div4'); + elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)'; + elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)'; + if (count==360) { count = 0 } + count+=45; + window.setTimeout(rotate, 100); +} +window.setTimeout(rotate, 100); +</script> +</head> +<body> +<div id="top"> + <p>Loading system, please wait...</p> +</div> +<div id="div4"> + <div class="bar1"></div> + <div class="bar2"></div> + <div class="bar3"></div> + <div class="bar4"></div> + <div class="bar5"></div> + <div class="bar6"></div> + <div class="bar7"></div> + <div class="bar8"></div> +</div> +<div id="container"> + <div id="footer-spacer"></div> +</div> +<div id="footer"> +<p>This might take a few minutes...</p> +</div> +</body> +</html> |