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.0</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.0</b><br/>
569               - New login workflow<br/>
570               - Improved UI<br/>
571               - Revamped album, artists and playlist modals<br/>
572               - Added option to download the track in a different quality over the one selected (right click on d/l button)<br/>
573               - Added autologin by default to fix re-connection problems<br/>
574               - Re-added fallback on track errors<br/>
575               - Fixed Default Settings button<br/>
576               - Fixed links not working in server mode<br/>
577               - Fixed UI problems when on mobile view (responsive site)<br/>
578               - Fixed Settings menu not being populated on mobile view<br/>
579               - Fixed problem with the artist tag when downloading playlists and albums<br/>
580               - Fixed playlist numbering on files (now it doesn't override the trackNumber tag)<br/>
581               - Fixed aritst artwork not saving<br/>
582               <br/>
583                                                         <b>Version 4.1.8</b><br/>
584                                                         - Fix the issue where some people wasn't able to log in from the Netherlands<br/>
585                                                         <br/>
586                                                         <b>Version 4.1.7</b><br/>
587                                                         - Partial rewrite of the app (4.2.0 will have the other half)<br/>
588                                                         - Fixed login security issue<br/>
589                                                         - Better Spotify integration (now conversion uses ISRC if found)<br/>
590                                                         - Fixed France Charts not showing up<br/>
591                                                         - Albums with only one track will download as a single track<br/>
592                                                         - Added option %genre% for Track and Album names<br/>
593                                                         - Added support for subfolders in Album name<br/>
594                                                         - Minor changes to the UI<br/>
595                                                         <br/>
596                                                         <b>Version 4.1.6</b><br/>
597                                                         - Fixed Spotify Playlist problem<br/>
598                                                         - Fixed security issue where Client Secret is exposed in Compiled binaries<br/>
599                                                         - 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/>
600                                                         - Minor bugfixes and improvments<br/>
601                                                         <br/>
602                                                         <b>Version 4.1.5</b><br/>
603                                                         - Fixed %explicit% for album names<br/>
604                                                         - Added Contributions page<br/>
605                                                         - Fixed some spelling issues<br/>
606                                                         <br/>
607                                                         <b>Version 4.1.4</b><br/>
608                                                         - Improved Privacy in Server Mode<br/>
609                                                         - Cleaned up some files<br/>
610                                                         - Fixed Day Month position in DATE tag<br/>
611                                                         - Fixed %explicit% in name templates<br/>
612                                                         - Fixed artist download<br/>
613                                                         - Fixed FLAC Problems (not all of them)<br/>
614                                                         - Fixed select folder cancel bug<br/>
615                                                         - Added Update Notification<br/>
616                                                         - Added default ID3 DATE tag format<br/>
617                                                         - Added minimize to system tray<br/>
618                                                         - Added multitag separator for FLACS<br/>
619                                                         - Added hyperlinks to artist & album<br/>
620                                                         - Added option to better remove duplicates in the artist tag (Still in BETA)<br/>
621                                                         - Added option to save the track with the full list of artist in the filename<br/>
622                                                         - Added option to overwrite padding size<br/>
623                                                         - Added "Download All" button in modals<br/>
624                                                         - Removed ReplayGain as default setting<br/>
625                                                         <br/>
626                                                         <b>Version 4.1.3</b><br/>
627                                                         - Playlist and Album tracks now have fallback support<br/>
628                                                         - M3U files now works correctly<br/>
629                                                         - Fixed problems with tags<br/>
630                                                         - Added option %explicit% for Track and Album names (Will add "(Explicit)" in that position if it's explicit)<br/>
631                                                         - Added option to remove "(Album Version)" from track title<br/>
632                                                         - Added options to select which format should the date tag have<br/>
633                                                         - Added option to not fallback if desired bitrate is not available<br/>
634                                                         - Logging enhancements<br/>
635                                                         - Other minor bug-fixing<br/>
636                                                         <br/>
637                                                         <b>Version 4.1.2</b><br/>
638                                                         - Fixed Login Problem (for real this time)<br/>
639                                                         - Fixed Login after refresh<br/>
640                                                         - Regionlock free download<br/>
641                                                         - Added support for download of User Uploaded tracks<br/>
642                                                         - Now you can select which tags your songs has<br/>
643                                                         - Fixed selecting problem<br/>
644                                                         - Tracks without preview will display a disabled play button<br/>
645                                                         - Previews inside modal will stop with modal close<br/>
646                                                         - New %label% field for tracks and albums<br/>
647                                                         - Added option to create folder for CDs<br/>
648                                                         - Added rename option for cover file<br/>
649                                                         - Added option to download Artist artwork<br/>
650                                                         - Added option do log downloaded alternative tracks<br/>
651                                                         - Fixed some minor bugs<br/>
652                                                         <br/>
653                                                         <b>Version 4.1.1</b><br/>
654                                                         - Fixed Login Problem (again)<br/>
655                                                         - Added Dark Mode<br/>
656                                                         - Added smaller cover option<br/>
657                                                         - Added support for lower bitrates<br/>
658                                                         - Added "Stop All Downloads" button<br/>
659                                                         - Added support for Spotify Playlist preview<br/>
660                                                         - Added support for PNG covers<br/>
661                                                         - Re-Added Date Tag<br/>
662                                                         - Fixed same cover for same track in different albums bug<br/>
663                                                         - Fixed login issue from repository build<br/>
664                                                         <br/>
665                                                         <b>Version 4.1.0</b><br/>
666                                                         - New UI (not completly optimized for small screens)<br/>
667                                                         - Fixed login problems<br/>
668                                                         - Fixed %type% parameter not working<br/>
669                                                         - Fixed year tagging problem<br/>
670                                                         - Fixed playlist file not containing tracks<br/>
671                                                         - More precision in Spotify Playlist conversion<br/>
672                                                         <br/>
673                                                         <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog" target="_blank">Full Changelog Here</a>
674                                                 </p>
675                                         </div>
676                                 </li>
677                                 <li>
678                                         <div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
679                                         <div class="collapsible-body">
680                                                 <p>
681                                                         <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
682                                                                 <img alt="GNU General Public License" style="border-width:0"
683                                                                                  src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
684                                                         </a><br/>
685                                                         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>.
686                                                 </p>
687                                         </div>
688                                 </li>
689         <li>
690           <div class="collapsible-header waves-effect"><i class="material-icons">favorite</i>Contributions</div>
691           <div class="collapsible-body">
692             <h5>You want to contribute to this project? You can do that <b>in different ways!</b></h5>
693             <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>
694             <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>
695                 <p>Keep in mind that we are (sorta) following the <a href="https://material.io/" target="_blank">Material Design Principles</a>.</p>
696                 If you are good at finding bugs you can help Beta Test the app before release.<br>
697                 Join our <a href="https://t.me/DeezloaderRemixCommunity" target="_blank">Telegram Group</a> to be notified when betas come out!</p>
698             <hr>
699             <h5>You want to contribute monetarily? You could make a donation!</h5>
700             <p>If you can donate you can do that with this links.<br>
701               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>
702               Don't feel obligated to donate, I appreciate you anyway!</p>
703             <p>
704               PayPal: <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br>
705               Bitcoin: 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
706               Ethereum: 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
707             </p>
708           </div>
709         </li>
710                         </ul>
711                 </div>
712         </div>
713         <div class="modal-footer">
714                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
715         </div>
716 </div>
717
718 <!--##########################################MODAL_TRACKLIST###########################################-->
719 <div id="modal_trackList" class="modal modal-fixed-footer modal-custom-header">
720         <div class="modal-content">
721     <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
722       <h4>{{ title }}</h4>
723       <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
724       <span class="right hide-on-small-only" v-if="release_date"> {{ release_date }} </span>
725     </div>
726     <div class="row modal-container">
727                         <table class="highlight col s12">
728                                 <thead>
729                                 <tr>
730                                         <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>
731                                 </tr>
732                                 </thead>
733                                 <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
734                                 <tr>
735                                         <td class="center" colspan="6">
736                                                 <div class="preloader-wrapper big active">
737                                                         <div class="spinner-layer">
738                                                                 <div class="circle-clipper left">
739                                                                         <div class="circle"></div>
740                                                                 </div>
741                                                                 <div class="gap-patch">
742                                                                         <div class="circle"></div>
743                                                                 </div>
744                                                                 <div class="circle-clipper right">
745                                                                         <div class="circle"></div>
746                                                                 </div>
747                                                         </div>
748                                                 </div>
749                                         </td>
750                                 </tr>
751                                 </tbody>
752                                 <tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
753                                 </tbody>
754                         </table>
755                 </div>
756         </div>
757         <div class="modal-footer">
758     <a href="#" id="download_all_tracks" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
759                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
760         </div>
761 </div>
762
763 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
764 <div id="modal_trackListSelective" class="modal modal-fixed-footer modal-custom-header">
765         <div class="modal-content">
766     <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
767       <h4>{{ title }} <i v-if="explicit" class="material-icons valignicon materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i></h4>
768       <h6 v-if="metadata" style="display: inline;">{{ metadata }}</h6>
769       <span class="right hide-on-small-only" v-if="release_date">{{ release_date }}</span>
770     </div>
771     <div class="row modal-container">
772                         <table class="highlight col s12">
773                                 <thead>
774                                 <tr>
775                                         <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>
776                                 </tr>
777                                 </thead>
778                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_loadingIndicator" class="hide">
779                                 <tr>
780                                         <td class="center" colspan="6">
781                                                 <div class="preloader-wrapper big active">
782                                                         <div class="spinner-layer">
783                                                                 <div class="circle-clipper left">
784                                                                         <div class="circle"></div>
785                                                                 </div>
786                                                                 <div class="gap-patch">
787                                                                         <div class="circle"></div>
788                                                                 </div>
789                                                                 <div class="circle-clipper right">
790                                                                         <div class="circle"></div>
791                                                                 </div>
792                                                         </div>
793                                                 </div>
794                                         </td>
795                                 </tr>
796                                 </tbody>
797                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
798                                 </tbody>
799                         </table>
800                 </div>
801         </div>
802         <div class="modal-footer">
803     <a href="#" id="download_all_tracks_selective" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
804                 <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>
805     <a href="#" class="modal-close waves-effect btn-flat">Close</a>
806         </div>
807 </div>
808
809 <!--##########################################MODAL_MSG###########################################-->
810 <div id="modal_msg" class="modal">
811         <div class="modal-content">
812                 <div class="row">
813                         <h4 class="col s12" id="modal_msg_title"></h4>
814                 </div>
815                 <div class="row">
816                         <p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
817                 </div>
818         </div>
819         <div class="modal-footer">
820                 <a href="#" class="modal-close waves-effect waves-light btn">I got it!</a>
821         </div>
822 </div>
823
824 <!--********************************************MAIN-CONTENT********************************************-->
825 <nav>
826   <div class="nav-wrapper">
827     <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
828     <ul class="left hide-on-small-only">
829       <li>
830         <div class="switch">
831           <label>
832             <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
833             <input id="nightTimeSwitcher" type="checkbox">
834             <span class="lever"></span>
835           </label>
836         </div>
837       </li>
838     </ul>
839     <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
840     <ul id="nav-mobile" class="right hide-on-small-only">
841       <li>
842                                 <a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
843                                         <i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
844                                 </a>
845                         </li>
846                         <li>
847                                 <a href="#modal_about" class="waves-effect waves-light modal-trigger">
848                                         <i class="material-icons left">star</i> <span class="hide-on-med-and-down">More</span>
849                                 </a>
850                         </li>
851     </ul>
852   </div>
853 </nav>
854
855 <img src="img/icon.svg" class="circle" id="main_icon"></img>
856
857 <ul id="slide-out" class="sidenav">
858   <li><div class="user-view">
859     <div class="background"></div>
860     <a href="#user"><img class="circle" id="side_avatar"></a>
861     <a href="#name"><span class="white-text name" id="side_user"></span></a>
862     <a href="#email"><span class="white-text email" id="side_email"></span></a>
863   </div></li>
864   <li><a href="#!" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
865   <li><a href="#!" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
866   <li><a href="#!" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
867   <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>
868   <li><a href="#!" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
869   <li><div class="divider"></div></li>
870   <li><a href="#modal_settings" id="sidenav_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
871   <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">star</i>About</a></li>
872   <li><a href="#!" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
873   </li>
874 </ul>
875
876 <main class="container">
877   <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
878     <li class="tab"><a class="active" href="#tab_search">Search</a></li>
879     <li class="tab"><a href="#tab_charts">Charts</a></li>
880     <li class="tab"><a href="#tab_playlists">Playlists</a></li>
881     <li class="tab"><a href="#tab_url">Download from URL</a></li>
882     <li class="tab"><a href="#tab_downloads">Downloads</a></li>
883   </ul>
884
885   <div id="main-content" class="row">
886
887     <div id="tab_search">
888       <form id="tab_search_form_search">
889         <div class="inline-input-group col s12">
890           <input autocomplete="off" id="tab_search_form_search_input_searchString" type="text" class="input" placeholder="Start searching ...">
891           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
892         </div>
893         <div class="row center">
894           <p class="col s3">
895             <label>
896             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
897             <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>
898             </label>
899           </p>
900           <p class="col s3">
901             <label>
902             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
903             <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>
904             </label>
905           </p>
906           <p class="col s3">
907             <label>
908             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
909             <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>
910             </label>
911           </p>
912           <p class="col s3">
913             <label>
914               <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
915               <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>
916             </label>
917           </p>
918         </div>
919       </form>
920       <div id="tab_search_results">
921                                 <table id="tab_search_table_results" class="striped col s12">
922                                         <thead class="hide-on-small-only">
923                                         <tr class="hide" id="tab_search_table_results_thead_track">
924                                                 <th style="width: 56px;"><!--cover--></th>
925                                                 <th>Song</th>
926                                                 <th>Artist</th>
927                                                 <th>Album</th>
928                                                 <th><i class="material-icons">timer</i></th>
929                                                 <th style="width: 56px;"><!--download_link--></th>
930                                         </tr>
931                                         <tr class="hide" id="tab_search_table_results_thead_album">
932                                                 <th style="width: 56px;"><!--cover--></th>
933                                                 <th>Album</th>
934                                                 <th>Artist</th>
935                                                 <th>Songs</th>
936                                                 <th>Type</th>
937                                                 <th><!--space--></th>
938                                                 <th style="width: 56px;"><!--download_link--></th>
939                                         </tr>
940                                         <tr class="hide" id="tab_search_table_results_thead_artist">
941                                                 <th style="width: 56px;"><!--cover--></th>
942                                                 <th>Artist</th>
943                                                 <th>Albums</th>
944                                                 <th><!--space--></th>
945                                                 <th style="width: 56px;"><!--download_link--></th>
946                                         </tr>
947                                         <tr class="hide" id="tab_search_table_results_thead_playlist">
948                                                 <th style="width: 56px;"><!--cover--></th>
949                                                 <th>Name</th>
950                                                 <th>Songs</th>
951               <th style="width: 56px;"><!--space--></th>
952                                                 <th style="width: 56px;"><!--download_link--></th>
953                                         </tr>
954                                         </thead>
955                                         <tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
956                                         <tr>
957                                                 <td class="center">
958                                                           <div class="preloader-wrapper big active">
959                                                             <div class="spinner-layer spinner-blue-only">
960                                                               <!-- Spinner Code -->
961                                                               <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>
962                                                             </div>
963                                                           </div>
964                                                 </td>
965                                         </tr>
966                                         </tbody>
967                                         <tbody id="tab_search_table_results_tbody_results"></tbody>
968                                         <tbody id="tab_search_table_results_tbody_noResults" class="hide">
969                                         <tr>
970                                                 <td class="center">Nothing found!</td>
971                                         </tr>
972                                         </tbody>
973                                 </table>
974                         </div>
975     </div>
976
977     <div id="tab_charts">
978       <div class="input-field col s12">
979         <select id="tab_charts_select_country" class="icons">
980           <!--All country selects have to be like the following example:
981           <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
982           -->
983         </select>
984         <label>Country</label>
985       </div>
986       <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
987       <table id="tab_charts_table_charts" class="striped">
988         <thead class="hide-on-small-only">
989           <tr>
990             <th>#</th>
991             <th style="width: 56px;"><!--cover--></th>
992             <th>Song</th>
993             <th>Artist</th>
994             <th>Album</th>
995             <th><i class="material-icons">timer</i></th>
996             <th style="width: 56px;"><!--download_link--></th>
997           </tr>
998         </thead>
999         <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
1000           <tr>
1001             <td colspan="7" class="center">
1002                                                         <div class="preloader-wrapper big active">
1003                                                           <div class="spinner-layer spinner-blue-only">
1004                                                             <!-- Spinner Code -->
1005                                                             <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>
1006                                                           </div>
1007                                                         </div>
1008             </td>
1009           </tr>
1010         </tbody>
1011         <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
1012       </table>
1013     </div>
1014
1015     <div id="tab_playlists" class="row">
1016       <div class="col s12">
1017         <button class="btn-flat btn-large waves-effect deezloader-primary white-text" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlists</button>
1018       </div>
1019       <div class="col s12">
1020         <table class="striped">
1021           <thead>
1022             <tr>
1023               <th style="width: 56px;"><!--cover--></th>
1024               <th>Name</th>
1025               <th>Songs</th>
1026               <th style="width: 56px;"><!--inspect_playlist--></th>
1027               <th style="width: 56px;"><!--download_link--></th>
1028             </tr>
1029           </thead>
1030           <tbody id="table_personal_playlists">
1031           </tbody>
1032         </table>
1033       </div>
1034     </div>
1035
1036     <div id="tab_url">
1037       <form id="tab_url_form_url" class="row">
1038         <div class="inline-input-group">
1039           <input autocomplete="off" type="text" id="song_url" class="input" placeholder="Song/Playlist/Album/Artist URL, separated by ';'">
1040           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">get_app</i></button>
1041         </div>
1042       </form>
1043     </div>
1044
1045     <div id="tab_downloads">
1046       <div class="row">
1047         <div class="col s12 m4">
1048           <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1049             Open Downloads Folder
1050           </button>
1051         </div>
1052         <div class="col s12 m4">
1053           <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1054             Cancel All Downloads
1055           </button>
1056         </div>
1057         <div class="col s12 m4">
1058           <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
1059             Clear List
1060           </button>
1061         </div>
1062       </div>
1063       <table id="tab_downloads_table_downloads" class="row">
1064         <thead>
1065           <tr>
1066             <th>Name</th>
1067             <th>Size</th>
1068             <th>Downloaded</th>
1069             <th>Failed</th>
1070             <th style="width: 25%;"><!--progress--></th>
1071             <th style="width: 56px;"><!--event buttons--></th>
1072           </tr>
1073         </thead>
1074         <tbody></tbody>
1075       </table>
1076     </div>
1077
1078   </div>
1079 </main>
1080
1081 <div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
1082   <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
1083     <i class="large material-icons">keyboard_arrow_up</i>
1084   </a>
1085 </div>
1086 <audio id="preview-track">
1087   <source id="preview-track_source" src="" type="audio/mpeg">
1088 </audio>
1089
1090 <div id="modal_quality" class="smallmodal">
1091   <!-- Modal content -->
1092   <div class="smallmodal-content">
1093     <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>
1094     <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>
1095     <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>
1096   </div>
1097 </div>
1098
1099 <footer class="deezloader-black darken-1 left page-footer hide-on-med-and-down valign-wrapper">
1100       <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader original code by ZzMTV.</p>
1101 </footer>
1102
1103 <script>if (typeof module === 'object') {
1104         window.module = module;
1105         module = undefined;
1106 }</script>
1107
1108 <script type="text/javascript" src="js/socket.io.js"></script>
1109 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
1110 <script type="text/javascript" src="js/materialize.min.js"></script>
1111 <script type="text/javascript" src="js/vue.min.js"></script>
1112 <script type="text/javascript" src="js/appBase.js"></script>
1113 <script type="text/javascript" src="js/frontend.js"></script>
1114 <script>if (window.module) module = window.module;</script>
1115 </body>
1116 </html>