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