-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
73 lines (70 loc) · 3.35 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="music player">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="author" content="Julia" />
<title>imusic</title>
<link rel="icon" href="./assets/images/Music-icon.png" />
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/knobKnob.css" />
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/index.css" />
<script src="./assets/javascript/jquery.js" ></script>
<script src="./assets/javascript/grace.js"></script>
<script src="./assets/javascript/knobKnob.jquery.js"></script>
</head>
<body>
<div class="container">
<div class="imusic-container">
<div class="imusic-tape-wrapper">
<div class="imusic-tape">
<div class="imusic-tape-back">
<div class="imusic-tape-wheel imusic-tape-wheel-left"><div></div></div>
<div class="imusic-tape-wheel imusic-tape-wheel-right"><div></div></div>
</div>
<div class="imusic-tape-front imusic-tape-side-a">
<span>A</span>
</div>
</div>
</div>
<div class="control-panel">
<div class="imusic-volume-wrap">
<div class="imusic-volume-control">
<div class="imusic-volume-knob">
</div>
</div>
</div>
<ul class="imusic-controls">
<li id="play" class="imusic-control-play control">
Play<span>▶</span>
</li>
<li id="pause" class="imusic-control-pause control">
Pause<span>❚❚</span>
</li>
<li id="pre" class="imusic-control-rewind control">
Pre<span>◁</span>
</li>
<li id="next" class="imusic-control-fforward control">
Next<span>▷</span>
</li>
<li id="stop" class="imusic-control-stop control">
Stop<span>◼</span>
</li>
</ul>
</div>
</div><!-- //imusic-container -->
<div class="list"></div>
</div><!-- //container -->
<div class="ribbon" style="position:fixed;right:0;top:0;width:150px;height:150px;overflow:hidden;z-index:9999;"><a target="_blank" style="display:inline-block;width:200px;overflow:hidden;padding:6px 0;text-align:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-transform:rotate(45deg);text-decoration:none;color:#fff;position:inherit;top:45px;right:-40px;border-width:1px 0;border-style:dotted;border-color:rgba(255, 255, 255, 0.7);font:700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.5);background-color:#a00;" href="//github.com/zhuyali/imusic">Fork me on Github</a></div>
<audio id="audio"><span>HTML5 audio not supported</span></audio>
<audio id="soundAudio" src='./assets/sounds/click.mp3'><span>HTML5 audio not supported</span></audio>
<script id="grace-template" type="template">
<ol class="music-list">
<#each value in $data#>
<li class="item" data-path="<#=$value.path#>"><#=$value.name#></li>
<#/each#>
</ol>
</script>
<script src="./assets/javascript/index.js"></script>
</body>
</html>