-
Notifications
You must be signed in to change notification settings - Fork 11
/
options.html
170 lines (138 loc) · 6.61 KB
/
options.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphine options</title>
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/bootstrap-responsive.css">
<link rel="stylesheet" href="styles/options.css">
</head>
<body>
<div class="container">
<!-- first install message -->
<div class="alert alert-success">
<strong>Welcome!</strong> Looks like you successfully installed Morphine. Thanks for checking it out! Please take a minute to review its options below for an optimal experience, and once you've used it for a bit consider reviewing it on the <a href="https://chrome.google.com/webstore/detail/morphine/fbnpehpbojenlldmfcopeajkichnnjpo">Chrome Web Store</a>. Have fun!
</div>
<!-- options -->
<div class="page-header">
<h2>Options</h2>
</div>
<div class="row">
<div class="span6">
<h4>Charging</h4>
</div>
<div class="span6">
<div class="row">
<div class="span3">
<label for="charge-interval">Interval <output for="charge-interval" class="muted"></output></label>
</div>
<div class="span3">
<label for="charge-size">Size <output for="charge-size" class="muted"></output></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<p>Set the optimal time balance charge rate for you! With the default settings, +1 minute will be given every 10 minutes, but it can be adjusted for optimal productivity, distraction, and attention span levels.</p>
</div>
<div class="span6">
<div class="row">
<div class="span3">
<input type="range" class="span3" id="charge-interval" min="10" max="60" step="5">
</div>
<div class="span3">
<input type="range" class="span3" id="charge-size" min="1" max="12" step="1">
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<h4>Blocking</h4>
</div>
<div class="span6">
<div class="row">
<div class="span3">
<label for="target-block">Blocked sites</label>
</div>
<div class="span3">
<label for="target-allow">Allowed sites</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<p>Add sites to block and (optionally) allow, one per line. Subdomains and subpaths are accepted, and if not provided will be wildcarded.</p>
<p>The allowed sites override the blocked sites and can be used to allow specific subdomains or subpaths.</p>
</div>
<div class="span6">
<div class="row">
<div class="span3">
<textarea class="span3" id="target-block" rows="5"></textarea>
</div>
<div class="span3">
<textarea class="span3" id="target-allow" rows="5"></textarea>
</div>
</div>
</div>
</div>
<!-- help -->
<div class="page-header">
<h2>Guide</h2>
</div>
<ul class="thumbnails">
<li class="span4"><div class="thumbnail">
<div class="caption"><p>First, add distracting sites to the blocked list.</p></div>
<img src="images/tutorial/step-1.png" alt="">
</div></li>
<li class="span4"><div class="thumbnail">
<div class="caption"><p>Attempts to visit them will then be blocked. Meanwhile, the balance will slowly fill up.</p></div>
<img src="images/tutorial/step-2-a.png" alt="">
<hr>
<img src="images/tutorial/step-2-b.png" alt="">
</div></li>
<li class="span4"><div class="thumbnail">
<div class="caption"><p>Click an amount (specified in minutes) to unblock all sites for that duration. Enjoy browsing until the meter runs out :)</p></div>
<img src="images/tutorial/step-3.png" alt="">
</div></li>
</ul>
<p>Morphine is a website blocker with a twist. Instead of allotting a certain amount of time each day for using blocked sites, Morphine gives you a "balance" to pull from, which is very slowly filled with minutes. This allows you to use your blocked sites whenever you want for as long as you want – provided you have enough time in your balance. In other words: Regulated Distraction®™!</p>
<p>But why take this approach? Well, let's say you're at work and have a standard website blocker turned on. A friend sends you a link to an item on one of your blocked sites, but when you try to access it, turns out you've already used all your daily allotted time up! However if you were using Morphine, your wait would be no more than 10 minutes (by default), since the balance is always slowly being added to.</p>
<p>Ready to get started? Using the balance is very easy. Once you've set the options above to your taste, click on the Morphine icon in the toolbar or try to visit a blocked site. A page with a few large buttons with numbers will be displayed – these represent minutes. Click one to add that number to the "meter". Once the meter is used up, the sites will return to being blocked.</p>
<!-- about -->
<div class="page-header">
<h2>About</h2>
</div>
<h4>Guarantee</h4>
<p>Under no circumstances will I sell, monetize, or otherwise compromise Morphine. The complete source code is publicly available on <a href="https://github.com/tkazec/morphine">GitHub</a>, shared under the <a href="https://opensource.org/licenses/MIT">MIT license</a>. Thank you. – <a href="https://teddy.io">Teddy Cross</a></p>
<h4>Contribute</h4>
<p>Morphine needs your help to improve! Are you an engineer or designer? Please check out the wishlist below, and <a href="mailto:[email protected]">get in touch</a>. If not, you can still help out by leaving a review on the <a href="https://chrome.google.com/webstore/detail/morphine/fbnpehpbojenlldmfcopeajkichnnjpo">Chrome Web Store</a>.</p>
<h4>Wishlist</h4>
<ul>
<li>Branding: Logo and Chrome Web Store assets.</li>
<li>Localization: Support and translations.</li>
<li>Custom block page messages.</li>
<li>Improved incognito support.</li>
<li>Improved "disable" support.</li>
</ul>
<!-- news -->
<div class="page-header">
<h2>News</h2>
</div>
<h4>1.1.0 <small>2016-10-17</small></h4>
<ul>
<li>Three years later...</li>
<li>Updated the options page.</li>
<li>Removed error tracking, for now.</li>
<li>Added balance and meter reset buttons.</li>
</ul>
</div>
<script src="scripts/errors.js"></script>
<script src="scripts/jquery.js"></script>
<script src="scripts/data.js"></script>
<script src="scripts/options.js"></script>
</body>
</html>