forked from wolfskillobyte/dnd-character-creator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (121 loc) · 5.71 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
<!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">
<title>Let's roll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;500&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;500&display=swap'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="assets/style.css"/>
</head>
<body>
<header class="jumbotron ">
<h1>D&D 5E Character Creator</h1>
<h4>Roll the D20 to generate your new character!</h4>
</header>
<main class="uk-container">
<div id="dice-roll" class="uk-container">
<button id="generate" title="Let's roll" class="uk-button uk-button-text action-buttons">
<br><i class="fas fa-dice-d20"></i>
</button>
<div id="error">
<p id="error-msg"><!-- alert if something goes wrong with API --></p>
</div>
</div>
<div id="character-container" class="container">
<!--class="uk-width-1-1" -->
<div id="name-div">
<h2>
<span id="character-name"> </span>
</h2>
</div>
<div id="new-character">
<img id="character-img" class="uk-animation-fade" src="assets\images\mystery.png">
</div>
<!-- Original class used for other layout -- class="uk-width-1-1" -->
<div id="actions" >
<button id="save-char" title="Save this character" class="uk-button uk-button-text action-buttons">
<i class="far fa-star"></i>
</button>
<!-- <button id="download-file" title="Download file" class="uk-button uk-button-text action-buttons">
<i class="fas fa-file-download"></i>
</button> -->
<button id="share-file" title="Share" class="uk-button uk-button-text action-buttons">
<i class="fa-solid fa-share-from-square"></i>
</button>
<button id="archive" title="Load archive" class="uk-button uk-button-text action-buttons" onclick="toggleDropdown()">
<i class="fa-solid fa-folder-open"></i>
</button>
</div>
<div id="load-character">
<label>Load saved character: </label>
<br>
<select id="saved-chars">
</select>
<button id="get-saved-char">Load</button>
</div>
</div>
<!-- Original class used for other layout -- uk-child-width-1-3 -->
<div id="sub-cards" class="uk-grid uk-child-width-1-2 uk-grid-match hide" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p class="uk-text-muted">Class</p>
<h3 id="char-class" ></h3>
<p id="class-desc"></p>
<br><a class="uk-button-text uk-text-meta" target="_blank" href="https://www.dndbeyond.com/classes">read more</a>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p class="uk-text-muted">Race</p>
<h3 id="char-race">
<!-- -->
</h3>
<p id="race-desc"></p>
<br><a class="uk-button-text uk-text-meta" target="_blank" href="https://www.dndbeyond.com/races">read more</a>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p class="uk-text-muted">Alignment</p>
<h3 id="char-align">
<!-- -->
</h3>
<p id="align-desc"></p>
<br><a class="uk-button-text uk-text-meta" target="_blank" href="https://dnd5e.info/beyond-1st-level/alignment/">read more</a>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p class="uk-text-muted">Looking for more?</p>
<h3 id="char-align">
<!-- -->
</h3>
<p>See further reading for more character details. More features coming soon!</p>
<br><a class="uk-button-text uk-text-meta" target="_blank" href="https://www.dndwiki.io/backgrounds">read more</a>
</div>
</div>
</div>
</main>
<div id="char-save-select">
<h4 id="h4-modal">Save limit reached! Which character would you like to delete?</h4>
<div id="save-buttons">
<button>Error; inner HTML not deleted</button>
</div>
</div>
<footer>
Creators <br>
<a class="uk-button-text uk-text-meta action-buttons" href="https://github.com/RobertAReedy" target="_blank">Robert Reedy</a> //
<a class="uk-button-text uk-text-meta action-buttons" href="https://github.com/ZBreezie" target="_blank">Zachary McCollum</a> //
<a class="uk-button-text uk-text-meta action-buttons" href="https://github.com/wolfskillobyte" target="_blank">wolfskillobyte 🐺</a>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="js\script.js"></script>
</html>