-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
253 lines (248 loc) · 12.2 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tool for creation and documentation of Original Characters, primarily made with the Brony Fandom in mind.">
<meta name="author" content='Christian "Krissy" Silvermoon'>
<meta name="application-name" content="Poniary OC Manager">
<meta name="keywords" content="javascript, editor, mlp, brony, brony-fandom, origianl characters, oc">
<title id="pageTitle">Poniary</title>
<link rel="stylesheet" href="stylesheets/main.css">
<link rel="stylesheet" id="stylesheet" name="Decorative">
<link rel="icon" id="favicon" href="img/favicon.png" name="favicon">
<script type=module src="js/main.js"></script>
</head>
<body>
Loading, please wait...<br/><br/>
If the page does not continue to load, please ensure that the following conditions are <b><u>true</u></b>:
<ul>
<li>Your browser is up to date</li>
<li>Your browser supports JavaScript</li>
<li>You are not using Internet Explorer</li>
<li>JavaScript is enabled</li>
<li>Any script blocking extententions (such as NoScript) are set to allow JavaScript to run on this page</li>
</ul>
<!--Reference elements for use by page script-->
<div id="refElements">
<div id="welcomeRef">
<center>
Welcome To The Poniary OC Manager<br/>
<div id=MainLogo></div>
<span class="appVer">Unknwon Version</span><br/>
<font size=1>by <span class="appAuthor">Christian \"Krissy\" Silvermoon</span></font><br/>
<br/>So... what is <i>Poniary?</i><br/>
Poniary is an interactive tool to store details about characters you and maybe friends create.
It was primarily created for storing MLP OCs, but can be used for others too.
If you're like me an have like 50 characters, you probably like to document them to keep
everything you do with them consistant!<br/>
<br/>
Be careful not to refresh without saving!<br/>
<br/>
Hopefully this Interactive OC Manager will help you keep track of your OCs as well as it
does for me!<br/>
<br/>
Happy Ponying!<br/>
<br/>
<a href="javascript:void(0)" onclick="page.showCharList()">Continue To Character List</a>
</center>
</div>
<input id=LoadFilePrependRef type=file onchange="page.handleLoadFile(this, 'prepend')" accept="application/json, .json"></input>
<input id=LoadFileRef type=file onchange="page.handleLoadFile(this, 'overwrite')" accept="application/json, .json"></input>
<input id=LoadFileAppendRef type=file onchange="page.handleLoadFile(this, 'append')" accept="application/json, .json"></input>
<div id="RegEXPRef">
Regular Expressions (RegEXP)<hr/>
<a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank" title="Wikipedia Article on Regular Expressions">Regular Expressions</a>
are used in many computer programs and programing languages to determine if a string (aka a snippet of text), matches what you might want it to.<br/>
<br/>
This page's puprose is <u><b>NOT</b></u> to teach you all the details of RegEXP, nor is it a complete tutorial... however, it will teach you how
some of RegEXP's basic features work, and how it applies to Poniary and it's Search Feature.<br/>
<br/>
To test out and practice Regular Expressions, a good place to check out is: <a href="https://www.debuggex.com/" target="_blank">Debuggex</a><br/>
<br/>
The first thing to note is that certain characters are <i>special</i> and are not just what they appear to be. If you actually intend THAT character
and it's a special one, you'll need to use a backslash (\) to <i>escape</i> the character from it's special function.<br/>
<br/>
When searching in Poniary, things are case-insensitve and BBCode is removed, for simplicity</br>
This means that "[b]Pineapples[/b][sup]are YUMMY[/sup]" is treated as "pineapplesare yummy" when searching.<br/>
<br/>
Here are some examples of RegEXP in action:<br/>
<div class=codeblock>
<code>
This is a string of text. It will be the string we use for our examples.<br/>
This is the start of a line. This is NOT.<br/>
This NOT is not at the end of a line</br/>
That string ends here.<br/>
<br/>-----<br/>
Characters that are special will be colored like <font color=lime>so</font><br/>
Matches will normally be colored like <font color=yellow>this</font><br/>
Escaped Characters will be colored like <font color=aqua>this</font><br/>
<br/>-----<br/>
RegEXP:<br/>
<font color=lime>^</font>This<br/>
<br/>
Matches:<br/>
<font color=yellow>This</font> is a string of text. It will be the string we use for our examples.<br/>
<font color=yellow>This</font> is the start of a line. This is NOT.<br/>
<font color=yellow>This</font> NOT is not at the end of a line</br/>
That string ends here.<br/>
<br/>
Because:<br/>
The <font color=lime>^</font> character means "Start of a line".<br/>
This means that only the <u>This</u> at the start of a line matches<br/>
<br/>-----<br/>
RegEXP:<br/>
NOT<font color=lime>\</font><font color=aqua>.</font><font color=lime>$</font><br/>
<br/>
Matches:<br/>
This is a string of text. It will be the string we use for our examples.<br/>
This is the start of a line. This is <font color=yellow>NOT.</font><br/>
This NOT is not at the end of a line</br/>
That string ends here.<br/>
<br/>
Because:<br/>
The <font color=lime>$</font> character means "End of line".<br/>
Normally <font color=lime>.</font> means "Any character", but...<br/>
We used <font color=lime>\</font> to escape it, meaning we literally want a "."<br/>
What if we literally want a <font color=lime>\</font> ?<br/>
Just do "<font color=lime>\</font><font color=aqua>\</font>"<br/>
<br/>-----<br/>
RegEXP:<br/>
Th<font color=lime>(</font>is<font color=lime>|</font>at<font color=lime>)</font><br/>
<br/>
Matches:<br/>
<font color=yellow>This</font> is a string of text. It will be the string we use for our examples.<br/>
<font color=yellow>This</font> is the start of a line. <font color=yellow>This</font> is NOT.<br/>
<font color=yellow>This</font> NOT is not at the end of a line</br/>
<font color=yellow>That</font> string ends here.<br/>
<br/>
Because:<br/>
Things are grouped together by <font color=lime>()</font>!<br/>
So the above means <font color=yellow>Th</font><font color=lime>is</font> and/or
<font color=yellow>Th</font><font color=lime>at</font> are matches!<br/>
Note that <font color=lime>|</font> is only special inside something like <font color=lime>()</font> and means "Or"
</code>
</div>
</div>
<div id="DialogBlackout">
<div class=smallwin id="dialogBox">
</div>
</div>
<div id="bbCodeRef">
BBCode Reference<hr/>
Bulletin Board Code is pretty common place on the Internet today... and you can use it here too!<br/>
<br/>
<center>
BBCode is supported in <i>nearly</i> all feilds! Feel free to experiment!<br/>
<span class=prisma>Go nuts!</span>
<br/>
<table class=list_table>
<tr>
<td colspan=2><center>Supported BBCode</center></td>
</tr>
<tr>
<td>BBCode</td><td>Result</td>
</tr>
<tr>
<td>[b]Bold Text[/b]</td><td><b>Bold Text</b></td>
</tr>
<tr>
<td>[i]Italic Text[/i]</td><td><i>Italic Text</i></td>
</tr>
<tr>
<td>[u]Underlined Text[/u]</td><td><u>Underlined Text</u></td>
</tr>
<tr>
<td>[s]Struckthrough Text[/s]</td><td><s>Struckthrough Text</s></td>
</tr>
<tr>
<td>This is [sup]Superscript[/sup]</td><td>This is <sup>Superscript</sup></td>
</tr>
<tr>
<td>This is [sub]Subscript[/sup]</td><td>This is <sub>Subscript</sub></td>
</tr>
<tr>
<td>This is a [url=http://example.com]Named Link[/url]</td><td>This is a <a href="http://example.com" target="_blank" title="Link to: http://example.com">Named Link</a></td>
</tr>
<tr>
<td>This is a regular link: [url]http://example.com[/url]</td><td>This is a regular link: <a href="http://example.com" target="_blank" title="Link to: http://example.com">http://example.com</a></td>
</tr>
<tr>
<td>This text is [color=orange]Colored[/color]</td><td>This text is <font color=orange>Colored</font></td>
</tr>
<tr>
<td>[code]This is a codeblock[/code]</td><td><div class=codeblock><code>This is a codeblock</code></div></td>
</tr>
<tr>
<td>[char=Character Name]Character Link[/char]</td><td>*Special. Will attempt to pull up character's page when clicked.</td>
</tr>
<tr>
<td>[char]Character Name[/char]</td><td>*Special. Will attempt to pull up character's page when clicked.</td>
</tr>
<tr>
<td>[quote=Author says]Authored Quote[/quote]</td><td><div class=blockquote><div class=quoteAuthor>Author says</div>Authored Quote</div></td>
</tr>
<tr>
<td>[quote]Unauthored Quote[/quote]</td><td><div class=blockquote>Unauthored Quote</div></td>
</tr>
<tr>
<td>[prisma]Prismatic/Rainbow Text[/prisma]</td><td><span class=prisma>Prismatic/Rainbow Text<span></td>
</tr>
<tr>
<td>[spoiler]Spoiered Text[/spoiler]</td><td><span class=spoiler>Spoilered Text</span></td>
</tr>
<tr>
<td>[highlight=yellow]Highlighted Text[/highlight]</td><td><span style="background: yellow; padding: 2px; border-radius 6px;">Highlighted Text</span></td>
</tr>
</table>
</center>
</div>
<div id="EditorRef">
<div class="EditorContainer">
<center>Editing Charcter ID: <span id="Editor_ID"></span></center><br/>
Character Name: <input id=Editor_Name type=text placeholder="Character Name"></input>
<span style="float: right;">Subtitle: <input id=Editor_Subtitle type=text placeholder="Subtitle"></input></span><hr/>
Images: [<input id="Editor_ImageSubmitter" type=file accept="image/*"></input> <a href="javascript:void(0)" onclick="page.editorFunc('newImg')">+Add</a>]<br/>
<table class=list_table id="Editor_Images"></table><br/>
<br/>
Ribbon Color: <input id=Editor_RibbonColor type=color></input><br/>
Creator: <input id=Editor_Creator type=text placeholder="Creator Name"></input> [<a href="javascript:void(0)" onclick="document.getElementById('Editor_Creator').value = saveData.MetaInf.author" title="Set as Author of Save From Meta Information">Set As Author</a>]<br/>
Birth Date: <input id=Editor_DOB type=text placeholder="Birth Date"></input><br/>
Birth Place: <input id=Editor_BirthPlace type=text placeholder="Birth Place"></input><br/>
Race: <input id=Editor_Race type=text placeholder="Birth Place"></input><br/>
Gender: <select id=Editor_Gender type=listbox>
<option>Undefined</option>
<option>Female</option>
<option>Intersex</option>
<option>Male</option>
<option>N/a</option>
<option>Other</option>
</select><br/>
Orientation: <input id=Editor_Orientation type=text placeholder="Orientation"></input><br/>
Occupation: <input id=Editor_Occupation type=text placeholder="Occupation"></input><br/>
Special Talent: <input id=Editor_Talent type=text placeholder="Special Talent"></input><br/>
Cutie Mark: <input id=Editor_CutieMark type=text placeholder="Cutie Mark"></input><br/>
Universe: <input id=Editor_Universe type=text placeholder="Universe"></input><br/>
<br/>
Custom Fields: [<a href="javascript:void(0)" onclick="page.editorFunc('newCustField')">+New</a>]<br/>
<table class=list_table id="Editor_CustomFields"></table>
<br/>
Coloration: [<a href="javascript:void(0)" onclick="page.editorFunc('newColor')">+New</a>]<br/>
<table class=list_table id="Editor_Colors"></table>
<br/>
Family: [<a href="javascript:void(0)" onclick="page.editorFunc('newFamily')">+New</a>]<br/>
<table class=list_table id="Editor_Family"></table>
<br/>
Description:<br/>
<textarea rows=10 id=Editor_Description></textarea><br/>
<br/>
Abilities: [<a href="javascript:void(0)" onclick="page.editorFunc('newAbility')">+New</a>]<br/>
<table class=list_table id="Editor_Abilities"></table><br/>
<br/>
<hr/><br/>
<center><a href="javascript:void(0)" onclick="page.editorFunc('save')">Save</a><br/>
<a href="javascript:void(0)" onclick="page.editorFunc('discard')">Discard</center><br/>
</div>
</div>
</div>
<!------------>
</body>