Completely new Design v1

Some bugs heve to be fexed next days

14 files changed, 222 insertions, 181 deletions

diff --git a/module/web/media/default/css/MooDialog.css b/module/web/media/default/css/MooDialog.css
index 48c9166ad..4564a2a34 100644
--- a/module/web/media/default/css/MooDialog.css
+++ b/module/web/media/default/css/MooDialog.css
@@ -12,7 +12,7 @@
 	left: 50%;
 	z-index: 50000;
 
-	background: #eef5f8;
+	background: #fff;
 	color: black;
 	border-radius: 7px;
 	-moz-border-radius: 7px;
diff --git a/module/web/media/default/css/pathchooser.css b/module/web/media/default/css/pathchooser.css
index 894cc335e..bfd84b19b 100644
--- a/module/web/media/default/css/pathchooser.css
+++ b/module/web/media/default/css/pathchooser.css
@@ -11,7 +11,7 @@ th {
 }
 
 table, tr, td {
-    background-color: #F0F0F0;
+    background-color: #fff;
 }
 
 a, a:visited {
diff --git a/module/web/media/js/MooDropMenu_static.js b/module/web/media/js/MooDropMenu_static.js
index b9cd8cc10..621031599 100644
--- a/module/web/media/js/MooDropMenu_static.js
+++ b/module/web/media/js/MooDropMenu_static.js
@@ -23,13 +23,13 @@ var MooDropMenu = new Class({
 
 	options: {
 		onOpen: function(el){
-			el.removeClass('close').addClass('open');
+			el.removeClass('open').addClass('open');
 		},
 		onClose: function(el){
-			el.removeClass('open').addClass('close');
+			el.removeClass('open').addClass('open');
 		},
 		onInitialize: function(el){
-			el.removeClass('open').addClass('close');
+			el.removeClass('open').addClass('open');
 		},
 		mouseoutDelay: 200,
 		mouseoverDelay: 0,
@@ -44,9 +44,10 @@ var MooDropMenu = new Class({
 		var menu = this.menu = document.id(menu);
 
 		menu.getElements(options.itemSelector + ' > ' + options.listSelector).each(function(el){
+                        
 
 			this.fireEvent('initialize', el);
-
+                        
 			var parent = el.getParent(options.itemSelector),
 				timer;
 
@@ -62,11 +63,11 @@ var MooDropMenu = new Class({
 				}.bind(this),
 
 				'mouseleave': function(){
-					parent.store('DropDownOpen', false);
+					parent.store('DropDownOpen', true);
 
 					clearTimeout(timer);
 					timer = (function(){
-						if (!parent.retrieve('DropDownOpen')) this.fireEvent('close', el);
+						if (!parent.retrieve('DropDownOpen')) this.fireEvent('open', el);
 					}).delay(options.mouseoutDelay, this);
 
 				}.bind(this)
diff --git a/module/web/media/js/package_ui.js b/module/web/media/js/package_ui.js
index 3ea965649..87694e909 100644
--- a/module/web/media/js/package_ui.js
+++ b/module/web/media/js/package_ui.js
@@ -49,7 +49,7 @@ var PackageUI = new Class({
             clone: true,
             revert: true,
             opacity: 0.4,
-            handle: ".package_drag",
+            handle: "#package_drag",
             onComplete: this.saveSort.bind(this)
         });
 
@@ -162,16 +162,16 @@ var Package = new Class({
     },
 
     parseElement: function() {
-        var imgs = this.ele.getElements('img');
+        var imgs = this.ele.getElements('span');
 
         this.name = this.ele.getElements('.name')[0];
         this.folder = this.ele.getElements('.folder')[0];
         this.password = this.ele.getElements('.password')[0];
 
-        imgs[1].addEvent('click', this.deletePackage.bind(this));
-        imgs[2].addEvent('click', this.restartPackage.bind(this));
-        imgs[3].addEvent('click', this.editPackage.bind(this));
-        imgs[4].addEvent('click', this.movePackage.bind(this));
+        imgs[3].addEvent('click', this.deletePackage.bind(this));
+        imgs[4].addEvent('click', this.restartPackage.bind(this));
+        imgs[5].addEvent('click', this.editPackage.bind(this));
+        imgs[6].addEvent('click', this.movePackage.bind(this));
 
         this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this));
 
@@ -197,14 +197,34 @@ var Package = new Class({
                     "margin-left": 0
                 }
             });
+            
+            if (link.icon == 'arrow_right.png'){
+                    link.icon = 'glyphicon glyphicon-arrow-right';
+            }
+            if (link.icon == 'status_downloading.png'){
+                    link.icon = 'glyphicon glyphicon-cloud-download';
+            }
+            if (link.icon == 'status_failed.png'){
+                    link.icon = 'glyphicon glyphicon-exclamation-sign';
+            }
+            if (link.icon == 'status_finished.png'){
+                    link.icon = 'glyphicon glyphicon-ok';
+            }
+            if (link.statusmsg == 'queued'){
+                    link.icon = 'glyphicon glyphicon-time';
+            }
+            if (link.icon == 'status_offline.png'){
+                    link.icon = 'glyphicon glyphicon-ban-circle';
+            }
+            
 
-            var html = "<span style='cursor: move' class='child_status sorthandle'><img src='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon});
-            html += "<span style='font-size: 15px'>{name}</span><br /><div class='child_secrow'>".substitute({"name": link.name});
-            html += "<span class='child_status'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
-            html += "<span class='child_status'>{format_size}</span>".substitute({"format_size": link.format_size});
-            html += "<span class='child_status'>{plugin}</span>&nbsp;&nbsp;".substitute({"plugin": link.plugin});
-            html += "<img title='{{_("Delete Link")}}' style='cursor: pointer;' width='10px' height='10px' src='/media/default/img/delete.png' />&nbsp;&nbsp;";
-            html += "<img title='{{_("Restart Link")}}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='/media/default/img/arrow_refresh.png' /></div>";
+            var html = "<span style='' class='child_status sorthandle'><span style='margin-right: 2px;' class='{icon}'></span></span>\n".substitute({"icon": link.icon});
+            html += "<span style='font-size: 18px; text-weight:bold'>{name}</span><br /><div class='child_secrow' style='margin-left: 21px; margin-bottom: 7px;'>".substitute({"name": link.name});
+            html += "<span class='child_status' style='font-size: 12px; color:#555'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
+            html += "<span class='child_status' style='font-size: 12px; color:#555'>{format_size}</span>".substitute({"format_size": link.format_size});
+            html += "<span class='child_status' style='font-size: 12px; color:#555'> {plugin}</span>&nbsp;&nbsp;".substitute({"plugin": link.plugin});
+            html += "<span class='glyphicon glyphicon-trash' title='{{_("Delete Link")}}' style='cursor: pointer;  font-size: 12px; color:#333;' ></span>&nbsp;&nbsp;";
+            html += "<span class='glyphicon glyphicon-repeat' title='{{_("Restart Link")}}' style='cursor: pointer; font-size: 12px; color:#333;' ></span></div>";
 
             var div = new Element("div", {
                 "id": "file_" + link.id,
@@ -235,8 +255,8 @@ var Package = new Class({
     registerLinkEvents: function() {
         this.ele.getElements('.child').each(function(child) {
             var lid = child.get('id').match(/[0-9]+/);
-            var imgs = child.getElements('.child_secrow img');
-            imgs[0].addEvent('click', function(e) {
+            var imgs = child.getElements('.child_secrow span');
+            imgs[3].addEvent('click', function(e) {
                 new Request({
                     method: 'get',
                     url: '/api/deleteFiles/[' + this + "]",
@@ -247,7 +267,7 @@ var Package = new Class({
                 }).send();
             }.bind(lid));
 
-            imgs[1].addEvent('click', function(e) {
+            imgs[4].addEvent('click', function(e) {
                 new Request({
                     method: 'get',
                     url: '/api/restartFile/' + this,
diff --git a/module/web/media/js/settings.js b/module/web/media/js/settings.js
index 9191fac72..be694d365 100644
--- a/module/web/media/js/settings.js
+++ b/module/web/media/js/settings.js
@@ -1,3 +1,3 @@
 {% autoescape true %}
-var SettingsUI,root;var __bind=function(a,b){return function(){return a.apply(b,arguments)}};root=this;window.addEvent("domready",function(){root.accountDialog=new MooDialog({destroyOnHide:false});root.accountDialog.setContent($("account_box"));new TinyTab($$("#toptabs li a"),$$("#tabs-body > span"));$$("ul.nav").each(function(a){return new MooDropMenu(a,{onOpen:function(b){return b.fade("in")},onClose:function(b){return b.fade("out")},onInitialize:function(b){return b.fade("hide").set("tween",{duration:500})}})});return new SettingsUI()});SettingsUI=(function(){function a(){var c,e,b,d;this.menu=$$("#general-menu li");this.menu.append($$("#plugin-menu li"));this.name=$("tabsback");this.general=$("general_form_content");this.plugin=$("plugin_form_content");d=this.menu;for(e=0,b=d.length;e<b;e++){c=d[e];c.addEvent("click",this.menuClick.bind(this))}$("general|submit").addEvent("click",this.configSubmit.bind(this));$("plugin|submit").addEvent("click",this.configSubmit.bind(this));$("account_add").addEvent("click",function(f){root.accountDialog.open();return f.stop()});$("account_reset").addEvent("click",function(f){return root.accountDialog.close()});$("account_add_button").addEvent("click",this.addAccount.bind(this));$("account_submit").addEvent("click",this.submitAccounts.bind(this))}a.prototype.menuClick=function(h){var c,b,g,f,d;d=h.target.get("id").split("|"),c=d[0],g=d[1];b=h.target.get("text");f=c==="general"?this.general:this.plugin;f.dissolve();return new Request({method:"get",url:"/json/load_config/"+c+"/"+g,onSuccess:__bind(function(e){f.set("html",e);f.reveal();return this.name.set("text",b)},this)}).send()};a.prototype.configSubmit=function(d){var c,b;c=d.target.get("id").split("|")[0];b=$(""+c+"_form");b.set("send",{method:"post",url:"/json/save_config/"+c,onSuccess:function(){return root.notify.alert('{{ _("Settings saved.")}}',{className:"success"})},onFailure:function(){return root.notify.alert('{{ _("Error occured.")}}',{className:"error"})}});b.send();return d.stop()};a.prototype.addAccount=function(c){var b;b=$("add_account_form");b.set("send",{method:"post",onSuccess:function(){return window.location.reload()},onFailure:function(){return root.notify.alert('{{_("Error occured.")}}',{className:"error"})}});b.send();return c.stop()};a.prototype.submitAccounts=function(c){var b;b=$("account_form");b.set("send",{method:"post",onSuccess:function(){return window.location.reload()},onFailure:function(){return root.notify.alert('{{ _("Error occured.") }}',{className:"error"})}});b.send();return c.stop()};return a})();
+var SettingsUI,root;var __bind=function(a,b){return function(){return a.apply(b,arguments)}};root=this;window.addEvent("domready",function(){root.accountDialog=new MooDialog({destroyOnHide:false});root.accountDialog.setContent($("account_box"));new TinyTab($$("#toptabs li"),$$("#tabs-body > span"));$$("ul.nav").each(function(a){return new MooDropMenu(a,{onOpen:function(b){return b.fade("in")},onClose:function(b){return b.fade("out")},onInitialize:function(b){return b.fade("show").set("tween",{duration:500})}})});return new SettingsUI()});SettingsUI=(function(){function a(){var c,e,b,d;this.menu=$$("#general-menu li");this.menu.append($$("#plugin-menu li"));this.name=$("tabsback");this.general=$("general_form_content");this.plugin=$("plugin_form_content");d=this.menu;for(e=0,b=d.length;e<b;e++){c=d[e];c.addEvent("click",this.menuClick.bind(this))}$("general|submit").addEvent("click",this.configSubmit.bind(this));$("plugin|submit").addEvent("click",this.configSubmit.bind(this));$("account_add").addEvent("click",function(f){root.accountDialog.open();return f.stop()});$("account_reset").addEvent("click",function(f){return root.accountDialog.close()});$("account_add_button").addEvent("click",this.addAccount.bind(this));$("account_submit").addEvent("click",this.submitAccounts.bind(this))}a.prototype.menuClick=function(h){var c,b,g,f,d;d=h.target.get("id").split("|"),c=d[0],g=d[1];b=h.target.get("text");f=c==="general"?this.general:this.plugin;f.dissolve();return new Request({method:"get",url:"/json/load_config/"+c+"/"+g,onSuccess:__bind(function(e){f.set("html",e);f.reveal();return this.name.set("text",b)},this)}).send()};a.prototype.configSubmit=function(d){var c,b;c=d.target.get("id").split("|")[0];b=$(""+c+"_form");b.set("send",{method:"post",url:"/json/save_config/"+c,onSuccess:function(){return root.notify.alert('{{ _("Settings saved.")}}',{className:"success"})},onFailure:function(){return root.notify.alert('{{ _("Error occured.")}}',{className:"error"})}});b.send();return d.stop()};a.prototype.addAccount=function(c){var b;b=$("add_account_form");b.set("send",{method:"post",onSuccess:function(){return window.location.reload()},onFailure:function(){return root.notify.alert('{{_("Error occured.")}}',{className:"error"})}});b.send();return c.stop()};a.prototype.submitAccounts=function(c){var b;b=$("account_form");b.set("send",{method:"post",onSuccess:function(){return window.location.reload()},onFailure:function(){return root.notify.alert('{{ _("Error occured.") }}',{className:"error"})}});b.send();return c.stop()};return a})();
 {% endautoescape %}
\ No newline at end of file
diff --git a/module/web/media/js/tinytab_static.js b/module/web/media/js/tinytab_static.js
index 6c38292f5..bde2bfa2b 100644
--- a/module/web/media/js/tinytab_static.js
+++ b/module/web/media/js/tinytab_static.js
@@ -26,7 +26,7 @@ provides: TinyTab
                 this.headers.push("");
             }
 			if(!opt) opt = {};
-			this.css = opt.selectedClass || 'selected'; 
+			this.css = opt.selectedClass || 'active'; 
 			this.select(this.tabs[0]);
 			tabs.each(function(el){
 				el.addEvent('click',function(e){
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index e42f75c3a..5933e108f 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -113,7 +113,7 @@
                       
                       </ul>
                     <ul class="nav navbar-nav navbar-right">
-                      <li> <span class="glyphicon glyphicon-user"></span>{{user.name}}</li>
+                      <li><a href="/info"  class="action info" rel="nofollow"><span class="glyphicon glyphicon-user"></span> {{user.name}}</a></li>
        		      {% if user.is_admin %}
        		      <li><a href="/admin" class="action profile" rel="nofollow"><span class="glyphicon glyphicon-cog"></span></a></li>
        		      {% endif %}
@@ -160,20 +160,12 @@
 
 <div id="body-wrapper" class="dokuwiki">
 
-<div id="content" lang="en" dir="ltr">
+<div id="content" style="width: 98%; margin-left:10px; margin-rigth:10px;" lang="en" dir="ltr">
 
-<h1>{% block subtitle %}pyLoad - {{_("Webinterface")}}{% endblock %}</h1>
+<h3>{% block subtitle %}pyLoad - {{_("Webinterface")}}{% endblock %}</h3>
 
 {% block statusbar %}
 {% endblock %}
-
-
-<br/>
-
-<div class="level1" style="clear:both">
-</div>
-<noscript><h1>Enable JavaScript to use the webinterface.</h1></noscript>
-
 {% for message in messages %}
 	<b><p>{{message}}</p></b>
 {% endfor %}
@@ -188,7 +180,7 @@
 
 	<hr style="clear: both;" />
 
-<div id="foot">&copy; 2008-2011 pyLoad Team
+<div id="foot" style="with: 98%; margin-left: 10px; margin-right:10px">&copy; 2008-2011 pyLoad Team
 <a href="#top" class="action top" accesskey="x"><span>{{_("Back to top")}}</span></a><br />
 <!--<div class="breadcrumbs"></div>-->
 
@@ -202,5 +194,6 @@
     {% block hidden %}
     {% endblock %}
 </div>
+<noscript><h1>Enable JavaScript to use the webinterface.</h1></noscript>
 </body>
 </html>
diff --git a/module/web/templates/default/downloads.html b/module/web/templates/default/downloads.html
index 450b8a102..d19fe969a 100644
--- a/module/web/templates/default/downloads.html
+++ b/module/web/templates/default/downloads.html
@@ -8,20 +8,20 @@
 
 {% block content %}
 
-<ul>
+<ul style="list-style-type: none;">
     {% for folder in files.folder %}
-    <li>
-        {{ folder.name }}
+    <li style="list-style-type: none;">
+        <span style="margin-right: 5px" class="glyphicon glyphicon-folder-close"></span>{{ folder.name }}
         <ul>
         {% for file in folder.files %}
-        <li><a href='get/{{ folder.path|escape }}/{{ file|escape }}'>{{file}}</a></li>
+        <li style="list-style-type: none;"><span style="margin-right: 5px" class="glyphicon glyphicon-file"></span><a href='get/{{ folder.path|escape }}/{{ file|escape }}'>{{file}}</a></li>
         {% endfor %}
         </ul>
     </li>
     {% endfor %}
     
     {% for file in files.files %}
-    <li> <a href='get/{{ file|escape }}'>{{ file }}</a></li>
+    <li style="list-style-type: none;"> <span style="margin-right: 5px" class="glyphicon glyphicon-file"></span><a href='get/{{ file|escape }}'>{{ file }}</a></li>
     {% endfor %}
 
 </ul>
diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html
index 7359e326c..89074dd26 100644
--- a/module/web/templates/default/home.html
+++ b/module/web/templates/default/home.html
@@ -77,6 +77,7 @@ var EntryManager = new Class({
                 
             }
             }, this)
+                
         }catch(e){
             //alert(e)
         }
@@ -105,20 +106,29 @@ var LinkEntry = new Class({
         },
         insert: function(item){
             try{
+                    
+
 
             this.elements = {
                 tr: new Element('tr', {
                 'html': '',
                 'styles':{
-                    'opacity': 0
+                    'opacity': 0,
                 }
                 }),
+                status: new Element('td', {
+                'html': '&nbsp;',
+                }),
+                statusspan: new Element('span', {
+                'html': item.statusmsg,
+                'class': 'label label-default',
+                        'styles':{
+                                
+                        }
+                }),
                 name: new Element('td', {
                 'html': item.name
                 }),
-                status: new Element('td', {
-                'html': item.statusmsg
-                }),
                 info: new Element('td', {
                 'html': item.info
                 }),
@@ -139,20 +149,35 @@ var LinkEntry = new Class({
                 }
                 }),
                 pgbTr: new Element('tr', {
-                'html':''
+                'html':'',
+                        'styles':{
+                            'border-top-color': '#fff',
+                        }
+                }),
+                progress: new Element('div', {
+                'html':'',
+                'class':'progress',
+                        'styles':{
+                            'margin-bottom': '0px',
+                        }
                 }),
                 pgb: new Element('div', {
-                'html': '&nbsp;',
+                'html':'',
+                'class':'progress-bar progress-bar-striped active',
+                'role':'progress',
                 'styles':{
-                    'height': '4px',
                     'width': item.percent+'%',
                     'background-color': '#ddd'
                 }
                 })
+                
             };
             
-            this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.bleft,new Element('td').adopt(this.elements.percent,this.elements.remove));
-            this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb));
+            
+            this.elements.status.adopt(this.elements.statusspan);
+            this.elements.progress.adopt(this.elements.pgb);
+            this.elements.tr.adopt(this.elements.status,this.elements.name,this.elements.info,this.elements.bleft,new Element('td').adopt(this.elements.percent,this.elements.remove));
+            this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.progress));
             this.initEffects();
             }catch(e){
                 alert(e)
@@ -171,15 +196,27 @@ var LinkEntry = new Class({
         },
         update: function(item){
                 this.elements.name.set('text', item.name);
-                this.elements.status.set('text', item.statusmsg);
+                this.elements.statusspan.set('text', item.statusmsg);
                 this.elements.info.set('text', item.info);
                 this.elements.bleft.set('text', item.format_size);
                 this.elements.percent.set('text', item.percent+ '% / '+ humanFileSize(item.size-item.bleft));
+                if (item.statusmsg == "waiting") {
+                        this.elements.statusspan.set('class', 'label label-warning')
+                } else if (item.statusmsg == "starting") {
+                        this.elements.statusspan.set('class', 'label label-info')
+                } else if (item.statusmsg == "downloading") {
+                        this.elements.statusspan.set('class', 'label label-success')
+                } else if (item.stausmsg == "extracting") {
+                        this.elements.statusspan.set('class', 'label label-primary')
+                } else {
+                        this.elements.statusspan.set('class', 'label label-default')
+                }
                 if(!operafix)
                 {
+                        
                     this.bar.start({
                         'width': item.percent,
-                        'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex()
+                        'background-color': [Math.round(120/100*item.percent),80,70].hsbToRgb().rgbToHex()
                     });
                 }
                 else
@@ -188,9 +225,10 @@ var LinkEntry = new Class({
                         'styles', {
                             'height': '4px',
                             'width': item.percent+'%',
-                            'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex(),
+                            'background-color': [Math.round(50/200*item.percent),0,200].hsbToRgb().rgbToHex(),
                          });
                 }
+                
         },
         remove: function(){
                 this.fade.start('opacity',0).chain(function(){this.elements.tr.dispose();}.bind(this));
@@ -198,57 +236,32 @@ var LinkEntry = new Class({
 
         }
     });
+    
+    
 </script>
-
-{% endblock %}
-
-{% block subtitle %}
-{{_("Active Downloads")}}
-{% endblock %}
-
-{% block menu %}
-<li class="selected">
-    <a href="/" title=""><img src="/media/default/img/head-menu-home.png" alt="" /> {{_("Home")}}</a>
-</li>
-<li>
-    <a href="/queue/" title=""><img src="/media/default/img/head-menu-queue.png" alt="" /> {{_("Queue")}}</a>
-</li>
-<li>
-    <a href="/collector/" title=""><img src="/media/default/img/head-menu-collector.png" alt="" /> {{_("Collector")}}</a>
-</li>
-<li>
-    <a href="/downloads/" title=""><img src="/media/default/img/head-menu-development.png" alt="" /> {{_("Downloads")}}</a>
-</li>
-{#<li>#}
-{#    <a href="/filemanager/" title=""><img src="/media/default/img/head-menu-download.png" alt="" /> {{_("FileManager")}}</a>#}
-{#</li>#}
-<li class="right">
-    <a href="/logs/"  class="action index" accesskey="x" rel="nofollow"><img src="/media/default/img/head-menu-index.png" alt="" />{{_("Logs")}}</a>
-</li>
-<li class="right">
-    <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="/media/default/img/head-menu-config.png" alt="" />{{_("Config")}}</a>
-</li>
 {% endblock %}
 
+{% block subtitle %}{{_("Active Downloads")}}{% endblock %}
 {% block content %}
-<table width="100%" class="queue">
+<table class="table" style="width:100%;">
     <thead>
   <tr class="header">
-    <th>{{_("Name")}}</th>
     <th>{{_("Status")}}</th>
+    <th>{{_("Name")}}</th>
     <th>{{_("Information")}}</th>
     <th>{{_("Size")}}</th>
     <th>{{_("Progress")}}</th>
   </tr>
     </thead>
+</br>
   <tbody id="LinksAktiv">
   
   {% for link in content %}
   <tr id="link_{{ link.id }}">
-    <td id="link_{{ link.id }}_name">{{ link.name }}</td>
-    <td id="link_{{ link.id }}_status">{{ link.status }}</td>
-    <td id="link_{{ link.id }}_info">{{ link.info }}</td>
-    <td id="link_{{ link.id }}_bleft">{{ link.format_size }}</td>
+          <td id="link_{{ link.id }}_status"><span  class="label label-{% if link.status == 'downloading' %}success{% endif %}{% if link.status == 'extracting' %}primary{% endif %}{% if link.status == 'starting' %}warning{% else %}default{% endif %}">{{ link.status }}</span></td>
+          <td id="link_{{ link.id }}_name">{{ link.name }}</td>
+          <td id="link_{{ link.id }}_info">{{ link.info }}</td>
+          <td id="link_{{ link.id }}_bleft">{{ link.format_size }}</td>
     <td>
         <span id="link_{{ link.id }}_percent">{{ link.percent }}% /{{ link.bleft }}</span>
         <img id="link_{{ link.id }}_remove" style="vertical-align: middle; margin-right: -20px; margin-left: 5px; margin-top: -2px; cursor:pointer;" src="media/default/img/control_cancel.png"/>
@@ -263,4 +276,5 @@ var LinkEntry = new Class({
   
   </tbody>
 </table>
-{% endblock %}
\ No newline at end of file
+</div>
+{% endblock %}
diff --git a/module/web/templates/default/logs.html b/module/web/templates/default/logs.html
index d6288df0e..f5444d94e 100644
--- a/module/web/templates/default/logs.html
+++ b/module/web/templates/default/logs.html
@@ -9,7 +9,7 @@
 {% block content %}
 <div style="clear: both;"></div>
 
-<div class="logpaginator"><a href="{{ "/logs/1" }}">&lt;&lt; {{_("Start")}}</a>  <a href="{{ "/logs/" + iprev|string }}">&lt; {{_("prev")}}</a>  <a href="{{ "/logs/" + inext|string }}">{{_("next")}} &gt;</a> <a href="/logs/">{{_("End")}} &gt;&gt;</a></div>
+<div class="logpaginator"><a href="{{ "/logs/1" }}"><span class="glyphicon glyphicon-fast-backward"></span></a>  <a href="{{ "/logs/" + iprev|string }}"><span class="glyphicon glyphicon-step-backward"></span></a>  <a href="{{ "/logs/" + inext|string }}"><span class="glyphicon glyphicon-step-forward"></span></a> <a href="/logs/"><span class="glyphicon glyphicon-fast-forward"></span></a></div>
 <div class="logperpage">
     <form id="logform1" action="" method="POST">
         <label for="reversed">Reversed:</label>
@@ -33,8 +33,8 @@
 </div>
 <div class="logform">
 <form id="logform2" action="" method="POST">
-    <label for="from">Jump to time:</label><input type="text" name="from" size="15" value="{{from}}"/>
-    <input type="submit" value="ok" />
+    <label for="from">Jump to time:</label><input style="float:left; width:80%;" class="form-control" type="text" name="from" size="15" value="{{from}}"/>
+    <input style="float:left; width:19%; margin-left: 1%;" class="btn btn-primary" type="submit" value="ok" />
 </form>
 </div>
 <div style="clear: both; height: 10px;">&nbsp; </div>
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index 046abbe49..a77086a9e 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -17,52 +17,53 @@ document.addEvent("domready", function(){
     {% set name = _("Collector") %}
 {% endif %}
 
-{% block title %}{{name}} - {{super()}} {% endblock %}
-{% block subtitle %}{{name}}{% endblock %}
-
 {% block pageactions %}
-<ul id="page-actions-more">
-    <li id="del_finished"><a style="padding: 0; font-weight: bold;" href="#">{{_("Delete Finished")}}</a></li>
-    <li id="restart_failed"><a style="padding: 0; font-weight: bold;" href="#">{{_("Restart Failed")}}</a></li>
-</ul>
+<div class="btn-group btn-group-sm" role="group" aria-label="..." style="margin-left:10px;">
+        <button id="del_finished" class="btn btn-default"><span>{{_("Delete Finished")}}</span></button>
+        <button id="restart_failed" class="btn btn-default"><span>{{_("Restart Failed")}}</span></button>
+</div>
 {% endblock %}
 
+{% block title %}{{name}} - {{super()}} {% endblock %}
+{% block subtitle %}{{name}}{% endblock %}
+
 {% block content %}
 {% autoescape true %}
 
 <ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">
 {% for package in content %}
     <li>
-<div id="package_{{package.pid}}" class="package">
+<div id="package_{{package.pid}}" >
     <div class="order" style="display: none;">{{ package.order }}</div>
     
-    <div class="packagename" style="cursor: pointer">
-        <img class="package_drag" src="/media/default/img/folder.png" style="cursor: move; margin-bottom: -2px">
-        <span class="name">{{package.name}}</span>
+    <div class="packagename" style="float:left; width: 50%; cursor: pointer">
+        <span class="glyphicon glyphicon-folder-close"></span>
+        <span class="name" style="font-size: 16px; font-weight: bold;">{{package.name }}</span>
         &nbsp;&nbsp;
         <span class="buttons" style="opacity:0">
-        <img title="{{_("Delete Package")}}" style="cursor: pointer" width="12px" height="12px" src="/media/default/img/delete.png" />
+        <span class="glyphicon glyphicon-trash" title="{{_("Delete Package")}}" style="cursor: pointer" width="12px" height="12px" src="/media/default/img/delete.png" /></span>
         &nbsp;&nbsp;
-        <img title="{{_("Restart Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/arrow_refresh.png" />
+        <span class="glyphicon glyphicon-repeat" title="{{_("Restart Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/arrow_refresh.png" /></span>
         &nbsp;&nbsp;
-        <img title="{{_("Edit Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/pencil.png" />
+         <span class="glyphicon glyphicon-pencil" title="{{_("Edit Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/pencil.png" /></span>
         &nbsp;&nbsp;
-        <img title="{{_("Move Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/package_go.png" />
+         <span class="glyphicon glyphicon-transfer" title="{{_("Move Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/package_go.png" /></span>
         </span>
     </div>
     {% set progress = (package.linksdone * 100) / package.linkstotal %}
 
-    <div id="progress" style="border-radius: 4px; border: 1px solid #AAAAAA; width: 50%; height: 1em">
-        <div style="width: {{ progress }}%; height: 100%; background-color: #add8e6;"></div>
-        <label style="font-size: 0.8em; font-weight: bold; padding-left: 5px; position: relative; top: -17px">
+    <div id="progress" class="progress" style="float:left; width: 50%; margin-top: -5px;">
+        <div class="progress-bar" role="progressbar" style="width: {{ progress }}%; height: 100%;">
+                <label>
+                {{ package.linksdone }} / {{ package.linkstotal }}</label>
+        </div>
+        <label style="padding-right: 5px ;float: right;">
         {{ package.sizedone|formatsize }} / {{ package.sizetotal|formatsize }}</label>
-        <label style="font-size: 0.8em; font-weight: bold; padding-right: 5px ;float: right; position: relative; top: -17px">
-        {{ package.linksdone }} / {{ package.linkstotal }}</label>
         </div>
     <div style="clear: both; margin-bottom: -10px"></div>
 
-    <div id="children_{{package.pid}}" style="display: none;" class="children">
-    <span class="child_secrow">{{_("Folder:")}} <span class="folder">{{package.folder}}</span> | {{_("Password:")}} <span class="password">{{package.password}}</span></span>
+    <div id="children_{{package.pid}}" style="display: none; margin-bottom: 15px;" class="children">
+    <span class="child_secrow" style="margin-bottom: 30px; margin-top: 5px;">{{_("Folder:")}} <span class="folder">{{package.folder}}</span> | {{_("Password:")}} <span class="password">{{package.password}}</span></span>
     <ul id="sort_children_{{package.pid}}" style="list-style: none; padding-left: 0">
     </ul>
     </div>
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index a4443025a..cd9b835da 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -12,10 +12,10 @@
 
 {% block content %}
 
-    <ul id="toptabs" class="tabs">
-            <li><a class="selected" href="#">{{ _("General") }}</a></li>
-            <li><a href="#">{{ _("Plugins") }}</a></li>
-            <li><a href="#">{{ _("Accounts") }}</a></li>
+    <ul id="toptabs" class="nav nav-tabs">
+            <li role="presentation" class"active"><a href="#">{{ _("General") }}</a></li>
+            <li role="presentation"><a href="#">{{ _("Plugins") }}</a></li>
+            <li role="presentation"><a href="#">{{ _("Accounts") }}</a></li>
     </ul>
 
     <div id="tabsback" style="height: 20px; padding-left: 150px; color: white; font-weight: bold;">
@@ -25,56 +25,65 @@
         <span id="tabs-body">
             <!-- General -->
             <span id="general" class="active tabContent">
-                <ul class="nav tabs">
+                <ul class="nav tabs" style="width: 20%; float:left;">
                     <li class>
-                        <a>Menu</a>
-                        <ul id="general-menu">
+                        <div class="panel panel-default" >
+                          <div class="panel-body"  style="overlow-y: scroll; ">
+                           
+                          
+                        <ul id="general-menu" style=" float: left;">
                             {% for entry,name in conf.general %}
                                 <nobr>
-                                    <li id="general|{{ entry }}">{{ name }}</li>
+                                    <li style="list-style-type: none;" id="general|{{ entry }}">{{ name }}</li>
                                 </nobr>
                                 <br>
                             {% endfor %}
                         </ul>
+                          </div>
+                        </div>
                     </li>
                 </ul>
 
-                <form id="general_form" action="" method="POST" autocomplete="off">
+                <form style="float: left; width:40%; margin-left: 20%; diplay:block; position: fixed; overflow: auto;" id="general_form" action="" method="POST" autocomplete="off">
                     <span id="general_form_content">
                     <br>
                     <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
                     <br>
                     </span>
 
-                  <input id="general|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                  <input class="btn btn-primary" style="float:right; margin-right: 10px;" id="general|submit"  type="submit" value="{{_("Submit")}}"/>
                 </form>
             </span>
 
             <!-- Plugins -->
             <span id="plugins" class="tabContent">
-                <ul class="nav tabs">
+                <ul class="nav tabs" style="width: 20%; float:left; hight:300px;">
                     <li class>
-                        <a>Menu</a>
-                        <ul id="plugin-menu">
+                            <div class="panel panel-default" style="overflow-y: scroll; ">
+                              <div class="panel-body"  >
+                    
+                        <ul id="plugin-menu" style=" float: left;">
                             {% for entry,name in conf.plugin %}
                                 <nobr>
-                                    <li id="plugin|{{ entry }}">{{ name }}</li>
+                                    <li style="list-style-type: none;" id="plugin|{{ entry }}">{{ name }}</li>
                                 </nobr>
                                 <br>
                             {% endfor %}
                         </ul>
+                        <div>
+                        </div>
                     </li>
                 </ul>
 
 
-                 <form id="plugin_form" action="" method="POST" autocomplete="off">
+                 <form style="float: left; width:40%; margin-left: 10px;" id="plugin_form" action="" method="POST" autocomplete="off">
 
-                     <span id="plugin_form_content">
+                     <span id="plugin_form_content" style:"position: static;">
                     <br>
                     <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
                     <br>
                          </span>
-                     <input id="plugin|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                     <input class="btn btn-primary" style="float:right; margin-right: 10px;" id="plugin|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
                 </form>
 
             </span>
@@ -83,7 +92,7 @@
             <span id="accounts" class="tabContent">
             <form id="account_form" action="/json/update_accounts" method="POST">
 
-                        <table class="settable wide">
+                        <table class="settable wide table">
 
                         <thead>
                         <tr>
@@ -163,9 +172,10 @@
                                        </tr>
                                 {% endfor %}
                             </table>
+            <button id="account_add" style="margin-left: 5px;" type="submit" class="btn btn-default">&nbsp;<span class="glyphicon glyphicon-plus"></button>
 
-            <button id="account_submit" type="submit" class="styled_button">{{_("Submit")}}</button>
-            <button id="account_add" style="margin-left: 0" type="submit" class="styled_button">{{_("Add")}}</button>
+            <button id="account_submit" type="submit" class="btn btn-primary" >{{_("Submit")}}</button>
+            
             </form>
             </span>
         </span>
diff --git a/module/web/templates/default/settings_item.html b/module/web/templates/default/settings_item.html
index 813383343..b760aaa02 100644
--- a/module/web/templates/default/settings_item.html
+++ b/module/web/templates/default/settings_item.html
@@ -1,4 +1,5 @@
-<table class="settable">
+<table class="settable table">
+        
     {% if section.outline %}
     <tr><th colspan="2">{{ section.outline }}</th></tr>
     {% endif %}
@@ -23,26 +24,27 @@
                             {% endfor %}
                         </select>
                         {% elif option.type == "folder" %}
-                        <input name="{{skey}}|{{okey}}" type="text"
+                        <input style="float: right; margin-bottom: 5px;" class="form-control" name="{{skey}}|{{okey}}" type="text"
                                id="{{skey}}|{{okey}}" value="{{option.value}}"/>
-                        <input name="browsebutton" type="button"
+                        <input style="float: right;" class="form-control btn btn-primary" name="browsebutton" type="button"
                                onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); pathchooser = window.open('{% if option.value %}{{ "/pathchooser/" + option.value|quotepath }}{% else %}{{ pathroot }}{% endif %}', 'pathchooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); pathchooser.ifield = ifield; window.ifield = ifield;"
                                value="{{_("Browse")}}"/>
                         {% elif option.type == "file" %}
-                        <input name="{{skey}}|{{okey}}" type="text"
+                        <input style="float: right;  margin-bottom: 5px;" class="form-control" name="{{skey}}|{{okey}}" type="text"
                                id="{{skey}}|{{okey}}" value="{{option.value}}"/>
-                        <input name="browsebutton" type="button"
+                        <input style="float: right;" class="form-control btn btn-primary" name="browsebutton" type="button"
                                onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); filechooser = window.open('{% if option.value %}{{ "/filechooser/" + option.value|quotepath }}{% else %}{{ fileroot }}{% endif %}', 'filechooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); filechooser.ifield = ifield; window.ifield = ifield;"
                                value="{{_("Browse")}}"/>
                         {% elif option.type == "password" %}
-                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
+                        <input style="float: right;" class="form-control" id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
                                type="password" value="{{option.value}}"/>
                     {% else %}
-                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
+                        <input style="float: right;" class="form-control" id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
                                type="text" value="{{option.value}}"/>
                     {% endif %}
                 </td>
             </tr>
         {% endif %}
     {% endfor %}
+
 </table>
\ No newline at end of file
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index a11323fe0..ff8a307bc 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -1,46 +1,46 @@
 <iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>
 
-<div id="add_box" class="window_box">
+<div id="add_box" class="from-group">
 <form id="add_form" action="/json/add_package" method="POST" enctype="multipart/form-data">
-<h1>{{_("Add Package")}}</h1>
+<h3>{{_("Add Package")}}</h3>
 <p>{{_("Paste your links or upload a container.")}}</p>
-<label for="add_name">{{_("Name")}}
-<span class="small">{{_("The name of the new package.")}}</span>
-</label>
-<input id="add_name" name="add_name" type="text" size="20" />
-
-<label for="add_links">{{_("Links")}}
-<span class="small">{{_("Paste your links here or any text and press the filter button.")}}</span>
-<span class="small"> {{ _("Filter urls") }}
-<img alt="URIParsing" Title="Parse Uri" src="/media/default/img/parseUri.png" style="cursor:pointer; vertical-align: text-bottom;" onclick="parseUri()"/>
-</span>
-
-</label>
-<textarea rows="5" name="add_links" id="add_links"></textarea>
-
-<label for="add_password">{{_("Password")}}
-    <span class="small">{{_("Password for RAR-Archive")}}</span>
-</label>
-<input id="add_password" name="add_password" type="text" size="20">
-
-<label>{{_("File")}}
-<span class="small">{{_("Upload a container.")}}</span>
-</label>
-<input type="file" name="add_file" id="add_file"/>
-
-<label for="add_dest">{{_("Destination")}}
-</label>
-<span class="cont">
-    {{_("Queue")}}
-    <input type="radio" name="add_dest" id="add_dest" value="1" checked="checked"/>
-    {{_("Collector")}}
-    <input type="radio" name="add_dest" id="add_dest2" value="0"/>
-</span>
+<div class="form-group">
+    <label for="add_name">{{_("Name")}}</label>
+    <input id="add_name" class="form-control" name="add_name" type="text" size="20" />
+    <p class="help-block">{{_("The name of the new package.")}}</p>
+  </div>
+  <div class="form-group">
+    <label for="add_links">{{_("Links")}}</label>
+ </div>
+ <div>
+ <textarea rows="5" style="width: 100%" name="add_links" id="add_links"></textarea>
+</div>
+<div class="form-group">
+    <p class="help-block">{{_("The name of the new package.")}} {{ _("Filter urls") }} <span class=" glyphicon glyphicon-filter" onclick="parseUri()"></span></p>
+  </div>
+  <div class="form-group">
+    <label for="add_password">{{_("Password")}}</label>
+    <input id="add_password" class="form-control" name="add_password" type="text" size="20">
+    <p class="help-block">{{_("Password for RAR-Archive")}}</p>
+  </div>
+  <div class="form-group">
+    <label>{{_("File")}}</label>
+    <input type="file" name="add_file" id="add_file"/>
+    <p class="help-block">{{_("Upload a container.")}}</p>
+  </div>
+  <div class="form-group">
+    <label for="add_dest">{{_("Destination")}}</label>
+    <span class="cont">
+        {{_("Queue")}}
+        <input type="radio" name="add_dest" id="add_dest" value="1" checked="checked"/>
+        {{_("Collector")}}
+        <input type="radio" name="add_dest" id="add_dest2" value="0"/>
+    </span>
+  </div>
+  <button type="submit" class="btn btn-primary" style="float: right; margin-right: 5px;">{{_("Add Package")}}</button>
+  <button id="add_reset" class="btn btn-default" style="float: right; margin-right: 5px;" type="reset">{{_("Reset")}}</button>
+</form>
 
-<button type="submit">{{_("Add Package")}}</button>
-<button id="add_reset" style="margin-left:0;" type="reset">{{_("Reset")}}</button>
-<div class="spacer"></div>
 
-</form>
 
 </div>
\ No newline at end of file