/
index.html
324 lines (317 loc) · 19.6 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content="width=device-width, initial-scale=1"/>
<meta property="og:title" content="NoteCalc - Bring smart note taking with built-in calculator to the web"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://bbodi.github.io/notecalc3/"/>
<meta property="og:description"
content=""/>
<link rel="shortcut icon" type="image/png" href="assets/favico192.png">
<link rel="stylesheet" href="assets/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="assets/notecalc.css"/>
<link href="/atom.xml" rel="alternate" type="application/atom+xml"/>
<title>NoteCalc - A handy note taking app with built in calculator </title>
</head>
<body>
<nav class="navbar navbar-light" style="
background-color: #e3f2fd;
padding: 0">
<div class="container">
<div class="row">
<div class="col-4">
<a class="" href="#">
<img src="assets/logo.png"
style="
height: 70px; margin: 0; padding: 0
"/>
</a>
</div>
</div>
<div>
<a class="btn btn-primary rounded-pill" href="https://bbodi.github.io/notecalc3/notecalc#" target="_blank"
role="button">Get Started</a>
<a class="btn btn-secondary rounded-pill" href="https://github.com/bbodi/notecalc3" target="_blank"
role="button">GitHub</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<p class="lead">
NoteCalc is a handy notepad
with a smart builtin calculator.
</p>
<p class="lead">
Honestly, it just tries to be a free Soulver alternative
in your browser.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h2>
Features
<small class="text-muted">
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJx9Vttu2zgQfedXDNBLLlVtyY7TeLd9SBp0W6BJiiTt7iLIApRF24QlUiAlO-7X7xlSdpwGaALbEi9zOXN4hpe2URNZTkh7kjSXplgTv7elbKyjxq21mVFjKXfhYa5IFktpGjlTnuyUbmxbLpUTWMKTK5X3hPjXtrBiqPWKdEOSbU9slWsjG20N75O7buAWAwax1LJIqNIP7GyzADt8Ikxb5cr5hGytHO_CY2t0E6KolPStU5UyDa10M-cBAxvTtkyoUH7idN3opaJGPWCHdLaFSwRcJaJ2dqmL4NAanqcpQlrb1j2JoEfXyrcl-zMhVadnc-TmgEjb2AqrsLxci7YuZKMKWs2VCf5oAlwBF4C55VeGencHebnEem2i09JiFHjblVcuYVTmHBx2eU6vAxpzgH0H65mTeQCyspznNsBZ2zTKEe3z0MwpuAPKAUEqtVGUq2alONQ5XKhCY0LIiA65mPJBBJVHKstFRRCY0j-jo7ipHxczIhJx3dgKMw-yqkukTp-UKmnqVNgbAQn4h5DrUq67omCneEHflJuoSDKRpSm9oSx9JQZ4OqRRfHhLAwzx4svIjIBEYc1eAx4vox9YbOinctbDQLoQhD_knaUX4qaWE7XBAvB3_MIcpWn4CHGksoEY9rIj9XYQXJ2BwW4dYv6sHsTT162J9OHTJ5HmWYw8zdM0y0SOg-DnetpwMXkszej9ezoS2TH9c3VNg9FIXF7d7uP3gE4vz4MV2BG3QDiXAB08f6xJqHmuOigLytdUY8az9a9q2nCa14EAk9Z5vKzmulRibstA9cKuDJ3CzEKte8Qu9tKHvZDJXprvPeV4R6FGlaVnjjJVYW4yD3GJnaBkXSvpfCzitZoqp8yE_THT_JarTjGJdk8Xxz8p9WTRqUzFPnYM19KoMhGhel6VatJsF26p-f1b__zq70tOycd0aZPu6ddbxJQNkHdZSgfgCjBpyL8eAqDBBJB_SLWyoCumXt8dndwL8SUGIXM-U5xDQsPjqJWuyw6WlrJsFchtq3iihic9Eh8jx6VZd-fXbCaTALNmpSpLriFMcUZRA2LSj8gF470tdGqJo_p4xB-DCAg_OUQ_pNMyx-kTZ9IsmD6nlUKukj7QKDD8ZX-NcoGjo94Ax-qjbnTOS5_NH78S53ra-WJL26Vv6Rfj4vXdaHzP6PJej0Be0CnkDvoPaLnYwY-42OTQ8VM2UUsATUd08HmpITcRt6ATzHC6PT3rhVOx7BIkI6E1GzSfamvnVjEm2MNqjY9nccpbDWYBcm80eMv-5fZcyceQFVqS6s16oldr0YPpodjvIoHkRqLtJMLs-H0u_iCgctNW2xTAzZeh7-QKzXRwmA3jK9JYqMYL5EK-hkGmxAfybSUEvkiWKwm2M8997AsY_NXnkzYmPitZsEohA-Qcv7mNRhZDNVkvewjwBXQByczDepw6rGHr3QqRhgCwwNhVHGHSfeeWHKrjrEQTsXZBR6NKm7ZhenZ9BamoLTZLBS0BhivcEw4pGyyq_lzsB9-Mpdl0ka4-tuI277eFMutVqCsKGdZGGQyp3j5j0cq6BcQGd57ubgIPELGOLJK8Dp4qaI6uoUcBNLFpkU8TiZEm4FEod0cteCj8TlNV8cJiirBJbAfQMZOoogkDgVblPOSFTeiZsW5zg9gWr7t-RUE8EOdQ8BIQ87ik7K8zmjIRgxr2ucPlfc-YIGLBosmJrcO6X2chi5xIeO17MaLqv0GcXfDTnMt6IRunH0LaPyBVuCLcjZLjNHmXnPBZv8uSlP__TJNB95smw-43TY7uiY187ErHHt9Abfv9kNGmbbLxCI22_LqDBGLZ1P0P4M7qEtj2uZ1FZbip-IR0lsJpqS1YkOsSWoN6faDx-HB8cjh-dzg-PhyPAjW4d04C5VfamA3ApeVut2ZmZP1nlsQXvrvGY4mYPIg4hFCKvI03ZaZo1aI1dktWuB8XYSE9j4r7TJaO7tloPLF8peqOxU4cw96xGr-k_dur8yt-oQtXHHAKpqPwPts5vkdp-eHd_QHcVwi2Anp8JJTxOl6JEGcIhD104sJBb_rOSjpuTWix0574H6YbB4c">
Demo
</a>
</small>
</h2>
<div class="d-block d-md-none mt-sm-1"><br></div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="card">
<img class="card-img-top" src="assets/simple.gif"/>
<div class="card-body">
<h3 class="card-title">Simple and intuitive</h3>
<div class="card-text">
It can be used as a combination of a calculator and a notepad, <br>
mixing calculations,
numbers, operators, units of measurement with meaningful, descriptive texts around them,
providing context for your calculations.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/simple_sum.gif"/>
<div class="card-body">
<h3 class="card-title">Sum</h3>
<div class="card-text">
Values are automatically accumulated in the <code>sum</code> variable.<br/>
It can be reset and set to zero by starting a line with a hashmark (<code>#</code>).
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/sum_selection.gif" style="width: 100%"/>
<div class="card-body">
<h3 class="card-title">Smart selection</h3>
<div class="card-text">
Selecting part of an expression shows the result of that expression.
<br>Selecting multiple lines shows the sum of the lines.
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 col-sm-12">
<div class="card">
<img class="card-img-top" src="assets/select_line_refs.gif"/>
<div class="card-body">
<h3 class="card-title">Line references</h3>
<div class="card-text">
Use the cursor keys while <kbd>ALT</kbd> is pressed,
to choose from any previous results to insert it at the cursor's position.
<br>If the cursor is on a line which contains references,
both the reference and the referenced line are highlighted with the same color.
<br>References are automatically updated whenever their original values change.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/var_line_ref_usage_highlighting.gif"/>
<div class="card-body">
<h3 class="card-title">Variable/Reference usage highlighting</h3>
<div class="card-text">
Helping the navigation and readability, variables and references are automatically highlighted
at their usages.
<br>
<br>Standing on a reference/variable and pressing <kbd>CTRL + b</kbd>
moves the cursor to the definition line of the reference/variable.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/autocompletion.gif"/>
<div class="card-body">
<h3 class="card-title">Autocompletion</h3>
<div class="card-text">
Variable names are autocompleted by <kbd>TAB</kbd>.
<br>Below, <code>mo</code> was typed then autocompleted to <code>monthly rent</code> by pressing
<kbd>TAB</kbd>.
<br>In case of name collision (e.g. a second variable exists with name <code>mow</code>,
specify more letters until the autocompletion is possible.<br>
<code>.pow</code> is autocompleted to <code>^</code>,
and <code>.pi</code> to <code>π</code>.<br>
<span class="badge badge-primary">Coming soon</span>
<small class="text-muted">Autocompletion popup dialog</small>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 col-sm-12">
<div class="card">
<img class="card-img-top" src="assets/matrix_mult.gif"/>
<div class="card-body">
<h3 class="card-title">Vectors and Matrices</h3>
<div class="card-text">
Matrices can be created by autocompleting <code>.mat</code>, <code>.mat3</code> or
<code>.mat4</code> prefixes.
<br>Creating a matrix by autocompletion or stepping into it using the cursor keys, put the user
into 'matrix edit mode'.
In this mode, beside modifying the matrix, it can be resized with <kbd>ALT</kbd> and
the cursor keys (e.g. <kbd>ALT + up</kbd> decreases the number of rows).
Use the cursor keys or <kbd>Tab</kbd> to switch between the matrix cells.
<br>Press <kbd>Enter</kbd>, or simply navigate out from the matrix to leave the edit mode.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/bin_op.gif"/>
<div class="card-body">
<h3 class="card-title">Binary operations</h3>
<div class="card-text">
Bit manipulations (<code>AND</code>, <code>OR</code>, <code>NOT(x)</code>, <code>XOR</code>,
shifts (<code><<</code>, <code>>></code>)) are supported currently.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/base_change.gif"/>
<div class="card-body">
<h3 class="card-title">Binary and Hex Results</h3>
<div class="card-text">
Pressing <kbd>ALT + left/right</kbd> changes the base of the current line's result to binary,
hex or decimal.
<br>
<span class="badge badge-primary">Coming soon</span>
<small class="text-muted">Scientific notation</small>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 col-sm-12">
<div class="card">
<img class="card-img-top" src="assets/functions.gif"/>
<div class="card-body">
<h3 class="card-title">Builtin functions</h3>
<div class="card-text">
<code>sin(), cos(), pi(), nth() </code> and many more builtin functions
<br>
<span class="badge badge-primary">Coming soon</span>
<small class="text-muted">Documentation and more functions</small>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/unit_conv.gif"/>
<div class="card-body">
<h3 class="card-title">Unit conversion</h3>
<div class="card-text">
Units, calculations with- and conversions between them are fully supported.
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top" src="assets/easy_sharing.gif"/>
<div class="card-body">
<h3 class="card-title">Easy sharing</h3>
<div class="card-text">
The content is automatically saved into the URL, so just
copy the URL and send it to a friend, she will see the same notes.
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 col-sm-12">
<div class="card">
<img class="card-img-top" src="assets/content_saving.gif"/>
<div class="card-body">
<h3 class="card-title">Automatic offline saving</h3>
<div class="card-text">
The content is automatically saved into your offline browser storage, so if you leave
the website and come back later, all your notes and tabs will be saved.<br>
<strong>Your data is safe, nothing is sent to the server, everything is offline.</strong>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<img class="card-img-top"
src="https://opensource.org/files/osi_symbol_0.png"
style="width: 50%"
/>
<div class="card-body">
<h3 class="card-title">
<a href="https://github.com/bbodi/notecalc3" target="_blank">
Free and Open Source
</a>
</h3>
</div>
</div>
</div>
<div class="col-md-4 col-12 mt-3 mt-md-0">
<div class="card">
<div class="card-body">
<h3 class="card-title">Examples</h3>
<div class="card-text">
<ul>
<li>
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJxtVV1v2zYUfeevuA9t1qb-kO2mb3loGmQbsGVFm24Yig6gpGuLMEUKpGRF-_U7l5Idp6sB2xR5eT_OPffo3rdcaFuQiaSp0q4cSJ47q1sfqA2DcTtqPeUhLSomXR60a_WOI_ktffadPXBQMJHDnvOFUn_7Dl4cdZHJtKTFd-Hr3DjdGu_knj4Pg7DYcMil0eWMavMowY4GuBFnynV1ziHOyDcc5BaWnTNtyqJmHbvANbuWetNWsuHgY9vZGZUci2Ca1hyYWn7EDR18h5BIuJ6pJviDKVNA7-Sctkhp8F14lsGCPnHsrMRzqdRgdhVqC0Cka30NK5jbQXVNqVsuqa_YpXhUAFfABWAe5FGgPr9BUR9gb9wY1HrsAm_fRw4zQaWS5HArSnkT0DgD7HD52ddM_KjrxiIE3TFb2gZmMRwDpzoTxo3Vw1Q8bn7kUPDYSXX99FGrLKM3tMpeqjVWl3Q1Lua0xpa6P_bhF35MTqWrYaDS7NCMc0c_-CRmlN791IJrhzFHZNPSvxx8RMxsrwD-KvtdxUYXUmajQ4Jz6j_OKMvSV92MkSUJSeZokT3e3aksX411ZHmWrVZKfeItB3aFYGmN4x-keuJtYGHuefcpR4VB7y7K4JtmGoWacjQHaPs69YRLA15KAaetkDgDTrrS92jx1L3RElwOqNBy0Z48JvaKyZePy9s__rqnPQ9R9ZWxTJW3iafvf3tYqNUaQFqrA-VA55I28h_BZgPYQJYNNezBCRxdfN2sv6lfR9rq3AN4QWBGm3fj3IcJGzg6aNvxmL_Y0Ga9oA8jjbQbJiq649lMwFdGCrTgrNS7lXJGOo8APMGefC9OKPMBA1JLNueGuJra88TTP3UwOrfnHVM32u1l8N_XjII1XdNV4sSL5cCA5A1dLdbg7QfTmlxM_3f-7qW6NdsppHg6mc7pO-fq4uvb9TeBWO5GNZ8D_BdJJXKG9K0vV5vxEQO9ZwwBpppiwy5165piVyuFH9K210NMfYzjFGMTgWTZBD4Y38VntEMsEYWJlJHbM5LolixkD1u9p1LHCpi9ms9fy4E4zHlnnIjgKLcCqspSGui5Axtl5pT64k5jqx6kD15DGb3f09ur2riulVaMYik1oT1TwgeuTAF-9ZD3S1qt9_WyUq8eKngXUrmjKMEYGUH-RZ1jKiVPZIJAQjzBk2SL-mNMQpvSOMGRmNb7sMcM4lU1vVIQIddx0k9N0aRINWbNNBbbgp7Kue0ZHHteyJjpjPIu4ST6HVKEUiKMN6S-9J5xZbqkThtpbDGOBTwACKhXiJgkcWF2zoej8J-6OL01RyF4rW597ywgln1Nq59vaCujnTq6FOHLl1EwQcYiJKmwIdl9fwoBkELS4zKqK6r_WY-ne1lV6j9NhaIw">
Introduction/Features
</a>
</li>
<li>
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJydVF1v2kAQfL9fMVKUChODMU5oEokHwkdKGyACUilCPBzmMBa2D9lHEv5994zNR4Oiqjxxtzs7s7PrS-QmdsU9lkqtk3vLiv31Wsxncr4tuzK0lvK9pGTJ5YG7CbgSpUDwyON-lJRC7sYysRh7F763VKjjtoKVx5b50b6rwA0Z9wQdnApjFxgpsYZ9j2ZeD1viBwoPPOEBekLxmQx8F0OKGXTdGxosFBHoDxWp1XCFgu2Uv6OIHa1lrzxD397Q1TK7ckMDJRRq5Vu6JH4j5R63n1Eto9Ptt_A6eBli3Gq38fCKRuvny2jc7T-iMxii0Rx3f3fHr6y5lDIRaLjKf_PVFsymoiMxF5Hi8RaFwFcqEJAxIgnxIWLXT0j0RGv9gF22b6asSpCeTFSwRXJAysXCdwXeZbwyTKyDTQKnhjnfJpCLrDEE_kL5kXeo51A9h-o96TAV5FqY-Hf8DeGvCf-Dwv8B_05wnntRR5Wl9tVRyOdTRKSWhYlu3NRqTU1ppkATObJkG4dpOOXMezQbT4Nht41uf9z4RUNpjNotDPq7OT0OGk_s4gIdTrJkkjDQj5z0hCK1YkXNLLIQYr1UdVTKN5dpWiFVSctQON6X4pfwImy7UjEMrGjvNXFvk7g0ab33adFQUqcE09nHnukEvfjH1LSaB2Yq_SW2CMfZE2vm51gqQQGfNmclmGXB3W0lxxsPNgIzoaiHiOZTg2cRA4_mtOXV9JDKWOthnVyc1KRopqBIqXS9SyIBMvZJ4SKW4R5S_xtcxLXWankamdul53QQTKNIhdF3ol0WPFH0Glzq1tVS7IlSVj0HlwzSDwzudpXPyNFpdXybVKtTbVnlcg_e9_QZYBHAuZ7uWiSVTR7PcpkavjsnqahYhCRhLmKtMn2ilFT0QM02c9qaExf3cjMjYh6eUezq4vSt7DSXzsgrnbfcyIrttX7qLY2lzd1lzdHLJdwVO5N2dYb46jwxezbRNNHJaSenkzePJJkH56eM_QHFb_Bk">
LeanGains diet macro calculator
</a>
</li>
<li>
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJxlkEFLAzEQhe_5FQ-8Lct2jbYi4kEqe-699DBNpknYNZEkCvvvTdYq1c7hvSF8eTPMS4w0J6jgMzmPbBm7GDI732KgDPIaW4rHYGcdKbOoJPuMcAKTsjiFoLH8dAmR0zur7D4ZIWqOnRA3GCoxuZQFrmt39mHRrS0ilHVqZI9jZEoZz9hL2a1hWtltivYwB6xw2_dGRKf4Iq2gm66vTCdN-yALuNSZLsu8kpvmsm-mkf8ParD-zWxwV3t9gZf09PH296nB_n5UNK3M048_fvuhHqW24guuqmaB">
Daily nutrient calculator
</a>
</li>
<li>
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJxVjs0KwjAQhO_7FHOw0FRqf0Q8-SpC0IhFsy3biOTt3cQe2svCfDM7zCTDzeGC46l97eg-fhmTjd5xUNi3BSpMKUKPgS1r1Prxk82MUWP9QzRwcOLmALEh9x7OBZrorJAaPpEWSc7EKjKr0PX_iCjaNjQoF9MQ-ZHD8x1XC6UpO92gZw8x17JmY1Btt9IP-C5GSw">
Financial calculations
</a>
</li>
<li>
<a target="_blank"
href="https://bbodi.github.io/notecalc3/notecalc#eJxtkMtOw0AMRff5iitlw0M04aGKTRetULugZYGQWE9SJ2MRZqJ5lAbx8cyUCEJTb2xfH1nXTvFq2BE67Q1Ytd5BkqHkp5wh35c55TGSLIO3hPn65fJsTZX7euZaunN8SG4IcewkofTG6rDKQquDIAq9IzSs6IBolFKommIlaY_AFqyE6WCoNWRJOeFYqyRJgx9HJoiOVd2bE3YymSRpipAs7ciIBl5ZrhVtsRVOwHUt2d7__OkhXLBcYhTBCvz9ETYG483X0xF2jEbs9uYkNsQjNr1LevtVfJvlT7LIoPx7QQa6QtG5X_-z_uqo9RIrvHGj_yubxV-9WsQ_h_244IKvhuvC9JEH6GbYrELzDaG6nZs">
Binary interpretation of a value
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>