From 69200db3473588f6df334836c6f249f489575888 Mon Sep 17 00:00:00 2001
From: mariusbaumann <baumann.marius@gmail.com>
Date: Sat, 3 Jan 2015 07:12:50 +0100
Subject: Completely new Design v1

Some bugs heve to be fexed next days
---
 module/web/templates/default/base.html          |  17 ++--
 module/web/templates/default/downloads.html     |  10 +--
 module/web/templates/default/home.html          | 110 +++++++++++++-----------
 module/web/templates/default/logs.html          |   6 +-
 module/web/templates/default/queue.html         |  45 +++++-----
 module/web/templates/default/settings.html      |  50 ++++++-----
 module/web/templates/default/settings_item.html |  16 ++--
 module/web/templates/default/window.html        |  76 ++++++++--------
 8 files changed, 175 insertions(+), 155 deletions(-)

(limited to 'module/web/templates/default')

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
-- 
cgit v1.2.3