Initial work

htdocs/css/bootstrap-reboot.css

@@ -0,0 +1,330 @@
+/*!
+ * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+dfn {
+  font-style: italic;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

htdocs/css/bootstrap-reboot.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.min.css.map */

htdocs/css/bootstrap-theme.css

@@ -1,347 +0,0 @@
-/*!
- * Bootstrap v3.1.0 (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-.btn-default,
-.btn-primary,
-.btn-success,
-.btn-info,
-.btn-warning,
-.btn-danger {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
-}
-.btn-default:active,
-.btn-primary:active,
-.btn-success:active,
-.btn-info:active,
-.btn-warning:active,
-.btn-danger:active,
-.btn-default.active,
-.btn-primary.active,
-.btn-success.active,
-.btn-info.active,
-.btn-warning.active,
-.btn-danger.active {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-}
-.btn:active,
-.btn.active {
-  background-image: none;
-}
-.btn-default {
-  text-shadow: 0 1px 0 #fff;
-  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
-  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #dbdbdb;
-  border-color: #ccc;
-}
-.btn-default:hover,
-.btn-default:focus {
-  background-color: #e0e0e0;
-  background-position: 0 -15px;
-}
-.btn-default:active,
-.btn-default.active {
-  background-color: #e0e0e0;
-  border-color: #dbdbdb;
-}
-.btn-primary {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #2b669a;
-}
-.btn-primary:hover,
-.btn-primary:focus {
-  background-color: #2d6ca2;
-  background-position: 0 -15px;
-}
-.btn-primary:active,
-.btn-primary.active {
-  background-color: #2d6ca2;
-  border-color: #2b669a;
-}
-.btn-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #3e8f3e;
-}
-.btn-success:hover,
-.btn-success:focus {
-  background-color: #419641;
-  background-position: 0 -15px;
-}
-.btn-success:active,
-.btn-success.active {
-  background-color: #419641;
-  border-color: #3e8f3e;
-}
-.btn-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #28a4c9;
-}
-.btn-info:hover,
-.btn-info:focus {
-  background-color: #2aabd2;
-  background-position: 0 -15px;
-}
-.btn-info:active,
-.btn-info.active {
-  background-color: #2aabd2;
-  border-color: #28a4c9;
-}
-.btn-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #e38d13;
-}
-.btn-warning:hover,
-.btn-warning:focus {
-  background-color: #eb9316;
-  background-position: 0 -15px;
-}
-.btn-warning:active,
-.btn-warning.active {
-  background-color: #eb9316;
-  border-color: #e38d13;
-}
-.btn-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #b92c28;
-}
-.btn-danger:hover,
-.btn-danger:focus {
-  background-color: #c12e2a;
-  background-position: 0 -15px;
-}
-.btn-danger:active,
-.btn-danger.active {
-  background-color: #c12e2a;
-  border-color: #b92c28;
-}
-.thumbnail,
-.img-thumbnail {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-}
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  background-color: #e8e8e8;
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
-  background-repeat: repeat-x;
-}
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  background-color: #357ebd;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-  background-repeat: repeat-x;
-}
-.navbar-default {
-  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-}
-.navbar-default .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-}
-.navbar-brand,
-.navbar-nav > li > a {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-.navbar-inverse {
-  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
-  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-}
-.navbar-inverse .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
-  background-image:         linear-gradient(to bottom, #222 0%, #282828 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-}
-.navbar-inverse .navbar-brand,
-.navbar-inverse .navbar-nav > li > a {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
-}
-.navbar-static-top,
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  border-radius: 0;
-}
-.alert {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
-}
-.alert-success {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #b2dba1;
-}
-.alert-info {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #9acfea;
-}
-.alert-warning {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #f5e79e;
-}
-.alert-danger {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #dca7a7;
-}
-.progress {
-  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
-  background-repeat: repeat-x;
-}
-.list-group {
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-}
-.list-group-item.active,
-.list-group-item.active:hover,
-.list-group-item.active:focus {
-  text-shadow: 0 -1px 0 #3071a9;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #3278b3;
-}
-.panel {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-}
-.panel-default > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-primary > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-success > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-info > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-warning > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-danger > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
-  background-repeat: repeat-x;
-}
-.well {
-  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
-  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #dcdcdc;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-}
-/*# sourceMappingURL=bootstrap-theme.css.map */

htdocs/css/mpd.css

@@ -1,14 +1,12 @@
 body {
   padding-top: 50px;
   padding-bottom: 50px;
-}
+  background-color:#888;
-
-.starter-template {
-  padding: 40px 15px;
 }
 
 #volumeslider {
   width: 150px;
+  margin-top:5px;
 }
 
 #volumeslider .progress {
@@ -27,14 +25,12 @@ button {
   margin-top: 2px;
 }
 
-#breadcrump {
+#breadcrumb {
-  display: block;
-
   overflow: auto;
   white-space: nowrap;
 }
 
-#breadcrump > li > a{
+#breadcrumb > li > a{
   cursor: pointer;
 }
 
@@ -91,12 +87,14 @@ td:nth-last-child(2), th:nth-last-child(2) {
   width: 4em;
 }
 
