summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorNiklas2011-09-23 13:31:38 +0200
committerNiklas2011-09-23 13:31:38 +0200
commit8f21ea21d83083869a28fea8254d4a0034021335 (patch)
tree462d469fb3c62a4baa6cfa0588d27118700ff4a5
parentadded some more js functions. abortBootDialog() and chooseInterfaceDialog() (diff)
downloadfbgui-8f21ea21d83083869a28fea8254d4a0034021335.tar.gz
fbgui-8f21ea21d83083869a28fea8254d4a0034021335.tar.xz
fbgui-8f21ea21d83083869a28fea8254d4a0034021335.zip
changed the css file for the networkdiscovery. now it looks a bit nicer
-rw-r--r--LogReceiver/html/networkdiscovery.css113
-rw-r--r--LogReceiver/html/networkdiscovery.html58
2 files changed, 62 insertions, 109 deletions
diff --git a/LogReceiver/html/networkdiscovery.css b/LogReceiver/html/networkdiscovery.css
index 1b144fa..fc1c514 100644
--- a/LogReceiver/html/networkdiscovery.css
+++ b/LogReceiver/html/networkdiscovery.css
@@ -11,95 +11,32 @@ body{
*/
background-size:100%;
}
-#top{
- position:absolute;
-}
-#message{
- position:absolute;
- top:37%;
- width:100%;
- font-size:90%;
-}
+
+/* Tell the browser to render HTML 5 elements as block */
+header, footer, aside {
+ display: block;
+}
+
+#content {
+ display: table;
+ width: 100%;
+}
+
+#mainContent {
+ display: table-cell;
+ width: 620px;
+ padding-right: 22px;
+ padding-left: 22px;
+}
+
+aside {
+ display: table-cell;
+ width: 300px;
+}
+
+
h1, p{
color:#333;
text-align:center;
}
-#container{
- min-height:100%;
- margin-bottom:-50px;
-}
-* html #container{
- height:100%;
-}
-#footer-spacer{
- height:0px;
-}
-#footer{
- height:30px;
-}
-/* animation */
-/* 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/LogReceiver/html/networkdiscovery.html b/LogReceiver/html/networkdiscovery.html
index ff8b587..600674a 100644
--- a/LogReceiver/html/networkdiscovery.html
+++ b/LogReceiver/html/networkdiscovery.html
@@ -85,26 +85,42 @@ var addInterface = function (i){
</head>
<body>
-<div id="top">
-</div>
-<div id="message">
- <h1>Network Discovery</h1>
-</div>
-<!-- anchor for the abort boot dialog -->
-<div id="nd_abort_boot_dialog">
- <p id="nd_abort_boot_msg"> <p>
-</div>
-<!-- anchor for the choose interface dialog -->
-<div id="nd_choose_interface_dialog">
- <p id="nd_choose_interface_msg"></p>
-</div>
-<!-- anchor for qt interface progress foo -->
-<div id="nd_progress_container"></div>
-<div id="container">
- <div id="footer-spacer"></div>
-</div>
-<div id="footer">
- <p>RZ Uni Freiburg, 2011</p>
-</div>
+ <header>
+ <h1>Network Discovery</h1>
+ </header>
+ <section id="intro">
+ <p>Welcome to the Network Discovery. We are now looking for usable interfaces and will go on as soon as we found one. This may take a few seconds.</p>
+ </section>
+ <div id="content">
+ <div id="left_spacer">
+ <aside>
+ <!-- free space -->
+ </aside>
+ </div>
+ <div id="mainContent">
+ <section>
+ <!-- Main content area -->
+ <p>test</p>
+ <!-- anchor for the abort boot dialog -->
+ <div id="nd_abort_boot_dialog">
+ <p id="nd_abort_boot_msg"> <p>
+ </div>
+ <!-- anchor for the choose interface dialog -->
+ <div id="nd_choose_interface_dialog">
+ <p id="nd_choose_interface_msg"></p>
+ </div>
+ <!-- anchor for qt interface progress foo -->
+ <div id="nd_progress_container"></div>
+ </section>
+ </div>
+ <div id="right_spacer">
+ <aside>
+ <!-- free space -->
+ </aside>
+ </div>
+ </div>
+ <footer>
+ <p>RZ Uni Freiburg, 2011</p>
+ </footer>
</body>
</html>