-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (130 loc) · 6.55 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
139
140
141
142
143
144
145
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whistleroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> -->
<script src='build/nanobar.min.js'></script>
<link rel="stylesheet" href="src/reboot.min.css">
<link rel="stylesheet" href="src/bs-custom.css">
<link rel="stylesheet" href="src/whistleroll.css">
<script type="text/javascript" src="build/whistle.build.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>Whistleroll</h1>
<p>
Permit the microphone request. Then whistle pitching downwards.<br/>
<a href="https://github.com/Knogobert/whistleroll" target="_blank">Github Source</a>. Original idea by <a href="https://github.com/jrudenstam/" target="_blank">Jacob Rudenstam</a>.
</p>
<div class="btn-group">
<button id="activateAudioContext" class="btn btn-primary">Request microphone access!</button>
<button id="disableAudioContext" class="btn btn-secondary">Disable microphone</button>
</div>
<div id="messageBox"></div>
<form class="my-5" method="post">
<h2>Options</h2>
<div class="form-group">
<label for="scrollRelativity">Scroll positioning<span>Compared to whistle</span></label>
<div id="scrollRelativity" class="btn-group btn-group-toggle" data-toggle="buttons" data-label="Scroll positioning">
<label class="btn btn-primary active">
<input type="radio" name="scrollRelativity" id="scrollRelativity-1" autocomplete="off" value="relative" checked>Relative
</label>
<label class="btn btn-primary">
<input type="radio" name="scrollRelativity" id="scrollRelativity-2" autocomplete="off" value="absolute">Absolute
</label>
</div>
</div>
<div class="form-group">
<label for="scrollBehavior">Scroll behavior</label>
<div id="scrollBehavior" class="btn-group btn-group-toggle" data-toggle="buttons" data-label="Scroll behavior">
<label class="btn btn-primary active">
<input type="radio" name="scrollBehavior" id="scrollBehavior-1" autocomplete="off" value="smooth" checked>Smooth
</label>
<label class="btn btn-primary">
<input type="radio" name="scrollBehavior" id="scrollBehavior-2" autocomplete="off" value="instant">Instant
</label>
</div>
</div>
<div class="form-group">
<label for="scrollInversion">Inverted scroll</label>
<div id="scrollInversion" class="btn-group btn-group-toggle" data-toggle="buttons" data-label="Inverted scroll">
<label class="btn btn-primary active">
<input type="radio" name="scrollInversion" id="scrollInversion-1" autocomplete="off" value="regular" checked>Regular
</label>
<label class="btn btn-primary">
<input type="radio" name="scrollInversion" id="scrollInversion-2" autocomplete="off" value="inverted">Inverted
</label>
</div>
</div>
<div class="form-group">
<label for="scrollLength">Scroll Length<span>The amount of pixels to scroll on every match.</span></label>
<input type="number" id="scrollLength" name="scrollLength" class="form-control" value="300" data-label="Scroll behavior">
</div>
</form>
</div>
</div>
<!-- <div class="row">
<div id="wroll-container" class="col">
<div id="wroll-floater"></div>
</div>
</div> -->
<div class="container-fluid">
<div class="row">
<div class="col block"><h3>Scrolling 1...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 2...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 3...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 4...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 5...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 6...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 7...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 8...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 9...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 10...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 11...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 12...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 13...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>Scrolling 14...</h3></div>
</div>
<div class="row">
<div class="col block"><h3>You've reached the end.<br>Good for you.</h3></div>
</div>
</div>
<script>window.scroll({
top: 0,
behavior: "smooth",
});</script>
<script src="src/whistleroll.js"></script>
</div>
</body>
</html>