diff --git a/Duplicati/Server/webroot/images/ajax-loader-big.gif b/Duplicati/Server/webroot/images/ajax-loader-big.gif
new file mode 100644
index 000000000..0ca7ada96
Binary files /dev/null and b/Duplicati/Server/webroot/images/ajax-loader-big.gif differ
diff --git a/Duplicati/Server/webroot/images/ajax-loader-small.gif b/Duplicati/Server/webroot/images/ajax-loader-small.gif
new file mode 100644
index 000000000..3288d1035
Binary files /dev/null and b/Duplicati/Server/webroot/images/ajax-loader-small.gif differ
diff --git a/Duplicati/Server/webroot/images/clock.png b/Duplicati/Server/webroot/images/clock.png
new file mode 100644
index 000000000..31fe66f30
Binary files /dev/null and b/Duplicati/Server/webroot/images/clock.png differ
diff --git a/Duplicati/Server/webroot/images/donate.png b/Duplicati/Server/webroot/images/donate.png
new file mode 100644
index 000000000..c8fd3ad3b
Binary files /dev/null and b/Duplicati/Server/webroot/images/donate.png differ
diff --git a/Duplicati/Server/webroot/images/hourglass.png b/Duplicati/Server/webroot/images/hourglass.png
new file mode 100644
index 000000000..f47a214de
Binary files /dev/null and b/Duplicati/Server/webroot/images/hourglass.png differ
diff --git a/Duplicati/Server/webroot/images/pause.png b/Duplicati/Server/webroot/images/pause.png
new file mode 100644
index 000000000..07586f6e7
Binary files /dev/null and b/Duplicati/Server/webroot/images/pause.png differ
diff --git a/Duplicati/Server/webroot/images/plus.png b/Duplicati/Server/webroot/images/plus.png
new file mode 100644
index 000000000..d679851db
Binary files /dev/null and b/Duplicati/Server/webroot/images/plus.png differ
diff --git a/Duplicati/Server/webroot/images/settings.png b/Duplicati/Server/webroot/images/settings.png
new file mode 100644
index 000000000..c49e34148
Binary files /dev/null and b/Duplicati/Server/webroot/images/settings.png differ
diff --git a/Duplicati/Server/webroot/images/small-close.png b/Duplicati/Server/webroot/images/small-close.png
new file mode 100644
index 000000000..aa60299eb
Binary files /dev/null and b/Duplicati/Server/webroot/images/small-close.png differ
diff --git a/Duplicati/Server/webroot/index.html b/Duplicati/Server/webroot/index.html
new file mode 100644
index 000000000..553d30dce
--- /dev/null
+++ b/Duplicati/Server/webroot/index.html
@@ -0,0 +1,168 @@
+
+
+
+
+
+Backup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
DUPLICATI
+
+
+
+
+ - Settings..
+
+ - Pause ...
+ - Throttle ...
+
+ - About ...
+
+
+
+
+
+
+
+
+
+ Loading backups ...
+
+
+
+
+
+
+
+
+
My Music to Backify.com
+
+
+
+ - Backup
+ - Restore
+ - Edit
+ - Delete
+
+
+
+
+
+
+
+
My Photos to SkyDrive
+
+
+
+ - Backup
+ - Restore
+ - Edit
+ - Delete
+
+
+
+
+
+
+
+
My Videos to Amazon S3
+
+
+
+ - Backup
+ - Restore
+ - Edit
+ - Delete
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Duplicati/Server/webroot/scripts/app.js b/Duplicati/Server/webroot/scripts/app.js
new file mode 100644
index 000000000..d95b33370
--- /dev/null
+++ b/Duplicati/Server/webroot/scripts/app.js
@@ -0,0 +1,78 @@
+/*
+ * Primary app code
+ */
+
+// Global app settings
+
+APP_DATA = null;
+APP_EVENTS= {};
+
+$(document).ready(function() {
+
+ // Flag as loaded in case we have plugins
+ APP_DATA = {};
+
+ var PRIVATE_DATA = {};
+
+ $('#main-appname').text(APP_CONFIG.branded_name);
+
+ if ((APP_CONFIG.branded_subtitle || '').length > 0) {
+ var subdiv = $('');
+ subdiv.text(APP_CONFIG.branded_subtitle);
+ $('#main-appname').append(subdiv);
+ $('#main-appname').addClass('has-subtitle');
+ }
+
+ $('#main-list-container').empty();
+ $('#main-list-loader').show();
+
+ PRIVATE_DATA.refresh_server_settings = function(callback) {
+ $.ajax({
+ url: APP_CONFIG.server_url,
+ data: { action: 'system-info' }
+ })
+ .done(function(data) {
+ PRIVATE_DATA.server_config = data;
+ $('#main-list-loader').hide();
+ if (callback != null)
+ callback(PRIVATE_DATA.server_config);
+ })
+ .fail(function(data, status) {
+ });
+ };
+
+ PRIVATE_DATA.refresh_server_settings();
+
+ APP_DATA.getServerConfig = function(callback) {
+ if (PRIVATE_DATA.server_config == null) {
+ PRIVATE_DATA.refresh_server_settings(callback);
+ } else {
+ callback(PRIVATE_DATA.server_config);
+ }
+ };
+
+
+ $('#main-settings').click(function() {
+ var pos = $('#main-settings').position();
+ var barheight = $('#main-topbar').outerHeight();
+ var menuwidth = $('#main-control-menu').outerWidth();
+ var buttonwidth = $('#main-settings').outerWidth();
+
+ $('#main-control-menu').css({
+ position: 'absolute',
+ top: barheight + 'px',
+ right: ($(document).outerWidth() - (pos.left + buttonwidth)) + 'px'
+ });
+ $('#main-control-menu').toggle();
+ });
+
+ $('#main-donate').click(function() {
+
+ });
+
+ $('#main-control').click(function() {
+ });
+
+
+
+});
\ No newline at end of file
diff --git a/Duplicati/Server/webroot/scripts/config.js b/Duplicati/Server/webroot/scripts/config.js
new file mode 100644
index 000000000..323b313be
--- /dev/null
+++ b/Duplicati/Server/webroot/scripts/config.js
@@ -0,0 +1,9 @@
+/*
+ * The basic client config
+ */
+
+APP_CONFIG = {
+ server_url: '/control.cgi',
+ branded_name: 'Duplicati',
+ branded_subtitle: ''
+};
\ No newline at end of file
diff --git a/Duplicati/Server/webroot/stylesheets/common.css b/Duplicati/Server/webroot/stylesheets/common.css
index 47aa86d62..39d58f8c3 100644
--- a/Duplicati/Server/webroot/stylesheets/common.css
+++ b/Duplicati/Server/webroot/stylesheets/common.css
@@ -1 +1,77 @@
-/* Placeholder for customization */
\ No newline at end of file
+/*
+ * Common style config
+ */
+
+body {
+ border: 0px none;
+ margin: 0px;
+ padding: 0px;
+ font-family: Arial;
+ min-width: 320px;
+}
+
+.action-link, .action-links li {
+ text-decoration: underline;
+ color: #56acbb;
+ font-size: 0.9em;
+ cursor: pointer;
+}
+
+.hint-text {
+ color: #9b9b9b;
+ font-size: 0.9em;
+}
+
+.hint-text-caption {
+ font-weight: bold;
+ color: #9b9b9b;
+ font-size: 0.9em;
+}
+
+.caption-text {
+ color: #68845f;
+ font-weight: bold;
+ font-size: 1.1em;
+}
+
+.progressbar-background {
+ background-color: #b1bead;
+}
+
+.menu {
+ background-color: #ffffff;
+ position: absolute;
+ display: none;
+ list-style: none;
+ border: 1px solid #9b9b9b;
+ margin: 0px;
+ padding: 0px;
+ border-radius: 3px;
+ z-index: 10000;
+ opacity: 0.9;
+}
+
+.menu li {
+ padding: 5px 10px 5px 10px;
+ background-color: #ffffff;
+ cursor: pointer;
+}
+
+.menu li.menu-sep {
+ border-top: 1px solid;
+ padding: 0px 10px 0px 10px;
+}
+
+.large-loader-icon {
+ width: 66px;
+ height: 66px;
+ background-repeat: no-repeat;
+ background-image: url('../images/ajax-loader-big.gif');
+}
+
+.small-loader-icon {
+ width: 32px;
+ height: 32px;
+ background-repeat: no-repeat;
+ background-image: url('../images/ajax-loader-small.gif');
+}
\ No newline at end of file
diff --git a/Duplicati/Server/webroot/stylesheets/customized.css b/Duplicati/Server/webroot/stylesheets/customized.css
index 85483e7e2..7ad59af06 100644
--- a/Duplicati/Server/webroot/stylesheets/customized.css
+++ b/Duplicati/Server/webroot/stylesheets/customized.css
@@ -1,15 +1,8 @@
-/* Placeholder for customization */
-
-
-.x-grid-tree-node-expanded .x-tree-icon-drive,
-.x-tree-icon-drive {
- width:16px;
- background-image:url('/icons/drive.gif')
-}
-
-
-.x-grid-tree-node-expanded .x-tree-icon-locked,
-.x-tree-icon-locked {
- width:16px;
- background-image:url('/icons/folder_locked_red.gif')
-}
\ No newline at end of file
+/* Placeholder for customization */
+
+/* Uncomment if using a subtitle on the app name */
+/*
+#main-appname {
+ padding-top: 5px;
+}
+*/
\ No newline at end of file
diff --git a/Duplicati/Server/webroot/stylesheets/main.css b/Duplicati/Server/webroot/stylesheets/main.css
new file mode 100644
index 000000000..0c3f9d305
--- /dev/null
+++ b/Duplicati/Server/webroot/stylesheets/main.css
@@ -0,0 +1,285 @@
+/*
+ * CSS config for the main window
+ */
+
+#main-topbar {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ height: 46px;
+ background-color: #3a5e30;
+ color: #9dab98;
+ vertical-align: middle;
+}
+
+#main-bottombar {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ background-color: #4c7641;
+ color: #d4dcd2;
+ vertical-align: middle;
+ height: 46px;
+}
+
+#main-bottombar a {
+ vertical-align: middle;
+ color: #d4dcd2;
+ display: inline-block;
+ padding: 10px 10px 10px 20px;
+}
+
+
+#main-list {
+ position: absolute;
+ top: 46px;
+ bottom: 46px;
+ left: 0px;
+ right: 0px;
+ padding-left: 20px;
+ overflow: auto;
+ margin: 0 auto;
+}
+
+#main-list-container {
+ max-width: 620px;
+ margin-left: auto;
+ margin-right: auto;
+ overflow: auto;
+}
+
+#main-list-loader {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ padding-left: 20px;
+ overflow: auto;
+ margin: 0 auto;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+#main-list-loader-content {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ width: 250px;
+ height: 100px;
+}
+
+#main-list-loader-icon {
+ margin: auto;
+}
+
+#main-list-loader-text {
+ padding-top: 5px;
+ text-align: center;
+}
+
+#main-appname {
+ padding: 10px 10px 10px 20px;
+ font-weight: bold;
+ font-size: 1.4em;
+ display: inline-block;
+ text-transform: uppercase;
+}
+
+#main-appname.has-subtitle {
+ padding-top: 5px;
+}
+
+#main-appname-subtitle {
+ font-size: 0.5em;
+ font-weight: normal;
+ font-style: italic;
+}
+
+#main-newbackup {
+ background-color: #3a5e30;
+ color: white;
+ padding: 6px 12px 6px 12px;
+ cursor: pointer;
+ border-radius: 3px;
+ display: inline-block;
+ clear: both;
+ float: left;
+ margin-top: 40px;
+ margin-bottom: 40px;
+}
+
+#main-control-menu {
+ margin-right: 10px;
+}
+
+.main-shortcuts {
+ float: right;
+ padding-top: 8px;
+ padding-right: 8px;
+ margin: 0px;
+ padding-left: 0px;
+}
+
+.main-shortcuts li {
+ padding-left: 8px;
+ padding-right: 4px;
+ cursor: pointer;
+ background-color: #3a5e30;
+}
+
+.main-backup-entry {
+ padding: 40px 40px 10px 0px;
+ clear: both;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.main-backup-entry .action-links {
+ display: block;
+ margin-top: 10px;
+ padding-left: 0px;
+}
+
+.main-backup-entry .hint-text, .main-shortcuts {
+ display: table-row;
+}
+
+.main-backup-entry .action-links li, .main-backup-entry .hint-text li, .main-shortcuts li {
+ display: table-cell;
+}
+
+.main-backup-entry .action-links li {
+ display: table-cell;
+ border-right: 1px solid #56acbb;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
+.main-backup-entry .action-links .last {
+ border-right: 0px none;
+ padding-right: 0px;
+}
+
+.main-backup-entry .action-links .first {
+ padding-left: 0px;
+}
+
+.main-backup-entry .hint-text-caption {
+ padding-right: 5px;
+}
+
+.main-backup-entry .caption-text {
+ margin-bottom: 10px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 300px;
+ white-space: nowrap;
+}
+
+.main-icon-plus {
+ width: 23px;
+ height: 23px;
+ display: block;
+ background-repeat: no-repeat;
+ background-image: url('../images/plus.png');
+}
+
+.main-icon-clock {
+ width: 23px;
+ height: 23px;
+ background-repeat: no-repeat;
+ background-image: url('../images/clock.png');
+}
+
+.main-icon-donate {
+ width: 28px;
+ height: 28px;
+ background-repeat: no-repeat;
+ background-image: url('../images/donate.png');
+}
+
+.main-icon-hourglass {
+ width: 18px;
+ height: 24px;
+ background-repeat: no-repeat;
+ background-image: url('../images/hourglass.png');
+}
+
+.main-icon-pause {
+ width: 28px;
+ height: 28px;
+ background-repeat: no-repeat;
+ background-image: url('../images/pause.png');
+}
+
+.main-icon-settings {
+ width: 28px;
+ height: 28px;
+ background-repeat: no-repeat;
+ background-image: url('../images/settings.png');
+}
+
+.main-icon-small-close {
+ width: 19px;
+ height: 19px;
+ background-repeat: no-repeat;
+ background-image: url('../images/small-close');
+}
+
+#main-newbackup .main-icon-plus {
+ display: inline-block;
+}
+
+.main-button-add-text {
+ display: inline-block;
+ vertical-align: top;
+ padding-left: 10px;
+ padding-top: 4px;
+}
+
+.progress-area {
+ background-color: #c8d1c5;
+ color: #8f968e;
+ border-radius: 3px;
+ display: block;
+ padding: 6px 12px 6px 12px;
+ display: block;
+}
+
+.in-progress {
+ color: #ecf0eb;
+ min-height: 23px;
+}
+
+.main-progress-cell {
+ width: 100%;
+}
+
+.progress-area .main-icon-hourglass, .progress-area .main-icon-clock {
+ display: inline-block;
+ margin-right: 8px;
+}
+
+.main-progress-text {
+ display: inline-block;
+ vertical-align: top;
+ padding-top: 4px;
+ white-space: nowrap;
+}
+
+.backup-details {
+ float: left;
+ width: 300px;
+}
+
+.backup-progress {
+ float: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ min-width: 250px;
+ white-space: nowrap;
+}