diff options
| -rw-r--r-- | application/modules/fbgui/views/scripts/index/start.phtml | 116 | ||||
| -rw-r--r-- | public/media/css/fbgui.css | 23 |
2 files changed, 30 insertions, 109 deletions
diff --git a/application/modules/fbgui/views/scripts/index/start.phtml b/application/modules/fbgui/views/scripts/index/start.phtml index 9b48fbf..1f59b58 100644 --- a/application/modules/fbgui/views/scripts/index/start.phtml +++ b/application/modules/fbgui/views/scripts/index/start.phtml @@ -1,106 +1,5 @@ -<style type="text/css"> -/* 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:relative; - - width:100px; - height:100px; - -moz-border-radius:100px; - -webkit-border-radius:100px; - margin:25px auto; - -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:#000; - -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; -} -/* uncomment this to use css animation in webkit browsers */ -/* @-webkit-keyframes rotateThis { - from {-webkit-transform:scale(0.5) rotate(0deg);} - to {-webkit-transform:scale(0.5) rotate(360deg);} -} */ -#downloadinfo .downloadelement{ - clear:both; - padding-top:10px; - padding-bottom:10px; -} -#downloadinfo .downloadelement .label{ - float:left; - padding:5px; - width:120px; -} -#downloadinfo .downloadelement .status{ - margin-left:125px; - padding:3px 5px 5px 5px; -} -.progressbar{margin-left:125px !important;margin-top:5px;} -</style> -<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 type="text/javascript"> function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return 'n/a'; @@ -115,7 +14,7 @@ if (!Number.toFixed) { } function updateProgress(p, s, u){ - $("#progressbar").progressbar({ value: ((actFile-1)*33+(p/3))}); + $("#progressbar").progressbar({ value: ((actFile-1)*50+(p/2))}); if (p >= 0 && p <= 100){ $(".progressbar:last").progressbar({ value: p }); @@ -124,7 +23,7 @@ function updateProgress(p, s, u){ $(".progressbar:last").progressbar({ value: 0 }); } } -var fileCount = 3; +var fileCount = 2; var actFile = 0; function downloadInfo(filename, filesize){ @@ -162,13 +61,12 @@ function allComplete(){ <div class="bar7"></div> <div class="bar8"></div> </div> - +<h1>Downloading System Files</h1> +<div class='headling'>Overall:</div> <div id="progressbar" style="height: 30px;"></div> -<h1>Downloading</h1> -<div id='downloadinfo'> - -</div> +<div class='headling'>Files:</div> +<div id='downloadinfo'></div> <script type="text/javascript"> diff --git a/public/media/css/fbgui.css b/public/media/css/fbgui.css index 98e9ef4..f7e55cb 100644 --- a/public/media/css/fbgui.css +++ b/public/media/css/fbgui.css @@ -44,6 +44,23 @@ div.menu>img { width:100%; text-align: left; } + +#downloadinfo .downloadelement{ + clear:both; + padding-top:10px; + padding-bottom:10px; +} +#downloadinfo .downloadelement .label{ + float:left; + padding:5px; + width:120px; +} +#downloadinfo .downloadelement .status{ + margin-left:125px; + padding:3px 5px 5px 5px; +} +.progressbar{margin-left:125px !important;margin-top:5px;} + .fbguilogin{ background: url("/media/img/login.png") no-repeat scroll 5px center #FFFFFF; padding:5px 5px 5px 45px; @@ -67,3 +84,9 @@ div.menu>img { -webkit-border-radius: 6px; border-radius:6px; } +.headling{ + font-weight:bold; + font-size:16px; + margin-bottom:5px; + margin-top:20px; +} |