-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathindex.html
288 lines (286 loc) · 14.5 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
<!DOCTYPE html>
<html>
<head>
<title>MapleStory Status Checker</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta charset="utf8">-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" href="icons/Nexon.png">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="icons/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="wrapper">
<nav>
<div class="title">
<a href="/" data-bind="click: function() { if (window.stop) { window.stop(); } else if (document.execCommand) { document.execCommand('Stop'); }; window.location.href = 'http://maple.watch'; }">maple.watch</a>
</div>
<div class="select" style="display:none" data-bind="visible: true">
<span class="select-text">Select a MapleStory version:</span>
<ul data-bind="foreach: versions">
<li data-bind="css: { active: abbr == $root.selected() }">
<a href="#" role="button" data-bind="attr: { href: available ? '#' + abbr + '-' + $root.getDefaultSubSelectionForVersion(abbr) : '', title: available ? name : 'Coming Soon!' }, css: { disabled: !available }, click: function() { if (available) { if (window.stop) { window.stop(); } else if (document.execCommand) { document.execCommand('Stop'); }; window.location.hash = '#' + abbr + '-' + $root.getDefaultSubSelectionForVersion(abbr); window.location.reload(); } else { return false; } }">
<img data-bind="attr: { src: 'icons/' + icon }" />
<span class="short-name" data-bind="text: short"></span>
<span class="abbr-name" data-bind="text: abbr"></span>
</a>
</li>
</ul>
</div>
<!-- ko if: !isMainPage() -->
<div style="display:none" class="settings" data-bind="visible: true, click: function() { settings.showControls(true) }, visible: !settings.showControls()">
<span role="button" tabindex="1">
<i class="fa fa-cog"></i>
Controls
</span>
</div>
<!-- /ko -->
</nav>
</div>
<div class="wrapper" id="loading" data-bind="visible: false">
<p><i class="fa fa-cog fa-spin"></i> Loading, please wait...</p>
</div>
<!-- ko if: isMainPage() -->
<div class="wrapper" id="main-page" style="display:none" data-bind="visible: true">
<h1>
<img data-bind="attr: { src: 'icons/Mushroom.png' }" />
<span>Welcome to maple.watch!</span>
</h1>
<p class="tagline">The website which lets you track your connection to the MapleStory servers without having to open the game to find out if they're online!</p>
<section>
<article>
<div class="fake-table">
<div>
<h2>How do I use maple.watch?</h2>
<p>Begin by selecting the version of the game you want to check from the very top of the page or from the below list:</p>
<ul data-bind="foreach: versions" class="versions-list">
<li>
<a href="#" role="button" data-bind="attr: { href: available ? '#' + abbr + '-' + $root.getDefaultSubSelectionForVersion(abbr) : '', title: available ? name : 'Coming Soon!' }, css: { disabled: !available }, click: function() { if (available) { if (window.stop) { window.stop(); } else if (document.execCommand) { document.execCommand('Stop'); }; window.location.hash = '#' + abbr + '-' + $root.getDefaultSubSelectionForVersion(abbr); window.location.reload(); } else { return false; } }">
<img data-bind="attr: { src: 'icons/' + icon }" />
<span class="short-name" data-bind="text: short"></span>
</a>
<!-- ko if: !available -->
<span class="notice">— Coming soon</span>
<!-- /ko -->
<!-- ko if: available && !complete -->
<span class="notice">— Partially complete</span>
<!-- /ko -->
</li>
</ul>
<p>From there you can select the server collection (or <em>world</em>, if you like) you wish to check the status of.</p>
</div>
<div class="tutorial">
<a href="tutorial/tutorial1.png" target="_blank">
<img src="tutorial/tutorial1.png" alt="Tutorial 1" />
</a>
</div>
</div>
</article>
<article>
<h2>How is this any different to any of the other status checker websites?</h2>
<p>Quite simply: maple.watch tracks <em>your</em> connection to the MapleStory servers, and tells you <em>your</em> ping response from each server.</p>
<h3>What's wrong with the other status checking websites?</h3>
<p>The other status checking websites are great and you should definitely continue using them, but they all suffer from a few pitfalls which maple.watch sets out to fix:</p>
<ol class="the-bad">
<li><i class="fa fa-times"></i> <strong>They're infrequently updated</strong> — Some of them only update once every few minutes, which can be enough time for a server to go down and come back up again.</li>
<li><i class="fa fa-times"></i> <strong>They're centralised</strong> — All of the requests made to each server come from <em>their</em> computers, not yours. They don't show your connectivity, they show their own.</li>
</ol>
<h3>So how does maple.watch get around these issues?</h3>
<p>maple.watch works completely differently to all the other status checking websites:</p>
<ol class="the-good">
<li><i class="fa fa-check"></i> <strong>It's not at all centralised</strong> — Requests are sent out from <em>your</em> computer, not ours. The responses you see represent whether <em>you</em> are able to connect.</li>
<li><i class="fa fa-check"></i> <strong>It's updated instantly</strong> — As soon as you load each page the requests will be sent to each server you want to see there and then. There's no waiting around.</li>
<li><i class="fa fa-check"></i> <strong>It's completely transparent</strong> — We show you the IP addresses and ports of each server. Heck, we're even <a href="https://github.com/450/mse">open source</a>!</li>
</ol>
</article>
</section>
</div>
<!-- /ko -->
<!-- ko if: !isMainPage() -->
<div style="display:none" id="controls" class="wrapper" data-bind="visible: settings.showControls()">
<section>
<div class="info">
<h2>Controls</h2>
<p>Use these to adjust how the site works.</p>
<p>Values are stored as cookies, meaning they'll save for your next visit.</p>
</div>
<div class="content">
<article>
<label>
<span>Check Delay Offset <small>(ms)</small></span>
<span class="control">
<input type="number" data-bind="value: settings.delay" />
</span>
</label>
<footer>This number (in milliseconds) sets the delay between checking each server. The default value is 100, but you may want to increase this if you notice the ping response slowly increasing between each server.</footer>
</article>
<article>
<label>
<span>Check Timeout <small>(ms)</small></span>
<span class="control">
<input type="number" data-bind="value: settings.timeout" />
</span>
</label>
<footer>This number (in milliseconds) determines how long we should wait before assuming a server is offline. The higher this is, the greater chance of false positives there will be. Ideally this should be set between 1500 and 10000.</footer>
</article>
<article class="multiple">
<label title="Display the IP addresses and Port numbers for each server.">
<span>Show IPs and Ports</span>
<span class="control">
<input type="checkbox" data-bind="checked: settings.showIPPort" />
</span>
</label>
<label title="Display the millisecond connection time for each server alongside the status text.">
<span>Show Connection Time</span>
<span class="control">
<input type="checkbox" data-bind="checked: settings.showConnection" />
</span>
</label>
<label title="Allow clicking on each server to refresh it.">
<span>Enable Click to Refresh</span>
<span class="control">
<input type="checkbox" disabled data-bind="checked: settings.clickToRefresh" />
</span>
</label>
<label>
<span>Fix Browser Ping Speed</span>
<span class="control">
<input type="checkbox" data-bind="checked: settings.fixPing" />
</span>
</label>
</article>
</div>
</section>
<footer>
<span>
<button role="button" type="button" data-bind="click: function() { modifySettings() }">
<i class="fa fa-check"></i>
Save and Reload
</button>
<button role="button" type="button" class="plain" data-bind="click: function() { defaultSettings() }">
<i class="fa fa-history"></i>
Use Default
</button>
<button role="button" type="button" class="plain cancel" data-bind="click: function() { settings.showControls(false) }">
<i class="fa fa-times"></i>
Close Controls
</button>
</span>
</footer>
</div>
<!-- ko foreach: versions -->
<!-- ko if: abbr == $root.selected() -->
<div class="wrapper" style="display:none" data-bind="visible: true">
<h1>
<img data-bind="attr: { src: 'icons/Mushroom.png' }" />
<span data-bind="html: name"></span>
</h1>
<h2>
<small>Selected server:</small>
<img data-bind="attr: { src: 'icons/' + ( $root.selectedIcon() ) + '.png' }" />
<span data-bind="html: $root.subSelection()"></span>
</h2>
<p>To select a different world, click on its name in the Game Servers sidebar!</p>
</div>
<!-- ko if: applications.length == 0 -->
<div class="wrapper" style="display:none" data-bind="visible: true">
<section>
<div class="info">
<h2>Watch This Space</h2>
</div>
<div class="servers">
<h2>Coming Soon!</h2>
<p>We haven't added <span data-bind="text: abbr"></span>'s servers yet, but we're planning on doing this really soon!</p>
</div>
</section>
</div>
<!-- /ko -->
<div class="wrapper" data-bind="foreach: { data: applications, afterRender: rendered < $data.applications.length ? $root.updateSelectedServers($data.applications[rendered], rendered++) : null }, visible: true" style="display:none">
<section data-bind="style: { minHeight: (($root.getServersCountForApplication($parent.name, name) * 30) + 95) + 'px' }">
<div class="info">
<h2 data-bind="text: name"></h2>
<ul data-bind="foreach: icons">
<li role="button" data-bind="attr: { 'data-for': name }, css: { active: name == $root.subSelection(), clickable: $parent.name == 'Game Servers' && (name != 'Login' || (name == 'Login' && ($root.selected() == 'GMS' || $root.selected() == 'MSEA'))) }, click: function() { if ($parent.name == 'Game Servers' && (name != 'Login' || (name == 'Login' && ($root.selected() == 'GMS' || $root.selected() == 'MSEA')))) { $root.updateSelectedServers($parent, 0, name) } }">
<span class="icon">
<!-- ko if: icon.charAt(0) != 'f' -->
<img data-bind="attr: { src: 'icons/' + icon }" />
<!-- /ko -->
</span>
<span>
<strong data-bind="text: name"></strong>
<!-- ko if: english -->
<small data-bind="text: english"></small>
<!-- /ko -->
</span>
</li>
</ul>
<!-- ko if: description -->
<p data-bind="text: description"></p>
<!-- /ko -->
</div>
<!-- ko if: name == "Game Servers" -->
<div class="server-time" data-bind="html: checker.currentTime(), 1000)"></div>
<!-- /ko -->
<div class="servers" data-bind="foreach: selectedServers()">
<!-- ko if: loading == true -->
<p class="loading"><i class="fa fa-cog fa-spin"></i> Loading, please wait...</p>
<!-- /ko -->
<!-- ko if: unknown == false -->
<!-- ko if: $parent.name != "Game Servers" || rel == $root.subSelection() || (rel == 'Login' || (rel != 'Login' && ($root.selected() == 'GMS' || $root.selected() == 'MSEA'))) -->
<!-- ko if: name == "Channel 1" || name == "Cash Shop" || name == "Artemis" || name == "Star Planet 1" || name == "Boss Arena 1" || name == "Merge World" || name == "Cross World" || name == "Monster Life" || name == "Evolution Lab" -->
<br>
<!-- /ko -->
<article data-bind="css: { ok: +time() > 0 && +time() < 1000, slow: +time() >= 1000, timeout: status() == 'timeout' }, attr: { 'data-rel': rel }">
<div>
<h3>
<!-- ko if: icon.charAt(0) != 'f' -->
<img data-bind="attr: { src: 'icons/' + icon }" />
<!-- /ko -->
<!-- ko if: icon.charAt(0) == 'f' -->
<i class="icon fa" data-bind="css: icon"></i>
<!-- /ko -->
<span data-bind="html: sub ? name + ' <small>' + sub + '</small>' : name"></span>
</h3>
<dl data-bind="css: { hidden: !$root.settings.showIPPort() }">
<dt>IP</dt>
<dd class="address" data-bind="html: isNaN('' + address.charAt(0)) ? '<a target=\'_blank\' href=\'http' + (port == 443 ? 's' : '') + '://' + address + '\'>' + address + '</a>' : address, attr: { title: address }"></dd>
<dt>Port</dt>
<dd class="port" data-bind="text: port"></dd>
</dl>
</div>
<div class="status" data-bind="css: { ok: +time() > 0 && +time() < 1000, slow: +time() >= 1000, timeout: status() == 'timeout' }">
<div class="text" data-bind="text: status() == 'timeout' ? 'No Response' : time() > 0 ? (time() > $root.settings.pingOffset() > 0 ? time() - $root.settings.pingOffset() : 0) < 1000 ? 'Online!' : 'Online! Slow...' : 'Checking...'"></div>
<div class="time" data-bind="css: { hidden: !$root.settings.showConnection() }, text: time() !== '' && status() != 'timeout' ? (time() > $root.settings.pingOffset() > 0 ? time() - $root.settings.pingOffset() : 0) + 'ms' : ''"></div>
</div>
</article>
<!-- /ko -->
<!-- /ko -->
</div>
</section>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="wrapper">
<article id="footer-top">
<a href="http://mesomushie.com">
<img src="assets/zt3BPcH.jpg" width="500px" alt="mesomushie.com">
</a>
</article>
<footer id="footer">© Copyright <a href="http://maple.watch">maple.watch</a> 2015<br>All Rights Reserved</footer>
</div>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="knockout.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="checker.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60273356-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>