+/*
 #salamisandwich td:nth-child(4) span {
   font-style: italic;
   font-size: 90%;
 
   display: block;
 }
+*/
 
 td:nth-child(2), td:nth-child(3) {
   min-width: 25%;
@@ -148,18 +146,12 @@ button {
   overflow: hidden;
 }
 
-#trashmode span:last-child {
-  display:inline-block;
-  text-align:left;
-  width:2.8em;
-}
-
 #album-cover {
   background-size:cover;
   border:1px solid black;
   border-radius:5px;
   overflow:hidden;
-  margin-right:20px;
+  margin-bottom:20px;
   width:240px;
   height:240px;
   background-color:#eee;
@@ -175,4 +167,69 @@ button {
 
 #track-icon {
  cursor: pointer;
+ font-size:34px;
+ float:left;
+ display:block;
 }
+
+.hide {
+ display: none !important;
+}
+
+.pull-right {
+ float: right !important;
+}
+
+#queue-buttons {
+ margin-bottom:20px;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/assets/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(/assets/MaterialIcons-Regular.woff2) format('woff2'),
+       url(/assets/MaterialIcons-Regular.woff) format('woff'),
+       url(/assets/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 18px;  /* Preferred icon size */
+  display:inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+main {
+ padding-top:20px;
+}
+
+.color-darkgrey {
+ color:#6c757d;
+}
+
+#filter-toolbar {
+ margin-bottom:10px;
+}
+

htdocs/index.html

@@ -4,14 +4,13 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="ympd - fast and lightweight MPD webclient">
+  <meta name="description" content="myMPD - fast and lightweight MPD webclient">
-  <meta name="author" content="andy@ndyk.de">
+  <meta name="author" content="mail@jcgames.de">
 
-  <title>ympd</title>
+  <title>myMPD</title>
 
   <!-- Bootstrap core CSS -->
   <link href="css/bootstrap.css" rel="stylesheet">
-  <link href="css/bootstrap-theme.css" rel="stylesheet">
 
   <!-- Custom styles for this template -->
   <link href="css/mpd.css" rel="stylesheet">
@@ -25,61 +24,55 @@
 
 </head>
 <body>
-
+  <header>
-  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-    <div class="container">
+      <a class="navbar-brand" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span>myMPD</a>
-      <div class="navbar-header">
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="navbar-toggler-icon"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
       </button>
-        <a class="navbar-brand" href="/#/playing/"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
-      </div>
+        <ul class="navbar-nav mr-auto" id="nav_links">
-      <div class="collapse navbar-collapse">
+          <li class="nav-item" id="queue"><a class="nav-link" href="#/queue/0">Queue</a></li>
-
+          <li class="nav-item" id="browse"><a class="nav-link" href="#/browse/0/">Browse</a></li>
-        <ul id="nav_links" class="nav navbar-nav">
+          <li class="nav-item" id="dirble"><a class="nav-link" href="#/dirble/">Dirble</a></li>
-          <li id="queue"><a href="#/queue/0">Queue</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
-          <li id="browse"><a href="#/browse/0/">Browse</a></li>
+          <li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
-          <li id="dirble"><a href="#/dirble/">Dirble</a></li>
-          <li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
-          <li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
         </ul>
 
-        <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
+        <div class="btn-toolbar" role="toolbar">
-          <div class="btn-group">
+          <div class="btn-group mr-2" role="group">
-            <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV');">
+            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
-              <span class="glyphicon glyphicon-backward"></span>
+              <span class="material-icons">skip_previous</span>
             </button>
-            <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_STOP');">
+            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_STOP');">
-              <span id="stop-icon" class="glyphicon glyphicon-stop"></span>
+              <span id="stop-icon" class="material-icons">stop</span>
             </button>
-            <button type="button" class="btn btn-default" onclick="clickPlay();">
+            <button type="button" class="btn btn-secondary" onclick="clickPlay();">
-              <span id="play-icon" class="glyphicon glyphicon-pause"></span>
+              <span id="play-icon" class="material-icons">pause</span>
             </button>
-            <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');">
+            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_NEXT');">
-              <span class="glyphicon glyphicon-forward"></span>
+              <span class="material-icons">skip_next</span>
             </button>
           </div>
-          <div class="btn-group">
+          <div class="btn-group mr-2" role="group">
-            <button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
+            <button id="btnlove" type="button" class="btn btn-secondary" onclick="clickLove();">
-              <span class="glyphicon glyphicon-heart"></span>
+              <span class="material-icons">favorit</span>
             </button>
           </div>
 
-          <div class="btn-group">
+          <div class="btn-group mr-2" role="group">
             <div class="dropdown">
-              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-                <span class="glyphicon glyphicon-volume-up"></span>    
+                <span class="material-icons">settings_remote</span>    
                 <span class="caret"></span>
               </button>
               <div id="btn-outputs-block" class="dropdown-menu" role="menu" style="padding-left:1em;"></div>  
             </div>
           </div>
           
-          <div class="btn-group">
+          <div class="btn-group mr-2">
-            <div class="btn btn-toolbar btn-default">
+            <div class="btn btn-secondary">
-              <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
+              <span id="volume-icon" class="material-icons">volume_up</span>
               <div id="volumeslider"></div>
             </div>
           </div>
@@ -95,87 +88,69 @@
           </div>
        </div>
           
