add default cover

This commit is contained in:
iou1name 2024-11-28 02:51:39 -05:00
parent 3305e97552
commit 1f1c82f18a
3 changed files with 39 additions and 27 deletions

View File

@ -75,6 +75,10 @@ input[type="radio"]:checked+div {
align-items: center; align-items: center;
} }
#player_container > div {
display: flex;
}
#cover_art { #cover_art {
padding-right: 1em; padding-right: 1em;
padding-top: 0.5em; padding-top: 0.5em;
@ -86,7 +90,6 @@ img {
} }
#title { #title {
display: flex;
} }
input[type='range'] { input[type='range'] {
@ -109,6 +112,11 @@ button img {
width: 50%; width: 50%;
} }
#seek-slider { #seek_controls output {
width: 100%; margin-left: 0.125em;
margin-right: 0.125em;
}
#seek-slider {
width: 90%;
} }

BIN
static/pyrite.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -27,33 +27,37 @@
<div id="track_list" class="list"> <div id="track_list" class="list">
</div> </div>
<div id="player_container"> <div id="player_container">
<div id="title"> <div>
<span id="cover_art"><img alt="Album cover art" src=""></span> <div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
<span> <div>
<h4> <div id="title">
<span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span> <h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
</h4> <h3 id="now_playing_title">Title</h3>
<h3 id="now_playing_title">Title</h3> </div>
</span> <div id="player_controls">
</div> <audio id="player" style="display:none"></audio>
<div id="player_controls"> <button id="prev-track-btn" class="btn" onclick="prevTrack()">
<audio id="player" controls style="display:none"></audio> <img id="prev" src="./static/prev.svg"></img>
<button id="prev-track-btn" class="btn" onclick="prevTrack()"> </button>
<img id="prev" src="./static/prev.svg"></img> <button id="play-btn" class="btn" onclick="playTrack()">
</button> <img id="prev" src="./static/play.svg"></img>
<button id="play-btn" class="btn" onclick="playTrack()"> </button>
<img id="prev" src="./static/play.svg"></img> <button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
</button> <img id="prev" src="./static/pause.svg"></img>
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none"> </button>
<img id="prev" src="./static/pause.svg"></img> <button id="next-track-btn" class="btn" onclick="nextTrack()">
</button> <img id="prev" src="./static/prev.svg"></img>
<button id="next-track-btn" class="btn" onclick="nextTrack()"> </button>
<img id="prev" src="./static/prev.svg"></img> <button id="mute-btn" class="btn">
</button> <img id="mute" src="./static/volume-max.svg"</img>
<input id="volume-slider" type="range" max="100" value="0"> </button>
<input id="volume-slider" type="range" max="100" value="0">
</div>
</div>
</div> </div>
<div id="seek_controls"> <div id="seek_controls">
<input id="seek-slider" type="range" max="100" value="0"> <input id="seek-slider" type="range" max="100" value="0">
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
</div> </div>
</div> </div>
</main> </main>