From 4378d39ea8866b9446685cb6140bc632d22a9a16 Mon Sep 17 00:00:00 2001 From: Jonathan Bauer Date: Sat, 16 Apr 2011 13:12:13 +0200 Subject: cursor hidden by QWSServer, added loading animation for preload page, started preload-debug page --- src/html/preload-debug.html | 32 ++++++++++++++++++++++ src/html/preload.html | 22 +++++++++++++++ src/html/style.css | 65 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+) create mode 100644 src/html/preload-debug.html (limited to 'src/html') diff --git a/src/html/preload-debug.html b/src/html/preload-debug.html new file mode 100644 index 0000000..cc69aa1 --- /dev/null +++ b/src/html/preload-debug.html @@ -0,0 +1,32 @@ + + + + + + +

Preboot GUI

+ +

Waiting on internet...i + +

+ +

+ + + diff --git a/src/html/preload.html b/src/html/preload.html index a01dbd7..bb63050 100644 --- a/src/html/preload.html +++ b/src/html/preload.html @@ -5,6 +5,18 @@ 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); @@ -13,6 +25,16 @@ function gogo(){

Waiting on internet...

diff --git a/src/html/style.css b/src/html/style.css index 8ebfa3d..817a7ee 100644 --- a/src/html/style.css +++ b/src/html/style.css @@ -30,3 +30,68 @@ h1, p{ #footer{ height:30px; } +/* 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; +} -- cgit v1.2.3-55-g7522