-        <form id="search" class="navbar-form navbar-right" role="search">
+        <form id="search" class="form-inline mt-2 mt-md-0" role="search">
-          <div class="form-group">
+          <input type="text" class="form-control mr-sm-2" placeholder="Search">
-            <input type="text" class="form-control" placeholder="Search">
-          </div>
         </form>
       </div><!--/.nav-collapse -->
     </div>
-  </div>
+  </nav>
-
+ </header>
-  <div class="container starter-template">
+ <main role="main" class="container">
-    <div class="row">
-
         <div class="notifications top-right"></div>
 
-        <div class="panel panel-primary">
+        <div class="card">
           <!-- Default panel contents -->
-          <div class="panel-heading"><b id="panel-heading">Now playing</b>
+          <div class="card-header">
-                                     <b id="panel-heading-info" class="text pull-right"></b></div>
+            <span id="panel-heading">Now playing</span>
-          <div class="panel hide" id="queue-buttons">
+            <span id="panel-heading-info" class="text pull-right"></span>
-<!--            <div class="btn-group" data-toggle="buttons">
+          </div>
-              <button id="btnrandom" type="button" class="btn btn-default" title="Random">
+          <div class="card-body">
-                <span class="glyphicon glyphicon-random"></span>
+          
+          <div class="btn-toolbar hide" id="queue-buttons" role="toolbar">
+            <div id="trashmode" class="btn-group mr-2" data-toggle="radio">
+              <button id="btntrashmodeup" type="button" class="btn btn-secondary" title="Delete upward">
+                <span class="material-icons">vertical_align_top</span>
+                <span class="material-icons">delete</span>
               </button>
-              <button id="btnconsume" type="button" class="btn btn-default" title="Consume">
+              <button id="btntrashmodesingle" type="button" class="btn btn-success" title="Delete single">
-                <span class="glyphicon glyphicon-fire"></span>
+                <span class="material-icons">delete</span>
               </button>
-              <button id="btnsingle" type="button" class="btn btn-default" title="Single">
+              <button id="btntrashmodedown" type="button" class="btn btn-secondary" title="Delete downward">
-                <span class="glyphicon glyphicon-star"></span>
+                <span class="material-icons">delete</span>
-              </button>
+                <span class="material-icons">vertical_align_bottom</span>
-              <button id="btncrossfade" type="button" class="btn btn-default" title="Crossfade">
-                <span class="glyphicon glyphicon-link"></span>
-              </button>
-              <button id="btnrepeat" type="button" class="btn btn-default" title="Repeat">
-                <span class="glyphicon glyphicon-repeat"></span>
               </button>
             </div>
--->
+            <div id="queue-actions" class="btn-group mr-2">
-
+              <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
-            <div id="trashmode" class="btn-group" data-toggle="radio">
+                <span class="material-icons">clear_all</span>
-              <button id="btntrashmodeup" type="button" class="btn btn-default">
-                <span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-trash"></span>
               </button>
-              <button id="btntrashmodesingle" type="button" class="btn btn-default active">
+              <a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-secondary" title="Save queue">
-                <span class="glyphicon glyphicon-star-empty"></span>
+                <span class="material-icons">save</span>
-                <span class="glyphicon glyphicon-trash"></span>
-              </button>
-              <button id="btntrashmodedown" type="button" class="btn btn-default">
-                <span class="glyphicon glyphicon-chevron-down"></span>
-                <span class="glyphicon glyphicon-trash"></span>
-              </button>
-            </div>
-
-            <div id="queue-actions" class="btn-group pull-right">
-              <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
-                <span class="glyphicon glyphicon-trash"></span>
-              </button>
-              <a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default" title="Save queue">
-                <span class="glyphicon glyphicon-save"></span>
               </a>
             </div>
-
-
-
           </div>
-          <div class="panel-body" id="nowplaying">
+          
+          <div id="nowplaying">
             <div id="album-cover"></div>
             <h1>
-              <span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play" title="Toggle play/pause"></span>
+              <span id="track-icon" onclick="clickPlay();" class="material-icons" title="Toggle play/pause">play_arrow</span>
               <span id="currenttrack"></span>
             </h1>
             <h3 id="artist"></h3>
             <h4 id="album"></h4>
             <p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
             <div id="progressbar"></div>
+            
           </div><!-- /.panel-body -->
 
-          <ol id="breadcrump" class="breadcrumb hide">
+          <ol id="breadcrumb" class="breadcrumb hide">
           </ol>
 
-          <div class="col-md-12" id="filter">
+          <div class="btn-toolbar hide" id="filter-toolbar">
-          <button id="add-all-songs" class="btn btn-primary pull-right hide">Add all</button>
+            <div class="btn-group mr-2" data-toggle="radio" id="filter"></div>
+            <div class="btn-group mr-2 pull-right">
+              <button id="add-all-songs" class="btn btn-secondary">Add all</button>
+            </div>
           </div>
 
 
@@ -217,62 +192,62 @@
             </table>
         </div>
 
-        </div><!-- /.panel -->
+        <ul class="pagination justify-content-center">
-        <ul class="pager">
+          <li id="prev" class="page-item hide"><a class="page-link" href="">Previous</a></li>
-          <li id="prev" class="page-btn hide"><a href="">Previous</a></li>
+          <li id="next" class="page-item hide"><a class="page-link" href="">Next</a></li>
-          <li id="next" class="page-btn hide"><a href="">Next</a></li>
         </ul>
