-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
224 lines (196 loc) · 10.3 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Puck.js One Button Tracker</title>
<style>
:root {
--jumbotron-padding-y: 3rem;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">
The <i>One Button Tracker</i> is a small side project of <a href='https://tzovar.as'>Bastian Greshake Tzovaras</a> that tries to make the self-tracking of events as easy as possible.
The project was inspired by the <i>one-button</i> idea of Thomas Blomseth Christiansen and Jakob Eg Larsen.
<br/>
Interested in Quantified Self & Self-Research? <a href="http://slackin.openhumans.org/">Reach out on Slack</a>.
</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://www.twitter.com/gedankenstuecke" class="text-white">Follow on Twitter</a></li>
<li><a href="https://www.github.com/gedankenstuecke" class="text-white">Code on GitHub</a></li>
<li><a href="https://tzovar.as" class="text-white">Read my blog</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="50" viewBox="0 0 100 100" fill="white" stroke="currentColor" x="0px" y="0px"><path d="M74.79,48c0-3.92-9.79-4.32-12.79-4.42V41.94c0-3.34-10-3.51-12-3.51s-12,.17-12,3.51v1.63C35,43.65,25.35,44,25.35,48L25,55.26c0,4.63,15.05,6.31,25,6.31s25-1.68,25-6.31ZM40,44.08c3,1.28,8.56,1.37,10,1.37s7-.09,10-1.37v3.14c0,.58-3.94,1.64-10,1.64s-9-1.06-10-1.64Zm10-3.65c5.62,0,9,.91,9.89,1.51-.89.6-4.27,1.51-9.89,1.51s-9-.91-9.89-1.51C41,41.35,44.41,40.44,50,40.44ZM38,45.36V48h0c.5,3,10.07,3.25,12,3.25S61.55,51,62.05,48L62,45.36c6,.14,10.44,1.8,10.94,2.52-.64,1.61-8.45,4-22.88,4-14.93,0-22.78-2.88-22.93-4.47C27.54,46.69,32,45.48,38,45.36ZM50,59.77c-15.07,0-23-2.94-23-4.52V49.9c4,2.72,15.15,3.77,23,3.77s19-1,23-3.77v5.36C73,56.83,65.07,59.77,50,59.77ZM30.32,52.27a2.07,2.07,0,1,0,2.07,2.07A2.07,2.07,0,0,0,30.32,52.27Zm0,3.14a1.07,1.07,0,1,1,1.07-1.07A1.07,1.07,0,0,1,30.32,55.41Zm39.6-3.14A2.07,2.07,0,1,0,72,54.34,2.07,2.07,0,0,0,69.92,52.27Zm0,3.14A1.07,1.07,0,1,1,71,54.34,1.07,1.07,0,0,1,69.92,55.41Z"/></svg>
A One-Button Tracker for Puck.js
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<img src="assets/img/puckjs.png" class="img-fluid" alt="Responsive image">
<h1 class="jumbotron-heading"><i>Puck.js</i> One-Button Tracker</h1>
<p class="lead text-muted">Turn your <a href='https://www.puck-js.com'><em>Puck.js</em></a> into a simple <em>one-button tracker</em>. Every time you press the its button it will record when & for how long you pressed it.</p>
<p>
<button class="btn btn-primary" id="btnConnect">Install / Connect</button>
<button class="btn btn-success" id="btnDownload">Download Data</button>
<button class="btn btn-danger" id="btnErase">Delete Data</button>
</p>
<div id="pb_div" class="progress">
<div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="assets/img/simple.jpeg" size="50%" alt="Card image cap">
<div class="card-body">
<p class="card-text">So many use cases: Track allergies, your mood, your eating, how often you stand up. Only your imagination limits what you can track.</p>
<div class="collapse" id="collapseUseCase">
<div class="card card-body">
<small>
Every time you press the <i>Puck.js</i> button the <i>One Button Tracker</i> will register when & how long you pressed the button. You give those button presses meaning.
You could track discrete events or even make up your own morse code. <a href='#'>Check out some examples</a>.
</small>
</div>
</div>
<br/>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" data-toggle="collapse" data-target="#collapseUseCase" aria-expanded="false" aria-controls="collapseUseCase">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="assets/img/bluetooth.png" size="50%" alt="Card image cap">
<div class="card-body">
<p class="card-text">No apps needed: Press the <em>install</em> button above, select your <em>Puck.js</em> and you're good to go. And downloading the data is just as easy.</p>
<div class="collapse" id="collapseBluetooth">
<div class="card card-body">
<small>
Web Bluetooth currently only works in Chrome & Opera browsers. With them you can install the <i>One Button</i> app on your <i>Puck.js</i> and download the data right from this website. But no information is ever transmitted to the web. Whatever you track, it's between your <i>Puck.js</i> and your browser.
</small>
</div>
</div>
<br/>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" data-toggle="collapse" data-target="#collapseBluetooth" aria-expanded="false" aria-controls="collapseBluetooth">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="assets/img/opensource.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Everything is open source for you to tweak: The <em>Puck.js</em> with all of its hardware, firmware & software and this website is as well.</p>
<div class="collapse" id="collapseOpenSource">
<div class="card card-body">
<small>
You can get involved! All the <a href="https://github.com/espruino">code etc. for the Puck.js are on GitHub</a>. And so is <a href="https://github.com/gedankenstuecke/one-button-tracker">the code for this website & the One Button Tracker</a>.
</small>
</div>
</div>
<br/>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" data-toggle="collapse" data-target="#collapseOpenSource" aria-expanded="false" aria-controls="collapseOpenSource">Learn more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://www.puck-js.com/puck.js"></script>
<footer class="text-muted">
<div class="container">
<div class="row">
<div class="col">
<p class="float-left">An Espruino/Puck.js fan project; <a href="https://github.com/gedankenstuecke/one-button-tracker">open source with ❤</a><br/>Button icon by W. X. Chee from the Noun Project.</p>
</div>
<div class="col">
<p class="float-right">
supported by
<a href="https://research.cri-paris.org"><img src="assets/img/cri-logo.png"/></a> &
<a href="https://www.openhumans.org"><img src="assets/img/oh-logo.png"/></a>
</p>
</div>
</div>
</div>
</footer>
<script>
// Code to upload to Bangle.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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="assets/js/puck_connection.js"></script>
<script>
$("#pb_div").hide();
</script>
</body>
</html>