-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
421 lines (389 loc) · 33.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
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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="keywords" content="rpg chart maker, rpg chart, name generator, rpg roll table, chart maker, rpg, rpg dynamic chart, roll table"/>
<meta name="description" content="Create charts and Roll Tables for your favorite RPG's!"/>
<meta name="author" content="James M. Adams"/>
<meta charset="utf-8"/>
<title>RPG Chart Maker</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="//cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css" type="text/css" rel="stylesheet">
<!--<link href="css/animate.css" type="text/css" rel="stylesheet">-->
<link href="script/mjs/css/hamburgerMenu.css" type="text/css" rel="stylesheet">
<link href="script/mjs/css/dialog.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/header.css" type="text/css" rel="stylesheet">
<link href="css/dialog.css" type="text/css" rel="stylesheet">
<link href="css/card.css" type="text/css" rel="stylesheet">
<link href="css/rollContainer.css" type="text/css" rel="stylesheet">
<link href="css/objectGroup.css" type="text/css" rel="stylesheet">
<!-- local reference -->
<!--
<script src="script/lib/jquery-3.2.1.min.js"></script>
<script src="script/lib/jquery-ui.min.js"></script>
<script src="script/lib/jquery.ui.touch-punch.min.js"></script>
<script src="script/lib/jquery.tablesorter.min.js"></script>
<script src="script/lib/FileSaver.min.js"></script>
<script src="script/lib/seedrandom.min.js"></script>
-->
<!-- end local reference -->
<!-- cdn debug -->
<!--
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.14/js/jquery.tablesorter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.js"></script>
-->
<!-- End cnd Debug -->
<!-- cdn reference -->
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha384-MI/QivrbkVVJ89UOOdqJK/w6TLx0MllO/LsQi9KvvJFuRHGbYtsBvbGSM8JHKCS0" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.14/js/jquery.tablesorter.min.js" integrity="sha384-oZMj3g1jddXofxGsl096QCV5aHdAgtAqU2bZz0TaEr8/Cg8xkREDI6YUu36JKlQa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js" integrity="sha384-VgWGwiEJnh9P379lbU8DxPcfRuFkfLl0uPuL9tolOHtm2tx8Qy8d/KtvovfM0Udh" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js" integrity="sha384-aWVNr46OuY/0J65ZcoUF3fcT4DHNtt76aZUe6A2Qziy4TWSnpKh4iFDgmTD1r+Io" crossorigin="anonymous"></script>
<!-- end cdn reference -->
<script src="script/menuBar/trait/HasOpenMenuButtons.js"></script>
<script src="script/menuBar/trait/HasAddMenu.js"></script>
<script src="script/menuBar/trait/HasSaveMenu.js"></script>
<script src="script/menuBar/trait/HasLoadMenu.js"></script>
<script src="script/menuBar/trait/HasCustomizeMenu.js"></script>
<script src="script/menuBar/trait/HasRollButton.js"></script>
<script src="script/menuBar/trait/HasListNameInput.js"></script>
<script src="script/menuBar/trait/HasShare.js"></script>
<script src="script/menuBar/trait/HasGatherData.js"></script>
<script src="script/menuBar/trait/HasLoadData.js"></script>
<script src="script/menuBar/MainMenu.js"></script>
<script src="script/group/trait/HasListMenu.js"></script>
<script src="script/group/trait/HasUniqueControl.js"></script>
<script src="script/group/trait/HasRollControl.js"></script>
<script src="script/group/trait/HasAlphabetizeControl.js"></script>
<script src="script/group/trait/HasFillOut.js"></script>
<script src="script/group/trait/Base.js"></script>
<script src="script/group/listGroup/trait/HasListGroupAdd.js"></script>
<script src="script/group/listGroup/trait/HasListGroupEdit.js"></script>
<script src="script/group/listGroup/trait/HasListGroupLoad.js"></script>
<script src="script/group/listGroup/ListGroup.js"></script>
<script src="script/group/objectGroup/trait/HasNow.js"></script>
<script src="script/group/objectGroup/trait/HasObjectGroupAddInput.js"></script>
<script src="script/group/objectGroup/trait/HasObjectGroupAddEntry.js"></script>
<script src="script/group/objectGroup/trait/HasObjectGroupEditInput.js"></script>
<script src="script/group/objectGroup/trait/HasObjectGroupEditEntry.js"></script>
<script src="script/group/objectGroup/trait/HasObjectGroupLoad.js"></script>
<script src="script/group/objectGroup/ObjectGroup.js"></script>
<script src="script/group/listGroup/trait/HasGridGroupSelect.js"></script>
<script src="script/group/listGroup/trait/HasGridGroupColumn.js"></script>
<script src="script/group/listGroup/trait/HasWrapControl.js"></script>
<script src="script/group/listGroup/trait/HasDirectionControl.js"></script>
<script src="script/group/listGroup/GridGroup.js"></script>
<script src="script/group/rollContainer/trait/HasCSVSave.js"></script>
<script src="script/group/rollContainer/trait/HasRoll.js"></script>
<script src="script/group/rollContainer/trait/HasRollSeed.js"></script>
<script src="script/group/rollContainer/trait/HasSeed.js"></script>
<script src="script/group/rollContainer/trait/HasRollMenu.js"></script>
<script src="script/group/rollContainer/RollContainer.js"></script>
<script src="script/mjs/script/Core.js"></script>
<script src="script/mjs/script/InfoDialog.js"></script>
<script src="script/mjs/script/hamburgerMenu.js"></script>
<script src="script/mjs/script/Rng.js"></script>
<script src="script/groupContainer/ListGroupContainer.js"></script>
<script src="script/main.js"></script>
</head>
<body>
<!-- Menu -->
<div class="hamburger menu">
<!-- Help Menu -->
<div class="help subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Links</h3>
<a href="http://medicationforall.com">Medication For All</a>
<a href="https://github.com/medicationforall/rpgchartmaker">
<svg aria-labelledby="title" role="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" style="height: 25px; width: 25px;">
<title>GitHub icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg> Github
</a>
<hr />
<a href="" class="helpButton openInfoDialog" data-url="help">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 25px; width: 25px;"><path d="M0 0h512v512H0z" opacity="0"></path><g class="" style="touch-action: none;" transform="translate(0,0)"><path d="M256 16C123.45 16 16 123.45 16 256s107.45 240 240 240 240-107.45 240-240S388.55 16 256 16zm0 60c99.41 0 180 80.59 180 180s-80.59 180-180 180S76 355.41 76 256 156.59 76 256 76zm0 30c-66.274 0-120 40.294-120 90 0 30 60 30 60 0 0-16.57 26.862-30 60-30 33.138 0 60 13.43 60 30s-30 15-60 30c-1.875.938-3.478 2.126-4.688 3.28C226.53 244.986 226 271.926 226 286v15c0 16.62 13.38 30 30 30 16.62 0 30-13.38 30-30v-15c0-45 90-40.294 90-90s-53.726-90-120-90zm0 240a30 30 0 0 0-30 30 30 30 0 0 0 30 30 30 30 0 0 0 30-30 30 30 0 0 0-30-30z"></path></g><!-- react-empty: 6 -->
</svg> Help
</a>
<a href="" class="aboutButton openInfoDialog" data-url="about">About</a>
<a href="" class="changesButton openInfoDialog" data-url="changes">Changes</a>
</div>
<!-- Add Menu -->
<div class="add subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Add</h3>
<a href="" class="addCardButton" data-class="ListGroup" title="Add List">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 32px; width: 32px;"><path d="M0 0h512v512H0z" opacity="0"></path><g class="" style="touch-action: none;" transform="translate(0,0)"><path d="M122.31 84.615l-2.85 8.54-11.394 34.185-5.703-5.703L96 115.27 83.27 128l6.367 6.363 26.297 26.297 20.605-61.814 2.845-8.537-17.076-5.695zM151 119v18h242v-18H151zm0 64v18h242v-18H151zm0 64v18h242v-18H151zm-28.69 29.615l-2.85 8.54-11.394 34.185-5.703-5.703L96 307.27 83.27 320l6.367 6.363 26.297 26.297 20.605-61.814 2.845-8.537-17.076-5.695zM151 311v18h242v-18H151zm0 64v18h242v-18H151z"></path></g><!-- react-empty: 6 -->
</svg>List
</a>
<a href="" class="addCardButton" data-class="ObjectGroup" title="Add Object List">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 32px; width: 32px;">
<path d="M0 0h512v512H0z" opacity="0"></path><g class="" style="touch-action: none;" transform="translate(0,0)"><path d="M50 96c-9.972 0-18 8.028-18 18v300c0 9.972 8.028 18 18 18h412c9.972 0 18-8.028 18-18V114c0-9.972-8.028-18-18-18H50zm5 23h402v18H55v-18zm0 32h210v258H55V151zm18 18v222h7.03c.47-24.342 18.315-74.172 47.093-97.889C136.331 300.56 147.615 305 160 305c12.385 0 23.669-4.44 32.877-11.889C221.655 316.828 239.5 366.658 239.97 391H247V169H73zm222 14h146v18H295v-18zm-135 10c20.835 0 39 20.241 39 47s-18.165 47-39 47-39-20.241-39-47 18.165-47 39-47zm135 22h114v18H295v-18zm0 32h50v18h-50v-18zm80 0h66v18h-66v-18zm-16 96h98v18h-98v-18zm-32 32h130v18H327v-18z"></path></g><!-- react-empty: 6 -->
</svg>Object List
</a>
<a href="" class="addCardButton" data-class="GridGroup" title="Add Grid">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 32px; width: 32px;">
<path d="M0 0h512v512H0z" fill="transparent" opacity="0"></path>
<g class="" transform="translate(0,0)" style="touch-action: none;">
<path d="M249.28 106.28V250h-77.186v-56.25H22.47V319.406h149.624v-50.719h77.187v148.407h18.69V357.22h71.686v50.718H489.28V282.28H339.657v56.251H267.97V189.407h71.686v50.72H489.28V114.47H339.657V170.718H267.97v-64.44h-18.69zm109.064 26.876h112.25v88.28h-112.25v-88.28zm-317.188 79.28h112.25v88.283H41.156v-88.283zm317.188 88.533h112.25v88.28h-112.25v-88.28z">
</path>
</g><!-- react-empty: 6 -->
</svg>Grid
</a>
<a href="" class="addCardButton" data-class="RollContainer" title="Add Roll Table">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 32px; width: 32px;"><path d="M0 0h512v512H0z" opacity="0"></path><g class="" style="touch-action: none;" transform="translate(0,0)"><path d="M138.798 35.342L28.73 114.268l95.777 29.095 111.305-87.09-97.014-20.93zm112.986 31.082l-118.047 89.96 51.07 131.102 8.534-7.455 4.23-15.708a18.338 13.102 76.863 0 1-9.08-20.45 18.338 13.102 76.863 0 1 10.997-13.727 18.338 13.102 76.863 0 1 3.62.53 18.338 13.102 76.863 0 1 3.113 1.544l7.94-29.48a9 9 0 0 1 .353-1.04 9 9 0 0 1 .058-.128 9 9 0 0 1 .32-.685 9 9 0 0 1 .09-.153 9 9 0 0 1 .37-.625 9 9 0 0 1 .534-.723 9 9 0 0 1 .066-.074 9 9 0 0 1 .54-.594 9 9 0 0 1 .65-.593 9 9 0 0 1 .004-.002 9 9 0 0 1 .46-.342 9 9 0 0 1 .266-.197 9 9 0 0 1 .502-.3 9 9 0 0 1 .27-.157 9 9 0 0 1 .44-.208 9 9 0 0 1 .38-.178 9 9 0 0 1 .437-.152 9 9 0 0 1 .41-.143 9 9 0 0 1 .404-.1 9 9 0 0 1 .47-.114 9 9 0 0 1 .51-.07 9 9 0 0 1 .37-.05 9 9 0 0 1 .01 0 9 9 0 0 1 .01-.003l33.624-2.873a18.338 13.102 76.863 0 1 10.326-9.777 18.338 13.102 76.863 0 1 3.622.53 18.338 13.102 76.863 0 1 8.527 7.327l13.043-1.113-39.442-123.783zM137.25 74.03a9.8 19.77 77.916 0 1 12.798 8.734 9.8 19.77 77.916 0 1-21.938 11.998 9.8 19.77 77.916 0 1-16.57-8.602 9.8 19.77 77.916 0 1 21.938-12 9.8 19.77 77.916 0 1 3.77-.13zm100.228 23.517a18.338 13.102 76.863 0 1 .002 0 18.338 13.102 76.863 0 1 3.62.53 18.338 13.102 76.863 0 1 12.112 21.94 18.338 13.102 76.863 0 1-14.617 13.196 18.338 13.102 76.863 0 1-12.114-21.94 18.338 13.102 76.863 0 1 10.998-13.726zM24.22 131.71l46.992 114.124 94.236 40.38-45.988-125.57-95.24-28.935zm147.886 17.43a18.338 13.102 76.863 0 1 3.622.528 18.338 13.102 76.863 0 1 12.11 21.94 18.338 13.102 76.863 0 1-14.616 13.197 18.338 13.102 76.863 0 1-12.112-21.94 18.338 13.102 76.863 0 1 10.996-13.726zm-75.123 13.016a19.454 9.134 59.254 0 1 16.955 15.078 19.454 9.134 59.254 0 1-.425 19.485A19.454 9.134 59.254 0 1 95.6 181.78a19.454 9.134 59.254 0 1 .424-19.48 19.454 9.134 59.254 0 1 .96-.144zm263.393 40.21l-112.102 9.577 113.762 79.926 113.598-16.956-115.258-72.55zM70.82 212.022A19.454 9.134 59.254 0 1 87.777 227.1a19.454 9.134 59.254 0 1-.425 19.484 19.454 9.134 59.254 0 1-17.913-14.938 19.454 9.134 59.254 0 1 .425-19.482 19.454 9.134 59.254 0 1 .96-.14zm157.378 7.813L186.66 374.023l115.616 99.454 47.147-168.47-121.225-85.17zm126.987 11.168a21.76 8.898 15.267 0 1 19.693 4.783 21.76 8.898 15.267 0 1 7.607 14.244 21.76 8.898 15.267 0 1-28.886-3.182 21.76 8.898 15.267 0 1-7.61-14.244 21.76 8.898 15.267 0 1 9.195-1.6zM487.78 291.3L366.9 309.343l-46.823 167.316 116.297-31.77L487.78 291.3zm-181.808 10.8a25.834 15.573 84.277 0 1 4.238.943 25.834 15.573 84.277 0 1 12.873 31.72 25.834 15.573 84.277 0 1-18.105 17.893 25.834 15.573 84.277 0 1-12.874-31.72 25.834 15.573 84.277 0 1 13.868-18.836zm154.086 11.636a13.237 21.96 28.62 0 1 7.673 4.13 13.237 21.96 28.62 0 1-6.176 28.435 13.237 21.96 28.62 0 1-21.287 3.878 13.237 21.96 28.62 0 1 6.175-28.434 13.237 21.96 28.62 0 1 13.616-8.008zM391.362 324.4a13.237 21.96 28.62 0 1 7.672 4.13 13.237 21.96 28.62 0 1-6.176 28.435 13.237 21.96 28.62 0 1-21.287 3.877 13.237 21.96 28.62 0 1 6.177-28.434 13.237 21.96 28.62 0 1 13.615-8.008zm-173.996 13.305a25.834 15.573 84.277 0 1 4.24.945 25.834 15.573 84.277 0 1 12.872 31.72 25.834 15.573 84.277 0 1-18.106 17.894 25.834 15.573 84.277 0 1-12.873-31.72 25.834 15.573 84.277 0 1 13.866-18.84zm212.278 60.87a13.237 21.96 28.62 0 1 7.67 4.13 13.237 21.96 28.62 0 1-6.174 28.434 13.237 21.96 28.62 0 1-21.287 3.876 13.237 21.96 28.62 0 1 6.175-28.434 13.237 21.96 28.62 0 1 13.616-8.008zm-70.332 19.488a13.237 21.96 28.62 0 1 7.67 4.132 13.237 21.96 28.62 0 1-6.174 28.434 13.237 21.96 28.62 0 1-21.287 3.874 13.237 21.96 28.62 0 1 6.176-28.434 13.237 21.96 28.62 0 1 13.616-8.007z"></path></g><!-- react-empty: 6 -->
</svg>Roll Table
</a>
</div>
<!-- Delete Menu -->
<div class="delete subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Delete</h3>
<a href="" class="deleteAllButton" title="Delete All">All</a>
<a href="" class="deleteListsButton" title="Delete Lists">Lists</a>
<a href="" class="deleteRollsButton" title="Delete Rolls">Rolls</a>
</div>
<!-- Save Menu -->
<div class="save subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Save Options</h3>
Lists <input class="saveOption" type="checkbox" data-type="lists" title="Save Lists" checked /><br />
Rolls <input class="saveOption" type="checkbox" data-type="rolls" title="Save Rolls" checked /><br />
Theme <input class="saveOption" type="checkbox" data-type="overrides" title="Save Theme" checked />
<hr />
<h3>Save JSON</h3>
<a href="" class="exportButton" title="Save as json">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 25px; width: 25px;">
<path d="M0 0h512v512H0z" opacity="0"></path>
<g class="" style="touch-action: none;" transform="translate(0,0)">
<path d="M64 48c-8.726 0-16 7.274-16 16v384c0 8.726 7.274 16 16 16h236.25l-16-16H64V64h63.375v97.53c0 3.924 3.443 7.095 7.72 7.095h169.81c4.277 0 7.72-3.17 7.72-7.094V64h69.22c.428.318.8.548 1.467 1.094 2.05 1.675 4.962 4.264 8.375 7.406 6.827 6.283 15.65 14.837 24.313 23.5 8.663 8.663 17.217 17.486 23.5 24.313 3.142 3.413 5.73 6.324 7.406 8.374.546.668.776 1.04 1.094 1.47V366h16V128c0-2.68-.657-3.402-1.03-4.156-.375-.754-.725-1.294-1.095-1.844-.74-1.1-1.575-2.19-2.594-3.438-2.036-2.492-4.768-5.55-8.03-9.093-6.524-7.09-15.155-16-23.938-24.782-8.782-8.783-17.692-17.414-24.78-23.938-3.545-3.262-6.6-5.994-9.094-8.03-1.247-1.02-2.337-1.855-3.438-2.595-.55-.37-1.09-.72-1.844-1.094-.754-.373-1.477-1.03-4.156-1.03H64zm87.72 16h48.56c4.277 0 7.72 4.425 7.72 9.938v70.124c0 5.513-3.443 9.938-7.72 9.938h-48.56c-4.277 0-7.72-4.425-7.72-9.938V73.938c0-5.512 3.443-9.937 7.72-9.937zM114 212c-4.432 0-8 3.568-8 8v184c0 4.432 3.568 8 8 8h134.25l-30.625-30.625L202.28 366H279V238h127v-18c0-4.432-3.568-8-8-8H114zm183 44v128h-51.25L352 490.25 458.25 384H407V256H297zm167 147.75l-16 16V448h-28.25l-16 16H448c8.726 0 16-7.274 16-16v-44.25z">
</path>
</g><!-- react-empty: 6 -->
</svg>Save File
</a>
</div>
<!-- Load Menu -->
<div class="load subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Load Options</h3>
<span>On load <b>remove</b> the following:</span><br />
<select name="clearList">
<option value="all">All</option>
<option value="none">None</option>
<option value="lists">Lists</option>
<option value="rolls">Rolls</option>
</select><br />
<span>On load <b>add</b> the following:</span><br />
<select name="loadList">
<option value="all">All</option>
<option value="lists">Lists</option>
<option value="rolls">Rolls</option>
</select>
<hr />
<h3>Load JSON</h3>
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 25px; width: 25px;">
<path d="M0 0h512v512H0z" opacity="0"></path>
<g class="" style="touch-action: none;" transform="translate(0,0)">
<path d="M64 48c-8.726 0-16 7.274-16 16v384c0 8.726 7.274 16 16 16h215v-16H64V64h63.375v97.53c0 3.924 3.443 7.095 7.72 7.095h169.81c4.277 0 7.72-3.17 7.72-7.094V64h69.22c.428.318.8.548 1.467 1.094 2.05 1.675 4.962 4.264 8.375 7.406 6.827 6.283 15.65 14.837 24.313 23.5 8.663 8.663 17.217 17.486 23.5 24.313 3.142 3.413 5.73 6.324 7.406 8.374.546.668.776 1.04 1.094 1.47V330.25l16 16V128c0-2.68-.657-3.402-1.03-4.156-.375-.754-.725-1.294-1.095-1.844-.74-1.1-1.575-2.19-2.594-3.438-2.036-2.492-4.768-5.55-8.03-9.093-6.524-7.09-15.155-16-23.938-24.782-8.782-8.783-17.692-17.414-24.78-23.938-3.545-3.262-6.6-5.994-9.094-8.03-1.247-1.02-2.337-1.855-3.438-2.595-.55-.37-1.09-.72-1.844-1.094-.754-.373-1.477-1.03-4.156-1.03H64zm87.72 16h48.56c4.277 0 7.72 4.425 7.72 9.938v70.124c0 5.513-3.443 9.938-7.72 9.938h-48.56c-4.277 0-7.72-4.425-7.72-9.938V73.938c0-5.512 3.443-9.937 7.72-9.937zM114 212c-4.432 0-8 3.568-8 8v184c0 4.432 3.568 8 8 8h165v-28h-76.72l15.345-15.375 128-128L352 234.28l6.375 6.345L406 288.25V220c0-4.432-3.568-8-8-8H114zm238 47.75L245.75 366H297v128h110V366h51.25L352 259.75zM448 384v64h-23v16h23c8.726 0 16-7.274 16-16v-64h-16z">
</path>
</g><!-- react-empty: 6 -->
</svg>
<input type="file" class="importFile" title="Load JSON File" accept=".json" />
<hr />
<h3>Template</h3>
<a href="" class="loadTemplateButton" data-file="Crystalia_Human_Names.json">Names Chart</a>
<a href="" class="loadTemplateButton" data-file="Weapons and Armor.json">Items Chart</a>
<a href="" class="loadTemplateButton" data-file="Bar Patrons.json">Bar Patrons</a>
<a href="" class="loadTemplateButton" data-file="Lasers and Feelings.json">Lasers and Feelings</a>
<a href="" class="loadTemplateButton" data-file="RoomMaster.json">Rogue Room Generator</a>
<a href="" class="loadTemplateButton" data-file="Colors.json">Test - List</a>
<a href="" class="loadTemplateButton" data-file="objectTest.json">Test - Object List</a>
<a href="" class="loadTemplateButton" data-file="Alignment-test.json">Test - Grid</a>
<a href="" class="loadTemplateButton" data-file="Characters.json">Test -Characters</a>
<hr />
<h3>Load JSON Text</h3>
<textarea class="loadRawTextArea"></textarea>
<a href="" class="loadRawButton">Load JSON</a>
</div>
<!-- Settings Menu -->
<div class="customize subMenu">
<a href="" class="closeMenuButton">>></a>
<h3>Customize</h3>
<table>
<thead>
<tr>
<th>Control</th>
<th title="Background color">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 20px; width: 20px;">
<path d="M0 0h512v512H0z" fill="transparent" opacity="0">
</path>
<g class="" transform="translate(0,0)" style="touch-action: none;">
<path d="M274.639 24.324c-1.305-.008-2.609 0-3.914.027-51.867 1.055-104.298 29.226-135.069 81.643 7.894-1.849 16.23-3.578 24.918-5.245 40.784-55.165 109.828-71.82 163.772-47.845 33.498 14.888 61.522 45.309 73.933 93.998 6.188 24.276 8.4 53.16 5.149 86.777a215.415 215.415 0 0 1-11.662 4.254C357.004 249.52 309.028 256.679 256 256.679c-53.028 0-101.004-7.159-135.766-18.746-17.398-5.8-31.388-12.652-41.146-20.342-.29-.229-.565-.46-.848-.691A192 64 0 0 1 256 176.68a192 64 0 0 1 131.156 17.485c-.127-7.895-.948-17.402-2.709-26.877-3.03-16.298-8.33-33.269-13.87-44.482-32.923-7.762-72.188-12.127-114.577-12.127-54.632 0-104.122 7.223-141.457 19.668-18.65 6.217-34.418 13.686-46.596 23.283C55.68 163.298 46 176.566 46 192.68c0 16.112 9.68 29.38 21.947 39.048A98.426 98.426 0 0 0 73 235.443v197.236c0 5.189 3.194 11.174 11.658 17.844 8.464 6.67 21.703 13.3 38.424 18.873 33.442 11.147 80.71 18.283 132.918 18.283 52.209 0 99.476-7.136 132.918-18.283 16.721-5.574 29.96-12.203 38.424-18.873 8.464-6.67 11.658-12.655 11.658-17.844V253.095c-5.532 53.188-19.494 85.11-34.598 116.803.002.186.01.371.01.558 0 9.347-2.862 17.978-7.998 24.624-5.135 6.645-12.98 11.417-21.896 11.417-8.917 0-16.76-4.772-21.895-11.417-5.135-6.646-7.998-15.277-7.998-24.624 0-9.346 2.863-17.977 7.998-24.623 5.136-6.645 12.978-11.416 21.895-11.416 8.738 0 16.438 4.587 21.576 11.024.185-.537.375-1.078.559-1.613 11.708-26.34 21.133-54.236 25.013-98.461 8.404-4.033 15.908-8.533 22.387-13.639C456.32 222.06 466 208.792 466 192.679s-9.68-29.381-21.947-39.049c-8.362-6.59-18.416-12.174-29.934-17.04-14.385-50.057-45.396-83.66-82.465-100.135-18.047-8.022-37.451-12.014-57.015-12.131zM69.139 207.43zm373.722 0zm-19.972 1.99a192 64 0 0 1 10.933 7.428c-.303.248-.598.496-.91.742-3.132 2.469-6.706 4.85-10.683 7.139.342-5.201.567-10.31.66-15.309zM91.252 245.806c7.143 3.372 14.924 6.416 23.291 9.205C151.878 267.456 201.368 274.68 256 274.68c40.082 0 77.375-3.9 109.152-10.887-1.347 22.319-5.683 62.65-19.502 62.157-34.923-1.246-22.114-45.128-43.703-36.75-15.494 6.013-13.837 34.672-28.804 35.26-18.017.706-35.747-27.532-57.608-29.301-16.208-1.312-16.45 63.536-36.75 64.81-19.16 1.203-20.674-55.664-29.799-57.361-36.095-6.713 18.027 104.509-38.238 111.244-23.923 2.864-16.886-102.419-19.496-168.045zm283.266 106.611c-2.623 0-5.226 1.282-7.653 4.422-2.427 3.14-4.24 8.03-4.24 13.617 0 5.588 1.813 10.477 4.24 13.618 2.427 3.14 5.03 4.423 7.653 4.423 2.622 0 5.227-1.283 7.654-4.423 2.427-3.141 4.24-8.03 4.24-13.618 0-5.587-1.813-10.476-4.24-13.617-2.427-3.14-5.032-4.422-7.654-4.422z">
</path>
</g>
<!-- react-empty: 6 -->
</svg>
</th>
<th title="Font Color">T</th>
<th>Font</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Logo</td>
<td><input type="color" value="#444444" data-selector=".header h1" data-property="background" class="cssOverride colorSelector" /></td>
<td><input type="color" value="#FFFFFF" data-selector=".header h1" data-property="color" class="cssOverride colorSelector" /></td>
<td><select class="cssOverride fontFamilySelector" data-selector=".header h1" data-property="font-family">
<option>Arial</option>
<option>Baumans</option>
<option selected>Berkshire Swash</option>
<option>Cinzel Decorative</option>
<option>courier</option>
<option>cursive</option>
<option>fantasy</option>
<option>Lobster</option>
<option>monospace</option>
<option>Orbitron</option>
<option>Poiret One</option>
<option>Rye</option>
<option>sans-serif</option>
<option>serif</option>
<option>Spirax</option>
<option>system-ui</option>
</select></td>
<td><input type="text" value="2em" data-selector=".header h1" data-property="font-size" class="cssOverride fontSize" /></td>
</tr>
<tr>
<td>Nav</td>
<td><input type="color" value="#FFFFFF" data-selector=".menuBar" data-property="background" class="cssOverride colorSelector" /></td>
<td><input type="color" value="#000000" data-selector=".menuBar" data-property="color" class="cssOverride colorSelector" /></td>
<td><select class="cssOverride fontFamilySelector" data-selector=".menuBar" data-property="font-family">
<option>Arial</option>
<option>Baumans</option>
<option>Berkshire Swash</option>
<option>Cinzel Decorative</option>
<option>courier</option>
<option>cursive</option>
<option>fantasy</option>
<option>Lobster</option>
<option>monospace</option>
<option>Orbitron</option>
<option>Poiret One</option>
<option>Rye</option>
<option>sans-serif</option>
<option selected>serif</option>
<option>Spirax</option>
<option>system-ui</option>
</select></td>
<td><input type="text" value="16px" data-selector=".menuBar" data-property="font-size" class="fontSize cssOverride" /></td>
</tr>
<tr>
<td>Content</td>
<td><input type="color" value="#FFFFFF" data-selector="body" data-property="background" class="cssOverride colorSelector" /></td>
<td></td>
</tr>
<tr>
<td>List</td>
<td><input type="color" value="#FFFFFF" data-selector=".card" data-property="background" class="cssOverride colorSelector" /></td>
<td><input type="color" value="#000000" data-selector=".card" data-property="color" class="cssOverride colorSelector" /></td>
<td><select class="cssOverride fontFamilySelector" data-selector=".card" data-property="font-family">
<option>Arial</option>
<option>Baumans</option>
<option>Berkshire Swash</option>
<option>Cinzel Decorative</option>
<option>courier</option>
<option>cursive</option>
<option>fantasy</option>
<option>Lobster</option>
<option>monospace</option>
<option>Orbitron</option>
<option>Poiret One</option>
<option>Rye</option>
<option>sans-serif</option>
<option selected>serif</option>
<option>Spirax</option>
<option>system-ui</option>
</select></td>
<td><input type="text" value="16px" data-selector=".card" data-property="font-size" class="fontSize cssOverride" /></td>
</tr>
<tr>
<td>Menu</td>
<td><input type="color" value="#5151A0" data-selector=".menu" data-property="background" class="cssOverride colorSelector" /></td>
<td><input type="color" value="#FFFFFF" data-selector=".menu" data-property="color" class="cssOverride colorSelector" /></td>
<td><select class="cssOverride fontFamilySelector" data-selector=".menu" data-property="font-family">
<option>Arial</option>
<option>Baumans</option>
<option>Berkshire Swash</option>
<option>Cinzel Decorative</option>
<option>courier</option>
<option>cursive</option>
<option>fantasy</option>
<option>Lobster</option>
<option>monospace</option>
<option>Orbitron</option>
<option>Poiret One</option>
<option>Rye</option>
<option>sans-serif</option>
<option selected>serif</option>
<option>Spirax</option>
<option>system-ui</option>
</select></td>
<td><input type="text" value="16px" data-selector=".menu" data-property="font-size" class="fontSize cssOverride" /></td>
</tr>
</tbody>
</table>
<hr />
<h3>Theme</h3>
<div class="themeBlock">
<a href="" class="loadThemeButton" data-file="dark_theme.json"><img src="theme/dark_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="light_theme.json"><img src="theme/light_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="cyberpunk_theme.json"><img src="theme/cyberpunk_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="kismet_theme.json"><img src="theme/kismet_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="cthulhu_theme.json"><img src="theme/cthulhu_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="hellsing_theme.json"><img src="theme/hellsing_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="rebel_theme.json"><img src="theme/rebel_theme.png" /></a>
<a href="" class="loadThemeButton" data-file="imperial_theme.json"><img src="theme/imperial_theme.png" /></a>
<a href="" class="resetColors" ><img src="theme/default_theme.png" /></a>
</div>
</div>
</div>
<!-- Header -->
<div class="header">
<h1>RPG Chart Maker</h1>
<div class="menuBar">
<div class="javacriptWarning">To use this page javascript will have to be enabled.</div>
<input type="text" name="listName" placeholder="Chart Name" />
<div class="inlineBlock">
<a href="" class="rollButton">Roll!</a><input name="rollCount" type="number" value="10" min="1" max="999999" />
<a href="" class="openMenuButton" data-menu="add" title="Add Menu">Add</a>
</div>
<a href="" class="openMenuButton" data-menu="save" title="Save Menu">Save</a>
<a href="" class="openMenuButton" data-menu="load" title="Load Menu">Load</a>
<a href="" class="shareButton" title="Create url link to this chart">Share</a>
<a href="" class="openMenuButton" data-menu="customize" title="Customize Menu">
<svg data-reactroot="" class="Icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" style="height: 20px; width: 28px;">
<path d="M0 0h512v512H0z" opacity="0">
</path>
<g class="" transform="translate(0,0)" style="touch-action: none;">
<path d="M274.174 41.604c-2.798-.01-5.576.056-8.332.195-96.67 4.85-177.38 86.93-217.842 192-40.462 105.06.914 239.97 90.336 237.48 89.42-2.5 18.09-99.6 65.486-146.12 24.345-23.9 58.852-15.48 94.207-5.64l-17.6-22.98-4.2-5.48c-1.38.06-2.79.102-4.26.09-8.24-.064-17.82-.54-25.25-7.347-13.89-12.73-14.4-31.304-14.08-47.908.32-16.605 1.12-32.375-4.05-42.587l-5.7-11.24 12.595-.37c1.046-.03 2.097-.05 3.15-.053 15.8-.073 32.304 2.776 46.914 9.03 15.584 6.67 29.254 17.44 36.154 33.053 4.18 9.46 3.665 20.116.623 29.768-.636 2.003-1.386 3.972-2.24 5.89l54.9 71.68c6.21-1.05 12.184-2.936 17.844-5.92 46.09-24.313 97.313-77.71 88.27-129.03-14.84-84.23-120.2-154.26-206.94-154.52zm60.79 39.888a34.152 39.804 15.878 0 1 17.913 7.06 34.152 39.804 15.878 0 1 4.666 54.87 34.152 39.804 15.878 0 1-48.72 9.77 34.152 39.804 15.878 0 1-4.665-54.87 34.152 39.804 15.878 0 1 30.805-16.83zm-119.85 4.467a39.307 30.27 71.565 0 1 34.603 35.56 39.307 30.27 71.565 0 1-23.213 41.31 39.307 30.27 71.565 0 1-37.678-35.47 39.307 30.27 71.565 0 1 23.213-41.31 39.307 30.27 71.565 0 1 3.07-.1zm-88.33 79.58a35.75 31.637 35.137 0 1 38.16 33.05 35.75 31.637 35.137 0 1-30.266 33.05 35.75 31.637 35.137 0 1-38.164-33.05 35.75 31.637 35.137 0 1 30.27-33.06zM421.256 170a34.25 40.436 25.644 0 1 20.41 9.578 34.25 40.436 25.644 0 1-2.914 55.51 34.25 40.436 25.644 0 1-50.107 3.966 34.25 40.436 25.644 0 1 2.916-55.51A34.25 40.436 25.644 0 1 421.26 170zm-174.152 27.95c2.982 12.774 1.784 26.197 1.548 38.275-.31 15.893.734 28.32 8.89 35.797 1.19 1.09 8.018 3.092 14.556 3.143 3.268.026 6.44-.22 8.718-.535 1.063-.146 1.874-.306 2.383-.425l13.02-9.362.02-.014c4.46-3.17 8.72-9.37 10.85-16.13 2.13-6.76 2.07-13.81 0-18.49-4.83-10.93-14.84-19.26-27.82-24.81-9.73-4.17-21-6.65-32.17-7.45zm67.455 83.808l-14.37 11L438.97 473.97l14.36-10.998-138.773-181.21zm-200.35 60.16a48.74 40.895 69.57 0 1 46.46 47.85 48.74 40.895 69.57 0 1-36.85 47.852 48.74 40.895 69.57 0 1-46.46-47.852 48.74 40.895 69.57 0 1 36.85-47.85z">
</path>
</g><!-- react-empty: 6 -->
</svg>
</a>
<a href="" class="openMenuButton" data-menu="help" title="Help Options">Help</a>
</div>
</div>
<!-- Page Content -->
<div class="page">
<!--<div class="processing"><div class="animated infinite pulse">Processing...</div></div>-->
<div class="listGroupContainer"></div>
</div>
</body>
</html>