1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-06-25 22:23:16 +00:00

Initial work

This commit is contained in:
jcorporation 2018-05-15 00:13:43 +01:00
parent 6800c27192
commit a9c48355b4
34 changed files with 21692 additions and 17940 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
htdocs/assets/appicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

1912
htdocs/css/bootstrap-grid.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
htdocs/css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

330
htdocs/css/bootstrap-reboot.css vendored Normal file
View File

@ -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 */

File diff suppressed because one or more lines are too long

8
htdocs/css/bootstrap-reboot.min.css vendored Normal file
View File

@ -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 */

File diff suppressed because one or more lines are too long

View File

@ -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 */

14580
htdocs/css/bootstrap.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
htdocs/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,14 +1,12 @@
body {
padding-top: 50px;
padding-bottom: 50px;
}
.starter-template {
padding: 40px 15px;
background-color:#888;
}
#volumeslider {
width: 150px;
margin-top:5px;
}
#volumeslider .progress {
@ -27,14 +25,12 @@ button {
margin-top: 2px;
}
#breadcrump {
display: block;
#breadcrumb {
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;
}

View File

@ -4,20 +4,19 @@
<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="author" content="andy@ndyk.de">
<meta name="description" content="myMPD - fast and lightweight MPD webclient">
<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">
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<script src="js/modernizr-custom.js"></script>
<!-- Webapp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
@ -25,66 +24,60 @@
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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>
<div class="collapse navbar-collapse">
<ul id="nav_links" class="nav navbar-nav">
<li id="queue"><a href="#/queue/0">Queue</a></li>
<li id="browse"><a href="#/browse/0/">Browse</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>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto" id="nav_links">
<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>
<li class="nav-item" id="dirble"><a class="nav-link" href="#/dirble/">Dirble</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
<li class="nav-item"><a class="nav-link" 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-group">
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV');">
<span class="glyphicon glyphicon-backward"></span>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
<span class="material-icons">skip_previous</span>
</button>
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_STOP');">
<span id="stop-icon" class="glyphicon glyphicon-stop"></span>
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_STOP');">
<span id="stop-icon" class="material-icons">stop</span>
</button>
<button type="button" class="btn btn-default" onclick="clickPlay();">
<span id="play-icon" class="glyphicon glyphicon-pause"></span>
<button type="button" class="btn btn-secondary" onclick="clickPlay();">
<span id="play-icon" class="material-icons">pause</span>
</button>
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');">
<span class="glyphicon glyphicon-forward"></span>
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_NEXT');">
<span class="material-icons">skip_next</span>
</button>
</div>
<div class="btn-group">
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
<span class="glyphicon glyphicon-heart"></span>
<div class="btn-group mr-2" role="group">
<button id="btnlove" type="button" class="btn btn-secondary" onclick="clickLove();">
<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">
<span class="glyphicon glyphicon-volume-up"></span>
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
<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 btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
<div class="btn-group mr-2">
<div class="btn btn-secondary">
<span id="volume-icon" class="material-icons">volume_up</span>
<div id="volumeslider"></div>
</div>
</div>
<div class="btn-group" role="group">
<div class="btn-group" role="group">
<audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
@ -95,87 +88,69 @@
</div>
</div>
<form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<form id="search" class="form-inline mt-2 mt-md-0" role="search">
<input type="text" class="form-control mr-sm-2" placeholder="Search">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container starter-template">
<div class="row">
</nav>
</header>
<main role="main" class="container">
<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>
<b id="panel-heading-info" class="text pull-right"></b></div>
<div class="panel hide" id="queue-buttons">
<!-- <div class="btn-group" data-toggle="buttons">
<button id="btnrandom" type="button" class="btn btn-default" title="Random">
<span class="glyphicon glyphicon-random"></span>
<div class="card-header">
<span id="panel-heading">Now playing</span>
<span id="panel-heading-info" class="text pull-right"></span>
</div>
<div class="card-body">
<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">
<span class="glyphicon glyphicon-fire"></span>
<button id="btntrashmodesingle" type="button" class="btn btn-success" title="Delete single">
<span class="material-icons">delete</span>
</button>
<button id="btnsingle" type="button" class="btn btn-default" title="Single">
<span class="glyphicon glyphicon-star"></span>
</button>
<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 id="btntrashmodedown" type="button" class="btn btn-secondary" title="Delete downward">
<span class="material-icons">delete</span>
<span class="material-icons">vertical_align_bottom</span>
</button>
</div>
-->
<div id="trashmode" class="btn-group" data-toggle="radio">
<button id="btntrashmodeup" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-trash"></span>
<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">
<span class="material-icons">clear_all</span>
</button>
<button id="btntrashmodesingle" type="button" class="btn btn-default active">
<span class="glyphicon glyphicon-star-empty"></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 href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-secondary" title="Save queue">
<span class="material-icons">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">
<button id="add-all-songs" class="btn btn-primary pull-right hide">Add all</button>
<div class="btn-toolbar hide" id="filter-toolbar">
<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="pager">
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
<li id="next" class="page-btn hide"><a href="">Next</a></li>
<ul class="pagination justify-content-center">
<li id="prev" class="page-item hide"><a class="page-link" href="">Previous</a></li>
<li id="next" class="page-item hide"><a class="page-link" href="">Next</a></li>
</ul>
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</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>
<h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wrench"></span> Settings</h2>
<h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
<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>
<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>ympd uses following excellent software:</h5>
<h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
<h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
<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>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>
<h5>myMPD uses following excellent software:</h5>
<h6><a style="color:#28a745" 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>
<hr />
<div class="row">
<div class="form-group col-md-6">
<button id="btnrandom" type="button" class="btn btn-default btn-block" title="Random">
<span class="glyphicon glyphicon-random"></span> Repeat
<button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
<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-default" onclick="confirmSettings();">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</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>
<h2 class="modal-title" id="addstreamLabel"><span class="glyphicon glyphicon-wrench"></span> Add Stream</h2>
<h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
<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-default" onclick="addStream();">Add Stream</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</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>
<h2 class="modal-title" id="savequeueLabel"><span class="glyphicon glyphicon-wrench"></span> Save Queue</h2>
<h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
<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-default" onclick="saveQueue();">Save Queue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</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,17 +379,16 @@
</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>
<script src="js/custom.js"></script></body>
<script src="js/custom.js"></script></body>
</html>

