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