-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (130 loc) · 8.23 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
<!DOCTYPE html>
<html>
<head>
<title>GW2 Name Generator</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.fd6084e7.css">
<script src="https://kit.fontawesome.com/2094f8a559.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main">
<div class="is-fullwidth columns has-background-grey-darker is-fullheight">
<div class="column is-one-fifth"></div>
<div class="column is-three-fifths">
<div class="panel is-success has-background-grey-lighter">
<div class="panel-heading"><img src="https://render.guildwars2.com/file/94ED0C4A49295657095EF5D09CC8C4E6709E6FCA/961368.png" alt=""> Guild Wars 2 Name Generator</div>
<div class="panel-block blocky">
<section class="message has-background-white is-fullwidth">
<div class="message-body">
<div class="notification has-text-weight-bold">
Pick a race!
</div>
<hr>
<div class="race-btn has-text-centered" v-for='(race,i) in races'>
<i class="fa fa-arrow-down is-size-3" v-if='selectedRace==i'></i><br>
<button v-on:click='selectedRace = i;nameList=[]' class="button" v-bind:class='race.class'>
<img v-bind:src="'./img/races/'+race.name+'.png'" /><br>
<div>{{race.name}}</div>
</button>
</div>
</div>
</section>
<section class="message has-background-white is-fullwidth" v-if='selectedRace==-1'>
<div class="message-body is-italic"><i class="fa fa-times is-size-3 has-text-danger"></i> Select a name first!
</div>
</section>
<section class="message has-background-white is-fullwidth" v-if='selectedRace!==-1'>
<div class="message-body">
<div class="notification has-text-weight-bold">
How many {{races[selectedRace].name}} names would you like?
</div>
<hr>
<div class="control">
Number of names: <input type="range" class="range" min='1' max='500' v-model='numNames' style='width:50%'> {{numNames}} name<span v-if='numNames!==1'>s</span>
</div>
</div>
</section>
<section class="message has-background-white is-fullwidth" v-if='selectedRace===2'>
<div class="message-body">
<div class="notification has-text-weight-bold">
Male or female?
</div>
<hr>
<div class="control">
<label for="male-sel">
<i class="fa fa-mars is-size-3 has-text-info"></i> <input type="radio" v-model='selectedGender' id='male-sel'v-bind:value='false'>
Male
</label><br>
<label for="female-sel">
<i class="fa fa-venus is-size-3 has-text-danger"></i> <input type="radio" v-model='selectedGender' id='female-sel'v-bind:value='true'> Female</label>
</div>
</div>
</section>
<section class="message has-background-white is-fullwidth" v-if='selectedRace!==-1'>
<div class="message-body">
<div class="notification has-text-weight-bold">
Get your names!
</div>
<hr>
<div class="is-fullwidth has-text-centered">
<button class="button is-large is-link" v-bind:class='races[selectedRace].class' v-on:click='getNames()'>
<i class="fa fa-check"></i> Get {{races[selectedRace].name }} Names!
</button>
</div>
</div>
</section>
<section class="message has-background-white is-fullwidth" v-if='selectedRace!==-1 && nameList.length'>
<div class="message-body">
<div class="notification has-text-weight-bold">
Your names:
</div>
<hr>
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr v-for='name in nameList'>
<td>
<span v-if='!name.notes.isWord'>
{{name.title?name.title+' ':''}}{{name.name}}
</span>
<span v-if='!!name.notes.isWord'>
<a v-bind:href="'https://en.wiktionary.org/wiki/'+name.name.toLowerCase()" target="_blank">{{name.name}}</a>
</span>
</td>
<td>
<span class="is-fullwidth" v-if='name.notes.isWord' v-bind:title='"This name is a real word in some language! Click the name to check the Wiktionary link."'>
<i class="fa fa-exclamation-triangle"></i>
</span>
<span class="is-fullwidth has-text-info" v-if='name.notes.gender && name.notes.gender=="male"' v-bind:title='"This name is probably a male name."'>
<!-- This name is a {{name.notes.gender}} name! -->
<i class="fa fa-mars"></i>
</span>
<span class="is-fullwidth has-text-danger" v-if='name.notes.gender && name.notes.gender=="female"' v-bind:title='"This name is probably a female name."'>
<!-- This name is a {{name.notes.gender}} name! -->
<i class="fa fa-venus"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
<div id='working' v-if='working'>
<div class='msg'>
<span class="loader"></span> Working!
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='./js/all.min.adef8911.js'></script>
</body>
</html>