Added %isrc% and %upc%
[DeezloaderRemix.git] / app / public / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4         <title>Deezloader Remix</title>
5         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6         <link rel="stylesheet" type="text/css" href="css/material-icons.css"/>
7         <link rel="stylesheet" type="text/css" href="css/materialize.min.css"/>
8         <link rel="stylesheet" type="text/css" href="css/animate.css">
9         <link rel="stylesheet" type="text/css" href="css/style.css"/>
10         <link rel="stylesheet" type="text/css" href="css/darkMode.css" name="darkMode" disabled/>
11         <script type='text/javascript'>
12                 if (eval(localStorage.darkMode)){
13                         document.getElementsByName("darkMode")[0].removeAttribute("disabled");
14                 }
15         </script>
16         <meta charset="utf-8"/>
17 </head>
18 <body>
19 <span id="appVersionFallback" hidden>4.2.1</span>
20
21 <div id="title-bar" class="deezloader-black">
22         <div class="resize-padding" style="width: 100%; height: 3px;"></div>
23         <div class="resize-padding" style="width: 3px; height: 31px;"></div>
24         <div id="title">Deezloader Remix v<span id="application_version"></span></div>
25
26         <div id="title-bar-btns">
27                 <button id="min-btn"><i class="material-icons">remove</i></button>
28                 <button id="max-btn"><i class="material-icons">add</i></button>
29                 <button id="close-btn"><i class="material-icons">close</i></button>
30         </div>
31
32         <div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
33 </div>
34
35 <!--#############################################INITIALIZING-SCREEN############################################-->
36 <div id="initializing" class="deezloader-black valign-wrapper">
37         <div class="modal-content container" id="login-page">
38                 <div class="card">
39                         <div class="card-content">
40                                 <span class="card-title">Please login to your deezer account.</span>
41                                 <h6 class="red-text" id="login-res-text"></h6>
42                                 <div id="login-form-client-mode">
43                                         <div class="input-field col s12">
44                                                 <input autocomplete="off" type="text" id="modal_login_input_username"/>
45                                                 <label for="modal_login_input_username">Email</label>
46                                         </div>
47                                         <div class="input-field col s12">
48                                                 <input autocomplete="off" type="password" id="modal_login_input_password"/>
49                                                 <label for="modal_login_input_password">Password</label>
50                                         </div>
51                                         <input id="modal_login_input_captchaResponse" type="hidden" value=""/>
52                                         <!--<iframe id="modal_login_iframe_captcha" src="cap://deezer.com/"></iframe>-->
53                                 </div>
54                                 <div id="login-form-server-mode">
55                                         <div class="input-field col s12">
56                                                 <input autocomplete="off" type="password" id="modal_login_input_userToken"/>
57                                                 <label for="modal_login_input_userToken">userToken</label>
58                                         </div>
59                                         <p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my userToken?</a></p>
60                                 </div>
61                         </div>
62                         <div class="card-action row">
63                                 <a href="#" class="deezloader-primary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_login">Log in</a>
64                                 <a href="#" class="deezloader-secondary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_signup">Sign up</a>
65                         </div>
66                 </div>
67         </div>
68 </div>
69
70 <!--#############################################MODAL_SETTINGS############################################-->
71 <div id="modal_settings" class="modal modal-fixed-footer">
72         <div class="modal-content">
73                 <h4 class="col s12">Settings</h4>
74
75                 <h6 class="col s12 secondary-text">Path Settings</h6><hr>
76                 <div class="row">
77                         <div class="input-field col s12">
78                                 <input autocomplete="off" type="text" id="modal_settings_input_downloadTracksLocation"/>
79                                 <label for="modal_settings_input_downloadTracksLocation">Download folder path</label>
80                         </div>
81                 </div>
82
83                 <div class="row">
84                         <div class="input-field col s12">
85                                 <input autocomplete="off" type="text" id="modal_settings_input_trackNameTemplate"/>
86                                 <label for="modal_settings_input_trackNameTemplate">Tracknames template <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
87                                         data-tooltip="Supported variables are: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %disc%, %isrc%, %explicit% and %genre%">info_outline</i></label>
88                         </div>
89                         <p class="col s12 path-example">path/to/file/example</p>
90                 </div>
91
92                 <div class="row">
93                         <div class="input-field col s12 m6">
94                                 <input autocomplete="off" type="text" id="modal_settings_input_albumTrackNameTemplate"/>
95                                 <label for="modal_settings_input_albumTrackNameTemplate">Album tracknames template <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
96                                         data-tooltip="Supported variables are: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %disc%, %isrc%, %explicit% and %genre%">info_outline</i></label>
97                         </div>
98                         <div class="input-field col s12 m6">
99                                 <input autocomplete="off" type="text" id="modal_settings_input_albumNameTemplate"/>
100                                 <label for="modal_settings_input_albumNameTemplate">Album names template <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
101                                         data-tooltip="Supported variables are: %album%, %artist%, %year%, %date%, %bitrate%, %type%, %label%, %upc%, %explicit% and %genre%">info_outline</i></label>
102                         </div>
103                         <p class="col s12 path-example">path/to/file/example</p>
104                 </div>
105
106                 <div class="row">
107                         <div class="input-field col s12">
108                                 <input autocomplete="off" type="text" id="modal_settings_input_playlistTrackNameTemplate"/>
109                                 <label for="modal_settings_input_playlistTrackNameTemplate">Playlist tracknames template <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
110                                         data-tooltip="Supported variables are: %title%, %album%, %artist%, %year%, %date%, %label%, %number%, %position%, %disc%, %isrc%, %explicit% and %genre%">info_outline</i></label>
111                         </div>
112                         <p class="col s12 path-example">path/to/file/example</p>
113                 </div>
114
115                 <h6 class="col s12 secondary-text">More Path Settings</h6><hr>
116                 <div class="row">
117                         <div class="col s12 switch settings_switch">
118                                 <span>Create folders for Artists</span>
119                                 <label>
120                                         <input type="checkbox" id="modal_settings_cbox_createArtistFolder"/>
121                                         <span class="lever"></span>
122                                 </label>
123                         </div>
124                         <div class="col s12 switch settings_switch">
125                                 <span>Create folders for Albums</span>
126                                 <label>
127                                         <input type="checkbox" id="modal_settings_cbox_createAlbumFolder"/>
128                                         <span class="lever"></span>
129                                 </label>
130                         </div>
131                         <div class="col s12 switch settings_switch">
132                                 <span>Create folders for CDs</span>
133                                 <label>
134                                         <input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
135                                         <span class="lever"></span>
136                                 </label>
137                         </div>
138                         <div class="col s12 switch settings_switch">
139                                 <span>Create Artist, Albums and CDs folders for Playlists too</span>
140                                 <label>
141                                         <input type="checkbox" id="modal_settings_cbox_createFoldersPlaylist" class="filled-in"/>
142                                         <span class="lever"></span>
143                                 </label>
144                         </div>
145                         <div class="col s12 switch settings_switch">
146                                 <span>Write all Artists in track filename</span>
147                                 <label>
148                                         <input type="checkbox" id="modal_settings_cbox_saveFullArtists" class="filled-in"/>
149                                         <span class="lever"></span>
150                                 </label>
151                         </div>
152                         <div class="col s12 switch settings_switch">
153                                 <span class="tooltipped" data-position="top" data-delay="500"
154                                         data-tooltip="Adds 0s before %number% to have the same character length">Add padding to track numbers</span>
155                                 <label>
156                                         <input type="checkbox" id="modal_settings_cbox_padtrck" class="filled-in"/>
157                                         <span class="lever"></span>
158                                 </label>
159                         </div>
160                         <div class="input-field col s12">
161                                 <input autocomplete="off" type="number" id="modal_settings_number_paddingSize" min="0"/>
162                                 <label for="modal_settings_number_paddingSize">Overwrite padding size</label>
163                         </div>
164                 </div>
165
166                 <h6 class="col s12 secondary-text">App Settings</h6><hr>
167                 <div class="row">
168                         <div class="input-field col s12 m6">
169                                 <input autocomplete="off" type="number" id="modal_settings_number_queueConcurrency" min="1"/>
170                                 <label for="modal_settings_number_queueConcurrency">Concurrent download limit</label>
171                         </div>
172                         <div class="input-field col s12 m6">
173                                 <select name="maxBitrate" id="modal_settings_select_maxBitrate">
174                                         <option value="9">FLAC 1411kbps</option>
175                                         <option value="3">MP3 320kbps</option>
176                                         <option value="1">MP3 128kbps</option>
177                                 </select>
178                                 <label for="modal_settings_select_maxBitrate">Preferred bitrate</label>
179                         </div>
180                         <div class="col s12 switch settings_switch">
181                                 <span>Fallback to lower bitrates if preferred is not available</span>
182                                 <label>
183                                         <input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
184                                         <span class="lever"></span>
185                                 </label>
186                         </div>
187                         <div class="col s12 switch settings_switch">
188                                 <span>Fallback to search if song is not available</span>
189                                 <label>
190                                         <input type="checkbox" id="modal_settings_cbox_fallbackSearch" class="filled-in"/>
191                                         <span class="lever"></span>
192                                 </label>
193                         </div>
194                         <div class="col s12 switch settings_switch">
195                                 <span>Download albums with one track as a single track</span>
196                                 <label>
197                                         <input type="checkbox" id="modal_settings_cbox_downloadSinglesAsTracks" class="filled-in"/>
198                                         <span class="lever"></span>
199                                 </label>
200                         </div>
201                         <div class="col s12 switch settings_switch">
202                                 <span>Create log file for Errors inside download folder</span>
203                                 <label>
204                                         <input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
205                                         <span class="lever"></span>
206                                 </label>
207                         </div>
208                         <div class="col s12 switch settings_switch">
209                                 <span>Create log file for Alternatives inside download folder</span>
210                                 <label>
211                                         <input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
212                                         <span class="lever"></span>
213                                 </label>
214                         </div><div class="col s12 switch settings_switch">
215                                 <span>Create M3U8 (Playlist) File</span>
216                                 <label>
217                                         <input type="checkbox" id="modal_settings_cbox_createM3UFile" class="filled-in"/>
218                                         <span class="lever"></span>
219                                 </label>
220                         </div>
221                         <div class="col s12 switch settings_switch">
222                                 <span class="tooltipped" data-position="top" data-delay="500"
223                                         data-tooltip="Downloads lyrics .lrc file">Download Synced Lyrics File (.lyr)</span>
224                                 <label>
225                                         <input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
226                                         <span class="lever"></span>
227                                 </label>
228                         </div>
229                         <div class="col s12 switch settings_switch">
230                                 <span>Minimize to system tray</span>
231                                 <label>
232                                         <input type="checkbox" id="modal_settings_cbox_minimizeToTray" class="filled-in"/>
233                                         <span class="lever"></span>
234                                 </label>
235                         </div>
236                 </div>
237
238                 <h6 class="col s12 secondary-text">Artworks</h6><hr>
239                 <div class="row">
240                         <div class="input-field col s12">
241                                 <select name="artworkSize" id="modal_settings_select_artworkSize">
242                                         <option value="1400">1400x1400</option>
243                                         <option value="1200">1200x1200</option>
244                                         <option value="1000">1000x1000</option>
245                                         <option value="800">800x800</option>
246                                         <option value="500">500x500</option>
247                                         <option value="250">250x250</option>
248                                 </select>
249                                 <label for="modal_settings_select_artworkSize">Artwork Size</label>
250                         </div>
251                         <div class="col s12 switch settings_switch">
252                                 <span>Save Album Artwork</span>
253                                 <label>
254                                         <input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
255                                         <span class="lever"></span>
256                                 </label>
257                         </div>
258                         <div class="input-field col s12">
259                                 <input autocomplete="off" type="text" id="modal_settings_input_coverImageTemplate"/>
260                                 <label for="modal_settings_input_albumTrackNameTemplate">Album Artwork Name Template <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
261                                         data-tooltip="Supported variables are: %artist% and %name%">info_outline</i></label>
262                         </div>
263                         <div class="col s12 switch settings_switch">
264                                 <span>Save Artist Artwork</span>
265                                 <label>
266                                         <input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
267                                         <span class="lever"></span>
268                                 </label>
269                         </div>
270                         <div class="input-field col s12">
271                                 <input autocomplete="off" type="text" id="modal_settings_input_artistImageTemplate"/>
272                                 <label for="modal_settings_input_albumNameTemplate">Artist Artwork Name Template<i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
273                                         data-tooltip="Supported variables are: %artist%">info_outline</i></label>
274                         </div>
275                         <div class="col s12 switch settings_switch">
276                                 <span>Download images as PNGs</span>
277                                 <label>
278                                         <input type="checkbox" id="modal_settings_cbox_PNGcovers" class="filled-in"/>
279                                         <span class="lever"></span>
280                                 </label>
281                         </div>
282                 </div>
283
284                 <h6 class="col s12 secondary-text">Tags</h6><hr>
285                 <div class="row">
286                         <div class="input-field col s12">
287                                 <select name="multitagSeparator" id="modal_settings_select_multitagSeparator">
288                                         <option value="null">Null Character</option>
289                                         <option value=",">,</option>
290                                         <option value=", ">, with space</option>
291                                         <option value="/">/</option>
292                                         <option value=" / ">/ with space</option>
293                                         <option value=";">;</option>
294                                         <option value="; ">; with space</option>
295                                 </select>
296                                 <label for="modal_settings_select_multitagSeparator">Multitag Separator</label>
297                         </div>
298                         <div class="input-field col s12 m6">
299                                 <select name="dateFormat" id="modal_settings_select_dateFormat">
300                                         <option value="0">YMD</option>
301                                         <option value="1">DMY</option>
302                                         <option value="2">MDY</option>
303                                         <option value="3">YDM</option>
304                                 </select>
305                                 <label for="modal_settings_select_dateFormat">Date Format</label>
306                         </div>
307                         <div class="input-field col s12 m6">
308                                 <select name="dateFormatYear" id="modal_settings_select_dateFormatYear">
309                                         <option value="2">2 digit</option>
310                                         <option value="4">4 digit</option>
311                                 </select>
312                                 <label for="modal_settings_select_dateFormatYear">Year Format</label>
313                         </div>
314                         <div class="col s12 switch settings_switch">
315                                 <span class="tooltipped" data-position="top" data-delay="500"
316                                         data-tooltip="Replaces albums tags with the playlist ones">Save Playlist as Compilation</span>
317                                 <label>
318                                         <input type="checkbox" id="modal_settings_cbox_savePlaylistAsCompilation" class="filled-in"/>
319                                         <span class="lever"></span>
320                                 </label>
321                         </div>
322                         <div class="col s12 switch settings_switch">
323                                 <span>Remove "(Album Version)" from tracknames</span>
324                                 <label>
325                                         <input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
326                                         <span class="lever"></span>
327                                 </label>
328                         </div>
329                 </div>
330
331                 <div class="row">
332                         <div class="col s12">
333                                 <a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;">Choose Which Tags To Save</a>
334                         </div>
335                 </div>
336
337                 <h6 class="col s12 secondary-text">Spotify Features</h6><hr>
338                 <div class="row">
339                         <div class="input-field col s12 m6">
340                                 <input autocomplete="off" type="text" id="modal_settings_input_spotifyClientID"/>
341                                 <label for="modal_settings_input_spotifyClientID">Client ID</label>
342                         </div>
343                         <div class="input-field col s12 m6">
344                                 <input autocomplete="off" type="password" id="modal_settings_input_spotifyClientSecret"/>
345                                 <label for="modal_settings_input_spotifyClientSecret">Client Secret</label>
346                         </div>
347                         <div class="input-field col s12 m6">
348                                 <input autocomplete="off" type="text" id="modal_settings_input_spotifyUser"/>
349                                 <label for="modal_settings_input_spotifyUser">Spotify Username (for the Playlists Tab)</label>
350                         </div>
351                 </div>
352
353                 <div class="row">
354                         <div class="col s12">
355                                 <img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
356                                 <p>You are logged in as <b id="modal_settings_username"></b></p>
357                                 <a href="#" class="modal-close waves-effect waves-light btn" id="modal_settings_btn_logout">Logout</a>
358                         </div>
359                 </div>
360
361         </div>
362         <div class="modal-footer">
363                 <a href="#" class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i
364                         class="material-icons right">save</i>Save</a>
365                 <a href="#" class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i
366                         class="material-icons right">settings_backup_restore</i>Default Settings</a>
367                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
368         </div>
369 </div>
370
371 <!--#############################################MODAL_TAGS############################################-->
372 <div id="modal_tags" class="modal modal-fixed-footer">
373         <div class="modal-content">
374                 <div class="row">
375                         <h4 class="col s12">Saved Tags</h4>
376                 </div>
377                 <div class="row">
378                         <p class="col s12 m4">
379                                 <label>
380                                         <input type="checkbox" id="modal_tags_title" class="filled-in"/>
381                                         <span>Title</span>
382                                 </label>
383                         </p>
384                         <p class="col s12 m4">
385                                 <label>
386                                         <input type="checkbox" id="modal_tags_artist" class="filled-in"/>
387                                         <span>Artist</span>
388                                 </label>
389                         </p>
390                         <p class="col s12 m4">
391                                 <label>
392                                         <input type="checkbox" id="modal_tags_album" class="filled-in"/>
393                                         <span>Album</span>
394                                 </label>
395                         </p>
396                         <p class="col s12 m4">
397                                 <label>
398                                         <input type="checkbox" id="modal_tags_cover" class="filled-in"/>
399                                         <span>Cover</span>
400                                 </label>
401                         </p>
402                         <p class="col s12 m4">
403                                 <label>
404                                         <input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
405                                         <span>Track Number</span>
406                                 </label>
407                         </p>
408                         <p class="col s12 m4">
409                                 <label>
410                                         <input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
411                                         <span>Track Total</span>
412                                 </label>
413                         </p>
414                         <p class="col s12 m4">
415                                 <label>
416                                         <input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
417                                         <span>Disc Number</span>
418                                 </label>
419                         </p>
420                         <p class="col s12 m4">
421                                 <label>
422                                         <input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
423                                         <span>Disc Total</span>
424                                 </label>
425                         </p>
426                         <p class="col s12 m4">
427                                 <label>
428                                         <input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
429                                         <span>Album Artist</span>
430                                 </label>
431                         </p>
432                         <p class="col s12 m4">
433                                 <label>
434                                         <input type="checkbox" id="modal_tags_genre" class="filled-in"/>
435                                         <span>Genre</span>
436                                 </label>
437                         </p>
438                         <p class="col s12 m4">
439                                 <label>
440                                         <input type="checkbox" id="modal_tags_year" class="filled-in"/>
441                                         <span>Year</span>
442                                 </label>
443                         </p>
444                         <p class="col s12 m4">
445                                 <label>
446                                         <input type="checkbox" id="modal_tags_date" class="filled-in"/>
447                                         <span>Date</span>
448                                 </label>
449                         </p>
450                         <p class="col s12 m4">
451                                 <label>
452                                         <input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
453                                         <span>Explicit</span>
454                                 </label>
455                         </p>
456                         <p class="col s12 m4">
457                                 <label>
458                                         <input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
459                                         <span>ISRC</span>
460                                 </label>
461                         </p>
462                         <p class="col s12 m4">
463                                 <label>
464                                         <input type="checkbox" id="modal_tags_length" class="filled-in"/>
465                                         <span>Length</span>
466                                 </label>
467                         </p>
468                         <p class="col s12 m4">
469                                 <label>
470                                         <input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
471                                         <span>Barcode</span>
472                                 </label>
473                         </p>
474                         <p class="col s12 m4">
475                                 <label>
476                                         <input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
477                                         <span>BPM</span>
478                                 </label>
479                         </p>
480                         <p class="col s12 m4">
481                                 <label>
482                                         <input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
483                                         <span>Replay Gain</span>
484                                 </label>
485                         </p>
486                         <p class="col s12 m4">
487                                 <label>
488                                         <input type="checkbox" id="modal_tags_publisher" class="filled-in"/>
489                                         <span>Label</span>
490                                 </label>
491                         </p>
492                         <p class="col s12 m4">
493                                 <label>
494                                         <input type="checkbox" id="modal_tags_unsynchronisedLyrics" class="filled-in"/>
495                                         <span>Unsynchronised Lyrics</span>
496                                 </label>
497                         </p>
498                         <p class="col s12 m4">
499                                 <label>
500                                         <input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
501                                         <span>Copyright</span>
502                                 </label>
503                         </p>
504                         <p class="col s12 m4">
505                                 <label>
506                                         <input type="checkbox" id="modal_tags_musicpublisher" class="filled-in"/>
507                                         <span>Publisher</span>
508                                 </label>
509                         </p>
510                         <p class="col s12 m4">
511                                 <label>
512                                         <input type="checkbox" id="modal_tags_composer" class="filled-in"/>
513                                         <span>Composer</span>
514                                 </label>
515                         </p>
516                         <p class="col s12 m4">
517                                 <label>
518                                         <input type="checkbox" id="modal_tags_mixer" class="filled-in"/>
519                                         <span>Mixer</span>
520                                 </label>
521                         </p>
522                         <p class="col s12 m4">
523                                 <label>
524                                         <input type="checkbox" id="modal_tags_author" class="filled-in"/>
525                                         <span>Author</span>
526                                 </label>
527                         </p>
528                         <p class="col s12 m4">
529                                 <label>
530                                         <input type="checkbox" id="modal_tags_writer" class="filled-in"/>
531                                         <span>Writer</span>
532                                 </label>
533                         </p>
534                         <p class="col s12 m4">
535                                 <label>
536                                         <input type="checkbox" id="modal_tags_engineer" class="filled-in"/>
537                                         <span>Engineer</span>
538                                 </label>
539                         </p>
540                         <p class="col s12 m4">
541                                 <label>
542                                         <input type="checkbox" id="modal_tags_producer" class="filled-in"/>
543                                         <span>Producer</span>
544                                 </label>
545                         </p>
546                 </div>
547         </div>
548         <div class="modal-footer">
549                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
550         </div>
551 </div>
552
553 <!--#############################################MODAL_ABOUT############################################-->
554 <div id="modal_about" class="modal modal-fixed-footer">
555         <div class="modal-content">
556                 <div class="row">
557                         <h4 class="col s12">More</h4>
558                 </div>
559                 <div class="row">
560                         <ul class="collapsible" data-collapsible="accordion">
561                                 <li>
562                                         <div class="collapsible-header waves-effect"><i class="material-icons">info</i>About</div>
563                                         <div class="collapsible-body">
564                                                 <p>
565                                                         <b>Branch: </b>Remix</br>
566                                                         <b>Version:</b> <span id="application_version_about"></span><br/>
567                                                         <b>Based on: </b>Deezloader Reborn</br>
568                                                         <b>Maintainers:</b> RemixDevs Group<br/>
569                                                         <b>Repo: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix" target="_blank">Official Repo</a><br/>
570                                                         <b>Interface:</b> <a href="http://materializecss.com/" target="_blank">Materialize CSS</a><br/>
571                                                         <br>
572                                                         <b>Special Thanks to:</b><br>
573                                                         ZzMTV, ParadoxalManiak, snwflake, ExtendLord<br>
574                                                 </p>
575                                         </div>
576                                 </li>
577                                 <li>
578                                         <div class="collapsible-header waves-effect"><i class="material-icons">feedback</i>Feedback</div>
579                                         <div class="collapsible-body">
580                                                 <p>
581                                                         Do you have some feedback or want to ask for some new features? Open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new" target="_blank">new Issue</a> and add the 'Feature' label.
582                                                 </p>
583                                         </div>
584                                 </li>
585                                 <li>
586                                         <div class="collapsible-header waves-effect"><i class="material-icons">bug_report</i>Reporting Bugs</div>
587                                         <div class="collapsible-body">
588                                                 <p>
589                                                         If you experience any bugs, open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new" target="_blank">new issue</a> and send the bug report there, thank you.
590                                                 </p>
591                                         </div>
592                                 </li>
593                                 <li>
594                                         <div class="collapsible-header waves-effect"><i class="material-icons">group</i>Contacts</div>
595                                         <div class="collapsible-body">
596                                                 <p>
597                                                         If you want to discuss or help with the app you can do so in the <a href="https://t.me/DeezloaderRemixCommunity" target="_blank">Telegram group</a>!
598                                                 </p>
599                                         </div>
600                                 </li>
601                                 <li>
602                                         <div class="collapsible-header waves-effect"><i class="material-icons">warning</i>Attention!</div>
603                                         <div class="collapsible-body">
604                                                 <p>
605                                                         The authors do not call to commit crimes!<br/>
606                                                         The usage of this tool may be illegal in your country, please inform yourself!<br/>
607                                                         The authors give no guarantees at all and aren't responsible for any damage or harm of any kind resulting from the use of this software!
608                                                 </p>
609                                         </div>
610                                 </li>
611                                 <li>
612                                         <div class="collapsible-header waves-effect"><i class="material-icons">history</i>Changelog</div>
613                                         <div class="collapsible-body">
614                                                 <p>
615                                                         <b>Version 4.2.1</b><br/>
616                                                         - Downloads are binded to the server on server mode<br/>
617                                                         - Downloading playlists wont create artist and album folders if options are selected<br/>
618                                                         - Date tag is now enabled by default on new installations<br/>
619                                                         - Now users without propic will have a default one in the settings<br/>
620                                                         - Update message only nags once per client<br/>
621                                                         - Added space after %explicit% if there is text after the tag<br/>
622                                                         - Added label at the end of album viewin the modal<br/>
623                                                         - Fixed forEach error when downloading tracks<br/>
624                                                         - Fixed problem where %type% could be empty<br/>
625                                                         - Fixed macOS copy-paste problem<br/>
626                                                         - Fixed duplicate detection when downloading tracks<br/>
627                                                         - Fixed null separator for multitags on FLACs<br/>
628                                                         - Fixed problem where m3u file on multidisc albums was wrong<br/>
629                                                         <br/>
630                                                         <b>Version 4.2.0</b><br/>
631                                                         - New login workflow<br/>
632                                                         - Improved UI<br/>
633                                                         - Revamped album, artists and playlist modals<br/>
634                                                         - Added option to download the track in a different quality over the one selected (right click on d/l button)<br/>
635                                                         - Added autologin by default to fix re-connection problems<br/>
636                                                         - Re-added fallback on track errors<br/>
637                                                         - Fixed Default Settings button<br/>
638                                                         - Fixed links not working in server mode<br/>
639                                                         - Fixed UI problems when on mobile view (responsive site)<br/>
640                                                         - Fixed Settings menu not being populated on mobile view<br/>
641                                                         - Fixed problem with the artist tag when downloading playlists and albums<br/>
642                                                         - Fixed playlist numbering on files (now it doesn't override the trackNumber tag)<br/>
643                                                         - Fixed aritst artwork not saving<br/>
644                                                         <br/>
645                                                         <b>Version 4.1.8</b><br/>
646                                                         - Fix the issue where some people wasn't able to log in from the Netherlands<br/>
647                                                         <br/>
648                                                         <b>Version 4.1.7</b><br/>
649                                                         - Partial rewrite of the app (4.2.0 will have the other half)<br/>
650                                                         - Fixed login security issue<br/>
651                                                         - Better Spotify integration (now conversion uses ISRC if found)<br/>
652                                                         - Fixed France Charts not showing up<br/>
653                                                         - Albums with only one track will download as a single track<br/>
654                                                         - Added option %genre% for Track and Album names<br/>
655                                                         - Added support for subfolders in Album name<br/>
656                                                         - Minor changes to the UI<br/>
657                                                         <br/>
658                                                         <b>Version 4.1.6</b><br/>
659                                                         - Fixed Spotify Playlist problem<br/>
660                                                         - Fixed security issue where Client Secret is exposed in Compiled binaries<br/>
661                                                         - Now to use Spotify Features you need to follow <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Spotify+Features" target="_blank">this guide</a> first<br/>
662                                                         - Minor bugfixes and improvments<br/>
663                                                         <br/>
664                                                         <b>Version 4.1.5</b><br/>
665                                                         - Fixed %explicit% for album names<br/>
666                                                         - Added Contributions page<br/>
667                                                         - Fixed some spelling issues<br/>
668                                                         <br/>
669                                                         <b>Version 4.1.4</b><br/>
670                                                         - Improved Privacy in Server Mode<br/>
671                                                         - Cleaned up some files<br/>
672                                                         - Fixed Day Month position in DATE tag<br/>
673                                                         - Fixed %explicit% in name templates<br/>
674                                                         - Fixed artist download<br/>
675                                                         - Fixed FLAC Problems (not all of them)<br/>
676                                                         - Fixed select folder cancel bug<br/>
677                                                         - Added Update Notification<br/>
678                                                         - Added default ID3 DATE tag format<br/>
679                                                         - Added minimize to system tray<br/>
680                                                         - Added multitag separator for FLACS<br/>
681                                                         - Added hyperlinks to artist & album<br/>
682                                                         - Added option to better remove duplicates in the artist tag (Still in BETA)<br/>
683                                                         - Added option to save the track with the full list of artist in the filename<br/>
684                                                         - Added option to overwrite padding size<br/>
685                                                         - Added "Download All" button in modals<br/>
686                                                         - Removed ReplayGain as default setting<br/>
687                                                         <br/>
688                                                         <b>Version 4.1.3</b><br/>
689                                                         - Playlist and Album tracks now have fallback support<br/>
690                                                         - M3U files now works correctly<br/>
691                                                         - Fixed problems with tags<br/>
692                                                         - Added option %explicit% for Track and Album names (Will add "(Explicit)" in that position if it's explicit)<br/>
693                                                         - Added option to remove "(Album Version)" from track title<br/>
694                                                         - Added options to select which format should the date tag have<br/>
695                                                         - Added option to not fallback if desired bitrate is not available<br/>
696                                                         - Logging enhancements<br/>
697                                                         - Other minor bug-fixing<br/>
698                                                         <br/>
699                                                         <b>Version 4.1.2</b><br/>
700                                                         - Fixed Login Problem (for real this time)<br/>
701                                                         - Fixed Login after refresh<br/>
702                                                         - Regionlock free download<br/>
703                                                         - Added support for download of User Uploaded tracks<br/>
704                                                         - Now you can select which tags your songs has<br/>
705                                                         - Fixed selecting problem<br/>
706                                                         - Tracks without preview will display a disabled play button<br/>
707                                                         - Previews inside modal will stop with modal close<br/>
708                                                         - New %label% field for tracks and albums<br/>
709                                                         - Added option to create folder for CDs<br/>
710                                                         - Added rename option for cover file<br/>
711                                                         - Added option to download Artist artwork<br/>
712                                                         - Added option do log downloaded alternative tracks<br/>
713                                                         - Fixed some minor bugs<br/>
714                                                         <br/>
715                                                         <b>Version 4.1.1</b><br/>
716                                                         - Fixed Login Problem (again)<br/>
717                                                         - Added Dark Mode<br/>
718                                                         - Added smaller cover option<br/>
719                                                         - Added support for lower bitrates<br/>
720                                                         - Added "Stop All Downloads" button<br/>
721                                                         - Added support for Spotify Playlist preview<br/>
722                                                         - Added support for PNG covers<br/>
723                                                         - Re-Added Date Tag<br/>
724                                                         - Fixed same cover for same track in different albums bug<br/>
725                                                         - Fixed login issue from repository build<br/>
726                                                         <br/>
727                                                         <b>Version 4.1.0</b><br/>
728                                                         - New UI (not completly optimized for small screens)<br/>
729                                                         - Fixed login problems<br/>
730                                                         - Fixed %type% parameter not working<br/>
731                                                         - Fixed year tagging problem<br/>
732                                                         - Fixed playlist file not containing tracks<br/>
733                                                         - More precision in Spotify Playlist conversion<br/>
734                                                         <br/>
735                                                         <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog" target="_blank">Full Changelog Here</a>
736                                                 </p>
737                                         </div>
738                                 </li>
739                                 <li>
740                                         <div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
741                                         <div class="collapsible-body">
742                                                 <p>
743                                                         <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
744                                                                 <img alt="GNU General Public License" style="border-width:0"
745                                                                                  src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
746                                                         </a><br/>
747                                                         This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GNU General Public License 3.0</a>.
748                                                 </p>
749                                         </div>
750                                 </li>
751                                 <li>
752                                         <div class="collapsible-header waves-effect"><i class="material-icons">favorite</i>Contributions</div>
753                                         <div class="collapsible-body">
754                                                 <h5>You want to contribute to this project? You can do that <b>in different ways!</b></h5>
755                                                 <p>If you know JavaScript, HTML, CSS or Node.js you could contribute writing code, fixing bugs and adding features using the <a href="https://notabug.org/RemixDevs/DeezloaderRemix" target="_blank">Official Repo</a>.</p>
756                                                 <p>If you are good at graphics and design you could help by submitting a new design, you can open a new issue with some design <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new" target="_blank">here</a>.<br>
757                                                         <p>Keep in mind that we are (sorta) following the <a href="https://material.io/" target="_blank">Material Design Principles</a>.</p>
758                                                         If you are good at finding bugs you can help Beta Test the app before release.<br>
759                                                         Join our <a href="https://t.me/DeezloaderRemixCommunity" target="_blank">Telegram Group</a> to be notified when betas come out!</p>
760                                                 <hr>
761                                                 <h5>You want to contribute monetarily? You could make a donation!</h5>
762                                                 <p>If you can donate you can do that with this links.<br>
763                                                         You shoud remember that <b>this is a free project</b> and <b>you should support the artists you love</b> before supporting the developer.<br>
764                                                         Don't feel obligated to donate, I appreciate you anyway!</p>
765                                                 <p>
766                                                         PayPal: <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
767                                                         Bitcoin: 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
768                                                         Ethereum: 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
769                                                 </p>
770                                         </div>
771                                 </li>
772                         </ul>
773                 </div>
774         </div>
775         <div class="modal-footer">
776                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
777         </div>
778 </div>
779
780 <!--##########################################MODAL_TRACKLIST###########################################-->
781 <div id="modal_trackList" class="modal modal-fixed-footer modal-custom-header">
782         <div class="modal-content">
783                 <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
784                         <h4>{{ title }}</h4>
785                         <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
786                         <span class="right hide-on-small-only" v-if="release_date"> {{ release_date }} </span>
787                 </div>
788                 <div class="modal-container">
789                         <table class="highlight col s12">
790                                 <thead>
791                                 <tr>
792                                         <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall }"></td>
793                                 </tr>
794                                 </thead>
795                                 <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
796                                 <tr>
797                                         <td class="center" colspan="6">
798                                                 <div class="preloader-wrapper big active">
799                                                         <div class="spinner-layer">
800                                                                 <div class="circle-clipper left">
801                                                                         <div class="circle"></div>
802                                                                 </div>
803                                                                 <div class="gap-patch">
804                                                                         <div class="circle"></div>
805                                                                 </div>
806                                                                 <div class="circle-clipper right">
807                                                                         <div class="circle"></div>
808                                                                 </div>
809                                                         </div>
810                                                 </div>
811                                         </td>
812                                 </tr>
813                                 </tbody>
814                                 <tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
815                                 </tbody>
816                         </table>
817                 </div>
818         </div>
819         <div class="modal-footer">
820                 <a href="#" id="download_all_tracks" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
821                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
822         </div>
823 </div>
824
825 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
826 <div id="modal_trackListSelective" class="modal modal-fixed-footer modal-custom-header">
827         <div class="modal-content">
828                 <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
829                         <h4>{{ title }} <i v-if="explicit" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h4>
830                         <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
831                         <span class="right hide-on-small-only" v-if="release_date">{{ release_date }}</span>
832                 </div>
833                 <div class="modal-container">
834                         <table class="highlight col s12">
835                                 <thead>
836                                 <tr>
837                                         <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}" v-bind:class="{ 'hide-on-med-and-up' : data.smallonly, 'hide-on-small-only': data.hideonsmall }"></td>
838                                 </tr>
839                                 </thead>
840                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_loadingIndicator" class="hide">
841                                 <tr>
842                                         <td class="center" colspan="6">
843                                                 <div class="preloader-wrapper big active">
844                                                         <div class="spinner-layer">
845                                                                 <div class="circle-clipper left">
846                                                                         <div class="circle"></div>
847                                                                 </div>
848                                                                 <div class="gap-patch">
849                                                                         <div class="circle"></div>
850                                                                 </div>
851                                                                 <div class="circle-clipper right">
852                                                                         <div class="circle"></div>
853                                                                 </div>
854                                                         </div>
855                                                 </div>
856                                         </td>
857                                 </tr>
858                                 </tbody>
859                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
860                                 </tbody>
861                         </table>
862                         <span v-if="label" style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
863                 </div>
864         </div>
865         <div class="modal-footer">
866                 <a href="#" id="download_all_tracks_selective" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
867                 <a href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text"><span class="hide-on-small-only">Download selection<i class="material-icons right">file_download</i></span><i class="material-icons hide-on-med-and-up">file_download</i></a>
868                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
869         </div>
870 </div>
871
872 <!--##########################################MODAL_MSG###########################################-->
873 <div id="modal_msg" class="modal">
874         <div class="modal-content">
875                 <div class="row">
876                         <h4 class="col s12" id="modal_msg_title"></h4>
877                 </div>
878                 <div class="row">
879                         <p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
880                 </div>
881         </div>
882         <div class="modal-footer">
883                 <a href="#" class="modal-close waves-effect waves-light btn">I got it!</a>
884         </div>
885 </div>
886
887 <!--##########################################MODAL_ANALYZER_COUNTRY###########################################-->
888 <div id="modal_link_analyzer_country" class="modal modal-fixed-footer">
889         <div class="modal-content">
890                 <h4 class="col s12">Available Countries for {{ title }}</h4>
891                 <table class="striped col s12">
892                         <thead>
893                                 <tr>
894                                         <th style="width:24px;"></th>
895                                         <th>Country</th>
896                                 </tr>
897                         </thead>
898                         <tbody>
899                                 <tr v-for="cc in countries">
900                                         <td v-for="val in cc">{{ val }}</td>
901                                 </tr>
902                         </tbody>
903                 </table>
904         </div>
905         <div class="modal-footer">
906                 <a href="#" class="modal-close waves-effect waves-light btn">Close</a>
907         </div>
908 </div>
909
910 <!--********************************************MAIN-CONTENT********************************************-->
911 <nav>
912         <div class="nav-wrapper">
913                 <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
914                 <ul class="left hide-on-small-only">
915                         <li>
916                                 <div class="switch">
917                                         <label>
918                                                 <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
919                                                 <input id="nightTimeSwitcher" type="checkbox">
920                                                 <span class="lever"></span>
921                                         </label>
922                                 </div>
923                         </li>
924                 </ul>
925                 <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
926                 <ul id="nav-mobile" class="right hide-on-small-only">
927                         <li>
928                                 <a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
929                                         <i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
930                                 </a>
931                         </li>
932                         <li>
933                                 <a href="#modal_about" class="waves-effect waves-light modal-trigger">
934                                         <i class="material-icons left">star</i> <span class="hide-on-med-and-down">More</span>
935                                 </a>
936                         </li>
937                 </ul>
938         </div>
939 </nav>
940
941 <img src="img/icon.svg" class="circle" id="main_icon"></img>
942
943 <ul id="slide-out" class="sidenav">
944         <li><div class="user-view">
945                 <div class="background"></div>
946                 <a href="#user"><img class="circle" id="side_avatar"></a>
947                 <a href="#name"><span class="white-text name" id="side_user"></span></a>
948                 <a href="#email"><span class="white-text email" id="side_email"></span></a>
949         </div></li>
950         <li><a href="#!" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
951         <li><a href="#!" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
952         <li><a href="#!" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
953         <li><a href="#!" tab-id="tab_link" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i>Link Analyzer</a></li>
954         <li><a href="#!" tab-id="tab_url" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i>Download from URL</a></li>
955         <li><a href="#!" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
956         <li><div class="divider"></div></li>
957         <li><a href="#modal_settings" id="sidenav_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
958         <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">star</i>About</a></li>
959         <li><a href="#!" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
960         </li>
961 </ul>
962
963 <main class="container">
964         <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
965                 <li class="tab"><a class="active" href="#tab_search">Search</a></li>
966                 <li class="tab"><a href="#tab_charts">Charts</a></li>
967                 <li class="tab"><a href="#tab_playlists">Playlists</a></li>
968                 <li class="tab"><a href="#tab_link">Link Analyzer</a></li>
969                 <li class="tab"><a href="#tab_url">Download from URL</a></li>
970                 <li class="tab"><a href="#tab_downloads">Downloads</a></li>
971         </ul>
972
973         <div id="main-content" class="row">
974
975                 <div id="tab_search">
976                         <form id="tab_search_form_search">
977                                 <div class="inline-input-group col s12">
978                                         <input autocomplete="off" id="tab_search_form_search_input_searchString" type="search" class="input" placeholder="Start searching ...">
979                                         <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
980                                 </div>
981                                 <div class="row center">
982                                         <p class="col s3">
983                                                 <label>
984                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
985                                                 <span><i class="material-icons show-on-small-only left deezloader-primary-text">music_note</i><span class="hide-on-med-and-down">Song</span></span>
986                                                 </label>
987                                         </p>
988                                         <p class="col s3">
989                                                 <label>
990                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
991                                                 <span><i class="material-icons show-on-small-only left deezloader-primary-text">album</i><span class="hide-on-med-and-down">Album</span></span>
992                                                 </label>
993                                         </p>
994                                         <p class="col s3">
995                                                 <label>
996                                                 <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
997                                                 <span><i class="material-icons show-on-small-only left deezloader-primary-text">person</i><span class="hide-on-med-and-down">Artist</span></span>
998                                                 </label>
999                                         </p>
1000                                         <p class="col s3">
1001                                                 <label>
1002                                                         <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
1003                                                         <span><i class="material-icons show-on-small-only left deezloader-primary-text">playlist_play</i><span class="hide-on-med-and-down">Playlist</span></span>
1004                                                 </label>
1005                                         </p>
1006                                 </div>
1007                         </form>
1008                         <div id="tab_search_results">
1009                                 <table id="tab_search_table_results" class="striped col s12">
1010                                         <thead class="hide-on-small-only">
1011                                                 <tr class="hide" id="tab_search_table_results_thead_track">
1012                                                         <th style="width: 56px;"><!--cover--></th>
1013                                                         <th>Song</th>
1014                                                         <th>Artist</th>
1015                                                         <th>Album</th>
1016                                                         <th><i class="material-icons">timer</i></th>
1017                                                         <th style="width: 56px;"><!--download_link--></th>
1018                                                 </tr>
1019                                                 <tr class="hide" id="tab_search_table_results_thead_album">
1020                                                         <th style="width: 56px;"><!--cover--></th>
1021                                                         <th>Album</th>
1022                                                         <th>Artist</th>
1023                                                         <th>Songs</th>
1024                                                         <th>Type</th>
1025                                                         <th><!--space--></th>
1026                                                         <th style="width: 56px;"><!--download_link--></th>
1027                                                 </tr>
1028                                                 <tr class="hide" id="tab_search_table_results_thead_artist">
1029                                                         <th style="width: 56px;"><!--cover--></th>
1030                                                         <th>Artist</th>
1031                                                         <th>Albums</th>
1032                                                         <th><!--space--></th>
1033                                                         <th style="width: 56px;"><!--download_link--></th>
1034                                                 </tr>
1035                                                 <tr class="hide" id="tab_search_table_results_thead_playlist">
1036                                                         <th style="width: 56px;"><!--cover--></th>
1037                                                         <th>Name</th>
1038                                                         <th>Songs</th>
1039                                                         <th style="width: 56px;"><!--space--></th>
1040                                                         <th style="width: 56px;"><!--download_link--></th>
1041                                                 </tr>
1042                                         </thead>
1043                                         <tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
1044                                                 <tr>
1045                                                         <td class="center">
1046                                                                 <div class="preloader-wrapper big active">
1047                                                                         <div class="spinner-layer spinner-blue-only">
1048                                                                                 <!-- Spinner Code -->
1049                                                                                 <div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
1050                                                                         </div>
1051                                                                 </div>
1052                                                         </td>
1053                                                 </tr>
1054                                         </tbody>
1055                                         <tbody id="tab_search_table_results_tbody_results"></tbody>
1056                                         <tbody id="tab_search_table_results_tbody_noResults" class="hide">
1057                                                 <tr>
1058                                                         <td class="center">Nothing found!</td>
1059                                                 </tr>
1060                                         </tbody>
1061                                 </table>
1062                         </div>
1063                 </div>
1064
1065                 <div id="tab_charts">
1066                         <div class="input-field col s12">
1067                                 <select id="tab_charts_select_country" class="icons">
1068                                         <!--All country selects have to be like the following example:
1069                                         <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
1070                                         -->
1071                                 </select>
1072                                 <label>Country</label>
1073                         </div>
1074                         <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
1075                         <table id="tab_charts_table_charts" class="striped">
1076                                 <thead class="hide-on-small-only">
1077                                         <tr>
1078                                                 <th>#</th>
1079                                                 <th style="width: 56px;"><!--cover--></th>
1080                                                 <th>Song</th>
1081                                                 <th>Artist</th>
1082                                                 <th>Album</th>
1083                                                 <th><i class="material-icons">timer</i></th>
1084                                                 <th style="width: 56px;"><!--download_link--></th>
1085                                         </tr>
1086                                 </thead>
1087                                 <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
1088                                         <tr>
1089                                                 <td colspan="7" class="center">
1090                                                         <div class="preloader-wrapper big active">
1091                                                                 <div class="spinner-layer spinner-blue-only">
1092                                                                         <!-- Spinner Code -->
1093                                                                         <div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
1094                                                                 </div>
1095                                                         </div>
1096                                                 </td>
1097                                         </tr>
1098                                 </tbody>
1099                                 <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
1100                         </table>
1101                 </div>
1102
1103                 <div id="tab_playlists" class="row">
1104                         <div class="col s12">
1105                                 <button class="btn-flat btn-large waves-effect deezloader-primary white-text" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlists</button>
1106                         </div>
1107                         <div class="col s12">
1108                                 <table class="striped">
1109                                         <thead>
1110                                                 <tr>
1111                                                         <th style="width: 56px;"><!--cover--></th>
1112                                                         <th>Name</th>
1113                                                         <th>Songs</th>
1114                                                         <th style="width: 56px;"><!--inspect_playlist--></th>
1115                                                         <th style="width: 56px;"><!--download_link--></th>
1116                                                 </tr>
1117                                         </thead>
1118                                         <tbody id="table_personal_playlists">
1119                                         </tbody>
1120                                 </table>
1121                         </div>
1122                 </div>
1123
1124                 <div id="tab_link">
1125                         <div class="inline-input-group">
1126                                 <input autocomplete="off" type="search" id="link_analyzer_url" class="input" placeholder="Song/Album URL">
1127                                 <button id="link_analyzer_go" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
1128                         </div>
1129
1130                         <div id="link_analyzer_loading" class="center" hidden>
1131                                 <div class="preloader-wrapper big active">
1132                                         <div class="spinner-layer spinner-blue-only">
1133                                                 <!-- Spinner Code -->
1134                                                 <div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
1135                                         </div>
1136                                 </div>
1137                         </div>
1138
1139                         <div id="link_analyzer_start">
1140                                 <p class="secondary-text center">You can use this section to find out more information about the link you are trying to download<br/>
1141                                 This is usefull if you're trying to download some tracks that are not available in your country and want to know where they are available</p>
1142                         </div>
1143
1144                         <div v-if="d.title" id="link_analyzer_song" class="link_analyzer_info">
1145                                 <div id="link_analyzer_song_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
1146                                         <img v-bind:src=" d.album.cover_medium "/>
1147                                         <a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn" style="width:100%;">See Available Countries</a>
1148                                 </div>
1149                                 <div id="link_analyzer_song_maininfo" class="link_analyzer_maininfo">
1150                                         <h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} {{ d.version }}<i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
1151                                         <p style="margin-top:0px;">by <b>{{ d.artist.name }}</b></br>
1152                                         in <b>{{ d.album.title }}</b></p>
1153                                         <hr class="hide-on-small-only">
1154                                         <a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b>Alternative Link</b></a>
1155                                         <table class="striped">
1156                                                 <tbody>
1157                                                         <tr v-if="d.isrc"><td><b>ISRC</b></td><td>{{ d.isrc }}</td></tr>
1158                                                         <tr v-if="d.duration"><td><b>Duration</b></td><td>{{ d.duration_string }}</td></tr>
1159                                                         <tr v-if="d.disk_number"><td><b>Disc Number</b></td><td>{{ d.disk_number }}</td></tr>
1160                                                         <tr v-if="d.track_position"><td><b>Track Number</b></td><td>{{ d.track_position }}</td></tr>
1161                                                         <tr v-if="d.release_date"><td><b>Release Date</b></td><td>{{ d.release_date }}</td></tr>
1162                                                         <tr v-if="d.bpm"><td><b>BPM</b></td><td>{{ d.bpm }}</td></tr>
1163                                                 </tbody>
1164                                         </table>
1165                                         <a href="#modal_link_analyzer_country" class="modal-trigger waves-effect waves-light btn hide-on-med-and-up" style="width:100%;">See Available Countries</a>
1166                                 </div>
1167                         </div>
1168
1169                         <div v-if="d.title" id="link_analyzer_album" class="link_analyzer_info">
1170                                 <div id="link_analyzer_album_sideinfo" class="hide-on-small-only link_analyzer_sideinfo">
1171                                         <img v-bind:src=" d.cover_medium "/>
1172                                         <a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn" style="width:100%;">Show Tracklist</a>
1173                                 </div>
1174                                 <div id="link_analyzer_album_maininfo" class="link_analyzer_maininfo">
1175                                         <h5 style="margin-bottom:8px; margin-top:0px;">{{ d.title }} <i v-if="d.explicit_lyrics" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h5>
1176                                         <p style="margin-top:0px;">by <b>{{ d.artist.name }}</b></br>
1177                                         <b>{{ d.nb_tracks }}</b> {{ d.nb_tracks==1 ? 'track' : 'tracks' }}</p>
1178                                         <hr class="hide-on-small-only">
1179                                         <a v-if="d.alternative" v-bind:href="'d.alternative.link'"><b>Alternative Link</b></a>
1180                                         <table class="striped">
1181                                                 <tbody>
1182                                                         <tr v-if="d.upc"><td><b>UPC</b></td><td>{{ d.upc }}</td></tr>
1183                                                         <tr v-if="d.duration"><td><b>Duration</b></td><td>{{ d.duration_string }}</td></tr>
1184                                                         <tr v-if="d.release_date"><td><b>Release Date</b></td><td>{{ d.release_date }}</td></tr>
1185                                                         <tr v-if="d.label"><td><b>Label</b></td><td>{{ d.label }}</td></tr>
1186                                                         <tr v-if="d.record_type"><td><b>Record Type</b></td><td>{{ d.record_type.substring(0,1).toUpperCase()+ d.record_type.substring(1) }}</td></tr>
1187                                                         <tr v-if="d.genres_string"><td><b>Genres</b></td><td>{{ d.genres_string }}</td></tr>
1188                                                 </tbody>
1189                                         </table>
1190                                         <a v-on:click="showTrackListSelective(d.link)" class="waves-effect waves-light btn hide-on-med-and-up" style="width:100%;">Show Tracklist</a>
1191                                 </div>
1192                         </div>
1193                 </div>
1194
1195                 <div id="tab_url">
1196                         <div class="inline-input-group">
1197                                 <input autocomplete="off" type="search" id="song_url" class="input" placeholder="Song/Playlist/Album/Artist URL, separated by ';'">
1198                                 <button id="download_from_url_button" class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">get_app</i></button>
1199                         </div>
1200                 </div>
1201
1202                 <div id="tab_downloads">
1203                         <div class="row">
1204                                 <div class="col s12 m4">
1205                                         <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1206                                                 Open Downloads Folder
1207                                         </button>
1208                                 </div>
1209                                 <div class="col s12 m4">
1210                                         <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1211                                                 Cancel All Downloads
1212                                         </button>
1213                                 </div>
1214                                 <div class="col s12 m4">
1215                                         <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1216                                                 Clear List
1217                                         </button>
1218                                 </div>
1219                         </div>
1220                         <table id="tab_downloads_table_downloads" class="row">
1221                                 <thead>
1222                                         <tr>
1223                                                 <th>Name</th>
1224                                                 <th>Size</th>
1225                                                 <th>Downloaded</th>
1226                                                 <th>Failed</th>
1227                                                 <th style="width: 25%;"><!--progress--></th>
1228                                                 <th style="width: 56px;"><!--event buttons--></th>
1229                                         </tr>
1230                                 </thead>
1231                                 <tbody></tbody>
1232                         </table>
1233                 </div>
1234
1235         </div>
1236 </main>
1237
1238 <div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
1239         <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
1240                 <i class="large material-icons">keyboard_arrow_up</i>
1241         </a>
1242 </div>
1243 <audio id="preview-track">
1244         <source id="preview-track_source" src="" type="audio/mpeg">
1245 </audio>
1246
1247 <div id="modal_quality" class="smallmodal">
1248         <!-- Modal content -->
1249         <div class="smallmodal-content">
1250                 <a onclick="modalQualityButton(9)" href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download FLAC</a><br>
1251                 <a onclick="modalQualityButton(3)" href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download MP3 320kbps</a><br>
1252                 <a onclick="modalQualityButton(1)" href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download MP3 128kbps</a><br>
1253         </div>
1254 </div>
1255
1256 <footer class="deezloader-black darken-1 left page-footer hide-on-med-and-down valign-wrapper">
1257                         <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader original code by ZzMTV.</p>
1258 </footer>
1259
1260 <script>if (typeof module === 'object') {
1261         window.module = module;
1262         module = undefined;
1263 }</script>
1264
1265 <script type="text/javascript" src="js/socket.io.js"></script>
1266 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
1267 <script type="text/javascript" src="js/materialize.min.js"></script>
1268 <script type="text/javascript" src="js/vue.min.js"></script>
1269 <script type="text/javascript" src="js/appBase.js"></script>
1270 <script type="text/javascript" src="js/frontend.js"></script>
1271 <script>if (window.module) module = window.module;</script>
1272 </body>
1273 </html>