-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
426 lines (350 loc) · 21.1 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
422
423
424
425
426
<!DOCTYPE html>
<!-- saved from url=(0034)https://ronenness.github.io/RPGUI/ -->
<html><script async="false" type="text/javascript" src="chrome-extension://fnjhmkhhmkbjkkabndcnnogagogbneec/in-page.js"></script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="./dist/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./fstylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="./dist/github-dark.css" media="screen">
<link rel="stylesheet" type="text/css" href="./dist/print.css" media="print">
<!-- RPGUI -->
<link rel="stylesheet" type="text/css" href="./dist/rpgui.min.css">
<script src="./dist/rpgui.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Contra PvP NFT Cards</title>
<style>
body, #container
{
background: #222;
padding-top:20px;
padding-bottom:20px;
}
.inner
{
background: #444;
padding-left:20px;
padding-right:20px;
min-width: 740px;
max-width: 900px;
margin: 0 auto;
}
</style></head>
<body>
<div class="rpgui-content rpgui-cursor-default" style="overflow-y:scroll;">
<div id="container">
<div id="main"></div>
<div class="inner rpgui-container framed" style="position:relative">
<header>
<h1 style="font-size:250%">The Contra Game</h1>
<hr class="golden">
<h2 style="font-size:175%">PvP NFT Cards</h2>
</header>
<div class="rpgui-center">
<a href="https://github.com/RonenNess/RPGUI/zipball/master"><button type="button" class="rpgui-button" style="width:32%;"><p>Rules</p></button></a>
<a href="https://github.com/RonenNess/RPGUI/tarball/master"><button type="button" class="rpgui-button" style="width:32%;"><p>Leaderdoard</p></button></a>
<a href="https://github.com/RonenNess/RPGUI"><button type="button" class="rpgui-button" style="width:32%;"><p>Join Discord</p></button></a>
</div>
<br><br>
<p>PvP card game-- where users can plug NFTs on Ethereum from multiple collections and battle each other.
<br><br>
Cards will come empty and with different levels. Players will level them up as they play.
<br><br>
The dapp will read: Collection info| Token ID info | Traits to generate and insert handicaps for HP | Attack | Defense into the playing card.
<br><br>
Want to see more? <a href="https://github.com/RonenNess/RPGUI/blob/master/README.md">Read the manual</a>, Or <br>look at the <a href="https://ronenness.github.io/RPGUI/#examples">examples below</a>.
</p>
<br><br><br><br>
<img src="./dist/skelly.png" style="display:inline-block; margin-top:-80px; width:100px; float:right; right:0px;">
<hr style="clear:both">
<br><br>
<div id="examples">
<h1 style="font-size:150%">Examples</h1>
<p>Below are examples of key elements in RPGUI. Scroll down or choose from the list to view an example:</p>
<ul>
<li><a href="https://ronenness.github.io/RPGUI/#containers">Containers</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#paragraphs">Paragraphs & Text Input</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#buttons">Buttons</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#radio-and-check">Radio & Checkbox</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#drop-and-list">Dropdown & Lists</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#icons">Icons</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#sliders">Sliders</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#progress">Progress bar</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#disabled">Disabled Elements</a></li>
<li><a href="https://ronenness.github.io/RPGUI/#cursors">Cursors</a></li>
</ul>
<div id="containers" class="rpgui-container framed-grey">
<h1>Containers</h1>
<p>This example shows the built-in containers and frames. Containers are just fancy divs used for rpgui elements.</p>
<hr>
<div class="rpgui-container framed" style="position:relative; width:32%; height:300px; display:inline-block">
<p>class:<br>rpgui-container framed</p>
</div>
<div class="rpgui-container framed-golden" style="position:relative; width:32%; height:300px; display:inline-block">
<p>class:<br>rpgui-container framed-golden</p>
</div>
<div class="rpgui-container framed-golden-2" style="position:relative; width:32%; height:300px; display:inline-block">
<p>class:<br>rpgui-container framed-golden-2</p>
</div>
<br><br>
<div class="rpgui-container framed-grey" style="position:relative; width:100%; height:200px; display:inline-block">
<p>class:<br>rpgui-container framed-grey</p>
</div>
</div>
<div id="paragraphs" class="rpgui-container framed-grey">
<h1>Paragraphs & Text Input</h1>
<p>This example shows the basic paragraphs and headers in RPGUI.</p>
<hr>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p>Regular paragraph (p)</p>
<span>Span</span>
<label>Label</label>
<a>Link (a)</a>
<br>
<br>
<label>Text input:</label>
<input placeholder="first name">
<br>
<br>
<label>Textarea:</label>
<textarea placeholder="write your story here..."></textarea>
</div>
<div id="buttons" class="rpgui-container framed-grey">
<h1>Buttons</h1>
<p>This example shows the basic buttons.</p>
<hr>
<div class="rpgui-center" style="float:left; width: 49%">
<button type="button" class="rpgui-button"><p>Regular button</p></button>
<button type="button" class="rpgui-button down" active=""><p>Button pressed</p></button>
<button type="button" class="rpgui-button hover" active=""><p>Button hover</p></button>
</div>
<div class="rpgui-center" style="float:right; width: 49%">
<button type="button" class="rpgui-button golden"><p>Golden button</p></button>
<button type="button" class="rpgui-button golden down"><p>Golden down</p></button>
<button type="button" class="rpgui-button golden hover"><p>Golden hover</p></button>
</div>
<div style="clear:both"></div>
</div>
<div id="radio-and-check" class="rpgui-container framed-grey">
<h1>Radio and Check boxes</h1>
<p>This example shows radio buttons and check boxes.</p>
<hr>
<div style="float:left; width: 24.5%">
<input class="rpgui-checkbox" type="checkbox" checked="" data-rpguitype="checkbox"><label>Checkbox 1.</label>
<input class="rpgui-checkbox" type="checkbox" data-rpguitype="checkbox"><label>Checkbox 2.</label>
<input class="rpgui-checkbox" type="checkbox" data-rpguitype="checkbox"><label>Checkbox 3.</label>
</div>
<div style="float:left; width: 24.5%">
<input class="rpgui-checkbox golden" type="checkbox" checked="" data-rpguitype="checkbox"><label>Checkbox 1.</label>
<input class="rpgui-checkbox golden" type="checkbox" data-rpguitype="checkbox"><label>Checkbox 2.</label>
<input class="rpgui-checkbox golden" type="checkbox" data-rpguitype="checkbox"><label>Checkbox 3.</label>
</div>
<div style="float:left; width: 24.5%">
<input class="rpgui-radio" name="radio" value="1" checked="" type="radio" data-rpguitype="radio"><label>Radio 1</label>
<input class="rpgui-radio" name="radio" value="2" type="radio" data-rpguitype="radio"><label>Radio 2</label>
<input class="rpgui-radio" name="radio" value="3" type="radio" data-rpguitype="radio"><label>Radio 3</label>
</div>
<div style="float:left; width: 24.5%">
<input class="rpgui-radio golden" name="radio-golden" value="1" checked="" type="radio" data-rpguitype="radio"><label>Radio 1</label>
<input class="rpgui-radio golden" name="radio-golden" value="2" type="radio" data-rpguitype="radio"><label>Radio 2</label>
<input class="rpgui-radio golden" name="radio-golden" value="3" type="radio" data-rpguitype="radio"><label>Radio 3</label>
</div>
<div style="clear:both"></div>
</div>
<div id="drop-and-list" class="rpgui-container framed-grey">
<h1>Dropdown & Lists</h1>
<p>This example shows the dropdown (aka combobox) and the list widgets. These elements are made from simple "select" with "options" and rpgui class.</p>
<hr>
<div style="float:left; width: 40%">
<p>Dropdown:</p>
<select class="rpgui-dropdown" data-rpguitype="dropdown" style="display: none;">
<option value="Warrior" selected="">Warrior</option>
<option value="Mage">Mage</option>
<option value="Rogue">Rogue</option>
<option value="Ranger">Ranger</option>
</select><p class=" rpgui-dropdown-imp rpgui-dropdown-imp-header"><label>▼</label> Warrior</p><ul class=" rpgui-dropdown-imp" style="position: absolute; width: 309.188px; display: none;"><li>Warrior</li><li>Mage</li><li>Rogue</li><li>Ranger</li></ul>
</div>
<div style="float:right; width: 40%">
<p>List:</p>
<select class="rpgui-list" id="background-select" size="5" data-rpguitype="list" style="display: none;">
<option value="Blacksmith">Blacksmith</option>
<option value="Merchant">Merchant</option>
<option value="City Guard">City Guard</option>
<option value="Alchemist">Alchemist</option>
<option value="Explorer">Explorer</option>
<option value="Thug">Thug</option>
<option value="Mercenary">Mercenary</option>
<option value="Royalty">Royalty</option>
<option value="Gladiator">Gladiator</option>
</select><ul id="background-select-rpgui-list" class=" rpgui-list-imp" style="height: 140px;"><li data-rpguivalue="Blacksmith" class="">Blacksmith</li><li data-rpguivalue="Merchant" class="">Merchant</li><li data-rpguivalue="City Guard" class="">City Guard</li><li data-rpguivalue="Alchemist" class="">Alchemist</li><li data-rpguivalue="Explorer" class="">Explorer</li><li data-rpguivalue="Thug" class="">Thug</li><li data-rpguivalue="Mercenary" class="">Mercenary</li><li data-rpguivalue="Royalty" class="">Royalty</li><li data-rpguivalue="Gladiator" class="">Gladiator</li></ul>
</div>
<div style="clear:both"></div>
</div>
<div id="icons" class="rpgui-container rpgui-center framed-grey">
<h1>Icons</h1>
<p>This example shows the built-in icons. These can be easily extended (<a href="http://opengameart.org/users/ouren" target="_blank">skeletons</a> not included).</p>
<hr>
<img src="./dist/skelly2.png" style="display:inline-block; width:160px;bottom: 0;left: 0px;position: absolute;">
<img src="./dist/skelly2.png" style="display:inline-block; width:160px;bottom: 0;right: 0px;position: absolute;transform: scaleX(-1);">
<div class="rpgui-icon sword"></div>
<div class="rpgui-icon shield"></div>
<div class="rpgui-icon exclamation"></div>
<br><br>
<div class="rpgui-icon potion-red"></div>
<div class="rpgui-icon potion-green"></div>
<div class="rpgui-icon potion-blue"></div>
<br><br>
<div class="rpgui-icon weapon-slot"></div>
<div class="rpgui-icon shield-slot"></div>
<div class="rpgui-icon armor-slot"></div>
<br><br>
<div class="rpgui-icon helmet-slot"></div>
<div class="rpgui-icon ring-slot"></div>
<div class="rpgui-icon potion-slot"></div>
<br><br>
<div class="rpgui-icon magic-slot"></div>
<div class="rpgui-icon shoes-slot"></div>
<div class="rpgui-icon empty-slot"></div>
</div>
<div id="sliders" class="rpgui-container rpgui-center framed-grey">
<h1>Sliders</h1>
<p>This example shows the sliders class, which replaces the "range" input element.</p>
<hr>
<div style="width: 60%; margin-left: 20%">
<label>Slider:</label>
<input class="rpgui-slider" type="range" min="0" max="10" value="5" style="width: 100%; display: none;" data-rpguitype="slider"><div class=" rpgui-slider-container" style="width: 485px;"><div class=" rpgui-slider-track"></div><div class=" rpgui-slider-left-edge"></div><div class=" rpgui-slider-right-edge"></div><div class=" rpgui-slider-thumb" style="left: 232.5px;"></div></div>
<br><br>
<label>Golden slider:</label>
<input class="rpgui-slider golden" type="range" min="0" max="10" value="5" style="width: 100%; display: none;" data-rpguitype="slider"><div class=" rpgui-slider-container golden" style="width: 485px;"><div class=" rpgui-slider-track golden"></div><div class=" rpgui-slider-left-edge golden"></div><div class=" rpgui-slider-right-edge golden"></div><div class=" rpgui-slider-thumb golden" style="left: 227.5px;"></div></div>
</div>
</div>
<div id="progress" class="rpgui-container framed-grey">
<h1>Progress Bars</h1>
<p>This example shows the RPGUI progress bar class.</p>
<hr>
<div style="width: 40%; margin-left: 30%">
<label>Health:</label>
<div id="hp-bar" data-value="0.4" class="rpgui-progress red" data-rpguitype="progress"><div class=" rpgui-progress-track"><div class=" rpgui-progress-fill red" style="left: 0px; width: 40%;"></div></div><div class=" rpgui-progress-left-edge"></div><div class=" rpgui-progress-right-edge"></div></div>
<label>Mana:</label>
<div id="mana-bar" data-value="0.8" class="rpgui-progress blue" data-rpguitype="progress"><div class=" rpgui-progress-track"><div class=" rpgui-progress-fill blue" style="left: 0px; width: 80%;"></div></div><div class=" rpgui-progress-left-edge"></div><div class=" rpgui-progress-right-edge"></div></div>
<label>Stamina:</label>
<div id="stamina-bar" data-value="0.2" class="rpgui-progress green" data-rpguitype="progress"><div class=" rpgui-progress-track"><div class=" rpgui-progress-fill green" style="left: 0px; width: 20%;"></div></div><div class=" rpgui-progress-left-edge"></div><div class=" rpgui-progress-right-edge"></div></div>
<label>Experience:</label>
<div id="stamina-bar" data-value="0.5" class="rpgui-progress" data-rpguitype="progress"><div class=" rpgui-progress-track"><div class=" rpgui-progress-fill" style="left: 0px; width: 50%;"></div></div><div class=" rpgui-progress-left-edge"></div><div class=" rpgui-progress-right-edge"></div></div>
</div>
</div>
<div id="disabled" class="rpgui-container framed-grey">
<h1>Disabled Elements</h1>
<p>All RPGUI elements can be disabled using the "disable" attribute. Here's an example of disabled RPGUI elements.</p>
<hr>
<!-- simple inputs -->
<div style="width:42%; float:left;">
<h1>Text Input</h1>
<label>Your hero name:</label>
<input disabled="" type="text" name="FirstName" value="Bob" placeholder="Hero name">
<br><br>
<label>Your hero last name:</label>
<input disabled="" type="text" name="FirstName" value="The Destroyer" placeholder="Hero last name">
<br><br>
<label>Your hero bio:</label>
<textarea disabled="" rows="3" cols="50">Bob The Destroyer likes to destroy stuff.</textarea>
<h1>Sliders:</h1>
<input disabled="" class="rpgui-slider" type="range" min="0" max="10" value="8" style="width: 100%; display: none;" data-rpguitype="slider"><div class=" rpgui-slider-container" style="width: 339px;"><div class=" rpgui-slider-track"></div><div class=" rpgui-slider-left-edge"></div><div class=" rpgui-slider-right-edge"></div><div class=" rpgui-slider-thumb" style="left: 249.2px;"></div></div>
<p>Golden slider:</p>
<input disabled="" class="rpgui-slider golden" type="range" min="1" max="5" value="3" style="width: 100%; display: none;" data-rpguitype="slider"><div class=" rpgui-slider-container golden" style="width: 339px;"><div class=" rpgui-slider-track golden"></div><div class=" rpgui-slider-left-edge golden"></div><div class=" rpgui-slider-right-edge golden"></div><div class=" rpgui-slider-thumb golden" style="left: 154.5px;"></div></div>
<h1>Icons</h1>
<div class="rpgui-center">
<div class="rpgui-icon rpgui-disabled sword"></div>
<div class="rpgui-icon rpgui-disabled shield"></div>
<div class="rpgui-icon rpgui-disabled exclamation"></div>
<br><br>
<div class="rpgui-icon rpgui-disabled potion-red"></div>
<div class="rpgui-icon rpgui-disabled potion-green"></div>
<div class="rpgui-icon rpgui-disabled potion-blue"></div>
<br><br>
<div class="rpgui-icon rpgui-disabled weapon-slot"></div>
<div class="rpgui-icon rpgui-disabled shield-slot"></div>
<div class="rpgui-icon rpgui-disabled armor-slot"></div>
<br><br>
<div class="rpgui-icon rpgui-disabled helmet-slot"></div>
<div class="rpgui-icon rpgui-disabled ring-slot"></div>
<div class="rpgui-icon rpgui-disabled potion-slot"></div>
<br><br>
<div class="rpgui-icon rpgui-disabled magic-slot"></div>
<div class="rpgui-icon rpgui-disabled shoes-slot"></div>
<div class="rpgui-icon rpgui-disabled empty-slot"></div>
<br><br>
</div>
</div>
<div style="width:42%; float:right;">
<h1>Buttons</h1>
<button disabled="" class="rpgui-button" type="button" style="width:100%"><p>Button</p></button>
<br><br>
<button disabled="" class="rpgui-button golden" type="button" style="width:100%"><p>Gold Button</p></button>
<br><br>
<h1>Radio/Check</h1>
<br>
<div>
<input disabled="" class="rpgui-radio" checked="" type="radio" name="sex" value="male" data-rpguitype="radio"><label>Male</label>
<br>
<input disabled="" class="rpgui-radio" type="radio" name="sex" value="female" data-rpguitype="radio"><label>Female</label>
<br>
</div>
<div>
<input disabled="" class="rpgui-radio golden" checked="" type="radio" name="sex2" value="male" data-rpguitype="radio"><label>Male</label>
<br>
<input disabled="" class="rpgui-radio golden" type="radio" name="sex2" value="female" data-rpguitype="radio"><label>Female</label>
<br>
</div>
<br>
<input disabled="" class="rpgui-checkbox" type="checkbox" checked="" data-rpguitype="checkbox"><label>Checkbox 1.</label>
<br>
<input disabled="" class="rpgui-checkbox" type="checkbox" data-rpguitype="checkbox"><label>Checkbox 2.</label>
<h1>Dropdown</h1>
<select disabled="" class="rpgui-dropdown" data-rpguitype="dropdown" style="display: none;">
<option value="Warrior" selected="">Warrior</option>
<option value="Mage">Mage</option>
<option value="Rogue">Rogue</option>
<option value="Ranger">Ranger</option>
</select><p class=" rpgui-dropdown-imp rpgui-dropdown-imp-header"><label>▼</label> Warrior</p><ul class=" rpgui-dropdown-imp" style="position: absolute; width: 325.359px; display: none;"><li>Warrior</li><li>Mage</li><li>Rogue</li><li>Ranger</li></ul>
<br>
<h1>List:</h1>
<select disabled="" class="rpgui-list" id="background-select" size="4" data-rpguitype="list" style="display: none;">
<option value="1">Blacksmith</option>
<option value="2">Merchant</option>
<option value="3 Guard">City Guard</option>
<option value="4">Alchemist</option>
</select><ul id="background-select-rpgui-list" class=" rpgui-list-imp" style="height: 112px;"><li data-rpguivalue="1" class="">Blacksmith</li><li data-rpguivalue="2" class="">Merchant</li><li data-rpguivalue="3 Guard" class="">City Guard</li><li data-rpguivalue="4" class="">Alchemist</li></ul>
<h1>Progress bar:</h1>
<div id="hp-bar" data-value="0.4" class="rpgui-progress rpgui-disabled red" data-rpguitype="progress"><div class=" rpgui-progress-track"><div class=" rpgui-progress-fill red" style="left: 0px; width: 40%;"></div></div><div class=" rpgui-progress-left-edge"></div><div class=" rpgui-progress-right-edge"></div></div>
</div>
<div style="clear:both"></div>
</div>
<div id="cursors" class="rpgui-container framed-grey rpgui-center">
<h1>Cursors</h1>
<p>This example shows the basic cursors.</p>
<hr>
<button type="button" class="rpgui-button rpgui-cursor-default" style="width:30%"><p>Default</p></button>
<button type="button" class="rpgui-button rpgui-cursor-point" style="width:30%"><p>Pointer</p></button>
<button type="button" class="rpgui-button rpgui-cursor-select" style="width:30%"><p>Text Select</p></button>
<button type="button" class="rpgui-button rpgui-cursor-grab-open" style="width:30%"><p>Grab Open</p></button>
<button type="button" class="rpgui-button rpgui-cursor-grab-close" style="width:30%"><p>Grab Close</p></button>
</div>
<br><br><br><br>
<div class="rpgui-center">
<h1 style="font-size:150%">That's it, for now!</h1>
<p>Check out the <a href="https://github.com/RonenNess/RPGUI">RPGUI git</a> for more info!</p>
<br><br>
<a href="https://ronenness.github.io/RPGUI/#main">- Back to Top -</a>
<br><br>
<img src="./dist/skelly-rip.png" style="position:absolute; display:inline-block; width:70px; right:0px; bottom:0px">
<img src="./dist/skelly-rip.png" style="position:absolute; display:inline-block; width:70px; left:0px; bottom:0px; transform: scaleX(-1);">
</div>
</div>
</div>
</div>
</div>
<script src="chrome-extension://ldinpeekobnhjjdofggfgjlcehhmanlj/inpage.js" id="stacks-wallet-provider"></script></body></html>