Skip to content

Commit 148147c

Browse files
Northrup69Northrup69
authored
Create index.html
1 parent 43a6ab2 commit 148147c

1 file changed

Lines changed: 169 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="keywords" content="dungeons & dragons, dnd, d&d, 5e, dnd5e, 5etools">
6+
<meta name="description" content="A very simple height and weight calculator for Dungeons & Dragons 5th Edition Characters.">
7+
<meta name="author" content="Northrup69">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>Height & Weight Calculator for Dungeons & Dragons 5th Edition Characters</title>
10+
<link rel="stylesheet" href="css/style.css">
11+
<link rel="icon" type="image/x-icon" href="assets/icon.ico">
12+
<link rel="icon" type="image/svg+xml" href="assets/icon.svg">
13+
</head>
14+
<body>
15+
<div class="wrapper">
16+
<div class="card">
17+
<div class="header">
18+
<h1>Height & Weight Calculator</h1>
19+
<h2>for <span>Dungeons & Dragons</span> 5th Edition Characters</h2>
20+
<hr>
21+
</div>
22+
<div class="calculator">
23+
<div class="input">
24+
<div class="heightCalc">
25+
<div class="table">
26+
<div class="tableHead">
27+
<h3>Base Height</h3>
28+
</div>
29+
<div class="tableRow">
30+
<div class="tableCellLeft"><label>Feet</label></div>
31+
<div class="tableCellRight"><input type="number" id="baseHeightFt" value="4" min="0"></div>
32+
</div>
33+
<div class="tableRow">
34+
<div class="tableCellLeft"><label>Inches</label></div>
35+
<div class="tableCellRight"><input type="number" id="baseHeightIn" value="8" min="0" max="11"></div>
36+
</div>
37+
<div class="tableHead">
38+
<h3>Height Modifier</h3>
39+
</div>
40+
<div class="tableRow">
41+
<div class="tableCellLeft"><label>Method</label></div>
42+
<div class="tableCellRight">
43+
<select id="heightMethod">
44+
<option value="manual">Manual Input</option>
45+
<option value="digital">Digital Dice Rolling</option>
46+
</select>
47+
</div>
48+
</div>
49+
<div id="heightManual" class="subsection">
50+
<div class="tableRow">
51+
<div class="tableCellLeft"><label>Rolled</label></div>
52+
<div class="tableCellRight"><input type="number" id="heightManualInput" value="10"></div>
53+
</div>
54+
</div>
55+
<div id="heightDigital" class="subsection" style="display:none;">
56+
<div class="tableRow">
57+
<div class="tableCellLeft"><label>Dice Count</label></div>
58+
<div class="tableCellRight"><input type="number" id="heightDiceCount" value="2" min="1"></div>
59+
</div>
60+
<div class="tableRow">
61+
<div class="tableCellLeft"><label>Dice Type</label></div>
62+
<div class="tableCellRight">
63+
<select id="heightDiceType">
64+
<option value="4">d4</option>
65+
<option value="6">d6</option>
66+
<option value="8">d8</option>
67+
<option value="10" selected>d10</option>
68+
<option value="12">d12</option>
69+
<option value="20">d20</option>
70+
</select>
71+
</div>
72+
</div>
73+
<div class="tableRow">
74+
<div class="tableCellLeft"><button class="btnSecond" id="rollHeight">Roll Dice</button></div>
75+
<div class="tableCellRight"><input type="text" id="heightRollResult" value="10" readonly="readonly"></div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<div class="separator horizontal"></div>
81+
<div class="weightCalc">
82+
<div class="table">
83+
<div class="tableHead">
84+
<h3>Base Weight</h3>
85+
</div>
86+
<div class="tableRow">
87+
<div class="tableCellLeft"><label>Weight (lbs)</label></div>
88+
<div class="tableCellRight"><input type="number" id="baseWeight" value="110"></div>
89+
</div>
90+
<div class="tableHead">
91+
<h3>Weight Modifier</h3>
92+
</div>
93+
<div class="tableRow">
94+
<div class="tableCellLeft"><label>Method</label></div>
95+
<div class="tableCellRight">
96+
<select id="weightMethod">
97+
<option value="manual">Manual Input</option>
98+
<option value="digital">Digital Dice Rolling</option>
99+
</select>
100+
</div>
101+
</div>
102+
<div id="weightManual" class="subsection">
103+
<div class="tableRow">
104+
<div class="tableCellLeft"><label>Rolled</label></div>
105+
<div class="tableCellRight"><input type="number" id="weightManualInput" value="3"></div>
106+
</div>
107+
</div>
108+
<div id="weightDigital" class="subsection" style="display: none;">
109+
<div class="tableRow">
110+
<div class="tableCellLeft"><label>Dice Count</label></div>
111+
<div class="tableCellRight"><input type="number" id="weightDiceCount" value="2" min="1"></div>
112+
</div>
113+
<div class="tableRow">
114+
<div class="tableCellLeft"><label>Dice Type</label></div>
115+
<div class="tableCellRight">
116+
<select id="weightDiceType">
117+
<option value="4" selected="">d4</option>
118+
<option value="6">d6</option>
119+
<option value="8">d8</option>
120+
<option value="10">d10</option>
121+
<option value="12">d12</option>
122+
<option value="20">d20</option>
123+
</select>
124+
</div>
125+
</div>
126+
<div class="tableRow">
127+
<div class="tableCellLeft"><button class="btnSecond" id="rollWeight">Roll Dice</button></div>
128+
<div class="tableCellRight"><input type="text" id="weightRollResult" value="3" readonly="readonly"></div>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
<button class="btnPrime" id="calculate">Calculate</button>
134+
<br><br>
135+
<button class="btnSecond" id="reset">Reset to Defaults</button>
136+
</div>
137+
<div class="separator"></div>
138+
<div class="result" id="result"></div>
139+
</div>
140+
<div class="credits" style="display: none;">
141+
<h4>Credits<a href="#" id="backToCalculator">×</a></h4>
142+
143+
<p><img src="assets/icon.svg" alt="Icon" style="height:32px; vertical-align:middle; margin-right:10px;">This tool was developed by <i><a href="https://github.com/Northrup69" target="_blank">Northrup69</a></i>.</p>
144+
<br><br>
145+
<h5>Used libraries:</h5>
146+
<ul>
147+
<li>HTML</li>
148+
<li>CSS</li>
149+
<li>JavaScript</li>
150+
</ul>
151+
<h5>Fonts:</h5>
152+
<ul>
153+
<li><i>Nodesto Caps Condensed</i> by <i>Solbera</i>, used under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> license.</li>
154+
<li><i>Scaly Sans (Remake)</i> by <i>Solbera</i>, used under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> license.</li>
155+
</ul>
156+
<h5>Background Image:</h5>
157+
<ul>
158+
<li><i><a href="https://www.publicdomainpictures.net/en/view-image.php?image=56151" target="_blank">Old Paper Texture Background</a></i> by <i><a href="https://www.publicdomainpictures.net/en/browse-author.php?a=32495" target="_blank">Karen Arnold</a></i>, used under the <a href="http://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0 Public Domain</a> license.</li>
159+
</ul>
160+
</div>
161+
</div>
162+
</div>
163+
<div class="wrapper">
164+
<footer>&copy;<script>document.write(new Date().getFullYear())</script> | v0.5beta | <a href="#">Credits</a>
165+
</footer>
166+
</div>
167+
<script src="js/script.js" defer></script>
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)