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