-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathCuZenWindowsSettings.html
302 lines (269 loc) · 14.6 KB
/
CuZenWindowsSettings.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
<!DOCTYPE html>
<html>
<head>
<!--
The IE Compatibility flag, while not always necessary, makes sure your page
will always load in IE11+ rendering mode instead of being limited to IE7
features and behaviors. While IE11 is still relatively old as a rendering
engine, it supports the most fundamental parts needed for modern webpages to
function correctly.
Neutron will do its best to enable IE11+ rendering mode regardless of this
tag, but in current releases pages will not render correctly when compiled
unless this tag is present. Because of that and other edge cases, any page
you write to load in Neutron should contain this meta tag.
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <script src="jquery.min.js"></script> -->
<script src="materialize.min.js"></script>
<link href="materialize.min.css" rel="stylesheet">
<style>
/* disable text selection */
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
/* https://www.youtube.com/watch?v=YMfYTPxIO9U */
.vtabs {
/* max-width: 90%; */
position: relative;
}
.vtabs-navblock {
position: absolute;
background-color: #F4F9F7;
height: 100vh;
top: 0;
left: 0;
width: 200px;
z-index: -1;
border-right: 1px solid #ebfff9;
}
.vtabs > input { display: none; }
.vtabs > label {
display: block;
width: 200px;
height: 80px;
padding: 15px;
color: #a2a2a2;
font-weight: 700;
font-size: 24px;
border-left: 5px solid #e4ece9;
box-shadow: 0 1px white;
margin-bottom: 1px;
transition: .3s ease;
}
.vtabs > label:hover {
cursor: pointer;
color: #404040;
background-color: #cde6de;
}
.vtabs > input:checked + label {
color: #404040;
border-left: 5px solid #008258;
background-color: #e7f3ef;
animation: fade 0.5s forwards;
}
.vtabs #tab1:checked ~ .vtab-content #content1,
.vtabs #tab2:checked ~ .vtab-content #content2
{
display: block;
}
.vtabs .vtab-content {
position: absolute;
top: 1em;
height: 100%;
max-width: calc(100% - 200px); /* 2*15 padding + 5 px border */
/* max-width: calc(100% - 235px); */
left: 215px;
right: 15px;
}
.vtabs .vtab-content div#content1,
.vtabs .vtab-content div#content2
{
display: none;
}
@keyframes fade {
0% {background-color: #cde6de; }
10% {background-color: #e7f3ef; }
/* 100% {background-color: #e7f3ef; } */
100% {background-color: #cde6de; }
}
.responsive-img.small {
max-width: 64px;
}
.btn {
background-color: #008258 !important;
}
.material-tooltip {
color: #404040;
background-color: #e7f3ef;
max-width: 35em;
}
</style>
</head>
<body class="noselect standard-cursor">
<script>
// redirect form submit event to AHK-injected ZW object
function applySettings(event) {
zw.ApplySettings(event);
}
function changeMouseScrollModVisibility(event) {
// alert(event.target.checked + "\n" + document.getElementById('MouseScrollModifierBlock').visibility);
document.getElementById('MouseScrollModifierBlock').style.visibility = event.target.checked ? "visible" : "hidden";
}
// disable right-click menu, everybody knows this is webpage, but we don't need to show an ugly IE menu
document.addEventListener('contextmenu', function(event) { event.preventDefault() } );
</script>
<!-- main area -->
<div class="vtabs">
<!-- background block for the navigation tabs -->
<div class="vtabs-navblock"></div>
<!-- hidden navigation radiobuttons & labels -->
<input type="radio" name="vtab" id="tab1" checked>
<label for="tab1">Settings</label>
<input type="radio" name="vtab" id="tab2">
<label for="tab2">About</label>
<!-- content containers -->
<div class="vtab-content">
<!-- CONTENT PAGE 1 - Settings -->
<div id="content1">
<div class="row">
<div class="col s10">
<h5>Zen Windows</h5>
</div>
<div class="col s2">
<img class="responsive-img small" src="CuZenWindows.png">
</div>
</div>
<form name="ZenSettingsForm" id="ZenSettingsForm" onsubmit="applySettings(event)">
<div class="input-field">
<div class="row"> <!-- opt.MoveZenFocusToActivatedWindow -->
<label class="col s12">
<input type="checkbox" checked="checked" id="opt.MoveZenFocusToActivatedWindow" class="filled-in" />
<span class="black-text tooltipped" data-position="bottom" data-tooltip="<em>Zen Focus</em> is the window you want to focus on.<br><br>If enabled, the active window will have the Zen Focus.<br>If disabled, the window at the time of toggle will have the Zen Focus.">Move <em>Zen Focus</em> to activated window</span>
<!-- <span class="helper-text"><em>Zen Focus</em> is the window you want to focus on, works well with the above option</span> -->
</label>
</div>
<div class="row"> <!-- opt.KeepFocusedOpaque -->
<label class="col s12">
<input type="checkbox" checked="checked" id="opt.KeepFocusedOpaque" class="filled-in" />
<span class="black-text tooltipped" data-position="bottom" data-tooltip="If enabled, the active window will be always opaque.<br>If disabled, only the window under mouse cursor will be opaque.">Keep active window always opaque</span>
<!-- <span class="helper-text">if disabled, only 1 window at a time may be opaque</span> -->
</label>
</div>
<div class="row"> <!-- opt.AutoActivateWindowAfterToggle -->
<label class="col s12">
<input type="checkbox" checked="checked" id="opt.AutoActivateWindowAfterToggle" class="filled-in" />
<span class="black-text tooltipped" data-position="bottom" data-tooltip="Automatically activate the window under mouse<br>after turning off transparency.">Auto-activate window under mouse after turning off Zen Mode</span>
</label>
</div>
<div class="row"> <!-- opt.RunAsAdmin -->
<label class="col s12">
<input type="checkbox" checked="checked" id="opt.RunAsAdmin" class="filled-in" />
<span class="black-text tooltipped" data-position="bottom" data-tooltip="Run with elevated privileges if you want<br>other programs which are also run as administrator<br>to become semi-transparent as well.<br>If disabled, program needs to be restarted manually<br>since any new launched process would be also elevated.">Run as Administrator</span>
</label>
</div>
<div class="row"> <!-- opt.UseMouseScrollForTransparency -->
<label class="col s6">
<input type="checkbox" checked="checked" id="opt.UseMouseScrollForTransparency" onchange="changeMouseScrollModVisibility(event)" class="filled-in" />
<span class="black-text tooltipped" data-position="bottom" data-tooltip="Change transparency of the window under mouse<br>with mouse scroll while pressing the modifier;<br>works even if Zen Mode is inactive.">Scroll mouse to change transparency</span>
<!-- <span class="helper-text">changes transparency of the window under mouse</span> -->
</label>
<div class="input-field col s6" id="MouseScrollModifierBlock">
<input value="Win" id="opt.MouseScrollModifier" type="text" required class="tooltipped" data-position="bottom" data-tooltip="Use only modifier keys, combinations allowed.<br>Sorry, no auto-detect ¯\_(ツ)_/¯" />
<label class="active black-text" for="opt.MouseScrollModifier">Modifier (use only Win, Alt, Shift, Ctrl)</label>
<!-- <span class="helper-text">use only modifier keys, combinations allowed</span> -->
<!-- <a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a> -->
</div>
</div>
<div class="row"> <!-- opt.UpdateFreq & opt.ShortcutToggle -->
<div class="input-field col s6">
<input value="100" id="opt.UpdateFreq" type="number" required min="10" max="5000" maxlength="4" class="validate tooltipped" data-position="bottom" data-tooltip="Values ≥50 recommended.<br>Lower values guarantee a quicker reaction time<br>but consume more CPU when you move the mouse<br>between semi-transparent windows.">
<label class="active black-text" for="opt.UpdateFreq">Update frequency in ms (10-5000)</label>
<!-- <span class="helper-text" data-error="invalid value">values ≥50 recommended</span> -->
</div>
<div class="input-field col s6">
<input value="Win-Z" id="opt.ShortcutToggle" type="text" required pattern="(-|Win|Ctrl|Shift|Alt|[A-Za-z0-9]|F([0-9]|1[0-2]))+" class="tooltipped" data-position="bottom" data-tooltip="Not all combinations work on every system.<br>Sorry, no auto-detect ¯\_(ツ)_/¯">
<label class="active black-text" for="opt.ShortcutToggle">Toggle Shortcut (use Win, Alt, Shift, Ctrl, F1...)</label>
<!-- <span class="helper-text">not all combinations work on every system</span> -->
</div>
</div>
<div class="row"> <!-- opt.Transparency & opt.ShortcutSettings -->
<div class="input-field col s6">
<input value="15" id="opt.Transparency" type="number" required min="10" max="254" maxlength="3" class="validate tooltipped" data-position="bottom" data-tooltip="Values ≥15 recommended.">
<label class="active black-text" for="opt.Transparency">Transparency of unfocused windows (10-254)</label>
<!-- <span class="helper-text" data-error="invalid value">values ≥15 recommended</span> -->
</div>
<div class="input-field col s6">
<!-- <input value="Ctrl-Win-Z" id="opt.ShortcutSettings" type="text" required pattern="(-|Win|Ctrl|Shift|Alt|[A-Z]|F([0-9]|1[0-2]))+"> -->
<input value="Ctrl-Win-Z" id="opt.ShortcutSettings" type="text" required class="tooltipped" data-position="bottom" data-tooltip="Not all combinations work on every system.<br>Sorry, no auto-detect ¯\_(ツ)_/¯">
<label class="active black-text" for="opt.ShortcutSettings">Settings Shortcut (use Win, Alt, Shift, Ctrl, F1...)</label>
<!-- <span class="helper-text">not all combinations work on every system</span> -->
</div>
</div>
<div class="row">
<a onclick="zw.ToggleMe()" class="btn col s3">Toggle Now</a>
<!-- <a onclick="ahk.ToggleFunction()" class="btn col s2">FuncCall</a> -->
<div class="col s6"></div>
<!-- <a onclick="M.toast({html: 'Applied successfully', outDuration: 500, classes: 'toast'})" class="btn col s2">Apply Settings</a> -->
<input type="submit" value="Apply Settings" class="btn col s3">
</div>
</div>
</form>
</div>
<!-- CONTENT PAGE 1 - Settings -->
<!-- CONTENT PAGE 2 - About -->
<div id="content2">
<div class="container">
<div class="row">
<div class="col s9">
<h2>Zen Windows</h2>
<h5>Focus on what's important...</h5>
</div>
<div class="col s3">
<img class="responsive-img" src="CuZenWindows.png">
</div>
</div>
<div class="row">
<p>This little, portable program helps you to focus on one window at a time, while making all other windows semi-transparent.<br>
When you hover over other windows, they temporarily become opaque.<br>
Works best with hidden desktop icons and solid color backgrounds.<br>
You can also change the transparency of the window under mouse pointer, by pressing a modifier key, e.g. Win-Alt and using the mouse scroll.<br>
<!--
I wrote this with Autohotkey to test HTML-based desktop GUIs (in fact, only the settings window uses HTML) outside JS/Electron ecosystem.<br>
Tip: If any window gets stuck at semi-transparent state for any reason, press Toggle shortcut again, and all windows will be reset.<br>
-->
Compatible with Windows 10 built-in Virtual Desktops, tested on Win10 x64 v1909.<br>
September 2020</p>
<!-- <p>Homepage: <a onclick="zw.OpenLinkInSystemBrowser('https://cuneytyilmaz.com/prog/ahk/ZenWindows/')" href="#">cuneytyilmaz.com/prog/ahk/ZenWindows/</a></p> -->
<p>GitHub: <a onclick="zw.OpenLinkInSystemBrowser('https://github.com/cy-gh/AHK_ZenWindows/')" href="#">github.com/cy-gh/AHK_ZenWindows/</a></p>
<p>License: <a onclick="zw.OpenLinkInSystemBrowser('https://www.gnu.org/licenses/gpl-3.0.en.html')" href="#">GNU General Public License v3.0</a></p>
<p>Credits:</p>
<p>This tool is developed using <a onclick="zw.OpenLinkInSystemBrowser('https://www.autohotkey.com/')" href="#">Autohotkey</a> & <a onclick="zw.OpenLinkInSystemBrowser('https://portapps.io/app/vscodium-portable/')" href="#">VSCodium</a></p>
<p><a onclick="zw.OpenLinkInSystemBrowser('https://github.com/g33kdude/Neutron.ahk')" href="#">Neutron.ahk</a> Autohotkey GUI library by G33kDude</p>
<p><a onclick="zw.OpenLinkInSystemBrowser('https://github.com/Ciantic/VirtualDesktopAccessor')" href="#">VirtualDesktopAccessor</a> Autohotkey Virtual Desks library by Ciantic</p>
<p><a onclick="zw.OpenLinkInSystemBrowser('https://materializecss.com/')" href="#">MaterializeCSS</a> library by MaterializeCSS team</p>
</div>
</div>
</div>
<!-- CONTENT PAGE 2 - About -->
</div>
<!-- content containers -->
</div>
<!-- main area -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, {
enterDelay: 50,
inDuration: 100,
outDuration: 50
});
});
</script>
</body>
</html>