-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
436 lines (429 loc) · 39.9 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
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ark Nova Cards Manager</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="./dist/style.css">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<meta name="description" content="Simple app to managing & filtering cards available in Ark Nova boardgame">
<link rel="shortcut icon" href="./dist/images/general/favicon.png">
</head>
<body>
<div class="container">
<div class="container__outer container__outer--sidebar">
<div class="container__inner container__inner--sidebar">
<header class="header">
<a href="https://arknova.cards" class="header__link">
arknova<span>cards</span>
</a>
<div class="header__close"></div>
</header>
<form action="#" class="filter filter--sidebar">
<fieldset class="filter__category filter__category--type">
<legend class="filter__type">Type:</legend>
<label class="filter__item" data-tooltip="Bird" for="Bird">
<input class="checkbox filter__checkbox" type="checkbox" id="Bird" name="type" value="1" data-id="26">
<span class="filter__label icon icon--bird icon--type_1">
<span class="filter__stat" data-type_1></span>
</span>
</label>
<label class="filter__item" data-tooltip="Herbivore" for="Herbivore">
<input class="checkbox filter__checkbox" type="checkbox" id="Herbivore" name="type" value="2" data-id="79">
<span class="filter__label icon icon--herbivore icon--type_2">
<span class="filter__stat" data-type_2></span>
</span>
</label>
<label class="filter__item" data-tooltip="Predator" for="Predator">
<input class="checkbox filter__checkbox" type="checkbox" id="Predator" name="type" value="3" data-id="54">
<span class="filter__label icon icon--predator icon--type_3">
<span class="filter__stat" data-type_3></span>
</span>
</label>
<label class="filter__item" data-tooltip="Reptile" for="Reptile">
<input class="checkbox filter__checkbox" type="checkbox" id="Reptile" name="type" value="4" data-id="28">
<span class="filter__label icon icon--reptile icon--type_4">
<span class="filter__stat" data-type_4></span>
</span>
</label>
<label class="filter__item" data-tooltip="Primate" for="Primate">
<input class="checkbox filter__checkbox" type="checkbox" id="Primate" name="type" value="5" data-id="13">
<span class="filter__label icon icon--primate icon--type_5">
<span class="filter__stat" data-type_5></span>
</span>
</label>
<label class="filter__item" data-tooltip="Sea" for="Sea">
<input class="checkbox filter__checkbox" type="checkbox" id="Sea" name="type" value="6" data-id="58">
<span class="filter__label icon icon--sea icon--type_6">
<span class="filter__stat" data-type_6></span>
</span>
</label>
</fieldset>
<fieldset class="filter__category filter__category--area">
<legend class="filter__type">Area:</legend>
<label class="filter__item" data-tooltip="Africa" for="Africa">
<input class="checkbox filter__checkbox" type="checkbox" id="Africa" name="area" value="1" data-id="29">
<span class="filter__label icon icon--africa icon--area_1">
<span class="filter__stat" data-area_1></span>
</span>
</label>
<label class="filter__item" data-tooltip="Europe" for="Europe">
<input class="checkbox filter__checkbox" type="checkbox" id="Europe" name="area" value="2" data-id="78">
<span class="filter__label icon icon--europe icon--area_2">
<span class="filter__stat" data-area_2></span>
</span>
</label>
<label class="filter__item" data-tooltip="Asia" for="Asia">
<input class="checkbox filter__checkbox" type="checkbox" id="Asia" name="area" value="3" data-id="86">
<span class="filter__label icon icon--asia icon--area_3">
<span class="filter__stat" data-area_3></span>
</span>
</label>
<label class="filter__item" data-tooltip="Australia" for="Australia">
<input class="checkbox filter__checkbox" type="checkbox" id="Australia" name="area" value="4" data-id="41">
<span class="filter__label icon icon--australia icon--area_4">
<span class="filter__stat" data-area_4></span>
</span>
</label>
<label class="filter__item" data-tooltip="Americas" for="Americas">
<input class="checkbox filter__checkbox" type="checkbox" id="Americas" name="area" value="5" data-id="69">
<span class="filter__label icon icon--americas icon--area_5">
<span class="filter__stat" data-area_5></span>
</span>
</label>
</fieldset>
<fieldset class="filter__category filter__category--size">
<legend class="filter__type">Size:</legend>
<label class="filter__item" data-tooltip="Size: 1" for="Size_1">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_1" name="size" value="1">
<span class="filter__label icon icon--size_1">
<span class="filter__stat" data-size_1></span>
</span>
</label>
<label class="filter__item" data-tooltip="Size: 2" for="Size_2">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_2" name="size" value="2">
<span class="filter__label icon icon--size_2">
<span class="filter__stat" data-size_2></span>
</span>
</label>
<label class="filter__item" data-tooltip="Size: 3" for="Size_3">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_3" name="size" value="3">
<span class="filter__label icon icon--size_3">
<span class="filter__stat" data-size_3></span>
</span>
</label>
<label class="filter__item" data-tooltip="Size: 4" for="Size_4">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_4" name="size" value="4">
<span class="filter__label icon icon--size_4">
<span class="filter__stat" data-size_4></span>
</span>
</label>
<label class="filter__item" data-tooltip="Size: 5" for="Size_5">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_5" name="size" value="5">
<span class="filter__label icon icon--size_5">
<span class="filter__stat" data-size_5></span>
</span>
</label>
</fieldset>
<fieldset class="filter__category filter__category--special">
<legend class="filter__type">Special:</legend>
<label class="filter__item" data-tooltip="Small" for="Size_small">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_small" name="small" value="1">
<span class="filter__label icon icon--small">
<span class="filter__stat" data-small></span>
</span>
</label>
<label class="filter__item" data-tooltip="Terrarium" for="Size_Terrarium">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_Terrarium" name="terrarium" value="1">
<span class="filter__label icon icon--terrarium">
<span class="filter__stat" data-terrarium></span>
</span>
</label>
<label class="filter__item" data-tooltip="Aviary" for="Size_Aviary">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_Aviary" name="aviary" value="1">
<span class="filter__label icon icon--aviary">
<span class="filter__stat" data-aviary></span>
</span>
</label>
<label class="filter__item" data-tooltip="Aquarium" for="Size_Aquarium">
<input class="checkbox filter__checkbox" type="checkbox" id="Size_Aquarium" name="aquarium" value="1">
<span class="filter__label icon icon--aquarium">
<span class="filter__stat" data-aquarium></span>
</span>
</label>
<label class="filter__item" data-tooltip="Rock" for="isRock">
<input class="checkbox filter__checkbox" type="checkbox" id="isRock" name="isRock" value="1">
<span class="filter__label icon icon--rock">
<span class="filter__stat" data-rock></span>
</span>
</label>
<label class="filter__item" data-tooltip="Water" for="isWater">
<input class="checkbox filter__checkbox" type="checkbox" id="isWater" name="isWater" value="1">
<span class="filter__label icon icon--water">
<span class="filter__stat" data-water></span>
</span>
</label>
</fieldset>
<fieldset class="filter__category filter__category--extras">
<legend class="filter__type">Extras:</legend>
<label class="filter__item" for="isBear">
<input class="checkbox filter__checkbox" type="checkbox" id="isBear" name="isBear" value="1">
<span class="filter__label icon icon--bear">
<span class="filter__stat">Bear</span>
</span>
</label>
<label class="filter__item" for="isPet">
<input class="checkbox filter__checkbox" type="checkbox" id="isPet" name="isPet" value="1">
<span class="filter__label icon icon--pet">
<span class="filter__stat">Small</span>
</span>
</label>
<label class="filter__item" for="science">
<input class="checkbox filter__checkbox" type="checkbox" id="science" name="science" value="1">
<span class="filter__label icon icon--science">
<span class="filter__stat">Science</span>
</span>
</label>
<label class="filter__item" for="conservation">
<input class="checkbox filter__checkbox" type="checkbox" id="conservation" name="conservation" value="1">
<span class="filter__label icon icon--conservation">
<span class="filter__stat">C.Points</span>
</span>
</label>
<label class="filter__item" for="reputation">
<input class="checkbox filter__checkbox" type="checkbox" id="reputation" name="reputation" value="1">
<span class="filter__label icon icon--reputation">
<span class="filter__stat">R.Points</span>
</span>
</label>
</fieldset>
<div class="filter__buttons">
<button class="button button--filter" type="reset">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4d7c0f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M13 21h-7a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v7" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l3 3" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0" /><path d="M22 22l-5 -5" /><path d="M17 22l5 -5" /></svg>
<span class="button__title">Reset filters</span>
</button>
<button class="button button--cards">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4d7c0f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13.758 19.414l-4.758 1.586v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v1.5" /><path d="M22 22l-5 -5" /><path d="M17 22l5 -5" /></svg>
<span class="button__title"></span>Reset cards</span>
</button>
</div>
</form>
<div class="info info--extension">
<button class="button button--extension" data-option="extension">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
<span class="button__title">Extension for Board Game Arena</span>
</button>
</div>
<div class="info info--footer">
<div class="info__about">
App for managing and filtering Ark Nova boardgame cards.
<br>
This page is not an official Ark Nova boardgame page.
</div>
<ul class="info__list">
<li class="info__item info__item--homepage">
<a href="https://arknova.cards" class="info__link info__link--home">arknova.cards</a>
</li>
<li class="info__item">
<a href="https://github.com/PixelT/ArkNovaCardsManager" target="_blank" class="info__link info__link--github">github</a>
</li>
<li class="info__item">
<a href="https://pixeltown.dev" target="_blank" class="info__link info__link--code">pixeltown</a>
</li>
<li class="info__item">
<span class="info__text">v0.7.1</span>
</li>
</ul>
</div>
</div>
</div>
<div class="container__outer container__outer--content">
<div class="content">
<div class="topbar">
<div class="topbar__menu"></div>
<form action="#" class="topbar__form">
<div class="topbar__section topbar__section--action">
<div class="topbar__item topbar__item--action" data-label="Animal action:">
<label class="topbar__label topbar__label--action" for="action">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 12h3v4h-3z" /><path d="M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6" /><path d="M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M14 16h2" /><path d="M14 12h4" /></svg>
</label>
<input class="topbar__input" type="text" name="action" value="" id="action" placeholder="Select card action" data-option="action" readonly>
<div class="topbar__reset"></div>
</div>
<div class="topbar__item topbar__item--action" data-label="Sort animals by:">
<label class="topbar__label topbar__label--sort" for="sort">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l4 -4l4 4m-4 -4v14" /><path d="M21 15l-4 4l-4 -4m4 4v-14" /></svg>
</label>
<input class="topbar__input" type="text" name="sort" value="ID - ASC" id="sort" data-option="sort" readonly>
</div>
</div>
<div class="topbar__section filter filter--topbar">
<div class="topbar__item topbar__item--cards" data-label="Animals:">
<input class="checkbox topbar__checkbox" type="checkbox" id="animal" name="category" value="animal" checked="checked">
<label class="topbar__label topbar__label--option topbar__label--animal" for="animal">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 3v10a8 8 0 1 1 -16 0v-10l3.432 3.432a7.963 7.963 0 0 1 4.568 -1.432c1.769 0 3.403 .574 4.728 1.546l3.272 -3.546z" /><path d="M2 16h5l-4 4" /><path d="M22 16h-5l4 4" /><path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M9 11v.01" /><path d="M15 11v.01" /></svg>
<span class="topbar__value" data-animal></span>
</label>
</div>
<div class="topbar__item topbar__item--cards" data-label="Sponsors:">
<input class="checkbox topbar__checkbox" type="checkbox" id="sponsor" name="category" value="sponsor" checked="checked">
<label class="topbar__label topbar__label--option topbar__label--sponsor" for="sponsor">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg>
<span class="topbar__value" data-sponsor></span>
</label>
</div>
<div class="topbar__item topbar__item--cards" data-label="Marine world:">
<input class="checkbox topbar__checkbox" type="checkbox" id="marineExt" name="extension" value="marineExt">
<label class="topbar__label topbar__label--option topbar__label--marine" for="marineExt">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16.69 7.44a6.973 6.973 0 0 0 -1.69 4.56c0 1.747 .64 3.345 1.699 4.571" /><path d="M2 9.504c7.715 8.647 14.75 10.265 20 2.498c-5.25 -7.761 -12.285 -6.142 -20 2.504" /><path d="M18 11v.01" /><path d="M11.5 10.5c-.667 1 -.667 2 0 3" /></svg>
<span class="topbar__value" data-marineWorld></span>
</label>
</div>
</div>
<div class="topbar__section filter filter--topbar">
<div class="topbar__item" data-label="UI:">
<button class="topbar__scheme">
<svg xmlns="http://www.w3.org/2000/svg" class="topbar__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.173 14.83a4 4 0 1 1 5.657 -5.657" /><path d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914" /><path d="M3 12h1" /><path d="M12 3v1" /><path d="M5.6 5.6l.7 .7" /><path d="M3 21l18 -18" /></svg>
</button>
</div>
</div>
</form>
</div>
<div class="content__area">
<div class="content__cards">
<div class="content__animals"></div>
<div class="content__sponsors"></div>
</div>
</div>
</div>
</div>
</div>
<dialog class="dialog dialog--offcanvas dialog--sort" data-modal="sort">
<ul class="dialog__list">
<li class="dialog__item dialog__item--id-asc" data-value="ID - ASC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 3a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 16v3a2 2 0 0 1 -2 2h-1.5" /></svg>
ID - ASC
</li>
<li class="dialog__item dialog__item--id-desc" data-value="ID - DESC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 14a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 5v3a2 2 0 0 1 -2 2h-1.5" /></svg>
ID - DESC
</li>
<li class="dialog__item dialog__item--size-asc" data-value="Size - ASC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M14 5.667c0 -.369 .298 -.667 .667 -.667h2.666c.369 0 .667 .298 .667 .667v2.666a.667 .667 0 0 1 -.667 .667h-2.666a.667 .667 0 0 1 -.667 -.667v-2.666z" /><path d="M14 13.167c0 -.645 .522 -1.167 1.167 -1.167h4.666c.645 0 1.167 .522 1.167 1.167v4.666c0 .645 -.522 1.167 -1.167 1.167h-4.666a1.167 1.167 0 0 1 -1.167 -1.167v-4.666z" /></svg>
Size - ASC
</li>
<li class="dialog__item dialog__item--size-desc" data-value="Size - DESC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 15l-3 3l-3 -3" /><path d="M7 6v12" /><path d="M14 18.333c0 .369 .298 .667 .667 .667h2.666a.667 .667 0 0 0 .667 -.667v-2.666a.667 .667 0 0 0 -.667 -.667h-2.666a.667 .667 0 0 0 -.667 .667v2.666z" /><path d="M14 10.833c0 .645 .522 1.167 1.167 1.167h4.666c.645 0 1.167 -.522 1.167 -1.167v-4.666c0 -.645 -.522 -1.167 -1.167 -1.167h-4.666c-.645 0 -1.167 .522 -1.167 1.167v4.666z" /></svg>
Size - DESC
</li>
<li class="dialog__item dialog__item--price-asc" data-value="Price - ASC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 3a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 16v3a2 2 0 0 1 -2 2h-1.5" /></svg>
Price - ASC
</li>
<li class="dialog__item dialog__item--price-desc" data-value="Price - DESC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 14a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 5v3a2 2 0 0 1 -2 2h-1.5" /></svg>
Price - DESC
</li>
<li class="dialog__item dialog__item--conservation" data-value="Conservation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l9 0" /><path d="M4 12l7 0" /><path d="M4 18l7 0" /><path d="M15 15l3 3l3 -3" /><path d="M18 6l0 12" /></svg>
Conservation
</li>
<li class="dialog__item dialog__item--reputation" data-value="Reputation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l9 0" /><path d="M4 12l7 0" /><path d="M4 18l7 0" /><path d="M15 15l3 3l3 -3" /><path d="M18 6l0 12" /></svg>
Reputation
</li>
<li class="dialog__item dialog__item--type" data-value="Type">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4z" /><path d="M17 14l-3.5 6h7z" /></svg>
Type
</li>
<li class="dialog__item dialog__item--area" data-value="Area">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 5m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z" /><path d="M5 14m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z" /><path d="M14 15l3 3l3 -3" /><path d="M17 18v-12" /></svg>
Area
</li>
<li class="dialog__item dialog__item--name-asc" data-value="Name - ASC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10v-5c0 -1.38 .62 -2 2 -2s2 .62 2 2v5m0 -3h-4" /><path d="M19 21h-4l4 -7h-4" /><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /></svg>
Name - ASC
</li>
<li class="dialog__item dialog__item--name-desc" data-value="Name - DESC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 21v-5c0 -1.38 .62 -2 2 -2s2 .62 2 2v5m0 -3h-4" /><path d="M19 10h-4l4 -7h-4" /><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /></svg>
Name - DESC
</li>
<li class="dialog__item dialog__item--appeal-asc" data-value="Appeal - ASC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 3a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 16m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 16v3a2 2 0 0 1 -2 2h-1.5" /></svg>
Appeal - ASC
</li>
<li class="dialog__item dialog__item--appeal-desc" data-value="Appeal - DESC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="dialog__icon" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 15l3 3l3 -3" /><path d="M7 6v12" /><path d="M17 14a2 2 0 0 1 2 2v3a2 2 0 1 1 -4 0v-3a2 2 0 0 1 2 -2z" /><path d="M17 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 5v3a2 2 0 0 1 -2 2h-1.5" /></svg>
Appeal - DESC
</li>
</ul>
</dialog>
<dialog class="dialog dialog--offcanvas dialog--action" data-modal="action">
<ul class="dialog__list">
<li class="dialog__item" data-value="Action">After finishing this action, you may take the [X] action</li>
<li class="dialog__item dialog__item--marine" data-value="Adapt">Draw X Final Scoring cards, then discard 2 Final Scoring cards.</li>
<li class="dialog__item" data-value="Assertion">You may add any 1 of the unused base conservation projects to your hand</li>
<li class="dialog__item" data-value="Boost">After finishing this action, you may place your [X] Action card on 1 or 5</li>
<li class="dialog__item" data-value="Clever">After finishing this action, you may place any Action card on 1</li>
<li class="dialog__item" data-value="Constriction">Each player ahead of you on a track gains 1 Constriction token for each of those tracks</li>
<li class="dialog__item dialog__item--marine" data-value="Cut Down">You may remove 1 empty standard enclosure from your zoo map and gain back its cost.</li>
<li class="dialog__item dialog__item--marine" data-value="Camouflage">If you play 1 other animal during this turn, you may ignore 1 of its conditions.</li>
<li class="dialog__item" data-value="Determination">After finishing this action, you take 1 other action</li>
<li class="dialog__item" data-value="Digging">Choose up to [X]x: Discard 1 card from the display and replenish OR discard 1 card from your hand and draw 1 other from the deck</li>
<li class="dialog__item" data-value="Dominance">You may add the base conservation project Primates to your hand if it is not already in the game</li>
<li class="dialog__item dialog__item--marine" data-value="Extra Shift">You may return 1 of your association workers to your notepad</li>
<li class="dialog__item" data-value="Flock Animal">May share the existing enclosure of a Herbivore with X+</li>
<li class="dialog__item" data-value="Full Throated">Hire an association worker</li>
<li class="dialog__item dialog__item--marine" data-value="Glide">Discard up to X cards from your hand. For every Sea icon of them, gain 1 of these 3 effects: 1 / 2 / pavilion</li>
<li class="dialog__item" data-value="Hunter">Reveal the X topmost cards of the deck. Choose 1 animal card and add it to your hand. Discard the other cards</li>
<li class="dialog__item" data-value="Hypnosis">After finishing this action, you may take 1 action from an Action card in slot 1, 2 or 3 of the player with the most points</li> <!-- to do points-->
<li class="dialog__item" data-value="Iconic Animal">Gain 1 point for each X icon in all zoos (max. 8)</li>
<li class="dialog__item" data-value="Inventive">Gains 1/2/3 tokens for 1/3/5 primate icons in your zoo</li>
<li class="dialog__item" data-value="Jumping">Advance the break token X spaces. Gain X</li>
<li class="dialog__item dialog__item--marine" data-value="Mark">After finishing this action, may 1 Animal card in the display.</li>
<li class="dialog__item dialog__item--marine" data-value="Monkey Gang">Reveal cards from the deck. Take the first card with Monkey into your hand. Tuck the other cards under the deck.</li>
<li class="dialog__item" data-value="Multipler">Place 1 x2 on your X Action card</li>
<li class="dialog__item" data-value="Pack">Gain 1 point for each predator icon in your zoo</li>
<li class="dialog__item" data-value="Peacocking">You may place a Large Bird Aviary for free, if possible</li>
<li class="dialog__item" data-value="Perception">Draw 4 cards from the deck. Add 2 to your hand and discard the rest</li>
<li class="dialog__item" data-value="Petting Zoo Animal">Gain 3 poinst for each Petting Zoo Animal icon in your zoo</li>
<li class="dialog__item" data-value="Pilfering">Draw 1 card from the hand of or take 5 from the player with the most points. They decide.</li>
<li class="dialog__item" data-value="Posturing">You may place 1 free kiosk or pavilion</li>
<li class="dialog__item" data-value="Pouch">You may place 1 card from your hand under this card to gain 2 point</li>
<li class="dialog__item" data-value="Resistance">Draw 2 Final Scoring cards. Keep 1 and discard the other.</li>
<li class="dialog__item" data-value="Scavenging">Shuffle the discard pile and draw X cards. Add 1 to your hand and discard the others.</li>
<li class="dialog__item dialog__item--marine" data-value="Scuba Dive">Reveal the X topmost cards of the deck. Choose 1 Sponsor card and add it to your hand. Discard the other cards. X is the number of Sea + Reptile in your zoo.</li>
<li class="dialog__item dialog__item--marine" data-value="Sea Animal Magnet">Add all cards with the Sea icon from the display to your hand.</li>
<li class="dialog__item dialog__item--marine" data-value="Shark Attack">Discard X Animal cards in reputation range from the display. Gain half the points of those cards (round down).</li>
<li class="dialog__item" data-value="Snapping">Gain any 1 card from the display.</li>
<li class="dialog__item" data-value="Sponsor Magnet">Add all sponsors cards from the display to your hand</li>
<li class="dialog__item" data-value="Sunbathing">You may sell up to X cards from your hand for 4 each</li>
<li class="dialog__item dialog__item--marine" data-value="Symbiosis">Use 1 ability (not a Reef Dweller effect) of 1 other Sea card in your zoo.</li>
<li class="dialog__item dialog__item--marine" data-value="Trade">You may trade exactly 1-X Marker of 5 or vice versa.</li> <!-- TODO -->
<li class="dialog__item" data-value="Venom">Each player ahead of you on the Appeal track gains X Venom token(s).</li>
</ul>
</dialog>
<dialog class="dialog dialog--modal" data-modal="extension">
<p>
<strong>Overwiev:</strong><br>
This script snippet will add additional button to the <span class="dialog__info-link">boardgamearena.com</span> game table which will link to <span class="dialog__info-link">arknova.cards</span> page with predefined filters based on base projects on current game / table.
It will help you to quickly check cards for your actual game without need to manually select base projects.
</p>
<p>
To run this script you need to have installed browser extension which allows you to run UserScripts - <a class="dialog__link" href="https://www.tampermonkey.net/" target="_blank">Tampermonkey</a>
</p>
<img src="./dist/images/general/web_1.jpg" class="dialog__ext-image" alt="">
<p>It will also mark with green icon the cards on your hands that fulfil the basic projects:</p>
<img src="./dist/images/general/web_2.jpg" class="dialog__ext-image" alt="">
<p>
<strong>Installation:</strong><br>
Open github gist link: <a class="dialog__link" target="_blank" href="https://gist.github.com/PixelT/78e55bf502631bdb168dcd4fa2cca622">https://gist.github.com/PixelT/78e55bf502631bdb168dcd4fa2cca622</a> and copy <span class="dialog__info-link">arknova.cards.bga.shortcut.js</span> content as new Tampermonkey script / or just click the <span class="dialog__info-link">Raw</span> button to install it automatically.
</p>
</dialog>
<div class="scroll"></div>
<div class="overlay"></div>
<script src="./dist/app.js" defer></script>
</body>
</html>