Developing lightweight computation at the DSG edge

Commit 0b46874e authored by p4u's avatar p4u
Browse files

New style for wait page and splitted in two files

parent 866aa641
<html>
<head></head>
<style>
div#showbar{
position: relative;
width: 100%;
height: 25px;
margin: 0px;
background-color: #556270;
}
div#progress{
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: #C3FF68;
}
</style>
<body>
<script>
wait_a_moment = function(seconds) {
progress_update();
setTimeout(back_page, seconds*1000);
}
back_page = function() { history.back(); }
var progressEnd = 12; // set to number of progress <span>'s.
var progressInterval = 1666; // set to time between updates (milli-seconds)
var progressElement = document.getElementById('progress')
var progressAt = 0;
var progressTimer;
function progress_update() {
progressAt++;
progressTimer = setTimeout('progress_update()',progressInterval);
progress.style.width=progressAt*100/progressEnd+'%';
}
</script>
<table align="center">
<tr><td>
The configuration is being applyied, please wait a moment...
</td></tr>
<tr><td>
<div id="showbar">
<div id="progress">
</div>
</div>
</td></tr>
</table>
<script>
wait_a_moment(20);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Please wait...
</title>
<style type="text/css">
body{
background-color: #83B6EA;
}
div#progress_screen{
margin: 0 auto;
width: 500px;
border-radius: 4px;
background-color: rgba(255,255,255,0.4);
padding: 10px;
}
div#progress_screen p{
text-align: center;
font-size: 1.0em;
}
div#progress_wrapper{
position: relative;
width: 500px;
height: 25px;
background-color: #45A2FF;
}
div#progress_wrapper div#progress{
width: 0%;
height: 100%;
background-color: #0074FF;
}
.align-center { float:center; margin: 20px 0px 25px 45px; }
</style>
<script type="text/javascript">
var timer;
var tick = 1000;
var timeout = 20 * 1000;
var time = 0;
var progressElement;
var onLoad = function(){
progressElement = document.getElementById('progress');
timer = setInterval(function(){
time += tick;
progressElement.style.width = time*100.0/timeout+'%';
if (time >= timeout){
clearInterval(timer);
history.back();
}
}, tick);
}
</script>
</head>
<body onload="onLoad();">
<div id="progress_screen">
<img src="logo.png" class="align-center" />
<p>The configuration is being applied, please wait a moment...</p>
<div id="progress_wrapper"><div id="progress"></div></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Please wait...
</title>
<style type="text/css">
body{
background-color: #83B6EA;
}
div#progress_screen{
margin: 0 auto;
width: 500px;
border-radius: 4px;
background-color: rgba(255,255,255,0.4);
padding: 10px;
}
div#progress_screen p{
text-align: center;
font-size: 1.0em;
}
div#progress_wrapper{
position: relative;
width: 500px;
height: 25px;
background-color: #45A2FF;
}
div#progress_wrapper div#progress{
width: 0%;
height: 100%;
background-color: #0074FF;
}
.align-center { float:center; margin: 20px 0px 25px 45px; }
</style>
<script type="text/javascript">
var timer;
var tick = 1000;
var timeout = 10 * 1000;
var time = 0;
var progressElement;
var onLoad = function(){
progressElement = document.getElementById('progress');
timer = setInterval(function(){
time += tick;
progressElement.style.width = time*100.0/timeout+'%';
if (time >= timeout){
clearInterval(timer);
history.back();
}
}, tick);
}
</script>
</head>
<body onload="onLoad();">
<div id="progress_screen">
<img src="logo.png" class="align-center" />
<p>The configuration is being applied, please wait a moment...</p>
<div id="progress_wrapper"><div id="progress"></div></div>
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment