-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (181 loc) · 10 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<script async src="script.js"></script>
<title>Currency Converter</title>
</head>
<body>
<div id="div-bg"></div>
<div id="div-zero">
<h1 class="h1-zero" id="h1-zero-a">Welcome to The Tipsy Gauntlet Currency Converter!</h1>
<h1 class="h1-zero" id="h1-zero-b">The Ultimate Currency Conversion Engine</h2>
<h2 id="h2-zero">A seamless experience for all of your currency conversion needs</h3>
<input id="button-zero" type="button" value="Get Started">
</div>
<div id="div-one">
<h1 class="intro-one h1-all" id="h1-one">Time to Prepare!</h1>
<p class="intro-one" id="p-one-a">As you approach The Tipsy Gauntlet, the sounds of violence, drunken cursing and off-tune instruments fill the air. You ready your equipment:</p>
<div id="div-one-pick">
<h2 id="h2-one-pick">Pick Your Equipment</h2>
<div id="div-one-wep">
<h3 id="h3-one-wep">Weapons: Pick One</h2>
<p id="p-one-wep">Note: D means dice</p>
<select class="select-one-all" id="select-one-wep">
<option disabled>Select Your Option</option>
<option value="1" id="sword">Greatsword (D12, -2 Defence)</option>
<option value="2" id="axe">Battleaxe (D10, -1 Defence)</option>
<option value="3" id="staff">Quarterstaff (D8, -0 Defence)</option>
<option value="4" id="dagger">Twin Daggers (D6, +1 Defence)</option>
<option value="5" id="fist">Bare Hands (D4, +2 Defence)</option>
</select>
</div>
<div id="div-one-misc">
<h3 id="h3-one-misc">Miscellaneous: Pick One</h2>
<select class="select-one-all text-one-all" id="select-one-misc">
<option disabled>Select Your Option</option>
<option value="6" id="dog">A Neurotic Chihuahua</option>
<option value="7" id="potion">Health Potion</option>
<option value="8" id="firebomb">Firebomb</option>
<option value="9" id="pocsand">Pocket Sand</option>
<option value="10" id="bean">Magic Beans</option>
</select>
</div>
</div>
<div id="div-button-one">
<input type="button" id="button-one-preview" value="Preview">
<input type="button" id="button-one-ready" value="I'm Ready">
</div>
<div id="div-one-prof">
<h2 id="h2-one-prof">Your Character</h2>
<ul id="ul-one-prof">
<li id="div-one-name">
<label for="myname">Your Name</label>
<input type="text" class="text-one-all" id="myname" name="myname">
</li>
<li id="div-one-race">
<label for="myrace">Your Race</label>
<select class="select-one-all text-one-all" id="select-one-race">
<option disabled>Select Your Option</option>
<option value="1" id="human">Human</option>
<option value="2" id="elf">Elf</option>
<option value="2" id="dwarf">Dwarf</option>
<option value="2" id="halforc">Half-orc</option>
<option value="2" id="halfling">Halfling</option>
<option value="2" id="gnome">Gnome</option>
<option value="2" id="dragonborn">Dragonborn</option>
<option value="2" id="halfelf">Half-elf</option>
</select>
</li>
</ul>
<div id="div-one-attr">
<h3 class="h3-all" id="h3-one-attr">Attributes</h3>
<ul id="ul-one-attr">
<li>
<label for="mywep">Weapon</label>
<input type="text" class="text-one-all" id="mywep" name="mywep">
</li>
<li>
<label for="mydmg">Damage</label>
<input type="text" class="text-one-all" id="mydmg" name="mydmg">
</li>
<li>
<label for="mydef">Defense</label>
<input type="text" class="text-one-all" id="mydef" name="mydef">
</li>
<li>
<label for="myhealth">Health</label>
<input type="text" class="text-one-all" id="myhealth" name="myhealth">
</li>
</ul>
</div>
<div id="div-one-inv">
<h3 class="h3-all" id="h3-one-inv">Inventory</h3>
<ul id="ul-one-inv"></ul>
</div>
</div>
</div>
<div id="div-two">
<h1 class="intro-two h1-all" id="h1-two">Welcome into The Tipsy Gauntlet!</h1>
<p class="intro-two" id="p-two-a">As you push open the door, you are confronted with a heaving mass of bodies, all in the process of beating the absolute stuffing out of each other. Broken furniture fly overhead as the band plays on with comfortable indifference in the corner. They certainly don't get paid enough for to care.</p>
<p class="intro-two" id="p-two-b">You start pushing your way towards the bar, but mere physical contact has offended the fighter near you. They turn, foaming at the mouth, and swings at you!</p>
<div class="button-two-buffer"></div>
<input type="button" id="button-two-begin" value="Begin Battle">
<div class="button-two-buffer"></div>
<div id="div-two-fighter">
<h2 id="h2-two-fighter">Enemy</h3>
<ul id="ul-two-fighter-a">
<li>
<label for="fightname">Name:</label>
<input type="text" class="text-two-all" id="fightname" name="fightname">
</li>
<li>
<label for="fightrace">Race:</label>
<input type="text" class="text-two-all" id="fightrace" name="fightrace">
</li>
</ul>
<h3 class="h3-all" id="h3-fighter-attr">Attributes</h3>
<ul id="ul-two-fighter-b">
<li>
<label for="fightwep">Weapon:</label>
<input type="text" class="text-two-all" id="fightwep" name="fightwep">
</li>
<li>
<label for="fightdmg">Damage:</label>
<input type="text" class="text-two-all" id="fightdmg" name="fightdmg">
</li>
<li>
<label for="fightdef">Defence:</label>
<input type="text" class="text-two-all" id="fightdef" name="fightdef">
</li>
<li>
<label for="fighthealth">Health:</label>
<input type="text" class="text-two-all" id="fighthealth" name="fighthealth">
</li>
</ul>
<h3 class="h3-all" id="h3-fighter-stat">Status Effects</h3>
<ul id="ul-two-fighter-c"></ul>
</div>
<ol id="ol-two-combat"></ol>
</div>
<div id="div-three">
<h1 class="h1-all" id="h1-three">Victory is Yours!</h1>
<p id="p-three-victory">Pushing aside your combatant, you muster what is left of your strength and throw yourself towards the bar. The barkeeper watches impassively as you desperately hang onto the counter against the maelstrom of brawlers all around you.</p>
<p id="p-three-convert">You start dumping out your valuables as fast as you can onto the counter. "How much can I convert this to?" You gasp out while fending away the bawdy drunks with your flailing arms and legs. The barkeeper squints at the little pile, then offers you this:</p>
<div id="div-three-convert">
<div id="div-three-sgd">
<label class="label-three" for="text-three-sgd">Convert Singapore Dollars: </label>
<input id="text-three-sgd" min="1" type="number">
<input class="button-three" id="button-three-sgd" type="button" value="Convert">
</div>
<div id="div-three-eur">
<label class="label-three" for="text-three-eur">Convert Euros: </label>
<input id="text-three-eur" min="1" type="number">
<input class="button-three" id="button-three-eur" type="button" value="Convert">
</div>
<div id="div-three-usd">
<label class="label-three" for="text-three-usd">Convert US Dollars: </label>
<input id="text-three-usd" min="1" type="number">
<input class="button-three" id="button-three-usd" type="button" value="Convert">
</div>
</div>
<div id="div-three-output">
<p>Accurate as of 28 October 2021</p>
<p id="p-three-sgd"></p>
<p id="p-three-eur"></p>
<p id="p-three-usd"></p>
</div>
<input type="button" class="button-three" id="button-three-try" value="Try Again!">
</div>
<div id="div-four">
<h1 class="h1-all" id="h1-four">You Have Been Defeated!</h1>
<p id="p-four-defeat">That final attack was too much for your delicate sensibilities and you fall, swooning, upon the ground. Rough hands quickly empty your pockets and divested you of your clothes. The next morning, you woke up in the back alley with nothing to your name but... Someone else's underwear? Nasty.</p>
<div class="button-four-buffer"></div>
<input type="button" id="button-four-try" value="Try Again!">
<div class="button-four-buffer"></div>
</div>
</body>
</html>