diff options
| author | Niklas | 2011-09-23 13:31:38 +0200 |
|---|---|---|
| committer | Niklas | 2011-09-23 13:31:38 +0200 |
| commit | 8f21ea21d83083869a28fea8254d4a0034021335 (patch) | |
| tree | 462d469fb3c62a4baa6cfa0588d27118700ff4a5 | |
| parent | added some more js functions. abortBootDialog() and chooseInterfaceDialog() (diff) | |
| download | fbgui-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.css | 113 | ||||
| -rw-r--r-- | LogReceiver/html/networkdiscovery.html | 58 |
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> |