View File

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

6444
htdocs/js/bootstrap.bundle.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
htdocs/js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

5664
htdocs/js/bootstrap.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

2
htdocs/js/jquery-3.3.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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');
$('#filter').addClass('hide');
$('#salamisandwich').removeClass('hide');
$('#breadcrumb').addClass('hide');
$('#filter-toolbar').addClass('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');
$('#add-all-songs').hide();
$('.page-item').addClass('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>");
$('#filter').removeClass('hide');
$('#breadcrumb').removeClass('hide').empty().append("<li class=\"breadcrumb-item\"><a uri=\"\" onclick=\"set_filter('')\">root</a></li>");
$('#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\">" +
"<span class=\"glyphicon glyphicon-" + glyphicon + "\"></span></a>")
'<a role="button" class="pull-right btn-group-hover">' +
'<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.song > td:last-child"), 'MPD_API_ADD_TRACK', 'play');
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', '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")
.removeClass("glyphicon-pause");
$('#track-icon').removeClass("glyphicon-play")
.removeClass("glyphicon-pause")
.removeClass("glyphicon-stop");
$("#play-icon").text('play_arrow');
if(state == 1) { // stop
$("#play-icon").addClass("glyphicon-play");
$('#track-icon').addClass("glyphicon-stop");
document.getElementById('player').pause();
$("#play-icon").text('play_arrow');
$('#track-icon').text('stop');
document.getElementById('player').pause();
} else if(state == 2) { // play
$("#play-icon").addClass("glyphicon-pause");
$('#track-icon').addClass("glyphicon-play");
$("#play-icon").text('pause');
$('#track-icon').text('play_arrow');
} else { // pause
$("#play-icon").addClass("glyphicon-play");
$('#track-icon').addClass("glyphicon-pause");
document.getElementById('player').pause();
$("#play-icon").text('play_arrow');
$('#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");
$(this).addClass("active");
$('#trashmode').children("button").removeClass("btn-success").addClass('btn-secondary');
$(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');
$('#f' + c).addClass('active');
$('#filter > a').removeClass('btn-success');
$('#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('&nbsp;<a id="fnum" onclick="set_filter(\'num\')" href="#/browse/'+pagination+'/'+browsepath+'">#</a>');
$('#filter').append('<a class="btn btn-secondary" onclick="set_filter(\'\')" href="#/browse/'+pagination+'/'+browsepath+'">All</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>');
}