├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── css
    │   └── main.css
    └── js
    │   ├── bundle.js
    │   └── maps
    │       └── bundle.js.map
├── fonts
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
├── gulpfile.js
├── img
    ├── demo.png
    ├── favicon-144.png
    ├── favicon-192.png
    ├── favicon-48.png
    ├── favicon-512.png
    ├── favicon-72.png
    ├── favicon-96.png
    ├── icon.ico
    └── icon.png
├── index.html
├── package.json
├── sass
    ├── abstracts
    │   ├── _mixins.scss
    │   └── _variables.scss
    ├── base
    │   ├── _base.scss
    │   ├── _reset.scss
    │   └── _typograph.scss
    ├── components
    │   ├── _buttons.scss
    │   ├── _card.scss
    │   ├── _divider.scss
    │   ├── _dropdown.scss
    │   ├── _flip-card.scss
    │   ├── _icons.scss
    │   ├── _input-range.scss
    │   ├── _list.scss
    │   ├── _loading.scss
    │   ├── _sound-waves.scss
    │   └── _table.scss
    ├── layouts
    │   ├── _player.scss
    │   └── _user-settings.scss
    ├── main.scss
    ├── utils
    │   ├── _animations.scss
    │   ├── _colors.scss
    │   ├── _helpers.scss
    │   └── _shadows.scss
    └── vendors
    │   └── _normalize.scss
