-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (107 loc) · 4.96 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
<!DOCTYPE html>
<html>
<head>
<title>Bebop</title>
<meta name='viewport' content='width=1190'>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/audioplayer.css">
<script type="text/javascript">
window.$ = window.jQuery = require('jquery');
var song = require("./js/audioLoader");
</script>
<!-- Requiring Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./node_modules/bootflat/css/bootstrap.min.css">
<link rel="stylesheet" href="./node_modules/bootflat/bootflat/css/bootflat.min.css">
<link rel="stylesheet" href="./node_modules/bootstrap-slider/css/bootstrap-slider.css">
<link rel="stylesheet" href="css/non-responsive.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/360player.css">
<script src="js/audioLoader.js" charset="utf-8"></script>
<script src="js/animator.js" charset="utf-8"></script>
<script src="js/threesixtyplayer.js" charset="utf-8"></script>
<script src="js/audioManager.js" charset="utf-8"></script>
<script src="js/searchFunction.js" charset="utf-8"></script>
<script src="js/audioplayer.min.js" charset="utf-8"></script>
<script src="./node_modules/bootflat/bootflat/js/icheck.min.js"></script>
<script src="./node_modules/soundmanager2/script/soundmanager2.js"></script>
<script src="./node_modules/bootflat/bootflat/js/jquery.fs.selecter.min.js"></script>
<script src="./node_modules/bootflat/bootflat/js/jquery.fs.stepper.min.js"></script>
<script src="./node_modules/bootstrap-slider/js/bootstrap-slider.js"></script>
</head>
<body style="-webkit-app-region: drag">
<!-- NAVIGATION BAR -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="footer">
<div class="row">
<div class="col-md-3 col-lg-3 big-button-div">
<div class="button-div music-controls">
<button type="button" class="btn btn-default btn-side"><i class="glyphicon glyphicon-backward"></i></button>
<button type="button" class="btn btn-default btn-circle btn-lg playbutton"><i class="glyphicon glyphicon-play"></i></button>
<button type="button" class="btn btn-default btn-side"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn btn-default btn-vol"><i class="glyphicon glyphicon-volume-up"></i></button>
</div>
<div class="button-div">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="10" class="vol-slider" />
</div>
</div>
<div class="col-md-6 col-lg-6 music-div">
<h4 id="songname">Fxxk You</h4>
<p id="artistname">Gain - Hello World</p>
<audio>
<source src="music/audio.mp3">
</audio>
</div>
<div class="col-md-3 col-lg-3 paddingtop20">
<form class="navbar-form button-div 20paddingtop" role="search">
<div class="form-group">
<input type="text" id="searchfield" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default" onclick="search_song(); return false;">Submit</button>
</form>
</div>
</div>
</div>
<!-- END OF NAVIGATION BAR -->
<!-- BODY -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="mainbody">
<!-- LEFT SIDEBAR -->
<div class="col-xs-2 col-md-2 col-lg-2 leftbar">
<div class="inner-leftbar">
<h4><strong>LIBRARY</strong></h4>
<ul>
<li><i class="glyphicon glyphicon-music"></i><a href="#">Songs</a></li>
<li><i class="glyphicon glyphicon-user"></i><a href="#">Artists</a></li>
<li><i class="glyphicon glyphicon-cd"></i><a href="#">Albums</a></li>
</ul>
</div>
<div class="inner-leftbar">
<h4>PLAYLISTS</h4>
<ul>
<li><i class="glyphicon glyphicon-music"></i><a href="#">Dapibus ac facilisis in</a></li>
<li><i class="glyphicon glyphicon-music"></i><a href="#">Morbi leo risus</a></li>
<li><i class="glyphicon glyphicon-music"></i><a href="#">Porta ac consectetur ac</a></li>
<li><i class="glyphicon glyphicon-music"></i><a href="#">Vestibulum at eros</a></li>
</ul>
</div>
<div class=" img-thumbnail">
<h4 class="nowplaying"><strong>NOW PLAYING</strong></h4>
<img src="./assets/gain.png" class="img-responsive">
</div>
</div>
<!-- LEFT SIDEBAR END -->
<!-- RIGHT SIDEBAR -->
<div class="col-xs-10 col-md-10 col-lg-10" id="appbody">
<div class="ui360">
<a href="music/audio.mp3">play "an.mp3"</a>
</div>
</div>
<!-- RIGHT SIDEBAR END -->
</div>
<!-- END OF BODY -->
<script type="text/javascript">
var slide= $('#ex1').slider();
</script>
</body>
<!-- Javascript -->
</html>