-    </div><!-- /.row -->
+        </div>
-  </div><!-- /.container -->
+  </main><!-- /.container -->
 
   <!-- Modal -->
   <div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
-          <h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wrench"></span> Settings</h2>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
         </div>
         <div class="modal-body">
-          <h4><a href="http://www.ympd.org"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>&nbsp;&nbsp;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
+          <h4><a style="color:#28a745" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
-          <p>
+          <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a style="color:#28a745" href="http://www.ympd.org">ympd</a>.</p>
-          ympd is a lightweight MPD (Music Player Daemon) web client that runs without a dedicated webserver or interpreters like PHP, NodeJS or Ruby. It's tuned for minimal resource usage and requires only very litte dependencies.</p>
+          <h5>myMPD uses following excellent software:</h5>
-          <h5>ympd uses following excellent software:</h5>
+          <h6><a style="color:#28a745" href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
-          <h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
+          <h6><a style="color:#28a745" href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
-          <h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
           <hr />
           <div class="row">
             <div class="form-group col-md-6">
-              <button id="btnrandom" type="button" class="btn btn-default btn-block" title="Random">
+              <button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
-                <span class="glyphicon glyphicon-random"></span> Repeat
+                <span class="glyphicon glyphicon-random"></span> Random
               </button>
             </div>
             <div class="form-group col-md-6" data-toggle="buttons">          
-              <button id="btnconsume" type="button" class="btn btn-default btn-block" title="Consume">
+              <button id="btnconsume" type="button" class="btn btn-secondary btn-block" title="Consume">
                 <span class="glyphicon glyphicon-fire"></span> Consume
               </button>
             </div>
           </div>
           <div class="row">
             <div class="form-group col-md-6" data-toggle="buttons">
-              <button id="btnsingle" type="button" class="btn btn-default btn-block" title="Single">
+              <button id="btnsingle" type="button" class="btn btn-secondary btn-block" title="Single">
                 <span class="glyphicon glyphicon-star"></span> Single
               </button>
             </div>
             <div class="form-group col-md-6" data-toggle="buttons">
-              <button id="btncrossfade" type="button" class="btn btn-default btn-block" title="Crossfade">
+              <button id="btncrossfade" type="button" class="btn btn-secondary btn-block" title="Crossfade">
                 <span class="glyphicon glyphicon-link"></span> Crossfade
               </button>
             </div>
           </div>
           <div class="row">
             <div class="form-group col-md-6" data-toggle="buttons">
-              <button id="btnrepeat" type="button" class="btn btn-default btn-block" title="Repeat">
+              <button id="btnrepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
                 <span class="glyphicon glyphicon-repeat"></span> Repeat
               </button>
             </div>          
             <div class="form-group col-md-6" data-toggle="buttons">
-              <button type="button" class="btn btn-default btn-block" id="btnnotify">
+              <button type="button" class="btn btn-secondary btn-block" id="btnnotify">
                 <span class="glyphicon glyphicon-comment"></span> Enable Notifications
               </button>
             </div>            
@@ -280,7 +255,7 @@
           <hr />
           <div class="row">
             <div class="form-group col-md-6">
-              <button type="button" class="btn btn-default btn-block" onclick="updateDB();">
+              <button type="button" class="btn btn-secondary btn-block" onclick="updateDB();">
                 <span class="glyphicon glyphicon-refresh"></span> Update Database
               </button>
             </div>
@@ -325,8 +300,8 @@
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default" onclick="confirmSettings();">Save</button>
+          <button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
@@ -337,8 +312,10 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
-          <h2 class="modal-title" id="addstreamLabel"><span class="glyphicon glyphicon-wrench"></span> Add Stream</h2>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
         </div>
         <div class="modal-body">
           <form role="form">
@@ -351,8 +328,8 @@
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default" onclick="addStream();">Add Stream</button>
+          <button type="button" class="btn btn-success" onclick="addStream();">Add Stream</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
@@ -362,8 +339,10 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
-          <h2 class="modal-title" id="savequeueLabel"><span class="glyphicon glyphicon-wrench"></span> Save Queue</h2>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>          
         </div>
         <div class="modal-body">
           <form role="form">
@@ -376,8 +355,8 @@
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-default" onclick="saveQueue();">Save Queue</button>
+          <button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
@@ -387,7 +366,7 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h1>Searching...</h1>
+          <h5>Searching...</h5>
         </div>
         <div class="modal-body">
           <div class="progress progress-striped active">
@@ -400,15 +379,14 @@
     </div>
   </div>
 
-
   <!-- Bootstrap core JavaScript
   ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->
-  <script src="js/jquery-1.10.2.min.js"></script>
+  <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/jquery.cookie.js"></script>
   <script src="js/bootstrap.min.js"></script>
-  <script src="js/bootstrap-notify.js"></script>
   <script src="js/bootstrap-slider.js"></script>
+  <script src="js/bootstrap-notify.js"></script>
   <script src="js/sammy.js"></script>
   <script src="js/jquery-ui-sortable.min.js"></script>
   <script src="js/mpd.js"></script>

htdocs/js/bootstrap-slider.js

