-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (109 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>NPC Generator</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Poppins"
/>
</head>
<body>
<div class="container">
<!--TOP SECTION-->
<div class="top">
<h1>NPC Generator</h1>
<button class="btn generate">Generate DEVIL 🎲</button>
<button class="btn randomize">Randomize Alignment 🎲</button>
</div>
<div class="container-cards">
<!--LEFT SECTION-->
<div class="section about">
<div class="fullname">
<h2 id="firstName">Amelie</h2>
<h2 id="surname">Warmane</h2>
</div>
<span id="devilimg">placeholder image<br />
<img src="/placeholderimg.jpg" id="deviljpeg">
</span>
<div class="info">
<p class="labels">HUMANITY: <span id="humanity">NULL</span></p>
<p class="labels">MAINTYPE: <span id="mainType">DEVIL</span></p>
<p class="labels">SUBTYPE: <span id="subType">DRAGON</span></p>
<p class="labels">TRAIT: <span id="adjs">CURIOUS</span></p>
<p class="labels">AESTHETIC: <span id="aesth">CASUAL</span></p>
<p class="labels">OCCUPATION: <span id="job">ASTROLOGER</span></p>
</div>
</div>
<!--MIDDLE SECTION-->
<div class="section ability-personality">
<div class="subsection abilities">
<h3>ABILITY SCORES</h3>
<div class="ability-scores-row">
<div class="ability-scores-column">
<p>STR</p>
<p>DEX</p>
<p>CON</p>
<p>INT</p>
<p>WIS</p>
<p>CHA</p>
</div>
<div class="ability-scores-column">
<p id="str">12 (+1)</p>
<p id="dex">13 (+1)</p>
<p id="con">6 (+1)</p>
<p id="int">10 (+1)</p>
<p id="wis">12 (+1)</p>
<p id="cha">16 (+1)</p>
</div>
</div>
</div>
<div class="subsection about">
<h3>ABOUT</h3>
<span id="about">They're definitely not addicted to amateur astronomy.</span>
</div>
<div class="subsection personality">
<h3>PERSONALITY</h3>
• <span id="firstTrait">Is a bit absent-minded. Often gets lost in daydreams and forgets
about the task at hand.</span>
<br /><br />
• <span id="secondTrait">Is loved by family and friends alike. A genuinely good
person.</span>
</div>
</div>
<!--RIGHT SECTION-->
<div class="section morals-alignment">
<div class="subsection alignment">
<h3>ALIGNMENT</h3>
<div class="alignments">
<button id="lawGood" class="btn align">Lawful Good</button>
<button id="lawNeu" class="btn align">Lawful Neutral</button>
<button id="lawEvil" class="btn align">Lawful Evil</button>
<button id="neuGood" class="btn align">Neutral Good</button>
<button id="neu" class="btn align">True Neutral</button>
<button id="neuEvil" class="btn align">Neutral Evil</button>
<button id="chaGood" class="btn align">Chaotic Good</button>
<button id="chaNeu" class="btn align">Chaotic Neutral</button>
<button id="chaEvil" class="btn align">Chaotic Evil</button>
</div>
</div>
<h3 id="alignment">NEUTRAL GOOD</h3>
<div class="subsection morals">
<h3>MORALS</h3>
<span id="firstmoral">"You don't need a reason to help people."</span>
<p id="secondmoral">"To act in anger is to betray your own judgment."</p>
</div>
</div>
</div>
<div class="copyright">
© 2022
<a href="https://twitter.com/thebardIRL">Meghan Bucher</a> /
<a href="https://github.com/bardIRL">bardIRL</a> /
& sugoi :3
</div>
</div>
</body>
<script type="module" src="/scripts/script.js"></script>
</html>