-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
355 lines (328 loc) · 22 KB
/
index.html
File metadata and controls
355 lines (328 loc) · 22 KB
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
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<!DOCTYPE html>
<html lang="en">
<head>
<!-- General HTML stuff -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ointerest Verification -->
<meta name="p:domain_verify" content="f3b457d60e2bc853195951df92344b7f"/>
<!-- Site Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icon/favicon-32x32.png">
<link rel="manifest" href="assets/icon/site.webmanifest">
<link rel="mask-icon" href="assets/icon/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">
<!-- CSS -->
<link rel='stylesheet' href='assets/foundation-6/css/foundation.css'>
<link rel="stylesheet" href='flowlist.css'>
<!-- SEO --><!-- Basics (computed with Jekyll) -->
<title>Flowlist – The fun way to organize your brain</title>
<link rel="canonical" href="https://flowlistapp.com">
<meta name='author' content='Sebastian Fichtner'/>
<meta name='description' content='Flowlist is an elegant tool for self-management and creative writing. Unbelievably easy yet infinitely flexible. Organize your brain in flow! The simple concept of hierarchical lists, the fully animated beautiful interface and the consequent design for creative focus make Flowlist unique, widely applicable and incredibly fun. Flowlist does not force your stuff into categories like "Project" or "Subtask". Instead, items are universal and may contain other items, like folders on your Mac contain other folders. You're free to organize yourself in your own way. A novel interaction concept combines intuitive key commands, a radically clean interface and meaningful animations, so you can rapidly navigate and edit your item hierarchy in a state of deep concentration.'/>
<meta name='keywords' content='free, list, to, do, to do, to do list, self control, note, flow state, notes, note taking, task, manager, task manager, task management, todo list, todolist, business, today, todo, workflow, project, quick, management, project management, easy, progress, notebook, focus, daily, simple, ideas, school, tracker, college, creative, things, personal, done, focused, idea, organization, checklist, agile, organize, productivity, tasks, study, organizer, getting things done, get things done, brainstorm, brainstorming, self management, get shit done, getting shit done, app, mac, macos, osx, mac app, macos app, osx app, free mac app, free macos app, free task manager, free to do list, free todo list, free todolist, free project management, free task management, agenda, evernote, omnifocus, wunderlist, todoist, trello, things 3, markdown, text, writing'/>
<link rel="image_src" href="https://flowlistapp.com/page_poster.jpg">
<!-- Open Graph properties (hard coded) -->
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:latitude" content="47.649606">
<meta property="og:longitude" content="9.164385">
<!-- Open Graph properties (computed with Jekyll) -->
<meta property="og:title" content="Flowlist – Write and Organize in Flow" />
<meta property="og:site_name" content="Flowlist App" />
<meta property="og:url" content="https://flowlistapp.com" />
<meta property="og:description"
content="Flowlist is an elegant tool for self-management and creative writing. Unbelievably easy yet infinitely flexible. Organize your brain in flow! The simple concept of hierarchical lists, the fully animated beautiful interface and the consequent design for creative focus make Flowlist unique, widely applicable and incredibly fun. Flowlist does not force your stuff into categories like "Project" or "Subtask". Instead, items are universal and may contain other items, like folders on your Mac contain other folders. You're free to organize yourself in your own way. A novel interaction concept combines intuitive key commands, a radically clean interface and meaningful animations, so you can rapidly navigate and edit your item hierarchy in a state of deep concentration." />
<meta property="og:image" content="https://flowlistapp.com/page_poster.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:type" content="website" />
</head>
<body><main aria-label="Content">
<section id="video">
<div style="text-align:center">
<h1 style="margin-top:20px">
<img style="margin-top:-15px;width:100%;max-width:68px"
src="icon_monochrome_136.png"
title="Flowlist App"
alt="free, list, to, do, to do, to do list, self control, note, flow state, notes, note taking, task, manager, task manager, task management, todo list, todolist, business, today, todo, workflow, project, quick, management, project management, easy, progress, notebook, focus, daily, simple, ideas, school, tracker, college, creative, things, personal, done, focused, idea, organization, checklist, agile, organize, productivity, tasks, study, organizer, getting things done, get things done, brainstorm, brainstorming, self management, get shit done, getting shit done, app, mac, macos, osx, mac app, macos app, osx app, free mac app, free macos app, free task manager, free to do list, free todo list, free todolist, free project management, free task management, agenda, evernote, omnifocus, wunderlist, todoist, trello, things 3, markdown, text, writing">
</img>
<span style="margin-left:0px">Flowlist App</span>
</h1>
<h2>
The fun way to <nobr>organize your brain.</nobr><br>
<nobr>Unleash your creativity</nobr> and <nobr>achieve your goals.</nobr>
</h2>
<video style="width:100%;max-width:960px;margin-bottom:60px"
controls
autoplay
onclick="ga('send', 'event', 'video', 'click');"
poster="video_poster.png">
<source src="AppStore_Preview_60fps.mp4" type="video/mp4">
</video>
<p>
<a onclick="ga('send', 'event', 'button', 'click', 'top section');"
href="https://geo.itunes.apple.com/app/flowlist-write-and-organize/id1396163478?mt=12"
target="_blank">
<img style="width:100%;max-height:68px"
src="App_Store_Badge.svg"
title="Download Flowlist For Free From the Mac App Store"
alt="Flowlist is an elegant tool for self-management and creative writing. Unbelievably easy yet infinitely flexible. Organize your brain in flow! The simple concept of hierarchical lists, the fully animated beautiful interface and the consequent design for creative focus make Flowlist unique, widely applicable and incredibly fun. Flowlist does not force your stuff into categories like "Project" or "Subtask". Instead, items are universal and may contain other items, like folders on your Mac contain other folders. You're free to organize yourself in your own way. A novel interaction concept combines intuitive key commands, a radically clean interface and meaningful animations, so you can rapidly navigate and edit your item hierarchy in a state of deep concentration.">
</img>
</a>
</p>
</div>
</section>
<section>
<div>
<h1>Elegant</h1>
<h2 style="margin-bottom:10px">A unified design <nobr>offers flexibility</nobr> <nobr>as well as</nobr> simplicity.</h2>
<div id="screen-shot">
<div style="padding-top:66.8756%;width:100%;"></div>
</div>
<div class="grid-x small-up-1 medium-up-2 large-up-3 grid-margin-y grid-margin-x">
<div class="cell">
<h3>The Familiar</h3>
Like common task managers, Flowlist shows your focused items in the middle, an overview to the left and details to the right.
</div>
<div class="cell">
<h3>More Flexible</h3>
Unlike common task managers, Flowlist has no fixed categories like <i>Project</i> or <i>Subtask</i>. Instead, items contain items, and that's it.
</div>
<div class="cell">
<h3>Yet More Elegant</h3>
Build any item hierarchy you want. Focus on any list at any level. Press <span class="fl-command-span">←</span> or <span class="fl-command-span">→</span> to slide context or details into focus.
</div>
</div>
</div>
</section>
<section id="feature-section">
<div>
<h1>Creative</h1>
<h2>Focus on your ideas <nobr>in a productive</nobr> <nobr>state of flow.</nobr></h2>
<div class="grid-x small-up-2 medium-up-3 large-up-4 grid-margin-y grid-margin-x">
<div class="cell dropdown">
<img src="features/hierarchy.png">
<h3>Structure it Your Way</h3>
<div class="dropdown-content">
Organize all your stuff however you want. There are no predefined categories like "Project". There are only items which may contain items. Group items together. Add subitems into any (empty) item. Move items between levels. Thinking and editing will become one.
</div>
</div>
<div class="cell dropdown">
<a href="#key-commands">
<img src="features/pen.png">
<h3>Write Lists Like Text</h3>
</a>
<div class="dropdown-content">
Items in a list are like paragraphs in a text. You also write, select and edit them similar to paragraphs or lines. It feels familiar and intuitive. Of course, there are practical additions, like adding an item to the top via Space, or moving it up and down via ⌘↑ and ⌘↓.
</div>
</div>
<div class="cell dropdown">
<a href="#key-commands">
<img src="features/cmd.png">
<h3>Edit Lists Rapidly</h3>
</a>
<div class="dropdown-content">
With just a few intuitive key commands, you have all editing, navigation and features at your fingertips. Your hands never have to leave the keyboard in between typing. And the window can focus on presenting your content, instead of being cluttered with input elements.
</div>
</div>
<div class="cell dropdown">
<img src="features/structured_text.png">
<h3>Export Structured Text</h3>
<div class="dropdown-content">
Empty items correspond to paragraphs, while items that contain other items correspond to headings. Via ⌘E, you can export lists at any level to a plain text or markdown file. Flowlist generates paragraphs, headings, sub-headings etc.
</div>
</div>
<div class="cell dropdown">
<img src="features/tag.png">
<h3>Tag With Colors</h3>
<div class="dropdown-content">
Hit numbers 1 to 6 to toggle a color tag for the selected items. Or hit 0 to remove the current color. For example, make deadlines and meetings red or make meaningful productive items blue.
</div>
</div>
<div class="cell dropdown">
<img src="features/moon.png">
<h3>Toggle Dark Mode</h3>
<div class="dropdown-content">
Switch between Daylight- and Dark Mode via ⌘D at any time, independent of your macOS settings. Dark Mode is a cool looking dark color scheme which offers your eyes some rest and lets you sleep better, work at night and feel like a pro.
</div>
</div>
<div class="cell dropdown">
<img src="features/down_arrow.png">
<h3>Import from Anywhere</h3>
<div class="dropdown-content">
Copy content from any document or website and paste it into one of your lists. Flowlist will detect the structure of that content and will paste it as distinct items (if the content is so structured).
</div>
</div>
<div class="cell dropdown">
<img src="features/zoom.png">
<h3>Zoom & Resize</h3>
<div class="dropdown-content">
Via ⌘+ and ⌘-, you adjust the font size and thereby the zoom level of the whole UI. Work on a 12” laptop or lean back in front of a gamer screen. Also, when you resize the window, the UI will adapt and use all available screen space for your content.
</div>
</div>
<div class="cell dropdown">
<img src="features/cross_hair.png">
<h3>Prioritize & Focus</h3>
<div class="dropdown-content">
Prioritize (reorder) items at all levels. Quickly move to the most concrete next action step. Put items in progress, check them off, review what's done. In Monotasking mode Flowlist hides all other apps, the menu bar and the system dock. Fullscreen mode also helps to focus and looks pretty.
</div>
</div>
<div class="cell dropdown">
<img src="features/animation.png">
<h3>See Things Move</h3>
<div class="dropdown-content">
All navigating and editing is animated, which makes it easy for your eyes to track where you are and how items change. It's also really fun.
</div>
</div>
<div class="cell dropdown">
<a href="https://flowtoolz.typeform.com/to/R5lp8b" target="_blank">
<img src="features/bubble.png">
<h3>Vote on Features ↗</h3>
</a>
<div class="dropdown-content">
Select the features you want next. Voting takes 3 minutes on average.
</div>
</div>
<div class="cell dropdown">
<a href="mailto:hello@flowlistapp.com">
<img src="features/support.png">
<h3>Get Quick Support ↗</h3>
</a>
<div class="dropdown-content">
Get personal email support directly from the developer. I usually respond within hours.
</div>
</div>
<!--
<div class="cell">
<img src="features/?????.png"
title="????">
<h3>Prioritize, Mark & Review</h3>
</div>
-->
<!--
<div class="cell">
<img src="features/auto_layout.png"
title="????">
<h3>Leverage Screen Space</h3>
</div>
-->
<!--
<div class="cell">
<img src="features/crown.png"
title="Flowlist auto-saves your data in Home > Library > Containers > com.flowtoolz.flowlist > Data > Documents > flowlist.json.">
<h3>Own Your Data</h3>
</div>
-->
</div>
</div>
</section>
<section>
<div style="text-align:center">
<h1>Fair</h1>
<h2>Manage 100 items <nobr>forever and for free.</nobr><br>Or unlock <nobr>the full version</nobr> <nobr>from within the app.</nobr></h2>
<table id="priceTable">
<tr>
<th></th>
<th>Trial Version</th>
<th>Full Version</th>
</tr>
<tr>
<td style="text-align:left">Item Limit (without groups)</td>
<td>100</td>
<td>Unlimited</td>
</tr>
<tr>
<td style="text-align:left">Support Development</td>
<td>✘</td>
<td>✔</td>
</tr>
<tr>
<td style="text-align:left">Early Bird Advantage *</td>
<td>✘</td>
<td>✔</td>
</tr>
<tr>
<td style="text-align:left">Price</td>
<td>Free</td>
<td>$9.99</td>
</tr>
</table>
<p style="margin-bottom:60px">
* I reward users <nobr>who back the project</nobr> <nobr>and get on board early:</nobr><br>You'll get new features <nobr>as free updates,</nobr> <nobr>even when the price rises.</nobr> <nobr>No paid upgrades.</nobr>
</p>
<p style="text-align:center">
<a onclick="ga('send', 'event', 'button', 'click', 'pricing section');"
href="https://geo.itunes.apple.com/app/flowlist-write-and-organize/id1396163478?mt=12"
target="_blank">
<img style="width:100%;max-height:68px"
src="App_Store_Badge.svg"
title="Download Flowlist For Free From the Mac App Store"
alt="Flowlist is an elegant tool for self-management and creative writing. Unbelievably easy yet infinitely flexible. Organize your brain in flow! The simple concept of hierarchical lists, the fully animated beautiful interface and the consequent design for creative focus make Flowlist unique, widely applicable and incredibly fun. Flowlist does not force your stuff into categories like "Project" or "Subtask". Instead, items are universal and may contain other items, like folders on your Mac contain other folders. You're free to organize yourself in your own way. A novel interaction concept combines intuitive key commands, a radically clean interface and meaningful animations, so you can rapidly navigate and edit your item hierarchy in a state of deep concentration.">
</img>
</a>
</p>
</div>
</section>
<section id="key-commands">
<div>
<h1>Quick</h1>
<h2>Intuitive key commands<br><nobr>allow for rapid editing</nobr> <nobr>and a clean interface.</nobr></h2>
<div class="grid-x small-up-1 medium-up-2 large-up-3 grid-margin-y grid-margin-x">
<div class="cell">
<h3>Navigate</h3>Go up <span class="fl-command-span">↑</span> or down <span class="fl-command-span">↓</span> within the currently focused list. Focus details <span class="fl-command-span">→</span> or get an overview <span class="fl-command-span">←</span>.
</div>
<div class="cell">
<h3>Add & Delete</h3>Add an item to the top of the list <span class="fl-command-span">Space</span> or add <span class="fl-command-span">↵</span> and remove <span class="fl-command-span">⌫</span> items just like lines in a text.
</div>
<div class="cell">
<h3>Prioritize</h3>Move an item up <span class="fl-command-span">⌘↑</span> or down <span class="fl-command-span">⌘↓</span> to visually prioritize within the currently focused list.
</div>
<div class="cell">
<h3>Do Batch Processing</h3>Extend the selection up <span class="fl-command-span">⇧↑</span> or down <span class="fl-command-span">⇧↓</span>. Add/remove items to/from the selection <span class="fl-command-span">⌘Click</span>.
</div>
<div class="cell">
<h3>Start & Pause</h3>Start or pause an item's progress <span class="fl-command-span">⌘→</span>. It will slide up or down to adjust its priority.
</div>
<div class="cell">
<h3>Check & Uncheck</h3>Check or uncheck an item <span class="fl-command-span">⌘←</span>. It will slide up or down accordingly. Selection will auto-adjust.
</div>
<div class="cell">
<h3>Edit</h3>Edit the first selected item <span class="fl-command-span">⌘↵</span>. Then finish typing <span class="fl-command-span">↵</span>.
</div>
<div class="cell">
<h3>Group</h3>Group items together <span class="fl-command-span">↵</span> and enter a title. The initial group state reflects the grouped items.
</div>
<div class="cell">
<h3>Add a Description</h3>Focus an empty item <span class="fl-command-span">→</span> and add subitems into it <span class="fl-command-span">↵</span> or to the top of its subitem list <span class="fl-command-span">Space</span>.
</div>
<div class="cell">
<h3>Duplicate & Move</h3>Duplicate items or move them into a different item via copy <span class="fl-command-span">⌘C</span>, cut <span class="fl-command-span">⌘X</span> and paste <span class="fl-command-span">⌘V</span>.
</div>
<div class="cell">
<h3>Undo</h3>Paste the last deleted items <span class="fl-command-span">⌘Z</span> in case you accidentally deleted items from the focused list.
</div>
<div class="cell">
<h3>Import</h3>Copy content <span class="fl-command-span">⌘C</span> from any document or web page and paste it as distinct items <span class="fl-command-span">⌘V</span> into a list.
</div>
</div>
</div>
</section>
<section>
<div style="text-align:center">
<a href="index.html" target="_blank">
<img style="width:34px;margin-top:-17px" src="icon_monochrome_136.png"></img> <span style="font-size:36px;line-height:1.0"> ♡ </span><img style="width:42px;margin-top:-17px" src="assets/logo.png"></img><br>
Created by Flowtoolz
</a>
<br>
<a href="mailto:hello@flowlistapp.com">hello@flowlistapp.com</a>
</div>
</section>
</main><script src='assets/foundation-6/js/vendor/jquery.js'></script>
<script src='assets/foundation-6/js/vendor/what-input.js'></script>
<script src='assets/foundation-6/js/vendor/foundation.min.js'></script>
<script> $(document).foundation(); </script>
</body>
</html>