-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (118 loc) · 6.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Metronome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel='stylesheet' href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/metronome.js"></script>
</head>
<body>
<div class="container" style="padding-top :50px">
<div class="row">
<div class="col-xl ">
<div class ="fonts1" style="font-family: Poppins;font-style: normal;font-weight: normal;line-height: 108px;color: white;display: flex;
justify-content: center;
align-items: center;">Metronome</div>
<div style ="display: flex;
justify-content: center;
align-items: center;">
<button class="btn btn-secondary btn-rounded" style="background: #615C5C;" onclick="sub1()" > - </button>
<label id = "bpm" style ="padding-left: 20px;padding-right: 40px;color:white" > 100 BPM </label>
<button class=" btn btn-secondary btn-rounded" style="background: #615C5C;" onclick="plus1()" > + </button>
</div>
<div class="form-group" style="padding-top: 20px;display: flex;
justify-content: center;
align-items: center;">
<select id="style" class="form-control" onclick='stylechange()'>
<option value='0'> Kartaal (4)</option>
<option value='1'> Kartaal (3)</option>
<option value='2'> Mridanga (16)</option>
<option value='3'> Mridanga (8)</option>
</select>
</div>
<div class="form-group">
<label for="bpmvel" style="
display: flex;
align-items: center;
text-align: center;
font-weight: normal;
color: white;">BPM Velocity</label>
<input id="bpm_velo" class='form-control' type="number" value='0'
min='0' max='50' onchange="bpmvel()">
</div>
<div class="container">
<div class="row">
<div class='col-sm-4'style="padding-top:20px;">
<input id="start" class="form-control btn btn-secondary"
type="button" value="Start" onclick='toggle()'style ="color: #AC9B9B;background: rgba(2, 15, 40, 0.64);
border-radius: 15px;font-weight: 500;
font-size: 24px;"/>
</div>
<div class='col-sm-8'style="padding-top:20px;">
<input id="addtofav" class="form-control btn btn-secondary"
type="button" value="Add to Favourites" onclick='addtofav()'style ="color: #AC9B9B;background: rgba(2, 15, 40, 0.64);
border-radius: 15px;font-weight: 500;
font-size: 24px;"/>
</div>
</div>
</div>
<div class='container' >
<div class='row'>
<div class='col-sm-8'style="padding-top:20px;">
<input id="tap" class="form-control btn btn-secondary"
type="button" value="No Transition " onclick="tap()" style ="color: #AC9B9B;background: rgba(2, 15, 40, 0.64);
border-radius: 15px;font-weight: 500;
font-size: 20px;"/>
</div>
<div class="col-sm-4"style="padding-top:20px;">
<input id="reset" class="form-control btn btn-secondary"
type="button" value="Reset" onclick="reset()"style ="color: #AC9B9B;background: rgba(2, 15, 40, 0.64);
border-radius: 15px;font-weight: 500;
font-size: 24px;"/>
</div>
</div>
</div>
</div>
<div class="col-xl pad">
<div class="container">
<div class ="fonts2" style="font-family: Poppins;font-style: normal;font-weight: normal;line-height: 108px;color: white;display: flex; justify-content: center;align-items: center;">
Play your favourites
</div>
<div class="row" id="fav">
</div>
</div>
</div>
</div>
<div id='visualization' class="col-sm mx-auto" style="padding-top: 40px;display: flex;
justify-content: center;
align-items: center;">
</div>
<div id='visual_style' class="col-sm mx-auto" style="padding-top: 40px;display: flex;
justify-content: center;
align-items: center;">
</div>
<div id='visual_bpm' class="col-sm mx-auto" style="padding-top: 40px;display: flex;
justify-content: center;
align-items: center;">
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-6col-sm-6 col-xs-12">
<p class="copyright-text"> Developed by <a href="https://in.linkedin.com/in/gyanendra-kumar-iitk">Gyanendra Kumar</a>, <a href="https://www.linkedin.com/in/nitin-gupta-23805a201/?originalSubdomain=in">Nitin Gupta</a> and <a href="https://www.linkedin.com/in/abhishek-verma-300a3a1b4/">Abhishek Verma</a>, guided by <a href="https://vipular.github.io">Vipul Arora</a>. <br>
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
<a href="#">Madhav Lab @ IITK</a>.
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>