-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (121 loc) · 5.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mabinogi World - Inventory icon cleaner</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/chromatism.js"></script>
<script type="text/javascript" src="lib/jenks.js"></script>
<script type="text/javascript" src="lib/define.js"></script>
<script type="text/javascript" src="mediawiki.js"></script>
<script type="text/javascript" src="colorbin.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<script type="text/javascript" src="cleaner.js"></script>
</head>
<body>
<div class="banner">
<div class="logged-out login-panel" style="display: none">
<div class="panel-header login-panel-header">Login</div>
<div id="login-fields"></div>
</div>
<span class="banner-text">Inventory Icon Cleaner</span><br />
<span class="banner-subtext">Already have a clean inventory icon? <a href="#" id="upload-link">Click here to upload it manually.</a></span>
<div class="spacer"></div>
</div>
<div style="margin-left: 20%; margin-right:20%; min-width: 600px;">
<div><div class="canvases block">
<div class="logged-in panel-header canvas-panel-header" style="display: none;">
<span>Currently editing: </span>
<span class="upload-name"><input id="upload-name"/></span>
</div>
<div class="logged-out panel-header canvas-panel-header">
<span>Please <a href="https://wiki.mabi.world">login</a> to be able to upload this to the Wiki.</span>
</div>
<table align="center">
<tr valign="middle">
<td><canvas id="cleaner" width="150" height="150"></canvas></td>
<td class="arrow">→</td>
<td><canvas id="cleaned" width="150" height="150"></canvas></td>
<td class="arrow">→</td>
<td><span class="editor-bg"><canvas id="editor" width="150" height="150"></canvas></span></td>
<td class="editor-buttons">
<span id="editor-buttons">
<span class="editor-button pencil" title="Restore pixel"></span>
<span class="editor-button eraser" title="Hide pixel"></span>
<span class="editor-button refresh" title="Reset"></span>
<span class="editor-button cycle" title="Cycle background"></span>
<span class="editor-space"></span>
<span class="editor-button upload" title="Upload icon"></span>
</span>
</td>
</tr>
<tr valign="middle">
<td><span class="slot-selector button">Select icon's slots</span></td>
<td class="blank"> </td>
<td><span class="show-corrections">Make corrections...</span></td>
<td class="blank"> </td>
<td colspan="2"> </td>
</tr>
</table>
</div></div>
<div><div style="display: none;" class="corrections block">
<div class="panel-header">Grid settings
</div>
<center><table class="positions">
<tr>
<td>Top-left:</td>
<td><input type="number" id="left" title="Left (x)"/></td>
<td><input type="number" id="top" title="Top (y)"/></td>
<td rowspan="2">Tolerance:</td>
<td rowspan="2"><input type="number" id="tolerance" title="Color tolerance" value="40"/></td>
</tr>
<tr>
<td>Bottom-right:</td>
<td><input type="number" id="right" title="Right (x)"/></td>
<td><input type="number" id="bottom" title="Bottom (y)"/></td>
</tr>
</table></center>
<div class="grid-adjuster">
<span id="grid-adjuster" class="button">Adjust grid</span>
</div>
<div class="panel-header" style="margin-top: 8px;">Adjust color detection</div>
<div class="colors">
<span class="color"><span class="name">Grid</span> <span id="grid-color" class="selection"></span></span>
<span class="color"><span class="name">Corner</span> <span id="corner-color" class="selection normal"></span></span>
<span class="color"><span class="name">Box</span> <span id="box-color" class="selection normal"></span></span>
<span class="color"><span class="name">Shadow</span> <span id="shadow-color" class="selection normal"></span></span>
<span class="color"><span class="name">Inner</span> <span id="inner-color" class="selection normal"></span></span>
<span class="color-help">?</span>
</div>
<div class="commit-colors button">Lock these colors</div>
<div style="display: none" id="color-selector"></div>
</div></div>
<div class="status"></div>
<div class="info-panel">
<div class="panel-header info-panel-header">How to use the Inventory Icon Cleaner</div>
<p>Please use an opaque, high-contrast interface! It will probably not work otherwise.</p>
<p>Suggestions:
<span class="interface-preview ivory">Ivory</span>,
<span class="interface-preview cherry-pink">Cherry Pink</span>,
<span class="interface-preview golden-apricot">Golden Apricot</span>,
<span class="interface-preview old-mustard">Old Mustard</span>,
<span class="interface-preview summer-sea">Summer Sea</span>,
<span class="interface-preview spring-herbs">Spring Herbs</span>,
<span class="interface-preview urban-man">Urban Man</span></p>
<div style="display: none" id="interface-previewer"></div>
<div class="left block">
<ol>
<li>Use a screenshot tool that will copy a selection of the screen to the clipboard.</li>
<li>Take a screenshot of the icon. It doesn't have to be carefully taken, make sure the whole icon is there!</li>
<li>Paste the screenshot into this page with Ctrl+V</li>
<li>Select the relevant inventory slots or make adjustments if needed.</li>
<li>Or watch Rydian's instructional video <a href="https://www.youtube.com/watch?v=KR9d9lX1V1E">here</a>.</li>
</ol>
</div>
</div>
</div>
</body>
</html>