mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
112 lines
2.4 KiB
HTML
112 lines
2.4 KiB
HTML
<div class="audio-player">
|
|
<div class="album-cover"></div>
|
|
<div class="player-controls">
|
|
<div class="song-info">
|
|
<div class="song-title">Song Title</div>
|
|
<p class="artist">Artist</p>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="play-btn"><svg viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg></button>
|
|
<button class="pause-btn"><svg viewBox="0 0 16 16" class="bi bi-pause-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: white"> <path fill="white" d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path> </svg></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by ahmed150up - Tags: form, spotify, music */
|
|
.audio-player {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 300px;
|
|
height: 80px;
|
|
background-color: #282828;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.album-cover {
|
|
width: 64px;
|
|
height: 64px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.player-controls {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.song-info {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.song-title {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
|
|
.artist {
|
|
font-size: 12px;
|
|
color: #b3b3b3;
|
|
margin: 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: #4f4f4f;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #1db954;
|
|
transform-origin: left;
|
|
animation: progress-animation 10s linear infinite;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
}
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.play-btn,
|
|
.pause-btn {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
margin-right: 8px;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.play-btn:hover,
|
|
.pause-btn:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
@keyframes progress-animation {
|
|
0% {
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
</style>
|