forked from 811Noobs/fluid-music-player
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.html
127 lines (103 loc) · 4.62 KB
/
app.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid Music Player</title>
<link href="resources/css/style.css" rel="stylesheet">
</head>
<body>
<!-- global window -->
<div class="app-window">
<!-- title bar, which includes title, search bar and button sets -->
<!-- TODO: control buttons(minimalize,maximize,exit), secondary buttons, search bar -->
<div class="app-window__titlebar">
<h1 class="app-icon fluid-logo">
Fluid
</h1>
<div class="titlebar-control">
<button class="titlebar-control__button titlebar-control__button--min">-</button>
<button class="titlebar-control__button titlebar-control__button--max">□</button>
<button class="titlebar-control__button titlebar-control__button--exit">×</button>
</div>
<!-- <div class="titlebar-secondary">
<button class="titlebar-control__button ">1</button>
<button class="titlebar-control__button ">2</button>
<button class="titlebar-control__button ">3</button>
</div> -->
</div>
<!-- all contents should be there -->
<div class="app-content">
<div class="app-content__sidebar">
<!-- <div class="sidebar-content sidebar-content__discovery">
<div class="sidebar-content__title">
<img class="sidebar-content__icon">
<h2 class="sidebar-content__heading">发现音乐</h2>
</div>
<ul class="sidebar-content__list">
<li class="sidebar-content__item">最新歌曲</li>
<li class="sidebar-content__item">热门歌曲</li>
<li class="sidebar-content__item">歌曲推荐</li>
</ul>
</div> -->
<div class="sidebar-content">
<ul class="sidebar-content__list">
<li class="sidebar-content__item">最新歌曲</li>
<li class="sidebar-content__item">歌曲推荐</li>
<li class="sidebar-content__item">我的收藏</li>
<li class="sidebar-content__item">下载管理</li>
</ul>
</div>
<div class="sidebar-resizer"></div>
</div>
<!-- every pages should be wrapped in a section -->
<div class="app-content__section">
<!-- home section -->
<section id="section-1" class="section-wrapper">
</section>
</div>
</div>
<!--bottom bar ; include controller / time bar / volume / play mode -->
<div class="app-window__bottombar">
<!--controller-->
<div class="bottombar-control__controller">
<button class="bottombar-control__button--previous">
<img src="resources/images/pre.png">
</button>
<button class="bottombar-control__button--pauseOrPlay">
<img src="resources/images/播放正方形.png">
</button>
<button class="bottombar-control__button--next">
<img src="resources/images/next.png">
</button>
</div>
<!--time bar-->
<div class="bottombar-control__timebar">
<span class="timebar-time__current">00:00</span>
<div class="timebar-time__progressbar">
<div class="progressbar-whole"></div>
<div class="progressbar-current"></div>
</div>
<span class="timebar-time__whole">00:00</span>
</div>
<!--volume-->
<div class="bottombar-control__volume">
<div class="volume-icon">
<img src="resources/images/loud.png" class="volume-icon__open">
</div>
<div class="volume-louder">
<div class="volume-louder__whole"></div>
<div class="volume-louder__current"></div>
</div>
</div>
<!--play mode-->
<div class="bottombar-control__playmode">
<img src="resources/images/repeat.png" class="playmode-icon__repeat">
</div>
</div>
</div>
<audio></audio>
<script src="resources/js/taskbar.js"></script>
<script src="resources/js/appContent.js"></script>
<script src="resources/js/audio.js"></script>
</body>
</html>