-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
249 lines (175 loc) · 8.73 KB
/
index.htm
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
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="website/website.css" rel="stylesheet" type="text/css" media="screen">
<link href="website/logo.css" rel="stylesheet" type="text/css" media="screen">
<script src="website/jquery-1.8.2.min.js"></script>
<script>
$(function() {
// create interactive colored boxes
var num_boxes = 6;
$('#header').append($('<div class="colorboxes" />'));
for(var i=0; i<num_boxes; i++) {
$('.colorboxes').append($('<div class="hidden color'+i+'" />').css('left', i * 50));
}
// add initially hidden header
$('#header').append($('<h1>simple.scope</h1><h2 class="hidden">a minimalist organization tool.</h2>'));
// trigger initial animation for boxes
var colored_boxes = $('#header .colorboxes div'),
curr_box_ix = 0;
var timer = setInterval(function() {
if(curr_box_ix > num_boxes ) {
clearInterval(timer);
}
colored_boxes.eq(curr_box_ix).removeClass('hidden');
curr_box_ix++;
}, 77);
// trigger initial animation for header
setTimeout(function() {
$('#header h2').removeClass('hidden');
}, 10);
// expand/close full screenshot image on click
$('.img_wrap').click(function(evt) {
$(this).toggleClass('open');
});
});
</script>
<title>simple.scope – a minimalist organization tool.</title>
</head>
<body>
<div id="wrap">
<div id="header">
<noscript>
<div class="colorboxes no_js">
<div class="color0"></div>
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
<br class="clear" />
</div>
<h1>simple.scope</h1>
<h2>a minimalist task organizer.</h2>
</noscript>
</div>
<div id="content">
<section id="top">
<p><em>simple.scope</em> is a minimalist organization tool. Use it to create, edit, sort, prioritize, and delete plain text notes. <em>simple.scope</em> can be used without an internet connection and is currently available for recent versions of WebKit- and Blink-based desktop web browsers such as <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="http://www.chromium.org/" target="_blank">Chromium</a> and <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.</p>
<p><em>simple.scope</em> is open-source software and free of charge. Just click the „launch” button below to use it or choose one of the other options.</p>
</section>
<div class="img_wrap">
<img class="screenshot_main" src="website/img/screenshot_main.jpg" alt="A screenshot showing a Chromium browser window running simple.scope with some demo content." />
<img class="bottom_fade" src="website/img/img_wrap_fadeout.png" />
</div>
<br class="clear" />
<section>
<div class="downloads">
<a href="app/" target="_blank" class="color5">
<span class="maj">launch</span>
<span class="min">v0.3, full</span>
</a>
<a href="build/simplescope.0.3.demo.bundle.min.htm" target="_blank" class="color3">
<span class="maj">try the demo</span>
<span class="min">v0.3, no save</span>
</a>
<a href="build/simplescope.0.3.bundle.min.zip" class="color4">
<span class="maj">download</span>
<span class="min">v0.3, ZIP (100kB)</span>
</a>
<a href="https://github.com/stefan-girlich/simple.scope" target="_blank" class="color2">
<span>browse source code</span>
</a>
<br class="clear" />
</div>
</section>
<section>
<h3>What are the features?</h3>
<p>There aren't many, and that's part of the concept.</p>
<ul>
<li><em>simple.scope</em> lets you organize text notes. There are two columns you can place notes in by <b>dragging and dropping</b>.</li>
<li>Click the text on a note to <b>edit</b> it. To <b>create</b> a new note, use the text fields and the <em>plus</em> button (keyboard: <em>Ctrl/Cmd + Enter</em>) at the bottom. If you do not enter any text, a <b>separator</b> item will be created.</li>
<li>Change a note's <b>color</b> by using your mouse wheel over the <em>minus</em> or <em>plus</em> button.</li>
<li>To <b>delete</b> a note, click the <em>minus</em> button and confirm your decision with a second click.</li>
</ul>
</section>
<section>
<h3>So, this is yet another to-do list tool, right?</h3>
<p><i title="German: "Yes and no"">Jein.</i> You can use <em>simple.scope</em> to manage your to-dos as shown in the demo screenshot above, but there is no dedicated workflow or use case. You may...</p>
<ul>
<li>...store open tasks as notes in the left column and move them to the right once they're done.</li>
<li>...mark priorities by order or color.</li>
<li>...store code snippets.</li>
<li>...simply use notes like Post-its.</li>
<li>...do something completely different, I don't mind.</li>
</ul>
<p>You're not able to stash away notes into folders, use tags, set up reminders or share notes with other people. Keep it simple instead and use <em>simple.scope</em> for storing transient knowledge. Jot down your notes and goals for your workweek rather than the booking information for next year's vacation.</p>
</section>
<section>
<h3>Where does <em>simple.scope</em> store my data?</h3>
<p>Everything is stored in your local web browser only, using <em><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage" target="_blank">localStorage</a></em>. Your current notes are stored until you erase your browser's cache. This means that there is no network communication at all except for downloading the application from the server. It also means that <em>simple.scope</em> instances running on different browsers or machines will be completely independent.</p>
</section>
<section>
<h3>Where do I get it?</h3>
<p>Just click the „launch” button below to start using the app.</p>
<p>Alternatively, pick the demo build which contains the fully-featured application, but will discard any changes as soon as you close the browser tab running <em>simple.scope</em>. Pick the download link if you want to download and run the application locally as a single file.</p>
<p>The full source code is available at <em><a href="https://github.com/stefan-girlich/simple.scope/" target="_blank">github.com/stefan-girlich/simple.scope</a></em>.</p>
<div class="downloads">
<a href="app/" target="_blank" class="color5">
<span class="maj">launch</span>
<span class="min">v0.3, full</span>
</a>
<a href="build/simplescope.0.3.demo.bundle.min.htm" target="_blank" class="color3">
<span class="maj">try the demo</span>
<span class="min">v0.3, no save</span>
</a>
<a href="build/simplescope.0.3.bundle.min.zip" class="color4">
<span class="maj">download</span>
<span class="min">v0.3, ZIP (100kB)</span>
</a>
<a href="https://github.com/stefan-girlich/simple.scope" target="_blank" class="color2">
<span>browse source code</span>
</a>
<br class="clear" />
</div>
</section>
<section>
<h3>Any further plans?</h3>
<p>Lots! :)</p>
<h4>Fix Apple Magic Mouse bug</h4>
<p>It seems like Apple's Magic Mouse (and possibly also MacBook touchpads) is firing many scoll events for a single swipe/scroll move. This does not affect saving note color information correctly, but unless you scroll really carefully, the displayed color may get stuck between to actual note color presets.</p>
<h4>Cross-browser compatibility</h4>
<p>This includes recent Firefox, Opera and Internet Explorer.</p>
<h4>Touch interface</h4>
<h4>Shared server-side storage</h4>
<h4>Native mobile clients</h4>
<h4></h4>
<p></p>
</section>
<section>
<h3>How can I reach you for feedback?</h3>
<p>Find a link to my GitHub profile page and my e-mail address below. If you have found a bug or have a suggestion for improvement, please post it at the GitHub project page for increased visibility.</p>
</section>
</div>
</div>
<footer>
<div id="logo">
<span>simple.scope</span>
<br />
<a href="https://github.com/stefan-girlich" target="_blank">github.com/stefan-girlich</a>
</div>
<div id="contact">
© Stefan Girlich, <span class="year">2014</span><br />
<a href="mailto: stefan . girlich at g mail .com">stefan . girlich [at] g mail .com</a>
</div>
</footer>
<script>
$('footer .year').html(new Date().getFullYear());
var a_mail = $('footer #contact a');
newHref = a_mail.attr('href').replace('at', '@').split(' ').join('');
a_mail.attr('href' , newHref);
a_mail.html(newHref.replace('mailto:', ''));
</script>
</body>
</html>