Merge branch 'master' of git.openslx.org:lsfks/projekte/fbgui

author: Niklas 2011-06-28 10:51:08 +0200
committer: Niklas 2011-06-28 10:51:08 +0200
commit: 2842ca3160966ed1633f9d6605531e18b435de61 (patch)
tree: d705e55b3307985da28307e24b7ac33a0e024cce /src/html
parent: added the networkDiscovery project into a new workspace folder (diff)
parent: build.sh dummy (diff)
download: fbgui-2842ca3160966ed1633f9d6605531e18b435de61.tar.gz
fbgui-2842ca3160966ed1633f9d6605531e18b435de61.tar.xz
fbgui-2842ca3160966ed1633f9d6605531e18b435de61.zip
7 files changed, 148 insertions, 16 deletions
diff --git a/src/html/background.png b/src/html/background.png
new file mode 100644
index 0000000..7e374f9
--- /dev/null
+++ b/src/html/background.png
diff --git a/src/html/loadsystem.css b/src/html/loadsystem.css
new file mode 100644
index 0000000..6a6e64f
--- /dev/null
+++ b/src/html/loadsystem.css
@@ -0,0 +1,90 @@
+html,body{
+    height:100%;
+}
+body{
+    margin:0;
+    padding:0;
+    background-color:black;
+    /*
+    background-image:url('background.png');
+    background-repeat:no-repeat;
+    */
+    background-size:100%;
+}
+#message{
+    position:relative;
+    font-size:90%;
+    top:40%;
+}
+h1, p{
+    text-align:center;
+    color:white;
+}
+* html{
+    height:100%;
+}
+/* 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..838423e
--- /dev/null
+++ b/src/html/loadsystem.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="loadsystem.css">
+<script type="text/javascript">
+//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="message">
+  <h1>Loading system, please wait...</h1>
+</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>
+</body>
+</html>
diff --git a/src/html/bg.png b/src/html/old.png
index 84dd7b3..84dd7b3 100644
--- a/src/html/bg.png
+++ b/src/html/old.png
diff --git a/src/html/preload-debug.html b/src/html/preload-debug.html
index cc69aa1..29d7391 100644
--- a/src/html/preload-debug.html
+++ b/src/html/preload-debug.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="style.css">
+<link rel="stylesheet" type="text/css" href="preload.css">
 <script type="text/javascript">
 function gogo(){
     fbgui.trigger();
@@ -12,14 +12,16 @@ function quitgui(){
 </head>
 <body>
 <div id="top">
+</div>
+<div id="message">
   <h1>Preboot GUI</h1>
+  <p>Waiting on internet...
+  <input type="button" name="go" value="load URL"
+         style="font-size:75%"
+         onclick="gogo()">
   <input type="button" name="quit" value="quit"
          style="font-size:75%"
          onclick="quitgui()">
-  <p>Waiting on internet...i
-  <input type="button" name="go" value="click me"
-         style="font-size:75%"
-         onclick="gogo()">
   </p>
 </div>
 <div id="container">
diff --git a/src/html/style.css b/src/html/preload.css
index 817a7ee..e1eff68 100644
--- a/src/html/style.css
+++ b/src/html/preload.css
@@ -5,17 +5,24 @@ body{
     margin:0;
     padding:0;
     background-color:black;
-    background-image:url('bg.png');
-    background-repeat: no-repeat;
+    /*
+    background-image:url('background.png');
+    background-repeat:no-repeat;
+    */
     background-size:100%;
 }
 #top{
     position:absolute;
 }
+#message{
+    position:absolute;
+    top:37%;
+    width:100%;
+    font-size:90%;
+}
 h1, p{
-    margin:10;
-    padding:0.3em 0;
     color:white;
+    text-align:center;
 }
 #container{
     min-height:100%;
@@ -30,6 +37,7 @@ h1, p{
 #footer{
     height:30px;
 }
+/* animation */
 /* position the bars and balls correctly (rotate them and translate them outward)*/
 .bar1 {
   -moz-transform:rotate(0deg) translate(0, -40px);
diff --git a/src/html/preload.html b/src/html/preload.html
index bb63050..bc0abd9 100644
--- a/src/html/preload.html
+++ b/src/html/preload.html
@@ -1,10 +1,7 @@
 <html>
 <head>
-<link rel="stylesheet" type="text/css" href="style.css">
+<link rel="stylesheet" type="text/css" href="preload.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;
@@ -21,9 +18,9 @@ window.setTimeout(rotate, 100);
 </head>
 <body>
 <div id="top">
-  <h1>Preboot GUI</h1>
-  <p>Waiting on internet...
-  </p>
+</div>
+<div id="message">
+  <h1>Waiting for internet...</h1>
 </div>
 <div id="div4"> 
   <div class="bar1"></div>
author	Niklas	2011-06-28 10:51:08 +0200
committer	Niklas	2011-06-28 10:51:08 +0200
commit	2842ca3160966ed1633f9d6605531e18b435de61 (patch)
tree	d705e55b3307985da28307e24b7ac33a0e024cce /src/html
parent	added the networkDiscovery project into a new workspace folder (diff)
parent	build.sh dummy (diff)
download	fbgui-2842ca3160966ed1633f9d6605531e18b435de61.tar.gz fbgui-2842ca3160966ed1633f9d6605531e18b435de61.tar.xz fbgui-2842ca3160966ed1633f9d6605531e18b435de61.zip