restructured webui to single-page-app, removed jinja

27 files changed, 857 insertions, 0 deletions

diff --git a/module/web/app/templates/default/accounts/account.html b/module/web/app/templates/default/accounts/account.html
new file mode 100644
index 000000000..c2ded16f6
--- /dev/null
+++ b/module/web/app/templates/default/accounts/account.html
@@ -0,0 +1,10 @@
+<td><% plugin %></td>
+<td><% loginname %></td>
+<td><% valid %></td>
+<td><% premium %></td>
+<td><% trafficleft %></td>
+<td><% shared %></td>
+<td><% activated %></td>
+<td>
+    <button type="button" class="btn btn-danger">Delete</button>
+</td>
\ No newline at end of file
diff --git a/module/web/app/templates/default/accounts/actionbar.html b/module/web/app/templates/default/accounts/actionbar.html
new file mode 100644
index 000000000..f4652ec42
--- /dev/null
+++ b/module/web/app/templates/default/accounts/actionbar.html
@@ -0,0 +1,5 @@
+<div class="span2 offset1">
+</div>
+<span class="span9">
+    <button class="btn btn-small btn-blue btn-add">Add Account</button>
+</span>
\ No newline at end of file
diff --git a/module/web/app/templates/default/accounts/layout.html b/module/web/app/templates/default/accounts/layout.html
new file mode 100644
index 000000000..e6627500d
--- /dev/null
+++ b/module/web/app/templates/default/accounts/layout.html
@@ -0,0 +1,19 @@
+<!--{#  TODO: responsive layout instead of table  #}-->
+<div class="span10 offset2">
+    <table class="table table-striped">
+        <thead>
+        <tr>
+            <th>Plugin</th>
+            <th>Name</th>
+            <th>Valid</th>
+            <th>Premium</th>
+            <th>Traffic</th>
+            <th>Shared</th>
+            <th>Activated</th>
+            <th>Delete</th>
+        </tr>
+        </thead>
+        <tbody class="account-list">
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/admin.html b/module/web/app/templates/default/admin.html
new file mode 100644
index 000000000..2eb90d7e0
--- /dev/null
+++ b/module/web/app/templates/default/admin.html
@@ -0,0 +1,223 @@
+{% extends 'default/base.html' %}
+
+{% block title %}{{ _("Admin") }} - {{ super() }} {% endblock %}
+{% block subtitle %}{{ _("Admin") }}
+{% endblock %}
+
+{% block css %}
+    <link href="static/css/default/admin.less" rel="stylesheet/less" type="text/css" media="screen"/>
+    <link rel="stylesheet" type="text/css" href="static/css/fontawesome.css" />
+{% endblock %}
+
+{% block require %}
+{% endblock %}
+
+{% block content %}
+    <div class="container-fluid">
+      <div class="row-fluid">
+        <div id="userlist" class="span10">
+            <div class="page-header">
+                <h1>Admin Bereich
+                <small>Userverwaltung, Systeminfos</small>
+                    <a id="btn_newuser" class="btn btn-warning btn-large" type="button"><i class="iconf-plus-sign iconf-large "></i></a>
+                </h1>
+                
+
+                
+            </div>
+
+            <div class="dropdown">        
+                <span class="label name">User</span>
+                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="iconf-user iconf-8x"></i></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                    <li><a tabindex="-1" id="useredit" href="#" role="button" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true"><i class="icon-pencil"></i>Edit</a></li>
+                    <li><a tabindex="-1" href="#"><i class="icon-tasks"></i>Statistik</a></li>
+                    <li class="divider"></li>
+                    <li><a tabindex="-1" href="#"><i class="icon-remove-sign"></i>Delete</a></li>
+                </ul>
+            </div>
+
+            <div id="event-modal" class="modal hide fade">
+                <div class="modal-header">
+                    <a class="close" id="useredit_close" href="#">x</a>
+                    <h3>User Settings</h3>
+                </div>
+                <div class="modal-body">
+                    <p>Set password and permissions</p>
+                    <table style="width:100%;" class="table ">
+                        <td>
+                            <div class="input-prepend">
+                                <span class="add-on"><i class="iconf-key"></i></span>
+                                <input class="span2" style="min-width:120px;" id="prependedInput" type="text" placeholder="New Password">
+                            </div>
+                            <div class="input-prepend">
+                                <span class="add-on"><i class="icon-repeat"></i></span>
+                                <input class="span2" style="min-width:120px;" id="prependedInput" type="text" placeholder="Repeat">
+                            </div>
+                            <br>
+                            <br>
+                            <br>
+                            <form class="form-horizontal">
+                                <div class="control-group">
+                                    <label class="control-label" for="onoff">Administrator</label>
+
+                                    <div class="controls">
+                                        <div class="btn-group" id="onoff" data-toggle="buttons-radio">
+                                            <button type="button" class="btn btn-primary" >On</button>
+                                            <button type="button" class="btn btn-primary active">Off</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </td>
+                        <td>
+                            <div id="user_permissions">
+                                <h3>Permissions</h3>
+                                <div class="btn-group btn-group-vertical" data-toggle="buttons-checkbox">
+                                    <button type="button" class="btn btn-inverse userperm">Accounts</button>
+                                    <button type="button" class="btn btn-inverse userperm active">Add</button>
+                                    <button type="button" class="btn btn-inverse userperm">Delete</button>
+                                    <button type="button" class="btn btn-inverse userperm active">Download</button>
+                                    <button type="button" class="btn btn-inverse userperm active">List</button>
+                                    <button type="button" class="btn btn-inverse userperm">Logs</button>
+                                    <button type="button" class="btn btn-inverse userperm">Modify</button>
+                                    <button type="button" class="btn btn-inverse userperm">Settings</button>
+                                    <button type="button" class="btn btn-inverse userperm active">Status</button>
+                                </div>
+                            </div>
+                        </td>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <a class="btn btn-primary" id="useredit_save"href="#">Save</a>
+                    
+                </div>
+            </div>
+
+
+    
+        </div>
+
+        <div class="span2">
+            <br>
+            <h2>Support</h2>
+            <table>
+                <tr>
+                    <td>
+                        <i class="icon-globe"></i>
+                    </td>
+                    <td>
+                        <a href="#">Wiki |</a>
+                        <a href="#">Forum |</a>
+                        <a href="#">Chat</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <i class="icon-book"></i>
+                    </td>
+                    <td>
+                        <a href="#">Documentation</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <i class="icon-fire"></i>
+                    </td>
+                    <td>
+                        <a href="#">Development</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <i class="icon-bullhorn"></i>
+                    </td>
+                    <td>
+                        <a href="#">Issue Tracker</a>
+                    </td>
+                </tr>
+            </table>
+            <br>
+            <a href="#" class="btn btn-inverse" id="info" rel="popover"  data-content="<table class='table table-striped'>
+                <tbody>
+                    <tr>
+                        <td>Python:</td>
+                        <td>2.6.4 </td>
+                    </tr>
+                    <tr>
+                        <td>Betriebssystem:</td>
+                        <td>nt win32</td>
+                    </tr>
+                    <tr>
+                        <td>pyLoad Version:</td>
+                        <td>0.4.9</td>
+                    </tr>
+                    <tr>
+                        <td>Installationsordner:</td>
+                        <td>C:\pyLoad</td>
+                    </tr>
+                    <tr>
+                        <td>Konfigurationsordner:</td>
+                        <td>C:\Users\Marvin\pyload</td>
+                    </tr>
+                    <tr>
+                        <td>Downloadordner:</td>
+                        <td>C:\Users\Marvin\new</td>
+                    </tr>
+                    <tr>
+                        <td>HDD:</td>
+                        <td>1.67 TiB <div class='progress progress-striped active'>
+  <div class='bar' style='width: 40%;'></div>
+</div></td>
+                    </tr>
+                    <tr>
+                        <td>Sprache:</td>
+                        <td>de</td>
+                    </tr>
+                    <tr>
+                        <td>Webinterface Port:</td>
+                        <td>8000</td>
+                    </tr>
+                    <tr>
+                        <td>Remote Interface Port:</td>
+                        <td>7227</td>
+                    </tr>
+                </tbody>
+            </table>" title="Systeminformationen">System</a>
+            
+        </div>
+      </div>
+    </div>
+   
+    <script src="static/js/libs/jquery-1.9.0.js"></script>
+    {##}
+    <script src="static/js/libs/bootstrap-2.2.2.js"></script>
+    <script type="text/javascript">
+        $('#info').popover({
+            placement: 'left',
+            trigger: 'click',
+            html:'true',
+        });
+        
+            $('.dropdown-toggle').dropdown();
+
+            $("#btn_newuser").click(function() {
+                 
+                 str = "<div class='dropdown1'><span class='label name'>User</span><a class='dropdown-toggle' data-toggle='dropdown1' href='#'><i class='iconf-user iconf-8x'></i></a><ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'><li><a tabindex='-1' href='#'>Action</a></li><li><a tabindex='-1' href='#'>Another action</a></li><li><a tabindex='-1' href='#'>Something else here</a></li><li class='divider'></li><li><a tabindex='-1' href='#'>Separated link</a></li></ul></div>";
+
+            $("#userlist").append(str);
+
+            });
+
+            $("#useredit").click(function() {
+                $('#event-modal').modal();
+            });
+            $("#useredit_close").click(function() {
+                $('#event-modal').modal('hide');
+            });
+            $("#useredit_save").click(function() {
+                $('#event-modal').modal('hide');
+            });
+
+    </script>
+{% endblock %} 
\ No newline at end of file
diff --git a/module/web/app/templates/default/dashboard/actionbar.html b/module/web/app/templates/default/dashboard/actionbar.html
new file mode 100644
index 000000000..815d4593c
--- /dev/null
+++ b/module/web/app/templates/default/dashboard/actionbar.html
@@ -0,0 +1,54 @@
+<div class="span2 offset1">
+</div>
+<ul class="actionbar nav nav-pills span9">
+    <li>
+        <ul class="breadcrumb">
+            <li><a href="#">Local</a> <span class="divider">/</span></li>
+            <li class="active"></li>
+        </ul>
+    </li>
+
+    <li style="float: right;">
+        <form class="form-search" action="#">
+            <div class="input-append">
+                <input type="text" class="search-query" style="width: 120px">
+                <button type="submit" class="btn">Search</button>
+            </div>
+        </form>
+    </li>
+    <li style="float: right">
+        <a href="#"><i class="icon-check-empty btn-check"></i></a>
+    </li>
+    <li class="dropdown" style="float: right;">
+        <a class="dropdown-toggle type"
+           data-toggle="dropdown"
+           href="#">
+            Type
+            <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+            <li><a class="filter-type" data-type="2" href="#"><i class="icon-ok"></i>&nbsp;Audio</a></li>
+            <li><a class="filter-type" data-type="4" href="#"><i class="icon-ok"></i>&nbsp;Image</a></li>
+            <li><a class="filter-type" data-type="8" href="#"><i class="icon-ok"></i>&nbsp;Video</a></li>
+            <li><a class="filter-type" data-type="16" href="#"><i class="icon-ok"></i>&nbsp;Document</a></li>
+            <li><a class="filter-type" data-type="32" href="#"><i class="icon-remove"></i>&nbsp;Archive</a></li>
+            <li><a class="filter-type" data-type="1" href="#"><i class="icon-remove"></i>&nbsp;Other</a></li>
+        </ul>
+    </li>
+    <li class="dropdown" style="float: right;">
+        <a class="dropdown-toggle"
+           data-toggle="dropdown"
+           href="#">
+            <span class="state">
+                All
+            </span>
+            <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+            <li><a class="filter-state" data-state="0" href="#">All</a></li>
+            <li><a class="filter-state" data-state="1" href="#">Finished</a></li>
+            <li><a class="filter-state" data-state="2" href="#">Unfinished</a></li>
+            <li><a class="filter-state" data-state="3" href="#">Failed</a></li>
+        </ul>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dashboard/file.html b/module/web/app/templates/default/dashboard/file.html
new file mode 100644
index 000000000..6256254da
--- /dev/null
+++ b/module/web/app/templates/default/dashboard/file.html
@@ -0,0 +1,34 @@
+<div class="file-row first span6">
+    <i class="checkbox"></i>&nbsp;
+        <span class="name">
+        <% name %>
+        </span>
+</div>
+<div class="file-row second span3 <% fileClass this %>">
+    <% fileStatus this %>
+</div>
+
+<div class="file-row third span3 pull-right">
+    <i class="<% fileIcon media %>"></i>&nbsp;
+    <% formatSize size %>
+        <span class="pull-right">
+            <img src="<% pluginIcon download.plugin %>"/>
+            <% download.plugin %>&nbsp;
+            <i class="icon-chevron-down" data-toggle="dropdown"></i>
+            <ul class="dropdown-menu" role="menu">
+                <li><a href="#" class="btn-delete"><i class="icon-trash"></i> Delete</a></li>
+                <li><a href="#" class="btn-restart"><i class="icon-refresh"></i> Restart</a></li>
+                <!--{# TODO: only show when finished #}-->
+                <li><a href="download/<% fid %>" target="_blank" class="btn-dowload"><i class="icon-download"></i>
+                    Download</a></li>
+                <li><a href="#" class="btn-share"><i class="icon-share"></i> Share</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-submenu pull-left">
+                    <a>Addons</a>
+                    <ul class="dropdown-menu">
+                        <li><a>Test</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </span>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dashboard/layout.html b/module/web/app/templates/default/dashboard/layout.html
new file mode 100644
index 000000000..945d11762
--- /dev/null
+++ b/module/web/app/templates/default/dashboard/layout.html
@@ -0,0 +1,35 @@
+<div class="span3">
+    <div class="sidebar-header">
+        <i class="icon-hdd"></i> Local
+        <div class="pull-right" style="font-size: medium; line-height: normal">
+            <i class="icon-chevron-down" style="font-size: 20px"></i>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+    <ul class="package-list">
+
+    </ul>
+    <div class="sidebar-header">
+        <i class="icon-group"></i> Shared
+    </div>
+    <ul class="package-list">
+        <li>Content from</li>
+        <li>Other user</li>
+        <li>which they shared</li>
+    </ul>
+    <div class="sidebar-header">
+        <i class="icon-sitemap"></i> Remote
+    </div>
+    <ul>
+        <li>Content from</li>
+        <li>remote sites</li>
+        <li>mega</li>
+        <li>dropbox</li>
+        <li>other pyloads</li>
+    </ul>
+</div>
+<div class="span9">
+    <ul class="file-list">
+
+    </ul>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dashboard/package.html b/module/web/app/templates/default/dashboard/package.html
new file mode 100644
index 000000000..c0690a9bf
--- /dev/null
+++ b/module/web/app/templates/default/dashboard/package.html
@@ -0,0 +1,50 @@
+<%= if selected %>
+    <i class="icon-check select"></i>
+    <% else %>
+    <i class="icon-check-empty select"></i>
+    <%/if%>
+    <span class="package-name">
+    <% name %>
+    </span>
+
+    <div class="package-frame">
+        <div class="tag-area">
+            <span class="badge badge-success"><i class="icon-tag"></i>video</span>
+            <span class="badge badge-success badge-ghost"><i class="icon-tag"></i> Add Tag</span>
+        </div>
+        <div class="package-indicator">
+            <i class="icon-plus-sign btn-move" data-toggle="tooltip" title="Move files here"></i>
+            <i class="icon-pause" data-toggle="tooltip" title="Pause Package"></i>
+            <i class="icon-refresh" data-toggle="tooltip" title="Restart Package"></i>
+            <%= if shared %>
+            <i class="icon-eye-open" data-toggle="tooltip" title="Package is public"></i>
+            <% else %>
+            <i class="icon-eye-close" data-toggle="tooltip" title="Package is private"></i>
+            <%/if%>
+            <i class="icon-chevron-down" data-toggle="dropdown">
+            </i>
+            <ul class="dropdown-menu" role="menu">
+                <li><a href="#" class="btn-open"><i class="icon-folder-open-alt"></i> Open</a></li>
+                <li><a href="#"><i class="icon-plus-sign"></i> Add links</a></li>
+                <li><a href="#"><i class="icon-edit"></i> Details</a></li>
+                <li><a href="#" class="btn-delete"><i class="icon-trash"></i> Delete</a></li>
+                <li><a href="#" class="btn-recheck"><i class="icon-refresh"></i> Recheck</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-submenu">
+                    <a>Addons</a>
+                    <ul class="dropdown-menu">
+                        <li><a>Test</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+        <div class="progress">
+            <span style="position: absolute; left: 5px">
+                <% stats.linksdone %> / <% stats.linkstotal %>
+            </span>
+            <div class="bar bar-info" style="width: <% percent %>%"></div>
+            <span style="position: absolute; right: 5px">
+                    <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>
+            </span>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dashboard/select.html b/module/web/app/templates/default/dashboard/select.html
new file mode 100644
index 000000000..73ea391cd
--- /dev/null
+++ b/module/web/app/templates/default/dashboard/select.html
@@ -0,0 +1,11 @@
+<i class="icon-check" data-toggle="tooltip" title="Deselect"></i>&nbsp;
+<%= if packs %><% packs %> package(s)<%/if %>
+<%= if files %>
+<%= if packs %>, <%/if %>
+<% files %> file(s)
+<%/if %>
+selected
+&nbsp;|&nbsp;
+<i class="icon-pause" data-toggle="tooltip" title="Pause"></i>&nbsp;
+<i class="icon-trash" data-toggle="tooltip" title="Delete"></i>&nbsp;
+<i class="icon-refresh" data-toggle="tooltip" title="Restart"></i>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/addAccount.html b/module/web/app/templates/default/dialogs/addAccount.html
new file mode 100755
index 000000000..bdc8a609a
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/addAccount.html
@@ -0,0 +1,42 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Add an account</h3>
+</div>
+<div class="modal-body">
+    <form class="form-horizontal" autocomplete="off">
+        <legend>
+            Please enter your account data
+        </legend>
+        <div class="control-group">
+            <label class="control-label" for="pluginSelect">
+                Plugin
+            </label>
+
+            <div class="controls">
+                <input type="hidden" id="pluginSelect">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="login">
+                Loginname
+            </label>
+
+            <div class="controls">
+                <input type="text" id="login">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="password">
+                Password
+            </label>
+
+            <div class="controls">
+                <input type="password" id="password">
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <a class="btn btn-success btn-add">Add</a>
+    <a class="btn btn-close">Close</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/addPluginConfig.html b/module/web/app/templates/default/dialogs/addPluginConfig.html
new file mode 100755
index 000000000..e7a42a208
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/addPluginConfig.html
@@ -0,0 +1,26 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>
+        Choose a plugin
+    </h3>
+</div>
+<div class="modal-body">
+    <form class="form-horizontal">
+        <legend>
+            Please choose a plugin, which you want to configure
+        </legend>
+        <div class="control-group">
+            <label class="control-label" for="pluginSelect">
+                Plugin
+            </label>
+
+            <div class="controls">
+                <input type="hidden" id="pluginSelect">
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <a class="btn btn-success btn-add">Add</a>
+    <a class="btn btn-close">Close</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/confirmDelete.html b/module/web/app/templates/default/dialogs/confirmDelete.html
new file mode 100644
index 000000000..65ae1cb21
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/confirmDelete.html
@@ -0,0 +1,11 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Please confirm</h3>
+</div>
+<div class="modal-body">
+    Do you want to delete the selected items?
+</div>
+<div class="modal-footer">
+    <a class="btn btn-danger btn-confirm"><i class="icon-trash icon-white"></i> Delete</a>
+    <a class="btn btn-close">Cancel</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/interactionTask.html b/module/web/app/templates/default/dialogs/interactionTask.html
new file mode 100755
index 000000000..ae325e83d
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/interactionTask.html
@@ -0,0 +1,37 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>
+        <% title %>
+        <small style="background: url('<% pluginIcon plugin %>') no-repeat right 0; background-size: 20px; padding-right: 22px">
+            <% plugin %>
+        </small>
+    </h3>
+</div>
+<div class="modal-body">
+    <form class="form-horizontal" action="#">
+        <legend><% description %></legend>
+        <%= if captcha %>
+        <div class="control-group">
+            <label class="control-label" for="captchaImage">
+                Captcha Image
+            </label>
+
+            <div class="controls">
+                <img id="captchaImage" src="data:image/<% type %>;base64,<% captcha %>">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputField">Captcha Text</label>
+
+            <div class="controls" id="inputField">
+            </div>
+        </div>
+        <% else %>
+        <% content %>
+        <%/if%>
+    </form>
+</div>
+<div class="modal-footer">
+    <a class="btn btn-success">Submit</a>
+    <a class="btn btn-close">Close</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/linkgrabber.html b/module/web/app/templates/default/dialogs/linkgrabber.html
new file mode 100755
index 000000000..08418cf03
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/linkgrabber.html
@@ -0,0 +1,49 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>
+        AddPackage
+        <small>paste&add links to pyLoad</small>
+    </h3>
+</div>
+
+<div class="modal-body">
+    <div class="alert alert-error hidden">
+        Upload files container failed. Please try again.
+    </div>
+    <form class="form-horizontal">
+        <div class="control-group">
+            <label class="control-label" for="inputPackageName">Package name</label>
+
+            <div class="controls">
+                <input type="text" class="span4" id="inputPackageName" placeholder="Name of your package">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputLinks">Links</label>
+
+            <div class="controls">
+                <textarea id="inputLinks" class="span4" rows="10" placeholder="Paste your links here..."></textarea>
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputPassword">Password</label>
+
+            <div class="controls">
+                <input type="text" id="inputPassword" class="span4" placeholder="Password for .rar files">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputContainer">Upload links container</label>
+
+            <div class="controls controls-row">
+                <input type="text" id="inputContainer" class="span3" placeholder="Path to your container">
+                <button id="inputContainer-btn" class="btn span1" type="button">Browse&hellip;</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<div class="modal-footer">
+    <a class="btn btn-success"><i class="icon-plus icon-white"></i> Add</a>
+    <a class="btn btn-close">Close</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/dialogs/modal.html b/module/web/app/templates/default/dialogs/modal.html
new file mode 100755
index 000000000..1e44cc99c
--- /dev/null
+++ b/module/web/app/templates/default/dialogs/modal.html
@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Dialog</h3>
+</div>
+<div class="modal-body">
+</div>
+<div class="modal-footer">
+    <a class="btn btn-close">Close</a>
+    <a class="btn btn-primary">Save</a>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/header/layout.html b/module/web/app/templates/default/header/layout.html
new file mode 100644
index 000000000..890a5b018
--- /dev/null
+++ b/module/web/app/templates/default/header/layout.html
@@ -0,0 +1,62 @@
+<div class="span3">
+    <div class="logo"></div>
+    <span class="title visible-large-screen">pyLoad</span>
+</div>
+<div class="span4 offset1">
+    <div id="progress-area">
+    <span id="progress-info">
+    </span>
+
+        <div class="popover bottom">
+            <div class="arrow"></div>
+            <div class="popover-inner">
+                <h3 class="popover-title">
+                    Running...
+                    <button type="button" class="close" aria-hidden="true">&times;</button>
+                </h3>
+                <div class="popover-content">
+                    <ul class="progress-list"></ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="span4">
+    <div class="header-block">
+        <i class="icon-download-alt icon-white"></i> Max. Speed:<br>
+        <i class="icon-off icon-white"></i> Running:<br>
+        <i class="icon-refresh icon-white"></i> Reconnect:<br>
+    </div>
+
+    <div class="header-block status-block"></div>
+
+    <div class="header-btn">
+        <div class="btn-group">
+            <a class="btn btn-blue btn-small" href="#"><i class="icon-user icon-white"></i> User</a>
+            <a class="btn btn-blue btn-small dropdown-toggle" data-toggle="dropdown" href="#"><span
+                    class="caret"></span></a>
+            <ul class="dropdown-menu" style="right: 0; left: -100%">
+                <li><a data-nav href="/"><i class="icon-list-alt"></i> Dashboard</a></li>
+                <li><a data-nav href="/settings"><i class="icon-wrench"></i> Settings</a></li>
+                <li><a data-nav href="/accounts"><i class="icon-key"></i> Accounts</a></li>
+                <li><a data-nav href="/admin"><i class="icon-cogs"></i> Admin</a></li>
+                <li class="divider"></li>
+                <li><a data-nav href="/logout"><i class="icon-signout"></i> Logout</a></li>
+            </ul>
+        </div>
+        <div class="btn-group lower">
+            <button class="btn btn-success btn-grabber btn-mini" href="#">
+                <i class="icon-plus icon-white"></i>
+            </button>
+            <button class="btn btn-blue btn-play btn-mini" href="#">
+                <i class="icon-play icon-white"></i>
+            </button>
+            <button class="btn btn-danger btn-delete btn-mini" href="#">
+                <i class="icon-remove icon-white"></i>
+            </button>
+        </div>
+    </div>
+<span class="visible-desktop speedgraph-container">
+    <div id="speedgraph"></div>
+</span>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/header/progress.html b/module/web/app/templates/default/header/progress.html
new file mode 100644
index 000000000..65ae9a880
--- /dev/null
+++ b/module/web/app/templates/default/header/progress.html
@@ -0,0 +1,14 @@
+<% name %>
+<span class="pull-right"><% plugin %></span>
+
+<div class="progress">
+    <div class="bar" style="width: <% percent %>%"></div>
+</div>
+<%= if downloading %>
+<% formatSize done %> of <% formatSize total %> (<% formatSize download.speed %>/s)
+<% else %>
+<% statusmsg %>
+<%/if%>
+<span class="pull-right">
+    <% formatTime eta %>
+</span>
\ No newline at end of file
diff --git a/module/web/app/templates/default/header/progressbar.html b/module/web/app/templates/default/header/progressbar.html
new file mode 100644
index 000000000..41645c92f
--- /dev/null
+++ b/module/web/app/templates/default/header/progressbar.html
@@ -0,0 +1,27 @@
+ <%= if single %>
+    <% name %> (<% statusmsg %>)
+    <% else %>
+    <%= if downloads %>
+    <% downloads %> downloads running <%= if speed %>(<% formatSize speed %>/s)<%/if%>
+    <% else %>
+    No running tasks
+    <%/if%>
+    <%/if%>
+    <i class="icon-list pull-right"></i>
+    <!-- TODO active animation -->
+    <div class="progress" id="globalprogress">
+        <%= if single %>
+        <div class="bar" style="width: <% percent %>%">
+            <% else %>
+            <div class="bar <%= if downloads %>running<%/if%>">
+                <%/if%>
+            </div>
+        </div>
+        <div class="sub">
+            <%= if linksqueue %>
+            <% linksqueue %> downloads left (<% formatSize sizequeue %>)
+            <%/if%>
+    <span class="pull-right">
+        <% formatTime etaqueue %>
+    </span>
+    </div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/header/status.html b/module/web/app/templates/default/header/status.html
new file mode 100644
index 000000000..3a22bb75b
--- /dev/null
+++ b/module/web/app/templates/default/header/status.html
@@ -0,0 +1,3 @@
+<span class="pull-right maxspeed"><% formatSize maxspeed %>/s</span><br>
+<span class="pull-right running"><% paused %></span><br>
+<span class="pull-right reconnect"><%= if reconnect %>true<% else %>false<%/if%></span>
\ No newline at end of file
diff --git a/module/web/app/templates/default/login.html b/module/web/app/templates/default/login.html
new file mode 100644
index 000000000..9e8d9eeb6
--- /dev/null
+++ b/module/web/app/templates/default/login.html
@@ -0,0 +1,28 @@
+<br>
+<div class="login">
+    <form method="post" class="form-horizontal">
+        <legend>Login</legend>
+        <div class="control-group">
+            <label class="control-label" for="inputUser">Username</label>
+            <div class="controls">
+                <input type="text" id="inputUser" placeholder="Username" name="username">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="inputPassword">Password</label>
+            <div class="controls">
+                <input type="password" id="inputPassword" placeholder="Password" name="password">
+            </div>
+        </div>
+        <div class="control-group">
+            <div class="controls">
+                <label class="checkbox">
+                    <input type="checkbox"> Remember me
+                </label>
+                <button type="submit" class="btn">Login</button>
+            </div>
+        </div>
+    </form>
+</div>
+<br>
+<!-- TODO: Errors -->
diff --git a/module/web/app/templates/default/notification.html b/module/web/app/templates/default/notification.html
new file mode 100644
index 000000000..0f9b2c9d2
--- /dev/null
+++ b/module/web/app/templates/default/notification.html
@@ -0,0 +1,11 @@
+<%= if queries %>
+<span class="btn-query">
+Queries <span class="badge badge-info"><% queries %></span>
+</span>
+<%/if%>
+<%= if notifications %>
+<span class="btn-notification">
+Notifications <span class="badge badge-success"><% notifications %></span>
+</span>
+<%/if%>
+</%if%>
\ No newline at end of file
diff --git a/module/web/app/templates/default/settings/actionbar.html b/module/web/app/templates/default/settings/actionbar.html
new file mode 100644
index 000000000..25b10d463
--- /dev/null
+++ b/module/web/app/templates/default/settings/actionbar.html
@@ -0,0 +1,5 @@
+<div class="span2 offset1">
+</div>
+<span class="span9">
+    <button class="btn btn-small btn-blue btn-add">Add Plugin</button>
+</span>
\ No newline at end of file
diff --git a/module/web/app/templates/default/settings/config.html b/module/web/app/templates/default/settings/config.html
new file mode 100644
index 000000000..a9ca6214c
--- /dev/null
+++ b/module/web/app/templates/default/settings/config.html
@@ -0,0 +1,17 @@
+<legend>
+    <div class="page-header">
+        <h1><% label %>
+            <small><% description %></small>
+            <%= if long_description %>
+            <a class="btn btn-small" data-title="Help" data-content="<% long_description %>"><i
+                    class="icon-question-sign"></i></a>
+            <%/if%>
+        </h1>
+    </div>
+</legend>
+<div class="control-content">
+</div>
+<div class="form-actions">
+    <button type="button" class="btn btn-primary">Save changes</button>
+    <button type="button" class="btn btn-reset">Reset</button>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/settings/configItem.html b/module/web/app/templates/default/settings/configItem.html
new file mode 100644
index 000000000..3ddf16c84
--- /dev/null
+++ b/module/web/app/templates/default/settings/configItem.html
@@ -0,0 +1,7 @@
+        <div class="control-group">
+            <label class="control-label"><% label %></label>
+
+            <div class="controls">
+                <!--{#                <span class="help-inline"><% description %></span>#}-->
+            </div>
+        </div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/settings/layout.html b/module/web/app/templates/default/settings/layout.html
new file mode 100644
index 000000000..39f1a2ec9
--- /dev/null
+++ b/module/web/app/templates/default/settings/layout.html
@@ -0,0 +1,11 @@
+<div class="span2">
+    <ul class="nav nav-list well settings-menu">
+    </ul>
+</div>
+<div class="span10">
+    <div class="well setting-box">
+        <form class="form-horizontal" action="#">
+            <h1>Please choose a config section</h1>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/module/web/app/templates/default/settings/menu.html b/module/web/app/templates/default/settings/menu.html
new file mode 100644
index 000000000..ef814414a
--- /dev/null
+++ b/module/web/app/templates/default/settings/menu.html
@@ -0,0 +1,40 @@
+<%=if core%>
+<li class="nav-header"><i class="icon-globe icon-white"></i> General</li>
+<%= each core%>
+<li data-name="<% name %>"><a href="#"><% label %></a></li>
+<%/each%>
+<%/if%>
+<li class="divider"></li>
+<li class="nav-header"><i class="icon-th-large icon-white"></i> Addons</li>
+<%= each addon %>
+<li class="addon" data-name="<% name %>">
+    <a href="#" style="background-image: url(<% pluginIcon name %>);">
+        <% label %>
+        <i class="icon-remove pull-right"></i>
+        <%= if activated %>
+        <div class="addon-on">
+            active
+            <%else%>
+            <div class="addon-off">
+                inactive
+                <%/if%>
+                <%= if user_context %>
+                <!--{# TODO: tooltip #}-->
+                <i class="icon-user pull-right"></i>
+                <%else%>
+                <i class="icon-globe pull-right"></i>
+                <%/if%>
+            </div>
+    </a>
+</li>
+<%/each%>
+<li class="divider"></li>
+<li class="nav-header"><i class="icon-th-list icon-white"></i> Plugin Configs</li>
+<%= each plugin %>
+<li class="plugin" data-name="<% name %>">
+    <a href="#" style="background-image: url(<% pluginIcon name %>);">
+        <% label %>
+        <i class="icon-remove pull-right"></i>
+    </a>
+</li>
+<%/each%>
\ No newline at end of file
diff --git a/module/web/app/templates/default/setup.html b/module/web/app/templates/default/setup.html
new file mode 100644
index 000000000..e5c9f4b8c
--- /dev/null
+++ b/module/web/app/templates/default/setup.html
@@ -0,0 +1,16 @@
+{% extends 'default/base.html' %}
+{% block title %}
+    {{_("Setup")}} - {{ super()}}
+{% endblock %}
+
+{% block content %}
+    <div class="hero-unit">
+        <h1>You did it!</h1>
+        <p>pyLoad is running and ready for configuration.</p>
+        <p>
+            <a class="btn btn-primary btn-large">
+                Go on
+            </a>
+        </p>
+    </div>
+{% endblock %}
\ No newline at end of file