-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (137 loc) · 6.31 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Character Generator</title>
<link rel="icon" href="img/favicon.gif" type="image/gif" size="32x32">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!--Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="container"></div>
<header class="header">
<h2 id="title">Character Generator</h2>
</header>
<main id="main">
</div>
<section class="section" id="basic">
<h4 id="step-title">Step 1: Basic Info</h4>
<table id="step">
<tr>
<th>Name:</th>
<td>
<input id="name" class="char_name" placeholder="Name" size="30"></input>
</td>
<td><button type ="button" id="name-button" class="btn">Randomize</button></td>
</tr>
<tr>
<th>Gender:</th>
<td>
<select id="gender" name="Gender">
<option value="Random">Randomize</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Fabulous">Fabulous</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
</table>
</section>
<section class="section" id="physical">
<h4 id="step-title">Step 2: Physical Traits</h4>
<table id="step">
<tr>
<th>Eyes' Color:</th>
<td>
<select id="eyes" name="Eyes">
<option value="Random">Randomize</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<th>Hair Color:</th>
<td>
<select id="hair">
<option value="Random">Randomize</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<th>Skin Color:</th>
<td>
<select id="skin">
<option value="Random">Randomize</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
</select>
</td>
</tr>
</table>
</section>
<section class="section" id="personality">
<h4 id="step-title">Step 3: Personality Traits</h4>
<table id="step">
<tr>
<th>Main Trait:</th>
<td>
<select id="m_trait">
<option value="Random">Randomize</option>
<option value="Nice">Nice</option>
<option value="Arrogant">Arrogant</option>
<option value="Shy">Shy</option>
<option value="Childish">Childish</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<th>Secret Trait:</th>
<td>
<select id="s_trait">
<option value="Random">Randomize</option>
<option value="Nice">Nice</option>
<option value="Arrogant">Arrogant</option>
<option value="Shy">Shy</option>
<option value="Childish">Childish</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
</table>
</section>
<section class="section" id="finished">
<h4 id="step-title">You finished!</h4>
</section>
<section class="section" id="step-buttons">
<button type ="button" class="btn" id="previous">Previous Step</button>
<button type ="button" class="btn" id="next">Next Step</button>
</section>
</main>
<aside class="aside">
<h4><center> - Traits chosen - </center></h4>
<table id="steps-done"></table>
</aside>
<footer class="footer">
<span> Made with <i class="fa fa-heart"></i> by Joel Alarcón - Barcelona, 2018 </span>
</footer>
</body>
</html>