-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (123 loc) · 7.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Music Player</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" id="themeFile" />
</head>
<body>
<div id="container">
<div id="titleBar">
<div class="draggable"></div>
<div>
<button class="windowControlButton" id="min-btn">_</button>
<button class="windowControlButton" id="max-btn">□</button>
<button class="windowControlButton" id="close-btn">⊗</button>
</div>
</div>
<div id="sidebar">
<div id="appName"></div>
<div id="topSidebarMenu">
<svg class="sidebarIcons" id="menu" viewBox="0 0 8 8">
<path d="M0 0v1h8v-1h-8zm0 2.97v1h8v-1h-8zm0 3v1h8v-1h-8z" transform="translate(0 1)" />
</svg>
<!-- <img class="sidebarIcons" id="search" /> -->
<svg class="sidebarIcons" id="search" viewBox="0 0 16 16">
<g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g class="sidebarIcons">
<path
d="M15.7,13.3 L11.89,9.47 C12.59,8.49 13,7.3 13,6 C13,2.69 10.31,0 7,0 C3.69,0 1,2.69 1,6 C1,9.31 3.69,12 7,12 C8.3,12 9.48,11.59 10.47,10.89 L14.3,14.7 C14.49,14.9 14.75,15 15,15 C15.25,15 15.52,14.91 15.7,14.7 C16.09,14.31 16.09,13.68 15.7,13.29 L15.7,13.3 Z M7,10.7 C4.41,10.7 2.3,8.59 2.3,6 C2.3,3.41 4.41,1.3 7,1.3 C9.59,1.3 11.7,3.41 11.7,6 C11.7,8.59 9.59,10.7 7,10.7 L7,10.7 Z"
id="Shape"
></path>
</g>
</g>
</svg>
<!-- <img class="sidebarIcons" id="recent" /> -->
<svg class="sidebarIcons" id="recent" viewBox="0 0 8 8">
<path d="M4 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 1c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm-.5 1v2.22l.16.13.5.5.34.38.72-.72-.38-.34-.34-.34v-1.81h-1z" />
</svg>
<svg class="sidebarIcons" id="addDirectory" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512">
<path
d="M417.4,224H288V94.6c0-16.9-14.3-30.6-32-30.6c-17.7,0-32,13.7-32,30.6V224H94.6C77.7,224,64,238.3,64,256
c0,17.7,13.7,32,30.6,32H224v129.4c0,16.9,14.3,30.6,32,30.6c17.7,0,32-13.7,32-30.6V288h129.4c16.9,0,30.6-14.3,30.6-32
C448,238.3,434.3,224,417.4,224z"
/>
</svg>
</div>
<div></div>
<div id="bottomSidebarMenu">
<svg class="sidebarIcons" id="settings" viewBox="0 0 8 8">
<path
d="M3.5 0l-.5 1.19c-.1.03-.19.08-.28.13l-1.19-.5-.72.72.5 1.19c-.05.1-.09.18-.13.28l-1.19.5v1l1.19.5c.04.1.08.18.13.28l-.5 1.19.72.72 1.19-.5c.09.04.18.09.28.13l.5 1.19h1l.5-1.19c.09-.04.19-.08.28-.13l1.19.5.72-.72-.5-1.19c.04-.09.09-.19.13-.28l1.19-.5v-1l-1.19-.5c-.03-.09-.08-.19-.13-.28l.5-1.19-.72-.72-1.19.5c-.09-.04-.19-.09-.28-.13l-.5-1.19h-1zm.5 2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"
/>
</svg>
</div>
</div>
<div id="mainPanel">
<div id="songListOptions"></div>
<div id="songList"></div>
</div>
<div id="playerArea">
<div id="songInfo"></div>
<div id="player">
<div id="playerControls">
<!-- -->
<svg id="shuffle" width="30px" height="30px" fill="#ffffff" viewBox="0 0 92 92">
<path
id="XMLID_799_"
d="M68.2,30C64,30,53.5,40.4,45.8,47.9C34.2,59.1,23.2,70,14.4,70H9c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4h5.4 c5.6,0,16.8-11.2,25.8-19.9C51.2,31.5,60.7,22,68.2,22h5.2l-5.5-5.3c-1.6-1.6-1.6-3.9,0-5.5c1.6-1.6,4.1-1.6,5.7,0l12.3,12.3 c0.8,0.8,1.2,1.8,1.2,2.8c0,1.1-0.4,2.1-1.2,2.8L73.5,41.4c-0.8,0.8-1.8,1.1-2.8,1.1c-1,0-2-0.4-2.8-1.2c-1.6-1.6-1.6-4.2,0-5.7 l5.5-5.6H68.2z M73.5,50.6c-1.6-1.6-4.1-1.6-5.7,0c-1.6,1.6-1.6,4.2,0,5.8l5.5,5.6h-5.2c-3.3,0-8.8-4.9-14.2-9.9 c-1.6-1.5-4.1-1.5-5.7,0.1c-1.5,1.6-1.4,4.3,0.2,5.8C56.8,65.7,62.4,70,68.2,70h5.2l-5.5,5.3c-1.6,1.6-1.6,4,0,5.6 c0.8,0.8,1.8,1.1,2.8,1.1c1,0,2-0.4,2.8-1.2l12.3-12.3c0.8-0.8,1.2-1.8,1.2-2.8c0-1.1-0.4-2.1-1.2-2.8L73.5,50.6z M9,30h5.4 c4.2,0,10.5,5.4,15.5,9.9c0.8,0.7,1.7,1.1,2.7,1.1c1.1,0,2.2-0.4,3-1.3c1.5-1.6,1.4-4.3-0.3-5.8c-7.8-7.1-14.4-12-20.9-12H9 c-2.2,0-4,1.8-4,4S6.8,30,9,30z"
/>
</svg>
<svg id="previous" viewBox="0 0 92 92" height="30px" width="30px" fill="#ffffff" xml:space="preserve">
<path
d="M78.7,9.4c-1.4-0.7-3-0.5-4.2,0.5L33,42.9c-1,0.8-1.5,1.9-1.5,3.1s0.6,2.4,1.5,3.1l41.5,33 c0.7,0.6,1.6,0.9,2.5,0.9c0.6,0,1.2-0.1,1.7-0.4c1.4-0.7,2.3-2.1,2.3-3.6V13C81,11.5,80.1,10.1,78.7,9.4z M73,70.7L41.9,46L73,21.3 V70.7z M19,14.6v63.5c0,2.5-2,4.5-4.5,4.5s-4.5-2-4.5-4.5V14.6c0-2.5,2-4.5,4.5-4.5S19,12.1,19,14.6z"
/>
</svg>
<span id="playPause" data-is-playing="false" data-song-index="" data-curr-song="">
<svg height="30px" width="30px" fill="#ffffff" viewBox="0 0 92 92">
<path d="M69.5,42.9l-42-33c-1.2-0.9-2.8-1.1-4.2-0.5C21.9,10.1,21,11.5,21,13v66c0,1.5,0.9,2.9,2.3,3.6 c0.6,0.3,1.2,0.4,1.7,0.4c0.9,0,1.8-0.3,2.5-0.9l42-33c1-0.8,1.5-1.9,1.5-3.1S70.4,43.6,69.5,42.9z M29,70.8V21.2L60.5,46L29,70.8z" />
</svg>
</span>
<svg id="next" width="30px" height="30px" viewBox="0 0 92 92" fill="#ffffff" xml:space="preserve">
<path
d="M59.5,42.9l-42-33c-1.2-0.9-2.8-1.1-4.2-0.5C11.9,10.1,11,11.5,11,13v66c0,1.5,0.9,2.9,2.3,3.6 c0.6,0.3,1.2,0.4,1.7,0.4c0.9,0,1.8-0.3,2.5-0.9l42-33c1-0.8,1.5-1.9,1.5-3.1C61,44.8,60.4,43.6,59.5,42.9z M19,70.8V21.2L50.5,46 L19,70.8z M81,14.6v63.5c0,2.5-2,4.5-4.5,4.5s-4.5-2-4.5-4.5V14.6c0-2.5,2-4.5,4.5-4.5S81,12.1,81,14.6z"
/>
</svg>
<svg id="loop" width="29px" height="29px" viewBox="0 0 322.447 322.447" fill="#ffffff" xml:space="preserve">
<path
d="M321.832,230.327c-2.133-6.565-9.184-10.154-15.75-8.025l-16.254,5.281C299.785,206.991,305,184.347,305,161.224 c0-84.089-68.41-152.5-152.5-152.5C68.411,8.724,0,77.135,0,161.224s68.411,152.5,152.5,152.5c6.903,0,12.5-5.597,12.5-12.5 c0-6.902-5.597-12.5-12.5-12.5c-70.304,0-127.5-57.195-127.5-127.5c0-70.304,57.196-127.5,127.5-127.5 c70.305,0,127.5,57.196,127.5,127.5c0,19.372-4.371,38.337-12.723,55.568l-5.553-17.096c-2.133-6.564-9.186-10.156-15.75-8.025 c-6.566,2.134-10.16,9.186-8.027,15.751l14.74,45.368c1.715,5.283,6.615,8.642,11.885,8.642c1.279,0,2.582-0.198,3.865-0.614 l45.369-14.738C320.371,243.946,323.965,236.895,321.832,230.327z"
/>
</svg>
</div>
</div>
<div id="controls"></div>
<div id="songProgressbar">
<span id="currTime">0:00</span>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange" />
<span id="duration">0:00</span>
</div>
</div>
</div>
<!-- scripts -->
<script>
if (typeof module === 'object') {
window.module = module;
module = undefined;
}
</script>
<script src="./lib/jquery-3.3.1.min.js"></script>
<!-- Insert this line after script imports -->
<script>
if (window.module) module = window.module;
</script>
<script src="js/constant.js"></script>
<script src="js/player_ui.js"></script>
<script src="js/player.js"></script>
<script src="js/app.js"></script>
<script src="js/db.js"></script>
<script src="js/windowload.js"></script>
</body>
</html>