@@ -85,7 +85,7 @@
 
     var defaults={
         val:50,
-        barColor:"#428bca"
+        barColor:"#28a745"
     },
     _setWidthFromEvent = function(pageX,reqVals,supress) {
         if(!reqVals){

htdocs/js/mpd.js

@@ -1,4 +1,10 @@
-/* ympd
+/* myMPD
+   (c) 2018 Juergen Mang <mail@jcgames.de>
+   This project's homepage is: https://github.com/jcorporation/ympd
+   
+   myMPD ist fork of:
+
+   ympd
    (c) 2013-2014 Andrew Karpow <andy@ndyk.de>
    This project's homepage is: https://www.ympd.org
    
@@ -40,9 +46,8 @@ var app = $.sammy(function() {
     function runBrowse() {
         current_app = 'queue';
         $('#nowplaying').addClass('hide');
-        $('#breadcrump').addClass('hide');
+        $('#breadcrumb').addClass('hide');
-        $('#filter').addClass('hide');
+        $('#filter-toolbar').addClass('hide');
-        $('#salamisandwich').removeClass('hide');
         $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
         $('#dirble_panel').addClass('hide');
         socket.send('MPD_API_GET_QUEUE,'+pagination);
@@ -56,18 +61,19 @@ var app = $.sammy(function() {
 
     function prepare() {
         $('#nav_links > li').removeClass('active');
-        $('.page-btn').addClass('hide');
+        $('.page-item').addClass('hide');
-        $('#add-all-songs').hide();
+        $('#add-all-songs').addClass('hide');
         pagination = 0;
         browsepath = '';
+        $(navbarCollapse).removeClass('show');
     }
 
     this.get (/\#\/playing\//, function() {
         prepare();
         current_app = 'nowplaying';
-        $('#breadcrump').addClass('hide');
+        $('#breadcrumb').addClass('hide');
         $('#salamisandwich').addClass('hide');
-        $('#filter').addClass('hide');
+        $('#filter-toolbar').addClass('hide');
         $('#dirble_panel').addClass('hide');
         $('#queue-buttons').addClass('hide');
         $('#panel-heading').text("Now playing");
@@ -86,8 +92,8 @@ var app = $.sammy(function() {
         browsepath = this.params['splat'][1];
         pagination = parseInt(this.params['splat'][0]);
         current_app = 'browse';
-        $('#breadcrump').removeClass('hide').empty().append("<li><a uri=\"\" onclick=\"set_filter('')\">root</a></li>");
+        $('#breadcrumb').removeClass('hide').empty().append("<li class=\"breadcrumb-item\"><a uri=\"\" onclick=\"set_filter('')\">root</a></li>");
-        $('#filter').removeClass('hide');
+        $('#filter-toolbar').removeClass('hide');
         $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
         $('#dirble_panel').addClass('hide');
         $('#queue-buttons').addClass('hide');
@@ -100,7 +106,7 @@ var app = $.sammy(function() {
             add_all_songs.on('click', function() {
                 socket.send('MPD_API_ADD_TRACK,'+browsepath);
             });
-            add_all_songs.show();
+            add_all_songs.removeClass('hide');
         }
         $('#panel-heading').text("Browse database: /"+browsepath);
         $('#panel-heading-info').empty();
@@ -109,12 +115,12 @@ var app = $.sammy(function() {
         var full_path = "";
         $.each(path_array, function(index, chunk) {
             if(path_array.length - 1 == index) {
-                $('#breadcrump').append("<li class=\"active\">"+ chunk + "</li>");
+                $('#breadcrumb').append("<li class=\"breadcrumb-item active\">"+ chunk + "</li>");
                 return;
             }
 
             full_path = full_path + chunk;
-            $('#breadcrump').append("<li><a uri=\"" + full_path + "\">"+chunk+"</a></li>");
+            $('#breadcrumb').append("<li class=\"breadcrumb-item\"><a uri=\"" + full_path + "\">"+chunk+"</a></li>");
             full_path += "/";
         });
         $('#browse').addClass('active');
@@ -122,11 +128,13 @@ var app = $.sammy(function() {
 
     this.get(/\#\/search\/(.*)/, function() {
         current_app = 'search';
-        $('#salamisandwich').find("tr:gt(0)").remove();
+        $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
+        $('#nowplaying').addClass('hide');
         $('#dirble_panel').addClass('hide');
+        $('#filter-toolbar').addClass('hide');
         var searchstr = this.params['splat'][0];
 
-        $('#search > div > input').val(searchstr);
+        $('#search > input').val(searchstr);
         socket.send('MPD_API_SEARCH,' + searchstr);
 
         $('#panel-heading').text("Search: "+searchstr);
@@ -138,7 +146,7 @@ var app = $.sammy(function() {
         
         prepare();
         current_app = 'dirble';
-        $('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>");
+        $('#breadcrumb').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>");
         $('#salamisandwich').addClass('hide');
         $('#dirble_panel').removeClass('hide');
         $('#dirble_loading').removeClass('hide');
@@ -169,7 +177,7 @@ var app = $.sammy(function() {
         
         prepare();
         current_app = 'dirble';
-        $('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>");
+        $('#breadcrumb').removeClass('hide').empty().append("<li>Categories</li>");
         $('#salamisandwich').addClass('hide');
         $('#dirble_panel').removeClass('hide');
         $('#dirble_loading').removeClass('hide');
@@ -217,7 +225,7 @@ $(document).ready(function(){
         $('#btnnotify').addClass("disabled");
     else
         if ($.cookie("notification") === "true")
-            $('#btnnotify').addClass("active")
+            $('#btnnotify').removeClass('btn-secondary').addClass("btn-success")
 
     add_filter();
 	
@@ -294,7 +302,7 @@ function webSocketConnect() {
         socket.onopen = function() {
             console.log("connected");
             $('.top-right').notify({
-                message:{text:"Connected to ympd"},
+                message:{text:"Connected to myMPD"},
                 fadeOut: { enabled: true, delay: 500 }
             }).show();
 
@@ -350,9 +358,9 @@ function webSocketConnect() {
                         $('#prev').removeClass('hide');
                     if ( isTouch ) {
                         $('#salamisandwich > tbody > tr > td:last-child').append(
-                                    "<a class=\"pull-right btn-group-hover\" href=\"#/\" " +
+                                    "<a class=\"pull-right btn-group-hover color-darkgrey\" href=\"#/\" " +
                                         "onclick=\"trash($(this).parents('tr'));\">" +
-                                "<span class=\"glyphicon glyphicon-trash\"></span></a>");
+                                "<span class=\"material-icons\">delete</span></a>");
                     } else {
                         $('#salamisandwich > tbody > tr').on({
                             mouseover: function(){
@@ -364,9 +372,9 @@ function webSocketConnect() {
                                 $.each(doomed, function(){
                                 if($(this).children().last().has("a").length == 0)
                                     $(this).children().last().append(
-                                        "<a class=\"pull-right btn-group-hover\" href=\"#/\" " +
+                                        "<a class=\"pull-right btn-group-hover color-darkgrey\" href=\"#/\" " +
                                             "onclick=\"trash($(this).parents('tr'));\">" +
-                                    "<span class=\"glyphicon glyphicon-trash\"></span></a>")
+                                    "<span class=\"material-icons\">delete</span></a>")
                                 .find('a').fadeTo('fast',1);
                                 });
                             },
@@ -434,7 +442,7 @@ function webSocketConnect() {
                                 }
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" +
-                                    "<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
+                                    "<td><span class=\"material-icons\">folder_open</span></td>" +
                                     "<td colspan=\"3\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
@@ -446,7 +454,7 @@ function webSocketConnect() {
                                 }
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" +
-                                    "<td><span class=\"glyphicon glyphicon-list\"></span></td>" +
+                                    "<td><span class=\"material-icons\">list</span></td>" +
                                     "<td colspan=\"3\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
@@ -464,7 +472,7 @@ function webSocketConnect() {
 
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
-                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + 
+                                    "<td><span class=\"material-icons\">music_note</span></td>" + 
                                     "<td>" + obj.data[item].artist + "</td>" + 
                                     "<td>" + obj.data[item].album  + "</td>" +
                                     "<td>" + obj.data[item].title  + "</td>" +
@@ -477,7 +485,7 @@ function webSocketConnect() {
                                     $('#next').removeClass('hide');
                                 } else {
                                     $('#salamisandwich > tbody').append(
-                                        "<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" +
+                                        "<tr><td><span class=\"material-icons\">error_outline</span></td>" +
                                         "<td colspan=\"3\">Too many results, please refine your search!</td>" +
                                         "<td></td><td></td></tr>"
                                     );
@@ -492,8 +500,8 @@ function webSocketConnect() {
 
                     function appendClickableIcon(appendTo, onClickAction, glyphicon) {
                         $(appendTo).append(
-                            "<a role=\"button\" class=\"pull-right btn-group-hover\">" +
+                            '<a role="button" class="pull-right btn-group-hover">' +
-                            "<span class=\"glyphicon glyphicon-" + glyphicon + "\"></span></a>")
+                            '<span class="material-icons">' + glyphicon + '</span></a>')
                             .find('a').click(function(e) {
                                 e.stopPropagation();
                                 socket.send(onClickAction + "," + decodeURI($(this).parents("tr").attr("uri")));
@@ -505,15 +513,15 @@ function webSocketConnect() {
                     }
 
                     if ( isTouch ) {
-                        appendClickableIcon($("#salamisandwich > tbody > tr.dir > td:last-child"), 'MPD_API_ADD_TRACK', 'plus');
+                        appendClickableIcon($("#salamisandwich > tbody > tr.dir > td:last-child"), 'MPD_API_ADD_TRACK', 'playlist_add');
-                        appendClickableIcon($("#salamisandwich > tbody > tr.song > td:last-child"), 'MPD_API_ADD_TRACK', 'play');
+                        appendClickableIcon($("#salamisandwich > tbody > tr.song > td:last-child"), 'MPD_API_ADD_TRACK', 'playlist_add');
                     } else {
                         $('#salamisandwich > tbody > tr').on({
                             mouseenter: function() {
                                 if($(this).is(".dir")) 
-                                    appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'plus');
+                                    appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
                                 else if($(this).is(".song"))
-                                    appendClickableIcon($(this).children().last(), 'MPD_API_ADD_PLAY_TRACK', 'play');
+                                    appendClickableIcon($(this).children().last(), 'MPD_API_ADD_PLAY_TRACK', 'playlist_add');
                             },
                             mouseleave: function(){
                                 $(this).children().last().find("a").stop().remove();
@@ -551,7 +559,7 @@ function webSocketConnect() {
                         }
                     });
 
-					$('#breadcrump > li > a').on({
+					$('#breadcrumb > li > a').on({
 						click: function() {
 							pagination = 0;
 							browsepath = $(this).attr("uri");
@@ -591,29 +599,29 @@ function webSocketConnect() {
                     $('#salamisandwich > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold");
 
                     if(obj.data.random)
-                        $('#btnrandom').addClass("active")
+                        $('#btnrandom').removeClass('btn-secondary').addClass("btn-success")
                     else
-                        $('#btnrandom').removeClass("active");
+                        $('#btnrandom').removeClass("btn-success").addClass("btn-secondary");
 
                     if(obj.data.consume)
-                        $('#btnconsume').addClass("active")
+                        $('#btnconsume').removeClass('btn-secondary').addClass("btn-success")
                     else
-                        $('#btnconsume').removeClass("active");
+                        $('#btnconsume').removeClass("btn-success").addClass("btn-secondary");
 
                     if(obj.data.single)
-                        $('#btnsingle').addClass("active")
+                        $('#btnsingle').removeClass('btn-secondary').addClass("btn-success")
                     else
-                        $('#btnsingle').removeClass("active");
+                        $('#btnsingle').removeClass("btn-success").addClass("btn-secondary");
 
                     if(obj.data.crossfade)
-                        $('#btncrossfade').addClass("active")
+                        $('#btncrossfade').removeClass('btn-secondary').addClass("btn-success")
                     else
-                        $('#btncrossfade').removeClass("active");
+                        $('#btncrossfade').removeClass("btn-success").addClass("btn-secondary");
 
                     if(obj.data.repeat)
-                        $('#btnrepeat').addClass("active")
+                        $('#btnrepeat').removeClass('btn-secondary').addClass("btn-success")
                     else
-                        $('#btnrepeat').removeClass("active");
+                        $('#btnrepeat').removeClass("btn-success").addClass("btn-secondary");
 
                     last_state = obj;
                     break;
@@ -621,7 +629,7 @@ function webSocketConnect() {
                     $('#btn-outputs-block button').remove();
                     if ( Object.keys(obj.data).length ) {
 		        $.each(obj.data, function(id, name){
-                            var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
+                            var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary" onclick="toggleoutput(this, '+id+')"><span class="material-icons">volume_up</span> '+name+'</button>');
                             btn.appendTo($('#btn-outputs-block'));
                         });
 		    } else {
@@ -635,16 +643,16 @@ function webSocketConnect() {
                         break;
                     $.each(obj.data, function(id, enabled){
                         if (enabled)
-                        $('#btnoutput'+id).addClass("active");
+                            $('#btnoutput'+id).removeClass('btn-secondary').addClass("btn-success")
                         else
-                        $('#btnoutput'+id).removeClass("active");
+                            $('#btnoutput'+id).removeClass("btn-success").addClass("btn-secondary");
                     });
                     last_outputs = obj;
                     break;
                 case 'disconnected':
                     if($('.top-right').has('div').length == 0)
                         $('.top-right').notify({
-                            message:{text:"ympd lost connection to MPD "},
+                            message:{text:"myMPD lost connection to MPD "},
                             type: "danger",
                             fadeOut: { enabled: true, delay: 1000 },
                         }).show();
@@ -717,7 +725,7 @@ function webSocketConnect() {
         socket.onclose = function(){
             console.log("disconnected");
             $('.top-right').notify({
-                message:{text:"Connection to ympd lost, retrying in 3 seconds "},
+                message:{text:"Connection to myMPD lost, retrying in 3 seconds "},
                 type: "danger", 
                 onClose: function () {
                     webSocketConnect();
@@ -779,37 +787,33 @@ var updateVolumeIcon = function(volume)
 
 var updatePlayIcon = function(state)
 {
-    $("#play-icon").removeClass("glyphicon-play")
+    $("#play-icon").text('play_arrow');
-    .removeClass("glyphicon-pause");
-    $('#track-icon').removeClass("glyphicon-play")
-    .removeClass("glyphicon-pause")
-    .removeClass("glyphicon-stop");
 
     if(state == 1) { // stop
-        $("#play-icon").addClass("glyphicon-play");
+        $("#play-icon").text('play_arrow');
-        $('#track-icon').addClass("glyphicon-stop");
+        $('#track-icon').text('stop');
         document.getElementById('player').pause();
     } else if(state == 2) { // play
-        $("#play-icon").addClass("glyphicon-pause");
+        $("#play-icon").text('pause');
-        $('#track-icon').addClass("glyphicon-play");
+        $('#track-icon').text('play_arrow');
     } else { // pause
-        $("#play-icon").addClass("glyphicon-play");
+        $("#play-icon").text('play_arrow');
-        $('#track-icon').addClass("glyphicon-pause");
+        $('#track-icon').text('stop');
 	document.getElementById('player').pause();
     }
 }
 
 var updatePageTitle = function(songInfo) {
     if(!songInfo || (!songInfo.artist && !songInfo.title)) {
-        document.title = 'ympd';
+        document.title = 'myMPD';
         return;
     }
     if(songInfo.artist) {
         if(songInfo.title) {
-            document.title = 'ympd: '+songInfo.artist + ' - ' + songInfo.title;
+            document.title = 'myMPD: '+songInfo.artist + ' - ' + songInfo.title;
         }
     } else {
-        document.title = 'ympd: '+songInfo.title;
+        document.title = 'myMPD: '+songInfo.title;
     }
 }
 
@@ -909,30 +913,30 @@ function clickLove() {
 }
 
 $('#btnrandom').on('click', function (e) {
-    socket.send("MPD_API_TOGGLE_RANDOM," + ($(this).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_RANDOM," + ($(this).hasClass('btn-success') ? 0 : 1));
 
 });
 $('#btnconsume').on('click', function (e) {
-    socket.send("MPD_API_TOGGLE_CONSUME," + ($(this).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_CONSUME," + ($(this).hasClass('btn-success') ? 0 : 1));
 
 });
 $('#btnsingle').on('click', function (e) {
-    socket.send("MPD_API_TOGGLE_SINGLE," + ($(this).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_SINGLE," + ($(this).hasClass('btn-success') ? 0 : 1));
 });
 $('#btncrossfade').on('click', function(e) {
-    socket.send("MPD_API_TOGGLE_CROSSFADE," + ($(this).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_CROSSFADE," + ($(this).hasClass('btn-success') ? 0 : 1));
 });
 $('#btnrepeat').on('click', function (e) {
-    socket.send("MPD_API_TOGGLE_REPEAT," + ($(this).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_REPEAT," + ($(this).hasClass('btn-success') ? 0 : 1));
 });
 
 function toggleoutput(button, id) {
-    socket.send("MPD_API_TOGGLE_OUTPUT,"+id+"," + ($(button).hasClass('active') ? 0 : 1));
+    socket.send("MPD_API_TOGGLE_OUTPUT,"+id+"," + ($(button).hasClass('btn-success') ? 0 : 1));
 }
 
 $('#trashmode').children("button").on('click', function(e) {
-    $('#trashmode').children("button").removeClass("active");
+    $('#trashmode').children("button").removeClass("btn-success").addClass('btn-secondary');
-    $(this).addClass("active");
+    $(this).removeClass("btn-secondary").addClass("btn-success");
 });
 
 $('#btnnotify').on('click', function (e) {
@@ -946,7 +950,7 @@ $('#btnnotify').on('click', function (e) {
 
             if (permission === "granted") {
                 $.cookie("notification", true, { expires: 424242 });
-                $('btnnotify').addClass("active");
+                $('btnnotify').removeClass("btn-secondary").addClass("btn-success");
             }
         });
     }
@@ -969,7 +973,7 @@ function getHost() {
 }
 
 $('#search').submit(function () {
-    app.setLocation("#/search/"+$('#search > div > input').val());
+    app.setLocation("#/search/"+$('#search > input').val());
     $('#wait').modal('show');
     setTimeout(function() {
         $('#wait').modal('hide');
@@ -1254,8 +1258,8 @@ function dirble_load_stations() {
 
 function set_filter (c) {
     filter = c;
-	$('#filter > a').removeClass('active');
+	$('#filter > a').removeClass('btn-success');
-	$('#f' + c).addClass('active');
+	$('#f' + c).addClass('btn-success');
 
     if (filter === "") {
     	$('#salamisandwich > tbody > tr').removeClass('hide');
@@ -1288,13 +1292,13 @@ function set_filter (c) {
 }
 
 function add_filter () {
-    $('#filter').append('&nbsp;<a onclick="set_filter(\'\')" href="#/browse/'+pagination+'/'+browsepath+'">All</a>');
+    $('#filter').append('<a class="btn btn-secondary" onclick="set_filter(\'\')" href="#/browse/'+pagination+'/'+browsepath+'">All</a>');
-    $('#filter').append('&nbsp;<a id="fnum" onclick="set_filter(\'num\')" href="#/browse/'+pagination+'/'+browsepath+'">#</a>');
+    $('#filter').append('<a class="btn btn-secondary" id="fnum" onclick="set_filter(\'num\')" href="#/browse/'+pagination+'/'+browsepath+'">#</a>');
 
     for (i = 65; i <= 90; i++) {
         var c = String.fromCharCode(i);
-        $('#filter').append('&nbsp;<a id="f' + c + '" onclick="set_filter(\'' + c + '\');" href="#/browse/' + pagination + '/' + browsepath + '">' + c + '</a>');
+        $('#filter').append('<a class="btn btn-secondary" id="f' + c + '" onclick="set_filter(\'' + c + '\');" href="#/browse/' + pagination + '/' + browsepath + '">' + c + '</a>');
     }
 
-    $('#filter').append('&nbsp;<a id="fplist" onclick="set_filter(\'plist\')" href="#/browse/'+pagination+'/'+browsepath+'" class="glyphicon glyphicon-list"></a>');
+    $('#filter').append('<a class="btn btn-secondary material-icons" id="fplist" onclick="set_filter(\'plist\')" href="#/browse/'+pagination+'/'+browsepath+'">list</a>');
 }