└── src
    └── js
        ├── components
            ├── dropdown.js
            └── player.js
        ├── helpers
            └── time.js
        ├── index.js
        └── main.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Carlos Alberto Silva Junior
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > Web Music Player
 2 | 
 3 | ![elementary](https://raw.githubusercontent.com/csilva2810/webmplayer/master/img/demo.png)
 4 | 
 5 | It's a MP3 music player made with only Javascript, CSS and HTML5 Audio API.\
 6 | It uses Javascript's File API to read the music files and reproduce them.\
 7 | A have used [Sass](https://sass-lang.com/) pre-compiler to create modular theming styles, so you can choose a dark or light theme and you can also change the player color for your favorite.\
 8 | The player also uses localStorage API to storage your last theme personalizations. So when you comeback to listen to your musics, the player will be like as you left it.\
 9 | And finally it also use's [Unsplash's API](https://source.unsplash.com/) to set the player background image.\
10 | 
11 | [See it working](http://csilva2810.github.io/webmplayer/index.html)
12 | 


--------------------------------------------------------------------------------
/dist/css/main.css:
--------------------------------------------------------------------------------
   1 | /* 
   2 | IMPORT ORDER
   3 | 	1 - abstracts/
   4 | 	2 - vendors/
   5 | 	3 - utils/
   6 | 	4 - base/
   7 | 	5 - layout/
   8 | 	6 - components/
   9 | 	7 - pages/
  10 | 	8 - themes/
  11 | */
  12 | /*
  13 |  * TYPOGRAPH
  14 |  */
  15 | /**
  16 |  * COLORS FOR PAGES AND ELEMENTS 
  17 |  */
  18 | /*
  19 |  * COLORS FOR USE IN THEMES
  20 |  */
  21 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
  22 | /**
  23 |  * 1. Change the default font family in all browsers (opinionated).
  24 |  * 2. Correct the line height in all browsers.
  25 |  * 3. Prevent adjustments of font size after orientation changes in
  26 |  *    IE on Windows Phone and in iOS.
  27 |  */
  28 | /* Document
  29 |    ========================================================================== */
  30 | html {
  31 |   font-family: sans-serif;
  32 |   /* 1 */
  33 |   line-height: 1.15;
  34 |   /* 2 */
  35 |   -ms-text-size-adjust: 100%;
  36 |   /* 3 */
  37 |   -webkit-text-size-adjust: 100%;
  38 |   /* 3 */ }
  39 | 
  40 | /* Sections
  41 |    ========================================================================== */
  42 | /**
  43 |  * Remove the margin in all browsers (opinionated).
  44 |  */
  45 | body {
  46 |   margin: 0; }
  47 | 
  48 | /**
  49 |  * Add the correct display in IE 9-.
  50 |  */
  51 | article,
  52 | aside,
  53 | footer,
  54 | header,
  55 | nav,
  56 | section {
  57 |   display: block; }
  58 | 
  59 | /**
  60 |  * Correct the font size and margin on `h1` elements within `section` and
  61 |  * `article` contexts in Chrome, Firefox, and Safari.
  62 |  */
  63 | h1 {
  64 |   font-size: 2em;
  65 |   margin: 0.67em 0; }
  66 | 
  67 | /* Grouping content
  68 |    ========================================================================== */
  69 | /**
  70 |  * Add the correct display in IE 9-.
  71 |  * 1. Add the correct display in IE.
  72 |  */
  73 | figcaption,
  74 | figure,
  75 | main {
  76 |   /* 1 */
  77 |   display: block; }
  78 | 
  79 | /**
  80 |  * Add the correct margin in IE 8.
  81 |  */
  82 | figure {
  83 |   margin: 1em 40px; }
  84 | 
  85 | /**
  86 |  * 1. Add the correct box sizing in Firefox.
  87 |  * 2. Show the overflow in Edge and IE.
  88 |  */
  89 | hr {
  90 |   box-sizing: content-box;
  91 |   /* 1 */
  92 |   height: 0;
  93 |   /* 1 */
  94 |   overflow: visible;
  95 |   /* 2 */ }
  96 | 
  97 | /**
  98 |  * 1. Correct the inheritance and scaling of font size in all browsers.
  99 |  * 2. Correct the odd `em` font sizing in all browsers.
 100 |  */
 101 | pre {
 102 |   font-family: monospace, monospace;
 103 |   /* 1 */
 104 |   font-size: 1em;
 105 |   /* 2 */ }
 106 | 
 107 | /* Text-level semantics
 108 |    ========================================================================== */
 109 | /**
 110 |  * 1. Remove the gray background on active links in IE 10.
 111 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 112 |  */
 113 | a {
 114 |   background-color: transparent;
 115 |   /* 1 */
 116 |   -webkit-text-decoration-skip: objects;
 117 |   /* 2 */ }
 118 | 
 119 | /**
 120 |  * Remove the outline on focused links when they are also active or hovered
 121 |  * in all browsers (opinionated).
 122 |  */
 123 | a:active,
 124 | a:hover {
 125 |   outline-width: 0; }
 126 | 
 127 | /**
 128 |  * 1. Remove the bottom border in Firefox 39-.
 129 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 130 |  */
 131 | abbr[title] {
 132 |   border-bottom: none;
 133 |   /* 1 */
 134 |   text-decoration: underline;
 135 |   /* 2 */
 136 |   text-decoration: underline dotted;
 137 |   /* 2 */ }
 138 | 
 139 | /**
 140 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 141 |  */
 142 | b,
 143 | strong {
 144 |   font-weight: inherit; }
 145 | 
 146 | /**
 147 |  * Add the correct font weight in Chrome, Edge, and Safari.
 148 |  */
 149 | b,
 150 | strong {
 151 |   font-weight: bolder; }
 152 | 
 153 | /**
 154 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 155 |  * 2. Correct the odd `em` font sizing in all browsers.
 156 |  */
 157 | code,
 158 | kbd,
 159 | samp {
 160 |   font-family: monospace, monospace;
 161 |   /* 1 */
 162 |   font-size: 1em;
 163 |   /* 2 */ }
 164 | 
 165 | /**
 166 |  * Add the correct font style in Android 4.3-.
 167 |  */
 168 | dfn {
 169 |   font-style: italic; }
 170 | 
 171 | /**
 172 |  * Add the correct background and color in IE 9-.
 173 |  */
 174 | mark {
 175 |   background-color: #ff0;
 176 |   color: #000; }
 177 | 
 178 | /**
 179 |  * Add the correct font size in all browsers.
 180 |  */
 181 | small {
 182 |   font-size: 80%; }
 183 | 
 184 | /**
 185 |  * Prevent `sub` and `sup` elements from affecting the line height in
 186 |  * all browsers.
 187 |  */
 188 | sub,
 189 | sup {
 190 |   font-size: 75%;
 191 |   line-height: 0;
 192 |   position: relative;
 193 |   vertical-align: baseline; }
 194 | 
 195 | sub {
 196 |   bottom: -0.25em; }
 197 | 
 198 | sup {
 199 |   top: -0.5em; }
 200 | 
 201 | /* Embedded content
 202 |    ========================================================================== */
 203 | /**
 204 |  * Add the correct display in IE 9-.
 205 |  */
 206 | audio,
 207 | video {
 208 |   display: inline-block; }
 209 | 
 210 | /**
 211 |  * Add the correct display in iOS 4-7.
 212 |  */
 213 | audio:not([controls]) {
 214 |   display: none;
 215 |   height: 0; }
 216 | 
 217 | /**
 218 |  * Remove the border on images inside links in IE 10-.
 219 |  */
 220 | img {
 221 |   border-style: none; }
 222 | 
 223 | /**
 224 |  * Hide the overflow in IE.
 225 |  */
 226 | svg:not(:root) {
 227 |   overflow: hidden; }
 228 | 
 229 | /* Forms
 230 |    ========================================================================== */
 231 | /**
 232 |  * 1. Change the font styles in all browsers (opinionated).
 233 |  * 2. Remove the margin in Firefox and Safari.
 234 |  */
 235 | button,
 236 | input,
 237 | optgroup,
 238 | select,
 239 | textarea {
 240 |   font-family: sans-serif;
 241 |   /* 1 */
 242 |   font-size: 100%;
 243 |   /* 1 */
 244 |   line-height: 1.15;
 245 |   /* 1 */
 246 |   margin: 0;
 247 |   /* 2 */ }
 248 | 
 249 | /**
 250 |  * Show the overflow in IE.
 251 |  * 1. Show the overflow in Edge.
 252 |  */
 253 | button,
 254 | input {
 255 |   /* 1 */
 256 |   overflow: visible; }
 257 | 
 258 | /**
 259 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
 260 |  * 1. Remove the inheritance of text transform in Firefox.
 261 |  */
 262 | button,
 263 | select {
 264 |   /* 1 */
 265 |   text-transform: none; }
 266 | 
 267 | /**
 268 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 269 |  *    controls in Android 4.
 270 |  * 2. Correct the inability to style clickable types in iOS and Safari.
 271 |  */
 272 | button,
 273 | html [type="button"],
 274 | [type="reset"],
 275 | [type="submit"] {
 276 |   -webkit-appearance: button;
 277 |   /* 2 */ }
 278 | 
 279 | /**
 280 |  * Remove the inner border and padding in Firefox.
 281 |  */
 282 | button::-moz-focus-inner,
 283 | [type="button"]::-moz-focus-inner,
 284 | [type="reset"]::-moz-focus-inner,
 285 | [type="submit"]::-moz-focus-inner {
 286 |   border-style: none;
 287 |   padding: 0; }
 288 | 
 289 | /**
 290 |  * Restore the focus styles unset by the previous rule.
 291 |  */
 292 | button:-moz-focusring,
 293 | [type="button"]:-moz-focusring,
 294 | [type="reset"]:-moz-focusring,
 295 | [type="submit"]:-moz-focusring {
 296 |   outline: 1px dotted ButtonText; }
 297 | 
 298 | /**
 299 |  * Change the border, margin, and padding in all browsers (opinionated).
 300 |  */
 301 | fieldset {
 302 |   border: 1px solid #c0c0c0;
 303 |   margin: 0 2px;
 304 |   padding: 0.35em 0.625em 0.75em; }
 305 | 
 306 | /**
 307 |  * 1. Correct the text wrapping in Edge and IE.
 308 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
 309 |  * 3. Remove the padding so developers are not caught out when they zero out
 310 |  *    `fieldset` elements in all browsers.
 311 |  */
 312 | legend {
 313 |   box-sizing: border-box;
 314 |   /* 1 */
 315 |   color: inherit;
 316 |   /* 2 */
 317 |   display: table;
 318 |   /* 1 */
 319 |   max-width: 100%;
 320 |   /* 1 */
 321 |   padding: 0;
 322 |   /* 3 */
 323 |   white-space: normal;
 324 |   /* 1 */ }
 325 | 
 326 | /**
 327 |  * 1. Add the correct display in IE 9-.
 328 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 329 |  */
 330 | progress {
 331 |   display: inline-block;
 332 |   /* 1 */
 333 |   vertical-align: baseline;
 334 |   /* 2 */ }
 335 | 
 336 | /**
 337 |  * Remove the default vertical scrollbar in IE.
 338 |  */
 339 | textarea {
 340 |   overflow: auto; }
 341 | 
 342 | /**
 343 |  * 1. Add the correct box sizing in IE 10-.
 344 |  * 2. Remove the padding in IE 10-.
 345 |  */
 346 | [type="checkbox"],
 347 | [type="radio"] {
 348 |   box-sizing: border-box;
 349 |   /* 1 */
 350 |   padding: 0;
 351 |   /* 2 */ }
 352 | 
 353 | /**
 354 |  * Correct the cursor style of increment and decrement buttons in Chrome.
 355 |  */
 356 | [type="number"]::-webkit-inner-spin-button,
 357 | [type="number"]::-webkit-outer-spin-button {
 358 |   height: auto; }
 359 | 
 360 | /**
 361 |  * 1. Correct the odd appearance in Chrome and Safari.
 362 |  * 2. Correct the outline style in Safari.
 363 |  */
 364 | [type="search"] {
 365 |   -webkit-appearance: textfield;
 366 |   /* 1 */
 367 |   outline-offset: -2px;
 368 |   /* 2 */ }
 369 | 
 370 | /**
 371 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 372 |  */
 373 | [type="search"]::-webkit-search-cancel-button,
 374 | [type="search"]::-webkit-search-decoration {
 375 |   -webkit-appearance: none; }
 376 | 
 377 | /**
 378 |  * 1. Correct the inability to style clickable types in iOS and Safari.
 379 |  * 2. Change font properties to `inherit` in Safari.
 380 |  */
 381 | ::-webkit-file-upload-button {
 382 |   -webkit-appearance: button;
 383 |   /* 1 */
 384 |   font: inherit;
 385 |   /* 2 */ }
 386 | 
 387 | /* Interactive
 388 |    ========================================================================== */
 389 | /*
 390 |  * Add the correct display in IE 9-.
 391 |  * 1. Add the correct display in Edge, IE, and Firefox.
 392 |  */
 393 | details,
 394 | menu {
 395 |   display: block; }
 396 | 
 397 | /*
 398 |  * Add the correct display in all browsers.
 399 |  */
 400 | summary {
 401 |   display: list-item; }
 402 | 
 403 | /* Scripting
 404 |    ========================================================================== */
 405 | /**
 406 |  * Add the correct display in IE 9-.
 407 |  */
 408 | canvas {
 409 |   display: inline-block; }
 410 | 
 411 | /**
 412 |  * Add the correct display in IE.
 413 |  */
 414 | template {
 415 |   display: none; }
 416 | 
 417 | /* Hidden
 418 |    ========================================================================== */
 419 | /**
 420 |  * Add the correct display in IE 10-.
 421 |  */
 422 | [hidden] {
 423 |   display: none; }
 424 | 
 425 | @-webkit-keyframes blink {
 426 |   0% {
 427 |     opacity: 0; }
 428 |   50% {
 429 |     opacity: 1; }
 430 |   100% {
 431 |     opacity: 0; } }
 432 | 
 433 | @keyframes blink {
 434 |   0% {
 435 |     opacity: 0; }
 436 |   50% {
 437 |     opacity: 1; }
 438 |   100% {
 439 |     opacity: 0; } }
 440 | 
 441 | /*
 442 | Generating classes to apply colors to elements
 443 | E.G: .bg-blue, .text-blue
 444 | */
 445 | .bg-green {
 446 |   background-color: #66bb6a !important; }
 447 | 
 448 | .text-green {
 449 |   color: #66bb6a !important; }
 450 | 
 451 | .bg-green-lighten {
 452 |   background-color: #78c37b !important; }
 453 | 
 454 | .text-green-lighten {
 455 |   color: #78c37b !important; }
 456 | 
 457 | .bg-green-darken {
 458 |   background-color: #54b359 !important; }
 459 | 
 460 | .text-green-darken {
 461 |   color: #54b359 !important; }
 462 | 
 463 | .bg-blue {
 464 |   background-color: #4fc3f7 !important; }
 465 | 
 466 | .text-blue {
 467 |   color: #4fc3f7 !important; }
 468 | 
 469 | .bg-blue-lighten {
 470 |   background-color: #67cbf8 !important; }
 471 | 
 472 | .text-blue-lighten {
 473 |   color: #67cbf8 !important; }
 474 | 
 475 | .bg-blue-darken {
 476 |   background-color: #37bbf6 !important; }
 477 | 
 478 | .text-blue-darken {
 479 |   color: #37bbf6 !important; }
 480 | 
 481 | .bg-red {
 482 |   background-color: #ff5555 !important; }
 483 | 
 484 | .text-red {
 485 |   color: #ff5555 !important; }
 486 | 
 487 | .bg-red-lighten {
 488 |   background-color: #ff6f6f !important; }
 489 | 
 490 | .text-red-lighten {
 491 |   color: #ff6f6f !important; }
 492 | 
 493 | .bg-red-darken {
 494 |   background-color: #ff3c3c !important; }
 495 | 
 496 | .text-red-darken {
 497 |   color: #ff3c3c !important; }
 498 | 
 499 | .bg-pink {
 500 |   background-color: #f06292 !important; }
 501 | 
 502 | .text-pink {
 503 |   color: #f06292 !important; }
 504 | 
 505 | .bg-pink-lighten {
 506 |   background-color: #f279a2 !important; }
 507 | 
 508 | .text-pink-lighten {
 509 |   color: #f279a2 !important; }
 510 | 
 511 | .bg-pink-darken {
 512 |   background-color: #ee4b82 !important; }
 513 | 
 514 | .text-pink-darken {
 515 |   color: #ee4b82 !important; }
 516 | 
 517 | .bg-purple {
 518 |   background-color: #ba68c8 !important; }
 519 | 
 520 | .text-purple {
 521 |   color: #ba68c8 !important; }
 522 | 
 523 | .bg-purple-lighten {
 524 |   background-color: #c37bcf !important; }
 525 | 
 526 | .text-purple-lighten {
 527 |   color: #c37bcf !important; }
 528 | 
 529 | .bg-purple-darken {
 530 |   background-color: #b155c1 !important; }
 531 | 
 532 | .text-purple-darken {
 533 |   color: #b155c1 !important; }
 534 | 
 535 | .bg-cyan {
 536 |   background-color: #4dd0e1 !important; }
 537 | 
 538 | .text-cyan {
 539 |   color: #4dd0e1 !important; }
 540 | 
 541 | .bg-cyan-lighten {
 542 |   background-color: #63d6e5 !important; }
 543 | 
 544 | .text-cyan-lighten {
 545 |   color: #63d6e5 !important; }
 546 | 
 547 | .bg-cyan-darken {
 548 |   background-color: #37cadd !important; }
 549 | 
 550 | .text-cyan-darken {
 551 |   color: #37cadd !important; }
 552 | 
 553 | .bg-teal {
 554 |   background-color: #00bfa5 !important; }
 555 | 
 556 | .text-teal {
 557 |   color: #00bfa5 !important; }
 558 | 
 559 | .bg-teal-lighten {
 560 |   background-color: #00d9bb !important; }
 561 | 
 562 | .text-teal-lighten {
 563 |   color: #00d9bb !important; }
 564 | 
 565 | .bg-teal-darken {
 566 |   background-color: #00a68f !important; }
 567 | 
 568 | .text-teal-darken {
 569 |   color: #00a68f !important; }
 570 | 
 571 | .bg-yellow {
 572 |   background-color: #fbc02d !important; }
 573 | 
 574 | .text-yellow {
 575 |   color: #fbc02d !important; }
 576 | 
 577 | .bg-yellow-lighten {
 578 |   background-color: #fbc846 !important; }
 579 | 
 580 | .text-yellow-lighten {
 581 |   color: #fbc846 !important; }
 582 | 
 583 | .bg-yellow-darken {
 584 |   background-color: #fbb814 !important; }
 585 | 
 586 | .text-yellow-darken {
 587 |   color: #fbb814 !important; }
 588 | 
 589 | .bg-orange {
 590 |   background-color: #ff7043 !important; }
 591 | 
 592 | .text-orange {
 593 |   color: #ff7043 !important; }
 594 | 
 595 | .bg-orange-lighten {
 596 |   background-color: #ff835d !important; }
 597 | 
 598 | .text-orange-lighten {
 599 |   color: #ff835d !important; }
 600 | 
 601 | .bg-orange-darken {
 602 |   background-color: #ff5d2a !important; }
 603 | 
 604 | .text-orange-darken {
 605 |   color: #ff5d2a !important; }
 606 | 
 607 | .right {
 608 |   float: right !important; }
 609 | 
 610 | .left {
 611 |   float: left !important; }
 612 | 
 613 | .clearfix::after {
 614 |   content: '';
 615 |   display: table;
 616 |   clear: both !important; }
 617 | 
 618 | .inline {
 619 |   display: inline !important; }
 620 | 
 621 | .inline-block {
 622 |   display: inline-block !important; }
 623 | 
 624 | .block {
 625 |   display: block !important; }
 626 | 
 627 | .half-width {
 628 |   width: 50% !important; }
 629 | 
 630 | .one-third-width {
 631 |   width: 33.3333% !important; }
 632 | 
 633 | .text-right {
 634 |   text-align: right !important; }
 635 | 
 636 | .text-center {
 637 |   text-align: center !important; }
 638 | 
 639 | .text-left {
 640 |   text-align: left !important; }
 641 | 
 642 | .text-justify {
 643 |   text-align: justify !important; }
 644 | 
 645 | .no-margin, .divider {
 646 |   margin: 0 !important; }
 647 | 
 648 | .no-padding {
 649 |   padding: 0 !important; }
 650 | 
 651 | .valign-middle {
 652 |   vertical-align: middle !important; }
 653 | 
 654 | .valign-top {
 655 |   vertical-align: top !important; }
 656 | 
 657 | .valign-bottom {
 658 |   vertical-align: bottom !important; }
 659 | 
 660 | .valign-base {
 661 |   vertical-align: baseline !important; }
 662 | 
 663 | .m-0 {
 664 |   margin: 0 !important; }
 665 | 
 666 | .m-t-0 {
 667 |   margin-top: 0 !important; }
 668 | 
 669 | .m-b-0 {
 670 |   margin-bottom: 0 !important; }
 671 | 
 672 | .m-l-0 {
 673 |   margin-left: 0 !important; }
 674 | 
 675 | .m-r-0 {
 676 |   margin-right: 0 !important; }
 677 | 
 678 | .m-5 {
 679 |   margin: 5px !important; }
 680 | 
 681 | .m-t-5 {
 682 |   margin-top: 5px !important; }
 683 | 
 684 | .m-b-5 {
 685 |   margin-bottom: 5px !important; }
 686 | 
 687 | .m-l-5 {
 688 |   margin-left: 5px !important; }
 689 | 
 690 | .m-r-5 {
 691 |   margin-right: 5px !important; }
 692 | 
 693 | .m-10 {
 694 |   margin: 10px !important; }
 695 | 
 696 | .m-t-10 {
 697 |   margin-top: 10px !important; }
 698 | 
 699 | .m-b-10 {
 700 |   margin-bottom: 10px !important; }
 701 | 
 702 | .m-l-10 {
 703 |   margin-left: 10px !important; }
 704 | 
 705 | .m-r-10 {
 706 |   margin-right: 10px !important; }
 707 | 
 708 | .m-15 {
 709 |   margin: 15px !important; }
 710 | 
 711 | .m-t-15 {
 712 |   margin-top: 15px !important; }
 713 | 
 714 | .m-b-15 {
 715 |   margin-bottom: 15px !important; }
 716 | 
 717 | .m-l-15 {
 718 |   margin-left: 15px !important; }
 719 | 
 720 | .m-r-15 {
 721 |   margin-right: 15px !important; }
 722 | 
 723 | .m-20 {
 724 |   margin: 20px !important; }
 725 | 
 726 | .m-t-20 {
 727 |   margin-top: 20px !important; }
 728 | 
 729 | .m-b-20 {
 730 |   margin-bottom: 20px !important; }
 731 | 
 732 | .m-l-20 {
 733 |   margin-left: 20px !important; }
 734 | 
 735 | .m-r-20 {
 736 |   margin-right: 20px !important; }
 737 | 
 738 | .m-25 {
 739 |   margin: 25px !important; }
 740 | 
 741 | .m-t-25 {
 742 |   margin-top: 25px !important; }
 743 | 
 744 | .m-b-25 {
 745 |   margin-bottom: 25px !important; }
 746 | 
 747 | .m-l-25 {
 748 |   margin-left: 25px !important; }
 749 | 
 750 | .m-r-25 {
 751 |   margin-right: 25px !important; }
 752 | 
 753 | .m-30 {
 754 |   margin: 30px !important; }
 755 | 
 756 | .m-t-30 {
 757 |   margin-top: 30px !important; }
 758 | 
 759 | .m-b-30 {
 760 |   margin-bottom: 30px !important; }
 761 | 
 762 | .m-l-30 {
 763 |   margin-left: 30px !important; }
 764 | 
 765 | .m-r-30 {
 766 |   margin-right: 30px !important; }
 767 | 
 768 | .p-0 {
 769 |   padding: 0 !important; }
 770 | 
 771 | .p-t-0 {
 772 |   padding-top: 0 !important; }
 773 | 
 774 | .p-b-0 {
 775 |   padding-bottom: 0 !important; }
 776 | 
 777 | .p-l-0 {
 778 |   padding-left: 0 !important; }
 779 | 
 780 | .p-r-0 {
 781 |   padding-right: 0 !important; }
 782 | 
 783 | .p-5 {
 784 |   padding: 5px !important; }
 785 | 
 786 | .p-t-5 {
 787 |   padding-top: 5px !important; }
 788 | 
 789 | .p-b-5 {
 790 |   padding-bottom: 5px !important; }
 791 | 
 792 | .p-l-5 {
 793 |   padding-left: 5px !important; }
 794 | 
 795 | .p-r-5 {
 796 |   padding-right: 5px !important; }
 797 | 
 798 | .p-10 {
 799 |   padding: 10px !important; }
 800 | 
 801 | .p-t-10 {
 802 |   padding-top: 10px !important; }
 803 | 
 804 | .p-b-10 {
 805 |   padding-bottom: 10px !important; }
 806 | 
 807 | .p-l-10 {
 808 |   padding-left: 10px !important; }
 809 | 
 810 | .p-r-10 {
 811 |   padding-right: 10px !important; }
 812 | 
 813 | .p-15 {
 814 |   padding: 15px !important; }
 815 | 
 816 | .p-t-15 {
 817 |   padding-top: 15px !important; }
 818 | 
 819 | .p-b-15 {
 820 |   padding-bottom: 15px !important; }
 821 | 
 822 | .p-l-15 {
 823 |   padding-left: 15px !important; }
 824 | 
 825 | .p-r-15 {
 826 |   padding-right: 15px !important; }
 827 | 
 828 | .p-20 {
 829 |   padding: 20px !important; }
 830 | 
 831 | .p-t-20 {
 832 |   padding-top: 20px !important; }
 833 | 
 834 | .p-b-20 {
 835 |   padding-bottom: 20px !important; }
 836 | 
 837 | .p-l-20 {
 838 |   padding-left: 20px !important; }
 839 | 
 840 | .p-r-20 {
 841 |   padding-right: 20px !important; }
 842 | 
 843 | .p-25 {
 844 |   padding: 25px !important; }
 845 | 
 846 | .p-t-25 {
 847 |   padding-top: 25px !important; }
 848 | 
 849 | .p-b-25 {
 850 |   padding-bottom: 25px !important; }
 851 | 
 852 | .p-l-25 {
 853 |   padding-left: 25px !important; }
 854 | 
 855 | .p-r-25 {
 856 |   padding-right: 25px !important; }
 857 | 
 858 | .p-30 {
 859 |   padding: 30px !important; }
 860 | 
 861 | .p-t-30 {
 862 |   padding-top: 30px !important; }
 863 | 
 864 | .p-b-30 {
 865 |   padding-bottom: 30px !important; }
 866 | 
 867 | .p-l-30 {
 868 |   padding-left: 30px !important; }
 869 | 
 870 | .p-r-30 {
 871 |   padding-right: 30px !important; }
 872 | 
 873 | .f-8 {
 874 |   font-size: 8px !important; }
 875 | 
 876 | .f-9 {
 877 |   font-size: 9px !important; }
 878 | 
 879 | .f-10 {
 880 |   font-size: 10px !important; }
 881 | 
 882 | .f-11 {
 883 |   font-size: 11px !important; }
 884 | 
 885 | .f-12 {
 886 |   font-size: 12px !important; }
 887 | 
 888 | .f-13 {
 889 |   font-size: 13px !important; }
 890 | 
 891 | .f-14 {
 892 |   font-size: 14px !important; }
 893 | 
 894 | .f-15 {
 895 |   font-size: 15px !important; }
 896 | 
 897 | .f-16 {
 898 |   font-size: 16px !important; }
 899 | 
 900 | .f-17 {
 901 |   font-size: 17px !important; }
 902 | 
 903 | .f-18 {
 904 |   font-size: 18px !important; }
 905 | 
 906 | .f-19 {
 907 |   font-size: 19px !important; }
 908 | 
 909 | .f-20 {
 910 |   font-size: 20px !important; }
 911 | 
 912 | .f-300 {
 913 |   font-weight: 300 !important; }
 914 | 
 915 | .f-400 {
 916 |   font-weight: 400 !important; }
 917 | 
 918 | .f-500 {
 919 |   font-weight: 500 !important; }
 920 | 
 921 | .f-700 {
 922 |   font-weight: 700 !important; }
 923 | 
 924 | .close, body {
 925 |   font-weight: 400; }
 926 | 
 927 | .p-relative {
 928 |   position: relative !important; }
 929 | 
 930 | .p-absolute {
 931 |   position: absolute !important; }
 932 | 
 933 | .p-fixed {
 934 |   position: fixed !important; }
 935 | 
 936 | .p-static {
 937 |   position: static !important; }
 938 | 
 939 | #main, .h-inner, .hi-trigger, body {
 940 |   position: relative; }
 941 | 
 942 | .o-hidden {
 943 |   overflow: hidden !important; }
 944 | 
 945 | .o-visible {
 946 |   overflow: visible !important; }
 947 | 
 948 | .no-shadow {
 949 |   box-shadow: none !important; }
 950 | 
 951 | .is-timer {
 952 |   font-family: "Consolas", "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", "monaco", monospace; }
 953 | 
 954 | .shadow-1, .btn {
 955 |   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075), 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
 956 | 
 957 | .shadow-2, .btn:hover, .btn:focus, .card, .dropdown-menu {
 958 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.075), 0 3px 4px 0 rgba(0, 0, 0, 0.1); }
 959 | 
 960 | .shadow-3, .btn:active, .dropdown-menu:hover {
 961 |   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.075), 0 3px 12px 0 rgba(0, 0, 0, 0.1); }
 962 | 
 963 | .shadow-4, .card:hover {
 964 |   box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.075), 0 4px 20px 0 rgba(0, 0, 0, 0.1); }
 965 | 
 966 | *,
 967 | *::before,
 968 | *::after {
 969 |   box-sizing: border-box; }
 970 | 
 971 | ::-webkit-scrollbar {
 972 |   width: 9px;
 973 |   height: 9px; }
 974 | 
 975 | ::-webkit-scrollbar-track {
 976 |   background-color: transparent; }
 977 | 
 978 | ::-webkit-scrollbar-thumb {
 979 |   background-color: #ddd; }
 980 | 
 981 | ::-webkit-scrollbar-thumb:hover {
 982 |   background-color: #ccc; }
 983 | 
 984 | ::-webkit-scrollbar-thumb:active {
 985 |   background-color: #bbb; }
 986 | 
 987 | .dark ::-webkit-scrollbar-thumb {
 988 |   background-color: #555; }
 989 | 
 990 | .dark ::-webkit-scrollbar-thumb:hover {
 991 |   background-color: #444; }
 992 | 
 993 | .dark ::-webkit-scrollbar-thumb:active {
 994 |   background-color: #333; }
 995 | 
 996 | html,
 997 | body {
 998 |   margin: 0;
 999 |   padding: 0;
1000 |   width: 100%;
1001 |   height: 100%;
1002 |   font-family: "Rubik", "Helvetica", "Segoe UI", sans-serif;
1003 |   font-size: 100%;
1004 |   color: #757575; }
1005 | 
1006 | body {
1007 |   background-color: #EAEDF1;
1008 |   background-image: url("https://source.unsplash.com/weekly?music");
1009 |   background-size: cover;
1010 |   background-repeat: no-repeat; }
1011 |   body.dark {
1012 |     color: #eceff1;
1013 |     background-color: #5A5D61; }
1014 | 
1015 | .container {
1016 |   position: fixed;
1017 |   top: 8%;
1018 |   right: 0;
1019 |   bottom: 0;
1020 |   left: 0;
1021 |   margin: auto;
1022 |   display: block;
1023 |   width: 80%;
1024 |   height: auto; }
1025 | 
1026 | .logo {
1027 |   font-size: 1.5em; }
1028 |   .green .logo {
1029 |     color: #66bb6a; }
1030 |   .blue .logo {
1031 |     color: #4fc3f7; }
1032 |   .red .logo {
1033 |     color: #ff5555; }
1034 |   .pink .logo {
1035 |     color: #f06292; }
1036 |   .purple .logo {
1037 |     color: #ba68c8; }
1038 |   .cyan .logo {
1039 |     color: #4dd0e1; }
1040 |   .teal .logo {
1041 |     color: #00bfa5; }
1042 |   .yellow .logo {
1043 |     color: #fbc02d; }
1044 |   .orange .logo {
1045 |     color: #ff7043; }
1046 | 
1047 | .music-name {
1048 |   display: block;
1049 |   padding: 8px;
1050 |   margin-top: 3px;
1051 |   border-radius: 3px;
1052 |   overflow: hidden;
1053 |   white-space: nowrap;
1054 |   text-overflow: ellipsis;
1055 |   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
1056 |   .light .music-name {
1057 |     background-color: #ededed; }
1058 |   .dark .music-name {
1059 |     background-color: #2e3034; }
1060 | 
1061 | .play-list-wrap {
1062 |   width: 100%;
1063 |   height: 200px;
1064 |   max-height: 200px;
1065 |   overflow-y: auto; }
1066 | 
1067 | .player-wrap {
1068 |   display: block;
1069 |   width: 100%; }
1070 | 
1071 | .dropdown-menu.user-settings {
1072 |   width: 120px; }
1073 | 
1074 | .theme,
1075 | .color {
1076 |   display: block;
1077 |   width: 100%;
1078 |   padding: 0;
1079 |   margin: 0;
1080 |   list-style: none; }
1081 | 
1082 | .theme .theme-item-btn {
1083 |   display: block;
1084 |   width: 100%;
1085 |   height: 40px;
1086 |   line-height: 40px;
1087 |   text-align: center;
1088 |   text-decoration: none;
1089 |   color: inherit;
1090 |   cursor: pointer;
1091 |   transition: .3s; }
1092 |   .theme .theme-item-btn:hover {
1093 |     background: rgba(0, 0, 0, 0.05); }
1094 | 
1095 | .color > .color-item {
1096 |   margin: 0; }
1097 | 
1098 | /*--- buttons ---*/
1099 | .btn {
1100 |   display: inline-block;
1101 |   padding: 8px 10px;
1102 |   border: 1px solid transparent;
1103 |   border-radius: 3px;
1104 |   outline: none;
1105 |   color: #757575;
1106 |   text-align: center;
1107 |   cursor: pointer;
1108 |   transition: .3s;
1109 |   will-change: box-shadow, background-color; }
1110 |   .light .btn {
1111 |     background-color: #ededed; }
1112 |   .dark .btn {
1113 |     background-color: #2e3034; }
1114 |   .light .btn:hover, .light .btn:focus {
1115 |     background-color: #ededed; }
1116 |   .dark .btn:hover, .dark .btn:focus {
1117 |     background-color: #2e3034; }
1118 |   .btn.btn-primary {
1119 |     color: white; }
1120 |     .green .btn.btn-primary {
1121 |       background-color: #66bb6a; }
1122 |     .blue .btn.btn-primary {
1123 |       background-color: #4fc3f7; }
1124 |     .red .btn.btn-primary {
1125 |       background-color: #ff5555; }
1126 |     .pink .btn.btn-primary {
1127 |       background-color: #f06292; }
1128 |     .purple .btn.btn-primary {
1129 |       background-color: #ba68c8; }
1130 |     .cyan .btn.btn-primary {
1131 |       background-color: #4dd0e1; }
1132 |     .teal .btn.btn-primary {
1133 |       background-color: #00bfa5; }
1134 |     .yellow .btn.btn-primary {
1135 |       background-color: #fbc02d; }
1136 |     .orange .btn.btn-primary {
1137 |       background-color: #ff7043; }
1138 |     .green .btn.btn-primary:hover, .green .btn.btn-primary:focus {
1139 |       background-color: #78c37b; }
1140 |     .blue .btn.btn-primary:hover, .blue .btn.btn-primary:focus {
1141 |       background-color: #67cbf8; }
1142 |     .red .btn.btn-primary:hover, .red .btn.btn-primary:focus {
1143 |       background-color: #ff6f6f; }
1144 |     .pink .btn.btn-primary:hover, .pink .btn.btn-primary:focus {
1145 |       background-color: #f279a2; }
1146 |     .purple .btn.btn-primary:hover, .purple .btn.btn-primary:focus {
1147 |       background-color: #c37bcf; }
1148 |     .cyan .btn.btn-primary:hover, .cyan .btn.btn-primary:focus {
1149 |       background-color: #63d6e5; }
1150 |     .teal .btn.btn-primary:hover, .teal .btn.btn-primary:focus {
1151 |       background-color: #00d9bb; }
1152 |     .yellow .btn.btn-primary:hover, .yellow .btn.btn-primary:focus {
1153 |       background-color: #fbc846; }
1154 |     .orange .btn.btn-primary:hover, .orange .btn.btn-primary:focus {
1155 |       background-color: #ff835d; }
1156 |   .btn.btn-circle {
1157 |     padding: 0;
1158 |     width: 50px;
1159 |     height: 50px;
1160 |     line-height: 50px;
1161 |     border-radius: 50%; }
1162 |     .btn.btn-circle.btn-large {
1163 |       font-size: 1.25em;
1164 |       width: 75px;
1165 |       height: 75px;
1166 |       line-height: 75px; }
1167 |     .btn.btn-circle.btn-small {
1168 |       font-size: 1em;
1169 |       width: 35px;
1170 |       height: 35px;
1171 |       line-height: 35px; }
1172 |   .btn.btn-circle:hover {
1173 |     color: white; }
1174 |     .green .btn.btn-circle:hover {
1175 |       background-color: #66bb6a; }
1176 |     .blue .btn.btn-circle:hover {
1177 |       background-color: #4fc3f7; }
1178 |     .red .btn.btn-circle:hover {
1179 |       background-color: #ff5555; }
1180 |     .pink .btn.btn-circle:hover {
1181 |       background-color: #f06292; }
1182 |     .purple .btn.btn-circle:hover {
1183 |       background-color: #ba68c8; }
1184 |     .cyan .btn.btn-circle:hover {
1185 |       background-color: #4dd0e1; }
1186 |     .teal .btn.btn-circle:hover {
1187 |       background-color: #00bfa5; }
1188 |     .yellow .btn.btn-circle:hover {
1189 |       background-color: #fbc02d; }
1190 |     .orange .btn.btn-circle:hover {
1191 |       background-color: #ff7043; }
1192 |   .green .btn.is-on {
1193 |     box-shadow: 0 0 5px #66bb6a; }
1194 |   .blue .btn.is-on {
1195 |     box-shadow: 0 0 5px #4fc3f7; }
1196 |   .red .btn.is-on {
1197 |     box-shadow: 0 0 5px #ff5555; }
1198 |   .pink .btn.is-on {
1199 |     box-shadow: 0 0 5px #f06292; }
1200 |   .purple .btn.is-on {
1201 |     box-shadow: 0 0 5px #ba68c8; }
1202 |   .cyan .btn.is-on {
1203 |     box-shadow: 0 0 5px #4dd0e1; }
1204 |   .teal .btn.is-on {
1205 |     box-shadow: 0 0 5px #00bfa5; }
1206 |   .yellow .btn.is-on {
1207 |     box-shadow: 0 0 5px #fbc02d; }
1208 |   .orange .btn.is-on {
1209 |     box-shadow: 0 0 5px #ff7043; }
1210 |   .green .btn.is-on {
1211 |     color: #66bb6a; }
1212 |   .blue .btn.is-on {
1213 |     color: #4fc3f7; }
1214 |   .red .btn.is-on {
1215 |     color: #ff5555; }
1216 |   .pink .btn.is-on {
1217 |     color: #f06292; }
1218 |   .purple .btn.is-on {
1219 |     color: #ba68c8; }
1220 |   .cyan .btn.is-on {
1221 |     color: #4dd0e1; }
1222 |   .teal .btn.is-on {
1223 |     color: #00bfa5; }
1224 |   .yellow .btn.is-on {
1225 |     color: #fbc02d; }
1226 |   .orange .btn.is-on {
1227 |     color: #ff7043; }
1228 |   .btn.is-on:hover {
1229 |     color: white; }
1230 |   .btn.btn-color {
1231 |     display: inline-block;
1232 |     width: 24px;
1233 |     height: 24px;
1234 |     margin: 3px;
1235 |     box-shadow: none; }
1236 |     .btn.btn-color:hover, .btn.btn-color:focus {
1237 |       box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); }
1238 | 
1239 | .card {
1240 |   display: block;
1241 |   width: 100%;
1242 |   margin: 0 auto;
1243 |   border-radius: 3px;
1244 |   transition: .2s;
1245 |   will-change: box-shadow; }
1246 |   .light .card {
1247 |     background-color: #fafafa; }
1248 |   .dark .card {
1249 |     background-color: #3A3D41; }
1250 |   .card > .card-header {
1251 |     display: block;
1252 |     padding: 5px 10px;
1253 |     border-radius: 3px 3px 0 0; }
1254 |     .card > .card-header .btn-header {
1255 |       padding: 0;
1256 |       width: 32px;
1257 |       height: 32px;
1258 |       line-height: 32px; }
1259 | 
1260 | .dropdown-wrapper {
1261 |   position: relative; }
1262 | 
1263 | .dropdown-menu {
1264 |   z-index: 2;
1265 |   position: absolute;
1266 |   right: 0;
1267 |   top: 120%;
1268 |   display: block;
1269 |   min-width: 50px;
1270 |   padding: 0;
1271 |   margin: 0;
1272 |   list-style: none;
1273 |   border-radius: 3px;
1274 |   overflow: hidden;
1275 |   opacity: 0;
1276 |   visibility: hidden;
1277 |   transform-origin: top right;
1278 |   transform: translateY(-10px);
1279 |   transition: 0.4s ease; }
1280 |   .light .dropdown-menu {
1281 |     background-color: white; }
1282 |   .dark .dropdown-menu {
1283 |     background-color: #464a4e; }
1284 |   .light .dropdown-menu {
1285 |     color: #757575; }
1286 |   .dark .dropdown-menu {
1287 |     color: #eceff1; }
1288 |   .dropdown-menu.is-active {
1289 |     opacity: 1;
1290 |     visibility: visible;
1291 |     transform: translateY(0); }
1292 |   .dropdown-menu.dropdown-up {
1293 |     top: -100%;
1294 |     transform: translateY(10px); }
1295 |   .dropdown-menu > .item {
1296 |     display: block;
1297 |     width: 100%;
1298 |     line-height: normal; }
1299 |     .dropdown-menu > .item.divider {
1300 |       display: block;
1301 |       height: 1px;
1302 |       margin: 0;
1303 |       border: none;
1304 |       background-color: #eee;
1305 |       background: linear-gradient(to right, transparent, #eee, transparent); }
1306 |     .dropdown-menu > .item > .link {
1307 |       display: block;
1308 |       width: 100%;
1309 |       padding: 12px 8px;
1310 |       color: #555;
1311 |       text-decoration: none;
1312 |       transition: .2s; }
1313 |       .dropdown-menu > .item > .link:hover, .dropdown-menu > .item > .link:focus {
1314 |         background-color: #fafafa; }
1315 |       .dropdown-menu > .item > .link:first-child {
1316 |         border-radius: 3px 3px 0 0; }
1317 |       .dropdown-menu > .item > .link:last-child {
1318 |         border-radius: 0 0 3px 3px; }
1319 |       .dropdown-menu > .item > .link > .icon {
1320 |         display: inline-block;
1321 |         margin-right: 5px;
1322 |         height: 22px;
1323 |         line-height: 22px;
1324 |         vertical-align: middle; }
1325 | 
1326 | .flip-container {
1327 |   perspective: 1000; }
1328 | 
1329 | .flip-container,
1330 | .front,
1331 | .back {
1332 |   display: inline-block;
1333 |   width: 80px;
1334 |   height: 75px;
1335 |   position: relative;
1336 |   top: 25px;
1337 |   z-index: 1; }
1338 | 
1339 | .flipper {
1340 |   position: relative;
1341 |   transition: 0.6s;
1342 |   transform-style: preserve-3d; }
1343 | 
1344 | .flip-container.is-flipped .flipper {
1345 |   transform: rotateY(180deg); }
1346 | 
1347 | .front,
1348 | .back {
1349 |   position: absolute;
1350 |   top: 0;
1351 |   left: 0;
1352 |   backface-visibility: hidden; }
1353 | 
1354 | .front {
1355 |   z-index: 2;
1356 |   transform: rotateY(0deg); }
1357 | 
1358 | .back {
1359 |   z-index: 1;
1360 |   transform: rotateY(180deg); }
1361 | 
1362 | @font-face {
1363 |   font-family: 'Glyphicons Halflings';
1364 |   src: url("../../fonts/glyphicons-halflings-regular.eot");
1365 |   src: url("../../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
1366 | 
1367 | .icon {
1368 |   position: relative;
1369 |   top: 1px;
1370 |   display: inline-block;
1371 |   font-family: 'Glyphicons Halflings';
1372 |   font-style: normal;
1373 |   font-weight: normal;
1374 |   line-height: 1;
1375 |   -webkit-font-smoothing: antialiased;
1376 |   -moz-osx-font-smoothing: grayscale; }
1377 | 
1378 | .icon-headphones:before {
1379 |   content: "\e035"; }
1380 | 
1381 | .icon-cog:before {
1382 |   content: "\e019"; }
1383 | 
1384 | .icon-music:before {
1385 |   content: "\e002"; }
1386 | 
1387 | .icon-repeat:before {
1388 |   content: "\e030"; }
1389 | 
1390 | .icon-chevron-left:before {
1391 |   content: "\e079"; }
1392 | 
1393 | .icon-chevron-right:before {
1394 |   content: "\e080"; }
1395 | 
1396 | .icon-play:before {
1397 |   content: "\e072"; }
1398 | 
1399 | .icon-pause:before {
1400 |   content: "\e073"; }
1401 | 
1402 | .icon-random:before {
1403 |   content: "\e110"; }
1404 | 
1405 | .icon-volume-down:before {
1406 |   content: "\e037"; }
1407 | 
1408 | .icon-volume-up:before {
1409 |   content: "\e038"; }
1410 | 
1411 | .range {
1412 |   width: 100%;
1413 |   height: 6px;
1414 |   position: relative;
1415 |   top: -3px;
1416 |   border: none;
1417 |   outline: none;
1418 |   border-radius: 100px;
1419 |   box-shadow: inset 0 1px 1px 0 rgba(25, 25, 25, 0.1);
1420 |   transition: .2s;
1421 |   -webkit-appearance: none;
1422 |   -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
1423 |   .light .range {
1424 |     background-color: #ededed; }
1425 |   .dark .range {
1426 |     background-color: #2e3034; }
1427 |   .range::-moz-range-track, .range::-ms-fill-lower, .range::-ms-fill-upper, .range::-ms-track {
1428 |     border: none;
1429 |     color: transparent;
1430 |     background-color: transparent; }
1431 |   .range::-ms-tooltip {
1432 |     display: none; }
1433 |   .range::-webkit-slider-thumb {
1434 |     -webkit-appearance: none;
1435 |     width: 18px;
1436 |     height: 18px;
1437 |     border: none;
1438 |     border-radius: 50%;
1439 |     will-change: transform;
1440 |     transition: .2s; }
1441 |     .green .range::-webkit-slider-thumb {
1442 |       background-color: #66bb6a; }
1443 |     .blue .range::-webkit-slider-thumb {
1444 |       background-color: #4fc3f7; }
1445 |     .red .range::-webkit-slider-thumb {
1446 |       background-color: #ff5555; }
1447 |     .pink .range::-webkit-slider-thumb {
1448 |       background-color: #f06292; }
1449 |     .purple .range::-webkit-slider-thumb {
1450 |       background-color: #ba68c8; }
1451 |     .cyan .range::-webkit-slider-thumb {
1452 |       background-color: #4dd0e1; }
1453 |     .teal .range::-webkit-slider-thumb {
1454 |       background-color: #00bfa5; }
1455 |     .yellow .range::-webkit-slider-thumb {
1456 |       background-color: #fbc02d; }
1457 |     .orange .range::-webkit-slider-thumb {
1458 |       background-color: #ff7043; }
1459 |   .range:active::-webkit-slider-thumb {
1460 |     transform: scale(1.2);
1461 |     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); }
1462 |   .range::-moz-range-thumb {
1463 |     width: 18px;
1464 |     height: 18px;
1465 |     border: none;
1466 |     border-radius: 50%;
1467 |     will-change: transform;
1468 |     transition: .3s; }
1469 |     .green .range::-moz-range-thumb {
1470 |       background-color: #66bb6a; }
1471 |     .blue .range::-moz-range-thumb {
1472 |       background-color: #4fc3f7; }
1473 |     .red .range::-moz-range-thumb {
1474 |       background-color: #ff5555; }
1475 |     .pink .range::-moz-range-thumb {
1476 |       background-color: #f06292; }
1477 |     .purple .range::-moz-range-thumb {
1478 |       background-color: #ba68c8; }
1479 |     .cyan .range::-moz-range-thumb {
1480 |       background-color: #4dd0e1; }
1481 |     .teal .range::-moz-range-thumb {
1482 |       background-color: #00bfa5; }
1483 |     .yellow .range::-moz-range-thumb {
1484 |       background-color: #fbc02d; }
1485 |     .orange .range::-moz-range-thumb {
1486 |       background-color: #ff7043; }
1487 |   .range:active::-moz-range-thumb {
1488 |     transform: scale(1.2); }
1489 |   .range::-ms-thumb {
1490 |     width: 18px;
1491 |     height: 18px;
1492 |     border: none;
1493 |     border-radius: 50%;
1494 |     will-change: transform;
1495 |     transition: .3s; }
1496 |     .green .range::-ms-thumb {
1497 |       background-color: #66bb6a; }
1498 |     .blue .range::-ms-thumb {
1499 |       background-color: #4fc3f7; }
1500 |     .red .range::-ms-thumb {
1501 |       background-color: #ff5555; }
1502 |     .pink .range::-ms-thumb {
1503 |       background-color: #f06292; }
1504 |     .purple .range::-ms-thumb {
1505 |       background-color: #ba68c8; }
1506 |     .cyan .range::-ms-thumb {
1507 |       background-color: #4dd0e1; }
1508 |     .teal .range::-ms-thumb {
1509 |       background-color: #00bfa5; }
1510 |     .yellow .range::-ms-thumb {
1511 |       background-color: #fbc02d; }
1512 |     .orange .range::-ms-thumb {
1513 |       background-color: #ff7043; }
1514 |   .range:active::-ms-thumb {
1515 |     transform: scale(1.2); }
1516 | 
1517 | .play-list {
1518 |   list-style: none;
1519 |   width: 100%;
1520 |   margin: 0 auto;
1521 |   padding: 0; }
1522 |   .play-list > .list-item {
1523 |     padding: 8px;
1524 |     transition: background-color .2s;
1525 |     font-size: 0.8em; }
1526 |     .play-list > .list-item:hover {
1527 |       background-color: rgba(0, 0, 0, 0.05); }
1528 |     .play-list > .list-item.is-active {
1529 |       background-color: rgba(0, 0, 0, 0.05); }
1530 |     .play-list > .list-item > .btn {
1531 |       padding: 0;
1532 |       width: 30px;
1533 |       height: 30px;
1534 |       line-height: 30px;
1535 |       margin-right: 10px; }
1536 | 
1537 | .dark .play-list > .lit-item.is-active {
1538 |   background-color: rgba(0, 0, 0, 0.1); }
1539 | 
1540 | .loading {
1541 |   margin: 4px;
1542 |   display: none; }
1543 | 
1544 | .loading.show {
1545 |   display: block;
1546 |   -webkit-animation: blink 1s ease-in-out 0s infinite alternate;
1547 |   -moz-animation: blink 1s ease-in-out 0s infinite alternate;
1548 |   animation: blink 1s ease-in-out 0s infinite alternate; }
1549 | 
1550 | .sound-wave {
1551 |   display: inline-block;
1552 |   position: relative;
1553 |   margin-left: 10px;
1554 |   vertical-align: middle; }
1555 | 
1556 | .sound-wave .bar {
1557 |   position: absolute;
1558 |   height: 2px;
1559 |   width: 6px; }
1560 | 
1561 | .sound-wave.is-active .bar {
1562 |   -webkit-animation: sound 0.5s linear infinite alternate;
1563 |   -moz-animation: sound 0.5s linear infinite alternate;
1564 |   animation: sound 0.5s linear infinite alternate; }
1565 | 
1566 | .sound-wave .bar:nth-child(1) {
1567 |   left: 0;
1568 |   -webkit-animation-delay: 0s;
1569 |   -moz-animation-delay: 0s;
1570 |   animation-delay: 0s; }
1571 | 
1572 | .sound-wave .bar:nth-child(2) {
1573 |   left: 8px;
1574 |   -webkit-animation-delay: 0.5s;
1575 |   -moz-animation-delay: 0.5s;
1576 |   animation-delay: 0.5s; }
1577 | 
1578 | .sound-wave .bar:nth-child(3) {
1579 |   left: 16px;
1580 |   -webkit-animation-delay: 0.75s;
1581 |   -moz-animation-delay: 0.75s;
1582 |   animation-delay: 0.75s; }
1583 | 
1584 | @-webkit-keyframes sound {
1585 |   0% {
1586 |     height: 4px;
1587 |     top: 0;
1588 |     background: #66CCFF; }
1589 |   100% {
1590 |     height: 10px;
1591 |     top: -6px;
1592 |     background: #CC99FF; } }
1593 | 
1594 | @keyframes sound {
1595 |   0% {
1596 |     height: 2px;
1597 |     top: 0;
1598 |     background: #66CCFF; }
1599 |   100% {
1600 |     height: 10px;
1601 |     top: -8px;
1602 |     background: #CC99FF; } }
1603 | 
1604 | .divider {
1605 |   display: block;
1606 |   height: 1px;
1607 |   border: none;
1608 |   background-color: rgba(0, 0, 0, 0.04);
1609 |   border-bottom: 1px solid white; }
1610 | 
1611 | .dark .divider {
1612 |   background-color: rgba(0, 0, 0, 0.3);
1613 |   border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
1614 | 
1615 | .table {
1616 |   width: 100%;
1617 |   border: none;
1618 |   background-color: transparent;
1619 |   border-collapse: collapse; }
1620 | 
1621 | .table td {
1622 |   padding: 4px; }
1623 | 


--------------------------------------------------------------------------------
/dist/js/bundle.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | 'use strict';
  3 | 
  4 | var toggles = document.querySelectorAll('.dropdown-toggle');
  5 | var dropdowns = [];
  6 | 
  7 | var hasClass = function hasClass(el, cl) {
  8 | 	return el.classList.toString().indexOf(cl) > -1 ? true : false;
  9 | };
 10 | 
 11 | if (toggles) {
 12 | 	toggles.forEach(function (toggle) {
 13 | 		toggle.addEventListener('click', function (e) {
 14 | 
 15 | 			e.stopPropagation();
 16 | 
 17 | 			var target = this.getAttribute('data-dropdown');
 18 | 			if (!target) return false;
 19 | 
 20 | 			var dropdown = document.querySelector('#' + target);
 21 | 			if (!dropdown) return false;
 22 | 
 23 | 			if (hasClass(dropdown, 'is-active')) {
 24 | 				dropdown.classList.remove('is-active');
 25 | 			} else {
 26 | 				dropdown.classList.add('is-active');
 27 | 				dropdowns.push(dropdown);
 28 | 				dropdown.addEventListener('click', function (e) {
 29 | 					e.stopPropagation();
 30 | 				}, false);
 31 | 			}
 32 | 		}, false);
 33 | 	});
 34 | 
 35 | 	document.body.addEventListener('click', function () {
 36 | 
 37 | 		dropdowns.forEach(function (dropdown) {
 38 | 			if (hasClass(dropdown, 'is-active')) {
 39 | 				dropdown.classList.remove('is-active');
 40 | 				dropdowns.splice(dropdowns.indexOf(dropdown), 1);
 41 | 			}
 42 | 		});
 43 | 	}, false);
 44 | }
 45 | 
 46 | },{}],2:[function(require,module,exports){
 47 | "use strict";
 48 | 
 49 | var timeHelper = require('../helpers/time');
 50 | 
 51 | var audio = document.querySelector("#player"),
 52 |     btnPlay = document.querySelector("#btn-play"),
 53 |     btnPause = document.querySelector("#btn-pause"),
 54 |     btnPrev = document.querySelector("#prev"),
 55 |     btnNext = document.querySelector("#next"),
 56 |     btnRepeat = document.querySelector("#repeat"),
 57 |     btnRandom = document.querySelector("#random"),
 58 |     volumeControl = document.querySelector("#volume"),
 59 |     timeLine = document.querySelector("#timeline"),
 60 |     musicTimeCount = document.querySelector("#time-count"),
 61 |     musicTime = document.querySelector("#time"),
 62 |     musicName = document.querySelector("#music-name"),
 63 |     playListElement = document.querySelector("#play-list"),
 64 |     loading = document.querySelector("#loading-music"),
 65 |     flip = document.querySelector("#flip-container"),
 66 |     rd = new FileReader();
 67 | 
 68 | var Player = {
 69 |     currentTrack: 0,
 70 |     isPlaying: false,
 71 |     isRepeating: false,
 72 |     isRandomized: false,
 73 |     playList: []
 74 | };
 75 | 
 76 | var setPlayList = function setPlayList(music) {
 77 |     Player.playList.push(music);
 78 | };
 79 | 
 80 | var activateListItem = function activateListItem(id) {
 81 |     document.querySelector("#list-item-" + id).classList.add("is-active");
 82 |     document.querySelector("#list-icon-" + id).classList.add("is-active");
 83 | };
 84 | 
 85 | var inactivateListItem = function inactivateListItem(id) {
 86 |     document.querySelector("#list-item-" + id).classList.remove("is-active");
 87 |     document.querySelector("#list-icon-" + id).classList.remove("is-active");
 88 | };
 89 | 
 90 | var clearPlayList = function clearPlayList() {
 91 |     Player.playList = [];
 92 | };
 93 | 
 94 | var showLoading = function showLoading() {
 95 |     loading.classList.add("show");
 96 | };
 97 | 
 98 | var hideLoading = function hideLoading() {
 99 |     loading.classList.remove("show");
100 | };
101 | 
102 | var playMusic = function playMusic(track) {
103 | 
104 |     rd.onloadstart = function () {
105 |         showLoading();
106 |     };
107 | 
108 |     rd.onload = function () {
109 |         audio.src = this.result;
110 |     };
111 | 
112 |     rd.readAsDataURL(Player.playList[track]);
113 | 
114 |     audio.onloadeddata = function () {
115 | 
116 |         audio.play();
117 | 
118 |         flip.classList.add('is-flipped');
119 |         if (Player.currentTrack > -1) {
120 |             inactivateListItem(Player.currentTrack);
121 |         }
122 | 
123 |         activateListItem(track);
124 | 
125 |         Player.isPlaying = true;
126 |         Player.currentTrack = track;
127 | 
128 |         hideLoading();
129 |         setMusicName(Player.playList[track].name);
130 |         setTimeLineMax(this.duration);
131 |         setMusicTime(this.duration);
132 |     };
133 | };
134 | 
135 | var pause = function pause() {
136 | 
137 |     if (audio.src == "") return false;
138 | 
139 |     flip.classList.remove('is-flipped');
140 |     inactivateListItem(Player.currentTrack);
141 | 
142 |     Player.isPlaying = false;
143 |     audio.pause();
144 | };
145 | 
146 | var resume = function resume() {
147 | 
148 |     if (audio.src == "") return false;
149 | 
150 |     flip.classList.add('is-flipped');
151 |     activateListItem(Player.currentTrack);
152 | 
153 |     Player.isPlaying = true;
154 |     audio.play();
155 | };
156 | 
157 | var playPrev = function playPrev() {
158 | 
159 |     if (audio.src == "") return false;
160 | 
161 |     var prev = Player.currentTrack - 1;
162 |     prev > -1 ? playMusic(prev) : playMusic(0);
163 | };
164 | 
165 | var playNext = function playNext() {
166 | 
167 |     if (audio.src == "") return false;
168 | 
169 |     var next = Player.currentTrack + 1;
170 |     var lastMusic = Player.playList.length - 1;
171 |     var random = Math.round(Math.random() * lastMusic);
172 | 
173 |     if (!Player.isRandomized) {
174 |         next <= lastMusic ? playMusic(next) : playMusic(0);
175 |     } else {
176 |         playMusic(random);
177 |     }
178 | };
179 | 
180 | var repeat = function repeat() {
181 |     if (!Player.isRepeating) {
182 |         btnRepeat.classList.add('is-on');
183 |         audio.setAttribute("loop", "");
184 |         Player.isRepeating = true;
185 |     } else {
186 |         btnRepeat.classList.remove('is-on');
187 |         audio.removeAttribute("loop");
188 |         Player.isRepeating = false;
189 |     }
190 | };
191 | 
192 | var randomize = function randomize() {
193 |     if (!Player.isRandomized) {
194 |         btnRandom.classList.add('is-on');
195 |         Player.isRandomized = true;
196 |     } else {
197 |         btnRandom.classList.remove('is-on');
198 |         Player.isRandomized = false;
199 |     }
200 | };
201 | 
202 | var changeVolume = function changeVolume() {
203 |     audio.volume = volumeControl.value / 10;
204 | };
205 | 
206 | var changeTime = function changeTime() {
207 |     if (audio.readyState != 0) audio.currentTime = timeLine.value;
208 | };
209 | 
210 | var timeLineUpdate = function timeLineUpdate() {
211 |     timeLine.value = audio.currentTime;
212 | };
213 | 
214 | var setTimeLineMax = function setTimeLineMax(time) {
215 |     timeLine.setAttribute("max", Math.round(time));
216 | };
217 | 
218 | var setMusicTime = function setMusicTime(time) {
219 |     musicTime.innerHTML = timeHelper.secondsToTime(Math.round(time));
220 | };
221 | 
222 | var musicCountUpdate = function musicCountUpdate(time) {
223 |     musicTimeCount.innerHTML = timeHelper.secondsToTime(Math.round(time));
224 | };
225 | 
226 | var setMusicName = function setMusicName(name) {
227 |     musicName.innerHTML = name.replace(".mp3", "");
228 | };
229 | 
230 | var createPlayList = function createPlayList() {
231 | 
232 |     var musicName,
233 |         i,
234 |         li,
235 |         button,
236 |         span,
237 |         len = Player.playList.length;
238 | 
239 |     playListElement.innerHTML = "";
240 | 
241 |     for (i = 0; i < len; i += 1) {
242 | 
243 |         musicName = document.createTextNode(Player.playList[i].name.replace(".mp3", ""));
244 | 
245 |         li = document.createElement("li");
246 |         button = document.createElement("button");
247 |         span = document.createElement("span");
248 | 
249 |         button.setAttribute("type", "button");
250 |         button.setAttribute("class", "btn btn-circle btn-small");
251 |         button.innerHTML = '<i class="icon icon-play"></i>';
252 | 
253 |         (function (id) {
254 |             button.addEventListener('click', function () {
255 |                 playMusic(id);
256 |             }, false);
257 |         })(i);
258 | 
259 |         span.setAttribute("id", "list-icon-" + i);
260 |         span.setAttribute("class", "sound-wave");
261 |         span.innerHTML = "<span class='bar'></span><span class='bar'></span><span class='bar'></span>";
262 | 
263 |         li.setAttribute("id", "list-item-" + i);
264 |         li.setAttribute("class", "list-item");
265 |         li.appendChild(button);
266 |         li.appendChild(musicName);
267 |         li.appendChild(span);
268 |         playListElement.appendChild(li);
269 |     };
270 | };
271 | 
272 | //botões
273 | btnPlay.addEventListener("click", resume, false);
274 | btnPause.addEventListener("click", pause, false);
275 | btnPrev.addEventListener("click", playPrev, false);
276 | btnNext.addEventListener("click", playNext, false);
277 | btnRepeat.addEventListener("click", repeat, false);
278 | btnRandom.addEventListener("click", randomize, false);
279 | 
280 | //volume
281 | volumeControl.addEventListener("change", changeVolume, false);
282 | 
283 | //timeLine
284 | timeLine.addEventListener("change", changeTime, false);
285 | timeLine.addEventListener("mousedown", function () {
286 |     audio.removeEventListener("timeupdate", timeLineUpdate);
287 | }, false);
288 | timeLine.addEventListener("mouseup", function () {
289 |     audio.addEventListener("timeupdate", timeLineUpdate, false);
290 | }, false);
291 | 
292 | //player
293 | audio.addEventListener("ended", playNext, false);
294 | audio.addEventListener("timeupdate", timeLineUpdate, false);
295 | audio.addEventListener("timeupdate", function () {
296 |     musicCountUpdate(Math.floor(this.currentTime));
297 | }, false);
298 | 
299 | module.exports = {
300 |     setPlayList: setPlayList,
301 |     clearPlayList: clearPlayList,
302 |     playMusic: playMusic,
303 |     createPlayList: createPlayList
304 | };
305 | 
306 | },{"../helpers/time":3}],3:[function(require,module,exports){
307 | 'use strict';
308 | 
309 | function padLeft(n, width, z) {
310 |   z = z || '0';
311 |   n = n + '';
312 |   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
313 | }
314 | 
315 | var secondsToTime = function secondsToTime(seconds) {
316 | 
317 |   if (isNaN(seconds) || seconds == "" || typeof seconds != 'number') return "00:00";
318 | 
319 |   var hours = parseInt(seconds / 3600) % 24,
320 |       minutes = parseInt(seconds / 60) % 60,
321 |       seconds = parseInt(seconds % 60);
322 | 
323 |   if (hours > 0) {
324 |     var result = padLeft(hours, 2, 0) + ':' + padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);
325 |   } else {
326 |     var result = padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);
327 |   }
328 | 
329 |   return result;
330 | };
331 | 
332 | module.exports = {
333 |   secondsToTime: secondsToTime
334 | };
335 | 
336 | },{}],4:[function(require,module,exports){
337 | 'use strict';
338 | 
339 | require('./components/dropdown.js');
340 | 
341 | var Player = require('./components/player.js');
342 | 
343 | (function () {
344 | 
345 |     var btnUpload = document.querySelector("#btn-upload"),
346 |         fileElement = document.querySelector("#file-element"),
347 |         themeLight = document.querySelector("#theme-light"),
348 |         themeDark = document.querySelector("#theme-dark"),
349 |         btnsTheme = document.querySelectorAll('.theme-item-btn'),
350 |         btnsColor = document.querySelectorAll('.btn-color'),
351 |         setLocalStorage = function setLocalStorage(item, value) {
352 |         if (window.hasOwnProperty('localStorage')) {
353 |             localStorage.setItem(item, value);
354 |         }
355 |     },
356 |         getLocalStorage = function getLocalStorage(item) {
357 |         if (window.hasOwnProperty('localStorage')) {
358 |             return localStorage.getItem(item);
359 |         }
360 |     },
361 |         setTheme = function setTheme(theme) {
362 | 
363 |         theme = theme || "light";
364 |         document.body.classList.remove('dark', 'light');
365 |         document.body.classList.add(theme);
366 |         setLocalStorage("theme", theme);
367 |     },
368 |         setColor = function setColor(color) {
369 | 
370 |         color = color || "green";
371 |         document.body.className = document.body.className.replace(/(blue|red|green|pink|purple|cyan|teal|yellow|orange)/g, '');
372 |         document.body.classList.add(color);
373 |         setLocalStorage("color", color);
374 |     };
375 | 
376 |     if (window.hasOwnProperty('localStorage')) {
377 |         setTheme(getLocalStorage('theme'));
378 |         setColor(getLocalStorage('color'));
379 |     }
380 | 
381 |     btnUpload.addEventListener("click", function (e) {
382 | 
383 |         e.stopPropagation();
384 |         e.preventDefault();
385 | 
386 |         if (fileElement) {
387 |             fileElement.click();
388 |         }
389 |     }, false);
390 | 
391 |     fileElement.addEventListener("change", function () {
392 | 
393 |         Player.clearPlayList();
394 | 
395 |         for (var i = 0, len = this.files.length; i < len; i += 1) {
396 |             Player.setPlayList(this.files[i]);
397 |         }
398 | 
399 |         Player.createPlayList();
400 |         Player.playMusic(0);
401 |     }, false);
402 | 
403 |     btnsTheme.forEach(function (btnTheme) {
404 |         btnTheme.addEventListener('click', function () {
405 |             var themeScheme = this.getAttribute('data-theme-scheme');
406 |             setTheme(themeScheme);
407 |         }, false);
408 |     });
409 | 
410 |     btnsColor.forEach(function (btnColor) {
411 |         btnColor.addEventListener('click', function () {
412 |             var color = this.getAttribute('data-theme-color');
413 |             setColor(color);
414 |         }, false);
415 |     });
416 | })();
417 | 
418 | },{"./components/dropdown.js":1,"./components/player.js":2}],5:[function(require,module,exports){
419 | 'use strict';
420 | 
421 | require('./index.js');
422 | 
423 | },{"./index.js":4}]},{},[5]);
424 | 
425 | //# sourceMappingURL=maps/bundle.js.map
426 | 


--------------------------------------------------------------------------------
/dist/js/maps/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"names":[],"mappings":"","sources":["bundle.js"],"sourcesContent":["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n'use strict';\n\nvar toggles = document.querySelectorAll('.dropdown-toggle');\nvar dropdowns = [];\n\nvar hasClass = function hasClass(el, cl) {\n\treturn el.classList.toString().indexOf(cl) > -1 ? true : false;\n};\n\nif (toggles) {\n\ttoggles.forEach(function (toggle) {\n\t\ttoggle.addEventListener('click', function (e) {\n\n\t\t\te.stopPropagation();\n\n\t\t\tvar target = this.getAttribute('data-dropdown');\n\t\t\tif (!target) return false;\n\n\t\t\tvar dropdown = document.querySelector('#' + target);\n\t\t\tif (!dropdown) return false;\n\n\t\t\tif (hasClass(dropdown, 'is-active')) {\n\t\t\t\tdropdown.classList.remove('is-active');\n\t\t\t} else {\n\t\t\t\tdropdown.classList.add('is-active');\n\t\t\t\tdropdowns.push(dropdown);\n\t\t\t\tdropdown.addEventListener('click', function (e) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}, false);\n\t\t\t}\n\t\t}, false);\n\t});\n\n\tdocument.body.addEventListener('click', function () {\n\n\t\tdropdowns.forEach(function (dropdown) {\n\t\t\tif (hasClass(dropdown, 'is-active')) {\n\t\t\t\tdropdown.classList.remove('is-active');\n\t\t\t\tdropdowns.splice(dropdowns.indexOf(dropdown), 1);\n\t\t\t}\n\t\t});\n\t}, false);\n}\n\n},{}],2:[function(require,module,exports){\n\"use strict\";\n\nvar timeHelper = require('../helpers/time');\n\nvar audio = document.querySelector(\"#player\"),\n    btnPlay = document.querySelector(\"#btn-play\"),\n    btnPause = document.querySelector(\"#btn-pause\"),\n    btnPrev = document.querySelector(\"#prev\"),\n    btnNext = document.querySelector(\"#next\"),\n    btnRepeat = document.querySelector(\"#repeat\"),\n    btnRandom = document.querySelector(\"#random\"),\n    volumeControl = document.querySelector(\"#volume\"),\n    timeLine = document.querySelector(\"#timeline\"),\n    musicTimeCount = document.querySelector(\"#time-count\"),\n    musicTime = document.querySelector(\"#time\"),\n    musicName = document.querySelector(\"#music-name\"),\n    playListElement = document.querySelector(\"#play-list\"),\n    loading = document.querySelector(\"#loading-music\"),\n    flip = document.querySelector(\"#flip-container\"),\n    rd = new FileReader();\n\nvar Player = {\n    currentTrack: 0,\n    isPlaying: false,\n    isRepeating: false,\n    isRandomized: false,\n    playList: []\n};\n\nvar setPlayList = function setPlayList(music) {\n    Player.playList.push(music);\n};\n\nvar activateListItem = function activateListItem(id) {\n    document.querySelector(\"#list-item-\" + id).classList.add(\"is-active\");\n    document.querySelector(\"#list-icon-\" + id).classList.add(\"is-active\");\n};\n\nvar inactivateListItem = function inactivateListItem(id) {\n    document.querySelector(\"#list-item-\" + id).classList.remove(\"is-active\");\n    document.querySelector(\"#list-icon-\" + id).classList.remove(\"is-active\");\n};\n\nvar clearPlayList = function clearPlayList() {\n    Player.playList = [];\n};\n\nvar showLoading = function showLoading() {\n    loading.classList.add(\"show\");\n};\n\nvar hideLoading = function hideLoading() {\n    loading.classList.remove(\"show\");\n};\n\nvar playMusic = function playMusic(track) {\n\n    rd.onloadstart = function () {\n        showLoading();\n    };\n\n    rd.onload = function () {\n        audio.src = this.result;\n    };\n\n    rd.readAsDataURL(Player.playList[track]);\n\n    audio.onloadeddata = function () {\n\n        audio.play();\n\n        flip.classList.add('is-flipped');\n        if (Player.currentTrack > -1) {\n            inactivateListItem(Player.currentTrack);\n        }\n\n        activateListItem(track);\n\n        Player.isPlaying = true;\n        Player.currentTrack = track;\n\n        hideLoading();\n        setMusicName(Player.playList[track].name);\n        setTimeLineMax(this.duration);\n        setMusicTime(this.duration);\n    };\n};\n\nvar pause = function pause() {\n\n    if (audio.src == \"\") return false;\n\n    flip.classList.remove('is-flipped');\n    inactivateListItem(Player.currentTrack);\n\n    Player.isPlaying = false;\n    audio.pause();\n};\n\nvar resume = function resume() {\n\n    if (audio.src == \"\") return false;\n\n    flip.classList.add('is-flipped');\n    activateListItem(Player.currentTrack);\n\n    Player.isPlaying = true;\n    audio.play();\n};\n\nvar playPrev = function playPrev() {\n\n    if (audio.src == \"\") return false;\n\n    var prev = Player.currentTrack - 1;\n    prev > -1 ? playMusic(prev) : playMusic(0);\n};\n\nvar playNext = function playNext() {\n\n    if (audio.src == \"\") return false;\n\n    var next = Player.currentTrack + 1;\n    var lastMusic = Player.playList.length - 1;\n    var random = Math.round(Math.random() * lastMusic);\n\n    if (!Player.isRandomized) {\n        next <= lastMusic ? playMusic(next) : playMusic(0);\n    } else {\n        playMusic(random);\n    }\n};\n\nvar repeat = function repeat() {\n    if (!Player.isRepeating) {\n        btnRepeat.classList.add('is-on');\n        audio.setAttribute(\"loop\", \"\");\n        Player.isRepeating = true;\n    } else {\n        btnRepeat.classList.remove('is-on');\n        audio.removeAttribute(\"loop\");\n        Player.isRepeating = false;\n    }\n};\n\nvar randomize = function randomize() {\n    if (!Player.isRandomized) {\n        btnRandom.classList.add('is-on');\n        Player.isRandomized = true;\n    } else {\n        btnRandom.classList.remove('is-on');\n        Player.isRandomized = false;\n    }\n};\n\nvar changeVolume = function changeVolume() {\n    audio.volume = volumeControl.value / 10;\n};\n\nvar changeTime = function changeTime() {\n    if (audio.readyState != 0) audio.currentTime = timeLine.value;\n};\n\nvar timeLineUpdate = function timeLineUpdate() {\n    timeLine.value = audio.currentTime;\n};\n\nvar setTimeLineMax = function setTimeLineMax(time) {\n    timeLine.setAttribute(\"max\", Math.round(time));\n};\n\nvar setMusicTime = function setMusicTime(time) {\n    musicTime.innerHTML = timeHelper.secondsToTime(Math.round(time));\n};\n\nvar musicCountUpdate = function musicCountUpdate(time) {\n    musicTimeCount.innerHTML = timeHelper.secondsToTime(Math.round(time));\n};\n\nvar setMusicName = function setMusicName(name) {\n    musicName.innerHTML = name.replace(\".mp3\", \"\");\n};\n\nvar createPlayList = function createPlayList() {\n\n    var musicName,\n        i,\n        li,\n        button,\n        span,\n        len = Player.playList.length;\n\n    playListElement.innerHTML = \"\";\n\n    for (i = 0; i < len; i += 1) {\n\n        musicName = document.createTextNode(Player.playList[i].name.replace(\".mp3\", \"\"));\n\n        li = document.createElement(\"li\");\n        button = document.createElement(\"button\");\n        span = document.createElement(\"span\");\n\n        button.setAttribute(\"type\", \"button\");\n        button.setAttribute(\"class\", \"btn btn-circle btn-small\");\n        button.innerHTML = '<i class=\"icon icon-play\"></i>';\n\n        (function (id) {\n            button.addEventListener('click', function () {\n                playMusic(id);\n            }, false);\n        })(i);\n\n        span.setAttribute(\"id\", \"list-icon-\" + i);\n        span.setAttribute(\"class\", \"sound-wave\");\n        span.innerHTML = \"<span class='bar'></span><span class='bar'></span><span class='bar'></span>\";\n\n        li.setAttribute(\"id\", \"list-item-\" + i);\n        li.setAttribute(\"class\", \"list-item\");\n        li.appendChild(button);\n        li.appendChild(musicName);\n        li.appendChild(span);\n        playListElement.appendChild(li);\n    };\n};\n\n//botões\nbtnPlay.addEventListener(\"click\", resume, false);\nbtnPause.addEventListener(\"click\", pause, false);\nbtnPrev.addEventListener(\"click\", playPrev, false);\nbtnNext.addEventListener(\"click\", playNext, false);\nbtnRepeat.addEventListener(\"click\", repeat, false);\nbtnRandom.addEventListener(\"click\", randomize, false);\n\n//volume\nvolumeControl.addEventListener(\"change\", changeVolume, false);\n\n//timeLine\ntimeLine.addEventListener(\"change\", changeTime, false);\ntimeLine.addEventListener(\"mousedown\", function () {\n    audio.removeEventListener(\"timeupdate\", timeLineUpdate);\n}, false);\ntimeLine.addEventListener(\"mouseup\", function () {\n    audio.addEventListener(\"timeupdate\", timeLineUpdate, false);\n}, false);\n\n//player\naudio.addEventListener(\"ended\", playNext, false);\naudio.addEventListener(\"timeupdate\", timeLineUpdate, false);\naudio.addEventListener(\"timeupdate\", function () {\n    musicCountUpdate(Math.floor(this.currentTime));\n}, false);\n\nmodule.exports = {\n    setPlayList: setPlayList,\n    clearPlayList: clearPlayList,\n    playMusic: playMusic,\n    createPlayList: createPlayList\n};\n\n},{\"../helpers/time\":3}],3:[function(require,module,exports){\n'use strict';\n\nfunction padLeft(n, width, z) {\n  z = z || '0';\n  n = n + '';\n  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;\n}\n\nvar secondsToTime = function secondsToTime(seconds) {\n\n  if (isNaN(seconds) || seconds == \"\" || typeof seconds != 'number') return \"00:00\";\n\n  var hours = parseInt(seconds / 3600) % 24,\n      minutes = parseInt(seconds / 60) % 60,\n      seconds = parseInt(seconds % 60);\n\n  if (hours > 0) {\n    var result = padLeft(hours, 2, 0) + ':' + padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);\n  } else {\n    var result = padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);\n  }\n\n  return result;\n};\n\nmodule.exports = {\n  secondsToTime: secondsToTime\n};\n\n},{}],4:[function(require,module,exports){\n'use strict';\n\nrequire('./components/dropdown.js');\n\nvar Player = require('./components/player.js');\n\n(function () {\n\n    var btnUpload = document.querySelector(\"#btn-upload\"),\n        fileElement = document.querySelector(\"#file-element\"),\n        themeLight = document.querySelector(\"#theme-light\"),\n        themeDark = document.querySelector(\"#theme-dark\"),\n        btnsTheme = document.querySelectorAll('.theme-item-btn'),\n        btnsColor = document.querySelectorAll('.btn-color'),\n        setLocalStorage = function setLocalStorage(item, value) {\n        if (window.hasOwnProperty('localStorage')) {\n            localStorage.setItem(item, value);\n        }\n    },\n        getLocalStorage = function getLocalStorage(item) {\n        if (window.hasOwnProperty('localStorage')) {\n            return localStorage.getItem(item);\n        }\n    },\n        setTheme = function setTheme(theme) {\n\n        theme = theme || \"light\";\n        document.body.classList.remove('dark', 'light');\n        document.body.classList.add(theme);\n        setLocalStorage(\"theme\", theme);\n    },\n        setColor = function setColor(color) {\n\n        color = color || \"green\";\n        document.body.className = document.body.className.replace(/(blue|red|green|pink|purple|cyan|teal|yellow|orange)/g, '');\n        document.body.classList.add(color);\n        setLocalStorage(\"color\", color);\n    };\n\n    if (window.hasOwnProperty('localStorage')) {\n        setTheme(getLocalStorage('theme'));\n        setColor(getLocalStorage('color'));\n    }\n\n    btnUpload.addEventListener(\"click\", function (e) {\n\n        e.stopPropagation();\n        e.preventDefault();\n\n        if (fileElement) {\n            fileElement.click();\n        }\n    }, false);\n\n    fileElement.addEventListener(\"change\", function () {\n\n        Player.clearPlayList();\n\n        for (var i = 0, len = this.files.length; i < len; i += 1) {\n            Player.setPlayList(this.files[i]);\n        }\n\n        Player.createPlayList();\n        Player.playMusic(0);\n    }, false);\n\n    btnsTheme.forEach(function (btnTheme) {\n        btnTheme.addEventListener('click', function () {\n            var themeScheme = this.getAttribute('data-theme-scheme');\n            setTheme(themeScheme);\n        }, false);\n    });\n\n    btnsColor.forEach(function (btnColor) {\n        btnColor.addEventListener('click', function () {\n            var color = this.getAttribute('data-theme-color');\n            setColor(color);\n        }, false);\n    });\n})();\n\n},{\"./components/dropdown.js\":1,\"./components/player.js\":2}],5:[function(require,module,exports){\n'use strict';\n\nrequire('./index.js');\n\n},{\"./index.js\":4}]},{},[5]);\n"],"file":"../bundle.js"}


--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/fonts/glyphicons-halflings-regular.eot


--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
  3 | <svg xmlns="http://www.w3.org/2000/svg">
  4 | <metadata></metadata>
  5 | <defs>
  6 | <font id="glyphicons_halflingsregular" horiz-adv-x="1200" >
  7 | <font-face units-per-em="1200" ascent="960" descent="-240" />
  8 | <missing-glyph horiz-adv-x="500" />
  9 | <glyph />
 10 | <glyph />
 11 | <glyph unicode="&#xd;" />
 12 | <glyph unicode=" " />
 13 | <glyph unicode="*" d="M100 500v200h259l-183 183l141 141l183 -183v259h200v-259l183 183l141 -141l-183 -183h259v-200h-259l183 -183l-141 -141l-183 183v-259h-200v259l-183 -183l-141 141l183 183h-259z" />
 14 | <glyph unicode="+" d="M0 400v300h400v400h300v-400h400v-300h-400v-400h-300v400h-400z" />
 15 | <glyph unicode="&#xa0;" />
 16 | <glyph unicode="&#x2000;" horiz-adv-x="652" />
 17 | <glyph unicode="&#x2001;" horiz-adv-x="1304" />
 18 | <glyph unicode="&#x2002;" horiz-adv-x="652" />
 19 | <glyph unicode="&#x2003;" horiz-adv-x="1304" />
 20 | <glyph unicode="&#x2004;" horiz-adv-x="434" />
 21 | <glyph unicode="&#x2005;" horiz-adv-x="326" />
 22 | <glyph unicode="&#x2006;" horiz-adv-x="217" />
 23 | <glyph unicode="&#x2007;" horiz-adv-x="217" />
 24 | <glyph unicode="&#x2008;" horiz-adv-x="163" />
 25 | <glyph unicode="&#x2009;" horiz-adv-x="260" />
 26 | <glyph unicode="&#x200a;" horiz-adv-x="72" />
 27 | <glyph unicode="&#x202f;" horiz-adv-x="260" />
 28 | <glyph unicode="&#x205f;" horiz-adv-x="326" />
 29 | <glyph unicode="&#x20ac;" d="M100 500l100 100h113q0 47 5 100h-218l100 100h135q37 167 112 257q117 141 297 141q242 0 354 -189q60 -103 66 -209h-181q0 55 -25.5 99t-63.5 68t-75 36.5t-67 12.5q-24 0 -52.5 -10t-62.5 -32t-65.5 -67t-50.5 -107h379l-100 -100h-300q-6 -46 -6 -100h406l-100 -100 h-300q9 -74 33 -132t52.5 -91t62 -54.5t59 -29t46.5 -7.5q29 0 66 13t75 37t63.5 67.5t25.5 96.5h174q-31 -172 -128 -278q-107 -117 -274 -117q-205 0 -324 158q-36 46 -69 131.5t-45 205.5h-217z" />
 30 | <glyph unicode="&#x2212;" d="M200 400h900v300h-900v-300z" />
 31 | <glyph unicode="&#x25fc;" horiz-adv-x="500" d="M0 0z" />
 32 | <glyph unicode="&#x2601;" d="M-14 494q0 -80 56.5 -137t135.5 -57h750q120 0 205 86.5t85 207.5t-85 207t-205 86q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5z" />
 33 | <glyph unicode="&#x2709;" d="M0 100l400 400l200 -200l200 200l400 -400h-1200zM0 300v600l300 -300zM0 1100l600 -603l600 603h-1200zM900 600l300 300v-600z" />
 34 | <glyph unicode="&#x270f;" d="M-13 -13l333 112l-223 223zM187 403l214 -214l614 614l-214 214zM887 1103l214 -214l99 92q13 13 13 32.5t-13 33.5l-153 153q-15 13 -33 13t-33 -13z" />
 35 | <glyph unicode="&#xe001;" d="M0 1200h1200l-500 -550v-550h300v-100h-800v100h300v550z" />
 36 | <glyph unicode="&#xe002;" d="M14 84q18 -55 86 -75.5t147 5.5q65 21 109 69t44 90v606l600 155v-521q-64 16 -138 -7q-79 -26 -122.5 -83t-25.5 -111q18 -55 86 -75.5t147 4.5q70 23 111.5 63.5t41.5 95.5v881q0 10 -7 15.5t-17 2.5l-752 -193q-10 -3 -17 -12.5t-7 -19.5v-689q-64 17 -138 -7 q-79 -25 -122.5 -82t-25.5 -112z" />
 37 | <glyph unicode="&#xe003;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233z" />
 38 | <glyph unicode="&#xe005;" d="M100 784q0 64 28 123t73 100.5t104.5 64t119 20.5t120 -38.5t104.5 -104.5q48 69 109.5 105t121.5 38t118.5 -20.5t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-149.5 152.5t-126.5 127.5 t-94 124.5t-33.5 117.5z" />
 39 | <glyph unicode="&#xe006;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1z" />
 40 | <glyph unicode="&#xe007;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1zM237 700l196 -142l-73 -226l192 140l195 -141l-74 229l193 140h-235l-77 211l-78 -211h-239z" />
 41 | <glyph unicode="&#xe008;" d="M0 0v143l400 257v100q-37 0 -68.5 74.5t-31.5 125.5v200q0 124 88 212t212 88t212 -88t88 -212v-200q0 -51 -31.5 -125.5t-68.5 -74.5v-100l400 -257v-143h-1200z" />
 42 | <glyph unicode="&#xe009;" d="M0 0v1100h1200v-1100h-1200zM100 100h100v100h-100v-100zM100 300h100v100h-100v-100zM100 500h100v100h-100v-100zM100 700h100v100h-100v-100zM100 900h100v100h-100v-100zM300 100h600v400h-600v-400zM300 600h600v400h-600v-400zM1000 100h100v100h-100v-100z M1000 300h100v100h-100v-100zM1000 500h100v100h-100v-100zM1000 700h100v100h-100v-100zM1000 900h100v100h-100v-100z" />
 43 | <glyph unicode="&#xe010;" d="M0 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM0 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5zM600 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM600 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400 q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5z" />
 44 | <glyph unicode="&#xe011;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200 q-21 0 -35.5 14.5t-14.5 35.5zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 450v200q0 21 14.5 35.5t35.5 14.5h200 q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5z" />
 45 | <glyph unicode="&#xe012;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v200q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5 t-14.5 -35.5v-200zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5z" />
 46 | <glyph unicode="&#xe013;" d="M29 454l419 -420l818 820l-212 212l-607 -607l-206 207z" />
 47 | <glyph unicode="&#xe014;" d="M106 318l282 282l-282 282l212 212l282 -282l282 282l212 -212l-282 -282l282 -282l-212 -212l-282 282l-282 -282z" />
 48 | <glyph unicode="&#xe015;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233zM300 600v200h100v100h200v-100h100v-200h-100v-100h-200v100h-100z" />
 49 | <glyph unicode="&#xe016;" d="M23 694q0 200 142 342t342 142t342 -142t142 -342q0 -141 -78 -262l300 -299q7 -7 7 -18t-7 -18l-109 -109q-8 -8 -18 -8t-18 8l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 694q0 -136 97 -233t234 -97t233.5 97t96.5 233t-96.5 233t-233.5 97t-234 -97 t-97 -233zM300 601h400v200h-400v-200z" />
 50 | <glyph unicode="&#xe017;" d="M23 600q0 183 105 331t272 210v-166q-103 -55 -165 -155t-62 -220q0 -177 125 -302t302 -125t302 125t125 302q0 120 -62 220t-165 155v166q167 -62 272 -210t105 -331q0 -118 -45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5 zM500 750q0 -21 14.5 -35.5t35.5 -14.5h100q21 0 35.5 14.5t14.5 35.5v400q0 21 -14.5 35.5t-35.5 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-400z" />
 51 | <glyph unicode="&#xe018;" d="M100 1h200v300h-200v-300zM400 1v500h200v-500h-200zM700 1v800h200v-800h-200zM1000 1v1200h200v-1200h-200z" />
 52 | <glyph unicode="&#xe019;" d="M26 601q0 -33 6 -74l151 -38l2 -6q14 -49 38 -93l3 -5l-80 -134q45 -59 105 -105l133 81l5 -3q45 -26 94 -39l5 -2l38 -151q40 -5 74 -5q27 0 74 5l38 151l6 2q46 13 93 39l5 3l134 -81q56 44 104 105l-80 134l3 5q24 44 39 93l1 6l152 38q5 40 5 74q0 28 -5 73l-152 38 l-1 6q-16 51 -39 93l-3 5l80 134q-44 58 -104 105l-134 -81l-5 3q-45 25 -93 39l-6 1l-38 152q-40 5 -74 5q-27 0 -74 -5l-38 -152l-5 -1q-50 -14 -94 -39l-5 -3l-133 81q-59 -47 -105 -105l80 -134l-3 -5q-25 -47 -38 -93l-2 -6l-151 -38q-6 -48 -6 -73zM385 601 q0 88 63 151t152 63t152 -63t63 -151q0 -89 -63 -152t-152 -63t-152 63t-63 152z" />
 53 | <glyph unicode="&#xe020;" d="M100 1025v50q0 10 7.5 17.5t17.5 7.5h275v100q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5v-100h275q10 0 17.5 -7.5t7.5 -17.5v-50q0 -11 -7 -18t-18 -7h-1050q-11 0 -18 7t-7 18zM200 100v800h900v-800q0 -41 -29.5 -71t-70.5 -30h-700q-41 0 -70.5 30 t-29.5 71zM300 100h100v700h-100v-700zM500 100h100v700h-100v-700zM500 1100h300v100h-300v-100zM700 100h100v700h-100v-700zM900 100h100v700h-100v-700z" />
 54 | <glyph unicode="&#xe021;" d="M1 601l656 644l644 -644h-200v-600h-300v400h-300v-400h-300v600h-200z" />
 55 | <glyph unicode="&#xe022;" d="M100 25v1150q0 11 7 18t18 7h475v-500h400v-675q0 -11 -7 -18t-18 -7h-850q-11 0 -18 7t-7 18zM700 800v300l300 -300h-300z" />
 56 | <glyph unicode="&#xe023;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 500v400h100 v-300h200v-100h-300z" />
 57 | <glyph unicode="&#xe024;" d="M-100 0l431 1200h209l-21 -300h162l-20 300h208l431 -1200h-538l-41 400h-242l-40 -400h-539zM488 500h224l-27 300h-170z" />
 58 | <glyph unicode="&#xe025;" d="M0 0v400h490l-290 300h200v500h300v-500h200l-290 -300h490v-400h-1100zM813 200h175v100h-175v-100z" />
 59 | <glyph unicode="&#xe026;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM188 600q0 -170 121 -291t291 -121t291 121t121 291t-121 291t-291 121 t-291 -121t-121 -291zM350 600h150v300h200v-300h150l-250 -300z" />
 60 | <glyph unicode="&#xe027;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM350 600l250 300 l250 -300h-150v-300h-200v300h-150z" />
 61 | <glyph unicode="&#xe028;" d="M0 25v475l200 700h800l199 -700l1 -475q0 -11 -7 -18t-18 -7h-1150q-11 0 -18 7t-7 18zM200 500h200l50 -200h300l50 200h200l-97 500h-606z" />
 62 | <glyph unicode="&#xe029;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 397v401 l297 -200z" />
 63 | <glyph unicode="&#xe030;" d="M23 600q0 -118 45.5 -224.5t123 -184t184 -123t224.5 -45.5t224.5 45.5t184 123t123 184t45.5 224.5h-150q0 -177 -125 -302t-302 -125t-302 125t-125 302t125 302t302 125q136 0 246 -81l-146 -146h400v400l-145 -145q-157 122 -355 122q-118 0 -224.5 -45.5t-184 -123 t-123 -184t-45.5 -224.5z" />
 64 | <glyph unicode="&#xe031;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5q198 0 355 -122l145 145v-400h-400l147 147q-112 80 -247 80q-177 0 -302 -125t-125 -302h-150zM100 0v400h400l-147 -147q112 -80 247 -80q177 0 302 125t125 302h150q0 -118 -45.5 -224.5t-123 -184t-184 -123 t-224.5 -45.5q-198 0 -355 122z" />
 65 | <glyph unicode="&#xe032;" d="M100 0h1100v1200h-1100v-1200zM200 100v900h900v-900h-900zM300 200v100h100v-100h-100zM300 400v100h100v-100h-100zM300 600v100h100v-100h-100zM300 800v100h100v-100h-100zM500 200h500v100h-500v-100zM500 400v100h500v-100h-500zM500 600v100h500v-100h-500z M500 800v100h500v-100h-500z" />
 66 | <glyph unicode="&#xe033;" d="M0 100v600q0 41 29.5 70.5t70.5 29.5h100v200q0 82 59 141t141 59h300q82 0 141 -59t59 -141v-200h100q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-900q-41 0 -70.5 29.5t-29.5 70.5zM400 800h300v150q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-150z" />
 67 | <glyph unicode="&#xe034;" d="M100 0v1100h100v-1100h-100zM300 400q60 60 127.5 84t127.5 17.5t122 -23t119 -30t110 -11t103 42t91 120.5v500q-40 -81 -101.5 -115.5t-127.5 -29.5t-138 25t-139.5 40t-125.5 25t-103 -29.5t-65 -115.5v-500z" />
 68 | <glyph unicode="&#xe035;" d="M0 275q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 127 70.5 231.5t184.5 161.5t245 57t245 -57t184.5 -161.5t70.5 -231.5v-300q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 116 -49.5 227t-131 192.5t-192.5 131t-227 49.5t-227 -49.5t-192.5 -131t-131 -192.5 t-49.5 -227v-300zM200 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14zM800 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14z" />
 69 | <glyph unicode="&#xe036;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM688 459l141 141l-141 141l71 71l141 -141l141 141l71 -71l-141 -141l141 -141l-71 -71l-141 141l-141 -141z" />
 70 | <glyph unicode="&#xe037;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM700 857l69 53q111 -135 111 -310q0 -169 -106 -302l-67 54q86 110 86 248q0 146 -93 257z" />
 71 | <glyph unicode="&#xe038;" d="M0 401v400h300l300 200v-800l-300 200h-300zM702 858l69 53q111 -135 111 -310q0 -170 -106 -303l-67 55q86 110 86 248q0 145 -93 257zM889 951l7 -8q123 -151 123 -344q0 -189 -119 -339l-7 -8l81 -66l6 8q142 178 142 405q0 230 -144 408l-6 8z" />
 72 | <glyph unicode="&#xe039;" d="M0 0h500v500h-200v100h-100v-100h-200v-500zM0 600h100v100h400v100h100v100h-100v300h-500v-600zM100 100v300h300v-300h-300zM100 800v300h300v-300h-300zM200 200v100h100v-100h-100zM200 900h100v100h-100v-100zM500 500v100h300v-300h200v-100h-100v-100h-200v100 h-100v100h100v200h-200zM600 0v100h100v-100h-100zM600 1000h100v-300h200v-300h300v200h-200v100h200v500h-600v-200zM800 800v300h300v-300h-300zM900 0v100h300v-100h-300zM900 900v100h100v-100h-100zM1100 200v100h100v-100h-100z" />
 73 | <glyph unicode="&#xe040;" d="M0 200h100v1000h-100v-1000zM100 0v100h300v-100h-300zM200 200v1000h100v-1000h-100zM500 0v91h100v-91h-100zM500 200v1000h200v-1000h-200zM700 0v91h100v-91h-100zM800 200v1000h100v-1000h-100zM900 0v91h200v-91h-200zM1000 200v1000h200v-1000h-200z" />
 74 | <glyph unicode="&#xe041;" d="M0 700l1 475q0 10 7.5 17.5t17.5 7.5h474l700 -700l-500 -500zM148 953q0 -42 29 -71q30 -30 71.5 -30t71.5 30q29 29 29 71t-29 71q-30 30 -71.5 30t-71.5 -30q-29 -29 -29 -71z" />
 75 | <glyph unicode="&#xe042;" d="M1 700l1 475q0 11 7 18t18 7h474l700 -700l-500 -500zM148 953q0 -42 30 -71q29 -30 71 -30t71 30q30 29 30 71t-30 71q-29 30 -71 30t-71 -30q-30 -29 -30 -71zM701 1200h100l700 -700l-500 -500l-50 50l450 450z" />
 76 | <glyph unicode="&#xe043;" d="M100 0v1025l175 175h925v-1000l-100 -100v1000h-750l-100 -100h750v-1000h-900z" />
 77 | <glyph unicode="&#xe044;" d="M200 0l450 444l450 -443v1150q0 20 -14.5 35t-35.5 15h-800q-21 0 -35.5 -15t-14.5 -35v-1151z" />
 78 | <glyph unicode="&#xe045;" d="M0 100v700h200l100 -200h600l100 200h200v-700h-200v200h-800v-200h-200zM253 829l40 -124h592l62 124l-94 346q-2 11 -10 18t-18 7h-450q-10 0 -18 -7t-10 -18zM281 24l38 152q2 10 11.5 17t19.5 7h500q10 0 19.5 -7t11.5 -17l38 -152q2 -10 -3.5 -17t-15.5 -7h-600 q-10 0 -15.5 7t-3.5 17z" />
 79 | <glyph unicode="&#xe046;" d="M0 200q0 -41 29.5 -70.5t70.5 -29.5h1000q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-150q-4 8 -11.5 21.5t-33 48t-53 61t-69 48t-83.5 21.5h-200q-41 0 -82 -20.5t-70 -50t-52 -59t-34 -50.5l-12 -20h-150q-41 0 -70.5 -29.5t-29.5 -70.5v-600z M356 500q0 100 72 172t172 72t172 -72t72 -172t-72 -172t-172 -72t-172 72t-72 172zM494 500q0 -44 31 -75t75 -31t75 31t31 75t-31 75t-75 31t-75 -31t-31 -75zM900 700v100h100v-100h-100z" />
 80 | <glyph unicode="&#xe047;" d="M53 0h365v66q-41 0 -72 11t-49 38t1 71l92 234h391l82 -222q16 -45 -5.5 -88.5t-74.5 -43.5v-66h417v66q-34 1 -74 43q-18 19 -33 42t-21 37l-6 13l-385 998h-93l-399 -1006q-24 -48 -52 -75q-12 -12 -33 -25t-36 -20l-15 -7v-66zM416 521l178 457l46 -140l116 -317h-340 z" />
 81 | <glyph unicode="&#xe048;" d="M100 0v89q41 7 70.5 32.5t29.5 65.5v827q0 28 -1 39.5t-5.5 26t-15.5 21t-29 14t-49 14.5v71l471 -1q120 0 213 -88t93 -228q0 -55 -11.5 -101.5t-28 -74t-33.5 -47.5t-28 -28l-12 -7q8 -3 21.5 -9t48 -31.5t60.5 -58t47.5 -91.5t21.5 -129q0 -84 -59 -156.5t-142 -111 t-162 -38.5h-500zM400 200h161q89 0 153 48.5t64 132.5q0 90 -62.5 154.5t-156.5 64.5h-159v-400zM400 700h139q76 0 130 61.5t54 138.5q0 82 -84 130.5t-239 48.5v-379z" />
 82 | <glyph unicode="&#xe049;" d="M200 0v57q77 7 134.5 40.5t65.5 80.5l173 849q10 56 -10 74t-91 37q-6 1 -10.5 2.5t-9.5 2.5v57h425l2 -57q-33 -8 -62 -25.5t-46 -37t-29.5 -38t-17.5 -30.5l-5 -12l-128 -825q-10 -52 14 -82t95 -36v-57h-500z" />
 83 | <glyph unicode="&#xe050;" d="M-75 200h75v800h-75l125 167l125 -167h-75v-800h75l-125 -167zM300 900v300h150h700h150v-300h-50q0 29 -8 48.5t-18.5 30t-33.5 15t-39.5 5.5t-50.5 1h-200v-850l100 -50v-100h-400v100l100 50v850h-200q-34 0 -50.5 -1t-40 -5.5t-33.5 -15t-18.5 -30t-8.5 -48.5h-49z " />
 84 | <glyph unicode="&#xe051;" d="M33 51l167 125v-75h800v75l167 -125l-167 -125v75h-800v-75zM100 901v300h150h700h150v-300h-50q0 29 -8 48.5t-18 30t-33.5 15t-40 5.5t-50.5 1h-200v-650l100 -50v-100h-400v100l100 50v650h-200q-34 0 -50.5 -1t-39.5 -5.5t-33.5 -15t-18.5 -30t-8 -48.5h-50z" />
 85 | <glyph unicode="&#xe052;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 350q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM0 650q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1000q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 950q0 -20 14.5 -35t35.5 -15h600q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-600q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
 86 | <glyph unicode="&#xe053;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 650q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM200 350q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM200 950q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
 87 | <glyph unicode="&#xe054;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM100 650v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1000q-21 0 -35.5 15 t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM500 950v100q0 21 14.5 35.5t35.5 14.5h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-600 q-21 0 -35.5 15t-14.5 35z" />
 88 | <glyph unicode="&#xe055;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100 q-21 0 -35.5 15t-14.5 35z" />
 89 | <glyph unicode="&#xe056;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM300 50v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800 q-21 0 -35.5 15t-14.5 35zM300 650v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 950v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15 h-800q-21 0 -35.5 15t-14.5 35z" />
 90 | <glyph unicode="&#xe057;" d="M-101 500v100h201v75l166 -125l-166 -125v75h-201zM300 0h100v1100h-100v-1100zM500 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35 v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 650q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100 q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100z" />
 91 | <glyph unicode="&#xe058;" d="M1 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 650 q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM801 0v1100h100v-1100 h-100zM934 550l167 -125v75h200v100h-200v75z" />
 92 | <glyph unicode="&#xe059;" d="M0 275v650q0 31 22 53t53 22h750q31 0 53 -22t22 -53v-650q0 -31 -22 -53t-53 -22h-750q-31 0 -53 22t-22 53zM900 600l300 300v-600z" />
 93 | <glyph unicode="&#xe060;" d="M0 44v1012q0 18 13 31t31 13h1112q19 0 31.5 -13t12.5 -31v-1012q0 -18 -12.5 -31t-31.5 -13h-1112q-18 0 -31 13t-13 31zM100 263l247 182l298 -131l-74 156l293 318l236 -288v500h-1000v-737zM208 750q0 56 39 95t95 39t95 -39t39 -95t-39 -95t-95 -39t-95 39t-39 95z " />
 94 | <glyph unicode="&#xe062;" d="M148 745q0 124 60.5 231.5t165 172t226.5 64.5q123 0 227 -63t164.5 -169.5t60.5 -229.5t-73 -272q-73 -114 -166.5 -237t-150.5 -189l-57 -66q-10 9 -27 26t-66.5 70.5t-96 109t-104 135.5t-100.5 155q-63 139 -63 262zM342 772q0 -107 75.5 -182.5t181.5 -75.5 q107 0 182.5 75.5t75.5 182.5t-75.5 182t-182.5 75t-182 -75.5t-75 -181.5z" />
 95 | <glyph unicode="&#xe063;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM173 600q0 -177 125.5 -302t301.5 -125v854q-176 0 -301.5 -125 t-125.5 -302z" />
 96 | <glyph unicode="&#xe064;" d="M117 406q0 94 34 186t88.5 172.5t112 159t115 177t87.5 194.5q21 -71 57.5 -142.5t76 -130.5t83 -118.5t82 -117t70 -116t50 -125.5t18.5 -136q0 -89 -39 -165.5t-102 -126.5t-140 -79.5t-156 -33.5q-114 6 -211.5 53t-161.5 139t-64 210zM243 414q14 -82 59.5 -136 t136.5 -80l16 98q-7 6 -18 17t-34 48t-33 77q-15 73 -14 143.5t10 122.5l9 51q-92 -110 -119.5 -185t-12.5 -156z" />
 97 | <glyph unicode="&#xe065;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5q366 -6 397 -14l-186 -186h-311q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v125l200 200v-225q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM436 341l161 50l412 412l-114 113l-405 -405zM995 1015l113 -113l113 113l-21 85l-92 28z" />
 98 | <glyph unicode="&#xe066;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h261l2 -80q-133 -32 -218 -120h-145q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5l200 153v-53q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5 zM423 524q30 38 81.5 64t103 35.5t99 14t77.5 3.5l29 -1v-209l360 324l-359 318v-216q-7 0 -19 -1t-48 -8t-69.5 -18.5t-76.5 -37t-76.5 -59t-62 -88t-39.5 -121.5z" />
 99 | <glyph unicode="&#xe067;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q61 0 127 -23l-178 -177h-349q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v69l200 200v-169q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM342 632l283 -284l567 567l-137 137l-430 -431l-146 147z" />
100 | <glyph unicode="&#xe068;" d="M0 603l300 296v-198h200v200h-200l300 300l295 -300h-195v-200h200v198l300 -296l-300 -300v198h-200v-200h195l-295 -300l-300 300h200v200h-200v-198z" />
101 | <glyph unicode="&#xe069;" d="M200 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-1100l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
102 | <glyph unicode="&#xe070;" d="M0 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-487l500 487v-1100l-500 488v-488l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
103 | <glyph unicode="&#xe071;" d="M136 550l564 550v-487l500 487v-1100l-500 488v-488z" />
104 | <glyph unicode="&#xe072;" d="M200 0l900 550l-900 550v-1100z" />
105 | <glyph unicode="&#xe073;" d="M200 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-800zM600 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
106 | <glyph unicode="&#xe074;" d="M200 150q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v800q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
107 | <glyph unicode="&#xe075;" d="M0 0v1100l500 -487v487l564 -550l-564 -550v488z" />
108 | <glyph unicode="&#xe076;" d="M0 0v1100l500 -487v487l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-500 -488v488z" />
109 | <glyph unicode="&#xe077;" d="M300 0v1100l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438z" />
110 | <glyph unicode="&#xe078;" d="M100 250v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5zM100 500h1100l-550 564z" />
111 | <glyph unicode="&#xe079;" d="M185 599l592 -592l240 240l-353 353l353 353l-240 240z" />
112 | <glyph unicode="&#xe080;" d="M272 194l353 353l-353 353l241 240l572 -571l21 -22l-1 -1v-1l-592 -591z" />
113 | <glyph unicode="&#xe081;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM300 500h200v-200h200v200h200v200h-200v200h-200v-200h-200v-200z" />
114 | <glyph unicode="&#xe082;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM300 500h600v200h-600v-200z" />
115 | <glyph unicode="&#xe083;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM246 459l213 -213l141 142l141 -142l213 213l-142 141l142 141l-213 212l-141 -141l-141 142l-212 -213l141 -141 z" />
116 | <glyph unicode="&#xe084;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM270 551l276 -277l411 411l-175 174l-236 -236l-102 102z" />
117 | <glyph unicode="&#xe085;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM364 700h143q4 0 11.5 -1t11 -1t6.5 3t3 9t1 11t3.5 8.5t3.5 6t5.5 4t6.5 2.5t9 1.5t9 0.5h11.5h12.5 q19 0 30 -10t11 -26q0 -22 -4 -28t-27 -22q-5 -1 -12.5 -3t-27 -13.5t-34 -27t-26.5 -46t-11 -68.5h200q5 3 14 8t31.5 25.5t39.5 45.5t31 69t14 94q0 51 -17.5 89t-42 58t-58.5 32t-58.5 15t-51.5 3q-50 0 -90.5 -12t-75 -38.5t-53.5 -74.5t-19 -114zM500 300h200v100h-200 v-100z" />
118 | <glyph unicode="&#xe086;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM400 300h400v100h-100v300h-300v-100h100v-200h-100v-100zM500 800h200v100h-200v-100z" />
119 | <glyph unicode="&#xe087;" d="M0 500v200h195q31 125 98.5 199.5t206.5 100.5v200h200v-200q54 -20 113 -60t112.5 -105.5t71.5 -134.5h203v-200h-203q-25 -102 -116.5 -186t-180.5 -117v-197h-200v197q-140 27 -208 102.5t-98 200.5h-194zM290 500q24 -73 79.5 -127.5t130.5 -78.5v206h200v-206 q149 48 201 206h-201v200h200q-25 74 -75.5 127t-124.5 77v-204h-200v203q-75 -23 -130 -77t-79 -126h209v-200h-210z" />
120 | <glyph unicode="&#xe088;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM356 465l135 135 l-135 135l109 109l135 -135l135 135l109 -109l-135 -135l135 -135l-109 -109l-135 135l-135 -135z" />
121 | <glyph unicode="&#xe089;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM322 537l141 141 l87 -87l204 205l142 -142l-346 -345z" />
122 | <glyph unicode="&#xe090;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -115 62 -215l568 567q-100 62 -216 62q-171 0 -292.5 -121.5t-121.5 -292.5zM391 245q97 -59 209 -59q171 0 292.5 121.5t121.5 292.5 q0 112 -59 209z" />
123 | <glyph unicode="&#xe091;" d="M0 547l600 453v-300h600v-300h-600v-301z" />
124 | <glyph unicode="&#xe092;" d="M0 400v300h600v300l600 -453l-600 -448v301h-600z" />
125 | <glyph unicode="&#xe093;" d="M204 600l450 600l444 -600h-298v-600h-300v600h-296z" />
126 | <glyph unicode="&#xe094;" d="M104 600h296v600h300v-600h298l-449 -600z" />
127 | <glyph unicode="&#xe095;" d="M0 200q6 132 41 238.5t103.5 193t184 138t271.5 59.5v271l600 -453l-600 -448v301q-95 -2 -183 -20t-170 -52t-147 -92.5t-100 -135.5z" />
128 | <glyph unicode="&#xe096;" d="M0 0v400l129 -129l294 294l142 -142l-294 -294l129 -129h-400zM635 777l142 -142l294 294l129 -129v400h-400l129 -129z" />
129 | <glyph unicode="&#xe097;" d="M34 176l295 295l-129 129h400v-400l-129 130l-295 -295zM600 600v400l129 -129l295 295l142 -141l-295 -295l129 -130h-400z" />
130 | <glyph unicode="&#xe101;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5t224.5 -45.5t184 -123t123 -184t45.5 -224.5t-45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5zM456 851l58 -302q4 -20 21.5 -34.5t37.5 -14.5h54q20 0 37.5 14.5 t21.5 34.5l58 302q4 20 -8 34.5t-32 14.5h-207q-21 0 -33 -14.5t-8 -34.5zM500 300h200v100h-200v-100z" />
131 | <glyph unicode="&#xe102;" d="M0 800h100v-200h400v300h200v-300h400v200h100v100h-111q1 1 1 6.5t-1.5 15t-3.5 17.5l-34 172q-11 39 -41.5 63t-69.5 24q-32 0 -61 -17l-239 -144q-22 -13 -40 -35q-19 24 -40 36l-238 144q-33 18 -62 18q-39 0 -69.5 -23t-40.5 -61l-35 -177q-2 -8 -3 -18t-1 -15v-6 h-111v-100zM100 0h400v400h-400v-400zM200 900q-3 0 14 48t36 96l18 47l213 -191h-281zM700 0v400h400v-400h-400zM731 900l202 197q5 -12 12 -32.5t23 -64t25 -72t7 -28.5h-269z" />
132 | <glyph unicode="&#xe103;" d="M0 -22v143l216 193q-9 53 -13 83t-5.5 94t9 113t38.5 114t74 124q47 60 99.5 102.5t103 68t127.5 48t145.5 37.5t184.5 43.5t220 58.5q0 -189 -22 -343t-59 -258t-89 -181.5t-108.5 -120t-122 -68t-125.5 -30t-121.5 -1.5t-107.5 12.5t-87.5 17t-56.5 7.5l-99 -55z M238.5 300.5q19.5 -6.5 86.5 76.5q55 66 367 234q70 38 118.5 69.5t102 79t99 111.5t86.5 148q22 50 24 60t-6 19q-7 5 -17 5t-26.5 -14.5t-33.5 -39.5q-35 -51 -113.5 -108.5t-139.5 -89.5l-61 -32q-369 -197 -458 -401q-48 -111 -28.5 -117.5z" />
133 | <glyph unicode="&#xe104;" d="M111 408q0 -33 5 -63q9 -56 44 -119.5t105 -108.5q31 -21 64 -16t62 23.5t57 49.5t48 61.5t35 60.5q32 66 39 184.5t-13 157.5q79 -80 122 -164t26 -184q-5 -33 -20.5 -69.5t-37.5 -80.5q-10 -19 -14.5 -29t-12 -26t-9 -23.5t-3 -19t2.5 -15.5t11 -9.5t19.5 -5t30.5 2.5 t42 8q57 20 91 34t87.5 44.5t87 64t65.5 88.5t47 122q38 172 -44.5 341.5t-246.5 278.5q22 -44 43 -129q39 -159 -32 -154q-15 2 -33 9q-79 33 -120.5 100t-44 175.5t48.5 257.5q-13 -8 -34 -23.5t-72.5 -66.5t-88.5 -105.5t-60 -138t-8 -166.5q2 -12 8 -41.5t8 -43t6 -39.5 t3.5 -39.5t-1 -33.5t-6 -31.5t-13.5 -24t-21 -20.5t-31 -12q-38 -10 -67 13t-40.5 61.5t-15 81.5t10.5 75q-52 -46 -83.5 -101t-39 -107t-7.5 -85z" />
134 | <glyph unicode="&#xe105;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5t145.5 -23.5t132.5 -59t116.5 -83.5t97 -90t74.5 -85.5t49 -63.5t20 -30l26 -40l-26 -40q-6 -10 -20 -30t-49 -63.5t-74.5 -85.5t-97 -90t-116.5 -83.5t-132.5 -59t-145.5 -23.5 t-145.5 23.5t-132.5 59t-116.5 83.5t-97 90t-74.5 85.5t-49 63.5t-20 30zM120 600q7 -10 40.5 -58t56 -78.5t68 -77.5t87.5 -75t103 -49.5t125 -21.5t123.5 20t100.5 45.5t85.5 71.5t66.5 75.5t58 81.5t47 66q-1 1 -28.5 37.5t-42 55t-43.5 53t-57.5 63.5t-58.5 54 q49 -74 49 -163q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l105 105q-37 24 -75 72t-57 84l-20 36z" />
135 | <glyph unicode="&#xe106;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5q61 0 121 -17l37 142h148l-314 -1200h-148l37 143q-82 21 -165 71.5t-140 102t-109.5 112t-72 88.5t-29.5 43zM120 600q210 -282 393 -336l37 141q-107 18 -178.5 101.5t-71.5 193.5 q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l47 47l23 87q-30 28 -59 69t-44 68l-14 26zM780 161l38 145q22 15 44.5 34t46 44t40.5 44t41 50.5t33.5 43.5t33 44t24.5 34q-97 127 -140 175l39 146q67 -54 131.5 -125.5t87.5 -103.5t36 -52l26 -40l-26 -40 q-7 -12 -25.5 -38t-63.5 -79.5t-95.5 -102.5t-124 -100t-146.5 -79z" />
136 | <glyph unicode="&#xe107;" d="M-97.5 34q13.5 -34 50.5 -34h1294q37 0 50.5 35.5t-7.5 67.5l-642 1056q-20 34 -48 36.5t-48 -29.5l-642 -1066q-21 -32 -7.5 -66zM155 200l445 723l445 -723h-345v100h-200v-100h-345zM500 600l100 -300l100 300v100h-200v-100z" />
137 | <glyph unicode="&#xe108;" d="M100 262v41q0 20 11 44.5t26 38.5l363 325v339q0 62 44 106t106 44t106 -44t44 -106v-339l363 -325q15 -14 26 -38.5t11 -44.5v-41q0 -20 -12 -26.5t-29 5.5l-359 249v-263q100 -91 100 -113v-64q0 -20 -13 -28.5t-32 0.5l-94 78h-222l-94 -78q-19 -9 -32 -0.5t-13 28.5 v64q0 22 100 113v263l-359 -249q-17 -12 -29 -5.5t-12 26.5z" />
138 | <glyph unicode="&#xe109;" d="M0 50q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v750h-1100v-750zM0 900h1100v150q0 21 -14.5 35.5t-35.5 14.5h-150v100h-100v-100h-500v100h-100v-100h-150q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 100v100h100v-100h-100zM100 300v100h100v-100h-100z M100 500v100h100v-100h-100zM300 100v100h100v-100h-100zM300 300v100h100v-100h-100zM300 500v100h100v-100h-100zM500 100v100h100v-100h-100zM500 300v100h100v-100h-100zM500 500v100h100v-100h-100zM700 100v100h100v-100h-100zM700 300v100h100v-100h-100zM700 500 v100h100v-100h-100zM900 100v100h100v-100h-100zM900 300v100h100v-100h-100zM900 500v100h100v-100h-100z" />
139 | <glyph unicode="&#xe110;" d="M0 200v200h259l600 600h241v198l300 -295l-300 -300v197h-159l-600 -600h-341zM0 800h259l122 -122l141 142l-181 180h-341v-200zM678 381l141 142l122 -123h159v198l300 -295l-300 -300v197h-241z" />
140 | <glyph unicode="&#xe111;" d="M0 400v600q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-596l-304 -300v300h-100q-41 0 -70.5 29.5t-29.5 70.5z" />
141 | <glyph unicode="&#xe112;" d="M100 600v200h300v-250q0 -113 6 -145q17 -92 102 -117q39 -11 92 -11q37 0 66.5 5.5t50 15.5t36 24t24 31.5t14 37.5t7 42t2.5 45t0 47v25v250h300v-200q0 -42 -3 -83t-15 -104t-31.5 -116t-58 -109.5t-89 -96.5t-129 -65.5t-174.5 -25.5t-174.5 25.5t-129 65.5t-89 96.5 t-58 109.5t-31.5 116t-15 104t-3 83zM100 900v300h300v-300h-300zM800 900v300h300v-300h-300z" />
142 | <glyph unicode="&#xe113;" d="M-30 411l227 -227l352 353l353 -353l226 227l-578 579z" />
143 | <glyph unicode="&#xe114;" d="M70 797l580 -579l578 579l-226 227l-353 -353l-352 353z" />
144 | <glyph unicode="&#xe115;" d="M-198 700l299 283l300 -283h-203v-400h385l215 -200h-800v600h-196zM402 1000l215 -200h381v-400h-198l299 -283l299 283h-200v600h-796z" />
145 | <glyph unicode="&#xe116;" d="M18 939q-5 24 10 42q14 19 39 19h896l38 162q5 17 18.5 27.5t30.5 10.5h94q20 0 35 -14.5t15 -35.5t-15 -35.5t-35 -14.5h-54l-201 -961q-2 -4 -6 -10.5t-19 -17.5t-33 -11h-31v-50q0 -20 -14.5 -35t-35.5 -15t-35.5 15t-14.5 35v50h-300v-50q0 -20 -14.5 -35t-35.5 -15 t-35.5 15t-14.5 35v50h-50q-21 0 -35.5 15t-14.5 35q0 21 14.5 35.5t35.5 14.5h535l48 200h-633q-32 0 -54.5 21t-27.5 43z" />
146 | <glyph unicode="&#xe117;" d="M0 0v800h1200v-800h-1200zM0 900v100h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-100h-1200z" />
147 | <glyph unicode="&#xe118;" d="M1 0l300 700h1200l-300 -700h-1200zM1 400v600h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-200h-1000z" />
148 | <glyph unicode="&#xe119;" d="M302 300h198v600h-198l298 300l298 -300h-198v-600h198l-298 -300z" />
149 | <glyph unicode="&#xe120;" d="M0 600l300 298v-198h600v198l300 -298l-300 -297v197h-600v-197z" />
150 | <glyph unicode="&#xe121;" d="M0 100v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM31 400l172 739q5 22 23 41.5t38 19.5h672q19 0 37.5 -22.5t23.5 -45.5l172 -732h-1138zM800 100h100v100h-100v-100z M1000 100h100v100h-100v-100z" />
151 | <glyph unicode="&#xe122;" d="M-101 600v50q0 24 25 49t50 38l25 13v-250l-11 5.5t-24 14t-30 21.5t-24 27.5t-11 31.5zM100 500v250v8v8v7t0.5 7t1.5 5.5t2 5t3 4t4.5 3.5t6 1.5t7.5 0.5h200l675 250v-850l-675 200h-38l47 -276q2 -12 -3 -17.5t-11 -6t-21 -0.5h-8h-83q-20 0 -34.5 14t-18.5 35 q-55 337 -55 351zM1100 200v850q0 21 14.5 35.5t35.5 14.5q20 0 35 -14.5t15 -35.5v-850q0 -20 -15 -35t-35 -15q-21 0 -35.5 15t-14.5 35z" />
152 | <glyph unicode="&#xe123;" d="M74 350q0 21 13.5 35.5t33.5 14.5h18l117 173l63 327q15 77 76 140t144 83l-18 32q-6 19 3 32t29 13h94q20 0 29 -10.5t3 -29.5q-18 -36 -18 -37q83 -19 144 -82.5t76 -140.5l63 -327l118 -173h17q20 0 33.5 -14.5t13.5 -35.5q0 -20 -13 -40t-31 -27q-8 -3 -23 -8.5 t-65 -20t-103 -25t-132.5 -19.5t-158.5 -9q-125 0 -245.5 20.5t-178.5 40.5l-58 20q-18 7 -31 27.5t-13 40.5zM497 110q12 -49 40 -79.5t63 -30.5t63 30.5t39 79.5q-48 -6 -102 -6t-103 6z" />
153 | <glyph unicode="&#xe124;" d="M21 445l233 -45l-78 -224l224 78l45 -233l155 179l155 -179l45 233l224 -78l-78 224l234 45l-180 155l180 156l-234 44l78 225l-224 -78l-45 233l-155 -180l-155 180l-45 -233l-224 78l78 -225l-233 -44l179 -156z" />
154 | <glyph unicode="&#xe125;" d="M0 200h200v600h-200v-600zM300 275q0 -75 100 -75h61q124 -100 139 -100h250q46 0 83 57l238 344q29 31 29 74v100q0 44 -30.5 84.5t-69.5 40.5h-328q28 118 28 125v150q0 44 -30.5 84.5t-69.5 40.5h-50q-27 0 -51 -20t-38 -48l-96 -198l-145 -196q-20 -26 -20 -63v-400z M400 300v375l150 213l100 212h50v-175l-50 -225h450v-125l-250 -375h-214l-136 100h-100z" />
155 | <glyph unicode="&#xe126;" d="M0 400v600h200v-600h-200zM300 525v400q0 75 100 75h61q124 100 139 100h250q46 0 83 -57l238 -344q29 -31 29 -74v-100q0 -44 -30.5 -84.5t-69.5 -40.5h-328q28 -118 28 -125v-150q0 -44 -30.5 -84.5t-69.5 -40.5h-50q-27 0 -51 20t-38 48l-96 198l-145 196 q-20 26 -20 63zM400 525l150 -212l100 -213h50v175l-50 225h450v125l-250 375h-214l-136 -100h-100v-375z" />
156 | <glyph unicode="&#xe127;" d="M8 200v600h200v-600h-200zM308 275v525q0 17 14 35.5t28 28.5l14 9l362 230q14 6 25 6q17 0 29 -12l109 -112q14 -14 14 -34q0 -18 -11 -32l-85 -121h302q85 0 138.5 -38t53.5 -110t-54.5 -111t-138.5 -39h-107l-130 -339q-7 -22 -20.5 -41.5t-28.5 -19.5h-341 q-7 0 -90 81t-83 94zM408 289l100 -89h293l131 339q6 21 19.5 41t28.5 20h203q16 0 25 15t9 36q0 20 -9 34.5t-25 14.5h-457h-6.5h-7.5t-6.5 0.5t-6 1t-5 1.5t-5.5 2.5t-4 4t-4 5.5q-5 12 -5 20q0 14 10 27l147 183l-86 83l-339 -236v-503z" />
157 | <glyph unicode="&#xe128;" d="M-101 651q0 72 54 110t139 38l302 -1l-85 121q-11 16 -11 32q0 21 14 34l109 113q13 12 29 12q11 0 25 -6l365 -230q7 -4 17 -10.5t26.5 -26t16.5 -36.5v-526q0 -13 -86 -93.5t-94 -80.5h-341q-16 0 -29.5 20t-19.5 41l-130 339h-107q-84 0 -139 39t-55 111zM-1 601h222 q15 0 28.5 -20.5t19.5 -40.5l131 -339h293l107 89v502l-343 237l-87 -83l145 -184q10 -11 10 -26q0 -11 -5 -20q-1 -3 -3.5 -5.5l-4 -4t-5 -2.5t-5.5 -1.5t-6.5 -1t-6.5 -0.5h-7.5h-6.5h-476v-100zM1000 201v600h200v-600h-200z" />
158 | <glyph unicode="&#xe129;" d="M97 719l230 -363q4 -6 10.5 -15.5t26 -25t36.5 -15.5h525q13 0 94 83t81 90v342q0 15 -20 28.5t-41 19.5l-339 131v106q0 84 -39 139t-111 55t-110 -53.5t-38 -138.5v-302l-121 84q-15 12 -33.5 11.5t-32.5 -13.5l-112 -110q-22 -22 -6 -53zM172 739l83 86l183 -146 q22 -18 47 -5q3 1 5.5 3.5l4 4t2.5 5t1.5 5.5t1 6.5t0.5 6.5v7.5v6.5v456q0 22 25 31t50 -0.5t25 -30.5v-202q0 -16 20 -29.5t41 -19.5l339 -130v-294l-89 -100h-503zM400 0v200h600v-200h-600z" />
159 | <glyph unicode="&#xe130;" d="M2 585q-16 -31 6 -53l112 -110q13 -13 32 -13.5t34 10.5l121 85q0 -51 -0.5 -153.5t-0.5 -148.5q0 -84 38.5 -138t110.5 -54t111 55t39 139v106l339 131q20 6 40.5 19.5t20.5 28.5v342q0 7 -81 90t-94 83h-525q-17 0 -35.5 -14t-28.5 -28l-10 -15zM77 565l236 339h503 l89 -100v-294l-340 -130q-20 -6 -40 -20t-20 -29v-202q0 -22 -25 -31t-50 0t-25 31v456v14.5t-1.5 11.5t-5 12t-9.5 7q-24 13 -46 -5l-184 -146zM305 1104v200h600v-200h-600z" />
160 | <glyph unicode="&#xe131;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM298 701l2 -201h300l-2 -194l402 294l-402 298v-197h-300z" />
161 | <glyph unicode="&#xe132;" d="M0 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t231.5 47.5q122 0 232.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-218 -217.5t-300 -80t-299.5 80t-217.5 217.5t-80 299.5zM200 600l402 -294l-2 194h300l2 201h-300v197z" />
162 | <glyph unicode="&#xe133;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600h200v-300h200v300h200l-300 400z" />
163 | <glyph unicode="&#xe134;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600l300 -400l300 400h-200v300h-200v-300h-200z" />
164 | <glyph unicode="&#xe135;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM254 780q-8 -33 5.5 -92.5t7.5 -87.5q0 -9 17 -44t16 -60 q12 0 23 -5.5t23 -15t20 -13.5q24 -12 108 -42q22 -8 53 -31.5t59.5 -38.5t57.5 -11q8 -18 -15 -55t-20 -57q42 -71 87 -80q0 -6 -3 -15.5t-3.5 -14.5t4.5 -17q104 -3 221 112q30 29 47 47t34.5 49t20.5 62q-14 9 -37 9.5t-36 7.5q-14 7 -49 15t-52 19q-9 0 -39.5 -0.5 t-46.5 -1.5t-39 -6.5t-39 -16.5q-50 -35 -66 -12q-4 2 -3.5 25.5t0.5 25.5q-6 13 -26.5 17t-24.5 7q2 22 -2 41t-16.5 28t-38.5 -20q-23 -25 -42 4q-19 28 -8 58q6 16 22 22q6 -1 26 -1.5t33.5 -4t19.5 -13.5q12 -19 32 -37.5t34 -27.5l14 -8q0 3 9.5 39.5t5.5 57.5 q-4 23 14.5 44.5t22.5 31.5q5 14 10 35t8.5 31t15.5 22.5t34 21.5q-6 18 10 37q8 0 23.5 -1.5t24.5 -1.5t20.5 4.5t20.5 15.5q-10 23 -30.5 42.5t-38 30t-49 26.5t-43.5 23q11 39 2 44q31 -13 58 -14.5t39 3.5l11 4q7 36 -16.5 53.5t-64.5 28.5t-56 23q-19 -3 -37 0 q-15 -12 -36.5 -21t-34.5 -12t-44 -8t-39 -6q-15 -3 -45.5 0.5t-45.5 -2.5q-21 -7 -52 -26.5t-34 -34.5q-3 -11 6.5 -22.5t8.5 -18.5q-3 -34 -27.5 -90.5t-29.5 -79.5zM518 916q3 12 16 30t16 25q10 -10 18.5 -10t14 6t14.5 14.5t16 12.5q0 -24 17 -66.5t17 -43.5 q-9 2 -31 5t-36 5t-32 8t-30 14zM692 1003h1h-1z" />
165 | <glyph unicode="&#xe136;" d="M0 164.5q0 21.5 15 37.5l600 599q-33 101 6 201.5t135 154.5q164 92 306 -9l-259 -138l145 -232l251 126q13 -175 -151 -267q-123 -70 -253 -23l-596 -596q-15 -16 -36.5 -16t-36.5 16l-111 110q-15 15 -15 36.5z" />
166 | <glyph unicode="&#xe137;" horiz-adv-x="1220" d="M0 196v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 596v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5zM0 996v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM600 596h500v100h-500v-100zM800 196h300v100h-300v-100zM900 996h200v100h-200v-100z" />
167 | <glyph unicode="&#xe138;" d="M100 1100v100h1000v-100h-1000zM150 1000h900l-350 -500v-300l-200 -200v500z" />
168 | <glyph unicode="&#xe139;" d="M0 200v200h1200v-200q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 500v400q0 41 29.5 70.5t70.5 29.5h300v100q0 41 29.5 70.5t70.5 29.5h200q41 0 70.5 -29.5t29.5 -70.5v-100h300q41 0 70.5 -29.5t29.5 -70.5v-400h-500v100h-200v-100h-500z M500 1000h200v100h-200v-100z" />
169 | <glyph unicode="&#xe140;" d="M0 0v400l129 -129l200 200l142 -142l-200 -200l129 -129h-400zM0 800l129 129l200 -200l142 142l-200 200l129 129h-400v-400zM729 329l142 142l200 -200l129 129v-400h-400l129 129zM729 871l200 200l-129 129h400v-400l-129 129l-200 -200z" />
170 | <glyph unicode="&#xe141;" d="M0 596q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 596q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM291 655 q0 23 15.5 38.5t38.5 15.5t39 -16t16 -38q0 -23 -16 -39t-39 -16q-22 0 -38 16t-16 39zM400 850q0 22 16 38.5t39 16.5q22 0 38 -16t16 -39t-16 -39t-38 -16q-23 0 -39 16.5t-16 38.5zM514 609q0 32 20.5 56.5t51.5 29.5l122 126l1 1q-9 14 -9 28q0 22 16 38.5t39 16.5 q22 0 38 -16t16 -39t-16 -39t-38 -16q-14 0 -29 10l-55 -145q17 -22 17 -51q0 -36 -25.5 -61.5t-61.5 -25.5t-61.5 25.5t-25.5 61.5zM800 655q0 22 16 38t39 16t38.5 -15.5t15.5 -38.5t-16 -39t-38 -16q-23 0 -39 16t-16 39z" />
171 | <glyph unicode="&#xe142;" d="M-40 375q-13 -95 35 -173q35 -57 94 -89t129 -32q63 0 119 28q33 16 65 40.5t52.5 45.5t59.5 64q40 44 57 61l394 394q35 35 47 84t-3 96q-27 87 -117 104q-20 2 -29 2q-46 0 -78.5 -16.5t-67.5 -51.5l-389 -396l-7 -7l69 -67l377 373q20 22 39 38q23 23 50 23 q38 0 53 -36q16 -39 -20 -75l-547 -547q-52 -52 -125 -52q-55 0 -100 33t-54 96q-5 35 2.5 66t31.5 63t42 50t56 54q24 21 44 41l348 348q52 52 82.5 79.5t84 54t107.5 26.5q25 0 48 -4q95 -17 154 -94.5t51 -175.5q-7 -101 -98 -192l-252 -249l-253 -256l7 -7l69 -60 l517 511q67 67 95 157t11 183q-16 87 -67 154t-130 103q-69 33 -152 33q-107 0 -197 -55q-40 -24 -111 -95l-512 -512q-68 -68 -81 -163z" />
172 | <glyph unicode="&#xe143;" d="M80 784q0 131 98.5 229.5t230.5 98.5q143 0 241 -129q103 129 246 129q129 0 226 -98.5t97 -229.5q0 -46 -17.5 -91t-61 -99t-77 -89.5t-104.5 -105.5q-197 -191 -293 -322l-17 -23l-16 23q-43 58 -100 122.5t-92 99.5t-101 100q-71 70 -104.5 105.5t-77 89.5t-61 99 t-17.5 91zM250 784q0 -27 30.5 -70t61.5 -75.5t95 -94.5l22 -22q93 -90 190 -201q82 92 195 203l12 12q64 62 97.5 97t64.5 79t31 72q0 71 -48 119.5t-105 48.5q-74 0 -132 -83l-118 -171l-114 174q-51 80 -123 80q-60 0 -109.5 -49.5t-49.5 -118.5z" />
173 | <glyph unicode="&#xe144;" d="M57 353q0 -95 66 -159l141 -142q68 -66 159 -66q93 0 159 66l283 283q66 66 66 159t-66 159l-141 141q-8 9 -19 17l-105 -105l212 -212l-389 -389l-247 248l95 95l-18 18q-46 45 -75 101l-55 -55q-66 -66 -66 -159zM269 706q0 -93 66 -159l141 -141q7 -7 19 -17l105 105 l-212 212l389 389l247 -247l-95 -96l18 -17q47 -49 77 -100l29 29q35 35 62.5 88t27.5 96q0 93 -66 159l-141 141q-66 66 -159 66q-95 0 -159 -66l-283 -283q-66 -64 -66 -159z" />
174 | <glyph unicode="&#xe145;" d="M200 100v953q0 21 30 46t81 48t129 38t163 15t162 -15t127 -38t79 -48t29 -46v-953q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-41 0 -70.5 29.5t-29.5 70.5zM300 300h600v700h-600v-700zM496 150q0 -43 30.5 -73.5t73.5 -30.5t73.5 30.5t30.5 73.5t-30.5 73.5t-73.5 30.5 t-73.5 -30.5t-30.5 -73.5z" />
175 | <glyph unicode="&#xe146;" d="M0 0l303 380l207 208l-210 212h300l267 279l-35 36q-15 14 -15 35t15 35q14 15 35 15t35 -15l283 -282q15 -15 15 -36t-15 -35q-14 -15 -35 -15t-35 15l-36 35l-279 -267v-300l-212 210l-208 -207z" />
176 | <glyph unicode="&#xe148;" d="M295 433h139q5 -77 48.5 -126.5t117.5 -64.5v335q-6 1 -15.5 4t-11.5 3q-46 14 -79 26.5t-72 36t-62.5 52t-40 72.5t-16.5 99q0 92 44 159.5t109 101t144 40.5v78h100v-79q38 -4 72.5 -13.5t75.5 -31.5t71 -53.5t51.5 -84t24.5 -118.5h-159q-8 72 -35 109.5t-101 50.5 v-307l64 -14q34 -7 64 -16.5t70 -31.5t67.5 -52t47.5 -80.5t20 -112.5q0 -139 -89 -224t-244 -96v-77h-100v78q-152 17 -237 104q-40 40 -52.5 93.5t-15.5 139.5zM466 889q0 -29 8 -51t16.5 -34t29.5 -22.5t31 -13.5t38 -10q7 -2 11 -3v274q-61 -8 -97.5 -37.5t-36.5 -102.5 zM700 237q170 18 170 151q0 64 -44 99.5t-126 60.5v-311z" />
177 | <glyph unicode="&#xe149;" d="M100 600v100h166q-24 49 -44 104q-10 26 -14.5 55.5t-3 72.5t25 90t68.5 87q97 88 263 88q129 0 230 -89t101 -208h-153q0 52 -34 89.5t-74 51.5t-76 14q-37 0 -79 -14.5t-62 -35.5q-41 -44 -41 -101q0 -28 16.5 -69.5t28 -62.5t41.5 -72h241v-100h-197q8 -50 -2.5 -115 t-31.5 -94q-41 -59 -99 -113q35 11 84 18t70 7q33 1 103 -16t103 -17q76 0 136 30l50 -147q-41 -25 -80.5 -36.5t-59 -13t-61.5 -1.5q-23 0 -128 33t-155 29q-39 -4 -82 -17t-66 -25l-24 -11l-55 145l16.5 11t15.5 10t13.5 9.5t14.5 12t14.5 14t17.5 18.5q48 55 54 126.5 t-30 142.5h-221z" />
178 | <glyph unicode="&#xe150;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM602 900l298 300l298 -300h-198v-900h-200v900h-198z" />
179 | <glyph unicode="&#xe151;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v200h100v-100h200v-100h-300zM700 400v100h300v-200h-99v-100h-100v100h99v100h-200zM700 700v500h300v-500h-100v100h-100v-100h-100zM801 900h100v200h-100v-200z" />
180 | <glyph unicode="&#xe152;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v500h300v-500h-100v100h-100v-100h-100zM700 700v200h100v-100h200v-100h-300zM700 1100v100h300v-200h-99v-100h-100v100h99v100h-200zM801 200h100v200h-100v-200z" />
181 | <glyph unicode="&#xe153;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 100v400h300v-500h-100v100h-200zM800 1100v100h200v-500h-100v400h-100zM901 200h100v200h-100v-200z" />
182 | <glyph unicode="&#xe154;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 400v100h200v-500h-100v400h-100zM800 800v400h300v-500h-100v100h-200zM901 900h100v200h-100v-200z" />
183 | <glyph unicode="&#xe155;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h500v-200h-500zM700 400v200h400v-200h-400zM700 700v200h300v-200h-300zM700 1000v200h200v-200h-200z" />
184 | <glyph unicode="&#xe156;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h200v-200h-200zM700 400v200h300v-200h-300zM700 700v200h400v-200h-400zM700 1000v200h500v-200h-500z" />
185 | <glyph unicode="&#xe157;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q162 0 281 -118.5t119 -281.5v-300q0 -165 -118.5 -282.5t-281.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500z" />
186 | <glyph unicode="&#xe158;" d="M0 400v300q0 163 119 281.5t281 118.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-163 0 -281.5 117.5t-118.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM400 300l333 250l-333 250v-500z" />
187 | <glyph unicode="&#xe159;" d="M0 400v300q0 163 117.5 281.5t282.5 118.5h300q163 0 281.5 -119t118.5 -281v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 700l250 -333l250 333h-500z" />
188 | <glyph unicode="&#xe160;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -162 -118.5 -281t-281.5 -119h-300q-165 0 -282.5 118.5t-117.5 281.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 400h500l-250 333z" />
189 | <glyph unicode="&#xe161;" d="M0 400v300h300v200l400 -350l-400 -350v200h-300zM500 0v200h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-500v200h400q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-400z" />
190 | <glyph unicode="&#xe162;" d="M217 519q8 -19 31 -19h302q-155 -438 -160 -458q-5 -21 4 -32l9 -8h9q14 0 26 15q11 13 274.5 321.5t264.5 308.5q14 19 5 36q-8 17 -31 17l-301 -1q1 4 78 219.5t79 227.5q2 15 -5 27l-9 9h-9q-15 0 -25 -16q-4 -6 -98 -111.5t-228.5 -257t-209.5 -237.5q-16 -19 -6 -41 z" />
191 | <glyph unicode="&#xe163;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q47 0 100 15v185h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h500v185q-14 4 -114 7.5t-193 5.5l-93 2q-165 0 -282.5 -117.5t-117.5 -282.5v-300zM600 400v300h300v200l400 -350l-400 -350v200h-300z " />
192 | <glyph unicode="&#xe164;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q163 0 281.5 117.5t118.5 282.5v98l-78 73l-122 -123v-148q0 -41 -29.5 -70.5t-70.5 -29.5h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h156l118 122l-74 78h-100q-165 0 -282.5 -117.5t-117.5 -282.5 v-300zM496 709l353 342l-149 149h500v-500l-149 149l-342 -353z" />
193 | <glyph unicode="&#xe165;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM406 600 q0 80 57 137t137 57t137 -57t57 -137t-57 -137t-137 -57t-137 57t-57 137z" />
194 | <glyph unicode="&#xe166;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 800l445 -500l450 500h-295v400h-300v-400h-300zM900 150h100v50h-100v-50z" />
195 | <glyph unicode="&#xe167;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 700h300v-300h300v300h295l-445 500zM900 150h100v50h-100v-50z" />
196 | <glyph unicode="&#xe168;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 705l305 -305l596 596l-154 155l-442 -442l-150 151zM900 150h100v50h-100v-50z" />
197 | <glyph unicode="&#xe169;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 988l97 -98l212 213l-97 97zM200 400l697 1l3 699l-250 -239l-149 149l-212 -212l149 -149zM900 150h100v50h-100v-50z" />
198 | <glyph unicode="&#xe170;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM200 612l212 -212l98 97l-213 212zM300 1200l239 -250l-149 -149l212 -212l149 148l249 -237l-1 697zM900 150h100v50h-100v-50z" />
199 | <glyph unicode="&#xe171;" d="M23 415l1177 784v-1079l-475 272l-310 -393v416h-392zM494 210l672 938l-672 -712v-226z" />
200 | <glyph unicode="&#xe172;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-850q0 -21 -15 -35.5t-35 -14.5h-150v400h-700v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200z" />
201 | <glyph unicode="&#xe173;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-218l-276 -275l-120 120l-126 -127h-378v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM581 306l123 123l120 -120l353 352l123 -123l-475 -476zM600 1000h100v200h-100v-200z" />
202 | <glyph unicode="&#xe174;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-269l-103 -103l-170 170l-298 -298h-329v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200zM700 133l170 170l-170 170l127 127l170 -170l170 170l127 -128l-170 -169l170 -170 l-127 -127l-170 170l-170 -170z" />
203 | <glyph unicode="&#xe175;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-300h-400v-200h-500v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300l300 -300l300 300h-200v300h-200v-300h-200zM600 1000v200h100v-200h-100z" />
204 | <glyph unicode="&#xe176;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-402l-200 200l-298 -298h-402v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300h200v-300h200v300h200l-300 300zM600 1000v200h100v-200h-100z" />
205 | <glyph unicode="&#xe177;" d="M0 250q0 -21 14.5 -35.5t35.5 -14.5h1100q21 0 35.5 14.5t14.5 35.5v550h-1200v-550zM0 900h1200v150q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 300v200h400v-200h-400z" />
206 | <glyph unicode="&#xe178;" d="M0 400l300 298v-198h400v-200h-400v-198zM100 800v200h100v-200h-100zM300 800v200h100v-200h-100zM500 800v200h400v198l300 -298l-300 -298v198h-400zM800 300v200h100v-200h-100zM1000 300h100v200h-100v-200z" />
207 | <glyph unicode="&#xe179;" d="M100 700v400l50 100l50 -100v-300h100v300l50 100l50 -100v-300h100v300l50 100l50 -100v-400l-100 -203v-447q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v447zM800 597q0 -29 10.5 -55.5t25 -43t29 -28.5t25.5 -18l10 -5v-397q0 -21 14.5 -35.5 t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v1106q0 31 -18 40.5t-44 -7.5l-276 -116q-25 -17 -43.5 -51.5t-18.5 -65.5v-359z" />
208 | <glyph unicode="&#xe180;" d="M100 0h400v56q-75 0 -87.5 6t-12.5 44v394h500v-394q0 -38 -12.5 -44t-87.5 -6v-56h400v56q-4 0 -11 0.5t-24 3t-30 7t-24 15t-11 24.5v888q0 22 25 34.5t50 13.5l25 2v56h-400v-56q75 0 87.5 -6t12.5 -44v-394h-500v394q0 38 12.5 44t87.5 6v56h-400v-56q4 0 11 -0.5 t24 -3t30 -7t24 -15t11 -24.5v-888q0 -22 -25 -34.5t-50 -13.5l-25 -2v-56z" />
209 | <glyph unicode="&#xe181;" d="M0 300q0 -41 29.5 -70.5t70.5 -29.5h300q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-300q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM100 100h400l200 200h105l295 98v-298h-425l-100 -100h-375zM100 300v200h300v-200h-300zM100 600v200h300v-200h-300z M100 1000h400l200 -200v-98l295 98h105v200h-425l-100 100h-375zM700 402v163l400 133v-163z" />
210 | <glyph unicode="&#xe182;" d="M16.5 974.5q0.5 -21.5 16 -90t46.5 -140t104 -177.5t175 -208q103 -103 207.5 -176t180 -103.5t137 -47t92.5 -16.5l31 1l163 162q17 18 13.5 41t-22.5 37l-192 136q-19 14 -45 12t-42 -19l-118 -118q-142 101 -268 227t-227 268l118 118q17 17 20 41.5t-11 44.5 l-139 194q-14 19 -36.5 22t-40.5 -14l-162 -162q-1 -11 -0.5 -32.5z" />
211 | <glyph unicode="&#xe183;" d="M0 50v212q0 20 10.5 45.5t24.5 39.5l365 303v50q0 4 1 10.5t12 22.5t30 28.5t60 23t97 10.5t97 -10t60 -23.5t30 -27.5t12 -24l1 -10v-50l365 -303q14 -14 24.5 -39.5t10.5 -45.5v-212q0 -21 -14.5 -35.5t-35.5 -14.5h-1100q-20 0 -35 14.5t-15 35.5zM0 712 q0 -21 14.5 -33.5t34.5 -8.5l202 33q20 4 34.5 21t14.5 38v146q141 24 300 24t300 -24v-146q0 -21 14.5 -38t34.5 -21l202 -33q20 -4 34.5 8.5t14.5 33.5v200q-6 8 -19 20.5t-63 45t-112 57t-171 45t-235 20.5q-92 0 -175 -10.5t-141.5 -27t-108.5 -36.5t-81.5 -40 t-53.5 -36.5t-31 -27.5l-9 -10v-200z" />
212 | <glyph unicode="&#xe184;" d="M100 0v100h1100v-100h-1100zM175 200h950l-125 150v250l100 100v400h-100v-200h-100v200h-200v-200h-100v200h-200v-200h-100v200h-100v-400l100 -100v-250z" />
213 | <glyph unicode="&#xe185;" d="M100 0h300v400q0 41 -29.5 70.5t-70.5 29.5h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-400zM500 0v1000q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-1000h-300zM900 0v700q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-700h-300z" />
214 | <glyph unicode="&#xe186;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
215 | <glyph unicode="&#xe187;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h100v200h100v-200h100v500h-100v-200h-100v200h-100v-500zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
216 | <glyph unicode="&#xe188;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v100h-200v300h200v100h-300v-500zM600 300h300v100h-200v300h200v100h-300v-500z" />
217 | <glyph unicode="&#xe189;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 550l300 -150v300zM600 400l300 150l-300 150v-300z" />
218 | <glyph unicode="&#xe190;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300v500h700v-500h-700zM300 400h130q41 0 68 42t27 107t-28.5 108t-66.5 43h-130v-300zM575 549 q0 -65 27 -107t68 -42h130v300h-130q-38 0 -66.5 -43t-28.5 -108z" />
219 | <glyph unicode="&#xe191;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
220 | <glyph unicode="&#xe192;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v400h-200v100h-100v-500zM301 400v200h100v-200h-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
221 | <glyph unicode="&#xe193;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 700v100h300v-300h-99v-100h-100v100h99v200h-200zM201 300v100h100v-100h-100zM601 300v100h100v-100h-100z M700 700v100h200v-500h-100v400h-100z" />
222 | <glyph unicode="&#xe194;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 500v200 l100 100h300v-100h-300v-200h300v-100h-300z" />
223 | <glyph unicode="&#xe195;" d="M0 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 400v400h300 l100 -100v-100h-100v100h-200v-100h200v-100h-200v-100h-100zM700 400v100h100v-100h-100z" />
224 | <glyph unicode="&#xe197;" d="M-14 494q0 -80 56.5 -137t135.5 -57h222v300h400v-300h128q120 0 205 86.5t85 207.5t-85 207t-205 86q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200h200v300h200v-300h200 l-300 -300z" />
225 | <glyph unicode="&#xe198;" d="M-14 494q0 -80 56.5 -137t135.5 -57h8l414 414l403 -403q94 26 154.5 104.5t60.5 178.5q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200l300 300 l300 -300h-200v-300h-200v300h-200z" />
226 | <glyph unicode="&#xe199;" d="M100 200h400v-155l-75 -45h350l-75 45v155h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170z" />
227 | <glyph unicode="&#xe200;" d="M121 700q0 -53 28.5 -97t75.5 -65q-4 -16 -4 -38q0 -74 52.5 -126.5t126.5 -52.5q56 0 100 30v-306l-75 -45h350l-75 45v306q46 -30 100 -30q74 0 126.5 52.5t52.5 126.5q0 24 -9 55q50 32 79.5 83t29.5 112q0 90 -61.5 155.5t-150.5 71.5q-26 89 -99.5 145.5 t-167.5 56.5q-116 0 -197.5 -81.5t-81.5 -197.5q0 -4 1 -11.5t1 -11.5q-14 2 -23 2q-74 0 -126.5 -52.5t-52.5 -126.5z" />
228 | </font>
229 | </defs></svg> 


--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/fonts/glyphicons-halflings-regular.ttf


--------------------------------------------------------------------------------
/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/fonts/glyphicons-halflings-regular.woff


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var babelify   = require('babelify'),
 4 |     browserify = require('browserify'),
 5 |     buffer     = require('vinyl-buffer'),
 6 |     gulp       = require('gulp'),
 7 |     gutil      = require('gulp-util'),
 8 |     sass       = require('gulp-sass'),
 9 |     livereload = require('gulp-livereload'),
10 |     merge      = require('merge'),
11 |     rename     = require('gulp-rename'),
12 |     source     = require('vinyl-source-stream'),
13 |     sourceMaps = require('gulp-sourcemaps'),
14 |     watchify   = require('watchify');
15 | 
16 | var config = {
17 |   js: {
18 |     src: './src/js/main.js',
19 |     outputDir: './dist/js/', 
20 |     mapDir: './maps/',
21 |     outputFile: 'bundle.js'
22 |   },
23 |   css: {
24 |     src: './sass/**/*.scss',
25 |     outputDir: './dist/css/',
26 |     outputFile: 'main.css'
27 |   }
28 | };
29 | 
30 | function bundle (bundler) {
31 | 
32 |   return bundler
33 |     .bundle() // Start bundle
34 |     .pipe(source(config.js.src)) // Entry point
35 |     .pipe(buffer()) // Convert to gulp pipeline
36 |     .pipe(rename(config.js.outputFile)) // Rename output from 'main.js' to 'bundle.js'
37 |     .pipe(sourceMaps.init({ loadMaps : true })) // Strip inline source maps
38 |     .pipe(sourceMaps.write(config.js.mapDir)) // Save source maps to their own directory
39 |     .pipe(gulp.dest(config.js.outputDir)) // Save 'bundle' to build/
40 |     .pipe(livereload()); // Reload browser if relevant
41 | 
42 | }
43 | 
44 | gulp.task('bundle', function () {
45 |   var bundler = browserify(config.js.src) // Pass browserify the entry point
46 |                   .transform(babelify, { presets : [ 'es2015' ] }); // Then, babelify, with ES2015 preset
47 | 
48 |   return bundle(bundler); // Chain other options -- sourcemaps, rename, etc.
49 | });
50 |  
51 | gulp.task('sass', function () {
52 |   return gulp.src(config.css.src)
53 |     .pipe(sass().on('error', sass.logError))
54 |     .pipe(gulp.dest(config.css.outputDir));
55 | });
56 |  
57 | gulp.task('sass:watch', function () {
58 |   gulp.watch('./sass/**/*.scss', ['sass']);
59 | });


--------------------------------------------------------------------------------
/img/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/demo.png


--------------------------------------------------------------------------------
/img/favicon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-144.png


--------------------------------------------------------------------------------
/img/favicon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-192.png


--------------------------------------------------------------------------------
/img/favicon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-48.png


--------------------------------------------------------------------------------
/img/favicon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-512.png


--------------------------------------------------------------------------------
/img/favicon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-72.png


--------------------------------------------------------------------------------
/img/favicon-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/favicon-96.png


--------------------------------------------------------------------------------
/img/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/icon.ico


--------------------------------------------------------------------------------
/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/csilva2810/webmplayer/474163a178506b1a5e624e9b007340afc9b86d57/img/icon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Web Music Player</title>
  7 |   
  8 |   <!-- google fonts -->
  9 |   <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
 10 |   <link type="text/css" rel="stylesheet" href="dist/css/main.css">
 11 |   
 12 |   <!-- favicon -->
 13 |   <!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
 14 |   <link rel="icon" href="img/favicon-48.png" sizes="48x48">
 15 |   <link rel="icon" href="img/favicon-72.png" sizes="72x72">
 16 |   <link rel="icon" href="img/favicon-96.png" sizes="96x96">
 17 |   <link rel="icon" href="img/favicon-144.png" sizes="144x144">
 18 |   <link rel="icon" href="img/favicon-192.png" sizes="192x192">
 19 |   <link rel="icon" href="img/favicon-512.png" sizes="512x512">
 20 | </head>
 21 | <body>
 22 | 
 23 |   <div class="container">
 24 | 
 25 |     <div class="card">
 26 | 
 27 |       <header class="card-header clearfix">
 28 |         
 29 |         <div class="left one-third-width logo">
 30 |           <i class="icon icon-headphones"></i>
 31 |           WebMPlayer
 32 |         </div>
 33 | 
 34 |         <div class="left one-third-width text-center">
 35 |           <small id="music-name" class="music-name"> -- </small>
 36 |         </div>
 37 |         
 38 |         <div class="left one-third-width text-right">
 39 |           
 40 |           <div class="dropdown-wrapper inline-block">
 41 |             <a href="#" class="btn btn-primary btn-header m-r-5 dropdown-toggle" data-dropdown="user-settings">
 42 |               <i class="icon icon-cog"></i>
 43 |             </a>
 44 |             <div id="user-settings" class="dropdown-menu user-settings">
 45 |               <ul class="color">
 46 |                 <li class="color-item p-5 text-center">
 47 |                   <a href="#" id="btn-red"    class="btn btn-circle btn-color bg-red"    data-theme-color="red"   ></a>
 48 |                   <a href="#" id="btn-pink"   class="btn btn-circle btn-color bg-pink"   data-theme-color="pink"  ></a>
 49 |                   <a href="#" id="btn-purple" class="btn btn-circle btn-color bg-purple" data-theme-color="purple"></a>
 50 |                   <a href="#" id="btn-blue"   class="btn btn-circle btn-color bg-blue"   data-theme-color="blue"  ></a>
 51 |                   <a href="#" id="btn-cyan"   class="btn btn-circle btn-color bg-cyan"   data-theme-color="cyan"  ></a>
 52 |                   <a href="#" id="btn-teal"   class="btn btn-circle btn-color bg-teal"   data-theme-color="teal"  ></a>
 53 |                   <a href="#" id="btn-green"  class="btn btn-circle btn-color bg-green"  data-theme-color="green" ></a>
 54 |                   <a href="#" id="btn-yellow" class="btn btn-circle btn-color bg-yellow" data-theme-color="yellow"></a>
 55 |                   <a href="#" id="btn-orange" class="btn btn-circle btn-color bg-orange" data-theme-color="orange"></a>
 56 |                 </li>
 57 |               </ul>
 58 |               <hr class="divider">
 59 |               <ul class="theme">
 60 |                   <li class="theme-item">
 61 |                       <a class="theme-item-btn" id="theme-light" href="#" data-theme-scheme="light">
 62 |                         <small>Light</small>
 63 |                       </a>
 64 |                   </li>
 65 |                   <li class="theme-item">
 66 |                       <a class="theme-item-btn" id="theme-dark" href="#" data-theme-scheme="dark">
 67 |                         <small>Dark</small>
 68 |                       </a>
 69 |                   </li>
 70 |               </ul>
 71 |             </div><!-- dropdown-menu -->
 72 |           </div><!-- dropdown-wrapper -->
 73 | 
 74 |           <a href="#" id="btn-upload" class="btn btn-primary btn-header" title="Adicionar Músicas">
 75 |             <i class="icon icon-music"></i>
 76 |           </a>
 77 |           <input type="file" id="file-element" accept="audio/mp3" multiple style="display:none;">
 78 | 
 79 |         </div><!-- right -->
 80 |         
 81 |       </header><!--card-header -->
 82 |       
 83 |       <hr class="divider">
 84 |       
 85 |       <section class="card-content">
 86 |         <div class="play-list-wrap">
 87 |           <ul class="play-list" id="play-list"></ul>
 88 |         </div>
 89 |       </section><!-- card-content -->
 90 |       
 91 |       <hr class="divider">
 92 |       
 93 |       <footer class="card-footer">
 94 |         
 95 |         <audio id="player" preload="auto">Seu browser não suporta reprodução de áudio.</audio>
 96 | 
 97 |         <div id="player-controls" class="text-center p-10">
 98 |           <button type="button" class="btn btn-circle m-r-5" id="repeat">
 99 |             <i class="icon icon-repeat"></i>
100 |           </button>
101 |           <button type="button" class="btn btn-circle m-r-5" id="prev">
102 |             <i class="icon icon-chevron-left"></i>
103 |           </button>
104 |           <div class="flip-container" id="flip-container" ontouchstart="this.classList.toggle('hover');">
105 |             <div class="flipper">
106 |               <div class="front">
107 |                 <button type="button" class="btn btn-circle btn-large" id="btn-play">
108 |                   <i class="icon icon-play"></i>
109 |                 </button>
110 |               </div>
111 |               <div class="back">
112 |                 <button type="button" class="btn btn-circle btn-large" id="btn-pause">
113 |                   <i class="icon icon-pause"></i>
114 |                 </button>
115 |               </div>
116 |             </div>
117 |           </div>
118 |           <button type="button" class="btn btn-circle m-l-5" id="next">
119 |             <i class="icon icon-chevron-right"></i>
120 |           </button>
121 |           <button type="button" class="btn btn-circle m-l-5" id="random">
122 |             <i class="icon icon-random"></i>
123 |           </button>
124 |         </div>
125 |           
126 |         <div class="text-center p-10">
127 |           <div id="loading-music" class="loading">Carregando...</div>
128 |         </div>
129 | 
130 |         <div class="text-center p-10 clearfix">
131 |           
132 |           <table class="table">
133 |             <tr>
134 |               <td class="text-right valign-middle">
135 |                 <label class="is-timer" id="time-count">00:00</label>
136 |               </td>
137 |               <td class="text-center valign-middle">
138 |                 <input type="range" class="range" min="0" max="100" id="timeline" value="0" step="any"> 
139 |               </td>
140 |               <td class="text-left valign-middle">
141 |                 <label class="is-timer" id="time">00:00</label>
142 |               </td>
143 |             </tr>
144 |           </table>
145 | 
146 |           <div class="dropdown-wrapper inline-block right">
147 |             <button type="button" class="btn-volume btn btn-circle btn-small dropdown-toggle" data-dropdown="volume-dropdown">
148 |               <i class="icon icon-volume-down"></i>
149 |             </button>
150 |             <ul class="dropdown-menu" id="volume-dropdown">
151 |               <li class="item p-5">
152 |                 <input type="range" class="range" min="0" max="10" id="volume" value="10">
153 |               </li>
154 |             </ul>
155 |           </div>
156 | 
157 |         </div>
158 | 
159 |       </footer><!-- card-footer -->
160 | 
161 |     </div><!-- card -->
162 | 
163 |   </div><!-- container -->
164 | 
165 |   <!--<script type="text/javascript" src="js/player.js"></script>-->
166 |   <!--<script type="text/javascript" src="js/main.js"></script>-->
167 |   <!--<script type="text/javascript" src="js/components/dropdown.js"></script>-->
168 |   <script type="text/javascript" src="dist/js/bundle.js"></script>
169 |   
170 | </body>
171 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webmplayer",
 3 |   "version": "1.0.0",
 4 |   "description": "Web Player built with HTML5, Javascript and CSS",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "browserify src/js/main.js --debug | exorcist dist/js/bundle.map.js > dist/js/bundle.js",
 9 |     "dev:watch": "watchify -vd src/js/main.js -o 'exorcist dist/js/bundle.js.map > dist/js/bundle.js'"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/csilva2810/webmplayer.git"
14 |   },
15 |   "keywords": [
16 |     "webplayer",
17 |     "player"
18 |   ],
19 |   "author": "Carlos Silva",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/csilva2810/webmplayer/issues"
23 |   },
24 |   "homepage": "https://github.com/csilva2810/webmplayer#readme",
25 |   "dependencies": {
26 |     "normalize.css": "^5.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "babel-preset-es2015": "^6.16.0",
30 |     "babelify": "^7.3.0",
31 |     "browserify": "^13.1.0",
32 |     "buffer": "^5.0.0",
33 |     "exorcist": "^0.4.0",
34 |     "gulp": "^3.9.1",
35 |     "gulp-livereload": "^3.8.1",
36 |     "gulp-rename": "^1.2.2",
37 |     "gulp-sass": "^2.3.2",
38 |     "gulp-sourcemaps": "^2.1.1",
39 |     "gulp-uglify": "^2.0.0",
40 |     "gulp-util": "^3.0.7",
41 |     "merge": "^1.2.0",
42 |     "vinyl-buffer": "^1.0.0",
43 |     "vinyl-source-stream": "^1.1.0",
44 |     "watchify": "^3.7.0"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/sass/abstracts/_mixins.scss:
--------------------------------------------------------------------------------
 1 | /// Themify mixin
 2 | /// @access private
 3 | /// @author Hugo Giraudel
 4 | /// @param {String} $property - Property to themify
 5 | /// @param {String} $key - Key color to use from theme
 6 | /// @param {Map} $themes [$themes] - Map of themes to use
 7 | @mixin themify($property, $key, $themes: $themes, $colors: $colors) {
 8 |   // Iterate over the themes
 9 |   @each $theme, $t in $themes {
10 |     // Create a selector (e.g. .theme-unicorn .media`)
11 |     .#{$theme} & {
12 |       // Output the declaration
13 |       #{$property}: map-get($t, $key);
14 |     }
15 |   }
16 |   
17 |   @each $color, $c in $colors {
18 |     // Create a selector (e.g. .theme-unicorn .media`)
19 |     .#{$color} & {
20 |       // Output the declaration
21 |       #{$property}: map-get($c, $key);
22 |     }
23 |   }
24 | }
25 | 
26 | /// Shorthand to themify color through `themify` mixin
27 | /// @access public
28 | /// @see {mixin} themify
29 | @mixin color($arguments...) {
30 |   @include themify('color', $arguments...);
31 | }
32 | 
33 | /// Shorthand to themify border-color through `themify` mixin
34 | /// @access public
35 | /// @see {mixin} themify
36 | @mixin border-color($arguments...) {
37 |   @include themify('border-color', $arguments...);
38 | }
39 | 
40 | /// Shorthand to themify background-color through `themify` mixin
41 | /// @access public
42 | /// @see {mixin} themify
43 | @mixin background-color($arguments...) {
44 |   @include themify('background-color', $arguments...);
45 | }
46 | 
47 | @mixin glow($arguments...) {
48 |   @include themify('box-shadow', $arguments...);
49 | }


--------------------------------------------------------------------------------
/sass/abstracts/_variables.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * TYPOGRAPH
  3 |  */
  4 | $mono-font-stack: ('Consolas', 'Courier New', 'Courier', 'Lucida Sans Typewriter', 'Lucida Typewriter', 'monaco', monospace);
  5 | 
  6 | /**
  7 |  * COLORS FOR PAGES AND ELEMENTS 
  8 |  */
  9 | $page-bg-color: #EAEDF1 !default;
 10 | $text-color: #757575 !default;
 11 | $border-color: #eeeeee !default;
 12 | $el-bg-color: #fafafa !default;
 13 | $el-bg-color-lighten: lighten($el-bg-color, 5%) !default;
 14 | $el-bg-color-darken: darken($el-bg-color, 5%) !default;
 15 | 
 16 | $dark-page-bg-color: #5A5D61 !default;
 17 | $dark-text-color: #eceff1 !default;
 18 | $dark-border-color: #444444 !default;
 19 | $dark-el-bg-color: #3A3D41 !default;
 20 | $dark-el-bg-color-lighten: lighten($dark-el-bg-color, 5%) !default;
 21 | $dark-el-bg-color-darken: darken($dark-el-bg-color, 5%) !default;
 22 | 
 23 | $btn-default-color: #eceff1 !default;
 24 | $btn-default-color-darken: darken($btn-default-color, 5%) !default;
 25 | 
 26 | /*
 27 |  * COLORS FOR USE IN THEMES
 28 |  */
 29 | $green: #66bb6a !default;
 30 | $green-lighten: lighten($green, 5%) !default;
 31 | $green-darken: darken($green, 5%) !default;
 32 | $green-pastel: lighten($green, 30%) !default;
 33 | 
 34 | $blue: #4fc3f7 !default;
 35 | $blue-lighten: lighten($blue, 5%) !default;
 36 | $blue-darken: darken($blue, 5%) !default;
 37 | $blue-pastel: lighten($blue, 30%) !default;
 38 | 
 39 | $red: #ff5555 !default;
 40 | $red-lighten: lighten($red, 5%) !default;
 41 | $red-darken: darken($red, 5%) !default;
 42 | $red-pastel: lighten($red, 30%) !default;
 43 | 
 44 | $pink: #f06292 !default;
 45 | $pink-lighten: lighten($pink, 5%) !default;
 46 | $pink-darken: darken($pink, 5%) !default;
 47 | $pink-pastel: lighten($pink, 30%) !default;
 48 | 
 49 | $purple: #ba68c8 !default;
 50 | $purple-lighten: lighten($purple, 5%) !default;
 51 | $purple-darken: darken($purple, 5%) !default;
 52 | $purple-pastel: lighten($purple, 30%) !default;
 53 | 
 54 | $cyan: #4dd0e1 !default;
 55 | $cyan-lighten: lighten($cyan, 5%) !default;
 56 | $cyan-darken: darken($cyan, 5%) !default;
 57 | $cyan-pastel: lighten($cyan, 30%) !default;
 58 | 
 59 | $teal: #00bfa5 !default;
 60 | $teal-lighten: lighten($teal, 5%) !default;
 61 | $teal-darken: darken($teal, 5%) !default;
 62 | $teal-pastel: lighten($teal, 55%) !default;
 63 | 
 64 | $yellow: #fbc02d !default;
 65 | $yellow-lighten: lighten($yellow, 5%) !default;
 66 | $yellow-darken: darken($yellow, 5%) !default;
 67 | $yellow-pastel: lighten($yellow, 30%) !default;
 68 | 
 69 | $orange: #ff7043 !default;
 70 | $orange-lighten: lighten($orange, 5%) !default;
 71 | $orange-darken: darken($orange, 5%) !default;
 72 | $orange-pastel: lighten($orange, 30%) !default;
 73 | 
 74 | $primary-color: $teal !default;
 75 | $primary-color-lighten: lighten($primary-color, 5%) !default;
 76 | $primary-color-darken: darken($primary-color, 5%) !default;
 77 | $primary-color-pastel: lighten($primary-color, 30%) !default;
 78 | 
 79 | $themes: (
 80 | 	'light': (
 81 | 		'bg-color': $page-bg-color,
 82 | 		'text-color': $text-color,
 83 | 		'border-color': $border-color,
 84 | 		'el-bg-color': $el-bg-color,
 85 | 		'el-bg-color-lighten': $el-bg-color-lighten,
 86 | 		'el-bg-color-darken': $el-bg-color-darken
 87 | 	),
 88 | 	'dark': (
 89 | 		'bg-color': $dark-page-bg-color,
 90 | 		'text-color': $dark-text-color,
 91 | 		'border-color': $dark-border-color,
 92 | 		'el-bg-color': $dark-el-bg-color,
 93 | 		'el-bg-color-lighten': $dark-el-bg-color-lighten,
 94 | 		'el-bg-color-darken': $dark-el-bg-color-darken
 95 | 	)
 96 | ) !default;
 97 | 
 98 | $colors: (
 99 |   'green': (
100 |     'primary': $green,
101 |     'lighten': $green-lighten,
102 |     'darken': $green-darken,
103 |     'glow': 0 0 5px $green,
104 |     'pastel': $green-pastel
105 |   ),
106 |   'blue': (
107 |     'primary': $blue,
108 |     'lighten': $blue-lighten,
109 |     'darken': $blue-darken,
110 |     'glow': 0 0 5px $blue,
111 |     'pastel': $blue-pastel
112 |   ),
113 |   'red': (
114 |     'primary': $red,
115 |     'lighten': $red-lighten,
116 |     'darken': $red-darken,
117 |     'glow': 0 0 5px $red,
118 |     'pastel': $red-pastel
119 |   ),
120 |   'pink': (
121 |     'primary': $pink,
122 |     'lighten': $pink-lighten,
123 |     'darken': $pink-darken,
124 |     'glow': 0 0 5px $pink,
125 |     'pastel': $pink-pastel
126 |   ),
127 |   'purple': (
128 |     'primary': $purple,
129 |     'lighten': $purple-lighten,
130 |     'darken': $purple-darken,
131 |     'glow': 0 0 5px $purple,
132 |     'pastel': $purple-pastel
133 |   ),
134 |   'cyan': (
135 |     'primary': $cyan,
136 |     'lighten': $cyan-lighten,
137 |     'darken': $cyan-darken,
138 |     'glow': 0 0 5px $cyan,
139 |     'pastel': $cyan-pastel
140 |   ),
141 |   'teal': (
142 |     'primary': $teal,
143 |     'lighten': $teal-lighten,
144 |     'darken': $teal-darken,
145 |     'glow': 0 0 5px $teal,
146 |     'pastel': $teal-pastel
147 |   ),
148 |   'yellow': (
149 |     'primary': $yellow,
150 |     'lighten': $yellow-lighten,
151 |     'darken': $yellow-darken,
152 |     'glow': 0 0 5px $yellow,
153 |     'pastel': $yellow-pastel
154 |   ),
155 |   'orange': (
156 |     'primary': $orange,
157 |     'lighten': $orange-lighten,
158 |     'darken': $orange-darken,
159 |     'glow': 0 0 5px $orange,
160 |     'pastel': $orange-pastel
161 |   )
162 | ) !default;


--------------------------------------------------------------------------------
/sass/base/_base.scss:
--------------------------------------------------------------------------------
 1 | html, 
 2 | body {
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     width: 100%;
 6 |     height: 100%;
 7 |     font-family: $font-stack;
 8 |     font-size: 100%;
 9 |     color: $text-color;
10 | }
11 | 
12 | body {
13 |     background-color: $page-bg-color;
14 |     background-image: url('https://source.unsplash.com/daily?music');
15 |     background-size: cover;
16 |     background-repeat: no-repeat;
17 |     
18 |     &.dark {
19 |         color: $dark-text-color;
20 |         background-color: $dark-page-bg-color;    
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/sass/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::before,
 3 | *::after {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | ::-webkit-scrollbar { 
 8 |   width: 9px;
 9 |   height: 9px;
10 | }
11 | 
12 | ::-webkit-scrollbar-track {
13 |   background-color: transparent;
14 | }
15 | 
16 | ::-webkit-scrollbar-thumb {
17 |   background-color: #ddd;
18 | }
19 | 
20 | ::-webkit-scrollbar-thumb:hover { 
21 |   background-color: #ccc;
22 | }
23 | 
24 | ::-webkit-scrollbar-thumb:active { 
25 |   background-color: #bbb; 
26 | }
27 | 
28 | .dark {
29 | 	::-webkit-scrollbar-thumb {
30 | 	  background-color: #555;
31 | 	}
32 | 
33 | 	::-webkit-scrollbar-thumb:hover { 
34 | 	  background-color: #444;
35 | 	}
36 | 
37 | 	::-webkit-scrollbar-thumb:active { 
38 | 	  background-color: #333; 
39 | 	}	
40 | }


--------------------------------------------------------------------------------
/sass/base/_typograph.scss:
--------------------------------------------------------------------------------
1 | $font-stack: ('Rubik', 'Helvetica', 'Segoe UI', sans-serif);
2 | 


--------------------------------------------------------------------------------
/sass/components/_buttons.scss:
--------------------------------------------------------------------------------
 1 | /*--- buttons ---*/
 2 | .btn {
 3 | 
 4 |   @include background-color('el-bg-color-darken');
 5 |   
 6 |   display: inline-block;
 7 |   padding: 8px 10px;
 8 |   border: 1px solid transparent;
 9 |   border-radius: 3px;
10 |   outline: none;
11 |   color: $text-color;
12 |   // background-color: $btn-default-color; 
13 |   text-align: center;
14 |   cursor: pointer;
15 |   
16 |   transition: .3s;
17 |   will-change: box-shadow, background-color;
18 |   
19 |   @extend .shadow-1;
20 |   
21 |   &:hover,
22 |   &:focus {
23 |     // background-color: $btn-default-color-darken;
24 |     @include background-color('el-bg-color-darken');
25 |     @extend .shadow-2;
26 |   }
27 |   
28 |   &:active {
29 |     @extend .shadow-3;
30 |   }
31 |   
32 |   &.btn-primary {
33 |     color: white;
34 |     @include background-color('primary');
35 | 
36 |     &:hover,
37 |     &:focus {
38 |       @include background-color('lighten');
39 |     }
40 |   }
41 | 
42 |   &.btn-circle {
43 |     padding: 0;
44 |     width: 50px;
45 |     height: 50px;
46 |     line-height: 50px;
47 |     border-radius: 50%;
48 | 
49 |     &.btn-large {
50 |       font-size: 1.25em;
51 |       width: 75px;
52 |       height: 75px;
53 |       line-height: 75px;
54 |     }
55 | 
56 |     &.btn-small {
57 |       font-size: 1em;
58 |       width: 35px;
59 |       height: 35px;
60 |       line-height: 35px;
61 |     }
62 |   }
63 | 
64 |   &.btn-circle:hover {
65 |     @include background-color('primary');
66 |     color: white;
67 |   }
68 | 
69 |   &.is-on {
70 |     // @include border-color('primary');
71 |     @include glow('glow');
72 |     @include color('primary');
73 |   }
74 | 
75 |   &.is-on:hover { 
76 |     color: white; 
77 |   }
78 | 
79 |   &.btn-color {
80 |     display: inline-block;
81 |     width: 24px;
82 |     height: 24px;
83 |     margin: 3px;
84 |     box-shadow: none;
85 | 
86 |     &:hover,
87 |     &:focus {
88 |       box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
89 |     }
90 |   }
91 |   
92 | }


--------------------------------------------------------------------------------
/sass/components/_card.scss:
--------------------------------------------------------------------------------
 1 | .card {
 2 | 
 3 |   @include background-color('el-bg-color');
 4 |   
 5 |   display: block;
 6 |   width: 100%;
 7 |   margin: 0 auto;
 8 |   border-radius: 3px;
 9 |   
10 |   transition: .2s;
11 |   will-change: box-shadow;
12 |   
13 |   @extend .shadow-2;
14 |   
15 |   &:hover {
16 |     @extend .shadow-4;
17 |   }
18 | 
19 |   & > .card-header {
20 |     display: block;
21 |     padding: 5px 10px;
22 |     border-radius: 3px 3px 0 0;
23 | 
24 |     .btn-header {
25 |       padding: 0;
26 |       width: 32px;
27 |       height: 32px;
28 |       line-height: 32px;
29 |     }
30 |   }
31 |   
32 |   & > .card-content {}
33 |   
34 |   & > .card-footer {}
35 |   
36 | }


--------------------------------------------------------------------------------
/sass/components/_divider.scss:
--------------------------------------------------------------------------------
 1 | .divider {
 2 |   @extend .no-margin;
 3 |   display: block;
 4 |   height: 1px;
 5 |   border: none;
 6 |   background-color: rgba(0, 0, 0, 0.04);
 7 |   border-bottom: 1px solid rgb(255, 255, 255);
 8 | }
 9 | 
10 | .dark {
11 |   .divider {
12 |     background-color: rgba(0, 0, 0, 0.3);
13 |     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
14 |   }  
15 | }


--------------------------------------------------------------------------------
/sass/components/_dropdown.scss:
--------------------------------------------------------------------------------
 1 | .dropdown-wrapper {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .dropdown-menu {
 6 |   z-index: 2;
 7 |   @extend .shadow-2;
 8 | 
 9 |   @include background-color('el-bg-color-lighten');
10 |   @include color('text-color');
11 |   
12 |   position: absolute;
13 |   right: 0;
14 |   top: 120%;
15 |   
16 |   display: block;
17 |   min-width: 50px;
18 |   padding: 0;
19 |   margin: 0;
20 |   list-style: none;
21 |   
22 |   // background-color: #ffffff;
23 |   border-radius: 3px;
24 |   
25 |   overflow: hidden;
26 |   opacity: 0;
27 |   visibility: hidden;
28 |   
29 |   transform-origin: top right;
30 |   transform: translateY(-10px);
31 |   
32 |   transition: 0.4s ease;
33 |   
34 |   &:hover {
35 |     @extend .shadow-3;
36 |   }
37 |   
38 |   &.is-active {
39 |     opacity: 1;
40 |     visibility: visible;
41 |     transform: translateY(0);
42 |   }
43 |   
44 |   &.dropdown-up {
45 |     top: -100%;
46 |     transform: translateY(10px);
47 |   }
48 |   
49 |   & > .item {
50 |     display: block;
51 |     width: 100%;
52 |     line-height: normal;
53 |     
54 |     &.divider {
55 |       display: block;
56 |       height: 1px;
57 |       margin: 0;
58 |       border: none;
59 |       background-color: #eee;
60 |       background: linear-gradient(to right, transparent, #eee, transparent);
61 |     }
62 |     
63 |     & > .link {
64 |       display: block;
65 |       width: 100%;
66 |       padding: 12px 8px;
67 |       color: #555;
68 |       text-decoration: none;
69 |       transition: .2s;
70 |       
71 |       &:hover,
72 |       &:focus {
73 |         background-color: #fafafa;
74 |       }
75 |       
76 |       &:first-child {
77 |         border-radius: 3px 3px 0 0;
78 |       }
79 |       
80 |       &:last-child {
81 |         border-radius: 0 0 3px 3px;
82 |       }
83 |       
84 |       & > .icon {
85 |         display: inline-block;
86 |         margin-right: 5px;
87 |         height: 22px;
88 |         line-height: 22px;
89 |         vertical-align: middle;
90 |       }
91 |     }
92 |   }
93 | }


--------------------------------------------------------------------------------
/sass/components/_flip-card.scss:
--------------------------------------------------------------------------------
 1 | .flip-container {
 2 |   perspective: 1000;
 3 | }
 4 | 
 5 | .flip-container, 
 6 | .front, 
 7 | .back {
 8 |   display: inline-block;
 9 |   width: 80px;
10 |   height: 75px;
11 |   position: relative;
12 |   top: 25px;
13 |   z-index: 1;
14 | }
15 | 
16 | .flipper {
17 |   position: relative;
18 |   transition: 0.6s;
19 |   transform-style: preserve-3d;
20 | }
21 | 
22 | .flip-container.is-flipped .flipper {
23 |   transform: rotateY(180deg);
24 | }
25 | 
26 | .front, 
27 | .back {
28 |   position: absolute;
29 |   top: 0;
30 |   left: 0;
31 |   backface-visibility: hidden;
32 | }
33 | 
34 | .front {
35 |   z-index: 2;
36 |   transform: rotateY(0deg);
37 | }
38 | 
39 | .back {
40 |   z-index: 1;
41 |   transform: rotateY(180deg);
42 | }


--------------------------------------------------------------------------------
/sass/components/_icons.scss:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'Glyphicons Halflings';
 3 | 
 4 |   src: url('../../fonts/glyphicons-halflings-regular.eot');
 5 |   src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
 6 |        url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), 
 7 |        url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
 8 |        url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 9 | }
10 | .icon {
11 |   position: relative;
12 |   top: 1px;
13 |   display: inline-block;
14 |   font-family: 'Glyphicons Halflings';
15 |   font-style: normal;
16 |   font-weight: normal;
17 |   line-height: 1;
18 | 
19 |   -webkit-font-smoothing: antialiased;
20 |   -moz-osx-font-smoothing: grayscale;
21 | }
22 | .icon-headphones:before {
23 |   content: "\e035";
24 | }
25 | .icon-cog:before {
26 |   content: "\e019";
27 | }
28 | .icon-music:before {
29 |   content: "\e002";
30 | }
31 | .icon-repeat:before {
32 |   content: "\e030";
33 | }
34 | .icon-chevron-left:before {
35 |   content: "\e079";
36 | }
37 | .icon-chevron-right:before {
38 |   content: "\e080";
39 | }
40 | .icon-play:before {
41 |   content: "\e072";
42 | }
43 | .icon-pause:before {
44 |   content: "\e073";
45 | }
46 | .icon-random:before {
47 |   content: "\e110";
48 | }
49 | .icon-volume-down:before {
50 |   content: "\e037";
51 | }
52 | .icon-volume-up:before {
53 |   content: "\e038";
54 | }


--------------------------------------------------------------------------------
/sass/components/_input-range.scss:
--------------------------------------------------------------------------------
 1 | .range {
 2 |   @include background-color('el-bg-color-darken');
 3 | 
 4 |   width: 100%;
 5 |   height: 6px;
 6 |   position: relative;
 7 |   top: -3px;
 8 |   border: none;
 9 |   outline: none;
10 |   border-radius: 100px;
11 |   box-shadow: inset 0 1px 1px 0 rgba(25, 25, 25, 0.1);
12 |   transition: .2s;
13 |   
14 |   -webkit-appearance: none;
15 |   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
16 |   
17 |   &:hover {
18 |     // @include background-color('el-bg-color-lighten');
19 |   }
20 |   
21 |   &::-moz-range-track,
22 |   &::-ms-fill-lower,
23 |   &::-ms-fill-upper,
24 |   &::-ms-track {
25 |     border: none;
26 |     color: transparent;
27 |     background-color: transparent;
28 |   }
29 |   
30 |   &::-ms-tooltip {
31 |     display: none;
32 |   }
33 |   
34 |   &::-webkit-slider-thumb {
35 | 
36 |     @include background-color('primary');
37 | 
38 |     -webkit-appearance: none;
39 |     width: 18px;
40 |     height: 18px;
41 |     border: none;
42 |     border-radius: 50%;
43 |     will-change: transform;
44 |     transition: .2s;
45 | 
46 |   }
47 |   
48 |   &:active::-webkit-slider-thumb {
49 |     transform: scale(1.2);
50 |     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
51 |   }
52 | 
53 |   &::-moz-range-thumb {
54 | 
55 |     @include background-color('primary');
56 | 
57 |     width: 18px;
58 |     height: 18px;
59 |     border: none;
60 |     border-radius: 50%;
61 |     will-change: transform;
62 |     transition: .3s;
63 | 
64 |   }
65 |   
66 |   &:active::-moz-range-thumb {
67 |     transform: scale(1.2);
68 |   }
69 | 
70 |   &::-ms-thumb {
71 | 
72 |     @include background-color('primary');
73 | 
74 |     width: 18px;
75 |     height: 18px;
76 |     border: none;
77 |     border-radius: 50%;
78 |     will-change: transform;
79 |     transition: .3s;
80 | 
81 |   }
82 |   
83 |   &:active::-ms-thumb {
84 |     transform: scale(1.2);
85 |   }
86 |   
87 | }


--------------------------------------------------------------------------------
/sass/components/_list.scss:
--------------------------------------------------------------------------------
 1 | .play-list {
 2 |   list-style: none;
 3 |   width: 100%;
 4 |   margin: 0 auto;
 5 |   padding: 0;
 6 | 
 7 |   & > .list-item {
 8 |     padding: 8px;
 9 |     transition: background-color .2s;
10 |     font-size: 0.8em;
11 | 
12 |     &:hover { 
13 |       background-color: rgba(0, 0, 0, 0.05); 
14 |     }
15 | 
16 |     &.is-active {
17 |       background-color: rgba(0, 0, 0, 0.05);
18 |     }
19 | 
20 |     & > .list-icon {
21 | 
22 |     }
23 | 
24 |     & > .btn {
25 |       padding: 0;
26 |       width: 30px;
27 |       height: 30px;
28 |       line-height: 30px;
29 |       margin-right: 10px; 
30 |     }
31 |   }
32 | }
33 | 
34 | .dark {
35 |   .play-list {
36 |     & > .lit-item {
37 |       &.is-active {
38 |         background-color: rgba(0, 0, 0, 0.1);
39 |       }
40 |     }
41 |   }
42 | }


--------------------------------------------------------------------------------
/sass/components/_loading.scss:
--------------------------------------------------------------------------------
 1 | .loading {
 2 |     margin: 4px;
 3 |     display: none;
 4 | }
 5 | 
 6 | .loading.show {
 7 |     display: block;
 8 | 
 9 |     -webkit-animation: blink 1s ease-in-out 0s infinite alternate;
10 |        -moz-animation: blink 1s ease-in-out 0s infinite alternate;
11 |             animation: blink 1s ease-in-out 0s infinite alternate;
12 | }


--------------------------------------------------------------------------------
/sass/components/_sound-waves.scss:
--------------------------------------------------------------------------------
 1 | .sound-wave { 
 2 |   display: inline-block;
 3 |   position: relative;
 4 |   margin-left: 10px;
 5 |   vertical-align: middle;
 6 | }
 7 | 
 8 | .sound-wave .bar {
 9 |   position: absolute;
10 |   height: 2px;
11 |   width: 6px;
12 | }
13 | 
14 | .sound-wave.is-active .bar {
15 |   -webkit-animation: sound 0.5s linear infinite alternate;
16 |      -moz-animation: sound 0.5s linear infinite alternate;
17 |           animation: sound 0.5s linear infinite alternate;
18 | }
19 | 
20 | .sound-wave .bar:nth-child(1) {
21 |   left: 0;
22 |   -webkit-animation-delay: 0s;
23 |      -moz-animation-delay: 0s;
24 |           animation-delay: 0s;
25 | }
26 | 
27 | .sound-wave .bar:nth-child(2) {
28 |   left: 8px;
29 |   -webkit-animation-delay: 0.5s;
30 |      -moz-animation-delay: 0.5s;
31 |           animation-delay: 0.5s;
32 | }
33 | 
34 | .sound-wave .bar:nth-child(3) {
35 |   left: 16px;
36 |   -webkit-animation-delay: 0.75s;
37 |      -moz-animation-delay: 0.75s;
38 |           animation-delay: 0.75s;
39 | }
40 | 
41 | @-webkit-keyframes sound {
42 |   0% {
43 |     height: 4px;
44 |     top: 0;
45 |     background: #66CCFF;
46 |   }
47 |   100% {
48 |     height: 10px;
49 |     top: -6px;
50 |     background: #CC99FF;
51 |   }
52 | }
53 | 
54 | @keyframes sound {
55 |   0% {
56 |     height: 2px;
57 |     top: 0;
58 |     background: #66CCFF;
59 |   }
60 |   100% {
61 |     height: 10px;
62 |     top: -8px;
63 |     background: #CC99FF;
64 |   }
65 | }


--------------------------------------------------------------------------------
/sass/components/_table.scss:
--------------------------------------------------------------------------------
 1 | .table {
 2 |   width: 100%;
 3 |   border: none;
 4 |   background-color: transparent;
 5 |   border-collapse: collapse;
 6 | }
 7 | 
 8 | .table td {
 9 |   padding: 4px;
10 | }


--------------------------------------------------------------------------------
/sass/layouts/_player.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   position: fixed;
 3 |   top: 8%;
 4 |   right: 0;
 5 |   bottom: 0;
 6 |   left: 0;
 7 |   margin: auto;
 8 |   display: block;
 9 |   width: 80%;
10 |   height: auto;
11 | }
12 | 
13 | .logo {
14 |   font-size: 1.5em;
15 |   @include color('primary');
16 | }
17 | 
18 | .music-name {
19 |   @include background-color('el-bg-color-darken');
20 | 
21 |   display: block;
22 |   padding: 8px;
23 |   margin-top: 3px;
24 |   border-radius: 3px;
25 |   overflow: hidden;
26 |   white-space: nowrap;
27 |   text-overflow: ellipsis;
28 |   // background-color: rgba(0, 0, 0, 0.04);
29 |   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
30 | }
31 | 
32 | .play-list-wrap {
33 |   width: 100%;
34 |   height: 200px;
35 |   max-height: 200px;
36 |   overflow-y: auto;
37 | }
38 | 
39 | .player-wrap {
40 |   display: block;
41 |   width: 100%;
42 | }


--------------------------------------------------------------------------------
/sass/layouts/_user-settings.scss:
--------------------------------------------------------------------------------
 1 | .dropdown-menu.user-settings {
 2 |   width: 120px;
 3 | }
 4 | 
 5 | .theme,
 6 | .color {
 7 |   display: block;
 8 |   width: 100%;
 9 |   padding: 0;
10 |   margin: 0;
11 |   list-style: none;
12 | }
13 | 
14 | .theme {
15 |    
16 |   .theme-item-btn {
17 |     
18 |     display: block;
19 |     width: 100%;
20 |     height: 40px;
21 |     line-height: 40px;
22 |     text-align: center;
23 |     text-decoration: none;
24 |     color: inherit;
25 |     cursor: pointer;
26 |     transition: .3s;
27 |     
28 |     &:hover {
29 |       background: rgba(0, 0, 0, 0.05);
30 |     }
31 |     
32 |   }
33 |   
34 | }
35 | 
36 | .color {
37 |   
38 |   & > .color-item {
39 |     margin: 0;
40 |   }
41 |   
42 | }


--------------------------------------------------------------------------------
/sass/main.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | /* 
 4 | IMPORT ORDER
 5 | 	1 - abstracts/
 6 | 	2 - vendors/
 7 | 	3 - utils/
 8 | 	4 - base/
 9 | 	5 - layout/
10 | 	6 - components/
11 | 	7 - pages/
12 | 	8 - themes/
13 | */
14 | 
15 | @import 
16 | 	'abstracts/variables.scss',
17 | 	'abstracts/mixins.scss';
18 | 
19 | @import 
20 | 	'vendors/normalize.scss';
21 | 
22 | @import 
23 | 	'utils/animations.scss',
24 | 	'utils/colors.scss',
25 | 	'utils/helpers.scss',
26 | 	'utils/shadows.scss';
27 | 
28 | @import
29 | 	'base/typograph.scss',
30 | 	'base/reset.scss',
31 | 	'base/base.scss';
32 | 	
33 | @import
34 | 	'layouts/player.scss',
35 | 	'layouts/user-settings.scss';
36 | 
37 | @import 
38 | 	'components/buttons.scss',
39 | 	'components/card.scss',
40 | 	'components/dropdown.scss',
41 | 	'components/flip-card.scss',
42 | 	'components/icons.scss',
43 | 	'components/input-range.scss',
44 | 	'components/list.scss',
45 | 	'components/loading.scss',
46 | 	'components/sound-waves.scss',
47 | 	'components/divider.scss',
48 | 	'components/table.scss';


--------------------------------------------------------------------------------
/sass/utils/_animations.scss:
--------------------------------------------------------------------------------
 1 | @-webkit-keyframes blink {
 2 |   0%   { opacity: 0; }
 3 |   50%  { opacity: 1; }
 4 |   100% { opacity: 0; }
 5 | }
 6 | 
 7 | @keyframes blink {
 8 |   0%   { opacity: 0; }
 9 |   50%  { opacity: 1; }
10 |   100% { opacity: 0; }
11 | }


--------------------------------------------------------------------------------
/sass/utils/_colors.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | Generating classes to apply colors to elements
 3 | E.G: .bg-blue, .text-blue
 4 | */
 5 | @each $color, $c in $colors {
 6 | 	
 7 | 	.bg-#{$color} {
 8 | 		background-color: map-get($c, 'primary') !important;
 9 | 	}
10 | 	.text-#{$color} {
11 | 		color: map-get($c, 'primary') !important;
12 | 	}
13 | 	
14 | 	.bg-#{$color}-lighten {
15 | 		background-color: map-get($c, 'lighten') !important;
16 | 	}
17 | 	.text-#{$color}-lighten {
18 | 		color: map-get($c, 'lighten') !important;
19 | 	}
20 | 	
21 | 	.bg-#{$color}-darken {
22 | 		background-color: map-get($c, 'darken') !important;
23 | 	}
24 | 	.text-#{$color}-darken {
25 | 		color: map-get($c, 'darken') !important;
26 | 	}
27 | 	
28 | }


--------------------------------------------------------------------------------
/sass/utils/_helpers.scss:
--------------------------------------------------------------------------------
  1 | .right {
  2 |   float: right !important;
  3 | }
  4 | 
  5 | .left {
  6 |   float: left !important;
  7 | }
  8 | 
  9 | .clearfix::after {
 10 |   content: '';
 11 |   display: table;
 12 |   clear: both !important;
 13 | }
 14 | 
 15 | .inline {
 16 |   display: inline !important;
 17 | }
 18 | 
 19 | .inline-block {
 20 |   display: inline-block !important;
 21 | }
 22 | 
 23 | .block {
 24 |   display: block !important;
 25 | }
 26 | 
 27 | .half-width {
 28 |   width: 50% !important;
 29 | }
 30 | 
 31 | .one-third-width {
 32 |   width: 33.3333% !important;
 33 | }
 34 | 
 35 | .text-right {
 36 |   text-align: right !important;
 37 | }
 38 | 
 39 | .text-center {
 40 |   text-align: center !important;
 41 | }
 42 | 
 43 | .text-left {
 44 |   text-align: left !important;
 45 | }
 46 | 
 47 | .text-justify {
 48 |   text-align: justify !important;
 49 | }
 50 | 
 51 | .no-margin {
 52 |   margin: 0 !important;
 53 | }
 54 | 
 55 | .no-padding {
 56 |   padding: 0 !important;
 57 | }
 58 | 
 59 | .valign-middle {
 60 |   vertical-align: middle !important;
 61 | }
 62 | 
 63 | .valign-top {
 64 |   vertical-align: top !important;
 65 | }
 66 | 
 67 | .valign-bottom {
 68 |   vertical-align: bottom !important;
 69 | }
 70 | 
 71 | .valign-base {
 72 |   vertical-align: baseline !important;
 73 | }
 74 | 
 75 | .m-0 {
 76 |   margin: 0!important;
 77 | }
 78 | 
 79 | .m-t-0 {
 80 |   margin-top: 0!important;
 81 | }
 82 | 
 83 | .m-b-0 {
 84 |   margin-bottom: 0!important;
 85 | }
 86 | 
 87 | .m-l-0 {
 88 |   margin-left: 0!important;
 89 | }
 90 | 
 91 | .m-r-0 {
 92 |   margin-right: 0!important;
 93 | }
 94 | 
 95 | .m-5 {
 96 |   margin: 5px!important;
 97 | }
 98 | 
 99 | .m-t-5 {
100 |   margin-top: 5px!important;
101 | }
102 | 
103 | .m-b-5 {
104 |   margin-bottom: 5px!important;
105 | }
106 | 
107 | .m-l-5 {
108 |   margin-left: 5px!important;
109 | }
110 | 
111 | .m-r-5 {
112 |   margin-right: 5px!important;
113 | }
114 | 
115 | .m-10 {
116 |   margin: 10px!important;
117 | }
118 | 
119 | .m-t-10 {
120 |   margin-top: 10px!important;
121 | }
122 | 
123 | .m-b-10 {
124 |   margin-bottom: 10px!important;
125 | }
126 | 
127 | .m-l-10 {
128 |   margin-left: 10px!important;
129 | }
130 | 
131 | .m-r-10 {
132 |   margin-right: 10px!important;
133 | }
134 | 
135 | .m-15 {
136 |   margin: 15px!important;
137 | }
138 | 
139 | .m-t-15 {
140 |   margin-top: 15px!important;
141 | }
142 | 
143 | .m-b-15 {
144 |   margin-bottom: 15px!important;
145 | }
146 | 
147 | .m-l-15 {
148 |   margin-left: 15px!important;
149 | }
150 | 
151 | .m-r-15 {
152 |   margin-right: 15px!important;
153 | }
154 | 
155 | .m-20 {
156 |   margin: 20px!important;
157 | }
158 | 
159 | .m-t-20 {
160 |   margin-top: 20px!important;
161 | }
162 | 
163 | .m-b-20 {
164 |   margin-bottom: 20px!important;
165 | }
166 | 
167 | .m-l-20 {
168 |   margin-left: 20px!important;
169 | }
170 | 
171 | .m-r-20 {
172 |   margin-right: 20px!important;
173 | }
174 | 
175 | .m-25 {
176 |   margin: 25px!important;
177 | }
178 | 
179 | .m-t-25 {
180 |   margin-top: 25px!important;
181 | }
182 | 
183 | .m-b-25 {
184 |   margin-bottom: 25px!important;
185 | }
186 | 
187 | .m-l-25 {
188 |   margin-left: 25px!important;
189 | }
190 | 
191 | .m-r-25 {
192 |   margin-right: 25px!important;
193 | }
194 | 
195 | .m-30 {
196 |   margin: 30px!important;
197 | }
198 | 
199 | .m-t-30 {
200 |   margin-top: 30px!important;
201 | }
202 | 
203 | .m-b-30 {
204 |   margin-bottom: 30px!important;
205 | }
206 | 
207 | .m-l-30 {
208 |   margin-left: 30px!important;
209 | }
210 | 
211 | .m-r-30 {
212 |   margin-right: 30px!important;
213 | }
214 | 
215 | .p-0 {
216 |   padding: 0!important;
217 | }
218 | 
219 | .p-t-0 {
220 |   padding-top: 0!important;
221 | }
222 | 
223 | .p-b-0 {
224 |   padding-bottom: 0!important;
225 | }
226 | 
227 | .p-l-0 {
228 |   padding-left: 0!important;
229 | }
230 | 
231 | .p-r-0 {
232 |   padding-right: 0!important;
233 | }
234 | 
235 | .p-5 {
236 |   padding: 5px!important;
237 | }
238 | 
239 | .p-t-5 {
240 |   padding-top: 5px!important;
241 | }
242 | 
243 | .p-b-5 {
244 |   padding-bottom: 5px!important;
245 | }
246 | 
247 | .p-l-5 {
248 |   padding-left: 5px!important;
249 | }
250 | 
251 | .p-r-5 {
252 |   padding-right: 5px!important;
253 | }
254 | 
255 | .p-10 {
256 |   padding: 10px!important;
257 | }
258 | 
259 | .p-t-10 {
260 |   padding-top: 10px!important;
261 | }
262 | 
263 | .p-b-10 {
264 |   padding-bottom: 10px!important;
265 | }
266 | 
267 | .p-l-10 {
268 |   padding-left: 10px!important;
269 | }
270 | 
271 | .p-r-10 {
272 |   padding-right: 10px!important;
273 | }
274 | 
275 | .p-15 {
276 |   padding: 15px!important;
277 | }
278 | 
279 | .p-t-15 {
280 |   padding-top: 15px!important;
281 | }
282 | 
283 | .p-b-15 {
284 |   padding-bottom: 15px!important;
285 | }
286 | 
287 | .p-l-15 {
288 |   padding-left: 15px!important;
289 | }
290 | 
291 | .p-r-15 {
292 |   padding-right: 15px!important;
293 | }
294 | 
295 | .p-20 {
296 |   padding: 20px!important;
297 | }
298 | 
299 | .p-t-20 {
300 |   padding-top: 20px!important;
301 | }
302 | 
303 | .p-b-20 {
304 |   padding-bottom: 20px!important;
305 | }
306 | 
307 | .p-l-20 {
308 |   padding-left: 20px!important;
309 | }
310 | 
311 | .p-r-20 {
312 |   padding-right: 20px!important;
313 | }
314 | 
315 | .p-25 {
316 |   padding: 25px!important;
317 | }
318 | 
319 | .p-t-25 {
320 |   padding-top: 25px!important;
321 | }
322 | 
323 | .p-b-25 {
324 |   padding-bottom: 25px!important;
325 | }
326 | 
327 | .p-l-25 {
328 |   padding-left: 25px!important;
329 | }
330 | 
331 | .p-r-25 {
332 |   padding-right: 25px!important;
333 | }
334 | 
335 | .p-30 {
336 |   padding: 30px!important;
337 | }
338 | 
339 | .p-t-30 {
340 |   padding-top: 30px!important;
341 | }
342 | 
343 | .p-b-30 {
344 |   padding-bottom: 30px!important;
345 | }
346 | 
347 | .p-l-30 {
348 |   padding-left: 30px!important;
349 | }
350 | 
351 | .p-r-30 {
352 |   padding-right: 30px!important;
353 | }
354 | 
355 | .f-8 {
356 |   font-size: 8px!important;
357 | }
358 | 
359 | .f-9 {
360 |   font-size: 9px!important;
361 | }
362 | 
363 | .f-10 {
364 |   font-size: 10px!important;
365 | }
366 | 
367 | .f-11 {
368 |   font-size: 11px!important;
369 | }
370 | 
371 | .f-12 {
372 |   font-size: 12px!important;
373 | }
374 | 
375 | .f-13 {
376 |   font-size: 13px!important;
377 | }
378 | 
379 | .f-14 {
380 |   font-size: 14px!important;
381 | }
382 | 
383 | .f-15 {
384 |   font-size: 15px!important;
385 | }
386 | 
387 | .f-16 {
388 |   font-size: 16px!important;
389 | }
390 | 
391 | .f-17 {
392 |   font-size: 17px!important;
393 | }
394 | 
395 | .f-18 {
396 |   font-size: 18px!important;
397 | }
398 | 
399 | .f-19 {
400 |   font-size: 19px!important;
401 | }
402 | 
403 | .f-20 {
404 |   font-size: 20px!important;
405 | }
406 | 
407 | .f-300 {
408 |   font-weight: 300!important;
409 | }
410 | 
411 | .f-400 {
412 |   font-weight: 400!important;
413 | }
414 | 
415 | .f-500 {
416 |   font-weight: 500!important;
417 | }
418 | 
419 | .f-700 {
420 |   font-weight: 700!important;
421 | }
422 | 
423 | .close,body {
424 |   font-weight: 400
425 | }
426 | 
427 | .p-relative {
428 |   position: relative!important;
429 | }
430 | 
431 | .p-absolute {
432 |   position: absolute!important;
433 | }
434 | 
435 | .p-fixed {
436 |   position: fixed!important;
437 | }
438 | 
439 | .p-static {
440 |   position: static!important;
441 | }
442 | 
443 | #main,.h-inner,.hi-trigger,body {
444 |   position: relative
445 | }
446 | 
447 | .o-hidden {
448 |   overflow: hidden!important;
449 | }
450 | 
451 | .o-visible {
452 |   overflow: visible!important;
453 | }
454 | 
455 | .no-shadow {
456 |   box-shadow: none !important;
457 | }
458 | 
459 | .is-timer {
460 |   font-family: $mono-font-stack;
461 | }


--------------------------------------------------------------------------------
/sass/utils/_shadows.scss:
--------------------------------------------------------------------------------
 1 | .shadow-1 {
 2 |   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075),
 3 |               0 1px 3px 0 rgba(0, 0, 0, 0.1);
 4 | }
 5 | .shadow-2 {
 6 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.075),
 7 |               0 3px 4px 0 rgba(0, 0, 0, 0.1);
 8 | }
 9 | .shadow-3 {
10 |   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.075),
11 |               0 3px 12px 0 rgba(0, 0, 0, 0.1);
12 | }
13 | .shadow-4 {
14 |   box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.075),
15 |               0 4px 20px 0 rgba(0, 0, 0, 0.1);
16 | }


--------------------------------------------------------------------------------
/sass/vendors/_normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Change the default font family in all browsers (opinionated).
  5 |  * 2. Correct the line height in all browsers.
  6 |  * 3. Prevent adjustments of font size after orientation changes in
  7 |  *    IE on Windows Phone and in iOS.
  8 |  */
  9 | 
 10 | /* Document
 11 |    ========================================================================== */
 12 | 
 13 | html {
 14 |   font-family: sans-serif; /* 1 */
 15 |   line-height: 1.15; /* 2 */
 16 |   -ms-text-size-adjust: 100%; /* 3 */
 17 |   -webkit-text-size-adjust: 100%; /* 3 */
 18 | }
 19 | 
 20 | /* Sections
 21 |    ========================================================================== */
 22 | 
 23 | /**
 24 |  * Remove the margin in all browsers (opinionated).
 25 |  */
 26 | 
 27 | body {
 28 |   margin: 0;
 29 | }
 30 | 
 31 | /**
 32 |  * Add the correct display in IE 9-.
 33 |  */
 34 | 
 35 | article,
 36 | aside,
 37 | footer,
 38 | header,
 39 | nav,
 40 | section {
 41 |   display: block;
 42 | }
 43 | 
 44 | /**
 45 |  * Correct the font size and margin on `h1` elements within `section` and
 46 |  * `article` contexts in Chrome, Firefox, and Safari.
 47 |  */
 48 | 
 49 | h1 {
 50 |   font-size: 2em;
 51 |   margin: 0.67em 0;
 52 | }
 53 | 
 54 | /* Grouping content
 55 |    ========================================================================== */
 56 | 
 57 | /**
 58 |  * Add the correct display in IE 9-.
 59 |  * 1. Add the correct display in IE.
 60 |  */
 61 | 
 62 | figcaption,
 63 | figure,
 64 | main { /* 1 */
 65 |   display: block;
 66 | }
 67 | 
 68 | /**
 69 |  * Add the correct margin in IE 8.
 70 |  */
 71 | 
 72 | figure {
 73 |   margin: 1em 40px;
 74 | }
 75 | 
 76 | /**
 77 |  * 1. Add the correct box sizing in Firefox.
 78 |  * 2. Show the overflow in Edge and IE.
 79 |  */
 80 | 
 81 | hr {
 82 |   box-sizing: content-box; /* 1 */
 83 |   height: 0; /* 1 */
 84 |   overflow: visible; /* 2 */
 85 | }
 86 | 
 87 | /**
 88 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 89 |  * 2. Correct the odd `em` font sizing in all browsers.
 90 |  */
 91 | 
 92 | pre {
 93 |   font-family: monospace, monospace; /* 1 */
 94 |   font-size: 1em; /* 2 */
 95 | }
 96 | 
 97 | /* Text-level semantics
 98 |    ========================================================================== */
 99 | 
100 | /**
101 |  * 1. Remove the gray background on active links in IE 10.
102 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
103 |  */
104 | 
105 | a {
106 |   background-color: transparent; /* 1 */
107 |   -webkit-text-decoration-skip: objects; /* 2 */
108 | }
109 | 
110 | /**
111 |  * Remove the outline on focused links when they are also active or hovered
112 |  * in all browsers (opinionated).
113 |  */
114 | 
115 | a:active,
116 | a:hover {
117 |   outline-width: 0;
118 | }
119 | 
120 | /**
121 |  * 1. Remove the bottom border in Firefox 39-.
122 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
123 |  */
124 | 
125 | abbr[title] {
126 |   border-bottom: none; /* 1 */
127 |   text-decoration: underline; /* 2 */
128 |   text-decoration: underline dotted; /* 2 */
129 | }
130 | 
131 | /**
132 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
133 |  */
134 | 
135 | b,
136 | strong {
137 |   font-weight: inherit;
138 | }
139 | 
140 | /**
141 |  * Add the correct font weight in Chrome, Edge, and Safari.
142 |  */
143 | 
144 | b,
145 | strong {
146 |   font-weight: bolder;
147 | }
148 | 
149 | /**
150 |  * 1. Correct the inheritance and scaling of font size in all browsers.
151 |  * 2. Correct the odd `em` font sizing in all browsers.
152 |  */
153 | 
154 | code,
155 | kbd,
156 | samp {
157 |   font-family: monospace, monospace; /* 1 */
158 |   font-size: 1em; /* 2 */
159 | }
160 | 
161 | /**
162 |  * Add the correct font style in Android 4.3-.
163 |  */
164 | 
165 | dfn {
166 |   font-style: italic;
167 | }
168 | 
169 | /**
170 |  * Add the correct background and color in IE 9-.
171 |  */
172 | 
173 | mark {
174 |   background-color: #ff0;
175 |   color: #000;
176 | }
177 | 
178 | /**
179 |  * Add the correct font size in all browsers.
180 |  */
181 | 
182 | small {
183 |   font-size: 80%;
184 | }
185 | 
186 | /**
187 |  * Prevent `sub` and `sup` elements from affecting the line height in
188 |  * all browsers.
189 |  */
190 | 
191 | sub,
192 | sup {
193 |   font-size: 75%;
194 |   line-height: 0;
195 |   position: relative;
196 |   vertical-align: baseline;
197 | }
198 | 
199 | sub {
200 |   bottom: -0.25em;
201 | }
202 | 
203 | sup {
204 |   top: -0.5em;
205 | }
206 | 
207 | /* Embedded content
208 |    ========================================================================== */
209 | 
210 | /**
211 |  * Add the correct display in IE 9-.
212 |  */
213 | 
214 | audio,
215 | video {
216 |   display: inline-block;
217 | }
218 | 
219 | /**
220 |  * Add the correct display in iOS 4-7.
221 |  */
222 | 
223 | audio:not([controls]) {
224 |   display: none;
225 |   height: 0;
226 | }
227 | 
228 | /**
229 |  * Remove the border on images inside links in IE 10-.
230 |  */
231 | 
232 | img {
233 |   border-style: none;
234 | }
235 | 
236 | /**
237 |  * Hide the overflow in IE.
238 |  */
239 | 
240 | svg:not(:root) {
241 |   overflow: hidden;
242 | }
243 | 
244 | /* Forms
245 |    ========================================================================== */
246 | 
247 | /**
248 |  * 1. Change the font styles in all browsers (opinionated).
249 |  * 2. Remove the margin in Firefox and Safari.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   font-family: sans-serif; /* 1 */
258 |   font-size: 100%; /* 1 */
259 |   line-height: 1.15; /* 1 */
260 |   margin: 0; /* 2 */
261 | }
262 | 
263 | /**
264 |  * Show the overflow in IE.
265 |  * 1. Show the overflow in Edge.
266 |  */
267 | 
268 | button,
269 | input { /* 1 */
270 |   overflow: visible;
271 | }
272 | 
273 | /**
274 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
275 |  * 1. Remove the inheritance of text transform in Firefox.
276 |  */
277 | 
278 | button,
279 | select { /* 1 */
280 |   text-transform: none;
281 | }
282 | 
283 | /**
284 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
285 |  *    controls in Android 4.
286 |  * 2. Correct the inability to style clickable types in iOS and Safari.
287 |  */
288 | 
289 | button,
290 | html [type="button"], /* 1 */
291 | [type="reset"],
292 | [type="submit"] {
293 |   -webkit-appearance: button; /* 2 */
294 | }
295 | 
296 | /**
297 |  * Remove the inner border and padding in Firefox.
298 |  */
299 | 
300 | button::-moz-focus-inner,
301 | [type="button"]::-moz-focus-inner,
302 | [type="reset"]::-moz-focus-inner,
303 | [type="submit"]::-moz-focus-inner {
304 |   border-style: none;
305 |   padding: 0;
306 | }
307 | 
308 | /**
309 |  * Restore the focus styles unset by the previous rule.
310 |  */
311 | 
312 | button:-moz-focusring,
313 | [type="button"]:-moz-focusring,
314 | [type="reset"]:-moz-focusring,
315 | [type="submit"]:-moz-focusring {
316 |   outline: 1px dotted ButtonText;
317 | }
318 | 
319 | /**
320 |  * Change the border, margin, and padding in all browsers (opinionated).
321 |  */
322 | 
323 | fieldset {
324 |   border: 1px solid #c0c0c0;
325 |   margin: 0 2px;
326 |   padding: 0.35em 0.625em 0.75em;
327 | }
328 | 
329 | /**
330 |  * 1. Correct the text wrapping in Edge and IE.
331 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
332 |  * 3. Remove the padding so developers are not caught out when they zero out
333 |  *    `fieldset` elements in all browsers.
334 |  */
335 | 
336 | legend {
337 |   box-sizing: border-box; /* 1 */
338 |   color: inherit; /* 2 */
339 |   display: table; /* 1 */
340 |   max-width: 100%; /* 1 */
341 |   padding: 0; /* 3 */
342 |   white-space: normal; /* 1 */
343 | }
344 | 
345 | /**
346 |  * 1. Add the correct display in IE 9-.
347 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
348 |  */
349 | 
350 | progress {
351 |   display: inline-block; /* 1 */
352 |   vertical-align: baseline; /* 2 */
353 | }
354 | 
355 | /**
356 |  * Remove the default vertical scrollbar in IE.
357 |  */
358 | 
359 | textarea {
360 |   overflow: auto;
361 | }
362 | 
363 | /**
364 |  * 1. Add the correct box sizing in IE 10-.
365 |  * 2. Remove the padding in IE 10-.
366 |  */
367 | 
368 | [type="checkbox"],
369 | [type="radio"] {
370 |   box-sizing: border-box; /* 1 */
371 |   padding: 0; /* 2 */
372 | }
373 | 
374 | /**
375 |  * Correct the cursor style of increment and decrement buttons in Chrome.
376 |  */
377 | 
378 | [type="number"]::-webkit-inner-spin-button,
379 | [type="number"]::-webkit-outer-spin-button {
380 |   height: auto;
381 | }
382 | 
383 | /**
384 |  * 1. Correct the odd appearance in Chrome and Safari.
385 |  * 2. Correct the outline style in Safari.
386 |  */
387 | 
388 | [type="search"] {
389 |   -webkit-appearance: textfield; /* 1 */
390 |   outline-offset: -2px; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
395 |  */
396 | 
397 | [type="search"]::-webkit-search-cancel-button,
398 | [type="search"]::-webkit-search-decoration {
399 |   -webkit-appearance: none;
400 | }
401 | 
402 | /**
403 |  * 1. Correct the inability to style clickable types in iOS and Safari.
404 |  * 2. Change font properties to `inherit` in Safari.
405 |  */
406 | 
407 | ::-webkit-file-upload-button {
408 |   -webkit-appearance: button; /* 1 */
409 |   font: inherit; /* 2 */
410 | }
411 | 
412 | /* Interactive
413 |    ========================================================================== */
414 | 
415 | /*
416 |  * Add the correct display in IE 9-.
417 |  * 1. Add the correct display in Edge, IE, and Firefox.
418 |  */
419 | 
420 | details, /* 1 */
421 | menu {
422 |   display: block;
423 | }
424 | 
425 | /*
426 |  * Add the correct display in all browsers.
427 |  */
428 | 
429 | summary {
430 |   display: list-item;
431 | }
432 | 
433 | /* Scripting
434 |    ========================================================================== */
435 | 
436 | /**
437 |  * Add the correct display in IE 9-.
438 |  */
439 | 
440 | canvas {
441 |   display: inline-block;
442 | }
443 | 
444 | /**
445 |  * Add the correct display in IE.
446 |  */
447 | 
448 | template {
449 |   display: none;
450 | }
451 | 
452 | /* Hidden
453 |    ========================================================================== */
454 | 
455 | /**
456 |  * Add the correct display in IE 10-.
457 |  */
458 | 
459 | [hidden] {
460 |   display: none;
461 | }
462 | 


--------------------------------------------------------------------------------
/src/js/components/dropdown.js:
--------------------------------------------------------------------------------
 1 | var toggles = document.querySelectorAll('.dropdown-toggle');
 2 | var dropdowns = [];
 3 | 
 4 | var hasClass = function (el, cl) {
 5 | 	return (el.classList.toString().indexOf(cl) > -1) ? true : false;
 6 | }
 7 | 
 8 | if (toggles) {
 9 | 	toggles.forEach(function (toggle) {
10 | 		toggle.addEventListener('click', function (e) {
11 | 
12 | 			e.stopPropagation();
13 | 			
14 | 			var target = this.getAttribute('data-dropdown');
15 | 			if (!target) return false;
16 | 
17 | 			var dropdown = document.querySelector('#' + target);
18 | 			if (!dropdown) return false;
19 | 
20 | 			if (hasClass(dropdown, 'is-active')) {
21 | 				dropdown.classList.remove('is-active');
22 | 			} else {
23 | 				dropdown.classList.add('is-active');
24 | 				dropdowns.push(dropdown);
25 | 				dropdown.addEventListener('click', function (e) {
26 | 					e.stopPropagation();
27 | 				}, false);
28 | 			}
29 | 
30 | 		}, false);
31 | 	});
32 | 
33 | 	document.body.addEventListener('click', function () {
34 | 
35 | 		dropdowns.forEach(function (dropdown) {
36 | 			if (hasClass(dropdown, 'is-active')) {
37 | 				dropdown.classList.remove('is-active');
38 | 				dropdowns.splice(dropdowns.indexOf(dropdown), 1);
39 | 			}
40 | 		});
41 | 
42 | 	}, false);
43 | 
44 | }


--------------------------------------------------------------------------------
/src/js/components/player.js:
--------------------------------------------------------------------------------
  1 | var timeHelper = require('../helpers/time');
  2 | 
  3 | var audio           = document.querySelector("#player"),
  4 |     btnPlay         = document.querySelector("#btn-play"),
  5 |     btnPause        = document.querySelector("#btn-pause"),
  6 |     btnPrev         = document.querySelector("#prev"),
  7 |     btnNext         = document.querySelector("#next"),
  8 |     btnRepeat       = document.querySelector("#repeat"),
  9 |     btnRandom       = document.querySelector("#random"),
 10 |     volumeControl   = document.querySelector("#volume"),
 11 |     timeLine        = document.querySelector("#timeline"),
 12 |     musicTimeCount  = document.querySelector("#time-count"),
 13 |     musicTime       = document.querySelector("#time"),
 14 |     musicName       = document.querySelector("#music-name"),
 15 |     playListElement = document.querySelector("#play-list"),
 16 |     loading         = document.querySelector("#loading-music"),
 17 |     flip            = document.querySelector("#flip-container"),
 18 |     rd              = new FileReader();
 19 | 
 20 | var Player = {
 21 |     currentTrack : 0,
 22 |     isPlaying    : false,
 23 |     isRepeating  : false,
 24 |     isRandomized : false,
 25 |     playList     : []
 26 | };
 27 | 
 28 | var setPlayList = function (music) {
 29 |     Player.playList.push(music);
 30 | }
 31 | 
 32 | var activateListItem = function (id) {
 33 |     document.querySelector("#list-item-" + id).classList.add("is-active");
 34 |     document.querySelector("#list-icon-" + id).classList.add("is-active");
 35 | }
 36 | 
 37 | var inactivateListItem = function (id) {
 38 |     document.querySelector("#list-item-" + id).classList.remove("is-active");
 39 |     document.querySelector("#list-icon-" + id).classList.remove("is-active");
 40 | }
 41 | 
 42 | var clearPlayList = function () {
 43 |     Player.playList = [];
 44 | }
 45 | 
 46 | var showLoading = function () {
 47 |     loading.classList.add("show");
 48 | };
 49 | 
 50 | var hideLoading = function () {
 51 |     loading.classList.remove("show");
 52 | };
 53 | 
 54 | var playMusic = function (track) {
 55 |     
 56 |     rd.onloadstart = function () {
 57 |         showLoading();
 58 |     };
 59 | 
 60 |     rd.onload = function () {
 61 |         audio.src = this.result;
 62 |     };
 63 | 
 64 |     rd.readAsDataURL(Player.playList[track]);
 65 | 
 66 |     audio.onloadeddata = function() {
 67 |         
 68 |         audio.play();
 69 |         
 70 |         flip.classList.add('is-flipped');
 71 |         if (Player.currentTrack > -1) {
 72 |            inactivateListItem(Player.currentTrack);
 73 |         }
 74 |         
 75 |         activateListItem(track);
 76 |         
 77 |         Player.isPlaying = true;
 78 |         Player.currentTrack = track;
 79 |         
 80 |         hideLoading();
 81 |         setMusicName(Player.playList[track].name);
 82 |         setTimeLineMax(this.duration);
 83 |         setMusicTime(this.duration);
 84 |     };
 85 |     
 86 | };
 87 | 
 88 | var pause = function () {
 89 |     
 90 |     if (audio.src == "") return false;
 91 | 
 92 |     flip.classList.remove('is-flipped');
 93 |     inactivateListItem(Player.currentTrack);
 94 |     
 95 |     Player.isPlaying = false;
 96 |     audio.pause();
 97 |     
 98 | };
 99 | 
100 | var resume = function () {
101 |     
102 |     if (audio.src == "") return false;
103 | 
104 |     flip.classList.add('is-flipped');
105 |     activateListItem(Player.currentTrack);
106 |     
107 |     Player.isPlaying = true;
108 |     audio.play();
109 |     
110 | }
111 | 
112 | var playPrev = function () {
113 |     
114 |     if (audio.src == "") return false;
115 |     
116 |     var prev = Player.currentTrack - 1;
117 |     (prev > -1) ? playMusic(prev) : playMusic(0);
118 |     
119 | };
120 | 
121 | var playNext = function () {
122 |     
123 |     if (audio.src == "") return false;
124 |     
125 |     var next      = Player.currentTrack + 1;
126 |     var lastMusic = Player.playList.length - 1;
127 |     var random    = Math.round( Math.random() * lastMusic );
128 | 
129 |     if (!Player.isRandomized) {
130 |         (next <= lastMusic) ? playMusic(next) : playMusic(0);
131 |     } else {
132 |         playMusic(random);
133 |     }
134 |     
135 | };
136 | 
137 | var repeat = function () {
138 |     if (!Player.isRepeating) {
139 |         btnRepeat.classList.add('is-on');
140 |         audio.setAttribute("loop", "");
141 |         Player.isRepeating = true;
142 |     } else {
143 |         btnRepeat.classList.remove('is-on');
144 |         audio.removeAttribute("loop");
145 |         Player.isRepeating = false;
146 |     }
147 | };
148 | 
149 | var randomize = function () {
150 |     if (!Player.isRandomized) {
151 |         btnRandom.classList.add('is-on');
152 |         Player.isRandomized = true;
153 |     } else {
154 |         btnRandom.classList.remove('is-on');
155 |         Player.isRandomized = false;
156 |     }
157 | };
158 | 
159 | var changeVolume = function () {
160 |     audio.volume = volumeControl.value / 10;
161 | };
162 | 
163 | var changeTime = function () {
164 |     if (audio.readyState != 0) audio.currentTime = timeLine.value;
165 | };
166 | 
167 | var timeLineUpdate = function () {
168 |     timeLine.value = audio.currentTime;
169 | };
170 | 
171 | var setTimeLineMax = function (time) {
172 |     timeLine.setAttribute( "max", Math.round(time) );
173 | };
174 | 
175 | var setMusicTime = function (time) {
176 |     musicTime.innerHTML = timeHelper.secondsToTime( Math.round(time) );
177 | };
178 | 
179 | var musicCountUpdate = function (time) {
180 |     musicTimeCount.innerHTML = timeHelper.secondsToTime( Math.round(time) );
181 | };
182 | 
183 | var setMusicName = function (name) {
184 |     musicName.innerHTML = name.replace(".mp3", "");
185 | };
186 | 
187 | var createPlayList = function () {
188 |     
189 |     var musicName, i, li, button, span,
190 |         len = Player.playList.length;
191 | 
192 |     playListElement.innerHTML = "";
193 | 
194 |     for (i = 0; i < len; i += 1) {
195 |         
196 |         musicName = document.createTextNode(Player.playList[i].name.replace(".mp3", ""));
197 | 
198 |         li     = document.createElement("li");
199 |         button = document.createElement("button");
200 |         span   = document.createElement("span");
201 | 
202 |         button.setAttribute("type", "button");
203 |         button.setAttribute("class", "btn btn-circle btn-small");
204 |         button.innerHTML = '<i class="icon icon-play"></i>';
205 |         
206 |         (function (id) {
207 |             button.addEventListener('click', function () { 
208 |                 playMusic(id);
209 |             }, false);
210 |         })(i);
211 | 
212 |         span.setAttribute("id", "list-icon-"+i);
213 |         span.setAttribute("class", "sound-wave");
214 |         span.innerHTML = "<span class='bar'></span><span class='bar'></span><span class='bar'></span>";
215 |     
216 |         li.setAttribute("id", "list-item-"+i);
217 |         li.setAttribute("class", "list-item");
218 |         li.appendChild(button);
219 |         li.appendChild(musicName);
220 |         li.appendChild(span);
221 |         playListElement.appendChild(li);
222 | 
223 |     };
224 | };
225 | 
226 | //botões
227 | btnPlay.addEventListener("click", resume, false);
228 | btnPause.addEventListener("click", pause, false);
229 | btnPrev.addEventListener("click", playPrev, false);
230 | btnNext.addEventListener("click", playNext, false);
231 | btnRepeat.addEventListener("click", repeat, false);
232 | btnRandom.addEventListener("click", randomize, false);
233 | 
234 | //volume
235 | volumeControl.addEventListener("change", changeVolume, false);
236 | 
237 | //timeLine
238 | timeLine.addEventListener("change", changeTime, false);
239 | timeLine.addEventListener("mousedown", function() {
240 |     audio.removeEventListener("timeupdate", timeLineUpdate);
241 | }, false);
242 | timeLine.addEventListener("mouseup", function() {
243 |     audio.addEventListener("timeupdate", timeLineUpdate, false);
244 | }, false);
245 | 
246 | //player
247 | audio.addEventListener("ended", playNext, false);
248 | audio.addEventListener("timeupdate", timeLineUpdate, false);
249 | audio.addEventListener("timeupdate", function() { 
250 |     musicCountUpdate( Math.floor(this.currentTime) );
251 | }, false);
252 | 
253 | module.exports = {
254 |     setPlayList: setPlayList,
255 |     clearPlayList: clearPlayList,
256 |     playMusic: playMusic,
257 |     createPlayList: createPlayList
258 | }


--------------------------------------------------------------------------------
/src/js/helpers/time.js:
--------------------------------------------------------------------------------
 1 | function padLeft(n, width, z) {
 2 |   z = z || '0';
 3 |   n = n + '';
 4 |   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 5 | }
 6 | 
 7 | var secondsToTime = function (seconds) {
 8 | 
 9 |   if (isNaN(seconds) || seconds == "" || typeof seconds != 'number') return "00:00";
10 | 
11 |   var hours   = parseInt( seconds / 3600 ) % 24,
12 |       minutes = parseInt( seconds / 60 ) % 60,
13 |       seconds = parseInt( seconds % 60);
14 | 
15 |   if (hours > 0) {
16 |     var result = padLeft(hours, 2, 0) + ':' + padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);
17 |   } else {
18 |     var result = padLeft(minutes, 2, 0) + ':' + padLeft(seconds, 2, 0);
19 |   }
20 | 
21 |   return result;
22 | 
23 | };
24 | 
25 | module.exports = {
26 |   secondsToTime: secondsToTime
27 | }


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | require('./components/dropdown.js');
 2 | 
 3 | var Player = require('./components/player.js');
 4 | 
 5 | (function () {
 6 |     
 7 |     var btnUpload   = document.querySelector("#btn-upload"),
 8 |         fileElement = document.querySelector("#file-element"),
 9 |         themeLight  = document.querySelector("#theme-light"),
10 |         themeDark   = document.querySelector("#theme-dark"),
11 |         btnsTheme   = document.querySelectorAll('.theme-item-btn'),
12 |         btnsColor   = document.querySelectorAll('.btn-color'),
13 |         
14 |         setLocalStorage = function (item, value) {
15 |             if (window.hasOwnProperty('localStorage')) {
16 |                 localStorage.setItem(item, value);
17 |             }
18 |         },
19 | 
20 |         getLocalStorage = function (item) {
21 |             if (window.hasOwnProperty('localStorage')) {
22 |                 return localStorage.getItem(item);
23 |             }
24 |         },
25 | 
26 |         setTheme = function (theme) {
27 |             
28 |             theme = theme || "light";
29 |             document.body.classList.remove('dark', 'light');
30 |             document.body.classList.add(theme);
31 |             setLocalStorage("theme", theme);
32 |             
33 |         },
34 | 
35 |         setColor = function (color) {
36 | 
37 |             color = color || "green";
38 |             document.body.className = document.body.className.replace(/(blue|red|green|pink|purple|cyan|teal|yellow|orange)/g, '');
39 |             document.body.classList.add(color);
40 |             setLocalStorage("color", color);
41 | 
42 |         };
43 | 
44 |     if (window.hasOwnProperty('localStorage')) {
45 |         setTheme(getLocalStorage('theme'));
46 |         setColor(getLocalStorage('color'));
47 |     }
48 | 
49 |     btnUpload.addEventListener("click", function (e) {
50 |         
51 |         e.stopPropagation();
52 |         e.preventDefault();
53 |         
54 |         if (fileElement) {
55 |             fileElement.click();
56 |         }
57 |         
58 |     }, false);
59 | 
60 |     fileElement.addEventListener("change", function () {
61 | 
62 |         Player.clearPlayList();
63 | 
64 |         for (var i = 0, len = this.files.length; i < len; i += 1) {
65 |             Player.setPlayList(this.files[i]);
66 |         }
67 | 
68 |         Player.createPlayList();
69 |         Player.playMusic(0);
70 | 
71 |     }, false);
72 | 
73 |     btnsTheme.forEach(function (btnTheme) {
74 |         btnTheme.addEventListener('click', function () {
75 |             var themeScheme = this.getAttribute('data-theme-scheme');
76 |             setTheme(themeScheme);
77 |         }, false);
78 |     });
79 | 
80 |     btnsColor.forEach(function (btnColor) {
81 |         btnColor.addEventListener('click', function () {
82 |             var color = this.getAttribute('data-theme-color');
83 |             setColor(color);
84 |         }, false);
85 |     });
86 | 
87 | }());


--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | require('./index.js');


--------------------------------------------------------------------------------