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