48 lines
No EOL
1 KiB
HTML
48 lines
No EOL
1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Last.FM Playlist & Albumcover Example Site</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.flex-container {
|
|
display: flex;
|
|
align-items: flex-start; /* Align items to the top */
|
|
gap: 15px; /* Add some spacing between album cover and tracklist */
|
|
}
|
|
|
|
.album-cover {
|
|
width: 250px; /* Set a fixed size for the album cover */
|
|
height: 250px; /* Ensure it stays square */
|
|
object-fit: cover; /* Ensure the image doesn't distort */
|
|
border-radius: 5px; /* Optional: Add rounded corners */
|
|
}
|
|
|
|
.album-art {
|
|
width: 250px;
|
|
height: 250px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.recent-tracks {
|
|
list-style-type: none; /* Remove dots */
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.recent-tracks li {
|
|
margin-bottom: 1px; /* Small gap between tracks */
|
|
display: flex;
|
|
align-items: center; /* Ensure icon and text are aligned properly */
|
|
}
|
|
</style>
|
|
<div class="panel2">
|
|
<div style="margin:10px;">
|
|
<div id="track-info-container" class="flex-container">
|
|
<img id="album-cover" src="" alt="Album Cover" class="album-cover" />
|
|
<ul class="recent-tracks">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |