3a3e55a20646cea795c42cc6db43802b2d80c4af
[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.1.3</span>
20
21 <div id="title-bar" class="deezloader-black">
22         <div class="resize-padding" style="width: 100%; height: 3px;"></div>
23         <div class="resize-padding" style="width: 3px; height: 31px;"></div>
24         <div id="title">Deezloader Remix v<span id="application_version"></span></div>
25
26         <div id="title-bar-btns">
27                 <button id="min-btn"><i class="material-icons">remove</i></button>
28                 <button id="max-btn"><i class="material-icons">add</i></button>
29                 <button id="close-btn"><i class="material-icons">close</i></button>
30         </div>
31
32         <div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
33 </div>
34
35 <!--#############################################INITIALIZING-SCREEN############################################-->
36 <div id="initializing" class="deezloader-black valign-wrapper">
37         <div class="modal-content container" id="login-page">
38                 <div class="card">
39                         <div class="card-content">
40                                 <span class="card-title">Please login to your deezer account.</span>
41                                 <h6 class="red-text" id="login-res-text"></h6>
42                                 <div class="input-field col s12">
43                                         <input type="text" id="modal_login_input_username"/>
44                                         <label for="modal_login_input_username">Email</label>
45                                 </div>
46                                 <div class="input-field col s12">
47                                         <input type="password" id="modal_login_input_password"/>
48                                         <label for="modal_login_input_password">Password</label>
49                                 </div>
50                         </div>
51                         <div class="card-action row">
52         <div class="col s12 m2 right center" id="modal_login_autologin">
53           <label>
54             <input type="checkbox" class="filled-in" id="modal_login_input_autologin"/>
55             <span>Remember me</span>
56           </label>
57                                 </div>
58                                 <a href="#" class="deezloader-primary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_login">Log in</a>
59                                 <a href="#" class="deezloader-secondary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_signup">Sign up</a>
60                         </div>
61                 </div>
62         </div>
63 </div>
64
65 <!--#############################################MODAL_SETTINGS############################################-->
66 <div id="modal_settings" class="modal modal-fixed-footer">
67         <div class="modal-content">
68                 <div class="row">
69                         <h4 class="col s12">Settings</h4>
70                 </div>
71                 <div class="row">
72                         <div class="input-field col s12 m6">
73                                 <i class="material-icons prefix">label</i>
74                                 <input type="text" id="modal_settings_input_trackNameTemplate"/>
75                                 <label for="modal_settings_input_trackNameTemplate">Track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
76           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
77                         </div>
78                         <div class="input-field col s12 m6">
79                                 <i class="material-icons prefix">label</i>
80                                 <input type="text" id="modal_settings_input_playlistTrackNameTemplate"/>
81                                 <label for="modal_settings_input_playlistTrackNameTemplate">Playlist track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
82           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
83                         </div>
84                 </div>
85     <div class="row">
86                         <div class="input-field col s12 m6">
87                                 <i class="material-icons prefix">label</i>
88                                 <input type="text" id="modal_settings_input_albumTrackNameTemplate"/>
89                                 <label for="modal_settings_input_albumTrackNameTemplate">Album track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
90           data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
91                         </div>
92                         <div class="input-field col s12 m6">
93                                 <i class="material-icons prefix">label</i>
94                                 <input type="text" id="modal_settings_input_albumNameTemplate"/>
95                                 <label for="modal_settings_input_albumNameTemplate">Album names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
96           data-tooltip="Supported variables are: %year%, %artist%, %type%, %album%, %explicit% and %label%">info_outline</i></label>
97                         </div>
98                 </div>
99     <div class="row">
100                         <div class="input-field col s12 m6">
101                                 <i class="material-icons prefix">label</i>
102                                 <input type="text" id="modal_settings_input_coverImageTemplate"/>
103                                 <label for="modal_settings_input_albumTrackNameTemplate">Cover Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
104           data-tooltip="Supported variables are: %artist% and %name%">info_outline</i></label>
105                         </div>
106                         <div class="input-field col s12 m6">
107                                 <i class="material-icons prefix">label</i>
108                                 <input type="text" id="modal_settings_input_artistImageTemplate"/>
109                                 <label for="modal_settings_input_albumNameTemplate">Artist Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
110           data-tooltip="Supported variables are: %artist%">info_outline</i></label>
111                         </div>
112                 </div>
113                 <div class="row">
114                         <div class="input-field col s12 m6">
115                                 <i class="material-icons prefix">label</i>
116                                 <select name="artworkSize" id="modal_settings_select_artworkSize">
117           <option value="1400">1400x1400</option>
118           <option value="1200">1200x1200</option>
119           <option value="1000">1000x1000</option>
120           <option value="800">800x800</option>
121           <option value="500">500x500</option>
122           <option value="250">250x250</option>
123                                 </select>
124                                 <label for="modal_settings_select_artworkSize">Artwork size</label>
125                         </div>
126       <div class="input-field col s12 m6">
127                                 <i class="material-icons prefix">label</i>
128                                 <select name="maxBitrate" id="modal_settings_select_maxBitrate">
129           <option value="9">FLAC 1411kbps</option>
130           <option value="3">MP3 320kbps</option>
131           <option value="1">MP3 128kbps</option>
132                                 </select>
133                                 <label for="modal_settings_select_maxBitrate">Downloaded bitrate</label>
134                         </div>
135                 </div>
136     <div class="row">
137                         <div class="input-field col s12 m6">
138                                 <i class="material-icons prefix">label</i>
139                                 <select name="chartsCountry" id="modal_settings_select_chartsCounrty">
140                                 </select>
141                                 <label for="modal_settings_select_chartsCounrty">Default Country for Charts</label>
142                         </div>
143       <div class="input-field col s12 m6">
144                                 <i class="material-icons prefix">label</i>
145                                 <select name="multitagSeparator" id="modal_settings_select_multitagSeparator">
146                                         <option value="null">Null Character</option>
147           <option value=",">,</option>
148           <option value=", ">, with space</option>
149                                         <option value="/">/</option>
150           <option value=" / ">/ with space</option>
151                                         <option value=";">;</option>
152           <option value="; ">; with space</option>
153                                 </select>
154                                 <label for="modal_settings_select_multitagSeparator">Multitag Separator</label>
155                         </div>
156                 </div>
157     <div class="row">
158                         <div class="input-field col s12 m6">
159                                 <i class="material-icons prefix">label</i>
160                                 <select name="dateFormat" id="modal_settings_select_dateFormat">
161           <option value="0">YMD</option>
162                                         <option value="1">DMY</option>
163                                         <option value="2">MDY</option>
164           <option value="3">YDM</option>
165                                 </select>
166                                 <label for="modal_settings_select_dateFormat">Date Format</label>
167                         </div>
168       <div class="input-field col s12 m6">
169                                 <i class="material-icons prefix">label</i>
170                                 <select name="dateFormatYear" id="modal_settings_select_dateFormatYear">
171           <option value="2">2</option>
172                                         <option value="4">4</option>
173                                 </select>
174                                 <label for="modal_settings_select_dateFormatYear">Number of digits for the year (only in date tag)</label>
175                         </div>
176                 </div>
177                 <div class="row">
178                         <div class="input-field col s12">
179                                 <i class="material-icons prefix">label</i>
180                                 <input type="text" id="modal_settings_input_downloadTracksLocation"/>
181                                 <label for="modal_settings_input_downloadTracksLocation">Download location</label>
182                         </div>
183                 </div>
184     <div class="row">
185                         <div class="input-field col s12 m6">
186                                 <i class="material-icons prefix">label</i>
187                                 <input type="number" id="modal_settings_number_queueConcurrency" min="1"/>
188                                 <label for="modal_settings_number_queueConcurrency">Queue Concurrency</label>
189                         </div>
190                         <div class="input-field col s12 m6">
191                                 <i class="material-icons prefix">label</i>
192                                 <input type="text" id="modal_settings_input_spotifyUser"/>
193                                 <label for="modal_settings_input_spotifyUser">Spotify Username</label>
194                         </div>
195                 </div>
196                 <div class="row">
197                         <p class="col s12 m4">
198         <label>
199                                 <input type="checkbox" id="modal_settings_cbox_createM3UFile" class="filled-in"/>
200                                 <span>Create M3U (Playlist) file</span>
201         </label>
202                         </p>
203       <p class="col s12 m4">
204         <label>
205                                 <input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
206                                 <span class="tooltipped" data-position="top" data-delay="500"
207             data-tooltip="Downloads lyrics .lyr file">Download synced lyrics file</span>
208         </label>
209       </p>
210       <p class="col s12 m4">
211         <label>
212                                 <input type="checkbox" id="modal_settings_cbox_numplaylistbyalbum" class="filled-in"/>
213                                 <span class="tooltipped" data-position="top" data-delay="500"
214             data-tooltip="Track numbers when downloading a Playlist will be the original ones">Number playlist by album</span>
215         </label>
216       </p>
217                         <p class="col s12 m4">
218         <label>
219                                 <input type="checkbox" id="modal_settings_cbox_createArtistFolder" class="filled-in"/>
220                                 <span>Create folder for artists</span>
221         </label>
222                         </p>
223                         <p class="col s12 m4">
224         <label>
225                                 <input type="checkbox" id="modal_settings_cbox_createAlbumFolder" class="filled-in"/>
226                                 <span>Create folder for albums</span>
227         </label>
228                         </p>
229       <p class="col s12 m4">
230         <label>
231                                 <input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
232                                 <span>Create folder for CDs</span>
233         </label>
234       </p>
235                         <p class="col s12 m4">
236         <label>
237                                 <input type="checkbox" id="modal_settings_cbox_padtrck" class="filled-in"/>
238                                 <span class="tooltipped" data-position="top" data-delay="500"
239             data-tooltip="Adds 0s before %number% to have the same character length">Pad track numbers</span>
240         </label>
241       </p>
242       <p class="col s12 m4">
243         <label>
244                                 <input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
245                                 <span>Create log file for Errors</span>
246         </label>
247       </p>
248       <p class="col s12 m4">
249         <label>
250                                 <input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
251                                 <span>Create log file for alternatives</span>
252         </label>
253       </p>
254       <p class="col s12 m4">
255         <label>
256                                 <input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
257                                 <span>Save Album Artwork</span>
258         </label>
259       </p>
260       <p class="col s12 m4">
261         <label>
262                                 <input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
263                                 <span>Save Artist Artwork</span>
264         </label>
265       </p>
266       <p class="col s12 m4">
267         <label>
268                                 <input type="checkbox" id="modal_settings_cbox_PNGcovers" class="filled-in"/>
269                                 <span>Download images as PNGs</span>
270         </label>
271                         </p>
272       <p class="col s12 m4">
273         <label>
274                                 <input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
275                                 <span>Remove "(Album Version)" from track title</span>
276         </label>
277                         </p>
278       <p class="col s12 m4">
279         <label>
280                                 <input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
281                                 <span>Fallback to lower bitrates</span>
282         </label>
283                         </p>
284                 </div>
285     <div class="row">
286       <div class="col s12">
287         <a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;">Choose which tags to Save</a>
288       </div>
289     </div>
290                 <div class="row">
291                         <div class="col s12">
292         <img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
293                                 <p>You are logged in as <b id="modal_settings_username"></b></p>
294                                 <a href="#" class="modal-close waves-effect waves-light btn" id="modal_settings_btn_logout">Logout</a>
295                         </div>
296                 </div>
297         </div>
298         <div class="modal-footer">
299                 <a href="#" class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i
300                                                 class="material-icons right">save</i>Save</a>
301                 <a href="#" class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i
302                                                 class="material-icons right">settings_backup_restore</i>Default Settings</a>
303                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
304         </div>
305 </div>
306
307 <!--#############################################MODAL_TAGS############################################-->
308 <div id="modal_tags" class="modal modal-fixed-footer">
309         <div class="modal-content">
310                 <div class="row">
311                         <h4 class="col s12">Saved Tags</h4>
312                 </div>
313                 <div class="row">
314                         <p class="col s12 m4">
315         <label>
316                                 <input type="checkbox" id="modal_tags_title" class="filled-in"/>
317                                 <span>Title</span>
318         </label>
319                         </p>
320       <p class="col s12 m4">
321         <label>
322                                 <input type="checkbox" id="modal_tags_artist" class="filled-in"/>
323                                 <span>Artist</span>
324         </label>
325                         </p>
326       <p class="col s12 m4">
327         <label>
328                                 <input type="checkbox" id="modal_tags_album" class="filled-in"/>
329                                 <span>Album</span>
330         </label>
331                         </p>
332       <p class="col s12 m4">
333         <label>
334                                 <input type="checkbox" id="modal_tags_cover" class="filled-in"/>
335                                 <span>Cover</span>
336         </label>
337                         </p>
338       <p class="col s12 m4">
339         <label>
340                                 <input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
341                                 <span>Track Number</span>
342         </label>
343                         </p>
344       <p class="col s12 m4">
345         <label>
346                                 <input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
347                                 <span>Track Total</span>
348         </label>
349                         </p>
350       <p class="col s12 m4">
351         <label>
352                                 <input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
353                                 <span>Disc Number</span>
354         </label>
355                         </p>
356       <p class="col s12 m4">
357         <label>
358                                 <input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
359                                 <span>Disc Total</span>
360         </label>
361                         </p>
362       <p class="col s12 m4">
363         <label>
364                                 <input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
365                                 <span>Album Artist</span>
366         </label>
367                         </p>
368       <p class="col s12 m4">
369         <label>
370                                 <input type="checkbox" id="modal_tags_genre" class="filled-in"/>
371                                 <span>Genre</span>
372         </label>
373                         </p>
374       <p class="col s12 m4">
375         <label>
376                                 <input type="checkbox" id="modal_tags_year" class="filled-in"/>
377                                 <span>Year</span>
378         </label>
379                         </p>
380       <p class="col s12 m4">
381         <label>
382                                 <input type="checkbox" id="modal_tags_date" class="filled-in"/>
383                                 <span>Date</span>
384         </label>
385                         </p>
386       <p class="col s12 m4">
387         <label>
388                                 <input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
389                                 <span>Explicit</span>
390         </label>
391                         </p>
392       <p class="col s12 m4">
393         <label>
394                                 <input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
395                                 <span>ISRC</span>
396         </label>
397                         </p>
398       <p class="col s12 m4">
399         <label>
400                                 <input type="checkbox" id="modal_tags_length" class="filled-in"/>
401                                 <span>Length</span>
402         </label>
403                         </p>
404       <p class="col s12 m4">
405         <label>
406                                 <input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
407                                 <span>Barcode</span>
408         </label>
409                         </p>
410       <p class="col s12 m4">
411         <label>
412                                 <input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
413                                 <span>BPM</span>
414         </label>
415                         </p>
416       <p class="col s12 m4">
417         <label>
418                                 <input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
419                                 <span>Replay Gain</span>
420         </label>
421                         </p>
422       <p class="col s12 m4">
423         <label>
424                                 <input type="checkbox" id="modal_tags_publisher" class="filled-in"/>
425                                 <span>Label</span>
426         </label>
427                         </p>
428       <p class="col s12 m4">
429         <label>
430                                 <input type="checkbox" id="modal_tags_unsynchronisedLyrics" class="filled-in"/>
431                                 <span>Unsynchronised Lyrics</span>
432         </label>
433                         </p>
434       <p class="col s12 m4">
435         <label>
436                                 <input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
437                                 <span>Copyright</span>
438         </label>
439                         </p>
440       <p class="col s12 m4">
441         <label>
442                                 <input type="checkbox" id="modal_tags_musicpublisher" class="filled-in"/>
443                                 <span>Publisher</span>
444         </label>
445                         </p>
446       <p class="col s12 m4">
447         <label>
448                                 <input type="checkbox" id="modal_tags_composer" class="filled-in"/>
449                                 <span>Composer</span>
450         </label>
451                         </p>
452       <p class="col s12 m4">
453         <label>
454                                 <input type="checkbox" id="modal_tags_mixer" class="filled-in"/>
455                                 <span>Mixer</span>
456         </label>
457                         </p>
458       <p class="col s12 m4">
459         <label>
460                                 <input type="checkbox" id="modal_tags_author" class="filled-in"/>
461                                 <span>Author</span>
462         </label>
463                         </p>
464       <p class="col s12 m4">
465         <label>
466                                 <input type="checkbox" id="modal_tags_writer" class="filled-in"/>
467                                 <span>Writer</span>
468         </label>
469                         </p>
470       <p class="col s12 m4">
471         <label>
472                                 <input type="checkbox" id="modal_tags_engineer" class="filled-in"/>
473                                 <span>Engineer</span>
474         </label>
475                         </p>
476       <p class="col s12 m4">
477         <label>
478                                 <input type="checkbox" id="modal_tags_producer" class="filled-in"/>
479                                 <span>Producer</span>
480         </label>
481                         </p>
482                 </div>
483         </div>
484         <div class="modal-footer">
485                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
486         </div>
487 </div>
488
489 <!--#############################################MODAL_ABOUT############################################-->
490 <div id="modal_about" class="modal modal-fixed-footer">
491         <div class="modal-content">
492                 <h4>More</h4>
493                 <div class="row">
494                         <ul class="collapsible" data-collapsible="accordion">
495                                 <li>
496                                         <div class="collapsible-header waves-effect"><i class="material-icons">info</i>About</div>
497                                         <div class="collapsible-body">
498                                                 <p>
499               <b>Branch: </b>Remix</br>
500                                                         <b>Version:</b> <span id="application_version_about"></span><br/>
501                                                         <b>Original Programmer:</b> <a href="https://boerse.to/members/zzmtv.3378614/">ZzMTV</a><br/>
502                                                         <b>Former Maintainers:</b> <a href="https://www.reddit.com/user/ParadoxalManiak/">ParadoxalManiak</a>, <a href="https://www.reddit.com/user/_snwflake/">snwflake</a>, <a href="https://www.reddit.com/user/ExtendLord/">ExtendLord</a><br>
503               <b>Current Maintainer:</b> RemixDevs<br/>
504               <b>Repo: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix">Official Repo</a><br/>
505               <b>Interface:</b> <a href="http://materializecss.com/">materializecss</a><br/>
506               <b>Based on: </b>Deezloader Reborn</br>
507                                                 </p>
508                                         </div>
509                                 </li>
510                                 <li>
511                                         <div class="collapsible-header waves-effect"><i class="material-icons">feedback</i>Feedback</div>
512                                         <div class="collapsible-body">
513                                                 <p>
514                                                         Do you have some feedback or want to ask for some new features? Open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">New Issue</a> and add the Feature label.
515                                                 </p>
516                                         </div>
517                                 </li>
518                                 <li>
519                                         <div class="collapsible-header waves-effect"><i class="material-icons">bug_report</i>Bugs</div>
520                                         <div class="collapsible-body">
521                                                 <p>
522                                                         If you experience any bugs, open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">New Issue</a> and send the bug report there, thankyou.
523                                                 </p>
524                                         </div>
525                                 </li>
526         <li>
527           <div class="collapsible-header waves-effect"><i class="material-icons">group</i>Contacts</div>
528           <div class="collapsible-body">
529             <p>
530               If you want to talk about the app and help you can do that in this <a href="https://t.me/joinchat/BJf2dUoyFbSZFV-kQIe_LQ">Telegram Group</a>!
531             </p>
532           </div>
533         </li>
534                                 <li>
535                                         <div class="collapsible-header waves-effect"><i class="material-icons">warning</i>Attention!</div>
536                                         <div class="collapsible-body">
537                                                 <p>
538                                                         The authors don't call to commit crimes.<br/>
539                                                         The usage of this tool may be illegal in your country! Please inform yourself.<br/>
540                                                         The authors give no guarantee at all and aren't responsible for damages of all kinds!
541                                                 </p>
542                                         </div>
543                                 </li>
544                                 <li>
545                                         <div class="collapsible-header waves-effect"><i class="material-icons">history</i>Changelog</div>
546                                         <div class="collapsible-body">
547                                                 <p>
548               <b>Version 4.1.3</b><br/>
549               - Playlist and Album tracks now have fallback support<br/>
550               - M3U files now works correctly<br/>
551               - Fixed problems with tags<br/>
552               - Added option %explicit% for Track and Album names (Will add "(Explicit)" in that position if it's explicit)<br/>
553               - Added option to remove "(Album Version)" from track title<br/>
554               - Added options to select which format should the date tag have<br/>
555               - Added option to not fallback if desired bitrate is not aviable<br/>
556               - Logging enhancements<br/>
557               - Other minor bug-fixing<br/>
558               <br/>
559                           <b>Version 4.1.2</b><br/>
560                           - Fixed Login Problem (for real this time)<br/>
561                           - Fixed Login after refresh<br/>
562                           - Regionlock free download<br/>
563                           - Added support for download of User Uploaded tracks<br/>
564                           - Now you can select which tags your songs has<br/>
565                           - Fixed selecting problem<br/>
566                           - Tracks without preview will display a disabled play button<br/>
567                           - Previews inside modal will stop with modal close<br/>
568                           - New %label% field for tracks and albums<br/>
569                           - Added option to create folder for CDs<br/>
570                           - Added rename option for cover file<br/>
571                           - Added option to download Artist artwork<br/>
572                           - Added option do log downloaded alternative tracks<br/>
573                           - Fixed some minor bugs
574                           <br/>
575               <b>Version 4.1.1</b><br/>
576               - Fixed Login Problem (again)<br/>
577               - Added Dark Mode<br/>
578               - Added smaller cover option<br/>
579               - Added support for lower bitrates<br/>
580               - Added "Stop All Downloads" button<br/>
581               - Added support for Spotify Playlist preview<br/>
582               - Added support for PNG covers<br/>
583               - Re-Added Date Tag<br/>
584               - Fixed same cover for same track in different albums bug<br/>
585               - Fixed login issue from repository build<br/>
586               <br/>
587               <b>Version 4.1.0</b><br/>
588               - New UI (not completly optimized for small screens)<br/>
589               - Fixed login problems<br/>
590               - Fixed %type% parameter not working<br/>
591               - Fixed year tagging problem<br/>
592               - Fixed playlist file not containing tracks<br/>
593               - More precision in Spotify Playlist conversion<br/>
594               <br/>
595               <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog">Full Changelog Here</a>
596                                                 </p>
597                                         </div>
598                                 </li>
599                                 <li>
600                                         <div class="collapsible-header waves-effect"><i class="material-icons">build</i>Contributors</div>
601                                         <div class="collapsible-body">
602                                                 <p>Thanks to the following contributors for fixing bugs and improving this application.<br>
603               <br>
604                                                         <a href="https://www.reddit.com/user/Blind-Mute">Blind-Mute</a> <br>
605                                                         <a href="https://gitlab.com/Persei08">Persei08</a> <br>
606                                                         <a href="https://github.com/Uukrull">Uukrull</a> <br>
607                                                 </p>
608                                         </div>
609                                 </li>
610                                 <li>
611                                         <div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
612                                         <div class="collapsible-body">
613                                                 <p>
614                                                         <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
615                                                                 <img alt="GNU General Public License" style="border-width:0"
616                                                                                  src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
617                                                         </a><br/>
618                                                         This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU General Public License 3.0</a>.
619                                                 </p>
620                                         </div>
621                                 </li>
622                         </ul>
623                 </div>
624         </div>
625         <div class="modal-footer">
626                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
627         </div>
628 </div>
629
630 <!--##########################################MODAL_TRACKLIST###########################################-->
631 <div id="modal_trackList" class="modal modal-fixed-footer">
632         <div class="modal-content">
633                 <div class="row">
634                         <h4 class="col s12">{{ title }}</h4>
635                 </div>
636                 <div class="row">
637                         <table class="highlight col s12">
638                                 <thead>
639                                 <tr>
640                                         <td v-for="data in head" v-html="data.title"></td>
641                                 </tr>
642                                 </thead>
643                                 <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
644                                 <tr>
645                                         <td class="center" colspan="4">
646                                                 <div class="preloader-wrapper big active">
647                                                         <div class="spinner-layer">
648                                                                 <div class="circle-clipper left">
649                                                                         <div class="circle"></div>
650                                                                 </div>
651                                                                 <div class="gap-patch">
652                                                                         <div class="circle"></div>
653                                                                 </div>
654                                                                 <div class="circle-clipper right">
655                                                                         <div class="circle"></div>
656                                                                 </div>
657                                                         </div>
658                                                 </div>
659                                         </td>
660                                 </tr>
661                                 </tbody>
662                                 <tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
663                                 </tbody>
664                         </table>
665                 </div>
666         </div>
667         <div class="modal-footer">
668                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
669         </div>
670 </div>
671
672 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
673 <div id="modal_trackListSelective" class="modal modal-fixed-footer">
674         <div class="modal-content">
675                 <div class="row">
676                         <h4 class="col s12">{{ title }}</h4>
677                 </div>
678                 <div class="row">
679                         <table class="highlight col s12">
680                                 <thead>
681                                 <tr>
682                                         <td v-for="data in head" v-html="data.title"></td>
683                                 </tr>
684                                 </thead>
685                                 <tbody id="modal_trackListSelective_table_trackList_tbody_loadingIndicator" class="hide">
686                                 <tr>
687                                         <td class="center" colspan="4">
688                                                 <div class="preloader-wrapper big active">
689                                                         <div class="spinner-layer">
690                                                                 <div class="circle-clipper left">
691                                                                         <div class="circle"></div>
692                                                                 </div>
693                                                                 <div class="gap-patch">
694                                                                         <div class="circle"></div>
695                                                                 </div>
696                                                                 <div class="circle-clipper right">
697                                                                         <div class="circle"></div>
698                                                                 </div>
699                                                         </div>
700                                                 </div>
701                                         </td>
702                                 </tr>
703                                 </tbody>
704                                 <tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
705                                 </tbody>
706                         </table>
707                 </div>
708         </div>
709         <div class="modal-footer">
710                 <a href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text right">Download selection<i class="material-icons right">file_download</i></a>
711                 <a href="#" class="modal-close waves-effect btn-flat">Close</a>
712         </div>
713 </div>
714
715 <!--##########################################MODAL_MSG###########################################-->
716 <div id="modal_msg" class="modal">
717         <div class="modal-content">
718                 <div class="row">
719                         <h4 class="col s12" id="modal_msg_title"></h4>
720                 </div>
721                 <div class="row">
722                         <p class="col s12" id="modal_msg_message"></p>
723                 </div>
724         </div>
725         <div class="modal-footer">
726                 <a href="#" class="modal-close waves-effect waves-light btn">I got it!</a>
727         </div>
728 </div>
729
730 <!--********************************************MAIN-CONTENT********************************************-->
731 <nav>
732   <div class="nav-wrapper">
733     <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
734     <ul class="left hide-on-small-only">
735       <li>
736         <div class="switch">
737           <label>
738             <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
739             <input id="nightTimeSwitcher" type="checkbox">
740             <span class="lever"></span>
741           </label>
742         </div>
743       </li>
744     </ul>
745     <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
746     <ul id="nav-mobile" class="right hide-on-small-only">
747       <li>
748                                 <a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
749                                         <i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
750                                 </a>
751                         </li>
752                         <li>
753                                 <a href="#modal_about" class="waves-effect waves-light modal-trigger">
754                                         <i class="material-icons left">star</i> <span class="hide-on-med-and-down">More</span>
755                                 </a>
756                         </li>
757     </ul>
758   </div>
759 </nav>
760
761 <img src="img/icon.svg" class="circle" id="main_icon"></img>
762
763 <ul id="slide-out" class="sidenav">
764   <li><div class="user-view">
765     <div class="background"></div>
766     <a href="#user"><img class="circle" id="side_avatar"></a>
767     <a href="#name"><span class="white-text name" id="side_user"></span></a>
768     <a href="#email"><span class="white-text email" id="side_email"></span></a>
769   </div></li>
770   <li><a href="#!" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
771   <li><a href="#!" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
772   <li><a href="#!" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
773   <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>
774   <li><a href="#!" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
775   <li><div class="divider"></div></li>
776   <li><a href="#modal_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
777   <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">star</i>About</a></li>
778   <li><a href="#!" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
779   </li>
780 </ul>
781
782 <main class="container">
783   <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
784     <li class="tab"><a class="active" href="#tab_search">Search</a></li>
785     <li class="tab"><a href="#tab_charts">Charts</a></li>
786     <li class="tab"><a href="#tab_playlists">Playlists</a></li>
787     <li class="tab"><a href="#tab_url">Download from URL</a></li>
788     <li class="tab"><a href="#tab_downloads">Downloads</a></li>
789   </ul>
790
791   <div id="main-content" class="row">
792
793     <div id="tab_search">
794       <form id="tab_search_form_search">
795         <div class="inline-input-group col s12">
796           <input id="tab_search_form_search_input_searchString" type="text" class="input" placeholder="Start searching ...">
797           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
798         </div>
799         <div class="row center">
800           <p class="col s3">
801             <label>
802             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
803             <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>
804             </label>
805           </p>
806           <p class="col s3">
807             <label>
808             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
809             <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>
810             </label>
811           </p>
812           <p class="col s3">
813             <label>
814             <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
815             <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>
816             </label>
817           </p>
818           <p class="col s3">
819             <label>
820               <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
821               <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>
822             </label>
823           </p>
824         </div>
825       </form>
826       <div id="tab_search_results">
827                                 <table id="tab_search_table_results" class="striped col s12">
828                                         <thead class="hide-on-small-only">
829                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_track">
830                                                 <th style="width: 56px;"><!--cover--></th>
831                                                 <th>Song</th>
832                                                 <th>Artist</th>
833                                                 <th>Album</th>
834                                                 <th><i class="material-icons">timer</i></th>
835                                                 <th style="width: 56px;"><!--download_link--></th>
836                                         </tr>
837                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_album">
838                                                 <th style="width: 56px;"><!--cover--></th>
839                                                 <th>Album</th>
840                                                 <th>Artist</th>
841                                                 <th>Songs</th>
842                                                 <th>Type</th>
843                                                 <th><!--space--></th>
844                                                 <th style="width: 56px;"><!--download_link--></th>
845                                         </tr>
846                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_artist">
847                                                 <th style="width: 56px;"><!--cover--></th>
848                                                 <th>Artist</th>
849                                                 <th>Albums</th>
850                                                 <th><!--space--></th>
851                                                 <th style="width: 56px;"><!--download_link--></th>
852                                         </tr>
853                                         <tr class="animated fadeInUp hide" id="tab_search_table_results_thead_playlist">
854                                                 <th style="width: 56px;"><!--cover--></th>
855                                                 <th>Name</th>
856                                                 <th>Songs</th>
857               <th style="width: 56px;"><!--space--></th>
858                                                 <th style="width: 56px;"><!--download_link--></th>
859                                         </tr>
860                                         </thead>
861                                         <tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
862                                         <tr>
863                                                 <td class="center">
864                                                           <div class="preloader-wrapper big active">
865                                                             <div class="spinner-layer spinner-blue-only">
866                                                               <!-- Spinner Code -->
867                                                               <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>
868                                                             </div>
869                                                           </div>
870                                                 </td>
871                                         </tr>
872                                         </tbody>
873                                         <tbody id="tab_search_table_results_tbody_results" class="animated fadeInUp"></tbody>
874                                         <tbody id="tab_search_table_results_tbody_noResults" class="animated fadeInUp hide">
875                                         <tr>
876                                                 <td class="center">Nothing found!</td>
877                                         </tr>
878                                         </tbody>
879                                 </table>
880                         </div>
881     </div>
882
883     <div id="tab_charts">
884       <div class="input-field col s12">
885         <select id="tab_charts_select_country" class="icons">
886           <!--All country selects have to be like the following example:
887           <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
888           -->
889         </select>
890         <label>Country</label>
891       </div>
892       <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
893       <table id="tab_charts_table_charts" class="striped">
894         <thead class="hide-on-small-only">
895           <tr>
896             <th>#</th>
897             <th style="width: 56px;"><!--cover--></th>
898             <th>Song</th>
899             <th>Artist</th>
900             <th>Album</th>
901             <th><i class="material-icons">timer</i></th>
902             <th style="width: 56px;"><!--download_link--></th>
903           </tr>
904         </thead>
905         <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
906           <tr>
907             <td colspan="7" class="center">
908                                                         <div class="preloader-wrapper big active">
909                                                           <div class="spinner-layer spinner-blue-only">
910                                                             <!-- Spinner Code -->
911                                                             <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>
912                                                           </div>
913                                                         </div>
914             </td>
915           </tr>
916         </tbody>
917         <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
918       </table>
919     </div>
920
921     <div id="tab_playlists" class="row">
922       <div class="col s12">
923         <button class="btn-flat btn-large waves-effect" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlist List</button>
924       </div>
925       <div class="col s12">
926         <table class="striped">
927           <thead>
928             <tr class="animated fadeInUp">
929               <th style="width: 56px;"><!--cover--></th>
930               <th>Name</th>
931               <th>Songs</th>
932               <th style="width: 56px;"><!--inspect_playlist--></th>
933               <th style="width: 56px;"><!--download_link--></th>
934             </tr>
935           </thead>
936           <tbody id="table_personal_playlists" class="animated fadeInUp">
937           </tbody>
938         </table>
939       </div>
940     </div>
941
942     <div id="tab_url">
943       <form id="tab_url_form_url" class="row">
944         <div class="inline-input-group">
945           <input type="text" id="song_url" class="input" placeholder="Song/Playlist/Album/Artist URL, separated by ';'">
946           <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">get_app</i></button>
947         </div>
948       </form>
949     </div>
950
951     <div id="tab_downloads">
952       <div class="row">
953         <div class="col s12 m4">
954           <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
955             Open Downloads Folder
956           </button>
957         </div>
958         <div class="col s12 m4">
959           <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-secondary white-text">
960             Cancel All Downloads
961           </button>
962         </div>
963         <div class="col s12 m4">
964           <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-secondary white-text">
965             Clear List
966           </button>
967         </div>
968       </div>
969       <table id="tab_downloads_table_downloads" class="row">
970         <thead>
971           <tr>
972             <th>Name</th>
973             <th>Size</th>
974             <th>Downloaded</th>
975             <th>Failed</th>
976             <th style="width: 25%;"><!--progress--></th>
977             <th style="width: 56px;"><!--event buttons--></th>
978           </tr>
979         </thead>
980         <tbody></tbody>
981       </table>
982     </div>
983
984   </div>
985 </main>
986
987 <div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
988   <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
989     <i class="large material-icons">keyboard_arrow_up</i>
990   </a>
991 </div>
992 <audio id="preview-track">
993   <source id="preview-track_source" src="" type="audio/mpeg">
994 </audio>
995
996 <footer class="deezloader-black darken-1 left page-footer hide-on-med-and-down valign-wrapper">
997       <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader original code by <a class="white-text" href="https://boerse.to/members/zzmtv.3378614/">ZzMTV</a>.</p>
998 </footer>
999
1000 <script>if (typeof module === 'object') {
1001         window.module = module;
1002         module = undefined;
1003 }</script>
1004 <script type="text/javascript" src="js/socket.io.js"></script>
1005 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
1006 <script type="text/javascript" src="js/materialize.min.js"></script>
1007 <script type="text/javascript" src="js/vue.min.js"></script>
1008 <script type="text/javascript" src="js/appBase.js"></script>
1009 <script type="text/javascript" src="js/main.js"></script>
1010 <script>if (window.module) module = window.module;</script>
1011 </body>
1012 </html>