-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
171 lines (143 loc) · 6.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Music Player</title>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="dist/css/main.css">
<!-- favicon -->
<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
<link rel="icon" href="img/favicon-48.png" sizes="48x48">
<link rel="icon" href="img/favicon-72.png" sizes="72x72">
<link rel="icon" href="img/favicon-96.png" sizes="96x96">
<link rel="icon" href="img/favicon-144.png" sizes="144x144">
<link rel="icon" href="img/favicon-192.png" sizes="192x192">
<link rel="icon" href="img/favicon-512.png" sizes="512x512">
</head>
<body>
<div class="container">
<div class="card">
<header class="card-header clearfix">
<div class="left one-third-width logo">
<i class="icon icon-headphones"></i>
WebMPlayer
</div>
<div class="left one-third-width text-center">
<small id="music-name" class="music-name"> -- </small>
</div>
<div class="left one-third-width text-right">
<div class="dropdown-wrapper inline-block">
<a href="#" class="btn btn-primary btn-header m-r-5 dropdown-toggle" data-dropdown="user-settings">
<i class="icon icon-cog"></i>
</a>
<div id="user-settings" class="dropdown-menu user-settings">
<ul class="color">
<li class="color-item p-5 text-center">
<a href="#" id="btn-red" class="btn btn-circle btn-color bg-red" data-theme-color="red" ></a>
<a href="#" id="btn-pink" class="btn btn-circle btn-color bg-pink" data-theme-color="pink" ></a>
<a href="#" id="btn-purple" class="btn btn-circle btn-color bg-purple" data-theme-color="purple"></a>
<a href="#" id="btn-blue" class="btn btn-circle btn-color bg-blue" data-theme-color="blue" ></a>
<a href="#" id="btn-cyan" class="btn btn-circle btn-color bg-cyan" data-theme-color="cyan" ></a>
<a href="#" id="btn-teal" class="btn btn-circle btn-color bg-teal" data-theme-color="teal" ></a>
<a href="#" id="btn-green" class="btn btn-circle btn-color bg-green" data-theme-color="green" ></a>
<a href="#" id="btn-yellow" class="btn btn-circle btn-color bg-yellow" data-theme-color="yellow"></a>
<a href="#" id="btn-orange" class="btn btn-circle btn-color bg-orange" data-theme-color="orange"></a>
</li>
</ul>
<hr class="divider">
<ul class="theme">
<li class="theme-item">
<a class="theme-item-btn" id="theme-light" href="#" data-theme-scheme="light">
<small>Light</small>
</a>
</li>
<li class="theme-item">
<a class="theme-item-btn" id="theme-dark" href="#" data-theme-scheme="dark">
<small>Dark</small>
</a>
</li>
</ul>
</div><!-- dropdown-menu -->
</div><!-- dropdown-wrapper -->
<a href="#" id="btn-upload" class="btn btn-primary btn-header" title="Adicionar Músicas">
<i class="icon icon-music"></i>
</a>
<input type="file" id="file-element" accept="audio/mp3" multiple style="display:none;">
</div><!-- right -->
</header><!--card-header -->
<hr class="divider">
<section class="card-content">
<div class="play-list-wrap">
<ul class="play-list" id="play-list"></ul>
</div>
</section><!-- card-content -->
<hr class="divider">
<footer class="card-footer">
<audio id="player" preload="auto">Seu browser não suporta reprodução de áudio.</audio>
<div id="player-controls" class="text-center p-10">
<button type="button" class="btn btn-circle m-r-5" id="repeat">
<i class="icon icon-repeat"></i>
</button>
<button type="button" class="btn btn-circle m-r-5" id="prev">
<i class="icon icon-chevron-left"></i>
</button>
<div class="flip-container" id="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<button type="button" class="btn btn-circle btn-large" id="btn-play">
<i class="icon icon-play"></i>
</button>
</div>
<div class="back">
<button type="button" class="btn btn-circle btn-large" id="btn-pause">
<i class="icon icon-pause"></i>
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-circle m-l-5" id="next">
<i class="icon icon-chevron-right"></i>
</button>
<button type="button" class="btn btn-circle m-l-5" id="random">
<i class="icon icon-random"></i>
</button>
</div>
<div class="text-center p-10">
<div id="loading-music" class="loading">Carregando...</div>
</div>
<div class="text-center p-10 clearfix">
<table class="table">
<tr>
<td class="text-right valign-middle">
<label class="is-timer" id="time-count">00:00</label>
</td>
<td class="text-center valign-middle">
<input type="range" class="range" min="0" max="100" id="timeline" value="0" step="any">
</td>
<td class="text-left valign-middle">
<label class="is-timer" id="time">00:00</label>
</td>
</tr>
</table>
<div class="dropdown-wrapper inline-block right">
<button type="button" class="btn-volume btn btn-circle btn-small dropdown-toggle" data-dropdown="volume-dropdown">
<i class="icon icon-volume-down"></i>
</button>
<ul class="dropdown-menu" id="volume-dropdown">
<li class="item p-5">
<input type="range" class="range" min="0" max="10" id="volume" value="10">
</li>
</ul>
</div>
</div>
</footer><!-- card-footer -->
</div><!-- card -->
</div><!-- container -->
<!--<script type="text/javascript" src="js/player.js"></script>-->
<!--<script type="text/javascript" src="js/main.js"></script>-->
<!--<script type="text/javascript" src="js/components/dropdown.js"></script>-->
<script type="text/javascript" src="dist/js/bundle.js"></script>
</body>
</html>