forked from crobi/dnd5e-quickref
-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathindex.html
More file actions
267 lines (254 loc) · 13.7 KB
/
index.html
File metadata and controls
267 lines (254 loc) · 13.7 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>D&D 5e quick reference</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/quickref.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet'
type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
<!-- Javascript -->
<script>
// Force a hard refresh if the cached version of the app is outdated.
// This logic is inlined in the HTML to ensure it runs even if the main JS file is cached.
(function() {
// Increment this version number when you deploy breaking changes or significant updates.
const CURRENT_APP_VERSION = '2.1.4'; // Updated version
window.dndQuickRefAppVersion = CURRENT_APP_VERSION; // Expose version for other scripts
const VERSION_KEY = 'appVersion';
const storedVersion = localStorage.getItem(VERSION_KEY);
if (storedVersion !== CURRENT_APP_VERSION) {
localStorage.setItem(VERSION_KEY, CURRENT_APP_VERSION);
// The 'true' argument forces a hard refresh, clearing the cache for the page.
location.reload(true);
}
})();
</script>
</head>
<body class="page-background">
<div class="dark-mode">
<div class="page fontsize" data-size="fullscreen">
<!-- Movement section -->
<div id="section-movement" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Movement
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
<span class="float-right">limited by movement speed</span>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
You can move at any time during your turn (before, after, or during actions).
</div>
<div class="section-row" id="basic-movement">
</div>
</div>
</div>
<!-- Action section -->
<div id="section-action" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Action
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
<span class="float-right">1/turn</span>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
You can also interact with one object or feature of the
environment for free.
</div>
<div class="section-row" id="basic-actions"></div>
</div>
</div>
<!-- Bonus action section -->
<div id="section-bonus-action" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Bonus action
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
<span class="float-right">max. 1/turn</span>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
You can take a bonus action only when a special ability, spell, or feature
states that you can do something as a bonus action.
</div>
<div class="section-row" id="basic-bonus-actions"></div>
</div>
</div>
<!-- Reaction section -->
<div id="section-reaction" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Reaction
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
<span class="float-right">max. 1/round</span>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
A reaction is an instant response to a trigger of some kind, which
can occur on your turn or on someone else's.
</div>
<div class="section-row" id="basic-reactions"></div>
</div>
</div>
<!-- Condition section -->
<div id="section-condition" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Condition
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
Conditions alter your capabilities in a variety of ways, and can arise as a result of a spell, a
class feature, a monster's attack, or other effect.
</div>
<div class="section-row" id="basic-conditions"></div>
</div>
</div>
<!-- Environmental section -->
<div id="section-environment" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Environmental Effects
<span class="chevron"></span>
<button class="collapse-all-btn">Collapse all items</button>
</div>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
Effects that obscure vision can prove a significant hindrance to most adventuring tasks.
</div>
<div class="section-row" id="environment-obscurance"></div>
<div class="section-row section-subtitle text fontsize">
The presence or absence of light in an environment creates three categories of illumination.
</div>
<div class="section-row" id="environment-light"></div>
<div class="section-row section-subtitle text fontsize">
Some creatures have extraordinary senses that allow them to perceive their environment.
</div>
<div class="section-row" id="environment-vision"></div>
<div class="section-row section-subtitle text fontsize">
Obstacles can provide cover during combat, making a target more difficult to harm.
</div>
<div class="section-row" id="environment-cover"></div>
</div>
</div>
<!-- Settings section -->
<div id="section-settings" class="section-container">
<div class="section-title">
<div class="section-title-content">
<div class="section-title-text">
Settings
<span class="chevron collapsed"></span>
<button class="collapse-all-btn" id="app-version-display" disabled>v0.0.0</button>
</div>
<span class="float-right" id="active-ruleset-label"></span>
</div>
</div>
<div class="section-content">
<div class="section-row section-subtitle text fontsize">
You can change below toggles to adjust settings for this page.
</div>
<div class="section-row" id="settings-items-container">
<div class="item itemsize settings-item" title="Include Optional Rules">
<div class="item-text-container text" id="optional-toggle-item">
<div class="item-title">Include Optional Rules (*)</div>
<div class="item-desc">Show/hide optional official rules.</div>
</div>
<div class="item-toggle"><label class="switch">
<input type="checkbox" id="optional-switch">
<span class="slider round"></span>
</label></div>
</div>
<div class="item itemsize settings-item" title="Include Homebre Rules">
<div class="item-text-container text" id="homebrew-toggle-item">
<div class="item-title">Include Homebrew Rules (**)</div>
<div class="item-desc">Show/hide most common homebrew rules.</div>
</div>
<div class="item-toggle"><label class="switch">
<input type="checkbox" id="homebrew-switch">
<span class="slider round"></span>
</label></div>
</div>
<div class="item itemsize settings-item" title="Darkmode" hidden>
<div class="item-text-container text" id="darkmode-toggle-item">
<div class="item-title">Darkmode</div>
<div class="item-desc">Enable/Disable Darkmode</div>
</div>
<div class="item-toggle"><label class="switch">
<input type="checkbox" id="darkmode-switch">
<span class="slider round"></span>
</label></div>
</div>
<div class="item itemsize settings-item" title="Include 2024 Rules">
<div class="item-text-container text" id="2024rules-toggle-item">
<div class="item-title">Switch to 2024 Rules</div>
<div class="item-desc">Enable D&D 2024 Rules.</div>
</div>
<div class="item-toggle"><label class="switch">
<input type="checkbox" id="rules2024-switch">
<span class="slider round"></span>
</label></div>
</div>
<a href="https://github.com/mfriik/dnd5e-quickref/issues" target="_blank" rel="noopener noreferrer" class="item itemsize settings-item" title="Leave Feedback" id="feedback-link-item">
<div class="item-text-container text">
<div class="item-title">Leave Feedback</div>
<div class="item-desc">Found an issue or have a suggestion? Let me know!</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cookie notice: informs users about cookie usage and provides an accept button -->
<div id="cookie-notice" class="cookie-notice">
<p>This website uses cookies to ensure you get the best experience on our website.</p>
<button id="accept-cookies">Accept</button>
</div>
<!-- Main quickref JavaScript logic: handles dynamic content, toggles, and filtering -->
<script type="text/javascript" src="js/quickref.js" charset="utf-8"></script>
<script>
// Cookie notice logic: shows the notice if not accepted, hides it on accept
document.addEventListener('DOMContentLoaded', function () {
var cookieNotice = document.getElementById('cookie-notice');
var acceptButton = document.getElementById('accept-cookies');
if (!localStorage.getItem('cookiesAccepted')) {
cookieNotice.style.display = 'block';
}
acceptButton.addEventListener('click', function () {
localStorage.setItem('cookiesAccepted', 'true');
cookieNotice.style.display = 'none';
});
});
</script>
</body>
</html>