-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
executable file
·107 lines (102 loc) · 3.43 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
<html>
<head>
<style type="text/css">
.control-button {
display: inline-block;
margin-bottom: 2%;
height: 22%;
border-radius: 5px;
background-color: #0003FF;
text-align: center;
width: 100%;
}
.button-text {
display: block;
font-size: 2em;
color: white;
font-family: monospace;
margin: 0px auto;
text-decoration: none;
position: relative;
top: 50%;
border: solid 1px dark-gray;
}
.button-container {
margin: 0px auto;
display: block;
width: 90%;
}
.half-button {
display: inline-block;
width: 49%;
}
.half-button .button-text {
display: inline-block;
}
/* NEXT BUTTON */
.button-next {
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
}
.button-next:active {
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
}
/* PLAY BUTTON */
.button-play {
background: -webkit-gradient(linear, left top, left bottom, from(#18BC0A), to(#20F20D));
background: -moz-linear-gradient(top, #18BC0A, #20F20D);
}
.button-play:active {
background: -webkit-gradient(linear, left top, left bottom, from(#20F20D), to(#18BC0A));
background: -moz-linear-gradient(top, #20F20D, #18BC0A);
}
/* PREVIOUS BUTTON */
.button-previous {
background: -webkit-gradient(linear, left top, left bottom, from(#334FFF), to(#0003FF));
background: -moz-linear-gradient(top, #334FFF, #0003FF);
}
.button-previous:active {
background: -webkit-gradient(linear, left top, left bottom, from(#0003FF), to(#334FFF));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
}
/* PAUSE BUTTON */
.button-pause {
background: -webkit-gradient(linear, left top, left bottom, from(#F7000B), to(#FF363A));
background: -moz-linear-gradient(top, #F7000B, #FF363A);
}
.button-pause:active {
background: -webkit-gradient(linear, left top, left bottom, from(#FF363A), to(#F7000B));
background: -moz-linear-gradient(top, #F7000B, #FF363A);
}
</style>
</head>
<body>
<a href='/pause' class="button-container">
<div class="control-button button-pause">
<div class="button-text" >PAUSE</div>
</div>
</a>
<a href='/play' class="button-container">
<div class="control-button button-play">
<div class="button-text">PLAY</div>
</div>
</a>
<div class="button-container">
<a href='/previous_loop' class="control-button button-previous half-button">
<div class="button-text">PREVIOUS LOOP</div>
</a>
<a href='/previous_section' class="control-button button-previous half-button">
<div class="button-text">SECTION START</div>
</a>
</div>
<div class="button-container">
<a href='/next' class="control-button button-next half-button">
<div class="button-text">ALLOW NEXT</div>
</a>
<a href='/next_jump' class="control-button button-next half-button">
<div class="button-text">JUMP TO NEXT</div>
</a>
<div>
</body>
</html>