Explorer
project
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div class="rloop-stage">
<div class="bg-orb orb-1"></div>
<div class="bg-orb orb-2"></div>
<div class="bg-orb orb-3"></div>
<div class="player" role="region" aria-label="Rloopui Music Player">
<audio
id="audio"
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
preload="metadata"
></audio>
<header class="brand">
<div class="brand-mark">
<span class="brand-dot"></span>
<span class="brand-name">Rloop<em>ui</em></span>
</div>
<span class="badge">Now Playing</span>
</header>
<div class="artwork-wrap">
<div class="artwork" id="artwork">
<div class="cover-shine"></div>
<svg viewBox="0 0 120 120" class="cover-art" aria-hidden="true">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#a78bfa" />
<stop offset="50%" stop-color="#ec4899" />
<stop offset="100%" stop-color="#f59e0b" />
</linearGradient>
</defs>
<rect width="120" height="120" rx="24" fill="url(#g1)" />
<circle cx="60" cy="60" r="34" fill="rgba(255,255,255,0.12)" />
<circle cx="60" cy="60" r="22" fill="rgba(0,0,0,0.35)" />
<circle cx="60" cy="60" r="6" fill="#fff" />
</svg>
</div>
<div class="equalizer" id="eq" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="meta">
<h2 class="track-title" id="title">Midnight Reverie</h2>
<p class="track-artist" id="artist">Aria Sterling · Nocturne EP</p>
</div>
<div class="progress">
<input
id="seek"
class="seek"
type="range"
min="0"
max="100"
value="0"
step="0.1"
aria-label="Seek"
/>
<div class="times">
<span id="current">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<div class="controls">
<button class="ctrl" id="shuffle" aria-label="Shuffle" title="Shuffle">
<svg viewBox="0 0 24 24">
<path d="M16 3h5v5M4 20l17-17M21 16v5h-5M15 15l6 6M4 4l5 5" />
</svg>
</button>
<button class="ctrl" id="prev" aria-label="Previous" title="Previous">
<svg viewBox="0 0 24 24"><path d="M19 20L9 12l10-8v16zM5 19V5" /></svg>
</button>
<button class="ctrl play" id="play" aria-label="Play / Pause" title="Play">
<svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
<svg id="icon-pause" viewBox="0 0 24 24" style="display: none">
<path d="M6 5h4v14H6zM14 5h4v14h-4z" />
</svg>
</button>
<button class="ctrl" id="next" aria-label="Next" title="Next">
<svg viewBox="0 0 24 24"><path d="M5 4l10 8-10 8V4zM19 5v14" /></svg>
</button>
<button class="ctrl" id="repeat" aria-label="Repeat" title="Repeat">
<svg viewBox="0 0 24 24">
<path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" />
</svg>
</button>
</div>
<footer class="footer">
<button class="ctrl sm" id="like" aria-label="Like" title="Like">
<svg id="heart" viewBox="0 0 24 24">
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
/>
</svg>
</button>
<div class="volume">
<svg viewBox="0 0 24 24" class="vol-icon">
<path d="M11 5L6 9H2v6h4l5 4V5zM15.5 8.5a5 5 0 010 7M19 5a9 9 0 010 14" />
</svg>
<input
id="volume"
class="seek vol"
type="range"
min="0"
max="100"
value="70"
aria-label="Volume"
/>
</div>
<button class="ctrl sm" id="queue" aria-label="Queue" title="Queue">
<svg viewBox="0 0 24 24"><path d="M3 6h13M3 12h13M3 18h9M17 14v6l5-3z" /></svg>
</button>
</footer>
</div>
</div>
rloop.dev/p/Pr-O51