260 lines
9.7 KiB
HTML
260 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Good Music - Good Feeling</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="{{ static_root }}/css/bootstrap.min.css">
|
|
<script>
|
|
window.deezer_downloader_api_root = '{{ api_root }}';
|
|
</script>
|
|
<script src="{{ static_root }}/js/jquery.min.js"></script>
|
|
<script src="{{ static_root }}/js/popper.min.js"></script>
|
|
<script src="{{ static_root }}/js/bootstrap.min.js"></script>
|
|
<script>
|
|
var show_mpd_features = {{ use_mpd }};
|
|
</script>
|
|
<script src="{{ static_root }}/js/custom.js"></script>
|
|
<script src="{{ static_root }}/js/jquery.jgrowl.min.js"></script>
|
|
<link rel="stylesheet" href="{{ static_root }}/css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="{{ static_root }}/css/jquery.jgrowl.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="{{ static_root }}/css/custom.css" />
|
|
|
|
<style>
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 80%;
|
|
left: 10%;
|
|
height: 40px;
|
|
background-color: #f5f5f5;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body id="body" >
|
|
|
|
<div class="container">
|
|
|
|
<br>
|
|
|
|
<div class="row">
|
|
|
|
<ul id="navigation" class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-songs-albums" data-toggle="tab" href="#songs_albums">Songs/Albums (1)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-youtubedl" data-toggle="tab" href="#youtubedl">Audio/Video downloader (2)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-spotify-playlists" data-toggle="tab" href="#spotify-playlists">Spotify Playlists (3)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-deezer" data-toggle="tab" href="#deezer">Deezer (4)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-task-queue" data-toggle="tab" href="#queue">Queue (5)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-task-param" data-toggle="tab" href="#param">Parameter (6)</a>
|
|
</li>
|
|
</ul>
|
|
</div> <!-- end row -->
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
|
|
<div id="songs_albums" class="container tab-pane active">
|
|
<br>
|
|
<audio src="" controls style="float:right" id="audio_tag"></audio>
|
|
<h3>Download songs and albums</h3>
|
|
|
|
<div class="input-group">
|
|
<div class="search-container col-md-6 col-lg-5 col-xs-12">
|
|
<input type="text" class="search" id="songs-albums-query" placeholder="Search for ..." >
|
|
<button type="button" class="search" onclick="$('#songs-albums-query').val('')" class="search">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<button type="button" class="search" id="search_deezer">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs-category">
|
|
<button id="deezer-search-track" class="btn-category active" href="#">Tracks</button>
|
|
<button id="deezer-search-album" class="btn-category" href="#">Albums</button>
|
|
<button id="deezer-search-artist" class="btn-category" href="#">Artists</button>
|
|
</div>
|
|
|
|
<table id="results" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th id="col-cover" style="width: 56px"></th>
|
|
<th id="col-artist">Artist</th>
|
|
<th id="col-title">Title</th>
|
|
<th id="col-album">Album</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- end div tab songs/albums -->
|
|
|
|
<div id="youtubedl" class="container tab-pane fade">
|
|
<br>
|
|
<h3>Download audio files via youtube-dl</h3>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="youtubedl-query" placeholder="Download audio from YouTube, Invidious, Vimeo, Soundcloud, ... " />
|
|
|
|
</div>
|
|
<br>
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info" id="yt_download_play">Download & Play</button>
|
|
<button type="button" class="btn btn-info" id="yt_download">Download</button>
|
|
<button type="button" class="btn btn-info" onclick="$('#youtubedl-query').val('')" >Clear</button>
|
|
</span>
|
|
<br/>
|
|
<br/>
|
|
<h3>Download video files via youtube-dl</h3>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="youtubedl-query-video" placeholder="Download video from YouTube, Invidious, Vimeo, Soundcloud, ... " />
|
|
|
|
</div>
|
|
<br>
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info" id="yt_download_video">Download</button>
|
|
<button type="button" class="btn btn-info" onclick="$('#youtubedl-query-video').val('')" >Clear</button>
|
|
</span>
|
|
</div> <!-- end div tab youtube-dl -->
|
|
|
|
<div id="spotify-playlists" class="container tab-pane fade">
|
|
<br>
|
|
<h3>Download Spotify playlist</h3>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="spotify-playlist-name" placeholder="name of spotify playlist" />
|
|
|
|
<input type="text" class="form-control" id="spotify-playlist-url" placeholder="url or id of the playlist" />
|
|
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info" id="spotify_download_play">Download & Play</button>
|
|
<button type="button" class="btn btn-info" id="spotify_download">Download</button>
|
|
<button type="button" class="btn btn-info" id="spotify_zip">Give me a zip</button>
|
|
<button type="button" class="btn btn-info" onclick="$('input[id^=\'spotify\']').val('')" >Clear</button>
|
|
</span>
|
|
</div>
|
|
</div> <!-- end div tab spotify playlists -->
|
|
|
|
<div id="deezer" class="container tab-pane fade">
|
|
<br>
|
|
<h3>Download Deezer playlist</h3>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="deezer-playlist-url" placeholder="url or id of the playlist" />
|
|
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info" id="deezer_playlist_download_play">Download & Play</button>
|
|
<button type="button" class="btn btn-info" id="deezer_playlist_download">Download</button>
|
|
<button type="button" class="btn btn-info" id="deezer_playlist_zip">Give me a zip</button>
|
|
<button type="button" class="btn btn-info" onclick="$('#deezer-playlist-url').val('')" >Clear</button>
|
|
</span>
|
|
</div>
|
|
|
|
<br>
|
|
<h3>Download Deezer favorite songs</h3>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="deezer-favorites-userid" placeholder="user id of Deezer user"songs />
|
|
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info" id="deezer_favorites_download_play">Download & Play</button>
|
|
<button type="button" class="btn btn-info" id="deezer_favorites_download">Download</button>
|
|
<button type="button" class="btn btn-info" id="deezer_favorites_zip">Give me a zip</button>
|
|
<button type="button" class="btn btn-info" onclick="$('#deezer-favorites-userid').val('')" >Clear</button>
|
|
</span>
|
|
</div>
|
|
|
|
</div> <!-- end div tab deezer playlists -->
|
|
|
|
<div id="queue" class="container tab-pane fade">
|
|
<br>
|
|
<h3>Queue</h3>
|
|
|
|
<table id="task-list" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Description</th>
|
|
<th>Args</th>
|
|
<th>State</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- end div tab queue -->
|
|
|
|
<div id="param" class="container tab-pane fade">
|
|
<br>
|
|
<h3 class="mb-4 text-center">Configuration</h3>
|
|
|
|
<form class="p-4 rounded" id="paramters" >
|
|
<div class="form-group">
|
|
<label for="directory-path">Directory Path</label>
|
|
<input type="text" class="form-control" id="param-directry-path" name="directory_path" placeholder="/path/to/folder" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="login">Login</label>
|
|
<input type="text" class="form-control" id="param-login" name="login" placeholder="Username" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" class="form-control" id="param-password" name="password" placeholder="••••••" required>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-info btn-block font-weight-bold">Save</button>
|
|
</div>
|
|
|
|
<!-- end div tab parameters -->
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<span class="text-muted">
|
|
ctrl+m: focus search bar |
|
|
Enter: search songs |
|
|
Ctrl+Shift+[1-7]: navigation |
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<style>
|
|
html, body, .container, .tab-content, .tab-pane .form-group {
|
|
height: 95%;
|
|
}
|
|
textarea.form-control {
|
|
height: 95%;
|
|
}
|
|
|
|
#werbung:link, #werbung:visited, #werbung:hover, #werbung:active { color: red }
|
|
|
|
</style>
|
|
|
|
|
|
</div> <!-- end div container -->
|
|
|
|
</body>
|
|
</html>
|
|
|