-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (199 loc) · 11.8 KB
/
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<meta name="theme-color" content="dark light" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="css/main.min.css" />
<link rel="stylesheet" href="custom.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/akira-expanded" rel="stylesheet" />
<div class="msp_radio">
<div class="np__global_wrapper">
<div id="jp_container_rcast" class="np__global_player">
<div class="app-player" id="app-player">
<!-- Player -->
<div class="player song-now flex column">
<div class="player-wrapper">
<!-- Cover -->
<div class="player-cover flex items-center justify-center g-2 items-center">
<div class="player-left flex items-center">
<!-- Cover -->
<div class="player-artwork player-artwork-style relative">
<img alt="artwork" height="600" src="assets/cover.png" width="600" />
</div>
<!-- Data -->
<div class="player-cover-title uppercase fw-700 flex column">
<div class="player-song-name">
<!-- <span class="player-program-badge"><i></i></span> -->
<span class="color-title fw-700 song-name song-title station-name">Song</span>
</div>
<span class="color-title fs-8 song-artist station-description truncate">Artist</span>
</div>
<!-- Social -->
<div class="player-social flex wrap"></div>
</div>
<!-- Controladores -->
<div class="player-controller">
<!-- Cambiar estacion hacia atras -->
<button class="player-button player-button-backward-step">
<svg class="i i-backward-step" viewBox="0 0 24 24">
<path d="M6 5v14M18 4v16L8 12Z"></path>
</svg>
</button>
<!-- Reproducir/Pausar -->
<button aria-label="Play/Pause" class="player-button player-button-play flex-none">
<svg class="i i-play" viewBox="0 0 24 24">
<path d="m7 3 14 9-14 9z"></path>
</svg>
</button>
<!-- Cambiar estacion hacia adelante -->
<button class="player-button player-button-forward-step">
<svg class="i i-forward-step" viewBox="0 0 24 24">
<path d="M18 5v14M6 4v16l10-8Z"></path>
</svg>
</button>
</div>
<div class="player-right flex items-center">
<!-- TV -->
<div class="online-tv"></div>
<!-- History -->
<button class="player-button player-button-history" data-outside="offcanvas-history">
<svg class="i i-music" viewBox="0 0 24 24">
<path d="M22 16V2L9 5v13"></path>
<circle cx="5" cy="18" r="4"></circle>
<circle cx="18" cy="16" r="4"></circle>
</svg>
History
</button>
<!-- Volume -->
<div class="player-button player-button-volume">
<button class="player-button player-button-volume-toggle" data-outside="player-volume">
<svg class="i i-volume-high" viewBox="0 0 24 24">
<path d="M6 9H2v6h4l5 4V5Zm9 7a5 5 0 0 0 0-8m3 12a10 10 0 0 0 0-16"></path>
</svg>
Volume
</button>
<div class="dropdown" id="player-volume">
<div class="player-range-wrapper">
<input aria-label="Volume" class="player-volume" max="100" min="0" name="player" type="range" value="100" />
<div class="player-range-fill"></div>
<div class="player-range-thumb"></div>
</div>
</div>
</div>
<!-- Letras -->
<button class="player-button player-button-share" data-outside="modal-share">
<svg class="i i-share" viewBox="0 0 24 24">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<path d="m8.5 13.5 7 4m0-11-7 4"></path>
</svg>
Share
</button>
<!-- Letras -->
<button class="player-button player-button-lyrics" data-outside="modal-lyrics">
<svg class="i i-list-music" viewBox="0 0 24 24">
<path d="M16 8h6V3h-6v15M2 3h9M2 8h9m-9 5h3"></path>
<circle cx="12" cy="18" r="4"></circle>
</svg>
Lyrics
</button>
<!-- Multiradio -->
<button class="player-button-alt player-button-stations" data-outside="offcanvas-stations">
<svg class="i i-radio" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="2"></circle>
<path d="M5 4.9a10 10 0 0 0 0 14.2M7.8 7.7a6 6 0 0 0 0 8.6m8.4 0a6 6 0 0 0 0-8.6M19 19.1a10 10 0 0 0 0-14.2"></path>
</svg>
Estações
</button>
<div class="player-station player-artwork-style relative">
<img alt="artwork" height="600" src="assets/cover.png" width="600" />
</div>
</div>
</div>
</div>
<!-- Visualizador -->
<div class="visualizer" data-bars="120" data-max-height="100"></div>
</div>
<!-- Estaciones -->
<aside class="offcanvas-player scrollbar" id="offcanvas-stations">
<div class="offcanvas-content">
<div class="stations flex g-1" id="stations"></div>
</div>
</aside>
<!-- Ultimas canciones -->
<aside class="offcanvas-player scrollbar" id="offcanvas-history">
<div class="offcanvas-content">
<div class="history flex g-0.5 fs-7" id="history"></div>
</div>
</aside>
<div class="modal" id="modal-lyrics">
<div class="modal-content">
<div class="modal-title color-title flex items-center justify-between">
<h2 class="modal-title-text m:fs-3 fs-5 fw-500">Letra</h2>
<button data-close aria-label="close">
<svg class="i i-xmark" viewBox="0 0 24 24">
<path d="M18 6 6 18M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="modal-body scrollbar" id="lyrics"></div>
</div>
</div>
<div class="modal-overlay"></div>
<div class="player-modal" id="modal-share">
<button data-close="" class="player-modal-x">
<svg class="i i-xmark" viewBox="0 0 24 24">
<path d="M18 6 6 18M6 6l12 12"></path>
</svg>
</button>
<h2>Compartilhe nas redes sociais</h2>
<img src="assets/cover.png" alt="portada modal" class="player-modal-image" height="200px" width="200px" />
<div class="player-title song-name fw-500">Song</div>
<span class="player-text song-artist">Artist</span>
<div class="modal-social player-social socials">
<a
class="player-social-item social-facebook"
target="_blank"
data-network="facebook"
data-radio-name=""
data-radio-logo=""
data-radio-url="">
<svg class="i i-facebook" viewBox="0 0 24 24"><path d="M17 14h-3v8h-4v-8H7v-4h3V7a5 5 0 0 1 5-5h3v4h-3q-1 0-1 1v3h4Z"></path></svg>
</a>
<a
class="player-social-item social-twitter"
target="_blank"
data-network="twitter"
data-radio-name=""
data-radio-logo=""
data-radio-url="">
<svg class="i i-x" viewBox="0 0 24 24"><path d="m3 21 7.5-7.5m3-3L21 3M8 3H3l13 18h5Z"></path></svg>
</a>
<a
class="player-social-item social-whatsapp"
target="_blank"
data-network="whatsapp"
data-radio-name=""
data-radio-logo=""
data-radio-url="">
<svg class="i i-whatsapp" viewBox="0 0 24 24">
<circle cx="9" cy="9" r="1"></circle>
<circle cx="15" cy="15" r="1"></circle>
<path d="M8 9a7 7 0 0 0 7 7m-9 5.2A11 11 0 1 0 2.8 18L2 22Z"></path>
</svg>
</a>
</div>
</div>
<div class="modal-video" id="modal-tv">
<button data-close aria-label="close" class="btn">
<svg class="i i-xmark" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"></path></svg>
</button>
<div class="modal-body-video"></div>
</div>
<div class="modal-overlay"></div>
</div>
</div>
</div>
</div>
<script src="config.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="js/main.js"></script>